Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Brooooooooooooo WTF... this browser DevTools feature is mind-blowing. 🤯 Visit any website, open DevTools, click on the 3 dots menu... choose "More tools"... then "CSS Overview", and click "Capture overview". It generates a detailed breakdown of the page's colors, fonts, media queries, unused declarations, and more. Such a simple...

rammcodes's profile picture

Ram Maheshwari

5,846 subscribers

47,082 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

6 Yorum

𝗤𝗜𝗡𝗚♔𝗖𝗛𝗔𝗥𝗟𝗘𝗦 profil fotoğrafı
𝗤𝗜𝗡𝗚♔𝗖𝗛𝗔𝗥𝗟𝗘𝗦1 ay önce

What on earth?! How long has that feature been sat there unfound? I know there is so much more in devtools I've yet to uncover.

Ram Maheshwari profil fotoğrafı
Ram Maheshwari1 ay önce

Facts 💯

Diablid ®️ profil fotoğrafı
Diablid ®️1 ay önce

🥸

Vishnu Aniyan profil fotoğrafı
Vishnu Aniyan1 ay önce

Didn't know CSS overview existed, honestly. DevTools has so many buried tabs like this, most devs stick to Elements and Console and never dig further

Felipe • video editor profil fotoğrafı
Felipe • video editor1 ay önce

i thoght it was a hack tutorial

Anonymous profil fotoğrafı
Anonymous1 ay önce

Is there a way to download it so we can give it to claude for copying a websites css

Benzer Videolar

Brooooooooooooooo WTF?? This is sooooo freaking awesome 🤯 I recently found this browser extension that instantly lets you turn almost any website into an editable Figma design in seconds. Perfect for developers, designers, ai coders & anyone who works with Figma :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:26

Brooooooooooooooo WTF?? This is sooooo freaking awesome 🤯 I recently found this browser extension that instantly lets you turn almost any website into an editable Figma design in seconds. Perfect for developers, designers, ai coders & anyone who works with Figma :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

14,204 görüntüleme • 1 ay önce

Brooooooooooooooo WTF?? This is sooooo freaking awesome 🤯 I recently found this browser extension that instantly lets you turn almost any website into an editable Figma design in seconds. Perfect for developers, designers, ai coders & anyone who works with Figma :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:26

Brooooooooooooooo WTF?? This is sooooo freaking awesome 🤯 I recently found this browser extension that instantly lets you turn almost any website into an editable Figma design in seconds. Perfect for developers, designers, ai coders & anyone who works with Figma :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

50,287 görüntüleme • 2 ay önce

Brooooooo... This Chrome extension is sooo perfect for LLMs. 🤯 It lets you instantly convert almost any webpage into clean Markdown, making it easier to use with ChatGPT, Claude, Gemini, and other AI tools. Perfect for AI enthusiasts, developers, designers, researchers, and anyone who works with web content :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:22

Brooooooo... This Chrome extension is sooo perfect for LLMs. 🤯 It lets you instantly convert almost any webpage into clean Markdown, making it easier to use with ChatGPT, Claude, Gemini, and other AI tools. Perfect for AI enthusiasts, developers, designers, researchers, and anyone who works with web content :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

70,417 görüntüleme • 2 ay önce

Holy Sh*t Brooooooooo... This Chrome extension is sooo perfect for LLMs. 🤯 It lets you instantly convert almost any webpage into clean Markdown, making it easier to use with ChatGPT, Claude, Gemini, and other AI tools. Perfect for AI enthusiasts, developers, designers, & anyone who works with web content :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:22

Holy Sh*t Brooooooooo... This Chrome extension is sooo perfect for LLMs. 🤯 It lets you instantly convert almost any webpage into clean Markdown, making it easier to use with ChatGPT, Claude, Gemini, and other AI tools. Perfect for AI enthusiasts, developers, designers, & anyone who works with web content :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

22,292 görüntüleme • 2 ay önce

MiroMiro is live! 🥳 I built a Chrome extension that extracts everything from any website in one click. • Colors and full palettes • Fonts • Images, icons, SVGs • Lottie animations • CSS styles No more opening DevTools. No more saving assets one by one. Just click, see everything, download what you need. Try it free →
0:49

MiroMiro is live! 🥳 I built a Chrome extension that extracts everything from any website in one click. • Colors and full palettes • Fonts • Images, icons, SVGs • Lottie animations • CSS styles No more opening DevTools. No more saving assets one by one. Just click, see everything, download what you need. Try it free →

Soraia

2,357,623 görüntüleme • 10 ay önce

Wait WTF? You can find all the subdomains of a website with one simple URL. 🤯 This "CRT" hack lets you list subdomains associated with a primary domain using public certificate data. Just type: . name/v1/search?apex=[domain-name-here] Replace [domain-name-here] with the domain you want to check, and it'll show the matching subdomains. No installation. No complicated setup. Just one URL. Watch the video for a quick demo :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:20

