Health to the Web

nextjs conf 2022 just completed  "dynamic without limits" "ship dramatically less javascript to the client" keynote talked about 3 areas of innovation in nextjs 13 tooling - moving from webpack to turboprop (they'r next gen build tooling written in rust, not js)  nextjs hired the creator of webpack to build their next gen tooling: turbopack nextjs 13 with turbopack starts up in 1.8 secs for a large app with 3k components, versus 6.3 secs with nextjs 12 and webpack the larger the app the better it compares in performance check it out on turbo.build turbopack could be the "killer app" for nextjs routing and rendering (a new nextjs router) worked with react core team to create a new loader api components images support; images are a large part of web packs so nextjs helps developers with lazy image loading next/image custom fonts; brand new font system to optimize fonts and remove connection requests next/font img and font changes help to avoid layout sh

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag

Matts a good teacher and an expert on typescript. He released a free typescript beginners course and I wanted to check it out. 18 exercises in all and you can complete the exercises in the browser. It's basics but listen to the solutions videos and you'll always pickup something new from Matt with typescript you're declaring the contract and when using typescript think about where you want the contract to be (contract enforcement), thus when declare variables make sure they match the contract  union type: you OR    e.g. a | b | c     // a or b or c    "everywhere in typescript", "define types of data flowing through your app" intersects: you combine type  e.g. a & b & c  // all 3 combined as a new type specifying arrays, 2 ways 1. square brackets (Posts[]) or generics Array<Post>    lesson 9 and onwards gets more interesting return type of a fn which returns a Promise should be a Promise which wraps what will be resolved e.g. Promise<Pe