Health to the Web

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

Accessibility is something I've wanted to better understand to improve my coding practices for. So I'm taking the Web Accessibility course on Udacity  to learn and improve. The Web Content Accessibility Guidelines (WCAG) by W3C outline 4 Principals of accessibility which are: Perceivable: all users can perceive it; text alternatives for non text content, available in different forms Operable: can all users use it, keyboard support , time adjustable (e.g. slower playback), navigable (focus, link content, titles, bypass, multiple ways) Understandable: can all users understand (language, words, reading level, abbreviation). Consistency: navigation, error prevention & handling & display,  Robust: does it work with all agents including assistive; no html errors, right use of markup  Abbreviated to POUR The WCAG provide a checklist to help identify and improve your apps accessibility. 1. focus focus determines where keyboard event go on the page) and is critical to acce...

The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you cho...

As you learn about hooks, the rabbit hole gets deeper hooks since react 16.8 Hooks rely on JavaScript closures every  function inside the component render (including event handlers, effects, timeouts or API calls inside them) captures the props and state of the render call that defined it. " Whenever we update the state, React calls our component. Each render result “sees” its own state value which is a  constant  inside our function." when you call a setter for a useState then react will call the fn component to run it again, that's a new version of that function with its own closure so a new version of the fn component that is generated with the new state (which is a different state than when the fn was called before) " Inside any particular render, props and state forever stay the same" So too do other functions such as simple handlers and also effects " React synchronizes the DOM according to our current props and state.  There is no distinction between...

  I'm a skier and skied Palisades Tahoe recently. After which they sent me a survey with an interesting survey control as follows: It's a pretty cool ux. We can see it has a:  title a range 0 - 9 laid out as adjacent squares in a row there's a prompt on the left and right of the control to explain lower and upper values hover state when hover over a choice box which shows a blue border when user makes a choice then it shows as a blue circle (same color as borer) and number color is changed (see choice 4 in the screenshot) This is cool, so I built this myself. Here's how I organized the html overall container containing a header, h3 perhaps survey body which contains range start and end prompts list of survey choices which contains for each choice 0 - 9 a survey choice box which contains survey choice css notes: use border-box so the container does not grow when change border on hover use flexbox in a number of places to: layout the row of survey choices and start and en...