Web Tools Weekly
What a Tool!

Issue #265  (Hoisting, Testing, Git/CLI, Vue)

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:

doSomething();

for (i = 0; i <= 10; i++{
  console.log(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

(EPUB, MOBI, and PDF)

Testing and Debugging Tools

GsapTools
A simple tool to debug GSAP animations in React.

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

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

ngx-testing-library
Lightweight utility functions to test Angular components.

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

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

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

jsinspect
Detect copy-pasted and structurally similar JavaScript code.

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

Danger
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

GitLens
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.

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

mdi-cli
Generate material design icons from the command line.

Probot
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.

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

Terminalizer
Record your terminal and generate animated GIF images.

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

terminal-image
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

vue-cli-plugin-ssr
Simple server-side-rendering plugin for Vue CLI.

dirk
A simple dashboard layout library powered by Vue.

vue-cli-gui
GUI for vue-cli UI.

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

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

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

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

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

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

vue-connection-listener
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,
Louis
webtoolsweekly.com
@WebToolsWeekly