Tessera

Folgen

Travis Arnold

@souporserious.com

design / systems / compilers / react founder https://www.renoun.dev/

42 Posts487 Follower 28 Folgt

Josh W. Comeau @joshwcomeau.com · 3mo ago

🎉 Registration is now open for my latest course, Whimsical Animations! This course will teach you everything you need to know to design and build stunning, creative animations and interactions. It’s time to make the web less generic and boring! 😄

Whimsical Animations

Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!

whimsy.joshwcomeau.com

Travis Arnold @souporserious.com · 4mo ago

new avatar just dropped, going back to my face since times are weird and I think we should all feel more connected 🫂

Travis Arnold @souporserious.com · 7mo ago

Introducing @renoun/screenshot 📸 Capture any HTML element as an image with pixel-perfect accuracy, including modern CSS features.

Travis Arnold @souporserious.com · 7mo ago

My talk is out! Keeping documentation in sync has always been hard, but now this is crucial to implement as LLMs produce more code that needs to be validated, and it's a lot easier than you think. gitnation.com/contents/com...

Always Accurate Documentation by Travis Arnold

As a designer and engineer, I've faced challenges with outdated documentation causing friction and trust erosion. Documentation drift arises from scattered sources and lack of a single reference, lead...

gitnation.com

Travis Arnold @souporserious.com · 8mo ago

My talk is starting right now! Learn how to use React Server Components to always keep your documentation in sync 🔄

React Advanced London@reactadvanced.gitnation.org · 9mo ago

Hear from @souporserious.com how to make documentation always accurate - powered by React building blocks & Server Components. 📚 Keep docs, APIs & UI in sync automatically. 🔗See you at https://reactadvanced.com/

Travis Arnold @souporserious.com · 8mo ago

Turning 35 today 🎉 so I’m shipping something a little early to celebrate. A premium Next.js + MDX slide deck template for renoun 50% off for a limited time: buy.polar.sh/polar_cl_tLG... - Record your talk in-browser (camera + slides) - Convert to MP4 - Keep everything local

preview of the renoun presentation template

Travis Arnold @souporserious.com · 10mo ago

It's been almost five years since React Server Components were announced and three years since we could practically use them. I could not have built www.renoun.dev without React.

import { Directory } from 'renoun'

const posts = new Directory({
path: 'posts',
filter: '*.mdx',
})

export async function Page({ slug }: { slug: string }) {
const post = await posts.getFile(slug, 'mdx')
const Content = await post.getContent()
return <Content />
}

Travis Arnold @souporserious.com · 10mo ago

Annotations for code blocks usually require writing regexes to target specific source code and don't stay in sync easily. Working on something new using inline JSX comments. Highly flexible, declarative, and exposes annotations as renderers you can do whatever you want with.

The following source text with "warn" highlighted in yellow and "error" highlighted in red: console.warn('Warning') console.error('Error')

import { CodeBlock } from 'renoun'

export function Annotations() {
return (
<CodeBlock
language="ts"
annotations={{
highlight: ({ children, color }) => (
<span
style={{
padding: '0 0.05em',
borderRadius: '0.25rem',
backgroundColor: color,
}}
>
{children}
</span>
),
}}
>
{`
console./* <highlight color='rgba(255,213,0,0.35)'> */warn/* </highlight> */('Warning')
console./* <highlight color='rgba(255,0,0,0.35)' /> */error('Error')
`}
</CodeBlock>
)
}

Travis Arnold @souporserious.com · 10mo ago

renoun has taken a long time to build because I run into every single issue it's trying to solve for the documentation site. It feels good to finally talk about now though, I'm really happy with where the API is. The changelog is quite the history of where it has been so far 😄 renoun.dev/changelog

renoun - The Documentation Toolkit for React

The renoun toolkit uses your React framework to keep documentation polished, in sync, and on brand.

renoun.dev

Travis Arnold @souporserious.com · 10mo ago

Excited to officially launch renoun.dev 🚀 This has been years in the making to deliver a focused set of components, hooks, and utilities in React for building great documentation exactly to your standards that always stay in sync.

renoun - The Documentation Toolkit for React

The renoun toolkit uses your React framework to keep documentation polished, in sync, and on brand.

renoun.dev