image source: https://id.pinterest.com/pin/272960427399509627/

---

Tong nani, aeng sajan ngae judul

Hehehe, jangan takut sama judulnya ya. Aku sekarang mau bahas apa yang terjadi di sekitar kita, tapi mungkin masih jarang diobrolin.
Sebenarnya ini concern dari @wayanjimmy, @imdbsd dan aku yang dari lama sering kita obrolin

Mau tanya dong

Pernah gak temen-temen punya perasaan spt ini:

• Males ikut komunitas ntar dibully karena aku masih newbie.
• Males sharing di komunitas karena aku belum jago.
• Males nanya di komunitas, kalo share kodinganku, aku malu nanti dilihat kodingan ku jelek, atau takut pertanyaanku terlalu sepele.
• Males lah pokoknya ketemu orang-orang, aku mau belajar sendiri aja.

Genks, kalian gak sendiri

Jujur aku juga dulu punya pemikiran kaya gitu. Sejauh riset yg aku cermatin tentang perilaku yang aku sebut barusan diatas, aku gak bisa nyalahin siapapun. Kita udah terjebak di dalam budaya yang sudah diciptakan dari lama di lingkungan kita.

Budaya orang yang ter-xxx(misal pintar, jago) lah yang boleh bicara. Dan sialnya beberapa orang yg spt itu (gak semua ya) malah menggunakan kemampuannya untuk melukai perasaan org lain (tanpa sadar) melalui respon nya.

Sebagai contoh; misal Ketut Nyamprut baru belajar CSS dan dia nanya di komunitas seperti ini:

Ketut Nyamprut: Permisi mas/mbak cara buat tombol bulat dgn css gimana?

Lalu org2 toxic mulai jawab:

toxic_people_1: mas, udah coba googling belum?
toxic_people_2: bro sebelum tanya baca aturan forum dulu
toxic_people_3: simple bgt masa gitu doang nanya sih? wkwkwk
toxic_people_4: https://www.google.com/search?safe=strict&sxsrf=ALeKk00gXJd7AI16OVjNbW6Ycbuzc_4ctQ%3A1585370689940&ei=QdZ-XtWLOeuR4-EPt86kuAs&q=how+to+create+round+button+with+css&oq=how+to+create+round+button+with+css&gs_lcp=CgZwc3ktYWIQAzIFCCEQqwI6BAgAEEc6BwgjELACECc6BggAEAcQHjoECAAQDToICAAQCBAHEB46CggAEAgQBxAKEB46BggAEAgQHjoICAAQCBAKEB46AggAOggIABAIEA0QHjoECAAQHjoGCAAQDRAeUPlXWI9-YKiAAWgAcAJ4AIABTogB1wmSAQIxOZgBAKABAaoBB2d3cy13aXo&sclient=psy-ab&ved=0ahUKEwiVsL6GrrzoAhXryDgGHTcnCbcQ4dUDCAs&uact=5
toxic_people_5: njir ngakak w sumpah sm pertanyaannya

yang kaya gitu yang sering kita lihat bukan (ada yg cuma ngasi link google wkwkw vangke, oops )?

Genks, aku gak nyalahin mereka juga jawab kaya gitu. Memang sebaiknya kita googling dulu, atau baca aturan forum dulu sebelum bertanya. Point yang mau aku bahas adalah:

Bisakah kita menggunakan bahasa yang lebih baik?

Seandainya kita yg diposisi orang itu dan mendapatkan respon seperti itu, masih maukah kalian bertanya lagi? atau masih maukah ikut di komunitas itu?

Aku sangat yakin kita gak akan mau bertanya lagi atau mending leave aja dari komunitas itu. Seandainya kalo si Ketut Nyamprut dapet jawaban seperti ini:

nice_people_1: oh itu bisa pake property css namanya border-radius dan di set value nya 50%, contohnya kaya gini:

.button {
 border-radius: 50%;
}

nice_people_2: Halo Ketut, ini jawabannya oh iya, jgn lupa selanjutnya liat aturan forum ya. Semoga membantu
nice_people_3: Hmm, aku kurang tau sih mungkin @komangmelon bisa membantu
nice_people_4: Boleh tau apa aja yang sudah km coba @KetutNyamprut?

Kalau dpt jawaban seperti diatas, Ketut Nyamprut gak cuma terbantu, tapi dia merasa nyaman. Ada sebuah komunitas yang mendukung proses dia belajar.

Genks, kita orang Indonesia khususnya Bali, gak kekurangan orang jago, tapi kita kurang memiliki EMPATI (no-offense).

Mungkin kita dulu pernah ngejawab pertanyaan kurang berkenan buat yang nanya, aku sarankan sekarang kita mulai belajar bareng-bareng jadi pribadi yang lebih EMPATI ke teman-teman yang baru belajar.

