Tag: development

Comparing test assertion styles in JavaScript

Posted on by

#​657 — October 5, 2023

Read on the Web

JavaScript Weekly

An Interactive Intro to CRDTs — Conflict-free replicated data types (the so-called CRDTs) provide a popular approach to replicate data across numerous clients and allow live collaboration between them without conflicts. This post really digs into what makes CRDTs tick well, complete with interactive examples.

Jake Lazaroff

Test Assertion Styles in JavaScript — Isaac, fundamental to the development of npm and the growth of Node, shares his thoughts on the two main approaches common in JavaScript testing APIs and which he prefers best.

Isaac Z. Schlueter

Free Course: Land a Software Engineering Role — Jerome Hardaway has helps over 300 folks get a software development job — now he shares his advice in this video course — featuring resume tips, networking advice, how to optimize your GitHub profile for technical scrutiny, and more.

Frontend Masters sponsor

🔵 TypeScript 5.3 beta has been released with improved support for import attributes, improved type narrowing in numerous situations, and inlay hints in VS Code can now jump you to the type’s definition.

🔐 npm provenance is now generally available on the main npm registry. Here’s a live example.

🎨 Adobe officially launched its version of Photoshop for the Web last week and Addy Osmani wrote a great post showing off all the web technologies it took to make it happen. The modern browser is a powerhouse!

🏠 In June we featured val.town, an interesting site where you can write and deploy TypeScript in a social and serverless fashion. Big changes are coming in the shape of Val Town v3. A platform to watch.

🤔 Was JavaScript really made in 10 days? It’s complicated.

⚠️ The forthcoming ESLint 9.0 is a significant enough release that you might want to prepare your custom rules for it in advance.

🎉 RELEASES:

Node v20.8.0 (Current) – Key performance improvements for streams.

Sinon 16.1 – Provides test spies, stubs and mocks.

Astro 3.2, Redux Toolkit 1.9.7, and pnpm 8.8

📒 Articles & Tutorials

‘Strong Static Typing, A Hill I’m Willing to Die On…’ — Starting off with TypeScript and moving on to Rust, the author shares why he feels so strongly that when it comes to having static types in a language, there really is no argument. (This then led to extensive discussion on Hacker News.)

Tom Hacohen

📗  The Story of Third-Party JavaScript (The Book) — Manning published a book by Ben Vinegar and Anton Kovalyov ten years ago that was entirely focused on writing JavaScript to run on other people’s sites – quite apt as the authors worked at Disqus at the time! This post isn’t about the topic itself but goes deep into how the book came together and how well it did.

Ben Vinegar

📅  JetBrains JavaScript Day 2023: A Virtual Event You Won’t Want to Miss — Get up to speed with modern JavaScript and TypeScript development in just one day.

JetBrains sponsor

Working with a TypeScript Monorepo with npm Workspaces — npm’s workspaces feature makes it easier to manage multiple packages within a single top-level package/monorepo.

Dmitry Kudryavtsev

Test Your React Libraries Locally with Yalc — Yalc simplifies the process of working with and ‘publishing’ packages entirely locally so you can try things out without publishing to a remote, and potentially public, registry.

Andrew Israel (PropelAuth Blog)

▶  Let’s Create a Filter Table Component in Vue

Andrew Schmelyun

Integrating Slonik with Express.js — A type-safe Postgres client library.

Gajus Kuizinas

Next.js 13 vs Remix: A Case Study

Prateek Surana

Using the Intl Segmenter API

Kilian Valkhof

🛠 Code & Tools

Tailwind Elements 1.0: 500+ Bootstrap Components Recreated with Tailwind — Claims to offer more functionality compared to Bootstrap and follows a ‘minimal’ Material-esque design language for user familiarity. Easily integrates with Angular, Vue, etc.

Tailwind Elements

Lite YouTube Embed 0.3: A Faster Youtube Embed — Faster than the official one, at least. v0.3 implements reliable autoplay. There’s a live demo here.

Paul Irish

Day.js: A 2KB Immutable Date Library — Pitched as a Moment.js alternative with a mostly compatible API, Day is a smaller library for parsing, validating, manipulating, and displaying dates and times.

iamkun

Stop Feeling Lost and Inefficient When Debugging via console.log — See console.log output and runtime errors alongside your code. No config, no setup, no hassle. Supports Vite, Bun, Webpack, Next.js, Remix, and more.

Wallaby Team sponsor

Viselect: Let Users Visually Select DOM Elements — If you’ve got a variety of elements and you want users to be able to select them in groups, individually, or even in multiple groups, this lets you offer that functionality easily. Can be used in a vanilla fashion or with integrations for React or Vue.js.

Simon Reinisch

Tailwind Next.js Starter Blog 2.0: A Starter Template for a Next.js Blog — An up-to-date template using the modern Next.js app directory structure along with server components. A full explanation of the updates.

Timothy Lin

Kaluma: A Tiny JS Runtime for the Raspberry Pi Pico — Can you get a JavaScript runtime into the 64KB necessary to run on the Raspberry Pi Pico (which uses the RP2040 microcontroller)? Kaluma can.

Kaluma Project

sort-on 6.0: Sort Arrays on an Object Property — Short & sweet. Samples.

Sindre Sorhus

Craft.js 0.2: A React Framework for Building Drag and Drop Page Editors — It’s a bold move to make the landing page for your project be a text editor itself, but we like it. GitHub repo.

Prev Wong

Create Collaborative Apps Like Figma and Miro in Days with Ably

Ably sponsor

📅 React Native Big Calendar 4.3 – A Google Calendar/Outlook-style large calendar control.

📊 Lightweight Charts 4.1 – High performance financial charting for canvases. Release notes.

CKEditor5 40.0 – Commercial rich text editor framework. Now with an AI assistant feature.

article-extractor 8.0 – Extract article content for a URL in Node.

Shaka Player 4.5 – Library to play adaptive media formats (DASH, HLS and MSS).

