TechTalk #62: Animations in AngularJS

Hola!

TechTalk minggu ini masih membahas javascript dan kali ini topiknya adalah Animations in AngularJS. Masih bersama mas Rijalul Fikri, yeah. Jadwal sebelumnya minggu ini topiknya MeteorJS, berhubung pembicaranya berhalangan jadinya mas Fikri yang turun tangan (ceritanya begitu).

Kali ini dijelasin dari basic animasi di web. Bukan animasi yang kompleks, bukan bahas <canvas> juga. Pertama dikenalkan dengan transition di CSS. Lalu dibandingkan dengan jQuery animate(). Dan terakhir penerapan animasi di AngularJS.

What I learned:

  • Gunakan properti yang ramah animasi: PROS (Position, Rotation, Opacity, Scale). Referensi
  • Gunakan Animate.css untuk efek-efek animasi yang umum digunakan
  • Animasi dengan CSS lebih menghemat waktu dibanding JS, terutama untuk kasus sederhana seperti efek hover
  • Angular #1: menggunakan modul ngAnimate dan manual di CSS-nya
  • Angular #2: modul Hendrixer/ngFX yang sudah bundled dengan ngAnimate dan Animate.css
  • Angular #3: modul cgwyllie/ngular-velocity, yang satu ini belum dibahas karena katanya terlalu panjang untuk dijelasin 😐

Sip, minggu depan kita ke MeteorJS. 🙂

TechTalk #61: Material Design using AngularJS

TechTalk #61 ini topiknya Material Design using AngularJS yang dibawain mas Rijalul FIkri. Awalnya saya kira materinya akan fokus ke Angular-nya, ternyata kebalik. Angular.js di sini ternyata sebagai wadahnya.

Jadi topik kali ini membahas Angular Material (https://material.angularjs.org/), library untuk implementasi Material Design di Angular.js. Dengan library ini, kita bisa mendevelop aplikasi Angular.js dengan rasa Material tanpa harus pusing memikirkan stylingnya, jadi kita bisa fokus ke pengembangan aplikasinya. Banyak fitur dan directives yang siap pakai, jadi kita tidak perlu repot-repot buat dari awal dan kita bisa develop lebih cepat, yosh!

Warna palet juga bisa kita sesuaikan sendiri agar tidak terkesan mainstream. Warna-warna palet default bisa dilihat di http://www.materialpalette.com/

Oke, see ya on the next techtalk!