Industry News

#516 — November 27, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Flash Animations Live Forever at the Internet Archive — I know that many readers built Flash powered sites and used JavaScript’s ActionScript cousin before coming to JavaScript. If so, this may be a walk down memory lane. The Internet archive are now archiving and emulating Flash animations (using Ruffle, a Rust powered Flash emulator) in the browser thanks to WebAssembly.

Jason Scott

🎁  Some Black Friday Things We Found for JavaScript Developers — Rather than clutter up the newsletter with the various offers going on, we’ve collected together all the ones we’ve found (or from people we know) and put them on one page 😄 Enjoy!

Superhighway

▶  How to Build a React Form Without the Hassle — Building React forms from scratch can be messy. How do you deal with form validation or styling, for example? An efficient and easier way is to use the React form library in KendoReact, a professional UI component library. Learn more in the video.

Progress KendoReact sponsor

TypeScript Performance Tips — This wiki page has been around a while but blew up on social media this week. Its original author stresses the points covered are guidance rather than indisputable fact, and many of the tips improve other forms of performance than just execution speed.

Microsoft

TypeScriptToLua: Write Lua with TypeScript — Lua is embedded in all sorts of places (games, Redis, NGINX..) so being able to write JavaScript and have it converted could open up some extra opportunities.

TypeScriptToLua Contributors

• 
  Electron is often criticized for its weight, but the creator of an SVG animation tool has written a love letter to it because of how it makes his side business possible.




• TypeScript 4.1 came out last week, and Tomek Sułkowski is particularly excited for what it means for his Tailwind CSS productivity ;-)



• Henri Helvetica celebrates the 25th anniversary of the IMG tag with links to a collection of talks on modern Web image formats and tooling.

📚 Tutorials, Opinions and Stories

Boop! A Whimsical Twist on Hover Transitions — We love a bit of whimsy and this is a fantastic tutorial (aimed at intermediate React developers) for creating UI elements with a pleasant, animated feel.

Josh W Comeau

Optimizing Your Pages for the Back/Forward Cache — Firefox and Safari cache the state of entire pages (rather than just the underlying assets) so if you go back or forward, pages can be restored instantly. Chrome is gradually adopting similar features and there are some things you should take into account.

Philip Walton (Google)

Use console.log() Like a Pro — I can already hear people arguing pros don’t use console.log, but the polls usually say otherwise ;-) Nonetheless, some nicely demonstrated tips here.

Marko Denic

Stream Announced the Public v2.0 Availability of Their React Native SDK — The React Native SDK is now rewritten in TypeScript to ensure type safety for easier-to-read code and debugging.

Stream sponsor

What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps — A good walkthrough on the differences between SSR and static generation and the basics of building a statically rendered site using Next.js.

Colby Fayock

How I Built and Deployed a Fun Serverless Machine Learning App — A thorough examination, including code examples, of how a developer built a complete and fun image filter app with React, JavaScript, and got it running on Netlify and S3.

Ahmed Besbes

Adding Video to Your App with Vime.js — Vime.js is a modern framework-agnostic media player that can support services like YouTube and Vimeo.

Lawrence Oputa

▶  Automating the YouTube Upload Process Using Node — OK, most of us probably don't need to do this, but I appreciated how the creator walked through designing the feature. Definitely a tight screencast at only 10 minutes.

QuanticDev

OpenTelemetry 101 Technical Guide

Lightstep sponsor

▶  React, jQuery, Vue: What's Your Favorite Flavor of Vanilla JS?

The Stack Overflow Podcast podcast

How to Authenticate Django REST Framework API Calls from a Vue.js Client App

List.js 2.3.0: Add Search, Sort, Filters, and More to Tables and Lists — A long standing library with no dependencies that lets you give a bit more dynamism to HTML elements (though lists and tables are the obvious candidates) by adding search, sort, and filter features. Example.

Jonny Strömberg

Limited-Time Sale: 25% off Wallaby.js (First Time in 6 Years) and 50% off Quokka.js — Breakpoints and console.log is the past, real-time feedback without leaving your editor is the future.

Wallaby.js sponsor

