Month: June 2023

This is a doozy of an issue

Posted on by

#​645 — June 29, 2023

Read on the Web

JavaScript Weekly

A Massive Bug at the Heart of the npm Ecosystem — “This is a doozy,” says the author, who used to work on the npm CLI team. We don’t want to spoil his story too much, but in short, package manifests and actual package contents don’t necessarily match up and this can be manipulated by bad actors and even trip up auditing tools.

Darcy Clarke

Useful DevTools Tips and Tricks — Having worked on both Firefox and Edge’s devtools, Patrick knows his stuff (and shares over 100 tips on his DevTools Tips site). Here, he shares his top 15.

Patrick Brosset (Microsoft)

Secure Application PII with a Simple API Call — Secure your app effortlessly. Shield sensitive data with minimal code using the Redact API. Use one API to redact PII, PHI, financial info, and profanity. Prioritize user safety and ensure a seamless experience. Keep it simple; keep it secure.

Pangea sponsor

▶  The Cost of JavaScript in 2023 — Esteemed Googler and Web performance expert Addy Osmani always brings a full, holistic view of problems and solutions to his talks, and this is no exception. He talks about the various ways JS apps are delivered and rendered, the constraints of the hardware involved, and techniques you can use to keep things running smoothly.

Addy Osmani

💡 I know many readers dislike videos, but no word of a lie, this is a mini masterclass in numerous modern JS and webperf topics and worth saving for later.

Introducing the MDN Playground — The popular Web dev docs site has branched out into the world of code sandboxes. The MDN Playground provides a space to prototype frontend ideas and expand live samples in the MDN docs into an interactive experience (such as those here).

Mozilla

⚡️ IN BRIEF:

Ecma International has approved the ECMAScript 2023 spec (as well a standard for 1 terabyte holographic disks – neat).

/r/javascript is one of Reddit’s biggest subreddits with over 2 million followers, but it went read-only in protest of recent Reddit policies. They’re now discussing whether it should come back – it’s not looking likely.

TypeScript educator Matt Pocock 🐦 says the conversation has moved on from “Should we adopt TypeScript?” to “How do we best use it?”

RELEASES:

Ember.js 5.0 – A framework that pre-dates React, is used all over the place, but that barely anyone seems to talk about (and they should).

styled-components 6.0 – Popular CSS styling approach for React components. There’s a migration guide for upgraders.

Remix 1.18.0 – The full stack framework gains big perf improvements and stabilizes its HMR/HDR-ready “new dev server” (explained).

esbuild 0.18.10 – It’s had several noteworthy enhancements in the past week so we’re linking to the page covering them all.

📒 Articles & Tutorials

Don’t Write Console Logs Yourself Ever Again — We all use console.log and we’ll probably use it forever, but Amit says we can save time by using the Turbo Console Log extension for VS Code to at least insert the console.log statements for us..

Amit Merchant

An Introduction to Parser Combinators — Parsing is rarely exciting, but Varun has done a fantastic job of making an engaging tutorial for a dry, yet extremely useful, topic. This is the bare basics, but I hope we can encourage him to finish the series 🙂

Varun Ramesh

Too Much Tech Debt in Your node_modules? UpgradeJS.com Can Help 🚀 — Our senior staff specializes in tech debt: @JSUpgrade will take your app from outdated/vulnerable to modern/secure.

UpgradeJS․com | JS Services sponsor

An Update on Next.js’s App Router Approach — The ‘app router’ in Next.js 13+ offers a new approach for structuring Next apps and is recommended for all new ones going forward (it became stable in Next.js 13.4 last month). This post provides a welcome update on how the project sees the feature evolving and how the team is continuing to integrate and collaborate with React generally.

Delba de Oliveira and Lee Robinson (Vercel)

▶  React Server Components from Scratch: The Video — Dan Abramov recently released an introduction to RSCs built around reimplementing them from scratch. He asked on Twitter if anyone could record the post in video form and Jesse stepped up with a little ‘dramatic reading’ for added effect.

Jesse Pence

Why Doesn’t TypeScript Properly Type Object.keys? — This provoked an extensive discussion on Hacker News.

Alex Harri

Making Tiled Maps with Unity and JavaScript — If you want to create your own Google Maps-esque, Web-rendered tiled maps, Leaflet is a great option, but how do you produce custom map tiles? Using the Unity game engine is certainly one of the more creative ways..

Alan Zucconi

🛠 Code & Tools

Chalk.ist: Create Attractive Images of Source Code — Turn your source code into beautiful images using a variety of themes and customizations. (Be sure to note accessibility requirements or issues around using such images.)

Kasper Mikiewicz

Radash 11: A Functional, Modern, Typed Utility Library — There’s a live playground where you can try these out, and all 70+ utilities are described with examples in the docs. Underscore/Lodash vibes!

