Tag: coding

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.

Comparing test assertion styles in JavaScript

Posted on by

#​657 — October 5, 2023

Read on the Web

JavaScript Weekly

An Interactive Intro to CRDTs — Conflict-free replicated data types (the so-called CRDTs) provide a popular approach to replicate data across numerous clients and allow live collaboration between them without conflicts. This post really digs into what makes CRDTs tick well, complete with interactive examples.

Jake Lazaroff

Test Assertion Styles in JavaScript — Isaac, fundamental to the development of npm and the growth of Node, shares his thoughts on the two main approaches common in JavaScript testing APIs and which he prefers best.

Isaac Z. Schlueter

Free Course: Land a Software Engineering Role — Jerome Hardaway has helps over 300 folks get a software development job — now he shares his advice in this video course — featuring resume tips, networking advice, how to optimize your GitHub profile for technical scrutiny, and more.

Frontend Masters sponsor

🔵 TypeScript 5.3 beta has been released with improved support for import attributes, improved type narrowing in numerous situations, and inlay hints in VS Code can now jump you to the type’s definition.

🔐 npm provenance is now generally available on the main npm registry. Here’s a live example.

🎨 Adobe officially launched its version of Photoshop for the Web last week and Addy Osmani wrote a great post showing off all the web technologies it took to make it happen. The modern browser is a powerhouse!

🏠 In June we featured val.town, an interesting site where you can write and deploy TypeScript in a social and serverless fashion. Big changes are coming in the shape of Val Town v3. A platform to watch.

🤔 Was JavaScript really made in 10 days? It’s complicated.

⚠️ The forthcoming ESLint 9.0 is a significant enough release that you might want to prepare your custom rules for it in advance.

🎉 RELEASES:

Node v20.8.0 (Current) – Key performance improvements for streams.

Sinon 16.1 – Provides test spies, stubs and mocks.

Astro 3.2, Redux Toolkit 1.9.7, and pnpm 8.8

📒 Articles & Tutorials

‘Strong Static Typing, A Hill I’m Willing to Die On…’ — Starting off with TypeScript and moving on to Rust, the author shares why he feels so strongly that when it comes to having static types in a language, there really is no argument. (This then led to extensive discussion on Hacker News.)

Tom Hacohen

📗  The Story of Third-Party JavaScript (The Book) — Manning published a book by Ben Vinegar and Anton Kovalyov ten years ago that was entirely focused on writing JavaScript to run on other people’s sites – quite apt as the authors worked at Disqus at the time! This post isn’t about the topic itself but goes deep into how the book came together and how well it did.

Ben Vinegar

📅  JetBrains JavaScript Day 2023: A Virtual Event You Won’t Want to Miss — Get up to speed with modern JavaScript and TypeScript development in just one day.

JetBrains sponsor

Working with a TypeScript Monorepo with npm Workspaces — npm’s workspaces feature makes it easier to manage multiple packages within a single top-level package/monorepo.

Dmitry Kudryavtsev

Test Your React Libraries Locally with Yalc — Yalc simplifies the process of working with and ‘publishing’ packages entirely locally so you can try things out without publishing to a remote, and potentially public, registry.

Andrew Israel (PropelAuth Blog)

▶  Let’s Create a Filter Table Component in Vue

Andrew Schmelyun

Integrating Slonik with Express.js — A type-safe Postgres client library.

Gajus Kuizinas

Next.js 13 vs Remix: A Case Study

Prateek Surana

Using the Intl Segmenter API

Kilian Valkhof

🛠 Code & Tools

Tailwind Elements 1.0: 500+ Bootstrap Components Recreated with Tailwind — Claims to offer more functionality compared to Bootstrap and follows a ‘minimal’ Material-esque design language for user familiarity. Easily integrates with Angular, Vue, etc.

Tailwind Elements

Lite YouTube Embed 0.3: A Faster Youtube Embed — Faster than the official one, at least. v0.3 implements reliable autoplay. There’s a live demo here.

Paul Irish

Day.js: A 2KB Immutable Date Library — Pitched as a Moment.js alternative with a mostly compatible API, Day is a smaller library for parsing, validating, manipulating, and displaying dates and times.

iamkun

Stop Feeling Lost and Inefficient When Debugging via console.log — See console.log output and runtime errors alongside your code. No config, no setup, no hassle. Supports Vite, Bun, Webpack, Next.js, Remix, and more.

Wallaby Team sponsor

Viselect: Let Users Visually Select DOM Elements — If you’ve got a variety of elements and you want users to be able to select them in groups, individually, or even in multiple groups, this lets you offer that functionality easily. Can be used in a vanilla fashion or with integrations for React or Vue.js.

Simon Reinisch

Tailwind Next.js Starter Blog 2.0: A Starter Template for a Next.js Blog — An up-to-date template using the modern Next.js app directory structure along with server components. A full explanation of the updates.

Timothy Lin

Kaluma: A Tiny JS Runtime for the Raspberry Pi Pico — Can you get a JavaScript runtime into the 64KB necessary to run on the Raspberry Pi Pico (which uses the RP2040 microcontroller)? Kaluma can.

Kaluma Project

sort-on 6.0: Sort Arrays on an Object Property — Short & sweet. Samples.

Sindre Sorhus

Craft.js 0.2: A React Framework for Building Drag and Drop Page Editors — It’s a bold move to make the landing page for your project be a text editor itself, but we like it. GitHub repo.

Prev Wong

Create Collaborative Apps Like Figma and Miro in Days with Ably

Ably sponsor

📅 React Native Big Calendar 4.3 – A Google Calendar/Outlook-style large calendar control.

