Mauro Reis Vieira

Here's my favorite demo, by @css-only.dev.

codepen.io/t_afif/full/...

In addition to anchoring it also uses Scroll-Driven Animations 😊

Open Social — overreacted The protocol is the API.

i wrote about atproto and why it matters

Vite: The Documentary YouTube video by CultRepo

The @vite.dev team is super inspirational. Thanks for building such great tools @evanyou.me @patak.dev @antfu.me and the rest of the Vite team 💖

www.youtube.com/watch?v=bmWQ...

.toBeVisible() or .toBeInTheDocument()? A deep dive into Testing Library's .toBeVisible() and .toBeInTheDocument() matchers, exploring their differences, use cases, and best practices

.toBeVisible() or .toBeInTheDocument()?

www.epicweb.dev/tobevisible-...

A Modern CSS Reset • Josh W. Comeau I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!

🌠 I just updated by CSS Reset to include a handy new declaration:

html {
interpolate-size: allow-keywords;
}

This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨

Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...

After 2+ years, it's finally time to announce @TanStack.com Form v1!

✅ Type Safe
🚀 Framework Agnostic
🎭 Headless
🔄 Isomorphic
🛡️ Advanced Validation
📜 Standard Schema
➕ More!

the week just started, and Eslint is already ruining my life.

Raycast Focus
Stay in flow by blocking distracting apps and websites.

🎯 raycast.com/focus

Must reads for web developers - how modern browsers work:

1️⃣ bit.ly/browsers-pt1
2️⃣ bit.ly/browsers-pt2
3️⃣ bit.ly/browsers-pt3
4️⃣ bit.ly/browsers-pt4

and browser.engineering a free to read book on the topic

🚀 Introducing Zed v0.165!

Just as you can split editor panels, you can now split the terminal panel.

React v19 – React The library for web and native user interfaces

React v19 is now stable!

react.dev/blog/2024/12...

Tanstack Start doing doing server calls a bit different than React Server Components.

You can write the client and server logic in the same file and it replaces it with fetch calls when run on the client.

No "use client", no errors with client APIs in server components, etc..

watch at 0.5× 😆

GitHub - aidenybai/react-scan: Scan for React performance issues and eliminate slow renders in your app Scan for React performance issues and eliminate slow renders in your app - aidenybai/react-scan

first post, i came here to say i made a thing today:

github.com/aidenybai/re...

Announcing Vite 6 Vite 6 Release Announcement

Vite 6.0 is out ⚡️
vite.dev/blog/announc...

"Soft skill books that will make you a better developer"

open.substack.com/pub/addyo/p/...

Takeaways from some favorite books that have helped me grow over time.

Mark Dalgleish – How React Router Became a Framework, React Advanced 2024 YouTube video by React Conferences by GitNation

“How React Router Became a Framework,” my talk from React Advanced in London, is now up!

Learn about why Remix as it exists today is being merged into React Router, and what it means for the future of the project.

www.youtube.com/watch?v=BKi4...

A virtual certificate with text "Celebrating 10M users on Bluesky, #664,103, Mauro Reis Vieira ‪@mauroreisvieira.bsky.social‬, joined on Aug 21, 2023"

Bluesky now has over 10 million users, and I was #664,103!

Introduction the useBem hook Discover the power of the useBem hook to streamline your CSS class management, learn how to apply the BEM methodology to ensure consistent, readable, and maintainable styling across your front-end pro...

Introduction of the `useBem` hook for React

mauroreisvieira.com/post/introdu...

Join Bluesky Today (Bye, Invites!) - Bluesky Sign up for Bluesky! No invite code required.

You can now sign up for Bluesky without an invite! 🎉

bsky.social/about/blog/0...

Understanding Idiomatic React – Joe Savona, Mofei Zhang, React Advanced 2023 Live stream of React Advanced London #ReactAdvanced #GitNationWebsite – https://reactadvanced.com/Follow the link to watch the full version of all the confer...

here’s a recent talk about it! youtu.be/qOQClO3g8-Y

for dates you’re supposed to do suppressHydrationWarning react.dev/reference/re...

React Aria Components RC banner showing built-in form validation and new toolbar component. The form has email and password fields and a checkbox labeled "I agree to the terms of service". The email field is marked invalid with a message "An account with this email already exists" under it, and the checkbox is not checked with an error "You must agree to the terms of service. Sign up and Log in buttons are below the form. The toolbar component includes a group of buttons representing text formatting controls including bold, italic, underline, and left, center, right, and justified alignments, as well as a dropdown menu containing cut, copy, and paste actions. One of the buttons has a focus ring.

React Aria Components has reached RC! 🚀

• Built-in form validation
↳ Native HTML constraints
↳ Custom validation functions
↳ Server validation – designed for React Server Actions
• New Toolbar component
• Improved Framer Motion support
• Simpler docs CSS

react-spectrum.adobe.com/releases/202...

SOLID Principles in React Let's explore how the SOLID principles can be applied to React components using TypeScript, functions, hooks, and interfaces.

SOLID Principles in React

mauroreisvieira.com/post/solid-p...

Another Pest release today! As you may know, Pest is the first testing framework in the world natively supporting "Type Coverage". And now, you can ignore specific lines from the type coverage report by using the `pest-ignore-type` annotation. Just what you asked for! 💅🏻

This is great, bun 1.0 was released so recently and @vercel.com already supports it.

Anatomy diagrams for React Aria Components including table, combo box, date range picker, and number field. Each diagram has labels pointing to each part of the component. A "Beta" badge appears in the top right corner of the image.

React Aria Components is now in beta! 🥳

• Major documentation update
• New styling and animation guide
• More consistent API for states via data attributes
• New Tailwind CSS plugin
• SSR support in collections
• Improved validation API

react-spectrum.adobe.com/releases/202...

go back to Sublime it's the best thing you do

Do you know that it's possible in React to log messages directly within your component's HTML?

While you can use `{console.log()}` within curly braces, remember it's best for debugging during development.
Keep your production code clean!

Support for React in the next version of Hello Week.

Good code is like a love letter to the next developer who will maintain it. We often romanticize the notion of programming, presenting it as an abstract form of art, a science, or even a form of magic. The truth, however, is much mor...

✍️ Good code is like a love letter to the next developer who will maintain it. It’s sincere & unadorned with unnecessary complexity.

addyosmani.com/blog/good-co...