Ray Epps

Simple Statistics: Statistical Methods in Readable JS — A lot of the functions are quite simple, but the API is easily understood and covers areas like averages, deviations, correlation, and randomness.

Tom MacWright

Shiki: A Syntax Highlighter That Uses VS Code Themes — Supports over 100 languages and you can specify a VS Code theme in the settings to get the look you want. Works in both Node.js and even on static sites (via a CDN build) and you can see some examples here.

Shiki

Typist: Tiptap-Based Rich Text Editor Component — An unashamedly opinionated yet simple text editor control. You can try the examples in the sidebar. It’s suited for basic rich text situations like writing comments or messages and also has a single-line mode.

Doist

typescript-eslint – Enables ESLint & Prettier to support TypeScript.

Tween.js 21.0
↳ JS/TS animation engine. (Examples.)

psd 0.4
↳ No dependency PSD/Photoshop parser. (Demo.)

DOCX 8.1
↳ Generate and modify Word/.docx files.

NodeBB 3.2 – Node.js forum software.

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

😮 Coding in 140 characters

Wow 👏 – what some people can achieve in a mere 140 characters of JS is amazing. There are a lot of fantastic experiments over at Dwitter.

NodeSource, Inc. Announces AI Assistant “Adrian” for Comprehensive Analysis and Optimization of Node.js Applications and Open-Sourcing of its Augmented Node.js Runtime.

Posted on by

[Seattle, WA, June 28, 2023] — On stage at Collision Conf in Toronto, NodeSource, Inc., the leader in enterprise-grade solutions and support for Node.js, made two big announcements: the private beta of its groundbreaking AI Assistant, “Adrian,” designed to revolutionize the way developers and DevSecOps analyze, optimize, and secure Node.js applications, and that it’s open-sourcing its Node.js runtime to enable developers access to the most advanced runtime available.

NodeSource has been helping developers and organizations with the utilization of Node.js to build digital products and services for nearly a decade, most notably with its industry-leading product, N|Solid. Augmenting N|Solid’s unparalleled depth of insights and telemetry with AI gives customers a new level of context and understanding of performance and security analysis and how best to resolve issues.

The AI agent, Adrian, identifies memory leaks, poor code, security issues, and other performance problems that impact application performance and health.

“It’s like “god-mode” for Node, said Russ Whitman, CEO of NodeSource, “we give developers and DevsSecOps teams much more than telemetry and alerts; we help them identify the real issues, with context, to help them solve quickly. The cost and time savings are massive, and lets developers focus on creating new features and adding value to the organization”.

With the ever-increasing demand for scalable, efficient, and high-performing applications, Node.js developers face the constant challenge of optimizing their codebase to deliver exceptional user experiences. Adrian is an advanced AI-powered agent that provides actionable insights and suggestions, enabling teams to streamline their Node.js applications, reduce downtime, cut costs, and enhance overall user satisfaction.

“In the near future the performance of every software development team will be transformed by AI powered tools like N|solid”, offered Robert Duffy, Chief Product and Technology Officer, Drizly, an Uber company.

Key features of Adrian include:

Automated Metric Collection
Node Performance Enhancer
Intelligent CPU Profiling
Cost Calculator
Code Advisor

Sign up HERE to join the private beta and unlock the full potential of Adrian’s AI-driven insights and optimizations.

“Our AI Assistant is a major advancement to the AI features released in N|Solid last year,” noted Adrian Estrada, the VP of Engineering (and the naming inspiration for the assistant), which showcased how we could leverage the combination of our unique data insights from N|Solid, and the expertise from our team, to provide advanced solutions for our customers. With recent advancements in Generative AI, we can go significantly beyond our expectations to bring new value to our customers.”

NodeSource also has an exciting announcement for the developer community. In addition to the launch of Adrian, the company is open-sourcing its N|Solid Runtime, empowering all developers to utilize the best Node.js runtime available. This move aims to foster collaboration and innovation within the Node.js ecosystem, enabling developers worldwide to contribute to the ongoing advancement of Node.js technology.

“We strongly believe in the power of collaboration and open-source development,” added Trevor Norris, NodeSource’s Principal Architect. “By open-sourcing our runtime, we invite the community to join us in building a stronger, more efficient Node.js environment that benefits everyone. We are excited to see the positive impact this will have on the Node.js ecosystem as a whole.”

Big Announcements

The open-sourced version of N|Solid Runtime will be available with the release of Node 20 later this year.
NodeSource will also be offering a private beta program for Adrian. To sign up for early access and receive updates.

Look for more details at www.nodesource.com.

About NodeSource