Ziggy 1.7 – Use Laravel named routes in JavaScript.

Marked 9.1 – Markdown parser & compiler.

💻 Jobs

Apply Now and Work #LikeABosch — Our promise to our associates is rock-solid: we grow together, enjoy our work & inspire each other. Join in & feel the difference.

Bosch

Frontend Developer 🚀 (Remote, Work from Anywhere 🏖️) — Enjoy TypeScript, React, GraphQL and performance? Join in building our super-fast headless commerce service with a beautiful UI.

Crystallize

🎁 A VS Code Bonus

Awesome VS Code: A Curated List of Themes and Extensions — Yep, it’s one of those ‘awesome’ lists, but it’s packed not only with links to themes and useful extensions, but it has screenshots for most of them too. Skim through, something will jump out at you.

Valerii Iatsko

Microsoft spills the tea on TypeScript

Posted on by

#​655 — September 21, 2023

Read on the Web

JavaScript Weekly

▶  TypeScript Origins: The Documentary — You know you’ve made it when you get your own documentary! This has just dropped but is well produced, packed with stories from TypeScript’s co-creators, users, and other folks at Microsoft, and kept me entertained. It goes particularly deep into the motivations and process behind its creation, including why Microsoft felt it was worth pursuing.

OfferZen Origins

🔥 The takes get spicer 25+ minutes in as various TypeScript users chip in with their opinions, and even Daniel Rosenwasser, now program manager of the TypeScript team, says he initially worried that Microsoft might “f**k it all up.” 😅 Ryan Dahl pops up about an hour in too.. so I hope you’ve got some time spare.

Patterns for Reactivity with Modern Vanilla JavaScript — When data changes, you often want to do things, and the process that makes that happen is reactivity. While many libraries or frameworks like React or Vue offer reactive solutions out of the box, you can do it all with vanilla JavaScript too, and this post digs into many of the patterns you might need to use, complete with examples.

Marc Grabanski

Handsontable: Data Grid With Spreadsheet Superpowers — There are a lot of JavaScript data grids out there, but none are quite like Handsontable. Its Excel-like design, keyboard shortcuts, and navigation make it the perfect tool for developers.

Handsontable sponsor

Deno 1.37: Modern JavaScript in Jupyter Notebooks — Not content to let Bun take all the headlines, Deno has come up with something pretty neat here. Deno 1.37 ships with a Jupyter Notebook integration so you can create interactive REPL sessions but using the JavaScript you know and love, rather than Python.

The Deno Team

JavaScript Minification Benchmarks — A frequently updated benchmark suite and results comparing the speed and quality of JavaScript minification across a variety of tools including esbuild, Babel, Bun, SWC, and Uglify.

Hiroki Osame

⚡️ IN BRIEF:

The Svelte team offers a sneak peek at the forthcoming Svelte 5 and introduces the idea of ‘runes’: “Like every other framework, we’ve come to the realisation that Knockout was right all along.”

Happy 27th birthday to JScript! JScript was a version of JavaScript that Microsoft put into IE 3.0 primarily to avoid trademark issues around the name of JavaScript. No-one cares much about that anymore, despite Oracle still technically holding the JavaScript trademark.

Folks are discussing whether Node.js needs a mascot of its own.

Want to support anyone doing great work on JavaScript projects? You can nominate them for a GitHub Star.

If you rely upon the npm package download counts at all, the daily counts for all packages was zero on September 13 and 14 (example). Why? “This issue remains under investigation,” says npm support.

🎉 RELEASES:

Remix v2 – Popular full stack web framework.

Bun 1.0.2 – Bugfixes, faster bun –watch, it now uses V8’s Date parser, and Fastify apps now work too.

Node.js v20.7 (Current) – Multiple –env-files now supported.

Next.js 13.5 – Faster, faster, faster.

📒 Articles & Tutorials

Getting Network Activity Under Control with Priority Hints — A look at how browsers can prioritize the loading of resources, how you can explicitly specify a priority when using fetch, and how different ways of loading scripts are prioritized.

Alex MacArthur

Securing Node Apps by Analyzing Real Command Injection Examples — When code can be manipulated to run unintended, arbitrary commands, it’s never going to end well.

Liran Tal

🚀  Coming Soon: Fixed-Cost Monthly Maintenance by UpgradeJS.com — Too much tech debt in your JavaScript app? Let us help. Slow and steady upgrades at your own pace. Releasing next week.

🌳 Bonsai by UpgradeJS.com sponsor

🧭  What’s New in Safari 17 — Safari 17 is now in beta on iOS 17 with the final release dropping across all of Apple’s platforms next week. On the JavaScript front, Safari and WebKit now fully support the Storage API, WebGL in Offscreen Canvas, v flag support on regexes, Set operation methods, URL.canParse, plus the much anticipated support for PWAs in macOS Sonoma.

Jen Simmons and the WebKit team

Testing Out the Alpine.js Intersect Plugin — A wrapper for the Intersection Observer API.

Raymond Camden

▶  How to Make Forms in Angular Reusable

Decoded Frontend

Clean Layout Architecture for Vue Applications

Fotis Adamakis

Incremental Static Regeneration for Angular

Enea Jahollari

🛠 Code & Tools

fx 30: The Go(lang)-Powered Terminal JSON Viewer — Yes, it’s written in Go, but fx has long been a useful tool for looking at JSON files, and it has just been rewritten from the ground up with a new look, regex search, fuzzy search, and support for “even the most massive JSON files.” You don’t need to worry about Go at all; it’s simply a fantastic tool for looking at JSON.

Anton Medvedev

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

Mantine 7.0: The Popular React Component Library — A big release for what is now one of the most popular React component libraries. As of v7, Mantine no longer relies on Emotion and components come with native CSS files, all components now support the system-set color scheme, CSS modules are now the default way to style components, and there are many smaller enhancements too.

Mantine Team

