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

@krismaputra halo bli, selamat datang. Ditunggu kontribusi nya di komunitas BaliJS

@mahend_ halo2 Mahend selamat datang, silakan kalo mau bertanya2 atau sharing di forum BaliJS

@visualstudiocode said in What happend ieu teh?:

Script php artisan optimize handlin

kalo liat pesan error nya, di stackoverflow saya nemunya ini sih. https://stackoverflow.com/questions/60814706/invalid-characters-passed-for-attempted-conversion-these-have-been-ignored-pu

Mungkin ada package yg perlu di update?

@visualstudiocode boleh tau versi laravel nya? Mungkin malem ini blm bnyk yg bisa bantu karena udah pda istirahat

@visualstudiocode selamat datang Daffa. Silakan sharing, bertanya atau membantu jawab2 pertanyaan disini.

Walaupun namanya forumnya BaliJS tp forum ini gak eksklusif hanya utk Bali aja, tp jg utk seluruh warga Indonesia

@adibite boleh sharing itu bro

@ttm boleh bgt, malah jangan cuma 1 artikel aja wkkwkw Kita di komunitas harus belajar apapun, kita gak tau jg nanti siapa tau diperlukan jg di pekerjaan kita

Menurutku, malah akan bagus kalo kita minimal sedikit tau terminologi2 di ML sbg engineer

@ttm wah menarik bgt, ditunggu sharing2 nya ttg ML bli

Thanks bli @Merta-Yoga Keren dan jelas bgt penjelasannya
Nunggu episode selanjutnya. Ijin share ke grup telegram dan grup facebook bli

@Merta-Yasa salam kenal jg bli Semoga betah di forum BaliJS