#425 — February 22, 2019

Read on the Web

JavaScript Weekly

NSFW JS: A Way to Check for NSFW Images Client-Side— Billed as ‘client-side indecent content checking for the soul’, this is an interesting, though imperfect, way to screen content prior to upload. It uses TensorFlow.js behind the scenes. Demo here.

Gant Laborde

JavaScript Loading Priorities in Chrome— How browsers schedule and execute scripts can impact the performance of your pages. Addy Osmani compares the different approaches here.

Addy Osmani

Frontiers 2019: Explore New Ways to Build Apps on Slack— Teams move faster with apps on Slack. And, it wouldn’t be possible without the people who built them. Connect with app builders like you, get hands-on training and spark new ideas at Frontiers 2019.

Slack sponsor

TypeScript Linter TSLint to Give Way to ESLint— The developers of TSLint, the TypeScript linter, have decided to deprecate it and focus on improving TypeScript support in the popular ESLint linter instead. This will greatly help existing ESLint users who are picking up TypeScript.

Palantir

CodeCrumbs: Document Codebases by Adding 'Breadcrumbs'— One of those things that’s better to see visually than read about. Essentially you annotate your code in a certain way and it can produce visualizations of how your codebase works.

Bohdan Liashenko

Ionic React Now Available in Beta— Ionic, a framework for building cross-platform hybrid mobile apps, is commonly associated with Angular but now it’s available in a React flavor too with around 70 components intended to cover the main use cases when building mobile apps. — Via our Mobile-focused newsletter.

Josh Thomas (Ionic)

💻 Jobs

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

React/TypeScript Dev (Berlin, Germany)— Build the tools behind the world’s leading app retargeting platform. Make your own decisions. Solve hard, real-world problems with a cutting edge stack in an experienced & ambitious team.

Remerge

Find a Job Through Vettery— Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Articles, Tutorials and Opinions

for vs forEach() vs for/in vs for/of— An overview of the difference between these looping constructs using several different edge cases.

Valeri Karpov

JSConf US & The Expanding Web— Check out a recent blog by Anna Sedlar.

Big Nerd Ranch sponsor

Using Fastify and Preact for Quick Web App Prototyping— Two technologies we haven’t mentioned for quite a while come together here in building a simple full-stack app.

Luciano Mammino

Styling an Angular Application with Bootstrap— A tutorial using the latest versions of Bootstrap 4 and Angular 7.

Smashing Magazine

Working with TypeScript in Visual Studio Code— Since VS Code and TypeScript both originated at Microsoft, it’s no surprise they work well together.

James Quick beginner

How to Disallow Large Imports from JavaScript Projects— Are there known large dependencies your team wish they could disallow from a project? ESLint supports disallowing specific imports.

Addy Osmani

How Does Aurelia 'React'?— Aurelia is an interesting framework in its own right - this new series aims to show how Aurelia approaches things you might otherwise do in React.

Rob Eisenberg

Replace Tedious Coding with MongoDB Stitch and Public APIs

MongoDB sponsor

'We Migrated to Next.js to Serve Our Home Page 7.5× Faster'— Going from a basic React boilerplate to Next.js can yield serious initial render time improvements and without much work, too.

Drew Powers (Manifold)

Faster Calls with Arguments Mismatch— Technical notes on a special V8 optimization for situations where you have strict mode functions that don’t use the arguments object or rest parameters. The performance improvement can be significant.

Benedikt Meurer and Toon Verwaest (V8)

🔧 Code and Tools

VS Code Settings and Extensions for Faster JS Development

Tilo Mitra

Cryption: In-Browser AES File Encryption with Data Integrity Check— It’s limited as to the size of data it can work with, however, but is an interesting project.

Tim-Luca Lagmöller

Supercharge Your Code, Test, Debug Feedback Loop— Wallaby runs unit tests as you type and reports results right beside your code in your text editor.

Wallaby.js sponsor

SimpleFS: Handle Files in IndexedDB Like You Would in Node— Node-style file operations for files stored in IndexedDB.

Fagbokforlaget V&B AS

Cleave.js: Format Input Text Content While Typing— Ideal for things like phone numbers, credit card numbers, dates.. or define your own.

Max Huang

Howler.js: An Audio Library for the Modern Web— Get a simple API for your audio needs across all platforms. No dependencies, too.

James Simpson

A JavaScript-Interop Library for ClojureScript

Applied Science Studio

#426 — March 1, 2019

Read on the Web

JavaScript Weekly

Zero Server: A 'Zero Configuration' Web Framework— As Parcel is to bundlers, so Zero appears to be to Web frameworks. Zero lets you build an app with Node, React, MDX, and more, without worrying about package management or routing (it uses file-based routing out of the box!)

Remote Interview, Inc.

▶  Why I Was Wrong About TypeScript— Sure, this sounds like an opinion-driven talk, but it actually covers the history behind compile-to-JS languages, how we got to a point where interest in TypeScript is growing strongly, and why it’s worth taking seriously.

TJ VanToll

What Should Developers Consider When Planning a React Application?— Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy.

Progress KendoReact sponsor

Understanding a Performance Issue with “Polymorphic” JSON Data— It’s low level, but it’s intriguing how objects with the same shape (essentially objects that have the same defined properties) but different kinds of values can have a surprising effect on JavaScript performance.

Jan Pöschko

GPU.js: GPU Accelerated JavaScript— This isn’t new, but has matured significantly lately. GPU.js can automatically compile JavaScript functions into shader language and run them on the GPU for added performance in certain situations. (Take care with the benchmark, I’ve seen reports it has crashed some people’s machines.)

Sapuan, Saw and Cheah

Announcing a New Management Structure for Ecma TC39— Ecma’s TC39 (the standardizing body behind JavaScript/ECMAScript) has announced that rather than have a single main chairperson and vice-chairs, a flatter hierarchy of co-chairs will run meetings.

Yulia Startsev (Mozilla)

💻 Jobs

Senior Frontend Engineer - React (Remote, Palo Alto, Vancouver)— Join our team and help us bring orchestration and collaboration tools that promote SRE best practices to teams around the world.

Blameless

Web Developer (Frontend, Backend) (m/f/d)— We connect online shoppers with deal content every day and are looking for passionate developers. Come and join our team.

Webgears GmbH

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

Vettery

📘 Tutorials and Opinions

Serverless Functions in Depth with AWS Amplify— A deep-dive on how to build, test, deploy, update, and delete serverless JavaScript functions with AWS Amplify.

Nader Dabit

Sliding In and Out of Vue.js— A look at how easy it is to wrap up non-Vue.js code into Vue.js apps.

Kevin Ball

Get Reliable JavaScript Tests with Gauge and Taiko— Open source test automation framework by ThoughtWorks.

Gauge sponsor

How to Build a Simple In-Browser Game with Phaser 3 and TypeScript

Mariya Davydova

Some Alternatives to JSX— React has made JSX, an extension to JavaScript that lets you write HTML inline with JavaScript, popular but there are some alternative approaches.

Seva Zaikov

What's The Longest Keyword Sequence in JavaScript?— This is just a bit of fun, but it’s interesting how far you can go.

Leo Horie

Get Started with Node: An Introduction to APIs, HTTP and ES6+ JavaScript— If you’re an experienced JavaScript developer, skip this, but if you’re not, or if you want something good to forward to a newcomer, this guide wraps up a lot of ideas in one piece.

Jamie Corkhill

How Do Top Developers Deliver Video? - Download the Video Report

Bitmovin sponsor

How to Transfer Files and Data Between Angular Clients and Node.js Backends

Maciej Treder (Twilio)

Why I Write CSS in JavaScript

Max Stoiber

🔧 Code and Tools

AutoNumeric.js: Automatically Format Numbers and Currency Inputs— No dependencies, ES6-friendly. The configuration page is a really neat touch. Play and test with the options on the fly.

Alexandre Bonneau

ms: Tiny Millisecond Conversion Utility— For example: ms('2 days') returns 172800000, and ms(60000) returns 1m.

ZEIT

✅ ZingGrid Makes It Easy to Create Responsive Data Grids & Tables— Use this web component-based JavaScript library to build fully-featured CRUD grids and tables. Create a free account.

ZingGrid sponsor

Ember 3.8 Released

Tilde Inc.

FrenchKiss.js: A Fast and Light i18n Module— Apologies for the rather odd name, but it bills itself as “the fastest i18n JS package out there” so is worth checking out for that alone.

Koala

Apollo Client 2.5: Now with Local State Management— Managing local data with Apollo Client follows the same programming model as managing remote data from a GraphQL server.

Hugh Willson

Buefy: Lightweight UI Components for Vue.js Based on Bulma— A set of responsive UI components for Vue.js based on the Bulma CSS framework.

Buefy

maps-journey-replay: Replays JSON-Defined Journeys on a Map— Demo. It works with Google Maps by default, but other providers can be implemented.

Sebastian Vîrlan

Kosko: Write Kubernetes Manifests in JavaScript

Tommy Chen

npmf: Fetch Quick Info of an npm Pacakge from the Terminal— You can try it instantly with just npx npmf lodash

Rousan Ali

#427 — March 8, 2019

Read on the Web

JavaScript Weekly

Handtrack.js: Realtime Hand Detection, Directly in the Browser— A neat way to prototype hand-related gestures or interactions in the browser in very few lines of code. Naturally, there's a live demo, there's also a CodePen you can play with, or just the plain ole' GitHub repo.

Victor Dibia

JavaScript Performance Pitfalls in V8— A very detailed article where Benedikt Meurer of the core V8 team shows how V8 compiles your code and shares some tricks you can use to avoid performance problems.

Benedikt Meurer

Don’t Miss the New Developer Track at Slack’s Annual Conference— Whether you’re new to Slack or an expert app builder, there’s something for everyone at Frontiers, including a developer track designed just for you. Attend workshops, new feature demos, one-on-one advice sessions, and more. Register today to reserve your spot.

Slack sponsor

How Loose Comparisons (==) Work Step-by-Step— Determining what’s equal in JavaScript when you use == (versus ===) is notoriously tricky but this quick tool demonstrates the process JavaScript takes to figure it out - you can put your own values in to play around too.

Felix Kling

JavaScript Symbols: But Why?— Not played with symbols (a new data type introduced with ES6) yet? This is a gentle way to get up to speed with not only what they are but why you might use them.

Thomas Hunter II

The Third Party Web of Excessive JavaScript Execution— Research shows that across the top 1 million Web sites, just 800 origins account for 65% of all script execution time. Which third party scripts are slowing down the Web?

Patrick Hulce

Storybook 5.0: The UI Component Workshop— Storybook is a popular tool for building UI components for React, Angular, and Vue.js apps, now with an all-new interface. Wondering why you should use Storybook? They’ve got that covered in this 2 minute intro video.

Michael Shilman

💻 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 Software Engineer - Invoca (Santa Barbara, or Remote US)— Join our collaborative engineering team, deploying code to our production SaaS platform & public cloud infrastructure.

Invoca

Find A Job Through Vettery— Vettery specializes in dev roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

What the Functor? Functional Terminology Explained with JS— We recently linked to a neat jargon-free intro to functional programming concepts and the author is now back with… an introduction to some of the jargon! Functors, categories, endofunctors, monoids, and monads are deftly explained here.

Matthew Gerstman

▶  How Google Search Indexes JavaScript Sites— Martin Splitt briefly explains how JavaScript influences SEO and how to optimize your JavaScript-powered website to be search-friendly.

Google Webmasters

Get Up to Speed in Building Web Applications with Node.js— Learn the basics, and gain proficiency in building, testing, and deploying apps in the cloud through concrete examples & practical projects.

Microsoft Azure sponsor

How Does Aurelia 'React'?— Aurelia is an interesting framework in its own right - this new series aims to show how Aurelia approaches things you might otherwise do in React.

Rob Eisenberg

▶  Discussing Maintaining Vue.js with Evan You— An hour long podcast chat with the maintainer of Vue.js.

ShopTalk podcast

Building a Plasma Canvas Effect with Rust and WebAssembly— Yes, the actual effect is coded in Rust, but JavaScript is used to bring everything together and may be of interest to you if you want to bring other languages into your frontend development via WebAssembly.