Genks, kita pernah di posisi mereka juga, masih kesusahan belajar sesuatu. Kalau dpt respon yang baik dari komunitas, kita jadi semakin cepat belajar, dan secara gak langsung komunitas kita juga makin bertumbuh dari sisi jumlah dan kompetensi

Jadi, tujuannya apa aku sharing kaya gini

Aku mau ngajak temen-temen yang mungkin udah belajar duluan, yuukkk kita bantu temen-temen atau adik-adik kita yang masih sekolah biar mereka makin semangat belajar pemrograman.

• Mari kita lebih ber-empati dan lebih sabar menjawab pertanyaan atau memberi masukan pada post yang mereka buat di komunitas ini.
• Jangan ada bullying, jangan jd orang toxic
• Jaga perasaan teman-teman atau adik-adik kita yang bertanya di komunitas ini.
• Mari buat budaya yang baru, komunitas yang sehat, supaya tidak ada lagi orang yang males bertanya, males sharing, males ikut komunitas karena budaya komunitas yang masih feodal (cuma yg ter-xxx yg boleh jawab, sharing, dsb).
• Intinya mari buat komunitas kita jadi tempat yang menyenangkan, kalau sudah menyenangkan proses belajar pun jadi lebih mudah.

Akhir kata, yuk, semeton sambil pelan-pelan kita ubah Pulau Bali yang kita cintai, yang sekarang masih tourist-centric kita ubah jadi techno-centric.

Thanks udah baca concern dari kami

---

Mungkin temen-temen yang lain punya pengalaman yang beda dari pengalamanku, bisa di-share dgn membalas di thread ini.

Pas lagi keliling di medsos tiba-tiba nemuin artikel tentang belajar CSS yang bagus dan ekstensif dan pake Bahasa Indonesia pula. Cocok banget untuk teman-teman yang baru akan mulai belajar pemrograman.

Berikut beberapa screenshot tampilan tutorialnya:

Rangkuman

---

Cara membuka file html di browser

---

Struktur penulisan CSS

---

Mengenal tampilan responsive

---

Langsung aja menuju TKP -> https://bosnaufal.github.io/css-itu-mudah/
Credit Muhammad Naufal Rabbani.

Permisi semeton, saya numpang posting lowongan project dari teman saya di BASARNAS Bali.

Spesifikasi Aplikasi

Cakupan fitur yang ingin dibuat:

• user bisa melaporkan kejadian dan semua anggota basarnas terdekat akan menerima notifikasi dan dapat mengkonfirmasi bisa hadir ke TKP.
• User juga bisa melihat history laporan yang sudah ditangani di berbagai daerah di Bali.
• Terdapat dashboard untuk administrasi semua data-data dan admin dapat melihat posisi setiap anggota(tidak perlu realtime).

Jadi aplikasi yang ingin dibuat yaitu berupa sebuah aplikasi Android(React Native/Flutter/Ionic/Native) dan sebuah dashboard untuk me-manage data-data tersebut.

Untuk fitur lebih detail, semeton bisa melihat dokumen ini.
Note: fitur mungkin akan perlu dinegosiasi ulang, harap hubungi jika berminat

Budget

Budget berkisar antara 5-10jt. Nego langsung chat via WA aja.

Kontak

Untuk contact person bisa menghubungi via WA:

• Komang Arimbawa (klik untuk menghubungi via WhatsApp)

Om Swastiastu gaes

Sebagai bentuk komitmen kami organizer di BaliJS untuk membantu teman-teman yang baru belajar pemrograman (dari HTML & CSS).
Maka melalui kategori HTML & CSS ini kami akan berusaha konsisten membuat konten-konten tutorial singkat, padat dan sederhana.

Tutorial yang akan dibuat adalah membuat sebuah blok komponen. Seperti apa itu blok komponen? Contohnya seperti dibawah ini:

• Alert - Blok komponen alerts
• Navbar - Blok komponen navigasi dan dropdown menu
• Modal - Blok komponen semacam pop-up

Tentu sangat mudah membuat sebuah website kalau sudah ada framework css seperti BootstrapCSS.
Tapi kali ini pada episode pertama kita. Yukk, kita buat blok komponen versi kita sendiri.

---

Syarat Mengikuti Tutorial

Di tutorial ini, kita akan gunakan CodeSandbox.
Jadi teman-teman yang belum install text-editor di laptop, tidak perlu khawatir, kalian tetap dapat mengikuti tutorial ini.

Untuk dapat menggunakan CodeSandbox teman-teman wajib memiliki akun Github.
Silakan teman-teman mendaftar terlebih dahulu di Github, kemudian lanjut login di Github.

