Travis Arnold @souporserious Twitter profile

Pinned Tweet

Travis Arnold

26 days

📣 Introducing MDXTS v1 📣 A new tool for building content and documenting libraries with MDX, TypeScript, and React. Read about the release below and try it out today: npm create mdxts

Introducing Mdxts - MDXTS

Build type-safe content and generate documentation using MDX, TypeScript, and React.

www.mdxts.dev

10

25

128

Last Seen Profiles

@pengen_stw

@c6twoman

@tompowles1

@boxy37

@stw_pdg

@ollyana0901

@Gezza_O

@EuroTripPodcast

@JoyousCivic

@Roma_una_

@justnmixx

@Hnokonokogiri

@GoldenMelon0103

@NessaVLRNT

@iitropar

@Hasousi13

@liekawoe

@disneymusicjp

@_jinnieworld

@Lem_tya

@jandakembangstw

@TheMrLillyShow

@isa_oO2

@hossam932144957

@NL_Times

@KW_Cobh

@hijabjilbab1

@CantSeeMe_Cry

@CA01mercy

@CoffeeCupGato

@aza

@ErnestScheyder

@Ko_kao0O

@binarydances

@aza

@chihamaru_desyO

Travis Arnold

@souporserious

5 months

2024 CSS Reset

51

367

4K

Travis Arnold

@souporserious

2 months

Next.js App Router shared layout route transitions with back/forward button 🪄

15

64

818

Travis Arnold

@souporserious

5 months

Added annotations for why you'd want these:

6

35

496

Travis Arnold

@souporserious

20 days

Introducing Restyle 🌈 A new CSS-in-JS library for React - Zero-runtime - Atomic class names - De-duplicates styles - Works in Server and Client Components - Supports `css` prop - Loads styles on demand - Allows shipping CSS in NPM packages

23

57

419

Travis Arnold

@souporserious

29 days

Pretty awesome React 19 will ship with CSS in JS support. It's going to be a game changer for library authors 🤩

11

18

313

Travis Arnold

@souporserious

4 years

📝 New article on how to get buttery layout animations using the FLIP technique in React 🧈⚛. We take a look at the nuances of this method as well as some resources at the end to help you get started!

Build a Simple FLIP Animation in React

The FLIP technique allows for declarative and performant animations. In this article, we will look at a simple way to implement this method using React.

souporserious.com

5

52

301

Travis Arnold

@souporserious

3 months

Introducing MDXTS (Beta) The Content & Documentation SDK for React 🔹 Author type-safe content 🔹 Generate type documentation 🔹 Preview source code

14

34

300

Travis Arnold

@souporserious

3 years

GitHub Copilot and TypeScript make learning library APIs so easy now compared to a decade ago.

7

11

265

Travis Arnold

@souporserious

1 year

I started an article about building an infinite Page component in Framer Motion over a year ago that I never published. Here's the Codesandbox until I get around to the article 🙃

0

29

263

Travis Arnold

@souporserious

7 months

Yesterday was my last day at Vercel. I'm extremely grateful for the opportunity to have worked with such a talented team pushing the web forward. I've been struggling with depression the last few years and came to realize I wasn't doing the work I was truly passionate about.

26

1

225

Travis Arnold

@souporserious

4 years

Web development needs to get on SwiftUI's level. The dev experience is unmatched right now. With the right primitives you can actually be productive AND ship amazing apps.

Meng To

@MengTo

4 years

I'm starting a new SwiftUI livestream series where I'll be prototyping a bunch of interactions. Let's start with a super simple workflow from @figmadesign - tomorrow 10:30am EST

15

58

574

8

13

204

Travis Arnold

@souporserious

1 month

MDXTS 0.16.0 was just released and it's the best version yet 🚀 The CodeBlock component was fully rewritten with minimal breaking changes and now exposes four new descendant components: - LineHighlights - LineNumbers - Tokens - Toolbar You get all of the same type-checking and

3

11

200

Travis Arnold

@souporserious

4 years

Inspired by how Facebook handles accessibility violations, I added a similar dev error to our React kit at work to help raise accessibility issues ⚠️

4

19

187

Travis Arnold

@souporserious

6 years

Hooks make things so much simpler 🎣

2

14

164

Travis Arnold

@souporserious

8 years

React is all about composition 😎 get auto height animation now 👉 #react #animation

2

32

141

Travis Arnold

@souporserious

3 years

Leva is such a great library! It's so easy to use for simple features and expands nicely for more advanced control.

