#396 — July 27, 2018

Read on the Web

JavaScript Weekly

If you've not ventured to the end of an issue of JavaScript Weekly recently, you'll be missing some of the bonus links or 'golden oldies' we've been running — this issue has a set of 4 older posts we've been seeing getting some fresh love on social media recently, so check those out.

Also, if you want to submit articles or libraries for us to consider use this submissions form or just hit reply :-) Thanks!
— Peter Cooper, editor

Logging Activity with the Web Beacon API — The Beacon API is a Web API (supported by all major browsers) that provides an efficient way for data to be asynchronously sent from a page back to a server for logging purposes.

Drew McLellan

Ionic 4 Beta Released: Build Native Apps with Web Tech — The beta release of Ionic 4, a framework for building native apps and PWAs with Web technology, has just landed. 4.0 marks the first version to completely embrace modern Web APIs such as Custom Elements, CSS Variables and Shadow DOM, plus it’s framework-agnostic at its core.


Developer Tools for Every Customer Session – New in FullStory — Your browser developer tools are now available for site sessions other than your own. Easily understand performance issues thanks to page speed metrics, network analysis, downloadable HAR files, and comprehensive stack traces on all your visitors’ sessions.

Fullstory sponsor

JavaScript Algorithms and Data Structures — JavaScript examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations. (We linked this a couple of months ago but it has been substantially improved since then.)

Oleksii Trekhleb

ndb: An Improved Debugging Experience for Node — Run your Node code with ndb and get extra, powerful Node debugging features right in Chrome’s DevTools including editing files and setting breakpoints before modules are loaded.

Google Chrome Labs

Build a State Management System with Vanilla JavaScript — Redux, MobX and Vuex can make managing cross-component state trivial, but what would it take to write one for yourself?

Andy Bell

GitHub Finishes Removing jQuery From Its Web Frontend — And they’ve replaced it with.. no specific framework, but judicious use of querySelectorAll, custom elements, polyfills, etc.

Mislav Marohnić on Twitter

SimpleDataTable: A Simple Data Table Control with No DependenciesExamples. Significantly lighter than the TUI Grid we linked last week.

Piotr Kowalski

💻 Jobs

Lead Engineer (Boston) — Work with smart devs and designers to solve meaningful problems for great clients. React, Vue, Gatsby, WordPress, Craft, and more.


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


📘 Tutorials and Opinions

Redux vs. the React Context API — How the new context API in React 16.3 works compared to Redux and why you’d choose one over the other. More like this in today’s React Status newsletter.

Dave Ceddia

Adding Particle Effects to DOM Elements with Canvas — A neat tutorial showing how to create a striking HTML-to-particle effect.

Zach Saucier

A Crash Course on Serverless APIs with Express and MongoDB — A really detailed look at running Express (the Node.js webapp library) in a serverless context.

Adnan Rahić

Want to Know More About Ubuntu 18:04? DigitalOcean Can Help — DigitalOcean offers tutorials, projects and answers to your questions about Ubuntu 18:04.

DigitalOcean sponsor

Hello Vue: A Quick Tutorial on Getting Started with Vue — A quick tutorial on getting started with Vue that includes the use of a component from the Kendo UI library of Vue UI components.

John Willoughby

Building 'Renderless' Vue Components

Samuel Oloruntoba

Crafting a Better User Experience During API Requests

Ryan Baker

Why the New V8 is So Darn Fast

Thorsten Lorenz

Free Video Course: How to Upgrade Cordova Applications to Native

NativeScript sponsor

A Comprehensive Guide to Working with Dates in JavaScript

Flavio Copes

Flow Control in Modern JS: From Callbacks to Promises to Async/Await — One for beginners/learners.

Craig Buckler

🔧 Code and Tools

Vuestic Admin: A Vue.js Admin Dashboard — Built on Bootstrap 4. Live demo.


StealJS 2.0: The 'Futuristic' Dependency Loader and Builder

Matthew Phillips

JSInspect: Detect Copy-Pasted and Structurally Similar Code — A tool for finding those duplicated code smells in your codebase. Supports ES6, JSX and Flow.

Daniel St. Jules

Application Stability Monitoring with Bugsnag — Make data-driven decisions on whether you should be building features, or fixing bugs to stabilize your app.

Bugsnag sponsor

jsQR: A Pure QR Code Reading LibraryLive demo. It’s incredibly fast.

Cosmo Wolfe

Angular 6.1 Released — A minor release that’s a drop-in replacement for Angular 6.0. TypeScript 2.8 and 2.9 support has been added.

Stephen Fluin (Google)

excel4node: An Excel Spreadsheet (XLSX) Generation Library — Conforms to the ECMA-376 OOXML specification 2nd edition and the examples in the documentation are quite thorough.

Nathan (Nater) Jorde

Unswitch: An Event Handler for Nintendo Switch Controllers on the Web — Based on the Gamepad API.

Colin van Eenige

☀️ Some Summery JavaScript Golden Oldies

JavaScript Scope and Closures: A Useful Primer/Explainer — A true golden oldie if you want to nail down your knowledge of scope and closures.

Zell Liew

Debugging Tips and Tricks for Front-End Developers — A fantastic round-up of concepts, tools, and things to consider.

Sarah Drasner

Modern JavaScript for Ancient Web Developers“Doing is learning. Doing it badly? It’s still learning. Learning modern JavaScript these days can feel like a futile exercise in WTF.”

Gina Trapani

Babel Time Travel: See Babel Transformations Step by Step — Click “Compile” on the right then skim along the bottom.

Boopathi Rajaa