📊 Lightweight Charts 4.1 – High performance financial charting for canvases. Release notes.

CKEditor5 40.0 – Commercial rich text editor framework. Now with an AI assistant feature.

article-extractor 8.0 – Extract article content for a URL in Node.

Shaka Player 4.5 – Library to play adaptive media formats (DASH, HLS and MSS).

Ziggy 1.7 – Use Laravel named routes in JavaScript.

Marked 9.1 – Markdown parser & compiler.

💻 Jobs

Apply Now and Work #LikeABosch — Our promise to our associates is rock-solid: we grow together, enjoy our work & inspire each other. Join in & feel the difference.

Bosch

Frontend Developer 🚀 (Remote, Work from Anywhere 🏖️) — Enjoy TypeScript, React, GraphQL and performance? Join in building our super-fast headless commerce service with a beautiful UI.

Crystallize

🎁 A VS Code Bonus

Awesome VS Code: A Curated List of Themes and Extensions — Yep, it’s one of those ‘awesome’ lists, but it’s packed not only with links to themes and useful extensions, but it has screenshots for most of them too. Skim through, something will jump out at you.

Valerii Iatsko

Microsoft spills the tea on TypeScript

Posted on by

#​655 — September 21, 2023

Read on the Web

JavaScript Weekly

▶  TypeScript Origins: The Documentary — You know you’ve made it when you get your own documentary! This has just dropped but is well produced, packed with stories from TypeScript’s co-creators, users, and other folks at Microsoft, and kept me entertained. It goes particularly deep into the motivations and process behind its creation, including why Microsoft felt it was worth pursuing.

OfferZen Origins

🔥 The takes get spicer 25+ minutes in as various TypeScript users chip in with their opinions, and even Daniel Rosenwasser, now program manager of the TypeScript team, says he initially worried that Microsoft might “f**k it all up.” 😅 Ryan Dahl pops up about an hour in too.. so I hope you’ve got some time spare.

Patterns for Reactivity with Modern Vanilla JavaScript — When data changes, you often want to do things, and the process that makes that happen is reactivity. While many libraries or frameworks like React or Vue offer reactive solutions out of the box, you can do it all with vanilla JavaScript too, and this post digs into many of the patterns you might need to use, complete with examples.

Marc Grabanski

Handsontable: Data Grid With Spreadsheet Superpowers — There are a lot of JavaScript data grids out there, but none are quite like Handsontable. Its Excel-like design, keyboard shortcuts, and navigation make it the perfect tool for developers.

Handsontable sponsor

Deno 1.37: Modern JavaScript in Jupyter Notebooks — Not content to let Bun take all the headlines, Deno has come up with something pretty neat here. Deno 1.37 ships with a Jupyter Notebook integration so you can create interactive REPL sessions but using the JavaScript you know and love, rather than Python.

The Deno Team

JavaScript Minification Benchmarks — A frequently updated benchmark suite and results comparing the speed and quality of JavaScript minification across a variety of tools including esbuild, Babel, Bun, SWC, and Uglify.

Hiroki Osame

⚡️ IN BRIEF:

The Svelte team offers a sneak peek at the forthcoming Svelte 5 and introduces the idea of ‘runes’: “Like every other framework, we’ve come to the realisation that Knockout was right all along.”

Happy 27th birthday to JScript! JScript was a version of JavaScript that Microsoft put into IE 3.0 primarily to avoid trademark issues around the name of JavaScript. No-one cares much about that anymore, despite Oracle still technically holding the JavaScript trademark.

Folks are discussing whether Node.js needs a mascot of its own.

Want to support anyone doing great work on JavaScript projects? You can nominate them for a GitHub Star.

If you rely upon the npm package download counts at all, the daily counts for all packages was zero on September 13 and 14 (example). Why? “This issue remains under investigation,” says npm support.

🎉 RELEASES:

Remix v2 – Popular full stack web framework.

Bun 1.0.2 – Bugfixes, faster bun –watch, it now uses V8’s Date parser, and Fastify apps now work too.

Node.js v20.7 (Current) – Multiple –env-files now supported.

Next.js 13.5 – Faster, faster, faster.

📒 Articles & Tutorials

Getting Network Activity Under Control with Priority Hints — A look at how browsers can prioritize the loading of resources, how you can explicitly specify a priority when using fetch, and how different ways of loading scripts are prioritized.

Alex MacArthur

Securing Node Apps by Analyzing Real Command Injection Examples — When code can be manipulated to run unintended, arbitrary commands, it’s never going to end well.

Liran Tal

🚀  Coming Soon: Fixed-Cost Monthly Maintenance by UpgradeJS.com — Too much tech debt in your JavaScript app? Let us help. Slow and steady upgrades at your own pace. Releasing next week.

🌳 Bonsai by UpgradeJS.com sponsor

🧭  What’s New in Safari 17 — Safari 17 is now in beta on iOS 17 with the final release dropping across all of Apple’s platforms next week. On the JavaScript front, Safari and WebKit now fully support the Storage API, WebGL in Offscreen Canvas, v flag support on regexes, Set operation methods, URL.canParse, plus the much anticipated support for PWAs in macOS Sonoma.

Jen Simmons and the WebKit team

Testing Out the Alpine.js Intersect Plugin — A wrapper for the Intersection Observer API.

Raymond Camden

▶  How to Make Forms in Angular Reusable

Decoded Frontend

Clean Layout Architecture for Vue Applications

Fotis Adamakis

Incremental Static Regeneration for Angular

Enea Jahollari

🛠 Code & Tools

