AMA with Lea Verou

Ask me anything

Lea Verou

Held on

Speaker, author, HCI researcher at MIT, Ex @W3C staff

This AMA is over, Ask Direct Question!

You can ask a direct question on their Hashnode profile, anytime!

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What is worse: Safari or IE?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Safari. IE is a dead browser, the new versions (Edge) are actually pretty good. On the other hand, Safari is constantly lagging behind and holding the Web back. And what's even worse: On any platform that IE/Edge is used, people can switch to another browser. This is not true for Safari: You cannot install ANY other browser on the iPhone or iPad. There are apps like Chrome for iOS, but they're just shells around Safari. So it's not just a shitty browser, it's a shitty browser that forces itself on people. And that's the worst kind of shitty browser.

juanita_b_sutton

Juanita Sutton

1y · Beginner front-end developer

Hi Lea, thank you for hosting this AMA!

  • Prism is one of my favourite libraries. What is the story behind its origin? How long did it take you to roll the first version out?

  • What is your favourite pastime? :)

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

About Prism: Glad you like it! It started from dabblet.com, the HTML & CSS playground I built in 2012. It was an evolution of a crude script I had written to highlight code on my presentations (you can find its origins in the CSSS repo: https://github.com/LeaVerou/csss/blob/gh-pages/plugins/code-highlight.js — CSSS is my presentation framework). Eventually I realized it might be a good idea to clean it up and release it as a separate script, and it became way more successful than any of the scripts it originated from.

About my favourite pastime (I assume you mean besides making stuff): I really love food. I like trying new things at restaurants, the more adventurous the better (my Instagram feed is literally over 90% food pictures and ratings) and I really enjoy cooking together with my partner, although we are not particularly experienced cooks yet. We're both really into food though, so we're getting better at it :)

200ok

Ben Buchanan (200ok)

1y · I make some bits of the web.

If you could wave a magic wand and add one thing to CSS with universal and perfect support, what would it be?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Haha, nice one!

If we're talking about things already in (reasonably mature) specs, it would be one of these:

  • conic-gradient()
  • attr() everywhere
  • :focus-within
  • backdrop-filter
  • CSS rule nesting

But hey, it's a magic wand, so maybe things don't have to be in specs yet or even be implementable! In that case, it would be one of the following:

  • :has() everywhere, not just in JS
  • var() to refer to ANY property, not just custom properties
  • element queries and generally style queries
  • Making custom properties animatable right in CSS, no JS required
maruru

Marco Alka

1y · Software Engineer, E2.0 Evangelist, Hobby Game Developer

Hi Lea,

Thanks a lot for hosting a AMA!

  • Where do you get your inspirations for your projects?
  • I know ITCSS and BEMIT. What kind of CSS architectures do you use? What do you prefer about them?
  • Do you polyfill? Which browsers would you care about (and why), if you had to create a website for a new FOSS project (like a new JS library) today?
  • Do you think the browser wars are over?
  • What do you do in order to motivate yourself?
  • What do you do when you want to relax from some intense coding?
leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

  1. My inspiration is almost always my own needs, I usually make things to scratch my own itch and put them out there hoping that others might have the same itch :)

  2. I highly value human readable code, so I don't really use any of those, as I don't like the result. Of course over time I have developed a few strategies to keep my code DRY and maintainable, but I don't think what I do fits in any of these schemes.

  3. I polyfill when necessary, and I ADORE polyfill.io because it takes all the hassle and extra weight away from polyfilling. For FOSS projects though, I think supporting the two latest versions of every browser (and no IE, just the latest Edge) is perfectly sufficient. Developers don't typically use older browsers. Any complaint I had about the websites of my open source libs not working on older browsers was from developers testing them there for the sake of it, not because they actually used that browser. So these days I reply to those complaints with "Thanks for the report, is this the browser you actually use?", to which they tend to back off and admit it isn't.

  4. There are still inconsistencies and browser bugs, but the situation doesn't compare to when I started in 2005 (and think that that was the tail end of what we know as the browser wars!). These days, if there's a difference between browsers, it's either because one of them implements something and the other one doesn't, or because you hit some obscure edge case (I hit many of those, but I think I'm an exception there). When I started, ANYTHING you did on the Web, you hit browser bugs. A good developer back then wasn't one with good knowledge of the specs, it was one with good memory of all the browser bugs. We're way past that now.

  5. I imagine how awesome it will be once I finish what I'm working on and people can actually use it, what they will make with it etc.

  6. I go to a nice restaurant (see my answer to Juanita above) :)