Chrono 2.7: A Natural Language Date Parser — Give it a string like “today”, “last Friday”, “2 weeks from now”, or even an entire date and time, and it’ll come up with a date object to suit.

Wanasit Tanakitrungruang

Theatre.js 0.7: Motion Design for the Web — Can be used both programmatically or via a visual editor to animate objects created with things like Three.js, React Three Fiber, HTML/SVG, or even just tween variable values.

Theatre.js Project

Track Errors and Performance Issues in Every Part of Your Stack

Sentry sponsor

Swup: A Flexible Page Transition Library for Server-Side Rendered Sites — A library that benefits hugely from checking out the demos. v4.4 adds experimental ViewTransition support.

Georgy Marchuk

Create Chrome Extension: A Scaffolding Tool for Chrome Extensions — Similar to create-react-app or Yeoman, this is specifically for starting extension development, with support for several frameworks, HMR, and light/dark modes.

Yalda

💡 Chrome Extension CLI is another option in this space.

Neutralinojs 4.14.0 – Imagine something like Electron but without the browser engine being bundled in. Supporting Linux, Windows, and macOS, it instead leans on what’s already present.

📅 React Lite Month Picker
↳ An elegant way to let users select a specific month.

React-Virtuoso 4.6 – Powerful virtual list component.

Faker 8.1 – Generate large amounts of fake data.

🔊 Peaks.js 3.1
↳ The BBC’s audio waveform UI component.

Ember.js 5.3

💻 Jobs

Nest.js Back-End Developer — Lead the development of a HealthTech platform, focused on Caregiver support. TypeScript, Nest.js, PostgreSQL, AWS, React/Next.js.

Carallel

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

“The best programs are the ones written when the programmer is supposed to be working on something else.”

___
Melinda Varian

Advancing the NodeSource Node.js Package Repo (Including User-Requested Upgrades!)

Posted on by

For over a decade, NodeSource has developed and maintained a Node.js package repository that, has become the standard for production use globally. We are excited to announce some significant updates to this repo that include a large number of items related to user requests. (Note that there is an important point in the section below about using the new repo as the old repo will remain available but no longer be supported with new versions)

We handle over 100 million downloads of the open-source binaries each year, developers rely on our timely releases (fastest in the ecosystem) and tooling to simplify their use of the Node.js Runtime. Every time there is a release, including security updates, our team delivers updates in less than 48 hours.

Img 1- Type of Distributions

As part of our ongoing commitment to the ecosystem, we want to ensure that developers who rely on our repository have access to a robust and efficient resource led by our Node experts. A key objective with this update was to enhance the Node.js package distribution experience, making it more intuitive, feature-rich, and responsive to user needs. In the following sections, we’ll dive into the improvements we’ve made, highlighting the changes that promise to make your development journey easier.

Check it out HERE and let us know your thoughts!

New Features

Version Choice (Made Easy): We have added versatility with the latest update to our repository, gone are the days of being locked into the latest Node.js release. Now, you can choose the specific version of Node.js you need to tailor your environment to the unique needs of your project.

Universal distribution support: Say goodbye to server customization and compatibility concerns. Our repository now seamlessly supports all distributions. You don’t need to adjust for each new OS version, all are supported out-of-the-box.

Seamless CDN transition: We’ve revamped our CDN provider to address cache-related issues. This change ensures a smoother, more reliable experience and eliminates cache-related hiccups..

Streamlined installation requirements: Installing Node.js should be a snap. That’s why we’ve carefully configured the necessary installation requirements. The package now includes the required glibc and Python3 configurations, making the setup more accessible.

Simplified installation process: Recognizing the diversity of our user base, we’ve redesigned the installation process—no more complex scripts to decipher. Instead, we’ve streamlined it to a few simple lines of code. Installation is now easy and accessible for users of all skill levels.

These improvements demonstrate our commitment to providing a repository experience that keeps pace with technological demands and prioritizes user convenience and satisfaction.

⚠️ IMPORTANT: Use the new repository!

Failing to migrate to the new repository could be significant, most notably is the potential denial of access to the latest versions of Node.js. Because these latest versions will be distributed exclusively through the new repository, those who do not migrate will miss important updates, improvements, and features.

For more information on the new repository including details regarding the migration process, we recommend you visit the following link for the repository wiki, which provides comprehensive information on making a successful transition.

Our Distributions Journey

Our mission to help developers gain access to Node.js and enable the enterprise to adopt it safely has been a key driver for our binary distribution effort. We have seen tremendous growth in the number of downloads every year from our distributions across the globe.

Img 2- Request per Country and Data Transfer by Country per 24H

Our flagship product, N|Solid, an enterprise-grade version of the Node.js Runtime, is a testament to this devotion to OSS, and was a key part of why we created this repo that is used by millions of developers to power a massive number of applications. Our Node and Infra experts will continue to support this repo for the community with great pride.

> This repository has seen a staggering number of annual package downloads, over 120 million, and a data consumption rate of around 300 terabytes per month. This endeavor hasn’t been without its challenges, as maintaining such a repository has required extraordinary dedication and effort.

Earlier this year we made the decision to open-source our N|Solid Runtime marking a key turning point for NodeSource, inspiring us to extend our commitment to the repository. (The OSS version of N|Solid will be available in October of this year)

_> Recognizing the symbiotic relationship between Node.js and N|Solid, we decided to merge their paths. _

By distributing Node.js and N|Solid together, we’re creating a unified ecosystem that takes advantage of the power of Node combined with the advancements of N|Solid. This dynamic coupling invites those familiar with our repository to explore what we refer to as “enterprise Node.js,” or the Node.js that enterprises have been waiting for. This synergy is a testament to our commitment to both the Node.js community and the growth of enterprise-grade solutions.

Conclusion

As we embark on this transformative phase, we reflect on our journey in this ecosystem. We’ve been privileged to play a role in supporting developers and companies, and we’re excited to further enhance our collaboration.

