So now, let me get into this Closure feature in JS. Basic question is of course, what is Closure?

As mentioned earlier, it is a feature. It lets a function to ‘closes over’ some local variables; This situation is also known as the “upwards Funarg problem” and many old programming languages forbit this.

Next, why do we use Closure?

Well for one reason, Closure frees you from worrying about “alive” variables. Secondly, once we get how Closure works, we can use function values creatively to fit our purpose(s).

* Please make sure you’re ready to type on your awesome console

Ok, now let’s dive into the code.

function formulaOne(base) {
    return function(adder) {
      return base + adder;
    }
  }

when we run formulaOne() on console, we will get this as a result

function(adder) {
    return base + adder;
  }

ok, now let’s make a new variable to make it simple

var awesomeFormula = formulaOne(2)

Next, let’s run awesomeFormula(3), then see what we get BAM!

=> 5

Confused? don’t be. Here is the secret:

awesomeFormula(3) == formulaOne(2)(3)

Ring a bell? So basically when we type awesomeFormula(3), here’s what’s happening:

  function formulaOne(2) {
    return function(3) {
      // base = 2
      // adder = 3
      return 2 + 3;
    }
  }

Let’s make this a bit fun by returning another function inside function(adder) => not usually happen in real life but let’s do this just for fun:

  function formulaOne(base) {
    return function(adder) {
      return function(multiply) {
        return (base + adder) * multiply;
      }
    }
  }

// Create a variable to simplify our function

var finalResult = awesomeFormula(3)

when we type, finalResult(5) == formulaOne(2)(3)(5) guess what we’ll get?

=> 25

  function formulaOne(2) {
    return function(3) {
      return function(5) {
        // base = 2
        // adder = 3
        // multiply = 5
        return (2 + 3) * 5;
      }
    }
  }

Not that complicated to understand right?

Bonus{Passing multiple arguments}:

function numberOne(basic, secondary){
  return function(multiply) {
    return (basic + secondary) * multiply;
  }
}

numberOne(2, 3)(5)

=> 30

Explanation:

function numberOne(2, 3){
  return function(5) {
    return (2 + 3) * 5;
  }
}

PS: Thank you so much for reading this post, any feedback will be more than welcome – please be nice tho, I am still in learning stage. Also if you have any suggestions, please let me know; I am really loving learning JavaScript these days

Today I was planning on setting up WordPress locally using MAMP. I was totally geared. MAMP checked, ScoutApp checked(Awesome Compass & SASS app), coffee checked, brain checked. I also prepared that things will fuck up, considering how unlucky I am in this particular coding department; So of course, I didn’t forget to put my gay-rose-beer for stress peak helper.

Anyway, my problem was my MySQL Server didn’t and/or couldn’t start on MAMP. Lame, I know. So I was googling around, tried out some stuff that didn’t seem to work; Until… DUM DUM DDDUUUUMMM

Fix #1(source: http://twob.net/)

• 1. Quit MAMP
• 2. Go to your terminal and type killall -9 mysqld
• 3. Restart MAMP, bitcheeess

For most people, this step is enough. But what happened with me was a bit unordinary. MySQL was still red after I typed type killall -9 mysqld on terminal. My first thought was “goddamnit! I knew it!! It wouldn’t be this easy for me!

Wait! don’t be too sad, second step will work like a charm and super-fantastic-awesome.

Fix#2
get your hands dirty, we’ll do this manually.

• 1. Go in MAMP folder >> MAMP/db/mysql/
• 2. Delete all files but LEAVE FOLDERS ALONE – don’t touch it, don’t even think bout touching it!
• 3. Do not panic. You’re not losing your database(s), again, as long as you leave the folders alone
• 4. Open MAMP and be happy

That’s all Short Saturday post for me. I am still lazy of course :-/ unfortunately.

OH! I am super excited to tell you guys about my fun-side-project. I am planning on publishing some articles; Written, designed, and drawn by independent artists out there. Here is the sample of my first article, let me know if you’re interested in contributing

Chest pain

I probably lied to you when I said I won’t wait for you
And I probably was in denial when I claimed I was taken

But these things I know for sure
How I keep failing in love with you
How you used me to fill your temporary blank pages
And how I despise your presence just to feel the pain in my chest

You, I love; but I don’t like you
And I, I refuse to be addicted to you

