Project ideas from Hacker News discussions.

We finally learned to center a div, then browsers added sidebars

Original Article

Hacker News Discussion

📝 Discussion Summary (Click to expand)

Top Themes

#	Theme	Supporting Quote
1. Ambiguity of “centering” – whether to center to the viewport or to the whole screen/window	“The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you.” – seg6
2. Preference for viewport‑based centering despite UI changes – users want layouts to stay centered even when sidebars or other UI elements appear	“I want things that should be centered to be centered within that viewport.” – LocalH
3. Critique of hacky work‑arounds and “don’t break the web” – many feel adding this logic is unnecessary and harms cross‑browser compatibility	“As a rule, you should not add functionality to a website to compensate for browser misfeatures.” – wizzwizz4

🚀 Project Ideas

Viewport‑Centering Chrome Extension

Summary

Provides a lightweight Chrome/Firefox extension that automatically re‑centers page content within the browser viewport, not the physical screen, preventing sidebars or UI chrome from covering the visual area.
Core value: Users get predictable centering behavior regardless of browser UI elements, improving readability and layout stability.

Details

Key	Value
Target Audience	Power users with vertical tabs/sidebars, accessibility‑focused users, and developers who prefer consistent layout centering.
Core Feature	Detects sidebar/open UI elements, overrides `margin:auto` centering to use `env(safe-area-inset-*)` and `position:sticky` to keep content centered in the viewport.
Tech Stack	Manifest V3 extension (JavaScript + CSS), uses the Layout‑Detection API and ResizeObserver; minimal background script.
Difficulty	Low
Monetization	Hobby

Notes

HN users repeatedly asked for a way to force viewport‑centric centering; a quick‑install extension would satisfy that demand.
Could spark discussion on standardizing a CSS property for “viewport‑centered” layout, perhaps leading to a future spec contribution.

CSS‑Safe‑Centering Library (Libraries.io package)

Summary

A tiny, framework‑agnostic npm package that supplies a set of CSS variables and helper classes to guarantee horizontal (and optional vertical) centering relative to the viewport, even when browsers add sidebars or UI overlays.
Core value: Developers can drop‑in a single stylesheet and avoid manual JavaScript hacks for centering.

Details

Key	Value
Target Audience	Front‑end developers, UI engineers, and site maintainers who want reliable centering without JS.
Core Feature	Export `viewport-center` utility class and CSS custom properties (`--center-offset`) that auto‑adjust based on `env(safe-area-inset-*)` and `var(--chrome-width)`.
Tech Stack	Pure CSS + PostCSS, bundled as an ES module; optional TypeScript definitions.
Difficulty	Low
Monetization	Revenue-ready: Subscription: $9/mo per organization (hosted CDN + updates).

Notes

Commenters like “kccqzy” noted that centering often feels “wrong” when sidebars shift the viewport; this library would make the correct behavior effortless.
Could be showcased in Hacker News threads about CSS layout, generating community interest and potential sponsorship.

Web‑Overlay Guard Service (SaaS)

Summary

A hosted JavaScript SDK that monitors the browser’s current UI chrome (sidebars, tab bars, address bar height) and applies a dynamic “guard” overlay to keep critical content inside the visible viewport, preventing accidental occlusion.
Core value: Eliminates the need for each site to write its own detection logic, offering a universal solution.

Details

Key	Value
Target Audience	Publishers, SaaS dashboards, and content platforms that must guarantee readable layout across browsers with varying UI chrome.
Core Feature	SDK injects a small script that emits `viewport‑safe‑area` events and automatically adds a CSS `filter: safe-area-inset` guard around the main container.
Tech Stack	Node.js backend for feature detection, CDN‑delivered lightweight JS client (≈2 KB gzipped), compatible with React, Vue, vanilla JS.
Difficulty	Medium
Monetization	Revenue-ready: Tiered pricing – Free (up to 10 k visits/mo), Pro: $15/mo, Enterprise: custom.

Notes

Users like “fluoridation” complained about content being covered by UI elements; a generic guard would solve that across many sites.
Could spark a discussion on standardizing overlay safety mechanisms, encouraging browser vendors to adopt similar patterns.