Wanna see a CSS magic trick?
Ryan is joined by Chris Coyier, founder of CSS Tricks and CodePen, to talk all about what the state of the art of CSS is today, including new features like variables and scroll-driven animations. They talk about the importance of accessibility in web design, how the web went from table-based layouts to modern CSS techniques, and exciting developments coming to CodePen 2.0.
Episode notes:
Chris built CSS-Tricks, a website all about building websites, and ran it for 15 years, from 2007 to 2022, before selling it to DigitalOcean.
CodePen is an online community for frontend developers where you can build, deploy, and show-off your code. CodePen 2.0 is their all-new IDE that is currently in private beta.
Check out Chris’ blog and his podcast ShopTalk.
TRANSCRIPT
See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.
ShopTalk & Friends (Friends)
Chris Coyier and Dave Rupert join Adam and Jerod for a ShopTalk & Friends conversation on the viability of the web, making content, ads to support that content, Codepen’s future plans, books, side quests, and social networks devaluing links.
Join the discussion
Changelog++ members get a bonus 11 minutes at the end of this episode and zero ads. Join today!
Sponsors:
Sentry – When your app breaks, fix it faster with Sentry Use the code CHANGELOG when you sign up to get $100 off the team plan. Learn more about what they shipped for Launch Week and Session Replay for Mobile.
Fly.io – The home of Changelog.com — Deploy your apps close to your users — global Anycast load-balancing, zero-configuration private networking, hardware isolation, and instant WireGuard VPN connections. Push-button deployments that scale to thousands of instances. Check out the speedrun to get started in minutes.
Coder.com – Instantly launch fully configured cloud development environments (CDE) and make your first commit in minutes. No need to traverse README files or await onboarding queues. Learn more at Coder.com
AssemblyAI – Turn voice data into summaries with AssemblyAI’s leading Speech AI models. Built by AI experts, their Speech AI models include accurate speech-to-text for voice data (such as calls, virtual meetings, and podcasts), speaker detection, sentiment analysis, chapter detection, PII redaction, and more.
Featuring:
Chris Coyier – Website, GitHub, X
Dave Rupert – Website, GitHub, X
Jerod Santo – Website, GitHub, LinkedIn, Mastodon, X
Adam Stacoviak – Website, GitHub, LinkedIn, Mastodon, X
Show Notes:
Big news - A new era for the Changelog Podcast Universe and CPU.fm launches in 2025.
ShopTalk Show
Codepen
Number Flow
Dave’s bookshelf
Something missing or broken? PRs welcome!
The legacy of CSS-Tricks (Interview)
Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we’ve officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it’s also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.
Join the discussion
Changelog++ members save 5 minutes on this episode because they made the ads disappear. Join today!
Sponsors:
Square – Develop on the platform that sellers trust. There is a massive opportunity for developers to support Square sellers by building apps for today’s business needs. Learn more at changelog.com/square to dive into the docs, APIs, SDKs and to create your Square Developer account — tell them Changelog sent you.
FireHydrant – The reliability platform for every developer. Incidents impact everyone, not just SREs. FireHydrant gives teams the tools to maintain service catalogs, respond to incidents, communicate through status pages, and learn with retrospectives. Small teams up to 10 people can get started for free with all FireHydrant features included. No credit card required to sign up. Learn more at firehydrant.io
Sentry – Working code means happy customers. That’s exactly why teams choose Sentry. From error tracking to performance monitoring, Sentry helps teams see what actually matters, resolve problems quicker, and learn continuously about their applications - from the frontend to the backend. Use the code CHANGLOG and get the team plan free for three months.
Retool – The low-code platform for developers to build internal tools — Some of the best teams out there trust Retool…Brex, Coinbase, Plaid, Doordash, LegalGenius, Amazon, Allbirds, Peloton, and so many more – the developers at these teams trust Retool as the platform to build their internal tools. Try it free at retool.com/changelog
Featuring:
Chris Coyier – Website, GitHub, X
Adam Stacoviak – Website, GitHub, LinkedIn, Mastodon, X
Jerod Santo – Website, GitHub, LinkedIn, Mastodon, X
Show Notes:
Backstage #24: Reflecting on 500 episodes
CSS-Tricks is joining DigitalOcean!
CSS-Tricks joins DigitalOcean, expanding our commitment to community
CSS-Tricks Design History
Geoff Graham
ShopTalk Show.com/
Codepen Challenges
Something missing or broken? PRs welcome!
Frontend Feud: ShopTalk vs CSS Podcast
What’s this? A Frontend Feud! The ShopTalk guys return to defend their championship over Syntax against new contenders: Una and Adam from The CSS Podcast!
Join the discussion
Changelog++ members save 3 minutes on this episode because they made the ads disappear. Join today!
Sponsors:
Square – Develop on the platform that sellers trust. There is a massive opportunity for developers to support Square sellers by building apps for today’s business needs. Learn more at changelog.com/square to dive into the docs, APIs, SDKs and to create your Square Developer account — tell them Changelog sent you.
Sentry – Working code means happy customers. That’s exactly why teams choose Sentry. From error tracking to performance monitoring, Sentry helps teams see what actually matters, resolve problems quicker, and learn continuously about their applications - from the frontend to the backend. Use the code PARTYTIME and get the team plan free for three months.
Featuring:
Chris Coyier – Website, GitHub, X
Dave Rupert – Website, GitHub, X
Una Kravets – Website, GitHub, Mastodon, X
Adam Argyle – Website, GitHub, Mastodon, X
Jerod Santo – GitHub, LinkedIn, Mastodon, X
Amelia Wattenberger – Website, GitHub, X
Nick Nisi – Website, GitHub, Mastodon, X
Show Notes:
Watch the video on our YouTube channel
Shout out to Una’s Twitter!
Shout out to OneWheel!
Shout out to ShopTalk Show!
Shout out to The CSS Podcast!
Shout out to JS Party?
Something missing or broken? PRs welcome!
Frontend Feud: ShopTalk vs Syntax
Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show while Divya teams up with Wes Bos & Scott Tolinski from Syntax. Let the FEUDing begin!
Join the discussion
Changelog++ members save 4 minutes on this episode because they made the ads disappear. Join today!
Sponsors:
Retool For Startups – More and more startups are using Retool to focus their time on their core product. That’s exactly why Retool launched “Retool For Startups” — it’s a program that gives early-stage founders free access to a lot of the software needed for great internal tooling. Retool has bundled together a year of free access to Retool with over $160,000 in partner discounts to save you money while building Retools apps with common integrations. Learn more, apply, join lightening demos and much more at retool.com/startups
Auth0 – The for developers, by developers identity platform built for the cloud era that secures billions of logins every year. Security, compliance, and industry standards are always up-to-date, plus devs are free to provide the login options their users want with the security their application demands. Make login Auth0’s problem. Not yours. Learn more at Auth0.com
Micro – Micro is reimagining the cloud for the next generation of developers. It’s a developer friendly platform to explore, search, and use simpler APIs for everyday consumption all in one place. They’re in early development building out the first set of APIs, and they’re looking for feedback from developers. Signup and get $5 in free credits.
Featuring:
Chris Coyier – Website, GitHub, X
Dave Rupert – Website, GitHub, X
Wes Bos – Website, GitHub, X
Scott Tolinski – GitHub, LinkedIn, X
Jerod Santo – GitHub, LinkedIn, Mastodon, X
Amelia Wattenberger – Website, GitHub, X
Divya – Website, GitHub, LinkedIn, X
Show Notes:
The Feud At The Seventh Mountain
Amelia’s repo visualizer
CSS-Tricks
freeCodeCamp
Wes Bos’ courses
Changelog Merch
Something missing or broken? PRs welcome!
The great divide reprise
Chris Coyier joins Suz and Jerod to continue the discussion on The Great Divide in front-end-land. We also use this as an opportunity to gush on how much CSS-Tricks has done for the community, get Chris’ perspective on the history of the website, and finish up by sharing some amazing Pens on CodePen.io.
Join the discussion
Changelog++ members support our work, get closer to the metal, and make the ads disappear. Join today!
Sponsors:
Rollbar – We move fast and fix things because of Rollbar. Resolve errors in minutes. Deploy with confidence. Learn more at rollbar.com/changelog.
Linode – Our cloud server of choice. Deploy a fast, efficient, native SSD cloud server for only $5/month. Get 4 months free using the code changelog2018. Start your server - head to linode.com/changelog
Gauge – Low maintenance test automation! Gauge is free and open source test automation framework that takes the pain out of acceptance testing.
Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com.
Featuring:
Chris Coyier – Website, GitHub, X
Jerod Santo – GitHub, LinkedIn, Mastodon, X
Suz Hinton – GitHub, Mastodon, X
Show Notes:
Read The Great Divide on CSS-Tricks
For more discussion, listen to our previous show on the topic
If you liked this, you will probably like listening to Shop Talk
Suz suggests anything by Ana Tudor or Sarah Drasner on CodePen
Chris mentioned A CSS Approach to Trap Focus Inside of an Element
Jerod got nostalgic with Nintendo Pens 1, 2, and 3
Something missing or broken? PRs welcome!
Ep. 44 - CSS Tricks (Chris Coyier)
It took years for CSS Tricks to become the popular front-end and design resource it is today. Creator Chris Coyier talks about starting the website in 2007 and how it’s grown to be the incredible front end community it is now. He also talks about his other project, CodePen, and how building community has been an integral part of the tool.
Show Links
Partner with Dev & CodeNewbie! (sponsor)
A List Apart
Element Query
CSS Tricks
CodePen
Container Query
Codeland Conf
Codeland 2019
Chris Coyier
Chris Coyier is the man behind the very popular CSS-Tricks website, which has helped new—and seasoned—developers sharpen their client-side, and sometimes server-side, skills for more than half a decade. Chris is the designer and co-founder for CodePen, co-authored a book, Digging into WordPress, co-hosts ShopTalk Show with Dave Ruppert, and speaks at international events.
12: Chris Coyier, Part Two - Getting Good At Pretty Much Anything
On this episode, I continue the interview Chris Coyier. Chris is the creator of CSS-Tricks.com, Codepen.io, and hosts Shoptalk Show with Dave Rupert. In this second part of a two-part interview, Chris and I talk about getting good at being a musician (or at cutting hair), why we rewrite code we've already written, and lots of other necessary things.
Mentioned:
ShoptalkShow.com
Codepen.io
css-tricks.com
DeveloperTea.com
Don't forget to subscribe, rate/review on iTunes, and get in touch!
Twitter: @developertea
Email: developertea@gmail.com
If you are enjoying the show, would you consider buying me some tea?
12: Chris Coyier, Part One - The Lifecycle of the Web and the Non-Evil of Doing Business
On this episode, I interview Chris Coyier. Chris is the creator of CSS-Tricks.com, Codepen.io, and hosts Shoptalk Show with Dave Rupert. In this first part of a two-part interview, Chris and I talk about how he got started with CSS Tricks. We also talk about what it's like to make such a massive amount of freely available resources.
Mentioned:
ShoptalkShow.com
Codepen.io
css-tricks.com
DeveloperTea.com
Don't forget to subscribe, rate/review on iTunes, and get in touch!
Twitter: @developertea
Email: developertea@gmail.com
If you are enjoying the show, would you consider buying me some tea?
.jpg?width=400){kind=small}