Using Stylable Components & Designing for Standards – Designer vs. Developer #14

Using Stylable Components & Designing for Standards – Designer vs. Developer #14

MUSTAFA: Do you think
developers are giving up way too much control for the
potential benefits of an easier life? BRUCE LAWSON: The
end user doesn’t care whether your
website is made with React or Angular or
Webpack or Broccoli or Grunt or whatever. They just want it to work
in their damn browser. [MUSIC PLAYING] MUSTAFA: You’re one of the
masters of browser standards, as in you’ve been involved
in the challenges for quite some time. And it does feel
like we’re going through a cycle of this one
browser to rule them all. I remember back in
the days of IE6. And it does feel that there
are challenges, especially like WebKit browsers. BRUCE LAWSON: I agree that
we go around in cycles. I’m old enough to remember– I know you won’t
believe it– but I’m old enough to remember
the glory days when Netscape ruled the world. And it was IE6, like you said. Then Firefox, then–
what was next? Then it was Safari, then Chrome. People tend to assume that
their customers or their users are all like them. But you have to get
out of that mindset. And it’s really injurious
to the health of the web if people just code
for one browser. We saw it in Opera when we
had to start implementing WebKit-only features, just
because, although they worked in Opera if you
used the O prefix, people didn’t because
they were– oh, this is for iPhone only. So we ended up having to
implement other people’s vendor prefixes, which just screwed
up the standards for everybody. And I think even Microsoft
does that now too, because when they had the
Windows mobile browser, they got caught with the
WebKit-only stuff too. It’s bad. But unfortunately,
people seem to think that there’s only one browser
out there, and it’s yours. MUSTAFA: Yeah. We see that a lot. Only works best in– whatever. And I always find
this quite damaging, because that’s not
the only browser. Especially it does feel
very Western-centric. There’s a whole world out
there that’s not based on– How can we get developers to
start thinking about that, shake up the in– not
necessarily shake up the industry, shake
up the developers? Say, look, unless your
product is only specifically for your neighborhood, you need
to be considering these things. Is it the responsibility
on the developer? Is it a toolchain thing,
where you actually start making sure that the
tools or even the browsers say, look, this is not going
to work in other browsers? BRUCE LAWSON: That would be good
if the Chrome dev tool said, PS, this isn’t going
to work in Firefox, or something like that. But I think it’s a matter
of just having a broader perspective. Even making things that were
only for your neighborhood, you never know where
your customers are. When I was doing talks about
the Wealthy Western Web, I used to use the example
of a site called– it was called
Stepping Out, I think. And it was a dating
site in New York for conservative
Jewish families, where one-on-one dates
weren’t appropriate. So it would be like 10 Jewish
guys and 10 Jewish women would go out for a group date. And they didn’t really get
critical mass, these guys, and they were going to
turn off the servers. And they noticed
they were getting loads and loads of sign-ups
from India, Bangladesh, and Pakistan, because
this group dating model worked equally well for
conservative Hindu, Muslim, or Sikh families. And they ended up getting more
sign-ups from the subcontinent than they’d ever
got in New York. And then they moved to Mumbai
and re-branded as Stepping Out and became India’s
biggest dating site, even though the
three guys had never left New York before that. Yeah, if you’re making a website
for a neighborhood pizza joint, you’re probably not
expecting much custom from India or Nigeria. But really, you never ever
know where your next customers are coming from. And unless you have more money
than you know what to do with, you don’t want to turn
away potential customers. Simple as that. MUSTAFA: So in terms
of some of the stuff that you’ve been working on
recently, like the tools, how does a designer
think in this way? How does a designer think
in terms of standards? Because we just create
things in Sketch. We’re not thinking
about performance. Now, accessibility is
only really a new thing that designers are
really considering. And just the tools are
not necessarily already there to educate
them, because I know you’re working on
something called Stylable. BRUCE LAWSON: Stylable is
a way of extending CSS. Because what we found, as
websites get more and more app-like– and I don’t like to use
a particular distinction between a site and
an app, because I think it’s a spectrum. But as we get more and
more sophisticated sites, we’re tending to use many more
components-based methodologies, whether that’s React or
Angular or web components. And the challenge has been
to impose unified styling on those. And we’re at this
weird position with CSS that we’ve just finally got
really good tools for design with things like Flexbox
and CSS Grid and CSS Shapes and all the filters
and the masks. And yet, we’re seeing lots and
lots of companies moving away from CSS and doing it in
JavaScript simply because it’s easier to encapsulate
the CSS to the components and put that in the toolchain. And I think that’s
a great shame, because you hire
a great designer, and great designers
are hard to find. And you’ve got one,
and their language they use to express
their designs is CSS, because nobody
designs in Photoshop anymore. And then we ask them to learn
something else, some kind of weird JavaScript
Franken-syntax, to express their
designs that way. It seems to me, A,
counterproductive to hire somebody who’s an
expert and then require them to change
the way they work, and also discourteous. Can you change the
way you work to fit in with our weird
toolchain, where we’re expressing CSS in JavaScript,
is a wrong thing to do. And anybody who thinks
that it’s fine, well, I invite you to leave your
copy of VS Code open and let the designers change all
the fonts and the color schemes and see how that boosts
your productivity. So Stylable is a way of
extending CSS, but keeping within CSS syntax and rules. So all of your code hinting,
code completion, et cetera, still works, and your
toolchains still work. But we extend it within
the existing syntax rules, so that you can guarantee
your styles are scoped to a component, but also
so you can style components from the outside. We allow you to override
some rules, but not others. So you can change borders
and colors, for example, but not change display
in line because that would break the component. It’s been developed
in-house by Wix. And we’re currently moving
the 110 million Wix websites that already exists
to use Stylable, because it’s more performant. But when they asked me
to help design the API, I said, well, I’d like
to help, but can we make the product open source? And they said, duh. Yes, of course. So I thought, great. If it’s going to be BSD licensed
so everybody can use it, count me in. Then they hurl
lots of money at me to do good for the community. So that’s a win-win. MUSTAFA: Sometimes, it feels
like we design our experiences based on the tools
that we’re using rather than based on what’s
necessarily best for the user. So it’s like the reason why
WordPress is so successful, because it was so easy for
the developer to produce. The reason why jQuery
was so successful was because JavaScript at
that point in time was so– like for me as a
designer, I just didn’t make sense
that you’d have to do all these separate
use cases for browsers. Do you think the same thing
with some of these libraries still exist? Is that why we
gravitate towards them? And what’s the
dangers of doing so? BRUCE LAWSON: I don’t
know that there’s a particular technological
danger per se. Again, it comes to fashion. Like with browsers,
people say jQuery is over. It’s not. And there’s gazillions of
websites happily using jQuery still. But the zeitgeist has moved
towards things like React. And I think the biggest
danger is that people become experts in a particular tool. And then you ask them to do some
vanilla JavaScript programming, and they’re floundering. On the opposite way, I can
write the vanilla stuff, and then I get confused
by the toolchain. For me, every time I have to
re-install Node and Webpack and this and that, and
Babble, a little bit of me dies inside, because
I don’t know what’s going on on my machine anymore. And there’s this elaborate
system of dependencies. And because I used to be
an Assembler programmer back in the late ’80s,
I’m sort of a control freak with my machine. And there’s all
this stuff going on. And if any part of it breaks,
I’m completely at a loss to fix it. MUSTAFA: So do you think
there’s a degree of ethics that our industry is missing? BRUCE LAWSON: Yes. I think that people
should always think about the end user. The challenge, of course, is
the end user is probably– well, is certainly not you,
with your brand-new MacBook Pro with your Pixel
Phone 2, for example, and super-fast broadband. But it’s just human nature to
assume that the world exists as you see it. You just have to
be more empathetic. Likewise, with accessibility. I was looking at a
site the other day with tiny, tiny font, light-gray
on a white background. Now, I wear specs, but
I’m not visually impaired. But I couldn’t read it, because
I’m halfway to 100 years old and so my eyesight
is degenerating. And everybody’s
going to get old, so you’re designing
for your own future and not some mysterious disabled
person who you don’t know. Just be good. MUSTAFA: Do you
think these tools are damaging the open
web, this idea that it’s accessible for everyone? Because it does
sometimes feel that when we hide things in these
tools for quick fixes, it’s like caffeine. It’s great to help you be
alert, but the long-term effect can be quite damaging. But we don’t really think
about the long-term effect. BRUCE LAWSON: If you’d asked
me this five years ago, I’d have said yes, it is
damaging the open web. But I think, like
everything else, it’s more nuanced than that. People, developers
and designers, quite rightly always push the
boundaries of what’s possible. And we saw that with Flash. And it’s fashionable,
it has been fashionable, to mock Flash. But as you’ll remember,
when Flash was announced, I wrote a blog post thanking
all the Flash developers, because they pushed
the web forward. And arguably, they were
damaging the open web. But those of us who
advocated for the open web, it was a kick up the
arse for those of us who made the standards to make
better standards that actually allow people to do
what they wanted to do. HTML5 only came about because
those of us in Opera and Google and Firefox who kicked
it off were terrified of Flash and Silverlight. If Flash hadn’t
pushed us forward, I don’t know the web would have
advanced as far as it is today. So yeah, there’s always
a risk that those who are really
pushing the boundaries are giving the open
web a challenge. But those of us who advocate
and push for the open web have to rise to
meet that challenge. And then we make it broader,
and people push the boundaries, and thus evolution happens. MUSTAFA: And what do
you hold for the future? BRUCE LAWSON: I think
that we’re going to see– whether or not I’ve retired
by the time we see it– but in the next 10, 20 years,
people are going to have to wake up to the fact that the
majority of their new customer base are not coming from Silicon
Valley, not coming from Europe, but are coming from
emerging economies– Brazil, India,
Indonesia, Nigeria. It’s a very young demographic. And the people there
are rapidly becoming more and more middle class with
a greater disposable income. These are places who see
themselves as world citizens rather than national
citizens, who are looking to buy goods
and services and experiences from outside their nations. This is where your
customers are coming from. And if your website
doesn’t work for somebody on a low-range Android
in Indonesia or Nigeria, your competitor’s website will. SPEAKER 3: You get
to the point where you’re dreaming about coding– so thinking about old videos and
watching and hearing the theme tunes of different
videos in your head. So you’re living
and breathing it. So it’s a lot easier for
those aha moments to happen.

