Bi-Weekly Frontend News
Collective #522
Inspirational Website of the Week: Elena Iv-skaya
A beautiful design with lush typography and unconventional interactive elements. Our pick this week. Get inspired
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
Extract critical CSS
Learn how to improve render times with the critical CSS technique in this article by Milica Mihajlija. Read it
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
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
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
CSS Grid Level 2 – subgrid is coming to Firefox
Rachel Andrew explains what you can do with CSS subgrid. Read it
Magical, Mystical JavaScript Transducers
James Sinclair explains the not so easy to understand concept of JavaScript transducers in a great way. Read it
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
Free Font: National Park
A typeface designed to mimic the national park service signs that are carved using a router bit. Get it
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
Mixkit art
Mixkit has now a section for free high-quality and modern illustrations. By Envato. Check it out
Images drawn with Zdog
Some really cool image to 3D landscape magic using Zdog. Check it out
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
Webcam Air Guitar
Kevin Newcombe used TensorFlow and Posenet to make a playable air guitar. Check it out
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
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
Analog Algorithm
A really cool website for the publication of a book on source-related grid systems. Check it out
Indicating focus to improve accessibility
Hidde de Vries show how focus outlines make a site easier to use. Read it
Embla
An extensible low level carousel for the web, written in TypeScript. Check it out
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
Px
Px is a tiny 2D canvas framework for turn-based puzzle games. Check it out
From Our Blog
Awesome Demos Roundup #5
Another monthly roundup of super-creative web experiments and demos for your viewing pleasure. Check it out
From Our Blog