NodeSource is a leading provider of Node.js application management solutions, like N|Solid, Node.js Support, and services, helping organizations successfully scale and secure their Node.js applications. Node Certified Modules (NCM) is a comprehensive tool that offers visibility, security, and governance for managing Node.js application dependencies. With its powerful features, NCM ensures that Node.js applications remain secure, reliable, and compliant with licensing requirements.

For media inquiries, please contact:
Brandi Duffy
– [email protected]

N|Solid v4.9.4 is now available

Posted on by

MPORTANT: This release of N|Solid v4.9.4 contains a Node.js security release!

NodeSource is excited to announce N|Solid v4.9.4 which contains the following changes:

General stability improvements and bug fixes
Node.js v16.20.1 (LTS): Includes a Node.js security release captured in Node.js v16.20.1 (LTS).
Node.js v18.16.1 (LTS): Includes a Node.js security release captured in Node.js v18.16.1 (LTS).

For detailed information on installing and using N|Solid, please refer to the N|Solid User Guide.

Changes

NodeSource is excited to announce N|Solid v4.9.4 which contains the following changes:

This release includes patches for these vulnerabilities:

CVE-2023-30581: mainModule.proto Bypass Experimental Policy Mechanism (High).
CVE-2023-30585: Privilege escalation via Malicious Registry Key manipulation during Node.js installer repair process (Medium).
CVE-2023-30588: Process interuption due to invalid Public Key information in x509 certificates (Medium).
CVE-2023-30589: HTTP Request Smuggling via Empty headers separated by CR (Medium).
CVE-2023-30590: DiffieHellman does not generate keys after setting a private key (Medium).

With the new action in N|Solid saved views, you can activate the tracing automatically when one or more processes cross over performance thresholds or match query parameters that you set.

N|Solid

N|Solid v4.9.4 Gallium ships with Node.js v16.20.1.
N|Solid v4.9.4 Hydrogen ships with Node.js v18.16.1.

There are three available LTS Node.js versions for you to use with N|Solid, Node.js 16 Gallium, Node.js 14 Fermium and Node.js 18 Hydrogen.

Node.js

The Node.js 16 Gallium LTS release line will continue to be supported until September 11, 2023.

The Node.js 18 Hydrogen LTS release line will continue to be supported until April 30, 2025.

Supported Operating Systems for N|Solid Runtime and N|Solid Console

Please note that The N|Solid Runtime is supported on the following operating systems:

Windows:
Windows 10
Microsoft Windows Server 1909 Core
Microsoft Windows Server 2012
Microsoft Windows Server 2008
macOS:
macOS 10.11 and newer
RPM based 64-bit Linux distributions (x86_64):
Amazon Linux AMI release 2015.09 and newer
RHEL7 / CentOS 7 and newer
Fedora 32 and newer
DEB based 64-bit Linux distributions (x86_64, arm64 and armhf):
Ubuntu 16.04 and newer
Debian 9 (stretch) and newer
Alpine
Alpine 3.3 and newer

Download the latest version of N|Solid

You can download the latest version of N|Solid via http://accounts.nodesource.com or visit https://downloads.nodesource.com/ directly.

New to N|Solid?

If you’ve never tried N|Solid, this is a great time to do so. N|Solid is a fully compatible Node.js runtime that has been enhanced to address the needs of the Enterprise. N|Solid provides meaningful insights into the runtime process and the underlying systems. Click 👉 [HERE]

Svelte 4 released

Posted on by

#​644 — June 22, 2023

Read on the Web

JavaScript Weekly

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

Adam Hill

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

Rich Harris and the Svelte Team

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

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

Bryntum sponsor

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

Matt Pocock

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

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

Li, Li, and Casado (Andreessen Horowitz)

⚡️ IN BRIEF:

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

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

RELEASES:

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

React Native 0.72

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

ESLint 8.43

📒 Articles & Tutorials

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

Bramus van Damme

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

Erick Wendel

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

Storyblok sponsor

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

Hidde de Vries

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

CodeLit

A Visual Guide to Understanding Node’s Event Loop

Vishwas Gopinath

Where to Host Your Remix App in 2023

Jacob Paris

🛠 Code & Tools

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

Daybrush (Younkue Choi)

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

Tuple sponsor

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

FormKit

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

Igor Savin

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

Sami Koskimäki

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

Fixie.ai

Generate SBOMs Effortlessly with Snyk

Snyk sponsor

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

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

Segun Adebayo

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

Shu Ding

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

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

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

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

AlaSQL 4.1
↳ JS SQL database for browser and Node.

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

💻 Jobs

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

Hired

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

11 years of JavaScript on top

Posted on by

#​643 — June 15, 2023

Read on the Web

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

JavaScript Weekly

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

Steve Krouse

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

Stack Overflow

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

Frontend Masters sponsor

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

Antonio Nuno Monteiro, Hongbo Zhang et al.

⚡️ IN BRIEF:

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

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

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

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

