CSS Skills Garden SydCSS, 2014.12.04 Ben Buchanan / @200okpublic

WARNING This presentation simplistically conflates a range of programming concepts. This is a known issue.

A tale of the web, evolution and freaking out.

A little look back

<body background=”#000000” text=”#D5D5D5” link=”#FFFFFF” vlink=”#C0C0C0”> <font size=”3” face=”OCR A Extended”>

A:link {text-decoration: none; color:#0000FF;} A:visited {text-decoration: none; color:#0055AA;} A:active {text-decoration: none; color:#ff9900;} A:hover {text-decoration: none; color:#990000;} TD {font-family:helvetica,arial,sans serif;} body {background-color: #FFFFFF}

// flipper V2.0 // must have associated init() call in <HEAD> of page to assign loaded=true and var selected; function flipper(name,image) { if (loaded!=”true”) return; name=name+”;selected=selected+”; // required for NS3 if (name==selected) return; if (document.images) { document[name].src=eval(image+”.src”); } } function click(name) { if (loaded!=”true”) return; oldselected=selected; selected=name; if (document.images) { if (oldselected==”option1”) flipper(‘option1’,’image1b’); if (oldselected==”option2”) flipper(‘option2’,’image2b’); if (oldselected==”option3”) flipper(‘option3’,’image3b’); if (oldselected==”option4”) flipper(‘option4’,’image4b’); if (oldselected==”option5”) flipper(‘option5’,’image5b’); if (oldselected==”option6”) flipper(‘option6’,’image6b’); if (oldselected==”option7”) flipper(‘option7’,’image7b’); if (oldselected==”option8”) flipper(‘option8’,’image8b’); if (oldselected==”option9”) flipper(‘option9’,’image9b’); if (oldselected==”option10”) flipper(‘option10’,’image10b’); if (oldselected==”option11”) flipper(‘option11’,’image11b’); if (oldselected==”option12”) flipper(‘option12’,’image12b’); if (oldselected==”option13”) flipper(‘option13’,’image13b’); if (oldselected==”option14”) flipper(‘option14’,’image14b’); } }

<a href=”option1.html” target=”picture” onMouseOver=”flipper(‘option1’,’image1a’);return true;” onMouseOut=”flipper(‘option1’,’image1b’);return true;” onClick=”click(‘option1’);”><img src=”img/option1b.gif” border=0 name=”option1” alt=”news at Griffith Uni” vspace=3></a><br>

Evolution

JavaScript improved ● jQuery took out the drudgery ● ARIA enabled accessibility ● New browsers made it faster ● Debugging tools made it easier

Then and now ● HTML ● ● CSS ● ● Javascript (maybe) ● FTP ● SVN (maybe) ● ● Templating Preprocessors, media queries, typefaces, vectors jQuery, plugins, libraries, frameworks, transcompilers, client-side MVC Dependency managers, build & deploy pipelines ● Cloud hosting ● DVCS ● Tests and builds ● Powerful debugging and performance testing tools

These days frontenders are “engineers”.

If you know templating and CSS preprocessors, you know fundamental programming concepts.

SCSS vs JS: basics

Variables // SCSS // JS $foo: “bar”; var foo = ‘bar’;

Types // SCSS // JavaScript Numbers Numbers Strings Strings Colors Booleans Booleans Nulls Null Lists 1,2,3 Arrays [1,2,3] Maps 1:foo, 2:bar Objects { 1:’foo’, 2:’bar’ } Undefined Function object

Functions // SCSS // JavaScript @mixin myMixin($bar) { function myFunction(bar){ property: $bar; return bar; } } @include myMixin(foo); myFunction(“foo”);

String and maths methods // SCSS strings // JS strings to-upper-case(str) str.toUpperCase() str-length(str) str.length // SCSS numbers // JS numbers round(1.1) Math.round(1.1) ceil(1.1) Math.ceil(1.1) floor(1.1) Math.floor(1.1) max(1,2,3) Math.max(1,2,3) random() Math.random()

SCSS vs JS: a little harder

Scope // SCSS $width: 10em; #main { $width: 5em; width: $width; } #sidebar { width: $width; // what is $width? }

Scope // SCSS // CSS output $width: 10em; #main { #main { $width: 5em; width: 5em; } width: $width; } #sidebar { #sidebar { width: $width; } width: 10em; }

Scope // SCSS $width: 10em; #main { $width: 5em !global; width: $width; } #sidebar { width: $width; // now what? }

Scope // SCSS // CSS output $width: 10em; #main { width: 5em; #main { $width: 5em !global; } #sidebar { width: $width; } } #sidebar { width: $width; // now what? } width: 5em;

Javascript scope ● A little more complex than SCSS ● Look up “hoisting” and “closures” ● …on MDN, not W3Schools

Tip: learn scope, closures and hoisting and you will get 87% of JavaScript meetup puzzle code. - source: australian bureau of made-up statistics

It’s not just Javascript

More vars $foo: ‘bar’; // SCSS @link-color: ‘bar’; // LESS var foo = ‘bar’; // JS foo = ‘bar’

Ruby

foo = ‘spam’

Python

foo=’bar’

Shell

String foo = “bar”; // Java

More functions // SCSS

Python

// Shell @mixin baz($bar) { def ham(eggs): function baz { property: $bar; print eggs } @include baz(foo); echo “$1” } ham(‘spam’) baz “foo”

Dependency injection // SCSS @import ‘reset’;

python import spam

// Arduino (C, really) #include <foo.h> // Java import com.domain.foobar.f.o.o.b.a.r.foo.bar.FooBar;

It’s not just languages

Dependency management // SCSS (ruby gems) $ bundle install // NodeJS (npm) $ npm install // Java (maven) $ mvn install

It can be hard to start.

There’s so much It’s too different Common worries Scared to admit I don’t know I’ll never catch the ninjas

Be inspired to start. HA!

Play your own game. Build on what you’ve done.

Step outside the stylesheet. Your skills will serve you well.