Jeremy Likness

Executing Arrays of async/await Functions in Series vs. Concurrently

Corey Cleary

🔧 Code and Tools

Cherow: A Fast, Standards-Compliant JavaScript Parser— Parses right up to ECMAScript 2020(!) and there’s a live demo so you can see what it outputs.

KFlash

Use Sencha’s Powerful Grid for Your React Apps— Grids can be frustrating to build. Save time: Easily integrate our pre-built grid & 115+ components into your React app.

Sencha, Inc. sponsor

A Naive, 27 Line Reimplementation of React Hooks— OK, it’s hard to read and there’s a (minor) bug in it, but reading through this code example might help you understand how hooks work under the surface a little more. Here’s an interactive, copy/pasteable alternative you can play with yourself.

Shawn Wang

iro.js: An SVG-Based HSV Color Picker Widget— Live demo and code example.

James Rakujira

NLP.js: Natural Language Utilities for Node.js— Guess the language of a text, stemming/tokenization, sentiment analysis, etc.

AXA

Share Your Whole Stack with Your Team with One Workflow 👩‍💻

Manifold sponsor

Ink 2.0: Like React, But For Building CLI Apps— A component-based UI building experience, but for CLI apps.

Vadim Demedes

React-Calendar: A Simple Calendar Component— A straightforward, compact monthly view. (BTW, if you want more React libraries and components, you’ll enjoy our React newsletter, which is where most of them go!😄)

Wojciech Maj

AV1: AVIF (AV1 Still Image Format) Polyfill for the Browser— AVIF is a image format whose spec has just reached version 1.0.

Kagami Hiiragi

#428 — March 15, 2019

Read on the Web

JavaScript Weekly

KV Storage, the Web's First 'Built-In' Module?— Chrome is experimenting with a concept called built-in modules, essentially a sort of standard library for JavaScript that requires no extra downloads in clients such as browsers. A very interesting idea, but not without controversy.

Google Developers

7 Tricks with Resting and Spreading JavaScript Objects— Using modern JS features to merge objects, organize properties, and more. +1 for all the Mighty Boosh references too.

Joel Thoms

New Courses: 📡 API Design in Node & 👨‍🍳 GraphQL— Design and build APIs in Node.js from the ground up. Use Express to build an API and handle REST verb methods to create, read, update and delete resources from MongoDB. Then, in the next course, you'll learn how GraphQL empowers more flexibility into your APIs.

Frontend Masters sponsor

A Complete Guide to React's useEffect— An amazingly epic post that will get anyone working with or thinking about React Hooks excited. It’ll help you understand a lot of the concepts involved. No time? There’s a good TLDR too.

Dan Abramov

A Proposal to Add Differential Script Loading Support to the script Tag— Rather than polyfilling and bundling, what about a srcset attribute on the script tag to enable browsers to choose the right JavaScript to download for them? Your feedback is sought.

WHATWG

A Look at Experimental Features in Node.js— Everything in Node was ‘experimental’ at some point. This post looks at some currently experimental features such as worker threads (essentially Node's answer to Web Workers) and performance hooks.

Liz Parody

Why V8 Now Supports JIT-Less JavaScript Execution— Running without V8’s JIT compiler and optimizations naturally results in a performance penalty but allows V8 to avoid allocating executable memory at runtime and improve security (particularly in resource limited environments).

Jakob Gruber (Google)

💻 Jobs

Sr. Fullstack Engineer (Remote)— Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Senior Angular / Node Engineer at eBench (Remote, Full-Time)— We are a SaaS company building a new collective intelligence platform. Enjoy crafting quality code? We would love to hear from you.

eBench

Find A Job Through Vettery— Vettery specializes in dev roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

How to Roll Your Own Serverless JS-Powered Analytics System— A really neat walkthrough of the idea of building your own basic Web analytics system using React, AWS Lambda, and storing the results in Google Sheets.

PC Maffey

Why You Need to Normalize Unicode Strings— Or when "Zoë" !== "Zoë"! If you’re dealing with Unicode strings, you need to take into account that characters could be represented in multiple ways. See how String’s normalize method can help.

Alessandro Segala

Supporting Old Browsers Without Hurting Everyone— Deliver bulkier but more broadly compatible code to older clients, while keeping a streamlined version flowing to newer clients. Here’s how to pull it off with webpack.

Sérgio Gomes

GraphQL in Depth: What, Why, and How— Learn about types, queries, and mutations in this in-depth walkthrough.

Ryan Glover

Building Angular and React Applications Together With Nx— A look at how Nx can help you develop with multiple frameworks.

Victor Savkin

The Chronograf Files: The Curious Case of JavaScript’s sort

InfluxData sponsor

How I Ruined My JavaScript Code and Still Won a Coding Challenge— “I will tell you the story about how overcomplicated JavaScript code impressed the judges.” This is one of those cases where you’re reading for the story rather than to learn!

Marcin Gajda

Porting Scratch from Flash to JS: Performance, Interop, and Extensions— Scratch is a popular programming environment principally used by young people for creative ends. This year’s Scratch 3.0 release was the culmination of a long process to port it from Flash to JavaScript.

Corey Frang

Q&A with Cypress’ VP of Engineering on Modern Application Testing

Nrwl.io sponsor

Why You Shouldn't Use Moment.js?— Huge opinion piece alert! “Moment.js is heavy, slow, mutable and hard to debug, still yet it has some advantages.” And those advantages are well worth keeping in mind before you decide to ditch it.

InventiStudio

A Visualization of the Components of a JS Function— A neat way to see the various pieces of a function and what they are.

Poet beginner

🔧 Code and Tools

Billboard.js 1.8.0 Released— Billboard.js is a really neat D3 v4+-based chart library. 1.8 introduces several new formatting features.

Jae Sung Park

Real-Time Debugging as You Code, Without Breakpoints and console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Sucrase: A Super-Fast Alternative to Babel.. in Certain Situations— Smaller in scope than Babel and compiles down to modern JS runtimes only (rather than ES5) with more performance optimizations to be had.

Alan Pierce

React Native 0.59 Released— Hooks have made their way to React Native, along with CLI improvements and improved performance (and 64 bit support) on Android.

Ryan Turner

Micromodal: Tiny JS Library for Creating Accessible Modal Dialogs— Just 1.9KB minified and gzipped.

Kalpesh Singh and Indrashish Ghosh

CKEditor 5 v12.0.0 Released— CKEditor is a long standing rich text editor in the JS world, though note that it’s GPL 2+ licensed with commercial options.

Piotr Koszuliński and Anna Tomanek

A Basic 38 Line Reimplementation of Redux— Built as a learning experiment. Maybe it could help you too.

Deric Cain

promise-utils: Lodash-Like Utilities for Native ES6 Promises

Blend

🌀 Last but not least..

JavaScript-Powered 'Prank' Lands Japanese Teenager in Hot Water— And in the ‘slightly odd news’ department comes news of a Japanese girl who’s been charged for linking to some code that pops up an unending number of window alerts. Pretty sure we've all been stung by one of these over the years..

Ars Technica

#429 — March 22, 2019

Read on the Web

👍 A bumper-packed issue this week! Just a reminder that if you want to contact us with comments, submissions, or anything, hit reply and an actual human will see your email (yes, we even see the 1001 "out of office" ones😂)

JavaScript Weekly

I Don't Hate Arrow Functions (But..)— Arrow functions (=>), as introduced in ES6, have generally been a much welcomed addition to JavaScript but Kyle Simpson reminds us they’re not suitable in every scenario and has created an ESLint plugin to help you keep a handle on their use.

Kyle Simpson

V8 Release 7.4: Private Class Fields Are Almost Here— The latest V8 is coming to a Chrome and Node near you soon, with perhaps the juiciest syntax addition being support for private class fields. There are also several key performance improvements, all covered in the post.

Georg Neis (V8 Team)

50% Off for Developers at the Annual Slack Conference— Attend the developer track at Frontiers for access to workshops, new feature demos, one-on-one app design sessions, and more. Register today to reserve your spot with the code F19DEV_COMM.

Slack sponsor

An Introduction to Web Components— If you’ve not played with Web Components yet, here’s a great opportunity. This is a five part series (all now available) that walks through building Web Components and demonstrates why they’re an ideal approach to building front-end components and UI elements in a standardized way.

Caleb Williams

fromfrom: A LINQ Inspired Library to Transform Sequences of Data— Now this is how you introduce your new library :-) A neat looking way to convert arrays of JavaScript objects from one structure to another using a fluent API.

Futurice

▶  State of the Vuenion: An Update on Vue.js— At last month’s VueJS Amsterdam event, the creator of Vue.js gave a 40 minute keynote on how things are going with the project. What a striking intro!

Evan You

JavaScript #1 in RedMonk's Programming Language Ranking— RedMonk is a highly regarded software development analyst and they’re continuing to find that JavaScript is dominating the industry. TypeScript is also rocketing up the chart to now sit at #12.

Stephen O'Grady

💻 Jobs

Software Engineer - iCloud Web Apps (California, US)— Love the challenge of solving complex problems? We’re looking for meticulous, creative engineers to build the world’s best web apps.

Apple

Product-Focused & Driven Frontend Engineers in Stockholm— Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find A Job Through Vettery— Vettery specializes in dev roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

Writing Resilient React Components— Several principles to set you on the right path building solid React components.

Dan Abramov

ES5 to ESNext — Here's Every Feature Added to JavaScript Since 2015

Flavio Copes

A Complete Guide to Threads in Node.js— An introduction to executing complex operations in Node.js with the worker_threads threading module.

Maciej Cieślar

Reliable End to End Test Automation with Gauge and Taiko— Open source JavaScript testing by ThoughtWorks.

Gauge sponsor

How to Manipulate CSS Colors with JavaScript— This goes into a lot more depth than you might be expecting..

Adam Giese

An Intro to RxJS Concepts with Vanilla JavaScript— Observables..? Observers..? Get a grip on the concepts here.

Creeland A. Provinsal

Write Your First Service Worker in 5 Minutes— Making a service worker (a script that runs in the background of your browser and handles certain types of non-interactive mechanisms, such as caching) can seem intimidating but here it is boiled down to the bare essentials.

Carmen Bourlon

JavaScript's New #private Class Fields— Since they’re coming to both Node and Chrome very soon..

James Kyle

Build and Deploy Serverless Apps on a Global Cloud Network— Learn how to start writing serverless APIs in JavaScript, and reserve a custom subdomain for your next project.

Cloudflare Workers sponsor

Henry Zhu: "Open Source is About One’s Soul Searching and Moving the Whole Community"— An interview with Henry Zhu, a core maintainer of Babel, who’s speaking at JSNation later this year.

Amsterdam JSNation

▶  Testing and Debugging JavaScript Sites for Search— Google’s search index bot is happy to run your JavaScript but you might want to check things are set up and running well.

Google

🔧 Code and Tools

Peacock: Visually Distinguish Different VS Code Windows— A way to keep your various VS Code windows organized and easy to follow.

John Papa

lax.js: Animation Scroll Effects— A simple and lightweight (2kb minified & zipped) plugin to create smooth animation on scroll. Here’s the repo.

Alex Fox

idb: IndexedDB, But with Promises— “A little 1.1k library that tries to make IndexedDB usable via promises, helpers, and async iterators.”

Jake Archibald

TradingVue.js: A Flexible, 'Hackable' Charting Lib for Traders— For making those candlestick charts that every day-trader loves.

Code's All Right ™

CrumbsJS: An ES6 Cookies and localStorage JavaScript Library— An extremely simple API for working with these browser features.

Nir Tzezana

Dare to Stream: Try Bitmovin’s Encoding, Player, and Analytics Solutions for Free

Bitmovin sponsor

React Router v5 Released— If you need it, you know :-) We’ll be focusing more on it in next week’s React newsletter.

Michael Jackson

Mosaic: A Frontend JavaScript Library for Building User Interfaces— Many will argue there are too many such libraries but I think it’s neat to experiment and see fresh perspectives.

Adeola Uthman

