DEV Community: Faris Han

JavaScript RPG Document: Exploration Feature - Level 1

Faris Han — Fri, 22 Nov 2024 15:04:49 +0000

The easiest exploration feature I can think of is 1-dimensional exploration. Up-down, or left-right, or point A to point B, or room 1 to room 2.

Let's choose the "room" one, like in MUD games.

Requirements

Functional Requirements

Player can see their character's current room
Player can move to next rooms by pressing "d" key
Player can move to previous rooms by pressing "a" key
There is only 3 rooms and player can only explore that 3 rooms
Player can see if they can not go to the next/previous room

Technical Requirements

The toy can be played just by double-clicking an HTML file

Implementation

Apa itu Autentikasi: Definisi dan Jenis-jenis Autentikasi

Faris Han — Sun, 06 Aug 2023 06:22:26 +0000

Dalam dunia digital, sering terdengar istilah "autentikasi" atau "authentication". Tulisan ini akan membahas sedikit lebih dalam tentang itu. Selamat membaca!

Apa itu Autentikasi?

"Autentikasi" (baku) atau "otentikasi" (tidak baku) itu proses untuk membuktikan sesuatu secara autentik (baku) atau otentik (tidak baku).

Autentik sendiri artinya "bisa dipercaya".

Dalam bahasa Inggris disebut authentication atau disingkat menjadi auth saja. Untuk selanjutnya, saya akan terus menggunakan istilah "auth".

Jadi kalau ada pertanyaan "apa itu auth?", artinya sama dengan autentikasi yang sudah disebut di atas.

Sumber:

Kapan Proses Auth Digunakan?

Ketika program atau aplikasi komputer yang kita buat butuh tahu penggunanya (Inggris: user) bisa dipercaya atau tidak. Sering sekali di dalam aplikasi ada fitur-fitur yang tidak bisa digunakan oleh sembarang orang, maka proses auth ini sangat populer. Bahkan banyak modul terpisah yang memang dibuat khusus untuk proses autentikasi.

"Pengguna" itu sendiri belum tentu manusia, ya. Bisa jadi komputer atau entitas lain.

Auth Sehari-hari

Biasanya orang awam lebih familiar dengan istilah "login" dan "logout". Dua hal tersebut termasuk dalam lingkup auth. Selain itu ada juga istilah "register" atau "daftar" atau "buat akun". Proses pembuatan akun ini juga masuk dalam lingkup auth.

Jenis-jenis Auth

Proses auth ada berbagai macam tingkat kompleksitas dan keamanan. Secara umum, bisa dibagi menjadi beberapa kategori di bawah ini:

1. Knowledge-based Authentication

Atau "autentikasi berbasis pengetahuan". Auth ini berhubungan dengan sesuatu yang diketahui user, seperti: password, pin, atau jawaban atas pertanyaan keamanan.

2. Posession-based Authentication

Atau "autentikasi berbasis kepemilikan". Auth ini berhubungan dengan sesuatu yang dimiliki user, seperti: kartu, token fisik, atau mobile device.

3. Biometric Authentication

Auth ini berhubungan dengan ciri-ciri fisik yang dimiliki user manusia. Proses auth bisa dilakukan dengan mendeteksi wajah, sidik jari, atau bagian tubuh lain.

4. Multi-factor Authentication (MFA)

Auth ini kombinasi atau gabungan dari jenis-jenis auth yang sudah disebutkan sebelumnya.

Kesimpulan

Auth atau autentikasi itu proses untuk membuktikan sesuatu bisa dipercaya atau tidak.

Auth adalah pintu dari banyak proses lainnya yang berhubungan dengan kontrol akses. Semoga dengan tulisan ini, kita bisa lebih memahami proses lain yang lebih kompleks.

Sila meninggalkan komentar atau pertanyaan untuk memulai diskusi tentang auth.

Terima kasih sudah membaca!

Apa itu Programmer?

Faris Han — Sat, 29 Jul 2023 07:39:37 +0000

TL;DR
Programmer itu orang yang membuat program. Bisa program komputer atau program acara televisi.

Pada saat tulisan ini dibuat (29 Juli, 2023), di Kamus Besar Bahasa Indonesia (KBBI) tidak ada arti untuk kata "programmer".

Karena "programmer" itu kosa kata dari bahasa Inggris. Di kamus Merriam-Webster (kamus yang paling dipercaya di Amerika), ada arti untuk kata "programmer".

Untuk bahasa Indonesia, ada kata "pemrogram" dengan arti yang sama.

Kesimpulan

Programmer atau pemrogram adalah orang yang membuat program, baik itu program komputer atau program acara televisi. Dalam konteks situs dev.to, "programmer" lebih sering mengacu kepada pembuat program komputer. Program komputer adalah program yang diciptakan secara khusus sehingga memungkinkan komputer melakukan fungsi tertentu.

Apa itu HTML

Faris Han — Sun, 02 Jul 2023 15:02:32 +0000

Fakta: HTML itu singkatan dari Hypertext Markup Language.

HTML itu bahasa markup yang digunakan untuk membuat dan menyusun halaman web.

Klik di sini untuk membaca tentang apa itu bahasa markup.

HTML memungkinkan pengguna untuk menggambarkan struktur dan konten halaman web dengan menggunakan elemen-elemen markup. Elemen-elemen ini ditandai dengan tag-tag khusus yang ditempatkan di sekitar teks, gambar, atau media lainnya dalam halaman web.

Struktur, seperti Tulang Manusia dan Kerangka Bangunan

HTML bisa dibayangkan seperti tulang yang menjadi struktur tubuh manusia dan kerangka yang menjadi struktur bangunan.
HTML itu struktur halaman website.

Elemen-elemen di HTML

Setiap halaman web terdiri dari elemen-elemen HTML yang membentuk struktur dasar halaman. Beberapa elemen/tag dasar HTML termasuk:

tag <html> sebagai kontainer utama
tag <head> untuk informasi kepala dokumen seperti judul halaman
tag <body> untuk konten utama halaman, dan
tag <p> untuk paragraf teks.

