#375 — March 2, 2018

Read on the Web

JavaScript Weekly

#376 — March 9, 2018

Read on the Web

JavaScript Weekly

#377 — March 16, 2018

Read on the Web

#375 — March 2, 2018

Read on the Web

JavaScript Weekly

Don't adjust your sets - we've been tweaking the design.

Yes, JavaScript Weekly is sporting an updated design. We've been testing it on some of our other newsletters (like React Status and Database Weekly) and it's giving us the opportunity to provide more variety and visual interest.

Any feedback or items you want to submit for next week, hit reply, but otherwise enjoy the issue. We'll be trying out a variety of ideas over the coming weeks :-)
— Peter Cooper, editor

webpack 4.0 Released— The popular module and asset bundler is now faster and has new development and production modes with pre-defined settings so you can start quicker too. You might also enjoy a tutorial for using it with Vue.js, a look at the chunk graph improvements, or what the new ‘modes’ do.

Sean T. Larkin

Propel: A Scientific Computing Framework for JS— A NumPy-like framework for mathematical work in JavaScript that can lean on TensorFlow for performance. Works with both Node and in the browser (using WebGL).

Ryan Dahl and Bert Belder

The Future of JavaScript: 2018 and Beyond— What is the state of the JavaScript ecosystem? This whitepaper offers our future-looking analysis and predictions about the latest in JavaScript. We also look back at all the craziness from 2017 and neatly tie it together with a bow. Download now.

Progress sponsor

The Lost Art of the Makefile— It might not be trendy, but GNU Make does a lot of heavy lifting in the open source world and.. you can even use it to build JavaScript projects too.

Jesse Hallett

▶  In The Loop: A Tour of the Event Loop— A 35 minute talk looking at the browser event loop, the thing that orchestrates the main thread of the browser, which includes JS, events, and rendering.

Jake Archibald video

Tracing From JS to the DOM and Back Again with V8— Debugging memory leaks in Chrome has become much easier now that Chrome 66’s DevTools can trace C++ DOM objects and display all reachable DOM objects from JavaScript with their references. In other V8 news, lazy deserialization has reduced V8’s memory consumption by 500KB+ per tab.

Degenbaev, Filippov, et al.

Jobs

Senior Front End Engineer at Plectica (New York, NY)— Come build a beautiful collaborative platform for visual brainstorming & thinking with SVG, WebSockets and all sorts of other fun.

Plectica

Product Engineer— We're looking for a front-end-focused engineer who cares about product design, UX and collaboration to join an exceptional team.

Quip

Find a Job You're Passionate About— Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job.

Vettery

Articles and Tutorials

The Origin Story of ESLint— The tale of how a popular linting tool came to be.

Nicholas C Zakas

How to Create an Accessible Autocomplete Component with Vue.js

Filipa Lacerda

TypeScript - JavaScript with Superpowers?— A very elementary introduction to the benefits of TypeScript.

Indrek Lasn

The Webpack 4.0 Release: What's New?— A quick roundup of the features and improvements.

Prosper Otemuyiwa

Ember's Equivalent of React's Render Props

David Tang

Learn to Build JavaScript Apps with MongoDB in M101JS, MongoDB for Node Developers

mongodb sponsor

🎬 Videos, Screencasts and Talks

▶  WebAssembly: What and What Next?— Two Googlers cover WebAssembly right from the basics up.

Ben Titzer and Andreas Rossberg

▶  JavaScript Pranks— A 5 minute tour of the JavaScript behind a truly annoying Web site.

Feross Aboukhadijeh

🔧 Code and Tools

Speed Measure Plugin: Measure Your webpack Build Speed— See how fast (or not) your plugins are so you can optimize your builds.

Stephen Cook

Pagedraw: A Tool to Turn Sketch Mockups into React Apps

Prepack: A Partial Evaluator and Optimizer for JavaScript

Facebook

vue-cli: A CLI for Faster Vue.js Development

The Vue.js Project

Fix JavaScript Bugs Like a Boss 🛠— Get real-time monitoring, alerting, analytics for JavaScript errors, and worry less about breaking things. Learn more.

ROLLBAR sponsortools

basicScroll: Standalone Parallax Scrolling with CSS Variables— Use dynamically changing CSS variables to animate whatever you want.

Tobias Reich

Flatbush: Fast Static Spatial Index for 2D Points and Rects

Vladimir Agafonkin

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

Q42

Get the Best, Most Complete Collection of Angular UI Controls: Wijmo— Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, & the best data grid.

GrapeCity Wijmo sponsor

Tippy.js: A Lightweight, Vanilla JS Tooltip Library

Prompts: Attractive Interactive Prompts for Node CLIs

Terkel Gjervig Nielsen node

FilePond: A Flexible JS File Uploader with Great UX— It's GPLv3 licensed so take care in where you use it unless you get a commercial license.

Rik Schennink

#376 — March 9, 2018

Read on the Web

JavaScript Weekly

How I Built a Super Fast JS Framework— The creator of Radi.js, a new tiny front-end library, shares why he’s created it when there are already tons of front-end libraries around — performance.

Mārcis Bergmanis

Power Your Apps with Angular UI Components and Spreadsheets— Build complete enterprise web applications with GrapeCity’s dependency-free, Angular JavaScript solutions. Includes Spread’s full-featured Excel-like spreadsheets and Wijmo’s collection of IntelliSense-enabled grids, charts, and input controls.

