Ebook Mengembangkan CSS Framework Sendiri [Bahasa indonesia]

Melanjutkan dari post sebelumnya yang membahas BEM CSS convention, seperti sudah saya sampaikan pada tulisan sebelumnya bahwa akan coba saya jelaskan step by step pembuatan framework css sederhana Awesome-BEMCSS maka pada post kali ini penjelasan akan saya coba buat dalam bentuk ebook yang bisa Anda download gratis di bagian bawah post ini nanti.

Pada pembuatan framework ini, akan banyak digunakan beberapa tools yang mungkin akan terdengar susah dipahami bila belum terbiasa namun terasa mudah bila sudah paham, oleh itu saya akan menyarankan untuk sedikit membaca mengenai beberapa tools yang akan digunakan di ebook tersebut, seperti :
– NodeJS dan NPM (*baca instalasi dan basic usage nya)
– SASS (*baca basic SASS di official page nya)
– Grunt (*baca get starter nya saja cukup)

Ebook ini dapat di download secara gratis disini : http://mazipanneh.com/blog/download-ebook-programming/
Demikian sharing dari saya, semoga bermanfaat

Awesome BEM CSS – Simple CSS Framework with BEM Convention

Sebelum membahas tentang Awesome-BEMCSS itu apa, saya akan coba bahas sedikit mengenai BEM.

BEM atau yang merupakan singkatan dari Block-Element-Modifier sesungguhnya bukanlah sebuah CSS Framework layaknya bootstrap atau foundation yang sering kita dengar di dunia per-CSS-an. 

BEM hanya sebuah aturan dalam penamaan class di dalam CSS,  sebagaimana beberapa aturan-aturan lain yang mungkin kita kenal seperti OOCSS, atomic, SMACSS, dll.

BEM sendiri mengusung konsep yang sederhana namun mudah dipahami meskipun tidak terlalu mudah pada saat implementasi (*paling tidak saya merasa kesulitan pada awalnya).

BEM seperti kepanjangan dari namanya, membagi konsep aturannya ke dalam 3 bagian Block-Element-Modifier.

Example Using Swagger UI for NodeJS

Swagger (http://swagger.io/) adalah salah satu tools yang populer di kalangan API developer terutama digunakan untuk membuat dokumentasi atas API yang telah dibuat.
Contoh official Swagger UI dari website mereka bisa dilihat disini : http://petstore.swagger.io/.

Berikut akan coba saya jabarkan step by step meng-implementasi Swagger UI ini di NodeJS secara sederhana, semua code ada di Github Repository https://github.com/mazipan/sample-swagger-for-nodejs

Blibli.com – How we use SASS and Grunt

Kali ini saya akan coba berbagi cerita tentang bagaimana kami di blibli.com mencoba meng-implementasikan SASS dan Grunt di release code yang terbaru.
Semoga bisa membantu memberikan pencerahan bagi kalian-kalian diluar sana yang sedang atau akan meng-implementasikan hal yang sama di code kalian.

Blibli.com – How I refactor AngularJS 1.x to be minify-able

Berikut saya akan berbagi pengalaman saya beberapa pekan yang lalu di Blibli.com dalam meminify-ing AngularJS code.

Sebelumnya saya akan bercerita existing condition yang terjadi,
bahwa kami di Blibli.com menggunakan AngularJS sebagai framework rasanya sudah bukan rahasia lagi,
namun sebenarnya kami mengalami kesulitan dalam handle dan manage AngularJS code kami sendiri.
Ada banyak hal kami masih belum bisa handle dan benahi terutama dengan AngularJS yang begitu mengendalikan semua interaksi client side.
Sebenarnya kami sendiri tidak ingin menggunakan AngularJS untuk semua halaman kami,
dan hanya ingin digunakan pada halaman-halaman yang memang membutuhkan complex interaction saja,
namun yang terjadi sepertinya kami terjebak dengan kenikmatan data-binding dari AngularJS dan akhirnya merembet ke berbagai page kami.

Pada titik ini dimana ketika saya mulai bergabung dengan Blibli.com hal seperti ini memang sudah kadung terjadi,
dan yang bisa saya tawarkan hanyalah membenahi pelan-pelan code mengikuti yang seharusnya.
Hal akan saya bagikan di post kali ini adalah mengenai proses membuat AngularJS code kami minify-able.

Untuk issue soal AngularJS yang susah untuk di minify sebenarnya sudah dijelaskan di berbagai situs.
https://scotch.io/tutorials/declaring-angularjs-modules-for-minification
https://www.sitepoint.com/5-minutes-to-min-safe-angular-code-with-grunt/
Penyebabnya adalah karena gagal meng-implementasikan Depedency Injection yang ditawarkan oleh AngularJS,
yang tentu saja hal ini tidak terjadi bila code tidak di minify.

Setelah saya coba melihat exising code dan sepertinya memang masalah terbesarnya adalah di Depedency Injection,
namun pada penerapannya ternyata saya juga harus refactor beberapa code agar bisa berjalan dengan baik dalam kondisi yang ter-minify.