Lemme show off some cool SVG-related things this week. Gotta love SVG. It’s this graphics language built right into the web platform that has a ton of capability and is always right there waiting for us when we need it. Thanks the web! Portability is a cool SVG feature. You can copy and paste a bit of SVG right into HTML and that’s not only functional but actually, a pretty good way to do it. That way you can style it freely and no additional network request is made. Ya know… that’s how our icons feature works here on CodePen. The Assets panel on CodePen offers one-click SVG icons from Font Aw ..read more

Only in the last year have I started switching us over to MJML here at CodePen to help craft our HTML emails. Aside from a few minor rough edges, it’s been a nice upgrade from hand-writing the email HTML. Not only was that tricky and time-consuming, but it was also error-prone. The switch-over was in part inspired by some Microsoft Outlook bugs with our CodePen Spark email which MJML helped resolve. But I have been eying up React Email recently. It’s really just JSX Email as React features are largely irrelevant here. It’s just a nice templating language abstraction. I feel fairly comfortable ..read more

We have quite a history with real-time technologies here at CodePen. We’ve had all sorts of things in production from hand-rolled and self-hosted ideas, to services that don’t even exist anymore, to well-known products like Google Firebase’s Realtime Database. Sometimes our real-time needs are fairly complex, like our Collab Mode PRO feature that allows people to code within the same code editors at the same time, which is capable of conflict resolution and that kind of exotic science. Sometimes our real-time needs are more basic. Our real-time Live View is closer to the basic side. It has jus ..read more

I love Henry’s guide: How to Make a Website. There is precious little recent instructional material on how you can build a website, a perfectly great website, using just the raw materials of the web. Raw HTML & CSS, as it were. But that’s not all that Henry’s guide is about. It’s full of holistic advice going well beyond web design: Be kind and curious and humble when you’re working with folks, and be extra forgiving of their mistakes, so when the time inevitably comes that you make your own, there’s perhaps some goodwill in the vault for you.  ? I do suspect if it’s not just lack o ..read more

Here’s the clip from the original YouTube where Greg Brockman shows it off. Ultimately GPT-4 produced HTML output, which Greg copy-pasted into CodePen in order to show it off. What a big release! Shawn Wang notes: To use simple measures of how anticipated this was – GPT-4 is already the 11th-most upvoted Hacker News story of ALL TIME, the Developer Livestream got 1.5 million views in 20 hours (currently #5 trending video on all of YouTube) and the announcement tweet got 4x more likes than the same for ChatGPT, itself the biggest story of 2022. Certainly, this c ..read more

Ahmad Shadeed recently wrote: I like to think of CSS as a conditional design language. It totally is! We tend to think of stuff like @media queries as the conditional part: @media (max-width: 550px) { .grid { grid-template-columns: 1fr; } } That’s true, and new stuff like container and style queries are giving us more “conditional” stuff to work with. But it might be better to think of literally everything in CSS as conditional. Every selector you can write is conditional in some way. Just a sector like aside is conditional — it says, only style elements that match that selector. T ..read more

Radial gradients do represent a bit of a leap up in complexity compared to linear gradients in CSS. With linear gradients, you sorta pick a direction and plop some stops on there. The default direction, to bottom, you don’t even have to include if that’s the direction you want, and two color stops with no additional values just mean “all the way at the top to all the way at the bottom”. Something like this linear-gradient(darkblue, blue). Good news: radial gradients do maintain making most parameters optional, so radial-gradient(darkblue, blue) is still functional and half-decently-useful. But ..read more

From Alvaro Montoro: almond.css This is one of those “classless” CSS libraries — CSS that you apply to semantic HTML to apply a nice look. You apply no classes or any other selectors — it totally removes that mental exercise. The only selectors it uses are HTML elements. A perfect sort of choice for things like “I just need to style this one-pager of HTML quick”, Markdown output, or dare I say, a demo Pen. (Saw via Louis Lazaris‘ article Top Front-End Tools Of 2022 on Smashing Mag. It is interesting how these libraries are always quite popular in the context of Louis’ newsletter.) There are ot ..read more

How about some accessibility quick hits! It’s a bit hard to keep track of when using certain CSS value types is bad. For a while, using pixel (px) values in media queries was considered a bad practice as the breakpoints didn’t trigger as expected when a user zoomed in. But then that changed, and media queries do now, and using pixels for media queries isn’t really a bad practice any more. But is using px still a bad practice in other cases? Yes, says Josh Collingsworth. … when or if the user changes their preferred font size, if you’re using em and rem, all the text on your web ..read more

Maggie Appleton calls “Programming Portals”: Small, scoped areas within a graphical interface that allow users to read and write simple programmes brb updating all the marketing copy around here. I like how casually Brad Frost describes essentially all of web design. It all boils down to stuff and layout: The bulk of a design system’s component library can be thought of as stuff. Buttons! Accordions! Form controls! Stuff! Layout and grid serve as boxes to put all that other stuff, and as such they require some different thought and consideration than other stuff-shaped components. Eve ..read more