Tag: programming

Fluid simulation in JavaScript

Posted on by

#​658 — October 12, 2023

Read on the Web

✍️ Due to being on the road at an event, this is a more compact and bijou issue but I’m back at full pace next week 😅
__
Peter Cooper, your editor

JavaScript Weekly

Speeding Up the JS Ecosystem: The Barrel File Debacle — Marvin continues his tour through the world of JavaScript performance fixes with a look at how some innocent looking code can make tools run slower than they should. Test runners and many import cycle detection tools are most affected.

Marvin Hagemeister

🌊  Building a Water/Fluid Simulation in JavaScript — Hard to explain, but a lot of thought and care has gone into this tutorial of sorts. The live demos are nice, too. Uses p5.js behind the scenes.

Kenichi Yoneda

Strongly Typed and in the ⛅: Meet EdgeDB 4.0 — EdgeDB is an open-source database focused on developer experience. It features a high-level, modern data model, integrated schema migrations, and a TypeScript query builder that makes it easy to write advanced, fast queries, putting ORMs to shame.

EdgeDB sponsor

Angular and Qwik’s Creator on How JS Frameworks Handle Reactivity — A summary of Miško Hevery’s keynote from the International JavaScript Conference looking at reactivity across the major frameworks.

Loraine Lawson (The New Stack)

A Web Server ‘Hello World’ Benchmark: Go vs Node vs Nim vs Bun — The standard disclaimer applies: benchmarks are difficult and don’t always measure what you should care about.

Daniel Lemire

👀 Simon Willison has put together a fantastic live demo (in notebook format) showing off how to do client-side object detection in images using solely JavaScript and a neural network. (Note: Be aware this uses a lot of CPU and may slow your browser down.)

▶️ ViteConf 2023 took place last week and some of the talks are already available on YouTube. 🐦 One key bit of news is about Rolldown, a Rust port of Rollup, meaning Vite will get even faster in the medium term.

⚙️ Stephen Röttger of the V8 team has blogged about efforts to enable control-flow integrity (CFI) in V8, essentially a way to reduce the ability of nefarious third parties to exploit V8’s control flow in order to trigger arbitrary shellcode.

⚠️ A look at the potential dangers of regular expressions in JavaScript.

👾 An interesting post mortem of a game built in just 13KB for the JS13K contest.

🎉 RELEASES:

Electron 27 – The cross-platform desktop app toolkit gains Chromium 118, Node.js 18.17.1, and V8 11.8, but loses macOS 10.13/14 support.

Fresh 1.5 – A Deno-native framework for building full-stack webapps. v1.5 adds support for partials – the ability to update a portion of an existing page.

Parcel 2.10 – The zero-config build tool gets some serious performance improvements (7x faster on large projects). Devon Govett wrote 🐦 a Twitter thread explaining how.

Bun 1.0.5 – Mostly bug fixes and gentle improvements for the performance-oriented JS runtime. No HTTP/2 yet, but it’s just around the corner..

Solid 1.8 – Declarative and performant reactivity for building UIs.

🛠 Code & Tools

Evidence: Reports Synced to Your Data with SQL and Markdown — An open source, code-based alternative to drag-and-drop business intelligence tools. ▶️ This nine minute screencast does a good job at showing off what it can do.

Evidence

Payload 2.0: A Headless CMS Platform Built on Node — A Node-based headless CMS providing an app framework-like experience, including a customizable React-based admin system, GraphQL or REST APIs, flexible auth and file upload systems, etc. v2.0 introduces Postgres support (in addition to MongoDB), Vite support, and a new rich text editor. GitHub repo.

James Mikrut

Add Figma Like Collaborative Features Without Re-Architecting Your App — Create collaborative features, from live cursors to avatar stacks with Spaces, our in-app collaboration SDK.

Ably sponsor

Visual Studio Code Extension Tester v5.10 — A framework for simulating user interactions with VS Code and its extensions via Selenium Webdriver.

Red Hat

audioMotion-analyzer: Real-Time Audio Spectrum Analyzer — A high-resolution real-time audio spectrum analyzer JavaScript module with no dependencies. Gives a single or dual channel view. (Note the AGPL license.) GitHub repo.

