Globalization Tools – The State of the Web
Articles,  Blog

Globalization Tools – The State of the Web

everyone, and welcome back to “The State of the Web.” My guest is Andrey Sitnik,
lead front end developer at Evil Martian and creator of
many popular web development tools like PostCSS,
Autoprefixer, and Browserslist. And today, we’re talking about
developing for a global web. Let’s get started. [MUSIC PLAYING] All right, so Andrey,
thanks for being here. I mentioned in the
intro that you’re the creator of many
popular web DevTools. What was your motivation
for creating them? ANDREY SITNIK: The first
tool which I created, become popular, was
Autoprefixer, and it was– some stories behind the project. And one of the reason was that
I’m originally from Russia. In Russia, there was a very
popular browser called Opera. But unfortunately, people
outside of Russia and Norway didn’t know about the browser. And as a result, they
didn’t support it. I mean, not like
testing the browser. I mean that completely ignore
that this browser exist. Like, avoids the prefixes. I’m talking about
CSS vendor prefixes when you need to write dash
WebKit dash [INAUDIBLE].. And so they completely
ignore the O prefix. It was maybe not so big deal,
because all this properties was mostly about visual stuff. But it was not so great
when you’re using a website and they just avoiding– don’t know about some browsers. And especially start–
it become more sensitive, [INAUDIBLE] the mobile
development, when Safari browser was extremely popular. And people just start to
ignore all other web browsers, like avoid unprefixed
version, like writing only WebKit [INAUDIBLE]
and not just [INAUDIBLE].. And all this thing with prefixes
become very, very crazy. And as result,
definitely should be solved by some
automatical tools, because it is very hard to teach
people about all these best practices. It’s sometimes better to
just give them instrument which will care about it. RICK VISCOMI: So what
is the user experience like for somebody visiting a
website that is not developed with a global mindset? ANDREY SITNIK: The main
problem, maybe it’s not like the real support,
because if the website doesn’t have round borders,
it’s not a big deal. Main problem was when websites
just block your browser. Like, they check
user agent, and just show this browser
is not supported. Especially it’s a
big problem right now when you have a lot
of Chromium browser. And they work very
similar to the Chrome, but unfortunately,
still a lot of browser just– a lot of websites
just block them. And of course,
it’s not so great. RICK VISCOMI: Mm-hmm. And it’s beyond just a
problem of not translating into somebody’s language. There are other things like
the date and time that are not formatted for somebody’s
own locale, or even first and last name fields. Like, do you have an example
of any of these things? ANDREY SITNIK: Yeah. Like, I understand that if you
will translate your website, it will be better,
but I understand how big it is as a problem. It’s not a problem just
translating messages. It’s a problem that you need
to create a community which will update the interface. And it’s really hard. For instance, GitHub
tried to do it, but they decided
to not go in there. And I completely understand it. It’s really hard problem. But sometimes it
just, you know– it’s not a problem to
use English websites. It’s not so big problem. At least you can use a
translator in the browser. But the main problem is when
the whole interface is not works very well with your culture. Like my favorite example
is the name field. Like, a lot of people create
first name and surname or family name, but
unfortunately, it doesn’t fit the
reality of the world. Doesn’t fit even in
Europe, because in Europe, you have countries
without a family name. They use only father’s names. And we have countries which
use only one name, sometimes. Or my favorite example,
in some countries, is people with a name
only with a one character. It could be like Chinese
character, or even sometimes they just one or two or
three English characters in transliteration. And websites just show that
your name is too short. RICK VISCOMI: [CHUCKLES] ANDREY SITNIK: And
you can’t use it. RICK VISCOMI: But
that’s my name. [CHUCKLING] ANDREY SITNIK: Yeah. RICK VISCOMI: Yeah. ANDREY SITNIK: Unfortunately. Yep, this is a problem. And so if you are creating a
website and you need a name, just put a single field. People will figure
out how to use, what they should put inside. RICK VISCOMI: So is the
global mindset something that all websites
need to consider, or does it only affect
people who intentionally try to target a global audience? ANDREY SITNIK: I understand that
sometimes developers creating websites, you know, very local. I don’t know, some
website for university. But even in this case, no, we
can remember accessibility. In accessibility, we
have a lot of rules, but these rules is not
important for the people who need accessibility
features all the time. Sometimes, any–
every person needs some accessibility feature. You can have a very
light sun on the street and can’t read the message, or
like, it’s too noisy outside. And the same with
thinking global. As I mentioned, there is
a lot of people in Europe which doesn’t have a
surname, family name. And as a result, when
you making a website, it will be definitely
people from these countries, like, living in New York,
because like, they– their parents came there,
and they will have a problem. So I think thinking global is
very important for any website, because it make our
solutions more flexible. And flexibility is always
better for the business, because when you creating a
website only for one browsers, oh, no, next time Opera– Apple creates a new browser,
and your website created only for Safari web browser. But if you’re creating it
for any type of the browser, it will be automatically
updated when– with new release of
prefix from browser list. RICK VISCOMI: Right. Even for a website that looks
at their analytics and says, 100% of my users are on
Chrome, so therefore I don’t need to develop
for any other browsers. That could be a logical
fallacy if their website is inaccessible to
users of other browsers. So there’s some survivorship
bias going on there. ANDREY SITNIK: Yeah. This may be– when we are
thinking about the short term, it may be a good idea. But if we will talk about not
technology, not something being good, but just
about the business, it’s very important to
also sometimes think about the long distance. You need to have a
balance between short term and long term. And we should always
remember that all of the problems of
Internet Explorer 6 was not because it
was a bad browser. In that moment, it was one
of some of the revolution of browsers in the world. The problem was that
we started to support only these browsers– browser. And as a result, we have
the same problem right now. If you will support
only Chrome, you really focused on the single
browsers, it start a monopoly. Monopoly always lead
us to stagnation. This is a common rule. And stagnation, in the end,
will affect your business. You will have a longer
time to deliver a feature. And this is very
critical for business. And so I think about supporting
all browsers is like for a ship company to support lighthouses. It’s not looking as a
part of the business, but if you will not have
lighthouses in your country, your ship business
will go very bad. And same with the browsers. We need to support
browsers just to have a nice, easygoing business in
like 10 years’ perspective. RICK VISCOMI: I
like that analogy. I want to go back
to Autoprefixer. ANDREY SITNIK: Yeah. RICK VISCOMI: You mentioned how
it adds these vendor prefixes. But it’s 2019 now. Is this still a big problem
that developers are facing? ANDREY SITNIK: To
be honest, I think you can safely remove
Autoprefixer in next two years. Maybe you should not do it right
now, because with some prefixes we should show care. Like, I don’t know, user
select or selection, which is very widely used. But– and also these
small changes browser, which you should care about. And they still need prefixes. It’s not a big deal to
add to Autoprefixer. But even in Chinese
market, like UC Browser is growing very fast. And it has very modern
WebKit join inside. So I think it’s not– it will be not a big deal
in the next two years. So, yep. Year after, you will– you should definitely think
about removing Autoprefixer. RICK VISCOMI: Could you
describe how Browserslist works and how that plays
into the global web? ANDREY SITNIK: Yep. I found that when we ask
a developer to select Autoprefixer, it insert only
actual browsers, not every– oh, not– inserts only actual
prefixes, not all prefixes. And as result, we need a
list of the target browsers. And all companies, they have
some sort of the listings. Not, maybe, in the
file, but maybe in speaking to each other. The main problem, that
when we ask developers to write the target
browsers, they only will be focused only on
browsers which they know. And definitely they will ignore
Opera Mini or UC Browsers. Maybe not because they
don’t need to support it. For instance, Opera
Mini, that has more users than desktop Firefox and
desktop Safari together. It’s really big market, or
UC Browser, it’s really huge. But a lot of developers
just don’t know it, and just not afraid. It’s OK, but it’s a problem
of developing experience. If we want developers to not
remove the unknown browsers, we should use a very
different user interface to select a target browsers. And this is– was a reason
of creating Browserslist. In Browserslist, you
describe a queries, like some more common
way to describe what browsers you need to support. For instance, the last two
versions of feature browsers. Or, not dead browsers, which
doesn’t have security updates. Or maybe a bigger than
1% in my own statistics. And so Browserslist
do all this stuff. And it’s used not only
in Autoprefixer, but also in [INAUDIBLE] and in a lot
of very interesting tools like PostCSS Normalize
or PostCSS Preset. And so we are thinking
about the Browserslist as the single source of
the truth about your target browsers, not only
for the tools, but maybe sometimes for
developers, for the people. When you have a new junior
developer, if you [INAUDIBLE] widely used Browserslist
config, he or she will know where to go to check
what is the current browsers. And it will be much
better to not bite into your time of
asking, do we need to support Internet Explorer? RICK VISCOMI: Right. So you’ve described PostCSS as
a tool for tools, one of which is RTLCSS. Why is RTL so important? ANDREY SITNIK: I will start
with talking about the PostCSS to then describe RTLCSS. So PostCSS is a framework
to make a CSS tools. It was created when I
understand that when you’re making CSS tools,
[INAUDIBLE] sort of common, like you need to parse CSS. You need to generate
source maps. And I wanted to have a more
diversity in CSS tools. I want maybe not just in CSS
tools, but in CSS itself. So I wanted a lot of the
people to suggest new idea for the syntax to
create a [INAUDIBLE] to test it in the real world. And then, when you
have a real experience, suggest it to CSS working group. And so it was a framework
to teach people to create very different solutions. And RTLCSS was one– definitely one of
my favorite example about what you can
do with PostCSS. RTLCSS is a tool. No, I need to start
from linguistic. In some of the countries, like
Arabic countries and Israeli, people writing not from the
left to right, but from right to left. And, you know, language
affects a way how we think. And so writing in
different direction affect how you think
about the space and time. And thus result for
them, the time going from different directions. The future is on the left-hand. And same, like, the most
attentional part of the web page is in a different
direction as– a different part. And as a result, we need to
mirror the whole website. We need to put menu from
one side to another. We need to put progress bar
to a different direction. And RTLCSS is doing
all of this stuff without changing your code. There is a very nice example
in RTLCSS documentation, when they just took– compile it, CSS of
GitHub, processed it, and create an Arabic– no, RTLCSS version of GitHub. It was very nice example. RICK VISCOMI: So
what are some things that developers can do
to change their mindset and to think more globally? ANDREY SITNIK: That’s
a good question. Of course, the main
reason is not about– that everyone must
think globally, because I understand that
people don’t have the time. We have really a lot of
things to think about. And to make your
site global, you need to do only a
few simple things. For instance, don’t
block unknown browsers. If you see some
browser in like your– like, in Browserslist
output, don’t remove it just because you don’t know it. Try to not remove Opera
Mini if you don’t– really not sure that
your website completely can support it. Or, for instance, if you want
to make your bundle smaller, don’t cut all the Chinese
browsers with old prefixes. Just create two
different bundles, one for yes models, for
the very small browsers for a modern Chinese browsers,
for Chrome and Firefox, and the second one will be
big for all other browsers. So it’s not something,
really, that you should learn every day,
making a website global. Just don’t cut ways
for other developers. But be– think more global. Like, try to be curious
about other countries. It’s better for
you as a developer, because there is a lot
of interesting ideas around the world. For instance, the adaptive
design was created in Russia by– five years before
it was created in– become popular in
the United States. Or, for instance,
in China, right now there is a lot of interesting
experiments about technology. And the American
company already start to copy these
[INAUDIBLE] startups. So differently will
be better for you to know how it works
in the global web and the global world,
because as a result, you will be the better
developer because you will copy this great idea. What I can suggest
to do, the first, I think it will be very
better for our community if we will start to mix people
from a different conference. Because right now, there
is a Western conference and Western speakers and they
are together, right, now, in big countries, with
local communities. And there is not
so much movement between these two worlds. My point, my biggest
point, that people from the small, local
community should go to the Western
Conference, and this will be a very interesting part. I understand why they
are not going, though. They have a lot of great ideas. They have a lot of great talks. I know you can just
describe how the software development working
in your country, and it will be a great talk. Like, I’m really
waiting for a talk, like about the Russian design
on some Western conference and about a Chinese
way to do it. And, I don’t know about
how Arabic country do all this RTLCSS stuff. It’s really interesting. But a lot of the people,
a lot of great speakers from the countries, they
are afraid their accent. And I completely
understand them, but there is very interesting
and very simple solution. If you’re afraid of
your accent, you just should put everything
that you need to tell, to your slides, the text. As a result, even
if people do not understand what you
are talking about, they will read it
from the slides. And it is not a problem
because of your accent. [INAUDIBLE] also, problem of
the people on this Western conference, in this city– in
the center of New York, more– most of them will not
be native speakers. And maybe, your English
will do better for– [INAUDIBLE] their English. So putting everything on
the slides is a good idea. So then you should
not– will not care about what you are
talking, and your voice will be just the emotional
addition to your information. And it will be not a
problem with having a very strong accent to
make your presentation. So the first idea is
to make some speakers, but the second idea is
maybe more tweaking, not maybe about the
globalization itself, but about the
diversity of ideas, especially right now in
JavaScript, when we are all creating React websites,
just because we are afraid to be blamed for not
using– not popular solution on some meetup. It’s definitely not
a good way to make– RICK VISCOMI:
Resume-driven development? [CHUCKLES] ANDREY SITNIK: Yeah, definitely. So we should promote
smaller solutions. We should not focusing on the
one solution for everything. I have a rule to
think twice if I want to retweet a
very popular person, and simply ask if I found
interesting tweet from not popular user with
less followers. And the [INAUDIBLE] retweet
some crazy interesting idea. Like, there is, right
now, very interesting project called
[INAUDIBLE] protocol. It’s a protocol to
creating a new type of web, protected from the censorship
and also protected from the– all these privacy issues
which we’re having right now. But also, there is
a very nice idea of new way to making
a website, especially with very bad
internet connection. It called local-first. It use a very new– technically not a very
new, but very interesting scientifical idea called CRDTM. It’s not the only
thing that they use. Like, local-first
is the idea that you have a database, some sort of
database in your application, and instead of sending
[INAUDIBLE] requests, you synchronize this
database with your servers. And as result, if
internet is bad, you can still work on
your mobile application. Just wait a little
longer until you will be sure that
everything is synchronized. And so few people create and
can manifest about this way to make an application
called local-first, and I definitely promote. And even right now, I’m
not spending so much time on PostCSS to spend more
time of creating frameworks to this idea. Right now I’m creating
[INAUDIBLE] frameworks. RICK VISCOMI: That’s great. Finally, would you
recommend any resources for people who want to learn
more about these tools? ANDREY SITNIK: This
is a good idea. I definitely recommend a
manifest of local-first. It’s [INAUDIBLE] which
everyone should know about. I definitely recommend
to look somewhere outside of React frameworks. Definitely recommend
to look into Svelte framework, which
is really great, and Preact, which is very
compatible with React, but have a much
better performance and just an interesting
idea to go out of that box. And then also, I think
we will put links to Twitter of the
people who are talking about the conference in
China and other worlds, where if you’re a speaker,
it’s definitely will be nice idea to go,
because it is completely new world with new ideas. It will be very interesting. RICK VISCOMI: And how could
people find you on GitHub? ANDREY SITNIK: My GitHub is ai,
and on Twitter I am sitnikcode. RICK VISCOMI: Great. Andrey, thanks for being here. This has been great. ANDREY SITNIK: Thank
you for your question. RICK VISCOMI: So you can
find links to everything we talked about in
the description below. Thanks for watching. We’ll see you next time. [MUSIC PLAYING]


Leave a Reply

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