loading...

Get random posts from Dev (Indonesian language)

mzaini30 profile image Z ・2 min read

Salah satu yang aku suka dari Dev ini adalah editornya yang menggunakan Markdown. Ya, aku suka Markdown. Dan aku juga suka dengan berbagai konten teknologi yang ada di website ini.

Namun sayang, di halaman beranda, artikelnya sering nggak update.

Maksudku, ketika aku reload lagi halaman beranda, yang tampil postingannya ya yang itu-itu aja. Maka, aku membuat Random Dev.

Bisa dikunjungi di https://mzaini30.com/dev/.

Ini tampilannya:

Halaman pertama

Halaman kedua

Dan ketika diklik, maka ia akan menampilkan artikel Dev di tab baru:

Ketika artikelnya diklik

Source codenya:

GitHub logo laptopzen / dev

Ini adalah random dari Dev




Bahas kodenya

index.html

Atur judulnya dulu:

<title>Random Dev</title>
Enter fullscreen mode Exit fullscreen mode

Gunakan charset UTF-8:

<meta charset="utf-8">
Enter fullscreen mode Exit fullscreen mode

Atur tampilan mobile:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Enter fullscreen mode Exit fullscreen mode

Import CSS dari Bootstrap dan dari buatanku sendiri:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/style.css">
Enter fullscreen mode Exit fullscreen mode

Bagian navbar:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">Random Dev</div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Bagian isi yang akan kita manipulasi:

<div class="container isi">
    <p>Loading...</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Ambil jQuery:

<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
Enter fullscreen mode Exit fullscreen mode

app/app.js

Kita buat AJAXnya nggak selalu sinkron. Jadi, ketika di callback mereturn suatu value, maka value tersebut jadi global.

$.ajaxSetup({async: false})
Enter fullscreen mode Exit fullscreen mode

Kita gunakan jika deskripsi postingan yang akan kita ambil nanti kosong.

baca = [
    'I think, you can love it',
    'I was explain this',
    'Wow. It\'s crazy',
    "It's very cool",
    "Wow. I'll try this"
]

kosong = () => baca[Math.floor(Math.random() *  baca.length)]
Enter fullscreen mode Exit fullscreen mode

sebuah function.

olah_isi = () => {}
Enter fullscreen mode Exit fullscreen mode

Kita dapatkan dulu jumlah semua artikel di Dev lalu kita masukkan ke banyak. Misalnya aja: banyak = 1000.

$.get('https://dev.to/api/articles?per_page=1', data => banyak = data[0].id)
Enter fullscreen mode Exit fullscreen mode

Kita ambil 20 aja postingan acak.

mau_diambil = 20
Enter fullscreen mode Exit fullscreen mode

Kan tadi kisahnya banyak artikelnya ada 1000 ya, kita ambil tuh 20 aja secara acak. Misalnya: 128, 723, 12, 412, 23, 12, dst.

list_artikel_acak = [];
while(list_artikel_acak.length < mau_diambil){
    r = Math.floor(Math.random() * banyak) + 1;
    if(list_artikel_acak.indexOf(r) === -1) list_artikel_acak.push(r);
}
Enter fullscreen mode Exit fullscreen mode

Kita ambil JSON dari masing-masing artikel itu terus dipush ke isi_artikel.

isi_artikel = []
for(y of list_artikel_acak){
    $.get(`https://dev.to/api/articles/${y}`, data => isi_artikel.push(data))
}   
Enter fullscreen mode Exit fullscreen mode

Nah, baru deh kita isi ke .isi.

$('.isi').html(isi_artikel.map(x => `
    <a href="${x.url}" class="anggap-aja-bukan-link" target='_blank'>
        <table class="table table-ajaib">
            <tr>
                <td>
                    <img src="${x.user.profile_image_90}" alt="">
                </td>
                <td>
                    <div class="panel panel-default">
                        <div class="panel-heading">${x.title} ~ <em>by ${x.user.name}</em></div>
                        <div class="panel-body">${x.description ? x.description : kosong()}</div>
                    </div>
                </td>
            </tr>
        </table>
    </a>`))
Enter fullscreen mode Exit fullscreen mode

Oh iya, tadi masih function. Maka, kita jalankan dulu dengan olah_isi().

olah_isi()
Enter fullscreen mode Exit fullscreen mode

Kalau .navbar-brand diklik, reload lagi isinya.

$('.navbar-brand').click(() => {
    $('.isi').html('Loading...')
    olah_isi()
})
Enter fullscreen mode Exit fullscreen mode

Posted on by:

Discussion

pic
Editor guide