greedee

Grey Davis

1y · Frontend and other stuff

Hi Lea! Glad to see you here :)

What do you think about Firefox not considering 'Scrollbar styling' as a default rule.

It has a great support everywhere but they refuse to add the rule, is it justified?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Note that even on caniuse, this is described as a "non-standard method of styling scrollbars". Browsers have their own proprietary methods of styling them, but there is no standard. Therefore, I can't really blame Mozilla for not implementing a specification that doesn't exist.

Now, you may ask: "Why doesn't it exist?", to which I have no good answer. It's tricky to specify something that will work well across all possible scrolling mechanisms on all devices and OSes, which is similar to the reasons why we don't have a standard for styling form controls yet. It has been discussed briefly in the CSS WG though, and we do recognize that authors have a need for it, so I'm a little hopeful that we will see a spec for it in the near future. Fingers crossed!

sharon_c

Sharon Chaisky

1y · Part time Frontend | Full time dreamer :)

Hey Lea!

Why does it take so long for new specs to get browser adoption?

hint: grid-layouts

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Because right now we have a ton of technologies, and browsers are literally playing catch-up with the specs. There simply aren't enough browser developers to implement everything right now. This is seen even more acutely on smaller browsers with even fewer resources, like Mozilla or Opera (before they switched to Chromium). Even though specs also take a long time for different reasons, it's still much quicker to design a new feature than to implement it. Think of how long it takes you to think about what you want to code and compare that to how long it takes you to actually code it. See what I mean?

Also, since they have to prioritize, sometimes browsers hang back to see what other browsers will do. Sometimes they implement very early, but the spec changes over time so their early code ends up not being compatible with the eventual standard and needs to be revised or totally replaced (this is what happened to Microsoft with Grid Layout). With finite resources, browsers have to prioritize which features to work on next and this is where developers can have a voice, most browsers now listen to developer demand when deciding on prioritization. For example, Microsoft has a uservoice that they use to decide what they implement next: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/filters/top

fzeagru

James Clarke

1y · Software craftsman, singer and lover of clean code

Hi Lea, I'm curious to know a little more about the working of W3C, and specifically the CSS working group? How does the group unanimously decide on what standards to approve?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

fantasai, a very prolific CSS spec editor, wrote a series of articles a couple years ago going into how the CSS WG works, in a lot of detail: http://fantasai.inkedblade.net/weblog/2011/inside-csswg

As to your specific question, typically someone suggests it, and if there are enough use cases and it's possible to implement performantly by browsers (not everything is, e.g. parent selectors), it gets accepted. This is where you, as a developer can help: If there is a feature you really want in CSS, collect as many use cases as you can and post in our repo: https://github.com/w3c/csswg-drafts/issues If you make a good case, with enough evidence from around the Web that this is needed, it could get in! However, keep in mind that even things that get accepted often don't really make it or take years. Getting something accepted is not enough, a spec editor needs to put the effort in to write the specification for this new feature, which is very hard work. So, if there's no editor that is interested enough, it could stall.

Hi, Lea!

What's your process for identifying "CSS secrets"? Are they solutions to your everyday work-related challenges or do you actively seek use cases?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

A bit of both. Usually they emerge naturally from something I've been working on, though there have been times where I wondered if something was possible to do in CSS, then had it as a background process in my head for a while until a solution popped up.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

In CSS for years we were using classes for both layout/document structure and visual element styling itself. Later new HTML tags like header, footer was added. What's next?

Today I found for myself an interesting HTML+CSS API and using it more. Short example:

<flex type="column">
  <flexitem order="5">
     ...
  </flexitem>
  ...
 </flex>

CSS:

flex {
  display: flex;
}

flex[type="column"] {
  flex-direction: column;
}

flexitem[order="5"] {
  order: 5;
}

...

It also would be very useful if we could use attr() not only for content but:

flexitem[order] {
   order: attr(order)
}

Now I have semantics and document structure separated from visual styling and using classes only for colors, borders, sizes and other decorations.

I also have custom small CSS responsive <grid> framework. No more <div class="col-x-y col-q-w col-whatever-else ...">

What do you think about this approach?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

This seems to be mixing markup and presentation, which is suboptimal, for the usual reasons. For example, what if you want to change all your documents to use Grid Layout in the future? Do you change their markup or do you redefine what things like <flex> and <flexitem> mean and making your markup confusing to anyone else? FWIW, the same arguments apply to classes like col-x-y.

The attr() should be available everywhere, but browsers have not implemented this yet. It has been in the spec for almost 10 years now. I posted about it on Microsoft's uservoice, and they have it on the backlog, albeit with low priority. Voting for it might help: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7671960-css-attr-as-defined-in-css-values-level-3

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

When something new comes out, you have to make changes in your system anyway.

When you are going to change the layout significantly, in your example to Grid spec, you always will need to change a markup. Shouldn't flexboxes be used for different purpose not a whole page layout?

So writting a lot of <div class="flex"> when I need exactly a flexbox is a better approach? For page layout as I said you could use something like <grid> which you can easily control behing the scenes or you preffer to write and use a lot of another divs with grid-x classes when Grid spec will be implemented?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Every time you need to change your markup to accommodate a style change, it's either a failing of CSS (the language) or your markup.

No, class="flex" is exactly the same thing, just wordier. The whole point is to use elements/classes/ids that reflect meaning, not presentation, use CSS to style that, and only change the CSS when you need to change the presentation. It's not always possible, but it's a good ideal to strive for.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

In large projects writing and building app.css each time when you want to add something new and having in total around 30 elements with just display: flex instead of one helper is not better either. In the ideal situation when you want to add new page you shouldn't write a single line of CSS or JS and already should have all the lego blocks in your CSS set.

What about DRY? Right now we don't have @apply, how would you refactor your code in that case?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

You can use a preprocessor to reduce duplication in your CSS file.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What web specs, changes, proposals are you still fighting in W3C?

200ok

Ben Buchanan (200ok)

1y · I make some bits of the web.

What do you see as the best/positive trend in UI/HCI at the moment; and what would be the worst/negative trend?

chilimatic

j

1y · stuff ;)

Hey Lea,

I wanted to ask, since the current rise of distributed systems and the technology developed to scale such unpresidented proportions. VR and AR are going to be pushed and are likely a part of the longterm future.

Did you already think about standards and how parts of the human machine interaction with the web can change.

For example: Right now we have "2 formats" mobile and desktop should there be special "VR viewports" or "AR viewports" because of the 3rd spacial option in VR and AR or the hindering of opacity in an AR use case like google glasses ? Or is that still to distant to think about it?

If that's to far off topic, or you never thought about it, I apologize.

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

I’m afraid I haven't really thought about this, as I'm not that into VR (yet?). There is WebVR however, which has some browser support: https://webvr.info Perhaps if you ask the people involved in that project, they can give you a better answer!

chilimatic

j

1y · stuff ;)

cool :) thx !

Hi Lea. Huge fan of your book and blog. One subject I've never seen you talk about: CSS architecture. What approach to you take in regard to specificity etc

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

Hello again,

Tell me the secrets of HTML 5.1 and CSS4 😃

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

Why in your opinion so many JS libraries have ugly API without an HTML API?

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

How Web standards, The Internet and Web itself will change in 5 years from now? Do you see native apps will be build with HTML+CSS+JS in the future?

nivesh

Nivesh Singh

1y · Catch Me If You Can :)

Editor you love to use for web development stuff mostly. :)

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Atom. It's hackable like Sublime, but it doesn't go to the extreme of using config files for everything. Also, it's much more maintained, and it's open source. I keep Sublime around as well, and use it to open really large files, since Atom is still slow with that.

nivesh

Nivesh Singh

1y · Catch Me If You Can :)

