What does âthe edgeâ really mean?
The edge is the most popular buzzword in modern web dev. But with all these competing definitions⌠what does it REALLY mean? For extended reading, see Glauberâs (CEO of Turso) take on his blog.
The edge is the most popular buzzword in modern web dev. But with all these competing definitions⌠what does it REALLY mean? For extended reading, see Glauberâs (CEO of Turso) take on his blog.
View transitions are now built into Chrome, and make animation a million times easier. You wonât need framer motion again! Check out Adam Argyleâs incredible slideshow demo.
Server components and server rendering mean very different things in React. Letâs break down the difference.
Next.js lets you start with either pages/ or app/, and the choice will effect your project dramatically. TL;DW: pages/
for beginners and projects you depend on, app/
for intermediate devs learning the latest patterns.
Markdown blogs look so simple at first, but they always turn into database-level problems. Letâs see how Astro content collections make it easy, without SQL đ
Astro pioneered the âclient:â directive to fine tune when JS loads. With custom client directives, itâs even more powerful than Reactâs "use client"
! Try the client:rainy-in-ny
demo here.
The web is an insanely crowded market these days. Hereâs how a command palette helps you stand out đ
The Tailwind @apply
utility was a mistake. What should you use instead? Let me introduce you to theme()
.
SvelteKit is an exciting new framework for building fullstack apps. But why use it over NextJS? To me, it comes down to simply⌠React vs. Svelte!
Server actions could be the future of React and NextJS backends. How do they work, and why are they different from regular REST endpoints?
Something something âthereâs 2 hard parts about programming, and naming is one of them.â Letâs see how to write smarter component props that invert control to the parent, where it counts đ Based on the excellent Kent C. Dodds talk, Simply React.
Good abstractions are the simplest-yet-hardest programming problem. Hereâs how you can write better utilities and components, with a little more copy / paste đ Based on the incredible Dan Abramov talk, The WET Codebase.
Drizzle ORM is a simple SQL tool for creating, inserting, and querying from tables in your TypeScript backend. Letâs see why!
In the world of server components, React Context doesnât work like it used to. Letâs see how old Context use cases are might get replaced by new patterns.
Edge compute is a powerful new idea cutting down cold starts and unlocking new distribution options. Letâs see if edge really is the serverless killer.
ExpressJS was a great first stab at JS for the backend. But these days, we want modern templating, file-based routing, SPA transitions and more. Hereâs how Astro takes the ExpressJS model to a new world!
Planetscale has a new approach to database connections: http. Letâs see how it solves serverless connection speeds without compromising performance. Read the full performance benchmark here đ
React Server Components and Astro have the same goal: split up server and client code. How they achieve that goal feels similar too⌠but they have some unique strengths!
Throwing errors can be a recipe for nasty 500 errors. Letâs see how returning error objects can keep your code type-safe and maintainable!
How do you build React Server Components without NextJS? Hereâs a high-level overview of all the code you need. Try the demo repo, simple-rsc đ
With React Server Components, there are entirely new ways to think about re-rendering. Letâs see how the new transition hook can unlock server-side searching with beautiful loading states.
Naming variables is hard. But letâs see how naming backwards could make your life easier.
React Suspense has existed for years, and it was never obvious when or why youâd use it. But now, with React Server Components, it might be the bridge to get the best of EVERY data fetching solution.
Data streaming is the future of React, and THE key to understanding server components. Letâs explore how React really renders routes on your NextJS site.
Markdoc is an exciting content format from Stripe built for scale. If reusability and build speed are top of your list, it might be worth a try over MDX!
TypeScript enums are missing a LOT of features. Letâs see the magic of matching and struct
s that Rust brings to the table.
TypeScript forces you into clunky switch cases and unreadable ternaries. Letâs see how Rust expressions solve this.
You deserve type-safe errors. Letâs see how Rust ditches confusing try / catch patterns with the Result
object.
Tired of JS switch cases break
-ing your code? Letâs see how Rust got it right with pattern matching.
Best practices are trends, not rules. Letâs see how to use this to your advantage!
Itâs easy to get bogged down in refactors and clean-up. Hereâs why I suggest âbeeliningâ to a solution SOONER to write reliable code with fewer mistakes.
Can we write better function arguments? Letâs see why leaning on objects can avoid show-stopping bugs from positional arguments.
Tired of unorganized code and 100+ VS Code tabs? My secret is⌠embrace big files. Hereâs why!
CSS is hard. Hereâs some resources and guides to hate it less!
Sick of accidentally shipping Author: [Object object]
on your blog? Letâs check out typesafe Markdown in Astro 2.0. aka the video Iâve been excited to post for MONTHS! đ
Qwik might be the new hotness with its resumability features, but is it really faster than your React app today?
Qwik might be the new hotness with its resumability features, but is it really faster than your React app today?
Is frontend web dev a MESS? The amount of options and best practices are overwhelming⌠but itâs the nature of any growing industry. Hereâs why.
ESM became the new Node standard. Letâs see how this changes file paths for the better with the URL object.
Zod solves a base-level problem every app has, with applications from APIs to Markdown validation. Letâs see why itâs so useful!
Copilot can pump out quality code⌠if your codebase has quality design. Letâs see how treating Copilot as the âjunior dev testâ makes you a better programmer.
This one HTML element means better SEO and accessibility for your blog. Itâs time (heh đ) to talk about published dates!
Next 13 completely changed routing and nested layouts. Letâs see why they shook things up, and whether itâs better or worse for your web app.
POSTing data to an API shouldnât be hard. SvelteKit forms do it best! Letâs see multiple page forms and progressive enhancement in action đââď¸
Full stack components â˘ď¸ are becoming a trend. And I think SolidJS found the smartest way to marry server$ code to your frontend in perfect typesafe harmony đ¤ Letâs see if this sparks an industry trend!
File-based routing only gets you (..)part(..)/ of the way. Letâs see how Solid makes hybrid approaches and config-based routing easy.
Thereâs some confusion over the benefits and drawbacks of React Server Components. Letâs break them down, with a comparison to Astro (astro.build) as well!
âŚBut it can be a key part of one! Letâs see where Tailwind shines, and how utility classes with accessible Radix UI or Zag components can be a winning combo đđ¨ Brad Frost article - design systems are for user interfaces
With serverless on the rise, cache is king đ° To speed up responses and cut down on your server bill, letâs walk through Cache-Control headers thatâll fine-tune how and where cache is stored.
Did you know NextJS 13 flips between static and serverless deploys based on how you write you code? Letâs seen how Next snoops on your fetch
functions to auto-decide the best way to ship your website.
Vercel had a lot to announce at NextJS Conf 2022, including a Rust-powered bundler called Turbopack with performance comparisons to boot. Letâs break down the nuances to see the differences and benefits compared to ViteJS.
đą Is CSS-in-JS dying? âŚOkay, not really. But recommended libraries and performance concerns changed a lot since Emotion first hit the scene. So, letâs break down React 18âs bottlenecks and new styling approaches đ
Article noted in video: âWhy weâre breaking up with CSS-in-JSâ
đ Loading đ spinners đ are đ annoying. How do you fetch data more efficiently? Letâs talk about render-as-you-fetch, a buzzword shaping frameworks like NextJS and React Location.
Data fetching (and async code in general) is pretty complicated in React. Luckily, the ReactJS team is proposing a new way forward!
Letâs talk server components, async / await
, and the use
hook. React has opened this proposal for comments, so weigh in here đ
Zod is the last form validator Iâll ever need đ Letâs validate forms on the server and client, no matter the framework, using zod-form-data!
To try the project from this video, clone the repository đ
What if your server and client agreed on types? Letâs use tRPC to build simple-yet-robust API endpoints with built-in type validation đŞ
đ Want a sample app? Spin one up with create-t3-app!
Nano Stores are my FAVORITE global state manager. Letâs see how they work, and why they can simplify your ReactJS Context
flow đ
Try the Astro tutorial to learn more!
Letâs talk input labels, adding instructions with aria-describedby
, and the pain of icon buttons feat. megaphones đŁ
For more, check out Ben Myerâs excellent aria-label
rundown!
Letâs see what makes SolidJS so special, and why itâs my rec for performance-minded JSX lovers đ
Some helpful resources:
Itâs never been easier to spin up a Preact project. Hereâs why you should start with Preact BEFORE graduating to React on your next project đŞ
Some helpful resources:
Could modern browser APIs make multi-page apps (aka âtraditionalâ static or server websites) feel like single-page apps? Letâs explore why SPAs like NextJS exist, and why they may be less necessary in the future â¨
Some helpful resources:
Iâve been hearing a lot of âserverless can replace your static siteâ claims. So, I put some cache headers to the test. Turns out, servers and serverless can cut down your build times and still match your static siteâs speed đ
Fonts are hard đ
Letâs write font-face
rules together, preload for efficiency, learn what the heck font-display: swap
does, and see how Fontsource can automate the process đŞ
Analytics are slowing your site down. đ
Been wanting to talk builder.ioâs partytown for a while! Letâs see how web workers + service workers = no more analytics blocking đ
đľ Iâm on the edge đľ CDN đľ And Iâm serving all my content near you
Letâs explore edge compute vs. serverless deployment, and the emerging use cases for this tech.
Caching is key to fast servers. Letâs explore how cache headers work, what max-age
to choose, and how this applies to server-side rendering (SSR). Remember, the MDN docs are your friend!
Letâs try SSR, a way to render content on-request and deliver a unique user experience without the loading spinners. This relies on âpre-renderingâ as well, which you can learn about here.
Letâs explore âpre-rendering,â a way to render your websites ahead-of-time. Unlike client-side rendering (CSR), this lets you ditch the loading spinner and deliver content faster. Static site generators like NextJS and Astro can help.
Letâs talk about client-side rendering, a way to render your webpage top-to-bottom using JavaScript requests. This is common for frameworks like create-react-app and Vite!