fx 30: The Go(lang)-Powered Terminal JSON Viewer — Yes, it’s written in Go, but fx has long been a useful tool for looking at JSON files, and it has just been rewritten from the ground up with a new look, regex search, fuzzy search, and support for “even the most massive JSON files.” You don’t need to worry about Go at all; it’s simply a fantastic tool for looking at JSON.

Anton Medvedev

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

Mantine 7.0: The Popular React Component Library — A big release for what is now one of the most popular React component libraries. As of v7, Mantine no longer relies on Emotion and components come with native CSS files, all components now support the system-set color scheme, CSS modules are now the default way to style components, and there are many smaller enhancements too.

Mantine Team

Chrono 2.7: A Natural Language Date Parser — Give it a string like “today”, “last Friday”, “2 weeks from now”, or even an entire date and time, and it’ll come up with a date object to suit.

Wanasit Tanakitrungruang

Theatre.js 0.7: Motion Design for the Web — Can be used both programmatically or via a visual editor to animate objects created with things like Three.js, React Three Fiber, HTML/SVG, or even just tween variable values.

Theatre.js Project

Track Errors and Performance Issues in Every Part of Your Stack

Sentry sponsor

Swup: A Flexible Page Transition Library for Server-Side Rendered Sites — A library that benefits hugely from checking out the demos. v4.4 adds experimental ViewTransition support.

Georgy Marchuk

Create Chrome Extension: A Scaffolding Tool for Chrome Extensions — Similar to create-react-app or Yeoman, this is specifically for starting extension development, with support for several frameworks, HMR, and light/dark modes.

Yalda

💡 Chrome Extension CLI is another option in this space.

Neutralinojs 4.14.0 – Imagine something like Electron but without the browser engine being bundled in. Supporting Linux, Windows, and macOS, it instead leans on what’s already present.

📅 React Lite Month Picker
↳ An elegant way to let users select a specific month.

React-Virtuoso 4.6 – Powerful virtual list component.

Faker 8.1 – Generate large amounts of fake data.

🔊 Peaks.js 3.1
↳ The BBC’s audio waveform UI component.

Ember.js 5.3

💻 Jobs

Nest.js Back-End Developer — Lead the development of a HealthTech platform, focused on Caregiver support. TypeScript, Nest.js, PostgreSQL, AWS, React/Next.js.

Carallel

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

“The best programs are the ones written when the programmer is supposed to be working on something else.”

___
Melinda Varian

Taking JavaScript into Python

Posted on by

#​650 — August 3, 2023

Read on the Web

JavaScript Weekly

A Tale of Evading JavaScript Anti-Debugging Techniques — When you’re poking arounddebugging code written and distributed by a third party, there might be some sneaky traps thrown in your path to prevent your usual techniques from working. What next? Disable breakpoints in DevTools? Use a proxy? What about.. recompiling your entire browser? 😆

Veritas

This reminds me of the guy who scraped pages by dumping heap snapshots from the browser – another fun post if you enjoy low level spelunking.

VanJS 1.0: A 1KB Reactive UI Framework Without React/JSX — 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. This week’s v1.0 release is a relatively big step forward for what is still a young project. GitHub repo.

Tao Xin

Add Excel-Like Spreadsheet Features to Your JavaScript Apps: SpreadJS — SpreadJS is the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View demos now.

SpreadJS from GrapeCity sponsor

PythonMonkey: JavaScript/WASM Interop for Python — The alpha release of a new way to bring Python and JavaScript together, by way of embedding Mozilla SpiderMonkey into the Python VM. This post introduces the concept with some examples, an idea of where the project is headed, as well as some Colab demos. GitHub repo.

Will Pringle

dnt: A Tool to Publish a Hybrid npm Module for ESM and CommonJS — From the Deno team comes a tool that lets you write modules in JavaScript or TypeScript and then transforms them to support CommonJS, ESM, browsers, Deno, Node, and more.

Andy Jiang (Deno)

⚡️ IN BRIEF:

🎧 The popular Syntax.fm podcast has had a run of interesting episodes lately covering topics like the idea of ▶️ server-side JavaScript standards, ▶️ Rust for JavaScript developers, and ▶️ the role of polyfills.

A social engineering campaign that targets tech employees has been spreading through npm malware, claims Feross Aboukhadijeh of Socket.

Radix UI is now available in Vue thanks to Radix Vue.

Google has unveiled some big improvements to how the Google Maps JavaScript code can be loaded.

Firefox 116’s DevTools now support Custom Object formatters. This feature, long supported by Chrome, lets sites determine how certain types of object representation are formatted in the console and debugger.

The Svelte project has posted its latest monthly update. There’s a lot going on in the Svelte world right now.

Logging and Tracing Re-invented. Stop Sampling, Get Axiom —
“In the beginning there was stdout….” Get started for free, or get 1tb for $25/mo.

Axiom sponsor

🎉 RELEASES:

Backbone 1.5 – Yes. Really. And it’s still a thing of beauty.

Shoelace 2.6 – Popular suite of agnostic UI Web Components.

Prisma 5.1 – Next-gen Node.js + TypeScript ORM.

eslint-config-prettier 8.10 – Turn off ESLint rules that clash with Prettier.

📒 Articles & Tutorials

Understanding React Server Components — If you’ve struggled to get your head around the ideas involved, and Dan Abramov’s ‘let’s recreate RSCs from scratch’ went too deep, this is a good, high-level explanation of the fundamentals covering what problems RSCs solve, why you might use them, and how Next.js makes it all easier.

Alice Moore (Vercel)

