From 2feacdf09a9f08e2096cdb9dd0bcf9e6303d484c Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Sun, 15 Mar 2020 10:59:05 +0100 Subject: [PATCH 01/11] WIP on upleveled presentation --- slides/cdds-upleveled.mdx | 1401 +++++++++++++++++++++++++++++++++++++ 1 file changed, 1401 insertions(+) create mode 100644 slides/cdds-upleveled.mdx diff --git a/slides/cdds-upleveled.mdx b/slides/cdds-upleveled.mdx new file mode 100644 index 00000000..6bead32c --- /dev/null +++ b/slides/cdds-upleveled.mdx @@ -0,0 +1,1401 @@ +import { jsx, Flex } from 'theme-ui'; +import { + Appear, + Boom, + Box, + Center, + Code, + Cover, + Demo, + Figure, + Image, + Notes, + LiveCode, + List, + Primary, + Secondary, + Split, + SplitWithHeading, + ThatGuy, + Video, +} from './theme'; +import { Prism } from 'react-syntax-highlighter'; +import TweetEmbed from 'react-tweet-embed'; +import Stack from 'stack-styled'; +import * as dropdown from './code/dropdown.js'; + +export { theme } from './theme'; + + + +--- + +
+
https://component-driven.io + } + >
+
+ +--- + +
+ +## Andrey Okonetchnikov + +UI developer with experience in both design and development who specializes in interaction design, design systems and modern frontend development. + +
+ +--- + +
+ +## Artem Sapegin + +UI engineer working with web technologies since 1999. Creator of react-styleguidist and component-driven-development πŸ₯‘ + +
+ +--- + + + +# [bit.ly/cddwrkshp](https://bit.ly/cddwrkshp) + + + +--- + +## Schedule + +- 9:00 Workshop +- 10:30 β˜•οΈ +- 10:45 Workshop +- 13:00 πŸ₯— +- 14:00 Workshop +- 15:00 β˜•οΈ +- 15:15 Workshop +- 17:00 πŸŽ‰ + +--- + + + +# What's on your mind? + + + +--- + +## Plan of the workshop + +1. Introduction to DS and CDD +1. UI Inventory +1. Design Tokens +1. Basic Primitives +1. Layout Primitives +1. UI Patterns +1. Discussion and Q&A + +--- + +
+ +# πŸͺ“ `npm start` + +- [http://localhost:3000](http://localhost:3000) β€” App +- [http://localhost:6060](http://localhost:6060) β€” Final styleguide +- [http://localhost:6061](http://localhost:6061) β€” Exercises + +
+ +--- + + + +--- + + + +--- + + + +--- + +
+
react-styleguidist} + gap={4} + /> +
+ + + +I have stickers with me. Please go grab one after the talk! + + + +--- + + + +# Design Systems + + + +--- + +## Why do we need design systems? + +1. Products becoming more complex +1. Development speed is mission critical +1. End quality is mission critical, too +1. Our processes of building for web are outdated + +--- + +## Building UI with HTML & CSS (past ~20 years) + +1. Get a static mockup from a designer +1. Write HTML markup that represents the mockup +1. Write CSS and connect with HTML using classes +1. "Sprinkle" JavaScript using classes to add interactivity +1. Hand off to a backend developer +1. Replace HTML with PHP, Ruby, Java, ... +1. ... +1. Profit + +--- + +## Building UI with React (past ~5 years) + +1. Get a static mockup from a designer +1. Get data from API endpoint +1. Render data in JSX using HTML +1. Write CSS and connect with JSX using `className` +1. ... +1. Profit + +--- + + + +> Designers are still drawing **static mockups** and developers are writing **HTML & CSS** + + + +--- + + + +# What's the problem with static mockups? + + + +--- + + + +--- + + + +--- + +## Static mockups... + +1. not covering all possible states +1. not covering all possible resolutions +1. losing lots of design knowledge during ~~translation~~ hand-off +1. are static! + +--- + + + +# What's the problem with using CSS? + + + +--- + + + +# CSS is hard 🀯 + + + +--- + + + +# Quiz + + + +--- + + + +## What text color Text A and Text B going to be? + +```css +.red { + color: red; +} + +.blue { + color: blue; +} +``` + +```html +

Text A

+

Text B

