Happy 26th birthday to JavaScript

#​567 — December 3, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

asciinema-player, Now 4x Smaller and 50x Faster with JS and Rust— asciinema is a Python-based terminal screen recorder (think Camtasia but for text!) but to play its recordings on the Web asciinema-player is used. Originally written in ClojureScript, a mixed JS + Rust build (plus a little SolidJS) has hugely improved its performance. Will we continue to see more collaborations between Rust and JavaScript in future? Definitely.

Marcin Kulik

Mitosis: Write Components Once, Run Everywhere— In simple scientific terms, mitosis is a process where a cell divides into two child cells, but in this case it’s a single component code base that can compile into different forms usable with Vue, React, Solid, Angular, Svelte, and more. The playground lets you see how it works out.

Builder.io

Introduction to Gatsby Course with Jason Lengstorf— Learn to build blazing-fast apps and websites with React using Gatsby, covering all angles from using GraphQL to store and retrieve data, image optimization, displaying third party data in components, right through to deployment.

Frontend Masters sponsor

Floating UI: Positioning for Tooltips, Popovers, Dropdowns, etc.— If this reminds you of Tippy.js or Popper at all, it’s similar and shares a creator and contributor respectively who says it’s “designed to be a next-generation evolution". It certainly looks and feels nice, is lightweight, and can be customized by way of middleware.

atomiks

'Thank You, Angular' (and Thank You, Igor!)— Igor has been a leader and fundamental part on the Angular team for, amazingly, over 12 years now, but he’s moving on. In this post he reflects on the project’s history, his involvement with it, how Angular is now used in over 2500 apps(!) at Google, and who’s helping to plug the gap he leaves.

Igor Minar

IN BRIEF:

• 🎂 Tomorrow, it's 26 years since JavaScript debuted meaning JS shares a birthday with Jay Z and Marisa Tomei. One sweet day.

• AWS has unveiled AWS Amplify Studio, essentially a 'Figma to fullstack React app' visual dev environment leaning upon its usual bundle of Amplify services.

• Like a good daily coding puzzle? Advent of Code has started its 2021 run.

• Egghead and Jon Meyers have a new course on building a SaaS product with Next.js, Supabase and Stripe available to enjoy for no charge.

RELEASES:

WEBMIDI.js 3.0– Easier MIDI from the Web.
Node 17.2.0– Node updates to V8 9.6.
npm 8.2.0
Polly 6.0– Netflix's HTTP recording and replay library.
DOCX 7.2– Generate .docx files from JavaScript.
React PDF Reader 1.0– Component wrapping PDF.js.

📖 Tutorials, Opinions & Stories

JSON Modules in JavaScript— Typically when you use import it’s for importing JavaScript code, but what if you had some configuration settings in a JSON file and wanted to import it directly? Enter the JSON modules proposal which is at stage 3 with experimental support available in Node or within the Chrome 91 browser.

Dmitri Pavlutin

Publishing a Web Component to npm— Simon’s always good at explaining stuff and, as an aside, his Datasette project is well worth checking out if you work with datasets at all.

Simon Willison

Find and Fix Things Faster Across Your Code with Sourcegraph— Nobody likes feeling caught between the pressure to improve your codebase and the pressure to protect it. Release anxiety– we’ve been there.

Sourcegraph sponsor

Determining the Best Starting Word in a Word Game— WORDLE is an online word game that’s a bit like ‘Mastermind’ but with 5 letter words. And, of course, if you’re a developer, why not use code to improve your guesses?

Bertrand Fan

How to Trim Strings in JavaScript— Specifically, removing whitespace and line terminators safely.

Dmitri Pavlutin

How to Set Up Server Side Rendering (SSR) with React, Express.js, and esbuild
Adam Berg

🛠 Code & Tools

Strapi v4: An Open Source Node.js Headless CMS— Strapi has been around a while and has done a good job building a community around itself. A big new version is out with a new UI, Plugin API, Query Engine and more, plus a focus on refactoring the core to make it easier to extend and twist to your own ends. Here’s the getting started tutorial.

Alexandre Bodin

Plotly.js 2.7: A Data Viz Built on D3 and Stack.gl— It’s been a couple of years since we last featured Plotly, but it continues to get very frequent updates. It ships with over 40 chart types including 3D visualizations – see examples here.

Plotly

Data Visualization: Build React Graphs the Easy Way— Let’s explore an efficient way to create React graphs (Donut, Bar, Line, Sparkline) with the KendoReact Charts library.

Progress KendoReact sponsor

Ladda: Buttons with Built-In Loading Indicators— Sweet and simple. Ideal for form submissions in particular. GitHub repo.

Hakim El Hattab

WMR: A Tiny Multitool for Building Modern Web Apps— Everything you need in a single tool for putting together JS-powered webapps with bundling, JSX, CSS modules support, and more. Ideal for prototyping. GitHub repo.

Preact

noUiSlider: Lightweight Range Slider with Full Touch Support— No dependency. Fits into wherever you need it. Great homepage too. GitHub repo.

Leon Gersen

Deliver Safer & Cleaner Code For Free - Directly in Visual Studio 2022

SonarLint sponsor

jsvu: JavaScript (Engine) Version Updater— A tool for installing new JavaScript engines without compiling them from source.

Google

🕹  TEGA: TypeScript Embedded GameBoy Macro Assembler— Extremely niche, but essentially lets you create GameBoy ROMs from TS or JS. I have zero need to do this, but if you ever do, maybe this example will win you over.

Francis Stokes

🐍  promisio: JavaScript-Style Async Programming for Python— Is this now Python Weekly? No, but Python continues to be on the up and up for many use cases, but what if you want your JS style async functions?

Miguel Grinberg

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

Ember Infinity: Simple, Flexible Infinite Scroll for Ember CLI Apps

Converse 9.0: A Web-Based XMPP/Jabber Chat Client Written in JS

🧊  And finally...

blockify-yourself— Earlier this week former Twitter CEO Jack Dorsey ‘did a Zuck’ and rebranded Square, Inc to Block, complete with new logo. Said logo was even incorporated into the headshots on the Board of Directors page…after much mocking, now, you can of course get your own blocky headshot via this Glitch project (which uses Three.js).

Julius Tarng