Type vs Interface: Which Should You Use in 2023? — Learn the key differences between interfaces and type aliases in TypeScript, including their use cases and important features to consider.

Matt Pocock

How to Build a Multilanguage Website with Next.js & Storyblok

Storyblok sponsor

Speeding Up V8 Heap Snapshots — When diagnosing a memory leak in a JavaScript app, engineers at Bloomberg encountered some weird performance issues with capturing a single full-size heapshot taking more than 30 minutes(!) at times. Here’s the full story of how they investigated and resolved the problem.

José Dapena Paz (Igalia)

‘If Web Components Are So Great, Why Am I Not Using Them?’ — Do Web Components have a marketing problem? Dave thinks so, and shares what he thinks the issues are for this slowly-adopted technology.

Dave Rupert

▶  How to Build a Drag-and-Drop Kanban Board — A complete screencast walkthrough of using React to build a Trello-like app based around the familiar Kanban board pattern. It also serves as an introduction to the dnd-kit drag-and-drop toolkit.

Kliton Bare

An Introduction to Quicksort — A good, beginner friendly introduction to the Quicksort algorithm, concluding with a JavaScript implementation. (Beware the floating burger though..)

Kirupa Chinnathambi

Everything Mux Learnt Migrating 50K Lines of Code to React Server Components

Darius Cepulis (Mux)

▶  Refactoring an Angular App to Modern NgRx — NgRx is a reactive state management approach for Angular.

Marko Stanimirovic

🛠 Code & Tools

tsup 7.2: Bundle Your TypeScript Library with No Config — Throw your .js, .json, .mjs, .ts, and .tsx files at the esbuild-powered tsup and say hello to transpiled, bundled code for distribution. More in this tutorial.

egoist

Vite React Boilerplate: A Production Ready Starter Template — A new ‘batteries included’ Vite + React app template that leans upon, well, a lot of batteries from Zustand to Zod to Storybook.

Ricardo Valdovinos

Add Authorization, MFA, Biometrics and More to Your JavaScript App in Just Minutes — It’s about time that somebody talked some sense about OAuth and JavaScript. So we did. You’re welcome.

FusionAuth sponsor

Hackathon Starter 8.0: A Boilerplate for Node Web Apps — For when you might want to start building a Node app quickly (like at a hackathon, say) including key features like auth/OAuth, Bootstrap 5, account management, email forms..

Sahat Yalkabov

OGL 1.0: A Minimal WebGL Framework — WebGL is far from the easiest technology to use on its own, so libraries like Three.js are often used to make it more accessible. OGL has a similar motive to Three.js while remaining far closer to the WebGL metal.

Nathan Gordon et al.

💻 Jobs

Senior Software Engineer (Frontend Lead) — Come lead Emerge’s web platform, used by teams like DoorDash, Square, Dropbox & Airbnb (our stack: Next.js, React, TS, Vercel).

🛸 Emerge Tools

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.

Size Limit 8.2: JavaScript Performance Budgeting Tool — Calculate the real ‘cost’ to run your JS app or lib and maintain an eye on performance and raise the alarm (in your CI system, say) when things go awry. Supports ES modules and tree shaking.

Andrey Sitnik

Stockfish.js 16 – The famous Stockfish chess engine in JS via WASM.

Marked 6.0 – Fast Markdown parser and compiler. Now rewritten in TypeScript.

eta (η) 3.1 – Embedded JS template engine. Now with Bun support.

Tremor 3.6 – React library for building dashboards.

Octokit.js 3.1 – ‘Batteries-included’ GitHub SDK.

React Image Gallery 1.3 – Image gallery carousel component.

YouTube.js 5.8 – Library to use YouTube’s private API.

🐴 Let’s hit the Oregon Trail

The Oregon Trail was a 2000+ mile wagon route used by traders and migrants headed west in the early days of the United States. It was also a hugely popular computer game that, more often than not, ended in disaster for the virtual settlers whose lives you directed.

Particularly popular on the Apple II and early Macs, you can give the game a spin via the following project:

Macintosh.js: A Virtual Macintosh Running via Electron — An impressive virtual machine emulating a 1991 Macintosh Quadra 900 with System 8, all running in Electron. We linked to this several years ago but it’s had some updates since then and runs faster than before. As well as a few games, such as Oregon Trail, there are a variety of apps pre-installed, including a trial of Adobe Photoshop 3 which starts up faster than my real Photoshop now.. (Download necessary since it’s an Electron app and all..)

Felix Rieseberg, Apple, et al.

Welcome to The Future of Software Development: Powered by Telemetry, Security, and AI

Posted on by

We made some big announcements during our keynote at Collision in Toronto; our AI Assistant, Adrian, and the open sourcing of our Node.js Runtime, N|Solid Runtime. They are a big part of our vision for the future of software development, one that is powered by telemetry, security, and AI – which was the topic of our talk. In this post we will share more about our vision and specifically how NodeSource is enabling that future.

NodeSource began as most great companies do; with smart, passionate people that saw a problem they had to fix: there was simply no good tooling for Node.js. We were Node believers and open-source project contributors on a mission to make Node more accessible for developers & safe for enterprises to adopt. Since our beginning we have provided the ecosystem with our insights, training, and binary distributions of the open-source packages – over 110 million downloads in the last year alone – powering Node applications in production all over the globe.

As a result of countless hours of ideating, coding and customer validation, N|Solid was born – an enterprise grade tool providing the deepest insights with the lowest overhead, all while continuing to keep ode apps secure. Today N|Solid is used by some of the largest organizations and developers globally. The mission that was set all those years ago is now more relevant than ever, over 30 million websites rely on Node.js and it’s one of the most used and loved technologies by developers worldwide. It’s been an amazing journey.

