Issue #226 (Call Stack, Productivity, Front-end Frameworks, Testing)
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.
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!
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.
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.
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.
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).
Yes, this is still a thing. Now at version 6+ with nearly 40,000 GitHub stars.
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.
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!