๐ After two years of work, The Framework Field Guide is officially out! ๐
If you want to learn React, Angular, and Vue, this book is FREE and teaches all three at once.
Ready to start your journey? Link in next post:
Hot take ๐ถ๏ธ: DRY is generally a pretty bad design system for code.
The more you try to increase code reuse, the more abstractions you'll throw on the table, which makes it harder to follow design flow.
Keep things simple, only introduce abstractions when needed.
You can tell
@nextjs
/
@reactjs
Server Components (RSCs) to "Fully resolve on the server unless it takes longer than N seconds, then show a spinner on the client"
I managed to build an "offline-first" React app using
@tan_stack
Query.
It loads data once from server, lets you turn off data, do everything offline, & sync again when online.
It even has a manual diff for when server data updates when offline. 600 LOC
๐งต1/8 Ever wondered why you're not able to conditionally call hooks in
@reactjs
?
For example, this component early returns a `null` to avoid loading data into a `useState`. It's invalid React code.
Why? How do hooks work under-the-hood?
Let's dive into React's internals.
I was originally Dan's (jutanium in the screenshot) 'cofounder' of his company "Butter" as CTO earlier this year.
We met a year or two prior and had bonded over a shared love of documentation and experiences with mental health challenges (him with bipolar, myself with
.
@typescript
5 aims to:
- Implement ECMAScript decorators (!)
- Support .ts file name resolution
- Make huge changes to the TS source (faster TSC!)
- More
They plan on launching by March 2023.
I'm beyond excited to announce that I'm now a GitHub Star! ๐คฉ
For those unaware, the GitHub Stars program "offers impactful developers an opportunity to showcase their work, reach more people, and shape the future of GitHub." and has ~90 members of the program. ๐คฏ
It's honestly
Hey, you! Do you want to learn React, Angular, and Vue all at once? ๐ค
I'm working on a free book called "The Framework Field Guide" ๐ that teaches all three of them in-depth.
From component basics to advanced internal logic, it'll have it all! โจ
We just released a huge improvement to
@tan_stack
Form:
- No more form.Provider (you can delete it!)
- Arrays work as-expected (types too!)
This is now a functional (minus submit) form with an array in TanStack Form:
I'm excited to announce that
@tan_stack
Form is in the Release Candidate stage!
This means that we don't intend to break _any_ of our APIs going forward unless things go really sideways.
We encourage people to try it out in their production codebase and help us find bugs!
It's live!
In this article I explain how reactivity in
@angular
works through Zone.js. It's so in depth that it sites the Angular source code 17 times!!
Would you look at that?!
@tan_stack
Form supports
@solid_js
already!
Links to our initial docs in the next post.
A huge thank you to our community member
@SwagDoctor19
for taking this challenge on!
I'm excited to share that I'm starting a new role at
@DescriptApp
working on the Client Platform team with
@HipsterSmoothie
!
Can't wait to improve the app's performance, increase DX throughput, and more!
I've written the first bit of docs for
@tan_stack
Start and they're now viewable on our site!
Not present on the sidebar or Start homepage yet, but if you want to play about with Start today, check these out:
Okay, for real,
@vite_js
,
@vitest_dev
, and VitePress are 100% the way to create library repos.
Using these, I've managed to spin up:
- Dev environment to test changes
- Tests
- Docs site
Using a single Vite config - without using a monorepo. It's incredible working with them!
Are you a library author wanting to use
@tan_stack
Query without forcing your users to wrap their app in a `QueryClientProvider`?
Luckily, you can do just that using the second argument of `useQuery`!
This makes async data handling a breeze in your libraries!
๐งต1/4 You may have heard of "Glitches" in regards to
@angular
Signals
This refers to when you have a derived value with two parents that depends on a base signal.
Write to the base signal & you'll end up with a temporarily wrong value before the 2nd writes.
Join me and Ryan Carniato (creator of
@solid_js
) tomorrow morning to see us make an official
@tan_stack
Form integration for Solid Start!
Link to stream in follow-up post:
.
@tan_stack
Form๐ค
@buildWithLit
Thanks to the awesome work done by Christian24 on GitHub, we now have a Lit adapter for TanStack Form.
Released as part of 0.15 and will be part of v1 from day 1.
Yesterday
@tannerlinsley
showed me the APIs for TanStack Start's server interop.
Wow. Just wow.
Even without RSC (ongoing development) the back-n-forth has incredible DX.
Can't wait to get docs in your hands, get ready to see more of it soon!
Writing a custom
@angular
form validator for your passwords?
Remember to avoid early returns in your validator! Show all of your errors at once in order to allow the user to know all of your password requirements at once!
I'm consistently frustrated by the discourse of software eng by those that seem to prioritize performance > anything else.
While performance is important in its own right and absolutely pivotal in some scenarios, it is not and never has been the end all be all of engineering.
@james_r_perkins
TanStack Form is ready to use, but needs lots of docs.
That said, if you're okay with working around that (and you know my DMs are always open) then let's chat! ๐
While setTimeout is useful, it's often too slow/inefficient to properly utilize. ๐ข
Polyfill setTimeout with this implementation to make your apps much faster/stable! ๐คฏ
For even better performance, make sure to only run this code in a conditional block on a random function. ๐ก
We just launched
@tan_stack
Form 0.11!
This is our biggest release since revamping the form library!
As an overhaul to the validators, it includes:
- Moved validators under a property for easier readability
- Making onMount more consistent
- Adding abort signals to async
My upcoming book ๐ teaches Angular - It's 350 pages thus far, and covers the big stuff in
@angular
/core.
There is not a single line of RxJS in any of the code samples.
I often feel that RxJS is introduced FAR too early in many Angular resources.
Agree? Why or why not?
๐ My book teaching React, Angular, and Vue - The Framework Field Guide - finally has a release date!
March 11th, 2024.
After over 2 years of work, I can't wait to get it in your hands!
React's `useEffect` isn't taught too early most of the time; it's taught with the wrong context.
The same is true for lifecycle methods in Angular and Vue.
They're abused, not because they're taught early on, but because they're not taught with the proper background to them.
Just released
@tan_stack
Form 0.10.0
Contains a big fix; Submitting a form now triggers the validation for onChange and onBlur to make sure the user can't accidentally submit an invalid form:
We're also releasing a patch release soon after for arrays.
Had an incredible lunch with the
@angular
Team talking about the Angular
@tan_stack
Form adapter.
Their support and understanding of the problem space is immensely refreshing
Thanks to
@synalx
we have improved the DX and performance as well! ๐
I have gotten function components working in Angular using a TS compiler I wrote! ๐
This is an unofficial experimentation of Angular's authoring format, akin to
@analogjs
's SFCs
If this looks interesting to you, stay tuned!
Earlier this year at
@ClerkDev
's Hackathon I showed a demo of
@tan_stack
Form validating an input on the client and server using the same API via
@reactjs
/
@nextjs
server actions
It was mostly theoretical at the time...
Not anymore.
Coming to you in TanStack Form 0.12
I've been stuck in a pretty vicious cycle of:
- Work really hard on my projects
- Realize it's a ton of work
- Temporarily give up
- Come back to the project
- Realize it's really not that much more work
- Grind on it for hours and hours and hours
Dunno how to fix this.
Something interesting about me - I prefer to develop in Windows! I often have people ask me how I set up my Windows machines for development, so I wrote a long guide laying out everything that I know regarding setup!
I talk about WSL, Windows Terminal, Chocolatey, and much more!
Windows has come a long way in the past 10 years. During that time, the tools available to developers have grown prolifically
In this article, we unpack how to set up a Windows development environment! We explain how to setup your terminal and much more!
Quick shoutout to
@colinhacks
for this article, which helped save a lot of research time on how to get live types working in an app-focused TS monorepo:
๐งต 7/8 This is why we can't conditionally render hooks: They're tracked based on call order using what's effectively a counter.
@dan_abramov
explains this significantly better (and explains "why") on his blog, it's a highly suggested read:
My lightning talk for
@ngconf
is now on YouTube!
If you want to learn about making your own signals by seeing an implementation written in 5 minutes, this is your talk:
Sincere shoutout to
@zeithq
for making contributing to NextJS one of the nicest experiences I've ever had in OSS contributions.
And that's only for the smallest example updates!
When I started learning FE frameworks like
@reactjs
,
@vuejs
, and
@angular
I learned the term "Reactivity"
Read the docs of any of them; it's everywhere.
What's worse; There's a lot of ambiguity around this term...
Let me take a crack at explaining it:
๐งต8/8 This has been a lightning quick recap of what I'm writing for my "React's Internals" chapter of my upcoming book: "The Framework Field Guide" ๐
It will teach React, Angular, and Vue all at once and will be free on
@UnicornUttrncs
!
Be sure to follow for more like this!
Transparency time:
I've been writing the book release announcements for socials, Discord, and mailing lists today - it's live Monday at 8AM PST.
It's been tearing me apart - so many emotions all at once it's overwhelming (lots of tears).
This has been 2 years of immensely hard
I'm excited to announce that I'm writing a programming book! ๐
It'll be called "The Framework Fieldguide" ๐ and teach you Angular, React, and Vue all at once!
From component basics to internal logic, it'll have it all! โจ
Follow me to learn tips and tricks up until release!
Wrote a super minimal web framework in ~30 minutes when challenged by a friend asking what my ideal framework would look like...
Ended up with something like
@vuejs
meets
@Alpine_JS
๐ (Altho I know Vue also supports HTML-templating)
What do ya think?
Hey all, my father is needing a heart and liver transplant coming up soon. He's needing to raise money in order to afford the operations and as a result of trying to raise funds made a Twitter:
@zipperheartx6
Even if you can't donate, a follow or rt would be a huge help. Thanks
Today was my last day
@CoderPad
.
My time there was sincerely the most positive experience in my career, filled with the best people I've ever had the pleasure of working alongside
I sincerely continue to believe that their mission is amazing and that they will succeed in it โค๏ธ
I've been diving into ASTs lately (writing a Babel plugin and reading through Angular's compiler's source code).
Honestly? They're not nearly as scary as my mind made them out to be. Sure, there's a learning curve, and I'm not trying to imply they're easy but (1/4)
It's my birthday! To celebrate, my friends and I have launched a massive overhaul to
@UnicornUttrncs
๐คฏ
This was a huge effort led by
@edpratti
,
@fennifith
, and myself including 900+ commits over almost a year (including design).
As a gift to me, it would mean a lot if you
We're excited to announce the new Unicorn Utterances!
This update has been a substantial effort from the team - in the works for over 6 months and almost 1000 commits!
We're excited to show you what's new - let's dive in๐งต
My next blog post is going to be a doozy.
If you've ever wanted to read
@angular
's source code, this will be the blog post for you. Will include a from-scratch implementation of Zone.js and default CD strategy of Angular to render our own DOM elements.
The best part of
@tan_stack
packages is that they're framework agnostic
Meaning 99% of the APIs work exactly as you'd expect across the boundaries of the framework or not
Honestly such a superpower when dealing with microframeworks come to think of it ๐๐
.
@github
sent me a wonderful care package a while ago when I first became a GitHub Star.
This week they sent me a physical award to go alongside it ๐ญโค๏ธ๐ญโค๏ธ
I'm so blessed to have received this recognition from such a wonderful organization.
๐งตI'm beyond excited to announce the website redesign for my upcoming book series! ๐
The series teaches React, Angular, and Vue!
It's by far the fanciest website I've ever built (w/ the help of many others) and I couldn't be happier with the end result
Holy cow! I'm 1 follower away from 1,000!
This is awesome and I appreciate you all for being here and sticking around.
If you're not following, but want to make my day by making this number finally roll over - I'll introduce myself
Hi! ๐ I'm Corbin and I do lots of coding! โจ