Revolutionizing Software Development: Advancing Telemetry, Security, and Efficiency with AI Innovation

We have continued to innovate, with our Node experts pushing to create the most advanced telemetry and security platform possible while still providing customers with world class support for Node. We have always believed that giving the very foremost data and insights was the best way to produce better software. Making software is continually challenging; the software development life cycle (SDLC) is highly inefficient.

You begin with an idea that you turn into code, then it gets built, tested and released for users to experience. Then you monitor for issues that are identified to triage and solve. Those fixes are added to other features to build, test, and release…and the cycle continues. While significant effort has been applied to make this process more efficient, these have invariably been small improvements. Tweaks really, to the overall process. Until now, fueled by the advancements in AI.

We believe that the future of software is intelligent software engineering, powered by telemetry, security & AI. The SDLC is augmented by applying AI that is trained with the right data to accelerate the production and maintenance of secure, highly performant code. It’s about building a new model – a generative loop based upon the intent of the code and its actual operation in production – bringing data and AI into the process in powerful new ways.

On the front end, AI is redefining the way code is written, from ChatGPT to GitHub’s CoPilot and beyond, Generative AI is creating code, documenting it, and writing test plans. These advancements are set to revolutionize the software development process on their own, replacing the often used copy/paste of code found from Google, StackOverflow, or existing codebases. Developers that leverage these new tools will have dynamically increased velocity of their code while still owning the solution. While significant, this is only a part of the solution of the future.

Unveiling the True Measure of Software: Quality and Performance in Production

The reality is that the quality and performance of software is only realized once it is in production, in use by real users. The telemetry data in this application is a key component for transforming the SDLC. How software performs in production, not how well software did in a test environment, is the true test for quality code. And the depth of that telemetry data is how you identify issues. This has long been our focus, not just to report on general metrics, but to go well beyond. This is why we established the measure of event loop utilization, worker thread monitoring, and more, to enable deep insights into application health and performance.

Application health is directly tied to security, more than ever today quality code is secure code. But, security is not static, there are new vulnerabilities that develop all the time. The visibility to these is critical, especially for production code. It’s why we offer our security tooling, NCM (Node Certified Modules) as a part of our platform. Enabling customers to have visibility to security issues from development and production live code.

It’s the depth of data and security health that unlock the opportunities with AI. It’s the other half of the equation of the future of software, powered by telemetry, security and AI. This is the future NodeSource is enabling.

N|Solid – the future of Node bringing the power of data and AI

With the announcement of our AI Assistant, “Adrian”, we are leveraging our unique and unparalleled data to help developers identify and resolve issues with tremendous speed and efficiency. Adrian will help every Node developer and devops engineer to not just view the telemetry, security, and alerts that matter – but to understand them, know their context and how to solve for them. It’s a game changer. It takes the power of the most advanced observability tool and the specific context of each application combined with our AI to resolve code issues fast.

Furthermore, our AI tools will assess code quality, identify cost optimizations, generate code and more. It’s like ‘god mode’ for Node.

This is the next step in our journey toward the future state of the SDLC. If you want to experience what Adrian can do, sign up HERE for our early access beta list and we will notify you when you can join the software development revolution.

About NodeSource, Inc.

NodeSource, Inc. is a technology company completely focused on Node.js and is dedicated to helping organizations and developers leverage the power of this technology. We offer the leading APM for monitoring and securing Node.js and provide world-class support and consulting services to help organizations navigate their Node.js journey. #KnowYourNode. For more information, visit NodeSource.com and follow @NodeSource on Twitter.

htmx in 100 seconds

Posted on by

#​647 — July 13, 2023

Read on the Web

JavaScript Weekly

Driver.js: Create On-Page Tours, Highlights, and Contextual Help — A no-dependency, vanilla JavaScript library for putting together page tours and contextual help systems. The project is a few years old but has just been entirely rewritten and gained numerous enhancements, plus a huge lick of paint. There are lots of examples to check out.

Kamran Ahmed

Component Party: A Rosetta Stone of UI Library Code Examples — A comparison of different frameworks (like React, Vue, Svelte, Angular, Ember, etc.) by way of simple code snippets covering various tasks.

Mathieu Schimmerling

Test and Validate APIs Effectively and Efficiently — Gain access to several API testing tools and features that help you automate repetitive tasks, stay organized, and build robust workflows to ensure your APIs remain reliable and performant.

Postman sponsor

Prettier 3.0: Now Powered by ES Modules — The popular multi-language code formatter gets a big upgrade with a refactoring to ES modules making up the biggest change (though it can still be used as a library via CommonJS). One side effect is Prettier now supports ESM-based plugins and async parsers which means some necessary changes for Prettier plugin developers.

Sosuke Suzuki

Crockford on Plain Old JavaScript and the DOM — Over the years, Douglas has asked us to only use the good parts of JavaScript, to ▶️ stop using JavaScript, and now he suggests abandoning “the libraries” to instead work with the DOM directly. Lea Verou 🐦 picked up on this story and said this suggestion still isn’t very practical for most web apps as of 2023.

Douglas Crockford

🎉 RELEASES:

Ember 5.1 – The ambitious JS framework that’ll never give up takes a big step into the TypeScript world with stable TypeScript support and types-a-plenty.

p5.js 1.7 – Processing-inspired JavaScript library for creative coding. v1.7 introduces WebGL 2 and frame buffer support.

Prisma 5.0 – A popular ORM for Node.js and TypeScript. 5.0 boasts significant performance improvements.