Setelah login akan muncul tampilan seperti dibawah ini:

Gambar 1.0

Lalu ikuti langkah-langkah berikut:

• Klik Create Sandbox, lalu akan muncul popup seperti gambar 1.1
• Lalu pilih Static

Gambar 1.1

Yuk kalau sudah muncul text-editornya, kita mulai membuat komponen kita.

---

Membuat Navigation Bar dan Dropdown Menu

Untuk membuat navigasi di web, biasanya akan menggunakan sebuah list. Di HTML syntax list dapat digunakan seperti di bawah ini.
Silakan teman-teman copas code ini ke dalam <body>

<nav class="navigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li>
        <a href="#">Product</a>
        <ul>
        <li><a href="#">Raft</a></li>
        <li><a href="#">Paxos</a></li>
        <li><a href="#">Liskov</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

Maka disebelah text-editor akan muncul tampilan seperti ini:

Gambar 1.2

Buat list di HTML gampang bgt kan?
Next...

Tahap Persiapan styling

Pertama yuk cari tag </head>, kemudian sebelum tag head kita tambahkan tag <style> sebagai tempat skrip css kita.
Jadi bentuk kode kita berubah menjadi seperti ini:

Gambar 1.3

Kemudian pertama kita tentukan margin dan padding pada body menjadi 0 dulu, dan font nya kita tentukan juga. Silakan copas code css ini ke dalam tag <style> yang sudah teman-teman buat tadi.

body {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: sans-serif;
}

Mulai Menghias

Pertama kita hias elemen yang paling luar dulu, yaitu tag <nav>

.navigation {
    margin: 10px 0;
    background: #111;
}

Yang kita lakukan diatas adalah: memberi jarak pada komponen nav 10 pixel (atas bawah), dan memberi warna hitam pada background nya. Silakan eksplor dan ganti sesuai warna yang teman-teman sukai.

Kemudian, kita mulai masuk ke <ul> yang pertama. Di kode ada 2 buah <ul> lho!
tapi kita akan langsung menghias keduanya dengan cara seperti ini:

.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

Maksud dari kode diatas:

• .navigation ul - kita pilih semua <ul> yang ada di dalam class .navigation
• hilangkan margin dan padding, kemudian hilangkan list-style (bulatan hitam) di dalam list

Selanjutnya kita akan ubah navigasi nya menjadi horizontal. Caranya:

.navigation > ul > li {
    display: inline-block;
    position: relative;
}

Maksud dari kode diatas:

• .navigation > ul > li - pilih <ul> dan <li> yang benar-benar tepat dibawah navigasi. Masih ingat kan tadi ada berapa <ul> di kode kita? Jadi kita hanya pilih ul yang pertama saja.

Selanjutnya kita akan hias link nya

.navigation a {
    padding: 16px;
    text-decoration: none;
    color: #aaa;
    display: block;
}

.navigation a:hover {
    color: yellow;
}

Maksud dari kode diatas:

• .navigation a - pilih semua link yang ada di dalam .navigation
• kemudian kita beri padding, ubah warna nya, hilangkan underscore pada link, display: block agar padding bisa berfungsi sebagai mana mestinya. (karena secara alami display pada <a> adalah inline )
• .navigation a:hover - ketika mouse berada diatas elemen <a> kita ubah warnanya jadi kuning

Yuk kita lihat dulu hasilnya:

Lho, jadinya kok aneh??

Yoi, karena kita belum hias <ul> yang kedua, yaitu <ul> yang di dalam <li>

Silakan copas code ini:

.navigation > ul > li > ul {
    position: absolute;
    background: #111;
    width: 200px;
    top: 38px;
    border-radius: 0 0 3px 3px;
    display: none;
}

Apa yang kita lakukan?

• .navigation > ul > li > ul - kita pilih <ul> yang posisinya di dalam <li>
• position: absolute ini kita pakai untuk mengubah posisi nya jadi sesuai yg kita inginkan. Disini kita kombinasikan dengan top: 38px;. Catatan: agar position: absolute dapat bekerja sebagaimana mestinya. Parent dari elemen yang kita set absolut harus ditambahkan position: relative;. Cek style .navigation > ul > li.
• border-radius - memberikan efek bulatan pada menu dropdown kita. Yang kita berikan efek hanya pada 2 siku dibawah
• display: none - sembunyikan dropdown menu-nya

Terakhir

Kita tambahkan sedikit bumbu pemanis dan yang paling penting kita harus memunculkan menu nya ketika user menaruh kursor nya diatas navigasi bar kita.

.navigation > ul > li > ul a {
    font-size: 14px;
}

.navigation > ul > li:hover > ul {
    display: block;
}

