Hello!
I’m Natalya
natalyathree
Another Perspective
natalyathree
A larger pattern:
intersections between mental models
& how an entire career can be shaped by how we respond
natalyathree
CSS is at an intersection of mental models
natalyathree
Why the debate?
natalyathree
Why the debate?
natalyathree
Because
humans.
natalyathree
(very predictable)
Unlike a computer program, we don’t just acquire knowledge line by line as we read it, instead, we organize patterns of thought in our mind and construct meaning in the form of mental models.
natalyathree
Prior knowledge is key
natalyathree
What is your foundation?
Prior knowledge
can interfere with
new information -
“Beginners learn
CSS Grid faster than
those used to having
control over sizing”
- Rachel Andrew at CSS Day
natalyathree
The good, the bad,
& the cognitive dissonance
natalyathree
An educator expects new learners to feel frustrated! But, Amplification & reinforcement of poor reactions to encountering a different mental model can harm both the beginners in the tech community & the person venting their frustrations.
This behavior, if unchecked, can limit potential & create arbitrary barriers.
natalyathree
And still, it happens all the time.
So, how do we
make things better?
natalyathree
good news: because these barriers are arbitrary & often self-imposed,
we can do a lot to overcome them
natalyathree
those who are able to practice flexibility tend to surpass those who repeatedly reject the challenge of other ways of thinking. Above average learning takes deliberate effort
- not just hours spent
natalyathree
The infamous ‘gap’ between design and development
natalyathree
Design Assets
>
>
Application Code
natalyathree
?
Design Assets
>
>
Application Code
natalyathree
?
Design Assets
>
>
Application Code
natalyathree
?
Design
mental model
Interface
Development mental model
<>
<>
natalyathree
Design Assets
Design
System
Application Code
<>
<>
natalyathree
More than only documentation of patterns & agreement on conventions.
It’s how we collaborate.
natalyathree
One tool now common is a style guide or component library
natalyathree
Designer’s code
Developer’s code
>
(Scaffolding: Leaves no gap to bridge)
natalyathree
I saw
this:
natalyathree
I made
this:
natalyathree
Why tell designers to learn code when we can
create tools that serve as bridges between mental models?
natalyathree
Can we stop calling people unicorns when they can do two things?
natalyathree
Join the others doing the work to enable people!
natalyathree
https://www.sketchapp.com/
Code export
natalyathree
Shared Vocabulary
React could be this…
https://reactjs.org/docs/introducing-jsx.html
natalyathree
https://reactjs.org/docs/introducing-jsx.html
But instead, it’s this!
natalyathree
https://labs.jensimmons.com/
Firefox grid inspector tool
natalyathree
natalyathree
https://codepen.io/potch/full/GjmmGm
Tutorials and visualizations of all sizes
<>
CSS *is* Awesome - A Codepen by Potch
https://glenmaddern.com/articles/css-modules
The CSS Modules team felt we could attack the problem head-on — keep everything we liked about CSS, and build upon the good work that the styles-in-JS community was producing. So, while we’re bullish about our approach and firmly defend the virtues of CSS, we owe a debt of gratitude to those folks pushing the boundaries in the other direction. Thanks, friends! 👬👫👭
Glen Maddern
CSS modules + styles-in-js
natalyathree
https://patternlab.io/
Making docs easier
natalyathree
https://playbook.uie.com/in-house
Workshops & training
natalyathree
https://mrjoe.uk/workshops/
Big thank you to the organizers, volunteers, & speakers!
natalyathree
And of course, community building
Hire people who are good at different things
Enable them to contribute their best way
Embrace cognitive dissonance
Practice flexibility and other ways of thinking
Make a positive impact
natalyathree