#391 — June 22, 2018

Read on the Web

JavaScript Weekly

Using JavaScript Modules on the Web— Node supports ES modules, Firefox 60 supports ES modules, indeed most browsers do so you might enjoy this Chrome-themed explanation of what they are, how to use them in the browser, and how to keep them fast.

Addy Osmani and Mathias Bynens

A Minimal Guide to ECMAScript Decorators— Decorators, which would provide a handy syntax to mutate functions or classes, are currently at stage 2 of TC39’s process, but how are they likely to work?

Uday Hiwarale

See Why Facebook, Spotify, & fastlane Trust CircleCI with Their CI/CD— Automate the software development process using continuous integration and continuous delivery so you can focus on what matters: building great things, not waiting for great things to build.

CircleCI sponsor

Billboard.js 1.5 Released: Easy JS Charts— A chart library that uses D3 under the hood. This release adds a new ‘radar’ chart, improved text positioning and clipping, bug fixes, etc.

Jae Sung Park

▶  The Cost of JavaScript— In just 20 minutes Addy Osmani covers approaches to delivering JavaScript in an efficient way to ensure your users experiences are as seamless and smooth as possible.

Addy Osmani

Node 10.5 Released with Experimental Worker Threads Support— Interested in the multi-threading? Check the FAQ and this pull request with example usage.

Node.js Foundation

V8 Release V6.8— 6.8 is now in beta and will be going mainstream with next month’s Chrome 68. Nothing huge feature-wise but some minor memory and performance improvements.

Mathias Bynens

Github Stars !== Usage: React Still More Popular than Vue— Last week there was a fun community story around Vue.js getting more stars on GitHub than React, but while Vue is growing fast, React still dominates in actual usage.

Kevin Ball

💻 Jobs

JavaScript Developer at X-Team (Remote)— We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Senior Front End Developer (Charlotte, NC)— Bring your skills to create, code and optimize websites & user experiences for some of the biggest brands in the US. Join us at RV.

Red Ventures

Have You Tried Vettery?— Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

📘 Tutorials and Opinions

Building a RSS Viewer with Vue.js

Raymond Camden

The Trouble with D3?— D3 is phenomenally powerful, but requires you have a grasp of many concepts to use it well.

Ian Johnson

Writing Your Own ESLint Plugin— Handy for if you or your company have specific code conventions or preferences you want to enforce.

Watandeep Sekhon

Why Do JavaScript Test Frameworks Use describe() and beforeEach()?— Check out our detailed blog based on the State of JavaScript Survey. Helpful links for intermediate to advanced developers.

Big Nerd Ranch sponsor

Why 'Mapping' a Constructed Array Doesn't Work in JavaScript— And a way around the issue.

Shawn Reisner

The Internals of Shadow DOM and How to Build Self-Contained Components— A basic introduction to building Web Components.

Alexander Zlatkov

Build a Single Page App from Scratch Without a Framework— Using jQuery (yes!), Handlebars, Express and Axios.

Michael Wanyoike

Building A Serverless Slack Bot using Cloudflare Workers and JavaScript— Workers is a serverless/edge-computing platform Cloudflare operates.

Rita Kozlov (Cloudflare)

Build a Custom App for Slack

Slack sponsor

How To Build Dynamic Components in Angular 6

Rajat S

Implementing an Infinite Scroll with Vue.js

Dave Berning

🔧 Code and Tools

Material Dashboard: A Bootstrap 4 Material Design Admin Dashboard— Comes in plain HTML, React, Vue, and Angular varieties. Demo.

Creative Tim

Introducing Akita: A New State Management Pattern for Angular Apps— Built on top of RxJS.

Netanel Basal

Realtime. Real Simple— Build and scale interactive, immersive apps with PubNub - chat, collaboration, geolocation, device control and gaming.

PubNub sponsor

number-flip: Increase a Count/Number with a Flipping Animation

日天

Phoenix: A macOS Window and App Manager Scriptable with JavaScript— Written in Objective C, but you can create scripts like this with JavaScript.

Kasper Hirvikoski

Sprite.js: A Cross-Platform Lightweight 2D Render Object Model

Akira Wu

Electron 3.0.0 Beta 1 Release— Significant due to the dependency upgrades (Chrome from 61 to 66, Node from 8 to 10, V8 from 6.1 to 6.6).

Electron

#392 — June 29, 2018

Read on the Web

JavaScript Weekly

▶  Write Perfect Code with Standard and ESLint— An intro to getting started with linting (and why - hint: to catch errors in your code) as well as how to improve your setup if you’re already doing it.

Feross Aboukhadijeh

ECMAScript 2018 Language Spec Published— The official spec for ES2018 (essentially the 9th edition of the JS spec) has been published in HTML and PDF if you’re lacking for bedtime reading (it’s a significant document but, yes, it’s a long, dry spec).

ECMA

Plan Visually with a Single Glance and Make Sure Your Projects Get Done— monday.com is a project management tool your team will enjoy using. It makes it fun and easy for everyone to collaborate, focus and get more done. It's a visual project management tool that’ll help you and your team collaborate and achieve more.

monday.com sponsor

On Consuming (and Publishing) ES2015+ Packages— Babel’s creator reflects on the idea of compiling dependencies (in addition to your own code), how Babel v7 will make it easier to do so, and the problems involved.

Henry Zhu (Babel)

Exploring ES2018 with Dr. Axel— If the ES2018 news above interested you but you want a more accessible way to understand the new features, Dr. Axel’s book here is great. Or if you’d prefer a short, snappy post with quick examples, try this for size.

Dr. Axel Rauschmayer

JavaScript Usage by Industry— Over 16,000 developers took npm Inc’s JavaScript Ecosystem Survey last year and in this post we see how industries differ in their use of JavaScript, its tools, techniques, and ecosystem generally.

Laurie Voss (npm, Inc)

Using face-api.js: Face Recognition in the Browser with TensorFlow.js— A library bringing face detection, recognition and landmark detection to the browser.

Vincent Mühler

An Official Way to Track ECMAScript Proposals— A frequently updated table of the proposals for future JavaScript features along with their progress. There’s also a useful guide to how the TC39 process works if you’re interested.

TC39

💻 Jobs

Remote Front End Developer (React)— Join us, work remotely from North America, and help build software that matters.

Aha!

React Developer in London Looking for a Job?— Join our team in London to create the future of payments using the latest technology in Front End. Read more here.

Divido

Find A Job Through Vettery— Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

📘 Tutorials and Opinions

▶  Asynchrony: Under the Hood— Filmed at the recent JSConf EU, this talk deftly explores the conceptual underpinnings of asynchronous programming approaches, and the drawbacks and advantages of each.

Shelley Vohr

A Practical Intro to Worker Threads in Node 10.5— Node can now work with multiple threads, in a sense.

Fernando Doglio

New Ways to Build on Slack— Use Slack? Now you can build an app that turns Slack messages into tasks, to-dos, follow-ups, and more with your team’s tools. See how.

Slack sponsor

Headless User Interface Components— Headless user interface components separate the logic and behavior of a component from its visual representation.

Merrick Christensen

Does It Mutate? Which Array Methods Mutate Or Not

Remy Sharp

A Guide to Node.js for Frontend Developers— If you’re a frontend developer who ends up getting into Node.js, we have a Node newsletter too :-)

Seva Zaikov

Doing Vue After Three Years with React— “I want to share my experience of dealing with Vue after being a devoted React developer for a few years.”

Anya Pavlova

▶  Architectures for Huge Angular-Based Enterprise Apps

Manfred Steyer

Your Free Pass to Better JavaScript Skills— You can learn a lot in 10 days—start a free trial and get unlimited access to expert-led dev courses and more.

Pluralsight sponsor

▶  Deep Learning in JavaScript— Top comment: “the clearest and most colloquial introductory explanation of ML ever, with super fun”

Ashi Krishnan

🔧 Code and Tools

lit-html: Syntax Highlighting in VS Code for HTML Inside of JavaScript

Matt Bierner

Docz: A Modern Documentation Site Publishing System— Zero-config, powered by Webpack 4 and a Markdown + JSX templating format.

Pedro Nauck

MongoDB 4.0 Is Now Generally Available. Try It Now on MongoDB Atlas

MONGODB sponsor

Gio.js: Three.js 3D Globe Data Visualization Library— There’s also a quick start tutorial.

Numerous Contributors

Vuetify: A Material Design Component Framework for Vue

John Leider

Superfine: A Minimal View Layer for Creating Declarative Web Interfaces

Jorge Bucaran

#393 — July 6, 2018

Read on the Web

JavaScript Weekly

What is Redux: A Designer's Guide— A really neat high-level approach to explaining Redux and what it offers beyond state management.

Linton Ye

An Adventure in Sparse Arrays— A quick prod around the idea of ‘sparse’ arrays, how they work in JavaScript, and a few concepts to keep in mind.

Remy Sharp

Optimization Auditing: A Deep Dive into Chrome's Dev Console— Ahmed Bouchefra offers an in-depth exploration of the features of the Chrome DevTools for measuring performance and debugging your web apps.

SitePoint

Build and Deploy Serverless Functions Entirely in JavaScript— Pulumi.io provides a programming model for the cloud. Spend less time on YAML, and more time on JavaScript, because after all… Code is the best Config. Pulumi supports any service on any cloud - from serverless to Kubernetes to storage.

Pulumi sponsor

Reduce JavaScript Payloads with Tree Shaking— Knowing where to begin optimizing your app’s JavaScript can be daunting — tree shaking might be a good place to start.

Jeremy Wagner

Building Mobile Apps with Capacitor and Vue.js— Learn how to use Capacitor and cutting-edge web technologies such as Vue.js and Ionic 4 web components to build cross-platform mobile apps for Android and iOS.

Ahmed Bouchefra

React From Zero: A Simple Code-Based React Tutorial— An interesting approach based entirely upon simple, annotated code, with no articles to read. It’s nice to see React’s features demonstrated so cleanly. Also in Chinese and Portuguese.

Kay Plößer

💻 Jobs

React/Full Stack Developer (Remote or Southern CA)— Join our small team building apps and services for customers in over 50 countries worldwide. We learn. We build. We deliver.

Geist Interactive