Today, we invite you to explore our new repository, HERE, – a hub of choice and compatibility, empowering you to select the Node.js version that suits your needs. But that’s just the beginning of the story. If you are interested in our Enterprise version N|Solid it’s available to you for FREE with additional pricing packages for larger projects/teams and support.

Stay tuned for further enhancements as we refine and enrich your experience.Thank you for being a part of our journey. Here’s to many more years of collaboration and growth!

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.

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.

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

NodeSource, Inc. Announces AI Assistant “Adrian” for Comprehensive Analysis and Optimization of Node.js Applications and Open-Sourcing of its Augmented Node.js Runtime.

Posted on by

[Seattle, WA, June 28, 2023] — On stage at Collision Conf in Toronto, NodeSource, Inc., the leader in enterprise-grade solutions and support for Node.js, made two big announcements: the private beta of its groundbreaking AI Assistant, “Adrian,” designed to revolutionize the way developers and DevSecOps analyze, optimize, and secure Node.js applications, and that it’s open-sourcing its Node.js runtime to enable developers access to the most advanced runtime available.

NodeSource has been helping developers and organizations with the utilization of Node.js to build digital products and services for nearly a decade, most notably with its industry-leading product, N|Solid. Augmenting N|Solid’s unparalleled depth of insights and telemetry with AI gives customers a new level of context and understanding of performance and security analysis and how best to resolve issues.

The AI agent, Adrian, identifies memory leaks, poor code, security issues, and other performance problems that impact application performance and health.

“It’s like “god-mode” for Node, said Russ Whitman, CEO of NodeSource, “we give developers and DevsSecOps teams much more than telemetry and alerts; we help them identify the real issues, with context, to help them solve quickly. The cost and time savings are massive, and lets developers focus on creating new features and adding value to the organization”.

With the ever-increasing demand for scalable, efficient, and high-performing applications, Node.js developers face the constant challenge of optimizing their codebase to deliver exceptional user experiences. Adrian is an advanced AI-powered agent that provides actionable insights and suggestions, enabling teams to streamline their Node.js applications, reduce downtime, cut costs, and enhance overall user satisfaction.

“In the near future the performance of every software development team will be transformed by AI powered tools like N|solid”, offered Robert Duffy, Chief Product and Technology Officer, Drizly, an Uber company.

Key features of Adrian include:

Automated Metric Collection
Node Performance Enhancer
Intelligent CPU Profiling
Cost Calculator
Code Advisor

Sign up HERE to join the private beta and unlock the full potential of Adrian’s AI-driven insights and optimizations.

“Our AI Assistant is a major advancement to the AI features released in N|Solid last year,” noted Adrian Estrada, the VP of Engineering (and the naming inspiration for the assistant), which showcased how we could leverage the combination of our unique data insights from N|Solid, and the expertise from our team, to provide advanced solutions for our customers. With recent advancements in Generative AI, we can go significantly beyond our expectations to bring new value to our customers.”

NodeSource also has an exciting announcement for the developer community. In addition to the launch of Adrian, the company is open-sourcing its N|Solid Runtime, empowering all developers to utilize the best Node.js runtime available. This move aims to foster collaboration and innovation within the Node.js ecosystem, enabling developers worldwide to contribute to the ongoing advancement of Node.js technology.

“We strongly believe in the power of collaboration and open-source development,” added Trevor Norris, NodeSource’s Principal Architect. “By open-sourcing our runtime, we invite the community to join us in building a stronger, more efficient Node.js environment that benefits everyone. We are excited to see the positive impact this will have on the Node.js ecosystem as a whole.”

Big Announcements

The open-sourced version of N|Solid Runtime will be available with the release of Node 20 later this year.
NodeSource will also be offering a private beta program for Adrian. To sign up for early access and receive updates.

Look for more details at www.nodesource.com.

About NodeSource

NodeSource is a leading provider of Node.js application management solutions, like N|Solid, Node.js Support, and services, helping organizations successfully scale and secure their Node.js applications. Node Certified Modules (NCM) is a comprehensive tool that offers visibility, security, and governance for managing Node.js application dependencies. With its powerful features, NCM ensures that Node.js applications remain secure, reliable, and compliant with licensing requirements.

For media inquiries, please contact:
Brandi Duffy
– [email protected]

N|Solid v4.9.4 is now available

Posted on by

MPORTANT: This release of N|Solid v4.9.4 contains a Node.js security release!

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

General stability improvements and bug fixes
Node.js v16.20.1 (LTS): Includes a Node.js security release captured in Node.js v16.20.1 (LTS).
Node.js v18.16.1 (LTS): Includes a Node.js security release captured in Node.js v18.16.1 (LTS).

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

Changes

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

This release includes patches for these vulnerabilities:

CVE-2023-30581: mainModule.proto Bypass Experimental Policy Mechanism (High).
CVE-2023-30585: Privilege escalation via Malicious Registry Key manipulation during Node.js installer repair process (Medium).
CVE-2023-30588: Process interuption due to invalid Public Key information in x509 certificates (Medium).
CVE-2023-30589: HTTP Request Smuggling via Empty headers separated by CR (Medium).
CVE-2023-30590: DiffieHellman does not generate keys after setting a private key (Medium).

With the new action in N|Solid saved views, you can activate the tracing automatically when one or more processes cross over performance thresholds or match query parameters that you set.

N|Solid

N|Solid v4.9.4 Gallium ships with Node.js v16.20.1.
N|Solid v4.9.4 Hydrogen ships with Node.js v18.16.1.

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

Node.js

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]

AI & ML – Highlights Google I/O (Connect) – Miami

Posted on by

On May 24th, 2023, the inaugural edition of Google I/O Connect took place in Miami, USA. Google introduced this conference as an extension to engage directly with the technical community.

Note: Image courtesy of @KarolRojas90

The concept behind Google I/O Connect was to host distributed events in four different locations worldwide.