Henrique Avila Vianna

Hotkey 2.1 – Add keyboard shortcuts to pages through HTML attributes (e.g. data-hotkey=”Meta+d”). Built by GitHub and used on github․com itself.

React-Menu 4.1 – Component for building accessible menus and dropdowns.

Ionic 7.5 – Build cross-platform mobile apps with JavaScript.

pnpm 8.9 – The alternative, efficient package manager.

Highlight.js 11.9 – Popular JS syntax highlighting library.

Node.js v18.18.1 (LTS) – To fix a regression in v18.18.0.

💻 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

“The art of debugging is figuring out what you really told your program to do rather than what you thought you told it to do.”

___
Andrew Singer

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

JavaScript, ML and LLMs

Posted on by

#​654 — September 14, 2023

Read on the Web

JavaScript Weekly

Bun 1.0: Is It a Toolkit? Is It a Runtime? It’s Both — You’ve used Node, you’ve seen Deno, now Bun has grown up too. It’s a performance-oriented server-side JS runtime built atop JavaScriptCore and makes the unique claim of being “a drop-in replacement for Node.js.” It includes extras like transpilation, bundling, package management, and a Jest-compatible test runner too. The post goes into a lot of depth, but we enjoyed the Bun team’s ▶️ 10 minute introductory video. Does Bun deliver on all its promises yet? No. Is it promising? Yes.

Jarred Sumner et al.

Why Does every() Return true for Empty Arrays? — Nicholas wondered how a condition can possibly be satisfied when there aren’t any values to test, so he dug into the language specs to understand the logic.

Nicholas C. Zakas

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 First Look at TypeScript 5.3 — TypeScript 5.2 landed a few weeks ago, which means TypeScript 5.3 is already in the works (the final release is due in November), with possible features to think about including Import Attributes, throw expressions, and isolated declarations.

Matt Pocock

⚡️ IN BRIEF:

📅 ViteConf is taking place this October 5-6. It’s free and online.

The August 2023 build of VS Code has just been released and includes improvements to the JS debugger including WebAssembly module decompilation, as well as Move to File and Inline Variable refactorings.

Linus Groh is working on a JavaScript engine in Zig called Kiesel, mostly as a learning project, but it’s passing 25% of test262 after four months of effort.

While searching for something else, I encountered this JavaScript tutorial from 1996 that’s still online. Amazingly, most of it still works fine today.

Esteemed Microsoft code archaeologist Raymond Chen looks at how freestanding JS functions using this can be mistaken for a constructor by VS Code’s static analyzer.

🎉 RELEASES:

MikroORM 5.8 – Powerful Node.js ORM.

Reason 3.10 – Write code in OCaml, but for the JS ecosystem.

Happy DOM 11.0 – A JS implementation of a web browser sans UI.

Node.js v20.6.1 (Current)

📒 Articles & Tutorials

JavaScript’s New Array Grouping Methods — A look at Object.groupBy and Map.groupBy. The proposal including these methods is currently at stage 3 at TC39, but initial support is creeping into dev builds of browsers.

Phil Nash

JPEG and EXIF Data Manipulation in JavaScript — A look at how to pick through the JPEG format and read and replace EXIF tags directly without leaning on a third party library.

Cédric Patchane

Frontend Performance Monitoring 101 — Learn the basics of JavaScript application performance monitoring to see (and fix) slow faster. Join us for a live AMA.

Sentry sponsor

▶  Building a Mario Game Complete with Auth and Score Saving — Ania tackles the implementation of a game in her usual thorough, step-by-step manner.

Ania Kubów

Running a Playwright Script on AWS Lambda — If you’ve struggled to make it work too, Matt has some pointers.

Matt Steele

A New Method to Validate URLs — URL.canParse isn’t broadly supported yet, but can be easily polyfilled.

Stefan Judis

How to Run a GitHub Gist with npx — This is an interesting way to quickly deploy a script.

Kelly Fox

🕑 Lei Mao has a cute example of using React in an ad-hoc way on a web page to dynamically render an analog clock. No build step. No JSX.

