Bi-Weekly Frontend News
Collective #522
![WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/WOTW.jpg?x86293)
Inspirational Website of the Week: Elena Iv-skaya
A beautiful design with lush typography and unconventional interactive elements. Our pick this week. Get inspired![C522_Percy](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_Percy.jpg?x86293)
This content is sponsored via Syndicate Ads
Free automated visual testing with Percy
Visually test your web app, component library, or static site across browsers and responsive widths to catch UI bugs and ship with complete confidence. Try it free![C522_criticalcss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_criticalcss.jpg?x86293)
Extract critical CSS
Learn how to improve render times with the critical CSS technique in this article by Milica Mihajlija. Read it![C522_slider](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_slider.jpg?x86293)
How To Make an Animated Interactive Vue.js Slider
Henry Desroches's in-depth tutorial on how to create a really cool slider based on Alexsander Barhon's Dribbble shot. Read it![C522_Modal](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_Modal.jpg?x86293)
Prevent Page Scrolling When a Modal is Open
A good tip by Brad Wu on how to prevent scrolling when a dialog is open. Read it![C522_npm](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_npm.jpg?x86293)
Enabling Modern JavaScript on npm
A great article by Jason Miller on how shipping modern JavaScript requires more than changing our build targets. Check it out![C522_subgrid](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_subgrid.jpg?x86293)
CSS Grid Level 2 – subgrid is coming to Firefox
Rachel Andrew explains what you can do with CSS subgrid. Read it![C522_transducers](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_transducers.jpg?x86293)
Magical, Mystical JavaScript Transducers
James Sinclair explains the not so easy to understand concept of JavaScript transducers in a great way. Read it![C522_lighthouse](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_lighthouse.jpg?x86293)
Building the most inaccessible site possible with a perfect Lighthouse score
An experiment by Manuel Matuzovic that shows how we shouldn't rely solely on automation when testing websites. Check it out![C522_font](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_font.jpg?x86293)
Free Font: National Park
A typeface designed to mimic the national park service signs that are carved using a router bit. Get it![C522_framer](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_framer.jpg?x86293)
How To Start Using Sketch And Framer X
A tutorial by Martina Pérez about how to build prototypes and interactions by making use of the pre-built components in Framer X. Read it![C522_art](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_art.jpg?x86293)
Mixkit art
Mixkit has now a section for free high-quality and modern illustrations. By Envato. Check it out![C522_imageszdog](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_imageszdog.jpg?x86293)
Images drawn with Zdog
Some really cool image to 3D landscape magic using Zdog. Check it out![C522_git](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_git.jpg?x86293)
Learn git concepts, not commands
An interactive git tutorial meant to teach you how git works and not just which commands to execute. By Nico Riedmann. Read it![C522_airguitar](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_airguitar.jpg?x86293)
Webcam Air Guitar
Kevin Newcombe used TensorFlow and Posenet to make a playable air guitar. Check it out![C522_webcomp](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_webcomp.jpg?x86293)
The Truth about Web Components and Frameworks
Dion Almaer explores the reasons behind why we see the same discussions come up again and again. Read it![C522_order](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_order.jpg?x86293)
Grid, content re-ordering and accessibility
Rachel Andrew expresses her concerns when it comes to re-ordering content and accessibility using the new layout techniques of CSS. Read it![C522_Algorithm](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_Algorithm.jpg?x86293)
Analog Algorithm
A really cool website for the publication of a book on source-related grid systems. Check it out![C522_focus](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_focus.jpg?x86293)
Indicating focus to improve accessibility
Hidde de Vries show how focus outlines make a site easier to use. Read it![C522_slidertype](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_slidertype.jpg?x86293)
Embla
An extensible low level carousel for the web, written in TypeScript. Check it out![C522_searchgatsby](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_searchgatsby.jpg?x86293)
Gatsby site search with Lunr.js
Luke Whitehouse explains how you can leverage Lunr.js to create search components that are accessible, fast and extensible. Read it![C522_px](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_px.jpg?x86293)
Px
Px is a tiny 2D canvas framework for turn-based puzzle games. Check it out![C522_demos](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_demos.jpg?x86293)
From Our Blog
Awesome Demos Roundup #5
Another monthly roundup of super-creative web experiments and demos for your viewing pleasure. Check it out![C522_websites](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/06/C522_websites.jpg?x86293)
From Our Blog