I used ATOM, but it's a bit slow when one enable real time linters on it. Thus switched to Microsoft VScode for now, its a bit faster than others in Windows10. But i keep both.

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

I do use eslint real time and have no speed issues. :)

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

Are you using ECMAScript 2015 (ES6) or still old JavaScript?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

I’m using ES6 with Babel, though on my day-to-day development I test with the raw ES6 because that way I won't have to wait for compiling and modern browsers support it pretty well — transpiling is only necessary for older browsers.

matthewstillwell

Matthew Stillwell

1y · UI Guy / JSLearner

Hey Lea! much thanks for doing this.

What's your take on the bad mouthing that CSS gets for being such a mess?

Do you think it's a must for all javascript developers to have good knowledge of CSS?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

I do agree that a lot of it seems to be JS developers who are used to working imperatively (a series of commands) and cannot understand CSS due to its declarative nature. It's too different from what they know, and they're out of their comfort zone, so they're trying to bring it in it by moving everything to JS. For non-programmers, declarative languages are actually easier to deal with, because they don't have to care about ordering and state (e.g. compare :hover to mouseenter/mouseleave). This is why I think it's very important to be able to do things from CSS, without forcing everyone to learn JS: there are actually many people who are great at HTML & CSS and find JS hard or impssible. There are no official statistics on their exact number, but it appears that they are at least 50% of HTML/CSS authors. There is a recent movement to add JS APIs for things without a CSS counterpart because it's easier for browsers and "everyone knows JS anyway". I think we should fight this trend.

However I'm fully aware that CSS is a bit of a mess. I love it, kind of to how you love your best friends: they have some terrible habits, but they also have redeeming qualities, otherwise they wouldn't be your friends. CSS was originally designed for simple documents, not applications, and we're trying to make it something it was not designed for. However, we cannot change anything because we would break existing websites, so we are just adding and adding to it and it has become quite a messy, inconsistent pile of stuff. Even things we do realize were mistakes (e.g. margin: auto for centering, or border-radius instead of corner-radius) we can't fix because it would break websites.

Lastly, people have different performance expectations from CSS, which influences what is possible with the language. In JS the onus is on you not to create an infinite loop. In CSS, the language must actively prevent it. Therefore, there are many features that would simplify a ton of CSS tasks (e.g. element queries or referring to other properties), but because of the remote possibility of cycles, we cannot add them to the language. Also, even without cycles, if a feature cannot be implemented in a way that makes it blazing fast, it just doesn't get added to the language. Parent selectors are an example of this (yes, they are in Selectors 4, but will only be available in querySelectorAll).

All these issues result in CSS being incredibly confusing to work with, and only the first one is actually the author's fault. At work people often come to me with CSS problems that seem simple, so they blame their inability to solve them to their poor CSS knowledge. More often than not, it turns out that the simple thing they were trying to do is actually not possible without JS or markup changes. I always find it embarrassing when I have to tell them that.

leahaydon

Lisa Haydon

1y · Passionate web developer

Hi Lea,

First, More CSS Secrets: Another 10 things you may not know about CSS was awesome. Congo! 👏

My Question:

As a web developer, what are the 3 things you would like to change?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Thank you, glad you like my book! Could you clarify your question a bit? The 3 things I would like to change …in standards? …in web development? …in the world? …something else?

captn3m0

Nemo

1y · Button Masher

Hey Lea,

No questions. Just wanted to thank you for your amazing book. We have a (now-signed!) copy at our office, and it is recommended reading for every dev in the frontend team.

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Thank you! So glad you enjoyed it!

snowball

Martin Snowball

1y · Plata O Plomo!

What sort of work do you do as an HCI researcher? Many Thanks for the AMA.

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

Actually, most of my day-to-day work is not that different from a typical JavaScript developer: I go to the office, I write JS all day, I go home. Sometimes I think a bit as well or have meetings where we all think about the design of what we're building. Pretty standard, right? In HCI research, you typically build a system, then test it with a user study, then publish a paper about it. The exact percentages for each differ per researcher. In my case, it's about 75% development, 10% user studies, 10% brainstorming, 5% paper writing. This is a bit more development than most HCI researchers, as I want to release my work to the public just like another open source library, and I want people to be able to use it in their projects. Many (if not most) HCI researchers produce prototypes, built primarily for research. This is not wrong, just a different way to work: As a researcher, your primary job is to produce ideas. Time spent fixing bugs, is not time spent on ideas. On the other hand, time spent fixing bugs could mean more people using your ideas. It's a balance, and every researcher picks a different point on that spectrum. Hope this answers your question! :)

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

