Health to the Web

  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!