GrapeCity JavaScript Solutions sponsor

Loading Third-Party JavaScript— A jam-packed article from Google on how to find and fix issues related to loading third-party JS. How do you load third-party scripts efficiently? Learn it all here.

Addy Osmani and Arthur Evans

Beyond React 16: Time Slicing and Suspense API— Last week Dan Abramov gave his ‘Beyond React 16’ talk showing off ideas coming to React in the future, which are reflected upon here.

Prosper Otemuyiwa

Node v8.10.0 (LTS) Released— A significant LTS release for production systems with updates to V8, libuv, npm, Unicode and OpenSSL support. 9.8 is out too. Also, remember we have Node Weekly for each week’s Node news :-)

Gibson Fahnestock

Let’s Build a Custom Vue Router— A thorough walkthrough of building a custom client-side router for Vue when the official one doesn’t quite meet requirements.

Hassan Djirdeh

Jobs

Lead React/Redux Engineer - Remote, SF, or Halifax, Canada— We’re an ambitious startup seeking an experienced front-end engineer to bring our React architecture forward.

Manifold

Frontend Engineer for Leading Open Source Company— Love coding web apps & building reusable high-performance UI components? Help define open source web app UI for large-scale enterprises.

Liferay, Inc.

Find a Job You're Passionate About— Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job.

Vettery

Tutorials

Building a Serverless Real-Time Chat App with AWS AppSync— AppSync is AWS’s fully-managed GraphQL service and interacting with it from JavaScript is pretty straightforward.

Adrian Hall and Ed Lima

What’s New in ES2018?— Lots of code examples in this slidedeck.

Benedikt Meurer and Mathias Bynens slidedeck

10 Tips for JS Debugging Like a Pro at the Console— Recommended by Sarah Drasner this week.

Yotam Kadishay

Preserve Build Integrity & Prevent Problems with Deterministic Builds— The most common thing a customer will say in a support ticket is that their builds are suddenly failing even though “nothing has changed” on their end. This is almost never true.

CircleCI sponsor

The JavaScript Learning Landscape in 2018— Books, podcasts, etc.

Jason Rodriguez

🎬 Videos, Screencasts and Talks

▶  The Fundamentals of Testing Angular Components

Jesse Palmer

▶  Evan You's 'State of Vue.js 2018' Keynote

Vue.js Amsterdam Conference

🔧 Code and Tools

SlimerJS: Script a Headless Firefox Browser from JavaScript

Laurent Jouanneau

Instantly Seeing the Results of Your Code While You Are Writing It

Wallaby.js sponsor

Create Angular Libraries in No Time with 'Schematics'

Netanel Basal

Real-Time Error Monitoring, Alerting, and Analytics for JavaScript 🚀— Report JS errors to Rollbar with full stack trace and diagnostic data.

ROLLBAR sponsor

DoneJS 2.0 Released: A Framework for High-Perf Realtime Webapps

Matthew Phillips

TinyState: A Tiny, Powerful State Management Library for Angular

Sebastian Holstein

Awaity.js: Functional, Lightweight Alternative to Bluebird— Built with async/await in mind.

Asaf Katz

OpenPGPjs 3.0: An Open Source OpenPGP Library

ProtonMail

Vue Tour: Simple, Customizable 'Guided Tour' Plugin for Vue

Pulsar

Workly: Simply Move a Function or Class to a Worker Thread

Preet Shihn

Events

AmsterdamJS Conference 2018 (May 31-June 1)

KnowJS 2018: An Online Workshop with 4 JS Experts— Takes place April 13. Costs money but the teachers are great.

Certified Fresh Events

Seen on Twitter

#377 — March 16, 2018

Read on the Web

JavaScript Weekly

Pell 1.0: A Tiny, Simple WYSIWYG Web Text Editor— No dependencies, ES6, and only 1.38KB minned and gzipped. Play with a demo here.

Jared Reich

A Comprehensive Guide to Learning React in 2018— A classic, interactive ‘from scratch’ tutorial that’s just been upgraded to React 16.3 standards.

Tyler McGinnis

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

TOAST UI Chart: Attractive Charts to Visualize Data— Cross-browser (even supports IE8) and you get bar/column, line, area, bubble, pie, heatmap, bullet, and boxplot charts out of the box as well as combinations of them. Lots of demos here.

NHN Entertainment

Cloudflare Workers: Run JavaScript on Cloudflare— CDNs typically make static assets available at many edge locations, but this next step takes running code to the edge as well, all powered by V8.

Kenton Varda

Take the TC39 Developer Engagement Survey— The ECMAScript standards committee wants to understand how you engage with the official specs and are keen to reach developers not on Twitter. 10 simple questions.

Yulia Startsev (Mozilla) and TC39

Driver.js: 'Drive' Users' Focus Across a Web Page— A no-dependency library for creating ‘tour’-style mechanisms and highlights on a page.

Kamran Ahmed

Awesome Developer Streams: Developers Who Code Live— It’s surprising how much you can learn by watching someone else code and here are 57 to check out - mostly JavaScript developers too.

Tierney Cyren

TypeScript 2.8 RC Released— Conditional types are the headline feature.

Microsoft

npm 5.8.0(-next.0) Released

The npm Blog

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

