A presentation at SydCSS in 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.
Many HTML+CSS devs still hold back from diving into other areas of code - if this doesn’t sound like you, it probably describes someone you know. CSS has taught you skills that pave the way into other languages.
for free. You
can too.