In Miami, the focus was bringing together Google Developer Experts (GDE) from North America (Canada and USA) and LATAM. Additionally, community leaders from GDG (Google Developers Groups) and Women Tech Makers, as well as contributors and collaborators, were allowed to participate. The event welcomed over 2,000 attendees and featured 51 outstanding speakers, who were Googlers responsible for delivering technical talks, workshops, and Office Hours.

Note: Image courtesy of @jcrtejada05

The event stood out for its impeccable organization, seamless execution, and strong commitment to ensuring that speakers and attendees had a remarkable experience.

What’s New in…

Without a doubt, they were the four verticals of the event:

Mobile
Web
clouds
AI

There were incredible advances that made us as developers excited to implement them into our products, but without a doubt, the one we most eagerly awaited was the __AI Lineup__.

Google AI’s Ubiquitous Influence: Reshaping Products Everywhere

Since 2017, Google has held a dominant position in artificial intelligence and modeling, particularly with NLP (Natural Language Processing). NLP is crucial in various applications, including machine translation, sentiment analysis, chatbots, and speech recognition.

However, history took an unforeseen turn with the monumental emergence of OpenAI and the project ChatGPT and the groundbreaking development of Stable Diffusion for generating images. These advancements have undeniably propelled these technologies into the public’s eyes.

Even though these concepts have already been worked on for some years, it is essential to understand the difference between AI and ML because in this same event, both in Keynote I/O and in Connect, they talk about advances in both.

Note: Sundar’s Image by The Verge – https://nsrc.io/TikTokVergeAI

AI is a powerful tool that can be used to improve the user experience, make products more efficient, and create new possibilities. Google is committed to using AI to make its products and services better for everyone. That’s why they announced integration into these products directly and more:

Android Studio Hedgehog: Android Studio Hedgehog uses AI to improve the development process for Android apps. For example, it can automatically generate code, suggest code changes, and identify potential bugs. This can help developers save time and create better apps.

Play Store: The Google Play Store uses AI to recommend apps and games to users based on their interests and past purchases. It also uses AI to surface new apps and games that users might be interested in. This can help users find the best apps and games for their needs.

Photos: Google Photos uses AI to organize, search, and edit photos. For example, it can automatically identify faces in photos and create collages and albums. It can also automatically improve the quality of photos. This can help users easily find and enjoy their photos.

Workspace: Google Workspace uses AI to improve the user experience for various tasks, such as writing emails, creating spreadsheets, and giving presentations. For example, it can suggest words while typing, automatically generate summaries of meetings, and translate documents into other languages. This can help users be more productive and efficient.

Maps: Google Maps uses AI to provide users with directions, traffic information, and other helpful information. For example, it can automatically suggest routes based on the user’s past driving habits and can provide real-time traffic updates. This can help users get around more easily and efficiently.

✨Generative AI

The main thing in all AI ads and product integrations comes from Generative AI, which, as its name says, is an artificial intelligence that can generate new content independently.

Check the Youtube Video HERE

Through Generative AI Studio, you can test and better understand the concept of Generative AI. A console tool for rapidly prototyping and testing generative AI models. You can test sample prompts, design your prompts, and customize foundation models to handle tasks that meet your application’s needs.

In Generative AI Studio, you can:

Test sample prompts.
Design your prompts.
Customize foundation models.
Convert between speech and text.

Try it HERE!

✨PaLM 2

PaLM 2, is a large language model (LLM) AI. It is a successor to PaLM, trained on a larger dataset and with a more robust architecture. This makes PaLM 2 better at a variety of tasks, including:

Natural language understanding: PaLM 2 can better understand the nuances of human language, such as idioms, sarcasm, and metaphors.
Generating text: PaLM 2 can generate more creative and realistic text, such as poems, stories, and code.
Answering questions: PaLM 2 can answer more complex and challenging questions, even if they are open-ended or strange.
Reasoning: PaLM 2 can better understand and reason about the world by making inferences and drawing conclusions.

PaLM 2 can implement Personal assistants, Educational tools, or Creative tools. But PaLM 2 is a series of models that includes the following:

Gecko, Otter, Bison, and Unicorn are four versions of PaLM 2, or Pathways Language Model 2. They differ in size, performance, and intended use cases.

Gecko is the smallest version of PaLM 2, with 1.2 billion parameters. It is designed to be lightweight and efficient, making it suitable for mobile devices and other resource-constrained environments.
Otter is a mid-sized version of PaLM 2, with 137 billion parameters. It balances size and performance well, making it suitable for various applications.
Bison is a large version of PaLM 2, with 540 billion parameters. It is the most potent version of PaLM 2, and it is designed for demanding tasks such as natural language understanding, generating text, and answering questions.
Unicorn is the giant version of PaLM 2, with 1.5 trillion parameters. It is still under development but is expected to be the most powerful LLM ever created.

Which version of PaLM 2 is correct for you depends on your specific needs. Gecko is a good choice if you are looking for a lightweight and efficient model for mobile devices. If you are looking for a model that is a good balance between size and performance, Otter is a good choice. Bison is a good choice if you are looking for a powerful model for demanding tasks. Unicorn is a good choice if you are looking for the most powerful LLM ever created.

But soon, Google will be in the release of a more sophisticated model called Gemini; What is coming is unimaginable if we count that in this project, the researchers from Google Brain and Google DeepMind come together.

At the moment, you can join the MakerSuite waitlist to experiment with the PaLM 2 API: https://makersuite.google.com/waitlist and read the API documentation: https://developers.generativeai.google /tutorials/setup