Yang kita lakukan diatas:

• .navigation > ul > li > ul a - kita pilih tag <a> yang ada di dalam dropdown.
• kemudian kita ubah ukuran font nya agar lebih kecil dibanding parent nya
• .navigation > ul > li:hover > ul - kita pilih <ul> yang ada di dalam <li>, NAMUN ketika kursor berada di atas <li> (lihat li:hover), kita akan ubah property css <ul> yang ada di dalam <li> tersebut dari semula yg display: none; menjadi display: block;

Yuk kita lihat sekarang hasilnya.

Yeaaaayyyyyy

Hasil akhir kode diatas dapat dilihat di url ini https://codesandbox.io/s/dropdown-menu-ftm5x

---

Akhir Kata

Sekian episode pertama Belajar Web Design. Kalau ada request blok komponen apa yang ingin dibuat. Jangan ragu dan malu-malu komen di post ini

Halooo genkssss!!! Kami dari organizer akan mengadakan program baru tiap bulan di minggu pertama yaitu: BaliJS Quiz

BaliJS Quiz

Ya, walau nama eventnya biasa bgt, tapi keseruannya luar biasa bgt karena ada hadiahnya yang super menarik buat yg juara ataupun yang berpartisipasi dlm program ini

Apa aja hadiahnya?

Hadiahnya yang jelas bukan M*tsubishi Expander, karena kami belum punya sponsor (hiks ). Tapi kami berharap melalui dukungan teman-teman, hadiahnya akan lebih menarik lagi kedepannya. (Astungkara )

Hadiahnya adalah:

• Gopay/OVO senilai masing Rp. 50.000 untuk dua orang pemenang. Jadi total hadiah Rp. 100.000 (Lumayan bisa dipake untuk beli Boba)
• Badge Keren di profil kalian untuk yang berpartisipasi di quiz ini. Seperti apa badge nya?
  

Badge nya keren kan?

Kaya gimana Quiz nya, min?

Soal quiz nya cuma berupa soal competitive programming. Eeeiitsss, jgn takut dulu, karena soalnya gak bakal kaya soal-soal interview ke Google, Facebook dsb. Untuk permulaan, untuk soal quiznya kami yakin teman-teman BaliJS yang sering pake for loop atau while loop pasti bisa menjawab

Syarat mengikuti quiz ini apa min?

Syaratnya mudah bgt, gak perlu KTP, BPKB, atau Sertifikat Tanah, cukup:

1. Mempunyai akun forum BaliJS dulu yang jelas
2. Memperkenalkan diri dulu di thread ini.
3. Bukan Organizer BaliJS

Kriteria pemenang nya gmn min?

1. Ketepatan - Hasilnya benar, lulus test case yang kami buat
2. Efisien - Komputasinya cepat, penggunaan memory jg sedikit
3. Tercepat - Yang duluan jawab mendapatkan penilaian lebih besar
4. Penjelasan - Ini nilai bonus jika teman-teman dapat menjelaskan time complexity-nya menggunakan notasi Big-O. Tapi ini opsional untuk yang masih sekolah. (yang udah kerja wajib ya wkwkwk)

FAQ

• Bahasa yang dipake apa min?
  Pastinya Javascript dong.
• Gimana cara klaim hadiah?
  Nanti pemenang akan diumumkan di thread yang berbeda. Dan salah satu organizer BaliJS akan menghubungi kalian langsung via chat forum/telegram.
• Gimana kalau salah satu persyaratan quiz tidak terpenuhi?
  Dengan berat hati kami akan menganulir keputusan pemenang ke orang lain yang sudah melengkapi syarat-syarat diatas
• Min masih single?
  Saya udah punya pacar
• Kalo sudah pernah ikut, trus ikut event lagi dapet apa min?
  Untuk sementara partisipan hanya akan mendapatkan badge khusus. Karena itu kami masih membutuhkan dukungan, saran dan kritik untuk program-program kami kedepan agar program-program kami menjadil lebih baik lagi. Jika ada feedback mohon teman-teman sampaikan disini
• Min, saya kok belum dapet badge nya, padahal sudah berpartisipasi?
  Mohon maaf, mungkin ada yg terlewat. Tapi kalau kalian terlewatkan, mohon kontak @imdbsd untuk mengklaim badge nya.
• Kapan event pertama?
  Event pertama BaliJS quiz akan diadakan Jumat, 3 April 2020. Quiz dibuka jam 18.00 WITA

Ada pertanyaan lain?

Jangan sungkan-sungkan atau malu untuk bertanya melalui tombol Reply di post ini.

Suksma

Om Swastiastu gaes!!!

Gak terasa udah mau ganti bulan, berarti saatnya BALIJS QUIZ!!!!!