JavaScript Developer at X-Team (Remote)— We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Find A Job Through Vettery— Vettery matches top tech talent with fast-growing companies. Create your profile to get started.

Vettery

📘 Tutorials and Opinions

ES2017 Object and String Extensions— Covering Object.entries, Object.values, Object.getOwnPropertyDescriptors, String.padStart and String.padEnd.

Zsolt Nagy

Recreating Python's Slice Syntax in JS Using ES6 Proxies

Evan Sangaline

Build a Netflix Style Video Delivery Infrastructure— Play adaptive video at the same quality and speed as Netflix and Youtube. Encoding, Player and Analytics - JavaScript API client.

Bitmovin sponsor

Get Better Type Checking in JavaScript with the 'Maybe' Type

Gilad Shoham

Understanding Redux: The World’s Easiest Guide to Beginning Redux— Long, but starts from a very simple level.

Ohans Emmanuel

How Angular Resolves Dynamic Components— What happens under the hood when you use Angular’s resolveComponentFactory?

Chidume Nnamdi

WebRTC and the Mechanics of Peer-to-Peer Networking

Alexander Zlatkov

Deriving the Y Combinator in JavaScript— Well written, but quite a theoretical exercise.

Nathan Leung

OpenID Connect + Node = Simple, Secure Website— Learn all about data storage, middlewares, routing, & generating views as you build a secure blog with Express.js.

Okta sponsor

Keep Your Promises in TypeScript using async/await

Gilad Shoham

Ask HN: What You Wish You'd Known Before Getting Into JavaScript?— A lot of very different answers here.

Hacker News

Why GraphQL: Advantages, Disadvantages and Alternatives

Robin Wieruch

🔧 Code and Tools

Rete.js: A Framework for Visual Programming— Create a node-based editor in the browser and apply logic. Check out thesedemos on CodePen.

Vitaliy Stoliarov

Microstates.js: Composable State Primitives for JavaScript— Declaratively compose application state from atomic state machines.

Taras Mankovski and Charles Lowell

Real-Time Error Monitoring, Alerting, and Analytics for JavaScript 🚀

ROLLBAR sponsor

Singlie: Singly Circular and Linear Linked Lists for ES6

Klaus Sinani

Formik: Working with Forms in React Made Easier— Handles validation, errors, submission, and getting values in and out. It’s now a year old, too.

Jared Palmer

Axax: Async Iterator Extensions for JavaScript

Jamie McCrindle

Rogue: Quick, Zero Config Server Side Rendering for React

Alid Castano

#394 — July 13, 2018

Read on the Web

JavaScript Weekly

Toast UI Image Editor: A Full-Featured Photo Image Editor— From the creators of TUI Calendar and TUI Chart controls comes a powerful JavaScript image editor control. Live demo here.

NHN Entertainment

Compromised eslint-scope npm Package Published— Just over 24 hours ago, an npm account was compromised and a popular package (eslint-scope) was infected with malicious code. Post mortem from ESLint here. The long and short of it is you’re recommended to review your own use of this module and to move to using 2FA on your own npm accounts. Revoking npm tokens and clearing node_modules may also be a good idea.

The npm Blog

Webpack 4 Fundamentals 🛠️ by Webpack Core Maintainer, Sean Larkin— Webpack 4 is the most popular and flexible build tool – Vue CLI, create-react-app and the Angular CLI all use Webpack under the hood – as soon as you need something custom, you'll need to know Webpack.

Frontend Masters sponsor

TypeScript 3.0 Release Candidate— Project references allow TypeScript projects to depend on other TypeScript projects in a way that helps the build tools. Rest parameters can also be inferred as tuple types to make using them easier. There’s also a new unknown type to investigate.

Daniel Rosenwasser (Microsoft)

Proxymise: A Chainable Promise Proxy— An interesting proof of concept that takes you away from writing lots of then or await calls. Instead you could write something like value = await proxymise(foo).a().b().c;

Ilya Kozhevnikov

Phenomenon: A 2KB Low-Level WebGL Library— Provides the essentials to deliver high performance visuals easily. Several neat demos with code including throwing 10000 cubes around.

Colin van Eenige

💻 Jobs

Sr. Front-End Engineer, Creator Tools (New York City)— We empower video creators to tell exceptional stories and to connect with their audiences & communities. Build the future with us.

Vimeo

Find a Job Through Vettery— Vettery matches top tech talent with fast-growing companies. Create your profile to get started.

Vettery

📘 Tutorials and Opinions

React, Vue and Hyperapp Compared— Based around a simple counter example.

Angelos Chalaris

WTF Is 'this'? Understanding the 'this' Keyword, call, apply, and bind in JavaScript— There's also a video, if you prefer.

Tyler McGinnis

▶  Free Video Course: How to Upgrade Cordova Applications to NativeScript— Avoid poor app performance and unnatural UX. Free and open source cross-platform mobile framework.

NativeScript sponsor

The Extensive Guide to Creating Streams in RxJS

Oliver Flaggl

Managing Complex Waiting Experiences on Web UIs

Fatih Kadir Akın

Building an Audio Player App with Ionic, Angular, RxJS, and NgRx— Uses Auth0 for the authentication.

Prosper Otemuyiwa

What is JSX?— You may use it every day, but have you seen what happens after Babel transpiles JSX?

Kent C. Dodds

Angular SEO Done Right with Server-Side Rendering

Michael Poirier-Ginter

▶  An Introduction to TensorFlow.js in Your Browser— An official introduction to using TensorFlow.js for machine learning in the browser.

Laurence Moroney

🔧 Code and Tools

10 JavaScript Animation Libraries Worth Investigating in 2018— With summaries and, importantly, live interactive JSFiddle demos for most.

Anton Shaleynikov

vue-wait: Loader and Progress Management for Vue and Nuxt Apps

Fatih Kadir Akın

Enjoy a Better Development Experience with Webstorm— Try smart code completion, refactorings, & integrated tools on your React, Angular & Vue projects.

JetBrains sponsor

simple-keyboard: A Customizable, Responsive On-Screen Keyboard— Live demo here.

Francisco Hodge

Reclare: A Declarative State and Logic Management Library— Inspired by Redux and the Elm architecture.

Reclare

carbon-now-cli: Create Beautiful Images of Code From Your Terminal— It’s a terminal client for the awesome Carbon tool.

Miloš Sutanovac

Access DigitalOcean’s Quarterly Report on Developer Cloud Trends Now

DigitalOcean sponsor

9 CSS in JS Libraries You Should Know in 2018— Including Styletron, Emotion and Styled Components.

Jonathan Saring

#395 — July 20, 2018

Read on the Web

JavaScript Weekly

TOAST UI Grid 3.0: A Powerful Data Grid Control— Another great piece of work from NHN who also produced an image editor we linked last week. This data grid component works down to IE8, with many data types, and is easily rethemed.

NHN Entertainment

JavaScript Fundamentals Before Learning React— A concise list of all the different JavaScript functionalities that can be used to complement a React app.

Robin Wieruch

Try DigitalOcean and Get a $100 Credit on Us— Save up to 55% compared to other cloud providers and start building, deploying and scaling better web apps.

DigitalOcean sponsor

A Great Explanation of JavaScript Reactivity— Understand what ‘reactivity’ is and how it works by way of implementing your own system that’s similar to Vue’s approach. There’s also a 15 minute video version, if you prefer.

Gregg Pollack

v8n: A JavaScript Fluent Validation Library— If you like ‘fluent’, chainable APIs, you might like this approach to object validation, e.g. v8n().number().between(0, 100).test(44) .. though it goes a lot further than that.

Bruno C. Couto

The Future of WebAssembly: A Look At Upcoming Features and Proposals— WebAssembly is a binary instruction format that runs at high performance in all major browsers. It’s still relatively new though and a work in progress. This post looks at WebAssembly’s roadmap and the features it could gain in the near future.

Colin Eberhardt

Two-Factor Authentication Protection for npm Packages in Beta— As a follow up to the eslint-scope npm problem we covered last week, you can now test two-factor authentication protection for individual packages in the npm Registry.

The npm Blog

💻 Jobs

Sr. Front-End Engineer, OTT - New York City— Vimeo is a place where all stories can be beautifully told. Build the future with us.

Vimeo

Senior/Lead JavaScript Developer (Boston or Oakland)— Do more than code - influence development practices and product direction. Work with enthusiastic peers in a trust-based environment.

Raizlabs, a Rightpoint Company

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

Vettery

📘 Tutorials and Opinions

Building a Serverless Contact Form with AWS Lambda and AWS SES— Covers the basics of both the front-end form, with vanilla JavaScript, and the serverless back end, hosted on AWS Lambda.

Adnan Rahić

Build an Instagram Clone with Vue.js and CSSGram— CSSGram recreates Instagram-style filters using CSS filters and blend modes.

Hassan Djirdeh

How to Do Functional Programming with JavaScript?— A handy cheat sheet used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

Designing GraphQL APIs— A tutorial built at Shopify (initially for internal use) based on lessons learnt creating and scaling schemas on GraphQL APIs at Shopify.

Shopify Engineering

▶  Native JavaScript Modules— A look at how native JS modules work, what the current level of support is for them, plus main findings and gotchas from using them in production.

Serg Hospodarets

15 HTML Element Methods You’ve Potentially Never Heard of— The DOM is full of delights, some of which David pokes at here, including scrollIntoView, getBoundingClientRect, and select.

David Gilbertson

How to Build a Microsoft Excel Add-in with Vue— Did you know you can build add-ins for Excel with JavaScript?

Microsoft

Build a Netflix Style Video Delivery Platform— View videos at the same quality & speed as Netflix & YouTube. API clients for all major languages.

Bitmovin sponsor

Recreating Reddit’s Voting UI in Vanilla JS vs React vs Vue vs Hyperapp— A comparison hoping to ‘shed light’ on the purpose of using frameworks.

atomiks

▶  Pushing the Limits of the Web with Angular— Showing off some of the newest capabilities of Angular.

Stephen Fluin

How Fast Can You Learn React?— ”..learning React is about as easy as teaching a parrot to talk”. — Oh, and if you are starting to explore React, we have a newsletter for that ;-).

Attila Vágó

🔧 Code and Tools

Pushbar.js: Simply Creating 'Sliding Drawers' on Your Pages/Apps

