Tag: Client Side

Douglas Crockford calls JavaScript ‘smelly.’

Posted on by

#​642 — June 8, 2023

Read on the Web

JavaScript Weekly

Polywasm: A Polyfill to Run WASM in JS Environments — The creator of esbuild is back with something fresh: a polyfill that uses live translation to be able to run .wasm files in JS environments that either lack a WebAssembly implementation or have it disabled. You can see how it performs in this special version of the esbuild playground.

Evan Wallace

Announcing TypeScript 5.1 — This release of the statically typed JavaScript superset is a gentle ‘quality of life’ step forward rather than a featureful extravaganza, but we get support for linked editing of JSX tag names, namespaced JSX attributes, the ability to have unrelated types for getters and setters, and undefined-returning functions no longer need an explicit return.

Daniel Rosenwasser (Microsoft)

How to Send Password Resets via SMS and Email Using Node.js & Next.js — When you’re building a web application, there’s a decision to make about how to handle users and authentication. There are many services and libraries to choose from, and the right choice will depend on the requirements of what you are building.

Courier.com sponsor

NakedJSX: Use JSX Without React — If you like JSX and would like to use it to help in the production of static HTML without using React itself, this command line tool is for you. It even extracts scoped CSS classes and deduplicates them.

David Hogan

Oh, you can also use NakedJSX to use JSX with jQuery, which you may either find useful or a fun way to troll your team, depending on how you roll. 😏

Dan Abramov Rebuilds React Server Components from Scratch — Having faced a raft of questions about Server Components, Dan has begun to write a series covering everything from the ground up by reimplementing a basic form of RSC from scratch. It’s not aimed at day-to-day React developers, but those who want to grok the ideas behind RSCs.

Dan Abramov

⚡️ IN BRIEF:

⭐️ Douglas Crockford, of JS: The Good Parts fame, ▶️ is back pointing out JavaScript is a ‘smelly’ language and ‘it’s time for the next thing.’ 😬

MDN’s reference pages on regular expressions in JavaScript have been substantially improved.

From Apple’s WWDC this week comes ▶️ a handy presentation on Safari’s DevTools, plus a barrage of news about Safari enhancements around the ‘spatial web’, JPEG XL support, the popover API, offscreen canvas support, local storage policies, extra JS regex features, and more.

Emma Twersky shares everything Angular related from the recent Google I/O 2023 event.

📘 Faraz K. Kelhini’s Text Processing with JavaScript is a new book, currently in beta with a final release due in August from Pragmatic Bookshelf. The table of contents shows it to be packed with useful stuff.

RELEASES:

Tesseract.js 4.1 – Pure JavaScript OCR.

BlockNote 0.8 – ‘Notion-style’ block-based editor.

Redwood 5.3 – React + GraphQL full stack framework.

TensorFlow.js 4.7 – ML in the browser.

Madge 6.1 – Create graphs of module dependencies.

📒 Articles & Tutorials

Why (and How) You Should Write Your WebAssembly in TypeScript — Performance is the main argument made by the author who shows off Wasmati, a library for creating WebAssembly modules by writing TypeScript using an API that corresponds to WASM operations. It works in modern browsers, Node, and Deno.

Gregor Mitscha-Baude

Backtick Strings are Likely the Wrong Tool for Your Job — It’s too common to try to put together query strings using JavaScript’s template strings, says Mattie, and this leads to potential injection problems. Luckily, there’s an alternative way..

Mattie Behrens

Dynaboard: AI Meets Low-Code to Get More Done, Faster — Build high performance authenticated web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Is React Having an ‘Angular.js Moment’? — The author puts forward an argument comparing the discontinuity from AngularJS to Angular 2 in 2014 with current shifts in the React ecosystem.

François Zaninotto

Painless WebGPU Programming with taichi.js — taichi.js is a GPU computing framework that transforms JavaScript functions into parallelizable WebGPU compute shaders. You can see a live demo here using the Game of Life.

Dunfan Lu

A Preview of Web Apps on macOS Sonoma 14 Beta — The next version of macOS will double down on the idea of well integrated, desktop-installable webapps. Here’s a dig around into how it works so far.