▶️ Jack Herrington refutes six reasons not to use React.

🛠 Code & Tools

Shadcn for Vue: Components You Can Copy and Paste — A community-led Vue port of the React-oriented shadcn/ui, a suite of attractive components built with Tailwind CSS and Radix UI, thus making them easy to ‘copy and paste’ into your own apps.

Radix Vue Project

FlexGrid by Wijmo: The Industry-Leading JavaScript Datagrid

Wijmo from GrapeCity sponsor

npm-check-updates: Update package.json Dependencies to Latest Versions — That is, as opposed to the specified versions. It include a handy -i interactive mode so you can look at potential upgrades and then opt in to them one by one.

Raine Revere

Starry Night 3.0: GitHub-Like Syntax Highlighting — GitHub’s own syntax highlighter isn’t open source, but Starry Night uses WebAssembly (to get access to the Oniguruma regex engine) to get as close as it can.

Titus Wormer

Vuestic 1.8: Open Source UI Library for Vue 3 — A library of more than 60 customizable components. v1.8 introduces new Layout and Textarea components. Official homepage.

Epicmax

Goxygen 0.7: Quickly Generate a Go 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 make it all work.

Sasha Shpota

Deliver Real-Time Live Streams with Amazon IVS — Amazon IVS enables developers to create dynamic real-time and low-latency video experiences. Click here to learn more.

Amazon Web Services (AWS) sponsor

xterm.js 5.3.0: Build Terminals in the Browser — It’s used in many projects like VS Code, cPanel, Azure Cloud Shell, and other browser-based IDEs. There’s a live demo on the homepage to try.

xterm.js team

Gridstack.js 9.2
↳ Build interactive dashboards in minutes. (Demos.)

Accessible Astro Starter 3.0
↳ A starter theme for an Astro-powered blog.

Ant Design 5.9
↳ Popular React UI library & design language.

📊 Reveal.js 4.6 – Write presentations in HTML.

Electron 26.2

💻 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

🤖 A little JavaScript AI-side..

AI, LLMs and machine learning have caught the imagination of many developers recently, whether through training and deploying models, calling out to third party APIs (like those OpenAI offers), or using tools like GitHub Copilot to write code. It’s common, however, for a lot of AI/LLM experimentation to take place in Python, rather than JavaScript..

Nonetheless, there’s an increasing number of projects in the JavaScript AI/ML space worth keeping an eye on, as well as an upcoming AI developer event being organized by two folks from the JavaScript space:

Transformers.js: State-of-the-Art Machine Learning for the Web — A JavaScript library designed to be functionally equivalent to Hugging Face’s transformers Python library meaning you can run the same pretrained models using a very similar API. You can do things like ML-powered speech recognition directly in your browser using OpenAI’s Whisper model. GitHub repo.

Joshua Lochner et al.

Microsoft TypeChat: An Approach for Type-Safe LLM Responses — Anders Hejlsberg and Daniel Rosenwasser of TypeScript fame are just two of the prominent names attached to this project, demonstrating the huge interest within MS for LLMs. TypeChat’s goal is to work around the issue of LLMs outputting unstructured natural language and to direct output into a typed form.

Hejlsberg, Lucco, Rosenwasser et al.

WebLLM: Run LLM Models in the Browser with WebGPU — Less directly JavaScript, as it uses WebGPU, but yet another way to run large language models directly within the browser and that you can control from JavaScript. GitHub repo.

MLC LLM

TensorFlow.js: Machine Learning for JavaScript Developers — Slightly lower level, but a great way to train and deploy models in the browser or in Node.js. There are, of course, lots of demos, too.

TensorFlow

JavaScript Library Lets Devs Add AI Capabilities to the Web

Loraine Lawson (The New Stack)

▶  A Primer on AI for Developers with Swyx from Latent Space

Svelte Radio

📅 Plus, two JavaScript folks are putting on an AI event..

As part of my interest in AI and ML, I’m attending what promises to be the technical AI event of the year in San Francisco next month: The AI Engineer Summit.

