Web Tools Weekly
What a Tool!

Issue #226  (Call Stack, Productivity, Front-end Frameworks, Testing)

If you're new to JavaScript or if you've had trouble understanding how JavaScript code executes in comparison to other programming languages, it might help to get familiar with how the call stack works.

The book Secrets of the JavaScript Ninja has a good section covering this, but here is a quick summary along with a test page that you can use to demonstrate how the call stack works.

When code is being executed, each statement is executed in one of two types of execution contexts: global and function. When a function is invoked, the current execution context is stopped and a new context is created. When that function has performed its task, that context is discarded and the previous context is restored.

These different contexts are tracked by the JavaScript engine using a call stack. To steal the book's beautiful illustration, the stack is like a pile of trays in a cafeteria; new trays are added to the top and trays taken away from the stack are removed from the top. Execution contexts work the same way, always being added or removed from the top of the stack.

To make this easy to see in action, I've set up a demo page that runs a simple bit of JavaScript that nicely illustrates this. In order to see how this works, open the page in a private window (to disable add-ons and whatnot) then open your browser's developer tools (F12). The developer tools have a way to view the call stack as it changes, helped out by using JavaScript's debugger statement (see Issue #182).

Using either the "Sources" tab or the "Debugger" tab (depending on the browser), refresh the page and then use the "Step into..." button to step through the different parts of the code.

As shown in the above screenshot, you can see the "Call Stack" in the right pane, along with the "Scope" and the value of the this keyword at the current point in the code. I'm using strict mode, so the value of this will occasionally differ from non-strict mode.

There's much more to say about this subject (here's an article that might help), but this should serve as a rudimentary introduction to the concept of the call stack, and the demo with the help of dev tools should be a decent albeit simple way to visualize how it works.

Now on to this week's tools!

Did you buy my previous JavaScript/DOM tips book? Here's the latest one...
70 JavaScript & DOM Tips for $5 (Volume 2)

Productivity Tools

A safe place to have considered discussions and make decisions away from social media. It's a secure and searchable archive of your discussions, decisions, and files.

Turn your Gmail or Office365 inbox into a visual task board.

A unified and collaborative workspace for your notes, wikis, and tasks.

The first smart workstation for busy people. A single place for all of your work applications.

Allows you to gather rapid feedback from clients and your team on live websites. Anyone can add sticky notes to a page in 10 seconds.

Win the Day
Chrome extension. Transform your browser to improve focus and increase productivity.

A little bit of scratch paper that lives on your Mac menu bar.

Service that assigns you a personal writer who regularly creates and posts all your content through our smart software.

The macOS time zone app for anyone working in multiple time zones.

Chrome extension that adds a word counter to the compose and reply views in Gmail and disables sending if an email is longer than 125 words.

Front-end Frameworks

Headless WordPress + React Starter Kit. It's an automated toolset that will spin up A WP back end and a server-side rendered React frontend using Next.js.

A simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.

Stripe Elements
Rich, pre-built UI components that help you create your own pixel-perfect checkout flows across desktop and mobile.

A free, ready to use and completely customizable HTML UI Kit. 100+ components and 8 website landing page templates built on Bootstrap 4.

Tailwind CSS
A utility-first CSS framework for rapid UI development.

Application boilerplate based on Vue.js 2.x, Koa 2.x, Element-UI and Nuxt.js.

Now at version 1+ (beta). A set of React components that implement Google's Material Design.

Framework for building universal web apps and static sites. Boilerplate-free, pluggable renderer, extensible webpack config, and more.

Framework for converting left-to-right (LTR) CSS to right-to-left (RTL).

HTML5 Boilerplate
Yes, this is still a thing. Now at version 6+ with nearly 40,000 GitHub stars.

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

Testing and Debugging Tools

Save time with better bug reports. Browser screen recording synchronized with network traffic and developer console logs.

Extension Compatibility Tester
If you develop Firefox extensions, use this tool to test your extension’s compatibility with Firefox.

ESLint rules for functional programming.

The easiest and quickest way to run mock APIs locally. No remote deployment, no account required.

A new kind of cloud-based logging system designed for applications and developers. Spend less time debugging and more time shipping.

Automated and continuous web accessibility testing. A GitHub app that finds accessibility issues in your pull requests.

Color Contrast Checker
Recently updated. An on-page foreground/background color contrast checker, for accessibility.

ES Check
Checks JavaScript files against a specified version of ECMAScript with a shell command.

Sends notifications for website changes. Let the service know what to track and they'll email you when a change is detected.

Discover the tech stack for any website.

A Tweet for Thought

Dave's views on what he wants in 2018 in web development might reflect your own views.

Suggestions / Corrections

Made something? Send links via 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...

Stack Overflow has a Salary Calculator, if you're curious what the average salary is for someone in your field with your experience, education, and in your geographic location.

Thanks to all for subscribing and reading!

Keep tooling,