Berhubung minggu pertama jatuh di minggu ini, dan waktunya terlalu mepet. Jadi BaliJS Quiz #2 akan kita mulai pada minggu ke-dua di bulan Mei yaitu pada tgl 8 Mei 2020

Buat yang baru pertama kali ikut quiz. Hadiah dan ketentuan masih sama seperti quiz sebelumnya. Bisa dilihat disini.

Apa yang harus dipersiapkan?

BaliJS Quiz kedua kita akan mengambil tema Fungsi Rekursif

Apa itu fungsi rekursif? Adalah sebuah fungsi yang dapat memanggil dirinya sendiri. Untuk lebih detail silakan teman-teman cari sendiri!

Fungsi rekursif mempunyai dua case, yaitu: Base Case dan Recursive Case.

Apa itu base case & recursive case?

Base case - adalah case dimana fungsi rekursif tersebut harus berhenti.
Recursive case - case dimana fungsi rekursif memanggil dirinya sendiri (lagi).

Contoh?

Teman-teman ada yang pernah dengar Factorial? Jadi factorial adalah sebuah fungsi yang mengalikan semua bilangan positif dari n sampai 1. Symbol factorial adalah tanda pentung !.
Contoh:
0! - factorial 0 adalah 1.
3! - factorial 3 adalah 6 karena 3 x 2 x 1
5! - factorial 5 adalah 120 karena 5 x 4 x 3 x 2 x 1

Bagaimana kalau dijadikan sebuah fungsi Javascript?

const factorial = (n) => {
  // Base case
  if (n <= 1) {
    return 1
  }

  // Recursive case
  return n * factorial(n - 1)
}

console.log(factorial(5)); // return 120

Apa contoh fungsi rekursif di dunia nyata?

• Render HTML pada browser (atau pada framework2 virtual-dom juga )
• Mencari jalur tercepat pada aplikasi maps
  masih banyak lagi harusnya tapi cuma itu yang bisa kusebutkan

So?

Siapkan diri kalian untuk mengerjakan quiz minggu depan!!

See you, and stay safe!

Redis(remote dictionary service) adalah salah satu database NoSQL yang pasti sering teman-teman dengar. Redis merupakan sebuah penyimpanan struktur data di dalam memory (bisa persistent juga di dalam disk) yang biasa digunakan sebagai database, cache atau message-broker.

Redis mendukung banyak tipe struktur data seperti: Strings, Lists, Sets, Hashes, Sorted Sets, Geospatial Indexes, dan lain-lain yang teman-teman dapat lihat di halaman resmi redis.

Kapan kita perlu redis?

Penggunaan umum redis yang sering kita dengar adalah sebagai cache storage. Namun sebenarnya ada banyak kasus lainnya yang juga bisa kita gunakan, seperti: membuat personalized feed timeline seperti Twitter Timeline, membuat leaderboard, menyimpan session login, sebagai message broker, menghitung jarak geografi dalam radius, atau sebagai queue.

Yuk kita bahas cases umum tersebut dan struktur data apa yang biasa digunakan.

Redis sebagai Cache Storage

Struktur data yang digunakan disini adalah String. Biasanya ketika servis backend melakukan proses yang memakan resource(komputasi) yang besar, ada baiknya proses tersebut dibuatkan mekanisme caching agar pada proses berikutnya tidak perlu melakukan komputasi lagi. Contoh:
PS: kita akan menggunakan ioredis dalam contoh code

async function getUser(req, res) {
    const userID = req.params.id;
    const CACHE_KEY = `get:user:${userID}`;
    const cache = await redis.get(CACHE_KEY)

    if (cache) {
        return res.json({
            success: true,
            data: JSON.parse(getCache)
        })
    }

    const user = await User.findBy(userID).get();
    
    await redis.set(CACHE_KEY, JSON.stringify(user))

    return res.json({
        success: true,
        data: user
    })
}

Redis sebagai Queue

Biasanya dalam membuat program kita pasti menemukan sebuah proses membutuhkan waktu yang lama untuk diselesaikan. Contohnya pada kehidupan sehari-hari: Transcoding video pada youtube (setelah upload video di youtube tidak langsung terpublish), mengirim ribuan email newsletter, dan banyak lagi proses-proses yang biasa disebut blocking process.

Nah, bagaimana cara agar proses tersebut tidak ngeblok proses lainnya? Dengan melempar proses tersebut ke thread yang berbeda dan dikerjakan dibelakang layar secara asynchronous (tidak blocking lagi deh ). Di NodeJS queue favorit saya adalah Bull.(*saya enggak lagi promosi)

Untuk contoh penggunaan code nya saya copas langsung dari README file Bull.

var Queue = require('bull');

