Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

How do you code graphics with SVGs? 🖼️Combining SVGs with React unlocks new possibilities! You can create diagrams, animations, or even interactive games & apps. If you want to make your project more fun, join the talk by🎤Hunor Márton Borbély, a web dev with an interest in UX design.

React Day Berlin

5,486 subscribers

178,106 görüntüleme • 1 yıl önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

3 Yorum

Ian Bobinac profil fotoğrafı

Ian Bobinac1 yıl önce

@HunorBorbely Shameless plug for react day Berlin from the AmsterdamJS meetup

Alexander profil fotoğrafı

Alexander1 yıl önce

@HunorBorbely You know half of the ads in twitter nowadays is some man talking on video about some "profitable" crypto crap Plz make adds in another way, some unexpected video triggers negative reaction

Carlos Quesada profil fotoğrafı

Carlos Quesada1 yıl önce

@HunorBorbely Do you already have the Program for day 13?

Benzer Videolar

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

matia 🇭🇷

290,629 görüntüleme • 2 yıl önce

We've solved vector design with AI ✨ QuiverAI makes it incredibly easy to generate SVGs from text or images. When you treat visuals as code, you get a much more composable output and can do precise edits. You also get to watch the model sketch in real-time 👇

We've solved vector design with AI ✨ QuiverAI makes it incredibly easy to generate SVGs from text or images. When you treat visuals as code, you get a much more composable output and can do precise edits. You also get to watch the model sketch in real-time 👇

Justine Moore

47,922 görüntüleme • 3 ay önce

Today, we’re officially releasing React Native Godot to the public. For the first time, every React Native developer can create games with an amazing UI on top. This unlocks a new era of apps and games.

Today, we’re officially releasing React Native Godot to the public. For the first time, every React Native developer can create games with an amazing UI on top. This unlocks a new era of apps and games.

Jannis Ringwald

937,367 görüntüleme • 7 ay önce

🚀 Introducing Pressmind: an experimental WordPress Gutenberg plugin turns prompts into real interactive blocks! ✨ Type /pressmind, describe what you want, and it can generate summaries, tables, SVGs, interactive widgets (even games 👾), and AI images. →

🚀 Introducing Pressmind: an experimental WordPress Gutenberg plugin turns prompts into real interactive blocks! ✨ Type /pressmind, describe what you want, and it can generate summaries, tables, SVGs, interactive widgets (even games 👾), and AI images. →

fatih kadir akın

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

LLMs let me swing at my preferred maximalist web design: not gradients and on-scroll animations, but encrusting the page with little SVGs and PNGs The web needs more illuminated initial caps

LLMs let me swing at my preferred maximalist web design: not gradients and on-scroll animations, but encrusting the page with little SVGs and PNGs The web needs more illuminated initial caps

Evan Applegate

32,515 görüntüleme • 4 ay önce

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,217 görüntüleme • 2 yıl önce

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

Astro

38,983 görüntüleme • 1 yıl önce

You can even edit generated SVGs directly on the canvas. Now in beta.

You can even edit generated SVGs directly on the canvas. Now in beta.

dára sobaloju

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

If you’ve never written code before, this is for you. I’ve just launched a course that shows you, in less than 30 minutes, how to describe an idea for an app and build it with AI. In this course, you'll build a working web application - a funny interactive birthday message generator that runs in your browser and can be shared with friends. You'll customize it by telling AI how you want it changed, and tweak it until it works the way you want. By the end, you'll have a repeatable process you can apply to build a wide variety of applications. If you want to try vibe coding, this will be the best place to start! Further, you'll be able to use these techniques with whatever tool you're most comfortable with (like ChatGPT, Gemini, Claude, or others) -- we're vendor neutral. Skills you'll gain: - How to build web apps with AI - zero coding skills needed - How to fix and improve your creations by chatting with AI - A simple process you can use to build other things you can dream up Building with AI is one of the most fun things in the world. Please join me and take your first step! I think you will be surprised at what you can build. And if you're an experienced engineer, please share this with someone in your life who's been curious about building with AI. Come build with me!

If you’ve never written code before, this is for you. I’ve just launched a course that shows you, in less than 30 minutes, how to describe an idea for an app and build it with AI. In this course, you'll build a working web application - a funny interactive birthday message generator that runs in your browser and can be shared with friends. You'll customize it by telling AI how you want it changed, and tweak it until it works the way you want. By the end, you'll have a repeatable process you can apply to build a wide variety of applications. If you want to try vibe coding, this will be the best place to start! Further, you'll be able to use these techniques with whatever tool you're most comfortable with (like ChatGPT, Gemini, Claude, or others) -- we're vendor neutral. Skills you'll gain: - How to build web apps with AI - zero coding skills needed - How to fix and improve your creations by chatting with AI - A simple process you can use to build other things you can dream up Building with AI is one of the most fun things in the world. Please join me and take your first step! I think you will be surprised at what you can build. And if you're an experienced engineer, please share this with someone in your life who's been curious about building with AI. Come build with me!

Andrew Ng

634,197 görüntüleme • 5 ay önce

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

Pablo

95,057 görüntüleme • 2 ay önce

We're also launching a preview of Artifacts on You can ask Claude to generate docs, code, mermaid diagrams, vector graphics, or even simple games. Artifacts appear next to your chat, letting you see, iterate, and build on your creations in real-time.

We're also launching a preview of Artifacts on You can ask Claude to generate docs, code, mermaid diagrams, vector graphics, or even simple games. Artifacts appear next to your chat, letting you see, iterate, and build on your creations in real-time.

Anthropic

588,360 görüntüleme • 2 yıl önce

