@codepen.io
Build, test, and discover front-end code 💻
https://codepen.io
Support: https://codepen.io/support
@codepen.ioThree nice styles for highlighter-style <mark> elements:
- codepen.io/HejChristian...
- codepen.io/cassidoo/pen...
- codepen.io/vii120/pen/K...
@codepen.ioSuch a cool "Copy" interaction from Tyler Sticka:
tylersticka.com/journal/that...
@monica.devReposted by @codepen.ioI'm looking forward to exploring the @codepen.io API. I've set up a selection of CodePen demos on my personal site, but they're forks that either diverge or have to be manually kept in sync. The API will let me use my local development workflow to keep self-hosted and CodePen-hosted pens in sync.
@shaw.cityReposted by @codepen.ioDID YOU KNOW: @codepen.io has a read/write API?
blog.codepen.io/docs/api/api...
Comes in GraphQL & Rest flavors so you can use what's best for your task. Updating a Pen is super easy and seamless.
@codepen.ioWe've got a full-blown Read/Write API now. Just so ya know.
blog.codepen.io/docs/api/api...
REST or GraphQL.
@codepen.ioThe October CodePen Challenge is on!
This month, it's Jest Halloween 🎃
Every week you'll get a starter Pen with a Jest test and a Halloween twist
codepen.io/challenges/2...
Thanks @PagerDuty for sponsoring! srv.buysellads.com/ads/long/x/T...
@cbolson.bsky.socialReposted by @codepen.io🎃 A little Halloween FizzBuzz fun!
100 floating numbers, some CSS random(), a bit of sibling-index(), and some spooky surprises hiding behind the numbers. 👻
Hover over one to see what happens…
See the full demo on @codepen.io
@codepen.ioCodePen School (Live Stream) at the top of the hour!
www.youtube.com/watch?v=5Idb...
Probably gonna share some cool tools and techniques, news, answer some questions, maybe a little Stump Stephen!
We've got a Twitch too:
www.twitch.tv/codepen
@codepen.io"<rich-input> demo" by Bramus
codepen.io/editor/bramu...
Pretty impressive combination of new web tech to make this happen: <datalist>, the OpaqueRange API, and the CSS Custom Highlight API.
@shaw.cityReposted by @codepen.io🖐️✊ More Drag & Drop on @codepen.io 2.0!
Panels can be dropped into the tab area for an expanded view, now including Settings & Assets. You can even drag the Console to a tab!
@css-only.devReposted by @codepen.io📝 New CSS Article!
With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count().
Strange? Confusing? What the heck am I talking about?!
Read my latest article 👇
@codepen.io"Pure CSS Autumn Lake" by Rob
@kevinpowell.coReposted by @codepen.ioFinally cleaned up the CodePen. You can find it here: codepen.io/editor/kevin...
The video is dropping tomorrow (unless you're a channel member... in which case you can watch it now 👀 youtu.be/Fi1MvM7whzg)
@shaw.cityReposted by @codepen.ioDid you know @codepen.io now has a Changelog?
codepen.io/changelog
Thanks to the awesome 2.0 Editor, we're releasing regular improvements, new features, and bug fixes. Keep your eye on that page, because we'll often reveal really big features in the Changelog first before any wide announcements.
@codepen.io"Lines and Bars with WebDataRocks and HighCharts"
@codepen.io✂️ 🌆 Image cropping everywhere! You can now crop an image in the Asset Manager (which opens in both 2.0 and the Classic Editor) and directly in the 2.0 editor.
@codepen.io"Inline Block Processing" is a cool thing CodePen can do.
Here's a video showing it off:
www.youtube.com/watch?v=AyAF...
Docs:
blog.codepen.io/docs/pens/bl...
Examples:
codepen.io/collection/e...
@codepen.io"3D Interactive Chart" by Grant Jenkins
codepen.io/editor/grant...
@developer.chrome.comReposted by @codepen.ioLoved scroll-driven animations? Meet their scroll-triggered sibling.
Instead of tying animation progress directly to the scrollbar, you can trigger full time-based CSS animations when crossing a scroll offset.
See how to build them with pure CSS → goo.gle/4dhcvmh
@codepen.io"Mail Bounce" by Tommy Ho
codepen.io/editor/tommy...