RELEASES:

Node.js v20.3.0 (Current)

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

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

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

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

📒 Articles & Tutorials

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

Craig Buckler

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

Nina Torgunakova

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

Wallaby.js sponsor

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

Fireship

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

Sriram Thiagarajan

▶  Learn Angular Routing in 35 Minutes

Ervis Trupja

🛠 Code & Tools

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

Motion Canvas

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

CoderPad sponsor

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

Grischa Erbe

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

Aiden Bai

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

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

Jest Community

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

Nick Dunas

React Authentication — Without Complexity

Userfront sponsor

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

Matthew McEachen

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

Various Authors

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

Neutralino.js 4.12.0 – JS desktop app framework.

Mineflayer 4.9 – Create Minecraft bots in JavaScript.

Tremor 3.1 – React dashboard building library.

♖ React Chessboard 3.0 – Yes, a chess component!

React Calendar 4.3

Dehydrating the Web with…
Miško Hevery

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

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

What was the key inspiration behind Qwik?

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

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

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

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

What is Qwik’s biggest differentiator to other frameworks?

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

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

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

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

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

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

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

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

💻 Jobs

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

Hired

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

AI & ML – Highlights Google I/O (Connect) – Miami

Posted on by

On May 24th, 2023, the inaugural edition of Google I/O Connect took place in Miami, USA. Google introduced this conference as an extension to engage directly with the technical community.

Note: Image courtesy of @KarolRojas90

The concept behind Google I/O Connect was to host distributed events in four different locations worldwide.

In Miami, the focus was bringing together Google Developer Experts (GDE) from North America (Canada and USA) and LATAM. Additionally, community leaders from GDG (Google Developers Groups) and Women Tech Makers, as well as contributors and collaborators, were allowed to participate. The event welcomed over 2,000 attendees and featured 51 outstanding speakers, who were Googlers responsible for delivering technical talks, workshops, and Office Hours.

Note: Image courtesy of @jcrtejada05

The event stood out for its impeccable organization, seamless execution, and strong commitment to ensuring that speakers and attendees had a remarkable experience.

What’s New in…

Without a doubt, they were the four verticals of the event:

Mobile
Web
clouds
AI

There were incredible advances that made us as developers excited to implement them into our products, but without a doubt, the one we most eagerly awaited was the __AI Lineup__.

Google AI’s Ubiquitous Influence: Reshaping Products Everywhere

Since 2017, Google has held a dominant position in artificial intelligence and modeling, particularly with NLP (Natural Language Processing). NLP is crucial in various applications, including machine translation, sentiment analysis, chatbots, and speech recognition.

However, history took an unforeseen turn with the monumental emergence of OpenAI and the project ChatGPT and the groundbreaking development of Stable Diffusion for generating images. These advancements have undeniably propelled these technologies into the public’s eyes.

Even though these concepts have already been worked on for some years, it is essential to understand the difference between AI and ML because in this same event, both in Keynote I/O and in Connect, they talk about advances in both.

Note: Sundar’s Image by The Verge – https://nsrc.io/TikTokVergeAI

AI is a powerful tool that can be used to improve the user experience, make products more efficient, and create new possibilities. Google is committed to using AI to make its products and services better for everyone. That’s why they announced integration into these products directly and more:

Android Studio Hedgehog: Android Studio Hedgehog uses AI to improve the development process for Android apps. For example, it can automatically generate code, suggest code changes, and identify potential bugs. This can help developers save time and create better apps.

Play Store: The Google Play Store uses AI to recommend apps and games to users based on their interests and past purchases. It also uses AI to surface new apps and games that users might be interested in. This can help users find the best apps and games for their needs.

Photos: Google Photos uses AI to organize, search, and edit photos. For example, it can automatically identify faces in photos and create collages and albums. It can also automatically improve the quality of photos. This can help users easily find and enjoy their photos.

Workspace: Google Workspace uses AI to improve the user experience for various tasks, such as writing emails, creating spreadsheets, and giving presentations. For example, it can suggest words while typing, automatically generate summaries of meetings, and translate documents into other languages. This can help users be more productive and efficient.

Maps: Google Maps uses AI to provide users with directions, traffic information, and other helpful information. For example, it can automatically suggest routes based on the user’s past driving habits and can provide real-time traffic updates. This can help users get around more easily and efficiently.

✨Generative AI

The main thing in all AI ads and product integrations comes from Generative AI, which, as its name says, is an artificial intelligence that can generate new content independently.

Check the Youtube Video HERE

Through Generative AI Studio, you can test and better understand the concept of Generative AI. A console tool for rapidly prototyping and testing generative AI models. You can test sample prompts, design your prompts, and customize foundation models to handle tasks that meet your application’s needs.

In Generative AI Studio, you can:

Test sample prompts.
Design your prompts.
Customize foundation models.
Convert between speech and text.

Try it HERE!

✨PaLM 2

PaLM 2, is a large language model (LLM) AI. It is a successor to PaLM, trained on a larger dataset and with a more robust architecture. This makes PaLM 2 better at a variety of tasks, including:

Natural language understanding: PaLM 2 can better understand the nuances of human language, such as idioms, sarcasm, and metaphors.
Generating text: PaLM 2 can generate more creative and realistic text, such as poems, stories, and code.
Answering questions: PaLM 2 can answer more complex and challenging questions, even if they are open-ended or strange.
Reasoning: PaLM 2 can better understand and reason about the world by making inferences and drawing conclusions.

PaLM 2 can implement Personal assistants, Educational tools, or Creative tools. But PaLM 2 is a series of models that includes the following:

Gecko, Otter, Bison, and Unicorn are four versions of PaLM 2, or Pathways Language Model 2. They differ in size, performance, and intended use cases.

Gecko is the smallest version of PaLM 2, with 1.2 billion parameters. It is designed to be lightweight and efficient, making it suitable for mobile devices and other resource-constrained environments.
Otter is a mid-sized version of PaLM 2, with 137 billion parameters. It balances size and performance well, making it suitable for various applications.
Bison is a large version of PaLM 2, with 540 billion parameters. It is the most potent version of PaLM 2, and it is designed for demanding tasks such as natural language understanding, generating text, and answering questions.
Unicorn is the giant version of PaLM 2, with 1.5 trillion parameters. It is still under development but is expected to be the most powerful LLM ever created.

Which version of PaLM 2 is correct for you depends on your specific needs. Gecko is a good choice if you are looking for a lightweight and efficient model for mobile devices. If you are looking for a model that is a good balance between size and performance, Otter is a good choice. Bison is a good choice if you are looking for a powerful model for demanding tasks. Unicorn is a good choice if you are looking for the most powerful LLM ever created.

But soon, Google will be in the release of a more sophisticated model called Gemini; What is coming is unimaginable if we count that in this project, the researchers from Google Brain and Google DeepMind come together.

At the moment, you can join the MakerSuite waitlist to experiment with the PaLM 2 API: https://makersuite.google.com/waitlist and read the API documentation: https://developers.generativeai.google /tutorials/setup

