Ryan Toronto
@ryantotweets
Followers
3,456
Following
746
Media
168
Statuses
1,713
Explore trending content on Musk Viewer
QSMP
• 103025 Tweets
Memorial Day
• 91376 Tweets
#تتويج_الهلال
• 89638 Tweets
سلمان
• 81603 Tweets
Coutinho
• 47725 Tweets
Neto
• 42514 Tweets
THE WAY I LOVED YOU
• 42509 Tweets
Militão
• 35029 Tweets
Accidentally
• 34234 Tweets
Gove
• 33932 Tweets
Karoline
• 33023 Tweets
SUPERNOVA STEPS ON THE CHARTS
• 27348 Tweets
GLAY
• 27201 Tweets
$CAT
• 16898 Tweets
Nicolle
• 11472 Tweets
FRESH OUT THE SLAMMER
• 10753 Tweets
Tigre
• 10055 Tweets
I updated
@_buildui
's user search to use React Server Components with Next 13's appDir.
The code for this was so simple.
25
46
711
URLPattern is pretty dope. I love how this just works...
10
49
581
Fun little RSC experiment today...
Passing a pending db query into a client component. Kinda mind blowing you can pass promises over the network like this 😉
24
39
561
Here's a little component I use in all my RSC apps.
It refreshes all the data fetched in a React Server Component whenever the window gets refocused.
7
18
248
Using mjml + React to code emails is amazing.
Since your emails are React components you can render them anywhere in your app. Here's a little preview tool that shows me emails for recent purchases.
7
21
232
The first part of my tutorial on pagination w/ RSC has been published!
It still blows my mind you can read query params, use Prisma, and render Next's <Link> tag in a single component.
6
26
230
SSR + Suspense + Streaming!
I got SSR added to my RSC implementation and one of the coolest things is streaming just works.
Here's HTML being streamed down to the browser as the suspense boundaries resolve. Amazing that React gives you the APIs needed to build this:
7
19
188
Pagination w/ RSC + query params + Next's <Link> component.
Feels snappy fast, and the back button works out of the box.
8
6
166
Stole this idea from Remix: An <Await> component that suspends for a promise.
The nice thing about this is it lets me try out different loading UIs before extracting and naming a new component, defining its props, and declaring its types.
9
13
135
Here's the submit button I am using with my React Server Actions.
It uses `useFormStatus()`, a new experimental hook from React, to control the loading spinner.
This is how it works…
6
7
127
Just published a Build UI recipe for this <Await> component. Absolutely love using this!
Stole this idea from Remix: An <Await> component that suspends for a promise.
The nice thing about this is it lets me try out different loading UIs before extracting and naming a new component, defining its props, and declaring its types.
9
13
135
6
14
127
Next, the server component reads the query param, performs a search, and re-renders the list of users.
All this happens server-side:
12
6
122
Here's the search component. It's a client side input that starts a transition via the onChange event.
The transition adds the search term as a query param and then pushes the browser to that url:
6
4
115
Having a lot of fun with useFormState + server actions.
It's like a useReducer() where the state lives on the client and the action lives on the server.
3
10
109
I'm loving RSC. Makes writing a React app feel like something you'd see in PHP or Rails, but you also get the benefit of the world's best templating language 😉
6
7
102
What I find so cool about this approach:
- 50ish lines of code
- Fully interruptible
- `isPending` to know when a search is running
- No state, effects, or XHR requests
- No race conditions
- Sharable URL by default
4
2
99
Well look at that, server actions!
This is from and RSC implementation I've been working on. It feels like react is going to abstract away the whole client-server boundary over the next few years.
5
5
89
@adamwathan
I tried a whole bunch of markdown editors last month and ended up going with .
It was the easiest of all the editors to add custom behavior/config.
5
2
88
👀 Mirage.js in action with React and Jest!
Here's a little test to ensure the TodoApp on fetches its data from the server.
Also, I'm really digging react-testing-library
@kentcdodds
! Had a blast writing my first few tests with it today. 🤛
6
15
77
🧑🍳 Cooking up a little form made specifically for server actions.
Built-in validation, error handling, success messaging, and type safety – all derived from server side code.
5
5
88
I used
@gatsbyjs
this weekend for a new landing page. Really liked it!
* The on-boarding is fantastic, I never felt slowed down. I was able to ship to production the day I started.
* Neat how everything is queryable with graphql.
* The official plugins are a nice touch.
1
7
75
Here's a list of Ember addons I find myself almost always installing when I start a new Ember app...
What am I missing? What's on your list?
12
12
66
If you think css is hard then let me introduce you to email css.
4
9
61
I did a teardown for the
#emberjs
home page. The goal of this is to help us understand who the home page is for and how to communicate that. I'm excited to keep pushing these ideas forward!
4
22
58
🔥 We've been using these
#emberjs
provider components as a way to decouple business logic from presentational logic.
The provider is responsible for business logic.
The ui-form is responsible for display logic.
7
11
54
With RSC what's the best approach to infinite scroll?
Server actions, client side data fetching, or something else?
10
0
55
My course on "Data fetching with React Server Components" is now complete!
Over the past six months I've had an absolute blast building Next.js applications with Server Components. It's some of the most fun I've had using React in recent years.
3
7
57
🔥 The best kept secret in Ember its discussion board!
Post on discuss if you ever need an answer to something Ember related.
The answers are high quality and there's a good chance a core team member with deep understanding of your question answers it.
0
19
50
Live reload and module refreshing working w/ RSC implementation.
When an RSC is edited it re-renders on the server.
When a client component is edited only that module is refreshed on the client.
Pretty happy with this!
1
4
54
I'm loving
#tailwindui
, everything about it makes my app look professional!
Not just the components, but the new colors, recommended Inter font, and form controls are so freakin good.
2
2
49
Ember's element modifiers are so 🔥🔥🔥!
Small thing I just added our EmberConf training next week...
Whenever {{stock.price}} changes the span highlights yellow for a second.
2
7
48
My latest package lets you upload files from Next.js directly to S3!
Repo and instructions:
2
4
43
Just spent a few minutes playing around with tracked and Glimmer components in a new
#emberjs
app. This stuff is so cool!
1. State declared at top of file
2. Feels like JS (classes, class properties, getters, setters)
3. Getters only recompute when their dependents change 😍
3
8
37
👀 Coming soon:
@miragejs
working in
@reactnative
I gotta say, using Mirage to mock out data for an iOS app is surprisingly fun.
2
6
42
Element modifiers in
#emberjs
are super fun to write.
They're a joy to use because...
1. There's no extra wrapping or ceremony to get them wired to HTML elements.
2. They get you working with the HTMLElement right away. No special abstractions.
3
12
39
Hey! We're looking for someone to join us at
@ember_map
to make
#emberjs
videos.
This is a paid part-time gig, DM for more info!
3
24
36
I've been re-styling ember-cli/QUnit testing CSS to make the app container larger. Anyone else doing this?
#emberjs
5
5
36
I've been doing a bit of fastboot work lately, and I've found this `renderingContext` macro to be extremely helpful!
I've been removing "if (this.get('fastboot.isFastBoot')) {" from the codebase like it's my job! ✂️
4
8
34
(1) My biggest takeaway was how quickly Remix got me from a <form> to a database. I didn’t have to wire up a form library or write any onSubmit handlers that fire off data requests. Once I submitted my form the very next lines of code are talking to a database.
1
1
32
Here's the <Await> component that passes the result of the promise to children (which is a render prop).
1
1
32
Upgraded another ember app tonight and I cannot believe how enjoyable it was with ember-cli-update.
1
4
24
Terminal based progress bar made with javascript!
All possible with the "\x1B[0G" control sequence.
Here's how it works...
1
3
27
I ran into an issue writing an
#emberjs
test for a loading state. Originally, I was using mirage’s server timing, but this felt brittle and opened the door to race conditions.
I learned that mirage can return promises, giving the test full control over when the server responds.
6
7
27
I'm finding that search components are the best introduction to container components. Instead of providing structure or HTML, these container components only yield out building blocks for consumers.
1
2
24
In case you missed it, we're bringing Mirage.js to the wider js ecosystem! 🚀
Sign up here to follow our progress. We'll be sending out React examples, docs, and learning materials in the next month or so!
1
11
26
Just added comments to my app using
@AWSAmplify
's API auth rules.
Easy and declarative, couldn’t ask for anything more when writing authorization code.
0
8
27
Ember 3.4 is here. Angle bracket invocation and component managers!
0
8
27
💿I spent the weekend building a Remix app and sure had fun.
Here's what I learned and loved about it…
2
0
25
I wanted a bit more insight into our
#emberjs
FastBoot workers, so I made this UI that exposes some helpful stats for each process.
5
4
25
All powered by this library:
1
1
28
When adding features to an
#emberjs
app, we code the entire UI first using mirage, before adding a single line of backend code. 1/
2
9
24
🎉 Just two more days left for Build UI's early-bird pricing!
Grab a 40% discount as our way of saying thanks for supporting our first four courses 🤜🤛
2
5
27
Did you know that you can generate in-app proxies with Ember CLI?
Useful when you need a proxy to always be running!
0
3
21
This code I'm working on today reminds me how much I enjoy
#emberjs
templating. All JS frameworks push this idea of declarative rendering, but I don't think you can get more declarative than this snippet:
2
5
23
🔥 Need to compare how your UI behaves across two different branches?
🌴 Use git worktree to checkout the other branch. Now you can have both branches running at the same time!
2
8
25
If you wanted to show someone the power of
#emberjs
in 15m what would you show them? I don't think "app from scratch" is good here because Ember's strength is maintainability in 1-2yrs, not "hello world" in 15m. Folks w/ ember experience, I want to know what you would show off.
18
9
22
Last week I added authentication to a React app using
@AWSAmplify
This was hands down the fastest I've ever built anything auth related in a SPA. What use to take me days took minutes!
Video here:
0
7
24
Using a Hasura computed field + Postgres function to know if a
@_buildui
subscription is active.
Fun and frightening setting this up:
1
3
24
I love software that delights, when it goes above and beyond when you don't expect it.
Today's delight: Running
@Cypress_io
in headless mode records a video of the test run's UI so you can see everything that happened.
2
3
21
I've been doing a bit of React lately and I gotta say I'm really grateful for all the things that Ember has taught me over the years.
It's nice to recognize patterns and see how to apply ideas like routing, services, and pre-wired components when working with a new SPA.
1
1
22
(10) That’s it! Here’s how I would have pitched Remix to myself last week:
"Ever feel like you had to give up server rendered architectures from Rails and PHP once you started writing React? Remix brings those architectures back to your React apps"
1
2
21
Integration is one of the trickiest parts of building web applications these days. Not because it's hard, but because it's where the unknown unknowns are discovered.
3
8
23
I just installed qunit-console-grouper by
@TobiasBieniek
for an
#emberjs
app I'm upgrading, it's amazing!
Super useful for tracking down deprecations and warnings.
0
6
24
I just learned about the `passwordrules` attribute on <input type=password>.
It's a way to signal your requirements to password managers that auto generate pw info.
0
5
21
It's experimental (), but I'm using the polyfill for the environments that don't natively support it.
1
1
23
Next.js and MDX are an absolute joy to work with.
Made this little remark plugin tonight that renders all markdown images using Next's <Image> component.
Oh, it automatically finds the image height and width too!
3
0
22
@samselikoff
Backend team built a find-single-record endpoint for the frontend, but the frontend team was relying on a find-all-and-filter endpoint. Worst part about this was the “backend team” and “frontend team” were the same person. Wait, it gets worse… that person was me.
2
3
22
I learned something new about Suspense and transitions: Suspense boundaries don’t re-show their fallbacks when transitioning if the key is the same.
(1) Suspense boundaries have keys (even if not specified by the developer).
(2) When transitioning to a new state, if the
3
5
22
Ember Data + JSON:API won’t serialize has many relationships when saving a record.
You can opt into has many relationship saving with this code, but there’s a good reason why Ember Data does not turn this on by default… 1/
1
2
18
package.json using json is wrong, it's too strict of a format for listing application's dependencies. I often want to leave comments to explain why a dependency/version is in the application, but cant.
3
0
17
The fewer arguments a component takes the easier it will be to refactor in six months from now.
2
4
20
Last time I worked on a node codebase testing involved a ton of callbacks. I've been getting back into node this week, and wow, async/await makes mocha+chai really fun!
This code is as readable as rspec! Love it.
1
1
20
Here's the server action. It takes FormData and makes sure the name is "alice":
Next up is the <FormWithState> component, it calls useFormState and uses the action result to update its state. It uses that state to display the form's status.
It's neat that useFormState has the
1
3
20
To solve this I wrote a `useMinPendingTime()` hook.
It watches useFormStatus and makes sure the pending state is shown for at least 1500ms.
2
0
20
This week I'm adding better support for GraphQL to ember-cli-fastboot-testing.
Here's a FastBoot test that uses GraphQL!
0
2
16
This is super exciting, Ember.js is doing a "Call for blog posts" to help define the roadmap for the rest of 2018.
#EmberJS2018
1
7
18
This is the first video in my memory leak series... I've learned a ton in the past few months diving into these profiler tools. Excited to make more of this content!
Is your Ember app leaking memory? Find out in Ep. 1 of "Memory leaks" –
0
5
21
1
4
16
Cool
#emberjs
addon I just discovered: ember-bind-helper.
It works just like the action helper, but sets the context to the parent object instead of the calling template.
Super useful for actions that live elsewhere, like on services.
4
2
18
This is a great blog post that shows so many of the cool things you can build with these tools.
0
1
17
Redux users are slowly inventing something that resembles ember-data. Not saying this to snarky or negative, I think it's super interesting.
3
1
15
ESLint plugins are a great way to enforce architecture decisions within in app.
I just removed 37 async relationships from an app in about five minutes using:
Pretty good feeling knowing that my test suite wouldn't have passed had I forgot one.
2
2
17
Been exploring how to best use GraphQL+Hasura+TypeScript. Found TypedDocumentNode (w/ graphql-codegen) to auto generate types.
I'm digging it so far!
3
2
15
Can anyone recommend a cloud database that's usable from client driven JS code.
I'm thinking something along the lines of firebase... what do you recommend!?
18
0
14
I find myself using contextual components all the time these days. One of my favorite features of
#emberjs
1
4
13
I've been using monorepos by default for every library I work on these days and I gotta say it's been working out better than expected.
I start off with something like this:
- packages/library
- packages/docs
- packages/test-app
No more npm linking or webpack aliases. Love it.
1
0
14
This makes the form submission crystal clear!
Here's the final button with a gist containing all of the code used to create this demo:
2
1
16
One thing about data fetching on the server is it feels like you "lose" the ability to do event driven data fetching.
However, with Next’s `router.refresh()` you can trigger a server side rerender, whenever you want, that refetches all your data.
1
0
17
Optimized the
@ember_map
recording setup today. Got the ring light off the tripod and instead mounted to an arm on the desk. Also added a remote control pan & tilt device under the camera!
1
0
14