#448 — July 8, 2020 |
Frontend Focus |
|
|
New in Chrome: A 'CSS Overview' Tab — This new experimental feature in Chrome looks really neat. It provides an overview of the CSS on a site, detailing colors, fonts, media queries and unused declarations. Robin Rendle |
|
What's New in CSS – July 2020 Edition — Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now, including Flexbox gap support, the aspect ratio unit, and more. Smashing Magazine |
|
A Complete Guide to Dark Mode on the Web — Covers different options and approaches (design, technical considerations, etc) for implementing dark mode. Mohamed Adhuham |
|
Dark Ages of the Web: A Showcase of The "Old Internet" — A visual trip down memory lane covering many of the old web dev techniques and online trends from the early days of the web. Beware, some flashing animations on this page. Pavel Laptev |
|
▶ Ten Modern Layouts in One Line of CSS — A snappy and dynamic talk from Una Kravets highlighting how just a single-line of CSS can do “some serious heavy lifting” and build a robust modern layout. You can see them all in action here. Google Chrome Developers |
|
💻 Jobs |
|
Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies. Vettery |
|
Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team |
ℹ️ Interested in running a job listing in Frontend Focus? There's more info here.
📙 News, Tutorials & Opinion |
|
Creating a Menu Image Animation on Hover — How to create a hover effect for a menu where images appear with an animation on each item. Mary Lou |
|
Building the Tailwind Blog with Next.js — The Tailwind team talk about how they set up their blog and some challenges they faced, particularly some complexities around the choice to use MDX for content. Adam Wathan |
|
▶ Use the Jehy Tompkins |
|
Why Browser Security UI Isn't Specified Alex Russell |
|
Differences Between Static Generated Sites And Server-Side Rendered Apps Timi Omoyeni |
|
Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify! — It’s great not only to see people transitioning to the Jamstack (we have a newsletter for that), but also to hear about some of the difficulties they faced in making that transition. Sahil Parikh |
🔧 Code, Tools and Resources |
|
|
Textures.js: SVG Textures for Data Visualization — Built on top of d3.js, this lets you bring together patterns and colors in an elegant and, dare we say, old school manner. Riccardo Scalco |
|
USA.css — Released to celebrate Independence Day, here’s an all-American stylesheet. Even if you have no need for US-related symbols and patterns, you might pick up something from how they're implemented. Bennett Feely |
|
Automated Code Reviews for 30+ Languages, Directly from Your Git Workflow Codacy sponsor |
|
Use Speedlify to Continuously Measure Site Performance — A new tool by Zach Leatherman that can run locally or on Netlify for running continuous performance measurements. Zach Leatherman |
|
Keyframes: A Simple CSS Animation Creator — Has a visual timeline to help create, view, and run animations without having to go back and forth between browser and editor. Mitch Samuels |
|
Image Extractor: Extract Images From Any Public Website — Works fast. Just enter a URL and all the images will be displayed in a gallery from where you can download all, or choose the ones you want (for personal use only, of course). Pabueco |
|
Hyperapp: The Tiny Framework for Building Web Interfaces — Claims to be 2x faster than React and comes in at less than 2KB. Jorge Bucaran |
|
|
Quik: Internet Explorer Support as a Service — Currently in private alpha. This tool runs a modern browser headlessly that then draws your website for anyone visiting on an old version of Internet Explorer. We're linking to this more because it's an interesting idea. flaggerdoot |
|