uvu: A Fast and Lightweight Test Runner — Aimed at both Node and the browser, uvu is for anyone who likes things light. The output is nice too and as of this week’s 0.5.0 release, it has native ES module support too.

Luke Edwards

reading-time: Medium-Like Reading Time Estimation — Feed it some text and it’ll give you some basic estimates (e.g. ‘7 min read’).

Nicolas Gryman

vue-dock-menu: A Dockable Vue.js Menu Bar — Certainly an interesting UI concept here. It’s a menu bar, until you drag it to be a sidebar!

Prabhu Murthy

Zettlr: A Modern Markdown Editor — A rather attractive editor. Bear in mind it’s GPL licensed if you want to integrate it anywhere, but you may find it useful just as a personal editor.

Zettlr

web-ext: Command Line Tool to Help Build, Run, and Test Web Extensions

Mozilla

Reactochart: Good Looking Chart Components from Spotify

RxJS Ninja Template Library: A Starter Project for Building TypeScript Libaries with the NX Monorepo Approach

💻 Jobs

Engineering Manager (San Francisco) — Familiar with current web application frameworks? Got a solid understanding of agile methodologies? Join us and help lead a team, as we build the future of software engineer hiring.

Triplebyte

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

#515 — November 20, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

TypeScript 4.1 Released — The ever popular ‘JavaScript with types’ takes more steps forward with template literal types, key remapping in mapped types, recursive conditional types, and support for React 17’s upcoming jsx and jsxs factory functions. If you’re a Create React App user though, don’t rush to upgrade just yet as some problems have been reported.

Daniel Rosenwasser (Microsoft)

A Tale of Going from JavaScript to WebAssembly — A developer of a ‘ultra resolution’ storytelling platform tells the tale of upgrading their Web client’s performance by moving from a pure JavaScript approach to one turbocharged with WebAssembly. There’s a lot to learn here.

Marcel Duin

Monitor Frontend Performance With User-Centric Metrics — Traditional metrics like page load aren’t enough to guarantee that you're providing a solid user experience. Learn to track interactivity metrics like “firstInteraction” so you can build for better impact, and keep users coming back.

New Relic sponsor

Prettier 2.2 Released — The popular opinionated code formatter gains TypeScript 4.1 support, comes as ES modules so you can use it directly within the browser, and supports two new JavaScript parsers: espress and meriyah.

Sosuke Suzuki

Electron 11 Released with Experimental Apple Silicon Support — The popular cross platform desktop app environment upgrades its dependencies across the board (hi Chromium 87!) and begins to take steps into the Darwin arm64 world.

GitHub / OpenJS Foundation

📚 Tutorials, Opinions and Stories

The Case for Weak Dependencies in JS — If you’re using ES modules and want to check if one is present before using it in some optional way, what do you do? Lea explains why this would be useful and shares some ideas with how it could be implemented.

Lea Verou

The Most Accurate Way to Schedule a Function in the Browser — A detailed analysis of three JavaScript timeout strategies and how they perform in thousands of web contexts. A bit of a micro-optimization for sure, but it’s interesting to dig into the weeds like this.

Benoit Ruiz

10 React Security Best Practices — A checklist to help you and your team find and fix security issues in your React applications.

Snyk sponsor

Importing React Through the Ages — Kent looks at the wide variety of ways you can import React now and why he prefers a specific one.

Kent C. Dodds

Creating WebGL Effects with CurtainsJS — A way to add neat WebGL effects to <image> and <video> elements of an already “completed” web page.

Zach Saucier

What’s New In Vue 3? — Vue 3 has already been out for two months, but if you’ve not tried it out or just want to see some practical examples of its changes, this is for you.

Timi Omoyeni

A Super Simple Start to Firebase Functions — I find Google’s cloud services hard to navigate at the best of times so this sort of introduction is always much welcomed.

Kent C Dodds

Introduction to Fullstack, Type-Safe GraphQL — This tutorial teaches you how to build from scratch an entirely type-safe, fullstack web app, using GraphQL with a database attached.

Prisma sponsor

The Difference Between Event Handlers and addEventListener — Let’s say you have a button element. You can assign a function to button.onclick to catch click events or use button.addEventListener("click", ...) – how do they differ?

Twan Mulder beginner

