Tag: HTML

The unbearable weight of massive JavaScript

Posted on by

#​664 — November 23, 2023

Read on the Web

JavaScript Weekly

Time to Take the State of JavaScript 2023 — The long standing State of JavaScript survey is back for another run at figuring out what the community is up to and what tools we’re using. The results are always illuminating and we’ll share the tastiest parts once available.

Devographics

▶  The Unbearable Weight of Massive JavaScript — An extensive talk looking at what can be achieved by simplifying web architecture, chiefly by using new or upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly frontends. Slidedeck.

Ryan Townsend

Stop Building Auth, Start Building Apps with EdgeDB + Next.js — It’s hard enough to come up with an idea worth trying. See how EdgeDB and our new authentication extension makes it easy to go from idea to working application in record time using Next.js.

EdgeDB sponsor

TypeScript 5.3 Released — The latest edition of the type-enhanced JavaScript superset is here. The headline feature is full support for the import attributes proposal (as it currently stands, at stage 3 in TC39), but there are many enhancements around type narrowing, interactive inlay hints for types in editors, and more. Not the biggest update, but progress nonetheless.

Daniel Rosenwasser (Microsoft)

Vite 5.0 Released — The Vite suite of frontend tooling may have started life in the Vue.js world, but is now used by projects aplenty including SvelteKit, Remix, and Astro. v5 now uses Rollup 4, removes many deprecated features, and requires Node 18+. There’s a migration guide to help with your v4 to v5 progression.

Evan You and Contributors

IN BRIEF:

The Node.js 20.x runtime is now available on AWS Lambda.

🎁 A bumper list of dev-related tools & services running Black Friday deals.

GitHub looks at what’s new in the latest Git release: Git 2.43.

The AWS Amplify team teases ‘Gen 2’ of their fullstack app platform.

RELEASES:

⭐️ Transformers.js v2.9 – State of the art ML in JavaScript. v2.9 adds support for depth estimation, zero-shot object detection, and optical document understanding.

Redux Toolkit 2.0 rc.0, Redux 5.0 rc.0, React-Redux 9.0 rc.0 – Initial RCs with better packaging and smaller bundles. Final releases due soon.

Bun 1.0.14 – Introduces a high-perf globbing API for matching files and strings.

Rspack 0.4 including Rsbuild 0.1 – A fast Rust-based web bundler.

Node v21.2.0 (Current) and Node v20.10.0 (LTS)

Starlight 0.13.0 – Beautiful docs sites atop Astro.

📄 Articles & Tutorials

▶  4 Web Devs, 1 App Idea — Salma Alam-Naylor, Scott Tolinski, and Eve Porcello join Jason Lengstorf to kick off a fun new series where several developers all implement the same type of app, show off how they went about it, and react to each other’s approaches. Svelte, Astro, and Next.js each make an appearance.

Learn with Jason

Promises Training — Practice working with promises through a curated collection of interactive challenges. Aimed at developers with at least an intermediate understanding of promises who want to dig deeper.

Henrique Inonhe

JavaScript Error and Performance Monitoring — Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

An Attempted Taxonomy of Web Components — A collection of open-source web components (and lessons learned from using them) that may help you on your journey in this complex, developing space.

Zach Leatherman

Using OpenAI APIs to Analyze Automated Test Failures — A look at how to develop a Nightwatch.js plugin which sends the test failure and associated errors to a service that integrates with OpenAI’s platform to analyze said errors and provide actionable feedback.

Andrei Rusu

🛠 Code & Tools

Bruno: An Open-Source HTTP API Exploration App — There are a lot of ‘API client’ tools like this, commercial and non-commercial, with varying levels of features, but this is an open source one entirely built in JavaScript with a fully-offline ethos some might appreciate. GitHub repo.

Anoop M D, Anusree P S and Contributors

debounce 2.0: Delay Function Calls Until a Set Time Elapses — If you don’t want something to run too often, debouncing is the strategy for you and this library makes it simple. v2 adds types and brings the code up to modern standards.

Sindre Sorhus et al.

Level Up Your UX With Bryntum — Empower your users with advanced widgets like data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

H3: A Minimal HTTP Framework for Multiple JS Platforms — Aims to be as universal as possible and works across numerous platforms, including Node, while offering the basic HTTP framework features and a compatibility layer with Express middleware. v1.9 just landed.

UnJS

request-animation-frames: Use requestAnimationFrame Anywhere — The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use requestAnimationFrame in any JavaScript environment. The implementation is delightfully simple.

Sindre Sorhus

Spectral.js: A More ‘Paint-Like’ Color Mixing Library — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka–Munk theory which more closely matches how paints work for a visually satisfying result.

Ronald van Wijnen

‘A Node + TypeScript + ts-node + ESM Experience That Works’ — It’s just three files: package.json, tsconfig.json and a utilities file.

Khalid Zoabi

A Non-Cloud Alternative to Google Forms That Has It All

SURVEYJS sponsor

🖼 medium-zoom 1.1: A Library for Medium-Style Image Zooming — Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly. Now we just need a library that can cover up the bottom half of a page with junk like Medium also does now. Demo.

François Chalifour

gridstack.js 10.0 – Build interactive dashboard panels quickly.

MQTT.js 5.3 – MQTT client for Node and browser.

Piscina 4.2 – Node.js worker thread pool implementation.

(Official) MongoDB Node.js Driver 6.3

SQL Formatter 14.0 – Pretty print SQL queries.

Job Listing

Full Stack TypeScript Software Engineer – [Remote Europe] — Marker.io is a visual bug-reporting tool for the web. Join our dev team and work remotely (Stack: Node.js, Vue.js & MongoDB).

Marker.io

NOTABLE QUOTABLE

“Programming isn’t about what you know; it’s about what you can figure out.”

___
Chris Pine (author of Learn to Program)

P.S. Medium is 🗑️. If you don’t want to host your own blog, try Hashnode, dev.to, Bear, or even throw Markdown at GitHub Gists – it’ll provide a better reader experience and we’ll be more likely to link to it.

Web Components forever?

Posted on by

#​660 — October 26, 2023

Read on the Web

JavaScript Weekly

Transformers.js 2.7: ML for the Web, Now with Text-to-Speech — Transformers.js provides access to machine learning models directly in the browser for all sorts of tasks and v2.7 introduces audio generation (live demo.) The Web Speech API remains the natural choice for this task for now, but the ML approach will only continue to offer greater opportunities over time.

Joshua Lochner

🔥  Web Components Will Outlive Your JavaScript Framework — It’s a spicy opinion piece but I think Jake has earned the right after his fantastic posts on CRDTs in which he focused on using vanilla JS web components rather than a system like React. Here, he explains why.

Jake Lazaroff

🗣 Jake’s post fuelled an extensive Hacker News discussion touching on everything from MDX and htmx‘s role, to state management and the ‘shallow’ nature of the Web Components API as-is.

Production Ready Postgres at Your Fingertips — Deploy a faster and more reliable Postgres cluster. Run in the cloud of your choice with management, backups, and production features handled for you. Get started with less than 5 minutes. Try it today.

Crunchy Bridge sponsor

Yarn 4.0 Released — Starting life as an npm alternative that resolved several of its major pain points, Yarn remains a popular choice and v4 introduces a new ‘hardened mode’ to protect you from various security issues, boasts an improved constraints engine, and has performance (almost) on par with pnpm.

Maël Nison

Node v21.1 (Current) Released with ESM Detection Feature — “The new flag –experimental-detect-module can be used to automatically run ES modules when their syntax can be detected. … We hope to make detection enabled by default in a future version..”

Michaël Zasso

🐦 The React team has announced the much anticipated Server Actions and Client Actions features are now available in React Canary.