📢 P.S. If you open this email just as it goes out, I've noticed there's an online JavaScript conference of sorts taking place on Twitch right now - it's called Byteconf, enjoy!

#430 — March 29, 2019

Read on the Web

⚡️ We have another interview this week, this time with Nicolás Bevacqua of Pony Foo fame at the end of this issue.

JavaScript Weekly

What You Should Know About JavaScript Arrays— It’s nice to see an article that essentially delivers on a lofty title. It goes into a lot of depth about all the different ways you can work with arrays. If you're an expert-level JavaScript developer, however, move on ↓

Thomas Lombart

Majestic: A Zero Config GUI for Jest— An interesting tool to help make your JavaScript testing life a little easier. Try it now by running npx majestic in the folder of any project that uses Jest for testing (assuming you have npm installed).

Raathi Kugarajan

Build & Deploy Serverless Apps on a Global Cloud Network— Learn how to start writing serverless APIs in JavaScript, and reserve a custom subdomain for your next project.

Cloudflare Workers sponsor

Pika/Web for a Future Without Webpack?— Using an approach that's not without controversy, @pika/web can install npm packages that run natively in the browser.

Fred K. Schott

Advanced Map Shading with JavaScript and WebGL— This is a really neat and thorough look at an interesting use for JavaScript: shading satellite imagery. The final result is beautiful.

Rye Terrell

'Keep JavaScript Dumb'— David, who coauthored the Cluetrain Manifesto and has played a significant role in US tech, thinks that JavaScript is being damaged by becoming harder to use by hobbyists and amateurs. He admits he’s probably wrong but it’s important to discuss this stuff.

David Weinberger

30 Seconds of Code: A Curated Collection of Useful JS Snippets— We first linked this project last year, but it’s had lots of updates recently, so if you want to do lots of interesting things with arrays, math, strings, vectors, and more, check it out.

30 Seconds

💻 Jobs

Senior JavaScript Developer (Remote)— Our hardware/software product uses machine learning/AI to help DSLR/mirrorless users get better photos.

Arsenal

Find A Job Through Vettery— Vettery specializes in dev roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods— A look at how to leverage these three useful JS array methods.

Una Kravets

Experimenting with the Streams API— You probably associate streams with Node.js, but did you know they’re also supported in browsers?

Dean Hume

The Shortest Way to Conditionally Insert Properties into an Object Literal— A dig into how a particularly short bit of confusing-looking JavaScript works. I’m not sure I like it, but the explanation is good.

Andrea Simone Costa

The Pitfalls of async/await in Array Loops— Using async/await while looping through arrays seems simple, but there’s some non-intuitive behavior to look out for.

Tory Walker

Build a Slack App in 10 minutes with MongoDB Stitch— Want to extend Slack with chat bots and additional commands? Check out this tutorial to learn how to build a Slack app in 10 minutes with MongoDB Stitch.

MongoDB sponsor

Creating a Reusable Pagination Component in Vue.js

Mateusz Rybczonek

How to Remove Duplicates from an Array in JavaScript— Leaning on ES6’s set support seems to be the quickest way.

Maciej Cieślar

Routing in React with Hooks: A New Approach to Routing?— hookrouter has some compelling advantages compared to existing routers.

Christian Engel

🔧 Code and Tools

Tone.js: An Audio Framework for Interactive Music in the Browser— There are lots of examples of the main features but also full scale demos to enjoy.

Yotam Mann

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Vue DevTools 5.0: A DevTools Extension for Debugging Vue Apps— A significant new release (5.0.0) that adds a variety of new features including new tabs and NativeScript support. For Firefox and Chrome.

Vue.js

eslint-plugin-unicorn: Various Awesome ESLint Rules— Includes 34 different rules for things like enforcing a case style for filenames, disallowing process.exit(), avoiding unsafe regexes, and more.

Sindre Sorhus et al.

Recommended VS Code Extensions for Angular Developers

John Papa

Leadership Training for Engineers: Free Talk - Sign Up Today

Big Nerd Ranch sponsor

📊 Cube.js: An Open Source Analytics Framework— For building things like internal BI tools or customer dashboards. There’s a guide to its use here.

Statsbot

React LoadCon: Use Your Favicon to Show Progress— Turns your page’s favicon (as displayed in the browser tab) into a donut or circle that can indicate progress. GitHub repo.

foreseaz

#431 — April 5, 2019

Read on the Web

JavaScript Weekly

Getting Creative with the console API— If console.log is as far as your knowledge of the console object goes, this could be very handy. There are so many useful functions in there that’ll help you out while debugging.

Areknawo

How We Used WebAssembly to Speed Up Our Webapp by 20X— A case study exploring how to speed up web apps by replacing slow JavaScript calculations with compiled WebAssembly. (Note: WebAssembly is becoming so important lately that we're working on a special issue about it. Watch this space.)

Robert Aboukhalil

SQL, Python, and R. All in One Platform. Free Forever— Mode Studio combines a SQL editor, Python & R notebooks, and visualization builder in one platform. Connect data from anywhere and analyze with your preferred language. Custom viz (D3.js, HTML/CSS) or use out-of-the-box charts.

Mode sponsor

You Don't Need jQuery: Doing Things the Vanilla JS Way— There have been a few projects of this sort over the years (such as You Might Not Need jQuery) but seeing how to perform common DOM related operations with vanilla JavaScript always gets a thumbs up from me. Note: jQuery is still a great library and has many valid use cases. Don’t migrate away if you don’t want to!

NEFE

Announcing TypeScript 3.4— The optionally static typed JavaScript superset takes another step forward introducing faster incremental builds, type inference improvements, and const assertions.

Daniel Rosenwasser (Microsoft)

'Make It Hard to Screw Up'-Driven Development— Great points from Chris Coyier here. “We’ll always be screwing up code, but we can also always be finding ways not to.” Those ways include leaning on tools like linters and JSX, and even your co-workers.

Chris Coyier

💻 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

Product-Focused & Driven Frontend Engineers in Stockholm— Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find A Job Through Vettery— Vettery specializes in dev roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

Why I Publish and Manage Shared JavaScript Code with Bit— Bit is an interesting system for publishing and managing components and here we get to see where it can be useful. Note: This is published on Bit’s own blog, so be aware.

Chidume Nnamdi

What is this? The Inner Workings of JavaScript Objects— A good understanding of how this behaves will save you a lot of time debugging tricky issues.

Eric Elliott

How to Build a Blog with Nest.js, MongoDB, and Vue.js

DigitalOcean sponsor

Web Components Will Replace Your Frontend Framework— A bold claim but Danny makes a lot of good points and shows off the basic concepts well.

Danny Moerkerke

Understanding Event Emitters— Ever written your own event emitter from scratch? They can come in handy quite often and this is a neat introduction.

Charles Peters

How to Use create-react-app with a Custom Node Server on Heroku

Mars Hall

A Basic 3 Step Functional JS Example— If ‘functional programming’ seems above you, these are the simplest, basic examples of a few of the concepts that you can get.

Alex Nault beginner

undefined: The Third Boolean Value?— It’s neither true or false, and sometimes that third option might be what you really want.

Kushagra Gour

🔧 Code and Tools

Codelyzer: An In-Browser TypeScript and Angular Code Checker— The creator introduces what this is about in this talk.

Minko Gechev

PreVue: A Prototyping Tool for Vue.js Developers— Built in Electron (so Mac, Linux and Windows builds are available), this is a tool for prototyping Vue.js components. GitHub repo.

Hubert Lin and others

DeepScan Makes Your JavaScript Better— Use this static analysis service to find problems in your JavaScript, TypeScript, React & Vue on GitHub. Try it free.

DeepScan sponsor

Aurelia Unveils Its Web Components Plugin— This is interesting because it lets you use Aurelia custom elements as Web Component elements enabling interoperability with other frameworks.

Rob Eisenberg

Node's Popular request Module is Going into Maintenance Mode— request is a long standing Node module for making HTTP requests, but it’s going into deep freeze to make way for alternative, more modern options.

Mikeal Rogers

Formal: React Form Management Primitives for the Hooks Era— Formal provides a variety of primitives to help you manage your forms’ state & validations.

Kevin Wolf

is-online: Check If The Internet Connection Is Up— Works in both Node.js and the browser. Uses Apple’s public captive detection page behind the scenes.

Sindre Sorhus

Deploy Only the Parts of Your Application That Have Changed & Build Better JavaScript Apps Faster

Buddy sponsor

React Native CarPlay: Build CarPlay Apps using React Native?— It’s at an early stage but an interesting idea if you have a car that supports Apple CarPlay.

Birkir Gudjonsson

VexChords: JavaScript Guitar Chord Renderer— It’s niche, but well executed.

Mohit Muthanna Cheppudira

Stepper: An Animated Numeric Stepper Component

Valery Alikin

#432 — April 12, 2019

Read on the Web

JavaScript Weekly

Twemoji (Twitter Emoji): Emojis for Everyone— A library from Twitter that can give your apps cross platform support for the over 3000 emojis in Unicode 12 by parsing text and inserting hosted images for the relevant emojis.

Twitter Open Source

jQuery 3.4.0 Released— So many of us owe so much to jQuery that I just have to feature any of its key updates (even if you might not need it). 3.4 is focused on bug fixes and performance improvements, but we’re told a serious overhaul is on the way for jQuery 4.0.

The jQuery Foundation

New Course: TypeScript 3 Fundamentals— 🏎💨 TypeScript adoption has grown at an astounding rate. TypeScript allows you to catch bugs before they happen, and collaborate with your team more effectively by documenting your code.

Frontend Masters sponsor

MDX 1.0 Released: Seamlessly Write JSX in Markdown— A major milestone for an increasingly popular library that makes it easy to write content that directly relies on components. Homepage and GitHub repo.

John Otander

Domain-Oriented Observability in JavaScript— When Martin Fowler puts his editorial backing behind an article, I pay attention! :-) Here’s a thorough walk through an approach to adding business-relevant observability to JavaScript code in a clean, testable way.

Pete Hodgson

▶  A Look at Deno: A New JavaScript Runtime— Ryan originally created Node about ten years ago but recently he’s been working on Deno, a new, non-Node compatible, TypeScript-focused runtime with some interesting features. (Note: Poor audio until a few minutes in.)

Ryan Dahl

Microsoft Releases Preview Builds of Its New Chromium and V8-Based Edge— The first developer builds of the new Edge browser based on Google’s Chromium open source project (and therefore also using the V8 JavaScript engine) are now available for Windows 10 users. This move will only continue to cement V8’s popularity and importance as it'll eventually be the default for all Windows users.

Joe Belfiore (Microsoft)

💻 Jobs

Full Stack, Mobile & Infrastructure Engineers— Joining our team means you will be working in our fast paced environment and you are fearless of our next big challenge.

Expensify

Software Engineer - iCloud Web Apps (California, US)— We’re looking for creative engineers to join our diverse team who can help build the world’s best web applications.

Apple

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

Vettery

📘 Tutorials and Opinions

You Don’t Need Lodash or 'How I Started Loving JavaScript Functions'— A compilation of pure JavaScript recipes of nine commonly used Lodash/Underscore.js utility functions. I'd love to see a more extended version of this, actually.

RC Dexta

Kyle Simpson: 'I’ve Forgotten More JavaScript Than Most People Ever Learn'— This is a heck of a bold quote to pick for a title, but it’s still a neat interview with the author of the fantastic You Don’t Know JS books (which you can still read online for free).

Amsterdam JSNation

How to Write Points from CSV to InfluxDB

InfluxData sponsor

Form Validation in Under an Hour with Vuelidate— Sarah Drasner runs through some of the trickier sides of form validation, making use of the Vue.js model-based validation library Vuelidate.

Sarah Drasner

Design Patterns in Modern JavaScript Development— An architecture-focused post that aims to whet your appetite for software design patterns.

Kristian Poslek

undefined: The Third Boolean Value?— It’s neither true or false, and sometimes that third option might be what you really want.

Kushagra Gour

Why I Chose Vue over React

Abhay Srivastav

🔧 Code and Tools