Integrating Cobol(!) with JavaScript — Run COBOL applications and modify them with JavaScript on GraalVM. Not likely to be something many of you will want or need to do, but it’s interesting!

Christoph Schobesberger

We Chose Ember in 2015 and It's Still A Good Decision in 2020

Tomek Nieżurawski

Building Modern Native Add-ons for Node in 2020

Wu, Schulhof, Schlight, Eady, Dawson, and Del Gobbo

Angular CLI: Three Options You Didn't Know About the Component Schematic

Amadou Sall

🛠 Code & Tools

How Skypack Lets You Use npm Packages on CodePen — I’m a huge fan of CodePen for throwing together quick Web and JavaScript experiments, but loading dependencies has always been a bit old-school. No more. Skypack and ES6 imports now let you bring in whatever npm packages you need.

CodePen Blog

jose: Universal 'JSON Web Almost Everything' — Did you know there were so many “JSON Web” specs? JSON Web Signature, JSON Web Tokens, JSON Web Encryption, and more. This library aims to tackle most of them in both Node and browser. JWA, JWS, JWE, JWT, JWK and more are here.

Filip Skokan

Momoa JSON: A JSON Parser, Tokenizer, Traverser, and Printer — Useful for a more fine-grained approach to parsing JSON data that’s not covered by JSON.parse()

Nicholas C. Zakas

Building the Best Web Gallery, and Why the Heck It Was So Hard

Wix Engineering sponsor

A One Line Function to Generate a Unique String ID — For when a UUID is overkill.

Simon Høiberg

Harold: A CLI Tool That Compares Frontend Project Bundles in Size — This tool makes it easier to compare bundle sizes by taking snapshots that you can then review to manage how a project’s size is changing.

FunBox

Immer 8.0: The Popular Immutable State Library

Cosha 1.1: Add Colorful Shadows to Web Images

VeeValidate: Template Based Validation for Vue.js

vue-use-infinite-scroll: A Vue Composition Function to Make Infinite Scroll Simple

Ditox: 'Detoxed' Dependency Injection for JS, TypeScript and Flow

💻 Jobs

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

🎵 A brief musical aside..

Hit play to start the beat and then jam along on the blues guitar to express yourself. This is a fantastic little CodePen demo (written in JavaScript, naturally) and should put a smile on your face 😁 Thanks to Greg Hovanesyan for this!

#514 — November 13, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

10 Insights From Adopting TypeScript At Scale — A fantastic writeup (from a TC39 member, no less) of how Bloomberg (the financial media company) adopted TypeScript and now has 2,000 full-time JavaScript engineers. Curiously we also learn that Bloomberg also have their own JavaScript runtime built around the V8 engine.

Rob Palmer (TC39 and Bloomberg)

A Way to Look Up JavaScript Operators — Quick, name as many operators as you can! Got to about ten or so? This site covers about fifty with a quick explanation of each (well, except the bitwise ones).

Josh W Comeau

The Most Complete Spreadsheet Solution for JavaScript Apps — New Release: Fast enterprise JavaScript spreadsheet for delivering true spreadsheet experiences. Learn more about SpreadJS v14 including native Excel I/O, Calc Engine with 450+ functions and more. Download a free trial or view the online demos.

SpreadJS by GrapeCity, Inc. sponsor

Angular 11 Released — Are you one of the allegedly 1.7 million developers using Angular? Maybe experimental webpack 5 support, faster builds, improved hot module replacement support, and automatic inlining of fonts can tempt you onto the latest version.

Mark Techson (Google)

Babylon.js 4.2 Released: Powerful 3D Rendering Engine — Babylon.js is a particularly powerful 3D rendering engine aimed at artists, game developers, and anyone with 3D ideas to explore. New to 4.2 is a new particle editor, sprite editor, texture inspector, and more. See the playground if you want a quick play.

Babylon.js

'No More Free Work from Marak' — The creator of faker.js (a library for creating dummy data) pushing back against supporting businesses for free with his open source work has become a cause célèbre in the past week. “Pay me or fork this,” he says. Whatever your take, the topic of work vs reward in open source will remain both important and divisive.

Marak X

📚 Tutorials, Opinions and Stories

