Web Tools Weekly Issue #318 (JS Scope, Media, Text Editors, JS Lib Plugins)

Issue #318 (JS Scope, Media, Text Editors, JS Lib Plugins)08/22/19

If you like deep dives into native JavaScript features, you'll appreciate this video by the Chrome Developers team (specifically, Jake and Surma of the HTTP 203 show).

They discuss scope in JavaScript, which is a topic that's been covered many times elsewhere. But I did learn something new, which you can see around the 5:00 mark (but best to watch the first 5-6 minutes at least).

As you probably know, other than the global scope and function scope, block-level scoping only started in ES6 with let and const. But, as mentioned in the video, there are two other JavaScript features that also used block-level scoping prior to ES6.

I'll let you watch the video to get the answer, but try to guess what features those are before viewing it. Most people probably won't get this one right. I certainly didn't.

Now on to this week's tools!

Media Tools (Images, Audio, SVG, etc.)

Optimole Image Optimization Service
Mobile image optimization simplified. An easy to set up option for custom-sized images for every screen dimension and resolution. With lazy loading, Cloudfront delivery, and intelligent cropping, you can deliver fast sites with just one service. sponsored

Chart.xkcd
An SVG-based JavaScript chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts (as found in the comic).

Verby
Free text to speech converter. Create and download natural voices as mp3 audio files. For personal or commercial use.

Isometric
A collection of free, beautiful, SVG isometric illustrations, that you can use in your website, app or in any project.

React Dynamic Charts
A React library for creating animated chart visualizations based on dynamic data.

JSCharting
JavaScript charting library with 150+ chart types, interactive stock charts, data grids, calendars, maps, and more.

react-awesome-player
Video.js component for React.

Olive
Still in Alpha. Professional, open-source, non-linear video editor for Windows, macOS, and Linux.

Paaatterns
Free collection of beautiful patterns for all vector formats. For Sketch, Figma, XD, Illustrator. Available in PNG and SVG.

Shape
A large collection of animated icons and illustrations that can be exported as code.

Wad
Now at version 4+. JavaScript library for manipulating audio using the Web Audio API. It greatly simplifies the process of creating, playing, and manipulating audio.

Pie Chart Maker
Tool to generate custom pie charts. Choose colors, patterns, and lots more to better illustrate your data.

Text Editors and IDEs

Reactide
Now at version 3+. The first dedicated IDE for React web application development.

Tailwind.run()
A Tailwind CSS Playground with support for custom build configuration.

Quark
A general purpose software tool specifically designed to help you create projects written in HTML, CSS and JavaScript with native desktop app like capabilities.

Coc
Intellisense engine for Vim 8 and Neovim. A completion framework and language server client that supports the extension features of VSCode.

Codelines
A VSCode extension that lets you create programming articles inside the IDE by integrating rich text with your code.

Angular Console
Angular Console for VSCode. The user interface app for the Angular CLI.

Electron Fiddle
The easiest way to get started with Electron by letting you create and play with small Electron experiments.

Vim Free Drag
Vim plugin that enables the movement of rectangular blocks of text, selected using Vim's visual block mode.

Web Template Studio
VScode extension by Microsoft that enables developers to quickly scaffold full-stack web applications with cloud services.

Angular Essentials
An extension pack for VSCode, for Angular developers.

JavaScript Library Tools and Plugins

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech. promoted

Angular Tracer for View Updates
Chrome extension that enables highlighting view updates in Angular applications built with ViewEngine.

Social Share Privacy
An old jQuery plugin that adds to your website social share buttons that don't allow the social sites to track your users.

Nx
A set of extensible dev tools for monorepos to help you build full-stack applications using Angular and Node.js frameworks such as Nest and Express.

svelte-adapter
A simple utility that allows you to use Svelte components inside React or Vue components.

jBox
A jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries, and more.

chessboard.js
jQuery plugin. The easiest way to embed a chess board on your site.

jExcel
Light, totally free, jQuery plugin to embed a spreadsheet compatible with Excel in your website or application.

jQuery-csv
A complete, customizable, battle tested, performance optimized CSV parser that follows the traditional jQuery-style of syntax.

Angular-Cesium
JavaScript library for creating map based web apps using Cesium and Angular.

TSDoc
A doc comment standard for TypeScript. A proposal to standardize the doc comments used in TypeScript source files. It allows different tools to extract content from comments without getting confused by each other's syntax.

A Tweet for Thought

The "save" icon in many programs is a small image of a floppy diskette. But apparently, younger people might not know this.

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Version Museum is a visual history of your favorite technology. Includes images documenting the history of popular websites, operating systems, applications, and games.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris