Getting Started with Style Queries

The spec includes more than just size queries; it also enables querying a parent's custom property values. This is very useful for combining styles and separating data from design. Let’s take a look at how you use style queries with CSS custom properties.

Using Focal Points, Aspect Ratio & Object-Fit To Crop Images Correctly

In a client’s project recently, I found that their Wordpress setup required content editors to upload four separate versions of a blog post’s featured image at varying dimensions to ensure a correct appearance in the many contexts that the post will be displayed in (i.e. homepage feature, blog list item, blog post page, social media sharing). Most of these images were getting created with the crop tool in GIMP or Photoshop, and not every content editor felt empowered to create all these images, so publishing timelines were getting pushed back waiting for the images to be generated. This is the sort of thing we can solve with modern CSS, so let’s do it! Don’t touch that dial!

Technical SEO Basics for React Developers

Note: Though targeted at React devs, this advice is pretty universal!

As web developers, we need to know a lot more than just coding, and technical SEO is one of those things. Fortunately, it's just a bunch of boring optimizations, but they boost your website performance significantly, resulting in better user experience and Google rankings. Reference this 12-step checklist before launching a new website and you'll have taken care of the most common issues.

Do we need CSS flex-wrap detection?

So, do we need flex wrapping detection? It’s a big yes for me. The above are a few examples of where flex wrapping detection can be helpful. I believe having this feature is the closest thing to a content query in CSS.

Last Baseline Alignment

Alignment using the first and last keywords is now available in all major engines. This means that we can use last baseline alignment as another option when aligning groups of flex or grid items.