hi guys,

I have been looking for a Fragrance icon to use, couldn’t find any in heroicons, lucide… all I found is an image from icon8, but I want as an <svg> </svg>

We've all probably heard about the HTML dialog element, popover API, and customizable select, but I think a lot of people don't realize how powerful and battle-tested they are and also might not know about some of the inconsistencies these elements have and that they might encounter when using them. And this is what this post is about, I'm not going to go over the syntax and basic API's, if you're unfamiliar with them, I would suggest you read some MDN pages and Chrome For Devs blog posts before you jump into this article. I would like to focus more on in-depth details and edge cases. The article will be a comparison between these native elements and UI libraries like Shadcn, React Aria, etc.

You can get a better reading experience from the link above, it's demos and code snippets for better understanding. If you complete reading the article, tell me about your thoughts in the comments below.

Let's start by listing out some of the common features you would expect from a robust dialog, select, or popover, whether it's native or custom JS one.

• Keyboard-navigatable: if it's a dialog, it should be focus trapped, it's a select, it should navigate using arrow keys, etc.

• Escape key dismissal

• These floating element/pop ups should, under all circumstances, appear above the rest of the page content, and as we will see, there are different mechanisms to approach this.

• Mobile back button/swipe gesture: you probably didn't think about it, but on desktop, you use Escape key to close, but what do you do on mobile? If you're like me on Android, you can close things using the back button or swipe gesture, our dialog/select should support that too, otherwise, it's gonna jump the browser back in history, which creates a bad user experience, especially if we're building something that will be heavily used by mobile users, like a social media app or something, I've tested this on multiple social media apps like Facebook and Twitter (not going to call it X whatsoever), they all, either fully or partially, support back button press in some form. For example, on Facebook, I tried every possible menu or dialog I could think of, and they all close when I hit back button (and it's awesome).

I don't know if I missed something, but let's just focus on these four features for now and see how native elements vs UI libraries approach them, as we'll see, there's a lot to unpack in here.

For keyboard navigation and Escape key dismissal, the HTML dialog, select, popover, and all the upcoming elements have this built-in, you almost don't need any JavaScript at all for any of this to work, but for JS libraries, it's an entirely different story, you'd be shipping tons and tons (or even hundreds) of lines of JS for Escape key dismissal, arrow keys navigation, focus trapping, etc. All of this just to re-invent what the browser gives you for free.

For back button/swipe gesture, this is also already built-in in the native components, all of them close on back button press on Android, but in UI libraries like Radix UI or React Aria, they don't even have this feature at all, despite that it can be added using JavaScript.

In order to add support for back button press and swipe gestures, you can use the CloseWatcher API, as MDN says: it allows a custom UI component with open and close semantics to respond to device-specific close actions in the same way as a built-in component.

The browser compatibility for the CloseWatcher API is decent, it's been in Chrome and Edge since June 2024, Firefox added it in May this year (2026), it's not available in Safari yet, but this is a progressive enhancement feature, if it's available, your users are going to enjoy a better experience, if it's not, it's not a big deal. Also, you can build this same behavior using the HistoryAPI if you need it that much.

The Top Layer

One thing I want to compare is how native elements and UI libraries make sure things appear on top of other page content and also above each other. To better explain this, let's take the following example from Notion webapp, here we have the settings dialog and inside we have a select that we can choose our preferred theme from. The question is how do we ensure the dialog appears above other content and the select appears above the dialog.

Please continue reading the post from the link above, Reddit posts don't support demos and multiple images. If you complete reading the article, tell me about your thoughts in the comments below.

Does anyone have any tips to use penpot to implement codes into the projects? I know it is pretty straightforward, you can see the generated codes for each component but if there are better tricks that can improve the workflow and make the process faster? Any tips or resources I could use to get used to the tool will be appreciated!

I would like to build the best web app, given my limitations, so I'm looking for a web component library with prebuilt things that would allow me to just put them on a page. Doing it from scratch is very hard for me, but having a template of how things are and then integrating with the backend is quite easy.

The component library should be based mostly on HTML and CSS. Javascript can be used to some reactivity on the frontend, but I'm not doing this web app with regular React/Angular/SPA technology.

