Tag: User Experience

Svelte 5 is going to be radical

Posted on by

#​651 — August 10, 2023

Read on the Web

JavaScript Weekly

My Experience Modernizing Packages to ESM — What a post! Mark, well known for his work on React, Redux, and much more, details the painful experiences and hard-earned lessons he picked up while migrating the Redux packages to ES modules.

Mark ‘acemarke’ Erikson

Things You Forgot (or Never Knew) Because of React — “I’ve written before about how React is the new default frontend framework, and how I don’t think most people using React on a regular basis realize quite how much it’s fallen behind.” High level thoughts about the React ‘bubble’ and some reasons to look beyond it, including a round up of some of the alternative options.

Josh Collinsworth

Build Web Apps in 60 Seconds with Dynaboard AI — Dynaboard’s low-code IDE offers 40+ built-in UI components. Quickly connect to REST & GraphQL APIs, SQL databases, and spreadsheets. Write custom code or use AI to generate any SQL, JS, or CSS.

Dynaboard sponsor

⚡️ IN BRIEF:

“Svelte 5 is going to be radical,” 🐦 tweets Rich Harris.

Server side JS runtime Deno 1.36 has been released with extended security options, a polyfill for node:test, completion of the node:os polyfill, and many other minor Node.js compatibility improvements.

Google has unveiled a sneak peek of a new IDE it’s developing called Project IDX. It has VS Code at its base but with strong JS framework support, simulators, and lot of ‘AI smarts’ on top, 🐦 says Addy Osmani.

A revived but early stage proposal for introducing observables to JavaScript. Your feedback is sought, so file an issue if you have any.

A fun walk through front-end history with a blog post containing every HTML element (well, almost – sorry applet).

Nim 2.0 has been released. Nim is a C++ and Python inspired, statically typed systems language, that supports being compiled to JavaScript.

🎉 RELEASES:

TypeScript 5.2 RC – TS 5.2 is nearly set for its final release. Explicit resource management with using is the headline feature, but there’s more, as usual.

esbuild 0.19.0 – The high-perf bundler can now import paths containing wildcards and supports advanced CSS @import rules. Note that this release contains backwards-incompatible changes.

Astro 2.10 – There’s also a first beta of Astro 3.

Node.js Security Releases – v20.5.1 (Current), v18.17.1 (LTS) and v16.20.2 (LTS) are all part of this set of releases including OpenSSL security updates and fixes, mostly, around permission policies.

📒 Articles & Tutorials

Bringing Sharp to WebAssembly and WebContainers — A look at how it’s possible to bring Sharp, a popular Node.js image manipulation module, into the browser. Welcome to the future.

Ingvar Stepanyan

A Compilation of Outstanding JS Testing Articles — An opinionated list of 10 outstanding testing articles, all with a JS slant to them. He also mentions his own list of JavaScript and Node.js Testing Best Practices which is worth revisiting too.

Yoni Goldberg

🚀 JavaScript Moves Fast—and So Should You. Let Us Help You Upgrade — React, Vue, Next, Node – our expert devs have it covered! Technical debt mounting? We’re your tech debt busters! 👊

Reduce Tech Debt. UpgradeJS now. sponsor

▶  A Look at HTMX: A ‘Game-Changing’ Alternative to React? — One of Jack’s typically well produced, short tours (just 14-minutes). He likes htmx and thinks it’s worth learning in order to have more options in your toolbox.

Jack Herrington

📝 Prefer a traditional writeup? James Hibbard has one here.

Node.js’s ‘Config Hell’ Problem — Andy ponders why a Next.js project has over 30 configuration files and what we can do to avoid it (unsurprisingly, it involves using Deno, but I enjoy the boldness).

Andy Jiang (Deno)

Creating a Screen + Camera Recorder with the Document Picture-in-Picture API — This is more powerful than I was expecting. You can basically record a screencast using browser APIs. In Chrome, at least.

Sébastien Jalliffier Verne

React Authentication — Without Complexity

Userfront sponsor

▶  Build and Deploy a Full Stack MERN Next.js 13 Threads Clone — An extensive, five hour screencast walking through the creation of a Threads/Twitter/X-style app using Next.js 13 and Clerk for user management.

Adrian Hajdin

▶  Turbopack vs Webpack — Being involved with the development of both bundlers, Tobias Koppers has some interesting things to say about the differences and explains why Turbopack is necessary.

Tobias Koppers and Jack Herrington

Autogenerating Rust-JS Bindings with UniFFI

Ben Dean-Kawamura (Mozilla)

Migrating My Blog from Gatsby to Astro

Artem Sapegin

🛠 Code & Tools

Fuite 3.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at any URL to analyze for memory leaks. Introductory blog post here, and there’s also a video tutorial.

Nolan Lawson

Luxon 3.4: Date and Time Manipulation Library — If you’re familiar with Moment.js, it’s like that but with immutable objects, 1-indexed months, Intl-powered localization (so no locale or timezone files needed) and more.

Moment.js

JavaScript Frontend Error Monitoring 101 — Take a crash (pun intended) course on frontend error monitoring with Sentry. Read on.

Sentry sponsor

Filesize.js: Generate Human Readable Strings From File Sizes — For example, 123456 bytes could turn into “120.56 KB” – though different standards of conversion can also be used. GitHub repo.

Jason Mulligan

Typograms: A Way to Render ASCII Diagrams More Elegantly — An intriguing project where you ‘draw’ diagrams in plain ASCII text within special script tags and these get rendered into much nicer looking versions. An interesting approach if Mermaid is too full on for your needs.

Sam Goto / Google

💡 Talking of Mermaid, the latest release supports Sankey diagrams.

d3-graphviz 5.1: Graphviz DOT Rendering and Animated Transitions — Renders SVGs from DOT-defined graphs using a WebAssembly port of Graphviz, a popular graph visualization tool.

Magnus Jacobsson

🔊 Meyda: Audio Feature Extraction Library — Supports both offline feature extraction as well as real-time feature extraction using the Web Audio API. You can play with a demo right on the homepage.

Rawlinson, Segal, Fiala, Wray, et al.

💻 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

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

🛸 Emerge Tools

🧑‍💻 Got a job listing to share? Here’s how.

ggml.js: Run ggml-Ported ML Models Directly in Your Browser — We’re going to do a feature on ML/AI related stuff in JS next week, so watch this space..

Rahul D Shetty

React Virtuoso 4.5 – Powerful virtual list component.

Perspective 2.4 – Fast, streaming real-time data visualization.

express-rate-limit 6.9 – Basic rate limiting for Express apps.

PLV8 3.2 – Use JS as a procedural language in PostgreSQL.

Puppeteer 21.0 – Headless Chrome automation in Node.js.

📊 Well, that’s handy..

npmgraph: A Fun Way to Visualize Package Dependency Graphs — A Web tool that accepts one or more package names (or a package.json) and renders a visualization of their (possibly intersecting) dependency graphs. Packages can be colored by various criteria (such as number of maintainers, if you want to see how fragile the world is) and you can download SVGs of the output.

Kieffer, Brigante, et al.

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.

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.

11 years of JavaScript on top

Posted on by

#​643 — June 15, 2023

Read on the Web

✍️ Be sure to make it to the end of today’s issue because we have an interview with the creator of Angular and Qwik, Miško Hevery, about exactly what Qwik brings to the modern JavaScript development table. Spoiler: performance and resumability.
__
Your editor, Peter Cooper

JavaScript Weekly

Val Town: If GitHub Gists Could Run, and AWS Lambda Were Fun — I’ve been keeping an eye on this for a few months and it’s a fascinating idea rapidly turning into a useful service that’s going places. You write bite size chunks of JavaScript and Val Town runs them in a sandbox, lets them call each other, lets you schedule them, or serves them up over HTTP. It’s smart and worth a look.

Steve Krouse

The Stack Overflow Developer Survey 2023 Results — Over 90,000 developers took Stack Overflow’s annual survey and it’s all “coming up Milhouse” ▶️ for JavaScript (and TypeScript too, natch) with JS topping the popularity charts 11 years in a row. Its showing is somewhat poorer in the top paying technologies list, but we can’t have it all.

Stack Overflow

Enterprise UI Development: Testing & Code Quality — Managing or migrating large apps and codebases? This video course covers what you need to know to scale efficiently whilst maintaining code quality. Covers unit testing, CI pipelines, mocking, code coverage, and more.

Frontend Masters sponsor

Melange 1.0: Compile OCaml / ReasonML to JavaScript — Having started life as a fork of BuckleScript, Melange now pitches itself as a mature tool for compiling OCaml (a popular functional programming language) to efficient and readable JavaScript.

Antonio Nuno Monteiro, Hongbo Zhang et al.

⚡️ IN BRIEF:

Chrome for Testing is a new, official Chrome ‘flavor’ specifically targeting web testing and automation use cases. You can already use it with Puppeteer.

Angular’s ng-conf event is currently taking place, and the latest news is the release of Angular 16.1 (now with TypeScript 5.1 support), an RFC for a new control flow syntax, and an RFC for built-in declarative lazy loading.

Allegedly, you can’t currently publish npm packages containing the words ‘keygen’ or ‘cheat’ in their names. Hacker News has been discussing it and a response from npm is currently being awaited.

Terence Eden has come up with a way to password protect a static HTML page with no JavaScript but it’s such an odd approach that you might not want to use it in production 😆

RELEASES:

Node.js v20.3.0 (Current)

VS Code May 2023 Edition – Adds a JS refactoring to move a class, function, or constant into an existing file and update all references.

Bun 0.6.9 – Mostly fixes and memory efficiencies for the alternative JS runtime. Nice.

TS-Pattern 5.0
↳ Exhaustive pattern matching library for TypeScript.

NestJS 10.0 – Progressive Node.js app framework. (What’s new.)

📒 Articles & Tutorials

An Introduction to Debugging Tools and Approaches for Node — An informative primer on debugging, from simple things like using IDE extensions to highlight potential problems or, yes, console logging, through to using the V8 inspector and debugging via Chrome.

Craig Buckler

Before Your Next Frontend Pull Request, Use This Checklist — Avoid common mistakes in pull requests with this checklist, covering areas from minimizing bundle size and ensuring accessibility to using semantic markup and keeping code clean.

Nina Torgunakova

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby.js sponsor

▶  Nuxt Explained in 100 Seconds — One of Fireship’s typical fast-paced high level roundups. This time they cover Nuxt, the Vue-oriented app framework.

Fireship

How To Build Server-Side Rendered (SSR) Svelte Apps with SvelteKit — SvelteKit is a framework for building apps using Svelte. This post walks through creating a simple job board with it and deploying on Netlify.

Sriram Thiagarajan

▶  Learn Angular Routing in 35 Minutes

Ervis Trupja

🛠 Code & Tools

Motion Canvas: A TypeScript Library and Real-Time Preview Editor to Program Animations — Uses generator functions to procedurally define your animations, and you can try out the web-based editor that allows you to work with the animations visually.

Motion Canvas

Code Together Before You Work Together. Interview Devs in a Real IDE — Skip algorithm interviews & use CoderPad to run coding interviews that are trusted by both candidates and interviewers.

CoderPad sponsor

Threlte: A Three.js Scene Renderer and Component Library for Svelte — react-three-fiber is great, but if you prefer Svelte, this is the alternative for you. It appears to be under very active development too with a whole new version on the way soon. GitHub repo.

Grischa Erbe

Million.js: A Performance-Focused VDOM Replacement for React — Starting life two years ago as a small, library-agnostic virtual DOM implementation, Million has recently presented itself as a performance enhancement for React: “Imagine React components running at the speed of raw JavaScript.”

Aiden Bai

📰 We featured this in this week’s React Status newsletter – if you’re a React developer, we focus more heavily on React news there.

jest-extended 4.0: Additional Matchers for Jest Users — If you’re using Jest for testing, this project introduces a variety of more specific matchers for various situations, particularly around type, value and format checking.

Jest Community

Rewind-UI: Customizable React + Tailwind CSS Component Library — A React component library fitting into the Tailwind CSS way of thinking. You can play with a live demo of some basic customizations on the homepage. It’s in beta but there are about thirty components to sink your teeth into.

Nick Dunas

React Authentication — Without Complexity

Userfront sponsor

⏱🌎  tz-lookup 8.0: Fast Time Zone Estimations from Latitude and Longitude — “This package trades speed and size for accuracy.” If you need to quickly infer timezone from location in Node or the browser, it’s worth a try.

Matthew McEachen

SVG.js v3.2: SVG Manipulation and Animation Library — A lightweight approach without dependencies. There’s a demo on JSFiddle you can play with. GitHub repo.

Various Authors

Vue-ECharts 6.6
↳ Apache ECharts component for Vue.js. (Demo.)

Neutralino.js 4.12.0 – JS desktop app framework.

Mineflayer 4.9 – Create Minecraft bots in JavaScript.

Tremor 3.1 – React dashboard building library.

♖ React Chessboard 3.0 – Yes, a chess component!

React Calendar 4.3

Dehydrating the Web with…
Miško Hevery

Perhaps best known as the creator of Angular, Miško is on a fresh mission with Qwik. Recently reaching v1.0 and focusing on the ‘instant’ delivery of full-stack apps to end users, Qwik takes an interesting approach around ‘streaming’ JavaScript to the client only when needed.

Miško recently shared the full story of Qwik ▶️ on the Stack Overflow podcast, and we wanted to ask him a few questions here too:

What was the key inspiration behind Qwik?

I don’t think there was a “key” inspiration but an accumulation of things that made me realize the current approach doesn’t scale.

We did a lot of work making the Ivy compiler in Angular faster and more capable. While we had a lot of success, the speed wins were not obvious. While Ivy was optimized, the rest of the app was not, and at app startup the code ran without optimization because the VM hadn’t warmed up.

Google has an internal framework called WIZ that powers Google Search, Flights, and Photos. WIZ is great at not executing a lot of code on app startup, and it results in a better user experience.

The realization that code runs more slowly on app startup and that it’s proportional to the amount of JS to execute, is what led me to building a framework that would not need to execute code eagerly on startup. Qwik is the culmination of that goal.

What is Qwik’s biggest differentiator to other frameworks?

Qwik is resumable. Qwik can transfer its internal state from the server to the client, which means that the app can become interactive on the client without having to execute any app-related code eagerly.

Resumablity is at the heart of Qwik. Qwik apps can resume because Qwik knows how to serialize the state of the app and the framework. Other frameworks know how to serialize the app state but not necessarily the framework state.

(Editor’s note: Think Qwik goes into more detail on this.)

Some developers have strong opinions about the use of symbols like $ in names. Did you have any qualms and did you consider any alternatives?

Some people have visceral reactions to $ as it reminds them of jQuery or PHP.

Qwik needs a way to mark closures for extraction. JavaScript doesn’t have an easy syntax for doing this so we needed to come up with our own. $ communicates to the optimizer that it needs to perform code extraction at that location, and also communicates to the developer that special rules apply there too.

We chose $ as it’s one of the few non-alpha characters valid in function names and that does not change the pronunciation of the API.

Misko is CTO at Builder.io and creator of Qwik.

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🧑‍💻 Got a job listing to share? Here’s how.

Why Svelte is converting TypeScript to JSDoc

Posted on by

#​638 — May 11, 2023

Read on the Web

JavaScript Weekly

The JavaScript Ecosystem is Delightfully Weird — There are plenty of examples of how JavaScript is weird but Sam focuses on the why. If you’ve been a JS developer for many years you’ll have seen it go through many phases and morph to fit its environment. Sam paints the big picture, concluding with a talk Dan Abramov gave yesterday called “React from Another Dimension.”

Sam Ruby

The New JS Features Coming in ECMAScript 2023 — The next JavaScript update brings smaller additions familiar from other languages, but there are more significant developments waiting in the wings. 

Mary Branscombe (The New Stack)

Full Stack for Front-End Engineers with Jem Young (Netflix) — Learn what it means to become a well-rounded full-stack engineer with this hands-on video course. You’ll dive into servers, work with the command line, understand networking and security, set up continuous integration and deployment, manage databases, build containers, and more.

Frontend Masters sponsor

Vue 3.3 ‘Rurouni Kenshin’ Released — Named after a popular manga series, the latest release of Vue is focused on developer experience improvements, particular for those using TypeScript.

Evan You

John Komarnicki says ▶️ Vue 3.3’s defineModel macro will change the way you write your components.

Next.js 13.4 Released — Despite the minor version bump, this is a big release for the popular React framework. The new app router and its improved approach to filesystem based routing is now offered as a stable feature, with a new concept of server actions being introduced in alpha as a way to mutate data on the server without needing to create an in-between API layer.

Tim Neutkens and Sebastian Markbåge

⚡️ IN BRIEF:

???? Svelte is converting from TypeScript to JSDoc (example).. sort of. Rich Harris popped up on Hacker News to provide some all important context but the ultimate result will be smaller package sizes and a better experience for Svelte’s maintainers.

React now has official ‘canary’ releases if you want to use newer features than in the stable releases but still be on an officially supported channel.

Newly released Firefox 113 lets you override JS files in its debugger.

No stranger to controversy, Ruby on Rails’s David Heinemeier Hansson (DHH) tweeted: ???? “TypeScript sucked out much of the joy I had writing JavaScript.”

RELEASES:

Glint 1.0 – TypeScript powered tooling for Glimmer / Ember templates.

Elementary 2.0 – JS/C++ library for building audio apps.

???? Articles & Tutorials

ES2023’s New Array Copying Methods — The newest ECMAScript spec introduces some new methods on Array that you’ll eventually find useful in your own programs. Phil gives us the tour.

Phil Nash

Private Class Fields Considered Harmful — “As a library author, I’ve decided to avoid private class fields from now on and gradually refactor them out of my existing libraries.” Why? Well, that’s the interesting part..

Lea Verou

▶  I’m Done with React — Going from least-to-most important, the reasons this developer isn’t choosing React for future projects make for interesting watching, particularly if you too are overwhelmed by upheaval in the React world. Solid is one of the alternatives he has warmed to.

Adam Elmore

Constraining Language Runtimes with Deterministic Execution — Explore various challenges encountered while using different language runtimes to execute workflow code deterministically.

Temporal Technologies sponsor

Running JavaScript in Rust with Deno — Deno’s use of Rust makes it a natural choice if you’re building a Rust app and want to integrate a JavaScript engine.

Austin Poor

Regular Expressions in JavaScript — Powerful but often misunderstood, many will benefit from this roundup of the potential regexes offer to JavaScript developers.

Adebayo Adams

How to Measure Page Loading Time with the Performance API — The Performance API is a group of standards used to measure the performance of webapps supported in most modern browsers.

Silvestar Bistrović

How to Build a JS VST or Audio Unit Plugin on macOS — VSTs and Audio Units are both types of audio plugins for audio editing software and they’re usually built in C or C++. This tutorial doesn’t dig into the audio side of things, but more the practicalities of packaging things up to get started.

Chris Mendez

An Introduction to the Bun Runtime — If you’ve not yet played with the newest entrant into the JS runtime space, this is a high level overview.

Craig Buckler

2023 State of the Java Ecosystem

New Relic sponsor

Configuring ESLint, Prettier, and TypeScript Together

Josh Goldberg

DestroyRef: Your New Angular 16 Friend

Ion Prodan

Why Astro is My Favorite Framework

Ryan Trimble

???? Code & Tools

file-type 18.4: Detect the File Type of a Buffer, Uint8Array or ArrayBuffer — For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file. Uses magic numbers so is targeted solely at non text-based formats.

Sindre Sorhus

Learn How the Rising Trend of Malicious Packages Can Affect Your Apps — Keep your applications secure with Snyk’s article on the increasing number of malicious OS packages and ways to mitigate these risks.

Snyk sponsor

Livefir: Build Reactive HTML Apps with Go and Alpine.js — Go isn’t a language that often pops up in the context of the frontend, but this is a neat integration between Go on the backend and Alpine.js up front.

Adnaan Badr

JZZ.js: A Developer Friendly MIDI library — For both browsers and Node, JZZ.js provides an abstraction over working with MIDI related concepts. There are many examples, but the easter egg in the top left is our favorite.

Sema / Jazz-Soft

htmlparser2 9.0: A ‘Fast and Forgiving’ HTML and XML Parser — Consumes documents and calls callbacks, but it can generate a DOM as well. Works in both Node and browser.

Felix Böhm

cRonstrue: Library to Convert cron Expressions into Human-Readable Form — Given something like */5 * * * *, it’ll return “Every 5 minutes”. No dependencies.

Brady Holt

Knip: Find Unused Files, Dependencies and Exports in TypeScript Projects — Being Dutch for “snip” is appropriate as Knip can trim away things that aren’t being used in your project.

Lars Kappert

jsPlumb 6.1
↳ Visual connectivity for webapps.

gridstack.js 8.1
↳ Build interactive dashboards quickly.

???? 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

Team Lead Web Development — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors.

Komoot

????‍???? Got a job listing to share? Here’s how.

???? Don’t tell Satya Nadella..

Fake Windows 11 in Svelte — This is a cute little side project, and the code is available too. The most common complaint I’ve seen is that it’s actually more responsive than the real Windows.. ???? Be sure to check out both ‘VS Code’ and ‘Microsoft Edge’ in this environment.

Yashash Pugalia

???? Prefer Windows XP? Maybe RebornXP is more for you. Complete with the classic starting up sound!

Playwright now offers a UI mode

Posted on by

#​631 — March 24, 2023

Read on the Web

JavaScript Weekly

Speeding Up the JavaScript Ecosystem: npm Scripts — The latest in what has been a fascinating series on finding ‘low hanging fruit’ when it comes to performance in the JavaScript world. The author explains it best himself:

“‘npm scripts’ are executed by JavaScript developers … all the time. Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.”
What Marvin does here is a valuable skill for all developers to pick up, and you can enjoy more by going back to the start.

Marvin Hagemeister

Playwright v1.32 – Now with UI Mode — The popular Web testing and automation framework is taking more steps toward the ground currently served by tools like Cypress by offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with watch mode. ▶️ This video provides a good introduction.

Microsoft

A Grid Component with All the Features & Great Performance — Try our powerful JS data grid component which lets you edit, sort, group and filter datasets with fantastic performance. Includes a TreeGrid, API docs and plenty of demos. Seamless integration with React, Angular & Vue apps.

Bryntum sponsor

Why We Added package.json Support to Deno — Deno shares some provenance with Node.js but till recently it hadn’t focused on supporting Node features like npm modules. But with Node and npm compatibility beginning to improve, the team has faced questions about the runtime’s priorities. Ryan Dahl explains more about their thinking here.

Ryan Dahl

???? In other Deno news, Deno 1.32 has been released with… improved package.json support, and more.

How to Start a React Project in 2023 — There are lots of ways, but this well-regarded author explains the pros and cons of a few approaches, and gives you a few options targeting specific use cases you might have.

Robin Wieruch

IN BRIEF:

GitHub had to update its RSA SSH host key today so you may see security related warnings when pushing and cloning. It’s easy to fix, but check the new fingerprint matches – it’s for your own security.

The New Stack caught up with Svelte’s Rich Harris on SvelteKit and what’s coming for Svelte 4.

The React team shared some cutting edge updates on what they’re working on including React Server Components and an optimizing compiler.

If you were experiencing errors on the official Node site last week, here’s the (detailed) post mortem of why. Config errors and inappropriate caching, mostly.

✨ Did you know there’s a market in fake GitHub stars? Some developers analyzed some repos to learn more about it.

???? Congratulations to Lea Verou on her TC39 appointment9. Her efforts to push the Web forward are legendary. Prism is one project you may be aware of.

Make your opinions known on what should be in the next version of Vite.

RELEASES:

Docusaurus 2.4
↳ Easy to maintain documentation site generator.

Puppeteer 19.8
↳ Headless Chrome Node.js API.

Neutralinojs 4.11
↳ Lightweight cross-platform desktop app framework.

Qwik 0.23

???? Articles & Tutorials

Buying a Hard-to-Get Bicycle using Playwright — An unusual use case for JavaScript, Playwright, and GitHub Actions, but Maciek managed to buy his bike.

Maciek Palmowski

Snyk Top 10: JavaScript OSS Vulnerabilities — Dive into the most prevalent critical and high open source vulnerabilities found by Snyk scans of JavaScript apps in 2022.

Snyk sponsor

The ‘End’ of Front-End Development? — A recent narrative doing the rounds suggests that large language models like GPT-4 (or even tools like Copilot X) could soon put some developers out of a job — however, Josh is “optimistic about what these AI advancements mean for the future of software development”.

Josh W. Comeau

In related news, Eric Elliott put ChatGPT through its paces to see if it would make for a good JavaScript tutor. It did well, though with mixed results.

Migrating from ts-node to Bun — A look at adopting performance-oriented Bun when you’re used to using TypeScript with Node.js. John runs us through porting a console app from the ts-node approach over to Bun — “a pretty easy process,” he says.

John Reilly

▶  A Pinia Crash Course for Beginners — Pinia is a store / state management solution for Vue that does believe in pineapple on pizza.

Alexander Gekov

A Practical Guide to Getting Started with Astro — An extensive walkthrough of Astro that covers all the topics you’ll need to get you started.

Mojtaba Seyedi

???? Test Website Speed Continuously and Rank Higher In Google — You need a fast website to make users happy and meet Google’s Core Web Vitals metrics. Test and optimize with DebugBear.

DebugBear sponsor

Automatic npm Publishing with GitHub Actions and Granular Tokens

Tim Perry

Make Sure You Do This Before Switching to Signals in Angular

Jordan Powell

Six CSS Snippets Every Developer Should Know

Adam Argyle (Google)

???? Code & Tools

trace.cafe: Easy Webperf Trace Sharing — A quick way to share a performance profile saved from your DevTools, available for up to 90 days with the DevTools perf panel embedded (see example).

paul irish

VueUse: A Collection of Vue Composition Utilities — With over 200 functions targeting both Vue 2 and 3, there’ll be something in this suite of Composition API-based utility functions for you, whether it’s working with state, browser capabilities, animations, Electron, Firebase, and more.

Anthony Fu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

OTPAuth: One Time Password (HOTP/TOTP) Library — When you log in to a site that uses 2FA and you’re asked for some digits from an authentication app, that’s probably a Time-based One-Time Password (or TOTP). This library for Node, Deno, Bun and the browser lets you work with TOTPs and HOTPs from JS.

Héctor Molinero Fernández

Recharts 2.5: Chart Library Built with React and D3 — Easy to deploy with declarative components, native SVG support, and lightweight dependency on D3. Line, bar, scatter, composed, pie, and radar charts are offered. There are lots of examples, complete with code.

recharts

DOCX 8.0: Generate Word .docx Files from JavaScript — The code to lay out documents is verbose but there’s a lot of functionality. Here’s a CodePen example and release notes – GitHub repo.

Dolan Miu

SvHighlight: Code Syntax Highlighter for Svelte — Powered by Highlight.js, it includes a blurring feature to focus attention on specific areas of code and you an customize it with Tailwind. Try the interactive examples to see the effect.

SvHighlight

eslint-formatter-pretty 5.0: Pretty ESLint Formatter — Nicer output than the default. Sort results by severity. Get stylized inline code blocks, and more.

Sindre Sorhus

AWS JWT Verify: Verify JWTs Signed by Amazon Cognito — In both Node.js and the browser.

Amazon Web Services

???? Jobs

Software Engineer (Backend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Sticker Mule

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.

melonJS 15.0
↳ Mature HTML5 game engine.

Marked 4.3
↳ Markdown parser and compiler. (Demo.)

v8go 0.9
↳ Execute JavaScript from Go(lang).

Million 2.1
↳ Fast Virtual DOM to make React faster.

Partytown 0.7.6
↳ Take third-party scripts off the main thread.

???? Bonus Item

Make Bookmarklets — Create and test bookmarklets directly in the browser. Makes an irritating task slightly easier if you need to do it.

Cullan Luther