#codepen — Public Fediverse posts

Mario #RWD Scene #CSS #codepen
https://codepen.io/editor/iamdtms/pen/019ff016-650b-7f93-a711-ac3edf6bbf39

Mario #RWD Scene #CSS #codepen
https://codepen.io/editor/iamdtms/pen/019ff016-650b-7f93-a711-ac3edf6bbf39

The Launch of CodePen 2.0, by @chriscoyier (@codepen):

https://blog.codepen.io/2026/07/23/two-point-oh/?ref=frontenddogma.com

#codepen

The Launch of CodePen 2.0, by @chriscoyier (@codepen):

https://blog.codepen.io/2026/07/23/two-point-oh/?ref=frontenddogma.com

#codepen

10 Cool CodePen Demos - July 2026
https://alvaromontoro.com/10-cool-codepen-demos/2026/07/

Interactive shaders and animations, CSS Art, Windows XP nostalgia, games, components, new web features... and more!

#webDev #CodePen #JavaScript #HTML #CSS

10 Cool CodePen Demos - July 2026
https://alvaromontoro.com/10-cool-codepen-demos/2026/07/

Interactive shaders and animations, CSS Art, Windows XP nostalgia, games, components, new web features... and more!

#webDev #CodePen #JavaScript #HTML #CSS

The Programmer’s Fulcrum 31 July, 2026

https://newsletter.mobileatom.net/the-programmers-fulcrum-31-july-2026/

The Programmer’s Fulcrum 31 July, 2026

https://newsletter.mobileatom.net/the-programmers-fulcrum-31-july-2026/

CodePen 2.0

https://chriscoyier.net/2026/07/30/codepen-2-0/

Comments: https://news.ycombinator.com/item?id=49113338

#HackerNews #CodePen #CodePen2.0 #webdevelopment #frontenddesign #technology

CodePen 2.0

https://chriscoyier.net/2026/07/30/codepen-2-0/

Comments: https://news.ycombinator.com/item?id=49113338

#HackerNews #CodePen #CodePen2.0 #webdevelopment #frontenddesign #technology

Another small demo (timeline element) I made while trying to get my head around linking animation to scroll using CSS only (animation-timeline, sibling-index/sibling-count).

https://codepen.io/damianwalsh/pen/emgKvyj

#css #codepen #webdev

Another small demo (timeline element) I made while trying to get my head around linking animation to scroll using CSS only (animation-timeline, sibling-index/sibling-count).

https://codepen.io/damianwalsh/pen/emgKvyj

#css #codepen #webdev

Job hunting is really getting me down. What a nightmare! Took a short break and fiddled around a bit with animation-timeline and sibling-index. Once again, I’m surprised at what can be done with CSS.

https://codepen.io/damianwalsh/pen/WbRJRbN

#css #codepen #webdev

Win one of the THREE CodePen Pro Starter accounts for 12 months each in #js13k 2026!

https://js13kgames.com/2026/prizes#codepen

#gamedev #gamedevjs #CSS #CodePen #Pro #Starter #CodePenChallenge #playground #sandbox

Win one of the THREE CodePen Pro Starter accounts for 12 months each in #js13k 2026!

https://js13kgames.com/2026/prizes#codepen

#gamedev #gamedevjs #CSS #CodePen #Pro #Starter #CodePenChallenge #playground #sandbox

10 Cool CodePen Demos from June 2026: web components, animations, colors, squiggly lines, button generators, and some generative art.
https://alvaromontoro.com/10-cool-codepen-demos/2026/06/

Pens from @cassidoo, @css, @mustastum, and more.

#webdev #codepen #newsletter

10 Cool CodePen Demos from June 2026: web components, animations, colors, squiggly lines, button generators, and some generative art.
https://alvaromontoro.com/10-cool-codepen-demos/2026/06/

Pens from @cassidoo, @css, @mustastum, and more.

#webdev #codepen #newsletter

Always learn something new...
#codepen #css #updated
https://codepen.io/editor/iamdtms/pen/019f2e96-b61e-79f8-8643-b231d2922bcc

