Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

ThiingsGrid (the infinite grid component used in thiings[.]co) is now open source! I made a little playground to explore the component. It's a single React+TS file with 0 other dependencies, so easy to drop into your project. Check it out an lmk what you think! Repo 👇

clarkcharlie03's profile picture

Charlie Clark

8,878 subscribers

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

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Charlie Clark profil fotoğrafı
Charlie Clark1 yıl önce

I'll try to add more examples in the coming days (including a simple animated one like on thiings)

Rainmaker profil fotoğrafı
Rainmaker2 yıl önce

Here I share an XGBoost model that delivers a 25% CAGR with minimal drawdown on Visa stock. In this free Substack post I share code and commentary for a powerful Machine Learning strategy that delivers powerful returns.

Mockuuups Studio profil fotoğrafı
Mockuuups Studio1 yıl önce

Love this! We actually used ThiingsGrid to demo our entire mockup library—over 4,800 scenes! The performance is 🔥 and the integration was seamless.

Leon profil fotoğrafı
Leon1 yıl önce

🌐 thiings-world

Charlie Clark profil fotoğrafı
Charlie Clark1 yıl önce

woah trippy!! 💫

Mateo (Melian) 🇦🇷 profil fotoğrafı
Mateo (Melian) 🇦🇷1 yıl önce

Love this, thanks

Luke Berry profil fotoğrafı
Luke Berry1 yıl önce

this is super, thanks!

Carmen (she/her) 👩🏽‍💻⚡️🦸🏾‍♀️🏳️‍🌈 profil fotoğrafı
Carmen (she/her) 👩🏽‍💻⚡️🦸🏾‍♀️🏳️‍🌈1 yıl önce

Awesome!

Luke Berry profil fotoğrafı
Luke Berry1 yıl önce

i wonder why it's rendering like this to me? didn't spot any "text-white" classes in the elements

Charlie Clark profil fotoğrafı
Charlie Clark1 yıl önce

Weird! Just pushed a tweak, any luck now?

Deepak Mehta profil fotoğrafı
Deepak Mehta1 yıl önce

Well done , will be useful for alot of us.

Benzer Videolar

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓
0:43

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓

Santiago

39,944 görüntüleme • 1 yıl önce

Here is a step-by-step introduction to building a workflow with a custom AI agent that uses MCP. I explain every component in the video: 1. Building the MCP server 2. Building the agent and an MCP client 3. Building a workflow that uses the agent The goal is simple: Generate a dialogue between two people and make one yell and the other answer with sarcasm. Kestra is sponsoring this video. They are an open-source orchestration platform (repo link below), and I used them to build the workflow that connects every component.
23:07

Here is a step-by-step introduction to building a workflow with a custom AI agent that uses MCP. I explain every component in the video: 1. Building the MCP server 2. Building the agent and an MCP client 3. Building a workflow that uses the agent The goal is simple: Generate a dialogue between two people and make one yell and the other answer with sarcasm. Kestra is sponsoring this video. They are an open-source orchestration platform (repo link below), and I used them to build the workflow that connects every component.

Santiago

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

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.
0:33

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

Delba

157,350 görüntüleme • 2 yıl önce

Don't know what it's called but made this component with React and Tailwind in 1 hour
0:26

Don't know what it's called but made this component with React and Tailwind in 1 hour

Sam ☕

528,265 görüntüleme • 8 ay önce

Introducing the "Preview" component... Try any shader in your project codebase, including Pro presets, in 60 seconds ⚡️ npm install, copy a single component tag, see it live 👀
0:22

Introducing the "Preview" component... Try any shader in your project codebase, including Pro presets, in 60 seconds ⚡️ npm install, copy a single component tag, see it live 👀

shaders

15,894 görüntüleme • 4 ay önce

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.
1:24

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 görüntüleme • 2 yıl önce

I used to design by screenshotting real products into Figma → just to design against real production UI. 🤔 But now I just capture any live web component, remix it in a vibe design playground, explore multiple directions with an AI designer, and let Claude push the final version to production.🤘 Designing on reality > mockups, crazy how far things evolved past few month Here’s how I used it to redesigned Superdesign’s own prompt input UI 👇 The browser plugin:
0:35

I used to design by screenshotting real products into Figma → just to design against real production UI. 🤔 But now I just capture any live web component, remix it in a vibe design playground, explore multiple directions with an AI designer, and let Claude push the final version to production.🤘 Designing on reality > mockups, crazy how far things evolved past few month Here’s how I used it to redesigned Superdesign’s own prompt input UI 👇 The browser plugin:

Jason Zhou

33,290 görüntüleme • 4 ay önce

Today, I invite you to learn the Browser Mode in Vitest. Unlock the true value out of your React component tests in the real browser! 📢 A new workshop is OUT at Epic Web. The link below.
1:49

Today, I invite you to learn the Browser Mode in Vitest. Unlock the true value out of your React component tests in the real browser! 📢 A new workshop is OUT at Epic Web. The link below.

Artem Zakharchenko

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

152,549 görüntüleme • 3 ay önce

I was tired of not being able to browse my Twitter bookmarks more visually, so I made an infinite grid with the ability to filter by folder. Built on top of Andrew's great work. It's open source, I'll post the link below!
0:21

