Issue #269  (Hoisting Exceptions, CSS/HTML, Media, Testing)09/13/18

WebTools Weekly Exclusive: 50% off on DragDropr! Build lightning fast landing & content pages for any CMS (WP, Magento, Shopify,...) using our easy-to-use drag-and-drop editor. 50+ templates — 200+ content blocks — fully responsive — client-accounts! Don’t miss out on this perfect tool for freelancers, agencies, and everyone in between.  Save now for 48hrs only!

In a previous quick tip I talked briefly about the concept of variables and functions being "hoisted", thus allowing us to access them before they're even defined. As certain books and references correctly explain, and as I previously pointed out, these aren't really "moved", they're merely visited and registered before any code is executed.

With that concept in mind, let's consider the following code:

Try it on JS Bin

Based on the concept of "hoisting", logic tells us that all three logs at the top should return the string "function". But this doesn't happen; two of them return "undefined".

This happens because two of the functions are a function expression and an arrow function, while the first is a function declaration. The function expression and the arrow function are initially undefined because they're created when the program execution reaches that point in the script.

Therefore unlike function declarations, they aren't "visited" (or "hoisted") in the same way because of how they're defined. Of course, after the JavaScript parser reaches those lines, it then recognizes that they are all functions, so the last three logs work as expected.

Just another point to keep in mind in relation to function definitions and the concept of "hoisting".

Now on to this week's tools!

CSS and HTML Tools

WebTools Weekly Exclusive: 50% off on DragDropr!
Don't miss the ONLY universal drag&drop visual builder that works with any CMS and standalone! Web Tools Weekly readers will get 50% off for the next 48 hours only. Buy now and save forever!  sponsored 

Cognito Forms
A free online form builder that allows you to easily create powerful forms for your website. Create contact forms, registration forms, order forms, and more.

Stack Styled
React component to make stack layouts easy: adds horizontal and vertical white space between child elements but not around the container. Based on styled-system and CSS Grid.

Email Design System For Sketch
One Sketch file, 10 templates, desktop and mobile, reusable components and styles, ready for you to customize HTML emails.

React Animate Height
Lightweight, no dependency React component for animating height using CSS transitions.

JSS
A 6KB (min + gzip), high-performance, extensible, JS to CSS compiler (runtime and server side) abstraction over CSS that uses JavaScript to describe styles in a declarative and maintainable way.

figma-theme
Generate development-ready theme JSON files from Figma Styles.

Finch.io
Chrome extension. Save, version and share Chrome DevTools Styles changes. All changes you make in your CSS inside DevTools Styles will be saved locally on your computer.

Linaria
A zero-runtime CSS-in-JS library.

react-scroll-shadow
Pure CSS shadow component for React to indicate more content in a scrollable area.

Tutorial Markdown
A small JavaScript library that allows (with some data attributes) for a tutorial to type, and execute its code as you scroll through the document. Definitely view the demo to see this working.

Media Tools (SVG, Canvas, Audio, etc.)

Async
Async is a communication and project management tool for small engineering teams to build great software. No real-time chat – use long-form, asynchronous discussions so you and your engineers can work without interruption. sponsored 

SVG 3D Builder
An elaborate tool to create 3D models with SVG.

react-apexcharts
React.js wrapper for the ApexCharts.js charting library to build interactive visualizations in React.

canvas-sketch-util
Utilities for sketching in Canvas, WebGL and generative art.

SVGInject
A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM.

react-circle
SVG-based circle percentage progress indicator.

yall.js
A fast, flexible, and small image lazy loader.

ImageKit.io
Automate image optimization on all platforms. Intelligent real time image optimization, resizing, cropping and super fast delivery.

React Annotation
Similar to d3-annotion, allows you to create and customize SVG-based annotations in your React apps.

The Doodle Library
Increase comprehension, retention, and delight your audience with hundreds of free (CC 4.0), unique vector SVG doodles.

react-image-appear
React component to make images appear with transition as they load.

Audio DSP Playground
A Web Audio API Playground for Audio DSP (digital signal processing).

Testing and Debugging Tools

Zeu.js
JavaScript library featuring a collection of pre-built visualization components for building a real-time TV dashboard, monitoring UI, or IoT web interface.

Puppeteer Recorder
Chrome extension that records your browser interactions and generates a script for Puppeteer (the Headless Chrome Node API).

Dumper.js
A better and pretty variable inspector for your Node.js applications.

Just-API
A declarative, specification based test framework for REST, GraphQL (or any HTTP-based) APIs.

Cypress.io
Now at version 3+ (details). Fast, easy, and reliable testing for anything that runs in a browser. Install in seconds and take the pain out of front-end testing.

React Developer Tools
Chrome extension, now at version 3+. Allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

BackstopJS
Also now at version 3+ (details). Automates visual regression testing of your responsive web UIs by comparing DOM screenshots over time.

Ezoic Content Tester
Lets you create unlimited variations of your content and scientifically test what versions perform better.

PerOps
Simplifies monitoring of global and distributed network applications. Use real-time data to monitor network performance, diagnose issues, and identify bottlenecks quickly.

What browser am I using?
Share your browser details with your team, tech support, or get info from your client via a URL.

webhint
A linting tool that will help you with your site's accessibility, speed, security and more, by checking your code for best practices and common errors.

A Tweet for Thought

If you don't view yourself as a great programmer, these might be refreshing words to hear (and great advice) from a great programmer.
 

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

If you're into podcasts, Podmap lets you find new podcasts based on geographic location.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris