Health to the Web

https://motherfuckingwebsite.com/ they do a really good job hiding all the complexity 🤣

Web components "Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps." - MDN 3 main technologies Custom elements:  define behavior of the component  Shadow DOM:      a shadow dom is rendered separately from the main document dom, and thus isolated you can create a custom element with a shadow dom  HTLM Templates   write markup templates steps to build your own web component write the class create a js class for your element which inherits from HTMLElement define a constructor with call to super() register it with the CustomElementRegistry object e.g.  customElements.define("word-count", WordCount, { extends: "p" }); the extends is optional, but shows you can extend from existing elements and use like so: <p is="word-count"> terminology update: when extending it called "Custom built i...

I don't have a problem with making moves to make your business a success. Cutting failing products. Pivoting. Laying people off. Staying lean. Cutting perks. That's all part of business (especially tech). I and the whole SF office were laid off from a startup in Thanksgiving 2015. Sucked. It happens. We all accepted it and moved on. And I accept that in some cases employees have been overly lavished with perks (although I would like to see how free lunches, laundry etc. compares to executive compensation packages). But how Elon Musk has done it, treating people as disposable and abusable. Forcing people to work round the clock. Ritualistic styled humiliations such  as sign up to be "hardcore" or be fired,   fired if disagree with Elon,  print out your code, send screenshots of your code in an email and come to present.  I don't get how that makes sense?  I mean, all our code is online in github, why print it off and hand deliver? How is someone going to grok tho...

  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.