Frontend Focus
#481 — March 10, 2021 | Read on the web |
A Whimsically Illustrated CSS Grid Cheat Sheet — A handy guide with lots of illustrations covering both parent and children properties. There’s a video version of the guide here too. Joy Shaheb |
The Best Font Loading Strategies & How to Execute Them — Know your FOIT, FOUT, and FOFT in this detailed guide to font-loading strategies. It makes a few key recommendations at the end. Zell Liew |
A Friendly Introduction to Functional Programming with JavaScript by Anjana Vakil — Learn what Functional Programming (FP) is and how it differs from other programming styles (such as OO and imperative), and use key concepts of functional to improve your everyday coding. Frontend Masters sponsor |
Exploring CSS-Tricks |
Speeding Up Chrome's Release Cycle — Chrome is planning to move to releasing a new ‘milestone’ every 4 weeks, starting with Chrome 94 in Q3 of 2021. Alex Mineer (Google) |
|
📙 Tutorials, Articles & Opinion |
Responsive Text Based on Image Size — Want the text below an image to match the image width? Here’s how. Temani Afif |
The Importance of Learning CSS — Aimed at those who primarily work with modern JavaScript frameworks like React, but find CSS confusing and frustrating: “getting better at CSS has had an enormous impact on my life and career as a developer”. Josh W. Comeau |
An Accessible Current Page Navigation State — When it comes to accessibility, using just color to convey meaning isn’t enough. Here’s how to implement a visual indicator to help a user understand where they are. Callum Hart |
Learn How Pipeline Automation Helps PagerDuty Run 500+ Builds Daily Buildkite sponsor |
Through The Pipeline: An Exploration of Frontend Bundlers — A developer compares Parcel, Rollup, and esbuild for his reasonably modest requirements. Andrew Walpole |
Tips for Building Accessible Design Systems — This post aims to address some common accessibility issues found with design systems. Suzanna Scacca |
A Super Flexible CSS Carousel, Enhanced With JS Navigation Maks Akymenko |
▶ How You Can Simplify Your CSS with Kevin Powell |
The Best Classless CSS Frameworks in 2021 Melissa McEwen |
💻 Jobs |
Wynter Is Looking for Developers to Join Its Research Panel — Give feedback on digital products and landing pages, get paid $10-$50 per survey. Super low-key commitment, 10-15 mins per survey. Wynter Research Panels |
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 |
Find Frontend Engineering Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired |
🧑💻 Got a job listing to share? Here's how.
🔧 Code, Tools and Resources |
AVIF Converter: Online Tool to Convert Any Image to AVIF — You might find this useful for experimenting. The AVIF spec is still in early development and currently only Chrome, Firefox, and Opera have support for it. Justin Schmitz & Niksa Sporin |
HTML Boilerplates: Generate and Download a Custom HTML Starter — A nicely done online tool to customize and generate a starting point for an HTML file. Might not necessarily be used for a full blown app but great for demos and smaller stuff. allen hsu |
Swiper: A Modern Mobile Touch Slider — Complete with hardware accelerated transitions and native-like behavior. There are integrations with React, Svelte, Vue.js and Angular, too. Vladimir Kharlampidi |
Publicis Sapient: Focus on Content First - Deliver Sites Fast — Learn how you can use GatherContent to build sites in a fraction of the time. Sign up for a free trial now. GatherContent sponsor |
Web3Forms: Contact Forms for Static Websites — A web form service that offers a pretty decent free forever plan that might be worth trying out. Web3Forms |
Plchldr.co: Quick and Simple Image Placeholder Service — Enter a width, height, background color, text color, and some example text, and then generate the HTML to embed temporary images and dummy text. Plchldr.co |