Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Algorithms - v3.6.1 @ Strange Loop

19 views

Published on

Is CSS a PL? Can you write algorithms in CSS?

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

CSS Algorithms - v3.6.1 @ Strange Loop

  1. 1. What is A Programming Language? By Will Chrichton
  2. 2. Link to the Tweet.
  3. 3. Wikipedia
  4. 4. WolframMathWorld
  5. 5. WolframMathWorld
  6. 6. WolframMathWorld
  7. 7. WolframMathWorld
  8. 8. input:checked + input:not(:checked) + input:not(:checked) + * {     /* Style fourth cell to prompt human to change state */ } if ( cellOne == 1 && cellTwo == 0 && cellThree == 0 ) {     cellFour = 1; }
  9. 9. Rule 110 in CSS/HTML/Human
  10. 10. Accidentally Turing Complete by Andreas Zwinkau
  11. 11. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  12. 12. <div class="square"></div> .square--bigger {     width: 150px;     height: 150px; } .square--smaller {     width: 50px;     height: 50px; } <div class="square square--bigger"></div> <div class="square square--smaller"></div> .square {     width: 100px;     height: 100px;     background-color: blue; }
  13. 13. <div class="square"></div>.square {     width: 100px;     height: 100px;     background-color: blue; }
  14. 14. <div class="box"></div>.square {     --square-size: 100px;     width: var( --square-size );     height: var( --square-size );     background-color: blue; } <div class="square"></div>
  15. 15. .square--smaller {     --square-size: 50px; } .square--bigger {     --square-size: 150px; } <div class="square"></div> <div class="square square--bigger"></div> <div class="square square--smaller"></div> .square {     --square-size: 100px;     width: var( --square-size );     height: var( --square-size );     background-color: blue; }
  16. 16. .square {     ... } <div class="square"></div> .square--smaller {     --square-size: 50px; } .square--bigger {     --square-size: 150px; } <div class="square square--bigger"></div> <div class="square square--smaller square--rounded"></div> <div class="square square--smaller"></div> .square--rounded {     border-radius: 50%; }
  17. 17. .square--rounded {     border-radius: 50%; } .square {     ... } <div class="square"></div> <div class="square square--rounded
 square--bigger square--yellow"></div> .square--yellow {     background-color: yellow; } .square--bigger {     --square-size: 150px; }
  18. 18. .square {     --square-size: 100px;     --square-bg-color: blue;     ...     background-color: var( --square-bg-color ); } .square--yellow {     --square-bg-color: yellow; } <div class="square"></div> <div class="square square--rounded square--yellow"></div> .square--rounded { ... } .square--bigger { ... }
  19. 19. <div class="square"></div>.square {     --square-size: 100px;     --square-bg-color: blue;     width: var( --square-size );     height: var( --square-size );     background-color: var( --square-bg-color ); }
  20. 20. <div class="shape"></div>.shape {     --shape-height: 100px;     --shape-width: 100px;     --shape-bg-color: blue;     width: var( --shape-width );     height: var( --shape-height );     background-color: var( --shape-bg-color ); }
  21. 21. .shape { ... } .shape--smaller {     --shape-height: 50px;     --shape-width: 50px; } .shape--bigger {     --shape-height: 150px;     --shape-width: 150px; } <div class="shape shape--bigger"></div> <div class="shape shape--smaller"></div> <div class="shape shape--rounded
 shape--bigger shape--yellow"></div> .shape--yellow { ... } .shape--rounded { ... } <div class="shape"></div>
  22. 22. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div <div class="shape shape--rounded
 shape--big-square shape--yellow"></div> .shape { ... } .shape--small-square {     --shape-height: 50px;     --shape-width: 50px; } .shape--big-square {     --shape-height: 150px;     --shape-width: 150px; } .shape--yellow { ... } .shape--rounded { ... } <div class="shape"></div>
  23. 23. .shape--small-square { ... } <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div .shape--rectangle {     --shape-height: 50px;     --shape-width: 100px; } <div class="shape shape--rectangle"></div> <div class="shape shape--rounded
 shape--big-square shape--yellow"></div> .shape--yellow { ... } .shape--rounded { ... } .shape { ... } .shape--big-square { ... } <div class="shape"></div>
  24. 24. .shape--rounded {     border-radius: 50%; } <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div <div class="shape shape--rounded
 shape--big-square shape--yellow"></div> <div class="shape shape--rectangle"></div> <div class="shape"></div> .shape--small-square { ... } .shape--rectangle { ... } .shape--yellow { ... } .shape { ... } .shape--big-square { ... }
  25. 25. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div <div class="shape shape--rectangle shape--rounded"></div> <div class="shape shape--circle
 shape--big-square shape--yellow"></div> .shape--rounded {     border-radius: 20px; } .shape--circle {     border-radius: 50%; } .shape--rectangle { ... } <div class="shape"></div> .shape--small-square { ... } .shape--yellow { ... } .shape { ... } .shape--big-square { ... }
  26. 26. Sign Up For Our Newsletter
  27. 27. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div .shape { ... } .shape--small-square { ... } .shape--big-square { ... } .shape--yellow { ... } .shape--circle { ... } .shape--rounded { ... } <div class="shape shape--rounded-rectangle"></div> <div class="shape shape--circle
 shape--big-square shape--yellow"></div> <div class="shape"></div> .shape--has-text { --shape-height: initial;     --shape-width: initial; } .shape__text {     color: white;     font-size: 16px; } <button class="shape shape--has-text">     <a href="" class="shape__text"></a> </button>
  28. 28. Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter
  29. 29. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div .shape { ... } .shape--small-square { ... } .shape--big-square { ... } .shape--yellow { ... } .shape--circle { ... } .shape--rounded-rectangle { ... } <div class="shape shape--rounded-rectangle"></div> <div class="shape shape--circle
 shape--big-square shape--yellow"></div> <div class="shape"></div> .shape--has-text { --shape-height: initial;     --shape-width: initial; } .shape__text {     color: white;     font-size: 16px; } <button class="shape shape--has-text">     <a href="" class="shape__text"></a> </button>
  30. 30. Robert C. Martin in The Future of Programming
  31. 31. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  32. 32. <div class="shape"></div>.shape {     --shape-height: 100px;     --shape-width: 100px;     --shape-bg-color: blue;     width: var( --shape-width );     height: var( --shape-height );     background-color: var( --shape-bg-color ); }
  33. 33. function sort(array) { for (let i = 0; i < array.length; i++) { for (let ii = 0; ii < array.length; ii++) { if (array[ii] > array[ii+1]) { let temp = array[ii]; array[ii] = array[ii+1]; array[ii+1] = temp; } } } return array; } var sorted = sort([4, 2, 1, 3]);
  34. 34. function sort(array) { for (let i = 0; i < array.length; i++) { for (let ii = 0; ii < array.length; ii++) { if (array[ii] > array[ii+1]) { let temp = array[ii]; array[ii] = array[ii+1]; array[ii+1] = temp; } } } return array; } var sorted = sort([4, 2, 1, 3]);
  35. 35. .container {     display: flex; }
  36. 36. .container {     display: flex;     flex-wrap: wrap; }
  37. 37. fn get_flex_line(&mut self, container_size: Au) -> Option<FlexLine> {     ...     for item in items {         let kid = children.get(item.index);         item.init_sizes(kid, container_size, self.main_mode);         let outer_main_size = item.outer_main_size(kid, self.main_mode);         if total_line_size + outer_main_size > container_size &&             end != start &&             self.is_wrappable         {             break;         }     }     ... } // Flex in Servo // https://github.com/servo/servo/blob/master/components/layout/flex.rs
  38. 38. .container {     display: flex;     flex-wrap: wrap; }
  39. 39. .clearfix::before, .clearfix::after {     content: "";     display: table; } .clearfix::after {     clear: both; }
  40. 40. .relative-parent {     position: relative; } .child-stuck-to-bottom-right-of-closest-relative-parent {     position: absolute;     right: 0;     bottom: 0; }     
  41. 41. .spaced-content > * + * {     margin-top: 1rem; }
  42. 42. h1 {     font-size: calc( 2rem + 3vw ); } // Stops growing at 800px @media( min-width: 800px ) {     h1 {         font-size: calc( 2rem + ( 800px * ( 3 / 100 ) ) );     } }
  43. 43. .grid {     display: grid;     grid-template-columns: repeat( var( --grid-cols, 1 ), 1fr ); } .grid-cols3 {     --grid-cols: 3; } .grid-cols4 {     --grid-cols: 4; } .grid-item-span2 {     grid-column: span 2; }
  44. 44. .lrv-a-glue-parent {     position: relative; } .lrv-a-glue {     // Fallback is top left for IE11.     top: 0;     left: 0;     position: absolute;     z-index: $z-index-middle-bottom;     top: var( --a-glue-top, initial );     bottom: var( --a-glue-bottom, initial );     right: var( --a-glue-right, initial );     left: var( --a-glue-left, initial ); } .lrv-a-glue--r-0 {     --a-glue-right: 0; } .relative-parent {     position: relative; } .child-stuck-to-bottom… {     position: absolute;     right: 0;     bottom: 0; }     
  45. 45. .space-content > * + * {     margin-top: 1rem; } .lrv-a-space-children-horizontal > * + * {     margin-left: $spacer-050; // Fallback.     margin-left: var( --a-space-children-spacer ); } @supports( column-gap: 1rem ) {     .lrv-a-space-children-horizontal {         column-gap: var( --a-space-children-spacer );     }          .lrv-a-space-children-horizontal > * {         margin-left: unset; } }
  46. 46. div {     counter-reset: fizzbuzz;     counter-increment: fizzbuzz; } div::before {     content: counter(fizzbuzz); } div:nth-child(3n)::before {     content: 'Fizz'; } div:nth-child(5n)::after {     content: 'Buzz'; } Full FizzBuzz in CSS/HTML CodePen

×