Biraj Ghosh

Popbox.js: Stackable Modals for Web Pages— If you need a modal on top of your modal..

popbox.js

localForage: Offline Storage, Improved— Wraps IndexedDB, WebSQL, or localStorage using a simple API.

localForage

Polly.js: Record, Replay, and Stub HTTP Interactions— Polly taps into native browser APIs to mock requests and responses.

Netflix, Inc.

Save Weeks Per Year Fixing Unseen Bugs Using Source Maps with Sentry

Sentry sponsor

Jest Watch Toggle Config Plugin: Toggle Your Jest Boolean Config Settings At Will

Jest Community

CanJS 5.0 Released: A Framework for Building Rich Web Interfaces

Justin Meyer

Z: Pattern Matching for JavaScript

Wagner Leonardi et al.

Hypernova: A Service for Server-Side Rendering of JS Views

Airbnb

How to Dynamically Load JS Modules on Codepen

CodePen

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

Ionic

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 Dependencies— Examples. 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.

Upstatement

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

Vettery

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

Epicmax

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 Library— Live 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

#397 — August 3, 2018

Read on the Web

JavaScript Weekly

The Cost of JavaScript in 2018— We linked the video of Addy’s talk a month ago, but now here’s the detailed write-up of Addy’s thoughts and findings on how much effect JavaScript has on page sizes and performance and some ways to improve matters.

Addy Osmani

TypeScript 3.0 Released— 3.0 has few breaking changes (meaning it should be very easy to upgrade) and introduces a new flexible, scalable way to structure your projects, powerful new support for operating on parameter lists, better JSX support, an overall better error UX, and more.

Microsoft

Application Stability Monitoring with Bugsnag— Bugsnag monitors application stability, so you can align priorities across product, dev, and ops using one objective metric. Set a stability target, and definitively know when to build new features or fix bugs to stabilize your app. Learn more.

Bugsnag sponsor

Fusion.js: A Plugin-Based Web Framework from Uber— Uber builds and maintains hundreds of Web apps, both internal and public, and Fusion.js is their answer to the challenges this presents. It comes with hot module reloading, data-aware server-side rendering, and bundle splitting out of the box.

Leo Horie

Removing Babel's Stage Presets— “Moving forward with v7, we’ve decided it’s best to stop publishing the Stage presets in Babel (e.g. @babel/preset-stage-0).” If you’re a Babel user, you’ll appreciate this the explanation for this change.

Henry Zhu (Babel)

js13kGames: The HTML5 and JS Game Development Competition Is Back— Always a fun contest with some interesting results. You’re limited to 13KB for all code and assets. It runs August 13-September 13.

Andrzej Mazur

💻 Jobs

Build High Quality Open-Source at Uber (San Francisco)— As a Web Platform engineer at Uber, you'll be building the foundation for all web applications at Uber and beyond.

Uber

JavaScript Developer at X-Team (Remote)— We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Find A JavaScript Job Through Vettery— Create a profile to connect with 4,000+ companies seeking top tech talent.

Vettery

📘 Tutorials and Opinions

'I Created The Exact Same App in React and Vue. Here Are The Differences.'— If you fancy a direct comparison between Vue and React, fill your boots here.

Sunil Sandhu

Vue.js Chat with AWS Lex on PubNub ChatEngine— How to build a Slack-like chat application using Vue.js and ChatEngine - global & private chat, and chatbots.

PubNub sponsor

Shuffle a Deck of Cards in Vue.js

Hassan Djirdeh

Building Interactive Bar Charts with D3.js

Máté Huszárik

Build a Simple CRUD App with ASP.NET Core 2.1 and Angular 6— The latest ASP.NET Core includes a template to build an Angular 4 application, but what about Angular 6? Here’s how to do it.

Lee Brandt

A Checklist of 23 Node.js Security Best Practices— By far the most popular item from this week’s Node Weekly.

Yoni Goldberg, Kyle Martin and Bruno Scheufler

Whitepaper: Choosing Web Application Libraries in an Open Source World— Building web apps? Read this whitepaper to learn top considerations for choosing your technology stack.

Sencha, Inc sponsor

How One Line of JavaScript Made FT.com 10 Times Slower— Lots of deep cloning with JSON.parse and JSON.stringify.

Arjun Gadhia

🔧 Code and Tools

ApexCharts: A(nother) JavaScript Chart Library— Hats off to its creator who has written an article about why we need yet another chart library. It does sparklines, gauges, and heatmaps too.

Juned Chhipa

Between.js: Lightweight JavaScript Tweening Library— Demos here.

Alexander Buzin

MongoDB 4.0 Is Now Generally Available. Try It Now on MongoDB Atlas

MONGODB sponsor

7 JavaScript EEG Mind Reading Libraries for 2018— Not something you often associate with JavaScript, but yes, you can explore brain signals from JS.

Gilad Shoham

Netlify CMS 2.0 Launches with Bitbucket Support and a New Monorepo Architecture

Netlify

Introducing SpaceAce, A New Kind of Front-End State Library

Jon Abrams

Vue 2.5.17 Released— Only a minor point release, but the first in a few months.

Taskbook: Command-Line Tasks, Boards and Notes Manager— Manage lists and tasks right from the terminal.

Klaus Sinani

FormStorage: Keep Form Data Stored Locally After Submission

steelydylan

#398 — August 10, 2018

Read on the Web

JavaScript Weekly

Electron Fiddle: A Playground for Electron Experiments— Want to quickly experiment with Electron (a cross-platform JS desktop app environment) development? Electron Fiddle is a downloadable cross-platform app that makes it easy. Downloads here.

Felix Rieseberg

Pts: A Library for Visualization and Creative Coding— An impressive, lightweight and modular library, written in TypeScript and compiled to ES6. Plenty of demos to play around with.

William Ngan

🔨 JavaScript: The 'New' Hard Parts— In this new course, you'll develop an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await. Go under the hood of async JS and learn to solve complex async challenges with ease.

Frontend Masters sponsor

How to Deal with Dirty Side Effects in Your Pure Functional JavaScript— “A pure function is a function that has no side effects. But if you know anything about programming, you know that side effects are the whole point.”

James Sinclair

Getting Alexa to Respond to Sign Language Using a Webcam and TensorFlow.js— A look at the underlying tech behind a proof of concept to get an Amazon Echo to respond to sign language, plus how the system was built using TensorFlow.js. Live demo here.

Abhishek Singh

First Babel 7.0 Release Candidates Available— Planning for 7.0 and Nearing the 7.0 Release will bring you up to date with what’s new in this long awaited released.

Babel

Vue CLI 3.0 Released— Vue CLI provides the standard build toolchain for Vue applications and this new version is a rewrite that uses pre-configured webpack features, ES2017 transpilation, and PostCSS out of the box.

Evan You

V8 Version 6.9: An Efficiency and Performance Release— Features reduced memory usage through embedded built-ins, faster WebAssembly startup through the new Liftoff compiler, better DataView and WeakMap performance, and more.

Mathias Bynens

💻 Jobs

Senior Software Engineer (NYC)— Learn from the best and lead by example. Do your finest work, with purpose, freedom, and a great community.

Reaktor

Frontend Engineer in Fast-Growing FinTech Start-up in Munich— Help building, running & deploying our SSR React, GraphQL, D3 frontend stack.

Scalable Capital

Find A JavaScript Job Through Vettery— Create a profile to connect with 4,000+ companies seeking top tech talent.

Vettery

📘 Tutorials and Opinions

Hello WebAssembly— An introductory yet low-level introduction to WebAssembly.

Casper Beyer

Building a Long Press Directive in Vue

Obaseki Nosa

Full Stack Essentials with React: Bootcamp— It’s immersive. It’s Intense. It’s Oct 15-19. Few seats remain.

Big Nerd Ranch sponsor

Turning an Angular 6 App Into a Progressive Web App— How to add PWA capabilities to your Angular 6 app.

Yassine Benabbas

Variable Scope in Modern JavaScript— Examples to show how global, local and block scopes work.

Andy Carter

Tips for Creating a 13KB JavaScript Game in 30 Days— We linked to the contest last week, but GitHub has shared some tips and techniques to make the most of the 13KB limitation. It starts on Monday.

Lee Reilly (GitHub)

A Quick Guide to Mocha Testing— Want to write and run tests for your JavaScript code with Mocha? Start here.

Glad Chinda

The PRPL Pattern for Progressive Web Apps using Angular 6+— A primer on PRPL (which stands for Push, Render, Pre-cache, and Lazy-load) — this pattern is a relatively new technique used for building PWAs.

Vlado Tesanovic

Write Complex Languages. Online & Evening M.S. Software Engineering Program

Regis University sponsor

▶  Five Ways to Be A Happier JavaScript Developer— How to deal with the language and its ecosystem now without repeating the mistakes of the past.

Christian Heilmann

Why Ember?— A quick look at where Ember can provide value to your workflow.

Melanie Sumner

🔧 Code and Tools

Angular Console: A UI for the Angular CLI— There’s also a blog post with the rationale.

Narwhal Technologies

Angular 7 Beta 0 Released: What's To Come for Angular 7?

Valentyn Yakymenko

Catch JavaScript Errors Before Users Do— Detect JavaScript errors in real-time, then debug them in minutes. Works with Node, React, Angular, and more.

ROLLBAR sponsor

Azure CosmosDB JavaScript SDK 2.0 Now in Public Preview— Features a new object model and introduces support for promises for working with Azure’s multi-model database service. Here’s the repo.

Deborah Chen (Microsoft)

Dumper.js: A Pretty Variable Inspector for Node— Ideal for ‘print-style’ debugging.

Zeeshan Ahmed

Franc: Detect a Text's Natural Language from JavaScript— Even in the browser. Demo here (keep refreshing the page). Supports up to 402 languages.

Titus Wormer

SuperSlide.js: A Smooth, GPU Accelerated Sliding Menu for Your Next PWA

OSREC Technologies

Xterm.js: A Terminal Component for the Front End— Now used in lots of projects like VS Code, cPanel and Azure Cloud Shell.

SourceLair

#399 — August 17, 2018

Read on the Web

JavaScript Weekly