📣 The Angular team is cooking up something big with Angular 17. Minko Gechev has teased a long, forthcoming release post and they’re encouraging us all to set a notification for Nov 6’s ▶️ live streamed ‘Special Angular Event’ on YouTube.

🎨 Photopea is a neat online image editor, but there’s now Vectorpea, a browser-based vector editor, a la Illustrator.

🤗 If you want to take initial steps into contributing to open source JavaScript projects on GitHub, verto.sh has curated a collection of projects to check out.

RELEASES:

p5.js 1.8 – Processing-inspired creative coding environment. v1.8 has some WebGL related improvements.

Node v20.9.0 (LTS) – Node v20 finally becomes the newest ‘active LTS’ release and has the codename ‘Iron.’

Billboard.js 3.10 – Rich charting library.

Bun 1.0.7

📒 Articles & Tutorials

Svelte by Example: A Gentle Introduction — A succinct, gentle, and code-focused introduction to Svelte and SvelteKit.

Sebastian De Deyne

‘Why I Won’t Use Next.js’ — From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won’t use Next.js. It’s spicy and opinionated, but always thoughtful. (In other Kent news, he’s just launched Epic Web, his new full-stack webapp development course.)

Kent C. Dodds

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups.

PostHog sponsor

Goodbye, Node.js Buffer — Given Sindre’s gigantic number of libraries, he could possibly migrate half the ecosystem solo.. 😏 but he sets out a case for discouraging the use of Buffer in favor of the cross-platform Uint8Array, and explains how to make the move.

Sindre Sorhus

Changing Colors in an SVG Element with CSS and JavaScript — Almost everything inside an inline SVG image is up for modification using CSS and JS.

Kirupa Chinnathambi

ES Module Imports in Node.js and the Browser — Just a quick example/handy recap of the basic setup.

Eli Bendersky

Playing with the Gamepad API — One developer’s attempt to get JavaScript games ready to use controllers in the browser.

Alvaro Montoro

Using Cloudflare’s AI Workers to Add Translations to PDFs

Raymond Camden

▶  My Problem with Using TypeScript in 2023

James Q Quick

▶  Vue 3 for Beginners — A mega three hour workshop on YouTube.

Allan Jeremy

🛠 Code & Tools

Radix Vue 1.0: Unstyled, Accessible Components for Vue.js — An unofficial Vue port of the popular Radix UI component library. GitHub repo.

zernonia et al.

React Magic Motion: Automagical Animation for Components — Built on top of Framer Motion so you get all of its features, but with opinionated, default transitions for child components.

Etesam Ansari

No-Code Machine Learning on the Simplest Development Platform ‑ Catalyst

QuickML – Catalyst by Zoho sponsor

background-removal: Remove Image Backgrounds in JS — Wipe away backgrounds in both Node and the browser (so there’s a live demo) without relying on third party services. It does use a large pre-trained model to do this, however, and is GPL licensed, so your mileage may vary.

img․ly

Wireit: Makes npm/Yarn Scripts Smarter, More Efficient — Working with npm run and not replacing it, Wireit extends your scripts with features like result caching, parallelization, and re-running on changes.

Google

📈 Perspective 2.6 – Data visualization and analytics component, suited for streaming or large dataset use cases, with a mildly hypnotic, rapidly updating homepage (above) – GitHub repo.

📋 Clipboardy 4.0 – Access the system clipboard from Node and browsers.

npm-publish 3.0 – GitHub Action to publish packages to npm.

http-fake-backend 5.0 – Build a fake backend by providing JSON.

Opal 1.8 – Ruby to JavaScript transpiler.

Never Stop Learning and Work #LikeABosch — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.

Bosch sponsor

MDX 3.0 – Use JSX in Markdown documents.

Size Limit 10 – Performance budget tool for JavaScript.

Jotai 2.5 – Atomic global React state management.

Protobuf-ES 1.4 – Protocol Buffers for JS/TS.

NodeBB 3.5 – Node.js-powered forum system.

QUOTABLE:

“There are two methods in software design. One is to make the program so simple, there are obviously no errors. The other is to make it so complicated, there are no obvious errors.”

___
Tony Hoare, inventor of the quicksort algorithm.

Svelte 4 released

Posted on by

#​644 — June 22, 2023

Read on the Web

JavaScript Weekly

UnsuckJS: Comparing Lightweight JavaScript Options — “No build tools, no compilers, and no hassle.” It’s a table of frontend JavaScript libraries on a simple page – that’s it! But it’s a handy table, letting you see the relative popularity, size, and latest versions of libraries as diverse as Preact, bau, htmx, Hyperapp, and Mithril.

Adam Hill

Svelte 4 Released — Four years on from Svelte 3.0 comes the latest major release of the popular compile-time framework that isn’t afraid to do things its own way. If you’re new to it, hit the interactive tutorial to get a feel for things, or if you’re already a user, enjoy the v3 to v4 migration guide, overhauled site, and extra performance on offer.

Rich Harris and the Svelte Team

🤔 Claudio Holanda’s ‘Thoughts on Svelte(Kit), one year and 3 billion requests later‘ provides some interesting balance to our cheerleading.

The Complete UI Component Library For Enterprise Web Apps — A professional UI component library with power widgets like data grid, calendar, scheduler & Gantt charts. Includes API docs, guides and an unreasonable amount of demos to play with. Seamlessly integrates with React, Angular, Vue & Salesforce apps.

Bryntum sponsor

A Look at TypeScript 5.2’s New Keyword: using — using brings something akin to Python’s with context management into TypeScript by providing a way to automatically run a Symbol.dispose function when an object leaves scope. You could use this to shut down database connections, close file handles, etc.

Matt Pocock

If you’re not a TS fan, the idea behind using is also an ECMAScript proposal (currently at stage 3) called Explicit Resource Management and there’s more detail to enjoy in their examples.

The ‘Getting Started with AI’ Stack — Andreessen Horowitz (a.k.a. a16z) is a well known VC firm, but they also have an engineering team of their own that has come up with a “getting started with AI” template for JavaScript devs who want to play with modern ML technologies without too much thinking about tooling.

Li, Li, and Casado (Andreessen Horowitz)

⚡️ IN BRIEF:

The Register reports malicious actors are exploiting expired S3 buckets to inject harmful code into legitimate npm packages without needing to modify existing code.

Fresh, a Deno-first full-stack Web framework, has a new release in the shape of Fresh 1.2. There have been some concerns over its maintenance, but now there’s a new full-time maintainer, Marvin Hagemeister, and a lot of promise on the horizon. Welcome Marvin!

RELEASES:

Node.js 20.3.1, 18.16.1 and 16.20.1 – Security releases.

React Native 0.72

Nest 10.0 – Popular Node.js framework for building enterprise-grade apps.

ESLint 8.43

📒 Articles & Tutorials

Synchronizing Videos or 3D Model Rotations to Scroll Driven Animations — With just a little JavaScript, you can control 3D models and/or videos using scroll-driven animations. It’s a common effect seen on modern fashion sites.

Bramus van Damme

▶  Recreating a JS Runtime to Understand Node’s Magic — Popular speaker, educator, Microsoft MVP and Node.js core team member Erick gives a very enthusiastic talk on the latest ‘hello world’ in the JavaScript world: building a runtime 😏 Somehow, Erick manages to run through the key concepts involved in just 20 minutes.

Erick Wendel

E-Commerce Simplified — A practical guide to building your Store with Storyblok, Commercetools, and React.js.

Storyblok sponsor

Positioning Anchored Popovers — Popovers are commonly positioned relative to their invoker — but when using the new popover attribute, anchoring can be tricky as these popovers are placed in the top layer, away from the context of their invoker. Hidde looks at options to resolve this.

Hidde de Vries

▶  React Server Components in Under Seven Minutes — Looking to quickly get a basic handle on RSCs? This fast-paced video tries to bootstrap you on the subject.

