Name: CSS Algorithms - Lara Schenck - JSConf US 2019
Uploaded: 2020-03-28T17:29:39.000Z
Duration: 37 min 1 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Lara Schenck KATIE: Hello. Hi. Oh, all right. How is everybody

doing? Yeah? Whoo! I know we're all hungry. But this is our last talk before lunch. And

I think it's gonna be an amazing one. We have Lara Schenck here to talk to us about CSS

algorithms. And so, Lara's fun fact that she gave me is that she grew up on a llama farm

in rural Pennsylvania, very small town. And I asked her, well, can you tell me some cool

things about llamas that people wouldn't necessarily know about in their everyday life that's llama

free. At 4H competitions, there's a bunch of llama categories that you can enter. So,

llamas can do agility runs. Kind of like, you know, you've seen the dogs that jump over

hurdles and they go in between poles. That was not her specialty, though. Her specialty

was the llama costume category. Where you dress up yourself and you dress up your llama.

And she won a blue ribbon for her rendition of she was the tinman and the llama was the

cowardly lion. And she said there's probably a picture of this somewhere so I'm going to

really encourage her to have her parents take a picture and send it to us so we can go and

find it later and see a picture of her prize winning llama costume. All right. So, let's

give it up for Lara Schenck. Take care. [ Applause ]

LARA: Hey, everybody. Wouldn't it be great if I want in a tinman costume? Yeah, I don't

know how I'm gonna follow that story with my talk. I wasn't really prepared. Yeah. Welcome

to my talk. CSS algorithms. I'm really excited to be giving this to a room full of people

at a JavaScript conference. And the best thing is I have met so many great people that, oh,

I'm giving a talk to my new friends. Isn't that nice? Nasty, friends, before we get started

talking about CSS algorithms, we have to answer a very important question. Is CSS a programming

How many of you have seen this question where there's related drama about this topic on

Twitter over the last year or so? Yeah? Okay. Depends how many people use Twitter, I guess.

I do have a question. Like, does this drama come up in real life also, or is it mostly

contained to Twitter? Anyways, we have to answer this question before we talk about

algorithms. So, I asked this question on Twitter. First in March of 2018 before I gave version

1 of this talk. This is on 3.5.1 now I believe. Is CSS a programming language? What did Twitter

think in 2018? Any guesses? No. So  but it's pretty split. 42% yes, 50% no, 8% I'm not

sure. Not a huge dataset, 129 votes. But the answers to kind of the responses in the comments

are very varied. So, it was either like, yes, absolutely. Or, of course it's a programming

language. Or, I don't really consider CSS programming. Or you can't call styling a web

page programming. It's not really a programming language. And things like that. So, after

I gave this talk a little bit, before I started giving it again this year, May of 2019 I asked

this question again. And I was like, nobody is going to answer. Okay, Lara, we see what

you're doing. We saw your talk. Okay. No. This time 

[ Laughter ] This time the poll had 5324 votes, which is

definitely the most activity I've had on a Tweet before. And the noes increased. I was

like, what's happening? What's going on? And not only were the same kind of varied responses

in the comments, but there were also people that kind of specialize in HTML and CSS that

were saying that I never call myself a programmer. And things like, why are we concerned about

what CSS is? We should be concerned about what it's doing, et cetera. And things like

stop asking this question. Don't wake the beast. So, stop. Like, everybody, stop. We

have to answer a different question before we talk about is CSS a programming language.

What is a programming language? Before we decide whether or not CSS is one of these

things so, not surprisingly, there are many fields of research and people have dedicated

their entire careers to answering this question. And we can't be really specific about what

a programming language is because there are so many types of programming languages. So,

the definition kind of boils down to there are lots of different ones. But could boil

down to a formal language for instructing computer to perform tasks. This is Wikipedia

and several others. Some good articles out there. The important part here is language.

It's a language. And there are different types of programming languages. And these kind of

fall under the categories of programming paradigms. And we use programming paradigms to both describe

languages themselves as well as the style of code that we write. So, the two main paradigms

are imperative which is code that describes  code that tells a computer how to accomplish

a task. And declarative. Where you tell a computer what to do. So, the language  the

expressions in the language are saying what, not how. And the main difference is the presence

and absence of control flow. And so, control flow is the ability to manipulate the order

of executions of statements in a program. So, control structures like if statements,

for loops, imperative languages have these, declarative do not. Any logic is baked into

the statement itself. What are some examples of these programming languages? Hmm m... imperative

languages. JavaScript, of course. Ruby, C + +, Python. These are what we usually think

of when we think of programming languages. Often times general purpose languages. Declarative

languages are often, not always, domain specific. They are built to function within a certain

context. What are some domain specific declarative programming languages? SQL. It is a declarative

for data bastes. HTML, adding meaning around content on a web page, CSS for styling the

content on that web page. Loud and clear. CSS is a domain specific declarative programming

language. 100%. CSS developers program the layout of web pages. boxes. Let's be honest.

Everything is a box. CSS programmers are box programmers. Also 100%. Okay. So, cool. Like,

great. Like, maybe I can win a Twitter argument at some point. Good job. Why do we care about

this? Why do we care if CSS is a programming language or not? So, I want to talk about

something called Turd driven development. Of course this is a rift on test driven development,

one simple in both is all code is crap the first time you write if. It is not possible

for a human being to write perfect code the first time you write it. So, in test driven

development, you kind of counter this by starting, instead of writing in production code, write

a failing test first. In CSS, we don't really have this kind of testing. You can kind of

say the test is the design. It's like, okay. This is why am I failing tests? Yes, I see

it. It doesn't exist yet. So, yes, the test is failing. Run the test with our eyes. What

do we do? We write code to make the test pass. So, all code is crap at first. We write some

crap CSS. And then what happens? We stop. Okay? The CSS, it's done. I don't have to

write anymore. Oh, wait, the test is failing. There was a change to the UI. Some new feature.

The test is failing now. What do we do? We write more CSS. The test is passing. Oh, wait,

maybe there was a regression. So, now our test is failing again. So, we write more CSS.

Okay, whew, don't touch it, erg is working. And then we wait. And, oh, wait, new feature.

More CSS. Test is passing, oh, no, another regression. More CSS. And so on. Wait  here

we go. Oh, wow, what's happening. Our tests no longer completely passes. And this is what

happens. But the problem is this is the web. This is the frontend of our web applications.

This is what People use. And this doesn't just apply to CSS as a language. But also

HTML and also JavaScript. It's kind of this culture of how we program. So, what do we

do? Ah! Oooo! This is so bad! It's so bad! All this crap everywhere. What do we do? Stop

writing CSS. Start programming. Okay. So, the thing is, programming does not equal logic,

math, science, engineering. These things can be part of programming. But programming in

its essence as an art, as a craft, is writing instructions for computers that other developers

are able to read and maintain. And I think if anything shows that CSS is a programming

language, it's that naming is really hard and extremely important. Naming is one of

the hardest problems in computer science CSS is part of that story. Unless you're writing

CSS in JavaScript. Okay. Okay. So, cool, we got if. We've covered a lot of ground so far.

Now let's talk about algorithms. Now that CSS is a programming language, how do we write

algorithms in this programming language? Hm. Algorithms 1013 let's have another definition.

Subtitles ListPlay Video

CSS Algorithms - Lara Schenck - JSConf US 2019

specific

sort

content

structure