html2canvas: A JavaScript HTML Renderer— Take screenshots of pages or elements of pages and render them to canvas. The first release (a release candidate of v1.0) in over a year is just out. There’s also a live demo on its homepage.

Niklas von Hertzen

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Node v11.14.0 (Current) Released

Node.js Foundation node

Choices: A Vanilla JS Customizable Select Box/Text Input Plugin

Josh Johnson

🖼 medium-zoom: A Library for Medium-Style Image Zooming— Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly. Demo.

François Chalifour

jQuery Terminal Emulator: A Web Based Terminal Plugin— Create CLI style interfaces in your own webapps. Demo and more info.

Jakub T. Jankiewicz

FKit: A Functional Programming Toolkit for JavaScript— Check out the examples for the basics.

Josh Bassett

Get the Fastest Website Deployments. Ever.

Buddy sponsor

Forever 1.0: A CLI Tool to Ensure A Script Runs Continuously

Charlie Robbins and Contributors node

ReactPlayer: A React Component for Playing Media From Remote URLs— From file paths to YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, and more. (React developer? Our React newsletter is where most of our React-related links are.)

Pete Cook

#433 — April 19, 2019

Read on the Web

JavaScript Weekly

A 'Horrifying' (or Genius?) globalThis Polyfill— You wanted some gnarly JavaScript magic to chew on over the Easter weekend, didn’t you? Mathias doesn’t disappoint with this look at how to implement the proposed ‘globalThis’ feature using current JavaScript. It’s not easy.

Mathias Bynens

The Front-End Developer Handbook 2019— This popular, detailed guide returns for another year. Updated with plenty of useful resources, learning materials and dev tools.

Cody Lindley

Cloud Hosting Developers Love— Deploy high performance web apps faster and save up to 55% compared to other cloud providers.

DigitalOcean sponsor

Razzle: Create Server-Rendered Universal Apps with No Config— It abstracts all the tooling for a universal app into a single dependency and leaves the decisions around frameworks, routing, and data fetching to you (think create-react-app but for any set of frameworks). Version 3 came out just this week introducing Babel 7 support.

Jared Palmer

V8's Blazingly Fast Parsing: How Lazy Parsing Works— A deep-down, technical post from the V8 team on how the JavaScript engine’s pre-parsing functionality works to prevent unnecessary parsing taking place before it needs to.

Toon Verwaest and Marja Hölttä

“[TDD] eliminates fear of the merge button. That reassuring coverage number gives your whole team the confidence to stop gatekeeping every little change to the codebase and let changes thrive. Removing fear of change is like oiling a machine.”

___
Eric Elliott ponders what TDD means to him in TDD Changed My Life.

💻 Jobs

✉️ Want to Contribute to GitHub @ a Fortune 100 Company?— We live and breathe open source. Please check out our open-source on GitHub. Do you have the passion to write code with tests? Come join our team which powers the enterprise.

Software Engineer - Full Stack (JavaScript) - Berlin— Join a fast learning environment where you can extend and build upon your skills and interests.

Enfore

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

Vettery

📘 Tutorials and Opinions

How to Know What to Test— “Given enough time and experience, you develop an intuition for knowing what to test.”

Kent C Dodds

How to Create a Multicolored Mouse Trail for Your Site— We don’t often link to visual uses of JavaScript that are just for fun but this is pretty neat. We also learn a neat trick to only run code on browsers/devices with a proper pointing device attached: matchMedia('(pointer:fine)').matches

Noah Yamamoto

Say Hello to Scheduled Stitch Triggers— MongoDB Scheduled Stitch Triggers enable you to run your functions automatically on a timed schedule. Get set up in under 3 minutes.

MongoDB sponsor

How to Build a Large Vue Application— Vue is perfect as it is for small and medium-sized apps, but you might want to lean on systems to make apps more modular at larger scales.

Michael Lin

Choosing The Right Node.js Framework: Next, Nuxt, Nest?— A handy examination of the differences between three very popular server-side rendering frameworks.

Liz Parody node

Rendering a Triangle with Vulkan and JavaScript— Vulkan is a new(ish) low-level graphics and compute API from Khronos (the folks who manage standards like OpenGL and WebGL). Here’s the Vulkan “Hello World” for Node.

Felix Maier node

Exploring the Hidden Potential of JavaScript Arrays— Aimed more at beginners, this tour visits built-in methods like flatMap, every, some and keys that are frequently overlooked.

Areknawo

Get the Fastest Website Deployments— Learn the most effective way to build better apps faster.

Buddy sponsor

Adding Numbers using Boolean Operations in JavaScript— This isn’t necessarily useful in and of itself, but if you’re not aware of how numbers are added at the binary level, you’ll learn something.

Sung M. Kim

🔧 Code and Tools

match-sorter: Simple, Expected, and Deterministic Best-Match Array Sorting

Kent C. Dodds

Bowser: A Browser Detector— Because “not even good modern browsers always provide good feature detection mechanisms.”

Denis Demchenko

Toast Editor: A GitHub-Flavorked Markdown/WYSIWYG Editor— A new version (1.4.0) has just dropped.

NHN

Build & Run JS Unikernels Easily In Minutes using This Free Open Source Tool

OPS sponsor

Bootbox.js: alert, confirm and Other Dialogs for Bootstrap

Nick Payne

react-jsonschema-form: A React Component for Building Forms from a JSON Schema

Mozilla Services

Octotree 3.0: A Browser Extension for Greater GitHub Code Trees— A tool that gives you an IDE-like code tree when browsing projects on GitHub.

Buu Nguyen and Contributors

#434 — April 26, 2019

Read on the Web

JavaScript Weekly

Svelte 3 Released: Rethinking Reactivity— Svelte is one of the most interesting UI frameworks out there as it’s not scared of taking a unique approach. Rather than running in the browser, Svelte runs at build time, compiling your app into more efficient runtime JavaScript. Svelte 3 takes more steps forward, particularly in helping you write less code.

Rich Harris

Node.js 12 Released, And It's a Big One— The newest ‘current’ branch of Node.js upgrades to V8 7.4 which brings many memory and perf improvements for free as well as support for private class fields, TLS 1.3, diagnostic reports, all-new ES module support, and more. NodeSource also have a webinar on new features in Node 12 next Wednesday.

Node.js Foundation

How to Test Software: Mocking, Stubbing, and Contract Testing— We’ll cover the techniques of mocking and stubbing, and test-driven development to help each testing layer. First, let’s review the test pyramid. This helps illustrate the difference between different kinds of tests and when it’s advantageous to do them.

CircleCI sponsor

Uppy 1.0: A Modular Open-Source JavaScript File Uploader— When <input type="file"> isn’t enough, Uppy offers stuff like file previews, upload progress reporting, webcam support, and more. Version 1.0 follows 3 years of development effort.

Artur Paikin

Create React App 3.0 Released— The popular tool to set up a modern React app in a single command takes some key steps forward with support for Jest 24, hooks, TypeScript linting, and more.

Facebook

7 Useful JavaScript Tricks— I just can’t resist the occasional ‘here’s a bundle of neat tricks’ post, so sorry, not sorry 😂 The tricks are relatively simple, but if you’ve not heard of URLSearchParams, say, you need to be checking them out.

David Walsh

Comparing JVM Alternatives to JavaScript— This article is rather opinionated and a bit unfair to React too, but I found it really interesting to see the state of Java to JavaScript compilation toolkits and the code involved in building apps with them (scroll down a lot for that).

Renato Athaydes

💻 Jobs

Lead Front End Engineer - EDITED (London)— Join our Product & Data team, working closely with developers & designers to create data-driven solutions to our customers' problems.

Edited

Have You Tried Vettery?— Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

🤝  Tips for Technical Interviews— If you ever apply to a job in JavaScript Weekly and get invited in, how best to prepare for and survive a technical interview?

Harry Roberts

📘 Tutorials and Opinions

JavaScript Allongé: A Deep Dive into JavaScript's Functionality, Composition, and More— A long-time popular JavaScript e-book that’s now free (if you so choose). The ultimate in weekend reading.

Reg “raganwald” Braithwaite ebook

Learn How to Easily Deploy a Node.js App to the Cloud— Follow this guide to learn how to deploy a Node.js application to the cloud in 4 simple steps using Visual Studio Code.

Microsoft sponsor

Faster and More Feature-Rich Internationalization APIs in V8— Intl provides a feature-rich API for several operations needed in internationalizing your web app and the V8 team has been improving support and performance.

Sathya Gunasekaran (V8)

On Node 12's New Experimental ES Modules Support— Experimental support for ES modules has been in Node since v8.9 but Node 12’s all new implementation kicks things up a few notches with non-flagged, mainstream support expected later this year.

Node.js Foundation

The Design Patterns Game— A quick online game to help test your familiarity with the ‘Gang of Four’ design patterns.

Zoltan Toth

How I Failed the <a>— Use JavaScript to make links do magical things, sure, but don’t break them altogether.

Remy Sharp

Webinar: New and Exciting Features Landing in Node.js 12

NodeSource sponsor

'You Should Never Ever Run Directly Against Node.js in Production. Maybe.'— In short, directly running Node apps (particularly those that act as servers) can be brittle, so why not use tools like supervisor, nodemon or pm2 to keep things robust?

Burke Holland

🔧 Code and Tools

Shepherd: Guide Your Users Through a Tour of Your App— A way to step-by-step highlight features of your app/page. Try the live demo. Angular, Ember, React, and Vue wrappers are available.

Ship Shape

Faast.js: Transforms JavaScript Modules into Scalable Serverless Functions— Supporting AWS Lambda and Google Cloud Functions, Faast.js takes functions exported from a module and makes them serverless while keeping them easy to invoke from JavaScript.

faastjs

A Much Faster Way to Debug Code Than With Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your dev feedback loop more productive.

Wallaby.js sponsor

HTTP View: A Tool to Intercept, Explore and Debug HTTP Requests— An open source tool for debugging, testing and working with HTTP(S). A ‘pro’ level paid version can also detect third party APIs you’re working with and provide more information.

Tim Perry

negative-array: Negative Array Index Support using ES2015 Proxies— For example, array[-1]. Even if you wouldn’t use this, the source is worth reading to learn how it works.

Sindre Sorhus

Sortable 1.9: Reorderable Drag-and-Drop Lists— Happy on touch devices and modern browsers (IE9+), drag items between lists, define your own drag handles, works well with Angular, React, etc.

Sortable

Reattempt: A Way to Give Your Async Functions Another Chance

Waseem Dahman

#435 — May 3, 2019

Read on the Web

JavaScript Weekly

Babylon.js 4.0: The (Very) Powerful WebGL Graphics Engine— Such a significant release that they’ve released a 2 minute video trailer for it! With 4.0 Babylon has gone fully modular, so it’s more efficient than ever to distribute to end users. Want to play? Enjoy this editable live demo.

Microsoft

Visual Studio Code Previews Support for 'Remote Development'— The VS Code editor is getting an exciting new feature, the ability to work directly with remote workspaces (running either WSL, Docker containers, or physical machines or VMs over SSH).

VS Code Team

Using Competency Mapping to Unlock Skills in Your Org— Free, Online Talk - May 15th.

Big Nerd Ranch sponsor

Electron 5.0.0 Released— Just 3 months after 4.0, Electron 5, the popular system for building Node and Web technology based desktop apps, is here. It’s mostly a dependency bump release, but with Node 12 and Chromium 73 now under the hood, that’s no bad thing.

Electron.js Team

Editor.js: A Block-Styled Editor with JSON Output— Typical WYSIWYG editors output raw HTML markup but Editor.js keeps things organized into ‘blocks’ which are then returned in structured JSON which makes the content easier to sanitize or transform.

CodeX

Shimport 1.0: Use JavaScript Modules in All Browsers?— Allows you to use JS modules in all browsers, including dynamic import(). We first linked this when it was entirely experimental but it’s just had its 1.0 release, so have a play.

Rich Harris

Easy Automatic npm Publishes— npm and Node powerhouse Isaac Z. Schlueter says he hasn’t “manually typed npm publish in a while” and explains how he’s semi-automated his npm publishing process.

Isaac Z. Schlueter