Wait WTF? You can find all the subdomains of a website with one simple URL. 🤯 This "CRT" hack lets you list subdomains associated with a primary domain using public certificate data. Just type: . name/v1/search?apex=[domain-name-here] Replace [domain-name-here] with the domain you want to check, and it'll show the matching subdomains. No installation. No complicated setup. Just one URL. Watch the video for a quick demo :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

123,530 görüntüleme • 2 ay önce

Dude WTF??... You can find all the subdomains of a website with one simple URL. 🤯 This "CRT" hack lets you list subdomains associated with a primary domain using public certificate data. Just type: . name/v1/search?apex=[domain-name-here] Replace [domain-name-here] with the domain you want to check, and it'll show the matching subdomains. No installation... No complicated setup... Just one URL. Watch the video for a quick demo :) Follow me for more amazing AI, Coding & Web Dev insights. 💎
0:20

Dude WTF??... You can find all the subdomains of a website with one simple URL. 🤯 This "CRT" hack lets you list subdomains associated with a primary domain using public certificate data. Just type: . name/v1/search?apex=[domain-name-here] Replace [domain-name-here] with the domain you want to check, and it'll show the matching subdomains. No installation... No complicated setup... Just one URL. Watch the video for a quick demo :) Follow me for more amazing AI, Coding & Web Dev insights. 💎

Ram Maheshwari

57,390 görüntüleme • 14 gün önce

WTF Broooooooooooooooooo... this is HEAVEN for anyone using AI to build UIs. 🤯 It's a massive collection of agentic UI skills that help AI coding agents build better-looking, more polished interfaces. You can explore skills across different categories like colors, architecture, design systems, frontend development, and much more. Let's be honest... AI can generate some serious UI slop by default. But with the right skills and a little design knowledge, you can turn that slop into an absolute MASTERPIECE. 🔥 If you're a developer, designer, or vibe-coder, you NEED to bookmark this :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:21

WTF Broooooooooooooooooo... this is HEAVEN for anyone using AI to build UIs. 🤯 It's a massive collection of agentic UI skills that help AI coding agents build better-looking, more polished interfaces. You can explore skills across different categories like colors, architecture, design systems, frontend development, and much more. Let's be honest... AI can generate some serious UI slop by default. But with the right skills and a little design knowledge, you can turn that slop into an absolute MASTERPIECE. 🔥 If you're a developer, designer, or vibe-coder, you NEED to bookmark this :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

23,173 görüntüleme • 5 gün önce

Brooooooooooooo... this feels like a dream come true for every developer & designer. 🦴 Now you don't have to manually design skeleton screens for your UI. Boneyard automatically extracts the layout from your real UI and generates pixel-perfect skeleton loading screens from it. Just wrap your UI components with Boneyard, run the build, and it creates the skeletons for you :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:32

Brooooooooooooo... this feels like a dream come true for every developer & designer. 🦴 Now you don't have to manually design skeleton screens for your UI. Boneyard automatically extracts the layout from your real UI and generates pixel-perfect skeleton loading screens from it. Just wrap your UI components with Boneyard, run the build, and it creates the skeletons for you :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

55,108 görüntüleme • 2 ay önce

In this demo, discover how to define and launch a reproducible development environment with Workshop. Watch the full talk on YouTube to learn more: #Ubuntu #Linux #DevTools
3:06

In this demo, discover how to define and launch a reproducible development environment with Workshop. Watch the full talk on YouTube to learn more: #Ubuntu #Linux #DevTools

Ubuntu

23,757 görüntüleme • 4 ay önce

WTF Brooooooooooo... why didn't I find this earlier? 🤯 This browser extension lets you add multiple devices with different screen sizes directly to a webpage to test responsive designs. It comes with tons of customization options, and you can even sync scrolling across all your device previews simultaneously. Perfect for UI developers, designers, vibe coders, or anyone using AI to ship web products :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:28

WTF Brooooooooooo... why didn't I find this earlier? 🤯 This browser extension lets you add multiple devices with different screen sizes directly to a webpage to test responsive designs. It comes with tons of customization options, and you can even sync scrolling across all your device previews simultaneously. Perfect for UI developers, designers, vibe coders, or anyone using AI to ship web products :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

63,259 görüntüleme • 2 ay önce

✨ I started working on CSS Pro to rethink the way we work with CSS. 💡 There had to be a better way than relying solely on the browser's Devtools. 🔥 Now CSS Pro is LIVE on Product Hunt 😸! 💫 A re-imagined Devtools for web design: 👉
1:59

✨ I started working on CSS Pro to rethink the way we work with CSS. 💡 There had to be a better way than relying solely on the browser's Devtools. 🔥 Now CSS Pro is LIVE on Product Hunt 😸! 💫 A re-imagined Devtools for web design: 👉

Guilherme Rizzo

10,309 görüntüleme • 3 yıl önce

