✅ Migrating to Next.js App Router with Zero Downtime

Migrating a complex app page by page will likely throw up some UX hurdles. The team at WorkOS developed a migration guide that allowed them to test their entire app with App Router while still serving the Pages Router to users before making the final switch.

Link to the article

#react #router #nextjs

✅ A Look at JavaScript's New Set Methods

Finding the intersection, union, and difference between sets, among other set-related tasks, is now a piece of cake. Available in Node 22+, Chrome/Edge 122+, Firefox 127+, Safari 17+, and now considered a 'baseline' feature.

Link to the article

#js #methods #mozilla

✅ Ecma International Approves ECMAScript 2024: What’s New?

This week, the Ecma General Assembly approved the latest ECMAScript / JavaScript language spec, officially making it a standard. As with ECMAScript 2023, it’s a small step forward, but Dr. Axel looks at what’s new.

Link to the article

#js #ecma #ecmascript #es2024

✅ Announcing TypeScript 5.5

One of the most significant TypeScript releases in terms of features in a long time. There’s support for the new Set methods (mentioned above), regex syntax checking, isolated declarations, inferred type predicates, and more. A bumper packed release post.

Link to the release

#release #js #ts #typescript

✅ Recreating the Queens Game in Vue

Queens is a puzzle game that combines elements of Minesweeper, chess, and Sudoku.

Link to the article

#vue #game

✅ Inline Conditionals in CSS?

The CSS Working Group resolved to add an inline if() to CSS. Seen by many as an overwhelmingly positive step forward, but one that raises lots of questions too. Lea explains what this all means, and why it’s exciting.

Link to the article

#css #new

✅ Shape Lens Blur Effect with SDFs and WebGL

An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.

Link to the article

#effect #js #animation #webgl

✅ Safari 18: What Web Features Are Usable Across Browsers?

Stefan outlines what new developer features are in the beta of Safari 18, and when it will be safe to use them more broadly.

Link to the article

#safari #new #release

✅ Uniting Web and Native Apps With 4 Unknown JavaScript APIs

A look at some ‘under-the-radar' web features, such as the Screen Orientation API and Device Orientation API, and how they can be used to create user friendly, robust PWAs.

Link to the article

#js #api

✅ Releases

Qwik 1.6 – Qwik 2 is coming soon, though.
A raft of Node.js Security Releases are due on July 8.
ESLint 9.6 - This release adds some new features and fixes several bugs found in the previous release.
PrimeVue 4.0 - Brand New Theming API, Tailwind CSS Integration, Enhanced UI Component Suite, Optimized Tree-Shaking, MonoRepo for add-ons
Bun 1.1.18 - This release fixes 55 bugs, Support for npmrc, etc.

#releases #js #frontend

✅ Using the CSS cap Unit

A look at how Ahmad solved a spacing design problem with the CSS cap unit.

Link to the article

#css

✅ Securing the Front-End: Defending Against XSS Attacks in Vue.js

As front-end developers, we create visually appealing and interactive interfaces for our applications. However, we also need to prioritize the security of our applications. One of the most significant security threats is Cross-site scripting (XSS) attacks, which can allow attackers to insert malicious scripts into our applications.

Link to the article

#vue #security #xss #frontend #js

✅ How to Redirect in Nuxt (Every Single Way)

Discover all the ways to implement redirects in Nuxt with this comprehensive guide. Learn about server-side, universal, and client-side redirects, along with their pros and cons. Check out the full demo app showcasing each method to see practical examples in action.

Link to the article

#vue #nuxt #router #js #frontend #ssr

✅ Enhancing The New York Times' Web Performance with React 18

Late last year, the team at The New York Times set out to take full advantage of React 18 on its flagship news site. This is an interesting case study looking at the challenges faced in upgrading and the significant benefits they managed to take advantage of.

Link to the article

#react #js #frontend

✅ The React Native Team Says 'Use a Framework'

Using frameworks, such as Expo, is now the recommended approach when creating new React Native apps. As Nicola explains: “you’re either using a framework or you’re building your own framework.”

Link to the article

#react #reactnative #js #frontend

✅ How to Annul Promises in JavaScript

You can 'cancel' XHR and fetch requests, but can you cancel regular promises? Currently, no, but Zachary looks into doing the next best thing: telling a promise the game's up, and discarding/ignoring its eventual results.

Link to the article

#js #frontend

✅ Pure CSS Circular Text (Without Requiring a Monospace Font)

How to create circular text (animated too if you want) with just pure CSS. A nice decorative element.

Link to the article

#css #frontend

✅ Web Performance Guide

A helpful collection of over 20 plain language guides, covering things such as working with the different core web vitals, optimization techniques, critical CSS, metrics, user monitoring, and more. You’re bound to find some worthwhile advice here.

Link to the article

#js #frontend #css #html #performance

✅ Layout and Reading Order

This talk gets into the nitty gritty of layout options with CSS (think grid, subgrid, gap etc) — with a particular focus on the proposed, new CSS masonry method, what it aims to fix and the prototyping currently underway in Chrome. A good overview of where we are, and where things are heading in terms of laying out our pages

Link to the video

#frontend #css #video