Rethinking the JavaScript Pipeline Operator — Dan concludes “I hope that TC39 decides to reject this proposal” but it’s interesting to see how he reaches that conclusion.

Dan Shappir

Understanding Modules and import and export Statements — Modular programming demands, well, modules, and JavaScript now has built-in support for these and here’s the basics of their operation.

Tania Rascia

Is Your JavaScript Testing Stack Holding You Back? — Learn how to boost your productivity with the ultimate development workflow.

Wallaby.js sponsor

Things I Don’t Like About Vue.js (as a React Engineer) — Well, we love Vue, but to be fair to Harry, he did write What Vue.js Does Better Than React recently too ;-)

Harry Wolff

Back to Basics: Event Delegation — Events don’t just occur on the element you apply them to. Instead they go all the way down the DOM tree to the event and back up again. Christian demonstrates where this can help you out.

Christian Heilmann

How to Detect When a Sticky Element Gets Pinned — …thanks to the IntersectionObserver API.

David Walsh

Live Workshop: Getting Started with OpenTelemetry in Node.js

Lightstep sponsor

▶  How to Recreate Tic Tac Toe with HTML, CSS, and JavaScript

James Q Quick

You're Probably Not Using Promise.All Enough

Sam Jarman

How to Create a Commenting Engine with Next.js and Sanity

Bryan Robinson

▶  My VS Code Setup: Must Have Configurations and Shortcuts

James Q Quick

🛠 Code & Tools

Mermaid: Markdown-'ish' Syntax for Generating Flowcharts, Sequence Diagrams, and More — Being able to ‘draw’ diagrams in a structured, text-based and have them render into something presentable is pretty appealing.

Knut Sveidqvist

jsdiff: A JavaScript Text Diffing Implementation — Can compare strings for differences in various ways including creating patches for the changes. The library is quite mature but just reached version 5.0. There’s an online demo too.

Kevin Decker

core-js 3.7.0: A Modular Standard Library and Polyfills for JS — A popular collection of polyfills covering ECMAScript features up to ES2021 level. The project has had some interesting problems recently, but releases are now flowing again.

Denis Pushkarev

CodeFix - Automatically Clean Up Technical Debt

CodeFix sponsor

React Frontload 2.0: Simple Full-Stack Data Loading for React — Do full stack data loading and state management inline in React components by writing a data loader in your component (with a hook) and it ‘just works’ with SSR and in the browser.

David Nicholas Williams

Running Vue.js in a Web Worker? — A promising prototype of running Vue.js in a Web Worker so that work is offloaded to a background thread with updates being sent back to the main thread asynchronously.

Jerzy Głowacki

Dexie.js: A Minimalistic IndexedDB Wrapper — IndexedDB is a widely supported browser API for data storage and Dexie aims to make it simpler to use (and will offer an approach for server syncing too.)

David Fahlander

Microsoft Edge Tools for VS Code — Use the Microsoft Edge Tools from within VS Code to see your site’s runtime HTML structure, alter its layout, fix styling issues as well as see your site’s network requests.

Visual Studio Marketplace

ShareDB 1.5: Realtime Database Backend Based on Operational Transformation — For when you need real time synchronization of JSON documents (such as for behind a real time collaboration app).

ShareJS

💻 Jobs

Senior / Intermediate Full Stack Developers (Sydney or Brisbane) — A SaaS business with phenomenal growth. True flexible working. You’ll have 5+ years in JavaScript / TypeScript, as well as production experience with AWS/Serverless.

Compono

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

👀 A Correction

The File System Access API: Simplifying Access to Local Files — Several issues ago we mistakenly referred to this API’s spec as an ‘open standard’ when it's just a spec. It's Chrome only (for now), not a W3C standard, though it remains an interesting idea. (Thanks to reader Šime Vidas for noting our mistake and noting that the path from the WICG to a W3C standard is a long one indeed!)

Pete LePage and Thomas Steiner

#513 — November 6, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

What's the Deal with Svelte and SvelteKit? — Two weeks ago we linked to a video where Svelte’s creator pondered the future of Web development. Now here’s a more definitive writeup of what you need to know about how Svelte is progressing.

Rich Harris (Svelte)

