Get random posts from Dev (Indonesian language)
Tags: dev, jquery, ajax, posts
Published: 2020-02-16 09:46:12

---
title: Get random posts from Dev (Indonesian language)
published: true
description: Mengambil postingan-postingan dari Dev secara acak.
tags: dev, jquery, ajax, posts
series: Javascript
---

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](https://dev-to-uploads.s3.amazonaws.com/i/a7ppokezm9l9n6dkijgu.png)

![Halaman kedua](https://dev-to-uploads.s3.amazonaws.com/i/tvzz0xj2w4dkucxac1fn.png)

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

![Ketika artikelnya diklik](https://dev-to-uploads.s3.amazonaws.com/i/p0r6sadfqwc1l0xl1nsv.png)

Source codenya:

{% github laptopzen/dev %}

# Bahas kodenya

## `index.html`

Atur judulnya dulu:

```html
<title>Random Dev</title>
```

Gunakan charset UTF-8:

```html
<meta charset="utf-8">
```

Atur tampilan mobile:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
```

Import CSS dari Bootstrap dan dari buatanku sendiri:

```html
<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:

```html
<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:

```html
<div class="container isi">
	<p>Loading...</p>
</div>
```

Ambil jQuery:

```html
<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.

```javascript
$.ajaxSetup({async: false})
```

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

```javascript
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.

```javascript
olah_isi = () => {}
```

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

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

Kita ambil 20 aja postingan acak.

```javascript
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.

```javascript
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`.

```javascript
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`.

```javascript
$('.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()`.

```javascript
olah_isi()
```

Kalau `.navbar-brand` diklik, reload lagi isinya.

```javascript
$('.navbar-brand').click(() => {
	$('.isi').html('Loading...')
	olah_isi()
})
```