The <select>
element, long a styling holdout, is finally getting much-needed CSS customization capabilities in Chromium-based browsers. Developers can now style aspects like the dropdown arrow (using appearance: none
and pseudo-elements), open state, and even the listbox itself, offering greater control over its visual presentation. This enables better integration with overall site design and improved user experience without resorting to JavaScript workarounds or custom elements. While some pseudo-elements are browser-prefixed, the changes pave the way for more consistently styled and accessible dropdown menus across the web.
This project demonstrates a workaround for Firefox's lack of WebUSB support by leveraging its native messaging capabilities. A small native application acts as a bridge, receiving commands from a web page via native messaging and interacting directly with USB devices. The web page communicates with this intermediary application using a custom, WebUSB-like JavaScript API, effectively emulating WebUSB functionality within Firefox. This allows web developers to write code that interacts with USB devices in a consistent manner across browsers, handling the Firefox difference behind the scenes.
Hacker News commenters generally expressed frustration with Firefox's lack of WebUSB support, echoing the author's sentiments. Some pointed out that the Mozilla Developer Network (MDN) documentation misleadingly suggests WebUSB is supported, while others shared workarounds and alternative solutions, including using Chrome or a native messaging host. A few commenters questioned the security implications of granting websites access to USB devices, highlighting potential vulnerabilities. The complexity of adding WebUSB support in Firefox was also discussed, citing issues like sandboxing and driver interaction as potential roadblocks. One commenter offered a personal anecdote about the challenges of debugging WebUSB issues due to inconsistent browser implementations.
Hillel Wayne presents a seemingly straightforward JavaScript code snippet involving a variable assignment within a conditional statement containing a regular expression match. The unexpected behavior arises from how JavaScript's RegExp
object handles global flags. Because the global flag is enabled, subsequent calls to test()
within the same regex object continue matching from the previous match's position. This leads to the conditional evaluating differently on subsequent runs, resulting in the variable assignment only happening once even though the conditional appears to be true multiple times. Effectively, the regex remembers its position between calls, causing confusion for those expecting each call to test()
to start from the beginning of the string. The post highlights the subtle yet crucial difference between using a regex literal each time versus using a regex object, which retains state.
Hacker News users discuss various aspects of the perplexing JavaScript parsing puzzle. Several commenters analyze the specific grammar rules and automatic semicolon insertion (ASI) behavior that lead to the unexpected result, highlighting the complexities of JavaScript's parsing logic. Some point out that the ++
operator binds more tightly than the optional chaining operator (?.
), explaining why the increment applies to the property access result rather than the object itself. Others mention the importance of tools like ESLint and linters for catching such potential issues and suggest that relying on ASI can be problematic. A few users share personal anecdotes of encountering similar unexpected JavaScript behavior, emphasizing the need for careful consideration of these parsing quirks. One commenter suggests the puzzle demonstrates why "simple" languages can be more difficult to master than initially perceived.
Eric Meyer reflects on the ten years since the release of his book, "Designing for Performance," lamenting the lack of significant progress in web performance. While browsers have gotten faster, web page bloat has outpaced these improvements, resulting in a net loss for users. He points to ever-increasing JavaScript execution times and the prevalence of third-party scripts as primary culprits. This stagnation is particularly frustrating given the heightened importance of performance for accessibility, affordability, and the environment. Meyer concludes with a call to action, urging developers to prioritize performance and break the cycle of accepting ever-growing page weights as inevitable.
Commenters on Hacker News largely agree with Eric Meyer's sentiment that the past decade of web development has been stagnant, focusing on JavaScript frameworks and single-page apps (SPAs) to the detriment of the core web platform. Many express frustration with the complexity and performance issues of modern web development, echoing Meyer's points about the dominance of JavaScript and the lack of focus on fundamental improvements. Some commenters discuss the potential of Web Components and the resurgence of server-side rendering as signs of positive change, though others are more pessimistic about the future, citing the influence of large tech companies and the inherent inertia of the current ecosystem. A few dissenting voices argue that SPAs offer legitimate benefits and that the web has evolved naturally, but they are in the minority. The overall tone is one of disappointment with the current state of web development and a desire for a return to simpler, more performant approaches.
Cloudflare is reportedly blocking access to certain websites for users of Pale Moon and other less common browsers like Basilisk and Otter Browser. The issue seems to stem from Cloudflare's bot detection system incorrectly identifying these browsers as bots due to their unusual User-Agent strings. This leads to users being presented with a CAPTCHA challenge, which, in some cases, is unpassable, effectively denying access. The author of the post, a Pale Moon user, expresses frustration with this situation, especially since Cloudflare offers no apparent mechanism to report or resolve the issue for affected users of niche browsers.
Hacker News users discussed Cloudflare's blocking of Pale Moon and other less common browsers, primarily focusing on the reasons behind the block and its implications. Some speculated that the block stemmed from Pale Moon's outdated TLS/SSL protocols creating security risks or excessive load on Cloudflare's servers. Others criticized Cloudflare for what they perceived as anti-competitive behavior, harming browser diversity and unfairly impacting users of niche browsers. The lack of clear communication from Cloudflare about the block drew negative attention, with users expressing frustration over the lack of transparency and the difficulty in troubleshooting the issue. A few commenters offered potential workarounds, including using a VPN or adjusting browser settings, but there wasn't a universally effective solution. The overall sentiment reflected concern about the increasing centralization of internet infrastructure and the potential for large companies like Cloudflare to exert undue influence over web access.
Summary of Comments ( 42 )
https://news.ycombinator.com/item?id=43532830
Hacker News users generally expressed cautious optimism about the ability to finally style
<select>
elements with CSS. Several pointed out that this has been a long-requested feature and lamented the previous difficulty in customizing dropdowns. Some praised the detailed explanation in the blog post, while others worried about browser compatibility and the potential for inconsistencies across different implementations. A few users discussed specific styling challenges they'd encountered, like styling the dropdown arrow or achieving consistent behavior across operating systems. There was some concern about the potential for developers to create confusing or inaccessible custom selects, but also acknowledgment that the feature offers powerful new design possibilities.The Hacker News post "The
<select>
element can now be customized with CSS" linking to a Chrome developer blog post has generated a number of comments discussing the implications of this change.Several commenters express cautious optimism. While acknowledging that increased customizability is generally good, they point out the historical difficulties and inconsistencies across browsers in styling
<select>
elements. Some express concern that this new ability, while welcome, might lead to developers creating inconsistent or poor user experiences by over-styling the element and deviating too far from established platform conventions. They argue that the default select element, while visually simple, offers a familiar and predictable user experience, and excessive customization could compromise usability.One commenter highlights the specific challenges of creating accessible custom select elements, emphasizing the importance of ensuring that custom styles don't negatively impact keyboard navigation or screen reader compatibility. They suggest that developers should carefully consider accessibility implications when implementing custom styles.
Others share practical experiences and anecdotes about past struggles with styling
<select>
, expressing relief that more customization will be possible. They discuss the workarounds they've had to employ, such as using JavaScript libraries to create custom select replacements, and anticipate that this change will simplify development.A recurring theme in the discussion is the desire for a balance between customizability and consistency. Commenters acknowledge the need for flexibility in styling to match different design requirements but also emphasize the importance of maintaining a recognizable and predictable user interface for the sake of usability. They suggest that developers should exercise restraint and prioritize user experience when customizing select elements.
Some comments delve into the technical details of the proposed changes, discussing the specific CSS properties and how they might be used. There is also discussion about browser compatibility and the potential for inconsistencies in implementation across different browsers.
A few commenters express skepticism about the necessity of extensive customization, arguing that the default select element is functional and sufficient in most cases. They suggest that excessive styling can lead to unnecessary complexity and potentially degrade the user experience.
Overall, the comments reflect a mix of excitement and apprehension about the ability to customize
<select>
elements with CSS. While many welcome the increased flexibility, there's a clear understanding of the potential pitfalls and a shared concern for maintaining usability and accessibility. The discussion emphasizes the importance of thoughtful and responsible implementation of custom styles, prioritizing user experience over purely aesthetic considerations.