cc: @yuanchuan just working now, I was too tired yesterday

Always learn something new...
#codepen #css #updated
https://codepen.io/editor/iamdtms/pen/019f2e96-b61e-79f8-8643-b231d2922bcc

cc: @yuanchuan just working now, I was too tired yesterday

Always learn something new...
#css #codepen
https://codepen.io/editor/iamdtms/pen/019f2e96-b61e-79f8-8643-b231d2922bcc

Always learn something new...
#css #codepen
https://codepen.io/editor/iamdtms/pen/019f2e96-b61e-79f8-8643-b231d2922bcc

So…here’s something super cool that probably only 3 people will care about.

Last week I submitted my entry into a @codepen challenge. They’re just for fun, inspiring you to think of creative ways to design/code something interesting.

I’ve never done one before. I just noticed that they chose my entry for their collection.

It’s silly and not very important. But I like that they chose mine. It makes me happy.

If you want to see it:

https://codepen.io/markwyner/live/PwWmVjJ

I thought it would be fun to “draw” and animate a scene with words and colors as the focus. So that was the route I took.

#Code #FrontEnd #Design #HTML #CSS #JavaScript #CodePen

So…here’s something super cool that probably only 3 people will care about.

Last week I submitted my entry into a @codepen challenge. They’re just for fun, inspiring you to think of creative ways to design/code something interesting.

I’ve never done one before. I just noticed that they chose my entry for their collection.

It’s silly and not very important. But I like that they chose mine. It makes me happy.

If you want to see it:

https://codepen.io/markwyner/live/PwWmVjJ

I thought it would be fun to “draw” and animate a scene with words and colors as the focus. So that was the route I took.

#Code #FrontEnd #Design #HTML #CSS #JavaScript #CodePen

Did a quick firefox compatibility pass on my codepens, adding some polyfills and workarounds non (yet) supported features.

https://codepen.io/villepreux

#codepen #firefox #webdev #baseline

Did a quick firefox compatibility pass on my codepens, adding some polyfills and workarounds non (yet) supported features.

https://codepen.io/villepreux

#codepen #firefox #webdev #baseline

Present me is kicking past me for doing whatever it was that triggered #CodePen to automatically update some demos and break them in the process. 🤦‍♂️

RE: https://front-end.social/@hejchristian/116719922552187722

There was some interest in the sticky notes I had in my screenshot earlier, so I've put the code that makes it up on #CodePen 💜

https://codepen.io/editor/HejChristian/pen/019ead35-f1cf-7353-b299-f88e5e408247

Also tried the @codepen 2.0 editor for this, it's lush 🤩

#CSS #Frontend

RE: https://front-end.social/@hejchristian/116719922552187722

There was some interest in the sticky notes I had in my screenshot earlier, so I've put the code that makes it up on #CodePen 💜

https://codepen.io/editor/HejChristian/pen/019ead35-f1cf-7353-b299-f88e5e408247

Also tried the @codepen 2.0 editor for this, it's lush 🤩

#CSS #Frontend

RE: https://front-end.social/@hejchristian/116697513534647811

Here's a lil #CodePen for it 💜

https://codepen.io/HejChristian/full/NPbBeqO

#CSS #Frontend

RE: https://front-end.social/@hejchristian/116697513534647811

Here's a lil #CodePen for it 💜

https://codepen.io/HejChristian/full/NPbBeqO

#CSS #Frontend

I forked my Liam Neeson poster generator #CodePen to make a Jason Statham one. I'd watch at least a couple of these: https://codepen.io/chriskirknielsen/pen/jEVwBMo

I forked my Liam Neeson poster generator #CodePen to make a Jason Statham one. I'd watch at least a couple of these: https://codepen.io/chriskirknielsen/pen/jEVwBMo

A #CodePen-style #live #IDE for #building, #testing, and #debugging Model Context Protocol (#MCP) #servers — #LLM #agnostic — https://github.com/AnandPilania/mcp-live-playground

