What is A Programming Language? By Will Chrichton

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; }

.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; } .pmc-a-glue-parent { position: relative; } .child position: absolute; right: 0; bottom: 0; } .pmc-a-glue { // Fallback is top left for everything. 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; }

.a-space-children-horizontal { display: flex; flex-wrap: wrap; } .space-content > * + * { margin-top: 1rem; } .a-space-children-horizontal > * + * { margin-left: $spacer-050; // Fallback. margin-left: var( —a-space-children-spacer ); } @supports( column-gap: 1rem ) { .a-space-children-horizontal { column-gap: var( —a-space-children-spacer ); } .a-space-children-horizontal > * { margin-bottom: 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 );

describe( ‘a-space-children-vertical’, () => { const parent = document.querySelector( ‘.a-space-children-vertical’ ); const parentBox = parent.getBoundingClientRect(); it( ‘does not apply a space above the first item’, () => { let kidBox = parent.children[0].getBoundingClientRect(); return assertEquals( parentBox.top, kidBox.top ); }); it( ‘spaces children’, () => { let kid1Box = parent.children[0].getBoundingClientRect(); let kid2Box = parent.children[1].getBoundingClientRect(); let parentStyles = window.getComputedStyle( parent ); let spaceBetweenKids = parseInt( parentStyles.getPropertyValue( ‘—a-space-children-space return assertEquals( kid1Box.bottom, ( kid2Box.top - spaceBetweenKids ) ); }); it( ‘does not apply a space below the last item’, () => { let kidBox = children[ children.length - 1 ];

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