Collective #563

Inspirational Website of the Week: Born & Bred
Engaging motion makes browsing this website a delightful dynamic experience. Our pick this week.
Get inspired
Overflow: User flows done right.
Boost design presentation to peers or clients with Overflow, the world's first user flow diagramming tool for design and product teams!
Start 30-day free trial
Things We Can’t (Yet) Do In CSS — Smashing Magazine
In this article, Rachel Andrew looks at some common layout patterns that we can’t yet do on the web and the CSS Specifications that might let us achieve them in the future.
Read it
React Query
Hooks for fetching, caching and updating asynchronous data in React.
Check it out
OK
Super-cool CSS type animation by Adam Kuhn.
Check it out
Inspect This Snake
Play the snake game in the web inspector in this cool experiment by Matthew Rayfield.
Check it out
Game Off 2019
Game Off is an annual game jam, where participants spend the month of November creating games based on a specific theme.
Check it out
Pure CSS Lace
Diana Smith's latest CSS art: a stunning pure CSS oil painting.
Check it out
Spleeter
Spleeter is the source separation library by Deezer. With pre-trained models written in Python and using Tensorflow it allows you to extract vocals, drums, bass and piano from a music track.
Check it out
Float Element in the Middle of a Paragraph
Chris Coyier shares a useful trick on how to float an element in the middle of a paragraph.
Read it
The Svelte Handbook
In case you missed it: Flavio Copes wrote this free ebook for everyone who wants to learn Svelte.
Read it
GraphQL Crash Course
A visual guide to GraphQL by Xiaoru Li.
Read it
CSS variables in transforms
Lucas Hugdahl's great tip on using CSS variables in transforms to avoid rewriting the whole rule for a transition.
Check it out
Getting your sites ready for the new Microsoft Edge
Read all about the new Microsoft Edge that is built on the Chromium engine.
Read it
Visual Studio Online
The web-based version of the famous IDE is now in public beta.
Check it out
Sidebearings
A collection of typography and lettering resources designed to focus on beginners as well as advanced type designers, graphic designers and enthusiasts.
Check it out
CSS Variables With Inline Styles
Ahmad Shadeed explores some use cases of inline CSS custom properties.
Read it
Recursive Sans & Mono
A highly-flexible variable font for design, code, and UI coming soon to Google Fonts.
Check it out
Upscale animation to 4k in real-time
Learn about a very cool algorithm called anime4k that can upscale animations to 4k in real-time without deep learning and see how it's implemented in WebGL.
Read it
Pure CSS Cauldron
Hover to remove the shading in this great demo by Jhey Tompkins.
Check it out
Free templates for freelancers
Browse through the largest collection of free templates for freelancers, carefully curated by the FYI team.
Check it out
Creative WebGL Image Transitions
A set of interesting looking image transitions including distortion and warp effects made with WebGL.
Check it out