OR 

Learn Eleventy From Scratch

The latest edition of Andy Bell‘s Piccalilli landed in my inbox this morning with a sweet offer: preorder Andy‘s course on learning Eleventy from scratch at a third of the price. Why the plug? No, not sponsorships or anything like that. I just happen to hear a heckuva lot about Eleventy these days. Like how we can use it with Google Sheets as a pseudo-CMS. Or how it can be a key component of an emergency website kit. I Read article

favicon of http://css-tricks.com

CSS Findings From The New Facebook Design

Ahmad Shadeed digs around the new Facebook‘s front-end code. One that stood out to me: .element { inset: 4px 0; /* Which is equivalent to: top: 4px, bottom: 4px, left: 0, right: 0 */ } Whaaat? This is the first I‘ve heard of the inset property. Ahmad said he saw it working in Chrome 80, but it definitely isn‘t for me (nor Safari). It does in Firefox though. Chrome 80 and Firefox 75 It‘s shorthand for top/left/ Read a

favicon of http://css-tricks.com

How to Re-Create a Nifty Netflix Animation in CSS

The design for Netflix‘s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview. One unique characteristic of the UI is its hover behavior. When a show preview expands on hover, the cards next to it are pushed outward so that they don‘t overlap. Like this: It‘s like Bill Murray and Brad Pitt are figh

favicon of http://css-tricks.com

A Grid of Logos in Squares

Let‘s build a literal grid of squares, and we‘ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the big fancy companies that use some product. Putting the logos into squares is a decent way of handling it, as it forces some clean structure Read a

favicon of http://css-tricks.com

Continuous Deployments for WordPress Using GitHub Actions

Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code to a production server often requires paid services. With GitHub Actions, Continuous Deployment is free for everyone. Let‘s explore h

favicon of http://css-tricks.com

CSS-Only Marquee Effect

You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement. You‘ll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick to duplicate the text using text-shadow. Nice to see prefers-reduced-motion in there stopping the effect when it should be. Direct Link to Article Permalink Read article C

favicon of http://css-tricks.com

Some Typography Links

I just can‘t stop bookmarking great links related to typography. I‘m afraid I‘m going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy. I know there are lots of good reasons to be excited about variable fonts. The design possibilities of endless variations in one file is chief among them. But I remain the most excited about the performance benefits. Havi

favicon of http://css-tricks.com

Google‘s Technical Writing Guide

It‘s good! I‘ve written up my advice (sprinkled with great advice from others), but this is way more straightforward nuts-and-bolts training on technical writing. It‘s structured like an actual course, with exercises along the way. I‘m far from an expert here. But between Geoff and I, we end up doing a lot of technical article editing for the sake of clarity. Comedy writers seek the funniest results, horror writers striv

favicon of http://css-tricks.com

Getting JavaScript to Talk to CSS and Sass

JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it‘s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind - something not involving a structural change, but rather putting CSS custom properties and even Sass variables to use. CSS custom properties and JavaScript Custom properties shouldn‘t be all that surprising here

favicon of http://css-tricks.com

typespecimens.io

If you‘re looking for a new typeface for that side project of yours then here‘s a great website by John D. Jameson that collects a bunch of the latest type specimen websites. Everything is on display here, from the daring and bold, to those that are a bit more professional and reserved. Not only are there a ton of great typefaces on display and for sale, but the websites for these specimens are fantastic, too. My favorite at the momen

favicon of http://css-tricks.com

Accessibility Links

Austin Gil has kicked off the first in a five-part series about HTML Forms Right and to starts with semantics. It‘s talking to the we build our front-ends with JavaScript crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered through the JavaScript API FormData. Why is that so vital? Well, no form tag, no FormData. Why else use a form (aside from the Enter-key submission): ‘But Au

favicon of http://css-tricks.com

Rethinking Code Comments

Justin Duke asks if treating code comments like footnotes could help us understand the code in a file better. In his mockup, all the comments are hidden by default and require a click to reveal: What a neat idea! Justin‘s design reminds me of the way that Instapaper treated inline footnotes. Instapaper (circa 2012) I guess the reason I like this idea so much is that a lot of comments don‘t need to be read constantly, - they‘re s

favicon of http://css-tricks.com

Why Do Some HTML Elements Become Deprecated?

The internet has been around for a long while, and over time we‘ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated. Deprecated. It‘s a word we use and see often. But have you stopped to think about what it means in practice? What are some examples of deprecated web elements, and w

favicon of http://css-tricks.com

Web Performance Checklist

The other day, I realized that web performance is an enormous topic covering so very much - from minimizing assets to using certain file formats, it can be an awful lot to keep in mind while building a website. It‘s certainly far too much for me to remember! So I made a web performance checklist. It‘s a Notion doc that I can fork and use to mark completed items whenever I start a new project. It also contains a Read article Web Perf

favicon of http://css-tricks.com

Cloudinary Studio

I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an iframe that comes with a special player. I was curious because, as much as I appreciate the simplicity of just tossing a video on a page, there is one little hurdle that I always forget: you have to use a poster attribute if Read article Cloudi

favicon of http://css-tricks.com

An Annotated Docker Config for Front-End Web Development

Andrew Welch sings the praises of using Docker containers for local dev environments: Here are the advantages of Docker for me: Each application has exactly the environment it needs to run, including specific versions of any of the plumbing needed to get it to work (PHP, MySQL, Postgres, whatever) Onboarding others becomes trivial, all they need to do is install Docker and type docker-compose up and away they go Your development environment is

favicon of http://css-tricks.com