BTW, if Svelte is your thing, Svelte Radio is a frequent podcast covering developments in the space. There's also an official Svelte November 2020 update.

WTFJS: A List of Funny and Tricky JavaScript Examples — This has been around for a few years but continues to get tweaks and adjustments and if you’ve not seen it, it’s worth a look to get a deeper look into some of the more “uh, what?” corners of JavaScript.

Denys Dovhan

Vue 3 Is Out! Jump into Vue 3 Quickly in This New Course by Sarah Drasner — Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.

Frontend Masters sponsor

New, Core 'Redux Fundamentals' Tutorial — A complete rewrite of the official Redux introductory tutorial that covers both how Redux works and how to use it. Say goodbye to outdated terminology and hello to modern practices and code sandbox demos. Easy to skim even if Redux isn’t your cup of tea.

Redux Core Team

Socket.io 3.0 Released: A Realtime Framework for Node and Browser — We’re awaiting a full blog post on this release, but Socket·io has been around many years and was once the ‘go to’ system for bidirectional browser/server communications that worked in almost every browser.

Socket·IO Project

📚 Tutorials, Opinions and Stories

An Introduction to Data Visualization with ApexCharts — ApexCharts is an MIT-licensed interactive JavaScript charting library.

Nefe Emadamerho-Atori

Clickjacking Attacks and How to Prevent Them — A look at both client-side and server-side approaches to mitigating clickjacking attacks including some approaches for Express.js-based apps.

Andrea Chiarelli

ES Modules in Depth — An exploration of the different ways you can export and import values using ES Modules (now broadly supported in most places, even if you’re not using extra tools).

R. Alex Anderson

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

An Introduction to FFmpeg.wasm, a WebAssembly / JS Port of FFmpeg — I think WebAssembly is going to have a huge impact over the next few years and this project, despite being in the early stages, shows off a few reasons why. Project homepage.

Jerome Wu

The JavaScript 'Self-Profiling' API — The JS Self-Profiling API is a proposed API (supported only in Canary builds of Chrome for now) for letting developers control a sampling profiler for measuring client JavaScript execution times.

Addy Osmani

Build a 'Remaining Character Count' Component with Alpine.js — Alpine.js bills itself as ‘like Tailwind for JavaScript.’

Ryan Chandler

How to Organize a Large React Application and Make It Scale

Jack Franklin

Building a Type-Checked URL Router From Scratch with TypeScript 4.1+

Jan Sommer

How to Localize a Vue App with vue-i18n and Localazy

Václav Hodek

▶  Fancy TypeScript Features for the Everyday Developer

George Kosmidis

Top Problems I Encountered Switching from Vue 2 to Vue 3

Ghiura Alexandru

🛠 Code & Tools

SpaceTime: A Lightweight Timezone Library — Use this to calculate times in other timezones. Has a Moment-esque API but is immutable. No dependencies. We last linked this years ago but it’s still under active development. It has a neat interactive demo too.

Spencer Kelly

Graphery SVG: A Library for SVG Creation and Management — This well-documented library is good for creating and manipulating SVG in JavaScript. Offers a simple API, that’s said to be very close to the native structure of SVG.

Graphery

Square Terminal API — Connect your app to the all-in-one payments device merchants love with a simple REST API. Learn more.

Square sponsor

Dojo3D: A Library for Simple 3D Interactive Story Telling — Aimed at ‘all ages of coder’, Dojo3D tries to make creating interactive 3D stories a smooth process. There’s an online sandbox example you can play with.

Webprofusion

gron: Make JSON Greppable — A tool written in Go that transforms JSON into more easily greppable assignments, so you can use grep and see the context/path of the result. Useful.

Tom Hudson

SpanTree: Adds Tree-Based File Navigation to GitLab — A browser extension you may find useful if you browse GitLab-hosted repositories often.

Taveesh Anand

Marked: A Fast Markdown Parser and Compiler — Works in the browser or server-side. Demo here.

Christopher Jeffrey

Measure What Matters to Users, Browsers Don't Have Feelings

New Relic sponsor

μPlot 1.3: Fast, Tiny, Canvas-Based Time Series Chart Library

Leon Sorokin

Fetch 3.5: A `window.fetch` Polyfill

GitHub

💻 Jobs

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery