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

😄 Some Bonus “They're Not JS But You'll Like 'Em” Links

vim.wasm: The Vim Editor, Ported to WebAssembly — Great demo and very fast, too. Here's the code and an explanation of how it works.

Linda_pp

Kotlin on the Server at Khan Academy — Adding another language to a codebase is no small feat, but Khan Academy has found the performance gains of Kotlin, a JVM-based multiplatform language, are more than worth it. A popular item from this week's Web Operations Weekly.

Khan Academy Engineering

Web Architecture 101 — If terms like 'load balancer', 'caching', or CDN are gibberish to you, you might appreciate this simple explanation.

Jonathan Fulton

A 'div' That Looks Different In Each Major Browser — A neat demonstration of how specs don’t guarantee an identical result across browsers. Here’s the CodePen to try it for yourself.

Martijn Cuppens on Twitter