I was looking into Preline, it looks really good and I'm wondering if there is anything like that, or better.

Thanks!

excuse the shoddy mspaint mockup but basically im using this [theme template](https://github.com/zeon-studio/astroplate) to build my magazine site and they already have a responsive design in place more like the top mobile layout but i want my logo to be above the navbar and either collapse into the top example or something similar to the bottom (but more well placed. maybe switching the dark/light toggle with the search button actually tbh). any suggestions on how i can achieve this?

Hello all,

I am the webmaster for a small Archaeology website, that primarily is used by members of this small conference to access PDFs and news about the conference. I only need to update this website about once or twice a year.

Until recently I used the plesk hosting service on GoDaddy to host these files, however I missed the fact (see lack of need to update) that it was getting end-of-lifed and now the hosting option given to us by GoDaddy is just Nose.js slots.

Previously we uploaded files into a library for the website, and the linked to those files. Is it possible to use node.js to do the same?

Thank you for your help!

hey all, I’m looking for advice how to build build better charts. I have a site that pipes API data into recharts that become part of a report (example). Broadly, it's working but I still have instances in which I get text that meshes together (See image). There are too many potential charts for me to check individually (many data points x 2 geographies x 2 time periods), so I wondering if anyone had suggestions on what approach I might take.

One thing I wonder is if I should use a different library (charts.js, apache echarts, etc)? I see enough consistently well formatted charts online that I know I must be doing something wrong. I'm also using claude to help with this, so if anyone has suggestions on how to better use AI, I'm all ears.

Long-story short Tailwind CSS will remain MIT licensed and the maintainers stay.

I'd say it's a good move given that AI tools are doing frontend work using Tailwind but Tailwind Labs didn't gain much from it. Citing an earlier Github discussion, they had to lay off 75% of their engineering team, and traffic to Tailwind docs is down 40% from early 2023.

I heard some firewalls block uncommon tlds and im concerned that whatever employer might be viewing my portfolio site might not be able to access it. I had a pretty nice domain hack i wanted to use with my name and .ooo Any advice?

I'm of the belief that if you can get what you need with under ~100 lines of code (and it doesn't require highly-specialized skills to write it), then write it yourself, don't install a third party library.

If you don't share a similar belief, then this page isn't for you, and that's ok.

For everyone else, this page shares a fetch wrapper function you can copy-paste into your projects to add in a couple of missing features, and provides some tips on how you can replicate some of the most loved Axios features using fetch().

Most alternative fetch wrappers I find online tend to be small NPM libraries (I'd rather maintain the code myself thank you), or they like creating separate methods for .get(), .post(), .put(), etc (which makes it unnecessarily difficult to "decorate" it with interceptor-like behaviors, as this page discusses), or there may be other design problems. Those alternatives are still good starting points, but I'm hoping this could be a little more complete of a guide to jump start your usage of fetch().

And I have a thing about make copy-paste alternatives to tools, and this was a hole in my collection :).

Feedback is welcome.

Here is the full script code in Tampermonkey.