var videoQueue = new Queue('video transcoding', 'redis://127.0.0.1:6379');
videoQueue.process(function(job, done){

  // job.data contains the custom data passed when the job was created
  // job.id contains id of this job.

  // transcode video asynchronously and report progress
  job.progress(42);

  // call done when finished
  done();

  // or give a error if error
  done(new Error('error transcoding'));

  // or pass it a result
  done(null, { framerate: 29.5 /* etc... */ });

  // If the job throws an unhandled exception it is also handled correctly
  throw new Error('some unexpected error');
});

Redis sebagai Message Broker

Kadang ketika kita memiliki service yang begitu banyak (microservice), kita membutuhkan sebuah perantara untuk memberitahu event yang sedang terjadi? Apa maksudnya? Misal kasusnya kaya gini:

Ketika seorang pelanggan melakukan order,

1. service order perlu memberitahu service notifikasi untuk mengirim notifikasi ke merchant
2. service order perlu memberitahu service products untuk mengurangi jumlah stock nya
3. service order juga perlu memberitahu service payment untuk melakukan pengurangan saldo

Secara tradisional mungkin kita tinggal hit API dari tiap service, tapi lama-lama terlalu banyak API yang harus di-manage hanya untuk memberitahu user lain untuk melakukan A dan B, belum lagi kita perlu handle untuk failure case misal salah satu server tidak bisa diakses dan sebagainya.

Saat itulah kita perlu sebuah message-broker atau bahasa sehari-harinya makelar pesan yang bertugas mengirimkan event. Langsung aja ke contoh ya wkwkkwk

const Redis = require("ioredis");
const redis = new Redis();
const pub = new Redis();

const payload = JSON.stringify({
    orderID: 1,
    productIDs: [45,32],
    amount: 425000
})

pub.publish("order", payload);

// di service backend lainnya
redis.on("message", function (channel, message) {
    if(channel === "order") {
        console.log(message)
    }
});

Redis sebagai penghitung jarak Geospatial

Bagaimana ojek online menentukan hanya driver dalam radius sekian yang boleh mengambil order kita? Ya, kita bisa menggunakan redis untuk menghitung jarak radius posisi driver dengan posisi restaurant atau posisi kita. Langsung ke contoh kode aja yuk.

// dummy long lat ya guys
const address = {
    id: 3,
    name: 'Rumah Osby',
    longitude: 0.0, 
    latitude: 0.0,
}

const store = {
    id: 1,
    name: 'Martabak Ena',
    longitude: 0.0,
    latitude: 0.0,
}

const geoKey = 'store_distance'
const sourceMemberName = `${paramCase(store.name)}_${store.id}`
const targetMemberName = `${paramCase(addr.name)}_${addr.id}`

redis.geoadd(geoKey, store.longitude, store.latitude, sourceMemberName)
redis.geoadd(geoKey, addr.longitude, addr.latitude, targetMemberName)

const distance = await redis.geodist(geoKey, sourceMemberName, targetMemberName, 'km')

console.log(distance) // 1.3

Akhir kata

Masih banyak kasus yang bisa kita selesaikan dengan memanfaatkan redis, beberapa yang kita baca diatas barusan adalah beberapa case yang super umum digunakan.

Pemahaman struktur data sangat penting ketika menggunakan redis agar kita dapat menggunakan redis secara tepat guna. Di dalam dokumentasi redis juga sudah terdapat time-complexity dari setiap operasi redis. Contoh gambar dibawah ini:

Dan selalu ingat, redis sangat bagus digunakan untuk leaderboard dan menghitung, serta menyimpan cache. Mari kita belajar mengeksploitasi manfaatkan setiap struktur data yang ada di redis.

Link terkait:

• https://www.npmjs.com/package/ioredis
• https://github.com/OptimalBits/bull
• http://highscalability.com/blog/2014/9/8/how-twitter-uses-redis-to-scale-105tb-ram-39mm-qps-10000-ins.html

Halo semeton nama saya Osby. Saat ini saya bekerja di kumparan.com sebagai Data Engineer. Domisili saat ini di Jakarta Selatan. Walaupun bukan frontend, tapi saya masih sering ngoding memakai JS untuk pet project.

Selain ngoding saya suka nonton anime dan denger lagu genre j-pop. Kalau mau diskusi tentang javascript, anime dan j-pop ayo pm gen awake!

Halo semua dibutuhkan frontend developer.
Syarat-syaratnya:

• HTML & JSS
• dasar JS
• dasar git
• pernah pakai salah satu framework angular, react / vue

Boleh pilih antara part time / full time (20 / 40 jam per minggu). Range gaji antara 1.9 - 4 juta per bulan. Bisa kerja dari mana saja yang penting punya koneksi internet yang stabil (tidak harus cepat). Jika pernah pakai vue dan typescript akan menjadi nilai plus.

