Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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 👇

Charlie Clark

8,878 subscribers

28,075 просмотров • 1 год назад •via X (Twitter)

Наука и технологии Образование

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля Charlie Clark

Charlie Clark1 год назад

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

Фото профиля Rainmaker

Rainmaker2 лет назад

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

Mockuuups Studio1 год назад

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

Leon1 год назад

🌐 thiings-world

Фото профиля Charlie Clark

Charlie Clark1 год назад

woah trippy!! 💫

Фото профиля Mateo (Melian) 🇦🇷

Mateo (Melian) 🇦🇷1 год назад

Love this, thanks

Фото профиля Luke Berry

Luke Berry1 год назад

this is super, thanks!

Фото профиля Carmen (she/her) 👩🏽‍💻⚡️🦸🏾‍♀️🏳️‍🌈

Carmen (she/her) 👩🏽‍💻⚡️🦸🏾‍♀️🏳️‍🌈1 год назад

Awesome!

Фото профиля Luke Berry

Luke Berry1 год назад

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

Фото профиля Charlie Clark

Charlie Clark1 год назад

Weird! Just pushed a tweak, any luck now?

Фото профиля Deepak Mehta

Deepak Mehta1 год назад

Well done , will be useful for alot of us.

Похожие видео

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 ↓

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 просмотров • 1 год назад

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.

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 просмотров • 1 год назад

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.

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,382 просмотров • 2 лет назад

New project I built over the weekend with Grok Build: ~npm i drawesome It's the easiest way to add drawing tools to any React app with a simple, delightful toolbar. Smooth animations, thoughtful details, plenty of customization. Fully open source. Zero dependencies.

New project I built over the weekend with Grok Build: ~npm i drawesome It's the easiest way to add drawing tools to any React app with a simple, delightful toolbar. Smooth animations, thoughtful details, plenty of customization. Fully open source. Zero dependencies.

Benji Taylor

177,723 просмотров • 12 дней назад

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.

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 просмотров • 2 лет назад

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

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,845 просмотров • 4 месяцев назад

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.

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,130 просмотров • 1 год назад

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:

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 просмотров • 6 месяцев назад

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!

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

107,033 просмотров • 4 месяцев назад

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 ❤️

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 просмотров • 6 месяцев назад

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.

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,809 просмотров • 5 месяцев назад

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 :)

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

346,887 просмотров • 4 месяцев назад

UPDATE: Ended up with this cool little tool to both build and verify the training data quality; it turned out very accurate! So I am at least happy about that (tho it obvisouly was the easy part) The pipeline to produce this kind of training data (from any Warsh recitation) is in the GitHub below. The repo also documents my full exploration of the Tarteel-for-Warsh problem (and quite frankly, of the offline open source tarteel problem in general): what I tried, what's promising, what's not, and what I think the next steps worth taking are: from a non-engineer with little technical expertiste trying to figure it out. I tried to document everything so the repo might be excessively comprehensive at times. It's basically my entire convo with Claude on the subject, condensed in one repo. Please someone take this and run with it! I genuinely believe the right engineers who can make something real out of this are out there First public repo I've ever shared, so if I made dumb mistakes, please tell me! 🔗

UPDATE: Ended up with this cool little tool to both build and verify the training data quality; it turned out very accurate! So I am at least happy about that (tho it obvisouly was the easy part) The pipeline to produce this kind of training data (from any Warsh recitation) is in the GitHub below. The repo also documents my full exploration of the Tarteel-for-Warsh problem (and quite frankly, of the offline open source tarteel problem in general): what I tried, what's promising, what's not, and what I think the next steps worth taking are: from a non-engineer with little technical expertiste trying to figure it out. I tried to document everything so the repo might be excessively comprehensive at times. It's basically my entire convo with Claude on the subject, condensed in one repo. Please someone take this and run with it! I genuinely believe the right engineers who can make something real out of this are out there First public repo I've ever shared, so if I made dumb mistakes, please tell me! 🔗

Yousr

37,936 просмотров • 5 месяцев назад

dingcad is now open source needed cad software for my startup, so i made it i'll keep it pushed with library and updates. i push straight to master. there is a file called scene.js that will live reload the screen every time you change it. it's openscad without the bloat

dingcad is now open source needed cad software for my startup, so i made it i'll keep it pushed with library and updates. i push straight to master. there is a file called scene.js that will live reload the screen every time you change it. it's openscad without the bloat

kache

157,742 просмотров • 9 месяцев назад

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:

JordyDutch

14,060 просмотров • 6 месяцев назад

✦ AUTO RIG ANY PNG INTO A PET ✦ This is an incredibly smart idea and an easy way for you to get yourself a Live2D pet to hang out with you on stream. It's extremely easy to use and comes with a tutorial and everything. It's worth every penny so check it out!

✦ AUTO RIG ANY PNG INTO A PET ✦ This is an incredibly smart idea and an easy way for you to get yourself a Live2D pet to hang out with you on stream. It's extremely easy to use and comes with a tutorial and everything. It's worth every penny so check it out!

Phlox Nesspalier 🪫📺

52,043 просмотров • 6 месяцев назад

.Bill Gurley “I don’t think politicians understand how powerful open source is as a competitive weapon. If you have ten companies all doing open source, the minute an idea is shared, it's available to the other ten and they absorb it immediately. I think the odds that the U.S., with two proprietary models, can stay ahead of China, with ten open source ones, is very low.”

.Bill Gurley “I don’t think politicians understand how powerful open source is as a competitive weapon. If you have ten companies all doing open source, the minute an idea is shared, it's available to the other ten and they absorb it immediately. I think the odds that the U.S., with two proprietary models, can stay ahead of China, with ten open source ones, is very low.”

Codie Sanchez

65,669 просмотров • 4 месяцев назад

Our most advanced users LOVE the Oscillator Matrix. So we made a video breaking down each component and how you can use it to analyze price action like a pro. Supports our custom Alert Scripting and strategy Backtester! Check it out 👇

Our most advanced users LOVE the Oscillator Matrix. So we made a video breaking down each component and how you can use it to analyze price action like a pro. Supports our custom Alert Scripting and strategy Backtester! Check it out 👇

LuxAlgo

23,191 просмотров • 1 год назад

So, you wanted a farm and a fixer upper to make sure you got to make it into your own home. 24 acres with 4 bedrooms 2 baths with 2200 square feet. 549,000 dollars. Be sure to check out the bathrooms and lmk what your plan is.

So, you wanted a farm and a fixer upper to make sure you got to make it into your own home. 24 acres with 4 bedrooms 2 baths with 2200 square feet. 549,000 dollars. Be sure to check out the bathrooms and lmk what your plan is.

🏛Architectolder

33,813 просмотров • 26 дней назад

Our folding project showed what is possible with open-source. Reproducing it shouldn't take a PhD. LeRobot now ships with AGENT_GUIDE.md → so now your AI agent knows the insights, how to set up an SO-101, record good data, and pick a policy for your GPU. Just ask!

Our folding project showed what is possible with open-source. Reproducing it shouldn't take a PhD. LeRobot now ships with AGENT_GUIDE.md → so now your AI agent knows the insights, how to set up an SO-101, record good data, and pick a policy for your GPU. Just ask!

LeRobot

30,930 просмотров • 3 месяцев назад