💻 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 - Kontist (Remote)— Join our team of full-stack JavaScript developers and shape the future of banking.

Kontist

Have You Tried Vettery?— Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Tutorials and Opinions

In Defense of the Ternary Statement— Code similar to expression ? true_result : false_result is known as a ternary expression. Much maligned, is it possible to use them in JavaScript without getting into an unreadable mess?

Burke Holland

'I just shipped Promise.allSettled in Chrome 76'— Promise.allSettled is like Promise.all but doesn’t short-circuit if any supplied promise is rejected.

Sathya Gunasekaran on Twitter

New Features in Node 12 You Shouldn't Miss— Node 12 came out last week, and this post reflects on some of the new features.

Máté Huszáarik

▶  How Facebook is Building the New Facebook.com with React, GraphQL and Relay— The forthcoming redesign is fully powered by React and Relay and this 35 minute talk digs into the technicalities.

Facebook for Developers

Replace Tedious Coding with MongoDB Stitch and Public APIs

MongoDB sponsor

The Perfect Unit Test— You might recognize Jack’s name if you’ve been a long time subscriber as he used to write a lot of great posts. He’s back now with some basic tips on how to craft better unit tests.

Jack Franklin

Deeply Understanding async and await with Examples— One more for beginners, but it’s a perennial topic covered well.

Arfat Salman beginner

Array.push is 945x Faster Than Array.concat?— Also worth checking out the comments on this one.

Shi Ling

Why I Prefer React Over Vue
Sebastian De Deyne

An Introduction to Vue.js Render Functions (with Examples)
Charles Ouellet

5 Things You Didn’t Know About React DevTools
Kristofer Selbekk

Serving Vue.js Apps on GitHub Pages
Muhammad Usman

🔧 Code and Tools

Textblock: Set Continuously Responsive Typography— A JS library that adjusts the size, leading, line height, and other factors of text to make it ‘continuously responsive’.

Glyphic

sql.js: SQLite Compiled to JavaScript (and Webassembly)— Naturally experimental, 1.0 just dropped with Webassembly support and based upon the latest SQLite version (3.28.0). Want to play? Here’s a live demo.

Alon Zakai

Automate Your Code Reviews— Codacy flags errors in your code so you can fix them quickly, directly from your current workflow. Get started today.

Codacy sponsor

Relay 4.0.0 Released: A Framework for Building Data-Driven React Apps— “Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.”

Facebook

jQuery-CSV: A jQuery CSV Parser Plugin— A jQuery plugin(!) you say? Yes, but this is a very well optimized, battle tested, and spec compliant CSV parser and its 1.0 release today “marks the first – and likely only – stable LTS release of this library” so.. congratulations are in order.

Evan Plaice

Glide: A Dependency-Free ES6 Slider and Carousel— A lightweight, flexible and fast straightforward slider. Demo here.

Jędrzej Chałubek

jQuery 3.4.1: A Bugfix Release— Bugs squashed include focus/blur triggering in IE, checking element attachment in iOS 10.0-10.2, and loading with AMD. 3.4.0 was released last month if you missed that.

Timmy Willison

DeepScan Makes Your JavaScript Better— Use this static analysis service to find problems in your JavaScript, TypeScript, React & Vue on GitHub. Try it free.

DeepScan sponsor

vue-qrcode-reader: Vue.js Components for Detecting and Decoding QR Codes
Niklas Gruhn

Dotenv 8.0: Load Environment Variables From `.env` in Node
Scott Motte

Ember Charts 2.0: An Easy to Use Charting Library for Ember.js
Addepar

#436 — May 10, 2019

Read on the Web

🔥 At the risk of sounding like I'm begging, be sure to at least skim all the way through this issue as it's a really good one. Seriously, we had to pass on so many things to make way for all we have today.

JavaScript Weekly

▶  What’s New in JavaScript— At this week’s Google I/O ’19, Mathias Bynens and Sathya Gunasekaran of the V8 team gave a fantastic 30 minute ‘state of the union’ talk on the state of JavaScript as a language and what new features are being baked in.

Google I/O

Comlink 4.0: It Makes Web Workers Enjoyable— Web Workers provide a way to run JavaScript out of the main thread and in the background, and they’re supported in every browser. Google’s Comlink takes away all the headaches of using them and makes it easy. Basically, you need this.

Google Chrome Labs

Best Experience with React, Angular & Vue.js in WebStorm— With smart code completion, dozens of refactorings, and support for popular frameworks, all working out of the box, WebStorm is an IDE that makes development easier and more enjoyable. Try the new WebStorm 2019.1.

JetBrains sponsor

▶  Angular Fans! Here's All The Talks from ng-conf 2019— There’s a lot to go through here, but this is truly a one-stop shop for up to date Angular talks. Highlights include the keynote talk, how enterprises are using Angular, John Papa delivering a batch of Angular tips, and a complete workshop on using ngRx for state management.

If you prefer a write-up of what's going on in the Angular world, Sam Julien has written up the state of Angular at ng-conf 2019.

Nitay Neeman

⏩ IN BRIEF:

• Microsoft has launched React Native for Windows, bringing the once native mobile development framework to Windows 10 desktop, Xbox, and tablet ecosystems too.
• Googlebot has gotten an upgrade which means it can now crawl and run all your latest ES6 JavaScript, handle Web Components, and more.
• A DoS vulnerability has been found in the popular Axios HTTP library where a malicious server operator could gum down your client-side code.
• The latest version of GraalVM, a JVM-related VM from Oracle, includes a "JavaScript engine compliant with the latest ECMAScript 2019 standard" which provides a migration path for anyone using Rhino or Nashorn.
• To celebrate Minecraft's 10th birthday, Mojang have rebuilt Minecraft Classic in JavaScript and made it free to play. The source shows they've used Babylon.js for the 3D.

💻 Jobs

Senior Web Engineer - Onefootball (Berlin, Germany)— Join our team of engineers to make our user experience on the web as great as on our mobile apps.

Onefootball

Front-end Engineer— Goldstar is looking for Front-end Engineers with React expereince onsite in Portland, Oregon and Pasadena, California.

Goldstar

Find a JavaScript Job Through Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

A Guide to Setting Up Vim for JavaScript Development— VS Code might be the most heavily used editor in our space now, but Vim has a lot going for it and this is a thorough look at setting it up for JavaScript development.

Ayo Isaiah

Array.from Has A Second Argument— Array.from creates a new array from array-like or iterable objects, but it can also take a second argument that’s a map function between the old value to the new.

Stefan Judis

The Developer’s Guide to Not Losing the Metrics You Need— Gathering and storing metrics is a part of production. When adverse events occur, you need to have the metrics available to debug the problems.

InfluxData sponsor

Building a JavaScript Guitar Pedalboard— This is really fun! You can play with the pedalboard for yourself (no guitar needed, there’s a musical sample available) or just learn how the whole thing was set up.

Trys Mudford

▶  Watch Me Build a Trading Bot— Siraj is one of the more engaging developers on YouTube and here he shows off the development of a currency trading bot using a variety of JavaScript related technologies.

Siraj Raval

A Guide to Node.js Logging— Learn how to improve logging in your library or app from using console.log to dedicated libraries like Roarr and Pino.

Dominik Kundel node

Structuring Vuex Modules for Relationships, Speed and Flexibility— Vuex is a state management approach for Vue.js apps.

Greg Bate

▶  A Hands-On Introduction to React Hooks— A 30 minute introduction and demonstration of hooks directly from Facebook’s F8 conference and given by an experienced developer on the Instagram Web team who’s using React every day. (P.S. This week’s React newsletter was really good!)

Kathryn Middleton

🔧 Code and Tools

Tippy.js: A Highly Customizable Tooltip and Popover Library— 10 out of 10 for the cute logo. Lots of neat demos with code examples here too.

atomiks

Cash: A Tiny jQuery Alternative for Modern Browsers— If you just can’t give up those tasty jQuery DOM methods but you want something that’s as small as possible.. this is an option at just 4KB. v4.0.0 just dropped.

Ken Wheeler

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

autoComplete.js: A Simple Pure Vanilla Auto Completion Library— Version 5 has just been released with improved support for large datasets and the ability to debounce API calls.

Tarek

CSS Only Chat: A 'Truly Monstrous' Async Web Chat using No Frontend JS— This is firmly in the “don’t do this, but it’s good to know this is possible” stable of experiments. Background images loaded via pseudo-selectors are the vector here.

Kevin Kuchta

Hybrids: A UI Library for Creating Web Components from Pure Objects and Functions

Dominik Lubański

Get the Fastest Website Deployments. Get Started Free

Buddy sponsor

dinoql: Make GraphQL-Style Queries Upon Local JavaScript Objects— This is a neat idea worth exploring further.

Victor Igor

535 Ways to Reload The Page with JavaScript— You’re not going to find these useful but I found the scale amusing 🤷‍♂️

Stoyan Stefanov

#437 — May 17, 2019

Read on the Web

JavaScript Weekly

Faster, Smarter JavaScript Debugging in Firefox DevTools— If you haven’t tried out Firefox for a while, now’s a great time as the JavaScript debugging tools in the developer edition have had some huge improvements, such as support for setting breakpoints within a line, logpoints, and the ability to debug Web Workers.

Mozilla Hacks

A Faster Script Loading Future with BinaryAST?— BinaryAST is an over-the-wire format for JavaScript (backed by both Mozilla and Cloudflare) that aims to speed up parsing while keeping JavaScript’s semantics intact. Here’s how it works, what the benefits might be, and how Cloudflare are hoping to lean on BinaryAST in its goal to make the Web faster.

Ingvar Stepanyan (Cloudflare)

Join a Community of 3.5 Million Developers— Learn how to build highly-available web apps. Get started on the simplest cloud platform with a $50 credit.

DigitalOcean sponsor

GitHub Gets Its Own npm-Supporting Package Registry— npm packages are one of a few types of package that can be hosted and this will certainly shake up the JavaScript packaging ecosystem. NodeSource has a list of the pros and cons of this development for Node developers.

GitHub

Elegant Error Handling with the 'Either' Monad— Looking for an alternative to try…catch? This goes into a lot of detail, is illustrated, and might even help you finally get your head around monads if you’ve struggled so far.

James Sinclair

What's New in V8 Release V7.5— The latest branch of the V8 JavaScript engine has been unveiled, giving us the usual view of what’s coming to Node and Chrome soon. Numeric separators are the main syntax tweak this time (e.g. 1_000_000 instead of 1000000) but WebAssembly and script streaming also pick up some improvements.

Dan Elphick (V8 Team)

In, JavaScript's Earliest Version == Was Like === Now— A neat bit of JavaScript (then called Mocha) trivia here.

Brendan Eich on Twitter

💻 Jobs

Product-Focused & Driven Frontend Engineers in Stockholm— Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find A JavaScript Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

Getting Started with Svelte 3— We wrote about Svelte 3 a few weeks ago - it’s an intriguing UI framework that runs at build time and compiles down to efficient code. If you were waiting for a basic tutorial to follow, here you go.

Alligator

A Practical Guide to ES6 Proxy— Proxies, as introduced in ES6, open up interesting opportunities for metaprogramming in JavaScript, as examined in several examples here.

Thomas Barrasso

Boosting JavaScript: From MongoDB's Shell to Node.js— Moving a script from MongoDB’s JavaScript-powered shell to Node.js offers a chance to get to use an enormous range of tools and libraries.

MongoDB sponsor

Making the Move from jQuery to Vue— A long time jQuery user discusses the migration to Vue, providing a guide for those who “may be coming from years of jQuery experience and want to see how things can be done with Vue”.

Raymond Camden

JavaScript Engines: How Do They Even Work?— A whirlwind tour covering concepts like the call stack, memory, event loop, and callback queue.

Valentino Gagliardi

Functional-ish JavaScript— Baby steps you might want to consider when making your JavaScript code more functional in nature.

Daniel Brain (PayPal)

An Application Study in Serverless and Azure— An interesting walkthrough of the process behind creating an app that uses TypeScript and Vue.js on the frontend, C# in the back, and running on Azure.

Burke Holland

