Friday Frontend: Expanding Your Sense of the Possible Edition
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.
KBall from ZenDev
CSS & SCSS
Show Search Button when Search Field is Non-Empty
Interesting look at what you can do with the
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.
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.
Great introduction to using
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!
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.
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.