Using plain old JavaScript objects to manage data gets old very quickly. It’s error-prone, tricky to track changes efficiently, and easy to mistakenly incur performance costs.

TinyBase is a smarter way to structure your application state:

Read More
Nov 26, 2021

A while ago, I was curious how the speed of document.getElementById compared to document.querySelector in Javascript for selecting a single element by ID. querySelector has to do a lot more work, so one would expect that it would be slower, but I didn’t know if the difference was enough to care about.

I wrote a little benchmark to test this. You can run it by clicking

. This creates 100,000 elements, and then selects them all in a loop. It does this 105 times, and ignores the first 5 results (to avoid caching effects). It then plots a historgram of the average time per function call (in milliseconds) for each run. There is a template string used in the loop that I’m testing, so the exact numbers are slightly inflated, but in a way that is consistent across both functions.

Read More
Nov 17, 2021

The npm registry is central to all JavaScript development, and, as stewards of the registry, ensuring its security is a responsibility GitHub takes seriously. Transparency is key in maintaining the trust of our community. Today, we are sharing details of recent incidents on the npm registry, the details of our investigations, and how we’re continuing to invest in the security of npm. These investments include the requirement of two-factor authentication (2FA) during authentication for maintainers and admins of popular packages on npm, starting with a cohort of top packages in the first quarter of 2022. Read on to learn more.

Read More
Nov 16, 2021

I’ve been writing more frontend code in the last year or two – I’ve been making a bunch of little Vue projects. (for example nginx playground, sql playground, this dns lookup tool, and a couple of others)

My general approach to frontend development has been pretty “pretend it’s 2005” – I usually have an index.html file, a script.js file, and then I do a <script src=“script.js”> and that’s it. You can see an example of that approach here.

This has been working mostly ok for me, but sometimes I run into problems. So I wanted to talk about one of those problems, a solution I found (esbuild!), and what I needed to learn to solve the problem (some very basic facts about how npm builds work).

Some of the facts in this post might be wrong because still I don’t understand Javascript build systems that well.

Read More
Aug 28, 2021

A friend of mine recently pointed me at a well hidden command line tool. In the JavaScript framework used by Safari and other parts of Apple’s products, there is a tool called jsc. It’s a command line interface for JavaScript that uses the same code as the rest of the system.

You can find the binary at /System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Helpers/jsc. That path is unwieldy, so I have an alias set up that lets my just type jsc in the Terminal.

So what can you do with jsc? Pretty much anything you can do with JavaScript in a browser with the caveat that there aren’t document and window instances.

Read More
Aug 27, 2021

Taking a closer look at lodash’s chain, how it differs from using the native map, reduce and filter methods of Array.

Aug 23, 2021

Deno embraces modern web APIs. When capabilities are added to the runtime, the preference is in the form of a browser API. This benefits developers because they are already familar with these APIs, and it benefits Deno because already existing tests can be leveraged.

Web APIs have a huge amount of documentation. Searching for “fetch javascript” turns up hundreds of millions of results. The best source of web platform documentation is MDN. MDN contains ~11k pages of documentation, guides, and tutorials, maintained by the community and staff from Google, Mozilla, and Open Web Docs.

MDN also maintains runtime compatibility data for web APIs. This data is displayed on MDN documentation pages in form of a compatibility chart. As of today, Deno compatibility data is also available in these charts. Compatibility data is available for all JavaScript reference pages (e.g. Array and WebAssembly.LinkError) and many web API reference pages (such as fetch and setTimeout).

Read More
Aug 13, 2021

So despite how promising this all is, what a real leap forward ES6 everywhere, ubiquitous HTTP2, and import maps combine to present, there’s clearly still a class of applications that’ll need Webpack (and Webpacker). At least for now. And that’s fine. We’re moving forward by taking things out. Not everyone can take these things out yet, but those who can will be mightily pleased.

Unless new evidence comes to bear that refutes the basic tenets of this analysis, Rails 7.0 will aim to give you a default setup based on import maps, and leave the Webpacker approach as an optional alternative.