Kata "tag" itu biasanya digunakan untuk menunjukkan kodenya, misal tag <html>, tag <body>, atau tag <p>. Sedangkan kata "elemen" itu biasanya digunakan untuk menunjukkan hasil dari penggunaan tagnya. Misal elemen body, elemen paragraf.

Dalam banyak kasus, penggunaan kata "tag" atau "elemen" tidak terlalu jadi masalah. Pemahaman mendalam tentang perbedaan kata "tag" dan "elemen" akan datang dengan sendirinya seiring berjalannya penggunaan HTML di kegiatan sehari-hari.

Kesimpulan

HTML itu bahasa markup yang digunakan untuk membuat struktur halaman web.

Masih punya pertanyaan terkait apa itu HTML? Tulis di kolom komentar ya. Terima kasih sudah membaca!

Apa itu Bahasa Markup

Faris Han — Sun, 02 Jul 2023 14:50:07 +0000

Bahasa Markup itu Bahasa Pemrograman

Bahasa markup itu jenis bahasa pemrograman yang digunakan untuk membuat struktur dokumen teks.

Klik di sini untuk membaca tentang apa itu bahasa pemrograman

Elemen dalam Bahasa Markup

Dalam bahasa markup, teks diatur menggunakan elemen-elemen yang menunjukkan bagaimana teks tersebut harus ditampilkan atau diproses.

"Mark" itu bahasa Inggris yang artinya "tanda". Anggap bahasa markup itu untuk menandai bagian-bagian dari dokumen teks. Ditandai untuk diproses sesuai standar bahasa markup. Tanda-tanda ini sering disebut dengan elemen.

Elemen-elemen ini digunakan untuk memberi petunjuk kepada aplikasi yang membaca dokumen tersebut, biasanya aplikasi tersebut adalah web browser. Contoh bahasa markup yang populer adalah HTML (Hypertext Markup Language) yang digunakan untuk membuat halaman web, XML (eXtensible Markup Language) yang digunakan untuk menyimpan dan mengirim data secara struktural, dan Markdown yang digunakan untuk menulis teks dengan format sederhana.

Bahasa Markup Punya Aturan

Bahasa markup biasanya menggunakan sintaks yang konsisten dengan aturan tertentu, dan tag-tag atau elemen-elemen yang digunakan diapit oleh tanda kurung sudut (< >) atau tanda kurung siku ([ ]). Dalam banyak kasus, bahasa markup tidak memiliki logika pemrograman seperti loop atau kondisional, melainkan lebih fokus pada struktur dan tampilan dokumen.

Bahasa markup memungkinkan penulis untuk mengatur penampilan dan struktur dokumen dengan cara yang terstandardisasi, sehingga konten dapat ditampilkan dengan konsisten di berbagai perangkat dan platform.

Kesimpulan

Bahasa Markup itu bahasa yang dipakai untuk membuat struktur dokumen teks. "Mark" itu "tanda".

Masih punya pertanyaan tentang apa itu bahasa markup? Kirim di kolom komentar ya. Terima kasih sudah membaca!

Apa itu Bahasa Pemrograman

Faris Han — Sun, 02 Jul 2023 14:36:20 +0000

Bahasa Pemrograman itu Bahasa

Bahasa itu sistem komunikasi. Dipakai oleh manusia untuk berinteraksi, memahami satu sama lain.

Apa itu Bahasa Pemrograman

Bahasa pemrograman itu sistem komunikasi yang dipakai manusia untuk berinteraksi dengan komputer, memahami satu sama lain.

Bahasa pemrograman itu dipakai untuk membuat program. Orang yang membuat program namanya programmer.

Bahasa pemrograman memungkinkan programmer untuk mengekspresikan algoritma dan logika dalam bentuk yang dapat dipahami oleh mesin.

Bahasa Pemrograman Punya Aturan

Sama seperti bahasa manusia, bahasa pemrograman punya "kosa kata" dan "tata bahasa", biasanya dikenal dengan sintaksis (Inggris: syntax).

Setiap bahasa pemrograman memiliki aturan dan aturan sintaksisnya sendiri yang harus diikuti oleh programmer.

Bahasa pemrograman juga menyediakan berbagai macam konstruksi dan fasilitas, seperti variabel, tipe data, operasi matematika, struktur kontrol, dan banyak lagi. Dengan menggunakan bahasa pemrograman, programmer dapat mengendalikan perilaku dan kinerja komputer untuk mencapai tujuan yang diinginkan.

Contoh Bahasa Pemrograman

Beberapa bahasa pemrograman populer termasuk:

Python
Java
C++
JavaScript
Ruby
PHP
dan banyak lagi.

Masing-masing bahasa pemrograman memiliki fitur, kegunaan, dan kelebihan yang berbeda-beda, yang membuat mereka lebih cocok untuk tujuan tertentu.

Kesimpulan

Secara umum, bahasa pemrograman itu alat yang digunakan untuk mengkomunikasikan instruksi kepada komputer.

Dengan bahasa pemrograman, programmer bisa membuat perangkat lunak (software) yang kompleks, dan melakukan berbagai tugas dari pemrosesan data sederhana hingga kecerdasan buatan (AI; Artificial Intelligence) dan analisis data yang canggih.

Masih punya pertanyaan terkait bahasa pemrograman? Kirim di kolom komentar ya. Terima kasih sudah membaca!

Naively Making a Simple 2D Action Browser-based Game Prototype with JavaScript and Canvas API

Faris Han — Wed, 08 Feb 2023 10:51:40 +0000

TL;DR final result: https://farishan.itch.io/wild-tile

Hook

"A Tile goes wild when rendered forcefully by the universe. You are assigned to control it. Be the most agile and longest-lasting tile controller!"

Game Objective

Control a tile so it doesn't hit the edge of the game area, for as long as you can.

Game Rules

Control the tile with W/A/S/D key
Do not hit the edge of the game area
Tile speed increases with time
Last speed and last time should be recorded
Highest speed and longest time should be recorded

Step 1. Setup

project-folder
- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Wild Tile</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <script>
      const canvas = document.createElement('canvas')
      canvas.width = 640 // px
      canvas.height = 360 // px
      canvas.style.outline = '1px solid'
      canvas.style.display = 'block'
      document.body.append(canvas)
    </script>
  </body>