GitHub - pmndrs/leva: 🌋 React-first components GUI

🌋 React-first components GUI. Contribute to pmndrs/leva development by creating an account on GitHub.

github.com

2

8

138

Travis Arnold

@souporserious

3 years

📝 New post on building your own code playground 🤹‍♀️ Ever wonder how code playgrounds like Codesandbox or Codepen work? In this post, we'll dive into how to build a simple playground by bundling code with SWC and displaying it in a sandbox.

Build Your Own Code Playground

Whether you use Codesandbox, Codepen, or another playground for testing code, you may have wondered how they work under the hood. In this post, we'll build a simplified code playground to test React...

souporserious.com

5

20

136

Travis Arnold

@souporserious

5 years

I firmly believe the confusion/frustration around CSS is because of shorthand properties. For instance, these are all the combinations for the flex property 😳. Writing out each property individually would be slightly more work and way more clear about what the code is doing.

3

17

125

Travis Arnold

@souporserious

28 days

Shipped a little library for locking scrollbars programmatically: npm i lock-scrollbars The site is built with @mdxts_ using the new CodeBlock line focusing and git provider link features ✨ It was also fun to test using JS Doc types and Tailwind 😎

8

10

127

Travis Arnold

@souporserious

3 years

It’s the best feeling when you can close your 30 windows of 100 tabs when the feature is done 😌

5

10

121

Travis Arnold

@souporserious

5 years

📢 PSA for frontend developers 📢 Use Flexbox for wrapped layouts. Use Grid for _everything_ else. That is all.

7

10

119

Travis Arnold

@souporserious

3 years

GitHub Action cron jobs are _amazing_. Currently pinging a Figma file for changes, building icons when it does change, and then auto-committing changes into a generated PR 🤯

7

117

Travis Arnold

@souporserious

1 year

Happy New Year, everyone! 💫 Some personal news, I recently joined @vercel as a Software Engineer. Grateful to be working alongside such a talented group of folks and can't wait to see what this next year brings 🚀

11

0

114

Travis Arnold

@souporserious

5 years

TIL there is a media query that allows you to apply styles only to devices that support hover and now I wonder why this isn't baked in by default to the hover pseudo selector🤦‍♂️

4

15

106

Travis Arnold

@souporserious

2 months

Shared layout route transitions in Next.js ✨ I've been working on a premium blog template for MDXTS. Launching soon, follow for updates 📣

2

1

104

Travis Arnold

@souporserious

8 months

I've spent the majority of my React career trying to solve the index problem in React since it deals directly with accessibility and layout. If you don't mind possibly getting fired for using react internals, you can get the index from the fiber:

itemlist useFiber - CodeSandbox

itemlist useFiber by souporserious using react, react-dom, react-scripts

codesandbox.io

Hot Jamie Kyle 🏳️‍🌈

@buildsghost

9 months

Here's a problem for you: Using React, how would you create a tree structure where nodes are assigned IDs like this that uniquely identify them and describe their relationship in the tree. Using context/etc, do not manually iterate over children

49

6

100

8

103

Travis Arnold

@souporserious

2 months

React, I ❤️ you, but please for the love of god ship some animation primitives.

6

4

101

Travis Arnold

@souporserious

2 years

Loving my new little TypeScript build script using esbuild and ts-morph. I'll blog about it soon, but it's amazing alongside turborepo 🐇

7

10

100

Travis Arnold

@souporserious

2 years

Excited to share that today is my first day with @replayio where I'll be helping lead visual debugging! 🎨🖼🔎📐. This is a problem space I've been deeply involved in throughout my career and am excited to go even deeper with a wonderful team and community! 1/3

7

3

99

Travis Arnold

@souporserious

4 years

Working on an article about how to implement the FLIP technique with a hook in React.

5

2

98

Travis Arnold

@souporserious

2 years

I've gone through probably 100 iterations of layout APIs to come full circle back to a Stack component for layout 🙃. Love where it's at now though and feels like the ergonomics are super close!

7

5

97

Travis Arnold

@souporserious

3 years

Breaks my brain that you can use esbuild-register and react-ink to load a theme in a custom hook and it just works as you'd expect.

7

6

97

Travis Arnold

@souporserious

3 years

Back on infinite view pagers ♾. I love the modifyTarget option in framer-motion that allows snapping the destination value.

4

6

95

Travis Arnold

@souporserious

6 months

📣 Announcing MDXTS (Preview) 📣 🔹Easily import content in Next.js 🔹Automate documentation 🔹Type-check code blocks 🔹Use file-based routing Balancing performance, customization, and usability has always been challenging when creating content and