Thomas Steiner

Live Streaming with Multiple Hosts in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

The Many Ways to Select the n-th Character from a String

Christian Heilmann

Primitive Objects in JavaScript: When To Use Them

Kirill Myshkin

A Quick Primer on Node.js’s New Built-in Test Runner

endpts

🛠 Code & Tools

Algolia AutoComplete: A Fast, Full-Featured Autocomplete Library — This isn’t a UI widget – you’re in full control of rendering the experience – but this will let you wire up the experience you want users to have. There’s a getting started tutorial and a CodeSandbox demo where you can play around with some live code.

Algolia

Perfectionist 1.0: ESLint Plugin for Sorting Data — It supports sorting all sorts of things (props, imports, types..) and enforcing that with ESLint. It supports alphabetical and natural sorting, as well as by line length which leads to a neat aesthetic..

Azat S.

Comprehensive Full-Stack Application Monitoring Solution — A flexible application monitoring tool that doesn’t break the bank.

TelemetryHub sponsor

pgsql-ast-parser 11.1: A Simple SQL Parser — A TypeScript-based Postgres SQL syntax parser that can produce a typed AST for most queries (PL/pgSQL is not supported). It’s used as part of the author’s pg-mem project which provides a mini, ‘in memory’ Postgres clone in Node or the browser (here’s a live demo of that).

Olivier Guimbal

Goxygen 0.4: Quickly Generate a Go(lang) Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to spin it up. It’s been around a few years, but has now added Vue 3.3 support and a Vite-based Vue template.

Sasha Shpota

Noble Curves 1.1
↳ Audited elliptic curve cryptography library.

Taxi 1.3
↳ Add slick PJAX navigation to a site.

Inngest 2.0
↳ Build serverless job systems with TypeScript.

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

React Arborist 3.1
↳ Complete tree view component (demo).

Alova 2.6
↳ Request strategy library for Vue, React and Svelte.

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

🛠 Useful Thing of the Week

bundlejs: Online npm Package Bundle Size Checker — A browser-based tool that can treeshake, bundle, minify, and compress (gzip and brotli) packages to show you what their weight impact is. It runs entirely in the browser, too, using the WebAssembly build of esbuild.

Okiki Ojo

Measuring latency from the client side using Chrome DevTools and N|Solid

Posted on by

Almost every modern web browser includes a powerful suite of developer tools. In our previous blog-post we covered __How to Measure Node.js server response time with N|Solid__, read more ???? HERE.

The developer tools have a lot of capabilities, from inspecting the current HTML-CSS and Javascript code to inspecting the current ongoing network communication client-server.

To open the devtools and analyze the network, you can go to:

“More Tools” > “Developer Tools” > “Network”

Being on the devtools screen now, you can visit your Fastify API(or express) http://localhost:3000 after you get an HTTP response, you will see the request itself, the HTTP status code, the response size, and the response time.

GIF 1 – devtools.gif

An explanation for the time measured by the Chrome DevTools, HERE.

Let’s measure the Client-Side Latency.

Remove the delay timer logic on your application and restart the Node.js process.

import Fastify from “fastify”;

const fastify = Fastify({
logger: true,
});

// Declare the root route and delay the response randomly
fastify.get(“/”, async function (request, reply) {
return { delayTime: 0 };
});

// Run the server!
fastify.listen({ port: 3000 }, function (err, address) {
if (err) {
fastify.log.error(err);
process.exit(1);
}
});

NOTE: Discover another useful code snippet in our ‘Measure Node.js server response time with N|Solid’ article! This time, learn how to simulate server-side latency to further test your application’s performance. Check it out: ???? HERE

After this, you will get the fastest response times of ~1 ms, I was able to execute 139k requests in 10 secs using autocannon.

npx autocannon localhost:3000

The main point here is to see how it behaves when we have a poor internet connection on the client side and the best possible performance on the server side; for this, we can simulate high latency and slow internet connections on the client side, using Chrome devtools which has this option out of the box.

Simulate Client-Side latency

In the Chrome Devtools:

Go to the “Network Conditions” option > Select the option “Network Throttling” > Set it to __“Slow 3G”__.