+``` + + + +--- + +
+ + +
+ +--- + + + +# CSS is the source of inconsistent UIs + + + +--- + + + +--- + +## Sources of inconsistent UIs + +1. Color & Typography +1. Spacing & Layout + +--- + + + +## Custom CSS + +```css +.description { + margin-bottom: 20px; + font-size: 16px; + color: #c9b8b9; +} +``` + +```css +.count { + margin-left: 0.75em; + font-size: 14px; + opacity: 0.5; + color: #fc9; +} +``` + + + +--- + + + +--- + + + +--- + + + +--- + + + +# CSS is too expressive πŸ‘©β€πŸŽ¨ + + + +--- + + + +## What should we do? + + + +--- + + + +# Stop writing CSS! + + + +--- + + + +# Design tokens + + + +--- + +
+ +
+ +--- + + + +> Design tokens are everything you use more than once in your styles + + + +--- + +
+ +# Defining & Documenting Design Tokens + +
+ +--- + +
+ +## UI Inventory process + +
+ +--- + +
+
+
+ +--- + +
+
+
+ +--- + +
+
+
+ +--- + + + +--- + +
+ + {require('!raw-loader!./code/themeExample.js').default} + +
+ +--- + +## Naming of design tokens + +- x-small small medium large x-large +- xs sm md lg xl +- xs s m l xl +- 0 1 2 3 4 5 +- 100 200 300 400 500 +- ~~alpha beta gamma delta epsilon~~ + +--- + +
+
+ https://marvelapp.com/styleguide/design/color-scheme + + } + /> +
+ +--- + +
+
+ https://cloudflare.github.io/cf-ui/#cf-design-gradients + + } + /> +
+ +--- + +
+
+ https://vueds.com/example/#!/Design%20Tokens + + } + /> +
+ +--- + +
+
+ https://www.lightningdesignsystem.com/design-tokens/ + + } + /> +
+ +--- + + + +--- + +
+
https://colorsnapper.com} + /> +
+ +--- + +
+ +# πŸͺ“ `npm start` + +- [http://localhost:3000](http://localhost:3000) β€” App +- [http://localhost:6060](http://localhost:6060) β€” Final styleguide +- [http://localhost:6061](http://localhost:6061) β€” Exercises + +
+ +--- + + + +# UI Primitives + + + +--- + + + +> HTML was designed for documents, not applications! + + + +--- + + + + Text, Heading +
+ {`

Heading

+

Text

`} +
+ ️😊 + Link +
+ {`Link`} +
+ πŸ€” + Button +
+ + {` +Button`} + +
+ πŸ™„ + Dropdown +
+ {dropdown.html} +
+ 😩 + + + +--- + + + + + +--- + + + +> Components is a better way of writing HTML + + + +--- + +
+ +# Components + +- ` +
    + {props.options.map(option => ( +
  • {option}
    • + ))} +
+ +); +``` + + + +--- + +## Components as a common language + + + A button + {`
+ +--- + +
+ +{``} + +vs. + +{``} + +
+ +--- + + + +> Learn once, use everywhere + + + +--- + +
+ +## CSS + React wayβ„’ = styled-system + +
+ +--- + +
+
https://styled-system.com} + /> +
+ +--- + + + +> Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme. + + + +--- + + + +# Text + + + +--- + +## API design + +Things developers will be allowed to customize + +- Typography (`fontSize`, `fontWeight`, `letterSpacing`, etc.) +- Alignment (`left`, `center`, `right`, ~~`justify`~~) +- Color (`color`) +- Whitespace (`margin`) +- HTML elements (`p`, `span`, `label`) + +--- + + + +> Define a minimal set of props that can be customized + + + +--- + +
+ +```javascript +import styled from '@emotion/styled'; +import { color, margin, typography } from 'styled-system'; + +export const Text = styled.p( + // defaults + { + margin: 0, + lineHeight: 1.5, + }, + // API + color, + typography, + margin +); +``` + +
+ +--- + +
+ +```javascript +import Text from '../primitives/Text'; + + + Bold red text +; +``` + +
+ +--- + + + +--- + +## Necessary text styles + +
    +
  • +

    Heading 1

    +
    • +
  • +

    Heading 2

    +
    • +
  • Normal text
    • +
  • Secondary text
    • +
  • Error
    • +
  • etc.
    • +