Frontend Engineer for Leading Open Source Company— Love coding web apps & building reusable high-performance UI components? Help define open source web app UI for large-scale enterprises.

Liferay, Inc.

Find a Job You're Passionate About— Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job.

Vettery

Tutorials and Articles

4 Awesome Things You Can Do with the Vue.js CLI— Working with Vue? The CLI will make your life better.

Brandon Satrom

Things to Consider When Choosing a Database for Your JavaScript App— Not all JSON support is created equal.

MONGODB sponsor

The 4 Layers of SPAs You Need to Know— An attempt to explain modern single page apps (SPAs) by slicing them into views, services, storage, and the domain/model.

Daniel Dughila

Building a Basic Neural Network with Brain.js— A very elementary ‘getting started’ tutorial.

Daniel Simmons

Animating Elements Along SVG Paths with JavaScript

Luis Manuel

How to Develop an Effective Indexing Strategy— Grab your free MongoDB tutorial on optimising indexing strategies from Studio 3T.

Studio 3T sponsor

JavaScript Promises for Dummies— A golden oldie recommended by Chris Heilmann today.

Jecelyn Yeen old-but-gold

Videos, Screencasts and Talks

▶  Structuring JavaScript Projects for Testability

Fun Fun Function

▶  A Gentle 1hr Intro to Express.js and RESTful APIs— Excellent for beginners.

Programming with Mosh

Code and Tools 🔧

Emma: A CLI Tool to Find and Install npm Packages

Matic Zavadlal

Rough.js: Create Graphics with a Hand-Drawn Appearance

Preet Shihn

The Filepond File Upload Library Relicenses to MIT— We linked to this attractive looking file upload control recently when it was GPLv3 licensed. Demo.

Rik Schennik

MobX 4 Released: A Simple State Management Library

Michel Weststrate

There’s a Bug in Your JavaScript Code. Fix It

Sentry sponsor

Mark Text: A Cross-Platform Markdown Editor App— Built with Electron and Vue.

Jocs

#378 — March 23, 2018

Read on the Web

JavaScript Weekly

D3.js 5.0 Released— D3 continues to be a fantastic choice for data visualization with JavaScript. Changes in 5.0 include using promises to load data instead of callbacks, contour plots, and density contours.

Mike Bostock

Lazy Loading Modules with ConditionerJS— Linking JavaScript functionality to DOM elements can become a tedious task. See how ConditionerJS makes progressive enhancement easier in this thorough tutorial.

Smashing Magazine

The Best JavaScript Debugging Tools for 2018— If you work with JavaScript, you’ll know that it doesn’t always play nice. Here we look at the best JavaScript debugging tools you can use to clean up your code and provide great software experiences to your users.

RAYGUN sponsor

▶  A 10 Video Introduction to Functional JavaScript with Ramda— Want to get started with functional programming in JavaScript? Ramda is a more functional alternative to libraries like Lodash, and these brief videos cover the essentials. You may also appreciate Kyle Simpson’s Functional-Light JavaScript if you set off on the functional programming journey.

James Moore

JavaScript vs. TypeScript vs. ReasonML: Pros and Cons— Dr. Axel is becoming a fan of static typing for larger projects and explains the pros and cons of it and how static typing relates to the TypeScript and ReasonML projects.

Dr. Axel Rauschmayer

A Proposal for Package Name Maps for ES Modules— Or how to solve the web’s “bare import specifier” problem.

Domenic Denicola

A TC39 Proposal for Object.fromEntries— It would transform a list of key/value pairs into an object.

TC39 news

How Unsplash Gradually Migrated to TypeScript

Oliver Joseph Ash

💻 Jobs

Engineering Manager— You’ll lead a team in building a product at scale and get the opportunity to manage and mentor while helping shape decisions.

Skillshare

Software Engineer at Fat Lama (London)— Technology and engineering is at the heart of what we do at Fat Lama - help us build the rental marketplace for everything.

Fat Lama

JavaScript Expert? Sign Up for Vettery— Create your profile and we’ll connect you with top companies looking for talented front-end developers.

Vettery

Place your own job listing in a future issue

📘 Tutorials & Tips

Getting Started with the Web MIDI API— Covers the basics of MIDI and the Web MIDI API showing how simple it is to create frontend apps that respond to musical inputs. It’s niche but also neat the Web platform can do this.

Peter Anglea

▶  7 Secret Patterns Vue Consultants Don&'t Want You to Know— Clickbaity talk title, but Chris is both on the Vue core team and a great speaker :-)

Chris Fritz

Learn to Build JavaScript Apps with MongoDB in M101JS, MongoDB for Node Developers— MongoDB University courses are free and give you everything you need to know about MongoDB.

MongoDB sponsor

How to Write Powerful Schemas in JavaScript— An introduction to schm, a library for building model schemas in a functional, composable way.

Diego Haz

Getting Smaller Lodash Bundles with Webpack and Babel— Plus some tips for working with lodash-webpack-plugin.

Nolan Lawson

Elegant Patterns in Modern JavaScript: RORO— RORO stands for Receive an Object, Return an Object.

Bill Sourour

The Ultimate Angular CLI Reference Guide— Create new Angular 2+ apps, scaffold components, run tests, build for production, and more.

Jurgen Van de Moere

▶  Add ESLint and Prettier to VS Code for 'Create React App' Apps

Elijah Manor

Tips for Using ESLint in a Legacy Codebase— Techniques that can help you significantly reduce the number of errors you see.

