#484 — April 17, 2020

Unsubscribe  :  Read on the Web

???? If you're bored this weekend at all, consider joining the latest Ludum Dare — it's an online game jam that's been taking place for 18 years and more JavaScript entries are appreciated against all the Unity crowd ????

JavaScript Weekly

Writing an 'Emulator' in JavaScript (and Interfacing with Multiple UIs) — This is really neat. Tania built a Chip-8 interpreter in JavaScript and has gone into quite a bit of detail about what was involved here. Lots of neat bits and pieces to pick up from this.

Tania Rascia

jQuery 3.5.0 Released — I know many of you will groan, but I’m delighted when I see a new jQuery release. It’s still so heavily used. No headline features though, this is a security fix for a cross-site scripting vulnerability, plus some tweaks and fixes in preparation for jQuery 4.0 (yes!)

Timmy Willison (jQuery Foundation)

Build a Game of Battleship with TypeScript & Java. Free Course — Join over 2000 developers creating a game of Battleship with TypeScript, Spring Cloud Stream (Java), and PubSub+. This free 30-minute course is a great way to learn the basics of messaging and event-driven architecture with the Aurelia framework.

Solace sponsor

Profiling React.js Performance — Goes into detail on aspects of the React Profiler API, React’s new experimental Interaction Tracing API, and measuring custom metrics using the User Timing API.

Addy Osmani

Userscripts are Fun and Still Very Much Relevant — ‘Userscripts’ are basically JavaScript programs that run in the context of other Web pages so you can add your own features. They were really popular for a while but still exist and are still a neat use case for using JavaScript to improve your Web experience.

Eldad Bercovici

Another Look at What's New in ECMAScript 2020 — We linked to Dr Axel’s roundup recently, but here’s another take, looking at dynamic imports, nullish coalescing, optional chaining, BigInt, and more.

Ianis T.

???? Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Senior JavaScript Developer (Warsaw, Relocation Package) — Open source rich text editor used by millions of users around the world. Strong focus on code quality. Join us.

CKEditor

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 Create a Particle Trail Animation in JavaScript — Particle animations are particularly (sorry) striking.. and in this article, Anna Prenzel shows how to easily create your own such effects with Anime.js.

Smashing Magazine

Strategies for Migrating to TypeScript — A quick overview of some strategies for migrating code bases from JavaScript over to TypeScript.

Dr. Axel Rauschmayer

Developing in a Monorepo While Still Using Webpack — Second part in a series discussing things the team at Etsy learned during the migration of a home-grown, Require.js-based build system to webpack, which took over a year.

Salem Hilal

A More Productive Way to Build Your JavaScript Apps — Write better code, debug it, and test it – all in one place. Try WebStorm. No configuration required.

WebStorm sponsor

▶  Let's Build a Digital Circuit Simulator in JavaScript — A special episode of the Low Level JavaScript series takes us on a brief journey into the world of digital logic.

Low Level JavaScript

How To Set Up an Express API Backend Project with PostgreSQL — A pretty extensive walkthrough of creating an HTTP API using Express with Node.js and Postgres on the backend, then deploying it all on Heroku.

Chidi Orji

Speed Up Your Angular App: 14 Optimization Tips — Tips on how to make your Angular app smaller, faster, and more responsive.

Marcelo Ricardo de Oliveira

Class-Related Types in TypeScript

Dr. Axel Rauschmayer

????▶ A Fireside Chat on the State of Microservices on April 21 — We recently helped The Software House with a developer survey (thanks to those who took it!) and now they’re doing a live chat on the state of microservices next Tuesday featuring Yan Cui, Alessando Vozza, and others.

The Software House

???? Code & Tools

Puppeteer 3.0: It Now Supports Firefox — Best known for as a way to headlessly control Chrome from Node, Puppeteer has recently seen some competition in the form of the cross-browser Playwright recently. But, no fear, Puppeteer is stepping up and can now work cross-browser too. We also learn Puppeteer is migrating to TypeScript.

Mathias Bynens

Open-Source Serverless CMS Powered by React, Node.js and GraphQL API — Build dynamic websites and apps with Webiny. 100% powered by JavaScript. Deploy your sites to AWS Lambda.

Webiny Serverless CMS sponsor

Rome: An Experimental JavaScript Toolchain — A compiler, linter, formatter, bundler, testing framework and more. Started by Sebastian McKenzie (of Babel and Yarn fame), Rome is now a project from the React Native team at Facebook. Related repo.

Facebook

Vime: A New, Modern Media / Video Player for the Web — Aims to be a ‘modern alternative to Video.js and Plyr’: “The idea behind Vime is we want you to control the player, not the other way around.” Modular, tree-shakable, and with potential for a plugin ecosystem. GitHub repo.

Rahim Alwer

Vuln Cost: An Open Source Security Scanner for VS Code — Free Snyk-powered VS Code extension that finds security vulnerabilities in npm packages, providing feedback in-line with your code, such as how many vulnerabilities a package has.

snyk

ip-num: A Library to Work with ASN, IPv4, and IPv6 Numbers — Happy in both Node and the browser.

dadepo

Flip: Animated Flip Counter Plugin to Add a Countdown to a Website — Adds an animated dynamic countdown timer to a page. No dependencies, responsive and mobile friendly, and fits any language, locale, or time zone.

Rik Schennink

The Perfect Partner to MongoDB Atlas. Try It for Free

Studio 3T sponsor

A JavaScript API for Controlling 'Simpsons: Hit & Run' — Including this as a bit of fun if you fancy noodling on something odd. Remote controlling games from JS seems neat, although I suspect just getting this running would take a while..

Tavis Ormandy

#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

#437 — April 22, 2020

Read on the Web

Frontend Focus

Inside a Dev's Mind: How To Plan Out a UI Feature — A look at how to approach building a new frontend feature in a thoughtful, considered way, based on one developer’s own thought process. It’s neat to see how he’d approach the task of building a basic heatmap (above).

Johannes Kettmann

The Cost of JavaScript Frameworks — Using data from the HTTP Archive, Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here.

Tim Kadlec

Free Guide: 6 Steps to Improving Your Embedded Analytics UX — You don't have to be a UI/UX designer to create impressive dashboards for your application. Use these 6 principles to enhance your application’s analytics and delight your end-users.

Logi Analytics sponsor

LCH Colors in CSS: What, Why, and How? — An introduction to LCH colors (Lightness, Chroma, Hue), a new feature in CSS, which Lea refers to as a “game changer”. There’s a related LCH color picker tool too.

Lea Verou

▶  'We've Ruined The Web. Here's How We Fix It.' — An interesting hour-long chat with Jeremy Keith, a ‘philosopher of the internet’, on the imbalances found in the modern the web:

"All the evidence staring us in the face is that faster websites will make you more money – yet for some reason, that’s just ignored in favor of weirdly prioritized stuff."

Gerry McGovern podcast

Version 1.3.0 of Tailwind CSS Is Here — We've linked to this popular utility-first CSS framework a fair few times over the years and it continues to improve. This latest release brings with it declarative layout utilities, transition-delay support, font-size/line-height pairings and more.

Tailwind CSS

???? Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

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

???? News, Tutorials & Opinion

13 Places to Find Front-End Challenges — “My favorite way to level up as a front-end developer is to do the work. Literally just build websites,” says Chris Coyier. If you’re short of ideas on how to level up, these other sites will help.

Chris Coyier

Listboxes vs. Dropdown Lists — An in-depth look at the advantages and disadvantages of using two HTML form components, one much more common than the other.

Anna Kaley

???? All Day Hey! Live: An Online Conference for Designers & Frontend Devs — This all-day conf is now fully digital, and will be live-streamed early next month. The lineup is looking good, with speakers from Netlify, Smashing Magazine, and Microsoft to name a few. Tickets are affordable, and those currently out of work can attend for free.

Hey!

Creating Morphing Animations with CSS clip-path — Learn how to implement morphing, a technique for transforming one appearance into another, using CSS.

Mikael Ainalem

Pseudo-Randomly Adding Illustrations with CSS — Eric’s personal site has recently been redesigned, bringing with it a collection of Japanese illustrations - used to add a bit of flourish and decoration between bodies of text. Here’s how Eric got one of the set of illustrations to display at random with just CSS (no PHP or JavaScript here).

Eric Meyer

Try It for Free: The Perfect Partner to MongoDB Atlas — Use MongoDB Atlas? Try the perfect partner for it. Save hours with our GUI & unlock the power you need, with Studio 3T.

Studio 3T sponsor

Wes Bos Shares His Personal Site's Stack — Always nice to see folks update a personal site (more of this please!). Here’s how Wes Bos moved away from WordPress over to a Gatsby set up.

Wes Bos

Minimum Viable Dark Mode — How to create a ‘quick and dirty’ dark mode for simple apps/sites using pure CSS.

Chase McCoy

Re-creating a Macintosh with Gradients and Box-shadows — Sarah runs through a quick explanation of how they created an original Macintosh using CSS.

Sarah L. Fossheim

Are You using SVG Favicons Yet? A Guide for Modern Browsers

Antoine Boulanger

???? Code, Tools and Resources

patern.css: Fill Empty Background with Beautiful Patterns — A neat collection of CSS-only backgrounds. You can see them in action on the demo site.

Jiten Bansal

Good Email Code: A Library and Guide for Writing HTML Email — This seems to be in early development but contains some snippets with explanations for cross-browser HTML email code.

Mark Robbins

Isomorphic Layout Composer — An SSR layout service that composes a web page from fragment services.

Namecheap

Poolors: Generate Unique Color Palettes — This generates deep-linked color combos not often used by developers. Not sure how they determine least-used, but the example combos are indeed interesting and not-so-common.

poolors