Month: July 2023

Name mangling

Posted on by

#​649 — July 27, 2023

Read on the Web

JavaScript Weekly

Hono + Htmx + Cloudflare: A New Stack? — A lot of people seem to be jumping on htmx lately as an alternative to the complexity of frameworks like React, but what if you want to keep using JSX? Hono is a (vaguely Express-like) Web framework targeting edge function use cases and includes middleware for rendering JSX. Yusuke gives a quick example of how all this can come together with Cloudflare Workers and D1 for a simpler, full-stack JS experience.

Yusuke Wada

Shrinking VS Code with Name Mangling — There’s a fair bit of JavaScript in VS Code but the team has managed to reduce the size of the shipped code by almost 4MB without actually doing any deleting or refactoring thanks to a new ‘name mangling’ build step. This is a great read on how the team approached things and got it working.

Matt Bierner

New Course: The Hard Parts of UI Development — Develop an under-the-hood knowledge of UI development by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch!

Frontend Masters sponsor

Microsoft TypeChat: An Approach for Type-Safe LLM Responses — A new project with some prominent names attached (the designer of C# and PM for TypeScript, for starters) that demonstrates the excitement within MS for large language models (LLMs). TypeChat aims to work around the problem of LLMs outputting hard-to-parse natural language and to direct such output into a predictable, typed form.

Hejlsberg, Lucco, Rosenwasser et al.

⚡️ IN BRIEF:

🐦 React/Redux’s Dan Abramov is leaving Meta. Having achieved so much and reaching a point where he feels ready to move on, Dan is departing Meta but will remain on the React team as an independent third party. 💙

📘 The Concise TypeScript Book is, unsurprisingly, a guide to using TypeScript. More surprisingly, it’s all on GitHub and free to read. Hurrah.

Tixy is an interactive page for learning logic, math and expressions by solving puzzles using a visual grid. It starts off very simply, but gets elaborate quickly. This is a neat way to pick up some of the skills needed for Dwitter.

JSPlayground is a new Web-based JavaScript sandbox tool.

Is the term ‘Jamstack’ finished? Brian Rinaldi wonders.

🎉 RELEASES:

Bun 0.7 – The JavaScriptCore-based alternative JS runtime adds (experimental) Vite support, Web Workers support, and includes a –smol option to run in memory constrained environments (with a significant memory reduction shown off in the post).

Astro 2.9 – The ‘zero JS by default’ framework adds experimental support for view transitions and more.

Neutralinojs v4.13.0 – Lightweight cross-platform desktop app framework.

Remix 1.19 – Modern full-stack JS framework.

Node.js v20.5.0 (Current)

📒 Articles & Tutorials

💛  ‘Good Code is Like a Love Letter to The Next Developer Who Will Maintain It’ — “The beauty of our creations, however, is not judged solely by the elegance of our algorithms or the efficiency of our code, but by the joy and ease with which others can build upon our work.”

Addy Osmani

More practically, Addy also tells us to stick to ‘boring architecture’ for as long as possible.

📅  React Native EU Conf with Guenther Steiner: Book Last Regular Tickets

Callstack sponsor

How to Build a GPT-3 App with Next.js, React, and GitHub Copilot — GitHub doesn’t often run tutorials on its blog, but they appear keen to promote the idea of a modern Copilot-oriented development process, and this certainly shows off some of the potential.

Kedasha Kerr (GitHub)

Upgrading an Ancient React App

Jeffrey Carl Faden

🛠 Code & Tools

a11y-dialog 8.0: A Lightweight, Accessible Way to Create Dialogs — Supports alert dialogs as per WAI-ARIA, nested dialogs, and provides both a DOM and JavaScript API. There’s a live CodeSandbox demo you can play with. v8.0 no longer supports IE, if that’s important to you.

Kitty Giraudel

Mapkick.js: Interactive Maps in One Line of JavaScript — Supports Mapbox and MapLibre. It also comes in Python and Ruby variants targeting server-side rendered use cases.

Andrew Kane

RxDB – Local Database For JavaScript Applications — With RxDB you can build realtime applications with great performance that even works when your users are offline.

RxDB sponsor

PLJS: JavaScript Language Plugin for Postgres — PLV8 is the ‘go to’ extension to use JavaScript within Postgres, but this QuickJS-based variant, from the same creator, is more compact, easier to maintain, and may be enough for your needs.

Jerry Sievert

Twin 3.4: Use Tailwind Classes in CSS-in-JS Libraries — Twin v3 introduced full Tailwind plugin support, and v3.4 adds a new SolidJS preset as well as styled-components 6 support.

Ben Rogerson

Praxis: An iOS Browser That Blocks JavaScript — Well, that’s certainly one way to fight back against prompts, modals, and battery sapping scripts, but it won’t work with every site..

Arnold Sakhnov

Spectacle 10: A React and JSX-Based Presentation Library — Got a presentation coming up? Build your decks with JSX, perhaps. GitHub repo.

Formidable

💻 Jobs

Senior Software Engineer (Frontend Lead) — Come lead Emerge’s web platform, used by teams like DoorDash, Square, Dropbox & Airbnb (our stack: Next.js, React, TS, Vercel).

🛸 Emerge Tools

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.

gridstack.js 8.4
↳ Framework agnostic dashboard layout and creation.

amqp-client.js 3.0
↳ AMQP 0-9-1 client for both Node and browser (via WebSocket).

FingerprintJS 4.0
↳ Browser fingerprinting library. No longer open source.

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

🙈 Taking things too far..

We’ll support anyone who’s keen to reduce the amount of needless JavaScript that goes over the wire (👋 Astro or Qwik) but sometimes, just sometimes, you can go too far with the endeavor to almost comedic effect:

😱  Implementing Tic Tac Toe with 170MB of HTML — Unsurprisingly, the demo (which we’ve not linked to here) brought my browser to a crashing halt, but it’s fun to see a developer take on the challenge of using Chrome’s support for popovers and the state of said popovers along with a huge pile of HTML to handle a game of Tic Tac Toe. Don’t repeat this in production, folks..

Gareth Heyes

Empowering Startups: Building Better, More Secure Apps and Ensuring Exceptional CX with N|Solid

Posted on by

Startups face numerous challenges on their path to success, and two key aspects that significantly impact their growth are code quality and user experience. In today’s fast-paced technological landscape, startups must prioritize these areas to build robust, scalable, and secure applications. This is where N|Solid can be a dynamic solution by providing powerful telemetry, insights, and security alerts for Node.js apps. This post will explore leveraging N|Solid effectively, a game-changer for startups, saving critical time and resources while serving customers with the best experience.

We recently participated in Collision Conf in Toronto, where we met hundreds of startups who shared their bold ideas and solutions with the world. It’s why we wanted to put out this post, as we were asked over and over again about how we could help them save time, solve issues with their apps and level up their security.

Startups are often focused on speed to market, meaning a lot of effort goes into delivering features to match the market needs they seek to meet. Teams can be limited in terms of the level of testing rigor and tooling that focuses on quality vs. completion. It can be a central component of an MVP strategy, but there are risks with this approach, notably with application performance and user experience. We have helped many startups elevate their approach by adding N|Solid into their development workflow.

N|Solid is an AI-enabled APM (monitoring and management platform) and Security platform explicitly designed for Node.js applications. It offers various features that empower startups to optimize code performance, identify and troubleshoot issues, and deliver exceptional user experiences. With real-time insights and actionable data, N|Solid Console equips startups with the tools to make informed decisions and drive continuous improvement.

“If you are using Node for anything important for your business, you should take a long, hard look at N|Solid” – Russ Whitman, CEO NodeSource

N|Solid offers powerful debugging capabilities that enable developers to identify and rectify bottlenecks in production. With its built-in CPU profiling and heap snapshots, startups can quickly pinpoint performance hotspots and memory leaks, ensuring their applications run smoothly, even under high loads. By continuously monitoring performance metrics, startups can optimize their codebase, leading to faster and more responsive applications. They can also easily monitor and manage multiple instances of their applications, ensuring efficient load distribution and maximizing system resources.

Understanding the Importance of Code Quality

High-quality code forms the baseline of reliable, scalable, and maintainable applications. Code quality matters significantly, particularly for startups, as it empowers them to have control over critical variables. Code quality also plays a vital role in the success of startups by providing a solid foundation for reliable, scalable, and maintainable applications that their users love.

Poor code quality is very expensive. Performance issues can cost more than frustrated users; they add needless cloud spend and take the dev team away from feature development, trying to solve issues that are sometimes impossible to replicate in a dev or test environment. We have learned that teams often spend weeks, or even months, chasing bugs we could identify in minutes with N|Solid. That cost for a startup can be deadly.

We recommend that all developers and DevOps add monitoring tooling into their development process because we see the positive impact of these solutions daily. There are many options, but if you are using Node.js, N|Ssolid is the tool you should be using. Other APM’s are great at providing a view into a range of technologies, but they can lack the depth of insights needed to pinpoint issues, especially with Node. Other APM’s monitor Node apps through instrumentation, and to gather metrics, they interrupt the event loop (killing performance). N|Solid doesn’t require instrumentation and doesn’t break the event loop. More importantly, it gathers the data other solutions don’t (like visibility into worker threads).

Node is one of the most-loved technologies by developers because it’s easy to wield; you can get up to speed quickly and build applications fast. But it’s also relatively easy to build something in Node.js that has issues, especially the more complex the application is. Our Node experts have been helping developers access and leverage Node.js for nearly a decade – there is simply no better tool for Node.js than N|Solid. If your Startup uses Node, consider trying N|Solid. You can get started with a Free account __HERE__ and be up and running in no time; plus, we have special pricing for startups through September 2023 at half off!.

It’s True! We Love Startups! So Startups Get a 50% Discount!

As noted above, we have created a discount program for Startups! Get the Best Solution to Monitor & Secure Your Node Apps at Special Startup Pricing – FOR HALF OFF. To apply for this benefit, click HERE

Enhancing Security Oversight, Overnight!

Another great opportunity startups have when incorporating N|Solid into their architecture is the control and oversight of their security that they gain by integrating NCM (Node Certified Modules) in N|Solid Console and within our NCM GitHub App as a standard part of the development process. It’s a simple and easy way to immediately add visibility into potential security risks of your Node.js apps.

Node.js (like all open-source projects and software in general) can experience security flaws; there, are new CVE’s popping up all the time. With N|Solid and our GitHub app, Startups can understand security issues from development through production, with key insights to help understand security issues and how to resolve them.

Some of the key benefits that NCM – NodeSource brings are:

Vulnerability Mitigation: By proactively identifying vulnerabilities, developers can quickly apply patches or choose alternative packages, ensuring their applications remain secure.

License Compliance: This feature is particularly important for organizations with strict compliance requirements or who rely heavily on open-source software.

Report Generation: These reports provide valuable insights into the security and compliance status of Node.js applications, helping developers make informed decisions and take necessary actions.

Integration with GitHub: This integration simplifies the management of open-source Node packages within GitHub deployments, providing an additional layer of security and ensuring compliance during the development and deployment processes.

By leveraging the powerful features of GitHub NCM – NodeSource, developers can significantly enhance the security, compliance, and overall reliability of their Node.js applications.

The Future of Software Development, Powered by Telemetry, Security, and AI!

At Collision, the fast-growing tech conference that gathers industry leaders, innovators, and disruptors; we shared a big announcement about the future of Node! We announced our AI Assistant, Adrian, incorporated into N|Solid Console at Collision, revolutionizing intelligent monitoring and optimization for Node.js apps. This is pretty cool; read,on!

Supercharge Your Startup with AI Assistant, Adrian & N|Solid Console

Adrian is an advanced, AI-powered Assistant that provides actionable insights and suggestions, bringing context to your data. Imagine an AI chat assistant that lets you ask questions about the data and gives recommendations about how to solve issues them. It’s like “god mode” for Node. Enabling teams to streamline their Node.js applications, reduce downtime, cut costs, and enhance overall user satisfaction faster than ever.

Our AI Assistant, Adrian, leverages the power of AI to deliver a range of features that empower developers and teams to optimize their Node.js applications effectively. Let’s explore some of the key features of AI Assistant, Adrian:

Automated Metric Collection: AI Assistant, Adrian, automates the collection of essential performance metrics from Node.js applications. It provides real-time insights into critical areas such as event loop delays, CPU utilization, memory usage, and more.

Node Performance Enhancer: AI Assistant, Adrian, suggests optimizations to enhance the performance of Node.js applications.

Intelligent CPU Profiling: AI Assistant, Adrian, helps developers identify and resolve performance hotspots using smart CPU profiling.

Cost Calculator: AI Assistant, Adrian, includes a cost calculator that helps teams estimate the cost implications of their Node.js applications.

Code Advisor: AI Assistant, Adrian, is a knowledgeable advisor, providing recommendations and suggestions to improve code quality, maintainability, and scalability. It assists developers in adhering to coding best practices, ensuring clean and efficient code that is easier to maintain and scale over time.

Sign up HERE to join the private beta list and experience AI Assistant Adrian’s transformative capabilities in optimizing your Node.js applications. The combination of NodeSource’s N|Solid Console’s and the advanced AI capabilities of Adrian Assistant offers developers a powerful toolkit for optimizing their Node.js applications.

Conclusion

With N|Solid Console’s advanced insights and powerful features, startups can elevate their development processes, enhance application performance, and ensure unparalleled user experiences – saving critical time and cost.

The future of N|Solid is powered by AI and our Assistant, Adrian.

Let’s come together, connect, and propel the future of technology forward!

About NodeSource, Inc.

NodeSource, Inc. is a technology company completely focused on Node.js and is dedicated to helping organizations and developers leverage the power of this technology. We offer the leading APM for monitoring and securing Node.js and provide world-class support and consulting services to help organizations navigate their Node.js journey. __#KnowYourNode__.

For more information, Sign Up HERE to try N|Solid Console’s or visit NodeSource.com for more details and follow @NodeSource on Twitter.

The tale of how static typing came to JavaScript

Posted on by

#​648 — July 20, 2023

Read on the Web

JavaScript Weekly

pkg-size: Find the True, Current Size of an npm Package Without Leaving Your Browser — A beautifully designed site that can show you the true size of an npm package (including dependencies) using the actual packages which are ‘installed’ in a browser-based WebContainers-powered environment. Hiroki has 🐦 a Twitter thread where he explains more about how it works.

Hiroki Osame

TypeScript and the Dawn of Gradual Types — From GitHub’s ReadME project comes a thorough journalistic take on how static typing made it into the JavaScript world, what TypeScript offers, some alternative approaches, and the possibility of adding type annotations to JavaScript iself.

Mike Melanson (GitHub)

Create a Real-Time Multi-Host Livestream with Amazon IVS — Amazon Interactive Video Service (Amazon IVS) enables developers to create dynamic video experiences, such as collaborative livestreams with multiple hosts. Click here to learn more.

Amazon Web Services (AWS) sponsor

Storybook 7.1: The Workshop for Building UI Components — v7.1 introduces in-app onboarding for your newest team members, zero-config styling support for Tailwind, MUI, styled-components and MUI, Vue 3 source snippets, and more.

Storybook Team

Five Inconvenient Truths about TypeScript — A brief dose of reality for a world seemingly obsessed with TypeScript: “If you want to get into TypeScript, don’t think you can leave JavaScript behind. It will find you, and it will get you.”

Stefan Baumgartner

🎉 RELEASES:

Fresh 1.3 – The Deno web framework. Plugins can now inject routes and middleware into apps, there’s Deno.serve support, and you can create async route components.

Downshift 8.0 – Primitives to build WAI-ARIA compliant React autocomplete, combobox & select components.

Node.js v18.17.0 (LTS) – Node 18 gets the Ada 2.0 WHATWG URL parser.

Fastify 4.20 – The fast, low overhead web Node.js framework.

⚡️ IN BRIEF:

The Promise.withResolvers proposal has progressed from stage 2 to 3 at TC39, as has the array grouping proposal, as well as source phase imports.

🗣 The folks on Hacker News discussed why the site isn’t being indundated with links to new JavaScript frameworks recently. Has React ‘won’? Has AI stolen the limelight? Or is a JavaScript revolution quietly brewing..?

👴🏻 A blog post from 1996 popped up telling us about the newest JavaScript features in Netscape 3.0 – definitely a blast from the past. Say hello to the typeof operator!

📒 Articles & Tutorials

‘How We Generate JS and Python SDKs from a Canonical Rust SDK’ — PostgresML is an extension that adds machine learning functions into Postgres. Its team loves and prefers Rust but most of its users are using JavaScript or Python. What to do? Simultaneously write multi-language libraries using Rust..

Silas Marvin (PostgresML)

💡 Psst.. if you use Postgres at all, we have a Postgres newsletter too!

Updating Code with jscodeshift — TypeORM is an ORM for Node that introduced some breaking changes requiring the author to update lots of calls in his code. A perfect time to use a ‘codemod’ to automate the job. Even if you don’t use TypeORM, this post might give you some ideas for other places to use such an approach.

Clinton Blackburn

AI-Proofing Your Career For Tomorrow: Free Session by Interview Kickstart — Discover Your AI Career Path (AI/ML vs Data Science). Take an informed decision: Insights from FAANG+ AI/ML Engineers. Register for a free session.

Interview Kickstart sponsor

How React 18 Improves App Performance — If you’ve not entirely kept up with how things have changed or developed in React with regards to concurrent rendering, transitions, Suspense, and even React Server Components, this is a fantastic review and primer to get up to speed on how React’s newer features dramatically help with performance.

Lydia Hallie (Vercel)

300ms Faster: Measures Taken to Reduce Wikipedia’s Total Blocking Time (TBT)

Nicholas Ray

On the Origins of JSX and Why It Exists

Hristiyan Dodov

🛠 Code & Tools

wavesurfer.js 7: Audio Waveform Player — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. GitHub repo.

katspaugh and contributors

TOAST UI Grid: A Customizable Grid Control for the Web — A powerful MIT-licensed grid-style control for the display, editing, and management of data. It comes from the same folks as TUI Editor and TUI Calendar and while it’s happy on its own, there are wrappers for Vue and React too. GitHub repo.

NHN

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

Pines: A Library of UI Components for Alpine.js and Tailwind Projects — Includes sliders, tooltips, accordions, modals, and others. The CSS-only components are usable in any Tailwind project while the ones that require JS are designed for use with Alpine.js.

devdojo

YouTube.js 5.5: A Wrapper Around YouTube’s Private API — One of those things you’d expect to be quickly blocked somehow, but it’s 18 months old, so… 😆 The fun isn’t just for Node or Deno users – it’ll work in the browser if you can proxy the requests through your own server.

LuanRT

Eruda 3.0: A Console for Mobile Browsers — If you’re in a situation where you have no access to DevTools, you can add Eruda to your page and it provides a sort of virtual devtools you can use from any browser, including on mobile.

LiriLiri

Reagraph 4.10: WebGL Graph Visualization Library for React — Here’s a basic code example. This week’s release adds support for three dimensional clustering. GitHub repo.

REAGRAPH

brotli-wasm 2.0: A Brotli Compressor and Decompressor — Covers both Node and the browser by means of WebAssembly.

HTTP Toolkit

Pacquet: A New, Experimental Package Manager for Node — From a Node.js core member, no less.

Yagiz Nizipli

Shareon 2.2
↳ Lightweight, stylish ‘share’ buttons for social networks.

Helipopper 8.0
↳ Tooltips and popovers for Angular. (Demos.)

Ink 4.3
↳ React for interactive command-line apps.

📅 React Calendar 4.4

♖ React Chessboard 4.0

💻 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.

🎵 Thank you for the music..

Chip Player JS: Browser-Based MIDIs, MODs and Game Music — The creator of this site has, like me, a fascination with old digital music – MIDI files, trackers, and the like. Rather than keep an old computer running, he decided to build a browser based music player for such files.

Matt Montag

P.S. If you’re looking for something specific to listen to, the music by famed Norwegian tracker Jogeir Liljedahl is well worth a try – particularly Overture or Guitar Slinger. Or how about Donkey Kong Country’s dreamy Aquatic Ambience? It’s striking how trackers managed to squeeze so much down into a few hundred kilobytes by the heavy reuse and manipulation of samples.

Welcome to The Future of Software Development: Powered by Telemetry, Security, and AI

Posted on by

We made some big announcements during our keynote at Collision in Toronto; our AI Assistant, Adrian, and the open sourcing of our Node.js Runtime, N|Solid Runtime. They are a big part of our vision for the future of software development, one that is powered by telemetry, security, and AI – which was the topic of our talk. In this post we will share more about our vision and specifically how NodeSource is enabling that future.

NodeSource began as most great companies do; with smart, passionate people that saw a problem they had to fix: there was simply no good tooling for Node.js. We were Node believers and open-source project contributors on a mission to make Node more accessible for developers & safe for enterprises to adopt. Since our beginning we have provided the ecosystem with our insights, training, and binary distributions of the open-source packages – over 110 million downloads in the last year alone – powering Node applications in production all over the globe.

As a result of countless hours of ideating, coding and customer validation, N|Solid was born – an enterprise grade tool providing the deepest insights with the lowest overhead, all while continuing to keep ode apps secure. Today N|Solid is used by some of the largest organizations and developers globally. The mission that was set all those years ago is now more relevant than ever, over 30 million websites rely on Node.js and it’s one of the most used and loved technologies by developers worldwide. It’s been an amazing journey.

Revolutionizing Software Development: Advancing Telemetry, Security, and Efficiency with AI Innovation

We have continued to innovate, with our Node experts pushing to create the most advanced telemetry and security platform possible while still providing customers with world class support for Node. We have always believed that giving the very foremost data and insights was the best way to produce better software. Making software is continually challenging; the software development life cycle (SDLC) is highly inefficient.

You begin with an idea that you turn into code, then it gets built, tested and released for users to experience. Then you monitor for issues that are identified to triage and solve. Those fixes are added to other features to build, test, and release…and the cycle continues. While significant effort has been applied to make this process more efficient, these have invariably been small improvements. Tweaks really, to the overall process. Until now, fueled by the advancements in AI.

We believe that the future of software is intelligent software engineering, powered by telemetry, security & AI. The SDLC is augmented by applying AI that is trained with the right data to accelerate the production and maintenance of secure, highly performant code. It’s about building a new model – a generative loop based upon the intent of the code and its actual operation in production – bringing data and AI into the process in powerful new ways.

On the front end, AI is redefining the way code is written, from ChatGPT to GitHub’s CoPilot and beyond, Generative AI is creating code, documenting it, and writing test plans. These advancements are set to revolutionize the software development process on their own, replacing the often used copy/paste of code found from Google, StackOverflow, or existing codebases. Developers that leverage these new tools will have dynamically increased velocity of their code while still owning the solution. While significant, this is only a part of the solution of the future.

Unveiling the True Measure of Software: Quality and Performance in Production

The reality is that the quality and performance of software is only realized once it is in production, in use by real users. The telemetry data in this application is a key component for transforming the SDLC. How software performs in production, not how well software did in a test environment, is the true test for quality code. And the depth of that telemetry data is how you identify issues. This has long been our focus, not just to report on general metrics, but to go well beyond. This is why we established the measure of event loop utilization, worker thread monitoring, and more, to enable deep insights into application health and performance.

Application health is directly tied to security, more than ever today quality code is secure code. But, security is not static, there are new vulnerabilities that develop all the time. The visibility to these is critical, especially for production code. It’s why we offer our security tooling, NCM (Node Certified Modules) as a part of our platform. Enabling customers to have visibility to security issues from development and production live code.

It’s the depth of data and security health that unlock the opportunities with AI. It’s the other half of the equation of the future of software, powered by telemetry, security and AI. This is the future NodeSource is enabling.

N|Solid – the future of Node bringing the power of data and AI

With the announcement of our AI Assistant, “Adrian”, we are leveraging our unique and unparalleled data to help developers identify and resolve issues with tremendous speed and efficiency. Adrian will help every Node developer and devops engineer to not just view the telemetry, security, and alerts that matter – but to understand them, know their context and how to solve for them. It’s a game changer. It takes the power of the most advanced observability tool and the specific context of each application combined with our AI to resolve code issues fast.

Furthermore, our AI tools will assess code quality, identify cost optimizations, generate code and more. It’s like ‘god mode’ for Node.

This is the next step in our journey toward the future state of the SDLC. If you want to experience what Adrian can do, sign up HERE for our early access beta list and we will notify you when you can join the software development revolution.

About NodeSource, Inc.

NodeSource, Inc. is a technology company completely focused on Node.js and is dedicated to helping organizations and developers leverage the power of this technology. We offer the leading APM for monitoring and securing Node.js and provide world-class support and consulting services to help organizations navigate their Node.js journey. #KnowYourNode. For more information, visit NodeSource.com and follow @NodeSource on Twitter.

htmx in 100 seconds

Posted on by

#​647 — July 13, 2023

Read on the Web

JavaScript Weekly

Driver.js: Create On-Page Tours, Highlights, and Contextual Help — A no-dependency, vanilla JavaScript library for putting together page tours and contextual help systems. The project is a few years old but has just been entirely rewritten and gained numerous enhancements, plus a huge lick of paint. There are lots of examples to check out.

Kamran Ahmed

Component Party: A Rosetta Stone of UI Library Code Examples — A comparison of different frameworks (like React, Vue, Svelte, Angular, Ember, etc.) by way of simple code snippets covering various tasks.

Mathieu Schimmerling

Test and Validate APIs Effectively and Efficiently — Gain access to several API testing tools and features that help you automate repetitive tasks, stay organized, and build robust workflows to ensure your APIs remain reliable and performant.

Postman sponsor

Prettier 3.0: Now Powered by ES Modules — The popular multi-language code formatter gets a big upgrade with a refactoring to ES modules making up the biggest change (though it can still be used as a library via CommonJS). One side effect is Prettier now supports ESM-based plugins and async parsers which means some necessary changes for Prettier plugin developers.

Sosuke Suzuki

Crockford on Plain Old JavaScript and the DOM — Over the years, Douglas has asked us to only use the good parts of JavaScript, to ▶️ stop using JavaScript, and now he suggests abandoning “the libraries” to instead work with the DOM directly. Lea Verou 🐦 picked up on this story and said this suggestion still isn’t very practical for most web apps as of 2023.

Douglas Crockford

🎉 RELEASES:

Ember 5.1 – The ambitious JS framework that’ll never give up takes a big step into the TypeScript world with stable TypeScript support and types-a-plenty.

p5.js 1.7 – Processing-inspired JavaScript library for creative coding. v1.7 introduces WebGL 2 and frame buffer support.

Prisma 5.0 – A popular ORM for Node.js and TypeScript. 5.0 boasts significant performance improvements.

typescript-eslint 6.0

⚡️ IN BRIEF:

obj?.prop = value; The optional chaining assignment proposal advanced to stage 1 at TC39 this week. (Explanatory slidedeck.)

Popular YouTube channel Fireship explains ▶️ htmx in 100 seconds – well timed, since htmx is seeing a huge amount of fresh interest. And if you’re wondering who the mastermind behind Fireship is, Honeypot has put up ▶️ a short documentary about him.

The folks at Sandworm have shared a look at the state of the npm registry including lots of trivia, history, and stats on how many packages there are, as well as the most commonly used keywords in packages.

Google shares a case study on performance of scroll-driven animations using its new browser based API versus ‘classical JavaScript techniques.’ Unsurprisingly it’s much faster running away from the main thread, and the spec remains in draft for now.

npm will now check the linked source commit and repo when you view a package’s provenance information on npmjs.com and warn you when said provenance cannot be established.

GitHub is rolling out a beta of passwordless, passkey based authentication on GitHub․com.

📒 Articles & Tutorials

Useful Functions for a (Deno) HTTP Server — You could think of HTTP in a functional way with requests going in and responses/results going out. The author explores Deno’s new Deno.serve function and how both it and the /x/http_fns functions can provide a more functional approach to common HTTP tasks.

Jollytoad

Testing the Dark Scenarios of a Node.js App — Several examples of often overlooked things you should be testing. What happens when a service times out, code is mutating things it shouldn’t, or you have zombie processes milling around? These are some of the ‘dark scenarios’ it’s not too difficult to prepare for.

Yoni Goldberg and Raz Luvaton

The 2023 State of the API Report Is Here — The State of the API is the world’s largest survey and report on APIs, with findings from over 40K developers and API professionals.

Postman sponsor

Creating Randomized Zelda: Tears of the Kingdom Patterns — Nintendo’s new Zelda game uses repeated, geometric patterns as part of its aesthetic. This post looks at how to recreate such motifs with SVG and JavaScript.

Paul Hebert

5 TS Compiler Flags You Should Include in Your Project’s Config

Igor Konovalov

Deploying a Fastify and Vue 3 Static Site to Heroku

Liran Tal

Getting Started with Vector Databases in Node.js

Valeri Karpov

🛠 Code & Tools

MDX Editor: A Rich Markdown Editor React Component — A Lexical-powered Markdown editor for React apps that supports code blocks, tables, and more. The live demo shows off most of what you need to see.

Petyo Ivanov

Meet Your New Favorite Teammate: Cody, the AI Coding Assistant — Code faster with Cody, the only code AI that knows your entire codebase, like the pair programmer you always wanted.

Sourcegraph sponsor

electron-vite: Next Generation Electron Build Tooling — Fish and chips, Bert and Ernie.. some things are just better together, and so it goes with the Electron desktop app framework and the Vite frontend toolkit. There’s also an Electron Vite Boilerplate app to kick off a new app with.

Alex Wei

📊  Vizzu 0.8: A Library for Animated Data Visualizations — Making data visualizations is reasonably easy, but animating them is harder. Vizzu steps in to help you create animated data stories and explorations. There are lots of showcases and examples to peruse.

Vizzu Inc.

🐊  Putout: A Configurable, Babel-Based Linter and Code Transformer — Provides typical linting functionality with ESLint and code transformation with Babel, but distinguishes itself by being prepared to make “more drastic code transformations” than other tools. It’s not the most popular option but it makes a good case for itself in its thorough README.

coderaiser

Standardized Audio Context: Cross-Browser Web Audio API Wrapper — A side effect-free abstraction over a subset of the Web Audio API that works reliably across all mainstream browsers.

Christoph Guttandin

Kanel: Generate TypeScript Types from Postgres — It works by inspecting a live database and outputs code you can add to a TypeScript project and use with something like Knex – GitHub repo.

Kristian Dupont

React Authentication — Without Complexity

Userfront sponsor

Boa 0.17 – An experimental Javascript lexer, parser and compiler written in Rust that can be embedded into other projects – it now has a module system.

Octokit.js 3.0
↳ Official GitHub SDK for browsers, Node, and Deno.

Release It! 16.1
↳ Automate npm package publishing and versioning.

zlFetch 6.0
↳ Convenience wrapper around the Fetch API.

Terminalizer 0.10
↳ Record your terminal and generate animated GIFs.

eslint-plugin-prettier 5.0
↳ Prettier, but as an ESLint rule.

Preact 10.16 – 3KB React compatible alternative.

💻 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.

🍩 Homer would approve

donut.js: donut.c, But in JavaScript — donut.c, dating from 2006, is a donut-shaped C program that, when run, animates a spinning ASCII text donut on the screen. Here’s a fresh and hot JavaScript variant!

Evan Zhou

Announcing N|Solid v4.9.5

Posted on by

NodeSource is excited to announce N|Solid v4.9.5 which contains the following changes:

General stability improvements and bug fixes.
Node.js v16.20.1 (LTS): Includes a Rebase of N|Solid on Node.js v16.20.1 (LTS).
Node.js v18.16.1 (LTS): Includes a Rebase of N|Solid on Node.js v18.16.1 (LTS).

For detailed information on installing and using N|Solid, please refer to the N|Solid User Guide.

Changes

N|Solid v4.9.5 includes patches for this vulnerability:

CVE-2022-25883: Versions of the package semver before 7.5.2 are vulnerable to Regular Expression Denial of Service (ReDoS) via the function new Range, when untrusted user data is provided as a range.

There are two available LTS Node.js versions for you to use with N|Solid, Node.js 16 Gallium and Node.js 18 Hydrogen.

N|Solid v4.9.5 Gallium ships with Node.js v16.20.1.

N|Solid v4.9.5 Hydrogen ships with Node.js v18.16.1.

The Node.js 16 Gallium LTS release line will continue to be supported until September 11, 2023.

The Node.js 18 Hydrogen LTS release line will continue to be supported until April 30, 2025.

Supported Operating Systems for N|Solid Runtime and N|Solid Console

Please note that The N|Solid Runtime is supported on the following operating systems:

Windows:
Windows 10
Microsoft Windows Server 1909 Core
Microsoft Windows Server 2012
Microsoft Windows Server 2008
macOS:
macOS 10.11 and newer
RPM based 64-bit Linux distributions (x86_64):
Amazon Linux AMI release 2015.09 and newer
RHEL7 / CentOS 7 and newer
Fedora 32 and newer
DEB based 64-bit Linux distributions (x86_64, arm64 and armhf):
Ubuntu 16.04 and newer
Debian 9 (stretch) and newer
Alpine
Alpine 3.3 and newer

Download the latest version of N|Solid

You can download the latest version of N|Solid via http://accounts.nodesource.com or visit https://downloads.nodesource.com/ directly.

New to N|Solid?

If you’ve never tried N|Solid, this is a great time to do so. N|Solid is a fully compatible Node.js runtime that has been enhanced to address the needs of the Enterprise. N|Solid provides meaningful insights into the runtime process and the underlying systems. Click 👉 [HERE]

CommonJS, we love you, we love you not..

Posted on by

#​646 — July 6, 2023

Read on the Web

JavaScript Weekly

What’s Next for JavaScript: New Features to Look Forward to — A reassuring and high level look at just what goes into making JavaScript better over time, along with some of the new things about to appear or still making their way through the arduous TC39 process.

Mary Branscombe (The New Stack)

Mary has followed up this piece with Beyond Browsers: The Longterm Future of JavaScript Standards which goes into more depth on JavaScript’s ongoing developments in the world of servers and edge functions.

🎥  Remotion v4.0: Create Videos Using React — A powerful framework for creating videos from code using React and JavaScript. v4 is such a big update they ▶️ recorded a keynote to show it off.

Jonny Burger

A Brief Primer to Engineering Efficiency — Software teams are dealing with many changes and budget cuts, yet still have the same delivery expectations. So, how do you keep up? 🤔 The answer: invest in efficiency. Get ahead of the game with this brief on engineering efficiency.

Sleuth sponsor

‘CommonJS is Hurting JavaScript’ — An interesting take on Node’s default module system, its history, its shortcomings, and the trickiness of managing both CommonJS and ES modules at once. It’s perhaps no surprise the folks at Deno would like to see CommonJS disappear, but…

Andy Jiang (Deno)

.. the Bun team, on the other hand, say au contraire and tell us CommonJS is not going away! They explain CommonJS’s plus points and why Bun is adding support for it.

RELEASES:

TypeScript 5.2 Beta – Just a month after the final release of 5.1, too. using is the headline feature and the release post goes into fantastic detail.

Node.js v20.4.0 (Current) – Node gains an interesting new ‘mock timers’ feature for writing more reliable and deterministic tests for time-dependent functionality.

Vite 4.4 – The frontend toolkit updates to esbuild 0.18, adds experimental Lightning CSS support, and there are new starter templates for Solid and Qwik users.

Billboard.js 3.9 – A popular D3-based chart library. (Demos.)

Deno 1.35 – The alternative JS runtime makes Deno.serve() (its Web server API) stable, and improves npm and Node compatibility.

Bun 0.6.13

⚡️ IN BRIEF:

Jack Herrington sat down with Redux and Redux Toolkit’s maintainer, Mark Erikson, to ▶️ discuss what’s next for Redux and Redux Toolkit?

🎵 Spotify has introduced a TypeScript SDK for its Web API.

A little update from the Svelte team on the complete overhaul of their official site, hot on the heels of Svelte 4.0’s release. It’s a great time to be a Svelte developer.

The folks at Img․ly released the code for a system that can remove the backgrounds of images directly in the browser – more info.

📒 Articles & Tutorials

In Defence of DOMContentLoaded — A solid explainer on measuring browser events and the use cases for DOMContentLoaded (and related events) in particular. “The DOMContentLoaded event fires once all of your deferred JavaScript has finished running.”

Harry Roberts

Breaking Up with SVG-in-JS in 2023 — “SVGs in JS have a cost and SVGs do not belong into your JS bundle.” A look into why you shouldn’t have SVGs in your JS bundle and better techniques for using them from JSX.

Jacob Groß

Move from Datadog to Axiom with Our New Migration App — Logging reimagined means Axiom’s plans start at $25/mo for 1tb of data. Stop sampling, get Axiom.

Axiom sponsor

An Introduction to the View Transitions API — The experimental View Transitions API offers an easier way to animate between DOM states and even between page loads. Here’s a look at how to use this progressive enhancement.

Craig Buckler

JavaScript Gom Jabbar — In the Dune universe, a “gom jabbar” is a poisonous needle used in an eponymous test where people are subjected to intense pain. Somehow this is turned into a metaphor for painful JavaScript experiences.. 😏

Alex Kotliarskyi

▶  The JavaScript Hype Cycle and React Burnout — Aaron’s idea? Pick something that works for you, avoid the hype cycle, and, perhaps, don’t use things that aren’t at least a year old.

Aaron Francis

📅 That ‘year old’ thing is an interesting idea. We should introduce a section where we look back at things from a year ago and if they’re still going.. 😅

How to Consume a Paginated API using Async Generators

James Sinclair

🛠 Code & Tools

MathLive: A Web Component for Math Input — A web component that provides an interface for editing formulas. It uses LaTeX-style typesetting to keep things looking good. GitHub repo.

Arno Gourdol

Starlight: A Documentation Site Builder from Astro — React has Docusaurus, now Astro has Starlight. Being Astro, it’s framework agnostic and you can extend it with React, Vue, Svelte, Solid, etc. You get site navigation, search, internationalization, code highlighting, dark mode, and more out of the box. GitHub repo.

Starlight

Monitor, Test and Debug your APIs with APIToolkit

APIToolkit sponsor

mdsvex: A Markdown Preprocessor for Svelte — The homepage is a minimal, but cute, demonstration, but the docs are where the meat is.

pngwn

rrule.js: Work with Recurrence Rules for Calendar Dates — iCalendar is a data format for representing calendars and schedules, and RRULE is its way to define recurring events. rrule.js allows you to work with such rules, and has an amazing ‘playground’ style homepage to show it off.

Jakub Roztocil

copy-text-to-clipboard: Copy Text to Clipboard in Modern Browsers — Pretty simple but will save you a little messing around with the browser API.

Sindre Sorhus

TinyBase 4.0
↳ Reactive data store for local‑first apps.

Cross Fetch 4.0
↳ Universal WHATWG Fetch API for Node, browsers and React Native.

Sortable 2.2
↳ Makes any table with class=”sortable” sortable.

Escodegen 2.1
↳ AST to ECMAScript code generator.

💻 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.

🎁 And one for luck..

Joplin: An Open Source Note Taking and To-Do App — Essentially an open source Evernote, complete with numerous client apps (desktop and mobile) and a server side supporting synchronization across cloud services. GitHub repo.

Laurent Cozic