Lara Schenck: "is Css A Programming Language?"

Can divide languages into these two categories an imperative.

The defining quality is control flow so you can control the execution of statements in a in a program and declarative is no control flow so that logic is baked into the commands imperative languages are usually think of.

For programming languages so JavaScript Ruby C++ Python declarative languages are oftentimes domain-specific languages so they’re built to function within certain domains sequel is a domain-specific declarative programming language for databases HTML sure it’s absolutely a domain-specific language and CSS is a domain-specific declarative programming language so also talking about CSS and HTML they are turning complete to one put together so turn complete is a level of complexity of problems that.

CSS can do math there are functions and variables and ultimately it’s like why not like why can’t CSS be a programming language what is so different and what is this like biased towards imperative programming that seems to exist.

So hmm CSS is a declarative domain-specific declarative programming a little bit of a.

Mouthful 100 percent so what if what a CSS developers program so CSS developers program the layout of webpages so underlying program there and because like what is programming writing.

Instructions for a computer absolutely um but when it comes down to it we’re kind of programming boxes so who’s familiar with the box model and CSS okay so the idea is that everything every element is ultimately a box when it gets to the browser and those boxes ultimately turn into images so it’s kind of like ah CSS developers program the layout of images kind of.

So I’ll give a lot of hundred percent to UM I don’t.

Want to like try to do a little discussion of the internals of a browser in like two minutes so this is a wonderful person sitting on a computer of course and there’s a server waiting at the beckoning call so what do we do as we’re on computer we’re like okay give me data servers like here is data so we have a client and a server and then that HTTP request requests data from a server and the server returns a byte stream so it returns HTML CSS and JavaScript in the form of.

Hexadecimal bytes and once you get to a browser the browser takes those bytes of HTML CSS and JavaScript and parses them and token eise’s them so they’re first turned from the hexadecimal bytes.

Into Unicode characters that are called these code units that’s a standard for each browser and then those are turned into lots of different trees well three trees so we have the dom and the CSS Dom and those.

Are the the parsed versions of what HTML CSS and JavaScript can be saved and then those boats.

Turned into a rather not turned into but a separate tree is constructed from the information in those two so the the render tree or the rule tree is ultimately what we’re kind of.

Programming as we when you write CSS and that then goes to the layout face so this is where all these boxes are constructed and the render tree contains rules attached to each individual node that kind of like layout instructions and then layout is this like credible recursive algorithm that goes.

Through paints not paints but lays out everything onto the page all the boxes and then we paint those boxes and ultimately composite them.

So writing CSS CSS is a domain-specific language for this process and so we.

Had a little flexbox algorithm might be in there mixed.

Might come in there but the whole process here is CSS and that’s kind of the distinction between declarative and imperative so impaired declarative is really the top of the iceberg here so that’s what.

We see the CSS that we see and then what powers the CSS is this incredible like work of software engineering that is the browser so C++ and rust and I’ve taken a taking it upon myself to really like peek beneath the curtain of what’s going on with CSS.

And it’s pretty cool so if we take something like just like display flex here so flexbox um this is essentially.

Harnessing thousands of lines of rust or C++ code so whatever’s inside that rendering engine in the browser and it’s really cool to look.

Through this stuff especially if you have a little bit of a background or the skills that I’ve kind of gathered when studying for this whiteboarding interview it’s really fun to look at what power is CSS and I hope to encourage more people to do this so declarative C is that’s heart so the fact that we don’t have to write a flex algorithm whenever I want to lay things out in a road in a row is very.

Incredible and the power of declarative programming so this is a little you know a little snippet of code from the source of Firefox which is called sir bovis the rendering engine in Firefox that was recently rewritten in rust and it’s all open source so you can go go on to servos github and kind of browse through the source code and figure out where these different algorithms are implemented imperative breast Firefox so we’re where do you see that so the you can.

Look on the github and then there’s also search fox org which is a searchable.

Repository for servo or for Firefox and then chromium has an open-source implementation of blink which is the rendering.

In WebKit and my process for kind of going back and forth between these was to read expect very closely so in CSS and HTML and JavaScript all these open languages there are specifications for browsers implementing these languages so.

I would kind of pick out some spec and be like oh let me see if I can find this implemented in the browser and it gave me this whole appreciation for CSS again because at the time I was getting a little bored with it and then I started learning about all this and.

This is amazing I just want to do this all day because it’s like the dream that I don’t have to write all these things so declarative for the win here and I want to finish my little conclusion for all this research was.

Like oh bridging the gap between CSS and computer science so nice did i bridge the gap well it’s more like this so there’s kind of computer science and then within computer science of CSS C++.

HTML javascript everything is under this umbrella so computer science the topic is incredibly broad and.


Related Articles

0 Comment