Issue #226 (Call Stack, Productivity, Frameworks, Testing)11/16/17
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!
|
Productivity Tools
Loomio
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.
Flow-e
Turn your Gmail or Office365 inbox into a visual task board.
Notion
A unified and collaborative workspace for your notes, wikis, and tasks.
Station
The first smart workstation for busy people. A single place for all of your work applications.
Pastel
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.
Tyke
A little bit of scratch paper that lives on your Mac menu bar.
Ghostit
Service that assigns you a personal writer who regularly creates and posts all your content through our smart software.
FlagTimes
The macOS time zone app for anyone working in multiple time zones.
Brief
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-wp-starter
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.
Vanilla
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.
UnderExpress
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.
Hare
Application boilerplate based on Vue.js 2.x, Koa 2.x, Element-UI and Nuxt.js.
Material-UI
Now at version 1+ (beta). A set of React components that implement Google's Material Design.
Ream
Framework for building universal web apps and static sites. Boilerplate-free, pluggable renderer, extensible webpack config, and more.
RTLCSS
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.
|
Testing and Debugging Tools
BugReplay
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-plugin-fp
ESLint rules for functional programming.
Mockoon
The easiest and quickest way to run mock APIs locally. No remote deployment, no account required.
Timber
A new kind of cloud-based logging system designed for applications and developers. Spend less time debugging and more time shipping.
AccessLint
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.
Dffer
Sends notifications for website changes. Let the service know what to track and they'll email you when a change is detected.
SiteStacks
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
