CSS-Tricks Icon

CSS-Tricks

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

Ashley Kolodziej CSS-Tricks

A love letter to HTML & CSS

Ashley Kolodziej speaking directly to HTML:

You are the foundation of the Internet. You are the bridge between humans and information. When we say HTML isn’t an expertise in and of itself, when we take you for granted, we leave behind the people and systems who access that information using web crawlers and accessibility technology.

and CSS:

There is a time and place for specificity, and I cherish your ability to manage that. I love your system of overrides, of thinking ahead to what should and shouldn’t be modifiable by another developer easily. I find the appreciation of specificity and !important and contrast and all the beautiful little things you do well increasingly lost in the pursuit of the newest and shiniest frameworks.

A lovely love letter to two of my favorite technologies. 💚

Sarah Drasner CSS-Tricks

Mistakes I've made as an engineering manager

Sarah Drasner:

I’ve been a manager for many years at companies of different scale. Through these experiences, I’ve done my share of learning, and made some mistakes along that way that were important lessons for me. I want to share those with you.

The four mistakes that Sarah details, which we can all learn from:

  1. Thinking people give feedback the way they want to receive it
  2. Trying to do everything yourself as a manager is the best way to help
  3. Communicating something one time is enough
  4. You have to have everything together all the time

Chris Coyier CSS-Tricks

Servers: cool once again

Chris Coyier rounding up recent frontend moves (by Basecamp and React, specifically) back to server-side rendering techniques of old:

So: servers. They are just good at doing certain things (says the guy typing into his WordPress blog). There does seem to be some momentum toward doing less on the client, which I think most of us would agree has been taking on a bit much lately, which asset sizes doing nothing but growing and growing.

Let’s push those servers to the edge while we’re at it.

I agree. Servers are cool. Clients are cool, too. But so are servers.

CSS-Tricks Icon CSS-Tricks

Comparing static site generator build times

Sean C Davis writing on CSS-Tricks:

A colleague of mine built a static site generator evaluation cheatsheet. It provides a really nice snapshot across numerous popular SSG choices. What’s missing is how they actually perform in action.

Sean set out to test 6 of the most popular SSGs on the market today. The results are somewhat expected (Hugo is the super fast), but there are some surprises in there as well (Hugo scales poorly, but it doesn’t matter so much because it’s super fast)

Comparing static site generator build times

Chris Coyier CSS-Tricks

The widening responsibility for front-end developers

Chris Coyier:

This is an extended version of my essay “When front-end means full-stack” which was published in the wonderful Increment magazine put out by Stripe. It’s also something of an evolution of a couple other of my essays, “The Great Divide” and “Ooops, I guess we’re full-stack developers now.

This is a lengthy, sprawling piece on the evolution of frontend development by someone who really gets the web. It also has its own art-direction and design so you’ll want to read it onsite vs in an Instapaper-alike.

Chris Coyier CSS-Tricks

What to use instead of `number` inputs

Chris Coyier:

You might reach for <input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems.

(We discuss the uncanny valley of number inputs on this JS Party episode about the stale parts of browsers.)

Turns out the best practice (just use text inputs) has a twist to it: inputmode!

CSS-Tricks Icon CSS-Tricks

Why JavaScript is eating HTML

Mike Turley for CSS-Tricks:

JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.

I get this question occasionally and I often have trouble answering it. All of the materials I’ve found on this topic are written for an audience that is already familiar with JavaScript — which is not terribly useful to those who focus on HTML and CSS. But this HTML-in-JS pattern (or something else that provides the same benefits) will likely be around for a while, so I think it’s an important thing that everyone involved in web development should understand.

Chris Coyier CSS-Tricks

JAMstack vs. Jamstack

Chris Coyier:

The “official website” changed their language from JAMstack (evoking the JavaScript, APIs, and Markup acronym) to Jamstack. It’s nothing to be overly concerned about, but I care as someone who has to write the word in a professional context quite often. If we’re going to “Jamstack,” so be it.

I prefer JAMstack, myself, but I think the Ajax analogy he quotes is an apt one. Aside: if this trend continues, Chris and the team might need to rename the site to “Jamstack-Tricks” soon.

Oh, and while we’re here: It’s Changelog not ChangeLog 😄

CSS-Tricks Icon CSS-Tricks

The rising complexity of JAMStack sites and how to manage them

When you add anything with user-generated content or dynamic data to a static site, the complexity of the build process can become comparable to launching a monolithic CMS. How can we add rich content to static sites without stitching together multiple third-party services?

Every time I get into the nitty gritty of JAMStack implementations with anything but static content sites I end up saying (or merely thinking to myself), “This sounds like a whole lot of work to avoid some server-side rendering…”

This piece on CSS Tricks appears to back up that premonition:

Despite my enthusiasm, I’m often disheartened by the steep complexity curve I typically encounter about halfway through a JAMstack project. Normally the first few weeks are incredibly liberating. It’s easy to get started, there is good visible progress, everything feels lean and fast. Over time, as more features are added, the build steps become more complex, multiple APIs are added, and suddenly everything feels slow. In other words, the development experience begins to suffer.

The good news is there are many smart, talented folks working on solving the various challenges that JAMStack sites face.

Sameera Kapila CSS-Tricks

The communal cycle of sharing

Our friends at CSS Tricks are doing an awesome year-end series where they ask builders they admire the question, “What about building websites has you interested this year?” and each person writes a post about it. What gets Sameera Kapila excited resonates with me:

I realize we’re moving from a place where we’re not just sharing what we have, we’re working to build and improve on what others have built. And then sharing that, and the cycle continues. In a way, we’ve been doing this all along but it feels more noticeable now. In a way, we’re not just building websites, but building and iterating the way we build websites, and that is exciting.

Chris Coyier CSS-Tricks

Should a website work without JavaScript?

Chris Coyier can’t help but chime in after listening to our recent debate episode of JS Party.

I enjoyed all the stumbling around the terminology of “web apps” and “web sites” (web things!). This is such a weird one. It’s so easy to picture the difference in your head: it’s like facebook versus a blog! But when you start trying to define it exactly, it gets really murky really quickly and the distinction loses any value, if it had any to start with. Here’s more on that.

Chris has a lot of great insights here. Whether you agree or disagree, I think we can all get on board with one thing: we make web things!

CSS-Tricks Icon CSS-Tricks

Animating with clip-path

I’ve always felt a little put off by the clip-path property, thinking it was rather obscure and probably not worth learning. Boy was I wrong. In this article Travis Almand takes us through how incredibly powerful this property is, and how by animating it you can create a range of beautiful transition effects with a few simple lines of CSS.

Phil Hawksworth CSS-Tricks

Roll your own lazy loading

Even though there’s a promise of native lazy loading with the launch of Chrome 75, between now, then, and the time period for the other browsers to adopt it as well, we have to continue developing our own lazy loading implementations using JavaScript. From Phil Hawksworth on CSS Tricks:

In this post, we’ll look at an implementation that’s already been covered in brief detail in this post by Preerhi. We’re going to expand on that so you can add your own implementation of lazy loading to your site site as I’ve done on this little demo site.

Phil covers these topics…

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…

Eric Bailey 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.

0:00 / 0:00