✨Bard – AI-Chatbot (http://bard.google.com) + 🎨 Bard + Adobe Firefly

Bard an impressive AI chatbot meticulously crafted by Google. As a sophisticated conversational AI, Bard is a large language model designed to be informative and comprehensive. Trained on an immense corpus of text data, Bard can communicate and generate human-like responses across various prompts and inquiries. Whether you seek factual summaries or immersive storytelling, Bard is primed to deliver. Bard is still under development but Is learning new things every day.

Adobe Firefly is a remarkable generative AI, harnessing the power to bring visual concepts to life based on textual descriptions. When paired with Bard, the possibilities for creativity and expression become boundless. This tool can create everything from marketing materials to personal projects. For example, you could use Bard to generate a text description of a product and then use Adobe Firefly to create an image of that product. Or, you could use Bard to generate a poem and then use Adobe Firefly to create an image representing the poem. The possibilities are endless.

Note: Please note that Bard + Adobe Firefly are still in beta, so there may be some bugs or limitations. Check the review of this amazing tool, HERE

As a delightful bonus, thanks to Bard, leveraging generated content between Gmail and Google Docs becomes effortless. Additionally, Colab’s growing relevance makes it an ideal platform for code-centric projects, ensuring enhanced productivity and collaboration.

Here are some of the benefits of these new developer features in Bard:

More precise code citations can help to build a more collaborative and respectful community of developers.
Exporting to Replit can make it easier for developers to collaborate on code and share their work with others.
A dark theme can make reading easier in low-light conditions and reduce eye strain.
Integration with various Google apps and services can make it easier for users to get things done.
Connection with external services and partners can offer users various possibilities.
Generative AI capabilities can help users to create unique visuals and automate data classification.

Vertex AI

Vertex AI is a managed machine learning (ML) platform that helps you build, deploy, and scale ML models faster and easier. It provides a unified experience for managing all aspects of the ML lifecycle, from data preparation to model training and deployment. Vertex AI also includes various tools and services that can help you improve the performance and accuracy of your ML models. It is built on the Google Cloud Platform and integrates with a wide variety of open-source ML frameworks, including TensorFlow, PyTorch, and scikit-learn. This integration allows you to use the tools and libraries you already know.
Try it here: https://cloud.google.com/vertex-ai/.

Project Tailwind

Project Tailwind is a new initiative focused on developing ways to use large language models (LLMs) to create more engaging and informative user experiences. One of the critical goals of Project Tailwind is to make it easier for developers to use LLMs in their applications. To do this, Project Tailwind is developing several tools and resources, including:

A new LLM framework is designed to be easy to use and scale to large datasets.
A new API that allows developers to interact with LLMs more naturally.
A new set of tools that help developers to debug and optimize their LLM applications.

Project Tailwind is an experimental project that still needs a public URL or GitHub repo. However, you can sign up for the waitlist to be notified when it becomes available. The waitlist is available here: https://tailwind.withgoogle.com/.

MediaPipe

Google’s partnership with MediaPipe is a significant step forward in the development of ML solutions. By providing modular and customizable solutions.

Project Gameface is an excellent example of the potential of ML. This project uses facial landmark detection to create a virtual avatar that can be used to play games. This is just one example of how ML can be used to improve our lives.

If you are looking to develop an ML application, check out MediaPipe.
You can use Mediapipe for Face detection, Hand tracking, or Object detection.

TensorFlow Overview: What’s New?

Here are some of the new features and improvements that were announced:

KerasCV and KerasNLP: These new APIs make building and training state-of-the-art models for computer vision and natural language processing tasks easier.

DTensor: This new library does training and scaling large models on distributed hardware easier.

JAX2TF: This new tool makes it easier to port models written with the JAX numerical library to TensorFlow.

TF Quantization API: This new API makes making TensorFlow models more efficient and cost-effective easier.

Web ML Hub: This new web-based platform makes building and deploying machine learning models in the browser easy.

To begin your exploration, visit https://ai.google/build/machine-learning/ and immerse yourself in a wealth of invaluable resources. This platform serves as your gateway to learning, providing a comprehensive collection of tools and insights that will empower you to apply machine learning to your projects.

Whether you are a beginner or an experienced practitioner, the knowledge and expertise shared on this platform will guide you through every step of your journey. Gain a deeper understanding of the underlying principles, familiarize yourself with cutting-edge tools, and access practical examples that showcase the technology in action.

Google I/O Connect

The Google I/O Connect event in Miami was a great success. It was a great opportunity to learn about the latest Google technologies, and it was also a chance to meet some of the leading experts in the field.

One of the event’s highlights was the chance to meet Dale Markowitz, a renowned figure in artificial intelligence. Markowitz is a Senior Research Scientist at Google AI and one of the leading experts on natural language processing. She was very generous with her time and happy to answer the attendees’ questions.

Google I/O Connect event allowed me to:

Learn about the latest Google technologies
Meet leading experts in the field
Get your questions answered by Google experts
Network with other developers
Get inspired and motivated to build great things

If you are a developer, I highly recommend attending a Google I/O Connect event. It is a great way to learn, grow, and connect with other developers. You can find upcoming events on the Google Developers events page or explore Google I/O Extended events near you to connect with the community.

Related Articles:

Google I/O 2023: Making AI more helpful for Everyone by Sundar – nsrc.io/45SJOqm
Google I/O Program, Codelabs, Workshops: https://io.google/2023/program/
Techcrunch – Google I/O 2023 is a wrap — here’s a list of everything announced – nsrc.io/43TA3Xr
Google I/O 2023 Highlights: Unveiling Google’s Latest Innovations and Improvements – https://nsrc.io/3WWF9zD
The Verge – Google I/O 2023: all the news from Google’s big developer event – nsrc.io/3MWHiqz
BusinessPost – 15 Exciting Highlights from Google I/O 2023 – nsrc.io/3NhF2eW

Bundle-time macros with Bun

Posted on by

#​641 — June 1, 2023

Read on the Web

JavaScript Weekly

JavaScript Macros in Bun — Not content with giving the JavaScript world a brand new bundler, Bun’s Jarred has taken it a bit further: ‘macros’ that run at bundle time with the result being directly inlined into your code. They use stage 3 annotated import statements (so may become regular JS eventually) and Jarred shows off some use cases here.

Jarred Sumner

▶  Discussing the Future of React with Two Core Team Members — As part of the celebrations around React’s 10th birthday, Vercel’s Delba de Oliveira interviewed Andrew Clark and Sebastian Markbåge of the React core team on modern topics including server components, Suspense, Actions, and the next steps React will take.

Delba de Oliveira (Vercel)

URL Validation 101 — with Snyk — Keep script injection and server side request forgery out of your JavaScript applications with Snyk.

Snyk sponsor

Aimless.js: The ‘Missing’ JavaScript Randomness Library — If you’ve been itching for functions to give you random characters, numbers from custom distributions, random sequences, random items, weighted random numbers, or more, this is for you.

Christopher Cavalea

⚡️ IN BRIEF:

???? Two big birthdays in the past week: Node.js turned 14 and React turned 10.

Intel and Google have been working together on the Compute Pressure API which you can use, in origin trial, in Chrome 115. It provides a way to measure the ‘computational strain’ of the system your code is running on to then adjust how your app operates accordingly.

???? Misko Hevery, creator of Angular and now Qwik, was on the Stack Overflow Podcast talking about ▶️ how he’s ‘dehydrating the Web’ in an ongoing quest for higher performance.

‘Deferring Module Evaluation’ is a TC39 proposal for basically being able to lazily load modules which are executed only upon use.

You can now use Node.js built-in modules on Deno Deploy, making it easier to run existing JS apps ‘at the edge’ on their platform.

Tom Preston-Werner, GitHub co-founder and Redwood co-creator, writes about how Redwood is going ‘all in on React Server Components’ and announces the first Redwood conference this September.

SupportsCSS: Feature Detection for Modern CSS — Inspired by Modernizr, this script expands on the capabilities of CSS’s @supports feature by adding classes to your HTML and exposing a results object so you can run custom tests live in the browser.

Stephanie Eckles

????  JSDayIE 2023: The First JavaScript Conference in Ireland Is Back! — Join us on September 26th in Dublin to experience everything the Irish JavaScript community and Ireland have to offer.

JSDayIE sponsor

RELEASES:

Electron 25 – Now offering a Chrome-powered net.fetch (as opposed to Node’s flavor of fetch()).

Neutralinojs 4.12 – Desktop app dev framework.

Parcel 2.9

Bootstrap 5.3.0

node-oracledb 6.0

???? Articles & Tutorials

How to Draw Any Regular Shape with Just One JavaScript Function — Mozilla/MDN has a (relatively) new blog — here they share how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes.

Ruth John

Sharing WebSocket Connections between Tabs and Windows — If your users open your app in multiple tabs or windows, being able to share a WebSocket connection could be a lot more efficient both at the client and server end. Is it possible? With SharedWorkers (supported by all major browsers, except Chrome on Android), you can.

Szymon Chmal

▶  How React Works Under The Hood: 2023 Edition — Quite a lot of depth for a mere 13-minutes. Covers React broadly, along with the pros and cons of JSX, how the virtual DOM approach works, plus React’s diffing algorithm.

FrontStart

Connected APM and Infrastructure Monitoring at Up to 1/3rd the Cost of Datadog

New Relic sponsor

Why Does a Farmer Emoji Have a Length of 7 in JS? — This is a nicely accessible introduction to a topic that often causes confusion. Get ready to learn a little about grapheme clusters, scalars, and code units.

Evan Hahn

The Evolution of React APIs and Code Reuse — An exploration of common React patterns, from mixins and higher-order components to render props & hooks.

Rem / Frontend Mastery

▶  ‘I Tried 8 Different Postgres ORMs’ — A modern, fast-paced, and slightly irreverent look at working with Postgres from back-end JavaScript runtimes. (9 minutes.)

Beyond Fireship

Automatically Unsubscribe from RxJS Observables in Angular Components

Rob Bell

Deploying Vanilla Node.js Apps on Fly.io

Sam Ruby (Fly)

Asynchronous JavaScript for Beginners

Daniel Agantem

???? Code & Tools

Svelvet: A Svelte Component Library for Interactive Node-Based Diagrams — You can create flow diagrams using pre-built components with seamless zooming and panning, draggable interactivity, customizable edges/nodes, etc.

Svelvet Team

Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind.

Alex Grozav

Handsontable: Data Editor for React — There’s a lot of JS data grids out there, but none quite like Handsontable: Excel-like design, keyboard shortcuts, and React support make it the perfect data editor for web apps.

Handsontable Data Grid sponsor

JECS: An Entity Component System (ECS) for JS — Entity component systems are common in game development as they provide a lot of flexibility for managing the many objects present in games.

Stuhl

Color Names: A Gigantic List of Handpicked Color Names — At first, I thought this was just going to be a hundred or so obvious choices like the named colors in HTML (???? rebeccapurple) but it’s actually over 30,000 colors with a fantastic array of names and uses, plus JavaScript functions to work with them.

David Aerne

fastgron: High-Performance JSON to GRON Converter — ‘gron’ is a transpiled form of JSON into individual assignment operations which makes it easier to grep. (fastgron is itself written in C++.)

Adam Ritter

Orama 1.0.3
↳ In-memory, typo-tolerant, text search engine.

Perspective 2.2
↳ WASM-powered high-perf data visualization component.

Javet 2.2 – Java + V8. Embed JS into Java.

OverlayScrollbars 2.2 – JS custom scrollbar plugin.

html-react-parser 4.0 – HTML to React parser.

Vuetify 3.3.2 – Vue component framework.

React Slider 10.2 – Demos.

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

????  Live-streaming from JavaScript

JSFiddle: Did You Know You Can Stream on Twitch from JavaScript? — This is an interesting experiment, but I tried it and it worked! Twitch added support for WebRTC ingestion a while ago and this CodePen example ties that together with fewer than 50 lines of JavaScript to send your preferred video source to the popular livestreaming service. It’s hardly OBS, but I imagine someone will rustle up something fancier with this approach in time.

Sean DuBois on JSFiddle

Microsoft shrunk the TypeScript

Posted on by

#​640 — May 25, 2023

Read on the Web

JavaScript Weekly

DeviceScript: TypeScript for Tiny Thingamabobs — DeviceScript is a new Microsoft effort to take the TypeScript experience to low-resource microcontroller-based devices. It’s compiled to a custom VM bytecode which can run in such constrained environments. (A bit like Go’s TinyGo.) It’s aimed at VS Code users but there’s a CLI option too.

Microsoft

The State of Node.js Performance in 2023 — Node 20 gets put through its paces against 18.16 and 16.20 with a few different benchmark suites running on an EC2 instance. It goes into a lot of depth that’s worth checking out, but if you haven’t got time, the conclusion is “Node 20 is faster.” Good.

Rafael Gonzaga

Lightning Fast JavaScript Data Grid Widget — Try a professional JS data grid component which lets you edit, sort, group and filter datasets with fantastic UX & performance. Includes a TreeGrid, API docs and lots of demos. Seamlessly integrates with React, Angular & Vue apps.

Bryntum Grid sponsor

Deno 1.34: Now deno compile Supports npm Packages — Deno isn’t Node, but it increasingly likes to wear a Node-shaped costume. This release focuses on npm and Node compatibility and Deno’s compile command (for turning projects into single binary executables) now supports npm packages too which opens up a lot of use cases.

The Deno Team

⚡️ IN BRIEF:

TC39’s Hemanth.HM shares some updates from TC39’s 96th meeting. Atomics.waitAsync, the /v flag for regexes, and a method to detect well formatted Unicode strings all move up to stage 4.

The Angular team shares the results of their annual developer survey. Over 12,000 Angular developers responded.

RELEASES:

Astro 2.5

Preact 10.15 – Fast 3KB React alternative.

TypeScript 5.1 RC

Electron 24.4

MapLibre GL JS v3 – WebGL-powered vector tile maps.

???? Articles & Tutorials

Demystifying Tupper’s Formula — Tupper’s self-referential formula is a formula that, when plotted, can represent itself. Confused? Luckily Eli shows us how simple the concept is and how to use JavaScript to render your own.

Eli Bendersky

An Introduction to Web Components — A practical and straightforward introduction to using the custom element API now supported in all major browsers to create a basic tabbed panel.

Mohamed Rasvi

▶  Creative Coding with p5.js in Visual Studio Code — p5.js is a ‘creative coding’ library that takes a lot of inspiration from Processing. Dan does a great job at showing it off and sharing his enthusiasm for it. The main content starts at about 8-minutes in.

Daniel Shiffman and Olivia Guzzardo

Auth. Built for Devs, by Devs — Easily add login, registration, SSO, MFA, user controls and more auth features to your app in any framework.

FusionAuth sponsor

▶  Why React is Here to Stay — A rebuttal of sorts to Adam Elmore’s video from two weeks ago: ▶️ I’m Done with React.

Joscha Neske

Comparing Three Ways of Processing Arrays Non-Destructively — for-of, .reduce(), and .flatMap() go up against each other.

Dr. Axel Rauschmayer

Build Your First JavaScript ChatGPT Plugin — Plugins provide a way to extend ChatGPT’s functionality.

Mark O’Neill

How I’ve Shifted My Angular App to a Standalone Components Approach

Kamil Konopka

???? Code & Tools

Javy 1.0: A JS to WebAssembly Toolchain — Originally built at Shopify, Java takes your JS code and runs it in a WASM-embedded runtime. It’s worth scanning the example to get a feel for the process. “We’re confident that the Javy CLI is in good enough shape for general use so we’re releasing it as v1.0.0.”

Bytecode Alliance

Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind.

Alex Grozav

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

BlockNote: A ‘Notion-Like’ Block-Based Text Editor — Flexible and presents an extensive API so you can integrate it with whatever you want to do. You can drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. Builds on top of ProseMirror and TipTap.

TypeCell

Windstatic: A Set of 170+ Components and Layouts Made with Tailwind and Alpine.js — Categorized under page sections, nav, and forms, and each category includes multiple components you can drop into projects.

Michael Andreuzza

ls-lint 2.0: A Fast File and Directory Name Linter — Written in Go but aimed at JS/front-end dev use cases, ls-lint provides a way to enforce rules for file naming and directory structures.

Lucas Löffel

Jest Puppeteer 9.0: Run Tests using Jest and Puppeteer — A Jest preset enabling end-to-end testing with Puppeteer.

Argos CI

ts-sql-query: Type-Safe SQL Query Builder — Want to build dynamic SQL queries in a type-safe way with TypeScript verifying queries? This is for you. Supports numerous SQL-based database systems and isn’t an ORM itself.

Juan Luis Paz Rojas

React Authentication, Simplified

Userfront sponsor

Hashids.js 2.3
↳ Generate YouTube-like IDs.

Tabulator 5.5
↳ Interactive table and data grid control.

gridstack.js 8.2
↳ Dashboard layout and creation library.

Cypress GitHub Action 5.8
↳ Action for running Cypress end-to-end tests.

ReacType 16.0
↳ Visual prototyping tool that exports React code.

Mongoose 7.2 – MongoDB modelling library.

Eta (η) 2.2 – Embedded JS template engine.

AVA 5.3 – Popular Node test runner.

MelonJS 15.3 – HTML5 game engine.

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

Fullstack Engineer at Everfund.com — Push code, change lives. Help us become the center for good causes on the modern web with our dev tools.

Everfund

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

???? Node.js developer? Check out the latest issue of Node Weekly, our sibling newsletter about all things Node.js — from tutorials and screencasts to news and releases. While we include some Node related items here in JavaScript Weekly, we save most of it for there.

→ Check out Node Weekly here.