With 1 prompt – Make your Google Calendar work the way you want: Your Own Design and Super Intelligent. Dynamic Apps in Nimo let you redesign your Gmail , Atlassian Jira , and Google Calendar the way you want. The beauty is the data stays in your existing apps. The apps you create run locally on your computer. Jared Friedman used to request better versions of the apps he used daily, but had to wait for someone else to build them. Now, he can create his own with a single prompt. Would you like to try?

With 1 prompt – Make your Google Calendar work the way you want: Your Own Design and Super Intelligent. Dynamic Apps in Nimo let you redesign your Gmail , Atlassian Jira , and Google Calendar the way you want. The beauty is the data stays in your existing apps. The apps you create run locally on your computer. Jared Friedman used to request better versions of the apps he used daily, but had to wait for someone else to build them. Now, he can create his own with a single prompt. Would you like to try?

rohildev

12,014 görüntüleme • 9 ay önce

New in Visual Studio Code Insiders: Interactive mermaid diagrams in Chat. Zoom, pan, and iterate over mermaid diagrams, or open them in the editor when you need more room. Matt Bierner 🪦 shows you how:

New in Visual Studio Code Insiders: Interactive mermaid diagrams in Chat. Zoom, pan, and iterate over mermaid diagrams, or open them in the editor when you need more room. Matt Bierner 🪦 shows you how:

Pierce Boggan

36,906 görüntüleme • 4 ay önce

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

Google Gemini

414,938 görüntüleme • 1 yıl önce

Today @GoogleMaps is getting its biggest upgrade in over a decade. By combining our Gemini models with a deep understanding of the world, Maps now unlocks entirely new possibilities for how you navigate and explore. Here’s what you need to know 🧵

Today @GoogleMaps is getting its biggest upgrade in over a decade. By combining our Gemini models with a deep understanding of the world, Maps now unlocks entirely new possibilities for how you navigate and explore. Here’s what you need to know 🧵

Google

28,831,747 görüntüleme • 3 ay önce

2. Build interactive tools and apps without code Describe your idea and Grok scaffolds the UI, logic, and deployment steps no coding required. Prompt: "You are a senior software architect who excels at building no-code and low-code systems with HTML, JavaScript, and Web APIs. Task Design a fully working interactive tool based on this idea: [DESCRIBE YOUR TOOL IDEA] Deliverables 1. A plain-English explanation of how the tool works. 2. A step-by-step plan to implement it with Grok or a no-code platform. 3. Exact HTML/CSS/JS code if relevant. 4. UX and design improvement tips. 5. Instructions to generate a shareable, embed-ready version. Imagine you are shipping an MVP for a startup demo. "

2. Build interactive tools and apps without code Describe your idea and Grok scaffolds the UI, logic, and deployment steps no coding required. Prompt: "You are a senior software architect who excels at building no-code and low-code systems with HTML, JavaScript, and Web APIs. Task Design a fully working interactive tool based on this idea: [DESCRIBE YOUR TOOL IDEA] Deliverables 1. A plain-English explanation of how the tool works. 2. A step-by-step plan to implement it with Grok or a no-code platform. 3. Exact HTML/CSS/JS code if relevant. 4. UX and design improvement tips. 5. Instructions to generate a shareable, embed-ready version. Imagine you are shipping an MVP for a startup demo. "

God of Prompt

316,672 görüntüleme • 11 ay önce

Learn v0 in under 10 minutes ✨ I'll show you how to: • Build 3D games, run code, and create apps • Learn about Next.js (with up-to-date knowledge of App Router) • Start from @shadcn/ui components + fork from there • Publish web apps and examples you can share with others

Learn v0 in under 10 minutes ✨ I'll show you how to: • Build 3D games, run code, and create apps • Learn about Next.js (with up-to-date knowledge of App Router) • Start from @shadcn/ui components + fork from there • Publish web apps and examples you can share with others

Lee Robinson

92,214 görüntüleme • 1 yıl önce

Introducing the new Svgl 🥳🎉 ❖ New design. Upgrade to Svelte 5 + Tailwind CSS v4. ❖ New API docs + extensions page. ❖ shadcn/ui support + open with v0. ❖ Copy the optimized SVG directly using SVGO. ❖ Add your SVGs to favorites and access your list whenever you want.

Introducing the new Svgl 🥳🎉 ❖ New design. Upgrade to Svelte 5 + Tailwind CSS v4. ❖ New API docs + extensions page. ❖ shadcn/ui support + open with v0. ❖ Copy the optimized SVG directly using SVGO. ❖ Add your SVGs to favorites and access your list whenever you want.

Pablo

41,634 görüntüleme • 8 ay önce

Wow If you have any interest in making money on the web you need to watch this I built an entire AI Movie app with just 3 prompts. 0 lines of code written I can now ship this app and make $ Here's your complete bolt .new beginner's guide (Trust me, you want to bookmark this)

Wow If you have any interest in making money on the web you need to watch this I built an entire AI Movie app with just 3 prompts. 0 lines of code written I can now ship this app and make $ Here's your complete bolt .new beginner's guide (Trust me, you want to bookmark this)

Alex Finn

43,690 görüntüleme • 1 yıl önce

We’re releasing an updated Gemini 2.5 Pro (I/O edition) to make it even better at coding. 🚀 You can build richer web apps, games, simulations and more - all with one prompt. In Google Gemini, here's how it transformed images of nature into code to represent unique patterns 🌱

We’re releasing an updated Gemini 2.5 Pro (I/O edition) to make it even better at coding. 🚀 You can build richer web apps, games, simulations and more - all with one prompt. In Google Gemini, here's how it transformed images of nature into code to represent unique patterns 🌱

Google DeepMind

854,039 görüntüleme • 1 yıl önce