1. The difference
Yes, there are two different things, thus comparing them may not be the best post I could write on Saturday morning. However, my motivation came from the fact that I couldn’t explain clearly when Jeff Kreeftmeijer asked me the same question last week(I am really bad with explaining). So yea, I am gonna write the difference real clear here. When I say “real clear”, I mean real easy to understand with no fancy words involved.

So in plain words, Modernizr detects cool features from the awesome HTML5 & CSS3 specifications. It tells you whether a browser has those features natively implemented or not. That’s it.
It doesn’t fix anything – but it gives you the ability to unuglify the ugliness of old browsers.

While CSS3PIE makes “Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features”. Yep, a fancy line to describe “hacking”.

2. So, which one I should use?
Uhm… It’s up to your client really. I think most web developers will definitely go for Modernizr, since we are allergic to hacking (right?). However let’s make this post a bit entertaining – by creating two hypothetical clients.
Client A = Awesomeness = MODERNIZR!!

• - Clean code is important
• - Focus on the effectiveness
• - I want something that is ready for the future
• - Don’t sweat the small stuff, the site doesn’t have to look the same everywhere; Just make sure it looks decent & works perfect
• - No, I won’t die if the border radius or box shadow don’t show up on old browsers

Client B = Bawls = CSS3PIE

• - I don’t do no coding. Just make it work.
• - Effectiveness of the site? well – the border radius will show up right?
• - Future? what future?! just give me that goddamnboxshadow!
• - I want the site to look exactly the same EVERYWHERE. Just put extra lines of code, use tons of images and divs, kill baby cats – whatever!

In conclusion,
Personally, I would suggest everyone to stop hacking and start accepting that you cannot make a layout looks the same everywhere. Developers understand this issue, however the most important task is to educate and convince the client to invest their money to something that is long term. Yes, I am talking about transforming client B to A. Good luck with that.

FYI: This doesn’t mean that I dislike &/or against CSS3PIE at all. I really thank them for their service. I would rather use CSS3PIE than having to slice tons of images or kill baby cats. So yea…CSS3PIE, you’re AWESOME!

CASE 1: Body class

// Giving a body class to every page
// page_classes == nameofthefileWITHOUTdotHTML
%body{:class => page_classes}

Let’s get more specific now, what if I ONLY want to have a class name on the index for example – I mean, I just need it there anyway! Sure, here it is:

%body{:class => (request.path_info.include?('index') || request.path_info == '/') ? 'index' : nil}

CASE 2: Show this only on certain page(s)

// Show this ONLY on index page
- if request.path_info.include?('index') || request.path_info == '/'
  %section#signup
  put the code here

CASE 3: Looping
The goal is to make:
- an ordered list
- with several list items(with ordered numbers)
- random positioning on each of the list item

// [10, 2, 4, 10, 7, 4] == #{val}
%ol#chart
  - [10, 2, 4, 10, 7, 4].each_with_index do |val, i|
    %li{:style => "left: #{val}px"}
      %span.num= i+1
      This is the text

Ok – this is it for now. More coming…

The idea!
I believe it was initiated by Jeff Kreeftmeijer and then supported by Robert Beekman & Thijs Cadier. It went pretty quick, they discussed about it one afternoon -rather informal-, and then the three of them built it within one evening(yes, on the same day, they’re maniacs).

Logo process
They just wanted me to draw a tapir. Pretty simple request right?
Unfortunately I am a picky person whom needs her space in order to create something that I like and no, I am not proud of it. Kinda annoyed me in a way actually – I am trying to learn some skills to tackle this particular problem.(see: Dear designers, how do you handle mood-swings in designing process?)

So I drew a tapir using Illustrator on Sunday afternoon. I did that because I always feel super comfortable at home & honestly, that tapir wouldn’t look like a tapir if I drew it at the office. Secondly, thanks to Jeff for suggesting the stroke on the logo with a subtle drop shadow – totally loving it – and yes, we do pay attention to details because we love our Tapir.

Here is my logo drawing process:

Front End
3 fancy things I like is the CSS3 transition on the logo (thanks to Roy Tomeij), “back to nav” button and this jQuery code that makes sure every link scrolls to its destination with duration of 1sec. (thanks medianotions!)

