#486 — May 1, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

???? I18n Ally: An All-in-One i18n Extension for VS Code — Got some internationalization work to do? I18n Ally gives you inline annotations, automated translations via Google Translate (which you can review), progress indication, etc. Supports React, Angular, Vue and other frameworks.

Anthony Fu

How a Few Lines of Code Broke Lots of Packages — Just under a week ago, people were reporting that create-react-app was broken. The culprit? A tiny change in a tiny dependency: is-promise. Luckily a fix was out very quickly and the creator of is-promise reflects on what happened here. Liran Tal also has some analysis of the situation.

Forbes Lindesay

Identify Front-End Issues Like JavaScript or Network Errors Fast — Datadog’s algorithmic alerts will proactively alert on any client-side issues such as JavaScript and network errors. Optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics.

Datadog sponsor

Q: A JavaScript 'Quantum Circuit' Simulator — Bring quantum computing to your browser with this JavaScript simulation. If you were never quite sure what your JavaScript code was going to do, now you can formally explore the concept ????

Stewart Smith

???? Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

Senior Full-Stack Developer (Malmö/Sweden) — Every day is different from the next. Join our upbeat Team and work on exciting, major projects using a modern JavaScript stack.

Ortelius AB

???? Tutorials

A Guide to window.location — A breakdown that covers most of the methods and properties available on the DOM’s window.location object.

samantha ming

Implementing Dark Mode in React Apps Using styled-components

Blessing Krofegha

▶  Let's Build a Financial Dashboard App with React (Webinar On‑Demand) — Join TJ VanToll as he walks you through building a responsive Bootstrap-themed Stocks Portfolio app. Check it out today.

Progress KendoReact sponsor

Getting Started with NuxtJS — Learn how to create Vue.js-powered server-side rendered apps with NuxtJS including configuring an app and deploying it on Heroku.

Timi Omoyeni

▶  Learn Svelte: A 16-Part Course on Learning the Popular UI Framework — The course centers around building a chatbot, which is a nice change from the todos and other overused tutorial examples.

noah kaufman

10 Practical JavaScript Tricks — These kinds of lists are usually pretty run of the mill, but this one actually contains some lesser-known quick tips that you may not have seen before.

zander shirley

Moving TinyMCE to Modern JavaScript — The creators of TinyMCE (a popular WYSIWYG HTML editor) have been refactoring its rather legacy JavaScript (the first version came out 17 years ago!) to modern practices.

Joakim Lindkvist

7 JavaScript Design Patterns Every Developer Should Know — This is sort of like a (very) mini version of Addy Osmani’s 2017 book on JS design patterns (which is referenced at the end of the post).

deven rathore

▶  An Introduction to State Machines Using XState — XState is a neat way to work with state machines in JavaScript, Kyle is a neat teacher, and Egghead is a neat platform for unlocking these videos for us too.

Kyle Shevlin

Ride Down Into JavaScript Dependency Hell

AppSignal sponsor

A Collection of Challenging TypeScript Exercises — “The goal: Let everyone play with many different TypeScript features and get an overview of TypeScript capabilities and principles.”

Marat Dulin

A Visual Guide to React Mental Models — Different people learn in different ways but good mental models are always valuable and can be helpful if you need to juggle all of the pieces involved in a framework like React.

Obed Parlapiano

Turning Vue Components Into Reusable npm Packages — Outlines how you can reuse Vue components across your projects by automating your process to bundle, test, document, and publish your components.

Sjoerd de voorhoede

???? Code & Tools

jExcel v4: A Vanilla JS Interactive Table / Spreadsheet Control — 4.0 adds support for tabs/workbooks, updating a remote data source with JSON, formula support in a sheet footer, and more. There are lots of demos and examples on the official homepage.

Paul Hodel

Will It CORS? — A handy online tool/wizard for establishing how your (potential) use case will (or won’t!) operate alongside CORS (Cross-Origin Resource Sharing).

HTTP Toolkit

Get Great Visual Feedback & Bug Reports, Even from Non-Technical Folk — Simply click a page element to pin visual feedback with screenshots & metadata. BugHerd = fast and easy bug tracking.

BugHerd sponsor

utfu: Replace Busted Characters From Legacy Text with UTF-8 — Useful when old content contains characters like “— in place of a single quote, and similar legacy text issues.

Daniel Sieradski

Middy 1.0: A Node Middleware Framework for AWS Lambda — Middy’s aim is to make writing serverless functions (hosted on AWS Lambda) easier by providing a familiar middleware abstraction to Node developers.

Luciano Mammino

useWorker() 3.0: A React Hook for Blocking-Free Background Tasks — Makes it easier to throw tasks off to a Web Worker in React.

Alessio Koci

webpack-blocks: Configure webpack using Functional Feature Blocks

Andy Wermke

