CSS Skills Garden SydCSS, 2014.12.04 Ben Buchanan / @200okpublic
A presentation at SydCSS in December 2014 in Sydney NSW, Australia by Ben Buchanan (200ok)
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
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’
foo = ‘spam’
foo=’bar’
String foo = “bar”; // Java
More functions // SCSS
// 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’;
// 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.