A blast from the past this week as we take some time out to ask Dr. Axel Rauschmayer, a former editor of JavaScript Weekly, some questions on the release of his new book, JavaScript for Impatient Programmers. You can find that further down in this issue :-)
— Peter Cooper, editor

JavaScript Engine Fundamentals: Optimizing Prototypes— Having a deeper understanding of how JavaScript engines work can help you reason about the performance characteristics of your code and this diagram-rich post digs into engines optimize around JavaScript’s use of prototype-based inheritance.

Mathias Bynens

▶  Kyle Simpson says 'Keep Betting on JavaScript'— A look back at “how far we’ve come” to see what the path ahead may look like for JavaScript. Filmed at JSCamp Barcelona. Associated slides here.

Kyle Simpson

How to Choose the Best Framework for Mobile Development?— The mobile development landscape has changed and we've put together a list of modern options for you. This is a long term decision, you must choose wisely. Download our free ebook to learn more.

Progress sponsor

16 JavaScript Data Visualization and Charting Libraries— A rather extensive summary and comparison of charting libraries, comparing key factors such as chart types, commercial vs free, and their open-source status.

Dan Englishby

V8's Embedded Builtins and Reducing V8's Median Heap Size by 19%— The V8 JavaScript engine ships with an extensive library of built-in functions and a lot of work has gone into reducing the memory overhead these can represent.

Jakob Gruber

Creating a Chrome Extension in 2018: The Good, the Bad and the Meh— Talks through the development lifecycle of creating an extension and lists some of the architectural gotchas.

Tim Nolet

Visual Studio Code's July 2018 Update— The most popular editor in the JavaScript world has added a variety of features, many of them JS-oriented, including JSX tag completion, a ‘add all missing imports’ feature, and better JS/TS error reporting.

Microsoft

💻 Jobs

Node Data Engineer at eBench (Remote, full-time)— We're a SaaS company that creates beautiful data visualizations. Enjoy crafting quality code? We would love to hear from you.

eBench

Front-end Developer at Forza Football— We're seeking an open minded person who enjoys working in a team and has advanced knowledge in frontend development.

Football Addicts AB

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

Vettery

📘 Tutorials and Opinions

10 Things You Will Eventually Learn About JavaScript Projects— A collection of common patterns that made working on even the most uncoordinated projects somehow manageable.

The Cat with a Dragon Tattoo

Setting Up Constants via Proxies

Dr. Axel Rauschmayer

Build a Netflix Style Video Delivery Platform— SDKs for all platforms - Play videos at the same quality and speed as Netflix & YouTube.

Bitmovin sponsor

How Angular CLI Budgets Save My Day And How They Can Save Yours— Runs through what Angular application budgets are and what problems they can help surface.

Tomas Trajan

The Generic Sensor API— The Generic Sensor API aims to provide a consistent JS API for client device sensors.

Ruadhan O'Donoghue

Handling Authentication in Vue with Vuex

Chris Nwamba

▶  Web Performance For Third Party Scripts: Two Talks— Two talks to help you take into account the effect third party scripts may have on your site’s performance.

SmashingConf

▶  Next-Generation Frontend Testing with Cypress.io

Amir Rustamzadeh

See Why Facebook, Spotify, & Sony Trust CircleCI with Their CI/CD

CircleCI sponsor

▶  A Conversation with Ember Co-Creator Tom Dale on Ember 3.0 and Ember's Future

JavaScript Jabber podcast

A Proposal: Elixir-Style Modules in JavaScript

Will Ockelmann-Wagner

Three Reasons to Use Vue.js in Your Next Web Project

Arnaud Lewis

🔧 Code and Tools

Tone.js: A Web Audio Framework for Making Interactive Music in the Browser— Lots of examples here.

Yotam Mann

SpaceTime: A Lightweight JavaScript Timezone Library

Spencer Kelly

Move Fast and Fix Stuff. Over 500K Developers Fix Errors with Sentry— Notify only the right person based on the commit and see unminified code in the stack trace with source maps.

Sentry sponsor

from-html: Get Element References Directly From a String of HTML— An interesting and straightforward way to create nested DOM elements.

m3g4p0p

flowchart.js: Turn Textual Representation of Diagrams into Flow Charts— Want something similar for UML sequence diagrams? Here you go.

Adriano Raiano

#400 — August 24, 2018

Read on the Web

JavaScript Weekly

Due to unforeseen circumstances, this 400th issue of JavaScript Weekly comes to you from a tent in the middle of a freezing cold field in Yorkshire! Apologies if it's a few hours late, but we were also waiting for Babel 7.0 to drop (update: it's not, it's now next week).

A huge thanks to you for being a subscriber, and an extra special thanks if you're one of the few hundred subscribers who has stayed with us since issue 1 almost 8 years ago :-)
— Peter Cooper, editor

Johnny-Five 1.0: A JS Robotics and IoT Platform— Now at some six years old, Johnny Five has reached its 1.0 release in an announcement at JSConf. The examples page is packed with source code examples of what it can be used to achieve.

Johnny Five Team

A Complete GraphQL Server Tutorial— An epic tutorial covering the full GraphQL server experience using Apollo Server and Express including authentication, roles/permissions, subscriptions, error handling, pagination..

Robin Wieruch

Whitepaper: Choosing Web App Libraries in an Open Source World— OS frameworks lack a single, comprehensive component library for developers to build standardized UIs. In many cases commercial component libraries used in conjunction with OS frameworks can offer the best of both worlds. Read on to learn more.

Sencha, Inc. sponsor

Liftoff: A Look at the New Baseline Compiler for WebAssembly in V8— Very technical but exciting news if you’re planning to lean heavily on WebAssembly. V8 6.9 (and hence Chrome 69) and above will start WebAssembly code much faster.

Clemens Hammacher

Introducing Ghost 2.0: The JavaScript Blogging Platform— Want a fully JavaScript powered blog? 2.0 takes big steps forward with a new editor, multi-language support, custom routes, custom site structures, and more.

John O'Nolan

Behind The Scenes of Dr. Axel's Latest JavaScript Book— Last week, we interviewed Dr. Axel about his new book, JavaScript for Impatient Programmers. Here, he shows just what went into the process of creating it.

Dr. Axel Rauschmayer

Stimulus 1.1 Released: A JS Framework for the HTML You Already Have— An interesting framework from Basecamp (formerly 37signals). Here's the full origin story including why it's useful. 1.1 includes new reference documentation and ordered actions.

Basecamp

💻 Jobs

Senior Software Engineer (NYC)— Learn from the best and lead by example. Do your finest work, with purpose, freedom, and a great community.

Reaktor

Senior Front End Engineer at External Data Systems, Netflix— Help build a world class user interface for the platform that collects data to drive business insights for our teams.

Netflix

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

Vettery

📘 Tutorials and Stories

Complex Numbers in JavaScript— I hope you like math! This is a neat walkthrough of calculating the dot product of two complex vectors with JS.

Mateo Gianolio

The Solo JavaScript Developer Challenging Google and Facebook— It’s a short, high level piece, but it’s nice to see Vue getting more mainstream attention which is basically what the article is about too :-)

Klint Finley (WIRED)

How to Do Functional Programming with JavaScript?— A handy cheat sheet used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

Level Up Your '.filter' Game— The filter array method creates a new array of elements that pass a test defined in a given function. This tutorial will help you feel confident with it.

Adam Giese

Taking Your First Steps with TensorFlow.js— Want to dig into a little machine learning with JavaScript? This introduces some basic concepts.

Aral Roca

New npm Registry Features to Help npm Users Protect Themselves

The npm Blog

Creating a Chrome Browser Extension: Screencast— Try 'The Frontier' free for 14-days. Short tutorials from the instructors and authors you trust.

Big Nerd Ranch sponsor

What Do The Three Dots '...' Mean in JavaScript?

Adrian Oprea

Build A Live Graph with D3.js and Pusher

Ayooluwa Isaiah (Pusher)

🔧 Code and Tools

Puppeteer Recorder: A Chrome Extension That Turns Browser Interactions into Puppeteer Scripts

Checkly

Git Tutor: Generate Step-by-Step Markdown Tutorials from Git History— An interesting idea. Well suited for projects where the git commits act as logical steps of growth. See an example of the end result.

Andrei Volchenko

Real-Time Error Monitoring, Alerting, and Analytics for JavaScript 🚀

ROLLBAR sponsor

Immer: Create The Next Immutable State Tree by Mutating The Current Tree— If you want to work with immutable state, this is worth looking at.

Michel Weststrate

Pyodide: A Python Scientific Stack, Compiled to WebAssembly— The interesting outcome being seamless interactivity between Python and JS/browser. Demo here.

iodide

ajax: A Vanilla JS Module for Ajax Requests— Don’t want to use fetch but still want to make simple jQuery-style Ajax requests? This is an option.

Fernando Daciuk

Windows 2000 in the Browser via WebAssembly— Don’t click if you aren’t ready to use a fair bit of bandwidth, but this example of emulating Windows 2000 in the browser (at high performance, too) is certainly compelling.

Fabrice Bellard

#401 — August 31, 2018

Read on the Web

JavaScript Weekly

Babel 7.0 Released: The JavaScript Transpiler— A significant release for the popular JavaScript compiler. Some links to help you navigate your way:

• If you need just one reason to upgrade, 7.0 is a lot faster.
• There's a new upgrade tool to help you migrate.
• TypeScript support is now baked in.
• Stage presets were removed. Here's why and how to deal with it.
• Planning for 7.0 and Nearing the 7.0 Release will bring you up to date with what it's taken to get this far.

Cheat Sheet: Functional Programming with JavaScript— JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

This Week's Node Weekly Newsletter— If you’ve ever wondered why there isn’t a lot of Node stuff in JavaScript Weekly, it’s because we have a separate newsletter for that! This week we covered a V8 vulnerability and how to use Docker for Node.js development.

Cooperpress

v86: x86 Virtualization in JavaScript— Works in both the browser and Node. Check out the demos running Windows 98, Linux, and other operating systems.

Fabian Hemmer

What's Coming Up in 'JavaScript 2018'— The latest annual ECMAScript update, published in June 2018, is the largest yearly release so far, although still far smaller than ECMAScript 6 with its backlog of already common features.

Mary Branscombe

