Jump to content

Welcome to CodeNameJessica

✨ Welcome to CodeNameJessica! ✨

💻 Where tech meets community.

Hello, Guest! 👋
You're just a few clicks away from joining an exclusive space for tech enthusiasts, problem-solvers, and lifelong learners like you.

🔐 Why Join?
By becoming a member of CodeNameJessica, you’ll get access to:
✅ In-depth discussions on Linux, Security, Server Administration, Programming, and more
✅ Exclusive resources, tools, and scripts for IT professionals
✅ A supportive community of like-minded individuals to share ideas, solve problems, and learn together
✅ Project showcases, guides, and tutorials from our members
✅ Personalized profiles and direct messaging to collaborate with other techies

🌐 Sign Up Now and Unlock Full Access!
As a guest, you're seeing just a glimpse of what we offer. Don't miss out on the complete experience! Create a free account today and start exploring everything CodeNameJessica has to offer.

412: 2.0 Embedded Pens

(0 reviews)
https://codenamejessica.com/blogs/entry/1141-412-20-embedded-pens/

By Blogger

· 7 views

by: Chris Coyier
Thu, 09 Oct 2025 15:45:43 +0000

Or just “Embeds” as we more frequently refer to them as. Stephen and Chris talk about the fairly meaty project which was re-writing our Embeds for a CodePen 2.0 world. No longer can we assume Pens are just one HTML, CSS, and JavaScript “file”, so they needed a bit of a redesign, but doing as little as possible so that existing Embed Themes still work. This was plenty tricky as it was a re-write from Rails to Next.js, with everything needing to be Server-Side Rendered and as lightweight as possible (thank urql!).

Time Jumps

  • 00:06 Welcome back to CodePen Land
  • 00:35 What’s new about Pens in CodePen 2.0
  • 05:20 Designing with custom themes in mind
  • 10:40 What the editor looks like in the 2.0 Editor
  • 16:09 Converting old Pens to new Pens
  • 17:20 Debating using Apollo in embeds

  •
    https://codenamejessica.com/blogs/entry/1141-412-20-embedded-pens/

    0 Comments

    Recommended Comments

    There are no comments to display.

    Guest
    Add a comment...

    Important Information

    Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.