Hope your week was good! I’ve caught a bit of a cold but am generally excited to be into November and on to the holiday season.

This week, there’s a number of articles that will expand your sense of the possible. From a look at upcoming CSS specifications to crazy CSS artwork, new JavaScript language features to a deep dive on concurrency in React, there’s a ton of great resources.

Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Show Search Button when Search Field is Non-Empty

Interesting look at what you can do with the :placeholder-shown selector to make your website respond to user-entered state, without any JavaScript. Accessibility caveat: You should almost never use placeholders to completely replace labels, but if you uses them in a complementary manner this technique can be super slick.

Things We Can’t (Yet) Do In CSS

This is a fascinating look at some design possibilities that exist in the print world but don’t yet work in CSS. And since it is coming from someone who sits on the specification body, I would imagine that many of these may make their way into our possibilities in the next few years. In fact, she includes some references to specs under way. I’m excited!

CSS Variables With Inline Styles

Very different approach - I’m not sure if I like it or not, but it’s mind expanding. The author defines a set of CSS classes that depend on variables, and then inline in the HTML manipulates those variables with inline styles. This seems super cool for prototyping, though I’d personally lean towards extracting those inline styles back out into classes as I moved towards production.

Uncommon Use Cases For Pseudo Elements

I’m a huge fan of pseudo elements - they let you get so much more out of your CSS than if you’re stuck just styling one object per object. And while maybe not as out of this world crazy as the examples in a.singlediv.com this article shows some great examples of how you can use pseudo-elements for innovative experiences.

PureCSS Lace

In the inspiration bucket, this is a pure HTML+CSS art piece. Take a look in chrome, then open up your inspector and start digging. It’s mind blowing.

JavaScript

What is super() in JavaScript?

Great introduction to using super within JavaScript. If you’re using the modern JavaScript class syntax, this is something you should definitely understand, otherwise you’ll be shooting yourself in the foot and wondering why code doesn’t work as you expect.

Making a Chart? Try Using Mobx State Tree to Power the Data

Fascinating look through modern graphic development using React and Mobx (an alternative to Redux) to power SVG generation, up to and including user-interactions on hover. Very very cool!

5 interesting and not-necessarily-useful Javascript tricks

I think the title is pretty accurate - not sure how many of these will actually be useful, but they are interesting, and reading about them will expand your sense of the possible in JavaScript.

Modern JavaScript features you may have missed

Also in the ‘expand your sense of the possible’ category, this article looks at the features added to the JavaScript language that have not been getting much attention.

Building Great User Experiences with Concurrent Mode and Suspense

Super in depth and not intended so much for application developers as for framework/library authors, but this is a deep dive into how the React team is thinking about data fetching, and how they’re thinking about Concurrent Mode and Suspense changing the way we write in React.

Other Awesomeness

Navigating Software Engineering Career Paths

(Bias alert - I wrote this). How do you know if you’re ready for a senior engineering position? What should you even be working on learning? I hear these questions all the time, and this post is an effort to start addressing them. I aggregated results from a large number of published engineering career progressions and boiled them down to a single progression for your use.

Creating Online Environments That Work Well For Older Users

This rings super true - while our industry loves to stereotype older users as incompetent, there are huge numbers of design choices that simply fail to take into account different preferences and declining physical characteristics. As someone who’s eyes have gone prematurely bad, I beg designers to look and listen to the contrast and font size recommendations! There’s some other great context here for understanding this demographic.

PRELOADING FONTS: WHEN DOES IT MAKE SENSE?

Fonts are honestly one of the trickiest tradeoffs when it comes to performance and design. We all love our beautiful custom fonts, but they’re also slow to load and can result in awkward loading states. This article looks at one of the approaches available to us to mitigate the issue.

The Trick to Animating the Dot on the Letter “i”

Great effect! Separate out the dot from ‘i’ (or ‘j’ for that matter) by using other glyphs, allowing you to create some fascinating animations. That said, read the comments for better accessibility recommendations than those in the article.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html