Lerna Added (Then Removed) A License Term Blocking Some Companies From Using It— If you’re not on social media, you may have missed this story which has since concluded. Lerna, a popular tool for working with monorepos, relicensed itself to block its use at a variety of companies (including Microsoft) but after a lot of discussion and community feedback, this was reverted.

Lerna

💻 Jobs

Senior Front End Engineer at External Data Systems, Netflix— Help build a world class user interface for the platform that collects data to drive business insights for our teams.

Netflix

Find A JavaScript Job Through Vettery— Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

Place your own job listing in a future issue

📘 Tutorials and Opinions

▶  Creating Electronic Dance Music with JavaScript

Walmik Deshpande

Serverless Machine Learning with TensorFlow.js— A thorough look at getting Tensorflow, a flexible machine learning framework, to work properly in a serverless environment.

James Thomas

Building a Serverless App with MongoDB Stitch— MongoDB Stitch is a MongoDB-based serverless platform that can make it quicker to build apps in the cloud. This tutorial is a practical demonstration of using it to build a stock price monitoring app.

Valeri Karpov

Build a Netflix Style Video Delivery Platform— SDKs for all platforms - Play videos at the same quality & speed as Netflix & YouTube.

Bitmovin sponsor

An Introduction to React and How To Build Your First App— Not just a ‘Hello World’ example but an app that uses a router, components, and even does auth with Auth0’s service. Subscribe to our React newsletter if you get a taste for React after this ;-)

Bruno Krebs

Using Cloudflare Workers To Make Static Sites Dynamic— Cloudflare Workers places a serverless JS environment in front of your ordinary site so you can perform various tasks before a request even hits your server.

Paddy Sherry

Dynamic App Themes with CSS Variables and JavaScript

Mike Wilcox

▶  Through the Open Source Looking Glass— A non-technical talk by Babel maintainer Henry Zhu about what it’s like and what it means to be the maintainer of popular open source projects.

Henry Zhu

Why is a 'Java Guy' So Excited About Node.js?— Interesting to hear from someone who worked on the Java team at Sun wax lyrical about JavaScript.

David Herron

Create A Short Digital Address for Any Location w/ AngularJS

DigitalOcean sponsor

Why You Should replace forEach with 'map' and 'filter'

Roope Hakulinen

🔧 Code and Tools

Making a Progressive Web App with Webpack Just Got Easier— webpack-web-app-manifest-plugins generates a PWA manifest and integrates with the assets JSON.

Tumblr

babel-upgrade: A New Tool for Automtically Upgrading Projects to Babel 7— In case you missed it at the top of the issue!

Babel

Catch JavaScript Errors Before Users Do— Detect JavaScript errors in real-time, then debug them in minutes. Works with Node, React, Angular, and more.

ROLLBAR sponsor

goodshare.js: A Vue.js Component for Social Sharing Buttons— Full example here.

Vic Shóstak

Wexond: A 'Web Browser' Built on Electron and React— An interesting idea. Being Electron-based, it’s using Chromium for rendering, but the UI/chrome is React and styled-components.

Wexond

Code Surfer: A React Component for Scrolling, Zooming and Highlighting Code Samples

Rodrigo Pombo

size-plugin: Track Compressed Webpack Asset Sizes Over Time

Google Chrome Labs

#402 — September 7, 2018

Read on the Web

JavaScript Weekly

Apologies if you notice today's issue is a little lower tempo than usual. We have some great things coming up, including more interviews like Dr. Axel's in issue 399, but today I've been struck by a sickness bug 😷 and have struggled to even get this far. To a better next week! 🙂
— Peter Cooper, editor

How GitHub Removed jQuery From Their Frontend— GitHub has just been able to drop jQuery as a dependency of the frontend code for GitHub.com. This transition has taken years and here’s what they’ve learnt and what libraries have replaced it.

GitHub Engineering

Ky: A Tiny, Elegant HTTP Client for Browsers Based on Fetch— A new HTTP client library for the browser from one man module machine Sindre Sorhus. This one essentially makes the Fetch API tidier to use as shown in the demo code.

Sindre Sorhus

Angular, React or Vue?— How do you choose one JavaScript framework over another for your next web application? Our new whitepaper gives insight into the current state of Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now.

Progress Kendo UI sponsor

Take the 'State of JavaScript 2018' Survey— Sacha Greif’s popular survey returns, aiming to see what tools and technologies in the JavaScript space that developers are using, happy with and excited about. Results are expected in November and we’ll share them then.

Sacha Greif

A Tour of JavaScript Timers on the Web— Want to get your head around setTimeout vs setInterval vs setImmediate vs requestAnimationFrame and others? This will help.

Nolan Lawson

Sqorn: A Fast, Composable SQL Query Builder— Uses a functional style that models query compilation as a series of transformations and also uses ES6 template literals in an interesting way. Worth checking out. Full tutorial here.

Sufyan Dawoodjee

💻 Jobs

JavaScript Developer at X-Team (Remote)— We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Find A JavaScript Job Through Vettery— Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Tutorials and Opinions

Why Async: How JavaScript Interacts with the Real World— A preview of an as yet unreleased course, but even these three pages might help you out if you’re still learning how promises and async/await can improve your code.

Frontend Armory

Using the Speech Synthesis Interface of the Web Speech API— Get your browser to speak back to you.

Manuel Wieser

How to Build a Multiplayer JavaScript VR Game— Combine A-Frame, PubNub, and WebVR to launch a browser-based VR game.

PubNub sponsor

Making GraphQL Client Requests in Node (and the Browser) using graphql.js

Hugo Di Francesco

How to Use Media Queries from JavaScript— The matchMedia method is the key.

Craig Buckler

Goodbye Redux— “A complete breakdown on why we needed Redux in the past, and why we don’t any more.”

Jack Scott

Reduce JavaScript Payloads with Code Splitting

Google Developers

To Grok A Mockingbird: Using Recursive Combinators to Enhance Functional Composition— One for the functional programming fans :-)

Reg Braithwaite

Webinar: Optimizing MongoDB Performance on AWS

mongodb sponsor

Using Babel 7 and 'preset-typescript' to Compile an Angular 6 App

Hubert Zub

TypeScript with Babel: A Beautiful Marriage?— TypeScript has never been easier to adopt thanks to the new TypeScript plugin for Babel.

Matt Turnbull

How We Got a 100% Lighthouse Performance Score for a Vue.js App— Lighthouse is a performance auditing tool embedded in Chrome.

Tim Nolet

Making Calls from a Browser with Vue.js and Nexmo In-App Voice

Phil Leggetter

Building A Flexible Image Uploader Component using Vue.js 2.0

Cathy Ha

🔧 Code and Tools

date-fns: A Modern Date Utility Library— It’s “like lodash for dates” and can really get your bundle sizes downsays Addy Osmani.

Sasha Koss

Taking Payments Online with Square and Vue.js— Take online payments in a custom form using Vue and the Square Payment Form.

Square Developer sponsor

Angular Fire v5.0: The Official Library for Using Firebase from Angular

Angular

React 16.5.0 Released— For more, refer to this week’s React newsletter.

React GitHub Repo

#403 — September 14, 2018

Read on the Web

JavaScript Weekly

Celebrating 10 Years of V8— The V8 JavaScript engine has had a huge impact on the growth of JavaScript, taking it from being a relatively slow scripting language to something surpassing many other languages on performance. This post celebrates V8’s tenth anniversary with some details about its history and development.

Mathias Bynens

12 Things to Consider When Evaluating Any New JavaScript Library— How do you know if a new technology, tool, or library is worth investing time into? Sacha Greif considers 12 factors to consider including features, stability, community and momentum.

Sacha Greif

⭐️ Master Writing Modern, Professional JavaScript— Take your JavaScript to the next level to find out what it is fully capable of with this comprehensive learning path.

Frontend Masters sponsor

Next Generation Package Management with Tink— tink (formerly ‘crux’) is a new, experimental JavaScript package manager from the folks at npm, Inc, that aims to provoke new thoughts on how package management should be handled.

The npm Blog

You (Probably) Don't Need Moment.js— Moment.js is a popular date and time manipulation library but with some downsides around tree-shaking and mutability. But do you even need it? This repo shows off the alternatives, including many native functions that do similar things.

Various Contributors

Announcing TypeScript 3.1 RC— 3.1 two main additions are mappable tuple and array types plus properties on function declarations.

Microsoft

💻 Jobs

Senior Frontend Developer (Berlin, Germany)— The Digital Concert Hall team is looking for a passionate developer with strong focus on Javascript

Berliner Philharmoniker

Senior Software Engineer in Munich, Germany (React Native)— Build native apps for the world’s largest social network for expatriates in JavaScript. International team.

InterNations

Try Vettery— Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Articles & Tutorials

The 100% Correct Way to Split Your Chunks with Webpack— Know what file-splitting strategy will work best for your site and your users.

David Gilbertson

How to Write 'X' in Both Python 3 and JavaScript— This cheat sheet could be useful to you in both directions, whether coming from Python or wanting to learn some.

Saya

A Conversation With Jez Humble on Accelerate— Jez covers DevOps and its culture, cynicism on teams, and how to drive change slowly through organizations.

CircleCI sponsor

How to Create a Vue.js Plugin in 1 Hour— A complete, straightforward walkthrough, with code.

Francis Cote

How to Deploy a Full-Stack Apollo App with Netlify— How to run an API using Netlify Functions (which itself uses AWS Lambda). And if you’re into serverless, check out our newsletter.

Sashko Stubailo

Sept 18th: Learn The Fastest Way to Build Mobile Apps With Cloud Data— Watch us build Angular web, native iOS and Android apps connected to Cloud Data with 70% shared code.

Progress sponsor

A Speedy Introduction to Web Workers in JavaScript— Web Workers are scripts that run in the background in separate threads and if you’ve not worked with them yet, this is a good primer.

Dan Arias

▶  Discussing Promises and async/await with Valeri Karpov— Valeri is the author of the book Mastering Async/Await.

JavaScript Jabber podcast

Updating a CSS Variable with JavaScript

Chris Coyier

The JavaScript Equality Table Game— Test your JavaScript == equality knowledge with this quirky Minesweeper-esque game.

slikts

🔧 Code and Tools

