Back to blogDev Roundup, Aug 2024
Dive into our latest roundup featuring cutting-edge innovations and tips for developers. Discover Code Hike 1.0, the open-source tool bridging Markdown and React for interactive technical content. Check out Departure Mono, a nostalgic 90s font, and a few stunning and quirky Codepens! Don’t miss my favorite tweets showcasing CSS animations, new Shadcn updates, and creative Remotion video renderings. Stay up to date with these exciting tidbits from across the web!
Around the Web 🕷
Algorithms we develop software by
A quick word about "pathfinding", a problem solving approach in Software Development.
Announcing Code Hike 1.0
Code Hike has just shared a big release. And it looks like a really interesting project that I'm keen to try. Code Hike's an open-source library that bridges the gap between Markdown and React to create technical content that takes full advantage of the modern web.
Common use cases include:
- code walkthroughs
- interactive documentation
- any combination of content and presentation
Departure Mono
A delightfully 90s font. A monospaced pixel font inspired by the constraints of early command-line and graphical user interfaces.
Touch grass button
A cheeky little interaction. And some advice that we should all heed from time to time.
See the Pen touch grass button on CodePen.
Fancy wipe
A very nice text entrance effect using masking, blur, and linear gradients.
See the Pen Fancy wipe on CodePen.
CSS Matrix Board
The power of masking text under a repeating background with clip path, masking, and mix-blend-mode thrown in.
See the Pen CSS Matrix Board w/ clip-path && mask on CodePen.
Improved pure CSS blur effect for "glass" header
This solution makes your glass blur effect a little smoother.
See the Pen Improved pure CSS blur effect for "glass" header on CodePen.
Some Fave Tweets 🐦
A simple yet effective site demonstrating a huge range of CSS scroll animations. Chrome only for now!
"Scroll-Driven" by Mads Stoumannhttps://t.co/J2lRHrZVlg pic.twitter.com/YRa5Q5MDOc
— CodePen.IO (@CodePen) August 3, 2024
Calculate the perfect spacing for hanging your pictures! I love when a developer builds an app to solve a very very specific problem.
Just polished up and deployed the tool I built on the @shl/@cursor_ai livestream for @ToolstashApp!https://t.co/UJjSoXC6UZ pic.twitter.com/KJYKdlD5tA
— Josh Pigford (@Shpigford) August 7, 2024
A big beefy update from shadcn. It now supports all major frameworks, its components now ship their own dependencies, you can now install remote components, and it now ships with an improved init command.
Introducing the new CLI.
— shadcn (@shadcn) August 30, 2024
Install anything from anywhere—add components, themes, hooks, functions, animations, and generated code to your apps.
This marks a major step forward in distributing code that both you and your LLMs can access and use.
Let’s take a look. pic.twitter.com/kGpwG7bh9y
A cool way of rendering a signature based on text input. Uses stroke-dashoffset to great effect. After trying this out, check out some more cool techniques using this CSS propery.
Always wanted more delightful signing experiences on the web—so I created one that draws out your name✍🏼
— Kiran Patel (@pate1kiran) August 29, 2024
Play w it here - https://t.co/YFNccxwsAr pic.twitter.com/VdbcR23rRF
I covered Remotion in an earlier newsletter. Here's a nice example of taking a UI built with ThreeJS + GSAP and rendering it as a video using Remotion.
Threejs + Gsap + Remotion = After Effect pic.twitter.com/Da4fKnPwnt
— deadrabbbbit (@deadrabbbbit) August 30, 2024