Sheshbabu Chinnakonda

Free eBook: A Roundup of Managed Kubernetes Platforms

Codeship sponsor

Lookaheads (and Lookbehinds) in JS Regular Expressions

Stefan Judis

Unblocking Clipboard Access in Chrome 66+— The Async Clipboard API supersedes the document.execCommand approach.

Jason Miller

Building Office 365/SharePoint Applications with Aurelia

Magnus Danielson

🔧 Code and Tools

GPU-Accelerated Neural Networks in JavaScript— A look at four libraries providing this type of functionality.

Sebastian Kwiatkowski

Get the Best, Most Complete Collection of Angular UI Controls: Wijmo— Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, and the best data grid.

GrapeCity Wijmo sponsor

better-sqlite3: A Simple, Fast SQLite3 Library for Node

Joshua Wise

ngx-datatable: A Feature-Rich Data-Table Component for Angular— No external dependencies. Demos here.

Swimlane

vue-content-loader: SVG-based 'Loading Placeholder' Component— It’s a port of ReactContentLoader.

EGOIST

DrawerJS: A Customizable HTML Canvas Drawing Tool— Live demo.

Carsten Schäfer

#379 — March 30, 2018

Read on the Web

JavaScript Weekly

What's New with V8 v6.6— Due to be released with Chrome 66 in a few weeks, the latest version of the V8 JavaScript engine changes the behavior of Function.prototype.toString(), adds trimStart() and trimEnd() methods to strings, has improved code caching, major async and array performance improvements, and more.

The V8 Team

ES Modules: A Cartoon Deep-Dive— ES modules bring an official, standardized module system to JavaScript and once Firefox 60 is out (soon) it’ll be supported in all major browsers. But what do they entail?

Mozilla Hacks

New Course: From Fundamentals to Functional JavaScript, v2 😀— Learn the techniques you need to write professional, modern JavaScript. This course starts with the basics and takes you to mastering key functional methods like map, reduce and filter ...plus promises and ES6+ asynchronous JavaScript.

Frontend Masters sponsor

Key Lessons from Google's JavaScript Style Guide— An attempt to extract some lessons from Google’s JavaScript style guide. These aren’t hard and fast rules but merely suggestions to make life easier.

Daniel Simmons

TensorFlow.js: WebGL-Accelerated Machine Learning in the Browser— If you’ve done any machine learning work, Tensorflow will have been on your radar and now it’s easily used from the browser too. Lots of demos and examples here.

TensorFlow

TypeScript 2.8 Released— The typed JavaScript superset takes another step forward with support for conditional types, improved organization of imports in VS Code, and improved JSX support.

Microsoft

Redux, It's Not Dead Yet— One of Redux’s maintainers addresses recent ‘confusion, claims, and misinformation’ over Redux’s role and future.

Mark Erikson

The React Core Team's Update on the Development of Async Rendering— A thorough update on what they’ve learnt while building React’s newest asynchronous rendering features and what you can do to be prepared. If you like this, check out our React newsletter.

Brian Vaughn

The Status of JS Libraries and Frameworks: 2018 and Beyond— Thoughts, data and updates on React, Vue, Angular, Polymer, TypeScript and jQuery.

Jae Sung Park

Anatomy of JavaScript Source Maps 📃— Ever wondered how JavaScript source maps work? Take a deep dive into the inner workings of source maps.

Bugsnag sponsor

💻 Jobs

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

Sticker Mule

Senior Software Engineer— Join our small team of engineers to make Slate.com (a digital magazine since 1996 with 30M hits per month) faster. Vue & Node.

Slate Magazine

JavaScript Expert? Sign Up for Vettery— Create your profile and we’ll connect you with top companies looking for talented front-end developers.

Vettery

📘 Tutorials

Using Web Workers for Safe, Concurrent JavaScript

Bruce Wilson

Using Chrome's New CSS Typed Object Model— A new feature that brings types, methods, and a flexible object model to working with CSS values from JavaScript.

Eric Bidelman

A Comprehensive Guide to JavaScript Design Patterns

Marko Misura

Angular 2+ Authentication: Protecting Private Content— The latest in a series of posts on building a CRUD app with Angular CLI.

Jurgen Van de Moere

How To Make Netflix-Like Swipers in Vue

Chris Nwamba

An Intro to Building Progressive Web Apps with Vue.js

Brandon Satrom

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

JavaScript in 14 Minutes— A gentle, interactive introduction to JavaScript. May not be useful to you but may be worth sharing with newcomers to programming or JS :-)

Jeremy Thomas

🔧 Code and Tools

Axe 3.0 Released: The Automated Accessibility Testing Library

Marcy Sutton

React 16.3.0 Released— More in this week’s React Status.

Brian Vaughn

Fix Production Bugs in Seconds with Sentry

Sentry sponsor

Task Easy: A Simple Priority Queue for Promises

Canaan Seaton

Nerv: A Fast IE8- and React 16-Compatible React Alternative

Li Weitao

11 JavaScript Machine Learning Libraries To Consider

Jonathan Saring

HotKeys.js: A Robust Library for Capturing Keyboard Input

Kenny Wong

#380 — April 6, 2018

Read on the Web

JavaScript Weekly

