Matt Brophy
@brophdawg11
Followers
1,346
Following
443
Media
179
Statuses
6,683
Helping folks Build Better Websites @remix_run 💿 / @shopify
Philadelphia, PA
Joined March 2010
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Doom
• 535229 Tweets
#TheLoyalPinGalaPremiere
• 449637 Tweets
ANILPIN WORLD PREMIERE
• 446481 Tweets
Marvel
• 350814 Tweets
ワンフェス
• 168106 Tweets
#超RIZIN3
• 87100 Tweets
Kang
• 65288 Tweets
一本負け
• 60989 Tweets
Iron Man
• 56067 Tweets
YIN YIN
• 33675 Tweets
Tony Stark
• 33505 Tweets
詩ちゃん
• 23910 Tweets
Alexa Moreno
• 22619 Tweets
モズメイメイ
• 20454 Tweets
Simone Biles
• 19390 Tweets
#Shooting
• 17435 Tweets
コガネノソラ
• 16923 Tweets
照ノ富士
• 13276 Tweets
モンテス
• 10671 Tweets
First, we Remixed React Router, now we're ... React Router-ing Remix I suppose? Check out this blog post on how we're bringing all the latest RR 6.4 goodies back over into Remix in an incremental and non-breaking fashion!
3
9
94
@remix_run
1.10.0 is released! This is a huge milestone to kick off 2023. Sets the stage for really awesome feature iteration this year. I'm struggling to come up with a metaphor though that actually describes what this entails.
7
10
93
Introducing "Future Flags" in Remix. I'm really excited about the upgrade path we're hoping to give users with these!
4
13
91
Been working in this for a bit now and
@remix_run
Client Data is so close I can taste it. Can't wait for the stuff this unlocks in the future 🚀
7
5
84
Who else loves deleting code?? We just merged months worth of work to remove all the Data API code from Remix that was moved over to React Router. This is the result of Remix now inheriting all that behavior from the Router 😀
11
3
87
Man this
@remix_run
router is awesome! A little hacking over the holidays and we've got got a working
@solid_js
adapter. Only ~700 lines of solid code - lots of which could be DRY'd up amongst the adapters. Great work from
@nivekithanS
!
4
5
67
Been doing this a long time and I knew the instant I saw Remix's patterns that they completely changed the game. I sent Michael and Ryan an email not long after, and the rest is history.
I still pinch myself sometimes that I get to work on Remix full time 💿
Nov 2021, Remix Goes Open Source:
"You can't build React web apps with HTML forms!" they all cried together.
Just look at you now.
18
10
269
3
0
63
💯 this is the driving force behind React Router 6.4's data APIs brought over from Remix. Decoupling data fetching from rendering provides *huge* UX improvements
⚛️ React tip: you should almost never fetch inside render.
Start fetching as early as possible, e.g. on route change or when an event occurs (click, submit, etc.). Mental model should be:
✅ Read from fetched data in render
NOT:
❌ Start fetching in render
38
104
926
2
5
63
🔥 s/React.lazy/Route.lazy/g in React Router 6.9.0
2
19
61
@TkDodo
The axios-lover in me always has a gut reaction of "why not?" But once I get past that I agree with fetch's implementation. If fetch receives a 4xx/5xx from your server then it succeeded in what it was asked to do, which is obtain an HTTP response from a server
2
0
56
Client Data in
@remix_run
is so close! If anyone wants to do any last minute beta testing, you can try it out in the 2.4.0 prerelease:
> npx upgrade-remix pre
Been working in this for a bit now and
@remix_run
Client Data is so close I can taste it. Can't wait for the stuff this unlocks in the future 🚀
7
5
84
1
7
46
You own your architecture.
Want to run a server? Use Remix!
Don't want to run a server? Use Remix!
Remix is not just for server-rendered apps anymore!
Introducing Remix SPA Mode, new in Remix v2.5
22
150
888
2
1
45
File based routing is great 😀
Most of the time 🙂
OK, fine, sometimes 😐
And sometimes it's annoying 🙁
Sometimes you just want to points paths to files via JSON/JSX (instead of the other way around) 😎
4
10
43
Remix "single fetch" (currently in prerelease and marked unstable) finally unlocks full SSG (including data) if that's your thing:
1
4
43
Had a great IRL chat with
@dan_abramov
and
@ebey_jacob
today at
#RemixConf
to help understand the nuances around React RSC and it's impacts on bundling and routing (and help clarify the lines between React/Next).
Twitter threads are terrible for understanding these nuances 🤣
0
4
38
👀
Just got a preview of Remix SPA mode from
@brophdawg11
and it's going to be great, will show off as soon as we can.
Get your React Router apps onto Vite ASAP if you've been wanting to upgrade your React apps 😎
14
8
213
3
0
38
@mardo12341
@ryanflorence
Yeah - automatic file system routing plus full document hydration and head management via Remix <Links>/<Meta>.
And, you’re now one small config change away from a server runtime should the need arise. Plus any future applicable Remix goodies.
2
1
34
Go watch the videos in this 🧵 for all the cool tips and tricks you can do with caches, client data, prefetching, etc. to make your Remix apps snappy
Data so fast you'll puke! 🤢
- instant transitions with prefetched loaders
- dodge the network with client caches
- instant search with indexedDB data replication?!
Releasing one video per day
YouTube Playlist:
Live Demo:
25
73
627
0
3
36
Folks can basically do Remix SPA today:
* Export root HydrateFallback w/<Scripts>
* Only use clientLoaders/Actions
* npm run build
* npm run start
* curl
http://localhost:3000
> public/index.html
* npx http-server public
Our job is will be yelling at you for doing non-SPA stuff
4
3
36
Overheard in the Remix Discord:
> Just walked one of our junior engineers through converting one of our existing [component/client-side fetching] routes to follow Remix patterns and the response was "omg this is so much easier to understand what's going on"
Love to hear it!
1
3
34
Excited to speak about the
@remix_run
framework-agnostic router at 2 conferences this fall! This is the backbone of the new React Router 6.4 release and opens the door to leveraging the Remix Data APIs in the framework of your choosing! 1/3
1
1
35
Coming soon to a Remix/React Router app near you!
Please use sparingly/thoughtfully - let's not turn the web into an over-animated mess 🙏
Playing around a bit with view transitions this afternoon. Thanks to
@brophdawg11
for getting this example started!
Pretty funny to mess with, and the resulting code change is pretty small. Definitely not perfect tech yet
2
2
32
1
1
35
This has been a very common source of questions in React Router 6.4. Finally got around to putting together an
@auth0
example using RouterProvider where the authentication state is managed *outside* of the React tree, so no useAuth0() etc.
2
3
32
Had an awesome birthday dinner with the fam this weekend to celebrate my 40th. Thankful we're all in close enough proximity that we can do this without much travel.
10
0
32
2023 was pretty awesome:
💿 Awesome work in RR/Remix
💵 Paid off student loans
🎤 2 confs (ATL, VA)
✈️ 3 trips (SF, OBX, Acadia)
🏌️♀️ 2 golf trips (‘bama, PA)
👴🏻 Turned 40
Looking forward to 2024:
💪 Strong focus on health/fitness
🏌️♀️ 2 golf trips (TX/AZ)
🏠 Buying a house🤞
1
0
32
Almost time to talk about Framework Agnostic Routing with the new
@remix_run
router at
#ConnectTech
!
Queue nerves 😬
#UseThePlatform
5
0
32
👀 If React Router's `route.lazy` is not quite enough for your code-splitting needs - you may want to check out this new Lazy Route Discovery proposal (aka "Fog of War")
0
3
31
Welp, a few mentions by
@ryanflorence
and no more safely tweeting into the void 😂
@BrooksLybrand
🎯
I don't think I want want the celebrity retweet! I'm pretty sure sub-1k followers is the sweet spot where I can safely tweet into the void and not get reply-guy'd by the ... waves hands ... rest of twitter
1
0
5
4
0
28
I absolutely love the number of “or not” steps in here. I have come to see “Remix” as a set of rock solid abstractions to build awesome apps (routes, loaders, actions, fetchers, forms, etc.). How you serve/deploy said apps is for you and your team to decide.
Remix is dedicated to building incremental bridges to the best frontend innovations the React community has made and continues to make.
Everything after step 2 is incremental and optional.
1️⃣ Migrate from react-scripts to vite (hardest step):
2️⃣ Migrate
9
18
262
0
3
26
Just published remix-router-vue
@0
.4.0 with support for useSubmit, useHref, and useResolvedPath. Getting closer and closer to API compatibility with react-router-dom 6.4 (currently in prerelease)
1
4
26
Check out Ryan's talk for an overview of some of the new goodies in React Router 6.4 (in prerelease currently)!
These data loading (and mutation) approaches from Remix _change the game_ for SPA apps - and are likely coming soon to a Vue app near you 🥳
We're excited to publish
@ryanflorence
's full talk from Reactathon: "When to Fetch: Remixing React Router"!
You can see the first minute in the short clip below, and watch the full talk for free on YouTube here:
5
18
189
1
2
27
I've actually had a conf talk idea bubbling around in my head along these lines 😬
Enough likes and I'll submit a CFP for "Using Remix/RR SSR to SSG/PPR an ISR-enabled MPA that hydrates into a CSR SPA"
In a future where improvements from
@remix_run
+ RSC feed back into React Router, I'll be able to say:
"My website is RR SSR + RSC. It's CSR'd after initial load. Subscribe via RSS!"
...RSC,CSR,SSR,RSS,RR...
It's like some weird haiku-like gibberish😅
4
0
61
0
0
26
💯 once again for the folks in the back. This might be the single best piece of advice I'd give to a mid-level dev looking to level up. It's helped me tremendously in my career. And ... the best part is that the abstraction is (almost) never as complex as you might expect.
I've said it before and I'll say it again: Understanding the abstractions you use will make you more effective at using them. ✨
Example I've been thinking about recently: Even if you aren't building your own authentication solution, understanding how it works will make you more
13
35
252
3
2
26
What is this wizardry?
@jenseng
building a web based piano that works with and without JS 🤯
#RemixConf
0
1
25
I got tired of spinning up raw React SSR reproductions to test out weird hydration-related bugs in Remix so here's how to do React SSR in a single Node JS file without JSX/bundler/framework
3
3
24
If your code looks like this inside a React Router/Remix loader/action, edge cases and error handling are totally covered for you 🙌
If your code looks like this inside a queryFn, edge cases and error handling are totally covered for you 🙌
4
0
123
1
1
23
🎉 I am *so* excited about this! Having spent much of my career in E-Commerce I know just how important fast/resilient experiences are. I can't think of a better stress test for the Remix framework than ensuring it can handle all the use cases E-Commerce presents.
★ The
@remix_run
team has joined Shopify!
Win-win as we put the power of Shopify behind
#Remix
allowing them to accelerate their roadmap & focus on pushing the web forward & they will help deliver next-generation web experiences for our merchants & devs.
18
148
956
5
1
22
Sure you've heard of Single File Components, but wait until you discover Single File Apps
2
0
23
This is so awesome to hear!
Coming from Vue myself, I had the same reaction when I tried Remix. It was a large reason I joined the team
Remix abstracts away so much (routing, state mgmt, fetching, mutations) that the “React” part almost simplifies to “just write HTML via JSX”
I built my first web app using
@remix_run
with a Node backend and it was such a nice experience as a developer and helped me produce a fantastic UX.
I'm a Vue guy through and through, but Remix makes React look good!
Sneak peek coming soon, public release tbd.
4
4
56
1
1
21
Whoa, TIL about `linkElement.relList.supports('preload')` to feature detect if <link rel="preload"> is supported (or enabled/disabled by the user)
2
0
21
We’ve don’t some “telling” but not yet done a good enough job of “showing” this incremental path from React Router -> Remix IMO. Expect more to come in this area! We’re really invested in making this transition *easy* and *incremental*
Incremental Create React App 🚍➡️ Remix SPA
Check out this baby commit as I migrate an app:
• Still SPA, no JS server needed
• Old <Routes> still work, you don't have to change app code to get started
• Don't need gross file routes, use config
• Totally incremental!
Now
12
9
224
2
1
20
This is crazy. I've worked on some cool closed-source stuff in my career, but OSS at *this* scale is still sometimes hard to comprehend. Super humbling.
Kudos to
@mjackson
and
@ryanflorence
for such an awesome lib, and for trusting me to help with it!
Got it!
So crazy. You all rock 🤘
Building React Router has been one of the most rewarding experiences of my career. Open source is so cool.
Onward to 2 billion!
6
8
101
0
2
21
Awesome time this week at
#RemixConf
, great talks + met so many amazing community members who are all just so psyched about the future of the web.
Capped it off with an awesome (read "exhausting") mountain bike ride up into the canyon. This sure ain't eastern PA biking 🥵
1
2
20
2
0
20
I shamelessly stole this from
@SpotifyEng
while I was at URBN!
We shamelessly stole this idea from
@brophdawg11
, who works on our team. So I guess it wasn’t really stealing.
0
0
18
3
0
20
"Boring major upgrade" 😍
📣 Remix v2 pre-release is out!
Let's see if our strategy worked! If you're up-to-date on all future flags, this should be the most boring major upgrade you've ever had.
10
68
379
2
1
19
Make major upgrades boring again
3
0
3
2
2
19
Remote work is great for many reasons
…but you simply cannot replicate the excitement/innovation you can get from a few days IRL.
I always come away from these Shopify “Bursts” so energized and excited about the future. Such a good pattern for this new world of hybrid work.
I'm excited to be en route to NYC to meet up with the Remix team!
2
0
23
2
0
18
So pumped to see this finally reach stable! So many great minds worked together on these APIs. I can't wait to see how much they help folks provide better UX, all while simplifying app logic, shrinking JS bundles, and getting a pretty awesome DX in the process. Happy coding!
🚀 React Router 6.4 is here!
When you realize <a> and <form> are the same, your router gets very powerful.
- Data loading/mutations/revalidation
- Error/interruption/race condition handling
- Pending/Skeleton UI w/ <Suspense>
48
192
739
3
1
17
1 month in, still going strong 💪
Sundays are for resting. And football.
(Posting mostly to keep myself accountable)
I’m 1 week into
@benbruno1
’s weight training program and digging it so far. I’ve always hated going to a public/crowded gym - turns out I enjoy a simple garage home gym much more (adjustable bench + adjustable dumbbells)
1
0
7
1
0
18
I'm optimistic about these new fetcher APIs we're building
Look at this thing on 3G throttling!
I'm more proud of Remix's `useFetcher` than anything I've ever built, and proud of a great team that cleaned up my initial implementation of it.
1. On drop, kick off a fetcher w/ the card, column, order in the form body
2. When rendering,
21
29
414
1
0
16
Really great article by
@jefgodesky
on Progressive Enhancement and how it's about *far* more than "users who disable JS." Really awesome visualizations around what it really means when we hear "oh but JS only fails to load a small % of the time"
3
4
17
@matfrana
@cassidoo
@tannerlinsley
@seldo
@mjackson
@acemarke
@kylemathews
@sophiebits
@DavidKPiano
> I know the Remix team would not agree on the need for SSG
Pre-rendering ("SSG") is coming now that client data and SPA Mode have landed - just need to land Single Fetch
2
0
19
This was super fun to dig into these past couple of weeks!
Remember - thoughtful animations - don't just go throwing wild animations all over your sites. They should improve the UX, not be a distraction.
Like to live life on the edge? Remix and React Router now have an experimental, declarative way to leverage the View Transition API
Checkout
@brophdawg11
's fork of
@astrodotbuild
's awesome Astro Records demo 👉
Learn more here 👉
3
10
63
3
0
16
@acdlite
I feel like I noticed cognitive "endurance" drop around ~35. Used to be no problem to code at work all day and then code personal stuff in the evenings. More and more I'm wiped in the evening hours.
3
0
15
Who doesn't like a little
@remix_run
in their stocking this time of year? 🎅
(Yes,
@ryanflorence
should have worn a Santa hat)
Join us for the 12 days of Trellix 🎁
From now until Christmas we'll release a daily Remix Single, each based on Trellix, a Trello clone with some advanced UX. We're covering topics like User Auth, Pending & Optimistic UI, Drag & Drop, and much more! 🧵
16
74
496
1
1
16
Re-posting this 🧵 again - absolutely worth a watch.
Even if you don't use Remix - Ryan's level of detail/thought for UX never ceases to impress me so I always learn of UX patterns and edge cases I should be considering
Join us for the 12 days of Trellix 🎁
From now until Christmas we'll release a daily Remix Single, each based on Trellix, a Trello clone with some advanced UX. We're covering topics like User Auth, Pending & Optimistic UI, Drag & Drop, and much more! 🧵
16
74
496
0
2
16
🫤 I just started a markdown file with:
- Definitions
- MPA:
- SPA:
- SSR:
- SSG:
- Soft Navigation:
- Document Navigation:
- Pre-render:
4
0
15
Met my wife (+ her 🐕🦺) in 2015
First date 2015
Moved in together 2017
Engaged in 2019
2nd 🐕🦺 2019
Backyard COVID wedding 2020
Postponed wedding celebration 2021
Buying our first 🏡 - 2024 🤞
0
0
16
If anyone's interested in beta testing next week - many months worth of work went into this one and we'd love any help ensuring it's as stable as it can be!
Just shipped: 1.10.0-pre.5 🚢
Normally we wouldn't talk much about a pre-release, but we think this one deserves some attention.
A little gift for you this holiday season 🎁
5
16
182
0
1
14
File-based until it's not suiting your needs. Then config-based
🌶️ version:
File-based until you get the urge to tweet that file-based routing sucks, then switch to config-based instead of tweeting
4
0
15
Interested in learning Remix?
I'm giving a full-day Remix Fundamentals workshop at
@connect_js
in Atlanta in October! Use the code SEEMESPEAK to get a $50 discount and come learn Remix (and the Web) with me and see other great speakers present!
0
6
13
💯 This is why I strongly prefer "fetch then render" instead of "render then fetch"
You need to stop lying to your users 🤥
They don't like it very much and you can do better! 💪
6
17
122
0
1
13
JS devs! Live in/near Philly? Interested in
@remix_run
💿? Head down to this meetup next week to hear
@TedisAgolli
talk about "Remixing the Web"!
1
3
9
The latest react-router 6.4.0-pre.9 prerelease now supports deferred responses to let you separate critical and lazy data for your routes!
If you're all like "what's a deferred?", check out minute 20 of Ryan's talk at Reactathon
0
4
14
This is the way. Happened in my 30s as well and at this point my socks, tee shirts, hoodies, polos, jeans, khakis, and lounge pants are almost all identical items in different colors.
as a man enters his 30s, he develops an appreciation for standardization. for example, five years ago, i threw out all my mismatched socks and bought 30 pairs of the exact same socks in the exact same color. when i find jeans i like the fit of, i buy a few identical pairs. last
245
903
13K
3
0
13
@aryan__deora
@remix_run
Awesome work! Just in case you haven't seen this yet - there's another community package out there doing similar stuff:
1
0
13
@acemarke
Sentry bundle size has bit me in the past. Had some success manually wiring up error listeners that lazily import sentry only upon the first encountered error, and then fire off the error through their imperative APIs. Then sentry can take over for errors 2+
2
0
13
Just like last year, so cool to see how many of these talks are covering the Web platform instead of being highly targeted to Remix APIs.
Also cool - now that React Router has all the Remix data APIs - most of these talks will be relevant to your RR apps as well!
1
2
14
🔥 This is what we theorized would happen in practice. Remove your component code for fetching, loading spinners, error handling, revalidation, etc. and let RR handle that for you! At scale, the added RR size should be a fraction of what you get to delete.
0
1
14
For someone who isn't 100% "full remote is the way" it is so nice to be able to hit up the state park for a quick trail walk/run over a lunch break 🌲
0
0
14
Philly area devs - I'll be giving a talk on React Router and Remix next month at the monthly meetup. Come on by and check it out!
1
1
13
Just submitted talks on the framework-agnostic
@remix_run
router to the RVAJS and Connect Tech conferences this fall! 🤞🤞
#usetheplatform
@rvatechcouncil
@connect_js
2
0
13
npx upgrade-remix 2.4.0
Client Data in
@remix_run
is so close! If anyone wants to do any last minute beta testing, you can try it out in the 2.4.0 prerelease:
> npx upgrade-remix pre
1
7
46
0
0
13
Well said. This basically defines 75% of dev twitter lately 😕
1
0
12
Remix + E-Commerce = 😍
We've been hinting at it, and now it's time ...
... to mix things up! Can you guess what’s coming?!
🎉 We are adopting new foundations based on
@remix_run
! 🎉
We’re excited, and we hope you are too! Read all about our plans ↓
#FrontEndDeveloper
#remix
1
5
9
1
1
12
SLC 🛫🛬 PHL
Headed home from another successful
#RemixConf
. Love seeing the awesome stuff folks are doing with
@remix_run
in the wild!
Related - red eye flights are the worst.
1
0
12
Tired of Sentry eating up space in your critical path JS bundles? You can try waiting for the first error to occur _before_ loading Sentry with some manual error capturing. Likely not appropriate if you use Sentry for Web Vitals though 😞. Vue example:
2
0
12
Why bother writing code when I could spend just as much time finding bugs in AI-written code?
2
0
12
Almost time to shut the 💻 and go play about 80-100 holes of ⛳️ starting this weekend. I'm going to have the back of a 90-yr old when this is all done 😂
3
0
12
@jpschroeder
This is the sole reason I've used twitter as much as I have in the past 5+ years. I felt like nothing else came close to keeping me up to date on the newest stuff
2
0
12
Big shout out to
@prpatel
and
@vincentmayers
for putting on a great
#connecttech
conf! Honored to give my first non-lightning talk on the new framework-agnostic Remix Router. Met and chatted with a ton of great folks as well!
1
0
11
@dadamssg
@remix_run
@tannerlinsley
This is great feeedback, thanks for writing it up! I think we have open proposals for some of these already - definitely go give them an upvote if you haven't already. Specifically: submitting non-FormData as well as a call-site fetcher revalidation option.
1
0
11
Took my first golf lesson yesterday. Had maybe the best range session of my life today. Why didn't I do this 15 years ago? 🤦🏻♂️
5
0
11
@jessegavin
Remix *is* incredible (that's why I joined!) and I'm also a huge fan of Vue. The data loading/mutation abstractions are just too good to keep isolated to one UI library, so I do plan on getting something published for Vue soon. It's just for SPA apps for now though - no SSR
0
0
8
1
0
11