Hope you had a great week! It’s been wonderfully warm out here in California, and I am loving it.

This week, by far the most fascinating article to me is the headliner in ‘Other Awesome’, with Firefox using WebAssembly for a purpose I never would have imagined. It gives some hints of how powerful and wide-reaching of a paradigm shift WASM is going to create, and I love it. Many other good things as well, but boy, that one takes the cake.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Block Links, Cards, Clickable Regions, Etc.

I’m not sure if I was just being dense or if this article is poorly structured, but it took me a long time to understand exactly what was being shown. That said, the techniques demonstrated are super useful, so I want to highlight here. The author demonstrates multiple different ways to achieve the same mouse-focused UI, and then provides recordings of how they are treated differently by screen readers.


Responsive Grid Magazine Layout in Just 20 Lines of CSS

Not only is the final solution super slick, but I love the way this article walks through the thought process from design all the way to outcome. Very cool!


Create Diagonal Layouts Like It's 2020

Super fun walkthrough of how to create diagonal backgrounds without having to worry about how your content will lay out within them.


Fixed Headers and Jump Links? The Solution is scroll-margin-top

OMG this is amazing. It reminds me of the first time I saw flexbox and was like “wow, this just instantly solves problems I’ve been hacking around for years”. In this case, it’s a bit smaller and more particular, but this new piece of CSS solves a problem I’ve hacked around probably a dozen times - offsetting scroll positions of internal anchors when you have a fixed header. And it’s usable on all major browsers (so long as you can ditch/specialcase IE 11).


“CSS4” Update

A couple weeks back I highlighted the ongoing discussion in the community about if it’s worth having a “CSS4” line in the sand, similar to how JavaScript publishes a new standard each year. If you’re interested in what’s continuing to happen in that discussion, this is a solid summary that pulls the pieces together to give an overview, with links out to more details.


JavaScript

4 Best Practices To Write Quality JavaScript Modules

I agree with all of these practices, though some of them I had to learn by pain. In particular, I used to use default exports a lot because it felt simpler/cleaner, but oh boy can it set you up for a world of maintenance pain down the road. Named exports are the way to go.


Fixing memory leaks in web applications

Great article. As it points out, memory leaks are a huge class of problems that web developers “didn’t have to worry about” in the pre-SPA days, because every time you loaded a new page your memory would all get cleaned up. In today’s world with long-lived applications that never refresh the page, this is 100% a problem, and the tools highlighted here are critical.


TypeScript is more than you think

Super interesting look at the expressivity of the type system of TypeScript. Introduces the concept of the “TypeScript type system (TSts)”  as its own (compile-time evaluated) language, and walks through its capabilities evaluating it as a programming language.


Using WebAssembly in Ember.js (Rust + wasm-pack)

I like this because it shows just how easy it is to embed wasm in a JavaScript application. Using wasm-pack lets you export to a module, and once you have that module using webpack (in this case by way of <code>ember-auto-import</code>) you can just import as you would any other module. So simple!


Octane moves Ember to an HTML-first approach (audio)

(Bias alert - I’m in this podcast episode) If the previous article peaked your interest in Ember at all, or if you’re generally curious about this framework that has low adoption but keeps driving innovations across the ecosystem, we recently recorded this podcast episode diving deep into what the framework is, what makes it unique, and where it is going. While this is an audio, there is a transcript available as well.


Other Awesomeness

Securing Firefox with WebAssembly

This is utterly fascinating. Firefox is using the security characteristics of WebAssembly (particularly the extremely powerful sandboxing) to improve how it secures it’s own internal pieces. They’re using a new tool that lets them compiles C++ components into WebAssembly and provides an interface layer between code calling those components and the rest of the app, effectively sandboxing the components. Even more interesting, they then *recompile* down from WebAssembly to native machine code, reaping some performance benefits along the way.


When CSS Blocks

Super interesting look at how patterns intended to improve time to interactive can backfire and slow down your website’s load time. In particular, if you’re using preload tricks with CSS to try to speed things up, definitely read this to see how they can backfire and how to prevent backfire. And if you’re not aware of such tricks, this article will still be interesting to give you some ideas for how you can optimize your site.


Productive Tools🚀 For Web Development😎

Great collection of useful tools for front-end developers. I particularly love the proliferation of available vector art. Some wonderful resources in here that I hadn’t seen before.


10 Useful Web APIs for 2020

A fun look at a number of modern browser APIs, complete with code examples for each. You’ve probably already heard of some of these (e.g. the ResizeObserver API) but I’d be very surprised if you don’t learn something new in this article. I sure did.


GraphQL Optimization - Lookaheads

A look at one of the techniques you can use to optimize the performance of a GraphQL server. As I’ve been more and more exposed to GraphQL at work I’ve increasingly realized that the naive “GraphQL makes things simpler and faster” concept that sometimes happens in the frontend is wrong. GraphQL moves your performance and complexity challenges into a new layer in the system. This can be a big win, but it necessitates its own layers of expertise and optimization.