Health to the Web

  vertical-align: middle; "The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box." mdn docs nice!

Kent writes about the webs next transition  (Oct '22) Tech which powers the web (http, html, js, css) were all developed over 25 years ago (eek!) Major architectural patterns over that time multi page apps (MPA); the era of html pages, java server pages all code (persistence, data fetching & mutation, rendering, routing) runs on server except UI interaction in browser  cons: full page refreshes and ui feedback control pro: simple architecture and code management progressively enhanced multi page apps (PEMPAs); the era of jquery, mootools etc code including rendering runs on server and UI both (if no js then fallback to MPA mode pro: improved UI interaction, more control on FE con: more complex architecture, code management, code duplication single page apps; era of backbone, angular, ember, react, vue routing, data fetching & mutation code is on both server and FE but only rendering and UI Feedback on the FE pro: less code on server (most all routing on FE, rendering o...

  OKRs Objectives and KRs for the team are the responsibility of the team.  Goal setting and committing require collaboration, planning and estimating by the team doing the work. Everyone is responsible, must stay engaged and communicate status to each other and their managers.  All Objectives/KRs for the squad start as "Low Confidence" This includes rolled over goals which reset back to low confidence on rollover from previous quarter. They remain so until squad reviews, projects effort and delivery. Product must get engineering projections for Goals before they can be published (otherwise it's Low Confidence)  Objectives should be prioritized. Critical Goals which are "must have" must be identified. A "must have" goal will require more buffer to ensure it's made. Goals can also be classified as Stretch Goals for a time duration (e.g. quarter) Progress needs to be re-evaluated during the work e.g. if a goal is projected to take 6 weeks then there ...

chartjs is a popular (58k github stars) charting library which supports many different kinds of charts react-chartjs is a wrapper for chartjs for react apps. It provides a number of components such as Bar which are easy to use to create charts. I used  react-chartjs 2 days ago to create a clickable bar chart for our hackathon project and it's pretty freaking awesome. I have 1 simple dataset and needed each bar to be clickable. Took less than 2 hours to use  react-chartjs and learn how to get it working. Others on the team were using D3 and that has a much steeper learning curve (although very powerful). Here's what my chart looks like. Each bar is clickable and calls an onClick handler I passed to the Bar component. I followed this react-chartjs example but had just 1 dataset (instead of 2 as in the example).  Here's a gist of the code (I modified a larger file so apologies for any mistakes) which has what you'll need to get it setup and working.

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 ...