Big news for both Next.js and Remix

#​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 SupportRemix 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 GeneratorDocusaurus 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

11 years of JavaScript on top

#​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.