CodeLit

A Visual Guide to Understanding Node’s Event Loop

Vishwas Gopinath

Where to Host Your Remix App in 2023

Jacob Paris

🛠 Code & Tools

Selecto.js: Make Elements Selectable Within a Drag Area — Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. Live examples here.

Daybrush (Younkue Choi)

Tuple – The Fastest Way to Onboard New Devs — Waste hours verbally steering on Zoom? New hires learn your codebase faster with Tuple. Trusted by over 40,000 devs.

Tuple sponsor

AutoAnimate: Add Motion to Your Apps with a Single Line of Code — You can view some nice examples on the page and this can be used with React, Vue, Svelte, or just plain JavaScript.

FormKit

Toad Scheduler: In-Memory Node and Browser Job Scheduler — Provides more structure than setTimeout or setInterval and supports cron-style scheduling.

Igor Savin

Kysely: A Fluent, Type-Safe SQL Query Builder — Inspired by Knex and targeting Node, it also works in Deno and the browser and boasts a good autocompletion experience thanks to its fluent API. GitHub repo.

Sami Koskimäki

AI.JSX: A JSX-Powered AI App Framework — It’s not React, but gives a React-like feel to letting you specify how large language models, such as ChatGPT, should integrate with your app. Luckily there’s a set of tutorials.

Fixie.ai

Generate SBOMs Effortlessly with Snyk

Snyk sponsor

💡 An SBOM is a “software bill of materials” – essentially an inventory of dependencies and components that make up an application, as Liran Tal explains.

🐼  Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS — A new DX-focused CSS-in-JS approach boasting build-time generated styles and type safety out of the box. It works with Remix, Vite, Next.js, Astro, and server components.

Segun Adebayo

React Wrap Balancer 1.0: A Component for Better Displayed Title Text — A component that improves the rendering of titles by avoiding overhanging words. v1.0 is a key release that lets the component use the native CSS text-wrap property when supported.

Shu Ding

Perspective 2.3 – Data visualization and analytics component. The core is written in C++ and compiled to WebAssembly where it can be used from JavaScript.

Tesseract.js 4.1.1 – Pure JS OCR for 100+ languages. Fixes a key bug for processing images taken with iOS devices.

Shoelace 2.5
↳ Well designed, framework agnostic UI component suite.

TestCafe 3.0
↳ Node.js tool to automated end-to-end testing.

AlaSQL 4.1
↳ JS SQL database for browser and Node.

Octokit.js 2.1
↳ GitHub SDK for browsers, Node, and Deno.

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🧑‍💻 Got a job listing to share? Here’s how.

11 years of JavaScript on top

Posted on by

#​643 — June 15, 2023

Read on the Web

✍️ Be sure to make it to the end of today’s issue because we have an interview with the creator of Angular and Qwik, Miško Hevery, about exactly what Qwik brings to the modern JavaScript development table. Spoiler: performance and resumability.
__
Your editor, Peter Cooper

JavaScript Weekly

Val Town: If GitHub Gists Could Run, and AWS Lambda Were Fun — I’ve been keeping an eye on this for a few months and it’s a fascinating idea rapidly turning into a useful service that’s going places. You write bite size chunks of JavaScript and Val Town runs them in a sandbox, lets them call each other, lets you schedule them, or serves them up over HTTP. It’s smart and worth a look.

Steve Krouse

The Stack Overflow Developer Survey 2023 Results — Over 90,000 developers took Stack Overflow’s annual survey and it’s all “coming up Milhouse” ▶️ for JavaScript (and TypeScript too, natch) with JS topping the popularity charts 11 years in a row. Its showing is somewhat poorer in the top paying technologies list, but we can’t have it all.

Stack Overflow

Enterprise UI Development: Testing & Code Quality — Managing or migrating large apps and codebases? This video course covers what you need to know to scale efficiently whilst maintaining code quality. Covers unit testing, CI pipelines, mocking, code coverage, and more.

Frontend Masters sponsor

Melange 1.0: Compile OCaml / ReasonML to JavaScript — Having started life as a fork of BuckleScript, Melange now pitches itself as a mature tool for compiling OCaml (a popular functional programming language) to efficient and readable JavaScript.

Antonio Nuno Monteiro, Hongbo Zhang et al.

⚡️ IN BRIEF:

Chrome for Testing is a new, official Chrome ‘flavor’ specifically targeting web testing and automation use cases. You can already use it with Puppeteer.

Angular’s ng-conf event is currently taking place, and the latest news is the release of Angular 16.1 (now with TypeScript 5.1 support), an RFC for a new control flow syntax, and an RFC for built-in declarative lazy loading.

Allegedly, you can’t currently publish npm packages containing the words ‘keygen’ or ‘cheat’ in their names. Hacker News has been discussing it and a response from npm is currently being awaited.

Terence Eden has come up with a way to password protect a static HTML page with no JavaScript but it’s such an odd approach that you might not want to use it in production 😆

RELEASES:

Node.js v20.3.0 (Current)

VS Code May 2023 Edition – Adds a JS refactoring to move a class, function, or constant into an existing file and update all references.

Bun 0.6.9 – Mostly fixes and memory efficiencies for the alternative JS runtime. Nice.

TS-Pattern 5.0
↳ Exhaustive pattern matching library for TypeScript.

NestJS 10.0 – Progressive Node.js app framework. (What’s new.)

📒 Articles & Tutorials

An Introduction to Debugging Tools and Approaches for Node — An informative primer on debugging, from simple things like using IDE extensions to highlight potential problems or, yes, console logging, through to using the V8 inspector and debugging via Chrome.

Craig Buckler

Before Your Next Frontend Pull Request, Use This Checklist — Avoid common mistakes in pull requests with this checklist, covering areas from minimizing bundle size and ensuring accessibility to using semantic markup and keeping code clean.

Nina Torgunakova

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby.js sponsor

▶  Nuxt Explained in 100 Seconds — One of Fireship’s typical fast-paced high level roundups. This time they cover Nuxt, the Vue-oriented app framework.

Fireship

How To Build Server-Side Rendered (SSR) Svelte Apps with SvelteKit — SvelteKit is a framework for building apps using Svelte. This post walks through creating a simple job board with it and deploying on Netlify.

Sriram Thiagarajan

▶  Learn Angular Routing in 35 Minutes

Ervis Trupja

🛠 Code & Tools

Motion Canvas: A TypeScript Library and Real-Time Preview Editor to Program Animations — Uses generator functions to procedurally define your animations, and you can try out the web-based editor that allows you to work with the animations visually.

Motion Canvas

Code Together Before You Work Together. Interview Devs in a Real IDE — Skip algorithm interviews & use CoderPad to run coding interviews that are trusted by both candidates and interviewers.

CoderPad sponsor

Threlte: A Three.js Scene Renderer and Component Library for Svelte — react-three-fiber is great, but if you prefer Svelte, this is the alternative for you. It appears to be under very active development too with a whole new version on the way soon. GitHub repo.

Grischa Erbe

Million.js: A Performance-Focused VDOM Replacement for React — Starting life two years ago as a small, library-agnostic virtual DOM implementation, Million has recently presented itself as a performance enhancement for React: “Imagine React components running at the speed of raw JavaScript.”

Aiden Bai

📰 We featured this in this week’s React Status newsletter – if you’re a React developer, we focus more heavily on React news there.

jest-extended 4.0: Additional Matchers for Jest Users — If you’re using Jest for testing, this project introduces a variety of more specific matchers for various situations, particularly around type, value and format checking.

Jest Community

Rewind-UI: Customizable React + Tailwind CSS Component Library — A React component library fitting into the Tailwind CSS way of thinking. You can play with a live demo of some basic customizations on the homepage. It’s in beta but there are about thirty components to sink your teeth into.

Nick Dunas