If you request your browser to the URL http://localhost:3000/, you’ll see a long response time, in our case, __~2 seconds__.

This response time doesn’t mean the server takes that long to process the request and return an answer that was the amount of time that the answer took to transfer over the network till it arrived at the client side.

If you check your Fastify logs of the N|Solid metrics, you’ll see the server only took ~1 ms to return.

Check your logs with N|Solid
HERE

In our case, the response time was 0.3 ms

“responseTime”:0.3490520715713501

Can I improve/help the client-side latency?

Well, it is possible to improve the user experience on client-side devices with high latency when you use a Content Delivery Network to cache content on edge locations geographically near to users’ devices; even implementing some simple compression mechanism will improve the load times on users’ devices with high latency.

Look at this Jonas, our Principal OSS Engineer, blog-post and see ???????? __How to create a fast SSR application__.

Connect with NodeSource

If you have any questions, please contact us at [email protected] or through this form.

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities. Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

Experience the Benefits of N|Solid’s Integrated Features
Sign up for a Free Trial Today

JavaScript sans build systems?

Posted on by

#​626 — February 17, 2023

Read on the Web

JavaScript Weekly

Writing JavaScript Without a Build System — Using a variety of build tools for things like bundling and transpiling is reasonably standard in modern JavaScript development, but what if you want to keep things simple? For simple things, it’s not necessary, says Julia. This led to a lot of discussion on Hacker News.

Julia Evans

Ryan Dahl, Node.js Creator, Wants to Rebuild the Runtime of the Web — A neat bit of journalism about the alternative JavaScript runtime Deno and what Ryan Dahl is trying to achieve with it and how Ryan handled the stress of being known as the creator of Node.js.

Harry Spitzer / Sequoia

Broadcasting a Live Stream With Nothing but JavaScript — Live streams typically use third-party software to broadcast, but with Amazon Interactive Video Service, you can build a powerful, interactive broadcasting interface with the Web Broadcast SDK and JavaScript. Click here to learn more.

Amazon Web Services (AWS) sponsor

core-js’s Maintainer Complains Open Source Is ‘Broken’ — core-js is a popular universal polyfill for JavaScript features and its author has run into his fair share of bad luck which has culminated in this lengthy post on the state of the project, his issues in securing an income and, well, the downsides to living in Russia. The Register has tried to balance out the story.

The Register

IN BRIEF:

🐒 The just released Firefox 110 for Android now supports Tampermonkey, an extension for running JavaScript ‘userscripts’ on sites you visit.

The Angular project is taking steps to revamp its reactivity model to enable fine-grained change detection via signals.

The latest beta of iOS and iPadOS 16.4 supports the Web Push API for home screen webapps.

🐦 A fun Twitter thread where Qwik’s Miško Hevery attempted to demonstrate why a = 0-x is about 3-10x faster than a = -x before being told about a flaw in his benchmark. There is still a performance difference, though.

▶️ The React.js documentary we mentioned last week has now been released and it’s a heck of a watch – you’ll need 78 minutes of your time though.

RELEASES:

Node.js 19.6.1, 18.14.1, 16.19.1 and 14.21.3.

JavaScript Obfuscator 4.0 – Code scrambler.

Shoelace 2.1
↳ Framework agnostic Web components.

Mermaid 9.4
↳ Text to diagram generator. Now with timeline diagram support.

Cypress 12.6

📒 Articles & Tutorials

Use a MutationObserver to Handle DOM Nodes that Don’t Exist Yet — Comparing the effectiveness of the MutationObserver API with the conventional method of constantly checking for the creation of nodes.

Alex MacArthur

Well-Known Symbols in JavaScript — Hemanth, a TC39 delegate, shows off 14 symbols and where they can come in useful.

Hemanth HM

🚀 Monitor and Optimize Website Speed to Rank Higher in Google — Monitor Google’s Core Web Vitals and optimize performance using in-depth reports built for developers. Improve SEO & UX.

DebugBear sponsor

Why to Use Maps More and Objects Less — A journey down a performance rabbit hole.

Steve Sewell

Adopting React in the Early Days — A personal history lesson providing context around React’s evolution. While React might be an obvious, even safe, choice now, that wasn’t always true.