Introducing GitHub Pull Requests for Visual Studio Code— Review and manage GitHub PRs directly from within VS Code.

Kenneth Auchenberg (Microsoft)

low.js: A Node.js Port for Embedded Devices— V8 is replaced with Duktape, an embeddable JS engine with an even smaller footprint suited for small devices. GitHub repo.

neonious GmbH

Build a Netflix Style Video Delivery Infrastructure

Bitmovin sponsor

wasm-worker: Move a WebAssembly Module Into Its Own Thread

Matteo Basso

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

AXA

WatermelonDB: A New Database for React and React Native Apps— Offers a new way to handle user data in React apps in a lazy-loading fashion.

Nozbe

d3-dag: Layout Algorithms for Visualizing Directed Acylic Graphs (DAG)

Erik Brinkman

Highway: AJAX Page Navigation with Transitions

Dogstudio

#404 — September 21, 2018

Read on the Web

JavaScript Weekly

A surprisingly quiet week, though maybe it's due to it being issue 404 :-). Nonetheless, there have been a few major version releases, including Nuxt.js 2.0, Next.js 7, and Electron 3 — you'll find those down in the Code and Tools section.
— Peter Cooper, editor

Idle Until Urgent: A Performance Strategy— When analyzing his site’s ‘first input delay’, Phil noticed all the JavaScript functions being run as the page loaded added up to a significant amount of time. His solution? Only run code in idle periods or when it’s truly, urgently required. Here’s a look at how that works in practice.

Philip Walton

Building a PWA with Angular 6— A step-by-step walkthrough of building a progressive Web application using the latest Angular and its CLI tools. If you’ve kept away from Angular for a while, this could be a handy reintroduction.

Ahmed Bouchefra

Real-Time Production Error Monitoring for JavaScript Apps— Rollbar automatically tracks all errors in your JavaScript apps and gives you the data & context to debug them fast. Works with Node, React, Vue, Angular, and more. Get unlimited errors during your free trial.

ROLLBAR sponsor

Array.prototype.reverse is Broken on iOS 12— A rather sneaky bug has made it into WebKit where the reverse method doesn’t mutate an array as expected. It also affects Safari 12 on macOS.

Stack Overflow

Like JavaScript Weekly? Try Our Other Newsletters— We frequently chat with subscribers who didn’t realize we publish other newsletters. We do, over ten of them now :-) Including Frontend Focus, a serverless newsletter, MongoDB Weekly and Postgres Weekly.

Cooperpress

The Making of 'Underrun', a js13kGames Submission— Some notes on what it takes to build a WebGL shooter in just 13KB of total code and assets. Try the game here. And if you like this sort of explanation, there’s another about a game called Bellwoods by Matt DesLauriers.

Dominic Szablewski

Ruby's Hashes and Perl's Autovivification, in JavaScript— Applying concepts from Ruby, like default values, and autovivification (the automatic creation of new collections in place of undefined keys) from Perl in JavaScript.

Reginald Braithwaite

💻 Jobs

Sr. Back End Engineer - Node and Express (Orlando/San Diego/Remote)— You enjoy solving hard problems using technology and Postman is always open on your workstation. You have a GitHub repo with NPM packages.

MJD Interactive

Try Vettery— Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Tutorials and Opinions

Three Features That Could Change the Future of JavaScript— A big ‘could’ though as the features are still being proposed and are under discussion.

Willian Martins

Ways to Think About Module Design— An excerpt from Mastering Modular JavaScript, a new book being released tomorrow.

Nicolás Bevacqua

Design a Custom Payment Form with Square's Payment Form Library

Square Developer sponsor

Build a Simple CRUD App with ASP.NET Core and Vue— If you’re on a .NET stack this might help you out.

Ibrahim Šuta

How to Build an Electron App with Okta-Powered Authentication— Electron is GitHub’s framework for building cross-platform desktop apps with Web technologies.

Matt Raible

Using Scoped Slots in Vue.js to Abstract Functionality

Mateusz Rybczonek

▶  How to Sort Your Socks using JavaScript— A look at the sorting algorithms used by different JS engines and how they vary.

Claudia Hernández

🔧 Code and Tools

worker-plugin: Adds Native Web Worker Bundling Support to Webpack— Automatically compiles modules loaded as Web Workers.

Google Chrome Labs

Build News and Activity Feeds in Days Instead of Months— Stream is an API for building scalable news feeds. Try out the API in this 5-minute interactive tutorial.

Stream sponsor

Sublime Merge: A New Git Client from the Makers of Sublime Text

Sublime HQ Pty Ltd.

Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app and More— Nuxt.js is a framework for creating universal Vue.js apps.

Nuxt.js

Next.js 7: A Framework for Server-Rendered React Apps— Now a lot faster and using Webpack 4 and Babel 7.

Zeit

Electron 3.0: The Cross Platform Desktop App Framework

GitHub

T-Writer: A Native 'Typewriter Effect' Library— If you want to reproduce the effect of text being typed in real time.

Christopher Cavalea

Build Real-Time Web Experiences with a Simple but Powerful Serverless Backend

Microsoft sponsor

WWWBasic: An Implementation of BASIC for the Web— As well as supporting writing BASIC directly in your HTML, it can also be used as a Node module.

Google

#405 — September 28, 2018

Read on the Web

JavaScript Weekly

30 Seconds of Code: A Curated Collection of Useful JavaScript Snippets— We first linked this project last year, but it’s just had a ‘1.1’ release where lots of the snippets have been updated and improved, so if you want to do lots of interesting things with arrays, math, strings, and more, check it out.

30 Seconds

Mastering Modular JavaScript— Nicolas has been working on this book about writing robust, well-tested, modular JavaScript code for some time now, and it’s finally been published as a book. You can read it online for free too, or even direct from the book’s git repo.

Nicolas Bevacqua

Burn Your Logs— Use Sentry's open source error tracking to get to the root cause of issues. Setup only takes 5 minutes.

Sentry sponsor

Parcel 1.10.0 Released: Babel 7, Flow, Elm, and More— Parcel is a really compelling zero configuration bundler and this release brings Babel 7, Flow andElm support. GitHub repo.

Devon Govett

TypeScript 3.1 Released— TypeScript brings static type-checking to the modern JavaScript party, and this latest release adds mappable tuple and array types, easier properties on function declarations, and more. Want to see what’s coming up in 3.2 and beyond? Here’s the TypeScript roadmap.

Microsoft

💻 Jobs

Mid-Level Front End Engineer @ HITRECORD (Full Time, Los Angeles)— Our small dynamic team is looking for an experienced frontend developer to help build and iterate features for an open online community for creative collaboration.

Hitrecord

Try Vettery— Create a profile to connect with inspiring companies seeking JavaScript devs.

Vettery

📘 Tutorials and Opinions

Creating Flocking Behavior with Virtual Birds— A gentle and effective walkthrough of creating and animating flocks of virtual birds.

Drew Cutchins

Rethinking JavaScript Test Coverage— The latest version of V8 offers a native code coverage reporting feature and here’s how it works with Node.

Benjamin Coe (npm, Inc.)

Getting Started with the Node-Influx Client Library— The node-influx client library features a simple API for most InfluxDB operations and is fully supported in Node and the browser, all without needing any extra dependencies.

InfluxData sponsor

How Dropbox Migrated from Underscore to Lodash

Dropbox

Create a CMS-Powered Blog with Vue.js and ButterCMS

Jake Lumetta, et al.

Understanding Type-Checking and 'typeof' in JavaScript

Glad Chinda

Airbnb's Extensive JavaScript Style Guide— Airbnb’s extremely popular guide continues to get frequent updates.

Airbnb

Webinar: Getting the Most Out of MongoDB on AWS

mongodb sponsor

16 JavaScript Podcasts to Listen To in 2018— Podcasts, like blogs, have a way of coming and going, but these are all ready to listen to now.

François Lanthier Nadeau podcast

Five Tips to Write Better Conditionals in JavaScript

Jecelyn Yeen

🔧 Code and Tools

Tabulator: A Fully Featured, Interactive Table JavaScript Library— Create interactive data tables quickly from any HTML table or JavaScript or JSON data source.

Oli Folkerd

Vandelay: Automatically Generate Import Statements in VS Code

Visual Studio Marketplace

APIs and Infrastructure for Next-Gen JavaScript Apps— Build and scale interactive, immersive apps with PubNub - chat, collaboration, geolocation, device control and gaming.

PubNub sponsor

Apify SDK: Scalable Web Crawling and Scraping from Node— Manage and scale a pool of headless Chrome instances for crawling sites.

Apify

Cloudflare Adds a Fast Distributed Key-Value Store to Its Serverless JavaScript Platform

Stephen Pinkerton and Zack Bloom (Cloudflare)

turtleDB: For Building Offline-First, Collaborative Web Apps— It uses the in-browser IndexedDB database client-side but can then use MongoDB as a back-end store for bi-directional sync.

turtle DB

An Example of a Dynamic Input Placeholder— This is a really neat effect.

Joe B. Lewis

#406 — October 5, 2018

Read on the Web

JavaScript Weekly

This past week JavaScript Weekly surpassed 150,000 subscribers. Over the past eight years it's been a pleasure to share projects, advice, and news with you, and see how JavaScript continues to grow and grow. We don't do it often, but sometimes its nice to mark such a milestone — if you're reading this I just wanted to say thanks. :-)
— Peter Cooper, editor

A Beginner's Guide to JavaScript Prototypes— It’s aimed at beginners but this guide is really extensive and packed with examples, so it’s worth a skim unless you’re Kyle Simpson or something :-)

Tyler McGinnis

Plans for the Next Iteration of Vue.js— The creator of Vue.js, a popular alternative to things like React and Angular, gives a ‘brief sneak peek’ at what’s coming in the next major version of Vue, Vue 3.0.

Evan You

Accurately Locate Users By IP Address— Use our fast IP Geolocation API to reliably locate users, personalize content, analyze traffic, enrich forms, target ads, enforce GDPR compliance, perform redirections, prevent trial abuse, block certain countries and more. Get started with a free API key.

ipdata sponsor

Create React App 2.0 Released— A significant release of a project that’s had a huge effect on the adoption of React by making it easier to get a project started. Psst.. we have a React newsletter too.

Joe Haddad and Dan Abramov

