#385 — May 11, 2018

Read on the Web

JavaScript Weekly

Guess.js: A Toolkit for Using Data To Improve User Experiences— An interesting project that can use data from Google Analytics combined with machine learning to intelligently pre-fetch resources. Addy Osmani introduced it live at Google I/O earlier this week. There’s also a webpack plugin for quickly adding these abilities to React and Angular apps.

Minko Gechev

'I Used The Web For A Day With JavaScript Turned Off'— Is it possible to do much on the web without JavaScript nowadays? This is a neat journey to answer that question that includes tons of insights on improving your own sites.

Chris Ashton

ES Modules Enabled By Default in Firefox 60— Firefox 60 went live this week and amongst other changes, ES module support went live. Lin Clark’s fantastic deep dive is a great intro to what this means for JavaScript developers. This now means all major, current browsers now support ES modules, hurrah!

Mozilla

Convert Your Java Project to Kotlin - Free Screencast— The author of "Kotlin: The Big Nerd Ranch Guide" offers a free online tutorial filled with tutorials, tips and best practices to raise your game. Check it out.

The Frontier by Big Nerd Ranch sponsor

▶  Build The Future of the Web with Modern JavaScript— A Google I/O presentation presenting an overview of cutting-edge JavaScript features, plus what to expect in Chrome and Node.js soon.

Mathias Bynens and Sathya Gunasekaran

JavaScript Comes to Microsoft Excel— At Build, Microsoft announced that Excel has gained functionality to execute custom JavaScript functions locally to add more power to existing Excel formulas.

Microsoft

A Gentle Introduction to Prepack— Prepack is a tool that recompiles your JavaScript code to faster JavaScript code.

Dan Abramov

Learn Enough JavaScript to Be Dangerous— A new book (available to read online) from the esteemed creator of Rails Tutorial that teaches how to use JavaScript as a general-purpose programming language. Looks very solid.

Michael Hartl

Introducing Spec by Slack – A Developer Conference on May 22

Slack sponsor

Real-time Human Pose Estimation in the Browser with TensorFlow.js

Dan Oved (Google Creative Lab)

'My Struggle to Learn React'— A veteran Web designer shares his struggle.

Brad Frost

💻 Jobs

Senior Frontend Developer at Nested.com, a London Based Startup— We're looking for frontend developers to join our growing team. We're using technology to reinvent the broken industry that is UK property.

Nested

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

JavaScript Expert? Sign Up for Vettery— Top companies use Vettery to find the best tech talent. Create your profile to get started.

Vettery

🎬 Videos

How 'Named Params' Destructuring Works— In just 5 minutes.

Wes Bos

What's New in Angular— Including a peek at things coming in future.

Stephen Fluin and Kara Erickson

📘 Tutorials

Sending Web Push Notifications from Node— The full process of sending push notifications from an Express app to a front-end JS app.

Valeri Karpov

Top 10 JavaScript Errors and How to Avoid Them— 📈 Data collected from 1,000+ real-world JS applications. Learn more.

ROLLBAR sponsor

Build Time Travel Debugging in Redux From Scratch

Trey Huffine

Using 'npm audit' to Identify Insecure Dependencies— npm 5.10 and 6.0 include the ability to perform a security review of dependencies.

The npm Blog

An Angular.js Guide for Seasoned Developers— Two parts so far, part two is here.

Seva Zaikov

🔧 Code and Tools

Top JavaScript VSCode Extensions for Faster Development

Arfat Salman

webpack-serve: A Lean, Modern, and Flexible webpack Development Server

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

Cancelable Async Flows (CAF)— Add support for external cancellation to asynchronous-style functions.

Kyle Simpson

GitHub Contribution Chart Generator— Generate an image of all your GitHub contributions since you joined.

Sallar Kaboli

List: A Fast Immutable List with a Functional API— A purely functional alternative to arrays.

Simon Friis Vindum

isomorphic-git: A Pure JavaScript Implementation of 'git'

isomorphic-git

Ultradom: A Minimal View Layer for Building Declarative Web UIs

Jorge Bucaran

#386 — May 18, 2018

Read on the Web

JavaScript Weekly

