Category Archives: Snippets

Handlebars Helper: SUM

Handlebars.js mustache logo
Handlebars.js

Here simple Handlebar-js snippet for returning the sum of unknown number of arguments pass to helper.

Parameters: none.

/**
 * Sum
 * Returns the sum of n item.
 */
Handlebars.registerHelper('sum', function() {
      var sum = 0, v;
      for (var i=0; i<arguments.length; i++) {
        v = parseFloat(arguments[i]);
        if (!isNaN(v)) sum += v;
      }
      return sum;
    });

Usage:

{{sum context.value1 context.value2 context.value3}}

Example:

Context:

var context = {facebook: 67, twitter: 80, plus: 13}

Template:

<div class="social-count">{{sum context.facebook context.twitter context.plus}}</div>

Results:

<div class="social-count">60</div>

GIT Aliases

GIT Logo

Dalam GIT pun boleh buat Aliases juga. Cuma tambah dekat config GIT:

#make "st" alias for "status"
git config --global alias.st status

#make "ci" alias for "commit"
git config --global alias.ci commit

#make "br" alias for "branch"
git config --global alias.br branch

#make "co" alias for "checkout"
git config --global alias.co checkout

#make "df" alias for "diff"
git config --global alias.df diff

Dan seterusnya. Rujuk Git Cheat Sheet untuk maklumat lanjut.

GIT Aliases

Amalan Terbaik CSS

CSS Best Practices

Betul. Bukan susah. Cuma banyak komitmen lain. Sama la macam gua. Kalau ada masa boleh la buat pengemasan sikit dekat CSS masing-masing.. Walaupun tak 100% kira orait la.

  1. Asingkan CSS dengan HTML

  2. Readable, Whitespace & Same line braces

    /* BAD */
    .selector {display:none;background:#ff0000;color:#000000;}
    
    /* GOOD - SINGLE LINE */
    .selector { display: none; background: #ff0000; color: #000000; }
    
    /* GOOD - MULTI-LINE */
    .selector {
    	display: none;
    	background: #ff0000;
    	color: #000000;
    }
  3. Gunakan shorthand

    /* LONG CODE IS LONG */
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 1px;
    padding-left: 2px;
    
    /* BAD */
    padding: 0px 10px;
    
    /* GOOD */
    padding: 0 10px;
    
    /* BETTER */
    padding: 1px 2px 1px 2px;
    
    /* BEST */
    padding: 1px 2px;
  4. Organisasikan CSS mengikut struktur top-down

    /* CONTENT */
    styles goes here...
    
    /* FOOTER */
    styles go here...
  5. Multiple Class

    <div class="box right"></div>
  6. Jangan letakkan nama bagi ID selector

    /* BAD */
    button#backButton {…}
    /* BAD */
    .menu-left#newMenuIcon {…}
    /* GOOD */
    #backButton {…}
    /* GOOD */
    #newMenuIcon {…}
    
  7. Elakkan descendant selector dan child selector

    /* BAD */
    treehead treerow treecell {…}
    /* BETTER, BUT STILL BAD */
    treehead > treerow > treecell {…}
    /* BAD */
    treehead > treerow > treecell {…}
    /* GOOD */
    .treecell-header {…}
    
  8. Elakkan guna !important
  9. Fahamkan perbezaan di antara Block Element dan Inline Element.
    /* INLINE */
    span, a, strong, em, abbr, acronym
    
    /* BLOCK */
    
  10. Gabungkan imej-imej dalam satu fail imej sahaja jika boleh (sprite horizontally).
  11. Bila dah sedia, cuba Object Oriented CSS dan LESS CSS.