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,464 subscribers

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

Anya Rossi• Live Now

Private livecam show

3 Yorum

Ian Bobinac profil fotoğrafı

Ian Bobinac2 yıl önce

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

Alexander profil fotoğrafı

Alexander2 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 Quesada2 yıl önce

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

Benzer Videolar

You can now create new web apps with Cursor, store the code with Origin, and deploy to Vercel.

You can now create new web apps with Cursor, store the code with Origin, and deploy to Vercel.

Cursor

1,017,275 görüntüleme • 2 ay önce

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,855 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

48,127 görüntüleme • 8 ay önce

We open sourced Claude Artifacts for your own apps. Ask your agent to visualize algorithms, create 3D animations, render charts, or generate interactive diagrams. PLUS it runs the generated code securely w/ sandbox iframe. It's additive to your app, so you can drop it in with one toggle. ➡️

We open sourced Claude Artifacts for your own apps. Ask your agent to visualize algorithms, create 3D animations, render charts, or generate interactive diagrams. PLUS it runs the generated code securely w/ sandbox iframe. It's additive to your app, so you can drop it in with one toggle. ➡️

Atai Barkai

87,741 görüntüleme • 6 ay önce

Sakana Chat just got a big upgrade. No login required, free to use: Powered by Fugu and Namazu, our Japanese LLM. With newly added code execution, you can vibe-code interactive web apps, games, and tools in seconds by describing them (even in Japanese).

Sakana Chat just got a big upgrade. No login required, free to use: Powered by Fugu and Namazu, our Japanese LLM. With newly added code execution, you can vibe-code interactive web apps, games, and tools in seconds by describing them (even in Japanese).

Sakana AI

138,914 görüntüleme • 2 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 • 5 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 L. Ringwald

942,622 görüntüleme • 1 yıl ö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 • 8 ay önce

You can now connect to even more apps in Gemini to get more done. By linking your favorite services to Gemini in your settings, you can easily plan, create, and tackle your to-do list all in one place. Here are 14 new apps to use with Gemini. 🧵

You can now connect to even more apps in Gemini to get more done. By linking your favorite services to Gemini in your settings, you can easily plan, create, and tackle your to-do list all in one place. Here are 14 new apps to use with Gemini. 🧵

Google Gemini

299,267 görüntüleme • 2 ay ö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

39,296 görüntüleme • 1 yıl ö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

96,239 görüntüleme • 7 ay ö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,270 görüntüleme • 7 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,282 görüntüleme • 2 yıl ö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

638,420 görüntüleme • 9 ay önce

New in Chrome! We’re improving how you interact with images on the web with Gemini in Chrome on desktop: 🔲 Select from your screen to add specific context to your prompts 👤 Create images built around you with Personal Intelligence 🖼️ Transform images on the web

New in Chrome! We’re improving how you interact with images on the web with Gemini in Chrome on desktop: 🔲 Select from your screen to add specific context to your prompts 👤 Create images built around you with Personal Intelligence 🖼️ Transform images on the web

Chrome

116,612 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

590,046 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,072 görüntüleme • 1 yıl ö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

415,283 görüntüleme • 1 yıl ö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,937 görüntüleme • 9 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 • 1 yıl önce