DEV Community: Varun Manjunath

My kid asked to watch one Bluey episode. Auto-play had other plans. Forty-five minutes later it was unboxing videos, a bedtime meltdown, and me wondering why a video platform built for "watching what you want" had quietly turned into a platform that decides for you.

That's the problem I set out to fix with NoSuggest, a free, open-source PWA that strips YouTube down to just the channels you choose. No recommendations, no Shorts, no auto-play, no trending feed, no algorithmic rabbit holes.

Kids only ever see content from channels a parent explicitly added. There's a dedicated Kids Mode with a 6-digit PIN, and it hides anything that could lead to an accidental tap outside curated content.

It's not a parental-control gimmick bolted onto an ad-supported product.

There's no ad tier to protect, no engagement metric to hit. Free forever, no data collection, no premium version waiting behind a paywall.

If you're a developer, parent, or just tired of losing an hour to a feed you never asked for, take a look at the code or try it yourself in GitHub.

How I approached accessibility in a single-page PWA — and what I still need help with

Varun Manjunath — Wed, 15 Jul 2026 01:43:08 +0000

I built NoSuggest — a free, open-source Progressive Web App that lets you watch YouTube without the algorithm. No recommendations, no Shorts, no auto-play. Just the channels you explicitly choose.

It started as a personal tool. Then teachers started using it in classrooms. Then it got listed on the ISTE EdTech Index. Suddenly accessibility wasn't optional, it was the right thing to do, and genuinely important for the people using it.

I want to share what I actually did, what was harder than expected, and where I got it wrong the first time. And at the end — an honest ask.

The architecture that made accessibility tricky

NoSuggest is a single HTML file. No framework. No build step. All screens are position:absolute divs that toggle opacity and pointer-events. This meant the usual accessibility patterns didn't apply cleanly — I had to think carefully about what "navigation" even means when there's no page load.

The biggest early mistake: inactive screens were still in the Tab order. You would Tab through the Feed screen and silently end up inside the Settings screen — completely invisible to a sighted user but reachable by keyboard. Classic SPA trap.

What I fixed, and how

1. `inert` for inactive screens

The fix was the inert attribute — it removes an entire element's subtree from Tab order and screen reader traversal in one shot, with no JavaScript loop needed:

screens.forEach(s => s.setAttribute('inert', ''));
activeScreen.removeAttribute('inert');

Progressive enhancement: browsers without inert support just ignore it and fall back to the previous behaviour. No breakage.

2. Modal focus trapping

Every modal in the app (Export Backup, Kids Mode PIN, iOS install sheet, video player) now traps Tab inside it and returns focus to the triggering element on close. One shared utility handles all of them:

function a11yOpenModal(modalEl, closeFn) {
  _a11yLastFocused = document.activeElement;
  // focus first focusable inside modal
}

function a11yCloseModal() {
  _a11yLastFocused.focus(); // return focus
}

Escape closes any open modal from anywhere — consistent and expected.

3. Skip links

The Feed screen can have 10+ channels, each with 10 videos and a bookmark button — that's potentially 200+ Tab stops before you reach the nav. Two skip link patterns helped:

A "Skip to main content" link as the very first focusable element on the page
A per-channel skip link on the Feed, hidden until focused, that jumps straight to the next channel — chainable, so you can skip several in a row with Enter, Enter, Enter

Both use the classic off-screen-until-focused pattern:

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
}

4. The YouTube iframe problem

The video player uses the YouTube IFrame API. Once focus enters the iframe, it disappears into a cross-origin document — our Tab trap can't see it, so focus could wander through however many controls YouTube exposes before returning.

Fix: set tabIndex = -1 on the iframe element itself once the player is ready. Our own Close and Save buttons remain in the Tab order; the iframe content is excluded entirely.

onReady: () => {
  const iframeEl = ytPlayer.getIframe();
  if (iframeEl) iframeEl.tabIndex = -1;
}

5. `prefers-reduced-motion`

One media query, applied globally:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

All screen transitions, modal fades, and the install prompt pulse animation still function — they just happen near-instantly. No vestibular triggers.

6. iOS PWA nav bar gap — an unexpected accessibility-adjacent fix

On iOS in standalone (Add to Home Screen) mode, overflow:hidden on the app shell caused position:fixed children — including the bottom nav — to be clipped relative to the app container rather than the true viewport. The nav appeared to hover above the bottom of the screen with a visible gap.

The fix: overflow:clip doesn't create a new containing block for fixed children, so they anchor to the real viewport correctly.

#app { overflow: hidden; } /* fallback */

@supports (overflow: clip) {
  #app { overflow: clip; }
}

Not strictly a WCAG issue, but a real usability barrier for people using the PWA on iPhone — worth documenting.

7. Programmatic focus outlines

showScreen() moves focus to the active screen's heading for screen reader announcement. But this triggered a visible focus ring on the heading for mouse and touch users too — confusing, since they didn't "Tab" there.

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

Safe to suppress because tabindex="-1" means the element is never reachable by Tab — only by script. Keyboard users are unaffected.

What's documented

All of this is on nosuggest.com/accessibility — an honest account of what's implemented and what isn't. I tried to write it the way I'd want to read it: specific, no vague compliance claims, and transparent about gaps.

Where I need help

I'm applying for the CAST / Digital Promise "Accessibility Baseline" certification (required for the ISTE EdTech listing to show a verified badge).

The one thing I'm missing: a third-party WCAG 2.1 AA conformance review (ACR/VPAT) completed by someone independent. Self-assessment doesn't satisfy their requirement.

