Frontend Focus
Feed since 17 Mar 2019This feed covers HTML, CSS, WebGL, and other associated technologies. Frontend Focus shares news, articles, tutorials and code examples for those interested in web browser technology and the web platform generally. See: http://frontendfocus.co/
To subscribe to and get updates from Frontend Focus in your feed stream, sign up, or see the rest of our feeds.
Front-End Performance Checklist 2021 — Smashing Magazine
Front-End Performance Checklist 2021 — This annual front-end performance checklist (available as PDF, Apple Pages, MS...
Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
Weather Icons: 200+ Weather Themed Icons — These are CSS-based, so you just need to drop...
Compiled | Build time atomic CSS-in-JS
Compiled: Build Time Atomic CSS-in-JS — Write your styles in JavaScript with the full power of...
Glyphs
Glyphs: A Fully Editable & Open Source Design System — Includes thousands of editable icons designed...
Panelle.js - free comic book layout maker
Panelle: A Free Comic Book Layout Maker — This interactive tool lets you build SVG-based comic-book...
Improve Your Google PageSpeed Insights Score For Images
Improve Your PageSpeed Insights Score for Images. Try These Techniques
JSitor - JavaScript, HTML, CSS, online editor
JSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox — I’m a big fan of tools like...
Hypercolor - Tailwind CSS Gradient Palette
Hypercolor: A Tailwind CSS Gradient Palette Collection — This curated collection of beautiful premade gradients use...
Hired - Job Search Marketplace. Tech Job Hunting Simplified!
Find Your Next Job Through Hired — Create a profile on Hired to connect with hiring...
ResearchGate - Senior Javascript Engineer - UX and Design Systems (m/f/d)
Senior JavaScript Engineer - UX and Design Systems (Berlin, DE) — Help us shape the future...
Custom Properties as State | CSS-Tricks
Custom Properties as State? — Thoughts about using CSS and custom properties as a sort of...
navigator.clipboard API
The navigator.clipboard API — Async read and write methods for managing clipboard data.
Styling console.log() Output Formatting With CSS
Styling console.log() Output Formatting with CSS — Like most of us, probably, Ben often forgets console.log...
Ensuring the correct vertical position of large text
Ensuring The Correct Vertical Position of Large Text — In some cases, browsers display large text...
You want overflow: auto, not overflow: scroll | Kilian Valkhof
You Want overflow: auto, Not overflow: scroll — A quick explainer on the overflow property, and...
Give your Eleventy Site Superpowers with Environment Variables | CSS-Tricks
Give your Eleventy Site Superpowers with Environment Variables — Leveraging the Node dotenv library within Eleventy...
Can gaming save itself from its content moderation problems?
Can Gaming Save Itself from Its Content Moderation Problems? — Twitch, Playstation, Xbox and other big...
Front-end predictions for 2021 and beyond | Browser London
Frontend Predictions for 2021 and Beyond — Where is front-end development heading in 2021? Jay Freestone...
The Most Interesting Developer Tools for 2021 - Impressive Webs
Are These The Most Interesting Frontend Tools for 2021? — A roundup of the 60 most-clicked...
CMA to investigate Google’s ‘Privacy Sandbox’ browser changes
CMA to Investigate Google’s ‘Privacy Sandbox’ Browser Changes — The UK governments Competition and Markets Authority...
A developer's perspective: the problem with screen reader testing
A Developer's Perspective: The Problem with Screen Reader Testing — Jake asks what the baseline in...
Leveraging Artificial Intelligence Across the SDLC - OutSystems Tech Talks
How to Accelerate Development with Artificial Intelligence — Join us to learn about the benefits of...
Chapter 6: Web Design | CSS-Tricks
Web History: Web Design — Another excellent entry in Jay Hoffman’s series on web history, this...
Complete Intro to Databases — Exclusive Workshop
New Course: Complete Intro to Databases with Brian Holt — Every app needs a database but...
Come Work with Us
Senior PHP Developer (Laravel) — Help power the world’s largest online design school and help students...
Old is Solid; New Gets Talked About | CSS-Tricks
Old is Solid; New Gets Talked About — Thoughts on using what you know: “Old can...
Analyzing Web Vitals with WebPageTest
Analyzing Web Vitals with WebPageTest — A solid look at how to parse various Web Vitals...
CSS Individual Transform Properties
Using CSS 'Individual' Transform Properties — As of Safari Technology Preview 117 you can now use...
And now for … Firefox 84 – Mozilla Hacks - the Web developer blog
And Now For… Firefox 84 — Version 84 includes some interesting new features including tab order...
Learn to code professional, production-grade TypeScript in this course by TypeScript expert Mike North
New Course: Production-Grade TypeScript — Use the TypeScript language at scale to increase the developer experience...
The 2020 Web Almanac
The HTTP Archive's 2020 Web Almanac — The excellent Web Almanac (also available as a PDF)...
https://www.figma.com/community/plugin/869495400795251845/Downsize
Downsize for Figma: Compress Images Right On The Canvas — If you use Figma this plugin...
Denali | Designer & Developer Tools
Denali: A Themeable Design System for Building Uniquely Styled Frameworks — The main pull for this...
Flappy bird in 205 bytes (improved!)
Flappy.html: Flappy Bird in 205 Bytes — This is a really rudimentary version of Flappy Bird...
joe223/tiny-swiper
Tiny-Swiper: An 'Ingenious' JavaScript Carousel — A free carousel offering a ‘native-like experience’ for the web....
Free quality illustrations customised to your branding
Scale: High-Quality, Open-Source Illustrations — SVG/PNG illustrations that can be customized with a theme color before...
Squoosh
Squoosh v2: Browser Based Image Compressor from Google — Make images smaller using best-in-class codecs, right...
How to increase CSS-in-JS performance by 175x
How to Increase CSS-in-JS Performance by 175x — If you're into using CSS-in-JS, here’s some pointers...
Switching to Tailwind CSS
Switching to Tailwind CSS — Why this developer switched their Next.js powered blog to using Tailwind...
Time to Say Goodbye to Google Fonts
Time to Say Goodbye to Google Fonts — Outlines why self-hosting is the more performant approach...
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode | CSS-Tricks
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode — Dark mode may...
Sticky CSS Grid Items
Sticky CSS Grid Items — How to get position sticky working on a grid item without...
What Can You Put in a CSS Variable?
What Can You Put in a CSS Variable? — A good list of the various things...
Progressively deliver new image formats with CSS & Cloudflare Workers
Progressively Deliver New Image Formats with CSS and Cloudflare Workers — When your browser makes a...
noUiSlider - JavaScript Range Slider | Refreshless.com
noUiSlider: Lightweight Range Slider with Full Multi-Touch Support — No dependency. Fits into wherever you need...
Why I Love Tailwind
Why I Love Tailwind — “Why Tailwind is blowing up, why I (the creator of styled-components)...
Business Intelligence UI Best Practices
Designing High-Impact Dashboards for BI — Embedded analytics can transform your product, but terrible presentation can...
https://codepen.io/miocene/pen/NWRWQpX
Pure CSS Monument Valley II — A very impressive CSS recreation of the beautiful puzzle game...
Decent Patterns | Simple SVG patterns by notchris
Decent Patterns: Simple Customizable SVG Patterns Using Single Unicode Characters — Neat idea! Each pattern uses...