webstack
Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries
A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping churns out the final result.
A similar thing could be accomplished with flexbox, too...
Monitoring Lighthouse Scores and Core Web Vitals with DebugBear
DebugBear takes just a few seconds to start using. You literally point it at a URL you want to watch, and it’ll start watching it. You install nothing.
It’ll start running tests, and you’ve immediately got performance charts you can start looking at that are tracked over time, not just one-offs.
F..
Helping Your Clients with Unexplained Website Phenomena
Working with clients is always an adventure. Whether it’s last-minute changes to a project or design politics, there’s plenty to keep web designers on their toes. And you never quite know when the next surprise will rear its head.
One thing you can count on, however, is that there will come a time ..
Debugging iOS Safari
How do I debug Safari on iOS?
These are my general steps, starting with not even using iOS Safari.
1. Is this just a small-screen problem?
Lemme just use the device mode in Chrome quick.
Note that this does a smidge more than just display your site in a smaller area: it sends the correct User Ag..
Is It Time to Reset HTML?
HTML is one of the foundational building blocks of the Web. But just as web design best practices and techniques change over time, so does the code we use. As HTML evolves, some of its older markup has been deprecated while other parts have been repurposed.
Does that create more problems for us, th..
8 CSS & JavaScript Snippets for Creating Wild & Crazy Backgrounds
The ability of developers to do amazing things with code never ceases to amaze. Sure, functionality still plays a huge role. But these days, we also see some otherworldly visuals come to life through the help of CSS and JavaScript, among others.
Today, we’re going to focus on an area that is sure t..
A Crash Course in WordPress Block Filters
Blocks in WordPress are great. Drop some into the page, arrange them how you like, and you’ve got a pretty sweet landing page with little effort. But what if the default blocks in WordPress need a little tweaking? Like, what if we could remove the alignment options in the Cover block settings? Or ho..
Are Custom Properties a “Menu of What Will Change”?
PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a link are handled with two different custom properties, one for each..
How Simple, Classic Design Should Work
Dough. Apples. Sugar. Spices. These are all the ingredients you need to make a classic apple pie. Some recipes will call for extra ingredients to make things extra fancy, but none of those ingredients are necessary to create the delicious, simple, comforting dessert we all know and love.
Why am I t..
Code blocks, but better
Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The line highlighter is unique in that it only syntax highlights the..