Examples of Everything New in ES2016, 2017, and 2018— This is a worthwhile roundup of all the new bits and pieces in recent ECMAScript specs, but note that SharedBufferArray support has been disabled in most runtimes due to Spectre, so give that a miss.

Raja Rao DV

Martin Fowler Announces 2nd Edition of "Refactoring"; Switches Book from Java to JavaScript— This is a big deal given the weight this book has in the field.

Martin Fowler

JavaScript to Rust and Back Again: A wasm-bindgen Tale— wasm-bindgen enables interoperability between WebAssembly modules and JavaScript.

Alex Crichton

Scrivito: the World’s First JS CMS Solely Based on ReactJS— Scrivito is a user friendly, secure and serverless JavaScript CMS. Due to client-side rendering, it is 100% maintenance free and combines WYSIWYG editing with maximum flexibility for developers. Pricing starts at $4.99 - get a 30 days free trial now.

Scrivito sponsor

▶  Learn RxJS in 60 Minutes for Beginners— RxJS is used for reactive programming using observable streams and this is a great ‘from scratch’ crash course.

Gary Simon

Understanding JavaScript Proxies— Uses an examination of Sindre Sorhus’ on-change library to dig into how proxies, a feature introduced in ES6, work.

Arfat Salman

A Beginner’s Guide to JavaScript Geolocation Tracking— A 4 part series from PubNub brought together in one place walking through bringing the Google Maps JavaScript API together with PubNub’s real-time services.

Joe Hanson

webpack 4.5.0 Released

webpack on Twitter

What's New in Aurelia? Aurelia's 2018 Q1 Report— Aurelia is also now included in the RealWorld project.

Rob Eisenberg

💻 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

Mobile Developer - Milan, Italy— MotorK is looking for passionate Junior and Senior mobile devs to join the team. Great place to work and career opportunities.

MotorK

No Search, No Spam, No Hassle— SW engineer positions in SF and NY personalized to you. Discreetly create a profile on Woo.io today.

woo.io

📘 Tutorials

Hit The Ground Running with Vue.js and Firestore— Firestore is a new data storage approach from Google Firebase.

Lukas Van Driel

Learn Kotlin in 2 Days— $99 Introductory, online rate. In-person rate available to join us at the Ranch.

Big Nerd Ranch sponsor

Tips to Make Your webpack Bundle Smaller When Using JS Libraries

Google

Dr. Axel's JavaScript Array Cheatsheet

Dr. Axel Rauschmayer

[1] + [2] - [3] === 9? A Look Behind JavaScript Coercion

Marcin Wanago

Making a Statically-Linked, Single-File Web App with React and Rust— Experimental but neat.

Anders Pitman

A Simple Guide to Taking a Web Page Offline (with Service Workers)

Adeyinka Adegbenro

A Killer Vue.js Blog Demo: Launch in 2 Hours Tops

Snipcart sponsor

Write Better JavaScript With Webpack

DJ Walker

Using ES6 Collections: Map, Set, WeakMap, and WeakSet

Kyle Pennell

A Practical Guide to Using and Creating Angular Directives

Claudio Ribeiro

🔧 Code and Tools

Fly Edge Apps: Running JS at the Edge— Imagine a CDN but more dynamic and with more control.

Fly.io

gron: A Tool That Makes JSON 'greppable'— It’s written in Go (yes, we have the newsletter) but may prove handy to JS developers too.

Tom Hudson

One API for All the Tools— Try Segment and integrate 200+ tools with the flip of a switch.

Segment sponsor

An ESLint Plugin for JSON i18n Translation Files

GoDaddy Open Source

Sails.js 1.0: A Rails-esque MVC Framework for Node

The Sails Company

Glide.js: A Dependency-Free ES6 Slider and Carousel— “Designed to slide. No less, no more” says the creator.

Jędrzej Chałubek

vue-testing-library: A 'Low Surface Area' Testing Library for Vue— Inspired by Kent C Dodds’ react-testing-library.

Daniel Cook

casex: A Function for Transforming Word Casings— Based on a pattern like ‘ca_se’ or ‘CaSe’.

Pedro Moreira

Nothing: A Chainable, Callable Mock Object Which Always Returns Itself

Vladimir Simonov

#381 — April 13, 2018

Read on the Web

JavaScript Weekly

The Front-End Developer Handbook 2018 Edition— An online guide that outlines and discusses the practice of front-end engineering, how to learn it and what tools are used in the practice, as of 2018.

Cody Lindley

Write Your Own Promise Library from Scratch— Async/await is based on promises, so understanding this popular async primitive is a must.

Valeri Karpov

Understanding TypeScript’s Type Notation— Dr. Axel presents a handy guide to the static type notation used in TypeScript, the optionally typed JavaScript superset, and promises you’ll understand an initially cryptic code example by the end of his post.

Dr. Axel Rauschmayer

Improve the Quality of Your JavaScript Projects with Codacy— 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

Optimizing React: The Virtual DOM Explained— A beginner-friendly intro to React’s internals that attempts to demystify JSX and explain how React makes rendering decisions.

Alexey Ivanov and Andy Barnov

How to Escape async/await 'Hell'— Take care you don’t escape from ‘callback hell’ only to fall into bad practices using async/await instead.

Aditya Agarwal

Why React Needs Yet Another Animation Library— react-spring is a set of physics-based UI animation ‘building blocks’. GitHub repo.

Paul Henschel