Psst.. there's a cool graph at the bottom of this issue showing what testing tools JavaScript developers prefer to use..

What If JavaScript 'Wins'?— Reflections on JavaScript’s continuing growth and how network effects could see it essentially become the ‘default’ programming language.

Anil Dash

Debugging Modern Web Applications with Firefox— The Firefox Dev Tools team are adding lots of new features to help you work with modern tools like Babel and Webpack while debugging with Firefox.

Mozilla Hacks

Learn Advanced React Component Patterns— Simplify large React applications by separating your component logic, state and display properties to make React components more flexible and usable. This course is part of our Complete React Learning Path.

Frontend Masters sponsor

A First Look at Angular Ivy— Ivy is the forthcoming new render engine for Angular. This article takes a closer look at how it works and what it means for Angular developers.

Sam Julien

Data-Forge 1.0: A JavaScript Data Wrangling Toolkit— Inspired by Pandas and LINQ, Data-Forge is designed to be a ‘goto tool for slicing and dicing data’. v1 release post.

Ashley Davis

Introducing the Microsoft Edge DevTools Protocol— Edge has gained a Chrome-like DevTools protocol for providing access to external developer tools.

Brendyn Alexander (Microsoft)

▶  Web Performance Made Easy— A talk from Google I/O covering lots of useful stuff like auditing page assets, code splitting, image optimizing, minification, and more.

Ewa Gasperowicz and Addy Osmani

Announcing TypeScript 2.9 RC— Highlights include import() types and support for symbols and numeric literals in keyof and mapped object types.

Microsoft

💻 Jobs

Senior Frontend Developer at Nested.com, a London Based Startup— We're looking for frontend developers to join our growing team. We're using technology to reinvent the broken industry that is UK property.

Nested

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

JavaScript Expert? Sign Up for Vettery— Top companies use Vettery to find the best tech talent. Create your profile to get started.

Vettery

📘 Tutorials and Opinions

How The New Vue CLI Simplifies Development

Chris Nwamba

Using Trampolines to Manage Large Recursive Loops— A trampoline function wraps a recursive function in a loop to better manage how it runs.

Benjamin Johnson

ES2018 Regular Expression Updates, an Opinionated Summary

Zsolt Nagy

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

A Simple Guide to ES6 Promises— We’ve seen a few subscribers lament they’re too new to JavaScript to understand many of the links we include.. if that’s you, you should find this tutorial useful :-)

Brandon Morelli

Comparing async/await with Generators and Promises

Chanakya Bhardwaj

Turn Sublime Text 3 into a JavaScript IDE— Visual Studio Code appears to be the most popular editor in the JavaScript world lately but Sublime Text remains fast and capable and can be tweaked to work well as a JavaScript IDE.

Lorenzo Pichilli

Type-Safe Object Merging in TypeScript 2.8

Tyler Hoffman

Understanding Proxy, the ES6 Feature— Includes some JSFiddle examples to play with.

Yash Thakur

Playing with MIDI and the Web Audio API in JavaScript

Kacper Kula

🔧 Code and Tools

Signale: A Highly Configurable Console Logger

Klaus Sinani node

fast-copy: A 'Blazing Fast' Deep Object Copier

Tony Quetano

Free Planning Template for Upgrading MongoDB— Running an older version of MongoDB? We put together this template to help you plan out your upgrade process.

MONGODB sponsor

Lynt: A Zero Config JavaScript Linter— ..with support for React, Flow, and TypeScript.

Saad Quadri

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

Sarah Dayan

React Native DOM: An Experimental Port of React Native to the Web

Vincent Riemer

Hotkeys: Keyboard Input Capture with No Dependencies

Kenny Wong

Slack’s Developer Conference is Coming – Watch Livestream

Slack sponsor

Results of the Front-End Tooling Survey 2018

Over 5,000 frontend developers took part in this survey, and here are the results covering what tools and techniques front-end developers are using right now.

Here's a quick sneak peek - what testing libraries do JavaScript developers prefer to use?

But there's a lot more, including what task runners people use, preferred frameworks, and linting tools.

#387 — May 25, 2018

Read on the Web

JavaScript Weekly

