In the world of webdevelopment building websites can be a tediously long job. Purely because a lot of techniques are dated and require a lot of boring repetition just to get them done.
This sometimes leads to hard to maintain code especially in the web because of closing tags and no requirements of indentation. But with modern technologies I’ve found newer techniques that make writing code a huge joy. Here’s a short overview of the ones I currently use.
SASS
First one I found was SASS a pre-compiler for CSS. CSS is used to make websites look pretty. On it’s own it’s already an abstraction away from inline markup in HTML. But SASS goes a step further. First of all it uses Python syntax which is indent dependent, which forces readable code. Secondly SASS allows for semi coding which makes repetitive code or hunting for that one color a thing of the past.
Example:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
Results in:
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
On the site of SASS there are more examples of what’s possible. Though it can go into extremes.
HAML
The next step is doing something similar for HTML in the form of HAML. Originally this was designed for Ruby on Rails, but it works quite well with just HTML or templating engines like TWIG. Greatest advantage is that closing tags aren’t written anymore and like SASS it uses indenting meaning code will always be nicely indented.
%div#things
%span#rice Chicken Fried
%p.beans The magical fruit
%h1.class.otherclass#id La La La
To:
<div id='things'>
<span id='rice'>Chicken Fried</span>
<p class='beans'>The magical fruit</p>
<h1 class='class otherclass' id='id'>La La La</h1>
</div>
CoffeeScript
De laatste implementatie die ik gebruik is CoffeeScript een precompiler voor JavaScript die ook de Python syntax hanteerd. Dit geeft het zelfde effect, maar maakt ook andere interessante dingen mogelijk zoals (maakt gebruik van jQuery):
The latest implementation I use is CoffeeScript a pre-compiler for JavaScript which also uses the Python syntax. This gives the same effect of readable code, but also gives other very interesting advantages. (example uses jQuery):
formValues = (elem.value for elem in $('.input'))
This one line results in the following code:
var elem, formValues;
formValues = (function() {
var _i, _len, _ref, _results;
_ref = $('.input');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
elem = _ref[_i];
_results.push(elem.value);
}
return _results;
})();
A huge difference.
Usage
There are several options of utilizing these pre-compilers, among which generating the code on the fly. Personally I chose for local compaliation into the relevant CSS, HTML and JS files. Using VIM I have a button I press that handles the generation for me. In later articles I’ll go into detail in how I set these up.
The only thing I haven’t found yet was something similar for PHP. Mainly because there isn’t a need for it in the coding space. Personally I’d only need actual code and no HTML escaping. However I do have a snipmate implementation for Vim which makes code completion very easy and convenient.
It’s important to reduce repetition and tedium in the jobs. And every year one should review how you do things and see how you can do them better.