Demo: Object Detection in the Browser with TensorFlow.js— Take care as a 40MB machine learning model gets downloaded, but this is a neat browser-based demo of TensorFlow.js that leans on YOLO for object recognition.

ModelDepot

What's New in Angular 6?— Angular 6 RC4 is out with the final Angular 6 due any moment, but what’s new?

Phani Kiran G

AngularConnect 2018 - Europe’s Largest Angular Conference— Join us to hear from 40+ speakers including the core Angular team. Our CFP is open & tickets available now.

AngularConnect sponsor

📖 Articles and Tutorials

Abusing Proxies for DSLs— Be sure to read the disclaimer, but it’s interesting stuff to think about.

Mike Cluck

List Processing with map, filter, and reduce

Peleke Sengstacke

A Practical Guide to Angular Elements

Nitay Neeman

Learn JavaScript Free for 10 Days— Writing front-end code? In need of back-end server skills? Start a 10-day trial to sharpen your dev skills.

Pluralsight sponsor

How to Build a Server-Side Rendered App with Preact, Unistore and Preact Router— Preact is a lighter alternative to React but with the same API.

Yomi Eluwande

Using Async Iteration Natively in Node— How async iteration over streams will work in Node 10.x.

Dr. Axel Rauschmayer

▶  Vue in Motion— A 35 minute talk on using UI animation in Vue apps.

Rachel Nabors

Jobs

UX/UI Designers - Milan, Italy— MotorK is looking for passionate Junior and Senior UX/UI Designers to join the team. Great place to work and career opportunities.

MotorK

Senior Front-End Engineer, React/Redux— At Manifold, we’re creating the world’s largest independent cloud marketplace. Made by developers who care, for developers who care.

Manifold

No Search, No Spam, No Hassle— SW Engineers in NY & SF: Get opportunities personalized to you. Discreetly create a profile on Woo.io today.

Woo.io

🔧 Code and Tools

Redux 4.0.0-rc1 Released— The final 4.0 is due next week but you can experiment now.

Tim Dorr

The Microsoft JavaScript API Browser— Bill itself as your ‘one-stop shop’ for all of Microsoft’s JavaScript-based APIs (e.g. for Azure and SharePoint).

Microsoft

Cytoscape.js: Graph/Network Visualization and Analysis Library

Cytoscape Consortium

shallow-render: Angular 5 Testing Made Easy with Shallow Rendering and Easy Mocking

Brandon Domingue

Build a Simple Shopping Cart based on MongoDB, Express, Angular, and Node

mongodb sponsor

JavaScript State Machine: A Finite State Machine Library

Jake Gordon

virtual-audio-graph: Declaratively Manipulate the Web Audio API— The documentation and examples here may help you understand this.

Benji Hall

🐦 Seen on Twitter

#382 — April 20, 2018

Read on the Web

JS Weekly

Designing (Very) Large JavaScript Applications— A written version of a talk given by Google’s Malte Ubl at JSConf Australia that took a high level look at modularity, lazy loading code, and similar concepts. Video, if you prefer that.

Malte Ubl

VuePress: A Vue-Powered Static Site Generator— Enjoy the dev experience of using Vue and webpack, use Vue components in Markdown, and develop custom themes with Vue.

Evan You

webpack 4.6 Released with Prefetch/Preload Support— Preloading can bring down the number of round-trips needed to load a page, while prefetching can speed up future navigations. Here’s how it works. The release itself is here.

Tobias Koppers

New Course: From Fundamentals to Functional JavaScript, v2 😀— Learn the techniques you need to write professional, modern JavaScript. This course starts with the basics and takes you to mastering key functional methods like map, reduce and filter ...plus promises and ES6+ asynchronous JavaScript.

Frontend Masters sponsor

Introduction to the Stimulus Framework— Stimulus is a framework from Basecamp that augments your HTML using controllers.

Ilya Bodrov

What You Can Expect From Node.js 10— The first release of Node 10 is due next Tuesday (April 24th) and will go LTS in October, but what’s new? HTTP/2 support, organized coded errors, and more.

Tierney Cyren

Hyper 2: A Terminal Built on Web Technologies— Hyper takes a few steps forward with a much faster rendering engine, an online plugin/theme catalog, and improved hyperlink support. GitHub repo.

ZEIT

Is It Time to Give Up on the Name 'JavaScript'?— Oracle’s alleged cease and desist order over an iOS app's use of "JavaScript" in its title highlights an issue with the language’s nomenclature.

James Sanders

Grasshopper: A Mobile JS Training App for Beginners— One to share with anyone you know who’d like a quick, fun way to learn some JavaScript on their phone (Android or iOS) - note that it’s very entry level.

Area 120

You're Invited to Slack’s Developer Conference, Spec, on May 22

Slack sponsor

The Future of Vue.js in 5 Minutes

Gregg Pollack

💻 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 Software Engineer (NYC)— Hospitality/tech platform focused on building help into our homes. React, React Native, Node, TypeScript, PostgreSQL.

Hello Alfred

Are You an Engineer in NY or SF? Know Your Worth, Check Out Woo.io— Create your discreet profile today and receive opportunities from top US companies who can pay you what you’re worth.

Woo.io

📘 Tutorials

How to Get Started with Immutable.js

William Woodhead

Extending Native DOM Elements with Web Components

Leon Revill

Scroll to the Future: Scrolling on the Modern Web— Affecting scrolling with the latest CSS and JS features.

