This week: Toast, Texture, and Thanks
Performance insights in less than 4 min!
Scout APM uses tracing logic that ties bottlenecks to source code so you can easily find the exact line of code causing performance issues.
CSS 3D Guitar with 5 texture variation
Inspired by Iceland
Charlie Gerard shares a beautiful "collection of abstract art made with SVG. Inspired by my trip to Iceland".
CSS clip-path Editor
Generate the CSS for a clip-path from presets, or create your own by dragging points in this interactive Pen from Mads Stoutmann.Sponsored:
World-class courses taught by WordPress experts
WordPress.com is producing official training courses! Their first course, "Blogging for Beginners", is available now. Blogging is more than putting words on a screen. It’s about finding your tribe, connecting with new friends, and finding an audience who can share your struggles, triumph, ideas, and dreams. They designed Blogging for Beginners to help you do it all. $49 for the course, which updates annually, and includes office hours and expert-led sessions. Use coupon CHRIS50 for 50% off!
CodePen Radio #292: Bundles
Chris, Stephen, and Marie are talking bundles: bundles of software, bundling things in software, and how that all relates to making CodePen better.
Collab TV is back with some front-end fun and games! Kristopher Van Sant, Ryan Trimble, Adam Kuhn, and Dominic Duffin got together on Twitch to create this jungle-themed collaboration. Check out Kristopher's profile for a link to the Twitch channel.
For week three of November's "Principles of Design" Challenge, we worked with repetition and repetition. Check out the Pens from week three, including Hunor Marton Borbely's awesome recreation of MC Escher's "Cube 23150".
A toast to Ryan Trimble for this handy demo of how to make (online, inedible) toast three ways.
Happy/Sad Mac (CSS Morph)
"A morph animation that connects the dots between the Happy and Sad Macs of classic macOS." From Jon Kantner.
Full CSS Maneki Neko
Alexia Toulmet brings a little bit of good luck to your browser with this adorable animated CSS illustration.
Top 10 (Netflix Style)
A showcase of 10 of Jh3y's amazing Pens in side-scrollable list that draws inspiration from the Netflix's mobile app's numbered rows.
"This year will be a tough Thanksgiving due to the pandemic, but hopefully this virtual greeting card can spread some cheer!" Jackie Zen animates artwork by Stephen Doulas to celebrate Thanksgiving in the US. Make sure to flip the toggle to see it in dark mode, too!
Liquid Masking - Scroll
Cassie Evans shares a bit of SVG masking magic! Scroll down to watch the image gradually reveal.