CSS Algorithms: Changelog and Sources

Posted June 1, 2018 in Research, Web Development


Hello, there! Thanks so much for your interest in my ongoing talk, The Algorithms of CSS / Algorithms in CSS / CSS Algorithms. The talk debuted at CSSConf EU in Berlin in June of 2018. Each time I give the talk it evolves accordingly, and this post contains links to my research as well as a changelog for the updates to each version.

If this is your first time here and want to watch the talk, here is the video of v3.1.0 at CSS Day in Amsterdam! The most current version is v3.4.0, and that video is coming soon.

If you are short on time, clicking through these should give you the gist – here is a link to slides for v3.1.0 on Slideshare.

I am also writing up the content in blog posts, (very) gradually. Maybe they will morph into a book, someday? Here’s what I have so far:

  1. CSS is a Domain-specific, Declarative Programming Language
  2. Browser Internals in < 800 Words
  3. Is CSS Turing Complete?
  4. Algorithms 101
  5. What is a CSS Algorithm?
  6. Writing CSS Algorithms
  7. Testing CSS Algorithms (!!): Part 1, Part 2, Part 3 coming soon)
  8. CSS/HTML a.k.a The Golden Springboard

Don’t let the written content keep you from watching the talk though! The slides are very cute and, I’ve been told, the presentation is entertaining. I certainly have fun giving it.

Version 3.*, June 2019 – ?

Changelog

v3.4.0 @ CSS Camp, July 17, Barcelona

(This version would more accurately be 4.0.0-beta)

  • Slideshare slides for v3.4.0 at CSSCamp, 2019!
  • Had to get the talk down to 30 minutes
  • More oriented around the practice of CSS algorithms
  • Removed Turing complete section :(
  • Removed monsters and definition of PL conversation slides :(
  • Added alternative definition
  • Removed PMC CSS algorithm story time and added familiar code examples instead
  • In Larva Algorithms section, synced up example algos with PMC algos source code
  • Added back the steps for writing algorithms from v1.0.0, but they are more mature now,
  • Draw an analogy to test driven development with the writing CSS algorithm steps
  • Preview of what unit testing CSS algorithms might look like!
  • Changed springboard cloud to stay at “technology”

v3.1.0 @ CSS Day, June 14, Amsterdam: Video here.

  • Slideshare slides for v3.1.0 at CSSDay, 2019!
  • Tightened up the content – needed to shave off about 7 minutes
  • Moved most recent Twitter poll to after programming definition
  • Remove flex-wrap / declarative logic explanation
  • Removed Open-Closed rule slides
  • Removed specific example of test-driven UI development and prerequisited
  • Added “can of worms” metaphor for Twitter and the truth
  • Removed Two Cultures and breaking down the wall slide flow

v3.0.0 @ WordCamp Montclair, June 1 2019, Montclair, New Jersey

  • Given under the talk banner “CSS Is A Programming Language”, this version is all about validating CSS as a (domain-specific, declarative) programming language
  • Shows some flex wrap Rust logic instead of source for cascade
  • Added section diving into the “Is CSS Turing Complete?” phenomenon
  • Included a code scenario to show that the thought process when writing CSS is not so different from other languages
  • Discuss Single Responsibility Principle and how that relates to CSS as utility classes
  • Show the same for Open-Closed principle
  • Introduce an updated definition for CSS algortithm
  • Show the benefit of CSS algorithms via a story from working at PMC
  • Show the algorithms laboratory in Larva, PMC’s baby design system
  • Conclude with some “big ideas” – tell my story of the math hating art student becoming a programmer
  • Look at possible reasons for why Twitter answers “No” to the “Is CSS a PL?” question
  • Identify some grand ideas about how CSS/HTML can be the thing that breaks down the barrier between The Two Cultures and gets more diversity into tech

v3.* Sources

The talk content saw a lot of changes in this version! Here are the sources or my research and learning, as well as work I mentioned in the talk:

Non-Unicorn articles

Turing Complete

I wrote a fairly extensive post about Turing completeness with regards to CSS here, and here is a CodePen showing Rule 110 encoded in CSS/HTML/Human.

Turing Machines & Undecidability

Cellular Automata

Books about General Programming Methodologies

Specific concepts in Programming

Miscellaneous, related to the above

Front End Methodologies

General Testing Concepts

CSS Testing

CSS Testing Tools

Anti-Human Tech Trends

Highly, highly recommend watching Ethan Marcotte’s 2019 talk World-Wide Work and reading or skimming The Two Cultures by C.P. Snow.

Bad things that are happening:

Version 2.0, Dec. 2018

Slideshare slides for v2.0 are here!

Changelog

v2.0 @ WordCamp US, Nashville: Video here.

  • Complete rewrite of second half to be more about tangible examples of CSS algorithms
  • Official definition for a CSS algorithm
  • Introduction of “pattern” as an alternative to “CSS algorithm”
  • Emphasis on power of the user interface/front-end as the bridge between product, design, and engineering on teams
  • Big thanks to David and Fred from WPShout for their excellent feedback as I was working on v2.0!

Important 2.0 Sources

CSS Algorithms

This talk is really a synthesis of all of these ideas, and more:

Version 1.*, June-October 2018

Slideshare slides from v1.0.0 at CSSConf EU are here!

Changelog

v1.3 @ SIGNAL, San Francisco: Video here.

  • Added some commentary about the validity of Twitter polls about CSS (or anything, really)
  • Added .u-glue as an example algorithm
  • Not going to wear that shirt again for a talk

v1.2 @ js.la, Los Angeles: Video here.

  • Added “Browser Internals in < 5 minutes section”
  • Added big picture conclusion about an open definition of programming via Felienne’s talk.

v1.0 @ CSSConf EU, Berlin: Video here.

  • The debut of Algorithms of CSS in Berlin!
  • This was my first big conference talk, and I was extremely excited (and nervous).

Important, Foundational Sources

Computer Science

Favorite Computer Science fundamentals resources:

I wrote this series of blog posts summarizing my own Computer Science research:

On Programming Languages and Paradigms

Imperative vs. Declarative

On Algorithms

Browser Mechanics

The Cascade Deep-dive

The Source of CSS

I found the source of Servo (the rendering engine in Firefox) to be a bit more readable and commented (it is newer, after all), but the UI for navigating the source of Blink (a fork of the rendering engine in Webkit, used in Chrome and Opera), was great for getting a sense of the directory structure. Look at both!

A few files to get you started:

A few other very awesome and relevant resources:

Example CSS Algorithms

(but watch v2.0 for up to date examples)



Comments

What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

  • Nice talk 🙂

    really GOOD.

    Compose a Reply

  • you're amazing! Nice Talk and really opened my eyes! :D

    Compose a Reply

  • Hi La~u~ra 😊

    Thanks for sharing!
    You can add a new resource to Browser Mechanics section:

    "How browser rendering works — behind the scenes"
    https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10

    Compose a Reply

    • Thanks for sharing, Joan! That's a great resource – really nice, readable description. I should read it every couple of months for a refresher.

      Compose a Reply

Submit a Comment