Sass Vs LESS Manakah yang lebih baik?

Hallo teman-teman, setelah kemarin saya bahas tentang Pengenalan Sass dan fitur-fiturnya, sekarang saya akan sharing perbandingan antara Sass dan LESS dengan sedikit penjelasan agar teman-teman semua lebih paham.

Sebelum mulai jika teman-teman belum baca tentang Sass boleh buka url ini,

http://blog.nostratech.com/2017/12/sass-css-with-superpowers.html

Apa itu Preprocessor CSS?

Sering kali kita menulis CSS dengan berulang2 seperti warna, class yang berbeda, dll. Ini bisa membuat kita para developer jadi lebih banyak memakan waktu. Oleh sebab itu kita butuh Preprocessor CSS yang pada dasarnya adalah bahasa pemrograman yang digunakan untuk membuat bentuk, warna yang nantinya akan di compile menjadi CSS biasa.

Menurut Google Trends, Sass jauh lebih populer dari LESS sampai bulan Desember 2017 ini.

Google Trends

Keuntungan Menggunakan Preprocessor

Salah satu keuntungan yang utama adalah kita sebagai developer atau designer bisa menggunakan preprocessor untuk menghindari Pengulangan pada CSS yang akan kita buat.

Dengan Preprocessor, kode kita akan lebih bersih. Contohnya adalah dengan menggunakan variable untuk menyimpan suatu nilai, jadi masalah pengulangan yang kita temui di CSS akan lebih cepat kita selesaikan dengan Preprocessor ini. Dengan Preprocessor, file kita bisa lebih terstruktur karena kita bisa memisahkan antara fungsi satu dengan fungsi lainnya di beberapa file yang berbeda. Selain itu, kita bisa menggunakan Operator Matematika untuk menentukan sebuah nilai yang kita inginkan.

Installasi Sass dan LESS

      Untuk memulai menggunakan keduanya, kita bisa menggunakan aplikasi Complier tambahan. 

      Selain aplikasi diatas, kita juga bisa menggunakan CLI. Berikut Cara Installnya :

1. Sass : Pertama kita harus menginstall Ruby untuk Windows / Linux. Kemudian jalanakan sudo gem install sass. Selain menggunakan Ruby, ada juga library lain seperti libSass, yang sekarang membawa Sass ke NodeJS, tanpa membutuhkan Ruby untuk compile.
2. LESS : Sebelum install LESS kita harus menginstall NodeJs, karena LESS dasarnya adalah menggunakan javascript, lalu kita hanya perlu menjalankan npm install -g less. Untuk windows, bisa menggunakan npm install less.

Code Editor

Masih banyak Code Editor yang belum support Sass dan LESS. Oleh sebab itu, kita perlu menginstall plugin agar syntax dapat dikenali, sehingga lebih memudahkan kita untuk menulis syntax.

Berikut plugin untuk Sass dan LESS :

Ini dia beberapa perbandingan Sass dan LESS secara mendasar :

Sass : 

• Compiler Menggunakan Ruby / libSass
• Sass Menggunakan $ untuk penulisan Variable
• Sass memiliki Compass (cross-browser support)
• Looping berfungsi untuk Semua Data Class
• mempunyai 2 extension yaitu .SASS & .SCSS
• Sass tidak membutuhkan titik koma ';' dan kurung kurawal '{}' untuk penulisan syntax
• SCSS membutuhkan titik koma ';' dan kurung kurawal '{}' seperti CSS tetapi mempunyai fungsi seperti Sass

LESS :

• Compiler Menggunakan NodeJs (Javascript)
• Less Menggunakan @ untuk penulisan variable 
• Looping (Hanya untuk Angka)
• 1 extension (.less)
• Less membutuhkan titik koma ';' dan kurung kurawal '{}' seperti CSS

   
Setelah kita membahas beberapa perbedaan antara Sass dan LESS, dapat disimpulkan bahwa Sass lebih kaya dalam fitur. Oleh karena itu, saya menganjurkan teman-teman semua untuk memilih Sass sebagai preprocessor dalam pengerjaan CSS. Selain lebih kaya fitur, Sass juga lebih populer dari LESS sehingga kita akan lebih mudah untuk belajar dengan adanya banyak sumber yang membahas tentang Sass. 

Nah, sekian dulu blog tentang Perbandingan Sass dan Less, semoga dapat membantu teman-teman semua.

GANBATTE!!!

Refrensi :

http://marksheet.io/sass-mixins.html

http://sass-lang.com/

http://lesscss.org/

http://www.keycdn.com/blog/sass-vs-less/

popapp, Solusi Mobile Prototyping yang Mudah dan Cepat

When you have no time to design on Photoshop or Sketch for your prototype, paper and popapp.in is the solution.

