Be like water

Applying Bruce Lee's philosophy to web design

By Chen Hui Jing / @hj_chen

View Source
Chen Hui Jing
Jing
@hj_chen
🇲🇾 🏀 👩‍💻 📝 🦊
Mozilla TechSpeakers

https://events.mozilla.org/techspeakers

Nexmo Developer Relations

🥑 Developer Advocate 🥑

Nexmo

Bruce Lee

李小龍

Be formless, shapeless, like water.
Now you put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put it in a teapot, it becomes the teapot.
Now water can flow, or it can crash.
Be water, my friend.


—Bruce Lee
👐
Physical media
👐💻
Digital media

What about frameworks?

Popular CSS frameworks

Preformations simply lack the flexibility to adapt to the ever changing.


—Bruce Lee

Let's establish a new normal

State of Browsers (2018)

Available browsers on the market

and many more...

Yes, it's easier to develop and test in only one browser. I'm sure IT professionals would have loved to only support one kind of machine. But variety creates opportunity for us as developers in the long run.


—Rachel Nabors, The Ecological Impact of Browser Diversity

Feature Queries

To write style sheets that use new features when available but
degrade gracefully when those features are not supported

Browser support

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}
Wismut Labs site layout on browsers with no feature query support Wismut Labs site layout on browsers without Shapes support Wismut Labs site layout on browsers with Grid and Shapes support

It is futile to argue as to which single leaf, which design of branch, or which attractive flower you like; when you understand the root, you understand all its blossoming.


—Bruce Lee

Transforms

Allows us to change the shape and position of the affected content
without disrupting the normal document flow

2D transform functions

rotate( <angle> ) Performs a 2D rotation by the angle specified around the element's origin
translate( <translation-value> [, <translation-value> ]? ) Performs a 2D translation in the specified X and Y directions
skew( <angle> [, <angle> ]? ) Performs a 2D skew by the angles specified
scale( <number> [, <number> ]? ) Performs a 2D scale operation by the scaling vector specified

Diagonal text with rotate()

.trf2d-cont {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows:  repeat(3, 2em) repeat(3, minmax(10vmin, 3em)) 2em 2em 50vh;
  grid-gap: 0.125em;
  position: relative;
}

@media screen and (min-width: 480px) {
  .trf2d-cont {
    transform: rotate(-30deg) translateX(5vh);
  }
}

@media screen and (min-width: 640px) {
  .trf2d-cont {
    transform: rotate(-30deg) translateY(-15vh);
  }
}

Perspective text

Rethinking Web Design

Browser support

CSS Shapes

Defines properties to control the geometry of an element’s float area

Basic shapes

Lollipop marshmallow lemon drops jujubes muffin fruitcake bonbon. Muffin carrot cake bear claw sweet roll tiramisu chocolate jelly beans toffee sweet roll. Biscuit candy sweet sweet powder tart bear claw. Tiramisu jelly beans apple pie donut topping dessert lemon drops gummies halvah.

Dessert pie dragée fruitcake chocolate oat cake donut muffin. Chocolate lemon drops cake muffin. Bonbon lemon drops chocolate fruitcake jujubes chupa chups sesame snaps sesame snaps pudding. Pastry chocolate jelly beans cake wafer.

Donut jelly toffee macaroon macaroon. Cookie sesame snaps chupa chups. Lollipop jelly lollipop brownie pastry gummi bears.

Gummi bears apple pie chupa chups jelly pie halvah pastry sweet. Cookie dessert sweet roll icing cheesecake macaroon wafer cheesecake. Toffee lemon drops apple pie fruitcake sweet roll chocolate cake jelly bear claw jelly. Donut tiramisu chocolate cake sesame snaps marshmallow tootsie roll candy canes cheesecake cotton candy.

Cake powder croissant lollipop cotton candy tiramisu lollipop tiramisu. Cookie candy canes gummies jujubes bonbon fruitcake ice cream gingerbread. Marzipan toffee carrot cake marshmallow danish cupcake jelly-o.

