Responsive Web Development with React

## Agenda Overview

- Responsive design intro
- Core Tech (Media queries, Flexbox, CSS Grid) - Explore each. Code together.
- React tools / libraries
- Tables
- Images
- Tools

## What is responsive design?
- Rendering content differently for different devices
- [Mobile: 58% of web traffic in 2018](https://www.perficientdigital.com/insights/our-research/mobile-vs-desktop-usage-study)

## Core Tech
**Old school**
- [Floats with 12 column grids](https://www.w3schools.com/css/css_rwd_grid.asp)
- inline-block

**Modern Approaches**
- [Media queries](https://github.com/coryhouse/reactjsconsulting/issues/30)
- [CSS Grid](https://github.com/coryhouse/reactjsconsulting/issues/28)
- [Flexbox](https://github.com/coryhouse/reactjsconsulting/issues/29)

[My CSS tech usage poll](https://twitter.com/housecor/status/1172918192764805122)

## Our Goal

1. Know what's possible.
2. Know what tools to reach for, and when.

Not our goal? [Memorize dozens of key/value combos]((https://twitter.com/davatron5000/status/873578585394696192?lang=en)). That's what docs are for. Memorization comes naturally through use, over time.

## Fundamentals

1. Mobile first. Then widen, and add styles as needed (via media query). This leads to simpler CSS. Also loads faster on mobile (since desktop only CSS doesn't apply).
1. [Set viewport meta tag](https://www.w3schools.com/css/css_rwd_viewport.asp)
1. Prefer relative widths (like percents, fr in grid, grow/shrink in flexbox) to avoid horiz scroll (caused by large, fixed width elements or large absolute positioning values)
1. Don't tie design to a particular screen width or device. There's a huge variety. Instead, use Media queries, Flexbox, and CSS Grid to assure the design looks great at all widths.
1. Use box sizing, border-box to simplify styles. `* { box-sizing: border-box; }` This means padding and border are included in the element's total width and height.
1. Infer scroll/swipeability - Use [overflow shadows](https://codepen.io/evank/pen/wWbRNO) or hang content partially off-screen

## [Media queries](https://github.com/coryhouse/reactjsconsulting/issues/30)

## [Flexbox](https://github.com/coryhouse/reactjsconsulting/issues/29)

## [CSS Grid](https://github.com/coryhouse/reactjsconsulting/issues/28)

## Images

This will honor the image's aspect ratio, and scale down as needed. [Example](https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image):
```css
img {
max-width: 100%;
height: auto;
}
```

Can use media queries to serve different images for different screens
```css
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
```

Use `` to declare multiple sources. [Demo](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture). **Note:** [Use `

```

## Responsive Tables

[Responsive Bootstrap table](https://react-bootstrap.github.io/components/table/#table-responsive-always)
[Responsive tables](https://css-tricks.com/accessible-simple-responsive-tables/) on CSS tricks
[Responsive table roundup on CSS tricks](https://css-tricks.com/responsive-data-table-roundup/)
[Flipped axis](https://codepen.io/dbushell/pen/wGaamR)
[Hide columns, but optionally show again and display horiz scroll](https://www.filamentgroup.com/examples/rwd-table-patterns/)
[Tablesaw - A library of options](http://filamentgroup.github.io/tablesaw/demo/kitchensink.html)
[React Super responsive table](https://react-super-responsive-table.netlify.com/)
Or, [simply build two separate components and lazy load the relevant one](https://twitter.com/housecor/status/1173948695353679873) (a vertically-oriented design for mobile and a traditional table for desktop). Consider, the desktop design may have sorting, filtering built into headers, while mobile design may use separate filter/sort UI above. Splitting allows for optimizing each experience. Can use [react-responsive](https://www.npmjs.com/package/react-responsive) for clean, declarative media queries. [Codesandbox](https://codesandbox.io/s/dazzling-kowalevski-j51uq) - [Demo on Netlify](https://csb-j51uq.netlify.com/) - Watch network tab.

## React Techniques

### Performance

- Lazy load either web or mobile via React.lazy (see example above under tables)
- Normalize breakpoints via [react-responsive](https://www.npmjs.com/package/react-responsive) or [react-socks](https://github.com/flexdinesh/react-socks)
- [useWindowSize Hook](https://usehooks.com/useWindowSize/) - Can share this via context to avoid redundancy
- When to split mobile vs web components

## Dev tools

### Storybook
- [Viewport addon](https://github.com/storybookjs/storybook/tree/master/addons/viewport)

### Apps/Browsers
- [Sizzy](https://sizzy.co/)
- [Blisk](https://blisk.io)

### Chrome settings

- Test performance by throttling CPU / Network performance in Chrome's performance tab
- Simulate devices in Chrome via [device toolbar](https://www.dropbox.com/s/edos91isdtt1jgc/Screenshot%202019-09-17%2006.22.11.png?dl=0) - **Note** - You must be in simulate device mode to simulate swipe events. For example, enable device mode for a small phone and you can [swipe between table columns here](http://filamentgroup.github.io/tablesaw/demo/swipe.html).

### Chrome Plugins
- [Responsive Web Design Tester](https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea?hl=en) - (for development, hosting, and visualization) such as browser plugins, websites, and customized local webservers.

### Dev Webservers

- [Browsersync](https://www.browsersync.io/) - Synchronized browser testing

### Automated Testing

- React Testing Library - [Pass size prop](https://spectrum.chat/testing-library/general/how-to-test-different-viewport-sizes~ebe206b6-9e34-4041-b1b5-3075ae5036c1)
- Cypress - [Set viewport](https://docs.cypress.io/api/commands/viewport.html#Width-Height) or test Storybook story using [Viewport addon](https://github.com/storybookjs/storybook/tree/master/addons/viewport)
- Visual testing via Percy, Chromatic, or [others](https://storybook.js.org/docs/testing/automated-visual-testing/) - Screenshot stories / app at different viewports

No repository file, test, or entry point is named. Start by reviewing the existing project structure and content conventions, then clarify which parts of the responsive React agenda are required. Done should mean the agreed scope is documented with the relevant responsive design, React, images, tables, tooling, and testing material completed.

Written by the indexing model from the issue text.