Freelancing

CSS-Tricks

Learn Eleventy From Scratch

19 hours 24 minutes ago

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 “Learn Eleventy From Scratch”

The post Learn Eleventy From Scratch appeared first on CSS-Tricks.

Geoff Graham

How to Re-Create a Nifty Netflix Animation in CSS

21 hours 7 minutes ago

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 fighting for the… Read article “How to Re-Create a Nifty Netflix Animation in CSS”

The post How to Re-Create a Nifty Netflix Animation in CSS appeared first on CSS-Tricks.

Chris Geelhoed

CSS Findings From The New Facebook Design

21 hours 7 minutes ago

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/right/… Read article “CSS Findings From The New Facebook Design”

The post CSS Findings From The New Facebook Design appeared first on CSS-Tricks.

Chris Coyier

A Grid of Logos in Squares

1 day 14 hours ago

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 article “A Grid of Logos in Squares”

The post A Grid of Logos in Squares appeared first on CSS-Tricks.

Chris Coyier

Continuous Deployments for WordPress Using GitHub Actions

1 day 21 hours ago

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 how to set that up.

DevOps is for everyone… Read article “Continuous Deployments for WordPress Using GitHub Actions”

The post Continuous Deployments for WordPress Using GitHub Actions appeared first on CSS-Tricks.

Steffen Bewersdorff

CSS-Only Marquee Effect

2 days 23 hours ago

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 ArticlePermalinkRead article “CSS-Only Marquee Effect”

The post CSS-Only Marquee Effect appeared first on CSS-Tricks.

Chris Coyier

Some Typography Links

4 days 14 hours ago

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. Having a … Read article “Some Typography Links”

The post Some Typography Links appeared first on CSS-Tricks.

Chris Coyier

Getting JavaScript to Talk to CSS and Sass

4 days 20 hours ago

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. One thing they’ve always been able to do since … Read article “Getting JavaScript to Talk to CSS and Sass”

The post Getting JavaScript to Talk to CSS and Sass appeared first on CSS-Tricks.

Marko Ilic

Google’s Technical Writing Guide

4 days 20 hours ago

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 me and Geoff, we end up doing a lot of technical article editing for the sake of clarity.

Comedy writers seek the funniest results, horror writers strive for the scariest, and technical writers aim for the clearest.

Read article “Google’s Technical Writing Guide”

The post Google’s Technical Writing Guide appeared first on CSS-Tricks.

Chris Coyier

Accessibility Links

5 days 16 hours ago

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 Austin,

Read article “Accessibility Links”

The post Accessibility Links appeared first on CSS-Tricks.

Chris Coyier

typespecimens.io

5 days 16 hours ago

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 moment … Read article “typespecimens.io”

The post typespecimens.io appeared first on CSS-Tricks.

Robin Rendle

Why Do Some HTML Elements Become Deprecated?

5 days 21 hours ago

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 why … Read article “Why Do Some HTML Elements Become Deprecated?”

The post Why Do Some HTML Elements Become Deprecated? appeared first on CSS-Tricks.

Ryan Grist

Rethinking Code Comments

5 days 21 hours ago

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 sort of … Read article “Rethinking Code Comments”

The post Rethinking Code Comments appeared first on CSS-Tricks.

Robin Rendle

Web Performance Checklist

6 days 11 hours ago

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 Performance Checklist”

The post Web Performance Checklist appeared first on CSS-Tricks.

Robin Rendle

An Annotated Docker Config for Front-End Web Development

6 days 13 hours ago

Andrew Welch sings the praises of using Docker containers for local dev environments:

Here are the advan­tages of Dock­er for me:

• Each appli­ca­tion has exact­ly the envi­ron­ment it needs to run, includ­ing spe­cif­ic ver­sions of any of the plumb­ing need­ed to get it to work (PHP, MySQL, Post­gres, whatever)
• Onboard­ing oth­ers becomes triv­ial, all they need to do is install Dock­er and type docker-compose up and away they go
• Your devel­op­ment envi­ron­ment is entire­ly dis­pos­able; if some­thing goes wrong,

Read article “An Annotated Docker Config for Front-End Web Development”

The post An Annotated Docker Config for Front-End Web Development appeared first on CSS-Tricks.

Chris Coyier

Cloudinary Studio

6 days 13 hours ago

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 “Cloudinary Studio”

The post Cloudinary Studio appeared first on CSS-Tricks.

Chris Coyier

Performant Expandable Animations: Building Keyframes on the Fly

6 days 21 hours ago

Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work.

You probably know that animations should run on the composite layer. (I won’t extend myself here, but if you want to know more, check this article.) That means animating transform or opacity properties that don’t trigger layout or … Read article “Performant Expandable Animations: Building Keyframes on the Fly”

The post Performant Expandable Animations: Building Keyframes on the Fly appeared first on CSS-Tricks.

Bernardo Cardoso

Let a website be a worry stone

6 days 21 hours ago

Ethan Marcotte just redesigned his website and wrote about how the process was a distraction from the difficult things that are going on right now. Adding new features to your blog or your portfolio, tidying up performance issues, and improving things bit by bit can certainly relieve a lot of stress. Also? It’s fun!

What about adding a dark mode to our websites? Or playing around with Next.js? How about finally updating to that static site generator we’ve always … Read article “Let a website be a worry stone”

The post Let a website be a worry stone appeared first on CSS-Tricks.

Robin Rendle

Hacking Tutorials

iOS Programming