Wired Elements: UI Elements with a Hand-Drawn Look— Possibly useful for wireframes and mockups, or wherever you want a less formal look. Implemented as Web Components and cover things like checkboxes, cards, input fields, radio buttons, etc. GitHub repo.

Preet Shihn

JavaScript Algorithms and Data Structures— A wide variety of algorithms (e.g. permutations, Levenshtein distance, binary search) and data structures (e.g. linked lists, trees, stacks) implemented in JavaScript with explanations and links to further reading.

Oleksii Trekhleb

Codacy Helps You Improve Your JavaScript Code— An automated code review tool that allows developers to improve code quality. We check your code against the most popular JS static analysis tools, with specific plugins for Vue, Angular and React. Sign up for free and improve your coding.

Codacy sponsor

SmooshGate FAQ: Array.prototype.flatten is now 'flat'— In issue 376 we wrote up reports that the proposed flatten method could get renamed to smoosh to prevent breaking existing MooTools code. Turns out TC39 are now going with ‘flat’ and here’s the full story.

Mathias Bynens

React 16.4 Released— Gains support for Pointer Events on browsers that support them. Also, check out our React newsletter if you want more React news.

Andrew Clark

JavaScript Start-Up Optimization— Keep your network transmission and parse/compile cost for JavaScript low to ensure pages get interactive quickly.

Addy Osmani

npm 6.1 (next.0) Released— npm audit fix uses the results from npm audit feature to upgrade insecure dependencies for you keeping semver in mind.

The npm Blog

An Initial Threading Implementation for Node using 'Workers'— Check out the example code for an idea of how you’d use it.

Node.js Foundation

nanoJS: A Minimal Library for DOM Manipulation— A step closer to native JS than jQuery but with some of the niceties (chainable, short method names).

Vladimir Carrer

💻 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 Frontend Developer at Nested.com, a London Based Startup— We're looking for frontend developers to join our growing team. We're using technology to reinvent the broken industry that is UK property.

Nested

JavaScript Expert? Sign Up for Vettery— Top companies use Vettery to find the best tech talent. Take a few minutes to join our platform.

Vettery

📘 Tutorials

One-Directional Data Binding Without Frameworks— Uses an ES6 proxy to detect changes to an underlying variable.

Jack Tarantino

Intermediate to Advanced Tutorials for Developers: 14 Day Trial— The authors and devs you trust offer bite-sized chunks of tutorials, tips and best practices to raise your game.

The Frontier by Big Nerd Ranch sponsor

Parcel: How Simple Is It, Really?— The conclusion is ‘very’ and if you haven’t played with this ‘zero config’ bundler yet, this is as simple an intro as you’ll get.

Tom Vance

Boosting Your Workflow with Angular 5 Snippets and VS Code

Michael Wanyoike

Testing React Apps with Cypress— A brief guide on how to run end-to-end tests on React apps using the testing framework Cypress.

Rajat S

How Twilio Improves 'Mean Time To Discovery'

ROLLBAR sponsor

▶  The Trick to Understanding Scoped Slots in Vue.js

Adam Wathan

🔧 Code and Tools

Saber.js: A Minimalistic Framework for Building Static Sites using Vue

Egoist

LagRadar: Trace Frame Rate Lag with a Performance 'Radar'

Ben Birch

Vuido: Build Native Desktop Apps using Vue.js?— Very much an early prototype/proof of concept.

Michal Mecinski

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

BetterPromise: An Experiment in Subclassing Promise and 'Fixing' Some Awkward/Bad Parts— Always great to see what Kyle’s thinking.

Kyle Simpson

Hyphenopoly: A Polyfill for Client-Side Hyphenation— An interesting use of WebAssembly here too.

Mathias Nater

Top Angular Plugins for Sublime Text

Jeff Smith

hybrids: UI Library for Creating Web Components with a Simple and Functional API— Interactive sandbox/demo.

Dominik Lubański

rmodal.js: A Simple 1.2 KB Modal Dialog with No Dependencies

Iskren Slavov

#388 — June 1, 2018

Read on the Web

JavaScript Weekly

I'm in San Francisco next week exhibiting and speaking at DevXCon about JavaScript Weekly :-) It's a developer relations conference, so if you know any DevRel people located near SF, let them know as I believe some tickets are still available.

