Month: November 2023

NodeSource Team Supports JSConf Colombia for the Event’s 10th Anniversary

Posted on by

Over a thousand developers gathered together two weeks ago to engage in all things JavaScript at the sold-out JSConf Colombia (https://www.jsconf.co/) while celebrating its 10th year in Medellin. Our NodeSource team members (current and past) played impactful roles in leading, planning, and speaking to support the community event. We are incredibly proud of our Colombian team members, who are a massive part of creating our best-in-class OSS N|Solid Runtime and premium platform N|Solid Pro.

Adrian Estrada, our VP of Engineering and OpenJS Foundation Board Member, has been a key leader for years in supporting Colombia’s Node.js and JS community. His great passion for technology and enabling people to develop and grow makes him a fantastic leader for our global engineering team and community engagement. Alongside Adrian, Julian Duque, a NodeSource alumni, has also been instrumental in the Colombian JavaScript community. His leadership and contributions have significantly shaped the region’s JavaScript development landscape. Julian’s efforts, combined with Adrian’s dedication, underscore the deep involvement and influence NodeSource has in nurturing and advancing the tech community in Colombia.

This event has had an incredible decade-long run, with a commitment to breaking down barriers, promoting accessibility, and creating a space that champions diversity. As the last in the series, the community was committed to making this final event one to remember.

The event opened to local musicians on stage, setting the tone for a joyous and creative experience. Talks at the event showcased the diversity of the community, including topics like “Making Art with JavaScript and Garbage,” “Unlock the Power of JavaScript Generators,” “IDX, WebIDE’s and the Future of JavaScript Debugging,” and the AI-themed “Chatting with the Canvas; How to Assemble Art from AI Image Prompts.”

Jessica Felix highlighted N|Solid, our product, emphasizing its significance in modern Node.js development and performance analysis. This array of topics underlined JavaScript’s dynamic and multifaceted nature, catering to a wide range of interests and expertise within the community.

NodeSource Alumni and JS Rockstar Erick Wendel shared his knowledge about “How to consume gigabytes of data in JavaScript without slowing down applications.”

And one of our current team members, the talented Juan José Arboleda, challenged the attendees that “JavaScript can be as fast as C++.”

Colombia has long been a crucial part of NodeSource, and the talent and energy from the region have produced many great team members. Like Maria Fernanda Serna and NodeSource Alumni Liz Parody, who helped organize this year’s event, we have enjoyed the spirit and talents of this region. Colombia has also been a place where we give back. From these community events to where we planted trees for every customer in our NodeForest campaign, Colombia is ¡Qué nota de lugar! (a fantastic place!).

In keeping with this spirit of community and innovation, a new event is being born to replace JSConf Colombia. It will be announced soon and is set to happen in October 2024. This upcoming event, which includes some of the organizers of JSConf Colombia, will continue to foster the region’s vibrant tech community. NodeSource will also continue to support this initiative, highlighting its ongoing commitment to the Colombian tech scene.

Every Framework Everywhere All at Once

Posted on by

#​665 — November 30, 2023

Read on the Web

JavaScript Weekly

Eliminating JS Framework Lock-in with Web Components? — Can you build an app where each component is using a different framework? Amazingly, yes. Web components aren’t new but are ‘having a moment’ and Jake demos an interesting, if contrived, use case. He explains: “Say you’re writing a Vue app and you really want to use a library that’s only available as a React component. You can wrap that library in a web component and use it in your Vue app…”

Jake Lazaroff

Announcing Deno Cron — Deno adds a cron-style feature to run code on a pre-defined schedule using Deno.cron. This works locally (behind –unstable) in a long-running process, but on Deno Deploy it analyzes the definition and runs the code on time, as you’d expect, with no extra work needed.

Zinkovsky and Jiang (Deno)

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.

Bosch sponsor

The Biome Formatter Wins the ‘Prettier Challenge’ — Two weeks ago, the creator of Prettier put up a $10k bounty for a Rust-powered code formatter that could pass over 95% of Prettier’s tests. Biome, the toolchain forked from Rome, has already managed to claim the prize, topped up by further contributors.

Biome

🤔 There’s a post from the Prettier POV where @vjeux explains why he offered the bounty: he felt a ‘a lack of competition’ was holding Prettier back.

IN BRIEF:

📺 Evan You, creator of Vue.js, presented an update on the state of Vue and Vite for VueConf Toronto attendees. (48 minutes.)

🟩 The two LTS Node.js branches have received releases backporting features from newer versions: Node v20.10.0 (LTS) gains WebSocket and an experimental flag to auto-detect ESM code. Node v18.19.0 (LTS) gets npm 10 and tweaks for customization hooks and loaders.

🎙️ Off The Main Thread is a new podcast featuring Jake Archibald and Surma (both formerly of Google / HTTP 203).

🎂 Not to do with JS – though some of you may use it – but Notepad++ is 20 years old. It’s a popular open source code editor and Notepad replacement for Windows.

🙋 The State of JavaScript 2023 survey is still open to take.

RELEASES:

Passport 0.7 – Popular authentication middleware for Express-based apps.

eta (η) 3.2 – Embedded JS template engine for Node, Deno, and browsers.

Fable 4.6 – F# to JavaScript transpiler.

📄 Articles & Tutorials

▶  10 JavaScript Changes You (May Have) Missed in 2023 — We’ve covered most of these, but this is still a productive refresher in just six minutes, covering things like toSorted(), iOS Web Push, Next.js updates, Angular 17, and the rapid rise of Bun.

Fireship on YouTube

Fireship is a great channel for these sort of quick-fire roundups, and if you want more 100+ JavaScript Concepts You Need to Know is a fun one.

Tracking Frontend JS Exceptions with Playwright Fixtures — Playwright is commonly used to test frontend apps and ensure they’re rendering and behaving correctly, but what if you want to be sure the underlying JavaScript is working as expected too? Stefan has some tips.

Stefan Judis

Lesser Spotted React Mistakes and How to Avoid Them — Read about common pitfalls that occur when writing React code. Cut, paste, & try the included examples in your own code.

Sonar sponsor

A Deep Dive into CheerpJ 3.0: A WASM JVM for the Browser — A look at an interesting WebAssembly-based Java Virtual Machine that runs client side in the browser, opening up bidirectional Java-JavaScript interop, if you need it. Note that it’s commercial, but can be used free for personal projects and evaluation.

Pignotti, Bates, and De Rossi

A Simple WebSocket Benchmark: Node vs Bun — Using as ‘textbook’ an example of WebSocket communication as possible, the author pits Node and Bun against each other.

Daniel Lemire

Svelte Through the Eyes of a React Developer

Ido Shamun

🛠 Code & Tools

FullCalendar: A Full Sized JavaScript Calendar Control — An interesting option if you want a Google Calendar style experience for your own apps. Has connectors for React, Vue and Angular. The base version is MIT licensed, but there’s a commercial version too with extra features.

Adam Shaw

Knip 3.3: Find Unused Files, Dependencies and Exports — Finds unused files, dependencies and exports in your projects and lets you cut/knip them away.

Lars Kappert

😍 Knip has continued to evolve a lot this year, and now also has a snazzy new homepage. You can also learn more about what’s new in 3.x.

Inline REPL Anywhere in Your Code — Execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.

Wallaby Team sponsor

Syntax.js: Code Syntax Highlighting Library — There are many long standing options in this area, such as Prism and highlight.js, but it’s interesting to see a fresh and lightweight take.

William Troup

ai2html: Turn Adobe Illustrator Files into HTML — We noticed this tool being used by the Financial Times to share graphs they’ve designed, and the result is really good. This project isn’t new, but we haven’t shared it before, it’s well maintained, and there are lots of examples.

The New York Times Company

aws-lite: A New Node.js-Powered AWS API Client — AWS does a good job with its APIs and tooling, but sometimes their approach is a little heavyweight. aws-lite provides a simpler, faster option. “You can think of it as a community-driven alternative to AWS’s JavaScript SDK.”

Begin

Hire Vetted Developers in US Time Zones, Fast

Revelo sponsor

Neutralinojs 4.15.0 – Cross-platform desktop app framework – lighter than Electron as it uses the locally available browser engine.

jest-image-snapshot 6.3 – Jest matcher for image comparisons.

Mongoose 8.0 – MongoDB object modelling approach.

edit-in-place 1.9 – Edit in place library for Angular apps.

Jotai 2.6 – Simple, flexible state management for React.

sql.js 1.9 – SQLite 3.44 compiled to JavaScript.

React Share 5.0 – Social media sharing buttons.

np 9.0 – A better npm publish.

pnpm 8.11 – Fast, disk space efficient package manager.

NOTABLE QUOTABLE

“As a principal engineer, I view it as my role to keep us off the bleeding edge as much as possible. That way, when we really do need to innovate, we have the capacity to do so. And when we don’t need to, we can go really freaking fast.”

___
Nicole Tietz

3 Takeaways from Web Summit 2023

Posted on by

Along with approximately 70,000 other souls from around the globe, the NodeSource team attended Web Summit 2023 earlier this month. Famous for being the largest European tech event (or even the world), Web Summit was full of riveting AI conversations, more than 2,600 startups, and plenty of tasty food trucks and, of course, amazing local cuisine.

On the heels of this successful event, we’d like to share our team’s biggest event takeaways as we close this year on a strong note and get ready for what 2024 has in store.

#1 Everyone has a unique take on using AI.

From session topics to conversations with our peers, AI was all the buzz at the event and we were definitely not the only ones leaning into the AI movement. Startups across all industries are injecting AI into their products and services, and many are at different points in their adoption of the technology. While there are many who are only an inch deep into AI, some are using it in more advanced and compelling ways.

For example, Riccardo Semadeni, MediRapp AG’s CEO, is transforming ultrasound diagnostics and improving global patient outcomes by automating everything from data collection to diagnosis to reporting. With AI, MediRapp is making the entire process faster, more accurate, and more effective while significantly elevating patient care. This is a great showcase of how AI can process nearly unlimited amounts of data and provide analysis that significantly increases the quality of outputs and helps make better decisions.

On the other hand, another company, Harry, is using AI in a completely different way. Simo Alami explained how they are creating AI powered resources for companies. Do you need a content writer? SEO specialist? PR manager? Other marketing talent? Harry will create a customized AI resource for your organization. This is a very interesting use of generative AI to create meaningful value for small and even large organizations by augmenting teams with AI powered by data.

These two examples showcase how innovative leaders are identifying new ways to use AI advancements to transform their industries.

#2 Collaboration paves the way for continued transformation.

Our team traveled from all over the world to attend Web Summit—Seoul, Madrid, Sao Paulo, Utah, Seattle, Medellin, Bogata, Vancouver, and Berlin. With this in-person time together, we dove deep into ways we could continue to elevate our offering and customer experience. We discussed ways to evolve our recently open-sourced N|Solid Runtime and advance our AI powered Node.js Copilot, which we released on the first day of Web Summit. This time allowed us to gather essential insights from our community who shared the common consensus that NodeSource’s ability to open-source our runtime would be transformative for development teams.

Having dedicated time to come together as a team to bond, share, and test new ideas is critical to our success and we look forward to putting these plans into motion.

#3 Our industry is full of startup founders dedicated to making an impact.

On the event’s opening day, NodeSource was one of 300 startups selected for a special event, “The Gathering.” During the day, we participated in group sessions discussing a range of topics from leadership to raising capital to AI. While these discussions were full of great insights, what was even more notable was the ability to connect with fellow founders looking to make an impact.

Web Summit was full of lively conversation about taking our industry to the next level. We chatted with startup entrepreneurs, learned from headliners with unique stories, and shared exciting updates with investors, press, and customers. We thoroughly enjoyed connecting with founders and enterprise leaders whose digital products rely on Node.js and tech builders that leverage and build with Node.

Overall, NodeSource had a wonderful time at Web Summit and even had the opportunity to visit some local sites, like visiting CasCais by way of a winding trek along the coast and then up into the hills to the westernmost point of all of Europe at Cabo Da Roca. Heading into the new year, we can’t wait to attend Web Summit 2024!

The unbearable weight of massive JavaScript

Posted on by

#​664 — November 23, 2023

Read on the Web

JavaScript Weekly

Time to Take the State of JavaScript 2023 — The long standing State of JavaScript survey is back for another run at figuring out what the community is up to and what tools we’re using. The results are always illuminating and we’ll share the tastiest parts once available.

Devographics

▶  The Unbearable Weight of Massive JavaScript — An extensive talk looking at what can be achieved by simplifying web architecture, chiefly by using new or upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly frontends. Slidedeck.

Ryan Townsend

Stop Building Auth, Start Building Apps with EdgeDB + Next.js — It’s hard enough to come up with an idea worth trying. See how EdgeDB and our new authentication extension makes it easy to go from idea to working application in record time using Next.js.

EdgeDB sponsor

TypeScript 5.3 Released — The latest edition of the type-enhanced JavaScript superset is here. The headline feature is full support for the import attributes proposal (as it currently stands, at stage 3 in TC39), but there are many enhancements around type narrowing, interactive inlay hints for types in editors, and more. Not the biggest update, but progress nonetheless.

Daniel Rosenwasser (Microsoft)

Vite 5.0 Released — The Vite suite of frontend tooling may have started life in the Vue.js world, but is now used by projects aplenty including SvelteKit, Remix, and Astro. v5 now uses Rollup 4, removes many deprecated features, and requires Node 18+. There’s a migration guide to help with your v4 to v5 progression.

Evan You and Contributors

IN BRIEF:

The Node.js 20.x runtime is now available on AWS Lambda.

🎁 A bumper list of dev-related tools & services running Black Friday deals.

GitHub looks at what’s new in the latest Git release: Git 2.43.

The AWS Amplify team teases ‘Gen 2’ of their fullstack app platform.

RELEASES:

⭐️ Transformers.js v2.9 – State of the art ML in JavaScript. v2.9 adds support for depth estimation, zero-shot object detection, and optical document understanding.

Redux Toolkit 2.0 rc.0, Redux 5.0 rc.0, React-Redux 9.0 rc.0 – Initial RCs with better packaging and smaller bundles. Final releases due soon.

Bun 1.0.14 – Introduces a high-perf globbing API for matching files and strings.

Rspack 0.4 including Rsbuild 0.1 – A fast Rust-based web bundler.

Node v21.2.0 (Current) and Node v20.10.0 (LTS)

Starlight 0.13.0 – Beautiful docs sites atop Astro.

📄 Articles & Tutorials

▶  4 Web Devs, 1 App Idea — Salma Alam-Naylor, Scott Tolinski, and Eve Porcello join Jason Lengstorf to kick off a fun new series where several developers all implement the same type of app, show off how they went about it, and react to each other’s approaches. Svelte, Astro, and Next.js each make an appearance.

Learn with Jason

Promises Training — Practice working with promises through a curated collection of interactive challenges. Aimed at developers with at least an intermediate understanding of promises who want to dig deeper.

Henrique Inonhe

JavaScript Error and Performance Monitoring — Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

An Attempted Taxonomy of Web Components — A collection of open-source web components (and lessons learned from using them) that may help you on your journey in this complex, developing space.

Zach Leatherman

Using OpenAI APIs to Analyze Automated Test Failures — A look at how to develop a Nightwatch.js plugin which sends the test failure and associated errors to a service that integrates with OpenAI’s platform to analyze said errors and provide actionable feedback.

Andrei Rusu

🛠 Code & Tools

Bruno: An Open-Source HTTP API Exploration App — There are a lot of ‘API client’ tools like this, commercial and non-commercial, with varying levels of features, but this is an open source one entirely built in JavaScript with a fully-offline ethos some might appreciate. GitHub repo.

Anoop M D, Anusree P S and Contributors

debounce 2.0: Delay Function Calls Until a Set Time Elapses — If you don’t want something to run too often, debouncing is the strategy for you and this library makes it simple. v2 adds types and brings the code up to modern standards.

Sindre Sorhus et al.

Level Up Your UX With Bryntum — Empower your users with advanced widgets like data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

H3: A Minimal HTTP Framework for Multiple JS Platforms — Aims to be as universal as possible and works across numerous platforms, including Node, while offering the basic HTTP framework features and a compatibility layer with Express middleware. v1.9 just landed.

UnJS

request-animation-frames: Use requestAnimationFrame Anywhere — The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use requestAnimationFrame in any JavaScript environment. The implementation is delightfully simple.

Sindre Sorhus

Spectral.js: A More ‘Paint-Like’ Color Mixing Library — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka–Munk theory which more closely matches how paints work for a visually satisfying result.

Ronald van Wijnen

‘A Node + TypeScript + ts-node + ESM Experience That Works’ — It’s just three files: package.json, tsconfig.json and a utilities file.

Khalid Zoabi

A Non-Cloud Alternative to Google Forms That Has It All

SURVEYJS sponsor

🖼 medium-zoom 1.1: A Library for Medium-Style Image Zooming — Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly. Now we just need a library that can cover up the bottom half of a page with junk like Medium also does now. Demo.

François Chalifour

gridstack.js 10.0 – Build interactive dashboard panels quickly.

MQTT.js 5.3 – MQTT client for Node and browser.

Piscina 4.2 – Node.js worker thread pool implementation.

(Official) MongoDB Node.js Driver 6.3

SQL Formatter 14.0 – Pretty print SQL queries.

Job Listing

Full Stack TypeScript Software Engineer – [Remote Europe] — Marker.io is a visual bug-reporting tool for the web. Join our dev team and work remotely (Stack: Node.js, Vue.js & MongoDB).

Marker.io

NOTABLE QUOTABLE

“Programming isn’t about what you know; it’s about what you can figure out.”

___
Chris Pine (author of Learn to Program)

P.S. Medium is 🗑️. If you don’t want to host your own blog, try Hashnode, dev.to, Bear, or even throw Markdown at GitHub Gists – it’ll provide a better reader experience and we’ll be more likely to link to it.

Digging into explicit resource management

Posted on by

#​663 — November 16, 2023

Read on the Web

JavaScript Weekly

Prettier 3.1 Released — The popular opinionated code formatter has a new release including support for the new control flow syntax in Angular 17 plus a new, experimental formatting option for ternary expressions (as in x ? y : z) explained in more depth in “A curious case of the ternaries.”

Alex Rattray

🤔 With an aim to making code formatting even faster, Prettier’s co-creator has put up a $10k bounty for any Rust project that passes >95% of Prettier’s tests.

Exploring Explicit Resource Management in JS — A practical look at the idea of explicit resource management, an idea both currently at stage 3 in TC39 (and partly supported in TypeScript 5.2) that makes it easier to ‘clean up’ resources once they are no longer used or needed.

Ilia Pozdnyakov

Build Interactive, Live Video Applications with Amazon IVS — Amazon Interactive Video Service (Amazon IVS) allows developers to create dynamic video experiences, such as collaborative real-time livestreams. Check out the new ivs.rocks to find code samples, demos, and other resources. Click here to get started.

Amazon Web Services (AWS) sponsor

On HTML Web Components — “With web components, you might even say React’s component model is being ported to the browser. But it’s being done in a way that works to enhance how the web already works, not replace it”.

Jim Nielsen

A Review of Lightweight JavaScript Frameworks — This overview is targeted at Django (i.e. Python) developers but if you, too, want to avoid larger frameworks like React or Angular, you might appreciate this look at numerous alternatives from Stimulus and htmx to more oblique options like Laravel Livewire.

Michael Yin

🥳 AWS is celebrating a huge release with v6 of the AWS Amplify JavaScript library which includes full support for Next.js App Router and Server Actions.

🌎 Node.js TSC member Yagiz Nizipli is suggesting using Biome for code formatting in Node, since ESLint has deprecated its core formatting rules.

👾 The winners of React Jam, a recent React-based game development contest, have been revealed. An entry I enjoyed was useChess, a set of chess-based puzzles.

▶️ If you’ve wondered what the big deal is about Astro, James Q Quick went on the Software Engineering Daily podcast and explained Astro pretty well.

🎵 Someone’s recorded ▶️ a rap music video about TypeScript..

RELEASES:

Node.js v21.2.0 (Current)

visx 3.5 – D3-based visualization primitives for React.

fx 31.0 – Powerful terminal JSON viewer.

Astro 3.5, Ember 5.4, and Prisma 5.6.

📄 Articles & Tutorials

67 Browser-Based Debugging Tricks — A list of useful, ‘not-obvious’ hacks to get the most out of the browser’s DevTools. Assumes a reasonable existing understanding of said tools.

Alan Norbauer

Exploring V8’s Strings: Implementation and Optimizations — Note: This is very technical and most JavaScript developers do not need to go this deep. That aside, this is a fantastic look under the covers of how the V8 engine handles strings, including the optimizations used that allow it to go toe to toe with languages like C++.

Ilia Pozdnyakov

JavaScript Scratchpad for VS Code — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby Team sponsor

▶  An Overview of Angular 17’s New Built-In Control Flow — Angular 17 was released last week and a significant enhancement was support for a new syntax in templates that looks and feels more JavaScript-y.

Dmytro Mezhenskyi

Moving Back to React (from Preact) — Preact felt like a logical, lightweight choice to this team at one time, but they’ve switched to React for better compatibility with Next.js, among other things. Their page weight is up slightly, but they feel the tradeoff is worth it.

Ante Barić (Daily․Dev)

My Journey to 3x Faster Builds: Trimming Barrel File Imports — “I maintain a small frontend application (4K LOC) which uses Vite as the compiler. The production build, using npm run build, was taking 26 secs on Github Actions. It seemed awfully slow for such a small application. I decided to investigate why.”

Ramana Venkata

Can Bun Eat Node’s ‘Lunch’? — An experiment in migrating a codebase (a restaurant voting app called Lunch) from Node over to Bun and seeing how it fares.

Jeffrey Carl Faden

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch

Bosch sponsor

How to Use NPM Packages Outside of Node — Learn how to run NPM packages in ‘other places’ like serverless platforms, the browser, and beyond.

George MacKerron (Neon)

What I Learned Building an Audio Plugins System for the Web

Ben Wiley

Rust for JavaScript Developers: An Overview of Testing

Joshua Mo

🛠 Code & Tools

gsplat.js: A Gaussian Splatting Library — Gaussian splatting is an increasingly popular graphics rendering techniques where rather than render millions of tiny, textured triangles in a scene, you get a more wild paintball-like splatter fest, where each paintball creates a smooth, colorful blob instead of a rigid shape. This demo is both simple and striking.

Dylan Ebert

Reveal.js 5.0: The HTML Presentation Framework — A way to build presentations using standard Web technologies. The project’s homepage is, itself, such a presentation. v5.0 adds support for ‘scroll mode’ which essentially turns presentations into more typically scrolling Web experiences – demo.

Hakim El Hattab

🖍️ Marker.io: Collect Bug Reports With Annotations & Session Replay — Collect feedback on live websites. Get dev-friendly bug reports with screenshots, URLs, console logs & session replay.

Marker.io sponsor

Datasheet Grid: An Airtable-like React Component — If you’ve got an array of objects and you want a way for users to manipulate them, this is for you. It’s not going to replace a spreadsheet or an extensive data grid framework, but it’s a mature solution featuring smooth animations, virtualized rows/columns, keyboard navigation, and more.

Nicolas Keller

Perfect Freehand: A Library for Creating Better ‘Freehand’ Lines — You can try it out here. Makes your e-signature not look like chicken scratch! Might be useful for drawing apps.

Steve Ruiz

Wild Wild Path v5: Object Property Paths with Wildcards and Regexps — A ‘wild’ way to access properties in objects (which can be deeply nested) by way of string based queries that support wildcards and regexes. The examples help communicate the idea.

ehmicky

@storybook-test: More Streamlined and Powerful Storybook Testing — @storybook/test consolidates the API of @storybook/jest and @storybook/testing-library into a new, single package, powered by Vitest.

Kasper Peulen

Marked 10.0 – Markdown parser and compiler. There’s also marked-terminal 6.1 which lets you render Marked-processed Markdown on the terminal.

HumanizeDuration.js 3.31.0 – Turn milliseconds into textual durations in numerous natural languages.

actions/github-script 7.0 – Script the GitHub API in GitHub Actions.

Plasmo v0.84.0 – “Like Next.js for browser extensions.”

PDFKit 0.14.0 – PDF generation for Node and browser.

React Joyride 2.7 – Create guided tours in your apps.

Job Listing

Full Stack TypeScript Software Engineer – [Remote Europe] — Marker.io is a visual bug-reporting tool for the web. Join our dev team and work remotely (Stack: Node.js, Vue.js & MongoDB).

NOTABLE QUOTABLE

“When you choose a language, you’re choosing more than a set of technical trade-offs – you’re choosing a community.”

___
Joshua Bloch

Introducing N|Solid Copilot: Your AI-Powered Node.js Navigator

Posted on by

We are thrilled to announce the latest addition to N|Solid Pro – the N|Solid Copilot, a groundbreaking AI-powered assistant designed to revolutionize your Node.js development experience. This innovative tool is a leap forward in Node.js application observability and security, it’s like having a Node expert on-call.

View of N|Solid Pro Console with the Copilot drawer open allowing a user to interact with the AI Assistant.

Why N|Solid Copilot?

N|Solid Copilot is developed with one goal in mind: to make your life as a Node.js developer or DevOps engineer easier, more efficient, and more secure. It’s like having a Node.js expert by your side, 24/7, offering real-time insights into observability alerts, along with actionable advice tailored to your unique application needs.

Key Features of N|Solid Copilot

Real-time analysis and insights: Identify and resolve performance bottlenecks, memory leaks, and other critical issues. Analyze metrics like CPU usage, event loop utilization, and more.
Anomaly detection and remediation: Utilizing the platform and NodeSource’s ML algorithms, the Copilot can detect anomalous behavior in both application performance and security, as well as identify solutions.
Security vulnerability identification and resolution: N|Solid Pro is continuously scanning for security vulnerabilities within the application code and 3rd party dependencies. Users can ask our Copilot about recommendations and solutions.
Code optimization suggestions: Given its training in Node.js, the AI can or will offer suggestions to optimize code for better performance and efficiency. This can include advice on asynchronous programming patterns, memory management, or the use of specific Node.js features.
Interactive querying: Users can interact with the platform in a conversational manner to query specific application metrics or request insights on performance and security aspects. These queries can be general or specific to the data generated in production.
Knowledge sharing: Users can gain knowledge about how to use N|Solid and implement Node.js best practices, creating a better model for users to get up to speed quickly on the platform.

Using N|Solid Copilot to triage security issues through predefined prompts or user questions.

Experience the Future of Node.js Development Powered by AI

N|Solid Copilot isn’t just a tool; it’s your partner in developing and maintaining great software. Whether you’re debugging a tricky issue, seeking performance improvements, or ensuring your application’s security, N|Solid Copilot is there to guide you every step of the way.

How to Get Started?

Sign Up: Simply sign up for a free SaaS account on our website.
Integrate: Seamlessly integrate N|Solid Copilot with your existing Node.js applications.
Navigate: Let N|Solid Copilot guide your development journey with unparalleled insights and assistance.

We believe N|Solid Copilot will not just change how you work with Node.js; it will transform it. Sign up today and be part of this exciting journey!

Connect with us on Twitter @NodeSource, LinkedIn, and to stay updated with the latest from N|Solid.

Angular is back

Posted on by

#​662 — November 9, 2023

Read on the Web

JavaScript Weekly

Reintroducing Angular with Angular v17 — Angular first appeared in the shape of AngularJS in 2010 and helped launch a wave of large-scale JavaScript frameworks. Angular remains popular in many use cases but is often overlooked in favor of newer options. v17 takes a leap forward in both features and vision, with the team rebranding Angular and repositioning it as a modern solution:

Angular.dev is an all-new docs site and home for the project (the new guides look fantastic). It’s in beta till Angular v18 is released – you can learn more about it here.
Hydration is now production ready.
Vite and esbuild are the default for new projects.
Improved support for creating server side apps.
New, improved built-in control flow to make code less verbose.
Google pulled out all the stops for ▶️ the ‘Special Angular Event’ – an hour of talks, interviews and discussions to bring you up to speed.

Minko Gechev and the Angular.js Team

Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery — Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript’s performance characteristics through understanding the JavaScript Virtual machine under the hood!

Frontend Masters sponsor

Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such – all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.

Phuoc Nguyen

▶  Why Signals Are Better Than React Hooks — When Preact’s Marvin Hagemeister pops up in the comments saying “this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals,” it should bump a video up to the top of the Watch Later playlist.

Web Dev Simplified

👀 Nicholas C. Zakas shares a look at what’s coming in ESLint v9.0. The first alpha is due in a month or two.

⚛️ React has landed a commit adding sourcemaps for prod build artifacts.

🆚 VS Code will soon support moving editors into floating windows.

RELEASES:

TypeScript 5.3 RC – Final due soon, but you get import attributes, resolution-mode in import types, interactive inlay hints for types, and improvements to narrowing in a few extra cases.

It’s a strong week for testing tool releases, so they’re all in one place: TestCafe v3.4.0, Cypress 13.5, Nightwatch.js 3.3, and React Testing Library 14.1.

Deno 1.38 – Many smaller improvements, including far faster JSX transformation.

Bun v1.0.10 – Faster node:http and bug fixes.

tsx 4.0 – Node.js enhanced to run TypeScript / ESM files.

📄 Articles & Tutorials

How to Do a JS to TypeScript Conversion — Chris, who led the conversion of a 150k LOC app to TypeScript, addresses a common question: do-it-as-you-go or follow the dependency graph?

Chris Krycho

Exploring the Headless Component Pattern for Composing React UIs — An engineer at Atlassian takes us on a thorough and practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements.

Juntao Qiu

📞 Calling JavaScript Devs! Sentry Launch Week is Coming. Join Online

Sentry sponsor

▶  8 Talks from JetBrains’ JavaScript Day 2023 — JavaScript Day is an annual virtual event featuring a handful of talks on diverse JS related topics. This year, Romulo Cintra shows us how TC39 works on language proposals, Stefan Baumgartner spoke about the lies we tell ourselves using TypeScript, and more.

JetBrains

Writing Components That Work in Any Framework — Looks at why web components can be difficult to adopt, and shows how using a higher-level library can let us “easily write components that work everywhere”.

Andrico Karoulla

Build a Lightweight Code Generator with TypeScript and JSON Imports

John Ruble

Deploying a Vue Application with Netlify and GitHub

Ezekiel Lawson (Telerik)

Don’t Disable Buttons, Do This..

Chris Ferdinandi

🛠 Code & Tools

Moveable: A Library for Dragging, Resizing, Scaling and More — If you want to offer up physical manipulation of elements (warping, pinching, rotating, etc.) this library could help. Its homepage is a fun self-demo and there are packages for integrations with common frameworks.

Younkue Choi

🔥 Need to Eliminate Tech Debt Without Falling into Dependency Hell? — Upgrade seamlessly and let us tackle tech debt with our fixed-cost, monthly maintenance service (starting at $2k/month).

UpgradeJS | Tech Debt Services sponsor

🖼  image-dimensions: Get the Dimensions of Images — Sindre’s latest creation is a simple but comprehensive one. A way to get the size (as width and height in pixels) for JPEG, PNG, APNG, and GIFs in any modern JS environment.

Sindre Sorhus

main-thread-scheduling 9.0: Consistently Responsive Apps While Staying on the Main Thread — An easier alternative to Web Workers that uses the approach of stopping heavy tasks on the main thread from executing when the user interacts with the UI. This new version adds afterFrame (like requestAnimationFrame but called after frame drawing has rendered), queueTask, and extensions to promises.

Antonio Stoilkov

React Components for the Google Maps JavaScript API — react-google-maps is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components into a React app.

Mike Pegg (Google Cloud)

capture-website 4.0: Capture Screenshots of Websites — A Puppeteer wrapper to capture screenshots of site from Node or the command-line.

Sindre Sorhus

Never Stop Learning and Work #LikeABosch — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.

Bosch sponsor

⌘K-sv: A Fast, Composable, Unstyled Command Menu for Svelte — A port of ⌘K, a React-based command menu component.

huntabyte

Vuetify v3.4 – Vue component framework.

MiniSearch 6.2 – In-memory fulltext search engine. (Demo.)

TanStack Form 0.9 – Headless type-safe form state management.

Dependency Cruiser v15.2 – Tool to validate and visualize dependencies.

Valtio v1.12.0 – Proxy state made simple. Plus it has a fantastic homepage.

Helmet 7.1 – Secure Express apps with HTTP headers.

Rollup.js 4.3 – ES module bundler.

NOTABLE QUOTABLE

“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”

___
Tom Cargill

🚀 Everyone’s gone to the moon..

Spacekit.js: A Library for Creating 3D Space Visualizations — Not just any old 3D space, but actual space – think planets, stars, and meteors. A library like this comes, of course, with many examples to try. GitHub repo.

Ian Webster

Big news for both Next.js and Remix

Posted on by

#​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 Support — Remix 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 Generator — Docusaurus 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