CSS-Tricks Icon

CSS-Tricks

CSS-Tricks is a site about all things web design and development.
css-tricks.com • 36 Stories
All Sources

Chris Coyier CSS-Tricks

Using Netlify functions to send emails with a JAMstack-style site

How do you send email from a JAMstack-style site? Chris Coyer writes on CSS-Tricks:

Let’s say you’re rocking a JAMstack-style site (no server-side languages in use), but you want to do something rather dynamic like send an email. Not a problem! That’s the whole point of JAMstack. It’s not just static hosting. It’s that plus doing anything else you wanna do through JavaScript and APIs. Here’s the setup…

CSS-Tricks Icon CSS-Tricks

Reader mode: the button to beat

Eric Bailey writing for CSS-Tricks:

Good design isn’t about forcing someone to walk a tightrope across your carefully manicured lawn. Nor is it a puzzle box casually tossed to the user, hoping they’ll unlock it to reveal a hidden treasure. Good design is about doing the hard work to accommodate the different ways people access a solution to an identified problem.

For reading articles, the core problem is turning my ignorance about an issue into understanding (the funding model for this is a whole other complicated concern). The more obstructions you throw in my way to achieve this goal, the more I am inclined to leave and get my understanding elsewhere—all I’ll remember is how poor a time I had while trying to access your content. What is the value of an ad impression if it ultimately leads to that user never returning?

Fantastic article full of amazing resources. As web developers, we want people to experience our site the way it was intended. But that means we have to put in the work to make that experience easy, accessible, and clutter-free.

Robin Rendle CSS-Tricks

Front-end development is not a problem to be solved

Robin Rendle writing on CSS-Tricks:

We should see front-end development as a unique skillset that is critical to the success of any project.

I believe that’s why frameworks and tools like Bootstrap are so popular; not necessarily because they’re a collection of helpful components, but a global solution that corrects an inherent issue.

Bootstrap isn’t a skill though — front-end development is.

It’s supremely ironic that front-end development is incredibly undervalued by many, yet those same people use frameworks because moving a box around in CSS is “hard.”

Chris Coyier CSS-Tricks

The shapes of CSS

Chris Coyier on CSS-Tricks:

By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element.

Ok, so the first couple ones are easy, but the lower you go on the page, the more complex the shapes become. I had no idea you could do this with just CSS, much less with a single HTML element.

Chris Coyier CSS-Tricks

Preventing a grid blowout

Chris Coyier on CSS-Tricks:

Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.

That’s somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside.

Chris explains something here which may look pretty simple, but would’ve taken me hours to debug. The distinction he makes between the 1fr and auto defined column is game changing on its own.

Chris Coyier CSS-Tricks

View source?

I have to agree with this hard-line stance from Chris Coyier on the subject of view source:

I literally don’t care at all about View Source and wouldn’t miss it if it was removed from browsers. I live in DevTools, and I’ll bet you do too.

I want my website to arrive at light speed on a tiny spec of magical network packet dust and blossom into a complete website. Or do whatever computer science deems is the absolute fastest way to send website data between computers.

I’m much more worried about the state of web performance than I am about web education. But even if I was very worried about web education, I don’t think it’s the network’s job to deliver teachability.

What about you? Is view source more important than web performance? Is DevTools a worthy replacement for view source?

Chris also cites comments on the subject from Tom Dale, Jonathan Snook, and Chris Heilmann.

CSS-Tricks Icon CSS-Tricks

Hey hey `font-display`

Chris Coyier:

Y’all know about font-display? It’s pretty great. It’s a CSS property that you can use within @font-face blocks to control how, visually, that font loads.

What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading.

Font loading strategy is pretty important. It’s one of the reasons I searched far and wide to improve the performance of fonts on Brightly Colored. Fortunately, if you’re using @font-face, using font-display is as easy as using one line of CSS, and you’ll see the performance improvements immediately. Unfortunately, as Chris points out, there’s no performant way to get around either FOUT or FOIT.

CSS-Tricks Icon CSS-Tricks

Keep pixelated images pixelated as they scale

Chris Coyier:

We’re quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it’s the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let’s say you’d really rather not it do that. Say the image is already pixel-y (pixel art), or you prefer the look of a pixelated upscaling.

You can do it!

File this one in the “I had no idea this existed” category. Really simple CSS trick, but definitely a useful one.

Player art
  0:00 / 0:00