Industry News

#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

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

#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

#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