Successfully reported this slideshow.
Your SlideShare is downloading. ×

CSS Algorithms - v3.6.1 @ Strange Loop

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 213 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to CSS Algorithms - v3.6.1 @ Strange Loop (20)

Advertisement

Recently uploaded (20)

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

×