Kotlin Certified: Using Kotlin to Build Android Apps (7-Day Bootcamp)

Big Nerd Ranch sponsor

TypeScript 3.0's unknown Type, a Type-Safe Counterpart to any

Marius Schulz

🔧 Code and Tools

Announcing TypeScript 3.5 Release Candidate— Faster (in both type checking and incremental builds), a new Omit helper type, smarter union type checking, and more.

Daniel Rosenwasser (Microsoft)

Reakit 1.0: A Toolkit for Creating Rich, Accessible React UIs— WAI-ARIA 1.1 compliant components including cards, popovers, headings, lists, labels, etc.

Diego Haz

Get Reliable JavaScript Tests with Gauge and Taiko— New open source test automation framework by ThoughtWorks.

Gauge sponsor

Ola.js: A Library for Smoothly Animating Values— Smooth tweening between values, ideal for live visualizations.

Francisco Presencia

page.js: A Tiny, Express-Inspired Client-Side Router— Continues to get frequent updates years on.

Matthew Phillips

Delighters.js: Trigger CSS Animations as a Page is Scrolled

Q42

#438 — May 24, 2019

Read on the Web

JavaScript Weekly

Functional JavaScript: How to Use reduce for More Than Just Numbers— Eric Elliott calls it “one of the most versatile functions that was ever discovered” but a lot of developers struggle with reduce beyond basic use cases. If that includes you, this tutorial goes into more depth.

James Sinclair

Pixi.js 5.0: Create Beautiful 2D Web Experiences— Boasts the ‘fastest, most flexible 2D WebGL renderer’ to let you take advantage of hardware acceleration without getting involved in WebGL or 3D concerns. Check out demos for what the code looks like and what you’d use it for. There’s also a Pixi Playground for quickly crafting your own experiments.

PixiJS

Get the Fastest App Deployments. Get Started Free— Unlike most Continuous Integration (CI) solutions, Buddy only re-builds the parts of your application that have changed and deploys your updates in seconds to any app store. Start building better apps faster with Buddy.

Buddy sponsor

Tornis: Watch and Respond to Changes in the Browser's Viewport— A JavaScript library that tracks pointer position, viewport size, scroll position, etc. and lets you perform actions based upon them.

Robb Owen

Node 12.3 Released with WebAssembly Module Support— It’s experimental, but use --experimental-wasm-modules to be able to do, say, import './module.wasm'. Here’s some documentation on how they work if you want to give it a try at this early stage.

Node.js Foundation

WebAssembly at eBay: A Real-World Use Case— Notes on how the eBay engineering team approached building a better barcode scanner using WebAssembly to replace a pure JavaScript version.

eBay Engineering

JavaScript Clean Code: Some Best Practices— You might not sign up for all of these, but these ‘Uncle Bob’-inspired tips might help you think more about how you name things and structure your code.

Milos Protic

💻 Jobs

Front-End Engineer - Apple Inc. (CA, US)— Love the challenge of solving complex problems? Be part of a team with strengths crafting JavaScript apps for iCloud Analytics.

Apple

Product-Focused & Driven Frontend Engineers in Stockholm— Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find a JavaScript Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

How to Create Interactive Sankey Diagrams with JavaScript— A Sankey diagram uses snake-like lines to show changes or correlations in data formations (e.g. how a distribution of votes changed between two elections).

Alfrick Opidi

Vue.js and SEO: How to Optimize Reactive Sites for Search Engines— Are sites created with front-end rendered frameworks indexed by Google? Or do you need to set up pre-rendering? Paolo performed an experiment to see the reality.

Paolo Mioni

Truly Reactive Programming with Svelte 3.0— The latest release of Svelte, a compile-time Web framework, seems to have really struck a chord with developers.

Ovie Okeh

See Why 1.2M Developers Are Building With Mapbox GL JS— Mapbox is making it easier than ever to build, implement, and render amazing maps across mobile and web projects.

Mapbox sponsor

How to Build a Tic Tac Toe App with TypeScript, React and Mocha— Learn how to compose a tic-tac-toe app with React and TypeScript components.

Josh Kuttler

Three.js Fundamentals: A Tutorial— This is a very extensive and impressive set of tutorials on using Three.js to create browser-based 3D experiences.

Greggman

Approaches to Handling Errors in Vue.js Apps

Raymond Camden

🔧 Code and Tools

Rough.js: Draw Web Graphics with a Hand-Drawn, 'Sketchy' Appearance— Supports both drawing on Canvas or using SVG. Yes, it's a classic, but it keeps getting updates.. most recently with support for dashed, sunburst, and zig-zag fills.

Preet Shihn

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

reLift-HTML: A Very Light Way to Create Web Components and Add Reactivity to Pages— Boasting that it has no dependencies, no virtual DOM (some people like this idea), and needs no build tool, this is an interesting project that brings together several modern Web technologies in a very vanilla JS way.

reLift-HTML

v8n: A 'Fluent Validation' Library— Chain together rules to make validations, e.g. v8n().some.not.uppercase().test("Hello");

Bruno C. Couto

AST Explorer: Analyze the Structure of Parsed JavaScript Online— A neat little Web-based tool to see how supplied JavaScript code gets parsed into a syntax tree.

Felix Kling

Material-UI 4.0: Google Material Design-Inspired React Components

Material-UI

await-timeout: A Promise-Based API for setTimeout and clearTimeout

Vitaliy Potapov

Safely Roll Out Features in JavaScript with Free Feature Flags

Optimizely Rollouts sponsor

Reveal.js 3.8.0: An HTML Presentation Framework— A now mature framework that continues to get frequent updates and releases.

Hakim El Hattab

Ember 3.10 Released

Kenneth Larsen and Jessica Jordan

#439 — May 31, 2019

Read on the Web

JavaScript Weekly

Papa Parse 5.0: Fast In-Browser CSV Parsing— Complies with RFC4180, handles streaming, can both parse or convert JSON to CSV, and has no dependencies. It has a nice homepage with lots of usage examples too.

Matt Holt

Angular 8 Released— A major release of the popular app framework, featuring smaller bundles, CLI APIs, differential loading and more.

Stephen Fluin

'Why I'm Still Using jQuery in 2019'— It’s cool to disregard jQuery (we get comments whenever we link to jQuery plugins in JavaScript Weekly – which isn’t often, admittedly) but it’s still heavily used and useful for many. This post provoked an extensive discussion on Hacker News if you’re into such things.

Martin Tournoij

New Course: The Hard Parts of Servers & Node.js ☁️— Learn the hard parts of the, "the most powerful technology to have emerged in the last 10 years for building servers: Node.js."

Frontend Masters sponsor

TypeScript 3.5 Released— It’s not a huge release but improved performance and incremental compilation and the Omit helper type will surely be welcome to the rapidly growing number of TypeScript users.

Daniel Rosenwasser (Microsoft)

React for Vue Developers— It’s always nice to see people riffing on how Vue and React approach problems and how their solutions differ. Here, Sebastian walks through Vue’s core features and how he’d approach them with hooks-flavored React.

Sebastian De Deyne

More Adventures in Functional JavaScript: Five Ways to Calculate an Average with Array reduce— Using the reduce method to calculate an average isn’t unusual but things get complicated fast if you go beyond the most basic examples. Lots to enjoy here.

James Sinclair

P.S. If you have a few minutes, Yulia Startsev of Mozilla (and a TC39 representative) asked if we'd be able to get some of you to take this survey to potentially help in the future design of JavaScript.

💻 Jobs

Join the Tech Team in Prague— Looking for developers who have grit and a thirst for learning while building a service that revolutionizes hospitality

Mews Systems

Frontend Engineers to Profitable Healthtech Startup — Stockholm, Sweden— Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find a JavaScript Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

The 80/20 Guide to JSON.stringify in JavaScript— JSON.stringify converts objects to JSON and it’s used in lots of places. Here’s a brief look at how it’s used and some of the errors it can throw.

Valeri Karpov

Build a Progressive Web App with Angular— Learn how to build an Angular-based PWA and deploy it for use on mobile devices using Netflify.

John Green

12 Tips for Writing Clean and Scalable JavaScript

Lukas Gisder-Dubé

2 Hour GraphQL Tutorials - Concise, Hands-On GraphQL Tutorials for Frontend Developers— A series of open-source GraphQL tutorials with videos. Now featuring tutorials for React, Vue, ReactNative, iOS & Android developers.

Hasura sponsor

Secrets of JavaScript: A Tale of React, Performance Optimization and Multi-Threading— Lessons learned from optimizing a uniquely challenging search UI presented in an interesting, almost ‘choose your own adventure’ format on Medium.

Leo Fabrikant

Compiling C to WebAssembly without Emscripten— Know C and want to compile a function to WebAssembly so you can call it from JavaScript? Here you go. If you’re a macOS user, I created a similar simple example to compiling C to WASM with clang.

Surma

🔧 Code and Tools

VS Code Browser Preview Gets 'Inspect Element' Feature— Inspect an element and go directly to the component’s source. Handy! Works with both React and Svelte so far. Here’s the extension itself.

Kenneth Auchenberg

Normalizr: Normalize Nested JSON to a Defined Schema— For example, consider if you receive a complicated, nested JSON object from a third party service and you want to boil it down to a format that better suits your app.. this is what you need. See the example.

Paul Armstrong

Safely Roll Out New Features in JavaScript with Optimizely Rollouts— Ship faster with less risk. Get free feature flags to instantly turn on or off features without deploys.

Optimizely Rollouts sponsor

Verdaccio 4 Released: A Private npm Registry and Cache— If you need your own private package manager, cache, and proxy, look no further. GitHub repo.

Verdaccio

Puppeteer Recorder: A Chrome Extension That Creates Puppeteer Scripts— Hit record, do things in your browser, and this extension generates JavaScript code you can then run that uses Puppeteer to reproduce the actions headlessly.

Checkly

babel-plugin-macros: Allows You to Build Simple Compile-Time Libraries— If you’re a Babel user and haven’t played with this easy way to integrate compile-time compilation into your code, you’re missing out. Here’s the how and why.

Kent C. Dodds

Zdog: A Pseudo-3D Engine for Canvas and SVG— A JavaScript engine for designing and rendering simple 3D models on the Web.

Metafizzy

TipTap: A Rich-Text Editor for Vue.js— Check out the live demo. It’s based on Prosemirror and you can extend it easily using Vue components.

Scrumpy

Get the Fastest Website Deployments. Get Started Free

Buddy sponsor

Pickr: A Flat, Simple, Dependency-Free Color Picker— Live demo. It’s nice.

Simon Wep

MQTT.js: An MQTT Client for Node and the Browser— MQTT is a messaging protocol commonly associated with IoT. A new release this week adds support for MQTT 5.

MQTT.js

#440 — June 7, 2019

Read on the Web

JavaScript Weekly

On the Economics of Package Management— An essay version of C J Silverio’s talk from JSConfEU ▶️ (watch it if you have 35 minutes to spare). She was ousted as CTO of npm, Inc. last year but is back with a history of the JavaScript package ecosystem, a discussion of who really ‘owns’ it, and a suggestion for a new way forward oriented around Entropic, a new, agnostic, federated package registry.

C J Silverio

Several New JS Features are Getting Closer with 'Optional Chaining' Now at Stage 2— New JavaScript features go through various stages before they become official and this ?. operator to let you make chained property or function calls optional has taken another step forward. In related news, Array.isTemplateObject has also just gone to stage 2, top-level await to stage 3, and BigInt is now at stage 4.

Ecma TC39

⚛️ The NEW Complete Intro to React... Now, with Hooks— Much more than an intro, you’ll build a real-world app with the latest features in React including 🎣 hooks, effects, context, and portals.

Frontend Masters sponsor

Are Long JavaScript Tasks Delaying Your 'Time to Interactive'?— Chrome DevTools can now visualize ‘Long Tasks’ (code that causes the main thread to freeze, breaking the user experience) making it easier to debug and optimize away any problems.

Addy Osmani

Switch from Medium to Your Own Blog in a Few Minutes— Would’t it be great if more people we linked to were using their own blog instead of Medium? (Yes.) Here’s an example of the end result, but you can tweak it to your own tastes.