When you were writing all of your libraries what was the biggest mistake you did? Years later how would you change the structure of your code in the existing projects, what would you change now if you would rewrite them from scratch? Share any experience in writing own libraries (HTML, CSS or JS).

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

Could you explain in one sentence how in reality the process of developing new web standards looks like? What is at the beginning, what next and how in the result it all becomes a published recommendation on W3C website?

And how everyone not working in W3C or any group can contribute to Web Standards?

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What is your opinion on custom HTML tags and attributes? What naming convension should be used in such case? Do you like seeing "-" and upper case characters in tag, attribute names? I see today a lot of <Awesome-Tag-Name>...</Awesome-Tag-Name>

What is your opinion on Web Components?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

About hyphens, you have to use them, whether you like them or not, otherwise your custom element is invalid. I don't like upper case characters in tags, but that's just personal aesthetics, there's no rational reason behind it.

About web components, I really love the ideas and can't wait for wider browser implementation. I'm especially excited for HTML Imports, though Mozilla has been stalling that one. It's really bad for usability to have to tell people to import a bunch of files into their page to use your library, whereas with HTML imports they just import 1 file, nice and clean.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What is your experience on SVG? Do you use SVG sprite technic with <use>? How do you import SVG icons in HTML, is it a single huge def at the bottom of the body or it is a separate sprites.svg? Do you use SVG filters? How do change icon color (and may be something else) on hover?

dinesh_p_r

P R Dinesh

1y · code the last word to be coded

How to create a custom UI using css and javascript.

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

You might need to be a little more specific than that :)

rhaynel

Rhaynel Parra Aguiar

1y · Full Stack Software Engineer

Hi Lea, how you came with the idea of blissfuljs?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

As I wrote in my blog post about it, it was basically a cleanup of several helper methods I had developed over years, plus my idea for wrapper-free DOM chaining.

hamed

Hamed Qaderi

1y · Laravel Lover

Hi, Lea! Glad to see you here.

I'm curious to know how you do all these great stuff using CSS and JavaScript? Does it relate to Mathematics? How do you inspire?

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What is your opinion on writing "CSS in JS" like in React?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

I think the primary reason for it is JS developers that feel out of their comfort zone with CSS, so they're trying to bring it to JS. I think it excludes people who don't know JS, it increases the barrier to entry for working on a project, and over time it ends up being more of a problem than a solution because you often need the very concepts you are trying to avoid that way (e.g. cascading and inheritance).

Hopefully CSS variables & scoping will help with this. CSS variables are perfect for making CSS depend on JS without moving all of your style into JS. You just set the variable in JS and do everything else in CSS. It could even be separate people writing the two. Scoping will help with encapsulation.

Encapsulation and dynamic variability are the two primary arguments I hear for CSS in JS, so hopefully we're on our way to getting rid of this terrible practice.

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

Do you use PostCSS, CSSNext, SASS, LESS, Stylus or something else?

leaverou

Lea VerouAMA Host

1y · Speaker, author, HCI researcher at MIT, web standards aficionado, serial OSS project creator

I use Sass for larger projects. I try to always start with vanilla CSS and move to preprocessing when I feel I need it. I want to switch to PostCSS + cssnext, but I haven't found the time yet :(

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

Which JS libraries, frameworks are you using? Have you been playing with any popular JS frameworks?

nivesh

Nivesh Singh

1y · Catch Me If You Can :)

Any specific standard CSS style guide you follow? like for JS we mostly follow airbnb's style guide. Thanks!

mevrael

Mev-Rael

1y · Leader, AI Architect at Bunny AI and creator of BunnyJS

What would you change in your big app build process where you, probably, have a lot of npm packages, scripts, gulp/grunt, webpack, browserify, babel, huge configs and everything else?

loading ...