Marie and Chris are talking trash this week about our newest feature — a restore option for deleted Pens! We get into the whys and hows of this frequently requested feature.
WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It's unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay.
It used to be a painful mistake to make on CodePen — in the past, if you deleted a Pen it was gone for good, right away.
But those days are over!
We updated how deleting a Pen works to make it a bit harder to delete something by mistake. And now there's a way to recover a Pen if you realize you didn't want to delete it after all.
Starting now, you have three days to restore a copy of your deleted Pen from your Dashboard. The copy contains all of your code, external resources, and settings from your last save so you can get back to work on your Pen.
New Confirmation Flow for Deleting a Pen
When you delete a Pen from the Pen editor, your Dashboard, or your profile page, you'll be asked to confirm deletion.
Views, hearts, comments, and tags are permanently deleted when you delete a Pen and can't be restored, and we let you know about that on the confirmation modal.
The "Deleted" Section of Your Dashboard
When you delete a Pen, a copy of the Pen is saved to the "Deleted" section of your Dashboard for three days.
You can restore your Pen from the "Deleted" tab within 3 days after you delete the Pen. After 3 days, the Pen is permanently deleted and can't be restored.
The restored copy includes all of your code, resources, preprocessors, and Pen settings from your last save on the Pen — everything you need to start working on the Pen again. Views, hearts, comments, and tags are not restored.
Delete Permanently
Most deletions aren't a mistake, and we know that sometimes when you delete something it needs to be GONE.
In that case, you can permanently delete the Pen from your "Deleted" tab. Click the "Delete Permanently" button, then confirm deletion on the modal. This action immediately and permanently deletes the Pen. So be very sure you don't want the Pen! Once a Pen is permanently deleted, it is truly gone forever.
Just Pens, for Now
Pens were the #1 most accidentally deleted item on CodePen by far, so we decided to get this feature out for Pens first. At launch (May 2019) this feature is only available for Pens, but we plan to expand it to Posts, Collections, and Projects in the future.
We've recently updated our Pen editor to be responsive and unified in the process. Cassidy, Klare, Stephen, and Marie are on to talk about the process of updating the Pen editor for 2019.
WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It's unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.
We've added a new sharing button to our pens on CodePen to Dev.to and Marie and Chris are here chatting about why and how CodePen decides to include social networks to share to from a Pen.
Discover.bot – a digital space for bot developers and enthusiasts of all skill levels to learn from one another, share stories, and move the bot conversation forward. Want to learn more about building bots? Get started with their Guide to Bot Building Frameworks.
Our topic for this episode is Topics - a new feature on CodePen. Stephen, Klare, Cassidy, and Marie are on to talk about what Topics are, the design approach, how we built the feature, and how you can suggest new Topics.
Netlify, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.
It's been three years since we last talked about swag on the show, and a lot of things have changed! Marie and Cassidy are talking about the swag choices we've made at CodePen - where we get our swag made, and how it's shipped out internationally, how we deal with inventory.
Discover.bot– a digital space for bot developers and enthusiasts of all skill levels to learn from one another, share stories, and move the bot conversation forward. Want to learn more about building bots? Get started with their Guide to Bot Building Frameworks.
WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It's unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.
Our podcast engineer, Chris Enns, chats with Marie about what's changed in podcasting over the last year, how CodePen evaluates the success of their podcast, and offer up some podcast suggestions for listeners.
Jetpack brings a wealth of features to your self-hosted WordPress site as one of the best no-brainer plugins for WordPress there is. One feature I just recently used for the first time was the video hosting and video player. I had a video clip that I just wanted to drag and drop into a blog post like I would an image, but it was a little too big. Fortunately I just uploaded it through WordPress.com, it was magically available in the Media dialog on my self-hosted site, and it worked perfectly.
Buddy turns DevOps to NoOps with blazing fast performance packed in exceptional UI/UX. Create delivery pipelines in 10 minutes from over 100 pre-configured actions: builds, tests, deployments & more.
Week Three Prompt: Literary Luminaries
This week, we celebrate the people who can work a different kind of magic with a pen! Let's pay tribute to our favorite folks in the world of literature.
Your Challenge
Create a Pen that pays tribute to your favorite author, book illustrator, or playwright.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag cpc-lit-hero. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
Ideas
Children's books are full of magical images and brilliant turns of phrase. Create a Pen that showcases your favorite book from when you were little — or your favorite book to read to the little ones in your life!
Book cover art is constantly evolving, and over time the very best books get many different covers. Could you recreate your favorite cover of your favorite book? Or maybe create a new one?
Some great writing is meant to be performed. Highlight your favorite playwright's work with a fitting Pen tribute.
CodePen recently upgraded to Babel 7 for both our development team and our members. Cassidy and Marie talk about what that means for you in your CodePen editor.
[Netlify](https://www.netlify.com/?utm_source=codepen&utm_medium=podcast&utm_campaign=css-0418, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.
Buddy turns DevOps to NoOps with blazing fast performance packed in exceptional UI/UX. Create delivery pipelines in 10 minutes from over 100 pre-configured actions: builds, tests, deployments & more.
Week Two Prompt: Art Icons
This week, we turn to the art world to pay tribute. Let's celebrate our favorite visual artists and musicians!
Your Challenge
Share a tribute to your favorite artist from the world of visual arts or music. Tell us about the life and work of your favorite artist, or borrow from their work to create a fitting tribute.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag cpc-art-hero. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
Ideas
Borrow an image, a signature color, or a recurring theme from your favorite painter or sculptor to create something in their honor.
Do you have a favorite musician? Tell us about their life and work, or typeset the lyrics to one of their songs with a web font that fits their vibe.
The world of film and photography is full of iconic creators. Whose camerawork gives you the chills?
Resources
Browse the catalog of the Metropolitan Museum of Art in NYC or the British Museum to find examples of work by your favorite artist (and maybe discover someone new).
Do you know what inspired the lyrics to your favorite song? Check out Genius for annotated lyrics and commentary from your fellow fans.
Paying tribute to a film maker? If they worked in the 19th or 20th century you can find deep-dive details on their work in the AFI Catalog of the first 100 years of feature film, 1893-1993.
Team CodePen's very own Stephen Shaw is also the creator of Splitting.js! Marie talks with Stephen about what Splitting.js is, what it's for, how he got the word out about his project, and his advice for anyone thinking of putting together an open-source library.
We all have heroes. People we look up to because, in some way or another, we wish we were more like them or could accomplish what they have. They give our lives shape, in a way, through their strong influence on what we choose to do. Let's take this month to reflect on who those people are to us. After we figure out who they are, let's pay tribute to them by creating something, big or small, in their honor.
Buddy turns DevOps to NoOps with blazing fast performance packed in exceptional UI/UX. Create delivery pipelines in 10 minutes from over 100 pre-configured actions: builds, tests, deployments & more.
Week One Prompt: Coding Heroes
Something tells us you have a passing interest in coding. Maybe it has something to do with the fact that you're on CodePen right now 😉
Who do you look up to in the history of coding? There is a rich and interesting history of people inventing computers and expanding what they are capable of. Or who do you admire today?
Your Challenge
Pick someone admirable from the world of computers and make a tribute to them.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag cpc-coding-hero. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
Ideas
Ada Lovelace lived in the mid-1800s and is regarded as the first computer programmer. She published an algorithm to be carried about by a proposed mechanical "computer" called the Analytical Engine. The first!
Alan Turing lived 100 years after Ada and is now considered to the father of theoretical computer science. The 2014 movie The Imitation Game goes into his life, including some massively influential code cracking in World War II.
What is the most important piece of software the last project you worked on relies upon? Can you figure out who one of the most important creators of that software was? How might you thank them?
Conferences often feature notable coders. We're lucky in this industry to have so many. Check out this list of upcoming conferences focused on the front end. Maybe one of those has a coder you could pay tribute to.
It's the one year anniversary of the first #CodePenChallenge! Marie, Chris, and Cassidy look back on a year of the CodePen Challenge, and chat about plans for future challenge themes and prompts.
If you're looking for name inspiration for your business, product, or service then BusinessNameGenerator.com has built an intelligent word recognition AI to help generate thousands of relevant name ideas that can be used for a business, software, website, product or service. The AI generates results specific to your industry, checks multiple domain extensions availability for each suggestion and works in six languages. It's 100% free to use with no signup needed.
It's the final week of the Shapes #CodePenChallenge!
Last week, we got a little flexible with the definition of a shape and made some blobs. Check out the Pens from the challenge in our #CodePenChallenge: Blobs 🍦 collection.
February's Challenge Sponsor: CodePen PRO
CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. You'll be able to drag-and-drop to upload assets • Cross-browser test easier with no-login Debug View and Live View • Make anything private with the flip of a toggle • Collaborate in real time with Collab Mode • So much more.
Week Four Prompt: Polygons 🔷
This week it's time to rock a rhombus or develop a decagon. We're working with polygons!
Create a Pen and tag it codepenchallenge and the weekly tag cpc-polygon. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
Ideas
A polygon is just a multi-sided shape, so you can let your shape imagination take over for this challenge. And hey, a triangle's a polygon too! Maybe you could build upon what you created during week two?
Stepping into SVG polygons? There's so much you can do! Check out Gabi's shape-outside: polygon + SVG and Greensock's MorphSVG for just a glimpse at the possibilities.
Marie and Cassidy are chatting about time — what is time? How does CodePen, the app, handle time? How does Team CodePen deal with members spread across the globe? You'll find out... all in good time.
WordPress powers a third of the internet. Surprising? Perhaps not once you get to know how easy and friendly, yet powerful and flexible WordPress.com is. If you can build a site on WordPress.com, you should. You're doing yourself a big favor by not taking on the incredible technical debt of hosting a site yourself. Focus on your business instead.
CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. You'll be able to drag-and-drop to upload assets • Cross-browser test easier with no-login Debug View and Live View • Make anything private with the flip of a toggle • Collaborate in real time with Collab Mode • So much more.
Week Three Prompt: Blobs 🍦
After a couple weeks of strict shapes, it's time to get blobby! This week we're throwing out the compass and the ruler to create soft, amorphous blob shapes.
Your Challenge
Create a Pen that features irregular, blobby shapes.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag cpc-blob. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
Ideas
Did you make a Pen for the circles or triangles challenge? Use that as your starting point to create new blobby shapes.
Ever seen a lava lamp? The oil and wax inside create and endless variety of blobby shapes. Maybe you could light up the browser that way.
Blobs can bring a bit of delight to UI. Could you blobbify a button or form action?
Resources
Planning to transform a regular shape into a blob? Our very own Chris Coyier curated a list of blob building tools for Bizarro Devs.