NoSuggest is:

A single HTML file (one page, ~8 distinct "screens")
No backend, no login, no data collected
Completely free and open source — github.com/No-Suggest/NoSuggest

If you are an accessibility professional who does volunteer reviews, or know someone who does, I would genuinely appreciate hearing from you. The contact form is at nosuggest.com/contact.

And if you've tackled similar SPA accessibility challenges — especially with focus management or skip link patterns — I'd love to hear what worked for you in the comments.

Thank you very much!

Watch YouTube without algorithms - NoSuggest

Varun Manjunath — Mon, 22 Jun 2026 03:48:49 +0000

GitHub
App

Looking forward for the constructive feedback.

Tired of the YouTube Doomscroll? Meet NoSuggest – A Quiet Act of Resistance

Varun Manjunath — Thu, 18 Jun 2026 00:42:40 +0000

Have you ever opened YouTube intending to watch a quick 5-minute programming tutorial, only to snap out of a trance 90 minutes later after watching 12 unrelated videos?

You are not alone. YouTube’s recommendation algorithm is beautifully engineered to do one thing: maximise your watch time. Between auto-play, unending sidebar cards, what's-next suggestions, and the endless dopamine loop of Shorts, intentional watching has become almost impossible.

To fight back against the algorithm, I want to highlight an awesome open-source project called NoSuggest.

🚫 What is NoSuggest?

NoSuggest is a completely free, privacy-first, distraction-free YouTube client. Its philosophy is simple: You decide what you watch before you open the app, not after the algorithm grabs hold of you. It strips away the homepage feed, the recommended sidebars, the auto-play loops, and the Shorts tab. It forces an intentional, clean viewing experience built entirely around your curated choices.

✨ Key Features Built for Digital Wellness

Your Channels, Your Feed: Add any YouTube channel by name, handle, or URL. Your feed simply displays the latest videos from the channels you actually care about.
Pure Search: Use the search tab to look up exactly what you need without a wall of "recommended for you" filler creeping into the results.
Total Privacy (No Sign-In Required): No accounts, no cookies, no tracking pixels. All your data (followed channels and bookmarks) lives completely locally in your browser's localStorage.
Mobile-Friendly PWA: Unlike standard browser extensions that only work on desktops, NoSuggest is built as a Progressive Web App. You can install it straight to your home screen on Android, iPhone, iPad, or your laptop.
PIN-Protected Kids Mode: Parents can hand-pick educational channels or specific videos, then lock the app with a PIN. Kids get the great content without the risk of slipping into addictive algorithm loops.

🛠 How It Works Under the Hood

For the developers out there, NoSuggest retrieves publicly available data. Videos play using YouTube's official embed player. This ensures that content creators still receive their rightful watch time. You just get to watch without the cognitive payload of an AI trying to manipulate your next click. The frontend code is also fully open-source and inspect-able on GitHub.

💭 Final Thoughts

If you are looking to reclaim your focus, reduce your screen time, or just want a cleaner way to consume educational content, give NoSuggest a spin. It’s a great example of using web technology to build a healthier relationship with the tools we use daily.

Have you used any distraction-free tools for your daily tech consumption? Let’s talk about digital wellness and algorithmic resistance in the comments below!

Thank you!

No Suggest - distraction-free YouTube client

Varun Manjunath — Sat, 13 Jun 2026 00:52:30 +0000

I have been frustrated with YouTube for a while. Not the content, but the everything around it. The homepage full of bait, the auto-play into things I didn't ask for, the Shorts that hijack your scroll, the recommendations that somehow know exactly what will keep you there longest.

So I built NoSuggest.

What it is
A YouTube feed reader that shows you only the channels you follow, nothing else. No algorithm, no recommendations, no Shorts, no homepage, no auto-play, no endless side cards of videos. You add a channel, it fetches their latest videos, done.

It lives at nosuggest.com and installs as a PWA on any device — iPhone, Android, desktop — straight from the browser. No app store.

The interesting technical constraint: one HTML file
The entire app is a single index.html. No account setup, no sign-in, no data collection. Everything that needs to persist, your channel list, saved videos, settings lives in localStorage.

No search history. No watch history. No "you might also like." No trending section. No notification badges designed to create anxiety. No dark patterns anywhere.

Every time I was tempted to add something convenient, I asked: does this serve the user's intention, or does it serve engagement? If it was the latter, it didn't make the cut.

Try it
nosuggest.com — Source Available here, free forever.

Curious what others think about this as useful.

Thank you.

DEV Community: Varun Manjunath

[Boost]

Brain Rot

[Boost]

Brain Rot

[Boost]

Brain Rot

Brain Rot

How I approached accessibility in a single-page PWA — and what I still need help with

The architecture that made accessibility tricky

What I fixed, and how

1. inert for inactive screens

2. Modal focus trapping

3. Skip links

4. The YouTube iframe problem

5. prefers-reduced-motion

6. iOS PWA nav bar gap — an unexpected accessibility-adjacent fix

7. Programmatic focus outlines

What's documented

Where I need help

Watch YouTube without algorithms - NoSuggest

Tired of the YouTube Doomscroll? Meet NoSuggest – A Quiet Act of Resistance

🚫 What is NoSuggest?

✨ Key Features Built for Digital Wellness

🛠 How It Works Under the Hood

💭 Final Thoughts

No Suggest - distraction-free YouTube client

1. `inert` for inactive screens

5. `prefers-reduced-motion`