Holy Sh*t... You can now share your localhost with anyone using only VS Code! 🤯 VS Code has a built-in Ports feature that lets you expose your local server to the internet, no need for third-party tools. Here’s how to use it: 1) Open the Ports tab in the terminal panel 2) Click Forward a Port 3) Enter your local port number (mine was 5173, yours could be 3000, 3001, etc.) 4) VS Code will generate a link, right-click and select Make Public 5) Copy the link and share it with anyone Perfect for demos, testing on other devices, or sharing work with clients and teammates :) Watch the video for a step-by-step demo 🎥 Follow me for more amazing AI, Coding & Web Dev insights 💎
0:41

Holy Sh*t... You can now share your localhost with anyone using only VS Code! 🤯 VS Code has a built-in Ports feature that lets you expose your local server to the internet, no need for third-party tools. Here’s how to use it: 1) Open the Ports tab in the terminal panel 2) Click Forward a Port 3) Enter your local port number (mine was 5173, yours could be 3000, 3001, etc.) 4) VS Code will generate a link, right-click and select Make Public 5) Copy the link and share it with anyone Perfect for demos, testing on other devices, or sharing work with clients and teammates :) Watch the video for a step-by-step demo 🎥 Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

59,272 görüntüleme • 3 ay önce

WTF Dude... this is like PDF parsing on steroids, NGL. 🤯 OpenDataLoader PDF is a free, open-source PDF parser that converts PDFs into AI-ready Markdown, JSON, and HTML. It can also use OCR for scanned PDFs and handle complex content like tables, formulas, and charts. Perfect for building RAG pipelines, AI agents, search systems, and other AI apps that need to actually understand PDF documents :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:32

WTF Dude... this is like PDF parsing on steroids, NGL. 🤯 OpenDataLoader PDF is a free, open-source PDF parser that converts PDFs into AI-ready Markdown, JSON, and HTML. It can also use OCR for scanned PDFs and handle complex content like tables, formulas, and charts. Perfect for building RAG pipelines, AI agents, search systems, and other AI apps that need to actually understand PDF documents :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

28,680 görüntüleme • 2 ay önce

Dude... This is ridiculously useful 🤯 A site that's like a swiss army knife for devs & designers. Which contains a collection of small, browser-based tools across different categories that work without logins, tracking, or data collection. Nice to bookmark if you like fast, no-BS tools that just work :) Source 🔗: tools . rmv . fyi Follow me for more amazing AI, Coding & Web Dev insights 💎
0:40

Dude... This is ridiculously useful 🤯 A site that's like a swiss army knife for devs & designers. Which contains a collection of small, browser-based tools across different categories that work without logins, tracking, or data collection. Nice to bookmark if you like fast, no-BS tools that just work :) Source 🔗: tools . rmv . fyi Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

91,877 görüntüleme • 3 ay önce

today it's my birthday, and i'm shipping inspekt hover any element to instantly inspekt fonts, colors, spacing, and css no devtools. no digging copy all you need in one click grab inspekt below 👇
0:37

today it's my birthday, and i'm shipping inspekt hover any element to instantly inspekt fonts, colors, spacing, and css no devtools. no digging copy all you need in one click grab inspekt below 👇

hamza

10,593 görüntüleme • 3 ay önce

Bruh... This GitHub hack is Wild AF 🤯 It literally lets you open any repository in an AI workspace. Simply add "explain" before "github" in any repo URL, and boom... now you can explore the codebase, ask questions, understand the architecture, generate onboarding reports, and get file-cited answers in seconds. If you work with open-source projects, this is definitely worth saving :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:29

Bruh... This GitHub hack is Wild AF 🤯 It literally lets you open any repository in an AI workspace. Simply add "explain" before "github" in any repo URL, and boom... now you can explore the codebase, ask questions, understand the architecture, generate onboarding reports, and get file-cited answers in seconds. If you work with open-source projects, this is definitely worth saving :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

15,109 görüntüleme • 2 ay önce

WTF Broooooooo???? .... This feels like a goldmine for vibe coders 🌋 It's a collection of free UI prompts for things like hero sections, pricing pages, auth screens, bento grids, dashboards, and more. You can copy a prompt and give it to your AI coding agent to generate better-looking, less generic UI without having to describe every design detail yourself. Perfect if you build websites with AI and want your UIs to stand out :) Follow me for more amazing Coding, AI & Web Development insights 💎
0:28

WTF Broooooooo???? .... This feels like a goldmine for vibe coders 🌋 It's a collection of free UI prompts for things like hero sections, pricing pages, auth screens, bento grids, dashboards, and more. You can copy a prompt and give it to your AI coding agent to generate better-looking, less generic UI without having to describe every design detail yourself. Perfect if you build websites with AI and want your UIs to stand out :) Follow me for more amazing Coding, AI & Web Development insights 💎

Ram Maheshwari

66,288 görüntüleme • 2 ay önce

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:27

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

31,736 görüntüleme • 2 ay önce

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:27

Broooooooooo.... this is sooo damn coooool to add Glass Effects in any UI. 😍 This free tool lets you generate stunning glassmorphism effects with plenty of customization options. It even supports liquid-glass and neumorphic designs. Once you're done, simply copy the code and start using it in your vibe coded or custom coded projects :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

14,832 görüntüleme • 1 ay önce