El Jonathan Mayunga

We've redesigned Claude Code on desktop. You can now run multiple Claude sessions side by side from one window, with a new sidebar to manage them all.

Now in research preview: routines in Claude Code. Configure a routine once (a prompt, a repo, and your connectors), and it can run on a schedule, from an API call, or in response to an event. Routines run on our web infrastructure, so you don't have to keep your laptop open.

Admin dashboard With Ai AI assistant ! built with - Next.js 16. - Tailwind CSS 4. - TanStack Query. - Framer Motion. Comes with NestJS backend, TypeORM, JWT auth, RBAC, WebSocket-powered updates, AI assistant, and multilingual support. Demo + Source Code (Not Free) : aniq-ui.com/en/templates/n…

Just dropped a plugin to make mask-based fade effects dead simple in tailwind v3 & v4 <marquee class="fade-mask fade-x-24" /> github.com/malerba118/tai…

Left or Right? 🤔

Here is Cursor building a Next.js + Supabase app, fetching a Supabase URL and anonymous key, and saving them to an env file for Next.js to consume:

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

⚛️ Here is how you can use currying in React if you want cleaner event handlers ↓

Next.js can be self-hosted using a Node.js server, a Docker container, or a static export. We've updated our self-hosting docs on: ◆ Runtime environment variables ◆ Custom cache configuration for ISR ◆ Custom image optimization ◆ Middleware #self-hosting" target="_blank" rel="nofollow noopener">nextjs.org/docs/app/build…

⚛️ React Tip: Clean up your code by using absolute imports + module aliases ↓

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

⚛️ React + Typescript tip: Creating dynamic prop types for components with Discriminated Unions ↓

Authentication in @nextjs with Server Components and Server Actions is so nice 🥰 We're working on some updated docs for auth – what would you like to see?

❌ Avoid prop-drilling your components to extend them in React. ✅ Instead use composition

Perhaps should start throwing these up on the YouTube channel if they're useful? 🤙 Also., do we want a video on those text clipped concentric circles? 👀 (That was more canvas animation trickery ✨)

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @​keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @​property --base { inherits: true; syntax: ''; initial-value: 0; } Then create an animation that updates this value @​keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? @CodePen link below! 👇

🎁 Day 3... Catalyst v0.1.0 is here! 🥳 Our first fully-componentized, batteries-included application UI kit for React 🤝🏻 tailwindcss.com/blog/introduci…

⚠️ Node.js 16 is now end of life, please upgrade to Node.js 18. Details: hubs.la/Q021R7wm0

Excited to share idx.dev 🚀 - @Google's new browser-based code environment. It has AI assistance for code-generation, code-completion and explaining code built-in. Also supports modern JavaScript frameworks out of the box. Join the waitlist today 🙏

Just launched: a gorgeous new in-browser code editor + dev environment. Built by Google with launch-day support for Astro! check it out: idx.dev