~javascriptweekly | Bookmarks (288)

📣 The React Team Shares What It's Been Working On — Work on React Compiler has progressed with it now powering Instagram’s prod site ('React 19 Will Be Compiled' goes into depth on what the compiler means for most React devs). We also learn React 19 is on the way and will include breaking changes to support things like Web Components.

Redwood v7.0: The React + GraphQL App Framework — Redwood is a full-stack Web framework that takes an opinionated approach, bringing together React, GraphQL, Prisma, and TypeScript, with a focus on building complete apps rapidly. v7 includes a new observability tool called Redwood Studio, realtime GraphQL features, and more.

Node.js's 2023 Summarized — Rafael, of the Node.js TSC and Fastify core team, shares a useful update on the evolution of Node.js over the past year, how the team ensures Node is well tested and reliable, changes to Node’s vendor dependencies (of which it gained three in 2023), as well as enhancements to Node’s security and Web presence.

A Guide to Using localStorage in Modern Apps — localStorage has been supported in most browsers for fifteen years plus now, so it’s a reliable way to store data client-side, though there are still situations where you wouldn’t want to use it. A good primer, but with a focus on alternative options.

How to Set Up a Basic Node Server App with TypeScript in 2024 — Popular dev educator Jason with a quick tutorial on how to set up a modern Node project with TypeScript, live reloading, and loading in environment variables.

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

▶  Pac-Man in JavaScript in 1 Hour — I felt old when Ania said “if you’ve never played Pac-Man before..” 😅 – nonetheless, she’s back with another of her fantastic, thorough walkthroughs.

HTMX vs React: A Complete Comparison — It strikes me as tricky to compare two very different approaches to what will often be distinct use cases, but undoubtedly people will want to weigh them up against each other, so here you go.

🗓 Tommy's Inclusive Datepicker: A Human-Friendly Date Picker — Try out this Web Component on the homepage itself. The user can type natural language phrases like “Next Friday” or “in 30 days” and the picker will move to the correct date. GitHub repo.

Skeleton: Reactive, Accessible Svelte UI Toolkit — A cool feature of the homepage is you can try out the different built-in themes, including dark and light modes, using a drop-down at the top.

Dax: Cross-Platform Shell Tools for Node — Similar to Google's zx but uses a cross-platform shell with common built-in commands so more code will work across platforms. Dax was originally written for Deno but now supports Node too.

📊 Apache ECharts 5.5: The Powerful Visualization Library — ECharts’ big selling point, beyond being a well supported Apache-backed project, is its balance of power and simplicity. You can do a lot with it (check out the many examples here) without the code becoming complex. v5.5 enhances its ESM support, adds server-side rendering support, and lets you make incomplete pie charts.

Effortless GraphQL with Hasura and TypeScript Functions — Hasura connects to your data sources, generates a GraphQL API, and deploys it globally — instantly. But, what if you could also write and use TypesScript functions directly in your GraphQL API? With Hasura, you can. Check it out on GitHub.

The Node.js Valentine's Day Security Releases — Security releases had been expected to land in the past week for Node and they’re now here as v21.6.2 (Current), v20.11.1 (LTS), and v18.19.1 (LTS). They include fixes for a variety of vulnerabilities, including some high severity ones involving HTTP-based DoS attacks and privilege escalation.

Union, Intersection, Difference, and More Coming to JavaScript Sets — Set was introduced back in ECMAScript 2015 (a.k.a. ES6) but only had some basic methods built-in. Phil looks at what sets can do and what new features are on the way.

Immutable Array Updates with Array.prototype.with — How to use this new, widely supported method to update an array without mutating the original array.

Safely Accessing the DOM with Angular SSR — Learn how to safely use the DOM together with SSR in Angular.

Peggy 4.0: A Parser Generator for JavaScript — Produces fast parsers with good error reporting. Use it to process complex data or computer languages and build transformers, interpreters, compilers, and similar tools. The online demo is pretty effective. The official successor to PEG.js.

vue-metamorph 1.0: A Codemod Framework for Vue.js Projects — A developer needed to make a large number of small changes to a variety of Vue components and built this tool to help. GitHub repo.

canvas-size 2.0: Determine Max Area, Height, Width, and Custom Dimensions of HTML Canvases — The Canvas element is broadly supported across browsers but there are differences in its size limitations, which this library can determine for you. GitHub repo.

Securing Your APIs: Verifying API Keys And Using Scopes — You have APIs. You need to make sure you know who is calling them and what they can do. What are your options?

Tempo: An Easier Way to Work with Dates — We think they nailed their own summary: “A collection of utilities for working with the native Date object — an important distinction from other libraries that provide custom date primitives. Under the hood, Tempo mines Intl.DateTimeFormat to extract complex data like timezones offsets and locale aware date formats, giving you a simple API to format,...