User talk:Nvdtn19

Hello, Nvdtn19! Welcome to Wikivoyage.

To help get you started contributing, we've created a tips for new contributors page, full of helpful links about policies and guidelines and style, as well as some important information on copyleft and basic stuff like how to edit a page. If you need help, check out Help, or post a message in the travellers' pub. New users are also welcome to post any questions or concerns to the arrivals lounge. If you want some practice editing, please do so on our graffiti wall. If you are familiar with Wikipedia, take a look over some of the differences here. If you want to contribute with information about the place where you live, see Wikivoyage:Welcome, locals. //shb (t | c | m) 12:29, 18 August 2025 (UTC)Reply

Please have a look at Wikivoyage:Using MediaWiki templates. Policies here are somewhat different than on other Wikimedia sites. Pashley (talk) 21:33, 23 August 2025 (UTC)Reply

More pointedly: User:Nvdtn19, why are you unilaterally creating numerous templates? Ikan Kekek (talk) 05:16, 24 August 2025 (UTC)Reply

I'm currently experimenting in Template:Ambox/sandbox but there's an error due to missing modules, so that's why I created it. Is there any problems? Nvdtn19 (talk) 05:19, 24 August 2025 (UTC)Reply

I don't know, but it's very unusual for a user without many edits to create so many templates. Could you explain why they're needed? Ikan Kekek (talk) 05:35, 24 August 2025 (UTC)Reply

If it's due to missing modules (which I wouldn't be surprised by – the template has had issues for a very long time but nobody has been bothered to fix it since), I think that explains for itself why they're needed. Also, they are a viwikivoyage sysop so I'm confident they are aware of what they're doing. //shb (t | c | m) 06:35, 24 August 2025 (UTC)Reply

I didn't realize that they were an admin on another Wikivoyage, but I don't know what missing modules means. Ikan Kekek (talk) 06:58, 24 August 2025 (UTC)Reply

@Ikan Kekek English is not my native language so that's why you see I'm not have many edits here, I mainly just come here to make minor edits and import some important things like policy from enwikivoyage (or another project) to viwikivoyage (where I'm also a sysop there). But in the process of doing so, I found that there were also some template bugs in this project (such as not being fixed to be compatible with dark themes), and the purpose of creating those modules is the same as SHB2000 said. It is required for the message box template. Without them, it will give an error says that the module are missing. I'm just trying to fix the project's flaws. Nvdtn19 (talk) 07:32, 24 August 2025 (UTC)Reply

OK, I don't really understand what you're doing, but it sounds helpful. Ikan Kekek (talk) 08:08, 24 August 2025 (UTC)Reply

Hi, take a look at https://www.mediawiki.org/wiki/Help:Lint_errors/night-mode-unaware-background-color.

It shows that is correct to use color:black in most of the occurrences (tipically when the background is light). While color:inherit can be use only when in the context above has been defined a text color to be inherited.

I hope it clarify. Andyrom75 (talk) 12:39, 24 October 2025 (UTC)Reply

@Andyrom75: The problem is using black would make the texts also black in dark theme, so you should be careful and preview the changes after editing. When I'm viewing Template:Listing with default dark theme of Vector2022/Minerva configured, I suddenly see that the whole texts are black in the template documentation, while it should be white text. So I checked to see which template was causing it and it was your recently edit on Module:Documentation/styles.css. As far as I know, inherit will invert the colors to adapt when switching between light and dark mode (black while in light theme, and white when in dark theme). Nvdtn19 (talk) 12:53, 24 October 2025 (UTC)Reply

The color switch should be automatic, however, if in this specific case "inherit" works better than "black", you did the right thing (and thanks for fixing it). But according to the general MediaWiki instruction, "black" should work. Andyrom75 (talk) 13:07, 24 October 2025 (UTC)Reply

Hey, I've noticed you do seem to be doing quite a fair bit of technical work here. Since you are already an int admin and sysop on viwikivoyage, would you like me to nominate you for interface admin here as well? It doesn't require much commitment, but it would be very helpful to the project. //shb (t | c | m) 22:25, 30 October 2025 (UTC)Reply

Thanks, but I don't often have to ask for editing the interface as well as MediaWiki pages here, so maybe IA doesn't seems to very necessary to me yet. Perhaps I just need this right on my home project. Nvdtn19 (talk) 23:40, 30 October 2025 (UTC)Reply

Sure that's fair – but if you do ever find yourself needing to edit css/js pages anytime in the future, do let me know and I will happily nominate you for IA. //shb (t | c | m) 01:15, 31 October 2025 (UTC)Reply

When you finish with the Main Page carousel revamp, can I trouble you for something similar? OhanaUnited^{Talk page} 04:25, 13 October 2026 (UTC)Reply

What things you're encountering? Nvdtn19 (talk) 05:07, 13 October 2026 (UTC)Reply

Over at English Wikiversity, I am one of the individuals responsible for WikiJournals. The banners and navigation menus are not mobile-friendly. The former banners used to look like this before a completely random user did a drive-by revamp to the current version. This user has become inactive and non-communicative since their change, and we don't seem to understand what this user's codes did. I wonder if you could take a look and see since you have the expertise in wiki page design. OhanaUnited^{Talk page} 14:08, 13 October 2026 (UTC)Reply

Thanks. I'll look into this when I have time, perhaps it just needs some minor CSS changes. Nvdtn19 (talk) 04:03, 16 October 2026 (UTC)Reply

Hi @Nvdtn19 thanks for looking into the carousel code. I was just reviewing your code here. I don't see too many problems, with the assumption that this will be a template gadget (mw:Template_gadgets.

The main issue with the current implementation (and this one) is the cumulative layout shift that comes with it. This is known to lead to high bounce rate and user disatifaction. I made a few tweaks to the template to hide slides when client-js is present - as this is an indicator that JS will run. This should keep the layout stable, however even after making this change I am noticing some slight changes to the layout when I load

mw.loader.load('//en.wikivoyage.org/w/index.php?title=User:Nvdtn19/Gadget-Carousel.css&action=raw&ctype=text/css', 'text/css'); 

Could you any CSS that shifts layout from User:Nvdtn19/Gadget-Carousel.css to Template:Banner/sandbox/styles.css ? The goal should be no visible shift of elements when the CSS/JS is loaded. It's okay if new elements are revealed, but the destination of the box shouldn't shrink or move.

That issue aside here's a few other things I'm noticing that should be fixed after reviewing the code:

1) Drop the autoplay. When I load the JS/CSS it's seems to randomly choose a different slide for me each time - can we ensure it always loads the first one. I don't think it's accessible/helpful to change an element without user interaction, especially if there is no pause control (which is an accessibility issue). If we want to keep autoplay I think there's a lot more work we need to do here to make it accessible (e.g .aria-live and semantics)