✨Bard – AI-Chatbot (http://bard.google.com) + 🎨 Bard + Adobe Firefly

Bard an impressive AI chatbot meticulously crafted by Google. As a sophisticated conversational AI, Bard is a large language model designed to be informative and comprehensive. Trained on an immense corpus of text data, Bard can communicate and generate human-like responses across various prompts and inquiries. Whether you seek factual summaries or immersive storytelling, Bard is primed to deliver. Bard is still under development but Is learning new things every day.

Adobe Firefly is a remarkable generative AI, harnessing the power to bring visual concepts to life based on textual descriptions. When paired with Bard, the possibilities for creativity and expression become boundless. This tool can create everything from marketing materials to personal projects. For example, you could use Bard to generate a text description of a product and then use Adobe Firefly to create an image of that product. Or, you could use Bard to generate a poem and then use Adobe Firefly to create an image representing the poem. The possibilities are endless.

Note: Please note that Bard + Adobe Firefly are still in beta, so there may be some bugs or limitations. Check the review of this amazing tool, HERE

As a delightful bonus, thanks to Bard, leveraging generated content between Gmail and Google Docs becomes effortless. Additionally, Colab’s growing relevance makes it an ideal platform for code-centric projects, ensuring enhanced productivity and collaboration.

Here are some of the benefits of these new developer features in Bard:

More precise code citations can help to build a more collaborative and respectful community of developers.
Exporting to Replit can make it easier for developers to collaborate on code and share their work with others.
A dark theme can make reading easier in low-light conditions and reduce eye strain.
Integration with various Google apps and services can make it easier for users to get things done.
Connection with external services and partners can offer users various possibilities.
Generative AI capabilities can help users to create unique visuals and automate data classification.

Vertex AI

Vertex AI is a managed machine learning (ML) platform that helps you build, deploy, and scale ML models faster and easier. It provides a unified experience for managing all aspects of the ML lifecycle, from data preparation to model training and deployment. Vertex AI also includes various tools and services that can help you improve the performance and accuracy of your ML models. It is built on the Google Cloud Platform and integrates with a wide variety of open-source ML frameworks, including TensorFlow, PyTorch, and scikit-learn. This integration allows you to use the tools and libraries you already know.
Try it here: https://cloud.google.com/vertex-ai/.

Project Tailwind

Project Tailwind is a new initiative focused on developing ways to use large language models (LLMs) to create more engaging and informative user experiences. One of the critical goals of Project Tailwind is to make it easier for developers to use LLMs in their applications. To do this, Project Tailwind is developing several tools and resources, including:

A new LLM framework is designed to be easy to use and scale to large datasets.
A new API that allows developers to interact with LLMs more naturally.
A new set of tools that help developers to debug and optimize their LLM applications.

Project Tailwind is an experimental project that still needs a public URL or GitHub repo. However, you can sign up for the waitlist to be notified when it becomes available. The waitlist is available here: https://tailwind.withgoogle.com/.

MediaPipe

Google’s partnership with MediaPipe is a significant step forward in the development of ML solutions. By providing modular and customizable solutions.

Project Gameface is an excellent example of the potential of ML. This project uses facial landmark detection to create a virtual avatar that can be used to play games. This is just one example of how ML can be used to improve our lives.

If you are looking to develop an ML application, check out MediaPipe.
You can use Mediapipe for Face detection, Hand tracking, or Object detection.

TensorFlow Overview: What’s New?

Here are some of the new features and improvements that were announced:

KerasCV and KerasNLP: These new APIs make building and training state-of-the-art models for computer vision and natural language processing tasks easier.

DTensor: This new library does training and scaling large models on distributed hardware easier.

JAX2TF: This new tool makes it easier to port models written with the JAX numerical library to TensorFlow.

TF Quantization API: This new API makes making TensorFlow models more efficient and cost-effective easier.

Web ML Hub: This new web-based platform makes building and deploying machine learning models in the browser easy.

To begin your exploration, visit https://ai.google/build/machine-learning/ and immerse yourself in a wealth of invaluable resources. This platform serves as your gateway to learning, providing a comprehensive collection of tools and insights that will empower you to apply machine learning to your projects.

Whether you are a beginner or an experienced practitioner, the knowledge and expertise shared on this platform will guide you through every step of your journey. Gain a deeper understanding of the underlying principles, familiarize yourself with cutting-edge tools, and access practical examples that showcase the technology in action.

Google I/O Connect

The Google I/O Connect event in Miami was a great success. It was a great opportunity to learn about the latest Google technologies, and it was also a chance to meet some of the leading experts in the field.

One of the event’s highlights was the chance to meet Dale Markowitz, a renowned figure in artificial intelligence. Markowitz is a Senior Research Scientist at Google AI and one of the leading experts on natural language processing. She was very generous with her time and happy to answer the attendees’ questions.

Google I/O Connect event allowed me to:

Learn about the latest Google technologies
Meet leading experts in the field
Get your questions answered by Google experts
Network with other developers
Get inspired and motivated to build great things

If you are a developer, I highly recommend attending a Google I/O Connect event. It is a great way to learn, grow, and connect with other developers. You can find upcoming events on the Google Developers events page or explore Google I/O Extended events near you to connect with the community.

Related Articles:

Google I/O 2023: Making AI more helpful for Everyone by Sundar – nsrc.io/45SJOqm
Google I/O Program, Codelabs, Workshops: https://io.google/2023/program/
Techcrunch – Google I/O 2023 is a wrap — here’s a list of everything announced – nsrc.io/43TA3Xr
Google I/O 2023 Highlights: Unveiling Google’s Latest Innovations and Improvements – https://nsrc.io/3WWF9zD
The Verge – Google I/O 2023: all the news from Google’s big developer event – nsrc.io/3MWHiqz
BusinessPost – 15 Exciting Highlights from Google I/O 2023 – nsrc.io/3NhF2eW

Douglas Crockford calls JavaScript ‘smelly.’

Posted on by

#​642 — June 8, 2023

Read on the Web

JavaScript Weekly

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

Evan Wallace

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

Daniel Rosenwasser (Microsoft)

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

Courier.com sponsor

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

David Hogan

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

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

Dan Abramov

⚡️ IN BRIEF:

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

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

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

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

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

RELEASES:

Tesseract.js 4.1 – Pure JavaScript OCR.

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

Redwood 5.3 – React + GraphQL full stack framework.

TensorFlow.js 4.7 – ML in the browser.

Madge 6.1 – Create graphs of module dependencies.

📒 Articles & Tutorials

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

Gregor Mitscha-Baude

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

Mattie Behrens

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

Dynaboard sponsor

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

François Zaninotto

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

Dunfan Lu

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

Thomas Steiner

Live Streaming with Multiple Hosts in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

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

Christian Heilmann

Primitive Objects in JavaScript: When To Use Them

Kirill Myshkin

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

endpts

🛠 Code & Tools

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

Algolia

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

Azat S.

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

TelemetryHub sponsor

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

Olivier Guimbal

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

Sasha Shpota

Noble Curves 1.1
↳ Audited elliptic curve cryptography library.

Taxi 1.3
↳ Add slick PJAX navigation to a site.

Inngest 2.0
↳ Build serverless job systems with TypeScript.

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

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

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

💻 Jobs

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

Hired

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

🛠 Useful Thing of the Week

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

Okiki Ojo

Measuring latency from the client side using Chrome DevTools and N|Solid

Posted on by

Almost every modern web browser includes a powerful suite of developer tools. In our previous blog-post we covered __How to Measure Node.js server response time with N|Solid__, read more ???? HERE.

The developer tools have a lot of capabilities, from inspecting the current HTML-CSS and Javascript code to inspecting the current ongoing network communication client-server.

To open the devtools and analyze the network, you can go to:

“More Tools” > “Developer Tools” > “Network”

Being on the devtools screen now, you can visit your Fastify API(or express) http://localhost:3000 after you get an HTTP response, you will see the request itself, the HTTP status code, the response size, and the response time.

GIF 1 – devtools.gif

An explanation for the time measured by the Chrome DevTools, HERE.

Let’s measure the Client-Side Latency.

Remove the delay timer logic on your application and restart the Node.js process.

import Fastify from “fastify”;

const fastify = Fastify({
logger: true,
});

// Declare the root route and delay the response randomly
fastify.get(“/”, async function (request, reply) {
return { delayTime: 0 };
});

// Run the server!
fastify.listen({ port: 3000 }, function (err, address) {
if (err) {
fastify.log.error(err);
process.exit(1);
}
});

NOTE: Discover another useful code snippet in our ‘Measure Node.js server response time with N|Solid’ article! This time, learn how to simulate server-side latency to further test your application’s performance. Check it out: ???? HERE

After this, you will get the fastest response times of ~1 ms, I was able to execute 139k requests in 10 secs using autocannon.

npx autocannon localhost:3000

The main point here is to see how it behaves when we have a poor internet connection on the client side and the best possible performance on the server side; for this, we can simulate high latency and slow internet connections on the client side, using Chrome devtools which has this option out of the box.

Simulate Client-Side latency

In the Chrome Devtools:

Go to the “Network Conditions” option > Select the option “Network Throttling” > Set it to __“Slow 3G”__.

If you request your browser to the URL http://localhost:3000/, you’ll see a long response time, in our case, __~2 seconds__.

This response time doesn’t mean the server takes that long to process the request and return an answer that was the amount of time that the answer took to transfer over the network till it arrived at the client side.

If you check your Fastify logs of the N|Solid metrics, you’ll see the server only took ~1 ms to return.

Check your logs with N|Solid
HERE

In our case, the response time was 0.3 ms

“responseTime”:0.3490520715713501

Can I improve/help the client-side latency?

Well, it is possible to improve the user experience on client-side devices with high latency when you use a Content Delivery Network to cache content on edge locations geographically near to users’ devices; even implementing some simple compression mechanism will improve the load times on users’ devices with high latency.

Look at this Jonas, our Principal OSS Engineer, blog-post and see ???????? __How to create a fast SSR application__.

Connect with NodeSource

If you have any questions, please contact us at [email protected] or through this form.

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities. Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

Experience the Benefits of N|Solid’s Integrated Features
Sign up for a Free Trial Today

Bundle-time macros with Bun

Posted on by

#​641 — June 1, 2023

Read on the Web

JavaScript Weekly

JavaScript Macros in Bun — Not content with giving the JavaScript world a brand new bundler, Bun’s Jarred has taken it a bit further: ‘macros’ that run at bundle time with the result being directly inlined into your code. They use stage 3 annotated import statements (so may become regular JS eventually) and Jarred shows off some use cases here.

Jarred Sumner

▶  Discussing the Future of React with Two Core Team Members — As part of the celebrations around React’s 10th birthday, Vercel’s Delba de Oliveira interviewed Andrew Clark and Sebastian Markbåge of the React core team on modern topics including server components, Suspense, Actions, and the next steps React will take.

Delba de Oliveira (Vercel)

URL Validation 101 — with Snyk — Keep script injection and server side request forgery out of your JavaScript applications with Snyk.

Snyk sponsor

Aimless.js: The ‘Missing’ JavaScript Randomness Library — If you’ve been itching for functions to give you random characters, numbers from custom distributions, random sequences, random items, weighted random numbers, or more, this is for you.

Christopher Cavalea

⚡️ IN BRIEF:

???? Two big birthdays in the past week: Node.js turned 14 and React turned 10.

Intel and Google have been working together on the Compute Pressure API which you can use, in origin trial, in Chrome 115. It provides a way to measure the ‘computational strain’ of the system your code is running on to then adjust how your app operates accordingly.

???? Misko Hevery, creator of Angular and now Qwik, was on the Stack Overflow Podcast talking about ▶️ how he’s ‘dehydrating the Web’ in an ongoing quest for higher performance.

‘Deferring Module Evaluation’ is a TC39 proposal for basically being able to lazily load modules which are executed only upon use.

You can now use Node.js built-in modules on Deno Deploy, making it easier to run existing JS apps ‘at the edge’ on their platform.

Tom Preston-Werner, GitHub co-founder and Redwood co-creator, writes about how Redwood is going ‘all in on React Server Components’ and announces the first Redwood conference this September.

SupportsCSS: Feature Detection for Modern CSS — Inspired by Modernizr, this script expands on the capabilities of CSS’s @supports feature by adding classes to your HTML and exposing a results object so you can run custom tests live in the browser.

Stephanie Eckles

????  JSDayIE 2023: The First JavaScript Conference in Ireland Is Back! — Join us on September 26th in Dublin to experience everything the Irish JavaScript community and Ireland have to offer.

JSDayIE sponsor

RELEASES:

Electron 25 – Now offering a Chrome-powered net.fetch (as opposed to Node’s flavor of fetch()).

Neutralinojs 4.12 – Desktop app dev framework.

Parcel 2.9

Bootstrap 5.3.0

node-oracledb 6.0

???? Articles & Tutorials

How to Draw Any Regular Shape with Just One JavaScript Function — Mozilla/MDN has a (relatively) new blog — here they share how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes.

Ruth John

Sharing WebSocket Connections between Tabs and Windows — If your users open your app in multiple tabs or windows, being able to share a WebSocket connection could be a lot more efficient both at the client and server end. Is it possible? With SharedWorkers (supported by all major browsers, except Chrome on Android), you can.

Szymon Chmal

▶  How React Works Under The Hood: 2023 Edition — Quite a lot of depth for a mere 13-minutes. Covers React broadly, along with the pros and cons of JSX, how the virtual DOM approach works, plus React’s diffing algorithm.

FrontStart

Connected APM and Infrastructure Monitoring at Up to 1/3rd the Cost of Datadog

New Relic sponsor

Why Does a Farmer Emoji Have a Length of 7 in JS? — This is a nicely accessible introduction to a topic that often causes confusion. Get ready to learn a little about grapheme clusters, scalars, and code units.

Evan Hahn

The Evolution of React APIs and Code Reuse — An exploration of common React patterns, from mixins and higher-order components to render props & hooks.

Rem / Frontend Mastery

▶  ‘I Tried 8 Different Postgres ORMs’ — A modern, fast-paced, and slightly irreverent look at working with Postgres from back-end JavaScript runtimes. (9 minutes.)

Beyond Fireship

Automatically Unsubscribe from RxJS Observables in Angular Components

Rob Bell

Deploying Vanilla Node.js Apps on Fly.io

Sam Ruby (Fly)

Asynchronous JavaScript for Beginners

Daniel Agantem

???? Code & Tools

Svelvet: A Svelte Component Library for Interactive Node-Based Diagrams — You can create flow diagrams using pre-built components with seamless zooming and panning, draggable interactivity, customizable edges/nodes, etc.

Svelvet Team

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

Handsontable: Data Editor for React — There’s a lot of JS data grids out there, but none quite like Handsontable: Excel-like design, keyboard shortcuts, and React support make it the perfect data editor for web apps.

Handsontable Data Grid sponsor

JECS: An Entity Component System (ECS) for JS — Entity component systems are common in game development as they provide a lot of flexibility for managing the many objects present in games.

Stuhl

Color Names: A Gigantic List of Handpicked Color Names — At first, I thought this was just going to be a hundred or so obvious choices like the named colors in HTML (???? rebeccapurple) but it’s actually over 30,000 colors with a fantastic array of names and uses, plus JavaScript functions to work with them.

David Aerne

fastgron: High-Performance JSON to GRON Converter — ‘gron’ is a transpiled form of JSON into individual assignment operations which makes it easier to grep. (fastgron is itself written in C++.)

Adam Ritter

Orama 1.0.3
↳ In-memory, typo-tolerant, text search engine.

Perspective 2.2
↳ WASM-powered high-perf data visualization component.

Javet 2.2 – Java + V8. Embed JS into Java.

OverlayScrollbars 2.2 – JS custom scrollbar plugin.

html-react-parser 4.0 – HTML to React parser.

Vuetify 3.3.2 – Vue component framework.

React Slider 10.2 – Demos.

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

????  Live-streaming from JavaScript

JSFiddle: Did You Know You Can Stream on Twitch from JavaScript? — This is an interesting experiment, but I tried it and it worked! Twitch added support for WebRTC ingestion a while ago and this CodePen example ties that together with fewer than 50 lines of JavaScript to send your preferred video source to the popular livestreaming service. It’s hardly OBS, but I imagine someone will rustle up something fancier with this approach in time.

Sean DuBois on JSFiddle