Hacker News·22wPikaday
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.
Medium·42w14 logic-driven UI design tips to improve any interface
A comprehensive guide presenting 14 practical UI design principles based on logic rather than intuition. Covers essential topics including proper spacing using 8-point grids, WCAG accessibility contrast ratios (3:1 for UI elements, 4.5:1 for text), button hierarchy and target sizes, typography best practices, and visual consistency. Demonstrates these principles by transforming a poorly designed profile page interface, addressing issues like inadequate contrast, confusing navigation, poor spacing, and accessibility problems. Emphasizes that good UI design follows structured guidelines rather than artistic instinct.
Frontend Masters·37wLiquid Glass on the Web – Frontend Masters Blog
Apple's new Liquid Glass design aesthetic for version 26 operating systems creates complex visual effects with light refraction, distortion, and frosted glass appearances. Web developers are recreating this look using CSS backdrop-filter, SVG filters like feDisplacementMap and feGaussianBlur, and React components. The technique involves multiple parameters including displacement scale, blur amount, saturation, and aberration intensity. However, implementing liquid glass effects raises significant text contrast accessibility concerns that developers must carefully address when placing text over unknown backgrounds.
Storybook·45wStorybook 9
Storybook 9 introduces comprehensive component testing capabilities powered by Vitest and Playwright. The release features interaction tests, accessibility testing, visual regression testing, and coverage reports all integrated into a unified testing experience. Key improvements include a 48% smaller bundle size, story generation tools, tag-based organization, and story-level globals. Framework updates include Vite-powered Next.js support, Svelte 5 compatibility, and enhanced React Native integration.
LogRocket·45wModern CSS carousels: No JavaScript required
Chrome 135 introduces new CSS pseudo-elements ::scroll-button() and ::scroll-marker() that enable building fully functional carousels without JavaScript. These features create interactive scroll buttons and visual markers with built-in accessibility support, including automatic screen reader announcements and keyboard navigation. The pseudo-elements work with existing CSS features like scroll-snap-type for smooth navigation and can be styled like regular HTML elements.
CSS-Tricks·50wRevisiting Image Maps
The post explores the use of image maps, an older web design tool, and discusses their advantages, challenges, and alternatives. It highlights a project for Mike Worth that required blending expressive '90s design with modern techniques. While discovering image maps weren't the right fit, the effort led to finding modern solutions by leveraging SVG and anchoring paths for clickable areas, emphasizing accessibility and responsiveness.
Frontend Masters·25wThe Two Button Problem – Frontend Masters Blog
Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next. The problem is especially pronounced on devices without cursors (TVs, game consoles) where keyboard or remote navigation is required. Solutions include using consistent button styles with additive indicators for the active state, directional arrows, CSS media queries to detect input methods, and pressed/unpressed visual states for toggle buttons. The key principle is making the active state obviously distinct rather than relying on arbitrary style differences.
Chrome Developers·1yChrome for Developers
Chrome 135 introduces new features from the CSS Overflow 5 specification that enable the creation of scroll and carousel experiences without using JavaScript. These new CSS features include scroll buttons, scroll markers, and enhanced accessibility. The new CSS properties make it easy to create carousels, ensure proper element roles, and maintain accessibility standards. Resources and examples are provided to help developers utilize these features effectively.
Lobsters·27wThe Web Is About to Get Better for Everyone, Everywhere
The European Accessibility Act, effective summer 2025, will require digital products in the EU to meet enforceable accessibility standards. This legislation will likely trigger a global upgrade in web accessibility, as companies typically build one version of their products rather than maintaining regional forks. Similar to GDPR's impact on privacy, the EAA will affect how teams design, build, and ship products, requiring semantic HTML, keyboard navigation, screen reader support, and inclusive design patterns. The improvements will spread through shared design systems, component libraries, and frameworks, benefiting developers worldwide and potentially influencing accessibility legislation in other regions.
Chrome Developers·30wChrome for Developers
Chrome 140 introduces several new web development features including the ToggleEvent source attribute for identifying which element triggered a toggle event, support for counter() and counters() functions in CSS content property alt text for better accessibility, and the font-variation-settings descriptor in @font-face rules for more flexible font customization.
Hacker News·24wJust use a button
Using `<div>` elements with click handlers instead of `<button>` elements creates accessibility problems for screen reader and keyboard users. While you can add `role="button"`, `tabindex`, and keyboard event listeners to make a `<div>` behave like a button, this recreates functionality that `<button>` provides natively. The `<button>` element automatically includes proper semantics, focusability, and keyboard interaction without additional code.
Hacker News·28wAutism Simulator - Workplace Experience Simulation
An interactive educational simulation that puts players in the role of a high-masking autistic software engineer navigating workplace challenges. The experience explores sensory overload, social navigation, and burnout in corporate environments through a stat-based gameplay system tracking energy, masking effort, competence, and relationships. Players must balance maintaining professional appearances while managing the mental and emotional toll of masking autistic traits in neurotypical work settings.
Medium·42wTop UI/UX design trends to watch in 2025
UI/UX design in 2025 focuses on intelligent design systems with AI-assisted components, meaningful microinteractions, and subtle personalization. Key trends include voice UI integration, accessibility as a foundation rather than afterthought, smarter Figma workflows, motion design integration, trust-building interfaces, and adaptive UI that responds to user environment. The emphasis shifts from following trends blindly to understanding user needs and creating purposeful, accessible experiences.
Viget·48wCan AI Replace UI Developers?
AI tools are revolutionizing web development, offering speed and automation. However, they can't fully replace human UI developers who ensure performance, accessibility, and empathy in user experiences. AI-generated code often lacks the thoughtful consideration and understanding of user nuances that skilled developers provide, emphasizing the importance of human expertise in creating optimal digital solutions.
Lobsters·22wReimagine 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.
WebDev·1yIntroducing Pillar-UI: A New React Design System
Pillar-UI is a new design system for React apps, focused on performance, accessibility, and developer experience. Built from the ground up, it is significantly smaller and faster than many existing alternatives by leveraging CSS and minimizing JavaScript dependencies. Key features include adherence to WCAG guidelines, RTL support, high contrast mode, and customizable default styles using CSS variables. It also offers reusable hooks, icons, and utility functions to simplify development. The project is open-source and community-driven, inviting collaboration and contribution from developers.
Coding with Sphere·39wHow to setup Terminal Cursor Animations (3 Methods)
Three methods for adding cursor animations to terminals: using Kitty terminal's built-in cursor trail feature with simple configuration, installing the smearcursor.nvim plugin for Neovim that works across any terminal, and building Ghostty terminal from source to use custom cursor trail shaders. Each approach has different compatibility requirements and visual effects.
Read the Tea Leaves·18wThe <time> element should actually do something
The HTML `<time>` element was designed to semantically mark up dates and times with machine-readable datetime attributes, but browsers and assistive technologies don't actually do anything useful with it. Despite being used on roughly 8% of web pages, it remains largely inert beyond basic rendering. Search engines may use it for date snippets, though Google's documentation recommends Schema.org markup instead. The element represents an unfulfilled promise of semantic HTML—browsers could theoretically offer calendar integration, date localization, or enhanced accessibility features, but none have implemented such functionality.
CSS-Tricks·36wBringing Back Parallax With Scroll-Driven CSS Animations
CSS scroll-driven animations now enable parallax effects without JavaScript, using scroll() and view() timeline functions to control animation progress based on scroll position. The technique includes animation ranges for precise timing control, accessibility considerations with prefers-reduced-motion, and browser support strategies including polyfills for unsupported browsers.
Web Dev Simplified·1yStop Using Pixels For Media Queries
Using pixels for font sizes, media queries, padding, and margins is not recommended due to accessibility issues. Instead, using REM units allows for more responsive and scalable designs that adapt to user settings. This practice ensures that elements on the web page remain proportional and accessible across different devices and user preferences.
Community Picks·1yWriting useful Documentation
Effective documentation is crucial for onboarding new developers, clarifying product usage, and fostering communication among teams. The post offers strategies for understanding and meeting the needs of your audience, ensuring accessibility, getting feedback, and maintaining terminology consistency. It also highlights the importance of structure, narrative, and diagram clarity. Documentation should be treated as a continuous product, not a one-time project, and can benefit from automation and integration with codebases.
GitHub Blog·21wLevel up design-to-code collaboration with GitHub’s open source Annotation Toolkit
GitHub open sourced the Annotation Toolkit, a Figma library that improves design-to-code handoffs by embedding accessibility documentation directly into design files. The toolkit uses numbered annotation stamps to document design intent, WCAG compliance requirements, and interactive behaviors, preventing accessibility issues before they reach production. GitHub's internal data showed 48% of accessibility audit issues could have been prevented with better upfront documentation. The toolkit is available on Figma Community and GitHub, includes interactive checklists and WCAG guidance, and accepts community contributions.
Cloud Four·22wSimple 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.
Web Dev Simplified·35wShadcn Finally Has MultiSelect!
A developer creates a custom MultiSelect component for Shadcn UI library, addressing the missing functionality. The implementation combines Popover and Command components, uses React Context for state management, and employs clever techniques to handle component registration before rendering. Key challenges included making components work with Shadcn's declarative syntax, implementing dynamic overflow handling for selected items, and ensuring accessibility. The component is available as a Shadcn registry installation with customizable badges, wrapping behaviors, and search functionality.
Adrian Roselli·19wYou Can’t Make Something Accessible to Everyone
Accessibility is fundamentally about people, not just technical compliance. WCAG conformance (even at AAA level) doesn't guarantee universal accessibility due to varying user needs, contexts, technologies, and abilities. Rather than claiming something is universally accessible, practitioners should specify what accessibility features are implemented. The goal is continuous improvement to serve more people, acknowledging that perfect accessibility for everyone is unattainable given human diversity and technological limitations.