The Node.js Foundation and JS Foundation Plan to Merge— Isomorphic foundations! This could also explain why the forthcoming Node+JS Interactive conference was renamed from JS Interactive recently :-)

The Linux Foundation

'Goodbye' JavaScript, Hello WebAssembly— It’s not been pushed to its full potential yet, but WebAssembly (a binary instruction format that compilers can target to run code fast in the browser) opens up a lot of potential for the Web, though, as Ed notes, JavaScript continues to have a role to play.

Ed Charbeneau

How To Build a News App with Angular 6 and Material Design— We always love a good Smashing Magazine walkthrough - this time out, it’s about building a basic news app (for both desktop and mobile) using Angular and Google’s Material Design principles.

Rachid Sakara

Awesome VS Code: A Curated List of VS Code Packages and Resources— Yep, it’s one of those‘awesome’ lists - this time it’s a list packed with over a hundred links to themes and extensions, both language specific and general productivity ones.

Valerii Iatsko

💻 Jobs

JavaScript Developer at X-Team (Remote)— We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Mid-Level Front End Engineer @ HITRECORD (Full Time, Los Angeles)— Our small dynamic team is looking for an experienced frontend developer to help build and iterate features for an open online community for creative collaboration.

Hitrecord

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

Building a Complex Financial Chart with D3 and d3fc— Reproducing the sort of graph you might see on Yahoo Finance, say.

Colin Eberhardt

Using React/JSX as a Server-Side Templating Language— Using React function components to render your website’s skeleton index.html

Kent C. Dodds

Barcode Detection in a Web Worker using Comlink— Comlink is a library that makes WebWorkers more transparent to work with.

Paul Kinlan

5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18

Twilio sponsor

What's New with Components as of Ember 3.4

David Tang

Working with Babel 7 and Webpack— Goes through setting up a project with Webpack and Babel 7, highlighting the basics of Babel plus some cool features of what it can do with your code.

Jan D'Hollander

Professor Frisby's Mostly Adequate Guide to Functional Programming— If you’ve got some spare time at the weekend and want to get into some FP with JS, this is a good read.

Lonsdorf, Benkort, Takle, et al.

How to Build Serverless Vue Applications with AWS Amplify— We also have a serverless newsletter if that’s your kinda thing.

Nader Dabit

A Very Basic Introduction to Custom Elements

James Robb

🔧 Code and Tools

Husky: Git Hooks Made Easy— Prevent bad commits, pushes, etc. by running tests or more automatically. 1.0, now just out, is a complete rewrite in TypeScript.

Typicode

The TDD Experience That Gives You In-Line Test Results as You Type— Wallaby catches errors in your tests and displays the results of expressions in your editor, in real-time.

Wallaby.js sponsor

Sal: Lightweight Scroll Animation Library— Coming in at just 2.8KB, this vanilla JS library is performance focused with no dependencies. GitHub repo.

Mirosław Ciastek

Highground.js: ES6-Focused Unit Testing— Highground is currently in beta and presents an alternative fast and easy way to test ES6 apps.

Daniel Stern

ekill: A Chrome Extension to 'Nuke' Annoying Elements on a Web Page— Could be useful in development as well.

René Hansen

Automated Visual Testing and Reviews on Each Commit— Replace time-consuming manual QA to catch visual UI bugs automatically and start deploying faster.

Percy sponsor

Wax: Experimental, JSX-compatible Renderer for the Web Audio API— An interesting idea that brings a JSX-style approach for managing audio nodes.

James Wright

imgToAscii: A JavaScript Image to ASCII Converter— Runs in the browser, too.

Victor Ribeiro

Fanray: A Blog System Built with ASP.NET Core and Vue.js— Runs on .NET Core 2.1 and SQL Server.

Ray Fan

#407 — October 12, 2018

Read on the Web

JavaScript Weekly

Calls Between JavaScript and WebAssembly Are Finally Fast— JavaScript is fast. WebAssembly is fast. But the interoperability between the two is where things can lag a little. In the latest Firefox, this has changed, and here’s an amazingly accessible writeup of the how and why. You will learn something here.

Lin Clark

13 Games in Under 13KB of JavaScript— A look at some of GitHub’s favorite entries to the recent js13kGames 2018 competition where you have to build a game in under 13 kilobytes, assets and all.

GitHub

Level Up Your JavaScript Error Monitoring 🚀— Identify impactful errors at a glance. Sort errors by event count or users impacted to find ones that occur most frequently or affect a large segment of users. Get to the root cause of errors quickly with automatic diagnostic collection. Try it free.

Bugsnag sponsor

Rethinking Unit Test Assertions— “Well written automated tests always act as a good bug report when they fail, but few developers spend time to think about what information a good bug report needs.”

Eric Elliott

▶  What’s New in Create React App 2.0: A Video Series— Create React App 2.0 is only a week old, but Elijah Manor has already put together a set of handy, brief videos on using it for egghead.io.

Elijah Manor

Ways to Eliminate Common React Performance Issues— A pragmatic step-by-step guide to eliminating common React-related performance issues. And if you like this, hop over to our React-specific newsletter for more :-)

Ohans Emmanuel

The ARM Instruction Set Now Includes JavaScript-Focused Optimizations— The iPhone XS is already trumping even the iMac Pro on a particular JS benchmark, and it looks set to go further.. Interesting times! (Very) technical details here.

John Gruber

💻 Jobs

Senior Full-Stack JavaScript Engineer— Small, smart teams, challenging work, modern tech, great benefits, and a carefully curated emoji library. 100% Remote.

SITEPEN

Platform Engineer - React, GraphQL & Node.js (NYC)— Bustle is seeking engineers to help us build a world-class serverless publishing platform at a mind-boggling scale.

Bustle Digital Group

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Articles & Tutorials

Isaac Z. Schleuter on the Node + JS Foundation Merger— The creator of npm shares his excitement about the recently announced merger.

The npm Blog

Dockerizing Java Apps with CircleCI and Jib— The evolution of deployment platforms and orchestration engines has been a tremendous accelerant for application and infrastructure teams alike.

CircleCI sponsor

Getting Started with Nuxt.js— Nuxt.js is a framework for creating universal (both front-end and back-end) Vue.js-powered apps.

Nosa Obaseki

What You Need to Know About Vue CLI 3— Vue CLI provides a standard build toolchain for Vue.js apps.

Alex Kyriakidis

Using Nested Forms in Angular 6

Neel Bhatt

How to Create Custom Angular Pipes and Dynamic Locales

Michael Karén

Build a Text-To-Speech Chat App with Amazon Polly— Accessibility shouldn’t be overlooked. Allow chat users to play chat messages with natural language.

ChatEngine sponsor

Taming this in JavaScript with the Bind 'Operator'— A pretty complete tutorial on a JavaScript feature that doesn’t exist yet, though the author hopes it will help champion its case and hopes you’ll star its proposal. See what you think.

Willian Martins

My Serverless Adventure— A JavaScript developer shares his initial experiences, pitfalls, best practices, and tips for building serverlessly using AWS Lambda and the Serverless framework.

Mateo Karadza

🔧 Code and Tools

JavaScript Visualizer— A tool for visualizing execution contexts, hoisting, closures, and scopes in the browser.

Tyler McGinnis

InfluxDays: The Only Event Focused on the Impact of Time Series Data

InfluxData sponsor

Aurelia CLI 1.0 Beta 1: Now with an Auto-Tracing Bundler— At 4 years old, Aurelia, a next-gen client app framework, continues to innovate both with a new bundler and vNext, a raft of ideas to improve the framework under the hood.

Chunpeng Huo

Muze: Build Composable Data Visualizations for the Web— Composable, can be themed with CSS, supports dynamic binding for tooltips and other ‘reactions’, stackable layouts..

Charts.com

mb: Exception-Free Nested Nullable Attribute Accessor— It’s literally 51 bytes of code. Figure out how it works for a fun exercise.

Burak Can

Flatbush: Fast Static Spatial Index for 2D Points and Rects— We first linked this several months ago but a new version is now out.

Vladimir Agafonkin

BBob: Fast, Pure JavaScript BBCode Transforming and Parsing— BBCode is a text markup format commonly used on forums and wikis.

Nikolay Kostyurin

Walt: A JS-Like Syntax for the WebAssembly Text Format— An in-progress experiment for using a JS-inspired alternative syntax for WebAssembly to write to as ‘close to the metal’ as possible.

Arthur Buldauskas

Ember 3.4 Released

The Ember Team

#408 — October 19, 2018

Read on the Web

JavaScript Weekly

33 Concepts Every JavaScript Developer Should Know— A curated collection of links to tutorials on 33 different areas of JavaScript it’s worth understanding well, including types, closures, equality, scope, and different JavaScript engines.

Leonardo Maldonado

Angular 7 Released— A major release with upgrades for the entire Angular platform from the core framework to Angular Material and the CLI tools.

Stephen Fluin (Google)

Adopting a New Tool for Your Team - 5 Tips for Success— Bringing any new tool into an organization can feel like an uphill battle. It’s difficult to overcome inertia, even with the promise of improved workflows and happier teammates.

CircleCI sponsor

Omi: A 'Next Generation' Web Framework in 4KB of JS— Built around JSX, Web Components, and Shadow DOM. Check out the ‘one minute’ example code to see if you like their approach.

Tencent

The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript— Any article starting ‘The Ultimate Guide to..’ usually makes me raise my eyebrows, but in this case it’s Tyler so it’s OK :-)

Tyler McGinnis

Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers— More browsers than ever are releasing frequent updates and supporting modern standards, so with code size rising fast, is it time to rethink asset delivery for the modern web?

Shubham Kanodia

Why Using reduce() to Sequentially Resolve Promises Works— A must read if you’re trying to sequentially resolve a bunch of promises in order, one after the other.

Alex Macarthur

💻 Jobs

Sr. Backend Engineer - Node.js / React / MongoDB (San Francisco)— We’re changing healthcare. Join us and help us scale our core Node backend platform that connects patients and doctors.

Luma Health

Distribute Systems Engineering with Node.js— If consensus algorithms and distributed systems pique your interest, join the team behind our global fault-tolerant messaging platform.

Ably Realtime

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

