A presentation at Abstractions II in in Pittsburgh, PA, USA by Lara Schenck
What is A Programming Language? By Will Chrichton
Link to the Tweet.
Wikipedia
WolframMathWorld
WolframMathWorld
WolframMathWorld
WolframMathWorld
if ( cellOne == 1 && cellTwo == 0 && cellThree == 0 ) { cellFour = 1; } input:checked + input:not(:checked) + input:not(:checked) + * { /* Style fourth cell to prompt human to change state */ }
Rule 110 in CSS/HTML/Human
Accidentally Turing Complete by Andreas Zwinkau
.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.square { width: 100px; height: 100px; background-color: blue; } .square—bigger { width: 150px; height: 150px; } .square—smaller { width: 50px; height: 50px; }
<div class=”square”></div> <div class=”square square—bigger”></div> <div class=”square square—smaller”></div>.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.square { —square-size: 100px; width: var( —square-size ); height: var( —square-size ); background-color: blue; }
<div class=”box”></div> class=”square”></div>.square { —square-size: 100px; width: var( —square-size ); height: var( —square-size ); background-color: blue; } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; }
<div class=”square”></div> <div class=”square square—bigger”></div> <div class=”square square—smaller”></div>.square { … } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; } .square—rounded { border-radius: 50%; }
<div class=”square”></div> <div class=”square square—bigger”></div> <div class=”square square—smaller”></div> <div class=”square square—smaller square—rounded”></div>.square { … } .square—bigger { —square-size: 150px; } .square—rounded { border-radius: 50%; } .square—yellow { background-color: yellow; }
<div class=”square”></div> <div class=”square square—rounded square—bigger square—yellow”></div>.square { —square-size: 100px; —square-bg-color: blue; …
<div class=”square”></div> <div class=”square square—rounded square—yellow”></div> background-color: var( —square-bg-color ); } .square—bigger { … } .square—rounded { … } .square—yellow { —square-bg-color: yellow; }.square { —square-size: 100px; —square-bg-color: blue;
<div class=”square”></div> width: var( —square-size ); height: var( —square-size ); background-color: var( —square-bg-color ); }.shape { —shape-height: 100px; —shape-width: 100px; —shape-bg-color: blue;
<div class=”shape”></div> width: var( —shape-width ); height: var( —shape-height ); background-color: var( —shape-bg-color ); }.shape { … } .shape—bigger { —shape-height: 150px; —shape-width: 150px; } .shape—smaller { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }
<div class=”shape”></div> <div class=”shape shape—bigger”></div> <div class=”shape shape—smaller”></div> <div class=”shape shape—rounded shape—bigger shape—yellow”></div>.shape { … } .shape—big-square { —shape-height: 150px; —shape-width: 150px; } .shape—small-square { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }
<div class=”shape”></div> <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—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—rectangle { —shape-height: 50px; —shape-width: 100px; }
<div class=”shape”></div> <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>.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { border-radius: 50%; } .shape—rectangle { … }
<div class=”shape”></div> <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>.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—circle { border-radius: 50%; } .shape—rounded { border-radius: 20px; } .shape—rectangle { … }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rectangle shape—rounded”></div>Sign Up For Our Newsletter
.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rounded-rectangle”></div> <button class=”shape shape—has-text”> <a href=”” class=”shape__text”></a> </button>Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter
.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—rounded-rectangle { … } .shape—yellow { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rounded-rectangle”></div> <button class=”shape shape—has-text”> <a href=”” class=”shape__text”></a> </button>Robert C. Martin in The Future of Programming
.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.shape { —shape-height: 100px; —shape-width: 100px; —shape-bg-color: blue;
<div class=”shape”></div> width: var( —shape-width ); height: var( —shape-height ); background-color: var( —shape-bg-color ); }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]);
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]);
.container { display: flex; }
.container { display: flex; flex-wrap: wrap; }
// Flex in Servo // https://github.com/servo/servo/blob/master/components/layout/flex.rs 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; } } … }
.container { display: flex; flex-wrap: wrap; }
.clearfix::before, .clearfix::after { content: “”; display: table; } .clearfix::after { clear: both; }
.relative-parent { position: relative; } .child-stuck-to-bottom-right-of-closest-relative-parent { position: absolute; right: 0; bottom: 0; }
.spaced-content > * + * { margin-top: 1rem; }
h1 { font-size: calc( 2rem + 3vw ); } // Stops growing at 800px @media( min-width: 800px ) { h1 { font-size: calc( 2rem + ( 800px * } } ( 3 / 100 ) ) );
.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; }
.relative-parent { position: relative; } .child-stuck-to-bottom… { position: absolute; right: 0; bottom: 0; } .pmc-a-glue-parent { position: relative; } .pmc-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 ); } .pmc-a-glue—r-0 { —a-glue-right: 0; }
.pmc-a-space-children-horizontal > * + * { margin-left: $spacer-050; // Fallback. margin-left: var( —a-space-children-spacer ); } @supports( column-gap: 1rem ) { .space-content > * + * { margin-top: 1rem; } .pmc-a-space-children-horizontal { column-gap: var( —a-space-children-spacer ); } .pmc-a-space-children-horizontal > * { margin-left: unset; } }
.a-story-arc-item-border-decoration { —a-story-arc-item-border-decoration-dot-offset: 1rem; —a-story-arc-item-border-decoration-before-transform: translate(-50%, 50% ); &::before { content: ”; position: absolute; top: 0; left: 0; transform: var( —a-story-arc-item-border-decoration-before-transform ); width: rem(10); height: rem(10); background-color: map-get( $semantic-color-list, brand-red ); border-radius: 50%; box-shadow: 0px 0px 0px 3px map-get( $semantic-color-list, brand-red-light 0px 0px 0px 6px map-get( $semantic-color-list, brand-red-lightest );
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
Well…is it? This is CSS Algorithms v3.6.0
The following resources were mentioned during the presentation or are useful additional information.
Blog post list of resources for learning how a browser works and about Computer Science.
Here’s what was said about this presentation on social media.
for free. You
can too.