React Authentication — Without Complexity

Userfront sponsor

⏱🌎  tz-lookup 8.0: Fast Time Zone Estimations from Latitude and Longitude — “This package trades speed and size for accuracy.” If you need to quickly infer timezone from location in Node or the browser, it’s worth a try.

Matthew McEachen

SVG.js v3.2: SVG Manipulation and Animation Library — A lightweight approach without dependencies. There’s a demo on JSFiddle you can play with. GitHub repo.

Various Authors

Vue-ECharts 6.6
↳ Apache ECharts component for Vue.js. (Demo.)

Neutralino.js 4.12.0 – JS desktop app framework.

Mineflayer 4.9 – Create Minecraft bots in JavaScript.

Tremor 3.1 – React dashboard building library.

♖ React Chessboard 3.0 – Yes, a chess component!

React Calendar 4.3

Dehydrating the Web with…
Miško Hevery

Perhaps best known as the creator of Angular, Miško is on a fresh mission with Qwik. Recently reaching v1.0 and focusing on the ‘instant’ delivery of full-stack apps to end users, Qwik takes an interesting approach around ‘streaming’ JavaScript to the client only when needed.

Miško recently shared the full story of Qwik ▶️ on the Stack Overflow podcast, and we wanted to ask him a few questions here too:

What was the key inspiration behind Qwik?

I don’t think there was a “key” inspiration but an accumulation of things that made me realize the current approach doesn’t scale.

We did a lot of work making the Ivy compiler in Angular faster and more capable. While we had a lot of success, the speed wins were not obvious. While Ivy was optimized, the rest of the app was not, and at app startup the code ran without optimization because the VM hadn’t warmed up.

Google has an internal framework called WIZ that powers Google Search, Flights, and Photos. WIZ is great at not executing a lot of code on app startup, and it results in a better user experience.

The realization that code runs more slowly on app startup and that it’s proportional to the amount of JS to execute, is what led me to building a framework that would not need to execute code eagerly on startup. Qwik is the culmination of that goal.

What is Qwik’s biggest differentiator to other frameworks?

Qwik is resumable. Qwik can transfer its internal state from the server to the client, which means that the app can become interactive on the client without having to execute any app-related code eagerly.

Resumablity is at the heart of Qwik. Qwik apps can resume because Qwik knows how to serialize the state of the app and the framework. Other frameworks know how to serialize the app state but not necessarily the framework state.

(Editor’s note: Think Qwik goes into more detail on this.)

Some developers have strong opinions about the use of symbols like $ in names. Did you have any qualms and did you consider any alternatives?

Some people have visceral reactions to $ as it reminds them of jQuery or PHP.

Qwik needs a way to mark closures for extraction. JavaScript doesn’t have an easy syntax for doing this so we needed to come up with our own. $ communicates to the optimizer that it needs to perform code extraction at that location, and also communicates to the developer that special rules apply there too.

We chose $ as it’s one of the few non-alpha characters valid in function names and that does not change the pronunciation of the API.

Misko is CTO at Builder.io and creator of Qwik.

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🧑‍💻 Got a job listing to share? Here’s how.

jQuery lives on; major changes teased

Posted on by

#​639 — May 18, 2023

Read on the Web

JavaScript Weekly

Bun’s New Bundler: 220x Faster than webpack? — Bun is one of the newest JavaScript runtimes (built atop the JavaScriptCore engine) and focuses on speed while aiming to be a drop-in replacement for Node.js. This week’s v0.6.0 release is the ‘biggest release yet’ with standalone executable generation and more, but its new JavaScript bundler and minifier may attract most of the attention and this post digs into why.

Jarred Sumner

???? If you’d prefer to read what a third party thinks, Shane O’Sullivan gave the new bundler a spin and shared his thoughts. There’s also some discussion on Hacker News. It’s early days and while esbuild may be fast enough for most right now, it’s fantastic to see any progress in bundling.

Deopt Explorer: A VS Code Extension to Inspect V8 Trace Log Info — A thorough introduction to MS’s new tool for performing analysis of the V8 engine’s internals, including CPU profile data, how inline caches operate, deoptimizations, how functions were run (interpreted or compiled) and more. There’s a lot going on.

Ron Buckton (Microsoft)

Supercharge Your Websites and Applications with Cloudflare — Get ready for supercharged speed and reliability with Cloudflare’s suite of performance tools. With ultra-fast CDN, smart traffic routing, media optimization, and more, Cloudflare has everything you need to ensure your site or app runs at peak performance.

Cloudflare sponsor

jQuery 3.7.0 Released — JavaScript Weekly is 638 issues old, or almost 13 years once you take away weeks off, so jQuery was a big deal in our early days. We hold a lot of nostalgia for it, and it remains widely used even if no-one is writing about it anymore ???? v3.7 folds the Sizzle selector engine into the core, adds some unitless CSS properties, gains a new uniqueSort method, and “major changes” are still promised in future. jQuery lives on!

Timmy Willison (jQuery Foundation)

⚡️ IN BRIEF:

TC39’s Hemanth.HM has begun keeping a list of ES2023 code examples like he did for ES2022, ES2021, and ES2020.

???? The New Stack has a story about Meta supporting the OpenJS Foundation – but who wrote the article is what we found more interesting..

The folks at Meta / Facebook have written about the efficiency gains made in Messenger Desktop by moving from Electron to React Native.

One downside to platforms like Cloudflare Workers using V8 isolates has been a lack of support for opening TCP sockets – quite an impediement if you want to talk to a RDBMS over TCP or something. Fear no more, Cloudflare Workers has introduced a connect() API for creating TCP sockets from Workers functions.

Promise.withResolvers progressed to stage 2 at the latest TC39 meeting.

RELEASES:

Node.js 20.2

Rome 12.1
↳ The formatter/linter gains stage 3 decorator support.

Ember.js 5.0 – App framework.

Jasmine 5.0 – Testing framework.

Gatsby 5.10

???? Articles & Tutorials

How to Get Full Type Support with Plain JavaScript — It’s possible to reap the benefits of TypeScript, yet still write plain JavaScript, as TypeScript’s analyzer understands types written in the JSDoc format.

Pausly

TypeScript’s own JS Projects Utilizing TypeScript page has more info on the different levels of strictness you can follow from mere inference on regular JS code through to full on TypeScript with strict enabled.

▶  Coding a Working Game of Chess in Pure JavaScript — No canvas, either. All using the DOM, SVG, and JavaScript. No AI and it’s not perfect, but it’s only 88 minutes long and it’ll give you something to work on..

Ania Kubow

Automate Slack and MS Teams Notifications Using Node.js — Quick guide to send and automate messages via Slack, MS Teams, and any other channel from your Node.js applications.

Courier.com sponsor

Your Jest Tests Might Be Wrong — Is your Jest test suite failing you? You might not be using the testing framework’s full potential, especially when it comes to preventing state leakage between tests.

Jamie Magee

A Guide to Visual Regression Testing with Playwright — The Playwright browser control library can form the basis of an end-to-end testing mechanism all written in JavaScript, and comparing the visual output of tests can help show where things are going wrong.

Dima Ivashchuk (Lost Pixel)

Create a Real Time Multi Host Video Chat in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

React Server Components, Next.js App Router and Examples — Addy Osmani’s overview of of the state of React Server Components, the Next.js App Router implementation, other implementations, the move towards hybrid rendering, plus related links.

Addy Osmani

..and if React is your thing, the latest issue of React Status is for you.

???? Code & Tools

VanJS: A 1.2KB Reactive UI Framework Without JSX — A new entrant to an increasingly crowded space, VanJS is particularly light and elegant, and its author has put some serious effort into documenting it and offering tools to convert your HTML to its custom format. It’s short for vanilla JavaScript, by the way.. GitHub repo.