MDXTS - The Content & Documentation SDK for React

Build type-safe content and generate documentation using MDX, TypeScript, and React.

www.mdxts.dev

4

11

95

Travis Arnold

@souporserious

7 days

I've been writing more isomorphic React components lately and just realized this is the easiest way to determine which rendering environment you're in:

9

7

173

Travis Arnold

@souporserious

4 years

OffscreenCanvas is unreal for text measuring. Getting about 2x the speed over using offsetWidth. Hoping to do a writeup about it soon!

5

2

92

Travis Arnold

@souporserious

5 years

I just realized I can wrap each child in a context provider to pass down information I don't necessarily want the developer to have to think about 🙌

4

8

88

Travis Arnold

@souporserious

6 years

I absolutely love @reactjs ❤️. Once you have component APIs figured out, it's easy to write, easy to read, and easy to refactor. I don't want to write code any other way (at least for now 😛).

1

5

85

Travis Arnold

@souporserious

6 years

Landed on a somewhat elegant solution for implementing "outside click" callbacks, check it out 👉

3

5

85

Travis Arnold

@souporserious

4 years

📝 New post about how Stack layouts are being used across the industry from design to development. This is part one of two, we'll look at how to implement this concept in a component in the next post!

Easier Layouts with Stacks

If we step back and look at the landscape of how we build and use layouts across platforms and design tools, we can gain insight into how to create easy one-dimensional layouts in our user interfaces.

souporserious.com

5

10

81

Travis Arnold

@souporserious

7 years

Umm soo I think I finally found a nice pattern for responsive props. @mjackson I think we should talk 😁

7

14

82

Travis Arnold

@souporserious

4 years

📝 New post on getting started with @figmadesign webhooks. We learn how to set up a local webhook service that notifies us when team files are updated ✨

Getting Started with Figma Webhooks

Webhooks offer a first-class way to react to changes in Figma. In this article, we'll build a small service in Node to listen for these events.

souporserious.com

1

11

81

Travis Arnold

@souporserious

3 years

🔥 tip if you're using esbuild or estrella for bundling, you can use your peer/dependencies from package.json to derive the external option

2

76

Travis Arnold

@souporserious

4 years

Landing page driven development is a thing right? I'll make the library after 😜

8

0

69

Travis Arnold

@souporserious

6 years

I love how intuitive @popmotionjs is for what would normally be a complex animation the primitives in react-pose are so solid 🤩

1

11

70

Travis Arnold

@souporserious

5 years

@sebmarkbage We use a set of layout components at my work with similar APIs ColumnView, StackView, TileView, and WrapView. Numeric values are all scaled by 8 to adhere to an 8-pixel grid. Makes laying out views extremely easy.

5

2

68

Travis Arnold

@souporserious

8 years

React Measure 1.0.0 released 🎉 #react

GitHub - souporserious/react-measure: 📏 Compute measurements of a React component.

📏 Compute measurements of a React component. Contribute to souporserious/react-measure development by creating an account on GitHub.

github.com

1

13

69

Travis Arnold

@souporserious

2 years

Just wrapped up my holiday project! The holy grail for code examples: 💾 Server-side rendered 🗡 Shiki for highlighting 🏰 Enhanced with Monaco Editor on click 🕹 Live editable using SWC

5

4

69

Travis Arnold

@souporserious

4 years

Does anyone know if there are any plans for a JSX v2? Playing around with ideas today and think it would be neat to treat attributes like an object so you can work with them more naturally and reduce noise. Example:

15

6

66

Travis Arnold

@souporserious

6 years

I can't believe how easy it is to generate live code examples from markdown in @gatsbyjs 😱 I was way overthinking things prior to this 😅

2

9

65

Travis Arnold

@souporserious

11 months

Balanced grids using text-wrap balance ✨

2

3

67

Travis Arnold

@souporserious

6 years

If you haven't used no-scroll yet, you should check it out 😁. Really nice for modal backgrounds and other dimmed, focused tasks. It also gets rid of that ugly scrollbar jitter when triggering it on/off🤘 and it plays well with React 😛

2

6

67

Travis Arnold

@souporserious

6 years

Big perf gains moving logic from a top level component to a child component with a render prop 🎉 thanks to react-powerplug again 💯

2

13

66

Travis Arnold

@souporserious

7 years

Any particular way you create React components that render other components in pre-defined areas?

16

6

66

Travis Arnold

@souporserious

1 month

You know how overflow containers don't span the entire scroll width and it results in weird shit like content getting cut off or padding not behaving as expected? Let me save you hours of frustration and get you kudos with your designers: ✨ width: max-content ✨

1

2

66

Travis Arnold

@souporserious

3 years

Excited for my first day at @Frame_io ! I'm joining an amazing Design Systems team that's tackling beautiful animations at scale 😍

16

0

66

Travis Arnold

@souporserious

7 years

Provide different ways for people to use your components 🌿

2

11

64

Travis Arnold

@souporserious

7 years

🍰 once you have strong primitives

8

7

62

Travis Arnold

@souporserious

2 years

Object.fromEntries is one of my favorite JavaScript methods for constructing and manipulating existing objects, especially when working with promises ⤵️

0

5

64

Travis Arnold

@souporserious

15 days

A week ago I released Restyle a new CSS in JS library for React. It generates the most minimal amount of CSS possible and supports all of the new React features like Server Components and Suspense. You can even ship CSS styles for your NPM packages! Check out all of the

3

11

64

Travis Arnold

@souporserious

3 months

If you use Next.js and are a: - content creator - library author - design systems engineer I've got a real nice treat for you shipping next week 😁

8

4

62

Travis Arnold

@souporserious

5 years

My favorite part about the component model is it allows you to determine what the developer is doing. CSS will silently let you shoot yourself in the foot, but what if we had better erroring when we want it? Playing around with helpful errors when you want an explicit CSS grid:

1

4

60

Travis Arnold

@souporserious

6 years

I can't believe how easy it was to get @popmotionjs and @brian_d_vaughn 's react-window working together 😍 I think lazy rendering for react-view-pager has been figured out now 🎉

Popmotion + React Window (drag to scroll) - CodeSandbox

Popmotion + React Window (drag to scroll) by souporserious using popmotion, react, react-dom, react-scripts, react-window

codesandbox.io

1

5

59

Travis Arnold

@souporserious

7 years

Seriously though... composition is so darn powerful

2

7

58

Travis Arnold

@souporserious

6 years

Finally got a chance to play with the new React APIs. They're so simple! Huge thank you to the @reactjs team for all of the hard work on the latest release 🙏. I'm so excited for the future 🤩

5

6

55

Travis Arnold

@souporserious

3 years

My first conference talk is less than 24 hours away now 🙈

6

1

55

Travis Arnold

@souporserious

6 years

Huge thank you @gatsbyjs and everyone that has made this the best dev experience ever ❤️. It's so freaking nice! I can't believe how easy it is to setup a fairly complex site in a couple of hours, AND it's server side rendered! 🎉

2

5

53

Travis Arnold

@souporserious

4 years

Framer Motion is so underrated. I've tried almost every frontend animation library and it's the best I've ever used. Since it's based on FLIP, it works with pretty much anything you throw at it. Your code stays declarative AND you get beautiful performant animations 🎩

5

2

53

Travis Arnold

@souporserious

4 years

Used the new Popmotion release as an excuse to revisit some old FLIP work. Finally got interruptible animations working! Going to release an article on the process next week 😁

1

53

Travis Arnold

@souporserious

2 years

Holy shit I finally got tests passing on my layout engine refactor. Getting closer 😈

2

1

52

Travis Arnold

@souporserious

2 months

"Our early tests show that on a minimal Next.js app, memory usage and cache file size decreased from 2.2GB to under 190MB on average." 🤯

Next.js 14.2

Next.js 14.2 includes development, production, and caching improvements. Including new configuration options, 99% Turbopack tests passing, and more.

nextjs.org

1

50

Travis Arnold

@souporserious

7 years

The best demo page ever 😍

2

12

51

Travis Arnold

@souporserious

19 days

It doesn't feel real that it's this easy to ship CSS alongside your React components now, but it is. import { css } from 'restyle' No extra build configuration required.

4

7

51

Travis Arnold

@souporserious

3 years

Holy shit TurboRepo is amazing 😮 dead simple to switch to from Lerna.

3

2

49

Travis Arnold

@souporserious

7 years

No more findDOMNode for React Popper 🎉

2

6

48

Travis Arnold

@souporserious

3 years

Y'all this is an AMAZING workflow. I can create a component in my Figma file, point to the layer in my NextJS app, save the file, and it's just there. Come to my React Finland talk on Monday if you want to find out more 😎

JSXUI

@jsxui

3 years

👀 getting assets from your @figmadesign file into your JSX codebase should be as easy as declaring the layer name.

2

1

36

3

47

Travis Arnold

@souporserious

7 years

States in @figmadesign 😱 I'm freaking out

2

10

46

Travis Arnold

@souporserious

5 years

Shout out to @jaredpalmer for making an amazing TypeScript cli tool 🙌. Thank you! This saves so much time and works wonderfully 🎉.

2

12

45

Travis Arnold

@souporserious

7 years

no excuses for bad typography now 🙌

2

15

44

Travis Arnold

@souporserious

1 year

It's been almost three years since I started @jsxui . I've been working on it consistently nights and weekends since then and am ready to finally release the initial alpha version. May 28, 2023 👀

Travis Arnold

@souporserious

4 years

Landing page driven development is a thing right? I'll make the library after 😜

8

0

69

8

4

43

Travis Arnold

@souporserious

7 years

Kind of digging this pattern

2

1

43

Travis Arnold

@souporserious

2 years

Implemented auto sizes in my layout engine before the end of the long weekend 🥹

5

1

42

Travis Arnold

@souporserious

4 years

@Oculus_Dev Then why do you require a Facebook account to use your devices?

0

1

41

Travis Arnold

@souporserious

6 years

Finding the right component API is gold 🏆

4

38

Travis Arnold

@souporserious

4 years

Added Capsize to JSXUI and it's already made a huge difference in how easy it is to line up spacing 🤯 absolutely great work, @michaeltaranto ! 👏

4

5

40

Travis Arnold

@souporserious

6 years

The autoFocus property is helpful for more than just focusing an element on page load. Here's an example in React using @popmotionjs PoseGroup + autoFocus to focus an input when it enters the DOM:

2

6

40

Travis Arnold

@souporserious

3 years

Started writing a post on Data Tables that's turned into three posts. We'll be covering using Grid for styling, accessibility, sticky headers/columns, and more 🙃

7

2

40

Travis Arnold

@souporserious

7 years

@sarah_edo @xaviervia @jongold @jaredforsyth sooo I made a webpack loader 😁 hopefully it works through NPM, need to write tests and figure more out

GitHub - souporserious/sketch-to-svg-json-loader: Sketch to SVG JSON loader module for webpack

Sketch to SVG JSON loader module for webpack. Contribute to souporserious/sketch-to-svg-json-loader development by creating an account on GitHub.

github.com

1

6

36

Travis Arnold

@souporserious

3 years

This morning: I've got a whole day to write docs for my side project. I'm going to get so much done! This evening: Cool, I got MDX loaded correctly.

3

0

40

Travis Arnold

@souporserious

5 years

Having fun with @framer motion 😎. Still blown away by how good the primitives are! Continuously great work @mattgperry and team 👏

4

3

39

Travis Arnold

@souporserious

7 years

I'm ready to just use canvas for everything. I want performant animations on the web.

3

7

36

Travis Arnold

@souporserious

3 years

@skuwamoto @figmadesign Pleaseeee add the ability to tokenize other values like size and spacing.

2

0

38

Travis Arnold

@souporserious

6 years

@ryanflorence Using canvas to measure text might help with the offset

1

38

Travis Arnold

@souporserious

4 years

Hacked together a framer-motion useDroppable hook inspired by @mattgperry 's sortable demo, @stolinski 's DropIn library and @alexandereardon 's react-beautiful-dnd API 🙃

1

4

38

Travis Arnold

@souporserious

5 years

Huge thanks to @kentcdodds for his frontend masters course on ASTs! I finally realized it's just a big API and a bunch of Javascript. I already wrote my first codemod to upgrade an API at work 🙌.

1

2

37

Travis Arnold

@souporserious

5 years

Messing around with self-documenting style APIs inspired by styled-system.

0

2

37

Travis Arnold

@souporserious

6 years

Native web is 💯

1

2

37

Travis Arnold

@souporserious

2 months

MDXTS is the Content and Documentation SDK 📝 Quickly start authoring MDX ✅ Type-check content 📘 Generate type documentation 📊 Gather module metadata 🖼️ Preview source code examples 📁 Generate file-based routes 🌈 Accurately highlight code blocks

GitHub - souporserious/mdxts: The Content and Documentation SDK for React

The Content and Documentation SDK for React. Contribute to souporserious/mdxts development by creating an account on GitHub.

github.com

2

4

36

Travis Arnold

@souporserious

2 years

New project I've been working on launches in a couple of weeks 👀

2

1

36