Jika merasa kemampuan belum mumpuni jangan sungkan, akan diberi waktu untuk belajar.
Jika berminat boleh langsung japri atau kirim email ke [email protected]

Thank you

abis dirapiin karena mau difoto, aslinya ada masker dan vitamin diatas meja mebrarakan wkwkwk

Nih list nya daftar perusahaan(luar) yang nerima remote.
Langsung menuju TKP

https://github.com/yanirs/established-remote

@wayanjimmy iya bli, kita perlu undang orang2 yang udah kerja remote di luar indo utk bagi tips trik nya di forum.

Btw idemu bagus banget fin. Kita simpan idemu untuk fase berikutnya ya fin.
Soalnya ada beberapa prioritas task yang sedang tim organizer kerjakan di fase pertama sekarang.

Di fase berikutnya pasti kami sediakan fitur custom theme, karena nodebb sudah ada builtin fitur itu tp memang belum kami aktifin.

FYI, untuk fase pertama ini kita masih fokus di konten dan rilis forum ini. Btw forum ini statusnya masih beta skrg. Mudah2an minggu depan paling lambat april forum kita sebarkan di sosmed. Dan setelah itu baru tim organizer akan bahas prioritas task berikutnya.

Nanti juga mungkin kami butuh km untuk terlibat untuk mengerjakannya.
Thanks buat masukkannya ya fin

BaliJS Organizer

Kasusnya waktu itu aku sempat penasaran gimana bentuk query yang dipanggil ORM ketika relasi nya many-to-many dan dengan teknik improvisasi performance-nya seperti lazy-load atau subquery.

Jadi aku cari cara untuk melihat log query SQL untuk mengetahui bagaimana bentuk query SQLnya. Dan ketemu!
Caranya juga ternyata simple bgt. Pertama, aktifkan lognya dengan cara:

SET global general_log = 1;
SET global log_output = 'table';

Kemudian, tinggal lihat lognya dgn cara:

SELECT * FROM mysql.general_log;

Untuk menonaktifkan log, caranya:

SET global general_log = 0;

Semoga membantu

Daftar materi dari beberapa sumber yang berhasil dikurasi oleh tim BaliJS untuk kamu yang baru mulai belajar Javascript:

Tekstual

• Belajar Javascript untuk pemula - petanikode.com Recommended
• CSS itu mudah - Muhammad Naufal Rabbani Recommended
• Learn JS - learn-js.org
• The Modern Javascript Tutorial - javascript.info
• The JS Way added by @wayanjimmy
• JS dev reads: Bacaan menarik untuk web developer added by @wayanjimmy
• Clean Code Javascript added by @made

Visual

• JavaScript Basics Course - freecodecamp
• ES6 - Beau teaches JavaScript - freecodecamp

Bagi teman-teman yang mempunyai tutorial belajar javascript dari dasar yang menurut teman-teman mudah dipahami jangan ragu balas thread ini dan sertakan link nya.

Catatan: daftar materi akan terus diupdate seiring kami menemukan referensi yang bagus dan mudah dipahami.

Dulu waktu aku kuliah, aku gak terlalu serius sama pelajaran ini. Tapi ternyata pemahaman ttg struktur data itu penting banget.

Sebenarnya buat apa sih struktur data itu? Kenapa penting dipahamin?
Jawabannya: Karena kita koding untuk menyelesaikan masalah sehari-hari di dunia nyata.

Contoh Masalah Sehari-hari di Dunia Nyata

Sehari-hari tanpa kita sadari, ternyata struktur data bener2 deket banget dengan kehidupan kita lho. Ayo coba kita ambil contoh:

• Pertemanan di Facebook - merupakan sebuah struktur data graph, yaitu 1 vertex (dalam bahasa Indonesia; sudut. Atau dalam konteks ini setiap orang di Facebook) saling berhubungan dengan vertex lainnya. Penghubungnya disebut edge atau dlm bhs Indonesia; garis tepi;

• Google Map - ini juga sebuah graph. Vertex nya bisa koordinat toko kopi kesayangan mu, atau tiap persimpangan, belokan atau koordinat posisimu. Edge nya adalah jalan raya-nya

• Antrean di Restoran - Kalo dibawa ke dalam computer science bentuk data nya adalah Queue. (first-in first-out)

• Tombol back/forward di Browser - Ini adalah sebuah Stack, kenapa begitu? Karena ketika kalian tekan tombol back atau forward pasti berurutan sesuai dengan urutan kunjungan kalian. (first-in last-out)

