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

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

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

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.

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

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

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

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.

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.

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

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

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

We’ve been incredibly impressed and inspired by https://ciechanow.ski/cameras-and-lenses/ by Bartosz Ciechanowski. He did such an incredible job. And it appears he did it all with raw javascript. Javascript is very freeing once you decide to ignore any kind of build system or awful library. And some of the features of modern javascript are rather nice https://javascript.info/.

We had very grandiose plans, but we’ve gotten bogged down, so I’ve decided to dump out a post of what we have as a checkpoint. It’s nice to know when to give up.

The code for all of these is here https://github.com/Smung-Institute/infinite-darkness

To start we made a ray of light bounce off a mirror controlled by a slider. https://github.com/Smung-Institute/infinite-darkness/blob/master/mirror.html This was built unsytematically as a one off..

Read More

Recently, I started a new role as a Software Engineer at Reify Health. Unlike any other role that I have had, a huge part of our product stack is written in Clojure and ClojureScript. Thankfully, I have spent my last few years as a JS/TS dev working with React and as a result, have employed and appreciated a very functional style. ClojureScript has unlocked whole new levels of productivity in JavaScript and React. Particularly, it has shut the door on patterns that are pain points and allowed for new paradigms that JavaScript did not elegantly allow one to express.

Read More

Share and discuss the Javascript programming language.

Created on Oct 23, 2020
By @root