Collective #695
Original Source: https://tympanus.net/codrops/collective/collective-695/
 
Inspirational Website of the Week: re_
This design got us howling! Beautiful typography and colors make it a true gem. Our pick this week.
Get inspired
        
This content is sponsored via BuySellAds
Put the “Flow” in Your Workflows with Shortcut
Shortcut is fast and intuitive project management built for developers. We put the “can” in Kanban. Delight the scrum gods and try it for free!
Try it free
 
CSS Speedrun
A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.
Play it
 
Building UI Components With SVG and CSS
Ahmad Shadeed shows how to use SVG and CSS to build UI components.
Read it
 
Faker
Generate massive amounts of fake data in the browser and node.js. Initially deleted by its owner, the project is again available on npm under new management.
Check it out
 
Boolean attributes in HTML and ARIA: what’s the difference?
Some attributes in ARIA are boolean(-like) and may seem a lot like boolean attributes in HTML. Hidde de Vries explains some important differences to be aware of.
Read it
 
How to Make a Pure CSS 3D Package Toggle
A fantastic tutorial by Jhey Tompkins on how to rock CSS and create a 3D package toggle.
Read it
 
State of the Web: Deno
What is Deno, why does it matter, and how is it currently used for server-side JavaScript?
Read it
 
A Guide to Building a Blog in Eleventy
A guide that walks folks through the process of building a blog with Eleventy. By Raymond Camden.
Read it
 
Essence
A desktop operating system built from scratch, for control and simplicity.
Check it out
 
Designing a modern UI theme with Open Props
A tutorial on Open Props, the open source, color scheme-optimized CSS library that provides fast, consistent, customized design options.
Read it
 
Time to say goodbye to Webpack?
Gaurav Behere writes about Vite and how it could be an interesting alternative to Webpack.
Read it
 
Tidy Free: HTML, React and Vue template
Tidy is the free version of the namesake premium template built by Cruip, available in HTML, React and Vue.js.
Check it out
 
Simple.css
A classless CSS framework that makes semantic HTML look good.
Check it out
 
How not to learn TypeScript
A great article by Stefan Baumgartner on how not to approach TypeScript learning.
Read it
 
Comparing CSS Specificity values
Kilian Valkhof writes how to go about comparing CSS specificity values.
Read it
 
CSS Cascade Layers: An overview of the new @layer and layer() CSS primitives
A great video by Una Kravets on CSS cascade layers and the @layer property, coming to browsers soon.
Watch it
 
Turning a GitHub page into a Progressive Web App
Christian Heilmann explains how to turn a GitHub page into a PWA.
Read it
 
Magical Reflections: a virtual art experience
Visit our virtual gallery and discover the world inside a painting. Made by the folks of makemepulse.
Check it out
 
Form Validation Using JavaScript’s Constraint Validation API
Learn how to use JavaScript’s Constraint Validation API to perform form validations in this article by
Craig Buckler.
Read it
The breakpoints we tested in 2021, and the ones to test in 2022
Learn which screen sizes to design for with different approaches all updated to be relevant in 2022.
Check it out
 
From Our Blog
Case Study: Anatole Touvron’s Portfolio
A practical case study of Anatole Touvron’s Portfolio where you’ll get some insight on the process and some valuable tips.
Check it out
 
From Our Blog
Animate Anything Along an SVG Path
Learn how to code creative animations with JavaScript using SVG paths and the getPointAtLength() function.
Check it out
 
From Our Blog
Inspirational Websites Roundup #33
A very special selection of the most inspiring website designs from the past couple of weeks to keep you up-to-date with the latest trends.
Check it out
The post Collective #695 appeared first on Codrops.



 Carie Fisher5 sessions Jan 20 – Feb 3 devNew Adventures In Front-End, 2022 Edition
Carie Fisher5 sessions Jan 20 – Feb 3 devNew Adventures In Front-End, 2022 Edition Vitaly Friedman5 sessions Feb 3 – Feb 17 devFront-End Testing Masterclass
Vitaly Friedman5 sessions Feb 3 – Feb 17 devFront-End Testing Masterclass Gleb Bahmutov4 sessions Feb 8 – Feb 16 devEarly birds!Building Modern HTML Emails
Gleb Bahmutov4 sessions Feb 8 – Feb 16 devEarly birds!Building Modern HTML Emails Rémi Parmentier4 sessions Feb 24 – Mar 4 devEarly birds!Ethical Design Masterclass
Rémi Parmentier4 sessions Feb 24 – Mar 4 devEarly birds!Ethical Design Masterclass Trine Falbe5 sessions Mar 1 – 15 uxEarly birds!Architecting Design Systems
Trine Falbe5 sessions Mar 1 – 15 uxEarly birds!Architecting Design Systems Nathan Curtis4 sessions Mar 3 – 11 workflowEarly birds!DevOps Masterclass
Nathan Curtis4 sessions Mar 3 – 11 workflowEarly birds!DevOps Masterclass Denys Mishunov5 sessions April 4 – 18 devEarly birds!Designing For Complex UI Masterclass
Denys Mishunov5 sessions April 4 – 18 devEarly birds!Designing For Complex UI Masterclass Manuel Matuzović5 sessions April 7 – 21 devEarly birds!Creating and Maintaining Successful Design Systems
Manuel Matuzović5 sessions April 7 – 21 devEarly birds!Creating and Maintaining Successful Design Systems Brad Frost5 sessions April 18 – May 2 workflowEarly birds!The TypeScript Masterclass
Brad Frost5 sessions April 18 – May 2 workflowEarly birds!The TypeScript Masterclass Stefan Baumgartner5 sessions April 19 – May 3 devEarly birds!Data Visualization Masterclass
Stefan Baumgartner5 sessions April 19 – May 3 devEarly birds!Data Visualization Masterclass Amelia Wattenberger5 sessions April 21 – May 5 uxEarly birds!Smart Interface Design Patterns, 2022 Edition
Amelia Wattenberger5 sessions April 21 – May 5 uxEarly birds!Smart Interface Design Patterns, 2022 Edition Save $500 off the price.5 tickets No expiry Smashing!
Save $500 off the price.5 tickets No expiry Smashing!
 Picture a dark office, blinds drawn. Picture a UX designer smoking a cigar. See the light filtered through the smoke whipped to fog by a spinning ceiling fan. Watch as the UX designer sits at a desk and considers the website.
 Picture a dark office, blinds drawn. Picture a UX designer smoking a cigar. See the light filtered through the smoke whipped to fog by a spinning ceiling fan. Watch as the UX designer sits at a desk and considers the website.