Chris Coyier Avatar

Chris Coyier

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.

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