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

4,361 subscribers

44,986 görüntüleme • 7 gün önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

69,944 görüntüleme • 1 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,055 görüntüleme • 16 gün ö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

120,910 görüntüleme • 16 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

53,712 görüntüleme • 22 gün ö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

60,295 görüntüleme • 18 gün ö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

43,130 görüntüleme • 1 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

26,115 görüntüleme • 14 gün ö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

90,913 görüntüleme • 1 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 • 1 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

64,175 görüntüleme • 10 gün ö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 • 1 ay önce

WTF Brooooooooo... this is actually incredible. 🤯 This library recreated the UI of Claude Code, Codex & Grok as reusable shadcn components. So if you wanna build AI apps, CLI tools, or terminal UIs with this kind of polished interface, you can just use these components instead of building everything from scratch. It includes chat messages, tool calls, code diffs, permission dialogs, todo lists, slash commands, and more. Perfect for building AI tools :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:39

WTF Brooooooooo... this is actually incredible. 🤯 This library recreated the UI of Claude Code, Codex & Grok as reusable shadcn components. So if you wanna build AI apps, CLI tools, or terminal UIs with this kind of polished interface, you can just use these components instead of building everything from scratch. It includes chat messages, tool calls, code diffs, permission dialogs, todo lists, slash commands, and more. Perfect for building AI tools :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

64,378 görüntüleme • 8 gün önce

How tf is this even possible? I was genuinely shocked when this actually worked. 🤯 This browser extension literally analyzes an image and turns it into a detailed AI prompt that can generate a very similar image. It breaks down the subject, composition, lighting, colors, style, and other visual details, then turns all of that into a prompt. It feels like some kinda black magic. 💀 If you're a developer, vibe coder, designer, or AI creator, you definitely wanna try this :) Follow me for more amazing AI, Coding & Web Development insights 💎
0:30

How tf is this even possible? I was genuinely shocked when this actually worked. 🤯 This browser extension literally analyzes an image and turns it into a detailed AI prompt that can generate a very similar image. It breaks down the subject, composition, lighting, colors, style, and other visual details, then turns all of that into a prompt. It feels like some kinda black magic. 💀 If you're a developer, vibe coder, designer, or AI creator, you definitely wanna try this :) Follow me for more amazing AI, Coding & Web Development insights 💎

Ram Maheshwari

22,501 görüntüleme • 23 gün önce

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source
0:40

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

Om Patel

153,788 görüntüleme • 5 ay önce

Bruh... Creating beautiful software architecture diagrams has never been easier. 🤯 FossFLOW is a free, open-source tool that lets you create professional-looking 3D software and engineering diagrams with hundreds of built-in icons and symbols. Perfect for: → Presentations → Documentation → Tutorials → System design interviews → Content creation If you regularly explain software architecture, this is one of those tools you'll keep coming back to :) Source 🔗: github(DOT)com/stan-smith/FossFLOW Follow me for more amazing AI, Coding & Web Dev insights 💎
0:37

Bruh... Creating beautiful software architecture diagrams has never been easier. 🤯 FossFLOW is a free, open-source tool that lets you create professional-looking 3D software and engineering diagrams with hundreds of built-in icons and symbols. Perfect for: → Presentations → Documentation → Tutorials → System design interviews → Content creation If you regularly explain software architecture, this is one of those tools you'll keep coming back to :) Source 🔗: github(DOT)com/stan-smith/FossFLOW Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

66,451 görüntüleme • 1 ay önce

OMG... this is 10/10 for creating beautiful software architecture diagrams. 🤯👌 FossFLOW is a free, open-source tool for creating clean 3D isometric diagrams with hundreds of built-in icons and symbols. You can use it to visualize software architecture, networks, infrastructure, and complex systems without starting from scratch. Perfect for engineers, designers, developers, and vibe coders to create stunning architecture diagrams with ease :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:37

OMG... this is 10/10 for creating beautiful software architecture diagrams. 🤯👌 FossFLOW is a free, open-source tool for creating clean 3D isometric diagrams with hundreds of built-in icons and symbols. You can use it to visualize software architecture, networks, infrastructure, and complex systems without starting from scratch. Perfect for engineers, designers, developers, and vibe coders to create stunning architecture diagrams with ease :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

