Health to the Web

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

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

  typeof extract a type from runtime code, typeof "make a type of it" (i.e. from it) e.g.   typeof "Hello world"  => string only legal on variable names can be used with functions or any other expressions aside: typeof vs keyof: keyof takes a type and creates a string/number union of it's keys. So keyof creates a new type from a type ....whereas typeof creates a type from an expression. good post Given a function: const myFunc = (name: string) => {   return `hello ${name}`;    }; type the function into MyFunc type MyFunc =   typeof myFunc; type a function return type (using built in ReturnType ) type MyFuncReturn = ReturnType<typeof myFunc>;  // string When the function changes, the types change! You can also type the parameters using utility type  Parameters      type MyFuncParams = Parameters<typeof myFunc>;  // string but Parameters will return a tuple (array), so you could index result like...

Typescript enums have their uses but are extra hassle when creating new dto instances. I don't think enums are a good fit for working with dtos.  When I try to instantiate a new AutoTagsConfigType instance as mock data for tests, typescript is reporting an error for the  status  field because it's defined as an  ATStatus  enum So setting status to a literal like this is not acceptable to typescript const mockData: AutoTagsConfigType = { status: 'Pending', id: 'd3f963fb-2201-4f5c-ae38-21bf22cec001', name: 'Big Spender', } but setting status as:  status: ATStatus.Pending  does work however that's not very nice to have to do (use the enum type all the time, I prefer using literals) especially if typescript has another way of achieving the same goal (limit status values) using unions if ATStatus is a union not an enum, then setting values literally works as we would like and typescript will only allow set one of those values type ATStatus = ...

I build a small app to view successful transactions by querying a mock near graph response I created my own variation of the graph on thegraph.com . More on the graph   I like the idea of owning your own data and your own identity, it's a powerful idea. Why lock up your identity and data in closed systems? Why not instead have a global identity you own and you control which systems can query and edit. Owning your own identity and data...what an idea!  " The next wave of transformative innovation will be in applying the same open source principles to the world's information" Ceramic has some interesting blogs on how web3 apps are building composable trust  One use case is owned identity and y ou can create your own identify with self.id  as per  implementation by ceramic . Decentralized Identifiers  are used in this scenario. Ethereum provides a web3 js library  to work with Ethereum. Figment provides products and learning resources for web3. learn.fi...

I'm a fanboy of "Uncle" Bob Martin. An original signer of the Agile Manifesto . Author of Clean Code book and other "Clean" books. Frequent presenter. Yes, he has a certain style which does not appeal to everyone (I dig it). Yes, some of the content is showing its age with tech changes over last 10+ years. But Bobs also created some timeless content. I enjoyed watching Bobs video presentation on the  Craftsmans oath (2018) recently (but let's change to Craftsperson ok?) and below are my notes on what Bob said. The tldr in my words: A craftsperson is someone who stands for something and cares about doing things "the right way". They care about the code, their teammates and customers. They produce quality code, write tests, don't settle for the first solution but refactor code regularly to improve it, deploy small frequent releases, pair with others, are good teammates and collaborators, are learners and teachers both, and don't bs themselve...

In most cases its better to customize a pre-built such as material design than build your own from scratch, but I wanted to use this as a learning opportunity and build out my own component library Technology used react typescript styled-components storybook jest and react-testing-library rollup - module bundler setup yarn init  yarn add --dev typescript  yarn add --dev react-dom react @types/react-dom @types/react yarn add  --dev  styled-components yarn add  --dev  @types/styled-components ran `npx tsc --init` to create default tsconfig.json and then customized add rollup, so installing it and dependencies: yarn -D add rollup yarn -D add @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript rollup-plugin-peer-deps-external rollup-plugin-terser rollup-plugin-dts yarn -D add tslib then create the rollup.config.js file and edited it I created /src/components/index.js and then created /src/components/Button to build run `yarn run buil...

We did not use styled components at my last job but am using it now in personal projects. css in js feels as weird as html in js did when I first encountered react.  But I see how it solves some css issues and can allow sophisticated constructs for styling components. styled-components makes use of tagged template literals . Normally when we use template literals we just use the string formatter string interpolation (create strings using substitution)  e.g. `Welcome ${user.name}` When we use that form we're actually using a default function (which does string interpolation for us). But you can supply your own custom function and call like so: myTemplateFn `Welcome ${user.name}` The template literal is passed to your "tagged function" myTemplaetFn...but as an array (for strings) and separate param for each placeholder (each dollar sign and curlies). It's the same as: myTemplateFn (['Welcome'], "jane") where user.name contains "jane" This is ...

Ok this is a link to a good article with all the details . Lots of useful link outs to more articles too. Nodding my head with most all of this  I would have called out react-intl in i18n list, but he does in the article linked thank you!

Notion has a task list view. Similar to Trellos Board (Trellos drag'n'drop animation is still cool). Here's an example of Notions Task List. Users can add and remove new columns (aka groups) and can add/remove items in each group including moving between groups. Notion styles the columns with Flexbox but you could also style it with Grid. I see two main options for the GET api to structure the return data (or as response to POST success) api returns the data already organized into lists corresponding to columns (groups) in the UI; i.e. each group has it's list of tasks already organized api returns flat list of tasks (a map is useful for faster lookup) and separate list for group (column) information; FE needs to do some filtering and organizing Notion takes the 2nd approach and structured like below (simplified). It has 4 main entities:  groups; organized various ways, including a list of every taskId in a group (see "board_columns") tasks; organized in a js...