DEV Community: bing

The "100% Height" Lie: How dvh Finally Saved My Short-Video web App 📱

bing — Fri, 27 Mar 2026 09:26:38 +0000

We’ve all been there. You’re building a sleek, TikTok-style short video app. You want that perfect full-screen experience where the video fills the viewport exactly—no scrolling, no gaps.
Before:

After:

Visit the demo 📱 Short-Video web App

I recently went through this struggle, and the "standard" solutions just weren't cutting it. Here is how I finally fixed it.

❌ The "Old" Ways That Failed

The CSS 100% Approach I started with the basics. I set every parent container to full height:

html, body {
  height: 100%;
  margin: 0;
}

The Result: On mobile Safari and Chrome, the address bar overlaps the bottom of the app. Your "Bottom Navigation" basically disappears behind the browser's UI.

The JavaScript "Hack" Next, I tried to be smart and use JS to calculate the window height:

const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

The Result: It worked okay, but it felt jittery when the address bar expanded or retracted during scrolls. Plus, it’s a lot of extra code for something that should be simple.

✅ The "Magic" Solution: Dynamic Viewport Units
After banging my head against the wall, I found the modern CSS answer. It turns out I was fighting a losing battle against the browser's UI because I wasn't using Dynamic Viewport Units.

The fix that actually worked perfectly:

.app-container {
  /* Fallback for older browsers */
  height: 100vh; 

  /* The Real Hero */
  height: 100dvh; 
}

Why 100dvh is the GOAT:
vh (Viewport Height): Is static. It doesn't care if the address bar is showing or not, which usually leads to your content being cut off.

dvh (Dynamic Viewport Height): It automatically adjusts as the browser UI elements (like the URL bar) appear or disappear.

Built a Mini Instagram + Reels Clone without AI!

bing — Sun, 22 Feb 2026 06:31:37 +0000

I’m excited to share that I just finished building a fully functional Mini Instagram + Reels site from scratch using a classic stack: PHP, MySQL, and vanilla CSS/JavaScript.

The Challenge: The Reels Feature
The biggest hurdle was definitely the short-video (Reels) functionality. I tried leaning on AI models like Gemini, ChatGPT, and Grok to help scaffold the code, but to be honest, the results were pretty lackluster. The generated code was often clunky, filled with bugs.

The Solution: Going Back to Basics
Instead of wrestling with AI snippets, I decided to go "old school." I wrote the entire interface using pure CSS and JavaScript.

instagram clone: https://www.unitenote.com/
reels clone: https://www.unitenote.com/watch/

My TikTok Inspired Site is Live! building with pure css / javascript (no framework)

bing — Tue, 07 Oct 2025 07:21:31 +0000

Hey Guys! 👋

I'm excited (and a little nervous) to announce the launch of my new project—a site heavily inspired by the addictive, short-form video format we all know and love, but with a new twist.

I've built a platform that curates and categorizes content across four key verticals: News, Funny clips, Learn (for quick educational content), and Game highlights.

My goal is to create a more focused, digestible experience than the current sprawling feeds. Instead of endless scrolling, users can instantly jump to exactly what they're in the mood for, whether it's catching up on the day's events or just getting a laugh.

I'd love for you to check it out and share your honest feedback on the interface, the category splits, and what content you'd want to see more of!

check it out https://www.tapfeel.com

best icon API

bing — Wed, 21 May 2025 08:59:32 +0000

Seeking social icon API.
There are any social icon APIs available that can be directly used to display icons, similar to how they are displayed on websites like GitHub, LinkedIn, X, and Instagram.

learn more https://www.afterdo.com/@garanvarnay/posts/259

icon #webdesign

This curated list includes top learning materials for JavaScript, CSS, and UI design to help you kickstart your journey.

bing — Fri, 11 Apr 2025 07:44:36 +0000

Excited to share a resource I’ve put together for web development beginners! This curated list includes top learning materials for JavaScript, CSS, and UI design to help you kickstart your journey. Whether you're diving into coding or refining your skills, these resources are designed to make learning accessible and engaging.
Link here https://herezone.com/@workwant/pages/learn-css-and-javascript
Check it out and let me know your thoughts! #WebDevelopment #JavaScript #CSS #UI #LearnToCode

Make profitable web app - Using ffmpeg.wasm to build a web app for Add Background Music To Video

bing — Wed, 19 Mar 2025 08:29:46 +0000

It's very easy to create the web app with ffmpeg.wasm

Demo here

const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({
    corePath: "./ffmpeg-core.js",
    log: true,
});
(async () => {
    await ffmpeg.load();

    const dataInputVideo = await fetchFile('video.mp4');
    const dataInputAudio = await fetchFile('music.mp3');

    ffmpeg.FS('writeFile', 'video.mp4', dataInputVideo);
    ffmpeg.FS('writeFile', 'music.mp3', dataInputAudio);
    await ffmpeg.run('-i', 'video.mp4', '-i', 'music.mp3', '-c:v', 'copy', '-c:a', 'aac', '-strict', 'experimental', '-map', '0:v:0', '-map', '1:a:0', 'output.mp4');

    const data = ffmpeg.FS('readFile', 'output.mp4');
    const video = document.getElementById('player');
    video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
})();

How to build online Video Editor with pure JavaScript - Video Effects

bing — Fri, 01 Nov 2024 09:17:53 +0000

With the WebCodecs API and mp4box.js, you can achieve very high performance for video effects. This makes it possible to develop web video editors that are capable of handling complex video editing tasks.
Example:
https://workwant.com/apps/photo-to-video

9 sites for Web Design Inspiration

bing — Fri, 01 Nov 2024 03:12:53 +0000

I might have just the list for you mate (If you are further interested, I have compiled more than 50+ websites that I use as a web Developer / designer -all categorized):
All in one - https://herezone.com/@bing/webdev

https://www.landingfolio.com/

https://pagecollective.com/

https://saaslandingpage.com/

https://www.lapa.ninja/

https://onepagelove.com/

https://land-book.com/

https://screenlane.com/

https://godly.website/

https://www.seesaw.website/

https://www.saaspo.com/

How to create a tiktok-style page generator using pure CSS / JavaScript

bing — Tue, 29 Oct 2024 02:37:08 +0000

I build the toy using pure css && javascript without any framework.
Give it a try HereZone
Example - https://herezone.com/@bing/my-products

Canvas - How to make your logo / icon softer, rounder contour on the corners.

bing — Thu, 29 Aug 2024 08:34:00 +0000

I'm building an iOS-like web OS called BeforeDo.com,so I build the web app to help me making softer icons.
Tech-stack: Canvas.
Tool link AloveZ.com/apps/37

List of Free Image sites Every Frontend Developer Needs

bing — Wed, 24 Jul 2024 08:46:06 +0000

Best sites to Find Free,Commercial-Use Images.
Are you tired of spending hours searching for free, commercial-use images? Look no further than it, the easiest way to find free, commercial-use images from multiple websites.
Get free images now: beforedo.com/apps/search-free-images

Build a Tiktok clone with pure CSS and JavaScript

bing — Fri, 19 Jul 2024 07:27:07 +0000

As a full-stack web developer,I building a Tiktok style web app using pure css and javascript.
Tech-stack:
Front-end: Pure CSS / JavaScript / UPNG.js(compress images)
Back-end: PHP
Demo online: Snapfeel.com