</html>

Step 2. Draw a Tile

<html>
  <body>
    <script>
      // previous code... 
      canvas.style.outline = '1px solid'
      canvas.style.display = 'block'
      document.body.append(canvas)

      const COLUMN = 16
      const ROW = 9
      const TILE_WIDTH = canvas.width/COLUMN // px
      const TILE_HEIGHT = canvas.height/ROW // px

      const display = canvas.getContext('2d')
      display.fillRect(0, 0, TILE_WIDTH, TILE_HEIGHT)
    </script>
  </body>
</html>

Step 3. Move the Tile

<html>
  <body>
    <script>
      // previous code... 
      const display = canvas.getContext('2d')
      display.fillRect(0, 0, TILE_WIDTH, TILE_HEIGHT)

      function createLoop(setting = {}) {
        const {fpsLimit = 5, onTick = () => {}} = setting

        const loop = {
          shouldRun: false,
          fpsLimit,
          tickInterval: 1000/fpsLimit,
          thenTime: performance.now(),
          frameCount: 0,
          elapsedTime: 0,
          gapTime: 0,
        }

        loop.check = function(nowTime) {
          this.elapsedTime = nowTime - this.thenTime // ms

          if (this.elapsedTime > this.tickInterval) {
            this.frameCount++
            this.gapTime = this.elapsedTime % this.tickInterval
            this.thenTime = nowTime - this.gapTime

            onTick()
          }
        }

        loop.start = function() {
          this.shouldRun = true

          const callback = (nowTime) => {
            if (!this.shouldRun) return

            this.check(nowTime)

            requestAnimationFrame(callback)
          }

          callback()
        }

        loop.stop =  function() {
          this.shouldRun = false
        }

        return loop
      }

      let col = 0
      let row = 0
      let updateLoop
      let renderLoop

      function update() {
        col = col + 1
      }

      function render() {
        display.clearRect(0, 0, canvas.width, canvas.height)
        display.fillRect(
          col*TILE_WIDTH,
          row*TILE_HEIGHT,
          TILE_WIDTH,
          TILE_HEIGHT
        )
      }

      updateLoop = createLoop({fpsLimit: 15, onTick: update})
      renderLoop = createLoop({fpsLimit: 60, onTick: render})

      updateLoop.start()
      renderLoop.start()

      setTimeout(() => {
        updateLoop.stop()
        renderLoop.stop()
      }, 1000)
    </script>
  </body>
</html>

Step 4. Add "Game Over" condition

<html>
  <body>
    <script>
      // previous code...
      let col = 0
      let row = 0
      let updateLoop
      let renderLoop

      function update() {
        if(col + 1 >= COLUMN) {
          updateLoop.stop()
          renderLoop.stop()
          const result = document.createElement('div')
          result.style.position = 'absolute'
          result.style.fontSize = '32px'
          result.innerText = 'Game Over!'
          document.body.append(result)
          return
        }

        col = col + 1
      }

      function render() {
        display.clearRect(0, 0, canvas.width, canvas.height)
        display.fillRect(
          col*TILE_WIDTH,
          row*TILE_HEIGHT,
          TILE_WIDTH,
          TILE_HEIGHT
        )
      }

      // some code...

      // delete this block below
      setTimeout(() => {
        updateLoop.stop()
        renderLoop.stop()
      }, 1000)
    </script>
  </body>
</html>

Step 5. Control the Tile

<html>
  <body>
    <script>
      // previous code...
      let col = 0
      let row = 0
      let updateLoop
      let renderLoop
      let direction = 'right'
      let nextDirection = 'right'

      function update() {
        if (
          direction === 'right' && nextDirection === 'left'
          || direction === 'left' && nextDirection === 'right'
          || direction === 'up' && nextDirection === 'down'
          || direction === 'down' && nextDirection === 'up'
        ) {
          nextDirection = direction
        }

        if(
          (nextDirection === 'right' && col + 1 >= COLUMN)
          || (nextDirection === 'left' && col - 1 < 0)
          || (nextDirection === 'down' && row + 1 >= ROW)
          || (nextDirection === 'up' && row - 1 < 0)
        ) {
          updateLoop.stop()
          renderLoop.stop()
          const result = document.createElement('div')
          result.style.position = 'absolute'
          result.style.fontSize = '32px'
          result.innerText = 'Game Over!'
          document.body.append(result)
          return
        }

        if (nextDirection === 'right') {
          col = col + 1
        }
        else if(nextDirection === 'left') {
          col = col - 1
        }
        else if(nextDirection === 'up') {
          row = row - 1
        }
        else if(nextDirection === 'down') {
          row = row + 1
        }

        direction = nextDirection
      }

      // some code...

      const KEY_MAP = {
        w: 'up',
        a: 'left',
        s: 'down',
        d: 'right'
      }

      window.addEventListener('keydown', e => {
        if (KEY_MAP[e.key]) {
          nextDirection = KEY_MAP[e.key]
        }
      })
    </script>
  </body>
</html>

Notice that I use movement mechanic like the Snake game, so the player can't use "right-left-right-left-repeat" pattern.

Step 6. Add auto-increment speed system

<html>
  <body>
    <script>
      // previous code...

      function createLoop(setting = {}) {
        const {fpsLimit = 5, onTick = () => {}} = setting

        const loop = {
          shouldRun: false,
          fpsLimit,
          tickInterval: 1000/fpsLimit,
          thenTime: performance.now(),
          frameCount: 0,
          elapsedTime: 0,
          gapTime: 0,
        }

        loop.changeFpsLimit = function(newLimit) {
          this.fpsLimit = newLimit
          this.tickInterval = 1000/newLimit
        }

        // some code...

        return loop
      }

      // some code...

      setInterval(() => {
        updateLoop.changeFpsLimit(updateLoop.fpsLimit + 1)
      }, 3000)
    </script>
  </body>
</html>

Step 7. Add HUD (heads-up display)

