PSA – From Software Writer Guy….

In short, software… does exactly what you write (tell) it to do. end PSA.

On another note, every time I muster the motivation to write something here… it ends in writers block. I would be lying to myself if there wasn’t a slight fear of judgement for every word that I post on this tiny blip of a digital sphere, I call the web (metaphorically speaking, that is). And no, the internet is not a series of tubes, where some unlucky fella was put on the spot to give that same definition of the internet… poor guy.

But hey, here I am, honestly typing away.

I thought hmm, what is the true goal of writing something smart and intelligent here? To be recognized that I can write software? To show that I know my stuff? Or plainly, just advertising myself like a two bit… binary clock? nevermind that. Perhaps a bit crass there. Forgive me if I offend, or don’t.

I really don’t write enough and I should find the discipline to do so even more. Of course I want to mention that I have a hard time finding the “time” to write, but what it comes down to, is having the “discipline” to do “something”. Time is there. Time is always there. It comes and goes. And guess what? There will be more “time” that comes and goes… And guess what? Yup, you guessed it, there will be more “time” that “comes and goes” ;)

So having mentioned “discipline”, I find that there is still something else that is lacking here… I want to say “motivation”, however, in my personal experience, motivation is merely a trigger or catalyst for maintaining the discipline to do whatever you’re doing. The challenge, is refueling the motivation and refueling the passion. You believe in what you believe in for whatever reasons you have or don’t.

Take for example, a very simple example:

You love video games. There’s that one video game you have that you’ve yet to beat. Very rarely, comes a game that sucks you in and has your butt stuck to the couch from beginning to end. And let’s say this is one of those games. Where do you find the discipline to keep your behind glued to your seat? Typically, it’s because the game is generally very engaging in some way or another. It invokes emotions on you and plays on your humanity strings. Ultimately, you want more and more as you go. While you play this game, time is irrelevant. Hours go by in what seems like minutes. And then you realize much later on, you’ve beat the game. You kept on going until there was no more… or atleast until the next sequel. And time returned back to normal… an hour goes by and it feels like an hour… or maybe slower. So what motivated you to play this long? Can you honestly say, “man, it was sheer discipline”

This is what I believe many entrepreneurs strive for. The ability to wakeup and be excited and motivated to goto “work”. This is really difficult. Conceptually, it is easily achievable. It only requires a change in one thing. You.

Ok, I feel motivated and much better about myself. I’m going to get off my fat butt, hit the tread mill, come back and write me some code.

… and just maybe share something cool here….

Oh I just had a cool idea… ^_^

SASS and LESS Shorthand Notes

Thoughts on LESS and SASS

Both essentially do the same thing. Which is take a shorthand interpretation of CSS, mixin with nesting, operators, and optional variables and you’ve got the following:

  • less css to write
  • css which is organized
  • compiled outputted css
  • syntactically they are similar.
  • feature wise, SASS has allot more going for it then LESS
  • community wise, I’ve seen both of them used, and really it’s come down to a “work with what you know” mentality. If you know one, the other doesn’t seem much difficult to learn either.
  • They support much of the same functionality.
  • Their exists frontends which put a watch on the file your working with (i.e. .less, .sass. or .scss) and generates the corresponding css file.

SASS

compass – http://compass-style.org/

sass – http://sass-lang.com/

Variables

.scss

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
/* CSS */

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

Nesting

.scss

table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}

li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}

css

/* CSS */

table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}

li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}

Mixins

.scss

@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}

@mixin left($dist) {
float: left;
margin-left: $dist;
}

#data {
@include left(10px);
@include table-base;
}

css

/* CSS */

#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}

Selector Inheritance

.scss

.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
@extend .error;
border-width: 3px;
}

css

/* CSS */

.error, .badError {
border: 1px #f00;
background: #fdd;
}

.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}

.badError {
border-width: 3px;
}

LESS

less – http://lesscss.org/

Variables

.less

 // LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

css

/* Compiled CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

Mixins

.less

// LESS

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

css

/* Compiled CSS */

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

Nested Rules

.less

// LESS

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

css

/* Compiled CSS */

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

Functions & Operators

.less

// LESS

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}

css

/* Compiled CSS */

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}