How to Stop using console.log() and Start using Your Browser’s Debugger— This blew up on Twitter, emphasizing just how common console.log debugging is :-)

Parag Zaveri

Searching and Sorting Text with Diacritical Marks in JavaScript— The art of normalizing Unicode text.

Paul Springett

5 Tips to Write Better Conditionals in JavaScript

Jecelyn Yeen

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

Bitmovin sponsor

Ruby Gotchas for the JavaScript Developer— I’d not thought of people picking up Ruby after JavaScript, but as it appears to happen, this may be of use.

Dmitry Pashkevich

Eliminate An Entire Category of Bugs with a Few Simple Tools— Be sure to use ESLint, Prettier, and Flow or TypeScript says Kent.

Kent C. Dodds

Creating an Interactive Map with D3 and Vue.js— How to display maps using both D3 and JSX. Live demo. Source code.

Mikhail Panichev

🔧 Code and Tools

Evergreen: A React UI Framework— Polished React components from buttons and text inputs to menus, side sheets and tables.

Segment

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

LoopBack v4 Released: The Node.js API Framework— To create a REST API you can now just decorate classes with OpenAPI compatible metadata. Full announcement post.

IBM

graphql.js: A Simple and Isomorphic GraphQL Client

Fatih Kadir Akın

billboard.js: A Simple Chart Library Based on D3 v4+

Naver Corp

Eagle.js: A Hackable Slideshow Framework Built with Vue.js— Supports animations, themes, and interactive widgets, and makes it easy to reuse slides and styles across presentations. Demo.

Zulko

Explore the Ext JS Kitchen Sink - 115+ Components for React Apps— Ext JS provides 115+ fully supported UI components that easily integrate into React apps. See our examples.

SENCHA sponsor

Styled Map: A Simpler Way to Map Props to Styles with Styled Components

Scott Michael

Inferno: A Fast, React-like JavaScript Library for Building Modern UIs— A long-standing project but version 6 just came out.

Inferno

#409 — October 26, 2018

Read on the Web

JavaScript Weekly

Introducing React 'Hooks'— Hooks are a proposed new feature for using state and other React features without writing classes. You can try them out in an alpha build of React 16.7 and keep up with discussion in this RFC.

React

WebAssembly’s Post-MVP Future: A Cartoon Skill Tree— A fantastic guide to understanding where WebAssembly fits into the big picture, what’s yet to come, and what impact WebAssembly could have on the Web.

Mozilla Hacks

⚛️ New Course: Complete Intro to React, v4— Learn to build real-world applications in React. Much more than an intro, you’ll start from the ground up all the way to using the latest features in React 16+ like Context and Portals. We also launched a follow up course, Intermediate React.

Frontend Masters sponsor

V8 Version 7.0— A brief update on the latest beta of the V8 JavaScript engine. It goes stable when Chrome 70 comes out soon, but is also included in Node 11.0.

Michael Hablich

Playing Mortal Kombat with TensorFlow.js— A detailed walkthrough of what it took to building a posture classification algorithm using TensorFlow.js and MobileNet in order to play the ‘beat-em-up’ game Mortal Kombat.

Minko Gechev

▶  Discussing the State of JavaScript with Addy Osmani— A discussion with Addy Osmani about the state of JavaScript and his favorite performance tools. Just 13 minutes so ideal if you get a quick break.

Google Chrome Developers

LazyBrush: Smooth Canvas Drawing with Any Pointing Device— Uses a mechanism to allow users to create smooth lines and curves. Works with both mouse and touch. The demo is neat.

Jan Hug

💻 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

ReactJS Developer at Komoot (Remote)— Millions get inspired and plan adventures with our apps. To help us make Komoot the place to go to plan outdoor adventures, we’re looking for an ambitious React developer to join our team.

Komoot

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

The Intl.RelativeTimeFormat API— Enables localized formatting of relative times without sacrificing performance. Chrome 71+ only so far.

Google Developers

Airbnb's Extensive JavaScript Style Guide— Airbnb’s extremely popular guide continues to get frequent updates.

Airbnb

Understanding Currying in JavaScript— Currying is a way in functional programming for turning a function with multiple arguments into a chain of nested functions.

Chidume Nnamdi

The Importance of Readable and Reusable Tests: Why We Built Gauge— Strong design opinions can cause teams to over-engineer test suites, making maintenance hard. Gauge solves this, helping you to create easy to maintain tests.

Gauge sponsor

Property Order is Predictable in JavaScript Objects Since ES2015— Useful to know, I hadn’t realized this.

Stefan Judis

▶  Internationalize your Web Applications with Globalize.js

Alolita Sharma

▶  Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

How to Create Custom HTML Markers on Google Maps

Dan Ward

Top 10 Things to Avoid When Considering Low-Code

Progress Kinvey sponsor

How to Reduce the Impact of JavaScript on Page Load Times— Lessons learned from serving billions of pageviews across thousands of sites.

GoSquared Engineering

Isoline Routing in an Angular Application using the HERE Routing API— Isoline routing is used to calculate an area that can be reached within a certain travel time or distance.

Nic Raboy

🔧 Code and Tools

A Promises and async/await Cheatsheet

Frontend Armory

clean_logs: A Better console.log for the Browser— Wraps around console.log, produces nicer output and provides logging levels.

Pablo Giani

Glean: A Refactoring Tool for React Code

Wix Engineering

What Does JSBin, Nuxt, Code Sandbox, and Material-UI Have in Common?— They all use CodeFund to provide passive income for their projects. Find out if CodeFund can help you.

CodeFund sponsor

IronDB: A 'Relentless' Key-Value Store for The Browser— Relentless in the sense that it redundantly stores data in multiple browser stores (i.e. in cookies, localStorage, sessionStorage & IndexedDB) and tries to ‘self heal’ upon data loss.

Ansgar Grunseid

React v16.6.0 Released— More about this in this week’s React newsletter.

Sebastian Markbåge

Squirrelly: A Fast, Lightweight, and Simple JS Template Engine— Only 2.6KB gzipped and supports partials, helpers, filters, and native code.

Ben Gubler

face-api.js: Face Detection and Face Recognition in the Browser— Uses TensorFlow.js.

Vincent Mühler

#410 — November 2, 2018

Read on the Web

JavaScript Weekly

An Annotated webpack 4 Config for Frontend Development— A very thorough example of a real-world production webpack 4 config that takes modules, CSS, and image optimization into account.

Andrew Welch

Storybook 4.0: The UI Component Workshop— A great tool for building UI components gets a major update which includes support for webpack 4 & Babel 7, React Native, Ember, Svelte, Riot, and more, plus improvements for existing React, Vue and Angular users. If you’re not familiar with Storybook, learn more here.

Michael Shilman

Planning an Angular Application: Whitepaper— Angular devs—take a look at this checklist of things to consider when planning your next Angular app. Make an informed decision about tooling choices during development all the way through to deployment. Get your free copy today.

Progress Kendo UI sponsor

The Evolution of Async JavaScript— A practical break down of the pros and cons of three common JavaScript mechanisms: callbacks, promises, and async/await, along with their significance and progression from a historical context.

Tyler McGinnis

Real Talk JavaScript: A New(ish) JavaScript Podcast— Now at five episodes old, we thought it was time to mention this neat podcast hosted by John Papa, Ward Bell, and Dan Wahlin. Episodes so far cover topics like thriving in OSS, scaling React, and D3.

Real Talk JavaScript

Could We Eventually Use JavaScript with AMP?— AMP (Accelerated Mobile Pages) removes the ability to use JavaScript in order to improve performance, but there’s now a project looking at a way to provide a constrained environment for JavaScript to render things like interactive UI components within an AMP page.

AMP Project

Carlo: Chrome as a 'Web Rendering Surface' for Node Apps— Uses Puppeteer to communicate between a Node app and an existing, locally installed Chrome instance.

Google Chrome Labs

💻 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

Join Our Career Marketplace & Get Matched With A Job You Love— Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

📘 Tutorials and Opinions

The Forgotten History of OOP

Eric Elliott

Learn to Build a Simple Progressive Web App with Angular and Lighthouse— A step-by-step guide to building a Hacker News clone PWA using Angular and Lighthouse.

Aman Mittal

Integrate Video Calling Directly in a Chat App with WebRTC— Allow users to initiate video chats right in any chat app with WebRTC and ChatEngine.

PubNub sponsor

A Simple Intro to React Hooks— Learn how React’s new Hooks feature works, and how Hooks can make your code cleaner and easier to write.

Dave Ceddia

A Look at V8 Release Version 7.1— A look at some of the highlights of the 7.1 release (in beta until Chrome 71 Stable arrives).

V8 Project

Copying Objects in JavaScript— In both shallow and deep ways.

Victor Parmar

Getting Started with Vue Plugins

Francis Cote

Navigating the Spooky World of JavaScript— With the amount of change going on in the JavaScript world, how can we navigate its ecosystem and make the best decisions on what tools to use?

Ali Spittel

A Personal Review of Automated Testing Tools in the JavaScript World

Walmyr Filho

🔧 Code and Tools

three.js r98 Released: The JavaScript 3D Library— The HTML5 Canvas renderer has been removed as WebGL support is now so widespread. There’s also lots to enjoy on the examples page.

Ricardo 'mr doob' Cabello

A Much Faster Way to Debug Code Than with Breakpoints or console.log— Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type.

Wallaby.js sponsor

simple-keyboard: A Slick Virtual JavaScript Keyboard for the Web— Very smooth and easy to customize.

Francisco Hodge

Howler.js: JavaScript Audio Library for the Modern Web

James Simpson

randexp.js: Create Random Strings That Match a Given Regular Expression— For example /hello+ (world|to you)/ could generate hellooooooo world.

fent

A Minimalist Dark Design System for Vue.js— Love the description of “components designed for the insomniacs who enjoy dark interfaces as much as we do.”

Nada Rifki and Julien Le Coupanec

Easily Integrate Ext JS Components into React Apps - View Examples

SENCHA sponsor

Dinero.js: Immutable, Chainable API to Work with Monetary Values

Sarah Dayan

Ervy: ASCII Bar, Pie, and Other Charts on the Terminal

Chunqiuyiyu

simplebar: A Vanilla JavaScript Library for Custom Scrollbars

Adrien Denat