Together with  Postman logo
🚀 Frontend Focus

#​614 — October 18, 2023 | Read on the web

How Custom Property Values are Computed — Stephanie brings us up to speed on how browsers compute CSS custom property values, noting that a misunderstanding of this process may lead to unexpected or missing values. She shares some simple strategies we can use to avoid custom property failure.

Stephanie Eckles

CSS Findings from Photoshop's Web Version — A few weeks ago we shared an update about how Adobe took Photoshop to the web. Now Ahmad has taken a look over the impressive effort, digging into the CSS of the web version of this mammoth app.

Ahmad Shadeed

Streamline API Development With Postman Workspaces — Postman workspaces give teams shared access to the API tools they need to solve problems together. They are the go-to place for development teams to collaborate and move quickly while staying on the same page.

Postman sponsor

HTML Tags Memory Test: Test How Well You Remember 100+ HTML Tags — Just start typing HTML tag names to see how many you can remember. Guaranteed to drive you to despair when you give up and find out you missed some easy ones you use all the time! 🤣

Paul Foster

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

CSS Relative Color Syntax — This post runs through how to use new, powerful color syntax features (in Chrome as of version 119) that allow you to make dynamic color adjustments (such as lighten, darken, invert, saturate, etc) along with demonstrating some common color manipulation use cases.

Adam Argyle

The Negative Impact of Mobile-First Web Design on Desktop — Some considered criticism about mobile-first design highlighting a handful of usability issues dubbed here as ‘content dispersion’. Whether you agree with it though…

Salazar, Neusesser, Chitale

Create Collaborative Apps Like Figma and Miro in Days with Ably — Create collaborative features, from live cursors to avatar stacks with Spaces, our in-app collaboration SDK.

Ably sponsor

Scroll-Driven State Transfer — Roman continues his spelunking into all things relating to scroll-driven animations, this time looking at how to transfer the state of one element to another placed at a different point on the page. This is done by using a unique identifier in CSS via timeline-scope.

Roman Komarov

The Ultimate Design Guide for 'Table of Contents' Features — “When designing a table of contents, carefully compare different placement and styling options to maximize usability”.

Huei-Hsin Wang and Matt Brown

Creating Different Hamburger Menu Animations in CSS
Phuoc Nguyen

How to Style Element Descendants with Tailwind CSS
Stefan Judis

How to Honor a User’s Transparency Setting in CSS
Amit Merchant

Styling External Links with Attribute Selectors
Michelle Barker

🔧 Code, Tools & Resources

table-saw: A Small Web Component for Responsive HTML Tables — Inspired by an older jQuery plugin with a similar name. You can try out some demos here, one of which uses container queries.

Zach Leatherman

Build a Better Mobile Input: Generate HTML Inputs Optimized for Mobile — This little interactive page lets you experiment with different form field attributes like type, inputmode, and autocomplete, with the result displaying on a mock device as either iOS or Android.

Alex Holachek

Accelerate Your API Development with Postman Collection Templates — Browse 70+ free and customizable templates to jump-start your API design, documentation, development and testing workflows.

Postman sponsor

audioMotion-analyzer: A Real-Time Audio Spectrum Analyzer — A high-resolution real-time audio spectrum analyzer JavaScript module with no dependencies. Gives a single or dual channel view. (Note the AGPL license.) GitHub repo.

Henrique Avila Vianna

CSS Size Analyzer — This tool analyzes CSS code to identify large rules and selectors. You might find that there are large CSS selectors generated by Sass or assets like images or fonts embedded in the file.

DebugBear

VOV.CSS: A Utility Library of Useful CSS Animations — We shared a similar older project a few issues ago called Mimic.css. This one includes animations that are a little more run-of-the-mill, and of course you can try out each one directly on the page.

Vaibhav Tandon

tailwindcss-3d: Add 3D Transforms to Tailwind — Tailwind’s core utility classes support 2D transforms (i.e. x and y axes only). This plugin will add support for 3D transforms (z axis) and includes a legacy mode for older browser support.

Sam Bauers

selectors.info: A Simple Interactive Tool to Learn CSS Selectors

selectors․info

Ipx.