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

DesignBombs Design Bombs was originally started as a web design gallery but recently it become a place to share web design ideas, tutorials, and other helpful resources. Visit DesignBombs Now

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:

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!

Testing and Debugging Tools

Top 10 Free Website Speed Test Tools of 2018
Speed can make or break your website or app. Use one of these tools to test and debug your site or app's performance.  sponsored 

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.

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.

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
@LouisLazaris