2) Browser support is still not great for Wikimedia users so a few things you'll need to do for required browser support:

• When using forEach use Array.from - https://codesearch.wmcloud.org/deployed/?q=Array%5C.from%5C%28+document(

3) I'd recommend having a single click event for the carousel on the document.documentElement instead of wrapper and use the event delegation pattern - it will make this feel more snappy and conserve memory on pages with lots of slides. This should also allow you to DRY up the logic in the next and previous button code blocks.

4) Mobile design - while this is a huge improvement on the current one, it still has room for improvement here. I'd suggest making the slides taller. Consider something like this: https://phabricator.wikimedia.org/F108957850

5) Mobile swiping - When I swipe on mobile something doesn't seem to work properly - and I'm seeing more than one slide. This feature feels a little buggy. touchmove is reading offsetWidth in every event, this could be cached in touchstart. Consider removing the touch feature from v1 if you want to get this out sooner.

5) The setInterval should be cleared when I click edit and the carousel is removed from the DOM.

6) data-interval should have a minimum value. I set to 1 and it breaks the carousel.

Some future ideas less urgent thoughts:

1) If we wanted to make this work better for non-JS users or for users with safe mode enabled (where the gadget won't run) you could consider supporting "nextId" and "prevId" parameters in template and make the next and previous buttons link to those ids e.g.

<a href="#slide1">prev</a><a href="#slide2">next</a> 

You could then using the CSS target selector to reveal them. e.g. https://en.wikivoyage.org/wiki/User:Nvdtn19/sandbox3#mwLQ should reveal the 2nd slide with JS disabled.

2) For future proofing - make this work with reduce motion / animation: none - please test with this accessibility feature enabled. It gets stuck.

mw.util.addCSS( `@media ( prefers-reduced-motion: reduce ) { * { animation: none !important; } }`) 

Hope this is helpful. Jdlrobson (talk) 18:09, 17 October 2026 (UTC)Reply

Thanks for your review. I have made some changes in User:Nvdtn19/Gadget-Carousel.js, User:Nvdtn19/Gadget-Carousel.css, and Template:Banner/sandbox/styles.css. Here is a breakdown of the fixes and clarifications:

• The wrapper and viewport have been moved into Template:Banner/sandbox/styles.css, ensuring elements render with their definitive dimensions before JavaScript or Gadget CSS loads. (styles.css #L-5 to L-27)
• All NodeList iterations have been refactored to use Array.from() across all querySelectorAll instances. (JS L-11, L-146, L-406 and L-411).
• Added if (!wrapper.isConnected) { clearInterval(timer); return; } to ensure all active intervals self-destruct as soon as the carousel is removed from the DOM (e.g., when clicking Edit or launching VisualEditor). (JS L-309 to L-312)
• Consolidated all click handling (prev/next controls and numbered tabs) into a single event listener using e.target.closest() (JS L-334 to L-361). However, the listener on the carousel's wrapper should be retained rather than hoisting it to document.documentElement. If you attach it that way, every single click across the entire MediaWiki page—including the search bar, the skin's dropdown menus, the sidebar, and external article links—will trigger this function, forcing the browser to execute e.target.closest() and may create a zombie listener when the carousel is removed from the DOM.
• Enforced Math.max(1000, isNaN(rawInterval) ? 10000 : rawInterval) for positive inputs, preventing animation freezing, while cleanly treating interval <= 0 as a command to disable autoplay. (JS L-304)
• Proposed mobile design & height have been implemented (styles.css #L-227 to L-317 and gadget.css L-247 to L-282).
• For the swiping feature: (JS L-158 to L-291)
  • Cached wrapperWidth = wrapper.offsetWidth once during touchstart, eliminating layout thrashing in touchmove.
  • In the resetInactiveSlides() function and in the cleanup block of touchend, added s.style.zIndex = ''; to ensure the stacking order is restored to its original state after each swipe action.
  • Added touch-action: pan-y; in CSS to decouple vertical scrolling from horizontal swiping.
  • Fixed the slide stacking/ghosting glitch by tracking activeTargetSlide, instantly clearing previous targets on swipe direction reversal, and enforcing a comprehensive style reset resetInactiveSlides() on touchend.

Regrading about the autoplay, randomization and safe mode support:

• Randomization: This is a part of old jCarousel feature, which I believe that, it should needs consensus to disable. The random start was controlled by data-randomize="true" in the wikitext. If anyone want to disable it, just setting data-randomize to false to ensures it always starts reliably at slide 1.
• Autoplay: This is also part of old jCarousel feature. Rather than dropping autoplay outright, editors may disable it per-instance by setting data-interval="0" (JS L-297 to L-301). Furthermore, autoplay are now automatically halts when prefers-reduced-motion: reduce is detected (JS L-55 to L-62 and gadget.css L-64 to L-75), when the user hovers over the banner, when the tab loses focus (document.hidden), or upon keyboard interaction. ARIA landmarks (role="region", role="tablist", aria-roledescription="carousel", aria-live="polite") are also strictly adhered to.
• While using :target and fragment identifiers (#slideX) is an interesting CSS-only idea, it pollutes the user's browser history stack (breaking the back button) and can trigger abrupt viewport jump-scrolling. The current fallback—cleanly stacking slides vertically with height: auto via styles.css—provides standard graceful degradation and remains accessible to screen readers and web crawlers without unexpected side effects. The current fallback is also, a part of old banner feature.

Please feel free to test the updated code and give feedbacks. Thanks. Nvdtn19 (talk) 16:24, 18 October 2026 (UTC)Reply

Thanks for the quick response! Great work! I think this is looking very solid now.

I restored a CSS rule in the template to remove the CLS shift and I think it is in very good shape. This keeps the stacking with JS disabled or old browsers and avoids the folding UX rerender that causes the CLS shift. It does mean that without the gadget loaded only one slide shows but working on the assumption this will be default on this page I think that is an acceptable trade off.

The autoplay is not really a big deal but I do think the randomize function is highly problematic from an accessibility, performance and usability perspective and I would discourage its use on our homepage. If it needs consensus I would encourage us to seek consensus or launch this with agreement not to use randomize until the conversation has played out! Your new version without randomize would likely make a huge difference to our SEO. Jdlrobson (talk) 21:22, 18 October 2026 (UTC)Reply

I have an alternative idea for the CLS fix. Switch to CSS Scroll Snap ensures that only one slide are displayed but the user still can use the scroll bar to switch to other slides until the JS is fully loaded, which is your original idea but with a different way. Hope this is helpful.
However, if you do not want a scroll bar, I may make changes to hide it in desktop, but this would involve making the content scrollable without giving users any signal that they can do so. If there's no scroll bar, other ways is Shift + Scroll, swipe left/right with two fingers in the trackpad, Tab or < > in the keyboard. Nvdtn19 (talk) 03:25, 19 October 2026 (UTC)Reply

I also tried to implement the two-finger trackpad swipes, Shift + scroll wheel feature after the JS is loaded but it seems they're not working properly. It could be added later in v2 once things have stabilized, but as for the current codebase, I think it's ready for production. Nvdtn19 (talk) 08:54, 19 October 2026 (UTC)Reply

thanks for flagging that typo. I am seeing cache pollution (e.g. old versions of pages). Hopefully that also explains that! Fingers crossed... Jdlrobson (talk) 17:55, 25 October 2026 (UTC)Reply

i think we are dealing with some kind of cache pollution here. Ill report it to WMF tomorrow.

I am seeing old versions of the main page with Category:Pages using the legacy Carousel Template but that page got moved and should no longer have any members. Jdlrobson (talk) 18:09, 25 October 2026 (UTC)Reply

Thanks. It's now working for me in both private browsing and when logged in but I had to purge multiple times (hopefully it won't last long). Nvdtn19 (talk) 18:16, 25 October 2026 (UTC)Reply

I made some updates to ensure that either old or new carousel code is loaded but I am seeing inconsistency - sometimes new carousel and sometimes old. At this point I suspect an upstream bug. I will ask some staff members tomorrow when I go to work if they have any ideas. Hopefully it will self correct with time. Jdlrobson (talk) 18:31, 25 October 2026 (UTC)Reply