Chris Coyier Avatar

Chris Coyier

Chris Coyier CSS-Tricks

CSS-Tricks is joining DigitalOcean

Chris does a great job answering what will surely be the most common question about this acquisition in his announcement post:

  1. What happens to CSS-Tricks?
  2. Will you still be running CSS-Tricks?
  3. Why now?

The amount of value this team has given to the web world over the years is immeasurable.

I sincerely hope DigitalOcean turns out to be a worthy new steward of this precious resource and the site’s best years are ahead of it. 🤞

JS Party JS Party #200

Best of the fest! Volume 1

JS Party listeners and panelists celebrate our favorite moments from the past 100 episodes! You’ll hear from over 20 of your favorite voices across 14 episodes. We also share some behind-the-scenes and read/hear from listeners! Here’s to the last 200 episodes, and the next 200 as well. 🥂

Chris Coyier CSS-Tricks

Have you ever had an inkling to write a tech book?

The linked post is about a new book by Jeremy Wagner, but I just wanted to highlight the excellent aside on book writing by Chris Coyier near the end:

Write a blog post first, or maybe a whole bunch of blog posts. That’ll prove you clearly have words to say about this. Plus it will get the energy of your idea into the world. You might get feedback and constructive insights on the idea as it is shared. Then, hopefully, you can turn that blog post into a talk. That’ll really get you thinking deeply about your idea while getting even more comfortable with the idea of sharing it clearly. And, if all goes well, turn all of that into a book!

Looks like Jeremy did just that.

Chris Coyier CSS-Tricks

On (the lack of) iOS browser choice

Chris Coyier does a great job rounding up and summarizing conversations around #AppleBrowserBan:

Just last week I got one of those really?! 🤨 faces when this fact came up in conversation amongst smart and engaged fellow web developers: there is no browser choice on iOS. It’s all Safari. You can download apps that are named Chrome or Firefox, or anything else, but they are just veneer over Safari. If you’re viewing a website on iOS, it’s Safari.

Chris Coyier CSS-Tricks

Choice words about the upcoming deprecation of JavaScript dialogs

Chris Coyier is not too pleased about browsers changing the way cross-origin iframes handle certain native JavaScript calls such as alert and confirm:

Cross-origin iframes are essentially the heart of how CodePen works. You write code, and we execute it for you in an iframe that doesn’t share the same domain as CodePen itself, as the very first line of security defense. We didn’t hear any heads up or anything, but I’m sure the plans were on display.

The change is about security and performance, it seems. There’s a workaround using postMessage, but that comes with its own problems that Chris details. Overall, it seems the way this change is being rolled out is more of a concern than the change itself…

Believe it or not, I generally am a fan of Google and think they do a good job of pushing the web forward. I also think it’s appropriate to waggle fingers when I see problems and request they do better. “Better” here means way more developer and user outreach to spell out the situation, way more conversation about the potential implications and transition ideas, and way more openness to bending the course ahead.

Chris Coyier CSS-Tricks

Images are hard.

I believe Chris Coyier put that period at the end of this post title for a reason:

Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the src attribute and you’re done. Except that there are (counts fingers) 927 things you could (and some you really should) do that often go overlooked. Let’s see…

He goes on to list 15 bullet points of things to consider. This images situation is actually a microcosm of the web (and all software?) itself: it appears easy/simple at first, but the deeper you go, the more dizzying the depth.

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.

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!

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 😄

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!

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…

Chris Coyier css-tricks.com

The Great Divide

Next week’s episode of JS Party digs into this subject, so make sure you subscribe or check it out!

Two front-end developers are sitting at a bar. They have nothing to talk about.

The divide between front-enders can be summarized by those whose “interests, responsibilities, and skill sets are heavily revolved around JavaScript,” and those whose “interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.”

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.

0:00 / 0:00