Issue #338 (JS Promises, CSS/HTML, Testing, Uncats)01/09/20
If you haven't done any research on JavaScript's new Promises feature (which was added in ES6), the best and most approachable article I've found so far is JavaScript Promises: Zero To Hero Plus Cheat Sheet by Joshua Saunders. It's a Medium article, so open it in Private/Incognito mode if you hit their paywall.
The article covers:
- What is a Promise with some skeleton code, and builds from there
- How do Promises interact with surrounding code (e.g. order of execution)
- How to respond when a Promise is done
- Promises vs. Callbacks (if you want a bit of a history lesson, I wrote an article back in 2012 on callbacks)
- Chaining Promises
- A bunch of CodePen demos as interactive "cheat sheets"
- And lots more...
This articles does exactly what any good technical content should do: Build slowly and don't assume too much knowledge from the reader.
Overall this is a really nicely written article on a subject that might be a little intimidating to those newer to JavaScript and maybe have never really had to deal with the concept of "callback hell".
Now on to this week's tools!
|
CSS and HTML Tools
Shadows
Online tool to make box shadows look smoother using layered shadows.
css.gg
500+ minimalist, customizable icons built entirely with CSS.
Animated CSS Background Generator
This is a bit of a hack, has a lot of code, and might cause performance problems.
Happy Hues
A color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
CSS Layout
A collection of popular layouts and patterns made with CSS.
Paged.js
A collection of Paged Media polyfills, to display paginated content in the browser and to generate print books using web technology.
CSS Scroll Shadows
Online tool to create shadows to make scrollable page areas more obvious that they're scrollable.
Ladda
A set of buttons that incorporate a loading icon into their UI.
CSS Flexbox Cheatsheet
VSCode extension that lets you open a flexbox cheatsheet directly in the editor.
Colour.Ninja
A color transition tool that calculates the transition colors between two picked colors, to build a color palette from the selected colors.
CSS Optimizer
Now at version 4+ (details). A CSS minifier that performs three sorts of transformations: cleaning, compression, and restructuring (merging of declarations, rule sets, etc).
|
Testing and Debugging Tools
OneClickTest.com
A free online service for creating user tests of UI based on the "first click" method.
Treo
Page speed monitoring service powered by Lighthouse with easy-to-use data reports and performance budgets and alerts.
Hexadecimal
Website uptime monitoring service with versatile alerting (email, SMS, Slack), hands-on support, certificate expiry checks, and team features.
Hitchcock
A debugging tool for React Suspense. It wraps your calls to React.lazy(), provides a simple cache, and lets you pause, delay, or invalidate your promises.
Cockatiel
A resilience and transient-fault-handling library that allows developers to express policies such as Backoff, Retry, Circuit Breaker, Timeout, Bulkhead Isolation, and Fallback. Inspired by .NET Polly.
CritiMon
Get instant crash and error notifications no matter your development stack.
Web Audit
A simplified and easy-to-use item checklist to audit your website for proper formatting, performance, accessibility, and security standards.
ngrok
Allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.
Linkinator
A super simple site crawler and broken link checker.
Library Detector
Now at version 5+. Chrome extension that detects JavaScript libraries running on a page and displays their icons in the address bar.
is-website-vulnerable
Finds publicly known security vulnerabilities in a website's front-end JavaScript libraries.
Lighthouse CI
A set of commands that make continuously running, asserting, saving, and retrieving Lighthouse results as easy as possible.
|
The Uncategorizables
ToolsYEP
A set of online tools including URL encode/decode, web page to plain text converter, metatags checker, keyword density checker, and more.
Hypothesis
Annotate the web, with anyone, anywhere.
Kno
The simplest way to add superior passwordless authentication to your website.
Zenscrape
Hassle-free data extraction. A scraping API that handles all problems related to web scraping to make HTML extraction easier.
OK2 Short URL
A simple URL shortening service with a free and paid plan that offers extra tracking features and lots more.
Headway
A changelog service to keep your customers in the loop about your product.
Zenserp
SERP API that enables you to scrape search engine result pages in real time without interruption.
GooFonts
A Google Fonts search engine that's been organized with custom tags to make it easier to find lesser-used fonts.
Code Surfer
Adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.
Cronhooks
Enables you to schedule webhooks via API and dashboard and instantly notifies you in case of any failure.
|
A Tweet for Thought
I think we all feel this way about our JavaScript "expertise".
PS - Last week's "2nd most-clicked Tweet of 2019" was accidentally a broken link. Here's the correct link to Erin's hilarious tweet.
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...
Cookie Status attempts to amalgamate all the different bits of information on how different browsers are handling browser tracking prevention.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
