4 ms·

What does single div mean here? I looked at the source and gave up counting the number of divs, so it is not literally "this page only has one div", but ... ?

nevir 2y ago
Each "picture" in the list is rendered via css rules defined for a single div. Lots of box shadow shenanigans, usually
- rav 2y ago
  Looking at the CSS for a few of the pictures, it seems like it's more CSS backgrounds specified using lots of gradients. I wonder if it would be faster to implement an SVG-to-CSS-gradient compiler or implement the pictures directly using CSS gradients.
  - onehair 2y ago
    While what you suggest is true, the incentive for the developer here is to try out all kinds of CSS properties in tandem and rely as much on CSS as possible. To put this all in perspective, imagine developers doing this between 2012 and 2015, where many websites were still designed by using photoshop built & sliced images as backgrounds and applied on divs to achieve glorious designs. (while still needing to load all the pictures needed to achieve such designs. Then come new fascinating CSS properties that can do away with needing static images to make those same designs. Back then, such creations brought aww to fellow developers as it was out of the ordinary. Most often the main concern wasn't performance and efficiency.
    - silvestrov 2y ago
      It's also a good torture test for the browsers "inspect element" debugging tool. i.e. the debugger tools are useless in figuring out what the different background and box-shadow rules do.
    - techedlaksh 2y ago
      Adequately put. I am gonna use your explanation from now on whenever somebody wants to know why this exists.
wmil 2y ago
Each little doodle is a single div. Or rather each one has a container div that they don't count. Then the main div that they do count. Then content inserted with ::before and ::after that they don't count. It's interesting as a creative exercise. However I've alway found that abusing ::before and ::after is a bad practice. The desire for "clean" html is silly, clear html is easier to maintain.

nevir 2y ago

Each "picture" in the list is rendered via css rules defined for a single div. Lots of box shadow shenanigans, usually

rav 2y ago
Looking at the CSS for a few of the pictures, it seems like it's more CSS backgrounds specified using lots of gradients. I wonder if it would be faster to implement an SVG-to-CSS-gradient compiler or implement the pictures directly using CSS gradients.
- onehair 2y ago
  While what you suggest is true, the incentive for the developer here is to try out all kinds of CSS properties in tandem and rely as much on CSS as possible. To put this all in perspective, imagine developers doing this between 2012 and 2015, where many websites were still designed by using photoshop built & sliced images as backgrounds and applied on divs to achieve glorious designs. (while still needing to load all the pictures needed to achieve such designs. Then come new fascinating CSS properties that can do away with needing static images to make those same designs. Back then, such creations brought aww to fellow developers as it was out of the ordinary. Most often the main concern wasn't performance and efficiency.
  - silvestrov 2y ago
    It's also a good torture test for the browsers "inspect element" debugging tool. i.e. the debugger tools are useless in figuring out what the different background and box-shadow rules do.
  - techedlaksh 2y ago
    Adequately put. I am gonna use your explanation from now on whenever somebody wants to know why this exists.

wmil 2y ago

Each little doodle is a single div. Or rather each one has a container div that they don't count. Then the main div that they do count. Then content inserted with ::before and ::after that they don't count. It's interesting as a creative exercise. However I've alway found that abusing ::before and ::after is a bad practice. The desire for "clean" html is silly, clear html is easier to maintain.