Due to next week's travel, JavaScript Weekly will lean on submissions more than usual, so if you want to submit stuff for us to consider use this nifty submissions form or just hit reply :-) Thanks!
— Peter Cooper, editor

Jest 23 Released: Even Faster JS Testing— Jest is a popular JavaScript testing tool and when webpack switched from Mocha to the Jest 23 beta, they saw a 6x speed improvement for their test suite.. There’s also a talk about Jest 23 if you prefer a video guide.

Rick Hanlon II

Simplifying Web Worker Code with Comlink— Web Workers help you offload work from the main thread to other threads but they can be tricky to manage. This tutorial presents a solution (from Google, no less): Comlink, a small RPC library.

David East

How to Design Services for Continuous Deployment: 3 Best Practices— The benefits of continuous delivery are well-documented elsewhere. In this post I want to share some of the practices that we use at CircleCI to ensure that our services can safely be deployed continuously.

CircleCI sponsor

A JavaScript String Methods Cheatsheet— A very handy reference covering not quite every string method but certainly the truly useful ones.

Dr. Axel Rauschmayer

TypeScript 2.9 Released— The JavaScript superset that brings optional static types to JS takes another step forward at both the editor support and language level. One new feature is import() types which this article explains.If you’re totally new to TypeScript, this is a good primer.

Microsoft

Sucrase: A Super-Fast Alternative to Babel.. in Certain Situations— Compiles down to modern JS runtimes only (rather than ES5) and focuses on compiling down JSX, TypeScript and Flow which results in a smaller scope with more performance optimizations to be had.

Alan Pierce

UTC is Enough for Everyone, Right?— A really neat article that goes from the history of time itself through to standardization and working with time in both JavaScript and HTML.

Zach Holman

Deno: A Secure TypeScript Runtime on V8 6.8— An interesting idea from the original creator of Node.js, Ryan Dahl. It’s built with Go, is not Node or npm compatible, and is.. ‘segfaulty’ :-)

Ryan Dahl

💻 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

JavaScript Expert? Sign Up for Vettery— Top companies use Vettery to find the best tech talent. Take a few minutes to join our platform.

Vettery

🎬 Videos, Screencasts and Talks

On React Suspense— A look at React’s vision for async rendering.

Andrew Clark

Azure Tips and Tricks Video Series— Collection of short videos on using the Azure platform. New videos are released weekly. Subscribe now.

Azure sponsor

Using Async Generators to Stream Data in JavaScript

Fun Fun Function

📘 Tutorials

From Vanilla JS to Vue.js: A Refactoring Tale

Peter Mbanugo

Creating UIs with Angular Material Design Components— How to create a simple Angular app with a UI built from Angular Material components.

Ahmed Bouchefra

Transparent Wrapper Components in Vue

Kevin Ball

Revising Useful JavaScript Array and Object Methods— Write cleaner code by making use of modern array and object methods.

Robert Cooper

Deploy Your Webpack Apps to Heroku in 3 Simple Steps

Rajesh Babu

Live Session: Learn to Build a Slack Integration— Join us June 12 for a live demo of Slack’s new developer features. Tune in from anywhere, & bring questions.

Slack sponsor

GraphQL: Everything You Need to Know— Not directly about JavaScript but this did very well on our @JavaScriptDaily Twitter, so why not?

Weblab Technology

From npm to yarn and Back (to npm) Again— When seeking better performance is a bit like switching lines at the grocery store.

Mixmax Engineering Blog

🔧 Code and Tools

Critters: Webpack Plugin to Inline Critical CSS and Lazy-Load the Rest

Google Chrome Labs

CurrencyFormatter.js: Easy Formatting of Values in 155 Currencies— Contains 155 currency and 715 locale definitions out of the box.

OSREC Financial

Eager Code Evaluation Done Right

Wallaby.js sponsor

jquery-calendar: A Responsive jQuery Calendar Scheduler Built with Bootstrap and Moment.js— It’s not often we get to include something about jQuery these days!

Arrobe

Minipack: A Simplified Example of a Module Bundler Written in JS— The aim is to show how most bundlers work under the hood.

Ronen Amiel