Sébastien Lorber

An Animated Flythrough with Theatre.js and React Three Fiber — How to fly through a 3D scene using the Theatre.js JavaScript animation library and the React Three Fiber 3D renderer. This is the sort of thing that used to be Very Difficult™ but is now relatively trivial.

Andrew Prifer (Codrops)

How to Change the Tab Bar Color Dynamically with JavaScript

Amit Merchant

Is Deno Ready for Primetime? One Dev’s Opinion

Max Countryman

Using Playwright to Monitor Third-Party Resources That Could Impact User Experience

Stefan Judis

🛠 Code & Tools

Dependency Cruiser: Validate and Visualize JavaScript Dependencies — If you want a look at the output, there’s a whole page of graphs for popular, real world projects including Chalk, Yarn, and React.

Sander Verweij

Devalue: Like JSON.stringify, But.. — “Gets the job done when JSON.stringify can’t.” Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.

Rich Harris

🧡 JavaScript Scratchpad for VS Code (2m+ Downloads) — Get Quokka.js ‘Community’ for free: #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

NodeGUI: Build Native Cross-Platform Desktop Apps with Node.js — Unlike Electron which leans upon webviews and HTML, NodeGui uses a Qt based approach. This week’s 0.58.0 release is the first stable release based on Qt 6 and offering high DPI support.

NodeGui

DOMPurify 3.0: Fast, Tolerant XSS Sanitizer for HTML and SVG — A project that’s nine years old today but still actively developed. Supports all modern browsers (IE support was only just dropped) and is heavily tested. There’s a live demo here.

Cure53

Pythagora: Generate Express Integration Tests by Recording Activity — This is a neat idea still in its early stages. Add a line of code after setting up an Express.js app and this will capture app usage and generate integration tests based on the interactions. (▶️ Screencast demo.)

zvone187 and LeonOstrez

Try Stream’s Free Trial of SDKs for In-App Chat

Stream sponsor

grep.app: Search Code Across a Half Million GitHub Repos — A code search engine that lets you use regexes or syntax in your search. Considering what it is, it’s pretty fast and has an extensive index (over half a million public repos from GitHub, allegedly).

grep.app

tsParticles: Particles, Confetti and Fireworks for Your Pages — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support.

Matteo Bruni

💻 Jobs

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.

Stimulus

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

QUICK RELEASES:

Minimatch 6.2
↳ Glob matcher library, as used in npm.
    minimatch(“bar.foo”, “*.foo”)

React Accordion 1.2
↳ Unstyled WAI-ARIA-compliant accordion library.

ScrollTrigger 1.0.6
↳ Have your page react to scroll changes.

VeeValidate 4.7.4
↳ Popular Vue.js form library

Express Admin 2.0
↳ Admin interface for data in MySQL/Postgres/SQLite.

Execa 7.0
↳ Improved process execution from Node.js.

React Tooltip 5.8

Java-Script Jarre

Posted on by Simon Helberg

#​621 — January 13, 2023

Read on the Web

JavaScript Weekly

The State of JS 2022 — The State of JS is one of the JavaScript ecosystem’s most popular surveys and this time 39,471 folks took part giving us a snapshot of the tools, technologies, and language features people are using (or not using!) There’s a lot to go through, but here are some key points:

top-level await is the most newly adopted feature recently.
The JavaScript / TypeScript balance shows a majority of developers using TypeScript over JS.
Express remains by far the most popular backend framework with Nest, Fastify, Strapi, and Koa following somewhat behind.
Other interesting results can be found in JS pain points, what is currently missing from JS, and the ‘Awards’ for stand out items (complete with snazzy visual effects).

Devographics

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

🗣 Is TypeScript Worth It? — Time saver or waste of time? The relationship between TypeScript and JavaScript remains a complex one. An extensive discussion took place on Hacker News this week and, notably, TypeScript PM Daniel Rosenwasser popped up to respond to some of the concerns.

Hacker News

IN BRIEF:

You’ll be aware of JavaScript’s strict mode but one developer thinks we need a stricter mode to fix several other syntax issues.