Mathieu Dutour

Just Write Code: Cloudflare Improves the Developer Experience of their Workers Serverless JavaScript Platform— Workers, Cloudflare’s globally distributed serverless platform, gets a CLI developer tool, the ability to run apps on workers.dev without using your own domain, new docs, and a free tier to make it easier to try it out.

Rita Kozlov (Cloudflare)

💻 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

Front End Engineer (Manchester, UK)— Join our friendly team creating beautiful applications loved by customers around the world. Excellent work/life balance & benefits.

Capsule

Land a New Dev Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

8 Useful JavaScript Tricks— You all seem to love a good list’o’tips article, and this one is not bad at all, particularly if you consider yourself at beginner to intermediate level.

Milos Protic

Unpacking Hoisting— “Hoisting is old and confused terminology,” said Allen Wirfs-Brock recently. Dr. Axel has some ideas on how to better think about declarations.

Dr. Axel Rauschmayer

Automate Your Code Reviews— Codacy flags errors in your code so you can fix them quickly, directly from your current workflow. Get started today.

Codacy sponsor

Best Practices for Building a Large Scale React App— A few concepts worth keeping in mind to make neater, larger scale apps over time.

Aman Khalid

How to Render a Dynamic Tree Diagram with SVG and Vue.js— What’s involved in creating a dynamic tree diagram using cubic bezier curve paths and Vue for data reactivity.

Krutie Patel

An introduction to the MediaRecorder API— The MediaRecorder API is a browser API that you can use to record audio and video in the browser. Here’s how.

Phil Nash (Twilio)

How To Use jQuery With Angular (When You Absolutely Have To)— For, like, when you really have to.. as “when it comes to integrating jQuery in Angular, things get a little weird.”

Aditya Modi

Angular 8: A Brief Summary of What's New

Alligator

Building Web Apps with MERN Stack and Google Cloud Platform

MongoDB sponsor

Enabling Modern JavaScript on npm— Modern JavaScript syntax lets you do more with less code, but how much of the JavaScript we ship to users is actually ‘modern’ and are we transpiling too much?

Jason Miller

🔧 Code and Tools

PixelMatch 5.0: The Simplest and Fastest Pixel-Level Image Comparison Library— Give it two images, it’ll highlight the differences.

Mapbox

Nerv: A Fast IE8- and React 16-Compatible React Alternative— Nerv bills itself as a tinier, faster React alternative that supports modern React 16 features. v1.4.0 just dropped.

Li Weitao

inline-loops.macro: A Babel Macro to Inline Iterators to Native Loops for Performance— Provides methods like map, reduce and find and compiles these down to allegedly faster loop-driven alternatives.

Tony Quetano

Get Reliable JavaScript Tests with Gauge and Taiko— New open source test automation framework by ThoughtWorks.

Gauge sponsor

Pinker.js: A Library for Rendering Code and Class UML Diagrams

Without Haste

PDFKit: A PDF Generation Library for Node and The Browser

GitHub

tinydate: A Tiny and Fast Reusable Date Formatter— e.g. tinydate('Current time: [{HH}:{mm}:{ss}]') .. which returns an object you can call at any time (or supply a time of your own to format).

Luke Edwards

ms: Tiny Millisecond Conversion Utility— For example: ms('2 days') returns 172800000. A new version has just dropped fixing some bugs.

ZEIT

#441 — June 14, 2019

Read on the Web

JavaScript Weekly

43 JavaScript Questions, With Their Answers Explained— Want to test your JavaScript knowledge? Whether for fun or a job interview, this is an interesting set of questions, complete with explanations of the answers.

Lydia Hallie

An Overview of Promise Combinators— Since ES6 / ES2015, the Promise.all (short-circuits when any promise is rejected) and Promise.race (short-circuits when any promise is settled) have provided two ways to work with groups of promises, but Promise.allSettled and Promise.any are on the way to add extra flexibility. Here’s how to use them all.

Mathias Bynens

Image & Video Management Made for Developers— Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

When Should You Be Using Web Workers?— Web Workers provide a way to run JavaScript in background threads in the browser and you’d think using them as much as possible would be a good thing.. right? Current frameworks make this tough, says Surma, who shows us why we should be working to change this ASAP.

Surma

Pika CDN: A CDN for Modern JavaScript— An interesting idea, this. It’s a proxy that serves up npm packages that use the ES Module syntax so you can use them directly on the Web using import.

Pika

Lebab 3.1: Turn Your ES5 Code Into Readable ES6 / ES2015— An interesting project that follows a variety of rules to convert traditional JavaScript into a more modern variant. You can try it live here. It’s been a couple of years since we’ve linked to it, but it’s continued to get updates.

Rene Saarsoo

An Early Stage Proposal for Immutable Data Structures— A proposal for introducing immutable value types natively to JavaScript. It’s at an early stage but there are some interesting ideas.

Robin Ricard

💻 Jobs

Senior Node.js API Engineer - Exodus (Remote)— Do you live for beautiful APIs? We're looking for a meticulous, obsessive leader to focus on our backend API services.

Exodus

Stream Is Hiring a Senior Full Stack Engineer in Boulder - Colorado— Love writing JavaScript and maintaining infrastructure? We do too. Apply now and join the team in Boulder, Colorado.

Stream

Land a New Dev Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

Using Array.prototype.flat and Array.prototype.flatMap— A quick look at two methods which are now supported in the latest versions of Node, Chrome, Firefox and Safari.

Mathias Bynens

▶  Porting Your Node.js Web App to Serverless in 30 Minutes(ish..)— This live-coding session will guide you through the process of migrating an existing Express application to AWS Lambda.

Alex Casalboni

Join a Community of 3.5 Million Developers— Deploy cloud native apps on the platform developers love. Sign up now with a new user activation credit.

DigitalOcean sponsor

Widening the Web with ECMA-402: Our Work on the Internationalization Extension to JavaScript— ECMA-402 is a separate standard (to ECMAScript itself) defining an internationalization API for ECMAScript. It’s supported to a certain extent by most browsers but there is still a lot of work to be done.

Valerie Young (Bocoup)

How One Team of Freelancers Writes Full Stack JavaScript Apps— Some simple principles one distributed agency uses.

Elie Steinbock

The reduce ({...spread}) Anti-Pattern— As an aside, this post is really well presented.

Rich Snapp

The Open Source Conundrum: How Do We Keep the Lights On?

CodeFund sponsor

A Guide to Angular 8's Differential Loading— Angular 8 now sends different bundles of code to different clients. Here’s the how and why, plus an Angular Auth0 tutorial tacked onto the end for some reason 😄

Sam Julien

To Have A Future, Ember Must Kill Its Past

Andrew Callahan

🔧 Code and Tools

readme-md-generator: A CLI That Generates Good-Looking README.md Files— It’s pretty simple but the results are nice. Answer some questions and get a good starter template for your project’s README.md file.

Franck Abgrall

VuePress 1.0 Released: A Vue.js-Powered Static Site Generator— There’s also a writeup of a talk which covered what’s new in 1.x.

Evan You

React Hot Loader 4.11.0: Tweak React Components in Real Time

Abramov, et al.

ChessBoard.js 1.0: A JavaScript Chessboard Component— Happy 1.0! Note that jQuery is a dependency. Examples here.

Chris Oakman

Gauge + Taiko = No More Flaky Tests. Everything You Need for Reliable End-to-End Testing— Gauge and Taiko are open source tools created by ThoughtWorks for end-to-end test automation.

Gauge sponsor

React-Leaflet 2.4: React Components for Leaflet Maps— Leaflet is a popular JavaScript library for creating interactive maps. This library brings support direct to React and has recently added React 16.8 and Flow 0.100 support.

Paul Le Cam

Swagger Client: A JS Client to Fetch, Resolve, and Interact with Swagger/OpenAPI Documents

Swagger

A Minimal Starter Boilerplate for JavaScript Libraries— Brings together Webpack 4, Babel 7, and Jest.

Francisco Hodge

Lightweight Charts: Lightweight, Canvas-Powered Financial Charts

TradingView, Inc.

#442 — June 21, 2019

Read on the Web

JavaScript Weekly

TOAST UI Grid 4.0 Released— TOAST UI Grid (see samples here) is a powerful and customizable grid control for the Web that supports editing, calculations, a tree-like view, theming, and more. 4.0 is a big release as it tears out the old jQuery and Backbone dependencies, adds keyboard navigation, and can handle large datasets better. GitHub repo.

TOAST UI

Vue.js 3.0 to Gain a Function-Based Component API?— An interesting look at the next step for the Vue.js project in the shape of a new approach to exposing component options via function-based APIs rather than the class-based API (although current syntax will continue to work and be supported). Here’s the actual pull request.

Evan You

Get Best in Class Error Reporting for Your JavaScript Apps 🚀— Time is money. Software bugs waste both. Save time with Bugsnag. Automatically detect and diagnose errors impacting your users. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in minutes. Try it free.

Bugsnag sponsor

A Gentle Introduction to Web Components— Web Components (custom elements) allow you to implement reusable components with only HTML, CSS and JavaScript. Here’s how to build your first, and how to use them in your apps.

Robin Wieruch

V8 Release v7.6: What's New?— Another day, another branch of V8 is on the boil and headed to a Chrome 76 and future version of Node near you soon 😄 This time, the heavily used JSON.parse gets some significant performance improvements, BigInt now has better API support, we gain Promise.allSettled, and more.

Adam Klein

Just: A JavaScript Task Library from Microsoft— If you’re familiar with Ruby’s rake, it’s a bit like that. Define tasks in JavaScript, run them with just (which works fine without installation using npx) and you get a bunch of nice features like logging and task composition.

Microsoft

Protecting Package Publishers with npm Token Security— In collaboration with GitHub’s token scanning program, npm has set up a system where when you commit or push a change to GitHub in a public repo, any npm authentication tokens found will be checked and revoked, in an effort to keep you safe.

The npm Blog

💻 Jobs

Wanted: Curious Developers with ❤️— Stagnating? Check C5 out: New projects, tech, and challenges perfectly paired with kind and brilliant people in SF, LA, NYC, CHA.

Carbon Five

Senior Node.js API Engineer - Exodus (Remote)— Do you live for beautiful APIs? We're looking for a meticulous, obsessive leader to focus on our backend API services.

Exodus

Land a New Dev Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

Several ES2019 Features You Can Use Today— A brief look at Object.fromEntries, trimStart, trimEnd, flat, flatMap, and more.

Faraz Kelhini

Building 'Micro Frontends' with React, Vue, and Single SPA— A look at how to use multiple JavaScript frameworks in a single-page application.. if you so wished.

Nader Dabit

Everything You Need to Know About Date in JavaScript— Runs through what you need to know about Date objects.

Zell Liew

Watch On-Demand: New and Exciting Features Landing in Node.js 12

NodeSource sponsor

Understanding Worker Threads in Node— Worker threads are now a standard, built-in Node.js feature and enable you to run separate scripts in separate threads, a la Web Workers in the browser.

Liz Parody

Debugging JavaScript Like a Pro with Google Chrome— Chrome’s DevTools have a lot to offer in the debugging department for every JavaScript developer.

Giancarlo Buomprisco

Confused by const? Me Too!— Constants in JavaScript don’t necessarily behave the way you think they would, and unless you’re storing an unchanging, primitive value, maybe you should use let suggests Brian.

Brian Rinaldi

🔧 Code and Tools

jBox: A jQuery Plugin for Creating Customizable Tooltips, Modals, Etc.— We don’t often get to link to new releases of jQuery plugins nowadays, so let’s enjoy this. jBox makes it easy to create modals, tooltips, image galleries, ‘toast’ style notifications, and more. Lots’o’demos here.

Stephan Wagner

FreezeFrame.js: A Library for Pausing Animated GIFs— A way to let users ‘pause’ animated GIFs and reanimate upon mouse hover or a similar event.

Christopher Antonellis et al.

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Styled-Components v5: Faster CSS Styling for Your React Components— Styled Components is a popular way to bring CSS and JavaScript together for styling components.

Evan Jacobs