typescript-eslint 6.0

⚡️ IN BRIEF:

obj?.prop = value; The optional chaining assignment proposal advanced to stage 1 at TC39 this week. (Explanatory slidedeck.)

Popular YouTube channel Fireship explains ▶️ htmx in 100 seconds – well timed, since htmx is seeing a huge amount of fresh interest. And if you’re wondering who the mastermind behind Fireship is, Honeypot has put up ▶️ a short documentary about him.

The folks at Sandworm have shared a look at the state of the npm registry including lots of trivia, history, and stats on how many packages there are, as well as the most commonly used keywords in packages.

Google shares a case study on performance of scroll-driven animations using its new browser based API versus ‘classical JavaScript techniques.’ Unsurprisingly it’s much faster running away from the main thread, and the spec remains in draft for now.

npm will now check the linked source commit and repo when you view a package’s provenance information on npmjs.com and warn you when said provenance cannot be established.

GitHub is rolling out a beta of passwordless, passkey based authentication on GitHub․com.

📒 Articles & Tutorials

Useful Functions for a (Deno) HTTP Server — You could think of HTTP in a functional way with requests going in and responses/results going out. The author explores Deno’s new Deno.serve function and how both it and the /x/http_fns functions can provide a more functional approach to common HTTP tasks.

Jollytoad

Testing the Dark Scenarios of a Node.js App — Several examples of often overlooked things you should be testing. What happens when a service times out, code is mutating things it shouldn’t, or you have zombie processes milling around? These are some of the ‘dark scenarios’ it’s not too difficult to prepare for.

Yoni Goldberg and Raz Luvaton

The 2023 State of the API Report Is Here — The State of the API is the world’s largest survey and report on APIs, with findings from over 40K developers and API professionals.

Postman sponsor

Creating Randomized Zelda: Tears of the Kingdom Patterns — Nintendo’s new Zelda game uses repeated, geometric patterns as part of its aesthetic. This post looks at how to recreate such motifs with SVG and JavaScript.

Paul Hebert

5 TS Compiler Flags You Should Include in Your Project’s Config

Igor Konovalov

Deploying a Fastify and Vue 3 Static Site to Heroku

Liran Tal

Getting Started with Vector Databases in Node.js

Valeri Karpov

🛠 Code & Tools

MDX Editor: A Rich Markdown Editor React Component — A Lexical-powered Markdown editor for React apps that supports code blocks, tables, and more. The live demo shows off most of what you need to see.

Petyo Ivanov

Meet Your New Favorite Teammate: Cody, the AI Coding Assistant — Code faster with Cody, the only code AI that knows your entire codebase, like the pair programmer you always wanted.

Sourcegraph sponsor

electron-vite: Next Generation Electron Build Tooling — Fish and chips, Bert and Ernie.. some things are just better together, and so it goes with the Electron desktop app framework and the Vite frontend toolkit. There’s also an Electron Vite Boilerplate app to kick off a new app with.

Alex Wei

📊  Vizzu 0.8: A Library for Animated Data Visualizations — Making data visualizations is reasonably easy, but animating them is harder. Vizzu steps in to help you create animated data stories and explorations. There are lots of showcases and examples to peruse.

Vizzu Inc.

🐊  Putout: A Configurable, Babel-Based Linter and Code Transformer — Provides typical linting functionality with ESLint and code transformation with Babel, but distinguishes itself by being prepared to make “more drastic code transformations” than other tools. It’s not the most popular option but it makes a good case for itself in its thorough README.

coderaiser

Standardized Audio Context: Cross-Browser Web Audio API Wrapper — A side effect-free abstraction over a subset of the Web Audio API that works reliably across all mainstream browsers.

Christoph Guttandin

Kanel: Generate TypeScript Types from Postgres — It works by inspecting a live database and outputs code you can add to a TypeScript project and use with something like Knex – GitHub repo.

Kristian Dupont

React Authentication — Without Complexity

Userfront sponsor

Boa 0.17 – An experimental Javascript lexer, parser and compiler written in Rust that can be embedded into other projects – it now has a module system.

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

Release It! 16.1
↳ Automate npm package publishing and versioning.

zlFetch 6.0
↳ Convenience wrapper around the Fetch API.

Terminalizer 0.10
↳ Record your terminal and generate animated GIFs.

eslint-plugin-prettier 5.0
↳ Prettier, but as an ESLint rule.

Preact 10.16 – 3KB React compatible alternative.

💻 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.

🍩 Homer would approve

donut.js: donut.c, But in JavaScript — donut.c, dating from 2006, is a donut-shaped C program that, when run, animates a spinning ASCII text donut on the screen. Here’s a fresh and hot JavaScript variant!

Evan Zhou

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.

Douglas Crockford calls JavaScript ‘smelly.’

Posted on by

#​642 — June 8, 2023

Read on the Web

JavaScript Weekly

Polywasm: A Polyfill to Run WASM in JS Environments — The creator of esbuild is back with something fresh: a polyfill that uses live translation to be able to run .wasm files in JS environments that either lack a WebAssembly implementation or have it disabled. You can see how it performs in this special version of the esbuild playground.

Evan Wallace

Announcing TypeScript 5.1 — This release of the statically typed JavaScript superset is a gentle ‘quality of life’ step forward rather than a featureful extravaganza, but we get support for linked editing of JSX tag names, namespaced JSX attributes, the ability to have unrelated types for getters and setters, and undefined-returning functions no longer need an explicit return.

Daniel Rosenwasser (Microsoft)