Publint is an online tool for ‘linting’ live npm packages to see if they are packaged correctly, as a way to ensure maximum compatibility across environments.

RELEASES:

Node v19.4.0 and v18.13.0 (LTS)

Commander.js 9.5
↳ Node.js command-line interface toolkit.

Angular 15.1

Pixi.js 7.1 – Fast 2D on WebGL engine.

📒 Articles & Tutorials

The Gotcha of Unhandled Promise Rejections — A rough edge with promises that can sneak up on you. Jake looks at a ‘gotcha’ around unhandled promise rejections and how to work around it.

Jake Archibald

HTML with Superpowers: The Guidebook — A free resource introducing Web Components, what they are, and what problems they’re trying to solve. You can see the Guidebook directly here.

Dave Rupert

With Retool You Ship Apps Fast with 100+ Perfectly Crafted UI Components — The fast way for devs to build and share internal tools. Teams at companies like Amazon, DoorDash & NBC collaborate around custom-built Retool apps to solve internal workflows.

Retool sponsor

Everything About React’s ‘Concurrent Mode’ Features — An in-depth, example-led exploration of Concurrent Mode (now more a set of features integrated into React 18 than a distinct ‘mode’).

Henrique Yuji

Using GitHub Copilot for Unit Testing? — Even if you find the idea of a AI tool like Copilot writing production code distasteful, it may have a place in speeding up writing tests.

Ianis Triandafilov

How to Destructure Props in Vue (Composition API) — How to correctly destructure props object in a Vue component while maintaining the reactivity.

Dmitri Pavlutin

Using Inline JavaScript Modules to Prevent CSS Blockage

Stoyan Stefanov

How to Build a GraphQL Server with Deno

Andy Jiang

🛠 Code & Tools

Gluon: Framework for Creating Desktop Apps from Sites — A new approach for building desktop apps on Windows and Linux from Web sites using Node (or Deno) and already installed browsers (Chromium or Firefox). Initial macOS support has just been added too.

Gluon

Structura.js: Lightweight Library for Immutable State Management — ” It is based on the idea of structural sharing. The library is very similar to Immer.js, but it has some advantages over it.”

Giuseppe Raso

Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers — High-resolution, crystal-clear screen sharing, low-latency remote control, and less CPU usage than you’d think possible.

Tuple sponsor

Bay.js: A Lightweight Library for Web Components — Makes it easy to create web components that can be reused across projects. It also boasts performant state changes and secure event binding.

Ian Dunkerley

Twify: Scaffold a Tailwind CSS Project with a Single Command — You can use your preferred package manager and it supports creating projects with Next.js, Nuxt 2/3, SvelteKit, Remix, Angular, and more.

Kazi Ahmed

Lazy Brush 2.0: A Library for Smooth Pointer Drawing — Allow your users to draw smooth curves and straight lines with your mouse, finger or any pointing device. This long standing library has just migrated to TypeScript and gained a new ‘friction’ option to customize the feel. GitHub repo.

Jan Hug

➗ Mafs: React Components for Interactive Math — Build interactive, animated visualizations using declarative code with illustrative demos like bezier curves. The documentation is fantastic – check out how easy it is to make plots. Or just head to the GitHub repo.

Steven Petryk

Are You Looking for a New Observability Tool?

TelemetryHub by Scout sponsor

Hyphenopoly 5.0: A Polyfill for Client-Side Hyphenation — An interesting use of WebAssembly here.

Mathias Nater

visx 3.0
↳ D3-powered visualization React components.

Atrament 3.0
↳ Library for drawing and handwriting on a canvas element.

HLS.js 1.3
↳ Library to play HLS (HTTP Live Streaming) in browsers, with MSE support.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Backend Engineer, TypeScript (Berlin / Remote) — Thousands of people love our product (see Trustpilot for yourself). Join the team behind it and help us scale. 🚀

Feather

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

🎶 Écoute la musique..

Oxygene Pt 4, as Performed by JavaScript — This is fun. Dittytoy is a simple, JavaScript-powered online generative music tool and someone has put together a surprisingly faithful rendition of perhaps one of the best known instrumental synth songs ever, all the way from 1976.

Dittytoy