• HTML - Kalo ini adalah sebuah Tree, coba bayangkan <body> adalah sebuah batang (trunk), dan mempunyai lebih dari satu cabang, dan Text di dalem div merupakan daun-nya (leaves). Yuk kita visualisasikan.

<body>
  <div>halo</div>
  <div>dunia</div>
</div>

/*
               body
                /\
             div  div
             /       \
         hello      dunia
/*

• MLM/Referal System - Ini juga adalah sebuah Tree, dimana satu orang mempunyai satu atau lebih downline.
• Silsilah Keluarga - Kakek mempunyai anak, anak mempunyai anak lagi dst. Yup, ini adalah sebuah Tree juga!

Nah, kebetulan ada penjelasan bagus tentang Struktur data (dalam bhs Inggris) + code nya juga dalam Javascript. Di tutorial tsb menjelaskan beberapa struktur data dibawah ini:

• List
• HashTable
• Stack
• Queue
• Graph
• LinkedList
• Trees
• Binary Search Tree

Link Tutorial: Itsy Bitsy Data Structure
Cusss, langsung gas baca tutorial nya dan praktekkan!!

---

Credit: James Kyle

Pengumuman Pemenang

Halo gaes, setelah melewati proses yang berat untuk menentukan siapa aja pemenangnya berdasarkan:

ketepatan algoritma
kecepatan komputasi
tercepat menjawab
penjelasan time complexity (optional utk siswa/mahasiswa)

---

Maka, kami sudah tentukan pemenang dari BaliJS Quiz #2 adalah:

@pandemuliada
@adibite

Selamat untuk pemenang, dan terimakasih banget untuk yang berpartisipasi. Untuk yang belum menang, jangan berkecil hati. Masih ada kesempatan di bulan berikutnya!

Hadiah OVO/Gopay akan dikirimkan setelah pengumuman ini.

---

Akhir Kata

Bagi yang mau diskusi bagaimana solusinya, atau sharing apa aja yg teman-teman baru pelajari melalui kuis ini, silakan teman-teman balas topic ini ya.

Sampai jumpa di BaliJS Quis #3

Selamat pagi semeton BaliJS, ini newsletter pertama, akan dikurasi dan dikirimkan 2 minggu sekali setiap hari Selasa. Semoga berguna dan selamat menikmati.

Menarik Dibaca

• Nodebook - Multi-Lang Web REPL + CLI Code runner -- Sebuah REPL yang dapat dijalankan dibrowser awalnya hanya support Javascript kini support beberapa bahasa pemrograman lain seperti Elixir, Rust, Go, PHP, dll.
• Destiny -- Pernah pakai prettier? nah ini semacam prettier tapi untuk struktur file. Terlihat iseng tapi sebuah project yang menarik.
• Just Javascript -- Newsletter kolaborasi antara Dan Abramov dan Maggie Appleton yang menghadirkan Mental Model tentang cara kerja Javascript. Apa itu Mental Model? perkiraan akurat tentang cara kerja sebuah sistem. Dengan berpegang pada mental model yang akurat diharapkan memiliki kemampuan Debugging yang lebih baik.
• Node + Docker Hello World, for Showing Good Defaults for Using Node.js in Docker -- Sebuah best practice bagaimana sebaiknya membungkus aplikasi Nodejs dalam Docker untuk lingkungan development dan production.
• Lightweight job scheduling for Node.js -- Sebuah alternatif solusi membangun job queue di Nodejs, mendukung persistent dengan data store MongoDB dan disertai dashboard berbasis web yang stand alone. Asik banget dashboardnya bisa dieksekusi melalui npx!
• Gitstalk -- Daripada stalking mantan, lebih baik stalking teman di Github
• VueJS The Documentary -- Film dokumenter yang dibuat Honeypot, tentang VueJS, menceritakan bagaimana komunitas Laravel juga membantu proses adopsi VueJS. Honeypot juga membuat film serupa sebelumnya seperti GraphQL, dan Elixir

Lowongan

• Avatar.co.id - Frontend Developer
• Avatar.co.id - Backend Developer

@made sip, added ya

Mau share masalah yg kemarin baru aku alamin pas lagi ngerjain charity project. Nemu error kaya gini:

> node-gyp rebuild

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/putualfredcrosby/.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.3.0
gyp ERR! command "/Users/putualfredcrosby/.nvm/versions/node/v10.16.3/bin/node" "/Users/putualfredcrosby/.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/putualfredcrosby/osby/gepembri/gepembri_staff/node_modules/fsevents
gyp ERR! node -v v10.16.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

ternyata solusinya adalah:

reinstall xcode

$ sudo rm -rf $(xcode-select -print-path)
$ xcode-select --install

atau

reset xcode

$ [sudo] xcode-select --reset

Semoga membantu