CodePen Blog

This is where we post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. There's an RSS feed.
πŸ“ Blog Post

React Email

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 […]

Read More of the article "React Email"
Chris Coyier
Co-Founder
πŸ“ Blog Post

GPT-4 Demo Turns a Crude Sketch of a “My Joke Website” into a Functional Website for Revealing Jokes

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 […]

Read More of the article "GPT-4 Demo Turns a Crude Sketch of a “My Joke Website” into a Functional Website for Revealing Jokes"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: Resizing, Conditionals, and Initials

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: 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 […]

Read More of the article "Chris’ Corner: Resizing, Conditionals, and Initials"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: Gradients, Generators, and Glows

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 […]

Read More of the article "Chris’ Corner: Gradients, Generators, and Glows"
Chris Coyier
Co-Founder
πŸ“ Blog Post

Chris’ Corner: Font Size, Document Hierarchy, and Dialog

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 […]

Read More of the article "Chris’ Corner: Font Size, Document Hierarchy, and Dialog"
Chris Coyier
Co-Founder