I was tired of not being able to browse my Twitter bookmarks more visually, so I made an infinite grid with the ability to filter by folder. Built on top of Andrew's great work. It's open source, I'll post the link below!

Daniel Destefanis

104,854 görüntüleme • 2 ay önce

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.
6:08

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.

Evan Boyle

14,446 görüntüleme • 1 yıl önce

Old Art to full 3D using Cinema 4D . Created a free and open-source plugin to bring Hunyuan 3D directly into Cinema 4D. This workflow combines multiple tools that are available today into a single, cohesive pipeline. I wanted to show that AI is never an end product by itself, it’s not the finality. Used properly, AI becomes an extremely powerful tool that lets you build exactly what you want. I hope you like it. The final step will be to bake all textures so I can share the project as a WebGL experience, a small interactive website to explore it directly in the browser. Made with heart, and with fal ❤️
2:05

Old Art to full 3D using Cinema 4D . Created a free and open-source plugin to bring Hunyuan 3D directly into Cinema 4D. This workflow combines multiple tools that are available today into a single, cohesive pipeline. I wanted to show that AI is never an end product by itself, it’s not the finality. Used properly, AI becomes an extremely powerful tool that lets you build exactly what you want. I hope you like it. The final step will be to bake all textures so I can share the project as a WebGL experience, a small interactive website to explore it directly in the browser. Made with heart, and with fal ❤️

Lovis Odin

21,909 görüntüleme • 5 ay önce

Someone paid $6,000 (!) to get OpenClaw setup. So I built a free, open-source alternative: > OpenClaw Operator It's an agent skill + AGENTS.md/CLAUDE.md file that gives Codex/Claude Code the playbooks + validation flow needed to configure your local OpenClaw install. You open your OpenClaw repo/workspace in your coding agent and say things like: - “set up a cron job” - “create a custom skill” - “fix my provider config” - “troubleshoot this install and validate it” Nothing magical. Uses context from the OpenClaw open-source repo + docs to provide an effective skill. Includes: - SKILL.md - AGENTS.md/CLAUDE.md - validation checklist - task playbooks Free and open source. Contributions welcome. Demo below. Repo in reply.
0:20

Someone paid $6,000 (!) to get OpenClaw setup. So I built a free, open-source alternative: > OpenClaw Operator It's an agent skill + AGENTS.md/CLAUDE.md file that gives Codex/Claude Code the playbooks + validation flow needed to configure your local OpenClaw install. You open your OpenClaw repo/workspace in your coding agent and say things like: - “set up a cron job” - “create a custom skill” - “fix my provider config” - “troubleshoot this install and validate it” Nothing magical. Uses context from the OpenClaw open-source repo + docs to provide an effective skill. Includes: - SKILL.md - AGENTS.md/CLAUDE.md - validation checklist - task playbooks Free and open source. Contributions welcome. Demo below. Repo in reply.

Dan McAteer

17,706 görüntüleme • 3 ay önce

The new Open in v0 lets you take your components to v0 for prompting. My new workflow is component to v0 to editor. You can try it now on
0:40

The new Open in v0 lets you take your components to v0 for prompting. My new workflow is component to v0 to editor. You can try it now on

shadcn

173,352 görüntüleme • 1 yıl önce

🚀 Key Export Component for CDP Embedded Wallets We've offered the ability to export keys from the beginning. Now, it's an easy-to-use and customizable UI component that enables your users to securely export their wallet keys natively. Below, jnix.base.eth walks through the user experience and implementation 👇
1:39

🚀 Key Export Component for CDP Embedded Wallets We've offered the ability to export keys from the beginning. Now, it's an easy-to-use and customizable UI component that enables your users to securely export their wallet keys natively. Below, jnix.base.eth walks through the user experience and implementation 👇

Coinbase Developer Platform🛡️

69,025 görüntüleme • 7 ay önce

"How to share state between React client components with a parent server component?" 👇
0:32

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

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

🌲I finished my newest project which is a little home in the forest! 🌲 It was super fun making all the component of this one. I hope you like it!! ✨
0:21

🌲I finished my newest project which is a little home in the forest! 🌲 It was super fun making all the component of this one. I hope you like it!! ✨

Helena Hansen

12,877 görüntüleme • 1 yıl önce

Recently, Evan lin designed an open-source TPU (from scratch). With Instachip, YOU can "pip install" Evan's TinyTPU into your own project! How? Check it out 👇
0:51

Recently, Evan lin designed an open-source TPU (from scratch). With Instachip, YOU can "pip install" Evan's TinyTPU into your own project! How? Check it out 👇

Sathvik Redrouthu

24,444 görüntüleme • 1 yıl önce

I made a thing! I'm calling it OBSPaint. I gives you a single Browser source file and allows you to draw on your screen in any color without needing a Paint window colored green open :D If anyone is interested i might throw the file on my site for download :)
1:18

I made a thing! I'm calling it OBSPaint. I gives you a single Browser source file and allows you to draw on your screen in any color without needing a Paint window colored green open :D If anyone is interested i might throw the file on my site for download :)

Evilee

345,163 görüntüleme • 3 ay önce