Drop #144 (2022-11-28): Next-Level JavaScript & CSS

Arc Invites; Threlte; Rome; SmolCSS

I trust readers in the Colonies have successfully recovered from their annual attempt at tryptophan overdosing, and that the rest of you are gargling with some warm salt water, daily, to ensure you can still yell “GOOOOAAALLLL!!!” (or some profanity) at whatever glowing rectangles you're viewing ⚽️ on without rupturing your vocal cords.

The tagline for today's drop is a tad hyperbolic, but I think you'll agree these resources will be good company in 2023.

(Programming note: I'm trying to figure out what to link to when dropping author names in the sections, since I'm no longer comfortable promoting Twitter links. Drop a note in the comments if you have some ideas.

I will also stop the posting these drop announcements to Twitter at the end of November. Look for them at @hrbrmstr@mastodon.social until I can figure out a better way to ActivityPub these things.)

Arc Invites

Photo by Andy Li on Unsplash

This has nothing to do with today’s topics (apart from you needing a browser to see creations made in them).

I have five (5) new invites available for Arc! If you want one, hit me up in any of the following (in order of what I’ll be checking): Comments on this post; 🐘; Post-dot-news (prbly ditching that platform, tho); E-mail; Smoke-signals; Twitter

Threlte

Photo by DeepMind on Unsplash

I keep meaning to do a few projects in Svelte, which, self-described, is

“a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.”

If you've ever been in a situation where you have to constantly slide your mouse or trackpad through a scrollytelling piece, chances are you've encountered a Svelte app. It's (still) all the rage in data-driven storytelling land, and I'm a bit behind the curve. (NOTE: Svelte is for way more than scrollytelling, but that'd be the way I use it).

Well, I was just “a bit” behind, until I discovered Threlte, which is “a renderer and component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps.” You've most certainly encountered Three.js, especially if you've been following (shameless plug) my entries for this year's 30-Day Map Challenge.

So, not only do I “need” to learn Svelte, I also “need” to learn 3D-enhanced Svelte. Just a brief look at the basic examples shows how expressive-yet-succinct this framework is.

What convinced me of this “need”? A post on rendering scatterplots in Threlte by Jan Aerts. NOTE: These are not 3D scatterplots! Just plain, ol', 2D. HTML Canvas and SVG elements are great for data visualizations with small-to-middling number of elements to render and keep track of. Three.js (and, hence, Threlte) relies on WebGL for rendering, making graphics chips do the hard work. I'm not sure if you've noticed, but we keep adding more data into the world at a frightening pace, and many of us have plenty of points/objects to render. While there are non-WebGL workarounds, it's way better to have the power to display what you require in the way you want it rendered.

If you haven't hit any of the above links, yet, I suggest starting with Jan's very accessible blog post and working your way back.

Rome

Photo by Carlos Ibáñez on Unsplash

Must. Not. Use. The. Obvious. “Built-in a…”. Joke.

Toolchains come; and, toolchains go. JavaScript land is awash in them, but when the creator of Babel and Yarn sets their mind to assemble a team to build a killer, modern, complete toolchain, one should take notice — especially if they're doing it in Rust.

We'll let them explain:

Rome is a monolithic runtime-agnostic multi-language toolchain built from the ground up. It is a dependency-free formatter, linter, and in the future: compiler, bundler, test runner, and more. Its monolithic architecture unlocks a new developer experience that is difficult to achieve with a many-tool development stack:

• Avoid unnecessary work: Formatting your files with Prettier and linting them with ESLint means that both tools spend significant time traversing directories and parsing. Rome is fast because it never does the same work twice. It goes as far as to avoid parsing a file when bundling if it already linted the file in the editor.

• Reduce repetition: Rome uses a single configuration for all tools to reduce the number of configuration files in your project and avoid repetition. You shouldn’t have to install the React plugins and configure React support for ESLint and webpack. All it should take is to change a single configuration to enable the React lint rules, the React JSX transpilation, and FastRefresh support.

• Learn once: Many-tool development stacks suffer that engineers must interact with each tool, having to learn and remember the command names, configuration schemas, CLI arguments, and diagnostics formats. This is a lot to remember. It is why Rome is a single binary with standardized CLI arguments and diagnostics, so you only have to learn it once.

• Remove entry barriers: Advanced analysis and checks, like analyzing the size of a bundle or bundle size budgeting, often require additional tools and lack editor or linter integration. This added complexity is an entry barrier for many. It prevents teams from using the information or automating checks in their CI pipeline. Rome’s editor-first design and end-to-end architecture significantly lower the barrier by bringing the information into your editor or exposing it to lint rules that can run as part of your CI.

For the low, low price of $0.00 USD you get (now) a modern, fast formatter and linter, followed by a compiler, bundler, and testing components by mid-2023; because, like its namesake, Rome can't be buil…NO. NOT. HAPPENING. ON. MY. WATCH.

This recent blog post is a great 'splainer, and if you've been looking for a new JS toolchain, Rome may be something to consider in the not-too-distant-future.

SmolCSS

Photo by Kelly Sikkema on Unsplash

I save everything. I have a multi-year history of things I've typed into browser location bars, from URLs to search engine terms. I could tell you how many times I've asked some search DEITY to show me the answer for “center $THING in div”, but it's just too sad a number. In my defense, I rarely engage in daily, raw HTML/CSS machinations, and I am a child of the <TABLE> era (yes, HTML entities in ALL CAPS, back then, too, sigh).

I keep snippets for R, Rust, Smalltalk, JavaScript/Observable, and more, but never bothered to do the same for CSS. Thankfully, I now just need to keep SmolCSS bookmarked because Stephanie Eckles has done all the hard work of curating minimal snippets for modern CSS layouts and components. The current, short-list of entries includes:

• Responsive CSS Grid

• Responsive Flexbox Grid

• Modern Centering

• Intrinsic Container

• Responsive Sidebar Layout

• Responsive Padding

• Aspect Ratio Gallery

• Composable Card Component

• Stack Layout

• Background Picture

• Avatar List Component

• Transitions

• Scroll Snap

• Article Anchors

• List Markers

• Document Styles

• Visited Styles

• Flexible Unbreakable Boxes

• Focus Styles

and they're all effortless to use immediately.

Oh, and, for the record, this is all you need to do for that centering thing:

.smol-centering {
  display: grid;
  place-content: center;
}

FIN

Photo by Lucas Hoang on Unsplash

November 26, 2022 marked the 100th 🎂 for the creator of Peanuts (well, provided C.S. was still pining for the fjords vs having passed on).

Syndicated cartoonists across the country paid tribute this past Saturday, making Schulz the only cartoonist ever to receive this honor. ☮