$(document).ready(function() {

  // Scroll slowly
  $('a[href*=#]').click(function() {

    // duration in ms
    var duration=1000;

    // easing values: swing | linear
    var easing='swing';

    // get / set parameters
    var newHash=this.hash;
    var target=$(this.hash+', a[name='+this.hash.slice(1)+']').offset().top;
    var oldLocation=window.location.href.replace(window.location.hash, '');
    var newLocation=this;

    // make sure it's the same location
    if(oldLocation+newHash==newLocation)
    {
       // set selector
       if($.browser.safari) var animationSelector='body:not(:animated)';
       else var animationSelector='html:not(:animated)';

       // animate to target and set the hash to the window.location after the animation
       $(animationSelector).animate({ scrollTop: target }, duration, easing, function() {

          // add new hash to the browser location
          window.location.href=newLocation;
       });

       // cancel default click action
       return false;
    }

  });
});

Anyway…
That’s all I guess, we’re super excited & totally geared to make Tapirgo AWESOMER!! (no, that word doesn’t really exist – but whatever, deal with it, I want to use that word.)

Anyway, uhm…I know I have been lazy updating my blog but I am pretty committed today. I am gonna write about some amazing musicians whom inspired me on daily basis. Well, focusing on their albums actually. I must admit that my taste is a little bit weird though, I listen from classical to hard rock with a tendency to lean towards the underground/alternative music. But hey! they’re amazing! And you should consider checking them out!

“Far” by Regina Spektor
This chick is freaking genius! If you’re into classical music, you’ll most probably find her music interesting – at least that’s how I got hooked. First time I heard her music was approximately 4 years ago, Hotel Song was the first song that actually made me google bout her(as far as I remember) – anyway, in 2009 she released her 5th album & I totally love it:

“Fantasies” by Metric
Their genre is a combination between Indie Rock and New wave. They sound super amazing – like always giving me colors in my brain whenever I listen to their albums. Their music is super addictive! Seriously, google them, they’re worth it.

“It’s Blitz!” by Yeah Yeah Yeahs
Please don’t tell me you’ve never heard of em. I mean, they’re like one of the most awesome Indie Rock bands in the universe(according to me of course). I found out about them years ago when they weren’t so well known like now. Still tho, their music is original despite the fact that they’re pretty mainstream nowadays. Anyway, they’re kind of a band you either love or hate I guess – for me, I love their music so much because they write amazing notes that spark my brain with weird lights(sounds crazy I know, but I mean it). In fact, I often listen to their music while designing/drawing, they’re like my brain’s ecstasy.

Oh, one last thing:

Dear Designers, care for Japan? If so(and I really hope you do), go to this link & get the bundle! it’s only for $5.

Original code:

    input[type="submit"]
      height: 30px
      bottom: -40px
      left: 0
      position: absolute
      padding: 0 12px 0 46px
      line-height: 30px
      color: #fff
      background: $blue sprite($sprite, bg_button_1) no-repeat
      border: 0

Here is the screenshot(sigh):

What triggers it?
Problem usually occurs when you give a value to a button that contains longer than (approximately) 10 characters. O yea, padding also ignored on IEs.

Solution:
IF the button text is fixed, you can specify the width of the input[type="submit"] => which I still don’t prefer because giving width doesn’t sound like the code is bulletproof. Therefore, dum..dum..duuumm… there’s an easy fix for it:

overflow: visible;

Final IE7 screenshot:

(How do you know if the screenshot taken from IE7 you say? well…recognize how the font rendered & textarea? pretty ugly eh? )

This won’t take long – I will just tell you a quick story regarding the redesign process (I am having sorethroat & severe backpain – caused by my boxing activity last weekend. Ironically on the day I am taking a day off.)

Straight to te point

But let me make it clear before I talk about more stuff – I love how it turns out. I love how clean & simple it is. Ok, move on:

I started enthusiastically but then a bit worn out after a couple of months. You know the feeling of like being in a studio to record your album for months(usually take approx 6months for a band/artist to finish an album – sometimes more if they get stuck) and then because you listen to your songs over and over and over again, you kinda lose your senses & cannot determine if what you’re making is good or not? same shit different story.

Here is what I learn; Making a simple design that looks professional is tough work. Simple is not easy.

Simplicity is the ultimate sophistication ~Leonardo Da Vinci

Since the beginning, Roy & Thijs made it clear that they want a clean & simple design that focuses on UI(easy-on-eyes). I made several sketches but didn’t really meet their expectations – I was a bit stressed out because I couldn’t think of anything cleaner & simpler than what I made back then.

Lucky they took it a bit easy, I got several breaks during the whole process. That actually helped us to really see if what we were making was in the right direction.

Despite how simple it looks today – I am proud to say that it was hard, complicated & well thought-out design.

That’s all I guess. See, this is pretty short. O yea, comments will be appreciated! you can post it here on my forrst link.