Geoff Graham: Recent Episodes
None
It was last year that I decided to be a little braver about sharing my outside hobbies, music being the emphasis. I’ve been utterly awful at sharing anything since, so I thought I’d post a Beatles cover I did last week.
It ain’t fully baked but I’m shedding my shyness anyway. “Girl” is in my Beatles Top 5 for sure and it brings up so many memories for me. I love the little Russian influence. There’s a swing to it that makes it oddly danceable for a ballad. John Lennon’s vocals are the star of the show but I think George Harrison’s lead guitar work deserves a huge shout-out. The double layering of two simple solos that scale C-minor is what makes the song recognizable. George was never one to insert frivolous notes in his work and this might be the best example of it.
Stumbled on this post from my RSS feed. I don’t know anything about the author, Dr. Devin Price, but a few lines really popped out that I wanted to capture and come back to later.
The premise is that there are some cases of burnout we never recover from. I was immediately drawn to it because I consider myself in the throes of an ongoing burnout and have recently questioned whether or not I would ever regain my “pre-burnout” sense of self. That’s another topic altogether, but Price articulates a few things in ways I haven’t been able to for years.
No amount of dedication from Hea was enough to satisfy her bosses, and her relationships with clients always felt shaky, and had to be constantly maintained. She was forever connected to her phone, having nightmares about brand partnerships and ad-read recording sessions. By the time she was hospitalized for exhaustion and thoughts of self-harm, Hea had been working day and night, without any real weekend to speak of, for years. Burnout was Hea’s mind’s way of slamming on the breaks, forcing her to stop pushing herself when nothing else could.
Oof, too close to home. Many times I remember feeling like I had to “outdo” myself to earn recognition. It’s like a roller coaster car creeping up to the top of a steep drop-off.
I’ll say that I once had a boss whom I had asked for a raise after three years of maintaining the same rate. Now, mind you I didn’t actually ask for a raise, but asked how I could earn a raise at my next review, highlighting my accomplishments from the past few years to demonstrate a clear track record of growth and contributing value to the team. I was raised to not expect handouts but to work hard and show my worth.
We worked on the plan. It was documented. And the following year, after truly outdoing myself in what my boss announced to the team as a “banner” year for me? Do you want to know what I was told? “Why would I pay for something you already did?”
OK, let me drop that and continue with more from Price:
Today’s average worker is over-extended far beyond anything seen in recent history, logging longer hours than ever, often for multiple part-time or gig-economy bosses, in return for dwindling pay and no benefits. Digital tools make it possible for obligation and demand to invade every moment of our days, our bosses always within arm’s reach, a hail of new information, notifications, and messages designed to be distractingconstantly raining down and causing us stress.
We’re living in a cold tech economy — well, it’s hot for management but cold for the rest of us. I’m a fellow who avoids hyperbole but it’s hard for me not to see the current job climate as anything but a modern clash of the proletariat and bourgeoisie. I have lots of thoughts on this.
People who have experienced burnout report worse memories, slower reaction times, less attentiveness, lower motivation, greater exhaustion, reduced work capability, and more negative health symptoms, long after their period of overwork has stopped. It’s as if burnout sufferers have fallen off their previous life trajectory, and cannot ever climb fully back up. And that’s just among the people who receive some kind of treatment for their burnout and have the opportunity to rest. I found one study that followed burned-out teachers for seven years and reported over 14% of them remained highly burnt-out the entire time.
I’m not only a tech worker, but I teach it as well.
Since her burnout began, Hea has been diagnosed with Autism, complex post-traumatic stress disorder, pre-diabetes, and chronic pain syndrome. But none of that has stopped her from believing she should be more capable than she is.
[…]
When I ask Hea if she’s really internalized the fact that she is disabled, she shakes her head in resistance.
We still have a lot of work to do to recognize mental illness as a condition like any other ailment, even when it comes to diagnosing ourselves.
Given all this, it makes sense that when a burned-out person notices their abilities slipping, they scramble to recoup them as fast as they can. But burnout is one of the body’s final defenses against unrelenting, unsustainable demand, and it is only by reevaluating those demands and abandoning a huge number of them that we can actually begin to heal — and heal as the people we are, not the hyper-reliable workhorses we long to be.
Attempting to squash burnout only feeds it.
For burnt out people, the unrelenting need for rest can seem shameful. And yet it is the only way to halt the bleeding of overwork.
Yes, I am always aware of my more idle times and secretly worry that I’ve become irrelevant in my work, yes, but also in my home and hobbies.
On good days, I can allow the animal inside me to luxuriate in the pleasures of a long stretch across the bed, a mouth-watering bowl of pasta with vodka sauce, the biting wind on my neck as I walk. On bad days, I wonder why my body is still so insistent upon soaking up so much pleasure, when I have done nothing to earn it.
Guilt is such a big part of the deal. I’ll say that I allow myself to pause — and have become quite good at it! — but it does come with a lot of self-doubt as to whether I’m wasting time or even deserve the break.
Maybe it’s time to embrace being weak.
I want to come back to this one for sure. I’ll end this by dropping in “I’m Only Sleeping” since it was in my head while reading the post.
Permalink
Colin Lecher and Tomas Apodaca over at The Markup:
Meta’s ad policies forbid calling for violence. But when faced with crucial tests of its content moderation practices, the company has repeatedly failed to detect and remove inflammatory ads. A 2018 report, commissioned by Facebook itself, found that its platform had been used to incite violence in Myanmar, and that the company hadn’t done enough to prevent it.
So, a social company says one thing but does another. No news there.
A clothing company called Red First, which offers everything from customized shirts for pet owners to flags saying “Hillary belongs in prison,” offered assassination-related merchandise through a network of pages with names like 50 Stars Nation and Red White and Blue Zone.
The company, which operates in California and Vietnam, according to Meta’s required disclosures, has spent more than $1.8 million since February 2023 to promote ads through its various pages. But in the wake of the shooting, the company pivoted to merchandise around the event.
OK, companies use emotionally-charged events to sell crap to people on Facebook. No news there, either. But pairing Meta’s say-this-do-that cosplay on violence with merchants using implicitly sanctioned violent coverage for profit? Now we’re seeing the smoke.
After our review, we determined that more than 2,600 of those more than 4,200 ads were related to the assassination attempt. The total Red First paid to Meta in the 10 weeks after the shooting for those ads: between $473,000 and $798,000.
Let’s generalize this a bit and frame it as a media company using politics to drive revenue. Sounds a lot like cable news to me. And now we know that Meta is as much an infotainment empire as CNN or Fox News.
Source
I had a chance to see Mike Campbell & The Dirty Knobs in Denver last week. It was a special occasion for me. I last saw Mike in action in 2017 at the Hollywood Bowl. That was part of Tom Petty’s final tour and the second-to-last show ever. No one was as surprised as me that Tom would pass away a mere 10 days later…
Anyways, I think my experience with The Heartbreakers led me to not take chances on missing out on The Dirty Knobs. So much so that I bought my way backstage to meet the group.
I love this picture. But it also kills me because you might notice that Steve Ferone (second from the left) is gripping a marker and sitting in front of three more. I went in with my trusty (and dusty) vinyl of The Heartbreaker’s first album, already signed by Tom Petty. I knew Mike would be there and, yes, he was mighty kind (and seemed to be genuinely excited) to sign it. Ferone wasn’t in the band for that record, but he was from 1994, onwards. A Heartbreaker is a Heartbreaker, right? Sign it!
But I didn’t ask. I’m not exactly the type of fella who gets starstruck in the presence of celebrity — come over and I’ll tell you some stories! — but I sure was at that very moment. I was utterly incapable of saying anything to the guys other than thanking them for, you know, being them. I kept it short and sweet. Handshakes, a few hey’s, and dang you guys have done so much for me and you don’t even know it. I literally told them to break a leg out there.
The handshakes are what threw me. After shaking hands with Ferone and Campbell, I was suddenly struck by the reality that these guys are direct links to all of my heroes. George Harrison and Jeff Lynne recorded in Campbell’s makeshift home studio during the Full Moon Fever sessions. Ferone was Clapton’s drummer (and Slash’s, too!). The Heartbreakers were Dylan’s backing band in ’86 and Johnny Cash’s backing band for his Unchained album. Ringo played with Mike on Wildflowers.
Those hands have felt a lot of history, man. And it knocked me flat out.
Doesn’t matter. The show was everything I hoped it would be and then some. And being close enough to hear Campbell’s foot stomping on his pedals was enough to make me feel like a kid again.
Check out that J.J. Cale license plate back there!They played Petty songs, of course, but only deep tracks which I thought was an awfully kind treat. “Makin’ Some Noise”, “Don’t Fade On Me”, “You Wreck Me”, “All or Nothin'”, “Ways to be Wicked”… damn, I feel spoiled.
The Dirty Knobs are on a co-headlining tour with Lucinda Williams — who, coincidentally was the opener at the Hollywood Bowl show I attended — but this was a one-off date without Lucinda in tow. Instead, we had a helluva fine singer in Shannon McNally. Think Brandi Carlile sitting in a gritty saloon in some remote desert town, style-wise. I loved her and picked up her LP of Waylon Jennings covers at her booth after the show. Worth it.
The whole dang show was worth it — starstruck moments and all.
I’ve re-discovered the definition list (<dl>) element and a newfound love for it. I’d never reached for one when writing in Markdown before (regular-ol’ lists are so darn easy) but found myself needing to this morning.
It’s not tough to find the information. This is just the first time I’ve looked it up and now I see that definition lists are just as easy and convenient in Markdown as ordered and unordered lists.
First Term: This is the definition of the first term.Second Term: This is one definition of the second term.: This is another definition of the second term.
That’s it. Ordered list items are prepended by a hash symbol (#), unordered list items are prepended by an asterisk (*) or dash (-), and now I know that definition list items (well, technically it’s the definitions, not the terms) are prepended by a single colon (:).
Thank you, Matt Cone!
Source
WordPress has this little bit of optional UI where a panel slides in when hitting the Publish button on a post. It’s like one of those “Are you sure you wanna delete this?” warnings designed to build in one last check before pushing content live.
That’s been around for a long while now. I’m unable to remember or find when it was introduced but what’s interesting is that the panel has a newer feature that checks for external images embedded in the posts. If it finds any, it asks whether you’d like to upload the images to your own Media Library. You know, protect against the downsides of hotlinking assets, like the owner removing the file from the server, or worse, replacing the file with something completely unexpected, possibly inappropriate.
This came up because I typically copy-paste content from Dropbox Paper, Google Docs, or some other content editor when collaborating with others on new CSS-Tricks articles. Images in those docs are automatically inserted into the page when pasting them in, but they are sourced externally by Dropbox Paper or whatever.
It’d be awesome if WordPress automatically uploaded those images on paste, but I get why they might not to go there. That’s where the pre-publish panel comes in and gives me a heads-up in addition to a shortcut for uploading the media right there without leaving my place. Fantastic!
I suppose the only way it might be better is to do that check in the Image Block’s settings. Not everyone opts into the pre-publish check in their user preferences and will miss that warning. And I’d reckon (albeit on gut feeling) it’s a warning most content writers and editors want to see, regardless of preference.
Aside: Eric Karkovack’s post on WP Minute highlights why small UI changes in WordPress are a big deal and need better communication.
This is really a note to myself because I frequently conflate the two terms.
It’s possible to be assertive without being aggressive. But that might be unobvious if you’re privvy to the primary definition some dictionaries are doling out, e.g.:
assertive (adj.): Confidently aggressive or self-assured; positive: aggressive; dogmatic:
Dictionary.com
I much prefer how Psychology Today describes it:
Assertiveness is a social skill that relies heavily on effective communication while simultaneously respecting the thoughts and wishes of others. People who are assertive clearly and respectfully communicate their wants, needs, positions, and boundaries to others. There’s no question of where they stand, no matter what the topic.
Individuals who are high in assertiveness don’t shy away from defending their points of view or goals, or from trying to influence others to see their side. They are open to both compliments and constructive criticism. People can improve their assertiveness through practical exercises and experience.
Seen through this lens, assertiveness is more akin to fairness than aggression. It requires a sense of self while maintaining the empathy to consider another’s sense of self — as well as remaining open to the possibility that the other’s sense of self is correct and worth prioritizing.
There’s a level of humanity there that simply isn’t catered by aggression. You can stand up for yourself without relenting your values or stepping over someone else to get your way.
There are certain times that you go through in life. Some of us make changes. Some of us never change. Some change in a very small, or miniscule, way, and some of us change in a dramatic way — may be fast, may be slow, may be fgradual. I think that’s just part of the engenderment of what you’re around, what’s around you and how you react to it. From the wind blowing to an in-towner shaking hands with you and looking you in the eye. Or reading a word in the Bible, or listening to a spiritual, or listening to Beethoven’s Fifth. It don’t make any difference. If people knew just how beautiful this life is from an educational standpoint — even if you didn’t finish school. How much there is out there to learn, and not let yourself become stagnant in the ways of the convenience of time. Or get tied up in the lack of confidence in yourself — and we all go through those stages.
But you just can’t remain that way. I mean, inside you got to be somewhat of an arrogant bastard — I don’t think it’s possible just to be sweet and nice. Maybe on the surface. But I think there is a certain amount of arrogance that all creative people possess and you must just stay in trouble by suppressing it all the time.
Sam Phillips: The Man Who Invented Rock ‘n’ Roll (page 496)
I got to sit down for a one-on-one chat with none other than Dave Rupert for a recent “Smashing Hour” brought to you by the fine folks over at Smashing Magazine. It’s loose, unscripted, unprompted, unadulterated conversation — my favorite kind!
(Re-published from the Smashing Magazine newsletter.)
I don’t know if you’ve noticed it. It certainly snuck up on me. Somehow at some point in time, CSS got smart. Like really, really smart. The language for styling the web with a quirky cascade is evolving from a standard paintbrush into a full-fledged design application.
The shift is significant, but not totally unexpected. CSS has always been quite smart. The Cascade itself is an elaborate algorithm that evaluates styles and conditionally applies them to elements based on the best “match”. Selectors, after all, are conditional statements.
It took a long time for that to click with me. For the longest time, I treated my work as if my only duty was to select and style. Select, style. Select, style. Select, sty…
My posture never really changed, that is, until I had an epiphany: everything in CSS is relative. We have rem units that are relative to root’s font-size, em units relative to that of an element’s parent container, and even px units relative to nothing but themselves, among many other features that depend on the relationship between elements. It took me years to get there — mind you, I began writing CSS in 2003.
But CSS is more than relative; it’s conditional. There’s a significant distinction between the two as relativity is all about context while conditional behavior is logical. Sure, it may not follow your personal line of logic, but CSS is logical.
That’s what you’ll find in this edition of the newsletter. CSS is only getting smarter and more logical and we’ve seen the best examples of that with CSS features that have shipped over the past year. We’re rounding up several of those features not only to offer a set of CSS specifications but also to help paint a more complete illustration of just how smart CSS is becoming in modern web development.
Inline Conditional if() StatementsThe CSS Working Group resolved to press forward with adding an if() function to the CSS Values Module Level 5 specification that would apply styles to elements conditionally based on a certain condition. I wrote about it last week but Lea Verou is leading the push and has a couple of incredibly helpful posts for understanding how the if() function might work and the workarounds we’ve been using that the function could abstract away.
Custom FunctionsNo, no, not the everyday functions that serve some sort of single purpose, like calc(), min(), max() and whatnot, but custom functions that are more like custom properties… but way more advanced.
What makes custom functions a level up from custom properties is that they act like a custom property contained in a var() but the type check happens after computation. This allows for more complex statements that we can wrap in a new @function rule that contains a condition and the expected result. This is pulled straight from the very early draft illustrating how we can calculate the area of a circle in a custom function:
@function --circle-area(--r) { result: calc(pi * var(--r2)); --r2: var(--r) * var(--r);}
That’s great in that we can keep logic separate from style rules, whereas today we often perform calculations directly in style rules.
CSS MixinsIf you had clicked through to the draft specification for custom functions, you may have noticed that the draft is titled “CSS Functions and Mixins” — meaning we’re dealing with two new feature proposals. The draft’s URL slug is even /css-mixins despite the lack of a “mixin” definition.
You may be fairly familiar with mixins if you’ve written CSS with a preprocessor, such as Sass, PostCSS, or Less. The CSS version is fairly similar to those implementations, though more CSS-y. Where @function allows us to produce an expected value represented by a custom property, @mixin is designed to return expected style declarations for making certain sets of styles reusable according to the DRY principle. Miriam Suzanne (who recently joined us for a Smashing Hour!) is an editor on the spec draft and has published a thorough explainer of the ideas and goals for both mixins and functions.
Container (and Style) QueriesYou’ve likely heard a bunch about CSS Container Queries. There’s already great information about them published on Smashing Magazine, including deep explanations of what they are and their use cases. Container queries even enjoy an excellent level of browser support to date.
But have you heard about Container Style Queries? They are born from the same CSS Containment Module Level 3 specification, but style queries are still in the works. When style queries officially ship (I I believe they will), we’ll have yet another new way to apply styles conditionally.
What exactly is a style query good for? Juan Diego Rodriguez recently explored that question and came up a little empty-handed, but also sees style queries as less a feature than it is part of a much bigger vision about the future of CSS — a vision where style queries are needed for the type of logic we’ve covered throughout this newsletter. Juan’s article is a great one for wrapping your head around the concept, as is Miriam’s comment on the article clarifying key concepts.
Transition to autoOK, so this isn’t exactly a new “conditional” CSS feature, but it’s one that many of us have wanted for over a decade and it’s additional proof that the future of CSS is just plain smarter than where it’s been in the past.
Here’s the scoop: A new calc-size() function is being used to experiment with an approach to determine the size of auto even when we have no idea what auto equals — which is always the case unless we explicitly declare fixed-size dimensions on an element. We’ve never been able to transition an element from, say, height: 0 to height: auto (or vice versa) because auto is an unknown value before computation happens.
Declaring calc-size(auto) fixes that. We can supply it with just a vague keyword about an element’s dimensions — calc-size(auto) — to go from a fixed value to the element’s intrinsic size and back. This is all very experimental (only Chrome Canary for now) and likely to change before it becomes an official feature, but how neat is it that CSS is getting to the point where it understands what certain keywords evaluate to before they’re evaluated?
Check out Chris Coyier’s early look at the idea.
Reminder: Grammarly makes suggestions rather than mandatory revisions. It’s programmed to focus on text segments rather than content in full context. It’s made to follow the rules rather than making you better at the craft; the nuance and eccentricities that make you, you.
Use it. But advocate for your voice while you do.
Saw this from Lea being passed around yesterday:
A historical day for CSS 😀🎉
If you write any components used and/or styled by others, you know how huge this is!
background: if(style(–variant: success), var(–green));
Even if you don’t, this will allow things like:
padding: if(var(–2xl), 1em, var(–xl) or var(–m),… pic.twitter.com/cXeqwBuXvK— Lea Verou (@LeaVerou) June 13, 2024
Whoa, right?! Seeing an :if() function in CSS gets my mind going in all sorts of directions. But what Lea is referring to is a GitHub issue she opened in the CSS Values Module Level 5 repo. I thought I’d take some notes on that discussion as I try to wrap my mind around what’s going on.
This is about conditional statements, but mostly custom propertiesThe ticket describes a long-running desire for developers to apply style if() a certain condition is true. There are already some workarounds that get us close:
- Using custom properties as a Boolean to apply styles or not depending on whether it is equal to
0or1. (Ana has a wonderful article on this.) - Using a placeholder custom property with an empty value that’s set when another custom property is set, i.e. “the custom property toggle trick” as Chris explains it.
- Container Style Queries! The problem (besides lack of implementation) is that containers only apply styles to their descendants, i.e., they cannot apply styles to themselves when they meet a certain condition, only its contents.
SyntaxLea isn’t proposing a single, particular direction but rather is poking at what might the minimum viable approach to get us to conditional statements, one that can be extended later as needs and ideas arise.
That said, here’s one possible way to define what if() might look like:
<if()> = if( <container-query>, [<declaration-value>]{1, 2} )
…where:
- Values can be nested to produce multiple branches
- If a third argument is not provided, it becomes equivalent to an empty token stream
As I best understand it — which may be very little — we identify a container query (just style(), I think?) the declared style condition we want to match and set style with one of two declared styles, one as the default style, and one as the updated style when a match occurs.
.element { background-color: if(style(--variant: success), var(--color-green-50), /* Matched condition */ var(--color-blue-50); /* Default style */ );}
The default style would be optional, so I think it can be omitted in some cases:
.element { background-color: if(style(--variant: success), var(--color-green-50) /* Matched condition */ );}
Nesting conditionsLea offers an example of how a nested set of conditions might work as a third possible argument:
background-color: if( style(--variant: success), var(--color-success-60), if(style(--variant: warning), var(--color-warning-60), if(style(--variant: danger), var(--color-danger-60), if(style(--variant: primary), var(--color-primary) ) ), ));
…but goes on to suggest a syntax that would make this less verbose and meta.
<if()> = if( [ <container-query>, [<declaration-value>]{2} ]#{0, }, <container-query>, [<declaration-value>]{1, 2} )
In other words, nested conditions are much more flat as they can be declared outside of the initial condition. Same concept as before, but different syntax:
background-color: if( style(--variant: success), var(--color-success-60), style(--variant: warning), var(--color-warning-60), style(--variant: danger), var(--color-danger-60), style(--variant: primary), var(--color-primary));
What about other types of checks?I love this question Lea poses:
How hard would it be to support other queries beyond
style()? E.g. size queries,supports(),media()? (style()does address the vast majority of use cases, but if any of these are easy, we may as well support them too.)
So:
background-color: if( supports( /* etc. */ ), @media( /* etc. */ ));
Neat-o idea! The challenge would be container size queries. As currently specced and implemented, there is no size() function; instead it’s more like an anonymous function:
@container (width > 65ch) { /* Style rulesets */ }
I’ve tried to understand the limitations of size queries before, but admit it’s just a lot for this blondie to grok. Whatever the case, @andruud has a succinct answer:
I don’t see why we couldn’t do
supports()andmedia(), but size queries would cause cycles with layout that are hard/impossible to even detect. (That’s why we needed the restrictions we currently have for size CQs in the first place.
Commas, colons, semicolons, or question marks?After the Working Group discussed the proposal in a meeting, more was raised on the specifics of the syntax, namely what characters make the most sense and for the most readable code.
True to form, Tab Atkins sums it up nicely:
if(style(...): foo, bar)could be a single valuefoo, bar(and IACVT if false), or two values (fooif true,barif false). This does have a defined parse – it’s always two values. But if you wanted it to be one value, and then IACVT for false, you can’t write that.(This ambiguity doesn’t occur if there are multiple chained conditions.
if(style(...): foo; style(...): bar, baz)unambiguously doesn’t have a default case; thebar, bazis the whole value for the second condition. It’s only in the single-condition case that we haven’t yet gotten unambiguous information about what the separator is.)
First thing to note there is the addition of a colon following the style() function in place of the comma that was initially proposed:
background: if( style(...): /* instead of `style(...),` */ foo, bar )
The second thing to note is a possible issue with using commas to separate declaration values:
if( style(...): foo, bar)
That could confuse what we mean. Is it that foo and bar are separate values, where one is the default style and the other is the updated style? Or are we defining one compound value, foo, bar that is applied when the condition is false? In other words, can we omit a default value if needed and still have the condition properly evaluated?
Tab suggests a way to say “no default condition” in the syntax, e.g.:
if( style(...): foo, bar; no-value)
Lea suggests we might be able to use a different operator to separate the style condition from the declaration values, such as ? or : so that it’s possible to make the last argument mandatory while accepting an empty value there:
if(style(...) ? foo)
If not that, then maybe a keyword to denote no default as the last argument:
if(style(...) ? foo, no-value)
So, where’s this at?Lea’s X post provides this example:
background: if(style(--variant: success), var(--green));
As well as this one to illustrate (I’m nesting it to help me read it):
padding: if( var(--2xl), 1em, var(--xl) or var(--m), .5em);
Followed, of course, by a screenshot that the Working Group resolved to add the if() function to the specification.
There seems to be a lot more nuance than what I’m capturing here, but these are just my notes for general understanding and keep an eye on how it all shakes out.
You can file this one under “super-proud-but-shy-to-say-it” because I made a thing that I love but am absolutely the worst when it comes to talking about this stuff.
I’d like you to meet The Basics. It’s an online course that teaches — you guessed it — the basic principles of front-end development, focusing specifically on HTML and CSS. I’m almost afraid to call it an “online course” because that term is all sorts of convoluted with things like coding bootcamps, and The Basics is vastly different.
Allow me to elaborate a teeny bit.
For one, it assumes that anyone taking the course has zero experience writing code. If you jump into any bootcamp covering similar concepts, you’ll find that they cater to folks like you and me who are coming equipped with plenty of experience wrangling code and are there to level up. The Basics is different. It’s a true entry point for those coming into front-end development cold, or perhaps for someone with experience writing code years ago who wants to jump into modern-day development.
I think “entry point” is key here. I recently wrote about the ongoing disappearance of resources for true beginners to crack into web development — something I first became aware of from Rachel Andrew — saying this:
[My] point is that there are more resources than ever for learning web development, but still painfully few entry points to get there. The resources we have for learning the basics are great, but many are either growing stale, are quick hits without a clear learning path, or assume the learner has at least some technical knowledge. I can tell you, as someone who has hit the Publish button on thousands of front-end tutorials, that the vast majority — if not all — of them are geared toward those who are already on the career path.
And that’s where I think I’ve been able to close a gap between all of the various learning materials out there and having an established place for beginners to gain the context they need to understand those materials.
Code is scary, even for seasoned professionals like us who have notched more than 20 years of experience. Learning something new requires a certain level of vulnerability and willingness to spend time out of your comfort zone. It’s easy for us to take beginner-level things like HTML and CSS for granted, but there are plenty of more advanced things out there that are capable of scaring the bejeezus out of someone like me. Like, right now, I’m completely afraid of newer web features like web components even if I’m super excited to learn more about them.
You know that’s how absolute beginners feel when opening a code editor for the first time. Oh, wait, what the heck is a code editor? Maybe we should start there before we write any HTML. What? You’re not sure what HTML is? The Basics goes all the way back without skipping over the sorts of things that someone might be expected to know along the way.
What learners need is an opportunity for deep learning. Unfortunately, many if not most existing articles, tutorials, videos, and bootcamps are prepared by developers rather than educators who understand learning experience design and how to leverage it to accommodate different learning styles and needs. That’s where I consider myself to be a niche specialist because I’ve earned my Master’s degree in Education with a focus on educational technology and adult learning.
In other words, The Basics is less a learning resource than it is an educational experience. It’s designed to help learners develop new knowledge through a variety of learning principles. I’d like to think that The Basics is not just another tutorial because it’s a complete set of lessons that includes reading, demonstrations, videos, lab exercises, and assessments, i.e., a myriad of ways to learn. I’d also like to think that this is more than just another bootcamp because it is curricula designed to develop new knowledge through reflective practices, peer learning, and feedback. It’s quite literally the same materials I use in the classes I teach at the college level.
That’s all I really want to say for now. Again, If you’re reading this, it’s very likely that you, too, work on the front end. The Basics isn’t for you exactly, though I’d argue that brushing up on fundamentals is never a bad thing, regardless of your profession, but especially in front-end development, where standards are well-documented but ever-changing as well.
The Basics is more for your clients who do not know how to update the website they paid you to make. Or the friend who’s learning but still keeps bugging you with questions about the things they’re reading. Or your mom, who still has no idea what it is you do for a living. It’s for those whom the entry points are vanishing. It’s for those who could simply sign up for a Squarespace account but want to understand the code it spits out so they have more control to make a site that uniquely reflects them.
If you know a person like that, I would love and appreciate it if you’d share The Basics with them. Thanks a bunch!
Visit The Basics
Miriam Suzanne and James Stuckey Weber sat down to talk CSS Anchor Positioning, one of those things I’m certainly aware of by nature of what I do for a living but have not bothered to dedicate time to. Miriam’s been aware of the feature from the spec side of things, of course, but James has been in the field playing with it.
This is the kind of video I’m a sucker for: two great folks learning together, asking questions, and doing it all without a script. Fits my mental model and all.
Anyway, I thought I’d jot a few notes I’m taking away from the video as I watch it.
The videoThe general concept* It looks a lot like absolutely positioning elements relative to another element. * We’re effectively “pinning” an element to another the way we might “pin” a message on a social profile, but gain positioning capabilities. * But rather than saying “pinning” it’s more like we’re dropping “anchor” from an element that’s a “boat” in another element that’s the “sea” and we get to determine the tethered position of the boat in that water with the anchor keeping us from floating out of flow. * Another way of placing things on the screen, but it used to require JavaScript to do this exact sort of thing. * Fixed positioning is anchored to the viewport; this way, we’re able to anchor to a specific element on the page. One element is in a place and we want to positioning another element in relation to it. * Only supported in latest Chromium at time of video.
Feeling around the syntax* anchor-name: Define the element to anchor to, declared on that element. Takes a dashed-ident value like a custom property.
* position-anchor: The element dropping the anchor for positioning.
From here, we could absolutely-position the element we want to position the element dropping the anchor.
h1 { anchor-name: --post-title;}span { position: absolute; position-anchor: --post-title;}
Like any other positioning method, we inset with physical — top, bottom, etc. — or logical properties — inset-block-start, inset-inline-end, etc. But we do it in an anchor() function.
h1 { anchor-name: --post-title;}span { position: absolute; position-anchor: --post-title; inset-block-start: anchor(start);}
The function accepts physical (e.g. bottom) and logical (e.g. end) keywords.
We can do without position-anchor entirely and reference the named anchor in anchor():
h1 { anchor-name: --post-title;}span { position: absolute; inset-block-start: anchor(--post-title start); /* ✨ */}
It doesn’t seem to accept logical property values in full, e.g. inset-block-start, which James says could be a bug on the spec or implementation side.
/* 👎 */inset-block-start: anchor(--post-title inset-block-start);
I wouldn’t be surprised if that’s intentional behavior. It’s weird to declare, for example, inset-block-start in and anchor() on the inset-block-start property like shown above. Instead, the property:value pair reads more logically:
/* "Anchor the element's top edge with the anchor's starting edge */top: anchor(--post-title start);
inside and outside anchorsInstead of start and end we can position an element inside and outside the anchor.
inset-block-start: anchor(--post-title inside);
The inside value refers to the same side as the property (inset-block-start in that example) where outside refers to the opposite side as the property (inset-block-end in the example). But it also appears not be implemented at this time, at least in the example shown in the video.
Multiple insets, same anchor
h1 { anchor-name: --post-title;}span { position: absolute; position-anchor: --post-title; inset-block-start: anchor(end); inset-block-end: anchor(start);}
This positions the element in multiple directions, allowing it to span the area.
A faster way to do this: inset-area
h1 { anchor-name: --post-title;}span { position: absolute; position-anchor: --post-title; inset-area: left;}
Anchor sizingAnother handy lil’ function: anchor-size().
h1 { anchor-name: --post-title;}span { position: absolute; position-anchor: --post-title; top: anchor(bottom); min-height: 1.5em; width: anchor-size(width);}
Notice what’s happening here. We’re not only positioning the element in relation to the anchor but also sizing it with the width property. This is effectively saying, “Hey, take this element, make it at least 1.5em tall, and make it as wide as the thing it’s anchored to.
🤯
This seems like something I’ve often tried using flexbox for — stretching items across a relative space and fixing them to a specific spot. I’m already thinking of this for things like lower-third caption overlays on images, sticky headers/footers, icons and labels…
Works with calc():
height: calc(anchor-size(width / 2));inset-inline-start: calc(anchor-size(center) + 10cqi);
The consensus is less certain when it comes to nesting anchor-size(). It appears to be unallowed, maybe because they are not computed values that can be used for calculations?
/* 👎 */height: calc(anchor-size(width / calc(anchor-size(height))));
Inspired by the Popover APIThe idea being that we can anchor to something, say, a button.
Anchored to the end of the block and inline directions.The example in that screenshot can be optimized a bit with inset-area, but then we have to explicitly reference the anchor we’re positioned to.
/* before */top: anchor(--post-title end);left: anchor(--post-title end);/* after ✨ */position-anchor: --post-title;inset-area: end;
Anchor scopeInteresting, we can set reference the same anchor to a class used on several items, like items in a list:
```
- Item 1#Target
li { anchor-scope: --list-item}li .anchor { /* the anchor scope is
What’s the “best” way to represent artificial intelligence in an icon? I only ask because the only examples I have seen in the wild are vastly different from one another, where some do better than others conveying what the heck AI is with or without an adjoining text label.
And it’s not like I have any better ideas to toss in the hat. What I do know is that icons are as tough as a stale Twinkie. They not only have to convey what is being represented but also how it fits in the current context.
Some icons are ubiquitous in the sense that they have gained widespread recognition and are commonly accepted to mean a specific thing regardless of the context they are in. The hamburger menu may be the best example of that. It wasn’t instantly recognizable as a menu when it first began appearing on websites and apps but has become perhaps one of the most familiar in use today.
The good ol’ hamburger menu.AI isn’t nearly as mature a concept as navigational menus, nor have many established patterns emerged from the products that leverage it, not to say anything of how it is represented in marketing materials.
As Seen in ProductsI’d say that sparkles are the most common pattern I’ve seen to date. Little stars are littering UIs all over the place.
Clockwise from top-left: WordPress, Figma, Grammarly, and NotionI love sparkles! I use the emoji, like, all the time, usually when commenting on how good someone’s work is. It’s quite literally the most frequently used emoji in my stack.
My hunch is that AI platforms use sparkles as a hint that something “magical” is about to happen. Press this button and we’ll handle everything for you automagically. Makes sense.
But it also doesn’t make sense. For one, sparkles imply a level of cleanliness or perfection. I don’t know if you’ve heard the news, but AI has a less-than-stellar reputation for accuracy and it has nothing to do with poor human prompts. The technology is a fantastic synthesizer of data with a catchy chat-like UI for spitting out words. The accuracy of that data, however? Questionable. It feels like a black box as there are precious few clues as to where the data is sourced, how it is evaluated against other data when it was gathered, and most significantly if it is accurate. Sure, I press the button with sparkles and something magical does appear to be happening before my eyes… but it’s just as likely to be smoke and mirrors as it is the actual information you are looking for.
There’s nothing magical about that. Once you get past the awe of what it feels like to “converse” with technology, the glitter wears off and it all starts to feel like a glorified version of autocomplete. I’m not saying that to offhandedly dispel AI as a concept — hey, it could be useful for many things! — but magic it ain’t, and perhaps sparkles ain’t the best representation of it.
The loud cynic in my head wants to believe that sparkles are a marketing ploy to make something feel more special than it is — Check out this new and magical thing we have for you — and that we ought to stick to using sparkles to indicate a “new” feature that is dropped once the feature gains awareness and no longer needs a visual to highlight it in the UI.
As Seen in Web SearchesHave you ever done an image search for “artificial intelligence icon” in Google, DuckDuckGo, or whatever it is you use these days? It’s pretty hilarious.
The future has arrived, folks! And it looks just like Terminator 2: Judgment Day.I did several variations of the search as I think it’s a decent look at the zeitgeist of how we (yes, the collective, royal We) interpret AI as a concept. It’s lots of robots, or cyborgs perhaps more accurately. It’s filled with digital matrices offering glimpses into unknown realities and dimensions that were once unseen by the naked human eye. It’s a web of interconnected nodes that not only make cyborgs smarter, but more humanlike to the extent that there’s little distinction between humans and machines. It’s a scene stripped right out of Avatar and an ethereal experience that alters the bounds of reality.
I only include this because I think it’s helpful context for many other types of AI-flavored iconography that are making rounds.
As Seen in Design ResourcesOf all the icon collections, icon repositories, icon stores, and icon portfolios I scoured online, I was at first overwhelmed by the sheer number of available options. You need to look no further than Noun Project to see what I mean.
But once my mind took in the first, I dunno, one thousand icons I started noticing that the options are a lot less plentiful than I initially thought. That’s because the super major vast majority of icons seem to fall into one of several recurring themes.
First and foremost are human heads.
It’s the whole man-meets-machine theme. The head, I assume, is the intelligence, but where a brain ought to be, are implanted cogs, interconnected nodes, and computer chips. Quite literally human intelligence swapped out for an artificial flavor.
That could work! The thing that troubles me, though, is two-part:
- Imagine how tough it would be to display that level of detail in a much smaller, say, 32×32-pixel space. Those cogs, nodes, and chips are easily lost when any of those icons are downscaled.
- Just dang creepy. It’s the Uncanny Valley in all its glory.
There must be a better AI representation out there. Oh yes, robots!
I’m going to straight-up dismiss this theme outright. A robot can mean so, so, so many things. A robot in a chat bubble? Could be an auto-reply just as easily as a conversation with an algorithm. Rpbit with nodes popping out its head? Could be a fried bot that’s been decommissioned. Robot busting out of a split human head? Luke, I am your father. And all I do is giggle at the romantic pairing of a robot and a woman together in a loving embrace. Let’s not get the culture police involved!
Brains might be the most represented icon I found, next to human heads. It’s very much the same concept, only maybe a little more effective as far as being able to show more detail at downscaled sizes, at least in some cases — that one in the bottom-left is most certainly too detailed for practical use. A brain in a box might be the most straightforward and clean approach, but also isn’t a clear indication that this is a technology that synthesizes data. The biggest issue with it, though, is that it conveys “thinking inside the box” as much as anything else.
I will say that I quite like the three cubes connected to a brain because they indicate the interconnected components that make AI possible — i.e., LLMs, APIs, and integrations. I could see that working in some UI, like a navigational menu. It’s not sexy like sparkles but gets the job done sans smoke and mirror marketing innuendo.
Check these out:
This is another set that I’ll dismiss outright. I get the idea that the interconnected nodes are AI components — never mind what additional elements are tossed in the center of the shape — but isn’t there already a super popular JavasScript library out there with a logo that looks awfully similar? And isn’t this shape also used in physics to represent atoms? That makes me think of Big Bang Theory.
The last recurring theme of AI-related icons I found is back to sparkles. If I came across as anti-sparkle, it’s only because sparkles alone feel disingenuous. But if they’re paired with something else, well, perhaps that’s better. Let’s look.
While I do not think that any of these examples are silver bullets on their own, I like the idea of incorporating sparkles on the thing that performs automagical tasks. The sparkle on an envelope is an excellent indication that you can do something auto-something in email. Then again, the thing that sparkles are paired with needs to be super specific. See the computer screen with a sparkle? Is that simply a brand-spanking new monitor with an ultra-clean screen? It could be. But an icon of a file with a sparkle on it might work to suggest that you’re about to auto-summarize text in a document or something.
So…?I dunno, I’m no trained designer even though I play one in my day job. If I were tasked with finding an icon that can be used to label an AI-related feature in a UI component, I’d likely pursue a set of icons more closely tied to the feature itself, such as the sparkle-donning envelope for AI-flavored email features. The sparkle is what suggests automation and whatever it is applied to it is the feature. Sparkles alone can mean too many things (and reek of marketing cruft).
But again, what the sparkle goes onto has to be super specific. The example of a computer monitor with a sparkle is just as much saying you’re about to buy a shiny new personal computer as it is that something has AI baked into it.
Some of this isn’t specific to AI but to iconography in general. The detail needs to be clear enough to convey meaning, but not so detailed that the meaning is lost when downscaled. The elements need to be recognizable at first glance but also avoid crossing into well-known commodities, like how the helix shape closely resembles the logos of React and The Big Bang Theory. The subject matter has to steer clear of creepy connotations or else suffer the fate of Uncanny Valley. These are all considerations to take into account when working with icons of any kind.
What are you using in your UI designs?
Not that anyone is asking for it.
- Stop split screens. Those of us watching the broadcast on your app on your iPhone decide can’t see the game and don’t care about a player interview. I’d recommend displaying the player interview as a small overlay before hijacking all that space.
- Remember to cut back to the game when cutting to color commentary. We missed strike three to end the fourth inning of a recent game and never saw how it happened. The broadcasters were busy commenting on what the fans sitting in the stands were wearing and went straight to a commercial break before summarizing what happened on the field. Color commentary is a great thing in general (it helps you feel like you’re at the park). If you have to cut to commercial, at least be sure to acknowledge what was missed at the start of the next inning and replay it.
- Commentary-less coverage sure is great. I wouldn’t want to get rid of play calls throughout the entire game, but the inning or two where broadcasters were muted made me enjoy the game way more than I expected because the sounds of the game take center stage. I love hearing a four-seam fastball snap into the catcher’s glove. I love the casual chatter between a first baseman and the opposing player he’s protecting. There’s nothing more satisfying than hearing your team’s pitcher shout when getting a called third strike that paints the corner. So nice.
Maybe it’s me. Or maybe it’s that the spec is still being ironed out. We’ve already seen changes to the CSS Container Queries syntax since it was initially released as a draft, after all.
But: All elements are style containers by default. That means we have to explicitly declare container-type set to size or inline-size to register an element as a size container.
.parent { container: wrapper / inline-size;}
A container query is a size query by default. Once we’ve registered a size container, we can start querying away.
`@container wrapper (width > 60ch) { /* Apply these styles */ }`
That’s different from a style query, where we call the style() function to distinguish it from a size query:
@container style(background-color: #000) {}
Shouldn’t style queries be the default type of query since that is the default container-type? It would seem that having to declare a size() function would be the right path in order to differentiate the default style behavior from a size query since elements are style containers fresh out of the box.
Like I said, maybe it’s just me. Or maybe it’s something I’m ignorant about, like how that might affect existing media queries. I dunno. Just thinking out loud.
I hardly ever work at the same desk two days in a row. Once I drop the kids off for school, I decide whether to exit the lot toward the left or right, then aim for a charming place with wifi. It’s not that my office is all that bad — I simply like variety.
I can only drive in one of two directions and, regardless which one I choose, I find myself in some line of traffic. And in that traffic, I’ve started recognizing people I see every day. We don’t talk. There’s no handshake. It’s not like we’ve technically ever met. We just happen to be in the same dense traffic at the same time on a regular basis.
I know them purely by the car they drive and their driving skills (or lack thereof). Some are sillier looking than others. Some are polished and put together. Some weave this way and that or have a penchant for merging riiiiiight at the last second. There’s quite a bit of human-like traits and interactions even though we’re separated by metal and glass.
Traffic annoys me, especially when I’m not expecting to hit it. And so you might see a grumpy Geoff behind the wheel moving forward with glacial expedience.
But that’s different now that I have familiar faces — err, faceplates? — on the trail. I like them a lot more than when they were inanimate metal heaps sitting on four wheels. I give them space from behind. I’ll create a big opening for them to merge. I will pretty much do anyone a solid because there’s a greater sense of belonging and togetherness that comes with this brand of familiarity.
I’m unsure if my mind actually distinguishes the person from the vehicle. It’s no matter either way. What tickles me is the ability to care for and relate to others without verbal or physical cues.
Perhaps Rob Zombie was more prescient than we ever knew when barking out the lyrics to “More Human Than Human.”
You know those times WordPress is all, “Hey, we’re running out of memory here… think you can increase it?” Here, maybe a screenshot will help.
It’s an age-old problem with an age-old solution: update the upload_max_size deal-eo to some bigger value, say 128mb or whatever you need in some file called php.ini in the root directory of the site. We can do this with slightly different approaches in either an .htaccess file or wp-config.php, but let’s continue down this rabbit hole and assume we’re absolutely bent on editing the php.ini file.
But where the heck is the root directory in a local development environment powered by Flywheel’s Local app? There isn’t really a “root” directory, per se, other than the /public directory.
Do you add a new php.ini file in there or something? No, what we actually need to do is look in the /conf directory rather than /app and there we’ll find an existing file.
And that’s where we can update all kinds of imposed limits on things.
max_execution_time = 1200max_input_time = 600max_input_vars = 4000memory_limit = 256Mpost_max_size = 1000Mmax_file_uploads = 20output_buffering = 4096
Thanks to Tom McFarlin for publishing a clear and concise post outlining the fix.
Source
I’ve done my fair share of whining and grumbling over the current state of WordPress. I simply find it difficult to know the best approach for creating a custom block theme. Do we roll it from scratch? Do we base it off the default Twenty Twenty-Four theme? There’s no good example the same way we were consistently encouraged to go with one of three options: roll your own with a stylesheet and index file, build off another in a child theme, or either pluck something from the Theme Directory or pay for a commercial offering.
By way of Kevin Powell’s newsletter, WordPress developer Dave Bushell wrote a fantastic piece that put words to what I have been unable to effectively articulate about the hot mess that is WordPress theming here in 2024. As far as templating, we can largely forget the Template Hierarchy:
So as a developer, what if you’re asked to change the header template? What happens if you edit
parts/header.html? crickets — that file is not a real template. It’s just a placeholder or reference that may be copied into the database. Once it is, it’s game over.So how are you supposed to edit templates consistently?
That’s the neat thing, you don’t!
[…]
I think most developers still imagine WordPress themes as PHP templates. Mercifully, you can still do it that way, but what on earth is this new stuff?
David Bushell, “Modern WordPress – Yikes!”
And what about styling?
Some of these styles are hard-coded, others are generated. Some styles exist in files, others in the database. The combined CSS is a tangled mess that all gets inlined into the rendered page. In what order? Who knows. And then bugs crop up so you can never be quite sure.
David Bushell, “Modern WordPress – Yikes!”
Part of me wants play WordPress apologist and explain how this mishmash of approaches is a testament to WordPress to make things as flexible as possible while appeasing a target audience that fails to distinguish between developers and non-developers. But that can’t be true. Simplicity requires making firm decisions with clear directions in order to establish guardrails that prevent developers like me from tripping all over myself. I think many of us were hoping that Twenty Twenty-Four was going to be the North Star we need start modeling our work.
From David’s follow-up:
I tried with Gutenberg, I really did. The Gutenberg block editor was released in version 5.0 December 2018. For over five years I tried. I went all-in from day one. I’ve built dozens of bespoke WordPress themes fully embracing the block editor. Gutenberg is a failed experiment. The core architecture of WordPress is a broken, tangled, unmaintainable mess.
David Bushell, “Modern WordPress – An Update”
Le sigh.
Eric sets the stage to discuss his incredible labor of work (and love) to make GitHub more inclusive and accessible:
Before we discuss the particulars of these updates, I would like to call attention to the most important aspect of the work: direct participation of, and input from daily assistive technology users.
Disabled people’s direct involvement in the inception, design, and development stages is indispensable. It’s crucial for us to go beyond compliance and weave these practices into the core of our organization. Only by doing so can we create genuinely inclusive experiences.
Eric Bailey
This isn’t the meat of Eric’s post, but it’s worth putting the spotlight on it because this is the sort of framing I rarely see in articles about accessibility. Many articles are framed as a one-way conversation from the perspective of an accessibility practitioner or expert about a particular point of WCAG conformance or they wax vengeance on those who know less or not any better for making honest mistakes — but are reading to learn and improve.
Eric is purely focused on two things here: (1) humans and (2) creating usable experiences. There’s a vulnerability in his writing when he describes relying on the direct feedback of GitHub users who are impacted by his work rather than resting on the laurels of what I know he is extremely good at.
Another point I want to highlight is how Eric describes the need to “go beyond compliance” when it comes to accessibility practices. We have WCAG success criteria meticulously organized around usability principles, and while they can be tough to pass, they are technically guidelines as opposed to rules or some binding principles. They’re benchmarks, but real “compliance” is likely to go above and beyond to account for the real impairments that affect the real experiences of the real people using sites like GitHub. Meeting a success criterion is a guidepost, but the real “score” you want to pass are those imposed by users. Conformance doesn’t always lead to accessible experiences, after all.
That’s all I wanted to note here. But you’ll be doing yourself a real solid reading the full article. This is accessibility at a massive scale for a product that drives so much of the work we do to create web experiences. It’s a rare peek at the work, challenges, nuances, and tough decisions of someone not investing sweat equity toward a great cause, but also extremely good at what they do. Just read it already.
Read Eric’s Article
Getting straight to the code:
@font-face { font-family: "emoji"; src: local('Apple Color Emoji'), local('Android Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji'), local(EmojiSymbols), local(Symbola); unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2614-2615, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270B, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F393, U+1F3A0-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F43E, U+1F440, U+1F442-1F4FC, U+1F4FF-1F53D, U+1F54B-1F567, U+1F57A, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1FA7C, U+1FA80-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8; size-adjust: 300%;} body { font-family: "emoji", sans-serif;}
It looks a little beastly but I love clever tricks like this. Here, Terrence defines a web font with an array of font files that operating systems use for local emoji support. It’s not totally unlike leveraging a system font, only we have to do more work on the @font-face front.
The entire purpose is gaining a way to resize emoji characters — by way of size-adjust — without having to resort to something like a <span> in the markup as a styling hook. I wouldn’t say the code is a leaner approach to touching the markup, but if your hell-bent on a total separation of concerns that keeps your HTML clean and uncluttered, then this may just be something to keep in your back pocket. There’s no additional performance cost, right? The font file is already on the device!
Source
I spotted this CSS used in a very popular WordPress theme:
.wp-block-theme-button .button:not(.specificity):not(.extra-specificity)
Those .specificity and .extra-specificity classes sure pop off the page, don’t they? I wonder what they do. Asking the author directly would be a good way to find out, but who wants facts when we can make wild assumptions and project our own opinions on it. After all, that’s what the Internet is founded on!
Perhaps :not() is a way of selecting .button elements contained in a parent .wp-block-theme-button wrapper while excluding any .button that is assigned the .specificicity or .extra-specificity classes that are being used to make more aggressively styled buttons in specific contents.
/* Specificity: 0 1 0 */.button {}/* Specificity: 0 2 0 */.button.specificity {}/* Specificity: 0 3 0 */.button.specificity.extra-specificity {}
What a novel and clever strategy! We’re effectively talking about utility classes that contain no styling and are used purely for bumping up a selector’s specificity when needed. Specificity is low by default but can be made incrementally stronger by adding one or both of the specificity classes.
Is it a good idea, though? I dunno, that’s for you to decide. If it fits your mental model and gets the job done, then hey, go bananas. CSS is poetic in the sense that it can say the same thing in many different ways. This is just another way of increasing a selector’s priority in the Cascade.
I’ll bet the lint in my pocket that at least one of y’all sees this approach as nothing more than an elaborate stand-in for !important. Maybe you were already starting a snarky snippet like this:
.button.important {}/* or */.button.very.important {}
Or, even better, using fake IDs in the :is() arguments to artificially boost the score:
/* Specificity: 1 0 0 💪 */:is(.button, #important) {}
Again, I ain’t gonna poo on anyone’s way of going about things. There’s nothing in the rules that says this is invalid.
(Wait, there are rules for writing CSS?!)
I will, however, go on record saying there may be a happier path for managing specificity than using artificial classes and IDs this way (or even at all). Like, isn’t this a pretty ideal use case for @scope? Scoped styles have this real neat way of setting where a style starts and ends called scoped limits.
@scope (.card) to (:scope > .button) { /* Style rules go here. */}
Check that out: after defining the scoped root, .card, we dropped in the to keyword to define the scoped limit, .button. If this is our markup:
``` Card Heading Card content.
Read Full Story
``
…then CSS knows that the.cardclass is the scoped root where styles begin and to stop applying those styles when it reaches a.button` class in that scope. If we had not determined the scoped limit, then we would have run into a possible styling collision where any of the card’s other styles may have inadvertently match the button, say:
.card a { color: hsl(25, 100%, 50%);}
That will never touch the .button since we explicitly instructed the selector to keep it out of scope. CSS is just so gosh-darned smart like that these days that it’s possible you will never reach for !important again. (You may say you already don’t, but we all make exceptions.)
Between pseudo selectors that influence specificity, scoped styles, Cascade layers, and formatting strategies like BEM, the Cascade is more manageable than ever. And there’s no prescription for how it is, ahem, specifically done. I just love seeing how others handle situations and questioning how I might’ve gone about it. Not to feel better about myself, but challenge my own understanding and way of thinking.
I took the moderator’s seat for a recent Smashing Meets discussion on design systems. Brad Frost, Ben Callahan, and Nathan Curtis sat in as panelists, which was a real dang treat for me because I rarely get the chance to talk shop with adults, unless you count my wife nodding along politely at the dinner table.
The discussion was predictably rich with that lineup of design system buffs. I learned a lot about the strategies, purposes, and implementations behind design system work — and there’s a lot of moving pieces to consider when we’re talking about creating and caring for a consistent language for visual design in team environments. These folks are just smart.
I’m clearly the layman in this bunch. I’m more on the user interaction side of things, but that only means I had large stack of questions I was eager to put in front of them. But more than that, these are folks I’ve known virtually — 10+ years in one case — but have never actually spoken to live like this. What a blast to finally connect in real time to talk about nerdy design stuff.
Penelope Trunk on asking her son to practice writing papers before he begins college:
My son said, “I don’t need to practice. I’ll do the triple AI approach: ask ChatGPT write the paper, tell ChatGPT to rewrite the paper to not sound like ChatGPT, and then use ChatGPT to check the grammar.”
Is that cool, weird, upsetting, clever, or something of a gray area? Yes, all of that.
As a longtime editor, seeing the next generation of writers gravitating toward AI tooling invokes an automatic gag reflex. There’s no need for elaboration; we all know the wide spectrum of opinions thanks to AI posts littering RSS feeds everywhere.
A couple of thoughts and observations on this passage:
- Asking AI to write a draft then re-write itself to not sound like itself merely shows that AI is incapable of hitting the mark on a first try. The more personal your post, the less likely AI is able to replicate it. Conversely, the more generalized your content, the more likely AI is able to replicate it — but at the expense of sounding like ChatGPT.
- If we can ask AI to re-write itself to escape AI-reeking prose, why can’t it do that in the first place? What is it about the second prompt that makes the writing more effective? Or is the second prompt an indication that the first prompt could have been better? In other words, is that a robot factor or a human one?
- The attraction to AI seems less about its quality than it is being able to shovel off responsibility to something else. So, is the root cause a lack of personal responsibility, or is something closer to the likes of simply fearing what to do with a blank page? Because if it’s the latter, AI is a heavy-handed solution where personal prompts could be equally effective at helping writers beat the blank page.
- I would be devastated if someone said my writing reads like AI output. That hasn’t happened, thankfully, but I believe that’s indicative of writing about personal experiences that are outside of AI’s wheelhouse. If I do get that criticism, though, I know it means I didn’t “put enough of myself” into my writing.
- If I have to “put enough of myself” into my writing, then what does that mean for objective writing in journalism? Subjectivity finds its way into any profession, though, so are scientific disciplines, say Physics, bound to let AI write research methodologies to prevent subjective leaks?
- Humans writing about news has always been rife with conflict between objectivity and subjectivity. Is the price of objectivity the loss of subjectivity? Again, AI is a heavy-handed solution here.
- Isn’t subjectivity baked into AI as it is? I mean, it’s scraping content from many varying sources. That includes personal blogs, like this one. My site has been scraped, so is my content polluting the objectivity of AI output that leans on it? Maybe that becomes less of a thing the more training a model goes through?
This seems like something I should already know and can’t believe I’m only now running into a situation where I need to enter a dollar figure in Markdown after writing it all these years.
Here’s the deal: Type a dollar sign before a number and Markdown formats the content like this:
Ewwwwwww…..Apparently $ is used by some sort of “math mode” called MathJax? And it’s used for formatting complex mathematical formulas of the sort that only my college roommate who majored in Quantum Physics can look at and go, Oooooo.
Only, maybe it’s not MathJax under the hood. I haven’t installed it as a VS Code extension, at least intentionally or anything li… oh wait.
Oh. I did indeed install an extension that enables math formatting in Markdown out of the box. It ain’t MathJax but Markdown+Math baked into the extension. This is totally one of those cases of not fully knowing what I’m adding to my stack. Which is a great reminder to completely read things before I wholeheartedly adopt them. This one is of no consequence, really, but it might have been in a different kind of project under different conditions.
Right, right, the solution. It’s easy. Prepend a backslash to the dollar sign and you’re good to go. Seems so obvious once I stop to think about it.
\$105 million
The more you know. ????
Making my way through the ol’ inbox is officially my part-time job. It’s not that I have one single inbox to brush through, but a monolithic cauldron combining eight inboxes.
Maybe you can relate. There’s my personal email. My freelance work email. My school email. And five others that my clients want to use to communicate with me.
Email accounts are tossed around as frequently as talking about the weather, and like a banal conversation, there’s no actual cost to it. It’s not like I paid money for any accounts I’ve been given or incurred some fee when sending messages over the wire.
But as for my personal and freelance email? I indeed pay for those in the form of an annual fee to Hover so I can hook my custom domain up to their servers. Personal branding, FTW! Sure, I could have hooked up to any number of free email platforms. I’m pretty sure it would have been a lot less of a headache to set things up in Gmail with a few clicks than it would have been to figure out all the technical ins and outs of DNS settings. Not only did I pay extra in the form of time, but after breaking something somewhere down the line, my address was dormant, and I lost a week’s worth of opportunity as well.
Minor financial and emotional costs aside, I’m happy with my rig.
Someone recently asked why I would pay anything when I already have a Google account with access to Gmail, an iCloud account with a complimentary inbox, and an ancient Hotmail account that… well, it’s not even Hotmail anymore. However, I can still log into it over at Outlook.com if necessary.
It’s something I don’t like saying, but I agree with: You are the product for free services. I’m no legal expert or self-proclaimed prophet in a tinfoil hat. I believe I’m paying some cost in privacy with Hover if I squint hard enough, but not to the extent that I think I’d be paying with an email account that someone handed me. There’s nothing in Hover’s privacy policies or terms of service that look like this:
…which can be used like this:
Privacy happens to be something I prioritize. I may not always be great at protecting it, but I try to be intentional, and email is one of those cases. There’s always a personal email server, but lordy, that would be even more time and emotional costs than the little I invested in Hover. I went to a liberal arts college, y’all, not some computer science academy.
That’s me. You might love Gmail’s reliability and frustration-free management enough to overlook this or that. It sure does have a lovely interface!
It’s not the most complicated thing in the world. But it did take me a couple of minutes to get it, and I thought I’d write it down in case I need to remember it in the future. You start with a Date property in a Notion database. What I didn’t know up front is […]
I was catching up on my WordPress news this morning over at WP Tavern. Normally, that’s something I’d do in my RSS reader (because RSS is boss), but I hopped over to the WP Tavern site instead and spent more time admiring its image hover effect. I love, love, love little effects like this. It […]
No, this isn’t related to web development or whatnot. But I’ve been trying my hand (quite literally) at lead guitar work. I started playing guitar at 14 but never learned scales or anything beyond basic chord shapes. So, after a few videos on the ol’ YouTube, I’m learning a few of the licks from Tom […]
Well, here we are, a couple of months removed from being, well, removed from my work at CSS-Tricks. And I’m stoked to say… I’ve joined the Smashing Magazine family! I’m a few months in and can confirm what y’all probably already know — that Smashing is flush with some of the nicest, most talented, and […]
I think of how easy it is to overlook all of the amazing things right in from of us.
Like music. I used to crave the latest releases that came out every Tuesday. Remember “New Music” Tuesday? I still enjoy the “Made for You” mixes that Apple Music curates for me each week, but it’s not the same as discovering new music back in The Day™.
I remember, as a young teen, how impossible it was to consume all of the new tunes before the next slate of releases shipped the following week. Back then, money was a constraining factor. It was all too easy to let perfectly good releases go overlooked simply because of not being able to afford a compact disc. I’m still catching up from those past decades of overlooked treasures.
(Speaking of musical treasures, Tom Petty used to host a program on his SiriusXM channel called Buried Treasures. He did something, like, 250 episodes of the dang thing, and it all adds up to a wonderfully curated collection of overlooked songs in rock, R&B, and soul. It’s so good that SiriusXM still has a station dedicated to playing nothing but those episodes. It’s Chanel 711 for all you subscribers. You’re welcome.)
Anyway, overlooking things is something of a human species past time. We’re so danged good at it! How many times have you looked for something you misplaced only to find it already in your hands? I did that just yesterday, thank you very much.
The thing is that the world is always changing. Our little Earth revolves around the sun, which changes the way the sun’s light hits everything in its path, as well as the temperature of the air against your skin. Each passing moment is an opportunity to see, witness, observe, experience, evaluate, and learn. It’s the ability to let the universe inspire you with an endless supply of mini and massive miracles alike that make up what we call “creativity” or the desire to create. The fodder is all there.
I’m currently reading Rick Rubin’s book, The Creative Act: A Way of Being, and I like how he describes the infinite supply of creativity and how it becomes art:
The universe is only as large as our perception of it. When we cultivate our awareness, we are expanding the universe.
This expands the scope, not just of the material at our disposal to create from, but of the life we get to live.
Lord, help me, but I can’t help but think of this through the filter of web design and front-end development. There is no shortage of creative sites out there. That’s not shocking. What’s shocking is the vast number of websites that look alike. Some trends are so pervasive that you almost expect them when a site renders. Yet another header, hero, and three cards layout, eh? Ship it!
It’s no one’s fault, really. I mean, I get how tempting it is to reach for your framework du jour, particularly when time and resources are limited. There’s a good reason Developer Experience (DX) is a thing and why it often leans toward reusable, maintainable, modular, and repeatable patterns. It saves time and money — and sanity, in some cases.
But maybe it’s worth refraining from time to time. Perhaps your next project — personal or professional — can go back to basics, dusting off your vanilla HTML, CSS, and JavaScript chops. Who knows? You might discover some long-forgotten or overlooked CSS property that’s perfect for the situation you’re in. I sometimes visit the CSS-Tricks Almanac and count the properties I’ve either missed or need to re-learn… even ones where I wrote the danged content! A few recents that have re-entered my consciousness:
:enabled: Many of us are already boss at styling:inactivebuttons and form controls, but hey, we get a whole new perspective if we approach styling by what’s enabled first. I like the example in the CSS-Tricks article because it’s a great illustration of how the pseudo-class can be chained with another element (alabelin this case) to control how that other element is styled based on the state of the enabled element.isolation: Good gosh, I wrote about this property in 2015 and still can’t tell you much about it off the top of my head. But I can tell you that Chris recently showed off a demo that usesisolationto prevent an element’sz-indexfrom going “too low” and becoming obscured by other elements. Old dog of a property with a new trick, tell you what!image-rendering: You need some extra control over how scaled-up images render? If you’re working with pixelated art and it’s scaled up to a point where it starts blurring, reach for this to preserve the pixilated style or crisp edges.pointer-events: Oh, how handy this is! Say you style one element so that it overlays another element with transparency so you see the other element through it. Cool cool. But let’s also say that the bottom element contains a button the user ought to tap-click — no bueno! The top element will prevent that. I know this property well but always seem to overlook it when I need it.
Maybe I need to do a post entirely on CSS properties that are easy to overlook — lord knows there’s an entire buried treasure of them to write about!
I could never crack the code of songwriting when I was a kid in high school. Talent may have been the main culprit, that is, a lack of it. Some take to it quite naturally but that was never the case for me. I labored over each piece of a song and thought for some time that I had developed the sort of tortured soul it takes to make beautiful sounds. I was achieving Nirvana! The band, not a transcendental state.
That’s probably because the music was about feelings to me when I was younger, and nothing captured my moods like punk rock which is true for so many other folks. Calling up a few friends and plugging some semi-working guitars into even sketchier amplifiers to jam my heart out at full volume gave me the rockstar vibes I wanted and probably saved my parents a bunch of money on counseling. I tried using that logic to get a raised allowance. You can guess how that went.
But music is more than feeling, right? I mean, the feeling you get from losing yourself in a good tune is real. It’s the result of the song, though. There’s actual work that goes into the craft of songwriting and leads to a feeling. What I did was effectively buy my way to the front of the line when trying to write. Starting with a feeling is pretty much like being dropped into the middle of Disneyland for the first time without a map. There’s so much to look at and experience, but no direction to go on.
The key is to get the map. The problem is that I never knew there was such a thing as a songwriting map to get me from a song to a feeling. Instead, I would bash out power chords in my bedroom. If I could just find a catchy riff, then I could drop some words on top of it, turn up the volume, and be an awesome musician. That’s the alluring trap of arranging angsty chords supported by volume: anyone can do that shit. Maybe that’s why so many try to do it but never take it past puberty.
So, what’s the true North Star of a song? Tom Petty says it’s all about the melody:
I think the melody really defines the song. And the chords you find, and the rhythm you find, they’re all really there to support that melody. Though, sometimes writing, we might work the exact opposite way. Have a chord progression, and then find a melody. But they must support the melody. It’s very important.
Tom Petty, Conversations With Tom Petty (page 157)
That really hooked me when I read it. After the music, once the last chord rings completely out, what’s left of the song? It’s the lingering impression and the feeling it gives you. And how is that represented in your mind? The melody! That’s the darn reason that something like the Doublemint Gum jingle gets stuck in your head.
Interestingly enough, a melody doesn’t have to be linear. Petty continues by elaborating on Roy Orbison’s songwriting:
When I wrote songs with Roy Orbison, he had a completely different way of doing it, which was really unique, and really fascinating to me. He didn’t really care about things being modular at all. He might not ever return to where he started. He was all about melody. And you just move the chords to follow the singing.
Tom Petty, Conversations With Tom Petty (page 318). Emphasis mine.
So, there you go. If you’re impressed with a certain song, it’s likely because of something more than the chord progression, some technicality, a production trick, or even the structure of it all. Sure, those will influence your overall opinion, but they live in servitude to the melody. If content is king on the web, then the melody is the top boss when it comes to songwriting.
Andrew Paul writing for Popular Science:
Amid the multiple waves of dramatic layoffs that have roiled Big Tech in recent months, Microsoft first announced plans in January to ax approximately 10,000 jobs from its global workforce by March 2023. The major cutback occurred as a new “AI arms race” kicked off between companies including Microsoft, Google, and Meta. All three and others are rushing to deliver on their lofty promises of chat programs, text generators, and revolutionary online search aids to consumers. Industry observers continue to urge caution against wantonly unleashing hastily tested, frequently problematic generative AI software.
This is just one of several posts this morning reflecting on the ethics of artificial intelligence. Robin has a great one. So does Ethan. As well as Pixel Envy.
The AI climate feels like some sort of dueling storm systems. Blowing in from the West is lightning in a bottle, this shiny new technology that’s both certain and designed to disrupt markets on a size no scale that none of us has seen in tech since “Web 2.0” stickers found their way on laptop cases. Or gosh, this AI lightning could very well be the most disruptive thing Millennials have seen in their lifetime!
Coming in from the East is an icy weather pattern, a chilling warning about the potential implications of the natural language processing powers of ChatGPT and the like.
Now, I’m no weatherman, but my Tech Doppler 5000 Pro Max Plus tells me these opposing storms will have to converge at some point. They have to, right? At least that’s what I hope. The idea that businesses are already waging an “AI arms race”… that one those very companies, Microsoft, can invest $11 billion into OpenAI while laying off the folks responsible for keeping AI, um, responsible… that real (read: not generated) people are already losing jobs to this tooling… and that all of this is happening in an environment that has little-to-no oversight and regulation… my grandma would have said it best: it just ain’t right.
In addition to not being a weatherman, I’m also no bleeding heart liberal who believes everything ought to be subject to regulatory bodies and systems. But I do think there’s got to be a line somewhere where the implications of a new thing are too great to ignore and warrant more, I don’t know, thought?
I remember the day we drove our first daughter home from the hospital and the gnawing feeling that I was totally unsuited to be a dad. I did what I could to prepare myself for the day it happened, but it blew my mind that we were bringing home a living, breathing human that we would be (and still are) responsible to raise into a delightful member of society. There were no classes to take. No manual or instructions. But I sure did get a lot of feedback from folks about the potential challenges in front of us — many of which were true!
Artificial intelligence feels a little like that to me. This baby of a thing has been in the works for some time — and we’ve all handled some form of AI, like voice assistants and smart speakers — but this is different. And now it’s in the backseat of the car, kicking and screaming to get out as we bring it home. But it’s being treated like it’s a mature technology with clear-cut use cases that are designed to make everyone’s lives better, fitter, and happier.
I thought businesses are supposed to be smart and know that a good business plan requires good objectives. Who knows? Maybe there’s something in the water that’s made everyone working with artificial intelligence forget that. Invest! Integrate! Ship! Faster! Sure, but what are you trying to solve and how is that going to happen? I don’t think we’re anywhere near knowing that when it comes to all this.
But, hey, the tech sure is shiny, right? Maybe too shiny. It’s blinding the path forward, but damn the torpedos.
I have the luxury of being able to think about this! You see, I’m not exactly “unemployed” but I’m no longer doing my primary day job and have nothing but time on my hands. Sure, I’m spending a lot of this time contracting, studying, and just generally spending time with the family. There’s definitely plenty of room for reflection, though.
I’ve been dabbling in front-end development and web design since, umm, I dunno… 2003? 2004? Somewhere around 20 years at this current point in time. That’s an awfully large chunk of my 42 living years. It’s also a surprisingly large number considering that a “career” in web, not only wasn’t really much a thing back then, but something I stumbled into by accident.
I ain’t complaining. The capitol-W Web is an amazing place, and gosh darn if I’m lucky to have carved some sort of career path along it.
Continuing to do something just because it’s been good to you isn’t really a reason to keep going. I’m a firm believer that time is better spent pursuing what you love. And if it happens to pay you nicely at the same time, well great, but that’s not the priority. I’ve always been into art and content, but somehow majored in Economics. Funny enough, web design (and development for that matter) fell in my lap one day. I picked it up, looked at it, and realized there’s a lot more crossover with my interests than I could’ve expected. (Web crosses over with so many things.)
But what would I do if I wasn’t working on the web? There are multiple ways to answer that. Are we talking short-term gigs, or a career change? Is additional schooling, training, or certification ok? Is salary really not that big of a deal? I ain’t gonna worry about any of that and simply go with what sounds appealing to me right this very second, reality be damned.
Cafe ownerI’ve had a semi-secret dream of owning a cafe one day that serves nothing but coffee and pie. That’s it. Brewed coffee (creamer is ok) and a slice of pie from two options that rotate daily. The price? $5 even.
I can see myself running that kind of joint. I bet the overhead is relatively low, but the myopic scope of the food selection could be problematic.
MusicianI mean this in the loosest of terms as a catch-all for various musical activities. Being in a band alone would be tough. Being a sound or recording engineer would be tough as well. And are record labels even a thing these days? But maybe doing all three while serving as a session guitarist for other artists, selling songs, and whatnot would be both fulfilling and sustainable. Or maybe add a record store to the mix? Maybe…
College ProfessorThis is cheating because it’s the path I’m currently on. I’ve been teaching college-level front-end courses on a part-time basis for about three years. I want to dial that up, so I’m in a master’s degree program in Education to become better at designing curriculum and learning experiences. There’s no such thing as a master’s degree in front-end development, so I figure this is the best way to crack into a full-time role teaching it.
I know, I know. I’d still be doing “web development” in a sense, so it’s not like I’d be totally escaping it. But it’s not like I’d be neck-deep writing code either.
Social WorkerThis one surprises me. My dad was a Licensed Clinical Social Worker (LCSW) for the entirety of his career, focusing on children and at-risk youth. He was a local hero in the small farm town of Lemoore, CA. It was hard walking down any street with him without being stopped and thanked for his life-changing help.
I somehow find myself in situations where I feel like I’m providing the same kind of help. Maybe not the life-saving part, but meaningful situations nonetheless. Hey, I’ve even had a therapist tell me I should be charging him for our conversations, so it’s not completely unfounded!
JournalistAny kind, really. I just saw that The Markup is hiring editors and that made my ears perk up a bit. I’d probably be more interested in a local news publication, though. The only problem I see is that a career in journalism is a lot like a career as an independent web developer… something I had done for roughly ten years before accepting my last full-time job. Unless I’m gunning for an editing role, I’d probably find myself in Freelance Land.
I could also see myself working for a magazine. Many years ago, I dreamed of being on the Rolling Stone payroll. I’d still love to do that, even if the magazine industry is equally, if not more, fraught with unsustainable career opportunities. (Blame mega-corporation mergers.) I’m sure my idealistic impression comes from the movie Almost Famous which is definitely not reflective of the music business today, as cool as it depicts things from yesteryear.
Looking at this list makes me laugh out loud. Really. I bought a coffee for the lady sitting next to me to apologize for the noise. Like, is this really the best I can come up with? In a land of make-believe where I’m offered vast blue sky to dream up the most fulfilling career? I mean, I could have said my life-long dream is to be a real-life James Bond. Or a deep jungle adventurer. Or a mad scientist. Or Twitter CEO (ew). Or a… you get the idea.
But these are the things that seem to grab me, at least right now. If I wasn’t working in front-end development, these would be the fallbacks I’d lean on for a new career path, glitzy or otherwise.
I thought I’d cook up a quick demo of diddling container queries. I figured I could define the body as a container and style the heading element I was working on based on the body’s inline size. I know, I know… why the heck would I even want to do something like that when we have media queries and length units that are already tied to the viewport. It was just bone-headed tomfoolery.
But it yielded today’s learning lesson: body styles are ignored when it’s defined as a container.
Turns out that’s expected behavior. My blonde brain finds it tough to grok the reasoning, but it appears to be that a change in body size is really a change in viewport, and because of that:
On body, since it’d change the viewport, it can affect the layout of the element itself. Same thing for writing-mode. Disabling that is a good thing to have.
Florian Rivoal, W3C CSSWG Working Drafts, Issue #5913
That makes sense! And I doubt there are going to be dorks like me trying to change default containment on the body. I mean, who the heck would even try that?!
Oh, right.
Just spitballing here (I’ll wash my hands later) but I’ve probably edited and written somewhere in the vicinity of 3,000 articles at CSS-Tricks. Much heavier on the editing side, of course. Combine that with the fact that I started following CSS-Tricks in its maiden year, 2007, and the overall number of articles is easily doubled.
So. Many. Articles. You wouldn’t be wrong to think my little blonde brain is incapable of remembering even a fraction of what its read, but I’m amazed each time I edit or write just how easily I can recall existing content and link it up to what I’m working on. So, it stands to reason I have a lot of great CSS garbage in my attic. I’d probably have a lot more without all the 90’s music trivia competing for space up there.
(And, yes, I can probably find legit connections between Ace of Bass and something like the Universal Selector… All that she wants, right?)
Anyway, I love making Top 5 lists. If you were to crack open my college journals, you’d inevitably land on a page littered with playlists of the best songs for eating Top Ramen on the floor of your living room a là Rob Gordon in High Fidelity.
There are way, way, way too many CSS-Tricks articles to list just five favorites. But 10? Still difficult, but good enough. So, here are ten CSS-Tricks posts that have left a large imprint on my brain over the years.
Anatomy of a malicious script: how a website can take over your browser (Pablo Mioni)This might be my all-time favorite of all the articles I edited. The way Pablo framed the post makes it read like a mystery thriller… if you consider reverse-engineering JavaScript a thrilling thing. I’ve never known anyone to take the time to unpack a script the way Pablo does, and what he provides winds up being a great look at the thinking process of a JavaScript developer in addition to being a darn good story.
Grunt for People Who Think Things Like Grunt are Weird and Hard (Chris Coyier)Chris penned (err, typed?) this one before I joined the team. I remember it so well because it’s the perfect example of how Chris has this incredible skill to make scary things approachable, and even fun! I remember exactly where I was sitting when I first saw this post (the common space of the condo building where I lived at the time).
I was pretty new to freelancing at the time and knew I needed a repeatable build process for my client projects. I was (and still relatively am) no JavaScript jockey and the idea of defining console commands in something called a “Gruntfile” was nothing short of intimidating. Sure, I may have spent two hours with Chris’ post, but it got me exactly where I needed to be. Gosh, the feeling I got from my first successful Sass compilation was a rush like none other.
Web History series (Jay Hoffman)Yeah, yeah, so I’m cheating a little by choosing a series of articles. Whatever, because every article in here is part of a body of work that adds up to legit book-quality reading. Jay’s writing is masterful. I’d rejoice every time I saw his name in my inbox because I knew I’d not only get a solid draft that required very little editing, but a new part of a great story. I don’t think I’m exaggerating when I say that these collected articles — not to mention everything Jay does over at The History of the Web — is a treasure of the World Wide Web that deserves to be preserved. I’d make it required reading for all new devs if I could.
Magic Numbers in CSS (Chris Coyier)Yep, another one from Chris that predates me joining the team. And yet again, I can recall exactly where I was when I read this: the Highland Park station along the L.A. Metro Gold Line. I had to switch trains for some reason, like a technical glitch… a pretty typical thing for L.A. Metro.
Anyway, I opened this post on my iPad mini and couldn’t put it down. I may have read it three times in a row. What stands out to me is that Chris is basically starting a conversation about what we now refer to as “Defensive CSS” and “Intrinsic Web Design” like a prophet rising from the ashes with a stone tablet of what’s to come.
Save 15% or More on Car Insurance by Switching to Plain JavaScript (Burke Holland)No one writes to my taste like Burke. His brand of satire is everything I love in a piece of writing. And who else is able (or even willing) to get the Smashing Pumpkins involved in a diatribe on the performance implications of React?
And isn’t funny how we’re still talking about the CSS-in-JS performance six years later?
In Defense of a Fussy Website (Sarah Drasner)What’s not to love about an article that encourages you push the boundaries of web design? Sarah is a boss at making extraordinary designs and user interactions, so anything she says I’m instantly drawn to. And if you’re in need for another way to frame creativity, she does it again in “The Empty Box”.
Front-end development is not a problem to be solved (Robin Rendle)Good gosh, I probably could’ve filled out this entire list with nothing but Robin articles. His piece on flex properties ought to be required reading for anyone picking up flexbox. But where Robin always shines most is in deep thoughts — the things we all think but very few of us actually take the time to noodle on and articulate as well as Robin. This is a perfect example of that. If you feel as though a mirror is being held up to your face after reading the last line, then you truly get the power of his words.
I also had the pleasure of editing Robin’s weekly newsletter for CSS-Tricks. He’s got so many goodies in every issue that add so much value to anyone working on the web.
A Serene CSS Dappled Light Effect (Preethi)Preethi has the most curious mind and uses it to dream up creative uses for CSS. Whenever I read her work, I appreciate her penchant for pushing CSS to its limits, but without resorting to esoteric code that the average dev might not get. Add to that the fact that there’s so much nature and realism in her work and it’s almost as if she’s creating tangible life-like objects. I probably stared at her dappled light demo uninterrupted for an hour, recalling the feeling of seeing a Claude Monet painting in person for the first time. This was no less impactful to me.
CSS in 3D: Learning to Think in Cubes Instead of Boxes (Jhey Thompkins)This is one of many articles I worked on with Jhey. I think it was the sixth? Yes, that’s right. The big ol’ “a-ha!” moment of my CSS learning experience was when I realized everything is a box. Well, leave it to Jhey to notch that epiphany to Level 11 because that’s exactly what happened after I read this one. The concept of 3D CSS has always been elusive to me. I mean, conceptually, I get it. But when it comes to practical application, I might not know exactly where to start. This is the starting point, and it couldn’t be taught by a better person.
Reader Mode: The Button to Beat (Eric Bailey)I literally think about this article every time I hit the Reader Mode button in Safari. And that happens quite a bit, with Safari being my default browser and all. The truth is that there is way too much small text on the web, like there’s worry about running out of space on a webpage or something. I have decently working eyeballs. They won’t win me any night-reading competitions, but they do the job as long as I have a cheap pair of Walgreen’s readers perched on the bridge of my nose. But still, I find myself smashing that gosh darned Reader Mode button like it’s going out of style. Thanks to Eric, I now see Reader Mode as my competition when working with text even though it is my best friend when I’m casually browsing sites.
There we go, my CSS-Tricks Top 10. Like any good list, I feel like there’s way too many good ones missing. But perhaps that’s merely because there’s an overwhelming abundance of great content on CSS-Tricks… not that I’m biased or anything.
Chances are that you’re simply unpracticed. I often hear patience referred to as a personal trait, something that comes naturally or genetically. But I find it’s more like a muscle that can be developed and strengthened.
The key to building that muscle — and, in turn, muscle memory — is to put yourself in situations that test your patience. Turns out that patience, like immunity, is best gained through exposure.
You’re the expert of what tests your patience. For me, it’s idle time that’s at odds with my schedule. So, I try to find opportunities that add friction to my need to keep moving. I choose the longest line at the grocery store and gas station. I move behind the slowest car on my way into town and make sure I leave plenty of distance between us. I generally avoid shortcuts where the stakes are low. I embrace awkward silence when someone is done talking.
None of these things make me a better person. They also don’t automatically make me a more patient person. But now I know those situations when I see them and have the experience to respond to them better than I would have otherwise.
…is to do it right the first time. Anything else is a welcome invitation to start again or clean up some cut corner.
I woke up yesterday to the news that DigitalOcean has cut a bunch of jobs from the payroll. It sounds like a pretty big wave, and yes, my job was lopped off with it.
This is my first rodeo with sweeping layoffs… or even losing a job. I always expected I’d feel devastated if something like this were to ever happen, but I’ve gotta admit it’s all good. Anyone who knows me well knows that I never have one job, but many eggs in a number of baskets. That might be influencing my feelings a wee smidge. I realize not everyone is in the same boat.
What’s actually weighing heaviest in my mind is CSS-Tricks. It’s the only reason I was at DigitalOcean in the first place. I’m sad that I’ll no longer be editing or writing for the site, and I’m still processing that I didn’t realize yesterday would be my last day with it. I no longer hold the keys to the castle and my digital fingerprints are being dusted off the door handles as I type.
Alas, things change. Goodbye, website. Goodbye, all you dang talented writers who let me mangle your words. Goodbye, all you typos from umpteen years ago that I can’t unsee and wake me up at 3 a.m. in a cold sweat.
I’m not crying. You’re crying.
But seriously, the pleasure of working with CSS-Tricks has been all mine. I still can’t believe I was ever paid to read drafts and diddle around with code… for eight years!
And, hey, if you’re still with me and reading this, there’s a small ocean of talented technical writers, editors, content strategists, and developers who are now looking for work. You can’t do much better than to pluck someone from that bunch if you’re in a hiring position.
(What am I up to? Of course, thanks for asking! I don’t know. I’m already working on my Master’s Degree in Education. I’m doing that to support the teaching I do — front-end development and WordPress development — at Long Beach City College and Front Range Community College. I still freelance a bit, so I guess I could bump that up a bit more if, perhaps, you want to reach out and work together. Let’s make something!)
Oh, and speaking of hiring, it looks DigitalOcean is in full hiring mode if you’re in the market for work. Well, according to the signature in this auto-reply.
Long live CSS-Tricks! 🤞
Tom Petty’s Hard Promises album was released on May 5, 1981, approximately five months after John Lennon was shot in front of his Dakota apartment in New York City.
What do the two have in common? Not much, really. But there is an interesting history that draws the two together.
Apparently, Tom and the Heartbreakers were hard at work on their new album in an L.A studio. That studio had many rooms where many artists were doing their thing. Ringo Starr was one of those artists, and he had John Lennon scheduled to come sing on his new album. Tom and Co. caught wind of that and were jazzed by the prospect of meeting Lennon.
That never happened, of course. The call came in that John was gone.
As far as I know, John Lennon is the only Beatle that never collaborated with Tom Petty. Sadly, that will always be true, but Lennon did make it on the Hard Promises album as a note to him etched directly into the vinyl: “We love you J.L.”
Credit: WikipediaI raced to check my copy of the album and, sure enough, there it was. Little bits of history like this tickle my brain.
I had to ask. And I got a decent bio out of it.
Geoff Graham is a web developer and designer who writes and contributes to CSS-Tricks. He is known for his expertise in web development, with a focus on HTML, CSS, and JavaScript.
Geoff has been working in web development for many years and has a wide range of experience in different aspects of web development. He writes articles, tutorials and provides code snippets that cover a wide range of topics related to web development, including CSS, HTML, JavaScript and more. He also writes about web design, user interface, and user experience.
He is also known for his contributions to the web development community and has been a regular speaker at web development conferences and events. He also has a personal website and a twitter account where he shares his thoughts and insights on web development and design.
Geoff is one of the many contributing writers at CSS-Tricks, and his articles are a great source of information, inspiration and learning for web developers and designers.
I really felt like posting something. I’m stuck waiting in an uncomfortable situation and needed some place to write to get out of my own head.
For some of you, that’s Twitter. And that’s great. But I reckon that place is as uncomfortable these days as the one I’m in.
Maybe Mastodon toots are your jam. That’s cool. But a bunch of decentralized mini-Twitter instances sounds as cold and lonely as where I’m at.
I sometimes journal in DayOne and have since 2010. But I’ve fallen out of practice and feel a bit of not-journaling shame when I see the date of my last entry.
That’s why I love my website. It’s apolitical. It can’t be bought by a billionaire (maybe). It doesn’t care when I last logged in. It doesn’t push me to gain an audience and could care less if I have a one or not. And the feed is spot-free of algorithms and sponsored content.
But it’s always ready for me to say something if I need to. It’s all signal and no noise, and gives me the peace of mind to write without abandon.
My blog was here for me before Twitter and is still here with me after. I’ve changed home addresses six times since since I first purchased this domain. It outlived MySpace and could outlive Facebook with the way things are going.
A domain. A CMS. An RSS feed. There’s never been a better cocktail for “social media” and probably never will.
My blog. Home sweet home.
I got the nicest note from Ganesh Dahal. He’s a long-time contributor to CSS-Tricks and we’ve worked on a bunch of articles together over the past couple of years. There’s nothing magic in there — just kind words — but it hit me at just the right time. What you have to know is that […]
WordPress has a duotone feature for styling elements — like images — with an SVG filter that overlays and colorizes the thing. It’s a nice feature! But I can honestly do without it on my own little website. Plus, it does this thing where it injects individual <svg> elements right above after the <body>. That’s […]
…so many other industries. Yet, I find that working in front-end development still places a heavy emphasis on one person — or very few people — doing the job. Let’s assume for a moment that you’re tasked with building a website. What kind of website? A big one. Pretty complex, too. That’s really no different […]
Jetpack Boost is a performance module in the all-in-one Jetpack plugin for WordPress. I use it because it makes generating Critical CSS a trivial task which should help, erm, boost site performance. (Perhaps I shouldn’t be using Critical CSS at all, but that’s another story for another day.) Anyway, my local and live WordPress environments […]
You wouldn’t buy one off Craigslist, would you? But you’re essentially doing it when you buy an existing home, right? Context is king.
Images are often wrapped in a figure. Figures often contain a figcaption to “represent a caption or legend describing the rest of the contents of its parentelement.” And best practices advise us to use the alt attribute on an img to “provides fallback (alternate) text to display when the image specified by the element is […]
I never thought I’d return to a W2 job unless I had to. But here I am, by choice, and it’s pretty awesome. That’s because work has never been as flexible as it is right now. I remember a buddy of mine getting an engineering job with Lockheed Martin more than 20 years ago and […]
If you’ve ever worked with me, you know I am the absolute worst when it comes to taking breaks. I tend to start early and power through the rest of the day. I’d say more times than not I look up from my computer and realize the entire day passed me by. And it’s been […]
Do you talk to yourself? Or have silent conversations in your head? Or make up hypotheticals about things that may never happen, people you may never meet, and conversations you may never have? I do all of those — all the time. That’s the act of ruminating. We process our thoughts, re-process them, then re-re-process […]
I saw Son Volt perform at The Aggie Theater here in Fort Collins. My buddy, Scott, joined me. We’re not really “photo” people, so there’s no cute selfie of us hanging out outside or anything. But I did manage to take a shot of the show poster. The show was my first since moving into […]
I recently moved out of Southern CA, an area many folks associate with a “fast” lifestyle. There are all kinds of reasons for this: You gotta move fast to beat rush hour traffic. You gotta move fast to earn all the money it costs to enjoy the cost of living. You gotta move extra fast […]
If there’s one existential fear I have in my career, it’s my age. And maybe “fear” is a strong word here, but it’s something my inner voice chatters about every so often. The first line of code I ever wrote might have been 1999 as I was graduating high school. It was probably some HTML […]
That’s something I say probably ten times a week. Sure, five of those times are directed at my kids but the rest are usually students in my class on my front-end development. You see, The Web is huge. So huge, and yet so tiny. I think because I lead the class, the expectation is I […]
I hate the path our national discourse (if you can call it that) over abortion has taken. Not how it started. Not the current conclusion (if you can call it that). Not that one side ”won” or another side ”lost.” What I hate is how we (the people) have engaged in it. The fingerpointing, the […]
I’m walking out the door and heading for a jet plane to our new home in Fort Collins, Colorado. It’s hard to articulate how important Long Beach is to me. At 17 years, I’ve lived as long here as I did my childhood home, and did as much — if not more — growing here […]
I never realized it’s possible to click the dang label and change “Read More” to whatever else. Might have been obvious to others but there’s neither really any indication the label is interactive, nor is there a way to change the label in the block settings panel. 🤷♂️
I pushed the third major design iteration of my site yesterday, and it’s definitely a new look compared to the second version, though still in the same vein as far as simplicity. And even though there are no leftovers from the first iteration, I’d say version 3 is somewhat spiritually related to it when it […]
It’s been a little over three weeks since the bomb was dropped that CSS-Tricks was acquired by DigitalOcean. The response has been awesome and, to be quite honest, totally unexpected. I’ve known for a long time just how many people visit the site because, hey, analytics. But the numbers have never shown me how much […]
Hey, so this is cool. Chrome 100 shipped yesterday and, with it, a landing page celebrating a curated collection of 100 cool moments between the time Chrome was introduced to the current release. The list of moments spurred a flood of personal memories throughout my career. The landing page itself is pretty slick. So, I […]
Did you know that CodePen used to have a job board? I do, because that’s how I applied to be a technical writer at CSS-Tricks. At the end of 2014, Chris Coyier took an ad out of his own board seeking writers. I wish I had a screenshot of that ad. I also wish I […]
I guess that’s obvious. The styles of a site change when a CSS file is updated. An image is replaced when href is changed to point to one file instead of another. So, of course, a font is going to change if, say, the font file is updated. It’s just something that hasn’t crossed, especially […]
Registering custom fonts in WordPress has typically been a straightforward thing when theming. Do it in the CSS a la @font-face and style away! But now with full-site editing in the wild as of WordPress 5.9, you might want to give yourself or your clients. That’s where the WordPress Webfonts API will come in handy. […]
This is the error message I was greeted with today when launching the LocalWP app: It’s a simple fix, really. The problem (at least to me) is the messaging. Because I have no idea what the heck “Lightning” services are, I found myself looking through preferences, extensions, and more of the app’s nooks and crannies. […]
I learned about this Boolean JavaScript property from today’s Web Tools Weekly newsletter (which you should definitely subscribe to). Louis Lazaris offers this example: That’s a simple test that returns true or false based on whether the image has completed rendering. That sounds like a fantastic use case for something like displaying a placeholder image […]
It’s been more than a few week since WordPress 5.9 shipped, and with it the formal introduction of full-site editing. It’s exciting! It’s weird! It’s… it’s… it’s… different! But as someone who teaches WordPress development, keeping up on this sort of stuff is, you know, part of the job and all. The Site Editor and […]
…a swell fella named Chris took a gamble on little ol’ me and published a post I wrote for his blog. 435 posts, tutorials, and guides later and I’m just as elated today as I was the morning I first saw my name slathered at the top of the site. Thanks, Chris. Being a part […]
OK, OK, just my annual little “hey, hi, howdy” at the end of the year to check in and reflect on what happened this past year.
I’ll get right to it.
Work The most exciting thing about work this year might be that nothing exciting really happened. Same great clients, another year—and that ain’t a bad thing at all.
I’m actually doing less freelancing this year. Now that I’m officially an “employee” at both Long Beach City College and Liquid Web, I’m more of a RoboCop hybrid sort of a thing.
Part W2. Part 1099. Full productivity.
As far as the future of my career is concerned, hold on, let me shake this Magic 8-Ball thingy.
Crap. Seriously, things feel like they’re going exactly as they should. In fact, I expect that some time next year I will be able to give up a client because…
We bought a new house!
That’s right: the Graham Fam is heading to Fort Collins, Colorado! We found out Tuesday last week that our offer was accepted. We couldn’t be happier. This place checks all of the boxes our family needs, not only now but well into the future too.
If all goes according to plan (and I have no reason to believe it won’t), we’ll move in June. That way, the kids get to finish out the school year. Changing states is a big enough transition; no need to add classrooms and friends to the mix all at once.
What does buying a house have to do with my career? Well, we’re saving a ton of money, so much that our overall cost of living will plummet below what we were affording when Marcia and I were married in 2008. And that financial flexibility allows me to work a little less.
Less work may mean less stress. But it also means…
I’m hoping to go back to school I love teaching. So much so that I want to get a graduate degree in Education so I have the experience and qualifications to do more of it at the university level. My plan is to enroll next year and earn a degree in Technology & Leadership, which includes a good amount of training in curriculum design, an area where there’s plenty of opportunity to up my game.
Oh, you know how I said I learned the offer on our new house was accepted last Tuesday? That was maybe 10 minutes after checking into the hospital for…
Emergency back surgery Yup, and I’m still feeling foggy AF as I’m typing. I actually had an appointment scheduled with an orthopedic surgeon in late-January, but the pain crossed the point where I honestly couldn’t imagine making it that long.
It’s not like I was asking for the surgery right then and there; all I really wanted was something to help get me by while I waited for my appointment. But after comparing MRIs from last year and last week, the fine medical staff at Long Beach Memorial Care decided there was no good reason to wait and that cleaning me up now was the right thing to do.
I’m beyond thankful. Things couldn’t have gone any smoother from the time I hobbled in to the time I was wheeled out. I’m not out of the woods yet, but the chronic sciatica I’ve managed for just over 20 years is practically gone. Sure, the incision area is tender and all, but that’s small beans next to the last two decades. It truly feels like I have a new lease on life, which affirms and seems to relieve my long fight with depression. Life feels lighter than ever, and I’m hoping to hang onto that.
Hobbies My back pain put a pause on any physical activity, not just this past year, but last year as well. Anyone close to me knows I’m a super active person.
So, no running. I pivoted to hiking up through September, but that also became too difficult. I turned to walking and light yoga, but soon those too were off the table. I even had to give up gardening.
I wound up getting deep into music and reading. I mean, those have always been things I like, but they’re all I could really do that didn’t require more sitting behind a screen. In fact, I got downright nerdy into Tom Petty and The Beatles, reading biographies and autobiographies, listening to entire catalogs, studying and learning signature chord progressions, and watching a few documentaries. I know it’s dumb but I feel a lot closer to them through their music now that I’ve spent so much time dwelling into the art and what went into it.
My new favorite Tom Petty song? Girl on LSD. The Beatles? Two of Us. Maybe one day I’ll have my own Rickenbacker to play them.
Family All good. I mean, we’ve had both wonderful and challenging times this past year but I’d say we’re net positive on the whole. My daughters are little ladies now, ages nine and five. Parenting is a constant learning activity, but Harper and Alice make it more enjoyable, rewarding, and yes, fun. My medical issues definitely split the normal amount of attention I usually have for them, but they responded like champs and proved that are a wealth of love, empathy, and care at their core.
And that’s not to say anything about Marcia, who easily won Rock Star of the Year. There’s no problem this woman can’t solve. I’m pretty sure this year ranks up there as perhaps her most challenging year and she made it look easier than I imagine anyone possibly could. I definitely contributed my fair share of obstacles (you’ve read the rest of this post, right?) and she only gets stronger. There’s no doubt she’s the backbone of this family right now and I can’t wait to return the favor and make her life a little easier.
Au revoir, 2021 And a big thanks to everyone, including you (yes, you). I know I say it year after year, but the family, friends, and clients in my life are the absolute best. I’m publishing this today, my birthday, and the greatest 41st birthday present I could ask for are all these people. I must have done something right in life to be spoiled with such company.
Thank you, thank you, thank you.
The post 2021. appeared first on Geoff Graham.
I was diddling around and working with this markup:
```
Hidden
Brain
```
I wanted to select the second <span> so, naturally:
.span:nth-child(2) { ... }
And gosh darn it was I surprised that my styles weren’t showing up! Making sure I had the syntax right, I went for:
.span:nth-child(1) { ... }
It worked! More head scratching. Hmm, OK, why not?
.span:nth-child(3) { ... }
By golly, not only did that work but it selected the second <span> in the process, giving me exactly what I had aimed for. CSS apparently selects <br> elements when counting :nth-child(). New to me!
CodePen Embed Fallback
And guess what? It worked when I put any dang element in place <br>. Everything, like <div>, <main>, <input>, <abbr>, <kbd>, you name it.
CodePen Embed Fallback
I can’t find anything in the Selectors Level 4 spec on the :nth-child() side of things. I also looked at the HTML Standard and came up empty on the <span> side of things. I even thought that perhaps it was just a bug with Safari, but it works across the board.
I dunno. Maybe I’m overlooking something obvious. But today I learned that :nth-child() counts all elements when it searches spans. I mean, look, it counts the only <span> inside an element when it’s the last child, like:
```
Hidden
Brain
```
CodePen Embed Fallback The post :nth-child() counts line breaks as spans in CSS appeared first on Geoff Graham.
Hey, so I’m just sitting here in the living room with my family on Thanksgiving. Everyone is either watching TV or reading a book, except for me.
I could be doing a million different things right now. What did my blond brain wind up deciding to do? I’ve got my laptop fired up and CodePen open with nothing but time to spare. So, of course I spent my time recreating the logo for the Hidden Brain podcast.
CodePen Embed Fallback Here’s what I did…
The HTML Gotta keep this as clean and accessible as possible, so:
```
Hidden
Brain
```
That <div> isn’t really necessary. Just a way to scope the styles in case I ever decide to drop this somewhere. Otherwise, all we have is an <h1> and a couple of classless <span> elements.
That line break? I couldn’t find a great way to break the words into separate lines without it so there you have it.
Basic styles The logo is white and usually displayed against a blue background, so we can start with that.
``` .logo { --color-bkg: #22315c; --color-text: #fff;
background-color: var(--color-bkg); display: grid; height: 100vh; place-items: center; } .logo h1 { color: var(--color-text); } ```
OK, so our .logo container takes up the full screen and centers the heading, which is white. I created variables for the background color and text so we can use them again later.
The logo is in all caps which calls for text-transform. As far as the font is concerned, I couldn’t find a perfect one-to-one match. I decided Roboto was pretty darn close, so I merely fetched it from Google Fonts.
.logo h1 {
color: var(--color-text);
font-family: Roboto, sans-serif;
text-transform: uppercase;
}
The font size is just a guess. But whatever it is, we probably should use relative units so it scales and such, like when zooming. I’m using a small line-height value to decrease the vertical space between the words a smidge. We also ought to center-align the actual text while we’re at it.
.logo h1 {
/* Same as before */
font-size: 6rem;
line-height: 0.85;
text-align: center;
}
Believe it or not, that’s largely it for global styling. Let’s focus on the spans next because that’s where the tricks are.
Styling the spans Looking at the logo, the letter “E” in “hidden” and letter “A” in “brain” are inverted, i.e. they are blue against a white background. I thought this would be a simple case defining a background color and setting the text color to white, like this:
/* No bueno */
.logo span {
background-color: var(--color-text);
color: var(--color-bkg);
}
The problem is that the background goes way outside the lettering.
CodePen Embed Fallback
Darnit. That sent my mind down a windy path with mask properties. And to be totally frank, I’m terrible with CSS masking. It’s not that I have no idea what it does; it’s more that the properties are difficult to grok. But I knew it was probably the right way to go.
CSS masks need a couple of things: a mask-image and a mask-size. The idea is that the span background sorta draws around the shape of the mask image and leaves the shape’s fill color alone.
But each span needs a different mask image because the shapes for “E” and “A” are different. I wound up creating two SVGs real quick-like. Can’t really see them since they’re white, but here’s the E and here’s the A if you want them.
.logo {
/* Same as before */
--letter-mask: url(letter-e.svg);
}
.logo span {
background-color: var(--color-text);
mask-repeat: no-repeat;
mask-size: contain;
}
.logo span:nth-child(3) {
--letter-mask: url(letter-a.svg);
}
What’s up with that weird :nth-child(3) selector? Turns out :nth-child() counts any element when it counts spans?!
OK, so here’s how my thinking:
- The spans each have the same
background-colorand we have a variable we can use for it. - The
mask-repeatandmask-sizeproperties are declared on the span because they apply to both letters. - The
mask-imageis set as a variable that points to the letter E shape. Then the variable is redefined as the letter A when we select the second span using thespan:nth-child(3)selector. - Mask images repeat by default, just like background images. So, that’s why we’re declaring
mask-repeat: no-repeat.
We’re getting closer!
CodePen Embed Fallback The rest is fine-tuning I ain’t no fan of magic numbers but know some numeric values have to be to get things just right. And a logo seems like a fine situation for that sort of thing. I didn’t use a lot of them though.
First, the size of the mass are a bit on the big side reduce the line height of the spans to reign them in a bit.
.logo span {
/* Same as before */
line-height: 0.55;
}
That works extremely well for the E, but the A needs a little more tweaking. I decided padding would be helpful:
span:nth-child(3) {
/* Same as before */
padding: 0.4rem;
}
Nice! Now that both letters are the right size and everything, the only thing is to adjust the space between them and the letters around them. If you look closely at the logo, the negative space between the spans and other letters is what forms the shapes of the letters. So, let’s pull those closer together.
margin-inline: .625rem; -1.5625rem; /* 10px -25px */
I made those into variables, but that’s not really necessary.
Here’s the final demo one more time We’re all done!
CodePen Embed Fallback The post Hidden Brain Podcast Logo in CSS appeared first on Geoff Graham.
Well, there’s at least a few folks in the U.S. government that care about it. A group that calls itself the Plain Language Action and Information Network (PLAIN) apparently exists, and has been meeting since the 1990s. They even have an entire website dedicated to avoiding overcomplicated terminology in favor of “plain” language (get it?).
I’m shaking my head at how long it took me to find this. As someone who cares a lot about copywriting, I believe I have a pretty decent pulse on it. This website was initially launched in 1994, which makes me wonder how I could have possibly missed it.
But here it is and I’m glad it exists. There’s a wealth of resources over there, like a complete set of plain language guidelines that is broken into digestible sections centered around principles, including “choose your words carefully” and “keep it conversational,” among others.
My favorite section is how to design for reading. It’s especially to understand how content and design enhance one another. Some tips in there that caught my eye:
- Keep the number of content sections to five or six.
- Creating useful headings for easy scanning.
- Use lists and tables to make data more legible.
- Typography should be simple.
- Use the right type of text formatting in the correct places (e.g. when to use italics instead of bolding, and vice versa).
I like how there’s even an entire page dedicated to different types of testing to help make better content decisions.
The post The U.S. government cares about good copywriting appeared first on Geoff Graham.
Say you’re on a navigation element. You might do something like this in HTML:
```
```
And when styling it, you probably want to strip out the bullet points in CSS:
.nav li {
list-style: none;
}
Then you move right along with your merry day.
The only problem is that wipes out the semantics of the list in VoiceOver in WebKit browsers. With list styling, VoiceOver announces the list and the number of items in it. Without list styling, VoiceOver only announces the content in the list items.
This came up while I was editing an interview with Elad Shechter about his “New CSS Reset” where he discusses his decision to include list-style: none; in the reset:
If we choose not to reset
list-style, it means we can’t use list elements for navigation. This also means that we won’t get any semantics for any other browsers.And now, if I need to choose between most browsers gaining these semantics, and no browsers gaining these semantics, I’m choosing the former, as more browsers gain from it than they lose.
—Elad Shechter, “The New CSS Reset”
I honestly have no super strong opinion on the way browsers handle semantics in this situation. I care more that they’re handling semantics consistently so I’m not making false assumptions or researching cross-browser behavior on every style declaration in my CSS.
But it’s good to know. And, funny enough, this came up almost immediately after when I was editing another article that uses list elements to create an expandable grid. In it, Kev Bonett says:
I still believe that using a
<ul><li>construct for the grid is a suitable approach for a list of product cards. The afforded semantics indicate an explicit relationship between the cards.—Ken Bonett, “Expandable Sections Within a CSS Grid”
That does set up a bit of a battle ground in the brains of front-end developers. We’re aiming for semantics but sometimes have to make a choice that’s based on the “greater good” rather than true cross-platform support.
This also reminds me of a trick that uses “pseudo-commas” to create inline lists. Maybe semantics need to be expanded to consider that sort of use case as well? We have <ul>, <ol>, and <dl> — <il> anyone?
The post Removing list styles removes list semantics in iOS appeared first on Geoff Graham.
I love happy accidents. In this case, my finger slipped on the keyboard when trying to create a new folder on my MacOS desktop (you know, CMD + Shift + N). That’s what I normally type when I want a new folder for a group of files.
Somehow, my middle finger slid off the Shift key and pressed the Control key instead. That apparently creates a new folder and automatically drops any selected files in it.
Just another one of those dumb little things that everyone probably already knows and I luckily stumbled into.
The post Add a group of files to a new folder in MacOS appeared first on Geoff Graham.
I always assumed that web crawlers were either unable or intentionally instructed to avoid indexing iFrame content. Turns out I’ve been wrong all along.
Over at CSS-Tricks, we embed CodePen demos on, like, practically every post we publish. Those are iFrames that contain content hosted on CodePen. Search engines won’t crawl cross-origin content, right? Something something same-origin policy something something.
Assumptions and ignorance are apparently a bad mix because this is what we saw popping up in a Google search for “css backdrop-filter”:
But is this correct?
The problem is that page title is nowhere in the post content. It’s certainly not some landmark element for web crawlers, like an <h1>… or any other heading for that matter. Except that it is exactly that in one of the post’s embedded iFrames.
There it is! ????️ And this is only happening with Google.
DuckDuckGo
Bing
Big deal, right? The bigger news is that… Google indexes iFrames. No, it’s not big news. I mean, it’s news to my 2015 understanding of SEO. Here’s what one (top ranking) search result says on the matter:
The fact that the search engine can crawl website content of iFrames indicates that Google has taken great strides to mitigate detriments caused by inline frames. Although Google’s ability to crawl iFrames is limited, Webmasters can also take advantage of this action by managing inbound links from search engine optimization (SEO) advertising blogs or other content.
Timothy Carter, “Google Is Known to Crawl iFrames on Your Website”
Good, bad… meh? The title of that post is spot on because Google might crawl an iFrame. It also might not. It’s Google’s choice and they apparently decide based on surrounding content and backlinks. I assume (there we go again) this is because iFrames may contain genuinely relevant content and Google wants to consider every bit of valuable content it can to return the most accurate search results.
And like any software or machine, Google’s not always going to be right as far as what it returns. It’s not that it was terribly wrong in our specific case — but it definitely overlooked the most relevant <h1> in the document (iFrame included) in favor of another another one it found.
I suppose the harm, as that article continues, is the possibility of trouncing the authority of source content:
The paradox of Google’s crawling capabilities is that the search engine now penalizes over-optimized websites. Contrary to marketing strategy, the effect of over-optimization can lead to Penguin penalties. This includes iFrames content sharing embed with other sites. This is the danger of embedding content from another unknown website. Without continuous monitoring of backlink detriments, and request for link disavowal from Google, a site can by default get swept under the rug with nearly zero top level results in the future.
That’s a debate for folks with a better understanding of SEO. I’ve clearly shown my ineptitude on the subject. But, if you just so happen to be the owner of the content that is contained in an iFrame and you embed that iFrame on your own site, you might be able to chuck some sort nofollow tag in there or something to prevent that?
<meta name="robots" content="noindex, nofollow">
This just in…
Of course as I’m writing this, Chris found some news from a super good source that is super new (two days old). It doesn’t provide any definitive answer, but does observe Google re-writing <title> tags:
In theory, it sounds like Google may choose to grab any relevant text from a page and display it as the title in SERPs. That’s long been the case for meta descriptions, as Google can dynamically adjust the description in search snippets to better match a user’s query.
And it may just wind up being some sort of experiment.
It’s impossible to draw any conclusions about Google rewriting title tags at this time. Google is known to run A/B tests in live search results, so it’s possible what we’re seeing will go back to normal in the near future.
So for now, it’s sort of a wait-and-see approach.
The post Google indexes iFrame content appeared first on Geoff Graham.
It makes total sense, of course: if content is on the page but isn’t actually showing on the page, then there’s no need to show when searching content. That’s what I assumed it would do, but know for sure after testing in the major browsers.
Search me! The quick brown fox jumped lazily over the big brown dog. Or something like that. ????
To be clear, once the details panel is open, search will indeed pick up the text inside. I can see justification for allowing the text to be searched in the closed state as well. It’s one of those things that you sorta have to draw a line in the sand for, and it seems all browsers have drawn the line at excluding hidden text.
In that sense, in-page search treats text inside a details element the same as text that’s hidden with display: none.
CodePen Embed Fallback
The post Content inside a details element is excluded from in-page search appeared first on Geoff Graham.
New to me, but this has been around a hot minute! I remember when the <picture> element was introduced and thinking, Wow, HTML is getting pretty darn smart. I mean, the ability to specify variations of an image and let the browser choose the most optimal file based on the user’s environment is clever, even if it’s cumbersome to write out.
<picture>
<source media="(max-width:1000px)" srcset="picture-lg.png">
<source media="(max-width:600px)" srcset="picture-mid.png">
<source media="(max-width:400px)" srcset="picture-sm.png">
<img src="picture.png" alt="picture"">
</picture>
It’s really cool that WordPress automatically handles this. Otherwise, I might never do it.
What I didn’t know is that CSS can do the same thing for background-image via the image-set() function:
.element {
background-image: image-set(
"puppy.webp" type("image/webp") 1x,
"puppy2x.webp" type("image/webp") 2x,
"puppy.png" type("image/png") 1x,
"puppy2x.png" type("image/png") 2x
);
}
Again, there’s overhead making all of those images and then specifying them in CSS. But what I like about this is that thew browser will only download the image that’s used—all others are ignored. Plus, we get to use next-generation image formats in there that’s are lighter and faster for browsers that support them, as Ollie explains in his recent post. Such a nice performance win.
Resources * Using Performant Next-Gen Images in CSS with image-set (Ollie Williams, CSS-Tricks) * A Complete Guide to CSS Functions (Eric Bailey, CSS-Tricks) * CSS Image Values and Replaced Content Module Level 4 (W3C specification)
The post How to serve optimized CSS background images based on screen resolution appeared first on Geoff Graham.