Subliminal: An Opinionated Minimalistic VS Code Theme for JS

Dan Abramov

Mermaid: Generate Diagrams and Flowcharts From Text— Converts text to diagrams and flowcharts (a la Markdown). GitHub repo.

Knut Sveidqvist

Proppy: Functional Props Composition for UI Components— Can integrate with React, Vue, Preact, Redux, and RxJS.

Fahad Ibnay Heylaal

#389 — June 8, 2018

Read on the Web

JavaScript Weekly

▶  Introducing MapKitJS: Bring Apple Maps To Your Sites— Although still in beta, you can now integrate Apple Maps directly on your own site. This video session from WWDC runs through how you could use it. Related docs here.

Apple

Puppeteer 1.5 Released: Control Headless Chrome from Node— As well as a new homepage, Browser Contexts can be used to isolate cookies and other data usually shared between pages, and you can now interact with Web Workers.

Google Chrome Team

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

ml5.js: Friendly Machine Learning for the Web— Builds on top of TensorFlow.js to make things like Web-based image classification easier to create.

NYU ITP

Meteor 1.7 Released— The latest version of the Node-based isomorphic framework automatically creates two sets of client-side assets, for both modern and ‘legacy’ browsers.

Ben Newman

Building Serverless Mobile Apps with React Native and AWS— A look at what’s involved with building a ‘backendless’ mobile app using React Native along with AWS’s Mobile CLI, Cognito (for auth), and Amplify.

Nader Dabit

▶  10 Things Node's Inventor Regrets About Node— Original Node.js inventor Ryan Dahl reflects on what he considers to be some early design mistakes with Node.

JSConf EU

Overscripted: Digging Into JavaScript Execution at Scale— A writeup of work taking place at Mozilla and UCOSP to “explore the unseen or otherwise not obvious series of JavaScript execution events that are triggered once a user visits a webpage” across a million Web pages.

Mozilla Hacks

Free, Online Talk with Liz Fong-Jones of Google— Join us June 21 for our discussion around “Improving Reliability with Error Budgets and Site Reliability Engineering”, hosted by Big Nerd Ranch.

Big Nerd Ranch sponsor

Yarn's 'import' Can Now Use npm's package-lock.json— As of 1.7.0, Yarn is able to import its dependency tree from npm’s package-lock.json natively, without external tools or clunky processes.

Aram Drevekenin (Yarn)

💻 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

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

Aha!

JavaScript Expert? Sign Up for Vettery— Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

📘 Tutorials and Opinions

Debugging JS Projects with VS Code and Chrome Debugger— Michael shows how to ditch console.log() and start debugging JavaScript more elegantly.

Michael Wanyoike

How to Deploy a Node App to AWS Lambda using Serverless— Entry level but that might be what you need right now :-)

Adnan Rahić

Replacing jQuery with Vue— Takes a shot at convincing you that using Vue.js doesn’t have to be a headache and will help even on basic projects.

Nilson Jacques

Understanding Variables, Scope, and Hoisting in JavaScript— A thorough (re)introductory guide.

Tania Rascia

Getting Started with the Node-Influx Client Library

InfluxData sponsor

The React is 'Just JavaScript' Myth— “React is just JavaScript.”— Dave affirms that this adage is good marketing, but also false.

Dave Rupert

How Learning C++ Can Make You A Better JS Developer

Pawel Grzybek

Live Session: Learn to Build a Slack Integration— Join us June 12 for a live demo of Slack’s new developer features. Tune in from anywhere, and bring questions.

Slack sponsor

Thoughts on JSConf.eu 2018 and Takeaways from the Conference— It took place last weekend in Berlin.

Kevin Simper

🔧 Code and Tools

JSUI: A Powerful UI Toolkit for Managing JavaScript Apps

Kristjian Ristovski

LuminJS: Progressively Highlight Any Text on a Page— For drawing attention to text or, perhaps, showing progress.

Preet Shihn

Short and Sweet: Accessible Character Counter for Input Elements— Demo here.

Rik Schennink

Paper.js: A 'Swiss Army Knife' for Vector Graphics Scripting

Juerg Lehni and Jonathan Puckey

#390 — June 15, 2018

Read on the Web

