Kyle Cook explains how to convert beginner code to professional code. Two videos, multiple examples, starting with “Noob” code, converting first to “Advanced” code, then to “Professional” code. Mostly very easy-to-follow examples to help us all deliver clean, concise, understandable and maintainable code:

1. Junior Vs Senior Code – How To Write Better Code
2. Junior Vs Senior Code – How To Write Better Code – Part 2

I especially like his use of Guard Clauses. And I really appreciate his recognition that nearly no one writes “Professional” code on the first run; we write as our brains think and often do lots of trial-and-error before finally getting something that just works! Then we go through and cleanup. I think this point is important for beginners (and the rest of us) to remember… (Though I do think that, the more cleanup we do, the more our brains will start to think like the desired final version in the first place.)

We’re probably all familiar with @media queries, right? And maybe most of us also know about @supports queries? Well I recently stumbled on a video (can’t seem to find it now!) that used @supports selector(); what a great feature, and already well supported! I really wish I could find that initial video, but here is a short article from Chris Coyier…

I love the “user preference” collection of meta tags and CSS queries and hope the collection continues to grow! Since we cannot always know what our users want, and none of us want to fill out a user preference questionnaire before accessing a site, we developers can actually let our sites kind of ask for themselves… For example, perhaps the user has a reason for not wanting flickering animation. As the article points out, even if your site doesn’t have any crazy animation, something as simple as scroll-behavior: smooth on a long page could be problematic to some users. But a simple precaution could prevent such problems [scurries to update all existing projects]:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

prefers-color-scheme is another great example, as are prefers-contrast and prefers-reduced-data. The latter two will both be great once they are ready!

And if you are offering prefers-color-scheme CSS, you just might want to serve different images for each color scheme. Not easy, but also not so hard…

<picture>
    <source 
        srcset="https://picsum.photos/id/1019/300" 
        media="(prefers-color-scheme: dark)"
    >
    <img 
        src="https://picsum.photos/id/1035/300" 
        alt="Light Mode Image"
    >
</picture>

With a title like How I made Google’s data grid scroll 10x faster with one line of CSS, I half-expected one of those click-bait-type articles, where you end up saying “Ho-hum, whatever”. But for one, single CSS declaration (and one I had never heard of), it is pretty powerful! Bravo!!

table {
    contain: strict;
}

Very succinct Web Performance Metrics Cheatsheet. Read the full article for all the abbreviations, definitions and explanations, or jump down to the Cheatsheet itself. Once you understand all the abbreviations, the figure that appears just below the cheatsheet (no direct link available) is super helpful!

And while you’re debugging your performance, these developer tool secrets from Christian Heilmann will come in very handy! I love console.assert() and Live Expressions! (And the article that Christian links to is equally chock-full!)

And while we’re talking about performance, the conversation about multi-page sites vs. single-page apps has been ongoing since the first idea to dynamically fetch content using JS. But Rich Harris of the NY Times offers an extremely thorough deep-dive into the pros and cons of each, and all the back-and-forth arguments, then boils it down to define a new term and possible best practice: Transitional Apps. I like the term, and love the idea! (Though, it’s really just sort of Progressive Enhancement, no?)

A visually-stunning and quite entertaining site, The Museum of Annoying Experiences is also a developer’s treasure-trove of what can be done in the browser today. Apparently it is also a performance engineer’s treasure-trove because three seconds after “entering the museum” my laptop fan starting going crazy! :-) (Keyboard navigation would have been a really nice add-on…)

Also visually-stunning and quite entertaining, as well as informative, 10 Misconceptions on UX is actually more of an online quiz, challenging the user to choose which side of common UX beliefs they side with (you might want to study first). No laptop fan here… (Also no keyboard or tab navigation either…)

And finally, as the World Wide Web nears 33 years old, let’s take a stroll through time, exploring The History of the Web… You may know some of these historical events and dates, but you are sure to discover some golden oldies, too… Like the fact that IMDb is nearly as old as the web itself? For some of you whipper-snappers, you could even find out what happened the year or even month you were born! :-/

Happy reading,
Atg

Top⇪