Skip to main content
Fresh Article

Render Snarky Comments in Comic Sans

Hilarious idea by Zach Leatherman. To test if a comment is "snarky" or not, there is an npm package up to the task.

On this site, we generally just delete snarky comments, but I still run a WordPress plugin that allows me to "feature" or "bury" comments. It's old but it still works fine in the latest WordPress. We use the bury functionality for comments that aren't rude, snarky, or spam, but also don't add much to the post. … Read article

Article

Building a Conference Schedule with CSS Grid

It’s hard to beat the feeling of finding a perfect use for a new technology. You can read every handy primer under the sun and ooh-and-ahh at flashy demos, but the first time you use it on your own project… that’s when things really click.

I gained a new appreciation for CSS Grid when building a flexible layout for a conference schedule. The needs of the project aligned perfectly with grid’s strengths: a two-dimensional (vertical and horizontal) layout with … Read article

Article

Reduced Motion Picture Technique, Take Two

Did you see that neat technique for using the <picture></picture> element with <source media=""/> to serve an animated image (or not) based on a prefers-reduced-motion media query?

After we shared that in our newsletter, we got an interesting reply from Michael Gale:

What about folks who love their animated GIFs, but just didn’t want the UI to be zooming all over the place? Are they now forced to make a choice between content and UI?

I thought … Read article

Article

Weekly Platform News: Mozilla’s AV1 Encoder, Samsung One UI CSS, DOM Matches Method

In this week's weekly roundup, Vimeo and Mozilla partner up on a video encoding format, how to bind instructions to to form fields using aria labels, the DOM has a matching function, and Samsung is working on its own CSS library.
Link

Hello Subgrid!

Article

Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin

WordPress released their anticipated over to the post editor, nicknamed Gutenberg, which is also referred to as the block editor. It transforms a WordPress post into a collection of blocks that you can add, edit, remove and re-order in the layout. Before the official release, Gutenberg was available as a plugin and, during that time, I was interested in learning how to create custom blocks for the editor. I was able to learn a lot about Gutenberg that I … Read article

Sponsored Link

So, you think you’ve got project management nailed down

Who needs a project manager? You're an organized person who can keep track of your own work, right?

Wrong.

Well, wrong if you're part of a team. The thing about being self-organized is that it's related to project management but not synonymous with it. Case in point: what happens if your project relies on someone else's involvement? Sure you're organized, but can you always say the same about your co-workers? Chances are you need something to keep everyone in sync … Read article

Article

How to Increase Your Page Size by 1,500% with webpack and Vue

What we don’t have are enough articles showing you how to increase your page size. In fact, the only article I could find was this one from the Geek Squad which ended up being about making the font size bigger. This is a good start, but I think we can do better.
Link

Drop caps & design systems

Link

Every Layout

Article

How to Section Your HTML

👋 It has been brought to our attention in the comments (and on Twitter) that some of the techniques used in this article result in a poor user experience for screen reader users. We'll be making updates to make sure the article reflects the best possible information. For now, please see Adrian Roselli's Code Pen below for a more appropriate approach to sectioning the example layout. Thanks for being such an awesome community where we can all learn … Read article

Keep browsing in the archives

Monthly Mixup

Article

Learning to Learn

Article

Design Considerations: Text on Images

Article

Revisiting prefers-reduced-motion, the reduced motion media query

Monthly Sponsor
Thanks, Keen!
icon-link icon-logo-star icon-search icon-star