12 thoughts on “Using Stylable Components & Designing for Standards – Designer vs. Developer #14

  1. Special thanks to Bruce for being apart of this, be sure to checkout the links in the description.

  2. Incredible episode, really amazing how much we can force sites app likes to do so many tasks.

  3. Ouh man… you don't know how much i share your opinion about dependency nightmare… I really hate NPM and framework stuff. After some years it will be impossible to find good developers, who know just simple vanilla stuff.

  4. It is good to have the views heard from an expert who has more than a decade of experience. I have heard and experienced the young folks who are very bright at new set of technology and can speak well, but often miss the connection from the past to predict where the technology is going.

  5. The argument is not wrong, but i think it's kind of backwards, learning to optimize code is the last stage of the evolutionary process of genius coders, the reason that they can do it is because they have a greater understanding of how things work.

    What i mean is that you cannot simply decide we should 'do optimized code' if you don't have the knowledge to be able to do it properly, in my opinion it's more a matter of putting a bigger focus on learning. You could optimize the process that would generate a larger amount of genious coders, unfortunately reality is not utopia and the greater need will be met by the moderates, driven by people who wan't 'results now', thus not allowing coders to take the time to properly evolve.

    First principles, to use a popular term, would be to focus on the knowledge of, in this case JS, proper markup/templating and optimizing your css instead of relying on shortcuts where using tools and frameworks that makes every problem look like a nail to hammer it with.

    To put it into context, japanese woodwork used to be an artform and they managed to create works of incredible quality, beauty and endurance. True artisans spent a lifetime of learning the trade. Today all that knowledge has been lost and they have begun to "lament the loss of traditional knowledge", now that they're realizing the true value of what they've forgotten they are in the process of rediscovering these lost techniques.

    "You cannot grow if you lose touch with the roots"
    2 cents worth.

Leave a Reply

Your email address will not be published. Required fields are marked *