Collective #786
Inspirational Website of the Week: Quentin Hocdé
Quentin Hocdé's website is an amazing showcase of animated pixel art infused with some 3D wizardry. It's a truly innovative portfolio that exudes a sleek geeky aesthetic, making it our top pick of the week.
Get inspired
This content is Sponsored via BuySellAds
Integrate an ESP8266 Microcontroller with a Web Database
The Kintone Developer Program provides a seamless tutorial for integrating ESP8266 with Kintone's web database, making IoT integration a breeze!
Check it out
Fun with stroke-dasharray
This article by Yuan Chuan explores the creative possibilities of the stroke-dasharray property in SVG, demonstrating various interesting visual effects that can be achieved using this property, such as creating dashed lines, animating dashes, and more.
Check it out
New GSAP Site
The new web presence by GSAP is a stunning display of the powerful animations you can create with the JavaScript library that has been empowering developers for many years.
Check it out
QX82
QX82 is a tiny JavaScript engine that lets you create games and experiences inspired by the look and feel of a retro 80s computer.
Check it out
The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
Bramus Van Damme introduces the CSS utility function "light-dark()" that allows web developers to easily change colors or other values based on whether Light Mode or Dark Mode is being used in web design.
Check it out
Glittery Icon Effect
Jhey Thompkins shows how to create a glittery icon hover/interaction effect in CSS by masking canvas elements with desired icons and animating them on hover, with a focus on optimizing performance by using techniques like gsap.ticker.
Check it out
Flexoki
Flexoki is an inky color scheme for prose and code. It's designed for reading and writing on digital screens, inspired by analog printing inks and warm shades of paper. Flexoki is minimalistic, high-contrast, and open-source.
Check it out
Summer of Math Exposition
The Summer of Math Exposition (SoME) is an annual competition to foster the creation of excellent math content online. The SoME3 winners are showcased on the site, with topics ranging from the mathematics of string art to the calculus of variations, pixel art anti-aliasing, and more.
Check it out
The only 3 tools you need for perfect image optimization
Dominik and Steffen from Siegfried, deploy! providing three essential tools and strategies for achieving perfect image optimization on the web, with a focus on improving loading times and user experience.
Watch it
New origin trial for fullscreen popup windows
The article discusses a new origin trial for fullscreen popup windows in Chrome. It explains the previous two-step process for opening a fullscreen popup and introduces a new one-step method available from Chrome 119 to Chrome 122. The feature allows developers to open popup windows in fullscreen mode with a single user gesture.
Read it
Hey, Computer, Make Me a Font
Sergey Tselovalnikov shares his journey of learning to build generative machine learning models from scratch, specifically focused on teaching a computer to create genuine true type fonts, with the project named 'FontoGen'.
Read it
When to Nest CSS
Scott Vandehey writes about the use of CSS nesting in the context of modern web development, highlighting when it should be used and when it should be avoided, with a focus on reducing selector specificity and improving stylesheet readability.
Read it
RenderCubeTexture in Drei for Fisheye Effect
Paul Henschel introduces a new feature called <RenderCubeTexture> in the Drei library, which allows users to render virtual scenes into cube or environment maps, enabling the creation of fisheye and tiny planet effects.
Check it out
Cutting plane to ribbons with Three.js
A tutorial by Yuri Artiukh on how to cut a plane into wavy 3D ribbons using Three.js.
Watch it
Weird A.I. Yankovic, a cursed deep dive into the world of voice cloning
The article discusses an experiment involving AI voice cloning to have famous artists cover songs originally performed by "Weird Al" Yankovic, exploring the challenges and limitations of replicating the distinctive style of Weird Al's parodies and the implications of using AI to create music covers.
Read it
Shuttle
A Rust-native cloud development platform that allows users to deploy Rust applications for free with features such as zero-configuration support.
Check it out
Burning money on paid ads for a dev tool – what we've learned
This article provides specific and actionable advice for early-stage startups that are developing developer tools and considering using paid advertising as part of their marketing strategy.
Read it
Daktilo: Turn your keyboard into a typewriter
Daktilo is designed to simulate typewriter sounds when keys are pressed on a computer keyboard, allowing users to customize and enhance their typing experience with various sound presets and configurations.
Check it out
From our blog
Progressively Enhanced WebGL Lens Refraction
Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber.
Check it out
From our affiliate partner
Liquid Web: Codrops' Choice for Web Hosting!
At Codrops, we've chosen Liquid Web as our trusted web hosting provider for over 7 years. They consistently deliver with a remarkable uptime and offer round-the-clock human support. Whether you're looking for VPS or Dedicated Cloud Hosting, Liquid Web has solutions tailored for every project. Plus, every time you opt for Liquid Web via this link, you're supporting Codrops by helping us manage our server costs.
Check it out