To create an HTML dialog that spans the full viewport height, even on mobile browsers, you need to address how vh units are calculated. By default, vh often includes the browser's UI (address bar, etc.), making it shorter than the actual visible area. The solution is to use height: 100dvh, which represents 100% of the dynamic viewport height, accounting for those UI elements and ensuring the dialog fills the screen. Additionally, setting margin: 0 removes default margins that might interfere with full-screen coverage. The dialog element needs width: 100vw; height: 100dvh; margin: 0; within its CSS rule.
For startups lacking a dedicated UX designer, this post offers practical, actionable advice centered around user feedback. It emphasizes focusing on the core problem being solved and rapidly iterating based on direct user interaction. The article suggests starting with simple wireframes or even pen-and-paper prototypes, testing them with potential users to identify pain points and iterate quickly. This user-centered approach, combined with a focus on clarity and simplicity in the interface, allows startups to improve UX organically, even without specialized design resources. Ultimately, it champions continuous learning and adaptation based on user behavior as the most effective way to build a user-friendly product.
Hacker News users generally agreed with the article's premise that startups often lack dedicated UX designers and must prioritize essential UX elements. Several commenters emphasized the importance of user research, even without formal resources, suggesting methods like talking to potential users and analyzing competitor products. Some highlighted specific practical advice from the article, such as prioritizing mobile responsiveness and minimizing unnecessary features. A few commenters offered additional tools and resources, like no-code website builders with built-in UX best practices. The overall sentiment was that the article provided valuable, actionable advice for resource-strapped startups.
DuckDB has released a local web UI for interacting with the database. This UI, launched by running .open in the command-line interface, provides a visual interface for browsing tables, executing queries, and visualizing query results as charts. It aims to simplify data exploration and analysis within DuckDB, making it more accessible to users who prefer a graphical interface over a purely command-line driven experience. The UI is built with web technologies and runs entirely locally, requiring no external dependencies or internet connection. This enhances security and privacy by keeping data processing within the user's machine.
Hacker News users generally expressed enthusiasm for the DuckDB UI, praising its ease of use and potential for broader adoption. Several commenters compared it favorably to other database tools, highlighting its intuitive interface as a significant advantage over more complex alternatives. Some pointed out the convenience of having a visual interface for exploring data locally, especially for tasks like quick data analysis or debugging. The ability to visualize query plans and monitor performance metrics was also lauded as a valuable feature. A few users discussed potential use cases, including integrating DuckDB with other tools and using the UI for educational purposes. Some expressed hope for future features, such as support for charting and plugins.
Open-UI aims to establish and maintain an open, interoperable standard for UI components and primitives across frameworks and libraries. This initiative seeks to improve developer experience by enabling greater code reuse, simplifying cross-framework collaboration, and fostering a more robust and accessible web ecosystem. By defining shared specifications and promoting their adoption, Open-UI strives to streamline UI development and reduce fragmentation across the JavaScript landscape.
HN commenters express cautious optimism about Open UI, praising the standardization effort for web components but also raising concerns. Several highlight the difficulty of achieving true cross-framework compatibility, questioning whether Open UI can genuinely bridge the gaps between React, Vue, Angular, etc. Others point to the history of similar initiatives failing to gain widespread adoption due to framework lock-in and the rapid evolution of the web development landscape. Some express skepticism about the project's governance and the potential influence of browser vendors. A few commenters see Open UI as a potential solution to the "island problem" of web components, hoping it will improve interoperability and reduce the need for framework-specific wrappers. However, the prevailing sentiment is one of "wait and see," with many wanting to observe practical implementations and community uptake before fully endorsing the project.
A developer created a charming animated scroll bar companion that "walks" down the webpage as you scroll. The little figure, seemingly inspired by platformer video games, is positioned alongside the scrollbar and mimics the user's scrolling action, creating a playful and visually engaging browsing experience. Its movement is synchronized with the scroll position, giving the impression of the character traversing the page's content. The project showcases a simple yet effective way to enhance the user interface with a touch of whimsy.
Hacker News users generally expressed appreciation for the Scroll Buddy's charm and whimsy. Several commenters pointed out similar prior art, such as the Clippy-inspired scrolling dinosaur for Chrome and a bouncing DVD logo screensaver Easter egg in Firefox. Some discussed technical aspects, including the implementation of the animation using JavaScript and CSS, and the potential performance impact. A few users suggested improvements, like adding customization options or making the character interact with page elements. Overall, the reaction was positive, with many finding the Scroll Buddy a fun and delightful addition to the browsing experience.
WhiteSur is a GTK theme inspired by macOS Big Sur's visual style. It aims to bring the clean, modern aesthetic of macOS to Linux desktops using GTK-based applications. The theme features rounded corners, translucency effects, and a light color palette, mimicking the characteristic appearance of macOS. It supports various GTK versions and desktop environments, offering a comprehensive macOS-like experience for Linux users.
Hacker News users generally praised the WhiteSur GTK theme for its aesthetics and macOS resemblance, with several noting its successful implementation of the blurred translucency effect. Some expressed concerns about GTK theming fragmentation and the potential for themes to negatively impact performance or deviate too far from native desktop environments. Others questioned the theme's adherence to GNOME HIG, suggesting potential usability issues could arise from mimicking macOS design language. A few users discussed the challenges of cross-platform theming and the intricacies of achieving visual consistency across different applications. Several commenters also mentioned or linked to alternative macOS-inspired themes for GTK and other desktop environments.
The Chrome team is working towards enabling customization of the <select> element using the new <selectmenu> element. This upcoming feature allows developers to replace the browser's default dropdown styling with custom HTML, offering greater flexibility and control over the appearance and functionality of dropdown menus. Developers will be able to integrate richer interactions, accessibility features, and more complex layouts within the select element, all while preserving the semantic meaning and native behavior like keyboard navigation and screen reader compatibility. This enhancement aims to address the longstanding developer pain point of limited styling options for the <select> element, opening up opportunities for more visually appealing and user-friendly form controls.
Hacker News users generally expressed frustration with the <select> element's historical limitations and welcomed the proposed changes for customization. Several commenters pointed out the difficulties in styling <select> cross-browser, leading to reliance on JavaScript workarounds and libraries like Choices.js. Some expressed skepticism about the proposed solution's complexity and potential performance impact, suggesting simpler alternatives like allowing shadow DOM styling. Others questioned the need for such extensive customization, arguing for consistency and accessibility over visual flair. A few users highlighted specific use cases, such as multi-select with custom item rendering, where the proposed changes would be beneficial. Overall, the sentiment leans towards cautious optimism, acknowledging the potential improvements while remaining wary of potential drawbacks.
File Pilot is a new file manager focused on speed and a modern user experience. It boasts instant startup and file browsing, a dual-pane interface for efficient file operations, and extensive customization options like themes and keyboard shortcuts. Built with a robust architecture using Rust and Qt, File Pilot aims to provide a reliable and performant alternative to existing file explorers on Windows, macOS, and Linux. Key features include tabbed browsing, a built-in terminal, seamless file previews, and advanced filtering capabilities. File Pilot is currently available as a free technical preview.
HN commenters generally praised File Pilot's speed and clean interface, with several noting its responsiveness felt superior even to native file managers. Some appreciated specific features like the tabbed interface, customizable keyboard shortcuts, and the dual-pane view. A few users requested features like the ability to edit text files directly within the application and improved search functionality. Concerns were raised about the developer's choice to use Electron, citing potential performance overhead and resource consumption. There was also discussion around the lack of a Linux version and the developer's plans for future development and monetization. Some commenters expressed skepticism about the long-term viability of the project given its reliance on a single developer.
The blog post argues that ChatGPT's autocomplete feature, while technically impressive, hinders user experience by preemptively finishing sentences and limiting user control. This creates several problems: it interrupts thought processes, discourages exploration of alternative phrasing, and can lead to inaccurate or unintended outputs. The author contends that true user control requires the ability to deliberately choose when and how suggestions are provided, rather than having them constantly injected. Ultimately, the post suggests that while autocomplete may be suitable for certain tasks like coding, its current implementation in conversational AI detracts from a natural and productive user experience.
HN users largely agree with the author's criticism of ChatGPT's autocomplete. Many find the aggressive and premature nature of the suggestions disruptive to their thought process and writing flow. Several commenters compare it unfavorably to more passive autocomplete systems, particularly those found in code editors, which offer suggestions without forcing them upon the user. Some propose solutions, such as a toggle to disable the feature, adjustable aggressiveness settings, or a delay before suggestions appear. Others note the potential usefulness in specific contexts like collaborative writing or brainstorming, but generally agree it needs refinement. A few users suggest the aggressiveness might be a deliberate design choice to showcase ChatGPT's capabilities, even if detrimental to the user experience.
"What if Eye...?" explores the potential of integrating AI with the human visual system. The MIT Media Lab's Eye group is developing wearable AI systems that enhance and augment our vision, effectively creating "eyes for the mind." These systems aim to provide real-time information and insights overlaid onto our natural field of view, potentially revolutionizing how we interact with the world. Applications range from assisting individuals with visual impairments to enhancing everyday experiences by providing contextual information about our surroundings and facilitating seamless interaction with digital interfaces.
Hacker News users discussed the potential applications and limitations of the "Eye Contact" feature presented in the MIT Media Lab's "Eyes" project. Some questioned its usefulness in real-world scenarios, like presentations, where deliberate looking away is often necessary to gather thoughts. Others highlighted ethical concerns regarding manipulation and the potential for discomfort in forced eye contact. The potential for misuse in deepfakes was also brought up. Several commenters saw value in the technology for video conferencing and improving social interactions for individuals with autism spectrum disorder. The overall sentiment expressed was a mix of intrigue, skepticism, and cautious optimism about the technology's future impact. Some also pointed out existing solutions for gaze correction, suggesting that the novelty might be overstated.
Chromium-based browsers on Windows are improving text rendering to match the clarity and accuracy of native Windows applications. By leveraging the DirectWrite API, these browsers will now render text using the same system-enhanced font rendering settings as other Windows programs, resulting in crisper, more legible text, particularly noticeable at smaller font sizes and on high-DPI screens. This change also improves text layout, resolving issues like incorrect bolding or clipping, and makes text selection and measurement more precise. The improved rendering is progressively rolling out to users on Windows 10 and 11.
HN commenters largely praise the improvements to text rendering in Chromium on Windows, noting a significant difference in clarity and readability, especially for fonts like Consolas. Some express excitement for the change, calling it a "huge quality of life improvement" and hoping other browsers will follow suit. A few commenters mention lingering issues or inconsistencies, particularly with ClearType settings and certain fonts. Others discuss the technical details of DirectWrite and how it compares to previous rendering methods, including GDI. The lack of subpixel rendering support in DirectWrite is also mentioned, with some hoping for its eventual implementation. Finally, a few users request similar improvements for macOS.
This blog post presents a simple bookmarklet designed to remove fixed position headers on websites. The author, frustrated by obstructive sticky headers, created a JavaScript snippet that can be saved as a bookmark. When clicked, this bookmarklet iterates through all elements on the current page, identifies those with a fixed position (typically headers), and sets their position to static, effectively removing the sticky behavior. The post highlights the bookmarklet's effectiveness in reclaiming screen real estate and improving the browsing experience. It also includes the code snippet for easy copying and implementation.
Hacker News users generally praised the bookmarklet for its simplicity and effectiveness in removing annoying sticky headers. Some users expressed concerns about potential website breakage, while others offered alternative solutions like browser extensions (e.g., uBlock Origin) or Stylish. A few commenters suggested improvements to the bookmarklet's code, such as handling elements with position: fixed differently or providing an option to restore the original header. The discussion also touched upon the broader issue of intrusive web design and the ongoing battle between users and websites trying to maximize ad revenue. One commenter even shared a personal anecdote about creating a similar tool years prior, highlighting the long-standing frustration with sticky headers.
This project introduces a Tailwind CSS plugin called corner-smoothing that allows developers to easily create Apple-like smooth rounded corners without complex SVG filters or excessive markup. It provides a set of pre-defined utility classes for various corner radii, inspired by Apple's design language, that can be applied directly to HTML elements. The plugin aims to simplify the process of achieving this subtle but polished visual effect, making it readily accessible through familiar Tailwind syntax.
HN commenters generally praised the smooth corner implementation for Tailwind CSS, finding it a clever and useful approach. Several appreciated the use of a single div and the avoidance of pseudo-elements, considering it elegant and performant. Some pointed out potential limitations, like the inability to control individual corner rounding and challenges with background images or borders. A few users offered alternative solutions, including using SVG filters or leveraging specific Tailwind features. The overall sentiment was positive, with many expressing interest in using the technique in their projects.
GitHub's UI evolution has been a journey from its initial Ruby on Rails monolithic architecture to a more modern, component-based approach. Historically, the "primer" design system helped create a unified experience, but limitations arose due to its tight coupling with Rails and evolving product needs. The present focuses on ViewComponent, promoting reusability and isolation, and adopting TypeScript for frontend development to improve maintainability and developer experience. Looking ahead, GitHub aims to streamline workflows, simplify the developer experience, and expand ViewComponent's scope for broader usage within the platform, ultimately aiming for a faster, more performant, and more accessible UI.
HN commenters largely focused on GitHub's UI regressions and perceived shift towards catering to non-developers. Several lament the removal of features and increased complexity, citing specific examples like the cluttered code review experience and the proliferation of non-coding-related UI elements. Some express nostalgia for the simpler, developer-centric design of the past, arguing the current direction prioritizes marketing and project management over core coding functionality. The discussion also touches on the transition to View.js and perceived performance issues, with some suggesting these changes contributed to the decline in user experience. A few commenters offer counterpoints, suggesting the changes benefit larger organizations and complex projects. Others point to the inherent challenge of balancing diverse user needs on a platform as large as GitHub.
The post "UI is hell: four-function calculators" explores the surprising complexity and inconsistency in the seemingly simple world of four-function calculator design. It highlights how different models handle order of operations (especially chained calculations), leading to varied and sometimes unexpected results for identical input sequences. The author showcases these discrepancies through numerous examples and emphasizes the challenge of creating an intuitive and predictable user experience, even for such a basic tool. Ultimately, the piece demonstrates that seemingly minor design choices can significantly impact functionality and user understanding, revealing the subtle difficulties inherent in user interface design.
HN commenters largely agreed with the author's premise that UI design is difficult, even for seemingly simple things like calculators. Several shared anecdotes of frustrating calculator experiences, particularly with cheap or poorly designed models exhibiting unexpected behavior due to button order or illogical function implementation. Some discussed the complexities of parsing expressions and the challenges of balancing simplicity with functionality. A few commenters highlighted the RPN (Reverse Polish Notation) input method as a superior alternative, albeit with a steeper learning curve. Others pointed out the differences between physical and software calculator design constraints. The most compelling comments centered around the surprising depth of complexity hidden within the design of a seemingly mundane tool and the difficulties in creating a truly intuitive user experience.
Clay is a UI layout library focused on providing a robust, composable, and performant system for building user interfaces. It leverages CSS Grid and a declarative JavaScript API to define layouts, offering a clean separation of concerns between structure and styling. The library emphasizes flexibility and extensibility, allowing developers to create complex, responsive layouts with minimal code. By handling layout logic, Clay frees developers to focus on component development and overall application functionality, ultimately aiming to streamline the UI development process.
HN users generally praised Clay's approach to layout, highlighting its use of constraints, which some compared favorably to CSS Flexbox and Grid. Several appreciated its focus on solving layout problems specifically, rather than trying to be an all-encompassing UI framework. The lack of browser support and the potential performance implications of using WebAssembly were raised as concerns. Some commenters questioned the choice of Rust/WebAssembly and suggested alternatives like native JavaScript or compiling to WebAssembly from a language with better JavaScript interoperability. The project's early stage of development was also noted, with several users expressing interest in its future progress. Some discussed the complexity of layout systems and whether Clay's constraint-based approach offered significant advantages over existing solutions.
Summary of Comments ( 7 )
https://news.ycombinator.com/item?id=43378225
Hacker News users discussed several alternative solutions to styling a full-height modal dialog, focusing on simpler, more robust approaches than the article's method. Commenters suggested using
height: 100vhdirectly on the dialog element, combined withposition: fixedorposition: absolutedepending on the desired behavior relative to scrolling. Others pointed out potential issues with the article's approach, such as handling scrollbars and ensuring accessibility. The discussion also touched upon the role of the<dialog>element itself and the complexities introduced by nested scrolling scenarios. Several users shared personal experiences and preferences for handling modal layouts.The Hacker News post "Styling an HTML dialog modal to take the full height of the viewport" linking to Simon Willison's blog post has generated several comments discussing different approaches to achieving full-height modals and the nuances involved.
One commenter highlights potential accessibility issues with the
dialogelement, specifically regarding focus management when opening and closing the modal. They suggest that while thedialogelement offers convenient features, developers still need to carefully handle focus to ensure proper accessibility for keyboard users and users of assistive technologies.Another comment points out that using
height: 100%on thedialogelement itself won't work as expected because it calculates height relative to its containing block, which isn't the viewport. The comment explains that the solution provided in the article, usingheight: 100vh, works becausevhunits are relative to the viewport height. They also suggest an alternative approach using Flexbox to achieve similar results.Several commenters discuss the quirks and limitations of the
dialogelement's default centering behavior. One user points out that thedialogelement is centered usingtranslate(-50%, -50%), which can cause issues if the dialog's content changes dynamically. They propose alternative centering techniques using Flexbox or Grid.Another discussion thread revolves around the different ways to style the backdrop or overlay behind the modal. One commenter suggests using a pseudo-element on the
bodyelement to create the overlay and avoid potential stacking context issues. Others discuss using separate elements for the backdrop and controlling their visibility with JavaScript or CSS.A few comments delve into browser compatibility issues with the
dialogelement, particularly with older browsers. While support is improving, some commenters recommend using polyfills or alternative modal implementations for broader browser compatibility.Finally, some commenters express appreciation for the simplicity and elegance of using the native
dialogelement, while others advocate for more robust and customizable JavaScript-based modal solutions. The thread demonstrates a range of perspectives and preferences regarding modal implementation techniques.