JavaScript Weekly

JavaScript Engine Fundamentals— A fantastic writeup (with video, if preferred) looking at the key parts of major JavaScript VMs/engines and how they interact with the code you write.

Mathias Bynens

Polly.js: Record, Replay, and Stub HTTP Interactions— A library from Netflix for recording, replaying and stubbing HTTP interactions via native browser APIs. GitHub repo.

Netflix

💻 New Course: A Practical Guide to Algorithms with JavaScript— Bored by the academic approach of most data structures and algorithms courses? This is for you. Solve algorithms and analyze space and time complexity in both an interview setting and in your day-to-day development.

Frontend Masters sponsor

Office 365 Is Being Rewritten in JavaScript— Joining Skype, Microsoft Teams, and VS Code. React Native Windows is the approach used, making it possible to build seamless Windows 10 and Xbox One apps with React.

Sean Thomas Larkin on Twitter

Vue Native: Build Native Mobile Apps with Vue.js— React has React Native, and now if you’re a Vue.js developer, you could give this a try. Unlike React Native this isn’t an official project from the same team and is essentially a Vue wrapper around React Native itself. Introductory article.

GeekyAnts

How V8's Concurrent Marking Frees Up The Main Thread— ‘Marking’ is a key step in V8 6.4’s garbage collection process and now this process takes place on separate worker threads meaning more time for your code on Chrome 64+ and Node 10+.

Mathias Bynens

Introducing 'The GraphQL Guide'— John Resig, the creator of jQuery, has co-written a book aiming to show you why GraphQL APIs are “the true successor to REST APIs”.

John Resig and Loren Sands-Ramshaw

Vue.js Passes React in Terms of GitHub Star Count— A vanity metric for sure, but an interesting one nonetheless. React still has significantly more downloads each day but Vue’s community is particularly vibrant and eager.

Dan Abramov on Twitter

The Biggest Lead Developer Conference Yet Is Coming to London in 2 Weeks

The Lead Developer London sponsor

💻 Jobs

React/Full-Stack Engineer (Remote)— Join our small, distributed team as we build the world’s largest open library of freely usable visuals. Open to all, regardless of experience and background.

Unsplash

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

Vettery

📘 Tutorials

Understanding the Almighty Reducer— A beginner-friendly walkthrough of using JavaScript’s reduce method.

Sarah Drasner

What's New in ES2018— Including async iteration, Promise.finally(), and rest/spread properties.

Craig Buckler

▶  Look, No Hands! — Brain Controlled JavaScript— Fun with thought processed interactions using a brain sensor with JavaScript.

Charlie Gerard

▶  Learn to Build a Slack Integration— A demo of Slack’s new developer features, with an introduction to Actions, showing what it enables for developers, and some possible use cases.

Slack sponsor

Submitting HTML Forms using Vue, React, or Hyperapp

Ogundipe Samuel

An Introduction to Sails.js— A Rails-esque MVC framework for Node webapps.

Ahmed Bouchefra

▶  How to Set Up A Windows Dev Environment That Feels Like $HOME— This isn’t JS specific but we’re always hearing of developers trying out Windows lately so this could be helpful.

Sarah Cooley and Tara Raj

▶  How to Code Your Own Discord Bot with Discord.js

Dapper Dino

🔧 Code and Tools

Parcel 1.9 Released with Tree Shaking and 2x Faster Watcher— If you want a fast, easy, zero-config bundler.

Devon Govett

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

Licensed: A CLI for Adding a LICENSE File to Your Projects

Mihir Chaturvedi

collect.js: 91 Convenience Methods for Arrays and Objects— A similar API to Laravel Collections: chunk, flatten, shuffle, firstWhere, etc.

Daniel Eckermann

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

Simon Wep

Math.js: An Extensive Math Library for JavaScript and Node— There’s a CoffeeScript-oriented intro too, if that’s your bag.

Jos de Jong

jeelizWeboji: Realtime JS Face Tracking and Facial Expression Detection

Bourry Xavier

HyperMD: A WYSIWYG Markdown Editor for Browsers— Written in TypeScript. Demo here.

Lv Yang

Vuesax: A Frontend Vue.js Components Framework

Lusaxweb

#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