<html>
  <body>
    <script>
      // previous code...
      const canvas = document.createElement('canvas')
      canvas.width = 640 // px
      canvas.height = 360 // px
      canvas.style.outline = '1px solid'
      canvas.style.display = 'block'

      const container = document.createElement('div')
      container.style.width = canvas.width+'px'
      container.style.height = canvas.height+'px'
      container.style.outline = '1px solid'
      container.style.position = 'relative'

      container.append(canvas)
      document.body.append(container)

      // some code...

      function render() {
        display.clearRect(0, 0, canvas.width, canvas.height)
        display.fillRect(
          col*TILE_WIDTH,
          row*TILE_HEIGHT,
          TILE_WIDTH,
          TILE_HEIGHT
        )
        renderHUD()
      }

      // some code...

      const hud = document.createElement('div')
      hud.style.position = 'absolute'
      hud.style.left = '4px'
      hud.style.top = '4px'

      function renderHUD() {
        hud.innerHTML = `Speed: ${updateLoop.fpsLimit} tile/s`
      }

      container.append(hud)
    </script>
  </body>
</html>

Step 8. Scoring

<html>
  <body>
    <script>
      // previous code...
      let col = 0
      let row = 0
      let updateLoop
      let renderLoop
      let direction = 'right'
      let nextDirection = 'right'
      let startTime = performance.now()
      let elapsedTime = 0

      function loadData() {
        const data = localStorage.getItem('WILD_TILE_DATA')
        if (data) return JSON.parse(data)
        return false
      }

      function saveData(newData) {
        localStorage.setItem('WILD_TILE_DATA', JSON.stringify(newData))
      }

      const lastData = loadData()

      let lastSpeed = lastData ? lastData.lastSpeed : 0
      let lastTime = lastData ? lastData.lastTime : 0
      let topSpeed = lastData ? lastData.topSpeed : 0
      let topTime = lastData ? lastData.topTime : 0

      function handleGameOver() {
        updateLoop.stop()
        renderLoop.stop()
        const result = document.createElement('div')
        result.style.position = 'absolute'
        result.style.fontSize = '32px'
        result.innerText = 'Game Over!'
        document.body.append(result)

        lastSpeed = updateLoop.fpsLimit
        lastTime = elapsedTime
        topSpeed = lastData.topSpeed ?
          (updateLoop.fpsLimit > lastData.topSpeed ?
            updateLoop.fpsLimit
            : lastData.topSpeed
          )
          : updateLoop.fpsLimit
        topTime = lastData.topTime ?
          (elapsedTime > lastData.topTime ?
            elapsedTime
            : lastData.topTime)
          : elapsedTime

        saveData({
          lastSpeed,
          lastTime,
          topSpeed,
          topTime
        })
      }

      function update() {
        if (
          direction === 'right' && nextDirection === 'left'
          || direction === 'left' && nextDirection === 'right'
          || direction === 'up' && nextDirection === 'down'
          || direction === 'down' && nextDirection === 'up'
        ) {
          nextDirection = direction
        }

        if(
          (nextDirection === 'right' && col + 1 >= COLUMN)
          || (nextDirection === 'left' && col - 1 < 0)
          || (nextDirection === 'down' && row + 1 >= ROW)
          || (nextDirection === 'up' && row - 1 < 0)
        ) {
          handleGameOver()

          return
        }

        if (nextDirection === 'right') {
          col = col + 1
        }
        else if(nextDirection === 'left') {
          col = col - 1
        }
        else if(nextDirection === 'up') {
          row = row - 1
        }
        else if(nextDirection === 'down') {
          row = row + 1
        }

        direction = nextDirection
      }

      // some code...

      function renderHUD() {
        elapsedTime = performance.now() - startTime

        hud.innerHTML = `Speed: ${updateLoop.fpsLimit} tile/s | Time: ${((elapsedTime)/1000).toFixed(2)}s`
          + (
            lastData ? (
              `<br>Last Speed: ${lastSpeed} tile/s | Last Time: ${(lastTime/1000).toFixed(2)}s`
              + `<br>Speed Highscore: ${topSpeed} tile/s | Time Highscore: ${(topTime/1000).toFixed(2)}s`
            )
            : '')
      }

      container.append(hud)
    </script>
  </body>
</html>

Step 9. Restart the Game

<html>
  <body>
    <script>
      // previous code...
      let lastSpeed = lastData ? lastData.lastSpeed : 0
      let lastTime = lastData ? lastData.lastTime : 0
      let topSpeed = lastData ? lastData.topSpeed : 0
      let topTime = lastData ? lastData.topTime : 0

      const result = document.createElement('div')
      result.style.position = 'absolute'
      result.style.fontSize = '32px'
      result.style.textAlign = 'center'
      document.body.append(result)

      function restartHandler(e) {
        if (e.key === 'r') {
          startGame()
          window.removeEventListener('keydown', restartHandler)
        }
      }

      function setRestartHandler() {
        window.addEventListener('keydown', restartHandler)
      }

      function handleGameOver() {
        updateLoop.stop()
        renderLoop.stop()

        result.innerHTML = 'Game Over!<br>press "r" to restart'

        lastSpeed = updateLoop.fpsLimit
        lastTime = elapsedTime
        topSpeed = lastData.topSpeed ?
          (updateLoop.fpsLimit > lastData.topSpeed ?
            updateLoop.fpsLimit
            : lastData.topSpeed
          )
          : updateLoop.fpsLimit
        topTime = lastData.topTime ?
          (elapsedTime > lastData.topTime ?
            elapsedTime
            : lastData.topTime)
          : elapsedTime

        saveData({
          lastSpeed,
          lastTime,
          topSpeed,
          topTime
        })

        setRestartHandler()
      }

      // some code...

      container.append(hud)

      function keyboardListener(e) {
        if (KEY_MAP[e.key]) {
          nextDirection = KEY_MAP[e.key]
        }
      }

      let speedInterval;

      function startGame() {
        result.innerHTML = ''
        window.removeEventListener('keydown', keyboardListener)
        if (speedInterval) clearInterval(speedInterval)

        lastData = loadData()

        lastSpeed = lastData ? lastData.lastSpeed : 0
        lastTime = lastData ? lastData.lastTime : 0
        topSpeed = lastData ? lastData.topSpeed : 0
        topTime = lastData ? lastData.topTime : 0

        col = 0
        row = 0
        direction = 'right'
        nextDirection = 'right'
        startTime = performance.now()
        elapsedTime = 0

        window.addEventListener('keydown', keyboardListener)

        updateLoop = createLoop({fpsLimit: 5, onTick: update})
        renderLoop = createLoop({fpsLimit: 60, onTick: render})
        updateLoop.start()
        renderLoop.start()

        speedInterval = setInterval(() => {
          updateLoop.changeFpsLimit(updateLoop.fpsLimit + 1)
        }, 3000)
      }

      result.innerHTML = 'press "r" to start'
      setRestartHandler()
    </script>
  </body>