popapp.in yg memiliki kepanjangan dari prototyping on paper, yang merupakan salah satu app yang memudahkan kita untuk membuat prototype hanya dengan pensil, kertas dan popapp. Selain popapp, masih ada marvelapp, namun dari sisi review di google play, jumlah reviewer popapp 3 kali lipat lebih banyak, so it’s easy to decide which should be downloaded ^^
Berhubung saya tidak bisa menggambar maka saya membutuhkan panduan untuk menggambar, saya menggunakan sketch nexus yg saya download dari web popapp, dan kemudian saya print.

Dengan menggunakan sketch tersebut, gambarlah manual mockup yang diperlukan, berikut merupakan contoh beberapa mockup yang saya buat.

Sebelum bisa menggunakan popapp, kita harus melakukan sign up terlebih dahulu (free). Free user popapp hanya mendapat fasilitas 1 sample project dan 1 slot untuk project yang akan kita buat.

Setelah sukses melakukan sign up, login di mobile app nya dan create project, tampilan nya kira-kira akan seperti di bawah ini, Test merupakan project yang saya buat.

Selanjutnya adalah, masuk ke dalam project, dan import mockup (bisa dengan take photo atau import gallery). Yang saya lakukan adalah dengan melakukan take photo langsung dari popapp. Saya memilih dengan take photo langsung dari popapp, karena di kamera popapp terdapat borderline yang berguna untuk menentukan batas gambar yg akan diambil, sehingga mockup kita tidak terpotong .

     

Ketika sudah mengimport semua mockup, langkah selanjutnya adalah menambahkan gesture, action, atau link action dengan mockup yang lain. Yang saya lakukan di Mockup adalah, jika card Batch 1 di-tap maka akan directed ke Mockup-2,lakukan untuk semua mockup, berikut merupakan gambarannya.

        

Ketika semua mockup sudah di link dan diberi action, maka hasilnya bisa langsung dipreview, berikut merukapan contoh nya (tap button button yang ada, termasuk floating button "+" untuk melakukan simulasi).

happy prototyping! ^^v

Disclaimer : penulis bukanlah seorang designer dan tidak expert dalam ux/ui design.

Auto change color Input Text, using JQuery in ADF

JQuery adalah, antarmuka JavaScript Library yang mendukung sisi Client Scripting HTML dan JQuery itu Opensource software yang berlisensi dibawah MIT.

Disini saya akan menjelaskan bagaimana menggunakan JQuery didalam ADF. dan bagaimana membuat Auto change color untuk inputtext dengan JQuery.


Persiapkan ini semua :

Jdeveloper  : Oracle Jdeveloper 11.1.1.6.0
Menggunakan Jquery : Jquery 1.4.1


Step by Step :

Step 1

• Buka Jdeveloper dan Pilih New Application lalu pilih " Fusion Web Application "
• Buat jspx, di dalam " Web Content "
• Buat Folder ( js ) didalam web content, lalu buat " javascript file " dengan nama inputText.js

dan paste script tersebut ke dalam file ( inputText.js )

function changeColor() {
    if ($("input[name=it1]").val() != null) {
       if (($("input[name=it1]").val().length > 0) && ($("input[name=it1]").val().length < 3)) {
            $("input[name=it1]").css("color", "magenta");
        }
      else if (($("input[name=it1]").val().length > 3) && ($("input[name=it1]").val().length < 6)) {
            $("input[name=it1]").css("color", "red");
        }
        else if (($("input[name=it1]").val().length >= 6) && ($("input[name=it1]").val().length < 9)) {
            $("input[name=it1]").css("color", "yellow");
        }
         else if (($("input[name=it1]").val().length >= 9) && ($("input[name=it1]").val().length < 12)) {
            $("input[name=it1]").css("color", "maroon");
        }
         else if (($("input[name=it1]").val().length >= 12) && ($("input[name=it1]").val().length < 15)) {
            $("input[name=it1]").css("color", "teal");
        }
         else if (($("input[name=it1]").val().length >= 15) && ($("input[name=it1]").val().length < 18)) {
            $("input[name=it1]").css("color", "blue");
        }
        else {
            $("input[name=it1]").css("color", "green");
        }
    }
}

Step 2

• Drag and Drop " Input Text(ADF Faces.Common Components) " kedalam jspx anda
• Drag and Drop " Client Listener(ADF Faces.Operation) " kedalam inputText

Preview 

• Isi kolom ( Method : changeColor ) dan isi pilih ( Type : OnKeyDown )

Step 3

• Cara menggunakan JQuery di ADF cukup mudah dengan menggunakan tag " <af:resource /> "
• Lalu paste link JQuery didalam - source" paste here " -

<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"/>
<af:resource type="javascript" source="js/inputText.js"/>

• Paste script di atas didalam jspx.

preview step 3 :

Finish..

And Run your jpsx.

Preview After Run.

jadi, si JQuery akan mengubah warna label didalam inputText sesuai " jumlah value " yang sudah saya tentukan di dalam Javascript ( inputText ).


Sample Aplikasi ( Download )


Silakan dikembangkan.
Terima kasih.