Halvah brownie lollipop. Chocolate cake marshmallow croissant muffin macaroon pastry. Gummies danish soufflé muffin gingerbread. Lollipop jelly cake croissant sesame snaps macaroon.

Biscuit gummies tart gingerbread wafer jujubes sweet roll. Wafer oat cake carrot cake liquorice chocolate bar chocolate cake jelly-o. Pastry donut oat cake. Fruitcake candy apple pie cake tootsie roll cotton candy candy canes. Halvah halvah chocolate jelly-o macaroon.

Macaroon dessert sweet roll dragée candy. Sweet cheesecake lemon drops. Sweet tart chocolate cake candy canes powder cotton candy. Apple pie danish chocolate cake danish bonbon. Muffin soufflé topping carrot cake chocolate. Macaroon toffee chupa chups sesame snaps gummi bears.

Firefox Shapes Editor

MDN: Edit Shape Paths in CSS

Shape from image

Lee Jun-fan (李振藩), known professionally as Bruce Lee, was a Hong Kong and American actor, film director, martial artist, martial arts instructor, philosopher and founder of the martial art Jeet Kune Do. He is widely considered by commentators, critics, media, and other martial artists to be one of the most influential martial artists of all time.

Lee was born in Chinatown, San Francisco, on November 27, 1940, to parents from Hong Kong, and was raised with his family in Kowloon, Hong Kong. He was introduced to the film industry by his father and appeared in several films as a child actor. Lee moved to the United States at the age of 18 to receive his higher education at the University of Washington in Seattle, and it was during this time that he began teaching martial arts.

Browser support

Vote for Shapes on WPDev User Voice

Writing-mode

Defines CSS features to support for various international writing modes

Vertical text

Halt and Catch Fire

“Computers aren't the thing. They're the thing that gets us to the thing.”

“How did we all get here today? The choices we made, the sheer force of our will, something like that? Here's another answer... the winds of fate. Random coincidence, some unseen hand just pushing us along. Destiny.”

What are you searching for?

Vertical headers

Vertical tags

Vertical links

Increment navigation and menu

Vertical navigation

Flexbox, Box alignment & Grid

Flexbox

Provides “simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.”

Auto-margins

Flex lines

Single flex line, nowrap
nowrap
Multiple flex lines, wrap
wrap
Multiple flex lines, wrap-reverse
wrap-reverse

Flexbox layouts (1/2)

Flexbox layouts (2/2)

calc() and object-fit browser support

CSS Grid

Defines a two-dimensional grid-based layout system,
optimized for user interface design

Flexible tracks with fr

Represents a fraction of the free space in the grid container.

Item A

Item B

Item C

Fluid CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 3fr 2fr);
}

Flexible tracks with minmax()

Defines a size range for columns or rows in the grid.

Item A

Item B

Item C

The repeat() function

To specify a large number of columns or rows that follow a similar pattern

Item

Item

Item

Item

Item

Item

Item

Item

auto-fill vs. auto-fit

Allow browser to determine how many tracks to create depending on track size.

Auto-fill
repeat(auto-fill, 100px)
Auto-fit
repeat(auto-fit, 100px)

auto-fit collapses empty tracks.

auto-fill versus auto-fit

A

B

C

D

E

F

Responsive grid without media queries

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

The implicit grid

A

B

C

D

E

F

G

H

I

J

K

L

The grid-auto-flow property

Adjusting the direction and density of grid items

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

Firefox Grid Inspector (1/2)

Firefox Grid Inspector (2/2)

Flexbox boxies Grid boxies

They no longer ‘listen’ to circumstances; they ‘recite their circumstances’.


—Bruce Lee

Really recommended reading

True observation begins when one is devoid of set patterns, and freedom of expression occurs when one is beyond systems.


—Bruce Lee

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Tofino, by Alanna Munro