How to Send Password Resets via SMS and Email Using Node.js & Next.js — When you’re building a web application, there’s a decision to make about how to handle users and authentication. There are many services and libraries to choose from, and the right choice will depend on the requirements of what you are building.

Courier.com sponsor

NakedJSX: Use JSX Without React — If you like JSX and would like to use it to help in the production of static HTML without using React itself, this command line tool is for you. It even extracts scoped CSS classes and deduplicates them.

David Hogan

Oh, you can also use NakedJSX to use JSX with jQuery, which you may either find useful or a fun way to troll your team, depending on how you roll. 😏

Dan Abramov Rebuilds React Server Components from Scratch — Having faced a raft of questions about Server Components, Dan has begun to write a series covering everything from the ground up by reimplementing a basic form of RSC from scratch. It’s not aimed at day-to-day React developers, but those who want to grok the ideas behind RSCs.

Dan Abramov

⚡️ IN BRIEF:

⭐️ Douglas Crockford, of JS: The Good Parts fame, ▶️ is back pointing out JavaScript is a ‘smelly’ language and ‘it’s time for the next thing.’ 😬

MDN’s reference pages on regular expressions in JavaScript have been substantially improved.

From Apple’s WWDC this week comes ▶️ a handy presentation on Safari’s DevTools, plus a barrage of news about Safari enhancements around the ‘spatial web’, JPEG XL support, the popover API, offscreen canvas support, local storage policies, extra JS regex features, and more.

Emma Twersky shares everything Angular related from the recent Google I/O 2023 event.

📘 Faraz K. Kelhini’s Text Processing with JavaScript is a new book, currently in beta with a final release due in August from Pragmatic Bookshelf. The table of contents shows it to be packed with useful stuff.

RELEASES:

Tesseract.js 4.1 – Pure JavaScript OCR.

BlockNote 0.8 – ‘Notion-style’ block-based editor.

Redwood 5.3 – React + GraphQL full stack framework.

TensorFlow.js 4.7 – ML in the browser.

Madge 6.1 – Create graphs of module dependencies.

📒 Articles & Tutorials

Why (and How) You Should Write Your WebAssembly in TypeScript — Performance is the main argument made by the author who shows off Wasmati, a library for creating WebAssembly modules by writing TypeScript using an API that corresponds to WASM operations. It works in modern browsers, Node, and Deno.

Gregor Mitscha-Baude

Backtick Strings are Likely the Wrong Tool for Your Job — It’s too common to try to put together query strings using JavaScript’s template strings, says Mattie, and this leads to potential injection problems. Luckily, there’s an alternative way..

Mattie Behrens

Dynaboard: AI Meets Low-Code to Get More Done, Faster — Build high performance authenticated web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Is React Having an ‘Angular.js Moment’? — The author puts forward an argument comparing the discontinuity from AngularJS to Angular 2 in 2014 with current shifts in the React ecosystem.

François Zaninotto

Painless WebGPU Programming with taichi.js — taichi.js is a GPU computing framework that transforms JavaScript functions into parallelizable WebGPU compute shaders. You can see a live demo here using the Game of Life.

Dunfan Lu

A Preview of Web Apps on macOS Sonoma 14 Beta — The next version of macOS will double down on the idea of well integrated, desktop-installable webapps. Here’s a dig around into how it works so far.

Thomas Steiner

Live Streaming with Multiple Hosts in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

The Many Ways to Select the n-th Character from a String

Christian Heilmann

Primitive Objects in JavaScript: When To Use Them

Kirill Myshkin

A Quick Primer on Node.js’s New Built-in Test Runner

endpts

🛠 Code & Tools

Algolia AutoComplete: A Fast, Full-Featured Autocomplete Library — This isn’t a UI widget – you’re in full control of rendering the experience – but this will let you wire up the experience you want users to have. There’s a getting started tutorial and a CodeSandbox demo where you can play around with some live code.

Algolia

Perfectionist 1.0: ESLint Plugin for Sorting Data — It supports sorting all sorts of things (props, imports, types..) and enforcing that with ESLint. It supports alphabetical and natural sorting, as well as by line length which leads to a neat aesthetic..

Azat S.

Comprehensive Full-Stack Application Monitoring Solution — A flexible application monitoring tool that doesn’t break the bank.

TelemetryHub sponsor

pgsql-ast-parser 11.1: A Simple SQL Parser — A TypeScript-based Postgres SQL syntax parser that can produce a typed AST for most queries (PL/pgSQL is not supported). It’s used as part of the author’s pg-mem project which provides a mini, ‘in memory’ Postgres clone in Node or the browser (here’s a live demo of that).

Olivier Guimbal

Goxygen 0.4: Quickly Generate a Go(lang) Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to spin it up. It’s been around a few years, but has now added Vue 3.3 support and a Vite-based Vue template.

Sasha Shpota

Noble Curves 1.1
↳ Audited elliptic curve cryptography library.

Taxi 1.3
↳ Add slick PJAX navigation to a site.

Inngest 2.0
↳ Build serverless job systems with TypeScript.

TinyBase 3.2
↳ Reactive data store for local‑first apps.

React Arborist 3.1
↳ Complete tree view component (demo).

Alova 2.6
↳ Request strategy library for Vue, React and Svelte.

💻 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.

🛠 Useful Thing of the Week

bundlejs: Online npm Package Bundle Size Checker — A browser-based tool that can treeshake, bundle, minify, and compress (gzip and brotli) packages to show you what their weight impact is. It runs entirely in the browser, too, using the WebAssembly build of esbuild.

Okiki Ojo

Microsoft shrunk the TypeScript

Posted on by