+ +--- + + + +> UI inventory helps with defining what's necessary + + + +--- + +## API: boolean vs variant + +- `` πŸ˜€ +- `` πŸ˜€ +- `` 🀯 + +--- + +## API: boolean vs variant + +- `` πŸ˜€ +- `` πŸ˜€ +- ~~``~~ 🚫 +- ` -; +```js noeditor +import LoginForm from './final/LoginForm'; + ``` ### The task -1. Create a `LoginPage` component. +1. Create a `LoginForm` component. +2. Use only primitives for layout, whitespace (`Box`, `Flex`, `Grid`, and `Stack`) and text (`Text`, `Heading`, `Button`, and `Link`). +3. The layout should be responsive and the labels should be placed above input fields on a narrow screen. + +**Hint:** Use arrays for responsiveness, like this: `gridTemplateColumns={['1fr', '1fr auto']}`. -2. Use only primitives for layout, whitespace (`Box`, `Flex`, `Grid`, and `Stack`) and text (`Text`, `Heading` and `Link`).
Solution -```js {"file": "solutions/5.2.js", "static": true} +```js {"file": "./final/LoginForm.js", "static": true} ```
diff --git a/src/exercises/5-Patterns/SubscriptionForm.js b/src/exercises/5-Patterns/SubscriptionForm.js deleted file mode 100644 index b9058271..00000000 --- a/src/exercises/5-Patterns/SubscriptionForm.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import Stack from '../../components/primitives/Stack'; -import Box from '../../components/primitives/Box'; -import Button from '../../components/primitives/Button'; -import Input from '../../components/primitives/Input'; - -const SubscriptionForm = ({ - id, - onSubmit, - onEmailChange, - email, - loading, - success, - error, -}) => ( -
- - -
-); - -export default SubscriptionForm; diff --git a/src/exercises/5-Patterns/SubscriptionForm.md b/src/exercises/5-Patterns/SubscriptionForm.md deleted file mode 100644 index 11611436..00000000 --- a/src/exercises/5-Patterns/SubscriptionForm.md +++ /dev/null @@ -1,3 +0,0 @@ -```jsx harmony - -``` diff --git a/src/exercises/5-Patterns/final/LoginForm.js b/src/exercises/5-Patterns/final/LoginForm.js new file mode 100644 index 00000000..8c25441e --- /dev/null +++ b/src/exercises/5-Patterns/final/LoginForm.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { + Heading, + Text, + Box, + Flex, + Grid, + Input, + Link, + Button, + Stack, +} from '../../../components'; + +export default () => { + return ( + + Login please + + + Username + + + + + + Password + + + + + + + + + Forgot your password? + + + + ); +}; diff --git a/src/exercises/5-Patterns/solutions/5.1.js b/src/exercises/5-Patterns/solutions/5.1.js deleted file mode 100644 index 804eae42..00000000 --- a/src/exercises/5-Patterns/solutions/5.1.js +++ /dev/null @@ -1,40 +0,0 @@ -/* eslint-disable jsx-a11y/accessible-emoji */ -import React from 'react'; -import Grid from '../../../../src/components/primitives/Grid'; -import Button from '../../../../src/components/primitives/Button'; -import Input from '../../../../src/components/primitives/Input'; - -const SubscriptionForm = ({ - id, - onSubmit, - onEmailChange, - email, - loading, - success, - error, -}) => ( - - - - -); - -export default SubscriptionForm; diff --git a/src/exercises/5-Patterns/solutions/5.2.js b/src/exercises/5-Patterns/solutions/5.2.js deleted file mode 100644 index 58c5ddd0..00000000 --- a/src/exercises/5-Patterns/solutions/5.2.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import Box from '../../../../components/primitives/Box'; -import Flex from '../../../../components/primitives/Flex'; -import Heading from '../../../../components/primitives/Heading'; -import Button from '../../components/primitives/Button'; -import Link from '../../../../components/primitives/Link'; -import Text from '../../../../components/primitives/Text'; -import Input from '../../../../components/primitives/Input'; - -const LoginPage = () => { - return ( -
- Login - - Username - - - - Password - - - - Forgot your password? - - -
- ); -}; - -export default LoginPage; From 869a1d03b9375fc30e37eb3b78d9caa766ed68ad Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Sun, 15 Mar 2020 22:20:41 +0100 Subject: [PATCH 06/11] Export all primitives via index.js --- src/components/index.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/index.js diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 00000000..ccf462de --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,14 @@ +export { default as Box } from './primitives/Box'; +export { default as Button } from './primitives/Button'; +export { default as Card } from './primitives/Card'; +export { default as Flex } from './primitives/Flex'; +export { default as Grid } from './primitives/Grid'; +export { default as Heading } from './primitives/Heading'; +export { default as Icon } from './primitives/Icon'; +export { default as Image } from './primitives/Image'; +export { default as Input } from './primitives/Input'; +export { default as Link } from './primitives/Link'; +export { default as Select } from './primitives/Select'; +export { default as Stack } from './primitives/Stack'; +export { default as Text } from './primitives/Text'; +export { default as VisuallyHidden } from './primitives/VisuallyHidden'; From c6dff525c97dab1da1b377b88a6b619146f2829d Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Sun, 15 Mar 2020 22:21:31 +0100 Subject: [PATCH 07/11] Add support for SC and imports in the styleguide examples --- styleguide.config.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styleguide.config.js b/styleguide.config.js index c2c74aaa..e2c4ffbb 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -23,6 +23,15 @@ const config = { pagePerSection: true, exampleMode: 'expand', usageMode: 'expand', + compilerConfig: { + transforms: { + // Support for styled-components + dangerousTaggedTemplateString: true, + + // "Support" for `import` syntax + moduleImport: false, + }, + }, webpackConfig, updateExample(props, exampleFilePath) { const { settings, lang } = props; From d5fe6f788f32e6d24744fcbb3806b69f5aa4fb3d Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Sun, 15 Mar 2020 22:34:12 +0100 Subject: [PATCH 08/11] Update slides --- slides/cdds-upleveled.mdx | 93 +++++++-------------------------------- 1 file changed, 16 insertions(+), 77 deletions(-) diff --git a/slides/cdds-upleveled.mdx b/slides/cdds-upleveled.mdx index fad7586d..8768496b 100644 --- a/slides/cdds-upleveled.mdx +++ b/slides/cdds-upleveled.mdx @@ -30,18 +30,6 @@ export { theme } from './theme'; --- -
-
https://component-driven.io - } - >
-
- ---- -
## Andrey Okonetchnikov @@ -52,72 +40,26 @@ UI developer with experience in both design and development who specializes in i --- - - -# [bit.ly/cddwrkshp](https://bit.ly/cddwrkshp) - - - ---- - -
- -# πŸͺ“ `npm start` - -- [http://localhost:3000](http://localhost:3000) β€” App -- [http://localhost:6060](http://localhost:6060) β€” Final styleguide -- [http://localhost:6061](http://localhost:6061) β€” Exercises - -
- ---- - - - ---- - - - ---- - - - ---- -
react-styleguidist} - gap={4} - /> + src={require('file-loader!./assets/component-driven.svg')} + alt="Component-driven Logo" + caption={ + https://component-driven.io + } + >
- - -I have stickers with me. Please go grab one after the talk! - - - --- -# Design Systems +# How we build on the Web --- -## Why do we need design systems? - -1. Products becoming more complex -1. Development speed is mission critical -1. End quality is mission critical, too -1. Our processes of building for web are outdated - ---- - ## Building UI with HTML & CSS (past ~20 years) 1. Get a static mockup from a designer @@ -395,17 +337,6 @@ I have stickers with me. Please go grab one after the talk! --- -## Naming of design tokens - -- x-small small medium large x-large -- xs sm md lg xl -- xs s m l xl -- 0 1 2 3 4 5 -- 100 200 300 400 500 -- ~~alpha beta gamma delta epsilon~~ - ---- -
-# πŸͺ“ `npm start` +[Open Design](https://www.figma.com/file/cALZfCbmthI9VQz9MJR6JdPk/CDD-Workshop?node-id=0%3A1) + +
+ +--- + +
+ +# πŸ‘©β€πŸ’» `npm start` - [http://localhost:3000](http://localhost:3000) β€” App - [http://localhost:6060](http://localhost:6060) β€” Final styleguide From 595dbb68c94eabc7968c8bd6bd1e64da3187156e Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Sun, 15 Mar 2020 22:44:00 +0100 Subject: [PATCH 09/11] Update slides --- slides/cdds-upleveled.mdx | 24 ++---------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/slides/cdds-upleveled.mdx b/slides/cdds-upleveled.mdx index 8768496b..7b72f6cf 100644 --- a/slides/cdds-upleveled.mdx +++ b/slides/cdds-upleveled.mdx @@ -409,14 +409,6 @@ UI developer with experience in both design and development who specializes in i
-[Open Design](https://www.figma.com/file/cALZfCbmthI9VQz9MJR6JdPk/CDD-Workshop?node-id=0%3A1) - -
- ---- - -
- # πŸ‘©β€πŸ’» `npm start` - [http://localhost:3000](http://localhost:3000) β€” App @@ -1160,19 +1152,11 @@ export const Box = styled.div( --- - - ---- - - + --- -## API: Patterns - -- `` β†’ `...` -- `` β†’ `...` -- `` β†’ `products.map(product => )` + --- @@ -1247,10 +1231,6 @@ I have stickers with me. Please go grab one after the talk! --- - - ---- -