We’re way overdue a correction back to simplicity for the frontend. ES6/HTTP2/Import maps looks like they’ll deliver just that. Yay hurray!

Read More

The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling.

Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats the sheep. If we don’t want our sheep to be eaten, we need better tools.

As of today, npm audit is a stain on the entire npm ecosystem. The best time to fix it was before rolling it out as a default. The next best time to fix it is now.

Jul 6, 2021

It is actually pretty easy to build a mediocre headless React today.

react-reconciler is an official package that lets you hook up React to anything already. That’s how both React-DOM and React-Native share a run-time.

Most third-party libraries that use it (like react-three-fiber) follow the same approach. They are basically fully wrapped affairs: each notable Three.js object (mesh, geometry, material, light, …) will tend to have a matching node in the React tree. Three.js has its own scene tree, like the browser has a DOM, so react-reconciler will sync up the two trees one-to-one.

The libraries need to do this, because the target is a retained in-memory model. It must be mutated in-place, and then re-drawn. But what would it look like to target an imperative API directly, like say 2D Canvas?

Read More
Jul 3, 2021

In JavaScript functions, which return wins?

function test() {
  return ‘one’;
  return ‘two’;
  return ‘three’;
}

You might say, “well it’s the first one”, but I’m going to try and convince you it’s the last one.

Don’t worry, the function above definitely returns ‘one’, but in this case the first return statement prevents the others from executing. The last return is return ‘one’, and that’s the one that wins. Sure, it’s also the first return, but I’m still right. [folds arms and looks smug]

I know what you’re thinking, you’re thinking “shut up jake”, but bear with me…

Read More
Jul 3, 2021

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a server framework.

  • Only ~5.7kb

  • DOM-based, mutates in place

  • Driven by @vue/reactivity

Date, JavaScript’s current date time API is infamously difficult to use. The ECMAScript proposal “Temporal” is a new and better date time API and currently at stage 3. It was created by Philipp Dunkel, Maggie Johnson-Pint, Matt Johnson-Pint, Brian Terlson, Shane Carr, Ujjwal Sharma, Philip Chimento, Jason Williams, and Justin Grant.

This blog post has two goals:

  • Giving you a feeling for how Temporal works

  • Helping you get started with it

However, it is not an exhaustive documentation: For many details, you will have to consult the (excellent) documentation for Temporal.

Read More
Jun 28, 2021

JavaScript is a great programming language, but thanks to the fact that its initial release was built in only ten days back in 1995, coupled with the fact that JS is backward-compatible, it’s also a bit weird. It doesn’t always behave the way you might think. In this quiz, you’ll be shown 25 quirky expressions and will have to guess the output. Even if you’re a JS developer, most of this syntax is probably, and hopefully, not something you use in your daily life.

Jun 10, 2021

This book dives deeply into JavaScript:

  • It teaches practical techniques for using the language better.

  • It teaches how the language works and why. What it teaches is firmly grounded in the ECMAScript specification (which the book explains and refers to).

  • It covers only the language (ignoring platform-specific features such as browser APIs) but not exhaustively. Instead, it focuses on a selection of important topics.

Jun 8, 2021

Your complaints of x == y behaviors being weird, buggy, or downright broken have all blamed == as the culprit. No, it’s really not. == is pretty helpful, actually.

The problems you’re having are not with the == operator itself, but with the underlying values and how they coerce to different types, especially in the weird corner cases.

Instead of fixing your problems by avoiding == (and always using ===), we should focus our efforts on either avoiding—or fixing!—the corner case value coercions. Indeed, those are where all the WTFs really come from.

Read More
May 28, 2021

Since its inception in 2013, React has rolled out a robust set of tools to help relieve developers of some of the minutiae of creating web applications and allow them to focus on what matters.

Despite React’s many features and consistent popularity among developers, however, I have found time and again that many of us ask the same question: How do we handle complex state using React?

In this article we’ll investigate what state is, how we can organize it, and different patterns to employ as the complexity of our applications grow.

Read More
May 26, 2021

“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.

Javascript

Share and discuss the Javascript programming language.

Created on Oct 23, 2020
By @root