Loading video...

Video Failed to Load

Go Home

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥

mgechev's profile picture

Minko Gechev

57,972 subscribers

14,504 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Take control of your performance debugging in Chrome DevTools. These customization features let you simplify the Performance panel and zero in on the most important data for your workflow. Get started:
0:18

Take control of your performance debugging in Chrome DevTools. These customization features let you simplify the Performance panel and zero in on the most important data for your workflow. Get started:

Chrome for Developers

15,453 views • 1 year ago

Tip: Chrome DevTools can now override the content of Fetch/XHR requests! Great for mocking APIs without waiting on backend changes! This and lots more in Chrome 117:
0:16

Tip: Chrome DevTools can now override the content of Fetch/XHR requests! Great for mocking APIs without waiting on backend changes! This and lots more in Chrome 117:

Addy Osmani

306,189 views • 2 years ago

I made a Chrome extension that turns localhost into a visual editor for Cursor. Click any element on your dev site → describe what you want changed → it automatically sends the edit request to Cursor in the background with the element context. Here's how it works...
0:18

I made a Chrome extension that turns localhost into a visual editor for Cursor. Click any element on your dev site → describe what you want changed → it automatically sends the edit request to Cursor in the background with the element context. Here's how it works...

pav

968,417 views • 10 months ago

Step 1: Go to ChatGPT: Use Prompt: "Give me a VBA code that creates an 8-slide PowerPoint presentation on [Topic] You can run this code in the Visual Basic for Applications (VBA) editor in PowerPoint. "
0:18

Step 1: Go to ChatGPT: Use Prompt: "Give me a VBA code that creates an 8-slide PowerPoint presentation on [Topic] You can run this code in the Visual Basic for Applications (VBA) editor in PowerPoint. "

Aria Westcott

59,205 views • 7 months ago

New in Chrome DevTools! Debug an app's full performance trace with Gemini! After recording a trace, you can now chat with Gemini about the entire trace, related Performance insights, and even connected field data - all without needing to select specific context beforehand!
0:19

New in Chrome DevTools! Debug an app's full performance trace with Gemini! After recording a trace, you can now chat with Gemini about the entire trace, related Performance insights, and even connected field data - all without needing to select specific context beforehand!

Addy Osmani

687,213 views • 8 months ago

New RFC - Override HTTP response headers in Chrome DevTools. Here's a demo on how to override and test CORS headers. It support more use-cases than that! Give the prototype a spin and share your thoughts 👉🏼
0:19

New RFC - Override HTTP response headers in Chrome DevTools. Here's a demo on how to override and test CORS headers. It support more use-cases than that! Give the prototype a spin and share your thoughts 👉🏼

Jecelyn Yeen 🐟

39,239 views • 3 years ago

I've been invited by the wonderful TANSTACK team to help them build out framework-agnostic devtools not for only them, but for everyone! Here's a sneek peak of TanStack router, query, and Prisma Postgres embedded studio running in @tanstack/devtools
0:19

I've been invited by the wonderful TANSTACK team to help them build out framework-agnostic devtools not for only them, but for everyone! Here's a sneek peak of TanStack router, query, and Prisma Postgres embedded studio running in @tanstack/devtools

Alem Tuzlak 🇧🇦

48,634 views • 1 year ago

Sometimes you want to overwrite text in the editor instead of inserting it. We recently added overtype mode in Visual Studio Code to let you do just that ⌨️
0:11

Sometimes you want to overwrite text in the editor instead of inserting it. We recently added overtype mode in Visual Studio Code to let you do just that ⌨️

Visual Studio Code

409,425 views • 1 year ago

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.
0:17

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.

一丝

32,865 views • 3 months ago

In tomorrow's VS Visual Studio Code insiders you can easily F1 to create GitHub Copilot CLI session in editor, to the side, and down below. Let us know how you like it. Pierce Boggan Evan Boyle
0:12

In tomorrow's VS Visual Studio Code insiders you can easily F1 to create GitHub Copilot CLI session in editor, to the side, and down below. Let us know how you like it. Pierce Boggan Evan Boyle

Peng Lyu

39,928 views • 5 months ago

omg!!! windsurf just added a website preview feature and the visual editor rocks!!! 🤯🤯🤯 you can also send browser errors to Cascade which is awesome!!! @windsurf
0:11

omg!!! windsurf just added a website preview feature and the visual editor rocks!!! 🤯🤯🤯 you can also send browser errors to Cascade which is awesome!!! @windsurf

Melvin Vivas

51,396 views • 1 year ago

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.
0:12

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.

Stefan Judis

238,279 views • 3 years ago

Searching for files in large projects has never been easier 🚀 Check out the real-time search results for the #vscode project, which has thousands of files (and yes, we use Visual Studio Code to write Visual Studio Code). You can easily switch between fuzzy matching and continuous matching too!
0:16

Searching for files in large projects has never been easier 🚀 Check out the real-time search results for the #vscode project, which has thousands of files (and yes, we use Visual Studio Code to write Visual Studio Code). You can easily switch between fuzzy matching and continuous matching too!

Visual Studio Code

241,694 views • 1 year ago

in zoomable / canvas-like apps (like Krea Nodes) small controls get frustratingly hard to click when zoomed out adding an invisible hit area keeps them (a tiny bit) easier to use without changing visuals super easy with an `::after` pseudo element, `position:absolute` + sizing
0:18

in zoomable / canvas-like apps (like Krea Nodes) small controls get frustratingly hard to click when zoomed out adding an invisible hit area keeps them (a tiny bit) easier to use without changing visuals super easy with an `::after` pseudo element, `position:absolute` + sizing

daniel petho

15,394 views • 5 months ago

We've made two play styles, Adventure Mode and Story Mode, so you can adjust the degree of difficulty in combat! What other gameplay features would you like to see?
0:13

We've made two play styles, Adventure Mode and Story Mode, so you can adjust the degree of difficulty in combat! What other gameplay features would you like to see?

The Plucky Squire 📖

64,971 views • 1 year ago

🟢 News: GPU compute in the browser is finally real. WebGPU now ships by default in Chrome, Firefox, Safari, and Edge—not a polyfill, not behind a flag. You can run LLMs client-side. Transformers.js and ONNX Runtime already ship WebGPU backends. Eight years of spec work. No more asterisks. 🔗 #WebGPU #GPU #Chrome #Safari #Firefox #Edge
0:10

🟢 News: GPU compute in the browser is finally real. WebGPU now ships by default in Chrome, Firefox, Safari, and Edge—not a polyfill, not behind a flag. You can run LLMs client-side. Transformers.js and ONNX Runtime already ship WebGPU backends. Eight years of spec work. No more asterisks. 🔗 #WebGPU #GPU #Chrome #Safari #Firefox #Edge

WebGL / WebGPU

12,788 views • 6 months ago

As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.
0:12

As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.

Bramus

42,335 views • 1 year ago

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇
0:12

A 🔥 browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇

Shefali

29,340 views • 1 year ago

We've expanded on the use of Variable NJS elements in the "Danger" map, just like we did with the Metallica Music Pack, to create some 🤯 visual effects!
0:13

We've expanded on the use of Variable NJS elements in the "Danger" map, just like we did with the Metallica Music Pack, to create some 🤯 visual effects!

Beat Saber

24,798 views • 1 year ago