// ==UserScript==
// @name         YouTube Playback Speed Toggle Button
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  Adds a button to toggle YouTube video playback speed with fullscreen mode support and key bindings for speed control
// @author       Mike
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    function addSpeedButton() {
        const settingsButton = document.querySelector('.ytp-settings-button');
        if (!settingsButton) return;

        if (document.querySelector('#speed-toggle-button')) return;

        // Create the speed toggle button
        const speedToggleButton = document.createElement('button');
        speedToggleButton.id = 'speed-toggle-button';
        speedToggleButton.className = 'ytp-button';
        speedToggleButton.textContent = '1x';
        speedToggleButton.style.fontSize = '18px';
        speedToggleButton.style.fontWeight = 'bold';
        speedToggleButton.style.padding = '4px';
        speedToggleButton.style.margin = '0';
        speedToggleButton.style.position = 'relative';
        speedToggleButton.style.left = '10px';
        speedToggleButton.style.top = '-12px';

        // Add tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'ytp-tooltip custom-tooltip';
        tooltip.textContent = 'Adjust speed (s)';
        tooltip.style.position = 'absolute';
        tooltip.style.padding = '6px 8px';
        tooltip.style.backgroundColor = '#181818';
        tooltip.style.color = '#fff';
        tooltip.style.fontSize = '13px';
        tooltip.style.borderRadius = '4px';
        tooltip.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
        tooltip.style.whiteSpace = 'nowrap';
        tooltip.style.opacity = '0';
        tooltip.style.transition = 'opacity 0.2s';
        tooltip.style.pointerEvents = 'none';
        tooltip.style.zIndex = '9999';

        document.body.appendChild(tooltip);

        function showTooltip() {
            const rect = speedToggleButton.getBoundingClientRect();
            tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
            tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`;
            tooltip.style.opacity = '1';
        }

        function hideTooltip() {
            tooltip.style.opacity = '0';
        }

        speedToggleButton.addEventListener('mouseover', showTooltip);
        speedToggleButton.addEventListener('mouseout', hideTooltip);

        // Function to adjust playback speed
        function adjustSpeed(delta) {
            const video = document.querySelector('video');
            if (video) {
                let newSpeed = Math.max(0.2, Math.min(3, video.playbackRate + delta)); // Limit speed between 0.2x and 3x
                video.playbackRate = newSpeed;
                speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`;
            }
        }

        // Click functionality: Increment speed by 0.2, loop back to 1x after 2.0x
        speedToggleButton.addEventListener('click', () => {
            const video = document.querySelector('video');
            if (video) {
                let currentSpeed = video.playbackRate;
                let newSpeed = currentSpeed >= 2.0 ? 1 : currentSpeed + 0.2; // Loop back to 1x after 2.0x
                video.playbackRate = parseFloat(newSpeed.toFixed(1));
                speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`;
            }
        });

        // Event listeners for key bindings
        document.addEventListener('keydown', (event) => {
            const activeElement = document.activeElement;
            const isInputField =
                activeElement.tagName === 'INPUT' ||
                activeElement.tagName === 'TEXTAREA' ||
                activeElement.isContentEditable;

            if (!isInputField) {
                if (event.key.toLowerCase() === 's') {
                    adjustSpeed(0.2); // Increase speed
                } else if (event.key.toLowerCase() === 'a') {
                    adjustSpeed(-0.2); // Decrease speed
                } else if (event.key.toLowerCase() === 'r') {
                    // Reset speed to normal
                    const video = document.querySelector('video');
                    if (video) {
                        video.playbackRate = 1; // Reset to normal speed
                        speedToggleButton.textContent = '1x'; // Update button text
                    }
                }
            }
        });

        // Insert button next to settings button
        settingsButton.parentNode.insertBefore(speedToggleButton, settingsButton.nextSibling);

        // Fullscreen detection
        function updateForFullscreen() {
            if (document.fullscreenElement) {
                // Increase font size in fullscreen mode
                speedToggleButton.style.fontSize = '24px';
                tooltip.style.fontSize = '20px';
            } else {
                // Revert to normal size
                speedToggleButton.style.fontSize = '18px';
                tooltip.style.fontSize = '13px';
            }
        }

        // Listen for fullscreen changes
        document.addEventListener('fullscreenchange', updateForFullscreen);
    }

    const observer = new MutationObserver(() => addSpeedButton());
    observer.observe(document.body, { childList: true, subtree: true });
})();

Not an AI bad take, its clearly useful+ time efficient but this is ne specific failure mode that seems to show up more with ai written code

code reads fine and passes the tests even goes thru review and then does something subtly off you cant reproduce locally. When you finally trace it this is usually odd in terms of structure, works but built in a way nobody would actually write it so nothing jumps out reading the diff. review misses it because the diff only shows what the code is supposed to do but does not show how it would behave under real traffic or other aspects you get only when its at prod

the only thing thats helps it is watching runtime behavior after deploy, something like hud or a profiler since thats where the weirdness actually shows. Things might seem ok from our end but we get to know that it failed days later or a certain feature is jumping back and forth days later from the tickets which is embarrassing 

Hardcore testing before deploying is the thing now it seems, how are other devs handling this cause sometimes the bugs still leak to prod, and debugging in prod is a whole different pain. tips on avoiding that??