Hacker News·28wPikaday
Most forms don't need JavaScript date pickers. Native HTML date/time inputs handle accessibility, performance, and internationalization automatically. For better usability, consider separate inputs for day/month/year, select dropdowns for limited options, or masked inputs with validation. Complex calendar widgets lead to more errors and accessibility issues. Keep forms simple by using native browser features and basic HTML elements that are easier to use and test.
Lobsters·28wReimagine the Date Picker
The creator of Pikaday, a popular JavaScript date picker library from 2012, has archived the project and transformed it into a guide advocating against calendar widgets. The new resource encourages developers to use native HTML date inputs or simpler alternatives, arguing that complex calendar UIs lead to errors and poor usability. The guide challenges the assumption that date pickers need elaborate JavaScript libraries, emphasizing user-friendly interfaces over technically accessible but complicated components.
Cloud Four·28wSimple One-Time Passcode Inputs
Build fully functional one-time passcode (OTP) inputs using semantic HTML with proper attributes like inputmode, autocomplete, and pattern validation. The approach demonstrates how to create accessible, progressively enhanced OTP forms without complex JavaScript frameworks or multiple input elements, using a single text input with clear labeling and optional styling enhancements through CSS and lightweight web components.
Nette·26wLatte 3.1: When a templating system truly understands HTML – Nette Blog
Latte 3.1 introduces Smart HTML Attributes that understand context and data types, eliminating unnecessary conditions in templates. The update brings native mapping of PHP types to HTML attributes where null removes attributes entirely, booleans control attribute presence, and arrays serialize automatically for class/style/data attributes. It includes runtime type checking to catch errors during development, enables strict types by default, and adds a nullsafe filter operator (?|) for handling null values gracefully. The release also introduces syntactic improvements like n:elseif and provides a migration mode to safely upgrade from version 3.0.
Blogging and all that Malarkey·25wMy CSS layout strategy
A practical approach to CSS layout decisions that prioritizes content over predefined containers. The strategy involves studying content hierarchy first, choosing appropriate grid types (12-column, compound, modular, or none) based on design needs, implementing grids using CSS custom properties for consistency, and organizing child elements with data-attributes. The author uses creative naming conventions (cartoon characters, composers) for layout patterns and decides between Grid, Flexbox, and Multi-column layouts based on dimensional needs and content behavior.
Hacker News·29w512KB Club
The 512KB Club showcases websites that keep their total uncompressed resources under 512 kilobytes, challenging the trend of bloated web pages filled with heavy JavaScript libraries and unnecessary assets. The initiative highlights performance-focused sites organized into tiers (Green Team under 100KB, Orange Team under 250KB), demonstrating that meaningful web content doesn't require massive file sizes. Sites must contain substantial information to qualify, not just minimal placeholder content.
CSS-Tricks·28wHeadings: Semantics, Fluidity, and Styling — Oh My!
Explores three key aspects of HTML headings: proper semantic placement of h1 elements relative to header and main landmarks for screen reader accessibility, implementing fluid typography using clamp() with viewport-relative units while maintaining zoom accessibility, and the new CSS :heading pseudo-class in Firefox Nightly that simplifies heading selection beyond traditional element selectors.
Hacker News·27wAI World Clocks
An interactive project that generates analog clock visualizations every minute using nine different AI models. Each model receives the same prompt with a 2000-token limit to create HTML/CSS code for a responsive analog clock with CSS-animated second hands, demonstrating how different AI models interpret and execute the same creative coding task.
CSS-Tricks·28wExplaining the Accessible Benefits of Using Semantic HTML Elements
Semantic HTML elements like <button> provide built-in accessibility features that generic <div> elements lack, including proper role exposure, automatic focus management, keyboard support for Space and Return keys, and accessible labeling. While developers might choose <div> for easier styling, recreating these native behaviors requires significant JavaScript and ARIA attributes. Browser DevTools can inspect these semantic differences directly, revealing how assistive technologies interpret elements differently.