|
|
|
|
|
The Browser Rendering Cycle, Hardware Acceleration & Compositor Layers — A detailed read that aims to give the reader a solid understanding of the rendering cycle, how to analyse it with available tools, and minimise the work necessary to deliver frames – something that’s essential for a performant frontend. Matthew Costello |
Course: Dynamic CSS with Custom Properties (aka CSS Variables) — Join Lea Verou and learn how best to leverage Custom Properties - a revolution in how we write CSS. This detailed course will see you improve code reuse, maintainability, and enable possibilities that previously required large amounts of JavaScript. Frontend Masters sponsor |
|
Improving Core Web Vitals, A Smashing Magazine Case Study — How Smashing Magazine went about improving their own Core Web Vitals, with details on detection, how they fixed any bottlenecks, and ended up with green scores across the board. Barry Pollard |
|
Frontend Developer Resources for 2022 — Nick has compiled a list of stuff he found to be compelling throughout 2021. Lots of good stuff here including videos, tutorials, and resources on things such as CSS, JavaScript, animation, testing, and more. Nick Taylor |
|
📙 Tutorials, Articles & Opinion |
|
▶ Generating Your Color Palette in CSS — Jake Archibald and Surma (who is leaving Google after 7 years) sit down to discuss Color Spaces — touching upon device capabilities, color mixing, contrast calculations, and more. Google Chrome Developers |
|
Metaphors We Web By — An interesting post looking over the history of our metaphorical understanding of the web. Maggie Appleton |
|
Container Queries — This incoming CSS feature will allow developing components that respond to their container’s width and other properties. Stephanie Eckles |
|
Doppler - All Your Environment Variables in One Place — Stop struggling with scattered API keys and avoiding access controls. Keep your team and servers in sync with Doppler. Doppler sponsor |
|
'CSS Underlines Are Too Thin and Too Low in Chrome' — Šime has encountered two bugs in Chrome while testing the new CSS Šime Vidas |
|
Should CSS Override Default Browser Styles? — Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults? Chris Coyier |
|
Building Gatsby Themes for WordPress-Powered Websites
|
|
▶ The Six Most Important CSS Concepts for Beginners
|
|
Smoothly Reverting CSS Animations
|
|
🔧 Code, Tools and Resources |
|
|
Non Boring Gradients: Online Tool to Build Gradients That Look Good — As the author explains, this takes advantage of non-sRGB interpolation spaces and non-linear easing, evidently making the gradients more appealing. Tom Quinonero |
|
Try JavaScript Online: Simple Web-based JavaScript Console Input — This is a console side-by-side with a web page, so you can run script snippets while learning. The default example web page is Eloquent JavaScript but you can enter any online resource. Jakub T. Jankiewicz |
|
Buildkite Is Now an Official AWS Graviton Ready Partner. Read All the Details Here Buildkite sponsor |
|
HTML Mocker: A Script to Mock Dynamic Data in HTML for Automatic Responsiveness Testing — Just add the script to a page and it will randomize the innerText content for elements based on constraints you can define via HTML classes. ClearTax |
|
|
Guess CSS: An Interactive HTML & CSS Game — An interesting game to test your CSS layout knowledge. Based on a visual layout, select which code example matches. You can even filter which CSS features you want to be tested on. Aleksei Berezkin |
|
Inspect: Figma Plugin to Export to HTML, React, or Tailwind Figma |