Collective #457

The Psychology of Design
Jon Yablonski argues that every designer should learn the fundamentals of psychology.
Read it
HelloSign API: The Most Flexible API
With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy.
Try it free
MODALZ MODALZ MODALZ
A great project by Adrian Egger where he raises awareness of the common misuse of modals.
Check it out
"Random" color harmonies
Beautiful demo by David A. where harmonious color palettes are generated.
Check it out
The Way We Talk About CSS
Rachel Andrew suggests redefining our understanding of CSS and recognize it as an elegant and powerful system.
Read it
How to stop using console.log() and start using your browser’s debugger
Parag Zaveri's step-by-step guide on how to efficiently debug using the browser's developer tools.
Read it
Designing design systems
An article by Jerlyn Jareunpoon-Phillips on how to design and developing design systems for large teams.
Check it out
Micro nudge: a micro animation for behavioral change
Vivian Zhang breaks down the psychology of a "micro nudge", those small, well-timed animations that encourage users to perform an action.
Read it
Free Font: Sans Forgetica
A very interesting font that was designed using the principles of cognitive psychology to help remember study notes better.
Get it
SVG Cosmos Pattern
Some experimental animated SVG pattern by Agathe Cocco.
Check it out
A Beginner's Guide to JavaScript's Prototype
Learn about JavaScript's prototype in this guide by Tyler McGinnis.
Check it out
Headless Web Development
Paul Lewis is using the analogy of DSLR cameras to explain the main idea of headless web development.
Read it
Splash Letters Font
Aga Magdziak created these amazing splashed paint letters. Read how she did them in this article.
Get it
Trigonoparty!
Simple trigonometry visualization with JavaScript. Made by Rameş Aliyev.
Check it out
How browser rendering works?- behind the scenes
In this easy to follow guide, Ohans Emmanuel explains how browser rendering works.
Read it
Use Cases For Flexbox
Rachel Andrew shows some common use cases for Flexbox.
Read it
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
Dannie Vinther shows how to make proper horizontal scrolling containers using CSS Grid.
Read it
Moving Backgrounds With Mouse Position
Chris Coyier explores different methods of moving backgrounds according to the mouse position.
Read it
Shipstreams
A great list of folks who stream their coding sessions.
Check it out
Zet
Zet is an extension of ES6 Set for computing the union, intersection or difference of sets.
Check it out
Multibox Menu
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Check it out