Featured by Anggie Bratadinata

Website Baru

Udah lebih dari 10 taun saya pake domain masputih.com ini. Awalnya pake Textmate, terus pake WordPress sampe sekarang. Lama-lama bosen juga & pengen nyoba yang baru. Ghost keliatannya menarik. Jadi ini terakhir kalinya saya posting di sini. Postingan selanjutnya bisa dibaca di rumah baru saya, www.goora.me.

Kenapa bikin domain baru? Ya eman-eman link yang udah diindeks sama Google 🙂 Daripada hilang, mending sekalian bikin domain baru.

by Anggie Bratadinata

Flexbox

Flexbox (Flexible Box) adalah fitur CSS3 yang mempermudah kita mendistribusi ruang kosong & mengatur ukuran elemen-elemen dalam sebuah kontainer. Jadi fungsi utamanya adalah untuk mempermudah pembuatan kontainer yang ketika ukurannya berubah, elemen di dalamnya bisa otomatis menyesuaikan ukuran & posisi.

index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
      <div class="flex-item">7</div>
      <div class="flex-item">8</div>
    </div>
  </body>
</html>

Untuk bikin flexbox kita cukup pakai display:flex.

index.css 
html,
body {
  padding: 0;
  margin: 0;
}

.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
}

.flex-item {
  background: lightyellow;
  padding: 12px;
  outline: 1px solid orange;
}

Justify Content

Secara default, posisi elemen-elemen di dalam kontainer adalah rata kiri, mirip kalo kita bikin elemen float. Selain itu lebarnya juga tetap, nggak berubah.

Continue reading →

by Anggie Bratadinata

Global Dot di NodeJS

Hati-hati pake objek global. di NodeJS. Nilai yang disimpen di situ di-share semua requests.

Contoh di bawah, semua request yg masuk setelah “A” dapet global.name = A biarpun asalnya dari user/browser/client lain.

router.get('/', function(req, res, next) {

  if(req.cookies.name === 'A') {
    global.name = 'A'
    console.log('REQUEST FROM A: global.name', global.name)    
  } else {
    console.log('REQUEST FROM OTHERS: global.name', global.name)
  }

  res.render('index', { title: global.name });
});
by Anggie Bratadinata

E-Book Gratis: ReactJS untuk Pemula

Pengen belajar ReactJS tapi bingung mulai dari mana? Udah baca-baca tutorial tapi penuh jargon yang malah bikin mumet?

E-book ini mungkin cocok buat Anda. 🙂

E-book ini bisa didapatkan di Leanpub.

NOTE1: E-book ini bisa diunduh gratis. Silakan geser slider harga di halaman Leanpub ke angka 0.

NOTE2: Silakan link Leanpub-nya di-share. Kalo bisa jangan langsung PDF-nya karena saya juga pengen tau berapa banyak orang yang unduh ebook ini.

NOTE3: Ebook ini bakal diupdate terus kalo ada materi baru yang sekiranya menarik untuk ditambahkan atau mungkin ada materi yang perlu dikoreksi.

by Anggie Bratadinata

Compound Component

Compound component adalah sebuah komponen yang terdiri dari komponen-komponen yang lebih kecil. Komponen-komponen ini kalo sendirian ga ada gunanya. Kalo di HTML biasa salah satu contohnya adalah komponen <select>.

<select>
  <option />
  <option />
</select>

Pattern ini adalah alternatif dari render-props. Tujuannya sama, bikin komponen yang fleksibel & struktur komponen children-nya terserah user/consumer.