#​640 — May 25, 2023

Read on the Web

JavaScript Weekly

DeviceScript: TypeScript for Tiny Thingamabobs — DeviceScript is a new Microsoft effort to take the TypeScript experience to low-resource microcontroller-based devices. It’s compiled to a custom VM bytecode which can run in such constrained environments. (A bit like Go’s TinyGo.) It’s aimed at VS Code users but there’s a CLI option too.

Microsoft

The State of Node.js Performance in 2023 — Node 20 gets put through its paces against 18.16 and 16.20 with a few different benchmark suites running on an EC2 instance. It goes into a lot of depth that’s worth checking out, but if you haven’t got time, the conclusion is “Node 20 is faster.” Good.

Rafael Gonzaga

Lightning Fast JavaScript Data Grid Widget — Try a professional JS data grid component which lets you edit, sort, group and filter datasets with fantastic UX & performance. Includes a TreeGrid, API docs and lots of demos. Seamlessly integrates with React, Angular & Vue apps.

Bryntum Grid sponsor

Deno 1.34: Now deno compile Supports npm Packages — Deno isn’t Node, but it increasingly likes to wear a Node-shaped costume. This release focuses on npm and Node compatibility and Deno’s compile command (for turning projects into single binary executables) now supports npm packages too which opens up a lot of use cases.

The Deno Team

⚡️ IN BRIEF:

TC39’s Hemanth.HM shares some updates from TC39’s 96th meeting. Atomics.waitAsync, the /v flag for regexes, and a method to detect well formatted Unicode strings all move up to stage 4.

The Angular team shares the results of their annual developer survey. Over 12,000 Angular developers responded.

RELEASES:

Astro 2.5

Preact 10.15 – Fast 3KB React alternative.

TypeScript 5.1 RC

Electron 24.4

MapLibre GL JS v3 – WebGL-powered vector tile maps.

???? Articles & Tutorials

Demystifying Tupper’s Formula — Tupper’s self-referential formula is a formula that, when plotted, can represent itself. Confused? Luckily Eli shows us how simple the concept is and how to use JavaScript to render your own.

Eli Bendersky

An Introduction to Web Components — A practical and straightforward introduction to using the custom element API now supported in all major browsers to create a basic tabbed panel.

Mohamed Rasvi

▶  Creative Coding with p5.js in Visual Studio Code — p5.js is a ‘creative coding’ library that takes a lot of inspiration from Processing. Dan does a great job at showing it off and sharing his enthusiasm for it. The main content starts at about 8-minutes in.

Daniel Shiffman and Olivia Guzzardo

Auth. Built for Devs, by Devs — Easily add login, registration, SSO, MFA, user controls and more auth features to your app in any framework.

FusionAuth sponsor

▶  Why React is Here to Stay — A rebuttal of sorts to Adam Elmore’s video from two weeks ago: ▶️ I’m Done with React.

Joscha Neske

Comparing Three Ways of Processing Arrays Non-Destructively — for-of, .reduce(), and .flatMap() go up against each other.

Dr. Axel Rauschmayer

Build Your First JavaScript ChatGPT Plugin — Plugins provide a way to extend ChatGPT’s functionality.

Mark O’Neill

How I’ve Shifted My Angular App to a Standalone Components Approach

Kamil Konopka

???? Code & Tools

Javy 1.0: A JS to WebAssembly Toolchain — Originally built at Shopify, Java takes your JS code and runs it in a WASM-embedded runtime. It’s worth scanning the example to get a feel for the process. “We’re confident that the Javy CLI is in good enough shape for general use so we’re releasing it as v1.0.0.”

Bytecode Alliance

Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind.

Alex Grozav

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

BlockNote: A ‘Notion-Like’ Block-Based Text Editor — Flexible and presents an extensive API so you can integrate it with whatever you want to do. You can drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. Builds on top of ProseMirror and TipTap.

TypeCell

Windstatic: A Set of 170+ Components and Layouts Made with Tailwind and Alpine.js — Categorized under page sections, nav, and forms, and each category includes multiple components you can drop into projects.

Michael Andreuzza

ls-lint 2.0: A Fast File and Directory Name Linter — Written in Go but aimed at JS/front-end dev use cases, ls-lint provides a way to enforce rules for file naming and directory structures.

Lucas Löffel

Jest Puppeteer 9.0: Run Tests using Jest and Puppeteer — A Jest preset enabling end-to-end testing with Puppeteer.

Argos CI

ts-sql-query: Type-Safe SQL Query Builder — Want to build dynamic SQL queries in a type-safe way with TypeScript verifying queries? This is for you. Supports numerous SQL-based database systems and isn’t an ORM itself.

Juan Luis Paz Rojas

React Authentication, Simplified

Userfront sponsor

Hashids.js 2.3
↳ Generate YouTube-like IDs.

Tabulator 5.5
↳ Interactive table and data grid control.

gridstack.js 8.2
↳ Dashboard layout and creation library.

Cypress GitHub Action 5.8
↳ Action for running Cypress end-to-end tests.

ReacType 16.0
↳ Visual prototyping tool that exports React code.

Mongoose 7.2 – MongoDB modelling library.

Eta (η) 2.2 – Embedded JS template engine.

AVA 5.3 – Popular Node test runner.

MelonJS 15.3 – HTML5 game engine.

???? 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.

???? Node.js developer? Check out the latest issue of Node Weekly, our sibling newsletter about all things Node.js — from tutorials and screencasts to news and releases. While we include some Node related items here in JavaScript Weekly, we save most of it for there.

→ Check out Node Weekly here.

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