Hope you had an amazing last full week of March! We’re getting well on into spring now. I’ve got a whole slew of interesting vanilla JavaScript (or ESNext which is the “new vanilla”) articles for you this week. I particularly enjoyed the recreation of RxJS with vanilla code.

There’s also a bunch of great CSS articles, a couple good performance focused pieces, and an ode to simplicity.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Blurred Borders in CSS

Very cool article exploring how to create blurred/frosted borders on an image. A great use of the :before pseudoelement, along with some fun properties like clip-path and background-clip.


Things nobody ever taught me about CSS.

A set of relatively basic and yet still often overlooked concepts about CSS. Worth a read through. If you’ve done a lot of CSS you may be just nodding and saying “yeah I know”, but if even one of these has slipped your radar learning about it will be very helpful.


Finally, a CSS only solution to :hover on touchscreens

I was fighting this problem just the other day - dealing with :hover styles and interactions when working with touch devices is just a complete nightmare. This article talks through a new specification that should help.


Cool uses of the :before and :after pseudoelements

(Bias alert - I wrote this post). A look at some of the amazing things possible by using the :before and :after pseudoelements. Doesn’t go into super deep depth, more focused on showing interesting examples and linking off to more in-depth articles for those who want to go deeper.


Flexulator

This is a super cool project for playing around with and getting a visual understanding of what happens with flexbox properties. You can add and take away elements, manipulate each of their flex settings, and see things adjust right in front of your eyes. Very neat!


JavaScript

A Homepage for the JavaScript Specification

This is a great step that is long overdue! With JavaScript continuing to evolve, developers everywhere have been trying to keep up with what is going on, but there has been no good central resource for following it. There were a set of github repos, and occasional writeups by folks in TC39. But now there’s a centralized website! This article details the thinking that went into it, and here is the website itself.


How to Remove Duplicates from an Array in JavaScript

Nice article walking through a solution to a common problem - removing duplicates. Of course you could always use the lodash uniqBy utility function, but this shows you how to implement it yourself, and is a great exercise for getting comfortable working with arrays of data.


Intro to RxJS Concepts with Vanilla JavaScript

RxJS is a super cool way to handle asynchronicity, and something that has been very deeply embraced in the Angular community, but is often hard for folks to pick up because the API surface is wide. This article is a very nice introduction to some of that API surface and the related concepts, approaching it by building it up bit by bit with vanilla JavaScript.


JavaScript's new #private class fields

A long-time desired feature, the JavaScript language is about to add truly private fields on classes. The private fields proposal has been merged into a broader class fields proposal that is now at Stage 3 in the TC39 process, which means it is *almost* finalized. This is happening folks! Anyway, this article will give you an overview of what the feature is and how it works.


How to think and type in TypeScript

As someone who is still very much in the “I should learn TypeScript” rather than the “I’m using TypeScript” camp, I found this article interesting but occasionally hard to follow. I got a lot out of it, but wish the article had done a little more explanations for beginners… and there was definitely 1 section that had me yelling “this is the problem with TypeScript!” - when the simple looping over properties in an object got so much more complicated. A reminder that while types can be incredibly valuable there are some constructs that work well in a loosely typed language that are a pain in the rear to do with types.


Other Awesome

How we built the fastest conference website in the world

Pretty fun read, looking at lots of things you can do to build a lightning fast website. I think the biggest takeaway is USE A STATIC SITE GENERATOR. :) And then optimize further from there… but that first step gets you a loooong way.


Preload, prefetch and other tags

Very interesting look through the options available for suggesting to a browser things that it can do to speed up user-visible performance loading new resources. I was particularly interested to see things like preconnect which I hadn’t known about before.


Simple & Boring

Frustration with the complexity of modern front-end development is common, and yet we also spend a lot of time shooting ourselves in the foot and deliberately creating more complexity. Why? Our relationship with simplicity is complicated - we claim to desire it, but also often find it boring or unmotivating. This article does a fascinating exploration of the ways we think about and talk about simplicity in web development.


Killed By Google

An entertaining and sad virtual graveyard for all the applications Google has killed off over time. I’m of mixed feelings about this - it’s important for companies to be able to kill things off and move on, otherwise they can get stuck wasting resources in boondoggles. On the other hand, as more and more products get sucked up into massive megacorporations, sometimes they end up killing things for lack of scale that would have made great standalone businesses. To this day I still miss google reader, and I know huge amounts of my twitter feed are mourning the death of Inbox by Gmail.