Tao Xin

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

Introducing Legend-State 1.0: Faster State for React — Another state management solution? After a year of effort, Legend State 1.0 claims to be the fastest option “on just about every metric” and they have the benchmarks to prove it. Whatever the case, this thorough intro is worth a look. GitHub repo.

Moo․do

Starry Night: GitHub-Like Syntax Highlighting — Apparently, GitHub’s own syntax highlighting approach isn’t open source, but this takes a similar approach and is. It’s admittedly quite ‘heavy’ (due to using a WASM build of the Oniguruma regex engine) but that’s the price of quality.

Titus Wormer

Garph 0.5: A Fullstack GraphQL Framework for TypeScript — Full-stack ‘batteries included’ GraphQL APIs without codegen. GitHub repo.

Step CI

headless-qr: A Simple, Modern QR Code Library — A slimmer adaptation of an older project without the extra code that isn’t necessary today. Turning the binary into an image is your job, or use something like QRCode.js if you want a canvas-rendered QR code out of the box.

Rich Harris

Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies.

Olivier Blanc

eslint-plugin-check-file: Rules for Consistent Filename and Folder Names — Allows you to enforce a consistent naming pattern for file and directory names in projects.

Huan

Transformers.js 2.0 – Run Hugging Face transformers directly in browser.

PrimeReact 9.4 – Extensive UI component library.

The Lounge 4.4 – Cross-platform, self-hosted web IRC client.

Faast.js 8.0 – Serverless batch computing made simple.

???? Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

Fullstack Engineer at Everfund.com — Push code, change lives! Help us become the center for good causes on the modern web with our dev tools.

Everfund

????‍???? Got a job listing to share? Here’s how.

???? Go with the flow..

js2flowchart.js — A visualization library to convert JavaScript code into attractive SVG flowcharts. Luckily, there’s a live online version if you want to play without having to install anything.

Bohdan Liashenko

Did you know JavaScript is trademarked?

Posted on by

#​636 — April 27, 2023

Read on the Web

JavaScript™ Weekly

Babylon.js 6.0: The Powerful Web-Based 3D Framework — Babylon.js remains one of the world’s leading WebGL-based graphics engines with a visual scene builder and best-in-class physically-based rendering. v6.0 includes a new physics plugin with plenty of docs and demos, fluid rendering, major improvements to how reflections are handled, screen reader support, and more. This is a huge release of a significant project in the JavaScript ecosystem and we can’t do it justice here but there’s even more on the official homepage.

Babylon.js

Handsontable 12.3: What’s New in the Excel-Like Data Grid — Released recently, the popular data editor brings improved support for React 18 and large data sets. But that’s not all – the team behind Handsontable has shared some cool insights about it in a new article. Check it out to learn more.

Handsontable sponsor

????  Oracle’s Lawyers Stir Over JavaScript™ Trademark Use — Last year, we put out a call for anyone who knows Larry Ellison to pass on the word when Ryan Dahl asked Oracle to release the JavaScript trademark, but it appears little has changed with Oracle’s lawyers taking a dim view of a new British company called “Rust for JavaScript Developers Ltd.”

Sid Chatterjee on Twitter

Trivia: This trademark issue is why the standardized form of JS is called ECMAScript.

IN BRIEF:

???? Turns out even Nintendo uses JavaScript. A developer discovered that 2015’s Mario vs. Donkey Kong: Tipping Stars for the Wii U and 3DS was written with HTML and JavaScript under the hood and managed to build a shim to get it running in a normal browser.

Chrome 113’s DevTools will allow you to override network response headers, including CORS headers. It also offers Nuxt, Vite, and Rollup debugging improvements.

???? “Switching to rspack from webpack+babel has reduced our build times by 85%.”

We covered Node.js 20’s release last week, but if you want to dig deeper into the new (experimental) permissions model, here are the full docs.

In a recent bug report on the React repo Dan Abramov noted that if you use Preact Signals with React, you forfeit any guarantee that React will work correctly and that “if React was a piece of hardware, this is exactly the kind of thing that voids the warranty.”

A sneak peek of what’s coming up in Angular 16.

RELEASES:

NodeBB 3.0
↳ JS powered forum system.

Ink 4.2
↳ Build CLI apps React-style.

Rspack 0.1.9
↳ Fast Rust-based web bundler.

create-svelte 4.0
↳ CLI for creating SvelteKit projects.

???? Articles & Tutorials

Exploring the Potential of Web Workers for Multithreading on the Web — Looks at the importance of Web Workers for multithreading in the browser, including the limitations and considerations of using them and the strategies for mitigating potential issues associated with them.

Sarah Oke Okolo

???? Partytown is worth considering if you’d like to run potentially resource intensive third-party scripts in Web Workers.

Dissecting npm Malware: Five Packages and Their ‘Evil’ Install Scripts — npm related security continues to be a big topic and a common security vector is the install script that’s run when you install a package.

Gabi Dobocan (Sandworm)

Automate Visual Tests with Chromatic—Powered by Storybook — Verify visual changes and component logic on each commit. Get started with a $500 credit using code JSWEEKLY.

Chromatic sponsor

Use Fuse.js for Quick and Easy Fuzzy Searching — Fuse.js is a zero-dependency fuzzy search library you can use to offer search features in the browser without a dedicated search-oriented backend.

Doug Shipp

Modern Alternatives to Create React App — create-react-app was the ‘go to’ for building single-page React apps, but this article touches on the wide variety of alternatives now in common use. (We’re on team Vite!)

Ayooluwa Aduwo

▶  Hot Takes on the Web — The creator of Svelte shares his thoughts on various frontend trends.

Rich Harris

How to Display a View Counter on Your Blog with React Server Components

Sebastien Castiel

???? Code & Tools

Vuetify 3.2: A Material Design Framework for Vue.js — If you’re building a Vue.js app and would rather hand off the main design decisions to someone else, yet still have a beautifully designed app, this is the component framework for you. GitHub repo.

Vuetify Team

“Super stoked for all the features coming out in v3.2 today but the one that stands out most is the global defaults improvements. It makes virtual components super powerful.”

___
John Leider, creator of Vuetify

TestGPT | Generating Meaningful Tests for Busy Devs — Get non-trivial tests suggested right inside your IDE, so you can code smart, and stay confident when you push.

CodiumAI sponsor

Memize 2.0: Unabashedly-Barebones Memoization Library — The goal here is speed, and it claims to be the fastest option. It clocks in at just 0.3KB minified, too – unsurprising, since the implementation is very straightforward.

Andrew Duthie

w2ui 2.0: A Framework Agnostic UI Library — Somehow we’d never encountered this before, but w2ui is a interesting, compact suite of common components including a grid, toolbar, tabs, and sidebar, that work with vanilla JS projects or those built with Angular, React, etc. Demos here.

Vitali Malinouski

Alfaaz: The Fastest Multilingual Word Counter — We’ll take their.. word for it ???? but at almost 1 gigabyte per second and support for CJK texts and Arabic and Urdu alphabets, there’s a lot on offer here.

Abdullah Atta

Satori: Convert HTML and CSS to SVG — Designed to be used with React and JSX. It doesn’t support all HTML but is designed to provide a familiar way to generate images from code.

Vercel

Add a Full-Featured Notification Center to Your App in Minutes

Courier sponsor

Linker.js: Access C, C++, Rust and Go Libraries from Node.js — A dynamic C-shared library linker that provides an interface for accessing any C-shared libraries (which all of C, C++, Rust and Go can produce). Linux only for now.

Bitair

Editable: An Extensible Rich Text Editor Framework — Currently depends on React, with future plans for a plain JavaScript version. Its primary feature is that it avoids using the contenteditable attribute for better interoperability. Try it in this playground.

Editable

???? Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

QUICK RELEASES:

StatiCrypt 3.3
↳ Password protect a static HTML page.

tween.js 20.0
↳ JavaScript/TypeScript animation engine.

supercluster 8.0
↳ Geospatial point clustering library for browsers & Node.

Mercurius 13.0
↳ Implement GraphQL servers with Fastify.

htmx 1.9.1

Playwright 1.33

Transformers: JavaScript in Disguise

Posted on by

#​630 — March 17, 2023

Read on the Web

JavaScript Weekly

????  Transformers.js: Running ML Models in the Browser — Transformers are a type of machine learning model often used for natural language or visual processing and while running such models directly in the browser is in its infancy, Transformers.js opens up some ML models to you with some impressive demos here.

Xenova

????  Celebrating 10 Years of Electron — It feels like Electron pops up everywhere (Slack, Spotify, VS Code, and more) so it might feel surprising it’s only been with us for a decade. Slack and Electron developer Erick Zhao gives thanks to Electron’s developers, the community, gives us a bit of Electron related history, and reassures us Electron is still going strong.

Erick Zhao

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Announcing TypeScript 5.0 — Note that TypeScript doesn’t follow semantic versioning, so this is as much a ‘major’ release as 4.9 was.. but 5.0 looks cool anyway. This release of the typed JavaScript superset is packed with features like decorators, improved ESM project support for Node and bundlers, const type parameters, and more.

Daniel Rosenwasser (Microsoft)

Turbowatch: File Change Detector and Task Orchestrator — Not just that but it claims to be extremely fast and “if you ever wanted something like Nodemon but more capable, then you are at the right place.” This looks very promising and the README is full of examples.

Gajus Kuizinas

IN BRIEF:

BREAKING NEWS: The JS Party podcast has just dropped an episode called ▶️ The Future of React – so new, we haven’t listened to it, but it features Dan Abramov and Joe Savona so may make for good weekend listening..

“The most dangerous command you run every day: npm install” says Socket, who are introducing what they call ‘safe npm’, a transparent wrapper around npm designed to, well, make it less dangerous.

CORRECTION: In issue 627 we suggested the ECMAScript 2023 spec had entered a new draft stage. TC39 member Jordan Harband pointed out to us that it has been in such a state for some time. “There’s still a stage 4 PR not yet merged,” he noted, but there will be some progress in the next month.

Defer is a new ‘zero-infrastructure’ background jobs platform for Node.js apps.

Recently we linked to ???? Dittytoy, a fun online JavaScript environment for audio coding/experiments. Someone has somehow implemented an entire Commodore 64 SID synthesizer in it!

????  Developer Day: A Front-Row Seat to What’s New with Retool

Retool sponsor

RELEASES:

Node.js v19.8.0/1 (Current)

Jasmine 4.6
↳ Testing framework for browsers and Node.

pm2 5.3
↳ Popular Node production process manager.

Mongoose 7.0
↳ Popular MongoDB ODM for Node.js.

ESLint 8.36

???? Articles & Tutorials

Chrome 111 Gains a ‘View Transition’ Feature for SPAs — The View Transition API is only supported by Chrome so far, but allows easy animated page transitions within single-page apps (demo here). Luckily it suits progressive enhancement so you can start using it right now without feeling too guilty 😉 Multi-page app support is forthcoming.

Jake Archibald (Chrome Developers)

Create and Download Text Files with JavaScript — If you want your code to be able to generate a text (such as JSON) file on the fly and have it downloaded by the user’s browser, it’s reasonably easy.

Amit Merchant

Five Mistakes I Made When Starting My First React Project — Richard shares his early React mistakes with the hope you can learn from his misfortunes. He tackles topics like using defaultProps, propTypes, and class components.

Richard Oliver Bray

Too Much Tech Debt in Your node_modules? Our Team of JS Devs Can Help — We are a team of senior software engineers who specialize in tech debt. Let us modernize your JavaScript stack ????

UpgradeJS.com | JavaScript Upgrade Services sponsor

Progressively Enhancing a Table with a Web Component — Building a web component wrapper to add table sorting.

Raymond Camden

Shell-Free Node.js Scripting with Execa 7.1 — Execa is a popular process execution library for Node and the latest version includes an interesting $ method feature for writing zx-style scripts with it, making it even more useful for shell scripting style usecases.

ehmicky

What is Vite and Why Use It Over Create React App?

Luke Twomey

Pointers on Upgrading from Cypress v9 to v12

Gleb Bahmutov

How to Use v-model with Form Inputs in Vue

Dmitri Pavlutin

How to Create and Use Path Aliases in TypeScript Imports with Vite

Hasibul Hasan

What Is Deno and How to Use Its Sandbox?

Roman Zaynetdinov

???? Code & Tools

Template: A Simple Framework for Webapps — The author built it for his own projects, but notes: “It’s a joy to work in, feels “frameworky” but it’s just web standards with <100 lines of convenience JS wrapped around it. There is no magic beyond what the browser provides – I like it that way.” We do too.

William Blankenship

React ProseMirror: Integrate the ProseMirror Editor with React — ProseMirror is a toolkit for building rich text editors for the Web.

The New York Times

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

Wallaby.js sponsor

Fable 4.0: F# to JavaScript Compiler — If you fancy F#’s flavor of almost-entirely-functional development, this could be for you. GitHub repo.

Fable

MiniSearch: Small In-Memory Fulltext Search Engine for Browser and Node — The strength is that the indexed data is stored locally, allowing it to work offline and giving good performance, as seen in this demo.

Luca Ongaro

css-variable: Tiny Treeshakable Library to Define CSS Custom Properties in JS — Compatible with popular CSS-in-JS libraries like Emotion, styled-components, Linaria, etc., and it boasts better CSS minification and smaller virtual DOM updates, among other features.

Jan Nicklas

Tremor 2.0: The React Library to Build Dashboards Fast — Provides an array of modular components to build data-driven dashboards. v2.0 is the “first step towards a production-ready version of Tremor” and sees a full switch to Tailwind CSS. Homepage.

Tremor Labs

Stable Diffusion Plugin for Photoshop — Writing code that worked with Adobe’s weird JS variant was ghastly, but this uses their new ‘UXP’ based approach, so is interesting enough for that alone. This plugin also opens up the Stable Diffusion generative art system to Photoshop users.

Abdullah Alfaraj

Flexboard: A React Component Library for Resizable Sidebars — Try the live example. The code allows you to set min/max sizes for the resizable parts of the layout.

Dorbus

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