Anna Selezniova and Andy Barnov

The Future of Operations: 6 Shifts Worth Noting— DevOps has grown. Here are six patterns that are shifting the scope of software delivery automation.

CircleCI sponsor

Learn to Visualize Data with D3 in 10 Interactive Tutorials

Per Harald Borgen

▶  Visual Studio Code Can Do That?— VS Code often surveys as the most popular editor in the JS space, so this collection of videos may be handy.

Burke Holland and Sarah Drasner

Traversing the DOM with JavaScript

Zell Liew

🔧 Code and Tools

Redux 4.0 Released: The Predictable State Container

Text Mask: Text Input Masking, with Wrappers for Frameworks— e.g. for phone, date, currency, emails, and similar data types.

Text Mask

Slugify: Simply Turns Strings into URL/Filename-Friendly 'Slugs'— e.g. ‘I ♥ Dogs’ becomes ‘i-love-dogs’

Sindre Sorhus

Vekta: A JavaScript Vector Type with GLSL-Inspired 'Swizzling'— ‘Swizzling’ is a way to quickly rearrange vector elements.

Popmotion

Fix Production Bugs in Seconds with Sentry— Relying on users to report bugs? 500K devs see unminified code right in Sentry’s stack trace with source maps.

Sentry sponsor

Underscore.js 1.9.0 Released— Here’s a blast from the past, 3 years after its last release.

Ember 3.1 and 3.2 Beta Released

Melanie Sumner and Kenneth Larsen

slate-md-editor: A Markdown Editor Built on Top of Slate

Maximilian Stoiber

Mailtrain: A Self-Hosted Newsletter Sending App— If you want a self-hosted Mailchimp-esque system, say.

Mailtrain

pico.js: Client-Side Face Detection with JavaScript— GitHub repo.

tehnokv

#383 — April 27, 2018

Read on the Web

JavaScript Weekly

TUI Calendar: An Attractive, Full Featured Calendar Control— From the creators of TUI Chart comes TUI Calendar, a highly customizable JavaScript calendar widget that supports numerous view types (weekly, monthly, etc.), dragging and resizing of schedule items, and is basically like your own Google Calendar in a box. MIT licensed too.

NHN Entertainment

Node 10 Released: Node Weekly's Feature Roundup— Our sister newsletter Node Weekly featured this week’s Node 10 release in full, including a bulletpoint rundown of new features with useful links. In short: v8 6.6, N-API goes mainstream, OpenSSL 1.1, native async iteration, new regex features..

Node Weekly

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

Native-Like Animations for Page Transitions on the Web— A practical introduction to creating silky smooth, super slick transitions of entire pages from one layout to another, built around Vue.js. Live demo here.

Sarah Drasner

A Proposal for Adding Pattern Matching to ECMAScript— It’s currently at stage 0, but see what you think.

Ecma TC39

The New 'npm' CLI: A Year in Review (Or 'What You May Have Missed')— An easy to follow roundup of new npm features since 5.0 was released, including npx and npm ci. It’s worth brushing up on if you haven’t done so recently. There’s also a post about npm’s future (npm 7, specifically).

The npm Blog

Give Parcel a Try, You May Like It— Parcel suits many straightforward situations really well with minimal fuss, but webpack is more flexible with a vast ecosystem.

Michael Sholty

Writing WebAssembly By Hand— This is low level stuff but a really enjoyable dig about.

Colin Eberhardt

💻 Jobs

Senior Software Engineer (NYC)— Hospitality/tech platform focused on building help into our homes. React, React Native, Node, TypeScript, PostgreSQL.

Hello Alfred

Front-End Developer at Viget (Boulder, CO / Durham, NC / Washington, DC Metro)— Collaborate with the best to build complex interfaces for everything from IOT products to big brand websites. Viget == variety!

Viget

Are You an Engineer in NY or SF? Know Your Worth, Check Out Woo.io— Create your discreet profile today and receive opportunities from top US companies who can pay you what you’re worth.

Woo.io

📘 Tutorials and Opinions

A Beginner’s Guide to webpack 4 and Module Bundling— A beginner-friendly Webpack 4 tutorial.

Mark Brown

Gooact: Build a 'React' in 160 Lines of JavaScript— Learn by doing with this walkthrough of creating a simple React-a-like in a modest amount of code.

Paul Marlow

▶  Iterators in JavaScript— New FunFunFunction video about iterators in JavaScript, or how to iterate over anything with the for-of loop.

Wallaby.js sponsor

Choosing Cameras in JavaScript with the mediaDevices API

Phil Nash

How to Build a Vue.js App That Uses Axios and Vuex— Axios for the async HTTP requests and Vuex as the data store.

Siegfried Grimbeek

Functional Programming with Object Arrays— How to use map, filter, and reduce to manipulate arrays of objects, using techniques borrowed from functional programming.

Ed Charbeneau

A Complete Introduction to Async Functions and ES6 Modules in Node

David Herron

Strategy: Use TensorFlow.js in the Browser to Reduce Server Costs?

High Scalability

Last 2 Versions Harmful (for babel-preset-env)— babel-preset-env lets Babel target the browsers of your choice, but don’t just blindly specify the last 2 versions..

Jamie Builds

eBook: Efficient Project Management for Small Engineering Teams— Learn how to build trust, buy-in, engagement, and professionalism with your engineers.