33,174 görüntüleme • 20 gün önce

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅
0:20

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅

joshpuckett

54,965 görüntüleme • 4 ay önce

wtf is MCP? Paul Klein IV, CEO of explains "Model Context Protocol" (MCP) in plain terms: "There's this new way that people are exposing tools to AI & the 'Model Context Protocol' is one of those ways that you can standardize & give your AI a set of tools to call. BrowserBase has a way to expose the browser to your agent via MCP or MCP server. More & more developers are trying to find ways to integrate more functionalities to their AI agents & BrowserBase's browsers are one of those primitive functionalities, & the MCP is just one way to integrate it into your software." Paul Klein IV From 🅱️'s GitHub: Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. Whether you’re building an AI-powered IDE, enhancing a chat interface, or creating custom AI workflows, MCP provides a standardized way to connect LLMs with the context they need. This server provides cloud browser automation capabilities using Browserbase and Stagehand. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a cloud browser environment.
0:40

wtf is MCP? Paul Klein IV, CEO of explains "Model Context Protocol" (MCP) in plain terms: "There's this new way that people are exposing tools to AI & the 'Model Context Protocol' is one of those ways that you can standardize & give your AI a set of tools to call. BrowserBase has a way to expose the browser to your agent via MCP or MCP server. More & more developers are trying to find ways to integrate more functionalities to their AI agents & BrowserBase's browsers are one of those primitive functionalities, & the MCP is just one way to integrate it into your software." Paul Klein IV From 🅱️'s GitHub: Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. Whether you’re building an AI-powered IDE, enhancing a chat interface, or creating custom AI workflows, MCP provides a standardized way to connect LLMs with the context they need. This server provides cloud browser automation capabilities using Browserbase and Stagehand. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a cloud browser environment.

Molly O’Shea

20,408 görüntüleme • 1 yıl önce

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!
3:34

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!

Addy Osmani

269,225 görüntüleme • 11 ay önce

AI Overviews reduce clicks by 34.5%. Google says being featured in an AI Overview leads to HIGHER click-through rates compared to a traditional first-place ranking. Logic disagrees, and now, so does our data. We analyzed 300,000 keywords and found that the presence of an AI Overview in the search results correlated with a 34.5% lower average clickthrough rate (CTR) for the top-ranking page, compared to similar informational keywords without an AI Overview. This isn't surprising. AI Overviews are an obvious attempt to resolve the user's directly in the SERP, and if you're featured in a citation, you're one of many links. Logic suggests that AI Overviews will lead to more zero-click searches and a lower position one click-through rate. I have seen lots of anecdata suggesting companies have lost 20–40% of their clicks from organic search after the rollout of AI Overview. This isn't a definitive analysis by any means, but it's nice to have some data to back up this conversation. Going forward, I think our expectations of the returns from informational, top-of-funnel queries has to change. I would love to know how this fits (or doesn't) with your experience. Check out the full article here and let me know in the thread:
2:06

AI Overviews reduce clicks by 34.5%. Google says being featured in an AI Overview leads to HIGHER click-through rates compared to a traditional first-place ranking. Logic disagrees, and now, so does our data. We analyzed 300,000 keywords and found that the presence of an AI Overview in the search results correlated with a 34.5% lower average clickthrough rate (CTR) for the top-ranking page, compared to similar informational keywords without an AI Overview. This isn't surprising. AI Overviews are an obvious attempt to resolve the user's directly in the SERP, and if you're featured in a citation, you're one of many links. Logic suggests that AI Overviews will lead to more zero-click searches and a lower position one click-through rate. I have seen lots of anecdata suggesting companies have lost 20–40% of their clicks from organic search after the rollout of AI Overview. This isn't a definitive analysis by any means, but it's nice to have some data to back up this conversation. Going forward, I think our expectations of the returns from informational, top-of-funnel queries has to change. I would love to know how this fits (or doesn't) with your experience. Check out the full article here and let me know in the thread:

Ryan Law

51,728 görüntüleme • 1 yıl önce