Staff Software Engineer @helpscout. Writing about frontend architecture at frontendatscale.com. Terrible at tennis. 🇦🇷 🇺🇸
Los Angeles, California
- Tweets 2,906
- Following 1,013
- Followers 4,506
- Likes 11,697
Pinned Tweet
📣 Announcing Frontend at Scale 🎊
You know how I'm always rambling about complexity, abstractions, design patterns, and other things that make you yawn? Well, now you can get all of that right in your email!
It'll be fun, I promise. Subscribe here 👇
frontendatscale.com?foo=bar
13
26
186
35,966
A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning.
With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨
32
318
2,681
351,250
Experimenting with 🚀 @astrodotbuild and the Shared Element Transition API.
It might *look* like an SPA, but it's a server-side rendered MPA with near-zero JavaScript ⚡️
Blog post coming soon to a theater near you!
46
265
2,457
First look at @nextjs' experimental View Transitions support ✨
Powered by Next 15.2 and unstable_ViewTransition
17
46
1,103
83,827
The View Transitions API now supports MPAs (Multi-page applications) and it's truly mind-blowing.
This is a server-side rendered @astrodotbuild website where every interaction is a full-page load. There is _zero_ JavaScript on this site ✨
18
105
737
Here's the demo @BenDMyers and I put together using @astrodotbuild and the Shared Element Transition API ✨
Unlike my previous demo, this one handles network latency by transitioning to a `<template>` right away, and then replacing it with the real content when it comes in.
18
96
760
New @astrodotbuild + View Transitions demo ✨
This time using React Three Fiber to render an animated 3D model that persists across page-navigations.
12
63
650
125,851
I'm writing a short article exploring how @astrodotbuild SPAs could look like in the future with ✨Persistent Islands✨
This is the demo we built on stream with @jlengstorf last week. We started with an Astro MPA and then added some JS+CSS to make it feel more like a native app.
17
53
537
I love the transitions and animations in this concept design by @paperpillar 🤩
If you're looking to build a View Transitions demo (or an actual product!), this is the perfect inspiration.
4
48
524
96,943
📣 It's finally here! 🎊
My FREE frontend architecture course is now LIVE ✨
Whether you're an aspiring architect or tech lead, or just want to know how to build better frontends that last longer, this is the course for you.
Want to check it out? You know where to find it ⬇️
13
113
515
54,884
I've updated my @astrodotbuild music player demo to Astro 2.10 which includes built-in View Transitions and Persistent Islands support✨
Navigation feels much snappier, and it ships less than half of client-side JS compared to the Turbolinks version—down to 10kb from 24kb⚡️
14
43
447
103,773
I'm thinking about building this UI on stream using @astrodotbuild's freshly released v3.0 🚀
Anyone interested in watching me struggle with View Transitions for an hour or two? :)
I love the transitions and animations in this concept design by @paperpillar 🤩
If you're looking to build a View Transitions demo (or an actual product!), this is the perfect inspiration.
17
10
202
20,856
Here are my notes (and live demo) on my experiments with @astrodotbuild MPAs and the Shared Element Transition API 🚀
Did it take me too long to write this? Yes. Was it because I was wasting time making animations I ended up *not* using? Also yes.
(Links on the next tweet)
3
24
170
If you're thinking about starting a dev blog, @astrodotbuild is the perfect tool for the job: out-of-the-box markdown support, SSG with partial hydration (zero JS), *and* you can use whatever framework you fancy.
My Astro blog template is open-source if you need a head-start 👇
6
18
166
📣 Announcing Fundamentals of Frontend Architecture 🎊
Learn how to build frontend applications at scale using the fundamentals of software design.
It's a self-paced workshop.
It's interactive.
It's coming soon.
And it's FREE!
Click through to learn more and subscribe ✨
3
23
155
14,041
I've been doing a very poor job of updating you all on my upcoming Frontend Architecture course—but I'm happy to share one now:
The course is 100% done and it goes live this Thursday, September 19th! 🎉
And as a reminder, it's entirely FREE 😊
Subscribe on the next tweet:
8
17
140
15,149
Cross-Document View Transitions are now enabled in the latest version of Chrome by default 🚀
This means that you can add beautiful page transitions to your websites with _zero_ JavaScript!
Check out the pure MPA version of my @astrodotbuild Movies Demo 👇
3
13
141
9,011
Super excited about this upcoming blogpost 🤩
I'm using @rive_app to make my diagrams and code examples interactive and I'm really happy with how it's coming along!
3
11
129
25,221
The real goal is Negative JS—your website should delete arbitrary JavaScript from sites running on different tabs.
Follow me for more web performance tips.
3
8
116
10,506
Huge thanks to everyone who joined the stream earlier today! It was a ton of fun 😊
Here's the demo we worked on. We covered some cool features like:
- Morphing elements with different aspect ratios
- Delaying animations in sequence
- Adjusting the z-index of VT pseudo-elements
5
15
116
23,820
Yes! github.com/Charca/view-trans…
You can play with the demo here as well live-transitions.netlify.app… (need to use latest Chrome)
1
108
5,429
That's right, here's where you find it!
frontendatscale.com/courses/…
4
15
103
3,504
If you're curious about how this demo came to be, I just uploaded the recording of yesterday's stream where we went over the basics piped.video/oIE8ugxk01I
I plan to do a proper tutorial soon, so stay tuned!
New @astrodotbuild + View Transitions demo ✨
This time using React Three Fiber to render an animated 3D model that persists across page-navigations.
2
10
96
21,119
This took me forever, but here it is. The Ultimate Guide to @astrodotbuild 🚀 A full roadmap with every technology you need to know to start building with Astro 👇
1/ HTML
6
15
90
I finally got my copy of Building Large Scale web apps by @addyosmani and @djirdehh 🤩
I’m absolutely loving the book so far. I’m only a couple of chapters in, but I can already tell this is going to be one of my favorite reads of the year.
Full review coming soon!
6
11
92
11,942
I've just updated my @astrodotbuild blog template to Astro 4.0 🚀 Check out that gorgeous Dev Toolbar!
6
8
84
13,096
📝 Just published a new blog post!
A short experiment on how the depth of a DOM tree affects rendering performance.
✨ Check it out:
frontendatscale.com/blog/how…
5
20
83
12,035
1. Fix button padding
2. Update landing page copy
3. Duplicate the entire application and rebuild it in Rust
4. Fix typo
3
77
2,845
I'm working on a couple of demos for my next blog post: a Stable Diffusion client and an AI background removal app.
Both built with @astrodotbuild and @replicatehq 🚀
Source code and write-up coming soon!
ALT A screenshot of a web client for the stable diffusion model, showing an AI-generated image of an astronaut riding a horse on Mars.
ALT A screenshot of a web app that removes photo backgrounds using an AI model, showing a photo of a father holding a baby on his shoulders.
2
3
75
11,030
📝 New Blog Post! An Interactive Guide to Composition with React Server Components, explained using... donuts? That can't be right.
Or maybe it can! Check out the article to find out 🍩
frontendatscale.com/blog/don…
ALT Cover of the "Delicious Donut Components" blog post on the Frontend at Scale blog
6
18
76
13,860
I need JS in two places:
1) the call to document.createDocumentTransition() to handle the animations, and
2) since the API doesn't support MPAs at the moment, I need to intercept route changes with navigation.addEventListener('navigate') to handle DOM updates
Simplified code:
2
4
73
First blog post of 2023! Give your apps AI superpowers with just two REST API endpoints.
The demos are powered by @astrodotbuild and @replicatehq 🚀, and the code is open-source.
Read it before the bots take over 👉🏽 maxiferreira.com/blog/ai-via…
2
5
70
9,052
🏝️ New blog post! Are you component islands feeling a bit lonely? Get them to talk to each other with these ~four strategies ✨
frontendatscale.com/blog/isl…
3
11
60
11,658
Would anyone be interested in an open-source version of the course platform I built for the fundamentals course?
I got a few compliments on it (you're all too kind!) and while the platform is pretty basic, I think it could be a good starting point for your next course 😁
ALT Screenshot of the Fundamentals of Frontend Architecture course
10
2
61
2,849
Incredibly exciting to see some of my Astro + View Transitions demos in the latest @ChromiumDev blog post 🤩
This is a fantastic read on the journey from early experiments behind a feature flag, all the way to stable support in Astro 3.0 today 🎊
View Transitions bring seamless transition animations to the browser. Chrome is excited to see official support in Astro 3.0: developer.chrome.com/blog/as… ~ learn about the journey there!
3
5
59
28,059
Guess who was up until 2am last night because he thought building a custom course platform would only take a couple hours
8
55
3,108
✍️ Coming soon to the blog—designing a fully featured docs site with @astrodotbuild and Starlight.
• Built-in search, i18n and MDX support
• Auth w/ @lucia_auth
• File-based CMS w/ @tinacms
Keep an eye on the newsletter for the full write-up 👉🏽 frontendatscale.com/
ALT Design diagram of a docs site built with Astro and Starlight. Shows how content can be edited using Tina CMS, how Astro and Starlight can provide hybrid output (using Static Site Generation and Server Side Rendering), and how interactive components on static pages can request authenticated data that is powered by Lucia Auth.
3
7
54
4,858
Issue 50 (fifty!) of Frontend at Scale is out today!
This week we have a brief essay on the rise of sync engines (feat. @tan_stack DB and @ElectricSQL), a new code showdown, and, as usual, a bunch of great links to last you the whole week.
Check it out you know where 👇
2
8
56
9,898
Best of all, Astro makes it *super easy* to implement View Transitions on your site! This demo went from traditional website to native app in only a few lines of code.
Check it out here 👉🏽 astro-spa.netlify.app/
Source code: github.com/Charca/astro-reco…
1
4
53
2,025
Like previous demos, this is an @astrodotbuild site using the Navigation API as a client-side router. On non-Chrome browsers it works as a regular MPA. Demo and source 👉🏽 live-transitions.netlify.app…
Big thanks to @jaffathecake for the tip on how to do the smooth video transition.
2
2
51
5,889
I've upgraded my @astrodotbuild blog template to Astro v1.0 🚀✨
Now with MDX support, and featuring a very satisfying 100 PSI Performance Score on Mobile ⚡️
2
3
44
🚀 New podcast alert! 🚨
@addyosmani joined me on the very first episode of Frontend FM to chat about his journey in tech, the impact of AI on software development, leadership, productivity, and much more.
👇 Links to all the places where you can listen below
4
7
45
6,128
Frontend at Scale has a shiny and orange new website ✨🍊
Built with @astrodotbuild and Tailwind—It's not open-source yet, but if you'd like to use it as a template for your own blogs or newsletters, let me know!
Link on the next tweet ⤵️
9
4
44
4,158
Hey frontend friends 👋
If "read more" is one of your New Year's resolutions and you're looking for your next great book, I have just the thing for you!
Here are 10 *fantastic* books to level up your software design and architecture skills as a frontend engineer next year 👇
ALT My Top 10 Recommended Books for Frontend Engineers: - My Software Design Pick: A Philosophy of Software Design by John Ousterhout - My Design Patterns Pick: Learning JavaScript Design Patterns by Addy Osmani - My Software Architecture Pick: Fundamentals of Software Architecture by Mark Richards and Neal Ford - My “Classics” Pick: The Pragmatic Programmer by Andrew Hunt and David Thomas - My Web Performance Pick: Responsible JavaScript by Jeremy Wagner - My Functional Programming Pick: Grokkking Simplicity by Eric Normand - My System Design Pick: Web Scalability for Startup Engineers by Artur Ejsmont - My Frontend Architecture Pick: Building Micro-Frontends by Luca Mezzalira - My Programming Pick: The Rules of Programming by Chris Zimmerman - My “New Book” Pick: Tidy First? by Kent Beck
2
3
45
5,225
The @preactjs islands communicate through a couple of Preact Signals.
I wish I could say I did something really clever to make this work... but I can't. For this particular use case, everything Just Worked™
1
2
45
Feeling the JavaScript Fatigue? Stop trying to choose between Relay and Redux, and take some time to Relax 🌅
5
13
41
This is incredibly exciting! Adding View Transitions to your @astrodotbuild site is now 100% easier with the new built-in support 🪄
Go forth and experiment, and don't forget to share your feedback with the team!
Today we released Astro 2.9 which comes with *experimental* support for View transitions. View transitions is a new browser API that makes it easy to build smooth transitions when navigating pages.
8
39
27,324
Hi Jem, we know you didn’t apply for this role, but we wanted to let you know you wouldn’t have gotten it. Have a great week!
1
41
Check out the demo astro-3d-view-transitions.pa… and source code github.com/Charca/astro-3d-v…
1
43
2,601
I've seen some concerns about View Transitions "ruining" the web
I obviously don't agree with this, but it is true that we should be mindful of motion, speed, and accessibility when we work with animations
Material's motion guidelines are a great resource to learn about this 📚
ALT Screenshot of Material Design's Motion Choreography Guidelines
6
3
41
5,754
Some more Friday Night View Transitions fun ✨
I've been playing with the new experimental <ViewTransition> component in Next.js 15.2, recreating some of @bramus' amazing demos in React using this new API
Very exciting stuff. Check out the video for my unfiltered ramblings
2
2
40
2,958
Thanks for the suggestion! I'll split this into two PRs with only a quarter million lines of code each 😆
38
4,026
Experimenting with the View Transitions API for FLIP animations ✨
My Candy Crush clone was originally built using Svelte's animate:flip directive, but in this version the animations are 100% handled by VT 🍬
Each method has its pros and cons, I'll share a writeup about it soon
2
2
39
2,964
It was so cool to see one of my View Transitions demos in a #GoogleIO2023 presentation last week! Thank you @Una for sharing it 🙌🏽
There's an impressive amount of new web UI features this year, so make sure you check out the entire talk 👉🏽 piped.video/buChHSdsF9A
ALT Screenshot of "What's new in web UI" presentation at Google I/O 2023
1
3
36
5,332
By the time Devin was announced last week, my spidey-sense had already been triggered by a research paper titled "How Far Are We From Automating Front-End Engineering?"
So after spending most of last week ~panicking~, I mean, analyzing this research, I decided to write about it in the newsletter.
Frontend at Scale #18 is out today and it's all about AI, Devin, and the future of frontend development 🤖
frontendatscale.com/issues/1…
5
5
36
10,441
Blasting off into the weekend with this gorgeous new hat 🚀
ALT Selfie of a tired frontend developer wearing a beautiful hat with the Astro logo
3
2
35
2,066
I’m equally excited about all of the new additions to the bookshelf! Now, where do I start??
8
36
3,066
Is anyone using the C4 model for visualizing frontend architecture?
I'm a big fan of C4 and I'm using it to guide the upcoming workshop I'm building, but I'm struggling with the usage of the word Components in C4, which is different from what we typically refer to as Components in frontend development (i.e. UI components)
I feel like using a word like Modules instead of Components, but I'm not a big fan of inventing my own terminology here. What do you think? Good idea or bad idea?
8
2
33
6,776
Absolutely *love* Zed's edit prediction ✨
The way it combines predictions with autocomplete options from the language server is just wonderful. Congrats to the team on shipping such a cool and beautifully executed feature!
We engineered Zed to be instantly responsive, but what's faster than instant? Anticipating your next move.
Introducing edit prediction, powered by Zeta, our new open-source language model. 🚀
2
3
36
6,764
The SPA-like behavior comes from the Turbo library (prev. known as Turbolinks), but one day we might get this behavior out-of-the-box with Astro 🙂 Keep an eye out on this RFC! github.com/withastro/rfcs/di…
2
1
34
Source code: github.com/Charca/astro-view…
Based on the original Codrops experiment by @crnacura 🙏
33
Frontend at Scale #40 is out today!
It's about estimating software projects and why we're so terrible at it.
I estimate that you will check it out, but who knows, I might very well be wrong.
Link where the links go 👇
2
5
28
1,738
📅 Mark your calendars! This Friday @ 9:30am PDT I'll be chatting all things application design in Astro with the President of Whiteboards himself, @BHolmesDev 🚀
Come say hi! twitch.tv/charca
ALT Application Design in Astro with Ben Holmes and Maxi Ferreira. Friday Oct 27 at 9:30am PDT
4
5
30
8,165
Here's the link to the article maxiferreira.com/blog/astro-…
You can find links to the live demo and GitHub repo in there as well.
It's a bit of a long read, so I thought I'd share some of the most interesting bits here.
2
6
31
A freshly baked new edition of Frontend at Scale is on its way to you right now! 🍞
This week we have a first look at React's new ViewTransition component, a new episode of the Frontend FM podcast, @BHolmesDev live-coding a sync engine, and much more.
Find it you know where 👇
3
7
30
3,807
Just released: BootBot, a JavaScript Framework for building @messenger bots: github.com/Charca/bootbot
1
2
23
I've been working on this frontend architecture workshop (for like a million years now) that will include a bunch of templates for common deliverables such as design specs, ADRs, and so on.
This weekend I'll share a sneak peek in the newsletter, including the very first template: an architectural requirements doc! (I promise it's not as boring as it sounds)
This will be the first newsletter-exclusive ✨ resource, so make sure to subscribe if you want to check it out!
Link of next tweet because of the algo-rhythm 🎶
2
26
1,711
📝 A new issue of the Frontend at Scale newsletter is out!
Visualizing frontend architecture with the C4 Model—the Google Maps for your code.
Link on the next tweet to keep the bots happy 🤖
2
2
26
3,228
As much as I love React, I can’t help but to agree with this.
What are we gaining in exchange for the added complexity? A bit of a performance boost? It doesn’t seem like a good trade off to me.
Damn is frontend development getting overly complex. Hooks, server components, "tainted" references. I get a feeling that frameworks try to do everything at once instead of focusing on a single thing.
I've been using React for 7 years and the present makes me overwhelmed.
2
1
28
4,855
I learned about this pattern for managing shared state while reading The Rules of Programming, and I recorded a video about it.
It might be useful next time you run into a tricky race condition 🏁
2
2
27
3,326
Coming soon to the blog—My top 10 recommended reads for frontend engineers 📚
I would have published it by now but I'm having too much fun adding these tiny scroll-driven animations to it 😁
2
2
27
1,811
My first article on @ThePracticalDev!
📈 Generating user flow reports using the new @____lighthouse APIs and the ✨ @ChromeDevTools Recorder panel.
#DEVCommunity #WebPeformance
dev.to/charca/getting-starte…
1
5
24
It’s happening! 🎉
MPA support for the View Transitions API landed in Chrome Canary. Time to bring those MPAs to life with zero (or very little) JavaScript!
Excited for View Transitions? Here's the first demo of MPA support 🤩. Works *without* any JavaScript. With a little JS it's even fancier.
Big thanks to @jaffathecake for his work here!
1
1
25
I woke up to this very pleasant surprise this morning—Frontend at Scale just crossed 4k subscribers 🎉
Thanks to everyone who hasn't tired of my terrible jokes yet. I'm working on some exciting new things for the newsletter and I can't wait to share them with you all 🙌🏽
3
23
748
It's a new dawn
It's a new day
It's a new...sletter
For meeeee
And I'm feeling good🎺🎶
Frontend at Scale #38 is out today and it's all about one of my favorite topics—books 📚
2
2
23
682
We're going to try building this tomorrow at 9:30am Pacific Time 📅
This will be my first-ever stream, so things are guaranteed to go wrong :) It should be fun though! twitch.tv/charca
I'm thinking about building this UI on stream using @astrodotbuild's freshly released v3.0 🚀
Anyone interested in watching me struggle with View Transitions for an hour or two? :)
4
3
21
10,309
For folks looking for more View Transitions API content, check out @geoffrich_'s blog 👉🏽 geoffrich.net/posts/view-tra…
Geoff has some really cool Svelte demos updated with the latest version of the API.
2
3
24
1,515
I've been having a ton of fun building a "toy browser" from scratch with @BrowserBook!
If you're curious about the book, I've started sharing some implementation notes on my blog 👉 maxiferreira.com/blog/browse…
5
21
I'm doing a thing next week. Taking all things @sveltejs at BeerJS Córdoba 🍺🇦🇷
Anunciamos al primer speaker de la BeerJS N° 32: Maxi (Charca) Ferreira. En su charla nos explicará cómo funciona Svelte, cúales son sus ventajas principales, y cómo se compara con React y Vue. ¿Muchas ganas de venir? ¡Las inscripciones abren mañana!
3
2
19
This is the most comprehensive Astro View Transitions guide I've seen! Amazing job, @cpenned 👏🏽
A quick deep dive on Astro View Transitions (3.0 Release!)
piped.video/9T4N0cIlBUE
1
3
22
8,401
Is it a bird? Is it a plane? Is it Bun's new benchmarks?
No! It's Frontend at Scale #5 making its way to your mailboxes and it's all about web performance⚡️
frontendatscale.com/issues/5…
3
18
2,926
Imagine you have a list of users and you need to write some code to find the "account owner" in the list. Which of these two options do you write?
![Snippet of TypeScript code, reading:
/** Option 1 */
function findAccountOwner(users: User[]) {
return users.find(user => user.type === USER_TYPE.ACCOUNT_OWNER)
}
/** ------------------- */
/** Option 2 */
function findUsersByType(users: User[], type: USER_TYPE) {
return users.find(user => user.type === type)
}
function findAccountOwner(users: User[]) {
return findUsersByType(users, USER_TYPE.ACCOUNT_OWNER)
}](/pic/orig/media%2FF-GaLKnbcAAI-jm.jpg)
ALT Snippet of TypeScript code, reading: /** Option 1 */ function findAccountOwner(users: User[]) { return users.find(user => user.type === USER_TYPE.ACCOUNT_OWNER) } /** ------------------- */ /** Option 2 */ function findUsersByType(users: User[], type: USER_TYPE) { return users.find(user => user.type === type) } function findAccountOwner(users: User[]) { return findUsersByType(users, USER_TYPE.ACCOUNT_OWNER) }
19
20
12,509
The recording of this week's stream with @PaoloRicciuti is up on YouTube now!
We built some cool demos with @sveltejs SvelteKit and View Transitions using his amazing `sveltekit-view-transition` library ✨
piped.video/lBW1eP7OVhs
ALT Screenshot of View Transitions in SvelteKit stream
7
22
3,586
Anyone looking for a junior graphic designer? 🥰
ALT My daughter using a Wacom tablet much better than her dad
1
19
1,453
This would definitely be a great improvement! There's a discussion about controlling the behavior of off-screen elements here github.com/w3c/csswg-drafts/…
2
19
5,722
The last newsletter issue of 2023 is going out this weekend ✨
This one will be a bit different—I'll be sharing a behind-the-scenes look at some of the newsletter's metrics, as well as my plans for Frontend at Scale in 2024, including:
✅ A FREE Frontend Architecture Workshop
✅ An Open-Source Library of Software Design Resources for Frontend Engineers
✅ "Day in the life" Interviews with Senior+ Frontend Engineers
✅ More Blog Posts
✅ Weekly Newsletter Issues
...and much more!
I'm *really* excited about everything that's coming to Frontend at Scale in the new year, and I would love for you to join me—and help me choose what to focus on, 'cause it's a lot 😄 frontendatscale.com/
ALT Landing page of the Frontend at Scale newsletter https://frontendatscale.com/
5
19
3,145