Software Engineer (Frontend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Sticker Mule

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

Fuite 2.0
↳ Tool for finding memory leaks in web apps.

???? wavesurfer.js 6.6
↳ Navigable waveform built on Web Audio & canvas.

Svelte-Inview 4.0
↳ Svelte action that monitors when an element enters/leaves the viewport.

Discord.js 14.8
↳ Library for using the Discord chat API.

Plotly.js 2.20
↳ Powerful charting library. (Examples.)

Recharts 2.5
↳ React + D3 charting library. (Examples.)

deepmerge 4.3.1
↳ Merges the enumerable properties of objects.

Vue Testing Library 7.0

React Table Library 4.1

JavaScript sans build systems?

Posted on by

#​626 — February 17, 2023

Read on the Web

JavaScript Weekly

Writing JavaScript Without a Build System — Using a variety of build tools for things like bundling and transpiling is reasonably standard in modern JavaScript development, but what if you want to keep things simple? For simple things, it’s not necessary, says Julia. This led to a lot of discussion on Hacker News.

Julia Evans

Ryan Dahl, Node.js Creator, Wants to Rebuild the Runtime of the Web — A neat bit of journalism about the alternative JavaScript runtime Deno and what Ryan Dahl is trying to achieve with it and how Ryan handled the stress of being known as the creator of Node.js.

Harry Spitzer / Sequoia

Broadcasting a Live Stream With Nothing but JavaScript — Live streams typically use third-party software to broadcast, but with Amazon Interactive Video Service, you can build a powerful, interactive broadcasting interface with the Web Broadcast SDK and JavaScript. Click here to learn more.

Amazon Web Services (AWS) sponsor

core-js’s Maintainer Complains Open Source Is ‘Broken’ — core-js is a popular universal polyfill for JavaScript features and its author has run into his fair share of bad luck which has culminated in this lengthy post on the state of the project, his issues in securing an income and, well, the downsides to living in Russia. The Register has tried to balance out the story.

The Register

IN BRIEF:

🐒 The just released Firefox 110 for Android now supports Tampermonkey, an extension for running JavaScript ‘userscripts’ on sites you visit.

The Angular project is taking steps to revamp its reactivity model to enable fine-grained change detection via signals.

The latest beta of iOS and iPadOS 16.4 supports the Web Push API for home screen webapps.

🐦 A fun Twitter thread where Qwik’s Miško Hevery attempted to demonstrate why a = 0-x is about 3-10x faster than a = -x before being told about a flaw in his benchmark. There is still a performance difference, though.

▶️ The React.js documentary we mentioned last week has now been released and it’s a heck of a watch – you’ll need 78 minutes of your time though.

RELEASES:

Node.js 19.6.1, 18.14.1, 16.19.1 and 14.21.3.

JavaScript Obfuscator 4.0 – Code scrambler.

Shoelace 2.1
↳ Framework agnostic Web components.

Mermaid 9.4
↳ Text to diagram generator. Now with timeline diagram support.

Cypress 12.6

📒 Articles & Tutorials

Use a MutationObserver to Handle DOM Nodes that Don’t Exist Yet — Comparing the effectiveness of the MutationObserver API with the conventional method of constantly checking for the creation of nodes.

Alex MacArthur

Well-Known Symbols in JavaScript — Hemanth, a TC39 delegate, shows off 14 symbols and where they can come in useful.

Hemanth HM

🚀 Monitor and Optimize Website Speed to Rank Higher in Google — Monitor Google’s Core Web Vitals and optimize performance using in-depth reports built for developers. Improve SEO & UX.

DebugBear sponsor

Why to Use Maps More and Objects Less — A journey down a performance rabbit hole.

Steve Sewell

Adopting React in the Early Days — A personal history lesson providing context around React’s evolution. While React might be an obvious, even safe, choice now, that wasn’t always true.

Sébastien Lorber

An Animated Flythrough with Theatre.js and React Three Fiber — How to fly through a 3D scene using the Theatre.js JavaScript animation library and the React Three Fiber 3D renderer. This is the sort of thing that used to be Very Difficult™ but is now relatively trivial.

Andrew Prifer (Codrops)

How to Change the Tab Bar Color Dynamically with JavaScript

Amit Merchant

Is Deno Ready for Primetime? One Dev’s Opinion

Max Countryman

Using Playwright to Monitor Third-Party Resources That Could Impact User Experience

Stefan Judis

🛠 Code & Tools

Dependency Cruiser: Validate and Visualize JavaScript Dependencies — If you want a look at the output, there’s a whole page of graphs for popular, real world projects including Chalk, Yarn, and React.

Sander Verweij

Devalue: Like JSON.stringify, But.. — “Gets the job done when JSON.stringify can’t.” Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.

Rich Harris

🧡 JavaScript Scratchpad for VS Code (2m+ Downloads) — Get Quokka.js ‘Community’ for free: #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

NodeGUI: Build Native Cross-Platform Desktop Apps with Node.js — Unlike Electron which leans upon webviews and HTML, NodeGui uses a Qt based approach. This week’s 0.58.0 release is the first stable release based on Qt 6 and offering high DPI support.

NodeGui

DOMPurify 3.0: Fast, Tolerant XSS Sanitizer for HTML and SVG — A project that’s nine years old today but still actively developed. Supports all modern browsers (IE support was only just dropped) and is heavily tested. There’s a live demo here.

Cure53

Pythagora: Generate Express Integration Tests by Recording Activity — This is a neat idea still in its early stages. Add a line of code after setting up an Express.js app and this will capture app usage and generate integration tests based on the interactions. (▶️ Screencast demo.)

zvone187 and LeonOstrez

Try Stream’s Free Trial of SDKs for In-App Chat

Stream sponsor

grep.app: Search Code Across a Half Million GitHub Repos — A code search engine that lets you use regexes or syntax in your search. Considering what it is, it’s pretty fast and has an extensive index (over half a million public repos from GitHub, allegedly).

grep.app

tsParticles: Particles, Confetti and Fireworks for Your Pages — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support.

Matteo Bruni

💻 Jobs

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.

Stimulus

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

QUICK RELEASES:

Minimatch 6.2
↳ Glob matcher library, as used in npm.
    minimatch(“bar.foo”, “*.foo”)

React Accordion 1.2
↳ Unstyled WAI-ARIA-compliant accordion library.

ScrollTrigger 1.0.6
↳ Have your page react to scroll changes.

VeeValidate 4.7.4
↳ Popular Vue.js form library

Express Admin 2.0
↳ Admin interface for data in MySQL/Postgres/SQLite.

Execa 7.0
↳ Improved process execution from Node.js.

React Tooltip 5.8

Why document.write() is bad

Posted on by

#​622 — January 20, 2023

Read on the Web

JavaScript Weekly

Why Not document.write()? — Many moons ago, document.write was a mainstay of client-side JavaScript code, but it’s long been considered a bad practice – why? Harry digs in, noting that it “guarantees both a blocking fetch and a blocking execution, which holds up the parser for far longer than necessary”.

Harry Roberts

New: The WebAssembly JavaScript Promise Integration API — A technical explanation from the V8 team on a new API to let WebAssembly apps bridge the synchronous / asynchronous gap of expectations around external functionality (consider that many apps are written synchronously, but modern Web APIs are usually asynchronous). JSPI helps bridge both worlds and can be tested via a flag in Chrome.

McCabe, Michaud, Rezvov, Dahl / V8 Team

Break the Programming Mold with Dependency Injection — Keep your code on the cutting edge with dependency injection in JavaScript. Check out Snyk’s guide that gives a breakdown of what dependency injection is, when you should use it, and what popular JavaScript frameworks it’s implemented.

Snyk sponsor

Why Is My Jest Suite So Slow? — Jest is known for its speed and simplicity so the author was surprised at how quickly his team’s test suite was slowing down. This is a write up of the ensuing investigation along with the improvements that slashed test running time.

Steven Lemon

Bun v0.5 Released — Bun is another JavaScript runtime taking the world by storm and a level of Node compatibility has been baked in from the start. v0.5 adds support for node:readline, workspaces, a node:dns shim, and network socket creation support such that more Node.js-based database libraries work out of the box.

Ashcon Partovi

IN BRIEF:

The ▶️ latest episode of the JS Party podcast tackles ‘the rise and fall’ of JavaScript frameworks and the modern trend towards smaller ones.

The folks at NodeSource have put together a top 10 list of Node open-source projects ‘to keep an eye on’ in 2023.

Aurelia 2 is now in beta.

RELEASES:

⭐️ esbuild 0.17.0
↳ Popular bundler. Note that this is a key release with backwards incompatible changes.

Inertia.js 1.0
↳ Build SPAs for any backend.

React Native 0.71

Remix 1.10.0
↳ Popular full stack framework.

📒 Articles & Tutorials

🎨  Building an Accessible Theme Picker — An attractively presented, easy to follow tutorial for a handy site feature.

Sarah L. Fossheim

Fixing a Memory Leak in a Production Node.js App — Kent encountered a variety of weird memory and CPU usage spikes in his Node-powered app and decided to figure out what was going on. This post walks through his complete journey, with plenty of side problems encountered along the way, before discovering the root cause was where he least expected it.

Kent C Dodds

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

📊  A Beginner’s Guide to Chrome Tracing — For when you want to go deeper than the Performance tab. With tracing, you can record what a browser is up to far behind the scenes.

Nolan Lawson

Handling Errors Like a Pro in TypeScript — “Learn the design pattern I use to handle errors and write cleaner code.”

Kolby Sisk

A Beginner’s Guide to async/await with Examples

James Hibbard

10 Mistakes to Avoid When Starting with Vue 3

Fotis Adamakis

🛠 Code & Tools

RoughNotation: Cute Animated ‘Rough’ Text Annotations — Uses Rough.js (itself a project worth checking out) to get a hand-drawn look. Lots of nice interactive examples on the page showing a variety of annotation styles (boxes, underlines, circles..)

Preet Shihn

Free Website Speed Test: Does Your Site Meet Google’s Core Web Vitals? — Get an in-depth technical analysis of your site and learn how to make it fast. Rank higher in Google & deliver great UX.

DebugBear sponsor

Modern Errors: Handle Errors in a Simple, Stable, Consistent Way — Create error classes, wrap or aggregate errors, or use one of several plugins to do things like print bug reporting info, print stack traces, or more. Happy in both Node and the browser.

ehmicky

Shifty: A Small, Fast Tweening Engine — All it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. GitHub repo.

Jeremy Kahn

Barba.js: For Smooth Visual Transitions Between Pages — You certainly can’t say the project’s homepage doesn’t show off all of its features! For such a dramatic set of effects, things feel smooth and.. surprisingly tolerable 😁 GitHub repo.

De Rosa, Michel, et al.

Rete.js 1.5: A Framework for Visual Programming — Create a node-based editor in the browser and apply logic. Check out these demos on CodePen. GitHub repo.

Vitaliy Stoliarov

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

gpu-io: GPU-Accelerated Computing Library — for physics simulations and other mathematical calculations. A neat look at the power of WebGL. Several examples.

Amanda Ghassaei

Chart.js 4.2
↳ Simple Canvas-based charts. (Samples.)

Serialize JavaScript 6.0.1
↳ Serialize JS to a JSON superset.

axios-retry 3.4
↳ Axios plugin that retries failed requests.

Axios 1.2.3 – Popular HTTP client library.

Commander.js 10.0 – Node.js CLIs made easy.

Mineflayer 4.7 – JS API for Minecraft bots.

Wretch 2.4 – Fetch API wrapper with niceties.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Java-Script Jarre

Posted on by Simon Helberg

#​621 — January 13, 2023

Read on the Web

JavaScript Weekly

The State of JS 2022 — The State of JS is one of the JavaScript ecosystem’s most popular surveys and this time 39,471 folks took part giving us a snapshot of the tools, technologies, and language features people are using (or not using!) There’s a lot to go through, but here are some key points:

top-level await is the most newly adopted feature recently.
The JavaScript / TypeScript balance shows a majority of developers using TypeScript over JS.
Express remains by far the most popular backend framework with Nest, Fastify, Strapi, and Koa following somewhat behind.
Other interesting results can be found in JS pain points, what is currently missing from JS, and the ‘Awards’ for stand out items (complete with snazzy visual effects).

Devographics

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

🗣 Is TypeScript Worth It? — Time saver or waste of time? The relationship between TypeScript and JavaScript remains a complex one. An extensive discussion took place on Hacker News this week and, notably, TypeScript PM Daniel Rosenwasser popped up to respond to some of the concerns.

Hacker News

IN BRIEF:

You’ll be aware of JavaScript’s strict mode but one developer thinks we need a stricter mode to fix several other syntax issues.

Publint is an online tool for ‘linting’ live npm packages to see if they are packaged correctly, as a way to ensure maximum compatibility across environments.

RELEASES:

Node v19.4.0 and v18.13.0 (LTS)

Commander.js 9.5
↳ Node.js command-line interface toolkit.

Angular 15.1

Pixi.js 7.1 – Fast 2D on WebGL engine.

📒 Articles & Tutorials

The Gotcha of Unhandled Promise Rejections — A rough edge with promises that can sneak up on you. Jake looks at a ‘gotcha’ around unhandled promise rejections and how to work around it.

Jake Archibald

HTML with Superpowers: The Guidebook — A free resource introducing Web Components, what they are, and what problems they’re trying to solve. You can see the Guidebook directly here.

Dave Rupert

With Retool You Ship Apps Fast with 100+ Perfectly Crafted UI Components — The fast way for devs to build and share internal tools. Teams at companies like Amazon, DoorDash & NBC collaborate around custom-built Retool apps to solve internal workflows.

Retool sponsor

Everything About React’s ‘Concurrent Mode’ Features — An in-depth, example-led exploration of Concurrent Mode (now more a set of features integrated into React 18 than a distinct ‘mode’).

Henrique Yuji

Using GitHub Copilot for Unit Testing? — Even if you find the idea of a AI tool like Copilot writing production code distasteful, it may have a place in speeding up writing tests.

Ianis Triandafilov

How to Destructure Props in Vue (Composition API) — How to correctly destructure props object in a Vue component while maintaining the reactivity.

Dmitri Pavlutin

Using Inline JavaScript Modules to Prevent CSS Blockage

Stoyan Stefanov

How to Build a GraphQL Server with Deno

Andy Jiang

🛠 Code & Tools

Gluon: Framework for Creating Desktop Apps from Sites — A new approach for building desktop apps on Windows and Linux from Web sites using Node (or Deno) and already installed browsers (Chromium or Firefox). Initial macOS support has just been added too.

Gluon

Structura.js: Lightweight Library for Immutable State Management — ” It is based on the idea of structural sharing. The library is very similar to Immer.js, but it has some advantages over it.”

Giuseppe Raso

Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers — High-resolution, crystal-clear screen sharing, low-latency remote control, and less CPU usage than you’d think possible.

Tuple sponsor

Bay.js: A Lightweight Library for Web Components — Makes it easy to create web components that can be reused across projects. It also boasts performant state changes and secure event binding.

Ian Dunkerley

Twify: Scaffold a Tailwind CSS Project with a Single Command — You can use your preferred package manager and it supports creating projects with Next.js, Nuxt 2/3, SvelteKit, Remix, Angular, and more.

Kazi Ahmed

Lazy Brush 2.0: A Library for Smooth Pointer Drawing — Allow your users to draw smooth curves and straight lines with your mouse, finger or any pointing device. This long standing library has just migrated to TypeScript and gained a new ‘friction’ option to customize the feel. GitHub repo.

Jan Hug

➗ Mafs: React Components for Interactive Math — Build interactive, animated visualizations using declarative code with illustrative demos like bezier curves. The documentation is fantastic – check out how easy it is to make plots. Or just head to the GitHub repo.

Steven Petryk

Are You Looking for a New Observability Tool?

TelemetryHub by Scout sponsor

Hyphenopoly 5.0: A Polyfill for Client-Side Hyphenation — An interesting use of WebAssembly here.

Mathias Nater

visx 3.0
↳ D3-powered visualization React components.

Atrament 3.0
↳ Library for drawing and handwriting on a canvas element.

HLS.js 1.3
↳ Library to play HLS (HTTP Live Streaming) in browsers, with MSE support.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Backend Engineer, TypeScript (Berlin / Remote) — Thousands of people love our product (see Trustpilot for yourself). Join the team behind it and help us scale. 🚀

Feather

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

🎶 Écoute la musique..

Oxygene Pt 4, as Performed by JavaScript — This is fun. Dittytoy is a simple, JavaScript-powered online generative music tool and someone has put together a surprisingly faithful rendition of perhaps one of the best known instrumental synth songs ever, all the way from 1976.

Dittytoy