#496 — July 10, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Temporal, a Future API for Dates and Times in JavaScript — TC39 seeks your help with the future of JavaScript! They’re working on a proposal for a modern date/time API for ECMAScript/JS. Check out these examples for a feel of what the API would give us. You’re encouraged to have a play and fill out this survey.

The Temporal Champions Group on TC39

Perf Track: Tracking the Performance of Sites Using Popular JS Frameworks — Aiming to ‘track framework performance at scale’, Perf Track lets you get answers to questions like how many Vue apps use compression (and what type), how big React apps tend to be, or how many Ember apps have a good first contentful paint time.

Google Chrome Labs

How to Communicate on a Remote Team: Tools and Templates — Learn how to overcome the two biggest challenges of remote communication: understanding tone and upholding a collaboration framework.

CircleCI sponsor

Creating Tiny Desktop Apps with Tauri and Vue.jsTauri is a toolkit (built in Rust) for building cross platform, JavaScript and CSS powered desktop apps, and the eventual app size can be pretty small (under a megabyte).

Kelvin Omereshone

Malina.js: A Front-End Compiler Inspired by Svelte — A tool similar to Svelte that pre-compiles an app (think a compile-time framework, rather than a runtime one) for better performance. See examples on the REPL. One developer created the same app with Svelte and Malina and has things to say, too.

Oleg Nechaev

⚡️ Quick bytes:

💻 Jobs

Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

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

📚 Tutorials, Opinions and Stories

A Case Study of Moving a Three.js WebXR App Off the Main Thread — You can’t argue about Surma’s dedication to Web Workers and here we get a practical demonstration of how they can help to improve performance.

Surma

Moving from TypeScript to Rust and WebAssembly — There’s not a lot to this quick writeup, but it’s interesting that this sort of move is now at least possible and it may well suit your use case too.

Nicolo Davis

Four Ways to Fetch Data in React — It’s really three ways you perhaps don’t want to fetch data, building towards a solid case for the best approach. But we like the logical progression through the alternatives.

Cory House

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

Debounce Explained: How to Make Your Code Wait For Your User To Finish Typing — Debounce functions are higher-order functions that limit the rate at which another function can be run.

Juan Vega

Flattening Arrays with Array.flat() — Knowing about flat() is useful enough, but did you know you can flatten an array of any depth with .flat(Infinity)?

Samantha Ming

Barebones WebGL in 75 Lines of Code — WebGL is pretty intimidating but this boils it down to the bare essentials. And if you want to go further, I still think this thorough guide is one of the best. Of course, you may see all of the boilerplate needed and just use Three.js instead, which is fine too! 😄

Avik Das

Automated Code Reviews for JavaScript, Directly from Your Git Workflow

Codacy sponsor

▶  Learn Next.js: A Video Course — A free video course on how to build both Jamstack and SSR sites using React and Next.js. No signing up needed either.

Lee Robinson

Khan Academy's Transition to React Native — The tale of the multi-year project to move both the iOS and Android apps of the popular education platform over to using React Native.

Khan Academy

🔧 Code & Tools

shareon: Simple and Stylish 'Share Buttons' — They also boast good ethics as there’s no tracking code involved.

Nikita Karamov

Financial: A Zero-Dependency Financial Calculations Library — Based on numpy-financial but aimed at Node, Deno, and browser alike, Financial gives you functions for calculating things like future values, repayments, interest rates, etc.

Luciano Mammino

Serverless Headless CMS - OpenSource, Powered by React and Node — Scale up and down in milliseconds with your demand. Stop paying for servers and resources you are not using.

Webiny sponsor

useWebAnimations: React Hook for Flexible Web Animations API Animations — While still badged an ‘experimental technology’ by MDN, the Web Animinations API provides an approach for describing animations on DOM elements.

Welly Shen

Puppeteer 5.0 Released: The Headless Chrome Control Library — Puppeteer 4.0 was only three weeks ago but there are breaking changes here and work on making Puppeteer environment agnostic is in full flow.

Puppeteer

N3.js: Fast, Spec-Compatible, Streaming RDF Library — If you need/use RDF you’ll know, but basically it’s a format for modeling and specifying Web resources and this library works in Node and browser alike.

RDF JavaScript Libraries

🎨 Creative Corner

jsplot: A Quick Way to Plot the Results of a Function — It’s really quick and minimal but this basic Web tool does a quick plot from the results of the JavaScript you supply.

Fredrik Norén

▶  The Easiest Flappy Bird Tutorial Ever? — A 13-minute YouTube video on how to create your own Flappy Bird clone using straight up HTML, JS, and CSS. No framework, no build tools, the code isn’t perfect, but that’s not the point :-)

Shawn Beaton