Collective #649
Inspirational Website of the Week: Wild Souls
A beautiful font pairing and saturated colors make this design really inviting. The result of a fantastic collaboration between Big Horror and No Matter.
Get inspired
Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out
Page Transitions: Creative Examples, Resources and some Tips
Dive into the world of transitions and get inspired by wonderful examples and creative ideas.
Check it out
Penpot
Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
Check it out
Managing focus in the shadow DOM
Nolan Lawson describes what JavaScript libraries for focus management would need to do to support shadow DOM.
Read it
SmolCSS
Minimal snippets for modern CSS layouts and components, created by Stephanie Eckles of ModernCSS.dev.
Check it out
Remotion
Create MP4 motion graphics in React. Leverage CSS, SVG, WebGL and more technologies to render videos programmatically with this tool.
Check it out
Understanding Z-Index in CSS
A visual guide on how z-index and stacking contexts work in CSS.
Read it
The CSS File Size and Count Report for Premier League sites
An interesting file size report of CSS used on Premier League sites. Silvestar Bistrovi?.
Check it out
github1s
One second to read GitHub code with VS Code. Just add 1s after github and press Enter in the browser address bar for any repository you want to read.
Check it out
Building a Tabs component
A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.
Read it
Fitting Canvas Snow In a Tweet
Jon Kantner shows how to code up a really nice snow effect with minimal code.
Read it
Programmatically Generate Images with CSS Painting API
Viduni Wickramarachchi’s tutorial about the CSS Paining API and how to use it to generate a geometric image programmatically.
Read it
The web didn’t change; you did
A very interesting article by Remy Sharp where he explains why “the problem with developing front end projects isn’t that it’s harder or more complicated, it’s that you made it harder and more complicated”.
Read it
Only CSS: Placer Gold Rush
A beautiful CSS demo made by Yusuke Nakaya.
Check it out
Faster JavaScript calls
Victor Gomes explains how the simple idea helped improve performance of JavaScript calls.
Read it
CSS Border Font
A supercool CSS based font made by Davor Suljic using borders.
Check it out
Managing CSS Z-Index In Large Projects
Steven Frieson shares an easy-to-implement mini-framework based on existing conventions for better managing z-index in larger projects.
Read it
CSS Switch-Case Conditions
Yair Even Or explains how to emulate switch-case conditions in CSS.
Read it
How to Greatly Enhance fetch() with the Decorator Pattern
Dmitri Pavlutin writes about how to use the decorator pattern to enhance the possibilities and flexibly of the fetch() API.
Read it
Is CSS float deprecated?
Robin Rendle explains why we can pack away float and only use it for making text flow around images.
Read it
Dialy: Open source UI Kit for Figma
Dialy UI Kit is a free, open source User Interface Kit for Figma, designed and released by Aayush Gupta.
Check it out
Front-of-the-front-end and back-of-the-front-end web development
Brad Frost writes about the much-needed distinction between the types of web development that need to occur in order to build successful web things.
Read it
Accessing hardware devices on the web
François Beaufort explains how to pick the appropriate API to communicate with a hardware device of your choice.
Read it
Ideas for CSS Button Hover Animations
Some inspiration for button hover animations using CSS only.
Check it out