π Issue 16 / 23.06.2023
π 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!
ADAM HILL
π Svelte 4 Released
4 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
πA Look at TypeScript 5.2's New Keyword: using
MATT POCOCK
Β©JS 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!
ADAM HILL
π Svelte 4 Released
4 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
π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..MATT POCOCK
Β©JS WEEKLY
π5β€2π₯1
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
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
π4
π 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
π¬ 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
π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
π¬ 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
β€5π2
π CODE & TOOLS
πΌ 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
π© 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.
FINOS
π© 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)
πΌ 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
π© 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.
FINOS
π© 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)
π5π₯1
π13π₯2π€£1
π€7π€£4π2
β€9π₯6π3π€£2
π€£17π10π₯7π€6
π Issue 17 / 27.06.2023
π Kysely: A Type-Safe SQL Query Builder
Inspired by Knex and targeting Node, it also works in Deno and the browser. It boasts a good autocomplete experience thanks to its fluent API. GitHub repo.
SAMI KOSKIMΓKI
π The June 20 Node.js Security Releases
As we suggested last week, the Node.js 16.x, 18.x, and 20.x lines all got updates in the form of v20.3.1 (Current), v18.16.1 (LTS), and v16.20.1 (LTS). The vulnerabilities are explained in the post and are primarily related to OpenSSL or the use of the experimental permissions feature behind the
RAFAEL GONZAGA
Β©NODE.JS WEEKLY
π Kysely: A Type-Safe SQL Query Builder
Inspired by Knex and targeting Node, it also works in Deno and the browser. It boasts a good autocomplete experience thanks to its fluent API. GitHub repo.
SAMI KOSKIMΓKI
π The June 20 Node.js Security Releases
As we suggested last week, the Node.js 16.x, 18.x, and 20.x lines all got updates in the form of v20.3.1 (Current), v18.16.1 (LTS), and v16.20.1 (LTS). The vulnerabilities are explained in the post and are primarily related to OpenSSL or the use of the experimental permissions feature behind the
--experimental-permission
flag. (This is why it's an experimental feature, while initial weaknesses are discovered and fixed.)RAFAEL GONZAGA
Β©NODE.JS WEEKLY
π9π₯2
π CODE & TOOLS
π© Nightwatch.js 3.0: End-to-End Web Testing Framework
v3 includes some new selectors, features a revamped experience, lets you test Angular components in isolation, adds test double support for unit tests, and more. GitHub repo.
BROWSERSTACK LIMITED
π© Shiki: A Syntax Highlighter Using 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
π© Nightwatch.js 3.0: End-to-End Web Testing Framework
v3 includes some new selectors, features a revamped experience, lets you test Angular components in isolation, adds test double support for unit tests, and more. GitHub repo.
BROWSERSTACK LIMITED
π© Shiki: A Syntax Highlighter Using 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
π6β€5
What is the output?
Anonymous Quiz
18%
undefined, undefined, c
40%
a, b, undefined
35%
a, b, c
7%
c, c, c
π€12π6π₯5β€2