Search
Using a PostCSS function to automate your responsive workflow
5.9.2019
A little while back, you might have bumped into this CSS-Tricks article where I described how a mixin can be used to automate responsive font sizes using RFS. In its latest version, v9, RFS is capable of rescaling any value for value for any CSS property with px or rem units, like margin, padding...
Getting Netlify Large Media Going
20.8.2019
I just did this the other day so I figured I'd blog it up. There is a thing called Git Large File Storage (Git LFS). Here's the entire point of it: it keeps large files out of your repo directly. Say you have 500MB of images on your site and they kinda need to be in the repo so you can work with...
Tips for rolling your own lazy loading
1.7.2019
You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page.
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page...
Planning for Responsive Images
13.3.2019
The first time I made an image responsive, it was as simple as coding these four lines:
img {
max-width: 100%;
height auto; /* default */
}
Though that worked for me as a developer, it wasn’t the best for the audience. What happens if the the image in the src attribute is heavy? On high-end...
Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
27.2.2019
Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing "hacky" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so cool about...
Responsive Designs and CSS Custom Properties: Building a Flexible Grid System
26.2.2019
Last time, we looked at a few possible approaches for declaring and using CSS custom properties in responsive designs. In this article, we’ll take a closer look at CSS variables and how to use them in reusable components and modules. We will learn how to make our variables optional and set fallback...
Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints
25.2.2019
CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really helpful...
Sometimes `sizes` is quite important.
27.7.2018
Paraphrased question from email:
I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of "responsive websites," srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where...
An Almost Ideal React Image Component
21.6.2018
Yes, this is a React component, but regardless if you care about that part or not, the "ideal image component" part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:
Placeholder space (and then flexible responsive styles after...
The Four Big Ways Jetpack Helps with Image Performance
19.6.2018
We've been working with Jetpack around here as a sponsor. It's a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here's one way...
World wide wrist
7.6.2018
After all the hubbub with WWDC over the past couple of days, Ethan Marcotte is excited about the news that the Apple Watch will be able to view web content.
He writes:
If I had to guess, I’d imagine some sort of “reader mode” is coming to the Watch: in other words, when you open a link on your...
Recenze knihy Vzhůru do (responzivního) webdesignu
14.9.2017
Pokud budete hledat knihu o implementaci a návrhu webů, zjistíte, že nemáte pomalu z čeho vybírat. Podobných publikací je jako šafránu. Není se čemu divit. Věci spjaté s tvorbou moderních webů se rychle mění. Psát knihu o tématech, které mohou být za dva roky zastaralé, není snadné. Toto léto však...