Web Tools Weekly
What a Tool!

Issue #266  (Radio.value, Productivity, Front-end Frameworks, Text Editors)

At some point when reading about scope in JavaScript, you may have come across the term hoisting. It's often used in the context of variable or function definitions.

For example, consider the following code:


for (i = 0; i <= 10; i++{

function doSomething() {
  console.log('function executed');

View on JS Bin

Although the doSomething() function is called before it's defined, the code still works. In fact, the for loop isn't started until the JavaScript engine figures out that doSomething() is defined and can execute the call.

In many blog posts and books over the years, this is what is referred to as "hoisting". For example, Doug Crockford's popular book JavaScript: The Good Parts, says:

"function statements are subject to hoisting. This means that regardless of where a function is placed, it is moved to the top of the scope in which it is defined."

Similarly, David Flanagan's JavaScript: The Definitive Guide says:

"This feature ... is informally known as hoisting: JavaScript code behaves as if all variable declarations in a function ... are 'hoisted' to the top of the function."

Flanagan gets it more right than Crockford because he correctly points out that "hoisting" is an informal term and uses the phrase "as if" to indicate that this isn't what's actually happening.

For all practical purposes, most explanations about hoisting are fine and serve their purpose in helping understand how things work. But here's what the authors of Secrets of the JavaScript Ninja say about hoisting:

"Variables and function declarations are technically not 'moved' anywhere. They're visited and registered in lexical environments before any code is executed."

This is what Flanagan was more or less alluding to but which the above quote makes more explicit. That latter book has a fairly extensive section within one of the chapters that discusses lexical environments, so be sure to grab a copy if you want to expand your understanding of that subject.

Now on to this week's tools!

Did you enjoy this week's coding tip? Previous tips are compiled in my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


Testing and Debugging Tools

A simple tool to debug GSAP animations in React.

Now at version 3+ (details). Auditing, performance metrics, and best practices for Progressive Web Apps.

A macOS app for quick access to WCAG color contrast ratios.

Lightweight utility functions to test Angular components.

An extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.

Online tool. A set of TSLint rules for static code analysis of Angular TypeScript projects.

Chrome extension to inspect and find domains that don't resolve or have expired.

Detect copy-pasted and structurally similar JavaScript code.

A library for generative, property-based testing in TypeScript.

Runs during your continuous integration process, and allows you to automate common code review chores.

Recommended Reading for Developers
Learning React Book   You Don't Know JS: this & Object Prototypes book   Using SVG with CSS3 & HTML5 book

BTW - If you've written a book for developers that's available on Amazon, reply to this email and let me know. I'll consider including it here. No charge.

Git, GitHub, and Command Line Tools

Supercharges the Git capabilities built into VSCode. Helps you visualize code authorship via Git blame annotations and code lens, explore Git repositories, gain insights via comparison commands, and more.

Release Drafter
Drafts your next release notes as pull requests are merged into master.

Now at version 2+ (details). A terminal built on web technologies.

Generate material design icons from the command line.

Now at version 7+. GitHub Apps to automate and improve your workflow. Use pre-built apps to extend GitHub, and easily build and share your own.

Term Sheets
Online tool to create animated terminal presentations. Export as SVG, animated GIF, or HTML+CSS.

Tasks, boards, and notes for the command-line habitat.

Record your terminal and generate animated GIF images.

Git version control For Excel. Extends Git to make it work with spreadsheets and VBA.

Display images in the terminal. Works in any terminal that supports colors.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Vue Tools

Simple server-side-rendering plugin for Vue CLI.

A simple dashboard layout library powered by Vue.

GUI for vue-cli UI.

Complex loader and progress management for Vue/Vuex and Nuxt.js applications.

A library of Vue components that facilitates front-end development and streamlines work with great visual quality.

Create native desktop applications for Windows, OSX, and Linux using Vue.

Vue Native
A framework to build cross-platform native mobile apps using JavaScript.

A powerful, customizable, multi-mode scrollbar plugin based on Vue.

Now at version 4+ (details). Browser devtools extension for debugging Vue applications (Chrome, Firefox or standalone Electron app).

Vue event bus plugin listening for online/offline changes.

A Tweet for Thought

If you have a parent who didn't like your rabid computer use as a child/teen, then you'll relate to 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...

Flashcards for Developers is a site of self-graded tests to help you brush up on your understanding of a specific developer-related or programming topic.

Thanks to all for subscribing and reading!

Keep tooling,