JZZ: A MIDI Library for Node and the Browser — Send, receive and play MIDI messages from both Node and the browser on Linux, macOS and Windows.

Sema

MDX 1.6: Use JSX in Markdown Documents — This version introduces initial Vue support.

Compositor and Vercel

#487 — May 8, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Jest 26 Released: The Popular Testing Framework — Jest is a popular testing framework that works with pretty much everything. This release focuses on getting the dependency count and install size down (this causes some breaking changes, unsurprisingly), adds a new fake timer implementation, drops Node 8 support, and initial, experimental ESM support to play with.

Christoph Nakazawa

1LOC: A Collection of One-Line JS Snippets — A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, checking objects, DOM work, etc.) You can submit your own for inclusion too.

Nguyen Huu Phuoc

Hardcore Functional Programming in JavaScript — Brian Lonsdorf teaches you functional programming concepts in JavaScript such as pure functions, currying, composition, functors, monads and more.

Frontend Masters sponsor

Debug Anything: The Basics — A six part series (all ready to read now) on debugging your JavaScript and TypeScript code with the debugger built into Visual Studio Code.

Charles Szilagyi

Comparing Ember Octane and React — This is about as detailed a comparison as you could hope for and a demonstration of just how much Ember contributes to the JavaScript ecosystem. Octane really kicks things up a notch for Ember, too.

Chris Garrett

Deno 1.0 is Due Next Week: Here's What You Need to Know — In 2018 Node's creator Ryan Dahl told us 10 Things I Regret About Node.js and revealed a prototype of Deno, a new V8-based runtime, and here's what you need to know about it. Short of time? This two-minute video sums up the biggest wins quickly.

David Else

???? Jobs

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

???? Tutorials

How To Build a Vue Survey App Using Firebase — A step-by-step guide to building a functional survey app using Vue.js and Firebase for both authentication and as a database.

David Atanda

A Brief Look at ES2020's Promise.any — When you need to know when at least 1 promise got resolved among an iterable of Promise objects, Promise.any() is the solution.

Marios Fakiolas

ES2020: Everything You Need to Know — An ES2020 roundup!

Martin McKeaveney

Building a Crossword Puzzle Generator — As a NY Times crossword addict, I love a good crossword, but if you’d rather figure out how to make your computer solve them, be my guest ???? This post guides you on how to approach the problem.

Mitchum

Git Best Practices for SOC 2 Compliance Quick Wins — Get quick wins for your SOC 2 compliance audit, and raise developer productivity at the same time.

Datree.io sponsor

Getting Started with Sapper and Svelte — Sapper is a Svelte-powered framework.

Chris Boakes

A ES2015+ Cheatsheet — A one-page guide to ES2015+ features based around brief example snippets.

Devhints.io

How to Fix ESLint Errors Upon Save in VS Code — A quick-fire tip.

David Walsh

How to Build a Blog with Next 9.3, Netlify, and Markdown — Learn how to build a Next.js-powered Markdown blog and deploy it to the Netlify platform.

Cassidy Williams

A Canvas Engine Comparison: PixiJS vs Two.js vs Paper.js — A benchmark of three popular 2D rendering engines/drawing APIs. Note: This will tax your system.

SlayLines

???? BTW, if you like videos, we need to shout out Florin Pop's YouTube channel as he's just passed 20k subscribers by posting neat JavaScript videos and live streams nearly every day for the past six months! ???? Lots of great stuff on there for JavaScript developers of all skill levels.

???? Code & Tools

Selecto.js: Make Elements Selectable Within an Area — Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. Live examples here.

Daybrush (Younkue Choi)

Visual Studio Code April 2020 Released — Probably the most widely used editor in the JavaScript space now and April brings some neat new features like being able to work on GitHub issues within the editor.

Microsoft

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Majestic 1.7: A Zero Config GUI for Jest — A tool to help make your JavaScript testing life a little easier. Run npx majestic in the folder of any project that uses Jest to give it a quick try.

Raathi Kugarajan

Pico: Take Browser Screenshots Client-Side with JavaScript — Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side.

Gripeless

React Flow: A Library for Rendering Interactive Graphs — If you have a need to lay out graphs in a visual way and be able to smoothly pan and zoom around such graphs, this is an interesting new library. Live demo here.

Moritz Klack

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

NeutralinoJS: Build Cross-Platform Apps Using JS, HTML and CSS — Sounds just like Electron, right? Not quite. NeutralinoJS use less memory and are smaller as they don’t ship a full browser inside. 1.4.0 just dropped.

Neutralinojs

Slugify 1.0: Simply Turns Strings into URL/Filename-Friendly 'Slugs' — e.g. ‘I ♥ Dogs’ becomes ‘i-love-dogs’

Sindre Sorhus

RxJS Primitives: A Set of Libraries That Provide Operators for RxJS

Tane Piper