Spotlight: A New Lightbox Gallery Library— It’s been years since we’ve linked to one of these (2 actually, when we linked to lightgallery.js, which remains a good option).

Nextapps GmbH

Delaunator: A Fast Library for Delaunay Triangulation of 2D Points— The demo is the best way to get a feel for what this is about.

Mapbox

VerbalExpressions: Regular Expressions Made Easier— A library that provides a fluent API for creating regular expressions (e.g. .startOfLine()​.then('http')​.maybe('s')).

Shreyas Minocha et al.

Everything You Need for Reliable End to End Test Automation— Gauge + Taiko = Reliable browser automation for your JavaScript tests. Open source tools created by ThoughtWorks.

Gauge sponsor

websocket-as-promised 0.10.0: A Promise-based API for WebSockets— For both browsers and Node.js.

Vitaliy Potapov

Deepmerge: A Library for Deep (Recursive) Merging of Objects

Josh Duff

eslint-config-prettier: Turns Off All ESLint Rules That Might Conflict with Prettier

Prettier

🚛 The "I still don't have enough to read and I want more" zone:

• A great guide to optimizing the performance of Google Fonts, which I assume most of us are using somewhere.
• A CodePen recreating The Matrix's 'character rain' effect. I'd like to start a weekly list of great CodePens, actually, there are so many good ones..
• The npm CLI repo hasn't had a commit in three months. Here's part of the reason why.
• Node is faster than Python 3.
• A showcase of Google's Web performance tools^▶️ as they stand right now.
• Want to see if your Web site's IP is blocked in Russia? Many are.
• Google Earth is using WebAssembly to the max.

P.S. Did you know we're on Twitter as well? Follow us @JavaScriptDaily

#443 — June 28, 2019

Read on the Web

JavaScript Weekly

The Cost of JavaScript in 2019— Almost a year ago, we linked to Addy Osmani’s Cost of JavaScript in 2018 article, and he’s back with an update for 2019 in both video and article forms. If you want to get a feel for where the true bottlenecks are with JavaScript right now, this is a must read.

Addy Osmani

Bliss.js: Making Native APIs Nicer to Use from Vanilla JS— At first glance, you might think this looks a bit like jQuery, but it’s lighter and built with vanilla JS and modern standards in mind.. it just cleans up the rough edges of working with native browser APIs. The latest version includes some new methods such as $.load for loading JS or CSS resources and $.when for deferring code execution.

Lea Verou

New Course: 💡 Functional Light JavaScript by Kyle Simpson— Apply functional programming concepts in JavaScript to make your programs more readable and less error-prone. Tour through function purity, currying, immutability, recursion, list operations and concepts like monads and transduction.

Frontend Masters sponsor

The Secret of Good Electron Apps— Without being too spoilery, the ‘secret’ to making better Electron apps is to take as much of the processing local to the app itself rather than relying entirely upon remote services (i.e. just being a glorified Web browser).

James Long

▶  The Weird History of JavaScript— A fun, 10 minute fly through of the history of JavaScript. This 10 minutes will give you some fun facts for your next dev conversation or JavaScript job interview ;-)

Fireship

The State of Angular in 2019— We don’t focus on much beyond the big releases and best tutorials when it comes to Angular, but if you’ve been wondering what’s going on with it, here’s an overview of the state of the Angular ecosystem.

Giancarlo Buomprisco

▶  Keep Betting on JavaScript— Kyle Simpson presents a history lesson of JavaScript, looks at how a variety of features were (or weren’t) introduced, and compels us to think about the future of the Web and JavaScript as we contribute and ‘place bets’ on technologies.

Kyle Simpson

💻 Jobs

Senior Node.js API Engineer - Exodus (Remote)— Do you live for beautiful APIs? We're looking for a meticulous, obsessive leader to focus on our backend API services.

Exodus

Stream Is Hiring a Senior React Native Engineer in Boulder, Colorado— Enjoy problem-solving and working with React Native? Do you thrive in a team environment? Join us at Stream by applying now.

Stream

Find a JavaScript Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

A Look at Object.fromEntries— The new Object.fromEntries API performs the inverse of Object.entries. It’s an ES2019 feature but is already widely supported.

Mathias Bynens

The 10 React Component Commandments— A handy walkthrough of 10 ‘practical commandments’ for creating components that you can share widely and that other developers will actually want to use.

Kristofer Selbekk and Caroline Odden

Building a Data Stream for IoT with NiFi & InfluxDB— Combining NiFi & InfluxDB results in secure, accessible, and usable IoT data streams. This solution enables a single data view across all facilities providing proactive maintenance, failure detection, and more.

InfluxData sponsor

Adding a WebAssembly Component to a React App with AssemblyScript— “If I’m working on a React application for example, could I easily add some WebAssembly to support some things that perhaps need to run a bit quicker?” The answer is yes and here’s a practical demo.

Andy Lee

HTML Includes That Work Today— I’m not sure why we forgot to include this at the time, but it’s a rather neat way to use iframe and a little JavaScript to pull external resources (e.g. SVG or HTML) into the current DOM.

Scott Jehl

▶  Let's Analyze an Exploited NPM Package— A fascinating look at the technicalities of what happened during last year’s event-stream backdoor incident.

Jarrod Overson

Product Announcements: MongoDB 4.2, Auto Scale, Full-Text Search, Data Lake & More.

MongoDB sponsor

An Introduction into Stencil.js— Stencil is a compiler that generates Web Components developed by the Ionic team.

Gabriel Tanner

🔧 Code and Tools

The TypeScript Playground— The online TypeScript sandbox has just had a major upgrade. It supports all compiler flags, different TS versions, has an built-in formatter, and more. Want to experiment with TS? Use it.

TypeScript Project

svelte-adapter: Use Svelte Components with Vue and React— An interesting experiment. See it in action on CodeSandbox.

pngwn

Riot.js: A Simple and Elegant Component-Based UI Library— An interesting alternative UI library that might click with you. “Think React + Polymer but without the bloat.”GitHub repo.

Riot.js

moveTo: A Dependency-Free Scroll Animation Library— Demo page. Supports different easing functions (including custom ones).

Hasan Aydoğdu

Gauge + Taiko = No More Flaky Tests— Everything you need for reliable end to end testing! Gauge and Taiko are free and open source tools created by ThoughtWorks.

Gauge sponsor

Mavo: Build Reactive Webapps with Just HTML and CSS— Extends HTML with extra syntax to describe persistent webapps that can manage state. This week’s release is the first in over a year and includes a lot of changes.

Lea Verou

iconv-lite 0.5: Convert Character Encodings in Pure JavaScript— It’s just had its first release in almost a year.

Alexander Shtuchkin

Elliptic: Fast Elliptic Curve Cryptography in Plain JS

Fedor Indutny

TWGL.js: A Tiny WebGL Helper Library— If you want to write and use actual WebGL but for it to be easier and less verbose, this is for you and the code comparisons will win you over in seconds.

Gregg Tavares

DarkModeJS: A Utility Package for Managing Dark Mode— Uses the matchMedia API and the prefers-color-scheme media query to fire functions whenever a user is in dark mode (or changes the mode).

Assortment

Top Angular Component Libraries to Try in 2019

Saurabh Barot

🐦 VIRAL JS TWEET'O'THE'WEEK

P.S. Did you know we're on Twitter as well? Follow us @JavaScriptDaily

#444 — July 5, 2019

Read on the Web

JavaScript Weekly

Babel 7.5.0 Released— The popular JavaScript compiler now includes an official plugin for dynamic imports (currently in stage 4) and the F# style pipeline operator. There’s also experimental support for TypeScript namespaces.

Nicolò Ribaudo

▶  Introducing The Babel Podcast— Not only do we get a new release of Babel this week, we get a whole new JavaScript podcast from them too. The first episode features Babel’s original creator, Sebastian McKenzie, talking about the history of Babel and his current Rome project.

Henry Zhu podcast

Free Course: Get Started with JavaScript by Kyle Simpson 👍— Get three free courses: Getting Started with JavaScript, Complete Intro to Web Development & Practical Introduction to Algorithms free by signing up for a trial account– no credit card required.

Frontend Masters sponsor

What Are Higher-Order Functions, and Why Should You Care?— The latest in James Sinclair’s fantastic series of functional-focused articles. This time, he deftly tackles what everyone means by “higher-order function” and why you might use them.

James Sinclair

▶  'Svelte Is The Most Beautiful Web Framework I've Ever Seen'— Sure, it’s an opinion, but I enjoyed this (rather long) screencast where a developer finds his way with Svelte (an increasingly popular compile-time UI framework) by building a Tic-Tac-Toe game (or as we call it back in the UK, Noughts & Crosses!).

Jesse Skinner

p5.js: A Client-Side JS Platform for Creative, Arty Coding— It’s a mature project but we haven’t linked to it for years and it’s just had a big release. Check out some of the examples in the live p5.js playground for a feel for how cool this is – it makes putting together visualizations and visual experiments very easy.

Processing Foundation

Emscripten and the LLVM WebAssembly Backend— Emscripten is switching to the LLVM WebAssembly backend. Why is this a good thing? It’ll make Emscripten faster, more efficient, and be able to adopt new WebAssembly features more quickly.

V8

💻 Jobs

JavaScript Developer - Shedul/Fresha (Warsaw)— Do you think Front-end is all about padding & fonts? Not at all. Apply now, and see what true engineering looks like.

Shedul / Fresha

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

X-Team

Land a New Dev Job on Vettery— Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

Using the Intl API for Internationalization in JavaScript— Rather than ship lots of locale-specific data in your app, you might be able to lean on the Intl object (supported in all major browsers) for date, time, and number formatting.

Ankita Masand

12 Tips for Improving JavaScript Performance— Half of your visitors expect a page to appear within 2 seconds so keeping your JavaScript fast is a must. Here are some relatively entry level tips to helping you on your way.

Liz Parody

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

How Array.prototype.sort is Now Stable— It’s now required by the ECMAScript spec for Array#sort to be ‘stable’ (i.e. where items with equal sort keys remain in their original order in the sorted result).

Mathias Bynens

Automatically Detect Memory Leaks with Puppeteer— An automated way to test for memory leaks in the browser.

Christoph Guttandin

A Look at the Public Class Fields Proposal

Dr. Axel Rauschmayer

How to Make HTTP Requests with Axios— Now that browsers widely support the Fetch API, Axios is less essential but it still provides a good HTTP client API and it works both in the browser and on Node.js.

Faraz Kelhini

Using Slots in Vue.js— A thorough tour of a popular though easily misunderstood Vue.js concept.

Joseph Zimmerman

Top 10 GitHub Best Practices: Lessons from Thousands of Repositories

Datree.io sponsor

Tips for Rolling Your Own Lazy Loading— A walkthrough of adding lazy loading to your site from scratch, from using Intersection Observer to determine when to load images to creating the right HTML.

Phil Hawksworth

▶  Immer, Immutability and the Wonderful World of Proxies

Michel Weststrate

How to Make an Interactive, Animated Vue.js Slider

Henry Desroches

🔧 Code and Tools

Frappe Charts: Simple and Modern SVG Charts— Aero dependencies, and supports bar, line, pie, and GitHub-style ‘heatmap’ charts.

Frappe Technologies

React Native 0.60 Released— A bigger release for the popular React-based native app framework than the version number gives away.

Ryan Turner

FormPersistence.js: Preserve HTML Form Data Across Sessions

Finn Thompson

A GraphQL API to Join Across Your Database and Other Data-Sources— Get a GraphQL API to join across your database and 3rd party APIs, microservices and different database instances with Hasura Remote Joins. Read more here. #JoinAllTheThings.

Hasura sponsor

zip: A Robust ZIP Decoder— If recent talk of ZIP ‘bombs’ (ZIP files that can decompress to gigantic sizes) is scaring you, this may be of interest.

Ronomon

Puppeteer Recorder 0.7: Records Browser Interactions and Turns Them into Puppeteer Scripts— Add this to Chrome, perform activities on the Web (now including taking screenshots), and you’re given editable code to re-run what you just did.

Tim Nolet

P.S. Did you know we're on Twitter as well? Follow us @JavaScriptDaily