The emerging ‘AI engineer’ category is at the intersection of AI/ML and code: where software engineers can access and implement powerful AI models with just an API. Andrej Karpathy believes that “there’s probably going to be significantly more AI engineers than there are ML engineers / LLM engineers.”

With speakers representing companies like OpenAI, Microsoft, Replit, Vercel, AutoGPT, Adept, LlamaIndex, and Notion, at the Hotel Nikko this October 8-10, the event is organized by two folks well known in the JavaScript world: Swyx (who you may remember from his popular The Third Age of JavaScript post) and Benjamin Dunphy, formerly of Reactathon and Jamstack Conf. You can apply to attend or get a free remote ticket to tune in from wherever you are.

If you’re going to the AI Engineer Summit, I’ll see you there!

👋

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.

Name mangling

Posted on by

#​649 — July 27, 2023

Read on the Web

JavaScript Weekly

Hono + Htmx + Cloudflare: A New Stack? — A lot of people seem to be jumping on htmx lately as an alternative to the complexity of frameworks like React, but what if you want to keep using JSX? Hono is a (vaguely Express-like) Web framework targeting edge function use cases and includes middleware for rendering JSX. Yusuke gives a quick example of how all this can come together with Cloudflare Workers and D1 for a simpler, full-stack JS experience.

Yusuke Wada

Shrinking VS Code with Name Mangling — There’s a fair bit of JavaScript in VS Code but the team has managed to reduce the size of the shipped code by almost 4MB without actually doing any deleting or refactoring thanks to a new ‘name mangling’ build step. This is a great read on how the team approached things and got it working.

Matt Bierner

New Course: The Hard Parts of UI Development — Develop an under-the-hood knowledge of UI development by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch!

Frontend Masters sponsor

