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:
Dan ketika diklik, maka ia akan menampilkan artikel Dev di tab baru:
Source codenya:
Bahas kodenya
index.html
Atur judulnya dulu:
<title>Random Dev</title>
Gunakan charset UTF-8:
<meta charset="utf-8">
Atur tampilan mobile:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
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">
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>
Bagian isi yang akan kita manipulasi:
<div class="container isi">
<p>Loading...</p>
</div>
Ambil jQuery:
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
app/app.js
Kita buat AJAXnya nggak selalu sinkron. Jadi, ketika di callback mereturn suatu value, maka value tersebut jadi global.
$.ajaxSetup({async: false})
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)]
sebuah function.
olah_isi = () => {}
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)
Kita ambil 20 aja postingan acak.
mau_diambil = 20
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);
}
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))
}
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>`))
Oh iya, tadi masih function. Maka, kita jalankan dulu dengan olah_isi().
olah_isi()
Kalau .navbar-brand diklik, reload lagi isinya.
$('.navbar-brand').click(() => {
$('.isi').html('Loading...')
olah_isi()
})
Top comments (0)