Web Sockets, Web Workers, Service Workers… these are terms you may have read or overheard. Maybe not all of them, but likely at least one of them. And even if you have a good handle on front-end development, there’s a good chance you need to look up what they mean. Or maybe you’re like me and mix them up from time to time. The terms all look and sound awful similar and it’s really easy to get them confused. So, let’s break them down together and distinguish Web S..

• 0 Comment

Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients and I thought I’d link some of the more interesting pieces. Day 22: conic gradients — Manuel Matuzovic looked at conic gradients on Day 21 of his 100-day series about modern CSS, providing a nice high-level look at colors, angles, p..

• 0 Comment

This is a continuation of my last article about “Rendering External API Data in WordPress Blocks on the Front End”. In that last one, we learned how to take an external API and integrate it with a block that renders the fetched data on the front end of a WordPress site. The thing is, we accomplished this in a way that prevents us from seeing the data in the WordPress Block Editor. In other words, we can insert the block on a page but we get no preview of it. We only ge..

• 0 Comment

We rely on CSS Media Queries for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s being used, and (2) a specific feature of the browser, device, or even the user’s environment. So, say we want to apply certain CSS styling to a printed document: @media print { .element { /* Style away! */ } } The fact that we can apply styles at a certain ..

• 0 Comment

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the CSS outline property. That might sound odd because we generally use outline to draw a simple line around an element — sorta like border but it can only draw all four sides at once and is not part of the Box Model. We can do more..

• 0 Comment

Simon Goellner (@simeydotme)’s collection of Holographic Trading Cards have captured our attention. Under the hood there is a suite of filter(), background-blend-mode(), mix-blend-mode(), and clip-path() combinations that have been painstakingly tweaked to reach the desired effect. I ended up using a little img { visibility: hidden; } in DevTools to get a better sense of each type of holographic effect. Josh Dance (@JoshDance) replied with a breakdown of the effects t..

• 0 Comment

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent element from a child selector — but there is so much more that :has() can help us solve. One of those things is re-inventing the clickable card pattern many of us love to use from time to time. We’ll take a look at how :has() can help us handle linked cards, b..

• 0 Comment

As front-end developers, we’ve wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio, get finer-grained control over our colors, select an element based on its children’s properties, manage layers of specificity, allow elements to respond to the width of their parents… the list goes on and on. And now that we got all we wished for and more, some of us are asking — do we now have too much CSS?..

• 0 Comment

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients to create awesome visual effects. We are also going to introduce the CSS mask property for more complex decorations and hover effects. Fancy Image Decorations series Single Element MagicMasks and Advanced Hover Effects (you are here!)Outlin..

• 0 Comment

I love it when there’s a sense of synergy in the blogosphere. First, I caught Nick Heer’s coverage of Meta ending support for Instant Articles, its proprietary format for stripped-down performant news articles. He also compares it to the similar demise of AMP, Google’s answer to Instant Articles. Then I came across a new one from Chris Coyier where he goes on to discuss the big issue with proprietary models of content syndication, whether it’s Meta Instant Articles..

• 0 Comment