Loading video...

Video Failed to Load

Go Home

✨Introducing YesCheff is a web app that helps you learn, cook, and enjoy your favorite recipes through step-by-step cooking guides built from real YouTube content. You can even use your own YouTube links. A small but special project where I brought all my capabilities together, from design (brand &...

85,142 views • 9 months ago •via X (Twitter)

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 views • 2 months ago

HTML Artifacts are a big part of how I work with agents now. Artifacts can be more than just static files. When combined with agents, they can take action or help you take action. This unlocks all kinds of interesting ways to work with agents. This is clearly the future. Check out this writing and scheduler artifact I built in a few minutes. It uses a bit of HTML and JS. All the data is in markdown (Obsidian vaults), so the agent can access and modify it at any time. No DB needed. No sophisticated functionalities. The agent decides all that for me based on the skills, context, and memory it has access to. The best part about this simple stack is that all the important information stays with me. This has allowed me to build a recursive self-improving system and automations that can better tap into coding agents like Codex or Claude Code. I could have paid or built an entire app for scheduling posts, and there are so many of them out there. But I don't need to. I've realized a simple artifact does the job. And the simplicity of it is actually an advantage. Very little maintenance for very high returns on personalization, time, and efficiency. The other benefit of this is that I can add features as I please. That level of personalization feels magical, and we should all be pursuing more of it. All of this just keeps compounding. Of course, this example is just about writing. But I have similar artifacts for research, design, experimentation, evaluation, and so much more. And no, I didn't actually publish the post example I shared in the clip. It was just for demonstration purposes. I actually spend more time than this when writing together with agents. Lastly, having built my own agent orchestrator tool has made me realize that simplifying the tool stack is a superpower. If you are curious about how all this works, I will do a live session next week:

elvis

18,374 views • 2 months ago

more frontend vibecoding tips (results below): WHY YOUR VIBECODED FRONTENDS ALL LOOK THE SAME AND SUCK: when asked to make a frontend, the agent/llm will default to the center/average of its training data (in a very loose sense). through the training process, the model essentially converges on some default UI style. it's very capable of doing things that are different from this style, but you have to ask! for instance, ChatGPT tends to reply in the same tone for all users untill you interact with it and instruct it differently ("be sassy", "eli5"). the second reason is that most of us are not good at coming up with designs and describing them precisely (see my tweet on a crash course in common components, which i'll link below). treat frontend generation just like any other eng task! you need to provide a good detailed spec. TIPS: 1. give ur agent screenshots of designs you like (you may not know the right words to describe them but the agent will! a pic = 1000 words) where to find ui inspo? Behance, Dribbble, Mobbin (Mobbin is paid but worth it!) 2. ask ur agent for proposals, this helps "seed" different directions so the final frontend stands out. don't be afraid to go back and forth. 3. ban certain tendencies: no Inter/Roboto, no shadcn (controversial), no gradients, no emojis 4. encourage the agent to be extreme and make bold decisions, not safe ones. i think that the underlying models tend to get taught during RL/fine-tuning to make conservative choices that produce reasonable but boring frontends 5. give ur agent Figma MCP. the best results will come if you mockup your vision in Figma first. 6. Ideally choose an agent with vision capabilities TLDR: Most people are tremendously underusing agents for frontend design. They are much better than you might expect.

andrew gao

64,212 views • 4 months ago