</html>

Contoh HTML yang Paling Sederhana dan Valid Menurut W3C

Faris Han — Sun, 29 Jan 2023 05:45:31 +0000

Perhatian: Tulisan ini dibuat pada bulan Januari tahun 2023. Jika dirasa sudah terlalu jauh dari waktu Anda membaca tulisan ini, silakan mencari tulisan lain yang mungkin lebih relevan.

TL;DR / Intinya

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>f</title>
  </head>
</html>

Kenapa membuat tulisan ini?

Saya sering membuat prototype untuk browser game menggunakan HTML dan JavaScript. Akhir-akhir ini muncul pertanyaan "gimana sih contoh HTML yang paling simpel tapi tetep valid?".

Seperti judul, artikel ini akan membahas contoh HTML yang paling sederhana tetapi tetap valid untuk disebut sebagai HTML.

Tujuan tulisan ini

Tulisan ini dibuat agar saya semakin mengerti apa yang saya pelajari dan para pembaca bisa ikut mendapatkannya.

Mengetahui contoh HTML paling sederhana dan valid bisa mempercepat proses pembuatan prototype, terutama untuk browser-based game development enthusiast seperti saya.

Terkadang saya hanya membutuhkan HTML sebagai runtime untuk program JavaScript saya. Walaupun program berjalan dengan baik, saya tidak ingin membuat sesuatu yang tidak valid menurut mayoritas, apalagi membuat informasi/menyebarkan sesuatu yang salah sampai menyesatkan developer pemula.

Cukup sampai sini basa-basinya, mari kita masuk ke inti tulisan ini.

Contoh HTML paling sederhana dan valid, menurut web browser

Contoh HTML paling sederhana adalah file kosong dengan ekstensi .html.

Selama file HTML kosong tersebut bisa dibuka menggunakan web browser, maka file tersebut valid. Walaupun secara isi file, seharusnya belum bisa disebut HTML yang valid karena masih kosong.

Sebagai contoh, saya membuat file HTML dengan nama index.html, lalu saya buka di Google Chrome. Jika tidak muncul error/warning di Developer Tools, berarti Google Chrome menganggap file HTML saya valid.

Begitu juga di Mozilla Firefox dan browser-browser lain. Selama file bisa terbuka dan tidak muncul error, bisa kita anggap valid. Silakan beri tanggapan jika pemikiran saya sesat, kalau bisa beserta penjelasan yang bisa saya pelajai ya.

Bagi yang belum tahu cara membuat file HTML, caranya begini:

Buka aplikasi text editor
Cari pilihan "Save as..." atau "Simpan sebagai..."
Simpan dengan format {nama file}.html. Ganti {nama file} dengan nama file yang Anda inginkan.

Contoh HTML paling sederhana dan valid, menurut komunitas

HTML adalah salah satu teknologi inti untuk membuat web. Maka, kita akan mengikuti panduan dari World Wide Web Consortium (W3C).

World Wide Web Consortium (W3C) adalah komunitas internasional yang mengembangkan standar terbuka untuk memastikan pertumbuhan jangka panjang Web.

Alat untuk Validasi

W3C mempunyai alat untuk memvalidasi kode HTML.
Nama alatnya Validator, bisa diakses melalui link ini: https://validator.w3.org/

Di Validator W3C, ada opsi untuk memvalidasi berdasarkan direct input. Jadi kita pakai opsi itu supaya tidak perlu membuat file HTML, tidak perlu upload, apalagi sampai sewa hosting.

Memulai proses validasi

Percobaan 1

Dari tampilan direct input, ayo kita coba apakah input yang kosong dianggap valid oleh W3C. Langsung pencet "Check"

Dari screenshot di atas, terlihat bahwa file HTML kosong bukan format HTML yang valid.

Percobaan 2

Karena kosong bukan sesuatu yang valid, ayo kita coba memasukkan kata "tes" saja.

Masih belum valid. Tidak seperti sebelumnya, kali ini kita mendapatkan arahan dari W3C.

Percobaan 3

Arahan dari W3C memuat 3 hal. 1 hal berjenis "Warning" atau peringatan, 2 hal berjenis "Error" atau kesalahan.

Mari kita coba perbaiki kesalahan kita dulu ya. Kita abaikan peringatannya.

Kesalahan pertama: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
Maka: Kita tambahkan <!DOCTYPE html>

Kesalahan kedua: Element head is missing a required instance of child element title.
Maka: Kita tambahkan elemen head berserta anaknya yaitu title

Lalu kita pencet lagi "Check", hasilnya:

Kesalahan kita menurun, tinggal 1 kesalah saja yaitu tidak memasukkan apa-apa ke tag title. Perbaikannya gampang ya, tinggal kita masukkan sesuatu saja.

Setelah kita pencet "Check", hasilnya:

Tadaa. Sampailah kita ke contoh HTML yang paling sederhana dan valid, TAPI masih mendapatkan peringatan dari W3C.

Peringatan: Consider adding a lang attribute to the html start tag to declare the language of this document.
Maka: Kita tambahkan atribut lang ke tag pertama <html>. Berhubung tagnya belum ada, terpaksa kita tambahkan juga.

Hasilnya:

Hore! Hasilnya sudah hijau dan menenangkan hati guys. Artinya kita sudah dapat kode HTML yang paling sederhana dan valid.

BONUS: Contoh HTML paling sederhana dan valid, menurut saya

Sebelum membuat tulisan ini, saya sudah pernah mencoba bentuk-bentuk HTML lain yang menurut saya paling sederhana dan valid. Valid di sini artinya "bisa muncul isinya tanpa error di browser saya sendiri" ya. Hehe. Contoh HTML-nya seperti ini:

Teks saja cukup. Asal ekstensi file-nya .html, bisa dibuka di browser.

halo

Sebenarnya ekstensi lain seperti .txt juga bisa langsung dibuka di browser. Gambar .png & .jpg juga bisa. .pdf juga bisa. Tergantung browsernya.

Tag script saja. Bentuk ini pernah digunakan oleh Dan Abramov saat live streaming di YouTube.

<script>
  document.write('halo')
</script>

Ini bentuk paling sederhana untuk menjadikan HTML sebagai runtime/output bahasa pemrograman JavaScript.

Tag body dan script saja. Bentuk ini variasi dari bentuk no. 2 di atas. Biasanya saya gunakan untuk memasukkan elemen HTML via JavaScript ke elemen body.

<body></body>
<script>
  const gamearea = document.createElement('div')
  gamearea.innerHTML = 'halo'
  document.body.appendChild(gamearea)
</script>

Do It Yourself (DIY)

Apa hasilnya kalau kita memasukkan kode di bawah ini? Mengapa hasilnya begitu?

<script>
  const canvas = document.createElement('canvas')
  document.body.appendChild(canvas)
</script>

Kalau sudah dicoba, kasih komentar di bawah ya teman-teman.

Sekian dulu tulisan kali ini. Sampai jumpa!

keywords and keyphrases: bentuk html paling sederhana, contoh html paling sederhana

Nulis Sambil Ngantuk: Kenapa Memilih Jadi Frontend Developer

Faris Han — Fri, 12 Nov 2021 18:21:42 +0000

warning: banyak gibberish alias ngelantur. kalau males baca langsung ke paling bawah aja.

Kenalan

Saya mulai belajar web development dan kenal istilah "frontend" itu tahun 2017 (tulisan ini dibuat tahun 2021).

Tahun 2018-2019 saya bekerja di sefruit studio kecil. Di studio kecil itu biasanya tidak terlalu jelas perbedaannya, antara frontend dan backend. Para developernya harus "palugada". ~~Apa lu mau, temen gua ada. minta dia aja.~~ Depan iya, belakang OK. Bisa nge-frontend, bisa nge-backend.

Tapi karena tahun segitu istilah frontend-backend sudah populer, maka kami sok-sokan aja untuk deklarasi "saya frontend, dia backend, dia juga backend ~~+ servis printer~~". Hmm, sejujurnya lebih ke: saya cuma bisa frontend. Jadi sebut saya Frontend Developer.

PDKT

Tempat saya belajar web development itu sistemnya karantina. Makan di situ, tidur di situ, bangun masih di situ lagi. Kurang lebih selama 6 bulan, 10 jam++ per hari, saya latihan slicing (implementasi desain UI ke UI beneran pakai HTML & CSS). Waktu itu berambisi alias pengen banget untuk bisa mereplika website-nya Blizzard. Kurang paham deh kenapa waktu itu pengennya itu. Yang jelas bersyukur waktu itu punya motivasi yang kuat untuk tetap belajar.

Selingkuh

Apakah pernah mencoba backend? tentu saja. Waktu itu tech stack yang lagi nge-trend: Node.js + MongoDB. Bikin CRUD. Tidak bertahan lama, karena ~~cuma sebentar. eh~~ belum paham cara menikmatinya. Banyak hal ribet yang kalau dipaksakan terus belajar, takutnya malah luntur motivasi saya untuk belajar web development.

Saya bukan orang yang artsy atau anak design banget, sih. Tapi frontend lebih bisa menggambarkan imajinasi saya, ketimbang backend. Jadi saya memutuskan untuk setia di jalur frontend.

Pacaran

Kerja kerja kerja. Ada desain, sikat. Ada desain lagi, sikat lagi. Sehari-hari cuma slicing. Ada tugas integrasi juga sih, tapi males bahasnya. Kapan-kapan aja. Lagi pengen cerita yang bagian slicing.

Orang Ketiga

Ketika ada masalah, saya tidak pernah menyalahkan frontend, atau kemampuan slicing saya. Pokoknya yang salah itu antara desainer, backend, atau project manager. Kenyataannya, semua manusia, apalagi developer, pasti pernah salah. Jadi yaudah saling memaafkan aja. Tapi tetep ya, waktu itu saya paling menyalahkan sistem manajemen proyek yang tidak proper, yang berakibat tidak adil untuk saya atau developer lain. Alhasil saya berhenti bekerja dan cari pekerjaan lain yang sekiranya lebih proper manajemennya.

Dapet deh pekerjaan baru di tempat baru, dengan syarat melamar pekerjaan yang 'gue banget': bisa slicing tanpa bantuan framework seperti Bootstrap/Foundation/Material/etc. Vanilla HTML & CSS aja. Plus manajemennya OK.

Pas tulisan ini dibuat, saya masih bekerja di tempat itu.

Menuju Pernikahan

Nah ini dia. 1-2 tahun itu menurut saya sudah cukup lama untuk Frontend Developer Kekinian. Harus segera menentukan apakah mau berkomitmen atau ganti karir. Kebetulan saya memang orangnya suka 'loncat-loncat', belajar ini itu. Jack of all trades, master ~~corbuzier~~ of none adalah jalan ninja saya. Jadi agak sulit untuk berkomitmen selamanya di jalur frontend.

Tapi here I am, 2021, masih slicing aja. Dan semakin membara, setelah tahu buanyak banget skillset yang bisa dipelajari, termasuk backend. Iya, belajar backend itu bisa jadi pelengkap untuk menjadi seorang frontend developer yang beneran frontend developer.

Belum 'menikahi' frontend, sih. Tapi saya masih memilih frontend. Karena:

Daritadi ngomong apa sih. Ini nih alasannya:

Frontend itu enak dipandang. Apa yang kita buat, terlihat hasilnya oleh mata.
Secara teknis lebih gampang. Cocok untuk orang awam yang mau sok-sokan ngoding.
On demand. Banyak yang butuh (setidaknya 2018-sekarang masih ada aja yang DM nawarin kerjaan di LinkedIn). Bahkan ada yang nanya gini di Quora: Mengapa semua orang berbondong-bondong ingin jadi pengembang front end? Di tahun 2020 jumlah pelamar pada setiap pekerjaan hanya menyentuh angka 10 - 100, tapi sekarang jumlahnya bisa 200 - 500.
...

Aduh, maaf pemirsa, kelamaan nulis cerita jadi males nulis alasan lainnya.

Intinya bikin nyaman, lebih jarang asam lambung daripada mikirin database, server, kecolongan data, dll.

Udah dulu ya. Dadah.

[Bahasa Indonesia] "Golden Rule" dan Definisi "Rusak" untuk Seorang Frontend Developer yang Berkualitas

Faris Han — Mon, 08 Nov 2021 05:58:36 +0000

One of Engineer's Golden Rules

"if it ain't broke, don't fix it"

Kalo ga rusak, ga usah dibenerin.

Itu salah satu rule/aturan tidak tertulis yang biasanya digunakan para engineer atau orang teknik. Kalau kita coba memahami dari sudut pandang engineer, memang logis. Untuk apa memperbaiki sesuatu yang tidak rusak?

Frontend Developer Job Description

Nah, sebagai seorang Frontend Developer, terutama yang bekerja di Indonesia, dengan orang Indonesia, terkadang pekerjaan Frontend Developer sendiri masih belum terlalu spesifik job description-nya. Apalagi di studio/perusahaan kecil.

Orang-orang cuma tau "ya pokoknya yang bikin UI". Bikin button, nge-layout.

Padahal frontend development bisa lebih serius dari itu.

Harus pixel-perfect (persis banget sama desain buatan UI Designer)
Harus terintegrasi ke backend dengan baik dan benar. Sebisa mungkin tidak ada celah untuk abuse.
Harus bisa memahami desainer dari hati. Jika terjadi kesalahan di tampilan web, kemungkinan penyebabnya ada 3:
Desainer salah bikin desain
Frontend Developer salah implementasi
Teknologi tidak mendukung

Memahami desainer dari hati penting untuk menyelesaikan problem nomor 1 dan 2.

Apa itu "rusak" bagi Frontend Developer

Kalo ga rusak, ga usah dibenerin.

Rule di atas tidak berarti kalau kita tidak tahu apa itu "rusak".

"Rusak" dalam kamus seorang Frontend Developer yang berkualitas itu termasuk:

Hasil implementasi tidak sesuai desain. Ini tergantung tingkat toleransi dan kemampuan memahami desainer. Misalnya toleransi 0px, berarti bener-bener harus persis plek-plek sama desain. Contoh lain, toleransi 5px, berarti kalau di desain spacing-nya 45px, kita boleh implementasi jadi 40px (misal kita ambil 40px karena itu sudah predefined di TailwindCSS, jadi mempercepat proses).
Kebanyakan user merasa tidak nyaman saat memakai interface-nya. Iya, ini berarti "rusak".
Desainer tidak setuju dengan desainnya sendiri. Ini juga "rusak". Harus dibenerin dan jangan sampai terjadi lagi di masa depan.

OK, sekian dulu, let me know kalau postingan ini bermanfaat supaya saya termotivasi untuk bikin lagi.

Jangan males makan siang!

Belajar Inheritance dengan JavaScript

Faris Han — Tue, 28 Apr 2020 19:52:09 +0000

Halo. Artikel ini adalah percobaan saya untuk memahami inheritance dengan JavaScript.

Syarat untuk Memahami Inheritance

Syarat yang dibutuhkan untuk bisa memahami inheritance, minimal sudah merasa nyaman dalam membuat/menggunakan fungsi dan objek pada javascript.

Inheritance itu Apa?

Inheritance itu proses pewarisan. Ketika sesuatu mewarisi atribut atau fungsi dari sesuatu yang lain, itulah inheritance, dalam pemahaman saya. Sebagai contoh sederhana, seorang anak yang mewarisi rambut ikal dari orang tuanya, itu inheritance. Orang tua yang bisa berbicara karena seorang manusia, itu inheritance.

Lebih Memahami Objek dan Atribut Terlebih Dahulu

Sebuah objek bisa memiliki atribut maupun fungsi.

Jika buah apel adalah objek, warna merah adalah atribut yang dimilikinya.

Jika mobil adalah objek, maka jumlah rodanya adalah atributnya. Sedangkan "bisa menyala" adalah fungsi yang dimiliki oleh objek mobil itu.

Memahami Inheritance dengan Contoh

Unggas adalah objek. Memiliki bulu adalah atributnya, sedangkan bisa bertelur adalah fungsi yang bisa dilakukan unggas.

Burung adalah objek. Dengan mekanisme inheritance, burung mewarisi atribut dan fungsi dari unggas, yaitu berbulu dan bisa bertelur.

Objek, Atribut, dan Fungsi pada JavaScript

Berikut adalah beberapa cara untuk membuat objek, jenis objek, beserta atribut dan fungsinya pada javascript:

// Ini jenis objek yang tidak menggunakan prototype
var objek = {
  atribut: "nilai atribut",
  fungsi: function() {
    return "nilai fungsi"
  }
}

...

// Ini adalah objek ber-prototype yang bisa digunakan untuk inheritance
function Objek() {
  this.atribut = "nilai atribut"
  this.fungsi = function() {
    return "nilai fungsi"
  }
}

Berbasis Prototype

JavaScript menggunakan inheritance berbasis prototype. Setiap objek di javascript yang memiliki prototype, bisa diwariskan kepada objek lain.
Berikut contoh penggunaan prototype:

const Objek = function(){}

Objek.prototype.atribut = function() {
  return "nilai atribut"
}

console.log(Objek.prototype)

Inheritance pada JavaScript

Dari contoh pembuatan objek di atas, dapat dibuat contoh mekanisme inheritance seperti ini:

const Objek = function(){}

Objek.prototype.atribut = function() {
  return "nilai atribut"
}

const Pewaris = function(){}

// Ini yang dimaksud dengan inheritance
Pewaris.prototype = new Objek()

Pewaris.prototype.atributKhusus = function() {
  return "nilai atribut khusus pewaris"
}

