Bi-Weekly Frontend News
Collective #525
![C525_everylayout](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_everylayout.jpg?x44439)
Every Layout
Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. By Heydon Pickering and Andy Bell. Check it out![C525_Baw](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_Baw.jpg?x44439)
Our Sponsor
15 design and development tools and resources you should be using ASAP
Are you a freelancing professional web designer or a member of a web design team? Either way, youβre always looking for great tools that will make your work easier. Check them out![C525_cssportrait](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_cssportrait.jpg?x44439)
Pure CSS Only Portrait - Isla
An insane piece of CSS art made by Ben Evans. A word of caution: it might break some (mobile) browsers! Check it out![C525_surma](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_surma.jpg?x44439)
When should you be using Web Workers?
An article by Surma explaining why it's a good idea to use Web Workers. Read it![C525_clouds](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_clouds.jpg?x44439)
Drawing Realistic Clouds with SVG and CSS
A magic cloud making technique by Beau Jackson. Read it![C525_JSinCSS](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_JSinCSS.jpg?x44439)
CJSS
Finally you can write it all in CSS! π Read more about it in this tweet. Check it out![C525_pablo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_pablo.jpg?x44439)
The Faker You Are, the More Successful You Can Be
Pablo Stanley's amazing presentation on the dos and don'ts to becoming a successful designer. Watch it![C525_rockgod](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_rockgod.jpg?x44439)
Rock God Pose
An fun interactive web app using Machine Learning and human pose estimation. Made by Ben Falchuk. Check it out![C525_js2](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_js2.jpg?x44439)
Responsible JavaScript: Part II
Jeremy Wagner's excellent article on how to cure a JavaScript hangover. Read it![C525_stateofcss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_stateofcss.jpg?x44439)
The State of CSS 2019
The results of the first ever State of CSS survey. Check it out![C525_gallery](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_gallery.jpg?x44439)
Spotlight
A lightweight and easy to integrate image gallery plugin without dependencies. Check it out![C525_aiblob](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_aiblob.jpg?x44439)
AI Assistant Blob
Aaron Iker created this demo based on Oleg Frolov's Dribbble shot. Check it out![C525_gamesurl](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_gamesurl.jpg?x44439)
Games and Graphics in Popup URL bars
Matthew Rayfield explores the possibilities of the stacked URL bar display system to the max. Read it![C525_sausage](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_sausage.jpg?x44439)
Using Hamburger Menus? Try Sausage Links
Bradley Taunt shows how "sausage links" can serve as a simpler alternative to hamburger menus for certain use cases. Read it![C525_microfrontends](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_microfrontends.jpg?x44439)
Micro Frontends
Cam Jackson describes a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. Read it![C525_webcam2](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_webcam2.jpg?x44439)
Web Camera 02
An interesting web cam experiment by r21nomi. Check it out![C525_prmise](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_prmise.jpg?x44439)
Promise combinators
Learn about the new additions to the available promise combinators in JavaScript,Promise.allSettled
and Promise.any
.
Read it
![C525_city](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_city.jpg?x44439)
Falling City
A great Three.js scene demo by Jon Kantner based on a background used in "The Battle Cats". Check it out![C525_d3](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_d3.jpg?x44439)
Interactive Charts with D3.js
Amelia Wattenberger explores the fundamental concepts for adding interactivity to D3 charts. Read it![C525_404](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_404.jpg?x44439)
404 Illustrations
A set of trendy, ready to use images for your 404 page. Get it![C525_electron](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_electron.jpg?x44439)
electron-boilerplate
A boilerplate to kickstart creating an app with Electron. By Sindre Sorhus. Check it out![C525_animations](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_animations.jpg?x44439)
A Recipe for Designing Animations β Without Sacrificing Performance
Neil Shankar shares how he took the challenge of producing high-quality animations without contributing to latency for a redesign of the Google Chrome homepage. Read it![C525_HTMListheweb](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C525_HTMListheweb.jpg?x44439)