Codeship sponsor

🔧 Code and Tools

npm@6 Announced: Another Major Update to npm— Up to 17x faster than npm a year ago and focused on ‘security first’.

The npm Blog

A Tool to Create Personalized, Optimized webpack 4 Configurations

Jakob Lind

Storybook 3.4 Released: The UI Component Builder— Now supports React, React Native, Vue, Angular and Polymer.

Michael Shilman

Fix Production Bugs in Seconds with Sentry

Sentry sponsor

Tone.js: Create Interactive Music in the Browser— Advanced scheduling, synths and effects, and intuitive musical abstractions.

Yotam Mann

Day.js: A Fast 2KB Alternative to Moment.js (with compatible API)— Elegant date/time manipulation and parsing with the tradeoff being around timezones and locales..

iamkun

CKEditor 5 v10 Released: A Powerful WYSIWYG Editor Framework— The first stable release of CKEditor 5. Now fully GPL 2+ licensed.

Piotr Koszuliński

TypeORM 0.2: A Powerful ORM for TypeScript and JavaScript— Supports Active Record and Data Mapper patterns and many databases.

Umed Khudoiberdiev node

And over on Reddit..

jQuery's 'data' Method Goes Haywire for People Called 'Infinity'— This is one of those “oh, weird!” items. Basically jQuery’s data method can see the string ‘Infinity’ and convert it to a number. Even more intriguingly, Paul Irish stepped in to take the blame :-) We love you Paul!

Reddit

#384 — May the 4th Be With You

Read on the Web

JavaScript Weekly

Angular 6.0 Released— A major release focused on Angular’s toolchain (particularly Angular CLI) and developer experience than on the framework itself. Angular Elements also allows you to bootstrap components within an existing app by registering them as Custom Elements. Want help in upgrading to 6 from an earlier version? Use the Angular Update Guide.

Stephen Fluin

BigInt: Arbitrary-Precision Integers in JavaScript— A look at a new numeric primitive to represent integers with arbitrary precision that’s already available in V8 6.7 and Chrome 67. You may also enjoy the story behind implementing them in V8

Mathias Bynens

Fix Production Bugs in Seconds with Sentry— Relying on users to report errors? Use Sentry to see unminified code right in the stack trace with source maps. Cut time to resolution from 5 hours to 5 minutes. Sentry is 100% open source and loved by 500K developers. Sign up for free.

Sentry sponsor

Dojo 2.0: A Step Forward for an Early JS Framework— Originally known as the Dojo Toolkit, Dojo pioneered a lot of concepts we now take for granted. Dojo 2 brings modern standards to the framework such as a reactive, virtual DOM-based widget system, Web Components support, and CLI tooling.

The JS Foundation

Is ServiceWorker Ready? (Yes.)— Earlier this week, Edge became the final popular browser to support Service Workers, and this page provides a handy roundup of how browser support varies.

Jake Archibald

ow: Function Argument Validation for Humans— Define constraints for arguments with a fluent API (e.g. ow(input, ow.string.minLength(5))) and get nice error messages on failure.

Sindre Sorhus and Sam Verschueren

Angular Attack: A 48-Hour Online Angular Hackathon (May 12-13)

Angular Attack

Ember.js's 2018 Roadmap: A Call for Blog Posts

Katie Gengler

💻 Jobs

Senior Software Engineer (NYC)— Hospitality/tech platform focused on building help into our homes. React, React Native, Node, TypeScript, PostgreSQL.

Hello Alfred

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

Open to a New Job? Sign Up for Vettery— Top developers can get 5+ interview requests during their first week on Vettery.

Vettery

📘 Tutorials

Extracting Loop Functionality (via Callbacks and Generators)

Dr. Axel Rauschmayer

A Guide to Code Coverage, Part 1: Code Coverage Explained— Code coverage is a way of using analytics to get an idea of how well an application has been tested...

Codacy sponsor

A Complete React with Apollo and GraphQL Tutorial

Robin Wieruch

A Guide to JavaScript Regular Expressions— A nice run-through of the main features, with examples.

Flavio Copes

Building A Serverless Contact Form For Your Static Site

Smashing Magazine

Capture and Report JavaScript Errors with window.onerror

Ben Vinegar

Learn How to Create PWAs from Scratch with Preact

Bleeding Edge Press sponsor

Accessing the Clipboard Using the Async Clipboard API— Chrome 66+ only for now.

Alligator

An Easy to Understand Webpack 4+ Configuration File with Comments

Timur Catakli

Parallel Programming in JavaScript

Uday Hiwarale

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

Azure sponsor

🔧 Code and Tools

Proton Native: Built Desktop Apps using React Native Syntax— Think React Native, but for building desktop applications instead of mobile.

Gustav Hansen

Selection: A Library to Enable Visual DOM Selection— For example, if you want users to be able to drag a box around various elements they want to select. Supports touch devices too.

Simon Reinisch

NGXS 3.0: A State Management Library for Angular

Austin McDaniel

Web Audio API DSP Playground— This is a lot of fun to noodle with, though AudioWorklet support limits it to Chrome for now.

Arthur Carabott

Impact (the HTML5 Game Engine) Open Sourced— Anyone building HTML5 games a few years ago will have heard of this popular game engine. It was a paid-for product but has just been MIT licensed.

Dominic Szablewski

#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