Microsoft TypeChat: An Approach for Type-Safe LLM Responses — A new project with some prominent names attached (the designer of C# and PM for TypeScript, for starters) that demonstrates the excitement within MS for large language models (LLMs). TypeChat aims to work around the problem of LLMs outputting hard-to-parse natural language and to direct such output into a predictable, typed form.

Hejlsberg, Lucco, Rosenwasser et al.

⚡️ IN BRIEF:

🐦 React/Redux’s Dan Abramov is leaving Meta. Having achieved so much and reaching a point where he feels ready to move on, Dan is departing Meta but will remain on the React team as an independent third party. 💙

📘 The Concise TypeScript Book is, unsurprisingly, a guide to using TypeScript. More surprisingly, it’s all on GitHub and free to read. Hurrah.

Tixy is an interactive page for learning logic, math and expressions by solving puzzles using a visual grid. It starts off very simply, but gets elaborate quickly. This is a neat way to pick up some of the skills needed for Dwitter.

JSPlayground is a new Web-based JavaScript sandbox tool.

Is the term ‘Jamstack’ finished? Brian Rinaldi wonders.

🎉 RELEASES:

Bun 0.7 – The JavaScriptCore-based alternative JS runtime adds (experimental) Vite support, Web Workers support, and includes a –smol option to run in memory constrained environments (with a significant memory reduction shown off in the post).

Astro 2.9 – The ‘zero JS by default’ framework adds experimental support for view transitions and more.

Neutralinojs v4.13.0 – Lightweight cross-platform desktop app framework.

Remix 1.19 – Modern full-stack JS framework.

Node.js v20.5.0 (Current)

📒 Articles & Tutorials

💛  ‘Good Code is Like a Love Letter to The Next Developer Who Will Maintain It’ — “The beauty of our creations, however, is not judged solely by the elegance of our algorithms or the efficiency of our code, but by the joy and ease with which others can build upon our work.”

Addy Osmani

More practically, Addy also tells us to stick to ‘boring architecture’ for as long as possible.

📅  React Native EU Conf with Guenther Steiner: Book Last Regular Tickets

Callstack sponsor

How to Build a GPT-3 App with Next.js, React, and GitHub Copilot — GitHub doesn’t often run tutorials on its blog, but they appear keen to promote the idea of a modern Copilot-oriented development process, and this certainly shows off some of the potential.

Kedasha Kerr (GitHub)

Upgrading an Ancient React App

Jeffrey Carl Faden

🛠 Code & Tools

a11y-dialog 8.0: A Lightweight, Accessible Way to Create Dialogs — Supports alert dialogs as per WAI-ARIA, nested dialogs, and provides both a DOM and JavaScript API. There’s a live CodeSandbox demo you can play with. v8.0 no longer supports IE, if that’s important to you.

Kitty Giraudel

Mapkick.js: Interactive Maps in One Line of JavaScript — Supports Mapbox and MapLibre. It also comes in Python and Ruby variants targeting server-side rendered use cases.

Andrew Kane

RxDB – Local Database For JavaScript Applications — With RxDB you can build realtime applications with great performance that even works when your users are offline.

RxDB sponsor

PLJS: JavaScript Language Plugin for Postgres — PLV8 is the ‘go to’ extension to use JavaScript within Postgres, but this QuickJS-based variant, from the same creator, is more compact, easier to maintain, and may be enough for your needs.

Jerry Sievert

Twin 3.4: Use Tailwind Classes in CSS-in-JS Libraries — Twin v3 introduced full Tailwind plugin support, and v3.4 adds a new SolidJS preset as well as styled-components 6 support.

Ben Rogerson

Praxis: An iOS Browser That Blocks JavaScript — Well, that’s certainly one way to fight back against prompts, modals, and battery sapping scripts, but it won’t work with every site..

Arnold Sakhnov

Spectacle 10: A React and JSX-Based Presentation Library — Got a presentation coming up? Build your decks with JSX, perhaps. GitHub repo.

Formidable

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

gridstack.js 8.4
↳ Framework agnostic dashboard layout and creation.

amqp-client.js 3.0
↳ AMQP 0-9-1 client for both Node and browser (via WebSocket).

FingerprintJS 4.0
↳ Browser fingerprinting library. No longer open source.

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

🙈 Taking things too far..

We’ll support anyone who’s keen to reduce the amount of needless JavaScript that goes over the wire (👋 Astro or Qwik) but sometimes, just sometimes, you can go too far with the endeavor to almost comedic effect:

😱  Implementing Tic Tac Toe with 170MB of HTML — Unsurprisingly, the demo (which we’ve not linked to here) brought my browser to a crashing halt, but it’s fun to see a developer take on the challenge of using Chrome’s support for popovers and the state of said popovers along with a huge pile of HTML to handle a game of Tic Tac Toe. Don’t repeat this in production, folks..

Gareth Heyes

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

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

The return of ECMAScript 2023 (and Angular)

Posted on by

#​634 — April 13, 2023

Read on the Web

JavaScript Weekly

The JavaScript Equality Table Game — Minesweeper will feel like a walk in the park after this reminder of the horrors of JavaScript’s ==. If you need to go in depth, Section 7.2.14 of the ECMAScript spec will help, but otherwise? Stick to three equals (===) unless you have a good reason not to.

Reinis Ivanovs

htmx 1.9 Released — htmx (homepage) is an increasingly popular library outside of the JavaScript space as it lets folks use things like WebSockets, SSE, AJAX, and CSS transitions by marking up HTML rather than writing lots of JavaScript. v1.9 adds support for view transitions and generalized inline event handling. The code examples are worth a look – htmx makes a lot possible, with rather little tooling or markup needed.

htmx team

Supercharge AWS S3 Video Streaming with ImageKit’s Video API — Get adaptive bitrate streaming, video optimizations, format conversions, and real-time transformations and watermarking by attaching ImageKit with your AWS S3 bucket.

ImageKit sponsor

The ECMAScript® 2023 Language Spec Steps Forward — After prematurely announcing the progression of the ES2023 spec in February, we can now announce: TC39 has approved the ECMAScript 2023 spec, and while it remains a candidate, it’s now a step closer to eventual ECMA General Assembly approval. The finished proposals list for 2023 now includes Array find from last, hashbang support, Symbols as WeakMap keys, and change Array by copy.

ECMA International

IN BRIEF:

▶️ Angular is back with a vengeance, says Fireship.

Serverless platform AWS Lambda has introduced response streaming on its JS runtime (for now) so you can send response data as it becomes available rather than all at once. (→ Via Serverless Status)

/[]/ A look at a seemingly JS-specific quirk in regular expressions when empty character classes are used.

An analysis of languages used in GitHub pull requests shows JavaScript/TypeScript leading the way with Python just slightly behind. The comments went in lots of odd directions here.

Seven folks at Vue Amsterdam 2023 shared their ▶️ tips on getting started with Vue.js.

▶️ An hour-long chat on the State of Node.js with some leading figures.

Node v18.16.0 (LTS) has been released with backported support for compiling JavaScript code into a single executable app. Node 19’s Ada URL parser also appears.

A striking visual introduction to React and its fundamental concepts.

RELEASES:

Node.js v19.9 (Current)

Puppeteer v19.9 – It’s the week for almost 20s.

pnpm 8.2 – Efficient npm alternative.

Redwood 4.5 – Popular app framework.

Storybook 7.0 – With an official release post this time.

???? Articles & Tutorials

Ranger: Use a Range-Like Syntax for Anything? — const numbers = 1[[…8]], anyone? This is a neat trick for a bit of syntatic sugar, but I’m not sure it would pass the sniff test for most teams. You might find the implementation interesting to check out though. Long may this sort of experimentation continue.

Jon Randy

???? A proposal for JavaScript to get built-in range support is at stage 2.

????  Build and Deploy ‘23: May 3rd – Save the Date! — The ultimate CI/CD virtual conference – best practices and end-user success stories from DevOps experts. Plus, a keynote from Emily Freeman, author of DevOps for Dummies.

Codefresh sponsor

Trying Node’s Built-In Test Runner — In 2022, Node gained an experimental built-in test runner (node:test). It’s going to become stable in the forthcoming Node v20, so it’s a good time to look at how it works and how it compares to other solutions you might already be using.

Gleb Bahmutov

▶  The Right Way To Merge JavaScript Objects — In just one minute, too.

Jack Herrington

Ref vs. Reactive: What to Choose When Using Vue 3 Composition API?

Michael Hoffmann

How to Stream File Uploads to S3 Object Storage from Node.js

Austin Gil

How to Contribute to a Project You Have No Idea About

Michal Warda

???? Code & Tools

Reveal.js 4.5: An HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v4.5 was just released with support for jumping to specific slides, a few new themes, and with live reload working with files in subfolders.

Hakim El Hattab

List.js: Add Search, Sort, Filters, and More to Tables and Lists — A handy library for adding search, sort, filters and flexibility to tables, lists or other HTML elements. Want an example? Why, of course.

Jonny Strömberg

????Quokka.js – #1 JavaScript Scratchpad for VS Code — With 2M+ downloads, Quokka.js is the #1 tool for exploring and testing JavaScript/TypeScript. Code runs immediately as you type.

Wallaby.js sponsor

Queue: Async Function Queue with Adjustable Concurrency — Exports a class Queue that implements most of the Array API.

Jesse Tane

Yet Another React Lightbox — Add a lightbox component to your projects “in minutes” – there are several examples to try, as well as a playground with adjustable settings. GitHub repo.

Igor Danchenko

Sandpack 2.6: Component Toolkit for Creating Live Code Editing Experiences — Created by the folks at CodeSandbox, so they surely know what they’re doing in this space. GitHub repo.

CodeSandbox

Easy to Use, Full-Stack Application Monitoring

TelemetryHub sponsor

TS Writer: A Template String Template Engine for Generating Code at Runtime — Rather niche, but aimed at situations where you might need to generate code at runtime in TypeScript.

tinylibs

Minimatch 9.0
↳ Glob matcher library.
     minimatch(“bar.foo”, “*.foo”)

hls.js 1.4
↳ Play HLS in browsers with support for MSE.

Partytown 0.8
↳ Relocate third-party scripts off the main thread.

Plasmo 0.68
↳ “It’s like Next.js for browser extensions”

Obsidian 8.0 – GraphQL, built for Deno.

MUI X 6.1 – React component suite.

TestCafe 2.5 – Automate end-to-end web testing.

Maquette 3.6 – Lightweight virtual DOM library.

Venom 5.0 – WhatsApp bot library.

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

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

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