console.log(Pewaris)

Manfaat Inheritance

Dalam penggunaan sehari-hari, salah satu manfaat inheritance bisa digunakan untuk mengurangi pengulangan penulisan kode. Sebagai contoh, kita harus membuat 100 objek B yang mewarisi atribut dari sebuah objek A.

Ketika harus merubah sebuah atribut dari objek B, kita tidak perlu melakukannya 100 kali. Cukup merubah atribut pada objek A, karena semua objek B mewarisi atribut yang sama dengan objek A.

Inheritance, juga semua konsep OOP yang lain, akan mudah dipahami jika kita sering meggunakannya. Setidaknya dengan memahami dulu apa itu inheritance, kita bisa melatihnya dengan membayangkan objek-objek yang ada di dunia dan mekanisme inheritance-nya.

Sekian tentang inheritance pada javascript. Jika ada kekurangan atau kesalahan, silakan mengirim pesan. Semoga bisa bermanfaat untuk diri sendiri maupun orang lain.

Salam

Gabut Mode On: Bikin Aplikasi Inventaris Kosan (Bagian 6 - Delete Item)

Faris Han — Tue, 28 Apr 2020 18:05:15 +0000

Heyooo.

~~Mencatat barang-barang~~

~~Menampilkan daftarnya~~

Menghapus data barang

Sudah dua dari tiga fitur yang saya inginkan dari MVP ini. Sekarang saatnya merampungkan fitur ketiga.

Seperti biasa, yang tidak ingin basa-basi boleh langsung ke bagian paling bawah. Scroll terus~

Untuk bisa menghapus barang, user butuh interface. Bentuk umum yang paling sederhana mungkin tombol dengan huruf "X". Hmm, coba saya pasang di list item ya.

...
<li v-for="(item, index) in items" class="w-full">
  <div class="border p-2 flex w-full justify-between">
    <div class="flex">
      <div class="border px-2 mr-2">
        {{ index+1 }}
      </div>
      <div>
        <p class="text-xs text-gray-600">name:</p>
        <p class="font-bold">{{ item.name }}</p>
        <p class="text-xs text-gray-600">description: "</p>"
        <p>{{ item.description }}</p>
      </div>
    </div>
    <div>
      <button class="cursor-pointer">X</button>
    </div>
  </div>
</li>
...

OK, lumayan. Sekarang pasang pendengar acara alias event listenernya. Hehe.

...
  <button class="cursor-pointer" @click="remove(index)">X</button>
...

...
  methods: {
    add(){
      ...
    },

    // ini method untuk delete itemnya nanti
    remove(index){
      console.log(index)
    }
  }
...

Sekarang saya bisa tahu mana item yang terpilih untuk di-delete, dengan menggunakan index sebagai pembeda atau identitas si item.

Kalau user masukin item yang sama dua atau berkali-kali, misalnya dia punya dua meja yang sama-sama beli di Jepara, pasti indexnya beda. Meja Jepara 1 atau Meja Jepara 2, sesuai index item-nya.

Langkah berikutnya, saya hapus item dengan index yang terpilih.

...
    remove(index){
      this.items.splice(index, 1)
    }
...

Yasss, fungsi delete-nya sudah jadi!

User story ketiga sudah terpenuhi, harusnya user sudah bisa memakai aplikasinya, dong?

Mencatat barang: bisa ✔️
Menampilkan daftar barang: bisa ✔️
Menghapus barang: bisa ✔️

Terus? Bungkus?

Ada masalah yang belum terpikirkan sejak bagian satu: kalau aplikasinya di-refresh atau ke-refresh, catatan barangnya hilang. Kalau begini kan MVP-nya jadi tidak mantap. Bayangin udah nginput puluhan item, tiba-tiba browsernya ga sengaja kerefresh. Duh...

Maka dengan tempo yang sesingkat-singkatnya, saya akan memasang fungsi save/simpan ke storage. Lebih tepatnya storage yang ada di browser saya alias localStorage. Mari kita coba integrasinya. Buat method save:

...
methods: {
  add(){...},
  remove(){...},

  // ini dia methodnya
  save(){
    localStorage.setItem('inkos_data', JSON.stringify(this.items))
  }
}
...

Saya akan panggil fungsi save setiap kali catatan kita this.items mengalami perubahan.

...
  methods: {
    add(){
      let item = {
        name: this.name,
        description: this.description
      }

      this.items.push(item)

      // ada penambahan ke "this.items", berarti disini pasang
      this.save()

      this.name = ''
      this.description = ''

      console.log(this.items)
    },
    remove(index){
      this.items.splice(index, 1)

      // ada pengurangan ke "this.items", berarti disini juga pasang
      this.save()
    },
    save(){
      localStorage.setItem('inkos_data', JSON.stringify(this.items))
    }
  }
...

OK, coba dites dulu.

...

Hmm, masih belum nge-save kalau direfresh? Tapi ada di local storage?

Setiap kali kita refresh, aplikasinya selalu kosong padahal ada data yang harus ditampilkan dari local storage. Artinya kita harus ambil data itu dan bilang ke aplikasinya untuk menampilkan data itu, jika ada.

Refresh
Ada datanya? Tampilin
Ga ada datanya? Yaudah kasih yang ada apa

Kita akan cek data setelah aplikasi di-refresh. Bisa kita tulis kodenya di mountednya Vue. Jadi setiap kali aplikasi Vue kita terpasang di browser, kita cek ada data di storage atau tidak.

...
  data(){ ... },

  mounted() {
    let data = localStorage.getItem('inkos_data')
    if (data) this.items = JSON.parse(data)
  },

  methods: { ... }
...

Setelah dicoba, hasilnya... mantap!

Ini baru minimun viable product yang saya inginkan. Untuk sementara inventarisasi barang kosan sudah bisa dimulai. Hehe.

Terima kasih sudah menyimak sampai bagian ini. Sampai jumpa di artikel yang lain!

~~Mencatat barang-barang~~

~~Menampilkan daftarnya~~

~~Menghapus data barang~~ 🎉

Mau coba juga? Atau mau lihat source code nya?
Mampir kesini: