For over part of 2021, I labored on a whole rewrite of kentcdodds.com. You are
studying this at the rewrite of this website online! Are you the use of darkish mode or gentle mode?
Have you ever signed in and decided on your group but? Have you ever attempted to name
into the Name Kent Podcast? This weblog put up is not about those and different
options of the brand new website online, however how I constructed it. There is an excessive amount of to dive deep in a
unmarried weblog put up. I simply need to come up with an outline of the applied sciences and
libraries I used to make this revel in for you.

If you have not learn it already, get a higher-level evaluation of what this site
can do to your finding out and development as a device engineer through studying
Introducing the brand new kentcdodds.com
first.

I have migrated from Postgres/Redis to SQLite. Examine that within the put up I
Migrated from a Postgres Cluster to Allotted SQLite with
LiteFS.

Prior to we get too a ways into this I need to make my something transparent. If this was once a
easy developer’s blogfolio website online, my tech alternatives may well be categorised as
over-engineering and I might agree. On the other hand, I sought after to construct an above and
past revel in, so I needed to make considerate architectural choices. What I am
doing in this website online may without a doubt now not be executed with wordpress and a CDN 😆

In case you are a newbie in search of how one can construct your individual site, this weblog
put up is without a doubt now not where to be told that. If I have been to construct a easy
private site, I might nonetheless use Remix.run, however I might
most certainly have it operating on netlify serverless purposes and write the content material
as markdown which has integrated give a boost to in Remix. That will be vastly
more effective.

However once more, that isn’t what kentcdodds.com is. In case you are keen on how one can
productively construct a maintainable site the use of trendy equipment this is rapid all
over the sector regardless of each consumer getting content material that is utterly distinctive to
them, then please proceed.

Oh, and yet one more factor to offer context on what this website online can do:

First, to come up with an concept of the size we are speaking right here. So listed here are a couple of
stats:

On the time of this writing (October 2021) listed here are the
cloc stats:

$ npx cloc ./app ./varieties ./exams ./kinds ./mocks ./cypress ./prisma ./.github
     266 textual content recordsdata.
     257 distinctive recordsdata.
      15 recordsdata not noted.

github.com/AlDanial/cloc v 1.90  T=0.16 s (1601.9 recordsdata/s, 194240.7 strains/s)
-------------------------------------------------------------------------------
Language                     recordsdata          clean        remark           code
-------------------------------------------------------------------------------
TypeScript                     219           2020            583          21582
CSS                             10            198            301           4705
JSON                             7              0              0            609
YAML                             2             43             13            232
SQL                              7             20             25             52
JavaScript                       4              2              3             42
Markdown                         1              0              0              2
TOML                             1              0              2              1
-------------------------------------------------------------------------------
SUM:                           251           2283            927          27225
-------------------------------------------------------------------------------

And to get a way of the volume of content material I’ve in this website online, here is a phrase
rely:

$ in finding ./content material -type f | xargs wc -w | tail -1
  280801 general

That is greater than the primary 3 Harry Potter books mixed.

And including up the volume of content material at the 4 seasons of
the Chats with Kent Podcast involves about 35 hours of content material + the
ever-growing 3 hours of content material at the emblem new Name Kent Podcast
which by the way could also be greater than it takes to hear Jim Dale learn the
first 3 Harry Potter books (until you pay attention at 3x like me
#subtlebrag 🙃).

27k strains of code is not like your paintings mission the place a part dozen groups have
been contributing code for the remaining 8 years or anything else, however it is not anything like
your blogfolio website online both. It is a authentic full-stack internet utility with a
database, cache, consumer accounts, and so on. I am moderately assured that that is the
largest Remix utility in life nowadays.

I did not do that complete factor alone. You’ll take a look at
the credit web page for main points on individuals. I used to be the main code
contributor and I made the entire structure choices (and errors? solely time
will inform 😅) for the website online.

The primary devote was once in
November 2020.
Maximum construction has taken position within the remaining 4-5 months. There are ~945 commits
up to now 🤯.

Listed below are the main applied sciences used on this mission (in no explicit order):

• React: For the UI
• Remix: Framework for the Consumer/Server/Routing
• TypeScript: Typed JavaScript (vital for
  any mission you intend to handle)
• XState: State system device making advanced part
  state control easy
• Prisma: Unbelievable ORM with stellar migrations and
  TypeScript consumer give a boost to
• Categorical: Node server framework
• Cypress: E2E checking out framework
• Jest: Unit/Element checking out framework
• Checking out Library: Easy utilities for checking out
  DOM-based consumer interfaces
• MSW: Unbelievable device for mocking HTTP requests within the
  browser/node
• Tailwind CSS: Application categories for
  constant/maintainable styling
• Postcss: CSS processor (just about simply use it for
  autoprefixer and tailwind)
• Succeed in UI: A suite of available UI parts each app
  wishes (accordion/tabs/conversation/and so on…)
• ESBuild: JavaScript bundler (utilized by Remix and
  mdx-bundler).
• mdx-bundler: Device for compiling
  and bundling MDX for my website online content material (weblog posts and a few easy pages).
• Octokit: Library making interacting
  with the GitHub API more uncomplicated.
• Framer Movement: Nice React Animation library
• Unified: Markdown/HTML parser/transformer/compiler
  gadget.
• Postgres: Struggle examined SQL database
• Redis: In-memory database–key/price retailer.

Listed below are the services and products this website online makes use of:

Deployment pipeline

I feel it may be rather instructive of total structure to explain how an
app is deployed. The Excalidraw diagram above
describes it visually. Permit me to explain it in written shape as smartly:

First, I devote a transformation to the native repo. Then I push my adjustments to the (open
supply) GitHub repository. From there, I’ve two GitHub Movements that run
robotically on each push to the major department.

The “Discord” circle simply signifies that I have were given a GitHub webhook put in for
discord so every good fortune/failure will lead to a message in a channel on discord
so I will be able to simply stay monitor of ways issues are going at any time.

GitHub Movements: 🥬 Refresh Content material

The primary GitHub motion is named “🥬 Refresh Content material” and is meant to
refresh any content material that can have modified. Prior to describing what it does, let
me provide an explanation for the issue it solves. The former model of kentcdodds.com was once
written with Gatsby and because of the SSG nature of Gatsby each time I sought after to
make a content material exchange, I must rebuild my whole website online (which might take
any place from 10-25 mins).

However now that I’ve a server and I am the use of SSR, I wouldn’t have to look forward to a
entire rebuild to refresh my content material. My server can get admission to the entire content material
without delay from GitHub by way of the GitHub API. The issue is this provides a large number of
overhead to every request for my weblog posts. Upload to that point to bring together the MDX
code and you have got your self a actually gradual weblog. So I have were given myself a Redis
cache for all of this. The problem then is the issue of caches: invalidation. I
wish to ensure that once I make an replace to a couple content material, the Redis cache
will get refreshed.

And that’s the reason what this primary GitHub motion does. First it determines all content material
adjustments that took place between the devote that is being constructed and the devote of
the remaining time there was once a refresh (that price is saved in redis and my server
exposes an endpoint for my motion to retrieve it). If any of the modified recordsdata
have been within the ./content material listing, then the motion makes an authenticated POST
request to every other endpoint on my server with the entire content material recordsdata that have been
modified. Then my server retrieves the entire content material from the GitHub API,
recompiles the MDX pages, and pushes the replace to the Redis cache which Fly.io
robotically propagates to the opposite areas.

This reduces what used to take 10-25 mins down to eight seconds. And it saves me
computational sources as smartly as a result of solving a typo in my content material does not
necessitate a rebuild/redeploy/cache bust of the entire website online.

I notice that the use of GitHub as my CMS is a bit of strange, however superb other people
such as you give a contribution enhancements to my open supply content material at all times and I
recognize that. So through protecting issues in GitHub, that may proceed. (Observe the
edit hyperlink on the backside of each put up).

GitHub Movements: 🚀 Deploy

The second one GitHub motion deploys the website online. First, it determines whether or not the
adjustments are deployable initially. If the one factor that modified was once
content material, then there is not any reason why to hassle redeploying due to the refresh
content material motion. Nearly all of my commits on my outdated website online have been content-only
adjustments so this is helping save the bushes 🌲🌴🌳

As soon as it is decided that we have got deployable adjustments, then we kick off more than one
steps in parallel:

• ⬣ ESLint: Linting the mission for easy errors
• ʦ TypeScript: Sort checking the mission for sort mistakes
• 🃏 Jest: Working part and unit exams
• ⚫️ Cypress: Working end-to-end exams
• 🐳 Construct: Construction the docker symbol

The Cypress step is additional parallelized through splitting my E2E exams into 3
particular person bins which cut up the exams between them to run them as briefly
as conceivable.

Chances are you’ll understand that there aren’t any arrows popping out of the Cypress step. This
is intentional and brief. These days I don’t fail the construct if the E2E
exams fail. To this point, I have never been apprehensive about deploying one thing that is
damaged and I did not need to grasp up a deploy as a result of I by chance busted
one thing for the 0 customers who be expecting issues to be operating. The E2E exams are
additionally the slowest a part of the deployment pipeline and I need to get issues
deployed briefly. In the end I’m going to most certainly care extra about whether or not I destroy the
website online, however for now I might quite have issues deploy sooner. I know when the ones
exams fail.

As soon as ESLint, TypeScript, Jest, and the Construct all effectively entire, then we
can transfer directly to the deploy step. On my finish this bit is unassuming. I merely use the
Fly CLI to deploy the docker container that was once created within the construct step. From
there Fly looks after the remainder. It begins up the docker container in every of
the areas I have configured for my Node server: Dallas, Santiago, Sydney, Hong
Kong, Chennai, and Amsterdam. When they are able to obtain visitors, Fly
switches visitors to the brand new example after which shuts down the outdated one. If there may be
a startup failure in any area, it rolls again robotically.

Moreover, this step of the deploy makes use of prisma’s migrate function to use any
migrations I have created for the reason that remaining migration (it retail outlets data at the remaining
migration in my Postgres DB). Prisma plays the migration at the Dallas
example of my Postgres cluster and Fly robotically propagates the ones adjustments
to all different areas straight away.

And that’s the reason what occurs once I say: git push or click on the “Merge” button 😄

Database Connectivity

One of the vital coolest portions of Fly.io (and the rationale I selected Fly over selection
Node server hosts) is the power to deploy your app to more than one areas all
over the sector. I have selected 6 in response to the analytics from my earlier website online, however
they’ve many extra.

Deploying the Node server to more than one areas is solely a part of the tale despite the fact that.
To actually get the community functionality advantages of colocation, you want your records
to be shut through as smartly. So Fly additionally helps web hosting Postgres and Redis clusters
in every area as smartly. This implies when a licensed consumer in Berlin is going to
The Name Kent Podcast, they hit the nearest server to them (Amsterdam)
which is able to question the Postgres DB and Redis cache which are situated in the similar
area, making the entire revel in extraordinarily rapid anywhere you might be within the
global.

What is extra, I wouldn’t have to make the trade-off of dealer lock-in. At any time I
may take my toys house and host my website online any place else that helps deploying
Docker. For this reason I did not cross with an answer like Cloudflare Staff and
FaunaDB. Moreover, I wouldn’t have to retrofit/restrict my app to the restrictions
of the ones services and products. I am extraordinarily proud of Fly and do not be expecting to go away any
time quickly.

However that does not imply that is all trade-off unfastened (not anything is). All of this
multi-regional deployment comes with the issue of consistency. I have were given
more than one databases, however I do not need to partition my app through area. The knowledge
will have to be the similar in all the ones databases. So how do I ensure that consistency? Neatly,
we make a choice one area to be our number one area, after which make all different areas
read-only. Yup, so the consumer in Berlin will not be able to put in writing to the database in
Amsterdam. However do not be concerned, all cases of my Node server will make a learn
connection to the nearest area so reads (through a ways the most typical operation) are
rapid, after which in addition they create a write connection to the main area so
writes can paintings. And once an replace occurs in the main area, Fly
robotically and straight away propagates the ones adjustments to all different areas.
It is very very rapid and works rather smartly!

Fly makes doing this rather simple and I am tremendous proud of it. That stated, there may be
one different drawback this creates that we wish to maintain.

Fly Request Replays

One drawback with the learn/write connections I exploit to make multi-regional
deployment tremendous rapid is if our pal in Berlin writes to the database and
then reads the knowledge they simply wrote, it is conceivable they’ll learn the outdated records
earlier than Fly has completed propagating the replace. Information propagation generally
occurs in milliseconds, however in instances the place the knowledge is big (like whilst you
publish a recording to The Name Kent Podcast),
it is rather conceivable your subsequent learn will beat Fly.

One approach to steer clear of this drawback is to ensure that as soon as you have got executed a write, the
remainder of the request plays its reads in opposition to the main database.
Sadly this makes the code just a little advanced.

Some other method Fly helps is to “replay” a request to the main area
the place the learn and write connections are each at the number one area. You do that
through sending a reaction to the request with the header fly-replay: REGION=dfw
and Fly will intercept that reaction, save you it from going again to the consumer,
and replay the very same request to the area specified (dfw is Dallas which
is my number one area).

So I’ve a middleware in my categorical app that merely robotically replays all
non-GET requests. This does imply that the ones requests will take just a little longer for
our pal in Berlin, however once more, the ones requests do not occur very regularly, and
truthfully I do not know of a higher selection anyway 🙃.

I am actually proud of this resolution!

When I am creating in the neighborhood, I’ve my postgres and redis databases operating in a
docker container by way of a easy docker-compose.yml. However I additionally have interaction with a
bunch of third birthday celebration APIs. As of the time of this writing (September 2021), my app
works with the next 3rd birthday celebration APIs:

1. api.github.com
2. oembed.com
3. api.twitter.com
4. api.tito.io
5. api.transistor.fm
6. s3.amazonaws.com
7. discord.com/api
8. api.convertkit.com
9. api.simplecast.com
10. api.mailgun.web
11. res.cloudinary.com
12. www.gravatar.com/avatar
13. verifier.meetchopra.com

Phew! 😅 I am a large believer in with the ability to paintings utterly offline. It is a laugh
to head up into the mountains and not using a web connection and nonetheless have the ability to
paintings for your website online (and as I sort this, I am on an plane with out web). However
with such a lot of third birthday celebration APIs how is that this conceivable?

Easy: I mock it with MSW!

MSW is an incredible device for mocking community requests in each the browser and
node. For me, 100% of my third birthday celebration community requests occur in Remix loaders on
the server, so I solely have MSW setup in my node server. What I really like about MSW is
that it is utterly nonintrusive on my codebase. The best way I am getting it operating is
lovely easy. This is how I get started my server:

node .

And here is how I get started it with mocks enabled:

node --require ./mocks .

That is it. The ./mocks listing holds all my MSW handlers and initializes MSW
to intercept HTTP requests made through the server. Now I am not going to mention it was once
simple writing the mocks for all of those services and products, it is a truthful quantity of code and
took me just a little of time. However boy it is actually helped me keep productive. My mock is
a lot sooner than the API and does not depend on my web connection one bit.
It is a massive win and I strongly suggest it.

For a number of of the APIs I’ve mocked, I am simply the use of faker.js to create
random pretend records that conforms to the categories I have written for those APIs. However for
the GitHub APIs, I if truth be told occur to grasp what the reaction will have to be even supposing
I am not hooked up to the web, as a result of I am actually operating within the
repository that I’m going to be soliciting for content material from! So my GitHub API mock if truth be told
reads the filesystem and responds with exact content material. That is how I paintings on
my content material in the neighborhood. And I wouldn’t have to do anything else fancy in my supply code. As
a ways as my app is worried, I am simply making community requests for the content material,
however MSW intercepts it and we could me reply with what is at the record gadget.

To take it a step additional, Remix auto-reloads the web page when recordsdata exchange and I
have issues arrange so every time there is a exchange within the content material, the redis cache
for that content material is robotically up to date (yup, I exploit the redis cache in the neighborhood
too) and I cause Remix to reload the web page. If you’ll be able to’t inform, I feel this
complete factor is tremendous cool.

And since I’ve this arrange with MSW to paintings in the neighborhood, I will be able to make my E2E exams
use the similar factor and keep resilient. If I need to run my E2E exams in opposition to the
actual APIs, then all I’ve to do is now not --require ./mocks and the whole lot’s
hitting actual APIs.

MSW is a gigantic productiveness and self assurance booster for me.

As described previous with the structure diagrams, I host my redis cache with
Fly.io. It is extra special. However I have constructed my very own little abstraction for
interacting with redis to have some fascinating qualities that I feel are price
speaking about.

First, the issues: I need my website online to be tremendous rapid, however I additionally need to do
issues on every request that take time. Some issues I need to do may also be
described as gradual or unreliable. So I exploit Redis to cache issues. It will take
one thing that takes 350ms all the way down to 5ms. On the other hand, with caching comes the
complication of cache invalidation. I have described how I do that with my
content material, however I am caching much more than that. Maximum of my third birthday celebration APIs are
cached or even the result of a couple of of my Postgres queries are cached (Postgres
is lovely rapid, however on my weblog I execute ~30 queries on each web page).

Now not the whole lot is cached in Redis both, some issues are cached by way of the
lru-cache module (lru stands for “least-recently-used” and is helping your cache
steer clear of out of reminiscence mistakes). I exploit the in-memory LRU cache for terribly short-lived
cache values just like the postgres queries.

With such a lot of issues that wish to be cached, an abstraction was once had to make
the invalidation procedure more effective and constant. I used to be too impatient to discover a
library that will paintings for me, so I simply constructed my very own.

This is the API:

sort CacheMetadata =  null

// it is the price/null/undefined or a promise that resolves to that
sort VNUP<Price> = Price | null | undefined | Promise<Price | null | undefined>

async serve as cachified<
  Price,
  Cache extends {
    call: string
    get: (key: string) => VNUP<{
      metadata: CacheMetadata
      price: Price
    }>
    set: (
      key: string,
      price: {
        metadata: CacheMetadata
        price: Price
      },
    ) => unknown | Promise<unknown>
    del: (key: string) => unknown | Promise<unknown>
  },
>(choices:  string
  request?: Request
  fallbackToCache?: boolean
  timings?: Timings
  timingType?: string
  maxAge?: quantity
): Promise<Price> {
  // do the stuff...
}

// here is an instance of the cachified credit.yml that powers the /credit web page:
async serve as getPeople({
  request,
  forceFresh,
}:  string
) {
  const allPeople = wait for cachified({
    cache: redisCache,
    key: 'content material:records:credit.yml',
    request,
    forceFresh,
    maxAge: 1000 * 60 * 60 * 24 * 30,
    getFreshValue: async () => {
      const creditsString = wait for downloadFile('content material/records/credit.yml')
      const rawCredits = YAML.parse(creditsString)
      if (!Array.isArray(rawCredits)) {
        console.error('Credit isn't an array', rawCredits)
        throw new Error('Credit isn't an array.')
      }

      go back rawCredits.map(mapPerson).filter out(typedBoolean)
    },
    checkValue: (price: unknown) => Array.isArray(price),
  })
  go back allPeople
}

That is a large number of choices 😶 However do not be concerned, I’m going to stroll you thru them. Let’s
get started with the generic varieties:

• Price refers back to the price that are meant to be saved/retrieved from the cache
• Cache is solely an object that has a call (for logging), and get, set,
  and del strategies.
• CacheMetadata is data that will get stored together with the price for figuring out
  when the price will have to be refreshed.

And now for the choices:

• key is the identifier for the price.
• cache is the cache to make use of.
• getFreshValue is the serve as that if truth be told retrieves the price. That is
  what we might be operating each time if we did not have a cache in position. As soon as
  we get the contemporary price, that price is about within the cache on the key.
• checkValue is a serve as that verifies the price retrieved from the
  cache/getFreshValue is right kind. It is conceivable that I deploy a transformation to
  the getFreshValue that adjustments the Price and if the price within the cache
  is not right kind then we need to power getFreshValue to be referred to as to steer clear of
  runtime sort mistakes. We additionally use this to test that what we were given from
  getFreshValue is right kind and if it isn’t then we throw a useful error
  message (without a doubt higher than a sort error).
• forceFresh permits you to skip taking a look on the cache and can name
  getFreshValue even supposing the price hasn’t expired but. When you supply a string
  then it splits that string through , and tests whether or not the key is incorporated in
  that string. Whether it is then we’re going to name getFreshValue. This comes in handy for when
  you might be calling a cachified serve as which calls different cachified purposes
  (just like the serve as that retrieves the entire weblog mdx recordsdata). You’ll name that
  serve as and solely refresh some of the cache values, now not they all.
• request is used to decide the default price of forceFresh. If the
  request has the question parameter of ?contemporary and the consumer has the function of
  ADMIN (so… simply me) then forceFresh will default to true. This permits
  me to manually refresh the cache for all sources on any web page. I do not want
  to try this very regularly despite the fact that. You’ll additionally supply a worth of ,-separated
  cache key values to power solely the ones cache values to be refreshed.
• fallbackToCache if we attempted to forceFresh (so we skipped the cache) and
  getting the contemporary price failed, then we may need to fallback to the cached
  price quite than throwing an error. This controls that and defaults to
  true.
• timings and timingsType are used for every other software I’ve for monitoring
  how lengthy issues take which then will get despatched again within the Server-Timing header
  (helpful for figuring out perf bottlenecks).
• maxAge controls how lengthy to stay the cached price round earlier than looking to
  refresh it robotically.

When the price is learn from the cache, we go back the price straight away to stay
issues rapid. After the request is distributed, we decide whether or not that cached price
is expired and whether it is, then we name cachified once more with forceRefresh set
to true.

This has the impact of constructing it so no consumer ever if truth be told has to look forward to
getFreshValue. The trade-off is the remaining consumer to request the knowledge after the
expiration time will get the outdated price. I feel it is a cheap trade-off.

I am lovely proud of this abstraction and it is conceivable that I’m going to sooner or later
replica/paste this phase of the weblog put up to a README.md for it as an open
supply mission one day 😅

Adequate other people… Cloudinary is fantastic. All of the photographs in this website online are hosted on
cloudinary after which delivered on your browser in the very best length and structure for
your software. It took a bit of paintings (and some huge cash… Cloudinary isn’t
affordable) to make this magic occur, however it is saving a TON of web bandwidth
for you and makes the photographs load a lot sooner.

One of the vital causes my Gatsby website online took goodbye to construct was once that each time I
ran the construct, gatsby needed to generate the entire sizes for all my photographs. The
Gatsby group helped me put in combination a chronic cache, but when I ever had to
bust that cache then I might must run Netlify a couple of occasions (it could timeout) to
refill the cache once more so I may deploy my website online once more 😬

With Cloudinary, I wouldn’t have that drawback. I simply add the picture, reference
the cloudinary ID in my mdx, after which my website online generates the proper sizes and
srcset props for the <img /> tag. As a result of Cloudinary lets in transforms in
the URL, I am able to generate a picture that is precisely the size I need for
the ones props.

Moreover, I am the use of Cloudinary to generate the entire social photographs at the website online
so they are able to be dynamic (with textual content/customized font and the whole lot). I am doing the
identical for the photographs on The Name Kent Podcast. It is bonkers.

Some other cool factor I am doing that you’ll have spotted at the weblog posts is on
the server I make a request for the banner symbol that is solely 100px huge with a
blur change into. Then I convert that right into a base64 string. That is cached alongside
with the opposite metadata concerning the put up. Then once I server-render the put up, I
server-render the base64 blurred symbol scaled up (I additionally use backdrop-filter
with CSS to easy it out just a little from the upscale) after which fade-in the full-size
symbol when it is completed loading. I am lovely darn proud of this method.

Cloudinary blows my thoughts and I am glad to pay the price for what I am getting from it.

I have been the use of MDX to put in writing my weblog posts ever
since I left Medium. I actually love that I will be able to simply
have interactive bits in the midst of my weblog posts with no need to care for
them in any particular manner within the code of my website online.

Once I moved from Gatsby’s build-time compilation of MDX to Remix’s with
on-demand compilation, I had to have the ability to do this on-demand compilation.
Proper round this time was once when xdm was once created (a miles sooner and
runtime-free MDX compiler). Sadly it is only a compiler, now not a bundler.
In case you are uploading parts into your MDX, you want to ensure the ones
imports will unravel whilst you run that compiled code. I made up our minds what I wished
wasn’t only a compiler. I wished a bundler.

No such bundler existed, so I made one:
mdx-bundler. I began with
rollup after which gave esbuild a attempt to was once blown away. It is out-of-this-world
rapid (despite the fact that nonetheless now not rapid sufficient to bundle-on-demand so I do cache the
compiled model).

As one may be expecting, I do have a number of unified plugins (statement/rehype) to
automate some issues for me throughout compilation of the mdx. I’ve one for
auto-adding associate question params for amazon and egghead hyperlinks. I’ve every other
for changing a hyperlink to a tweet into a fully customized twitter embed (manner
sooner than the use of the twitter widget factor) and one for changing egghead video
hyperlinks into video embeds. I have were given every other customized one (borrowed from a secret
package deal through Ryan Florence) for syntax highlighting in response to Shiki, and one for
optimizing inline cloudinary photographs.

Unified is actually tough and I really like the use of it for my markdown-based content material.

Alright my buddies. Let’s speak about Prisma. I’m now not a database individual… At
all. All of the backend stuff is out of doors of my wheelhouse. What is humorous despite the fact that is
Remix makes the backend so approachable that many of the paintings I have been doing
during the last few months has been backend stuff 😆 And I could not be happier
with how easy Prisma makes operating with a database. Now not simply querying
Postgres, but additionally records migrations. It is in reality superb how approachable Prisma
makes it. So let’s speak about the ones issues.

Migrations

With prisma, you describe your database fashions by way of a schema.prisma record. Then
you’ll be able to inform Prisma to make use of that to replace your database to mirror your schema.
When you ever wish to exchange your schema, you’ll be able to run
prisma migrate dev --name <descriptive-name> and prisma will generate the SQL
queries vital to make the desk updates to your schema adjustments.

In case you are cautious about the way you do that, you’ll be able to make 0 downtime migrations.
0 downtime migrations don’t seem to be distinctive to prisma, however prisma does make developing
those migrations a lot more effective for me, a man who hasn’t executed SQL in years and
by no means actually preferred it anyway 😬 All the way through the advance of my website online, I had 7
migrations, and two of the ones have been breaking schema adjustments. The truth that I of
all other people controlled to try this will have to be endorsement sufficient 😅

TypeScript

The schema.prisma record will also be used to generate varieties to your database
and that is the place issues get actually superior. Here is a fast instance of a question:

const customers = wait for prisma.consumer.findMany({
  make a selection: {
    identity: true,
    e mail: true,
    firstName: true,
  },
})

// That is customers sort. To be transparent, I wouldn't have to put in writing this myself,
// the decision above returns this kind robotically:
const customers: Array<{
  identity: string
  e mail: string
  firstName: string
}>

And if I sought after to get the group then:

const customers = wait for prisma.consumer.findMany({
  make a selection: {
    identity: true,
    e mail: true,
    firstName: true,
    group: true, // <-- simply upload the sphere I need
  },
})

And now all at once the customers array is:

const customers: Array<{
  identity: string
  e mail: string
  firstName: string
  group: Group
}>

And oh, what if I sought after to additionally get the entire posts this consumer has learn? Do I would like
some graphql resolver magic? Nope! Test this out:

const customers = wait for prisma.consumer.findMany({
  make a selection: {
    identity: true,
    e mail: true,
    firstName: true,
    group: true,
    postReads: {
      make a selection: {
        postSlug: true,
      },
    },
  },
})

And now my customers array is:

const customers: Array<{
  firstName: string
  e mail: string
  identity: string
  group: Group
  postReads: Array<{
    postSlug: string
  }>
}>

Now that is what I am speaking about! And with Remix, I will be able to simply question without delay
in my loader, after which have that typed records to be had in my part:

export async serve as loader({request}: DataFunctionArgs) {
  const customers = wait for prisma.consumer.findMany({
    make a selection: {
      identity: true,
      e mail: true,
      firstName: true,
      group: true,
      postReads: {
        make a selection: {
          postSlug: true,
        },
      },
    },
  })
  go back json({customers})
}

export default serve as UsersPage() {
  const records = useLoaderData<typeof loader>()
  go back (
    <div>
      <h1>Customers</h1>
      <ul>
        {/* all this auto-completes and kind tests!! */}
        {records.customers.map(consumer => (
          <li key={consumer.identity}>
            <div>{consumer.firstName}</div>
          </li>
        ))}
      </ul>
    </div>
  )
}

And if I make a decision I do not want some records at the consumer, I merely replace the prisma
question and TypeScript will ensure that I did not leave out anything else. It is simply unbelievable.

Prisma has made me, a frontend developer, really feel empowered to paintings without delay with
a database.

Some time again, I tweeted some phrases that I am consuming…

Yup, that is proper… I hand-rolled my very own authentication in this website online. However I had
a excellent reason why! Take into account the entire communicate above about making issues tremendous rapid through
collocating the node servers and databases with reference to customers? Neatly, I might kinda undo
all that paintings if I used an authentication carrier. Each request must
cross to the area that supplier supported to ensure the consumer’s logged in state.
How disappointing would that be?

Across the time I used to be operating at the authentication drawback, Ryan Florence did
some are living
streams the place he carried out
authentication for his personal Remix app. It did not glance all that sophisticated. And
he was once type sufficient to offer me an summary of the issues which are required and I
were given maximum of it executed in simply someday!

One thing that helped a really perfect deal was once the use of magic hyperlinks for authentication.
Doing this implies I do not wish to fear about storing passwords or dealing with
password resets/adjustments. However this wasn’t only a egocentric/lazy choice. I believe
strongly that magic hyperlinks are the most productive authentication gadget for an app like
mine. Remember that just about each different app has a “magic hyperlink”-like auth
gadget even supposing it is implicit on account of the “reset password” glide which emails
you a hyperlink to reset your password. So it is by no means any much less protected. In
reality, if truth be told extra protected as a result of there is not any password to lose.

Oh, and earlier than you assert:

But when there is not any password, I will be able to’t use my password supervisor and I’m going to overlook
which of my 30 e mail addresses I used to enroll for your website online!

Your password supervisor can without a doubt retailer login data that has solely an
e mail deal with and no password. Do this.

Adequate, let’s check out a diagram of the authentication glide:

Some issues I need to indicate with this glide is that there is not any interplay
with the database till the consumer has if truth be told signed up. Additionally, the glide for signal
up and login are the similar. This simplifies issues an excellent quantity for me.

Now, let’s check out what occurs when a consumer navigates to an authenticated
web page.

The fundamentals of that is lovely easy:

• Get the consultation ID from the consultation cookie
• Get the consumer ID from the consultation
• Get the consumer
• Replace the expiration time so energetic customers hardly ever wish to re-authenticate
• If any of those fails, cleanup and redirect

It is truthfully now not as sophisticated as I remembered it being once I hand-rolled
authentication years in the past in different apps I labored on. Remix is helping make it a lot
more uncomplicated with its cookie consultation abstraction.

Adequate other people. Of all equipment I am the use of, Remix has made the most important affect on my
productiveness and the functionality of my site. Remix allows me to do all this
cool stuff with out over complicating my codebase.

I am without a doubt going to be writing a large number of weblog posts about Remix within the
long term, so subscribe to stay alongside of that. However here is a fast checklist
of why Remix has been so unbelievable for me:

1. The benefit of speaking between the server and consumer. Information over-fetching
   is not an issue as a result of it is so simple for me to filter out down what I need
   within the server code and feature precisely what I would like within the consumer code. As a result of
   of this there is not any want for an enormous and complex graphql backend and consumer
   library to maintain that factor (you’ll be able to without a doubt nonetheless use graphql with
   remix if you wish to despite the fact that). This one is massive and I can write many weblog
   posts about this within the coming months.
2. The car-performance I am getting from Remix’s use of the internet platform. This could also be
   a large one that can require more than one weblog posts to give an explanation for.
3. The facility to have CSS for a selected path and know that I would possibly not conflict with
   CSS on some other path. 👋 good-bye CSS-in-JS.
4. The reality I wouldn’t have to even consider a server cache as a result of Remix
   handles all that for me (together with after mutations). All my parts can
   suppose the knowledge is able to cross. Managing exceptions/mistakes is declarative.
   And Remix does not put into effect its personal cache however as a substitute leverages the browser
   cache to make issues tremendous rapid even after a reload (or opening a hyperlink in a
   new tab).
5. No being concerned a couple of Structure part like with different frameworks and the
   advantages that provides me from a data-loading standpoint. Once more, this will likely
   require a weblog put up.

I point out that a number of of those would require a weblog put up. Now not as a result of you will have
anything else to learn how to make the most of this stuff, however to give an explanation for to you that
you do not. It is simply the way in which Remix works. I spend much less time serious about how
to make issues paintings and extra time knowing that my app’s features aren’t
restricted through my framework, however through my ✨ creativeness ✨.

I will be able to’t inform you how a lot I have realized from construction this site. It is been a
ton of a laugh and I am excited to place my learnings into weblog posts and workshops to
educate you the specifics of ways I did these things so you’ll be able to do it too. If truth be told,
I have already scheduled some workshops so that you can attend!
Pick out up tickets now. I stay up for seeing you there! Take
care, and stay up the nice paintings.

And do not overlook, if you have not already learn the
“Introducing the brand new kentcdodds.com”
put up, please do give it a learn!