Be like water: applying Bruce Lee's philosophy to web design

A presentation at View Source 2018 in October 2018 in London, UK by Chen Hui Jing

The web is a medium unlike anything we've seen before. It is interactive and dynamic, and we need to embrace it's nature instead of fighting it. Browsers are being updated and changing all the time, and adaptability is key. To change with change is the changeless state.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Starting at 15:50 - Hui Jing Chen: "Be like water: Applying Bruce Lee's philosophy to web design"@hj_chen at #ViewSource pic.twitter.com/IUvodOIl95
— View Source Conf (@viewsourceconf) October 26, 2018
Next up @hj_chen !!!! I am so excited!! Be like water! #ViewSource 🌟✨ pic.twitter.com/ssxvujF9RK
— Mandy Michael (@Mandy_Kerr) October 26, 2018
I’ve been looking forward to @hj_chen’s talk on my favourite philosopher all day. 😊 #ViewSource pic.twitter.com/xwImV0r2MM
— right-click → View Source → 😱 (@SamirTalwar) October 26, 2018
"Content that is fixed only looks good on certain devices." - @hj_chen at #ViewSource talking about how content should flow like water (which was a core philosophy of Bruce Lee, legendary martial artist and actor) pic.twitter.com/AhWqPS2Mf8
— View Source Conf (@viewsourceconf) October 26, 2018
Our web content should be like water and flow, we shouldn't be aiming to wrangle every pixel. Taoist web design, via Bruce Lee, from @hj_chen #ViewSource pic.twitter.com/7518rXK4WR
— M💀 @ ViewSource (@mrjesslynnrose) October 26, 2018
“The web is ever changing, at odds wit the fixed nature of frameworks” - @hj_chen #viewsource
— Benjamin Read (@muzzlehatch_) October 26, 2018
“The web is ever changing - at odds with the fixed patterns of frameworks” - @hj_chen on content and front end patterns on the web #ViewSource
— Mandy Michael (@Mandy_Kerr) October 26, 2018
All our layouts have to be flexible and resilient enough to work well for any format. CSS can help with dynamic displays.@hj_chen at #ViewSource quoting @rachelnabors pic.twitter.com/iUgguHVjCH
— View Source Conf (@viewsourceconf) October 26, 2018
“Things get a lot more interesting when we are not fixated on making things look the same all the time” - @ @hj_chen #ViewSource
— Mandy Michael (@Mandy_Kerr) October 26, 2018
Ohh I didn’t know that the transparency was ised in shapes for creating the flow of text! Good to know @hj_chen I had a Ooooooooh of course moment 😄 #ViewSource
— Mandy Michael (@Mandy_Kerr) October 26, 2018
"We embrace the fluidity of content and [work] with it, rather than against it." - @hj_chen at #ViewSource
Using the @Firefox Shapes Editor, we can flow text and even create it in an adaptive way so it adjusts with different contexts. pic.twitter.com/5RRzGvDwgI
— View Source Conf (@viewsourceconf) October 26, 2018
Would love to see more people making the most of vertical text. @hj_chen talking writing modes at @viewsourceconf #ViewSource pic.twitter.com/wKYYVRWTzJ
— Mandy Michael (@Mandy_Kerr) October 26, 2018
CSS is not a fixed technology, changes and improvements have been made for allowing us to create more complex layouts. #ViewSource @hj_chen
— Mandy Michael (@Mandy_Kerr) October 26, 2018
Don’t fight against the flexible nature of the flex 💪- @hj_chen #ViewSource
— Mandy Michael (@Mandy_Kerr) October 26, 2018
We can use CSS to create fluid designs that react to context much better than ever before.@hj_chen at #ViewSource pic.twitter.com/y8AkVK98ct
— View Source Conf (@viewsourceconf) October 26, 2018
Creative and effective use of Flexbox is not a hack, these tools are designed expressly to create interesting layouts.@hj_chen at #ViewSource

If you want to know more about Flexbox, @rachelandrew wrote the @MozDevNet docs: https://t.co/GSOe1bd4Jk pic.twitter.com/Nq75S3uzDg
— View Source Conf (@viewsourceconf) October 26, 2018
We can use CSS Grid to create Responsive grids without media queries #viewsource @hj_chen pic.twitter.com/f9nFNGU7HS
— Mandy Michael (@Mandy_Kerr) October 26, 2018
@hj_chen covers so many different CSS tools and techniques that can lead to ensuring our layouts flow 🌊- whether text around an image of Bruce Lee, or via fluid responsive grids using CSS grid. 🌊 #ViewSource pic.twitter.com/CS45TYXm2D
— Sareh @ ViewSourceConf (@Sareh88) October 26, 2018
If you're interested in using the CSS Grid Inspector (and our other CSS layout tools), you can read about those tools on @MozDevNet: https://t.co/lCpVHtfhlW @hj_chen at #ViewSource pic.twitter.com/mUr3POdX6z
— View Source Conf (@viewsourceconf) October 26, 2018
«Click the “waffle” icon to trigger the grid inspector.» #ViewSource @hj_chen pic.twitter.com/mPisKptTpo
— What's on your mind, Claudio? (@claudiopro) October 26, 2018
“No way is way.” — Bruce Lee@hj_chen rocked it at #ViewSource. pic.twitter.com/iV5aLK5HMa
— right-click → View Source → 😱 (@SamirTalwar) October 26, 2018
Thinking outside (and alongside) the boxes with @hj_chen & Bruce Lee — let your layouts flow and adopt thanks to powerful browser features, free of dogma and limitations, to embrace the True Nature of the Web. 💙 #ViewSource pic.twitter.com/i5JsrZ2h8Y
— Mozilla TechSpeakers (@mozTechSpeakers) October 26, 2018
Be like water, @hj_chen at #ViewSource. Video below is one of the simpler adaptions she showed. pic.twitter.com/Ki7c6Gm2xf
— Daniel 'Manual Json' Mason 🇪🇺🇬🇧 (@Gisleburt) October 26, 2018
"True observation begins when one is devoid of set patterns, and freedom of expression occurs when one is beyond systems" - Bruce Lee via @hj_chen #ViewSource pic.twitter.com/IQFmZFBhMT
— Alex Lakatos 🥑 🇬🇧 @ViewSource (@lakatos88) October 26, 2018
<Be like water> @hj_chen great talk on web fluid layouts @viewsourceconf
— Joana Chicau (@BChicau) October 26, 2018