#modelcontextprotocol #sandbox #webide #llmagnostic #llmops #aitools #apiinterface #ai #BuildInPublic #nodejs #javascript

A #CodePen-style #live #IDE for #building, #testing, and #debugging Model Context Protocol (#MCP) #servers — #LLM #agnostic — https://github.com/AnandPilania/mcp-live-playground

#modelcontextprotocol #sandbox #webide #llmagnostic #llmops #aitools #apiinterface #ai #BuildInPublic #nodejs #javascript

Built a beach sandwich shack menu UI for this week’s CodePen Challenge 🪶🥪

The seagulls were not part of the original business plan.
Now they run the place.

#CodePen #CSS #Frontend https://codepen.io/grauconejo13/pen/KwNzOVR

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

I'm adding a collectable card system to my site 👀 Already got the card setup from a previous CodePen demo

https://codepen.io/HejChristian/pen/RNwXexO

Just needs a page (binder) to keep track of any folks might find (LocalStorage or IndexedDB for some persistence 🤔)

No battle system yet, maybe one day though ☺️

#CSS #CodePen

I'm adding a collectable card system to my site 👀 Already got the card setup from a previous CodePen demo

https://codepen.io/HejChristian/pen/RNwXexO

Just needs a page (binder) to keep track of any folks might find (LocalStorage or IndexedDB for some persistence 🤔)

No battle system yet, maybe one day though ☺️

#CSS #CodePen

3D CSS demo by Josetxu.
https://codepen.io/josetxu/pen/MYjzwgG

Mouse over the string holders and make the puppet move. All coded in HTML+CSS.

#css #3d #webdev #codepen

3D CSS demo by Josetxu.
https://codepen.io/josetxu/pen/MYjzwgG

Mouse over the string holders and make the puppet move. All coded in HTML+CSS.

#css #3d #webdev #codepen

is listening to Eagle-Eye Cherry and debugging a #codepen.

is listening to Eagle-Eye Cherry and debugging a #codepen.

You code a shiny new CodePen 2.0 demo, go share it on DEV... and it doesn't embed correctly! Oh no! 😱

Good news! There's a quick workaround you can use right now. 😀

No hacks. No waiting. Just a simple trick to get your demo embeds working again: https://dev.to/alvaromontoro/sharing-codepen-20-demos-on-dev-273

#CodePen #DEVCommunity

You code a shiny new CodePen 2.0 demo, go share it on DEV... and it doesn't embed correctly! Oh no! 😱

Good news! There's a quick workaround you can use right now. 😀

No hacks. No waiting. Just a simple trick to get your demo embeds working again: https://dev.to/alvaromontoro/sharing-codepen-20-demos-on-dev-273

#CodePen #DEVCommunity

is trying hard to get Vue Router working with the CodePen 2 editor.

#Vue #CodePen

is trying hard to get Vue Router working with the CodePen 2 editor.

#Vue #CodePen

10 Cool CodePen Demos from March
https://alvaromontoro.com/10-cool-codepen-demos/2026/03/

Really impressive CSS Art, even more impressive custom selectors, new feature showcases, electronic "dash battles", scroll-driven animations... and more!

#css #html #javascript #webdev #codepen

10 Cool CodePen Demos from March
https://alvaromontoro.com/10-cool-codepen-demos/2026/03/

Really impressive CSS Art, even more impressive custom selectors, new feature showcases, electronic "dash battles", scroll-driven animations... and more!

#css #html #javascript #webdev #codepen

I spent a lot of time over the weekend trying to figure out the right workflow for using the new #codepen editor to write #Vue using Vue Router, Web Awesome, and Font Awesome. Once I figure it out, I think that I might need to write a blog post about it.

I spent a lot of time over the weekend trying to figure out the right workflow for using the new #codepen editor to write #Vue using Vue Router, Web Awesome, and Font Awesome. Once I figure it out, I think that I might need to write a blog post about it.

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

I noticed that @codepen lists the starter plan at $228 on https://codepen.io/pricing, instead of the $96 I've been paying. The 2.0 update is nice, but that's a big bump.

#CodePen