Codrops

Collective #774

Scroll progress animations in CSS * Pines * Immich * Web-Check


view in browser    archive

Collective 774 cover image


Olá, frontend friends 👋


In today’s edition we got some great frontend resources for you! Learn about scroll progress animations in CSS with Michelle Barker's insightful article, where she explores the implementation of a new specification that enables scroll-linked animations.


We also feature Zoran Jambor's comprehensive guide on advanced positioning in CSS Grid, a deep dive into the improved performance of React 18, François Beaufort's explanation of WebGPU as the cross-platform graphics API of tomorrow, and so much more.


Check out the exciting resources and demos, including immersive WebGL experiences, self-hosted photo and video backup solutions, UI libraries, and engaging tutorials.


Many thanks to our sponsor, Kintone!


Happy learning!


Have something you want to share or promote? Simply reply to this email and let us know!

C774_scroll

Scroll progress animations in CSS

Michelle Barker writes about the implementation of a new specification that allows the creation of scroll-linked animations using CSS, providing examples and instructions on how to use scroll-driven animations on a website.

Check it out
C774_cssgridlayout

Advanced Positioning in CSS Grid

Master the art of positioning elements on CSS Grid with this practical and in-depth guide where Zoran Jambor explains the workings of grid-row and grid-column as he shows how to recreate an interesting and creative layout from scratch.

Watch it
C774_photos

Immich

Immich is a self-hosted photo and video backup solution directly from your mobile phone. It's under active development. Made by Alex Tran.

Check it out
C774_car

Project Cars Tutorial

Learn about Project Cars that was made with Three.js and Pixotronics in this video tutorial by the team of Immersive Garden.

Watch it
C774_webcheck

Web-Check

Get an insight into the inner-workings of a given website: uncover potential attack vectors, analyse server architecture, view security configurations, and learn what technologies a site is using.

Check it out
C774_svglogo

Animated SVG Logo

Anthony Fu shares the process of creating an animated SVG logo using stroke animations and mask support, including references to helpful resources.

Read it
C774_emojis

Using emoji on the web

This article discusses various issues and solutions related to using native emoji on the web, including rendering inconsistencies, missing flags on certain platforms, and the use of color fonts to address these problems.

Check it out
C774_font

Free Font: Commit Mono

Commit Mono is an anonymous and neutral programming typeface focused on creating a better reading experience. A project by Eigil Nikolajsen.

Check it out

Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!