Tag: JavaScript

NodeSource Team Supports JSConf Colombia for the Event’s 10th Anniversary

Posted on by

Over a thousand developers gathered together two weeks ago to engage in all things JavaScript at the sold-out JSConf Colombia (https://www.jsconf.co/) while celebrating its 10th year in Medellin. Our NodeSource team members (current and past) played impactful roles in leading, planning, and speaking to support the community event. We are incredibly proud of our Colombian team members, who are a massive part of creating our best-in-class OSS N|Solid Runtime and premium platform N|Solid Pro.

Adrian Estrada, our VP of Engineering and OpenJS Foundation Board Member, has been a key leader for years in supporting Colombia’s Node.js and JS community. His great passion for technology and enabling people to develop and grow makes him a fantastic leader for our global engineering team and community engagement. Alongside Adrian, Julian Duque, a NodeSource alumni, has also been instrumental in the Colombian JavaScript community. His leadership and contributions have significantly shaped the region’s JavaScript development landscape. Julian’s efforts, combined with Adrian’s dedication, underscore the deep involvement and influence NodeSource has in nurturing and advancing the tech community in Colombia.

This event has had an incredible decade-long run, with a commitment to breaking down barriers, promoting accessibility, and creating a space that champions diversity. As the last in the series, the community was committed to making this final event one to remember.

The event opened to local musicians on stage, setting the tone for a joyous and creative experience. Talks at the event showcased the diversity of the community, including topics like “Making Art with JavaScript and Garbage,” “Unlock the Power of JavaScript Generators,” “IDX, WebIDE’s and the Future of JavaScript Debugging,” and the AI-themed “Chatting with the Canvas; How to Assemble Art from AI Image Prompts.”

Jessica Felix highlighted N|Solid, our product, emphasizing its significance in modern Node.js development and performance analysis. This array of topics underlined JavaScript’s dynamic and multifaceted nature, catering to a wide range of interests and expertise within the community.

NodeSource Alumni and JS Rockstar Erick Wendel shared his knowledge about “How to consume gigabytes of data in JavaScript without slowing down applications.”

And one of our current team members, the talented Juan José Arboleda, challenged the attendees that “JavaScript can be as fast as C++.”

Colombia has long been a crucial part of NodeSource, and the talent and energy from the region have produced many great team members. Like Maria Fernanda Serna and NodeSource Alumni Liz Parody, who helped organize this year’s event, we have enjoyed the spirit and talents of this region. Colombia has also been a place where we give back. From these community events to where we planted trees for every customer in our NodeForest campaign, Colombia is ¡Qué nota de lugar! (a fantastic place!).

In keeping with this spirit of community and innovation, a new event is being born to replace JSConf Colombia. It will be announced soon and is set to happen in October 2024. This upcoming event, which includes some of the organizers of JSConf Colombia, will continue to foster the region’s vibrant tech community. NodeSource will also continue to support this initiative, highlighting its ongoing commitment to the Colombian tech scene.

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.

Introducing N|Solid Copilot: Your AI-Powered Node.js Navigator

Posted on by

We are thrilled to announce the latest addition to N|Solid Pro – the N|Solid Copilot, a groundbreaking AI-powered assistant designed to revolutionize your Node.js development experience. This innovative tool is a leap forward in Node.js application observability and security, it’s like having a Node expert on-call.

View of N|Solid Pro Console with the Copilot drawer open allowing a user to interact with the AI Assistant.

Why N|Solid Copilot?

N|Solid Copilot is developed with one goal in mind: to make your life as a Node.js developer or DevOps engineer easier, more efficient, and more secure. It’s like having a Node.js expert by your side, 24/7, offering real-time insights into observability alerts, along with actionable advice tailored to your unique application needs.

Key Features of N|Solid Copilot

Real-time analysis and insights: Identify and resolve performance bottlenecks, memory leaks, and other critical issues. Analyze metrics like CPU usage, event loop utilization, and more.
Anomaly detection and remediation: Utilizing the platform and NodeSource’s ML algorithms, the Copilot can detect anomalous behavior in both application performance and security, as well as identify solutions.
Security vulnerability identification and resolution: N|Solid Pro is continuously scanning for security vulnerabilities within the application code and 3rd party dependencies. Users can ask our Copilot about recommendations and solutions.
Code optimization suggestions: Given its training in Node.js, the AI can or will offer suggestions to optimize code for better performance and efficiency. This can include advice on asynchronous programming patterns, memory management, or the use of specific Node.js features.
Interactive querying: Users can interact with the platform in a conversational manner to query specific application metrics or request insights on performance and security aspects. These queries can be general or specific to the data generated in production.
Knowledge sharing: Users can gain knowledge about how to use N|Solid and implement Node.js best practices, creating a better model for users to get up to speed quickly on the platform.

Using N|Solid Copilot to triage security issues through predefined prompts or user questions.

Experience the Future of Node.js Development Powered by AI

N|Solid Copilot isn’t just a tool; it’s your partner in developing and maintaining great software. Whether you’re debugging a tricky issue, seeking performance improvements, or ensuring your application’s security, N|Solid Copilot is there to guide you every step of the way.

How to Get Started?

Sign Up: Simply sign up for a free SaaS account on our website.
Integrate: Seamlessly integrate N|Solid Copilot with your existing Node.js applications.
Navigate: Let N|Solid Copilot guide your development journey with unparalleled insights and assistance.

We believe N|Solid Copilot will not just change how you work with Node.js; it will transform it. Sign up today and be part of this exciting journey!

Connect with us on Twitter @NodeSource, LinkedIn, and to stay updated with the latest from N|Solid.

Angular is back

Posted on by

#​662 — November 9, 2023

Read on the Web

JavaScript Weekly

Reintroducing Angular with Angular v17 — Angular first appeared in the shape of AngularJS in 2010 and helped launch a wave of large-scale JavaScript frameworks. Angular remains popular in many use cases but is often overlooked in favor of newer options. v17 takes a leap forward in both features and vision, with the team rebranding Angular and repositioning it as a modern solution:

Angular.dev is an all-new docs site and home for the project (the new guides look fantastic). It’s in beta till Angular v18 is released – you can learn more about it here.
Hydration is now production ready.
Vite and esbuild are the default for new projects.
Improved support for creating server side apps.
New, improved built-in control flow to make code less verbose.
Google pulled out all the stops for ▶️ the ‘Special Angular Event’ – an hour of talks, interviews and discussions to bring you up to speed.

Minko Gechev and the Angular.js Team

Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery — Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript’s performance characteristics through understanding the JavaScript Virtual machine under the hood!

Frontend Masters sponsor

Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such – all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.

Phuoc Nguyen

▶  Why Signals Are Better Than React Hooks — When Preact’s Marvin Hagemeister pops up in the comments saying “this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals,” it should bump a video up to the top of the Watch Later playlist.

Web Dev Simplified

👀 Nicholas C. Zakas shares a look at what’s coming in ESLint v9.0. The first alpha is due in a month or two.

⚛️ React has landed a commit adding sourcemaps for prod build artifacts.

🆚 VS Code will soon support moving editors into floating windows.

RELEASES:

TypeScript 5.3 RC – Final due soon, but you get import attributes, resolution-mode in import types, interactive inlay hints for types, and improvements to narrowing in a few extra cases.

It’s a strong week for testing tool releases, so they’re all in one place: TestCafe v3.4.0, Cypress 13.5, Nightwatch.js 3.3, and React Testing Library 14.1.

Deno 1.38 – Many smaller improvements, including far faster JSX transformation.

Bun v1.0.10 – Faster node:http and bug fixes.

tsx 4.0 – Node.js enhanced to run TypeScript / ESM files.

📄 Articles & Tutorials

How to Do a JS to TypeScript Conversion — Chris, who led the conversion of a 150k LOC app to TypeScript, addresses a common question: do-it-as-you-go or follow the dependency graph?

Chris Krycho

Exploring the Headless Component Pattern for Composing React UIs — An engineer at Atlassian takes us on a thorough and practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements.

Juntao Qiu

📞 Calling JavaScript Devs! Sentry Launch Week is Coming. Join Online

Sentry sponsor

▶  8 Talks from JetBrains’ JavaScript Day 2023 — JavaScript Day is an annual virtual event featuring a handful of talks on diverse JS related topics. This year, Romulo Cintra shows us how TC39 works on language proposals, Stefan Baumgartner spoke about the lies we tell ourselves using TypeScript, and more.

JetBrains

Writing Components That Work in Any Framework — Looks at why web components can be difficult to adopt, and shows how using a higher-level library can let us “easily write components that work everywhere”.

Andrico Karoulla

Build a Lightweight Code Generator with TypeScript and JSON Imports

John Ruble

Deploying a Vue Application with Netlify and GitHub

Ezekiel Lawson (Telerik)

Don’t Disable Buttons, Do This..

Chris Ferdinandi

🛠 Code & Tools

Moveable: A Library for Dragging, Resizing, Scaling and More — If you want to offer up physical manipulation of elements (warping, pinching, rotating, etc.) this library could help. Its homepage is a fun self-demo and there are packages for integrations with common frameworks.

Younkue Choi

🔥 Need to Eliminate Tech Debt Without Falling into Dependency Hell? — Upgrade seamlessly and let us tackle tech debt with our fixed-cost, monthly maintenance service (starting at $2k/month).

UpgradeJS | Tech Debt Services sponsor

🖼  image-dimensions: Get the Dimensions of Images — Sindre’s latest creation is a simple but comprehensive one. A way to get the size (as width and height in pixels) for JPEG, PNG, APNG, and GIFs in any modern JS environment.

Sindre Sorhus

main-thread-scheduling 9.0: Consistently Responsive Apps While Staying on the Main Thread — An easier alternative to Web Workers that uses the approach of stopping heavy tasks on the main thread from executing when the user interacts with the UI. This new version adds afterFrame (like requestAnimationFrame but called after frame drawing has rendered), queueTask, and extensions to promises.

Antonio Stoilkov

React Components for the Google Maps JavaScript API — react-google-maps is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components into a React app.

Mike Pegg (Google Cloud)

capture-website 4.0: Capture Screenshots of Websites — A Puppeteer wrapper to capture screenshots of site from Node or the command-line.

Sindre Sorhus

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

Bosch sponsor

⌘K-sv: A Fast, Composable, Unstyled Command Menu for Svelte — A port of ⌘K, a React-based command menu component.

huntabyte

Vuetify v3.4 – Vue component framework.

MiniSearch 6.2 – In-memory fulltext search engine. (Demo.)

TanStack Form 0.9 – Headless type-safe form state management.

Dependency Cruiser v15.2 – Tool to validate and visualize dependencies.

Valtio v1.12.0 – Proxy state made simple. Plus it has a fantastic homepage.

Helmet 7.1 – Secure Express apps with HTTP headers.

Rollup.js 4.3 – ES module bundler.

NOTABLE QUOTABLE

“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”

___
Tom Cargill

🚀 Everyone’s gone to the moon..

Spacekit.js: A Library for Creating 3D Space Visualizations — Not just any old 3D space, but actual space – think planets, stars, and meteors. A library like this comes, of course, with many examples to try. GitHub repo.

Ian Webster

Big news for both Next.js and Remix

Posted on by

#​661 — November 2, 2023

Read on the Web

JavaScript Weekly

Next.js 14 Released — Unveiled at last week’s Next.js Conf, v14 caused a lot of community discussion (not least on Hacker News), largely surrounding Server Actions being declared stable and the ‘backend-meets-frontend’ opportunities this opens up. A new partial prerendering feature is also in preview, allowing for dynamic responses but with the speed of an initial static response.

Lee Robinson and Tim Neutkens

💡 The New Stack has an overview of the release, and Focus Reactive has a (highly visual) recap of Next.js Conf itself – recommended if you didn’t watch the stream.

SDKs & OpenAPI Specs in Minutes Using Zod, tsoa, or Fastify — Using popular TS tooling to build your API? Our guides show you how to go from code to best in class OpenAPI specs & SDKs.

Speakeasy sponsor

Remix ❤️ Vite: Remix 2.2 Introduces Vite Support — Remix is a popular full-stack JavaScript framework that began as a paid product, but has been open source for two years now. If you found Remix’s compilation approach opaque before, we have great news: “With Vite, Remix is no longer a compiler. Remix itself is just a Vite plugin.” This post tells the full story.

Cattori and Dalgleish (Remix)

🗳 The folks behind the State of JavaScript survey have unveiled a new State of React survey to take. As with their other surveys, you get to test your knowledge as well as provide useful insights.

🔁 Shadow is a new, experimental browser engine built in JavaScript itself. It renders its output in your usual browser using an HTML canvas. Source code.

🔐 GitHub is scanning all public npm packages for leaked secrets. Note that if secrets are found, the provider associated with those secrets is notified.

❄️ WinterJS is a new JS Service Workers server, powered by Rust & SpiderMonkey.

🐥 Uh-oh, it’s Flappy Bird implemented in TypeScript types.

RELEASES:

Astro 3.4 – The Web framework gains page partials, a new experimental dev overlay, and more.

Visual Studio Code October 2023 – A couple of minor enhancements to the JS debugger, and Copilot Chat (if you have GitHub Copilot) can now provide better answers because it’s sent implementation details behind the symbols you mention.

jQuery 4.0 is 100% feature complete but it’s not released just yet.. but we know you can’t wait. Ditto for Angular 17 – more on that soon.

Rollup 4.2, Cypress 13.4, Ember.js 5.4, Stencil 4.7

📒 Articles & Tutorials

Speeding Up the JavaScript Ecosystem: Tailwind CSS — Marvin’s ongoing journey to improve our ecosystem by finding low-hanging performance-bearing fruit continues with a look at how the architecture of Tailwind CSS could be tuned.

Marvin Hagemeist

A New Way to Bring Garbage Collected Languages Efficiently to WebAssembly — WasmGC is a new and promising way to implement GC languages in WebAssembly and it’s now enabled by default in Chrome.

Alon Zakai (V8)

Generally Awesome UI Components For Project Management and Scheduling — Level up your UX with advanced data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

▶  Your Website Does Not Need JavaScript — An hour long talk in which Amy builds a completely static website — using a collection of HTML and CSS files with no tracking, no scripting, no servers, and no third-party resources.

Amy Kapernick

Building a Generic RSS Parser Service with Cloudflare Workers — Ray walks through various iterations and improvements in trying to build an RSS parser that can work in the Workers environment.

Raymond Camden

Can Next.js Handle 5000 Pages? — Christian set out to push both Next.js and AWS Amplify hard. A good read.

Christian Nwamba

🗣 Is Express Still the ‘De-Facto’ Choice for Building Node.js Webapps?

Hacker News

🛠 Code & Tools

Svelte Flow: Node-Based UI for Svelte — From the creators of React Flow comes a Svelte version in the shape of a customizable Svelte component for building node-based editors and interactive diagrams. Check out the examples.

webkid GmbH

Docusaurus 3.0: Meta’s Static Site Generator — Docusaurus is a popular React-powered tool aimed at building documentation sites, though it handles more general sites too. v3 features an upgrade to MDX v3, React 18, Mermaid v10, and essentially updates everything.

Sébastien Lorber

Get Logged Values Right Where You Need Them: In Your Editor — Simply start your editor, and your development server/test runner in watch mode, and see values next to your code. No setup required.

Wallaby Team sponsor

Hotkey 2.2: Declarative Keyboard Shortcuts for HTML — Set a data-hotkey attribute on your elements to quickly add keyboard shortcuts. v2.2 improves Mac alt/option support.

GitHub

Is Text or Binary? 7.0 — This library first tries to determine from a filename if the contents of the associated file are likely to be binary or text. Failing that, it can then look at the actual data to figure it out.

Bevry

<browser-window>: A Web Component to Create Pretend Browser Windows on the Web — A lightweight themed zero-dependency web component wrapper to emulate a Safari-like browser window within a Web page. The page full of demos might give you some ideas for its use.

Zach Leatherman

Add Authorization, MFA, Biometrics to Your JavaScript App in Minutes

FusionAuth sponsor

lossless-json: Parse JSON Without Losing Numeric Information — JSON.parse can trip over when it comes to large numbers, so this library parses numeric values not as regular numbers but in a lightweight lossless way keeping the value as a string.

Jos de Jong

Vueform: An Open Source Form Framework for Vue.js — This has been around for a while but is now MIT licensed. Its ancillary form builder app stays commercial, but isn’t mandatory for using the library. GitHub repo.

Vueform

sweetalert2 v11.9 – Customizable, accessible replacement for alert()

YouTube.js 7.0 – Wrapper around YouTube’s internal API.

eslint-plugin-unicorn 49 – Over 100 useful ESLint rules.

NOTABLE QUOTABLE

“If it doesn’t work, it doesn’t matter how fast it doesn’t work.”

___
Mich Ravera

💛 And something else we love

Val Town 3.0: A Social Way to Write and Deploy TypeScript — “If GitHub Gists Could Run, and AWS Lambda Were Fun” is a fantastic description for this online platform where you write tiny bite size functions (‘val’s) to be run in V8 isolates. You can connect them together, schedule them, serve them up over HTTP, and more. Version 3 is a big jump for the platform, adding JSX support, more standardized JavaScript approaches to solving problems, and the ability to edit and run your ‘vals’ locally.

Steve Krouse

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!

👋

TypeScript 5.2, Node 20.6, and Astro 3.0

Posted on by

#​653 — September 7, 2023

Read on the Web

😅 We’re back! After two weeks enjoying the blistering desert heat of Las Vegas and downpours of Storm Hilary, I’m ready to get back to the weekly JavaScript roundups – fingers crossed we’re here each week till Christmas now 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Astro 3.0 Released: The All-in-One Web Framework — An increasingly popular, turbo-charged site generator comfortable with not just static sites, but dynamic and interactive ones too by way of its ‘islands’ approach. You can use React, Vue, Svelte, Solid, and others, with it, and v3 adds View Transitions API support (more on that here) which can result in striking creations like this Spotify ‘clone’. It requires a play to really ‘get it’ but it’s great.

Astro Team

Good news – now SvelteKit supports the View Transitions API too 😉

Node.js 20.6 Released with Built-In Support for .env Files — The official release post covers everything new in 20.6, but the highlight is support for .env environment files to set environment variables dynamically when a script is run without requiring a third-party library like dotenv.

Phil Nash

Simplify Security and Compliance for Your Apps — Introducing Pangea: comprehensive API-based security services for developers. Effortlessly integrate foundational security services like Authentication, Authorization, and Audit Logging to create a safer app experience and accelerate your time to market.

Pangea sponsor

Bye to Rome and Hi to Biome for JS Formatting and Linting — First announced in 2020, Rome is/was an ambitious effort to create a unified frontend dev tool to bring ideas from Babel, ESLint, webpack, etc. into one place. After forming a company around Rome and raising money two years ago, things seem to have gone awry, with its key maintainers forking the project as Biome.

Emanuele Stoppa and the Biome Team

⚡️ IN BRIEF:

Version 1.0 of Bun, the notably fast JavaScriptCore-based JS runtime, is due to launch in the coming hours. There’s a livestream and, we assume, a launch post due to land here very soon.

In other ‘alternative runtime news’, the Deno team has announced native npm support on its Deno Deploy platform. They’ve also announced Deno KV is in open beta.

Mozilla: “Over the course of the year Firefox has improved by around 40% on the Vue.js benchmark” – find out why.

David Heinemeier Hansson, the creator of Ruby on Rails, announced that they’re dropping TypeScript from Turbo (a library commonly used with Rails) in favor of plain old JavaScript. Social media drama ensued.

What’s going on with the Gatsby React framework? Folks are noticing there’s not a lot going on with it lately and that 🐦 Netlify layoffs had a big impact. Netlify does, however, say 🐦 updates are coming.

GitHub has made changes to its homepage feeds. Quite a few people are unhappy about it, though.

“The CSS-in-JS sector has plateaued,” says the latest State of CSS survey.

What’s new in Svelte as of September 2023? Quite a lot.

🎉 RELEASES:

TypeScript 5.2 – Complete with the much awaited using declarations..

Node-RED 3.1 – The powerful low-code/visual programming environment gets some key improvements in its editor.

jq 1.7 – It’s not JavaScript, but surely the best JSON processing tool to exist.

Ky 1.0 – Simple HTTP client based upon Fetch for browsers, Node & Deno.

jQuery 3.7.1 – Oh yes indeedy 🎉

Cypress 13

📒 Articles & Tutorials

Making Sense of React Server Components — This is fantastic and exactly what it says on the tin, – we’ll be focusing on it more in next week’s React Status newsletter though 😉

Josh W Comeau

You Don’t Need to Learn Svelte – Here’s Why — I mean.. you kinda do, but Kavii’s excitement is infectious and Svelte’s approach remains refreshing.

Kavii Suri

item: Using Labeled Loops in JavaScript — If using labels gives you flashbacks to BASIC and GOTO statements, I sympathize, but in JavaScript, labels open up an interesting control flow technique. More about this on MDN. continue item;

Ben Nadel

Build a Documentation Chatbot with ChatGPT and EdgeDB — Let’s do it using EdgeDB’s intuitive data model & query language, as well as its powerful TypeScript query builder.

EdgeDB sponsor

A Wide View of Automated Testing in React Apps — A straightforward and to the point introduction to why you might use automated testing, how to get going in the scope of a React app, and what to be testing.

The React Handbook

How to Create a Dual-Mode Cross-Runtime JavaScript Package — Specifically, supporting both ESM and CommonJS, and across runtimes like Node, Deno and the browser.

Hexagon

Benchmarking 24 CSV Parsing Approaches — The most extensive CSV parsing benchmark I’ve seen. The author is himself the creator of the μDSV CSV parsing library and wanted to check out the common ‘lightning fast performance’ claims of other libaries.

Leon Sorokin

The Complexity of Building an Efficient Node.js Docker Image — It’s possible to get huge reductions in image size and build time and Samuel shares his approach here, but he also questions whether all this work should be necessary.

Samuel Bodin

Learn High-Level Compilers, Tools, & Techniques – in JavaScript!

Dmitry Soshnikov Education sponsor

14 Linting Rules To Help You Write Asynchronous JS Code

Maxim Orlov

How to Create a Chrome Extension in 10 Minutes Flat

James Hibbard

🛠 Code & Tools

Peaks.js 3.0: View and Interact with Audio Waveforms — A JavaScript component for browser-based audio waveform visualization that comes from the BBC’s R&D department. There’s a live example on the homepage. GitHub repo.

BBC

🎸 SVGuitar: Create SVG-Based Guitar Chord Charts — Why not continue with the musical theme? 😁 You can experiment with this one via this live demo.

Raphael Voellmy

FormKit 1.0: The Open-Source Form Framework for Vue — Ships with production-ready scaffolding like inputs, forms, submission and error handling, and validation rules.

FormKit, Inc.

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

Plate: Roll Your Own Slate-Based Rich-Text Editor — A framework for building React-based rich text editors where you can select the specific features and functionality you need. GitHub repo.

Ziad Beyens

Math.js: An Extensive Math Library for Node and Browser — Work with complex numbers, fractions, units, matrices, symbolic computation, etc. A long standing library now, but continuing to get frequent updates. GitHub repo.

Jos de Jong

Calendar.js: A Calendar Control with Drag and Drop — A responsive calendar with no dependencies, full drag and drop support (even between calendars) and many ways to manage events with recurring events, exporting, holidays, and more.

William Troup

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

npm-to-yarn – Convert npm commands to yarn and vice versa.

export-to-csv – Export arrays of objects to CSV.

Marked 8.0 – Fast Markdown parsing library. (Demo.)

Perfectionist 2.0 – ESLint plugin for sorting various data.

React Native Vision Camera 3.0
↳ Powerful camera control for React Native apps.

YouTube.js 6.3
↳ Client library for YouTube’s internal API.

Ink 4.4 – Use React to build CLI apps.

Prisma 5.2

ffmpeg.wasm 0.12.6