Bilingual

Font-Family Recommendations
a month ago
- Named fonts are not reliable due to loading issues, security blocks, or user preferences, so generic font families like sans-serif or serif are safer. Web fonts can fail to load, and remote fonts can be blocked by tools like uBlock Origin.
- Enumerating multiple system fonts is often unnecessary and can be worse than using a single generic family like monospace. Generic families will resolve to a suitable font, and lengthy font stacks like 'Menlo, Monaco, ...' are redundant and should be avoided.
- Using only generic font families, such as monospace, is recommended over web fonts to avoid performance and loading issues. For monospace, use 'monospace, monospace' to prevent font-size quirks, and avoid system-ui or ui-* families for content as they are designed for UI, not longform text.
Dark Mode with Web Standards
21 days ago
- Use the 'prefers-color-scheme' media query in CSS to respect OS settings, but also allow users to override with a per-site toggle.
- Set the default color scheme via a <meta> tag in HTML for faster loading, with values 'light', 'dark', or 'light dark' (reverting to OS).
- Update the color scheme dynamically with JavaScript and store user preferences in localStorage for persistence.
- The 'color-scheme' affects system colors, scrollbars, default element colors, iframes, and SVGs using 'light-dark()' or 'prefers-color-scheme'.
- There's a disconnect: 'prefers-color-scheme' reflects OS settings regardless of 'color-scheme', limiting its use for in-page toggles.
- Exceptions where 'color-scheme' affects 'prefers-color-scheme' include iframes and SVGs, but browser support varies (e.g., Safari has bugs).
- The 'light-dark()' function now supports gradients and images in modern browsers, allowing different backgrounds based on the color scheme.
- For non-color changes (like box-shadow to border), use CSS custom properties and style queries to detect dark mode, though native support is pending.
- Future proposals may allow overriding 'prefers-color-scheme' via JavaScript, but browser team opposition (e.g., Safari) exists.
Responsive Design Calculator
12 days ago
- The author discovered a minor bug where font size was slightly off due to rounding errors during conversion from px to rem units.
- The site’s layout evolved from fixed widths (450px/600px) for older monitors to a responsive design using breakpoints and smooth scaling.
- An interactive calculator was developed to automate CSS calculations, eliminating manual errors from earlier conversions.
- The layout formulas were updated to use modern CSS functions like min(), clamp(), and round() for integer widths and better responsiveness.
- The project’s initial bug fix was trivial, but the resulting automated system provides reusable formulas for future adaptive layouts.
Lessons Learned Rewriting a Sticky Detector
9 days ago
- The article discusses converting a 2014 JavaScript demo that used scroll events to make a search input stick to the top, into a modern CSS-based solution.
- Key modern CSS techniques include using `position: sticky` for sticking elements, container queries with `scroll-state` for detecting stuck states, and anchor positioning for precise placement of elements like a hamburger menu.
- The old demo inefficiently used JavaScript scroll event listeners and jQuery, while the new approach eliminates JavaScript for better performance and leverages HTML elements like `<search>` for accessibility.
- Anchor positioning allows elements like a menu icon to be positioned relative to a named anchor element without traditional constraints, and SVG is recommended over emojis for icons for better markup and control.
Show HN: Justif – Knuth-Plass justification and microtypography for the web
8 days ago
- justif is a web tool for publication-grade text justification.
- It allows side-by-side comparison of browser and justif rendering.
- Users can control flicker, metrics, and various typographic features.
- Features include hyphenation, protrusion, expansion, and tracking.
- Supports multiple sample texts in different languages, including RTL and Japanese.
- Offers various typefaces from serif to monospace systems.
- Options for hanging punctuation, line spacing, and text-wrap modes like 'pretty'.
- Provides visual aids like blur (squint test), margin rulers, and uneven spaces display.
- Supports system, light, and dark appearance modes.
Jitter
3 days ago
- The narrator, a senior web developer, hates attending meetings that often lack agendas and involve unnecessary participants.
- Despite being near the end of her workday, she is called to a meeting to help with a CSS layout issue that AI (ChatGPT, Claude) couldn't solve.
- She quickly fixes the problem by suggesting 'overflow: auto' on a div, but notices a colleague (Mark) repeating words like 'dude', 'man', and 'bro' in a glitchy manner.
- Suspecting a moral panic due to her transgender identity, she uses CSS code to pause and reduce motion, which calms Mark down and resolves his repetitive behavior.
- The meeting ends with Mark resting, and the narrator leaves early, reflecting on the unhelpful other attendees.
Librrd Playground
4 days ago
- Terminal stations can be written with quotes, and braces {} allow specifying class or ID.
- Unwanted collapsing is prevented with empty sequences.
- Layout stylesheets are modeled after CSS, with selectors including terminal, nonterminal, sequence, stack, wildcard, class, ID, :root, descendant, and child combinators.
- Specificity and cascading follow CSS rules.
- Properties include align-items (inherited), align-self (overriding, with left/right sides), justify-content, flex-absorb (inherited, 0-1), gap, continuation-marker, and font (family, style, weight, size).
Preventing line breaks in <code> elements
a day ago
- The author uses non-breaking spaces/hyphens in body text to prevent awkward line breaks for phrases like '5 cm' or 'New York'.
- They extended this practice to <code> elements to avoid unhelpful line breaks in code snippets, such as splitting '--multiline' or '(?-u:…)'.
- To prevent line breaks, they add the 'nowrap' class to short <code> elements (15 characters or less) that contain hyphens or spaces, using a Python regex.
- A CSS rule with 'text-wrap: nowrap' is applied to the 'code.nowrap' class to enforce no line wrapping, though it's a minor improvement.

Hasty Briefsbeta

css

Font-Family Recommendations

Dark Mode with Web Standards

Responsive Design Calculator

Lessons Learned Rewriting a Sticky Detector

Show HN: Justif – Knuth-Plass justification and microtypography for the web

Jitter

Librrd Playground

Preventing line breaks in <code> elements