DEV Community: Faiz Byputra

Menggambar pakai JavaScript! Emang bisa?

Faiz Byputra — Thu, 07 Dec 2023 06:09:17 +0000

Halo, teman-teman! Kamu pernah kebayang gak sih, bikin gambar kayak di aplikasi Paint, tapi menggunakan kode? Yap! Kamu bisa mulai menggambar dengan menulis kode dari artikel ini. Pada artikel ini, kita akan belajar sedikit tentang grafika komputer menggunakan bahasa pemrograman JavaScript.

Menggambar dengan bahasa pemrograman JavaScript bisa dilakukan menggunakan HTML5 Canvas API. Pada artikel ini kita akan menggunakan code editor daring, Codepen sehingga kita tidak perlu melakukan konfigurasi apa-apa. Hal pertama yang harus dilakukan adalah membuka situs codepen.io, lalu mendaftarkan akun dan membuat pen baru. Jika pen baru sudah dibuat, maka tampilannya akan menjadi seperti di bawah ini:

Jika layout-nya berbeda dengan di atas, kamu cukup menggantinya di pojok kanan atas.

Membuat elemen `<canvas>` pada HTML

Hal selanjutnya yang harus kita lakukan adalah membuat elemen <canvas> sebagai elemen tempat gambar kita akan di-render nantinya.

<canvas id="canvasku" width="512" height="512"></canvas>

Pada elemen tersebut, terdapat atribut id sebagai selector yang akan kita gunakan pada kode JavaScript. Selain itu terdapat pula atribut width dan height untuk mendefinisikan ukuran kanvas yang kita inginkan.

Mempersiapkan kode JavaScript

Salah satu fungsi dasar JavaScript adalah memanipulasi DOM (document object model) yang ada pada HTML. Maka dari itu, yang harus kita tulis pertama kali pada kode JavaScript adalah selector untuk memilih elemen HTML apa yang akan kita manipulasi. Pada kasus ini, kita menggunakan id sebagai selector elemen kanvas kita. Setelah kita memilih elemen dengan selector, maka kita akan menyimpannya ke dalam variabel context.

const context = document.getElementById("canvasku");

Untuk memeriksa apakah elemen kanvas sudah di-select dengan benar, kita cetak variabel context menggunakan console.log().

Menu console dapat dibuka dari menu yang ada di pojok kiri bawah

Selanjutnya, kita akan memanggil Context API 2D ke dalam variabel ctx. Context ini digunakan untuk memanggil API agar kita bisa menggambar menggunakan fungsi-fungsi yang ada.

const ctx = context.getContext("2d");

Setelah itu, kita sudah dapat menggunakan fungsi-fungsi yang ada pada HTML Canvas API.

Hal dasar yang perlu diketahui dalam grafika komputer adalah:

Berbeda dengan koordinat kartesius, koordinat (0, 0) pada layar komputer berada pada kiri atas. Sehingga sumbu x positif berada di sebelah kanan, dan sumbu y positif berada di bawah

Seluruh gambar yang di-render pada komputer didasarkan pada fungsi-fungsi matematis. Sering juga disebut sebagai vector atau path

Meskipun gambar di-render sebagai vector, luaran yang dihasilkan dan dilihat oleh mata kita pada layar berbentuk pixel atau bitmap

Menggambar garis

Untuk menggambar garis pada HTML Canvas, gunakan kode seperti di bawah ini:

// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Memindahkan "pena" ke titik (x, y)
ctx.moveTo(70, 120);
// Membuat garis dari (x, y) ke (xa, ya)
ctx.lineTo(150, 200);
// Membuat garis dari (xa, ya) ke (xb, yb)
ctx.lineTo(180, 150);
// Menggambar garis
ctx.stroke();

Dari kode di atas, terdapat 4 fungsi yang kita gunakan. Yang pertama adalah beginPath(). Fungsi ini digunakan untuk menghapus atau membersihkan atribut yang digunakan pada path sebelumnya, sehingga path yang akan kita gambar setelahnya tidak menggunakan atribut pada path sebelumnya.

Kemudian yang kedua adalah fungsi moveTo(x, y). Fungsi ini berguna untuk memindahkan posisi kursor atau "pena" yang akan digunakan nanti saat menggambar. Jadi, garis yang akan digambarkan dimulai dari titik (x, y) pada parameter fungsi moveTo(x, y).

Yang ketiga adalah fungsi lineTo(xa, ya). Fungsi inilah yang akan membuat garis dari titik awal (x, y) menuju titik (xa, ya). Fungsi lineTo() selanjutnya akan dimulai dari titik (xa, ya).

Dan yang terakhir adalah fungsi stroke(). Fungsi ini digunakan untuk me-render atau menggambar seluruh garis yang telah didefinisikan sebelumnya. Pada fungsi ini, line atau path yang sudah didefinisikan sebelumnya akan di-render pada kanvas.

Hasil akhir gambar akan terlihat seperti ini:

Menggambar persegi panjang

Hal paling mudah pada HTML Canvas adalah menggambar persegi panjang menggunakan fungsi fillRect(). Cukup masukkan kode berikut ke dalam file JavaScript:

// fillRect(x, y, width, height);
ctx.fillRect(0, 0, 200, 100);

Dari kode di atas, kita menggambarkan persegi panjang dari titik (0, 0) dengan lebar 200px ke arah kanan dan tinggi 100px ke arah bawah sesuai dengan koordinat pada grafika komputer.

Dari sini akan tampak persegi panjang berwarna hitam dengan atribut panjang dan lebar sesuai ketentuan kode di atas. Agar lebih menarik, kita ubah warna dari persegi panjang tersebut. Untuk mengubah warna, gunakan atribut fillStyle = "<WARNA>". Letakkan kode berikut di atas baris fungsi gambar persegi panjang.

// Mengatur warna fill menjadi hijau
ctx.fillStyle = "green";

Seluruh elemen yang kita gambar setelah baris kode di atas akan memiliki atribut fillStyle dengan warna hijau. Jika kita menginginkan warna lain untuk elemen lain setelahnya, maka atribut fillStyle harus di-override dengan warna yang diinginkan selanjutnya.

Menggambar lingkaran

Setelah itu, kita akan menggambar lingkaran menggunakan fungsi arc().

// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Mengatur warna stroke menjadi biru
ctx.strokeStyle = "blue";
// Membuat lingkaran dengan arc(x, y, r, start, end)
ctx.arc(300, 100, 50, 0, 2*Math.PI);
// Menggambar lingkaran
ctx.stroke();

Fungsi arc() digunakan untuk menggambar lingkaran dengan parameter titik pusat lingkaran, radius, serta derajat awal dan akhir dari lingkaran. 0 derajat dari lingkaran dimulai dari sebelah kanan titik pusat lingkaran sejauh radius dan terus berputar searah jarum jam. Gambar lingkaran akan terlihat seperti ini:

Menggabungkan gambar dengan konsep pemrograman

Dari lingkaran yang sudah kita buat sebelumnya, kita duplikasi lingkaran tersebut menggunakan for loop. Kita cukup membungkus kode pembuatan lingkaran ke dalam for loop seperti ini:

for(let i=0; i<4; i++) {
  // Membersihkan atribut path sebelumnya
  ctx.beginPath();
  // Mengatur warna stroke menjadi biru
  ctx.strokeStyle = "blue";
  // Membuat lingkaran dengan arc(x, y, r, start, end)
  ctx.arc(300, 100+(i*70), 50, 0, 2*Math.PI);
  // Menggambar lingkaran
  ctx.stroke();
}

Maka lingkaran akan terlihat seperti gambar berikut:

Apakah kamu bisa menjelaskan kenapa posisi keempat lingkaran bisa berbeda? Tulis di kolom komentar, ya!

Referensi:

https://www.w3schools.com/graphics/canvas_intro.asp

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Kode lengkap dan preview dari Codepen dapat dilihat di sini

Cara Memasang Bootstrap 5 Pada Proyek React JS

Faiz Byputra — Wed, 06 Dec 2023 07:08:34 +0000

Konten ini merupakan konten mirroring dari situs Medium dengan beberapa perubahan. Lihat konten orisinal di sini

Bootstrap adalah framework CSS yang sangat populer. Bootstrap dapat membuat styling UI pada situs web dengan cepat melalui pendekatan component-based. Selain itu, saat ini Bootstrap juga mendukung styling dengan pendekatan class-based sehingga tampilan UI dapat lebih dimodifikasi sesuai keinginan kita. Jika nantinya diperlukan, Bootstrap juga dapat dikustomisasi lebih lanjut menggunakan SASS.

Jika kamu sudah familier dengan Bootstrap dan ingin menggunakannya pada aplikasi React JS, banyak opsi yang bisa dipilih. Salah satunya adalah menginstal Bootstrap melalui NPM pada terminal.

Mengapa Bootstrap standar? Bukan react-bootstrap?

react-bootstrap menggunakan komponen dengan syntax JSX beserta atribut-atribut style yang harus dipelajari. Jadi jika kamu sudah familier dengan Bootstrap standar, kamu bisa lebih fokus mempelajari struktur React JS tanpa perlu mempelajari atribut-atribut yang belum perlu dipelajari.

Berikut akan saya jelaskan sedikit mengenai cara memasang Bootstrap 5 melalui NPM pada aplikasi React JS.

Membuat Aplikasi React dengan Vite

Vite adalah tools frontend yang terkenal akan kecepatannya dalam membangun aplikasi. Dan karena command create-react-app sudah tidak lagi direkomendasikan untuk membuat aplikasi React JS, maka saat ini saya akan menggunakan Vite.

npm create vite@latest

Setelah itu, tulis nama proyek, pilih framework React, lalu pilih varian bahasa (saat ini saya menggunakan JavaScript).

Instal dependencies yang dibutuhkan dengan menjalankan command:

npm install

Kemudian buka proyek dengan code editor/IDE pilihan kamu. Struktur foldernya akan terlihat seperti ini:

Menghapus CSS Bawaan

Kita tidak akan menggunakan CSS bawaan dari Vite. Maka dari itu, kita akan menghapus kedua file App.css dan index.css pada folder src. Kemudian hapus beberapa baris kode:

// App.jsx
import './App.css';

// main.jsx
import './index.css';

Menginstal Bootstrap!

Kita masuk pada bagian utama. Kita akan menginstal Bootstrap versi 5.2.3 melalui NPM.

npm install bootstrap@5.2.3

Kemudian import Bootstrap pada file main.jsx

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'

Jalankan Proyek

Masukkan command berikut untuk menjalankan development server:

npm run dev

Jika tampilan sudah seperti di atas, selamat! Bootstrap sudah berhasil terpasang. Berubahnya jenis font yang ditampilkan menunjukkan bahwa framework Bootstrap sudah terpasang pada aplikasi React-mu.

Terima kasih banyak sudah menyempatkan waktumu untuk membaca. Ikuti akun ini atau follow saya di Twitter.

Create a modal without JavaScript!

Faiz Byputra — Thu, 01 Jun 2023 10:01:31 +0000

Hi there! Recently I found out that HTML has a tag named dialog. So what is it and how to use it? Let's find out together and make a modal with it!

<dialog> is an HTML tag that represents dialog box which can be used for many thing such as alert, subwindow, or a modal. Commonly, people use JavaScript to make an interactive element that manipulate the actual DOM. But now HTML has a tag so that you can make a modal easily! So let's get into it.

Make the modal window

First, you need to declare the <dialog> tag with an id that will be used to target it when we want to open it with a button.



<dialog id="modal">
  <h1>Welcome!</h1>
  <p>Click Close or press esc to close modal</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

Anything inside the <dialog> tag will be shown in the dialog box. Here we have an <h1>, a <p> tag, and a <form> tag with a <button> wrapped inside.

A form with dialog method is used to close the modal when the button inside it is clicked. Same as any other method, a default type of a button is submit so it will trigger the modal to close.

Make a button to show the modal

At this moment, you will not see anything on your window. It's because the dialog box (modal) is closed or not visible by default. Now we'll make a button to open it.



<button onclick="modal.show()">Show Modal</button>

Notice there's an onclick attribute with value of modal.show(). This means it will target an id of modal and runs a show() function.

Even we didn't write any JS, but the show() function is still a JavaScript function

Congratulations! we just built our own modal without writing any script. Now if you click the button you will see the modal a.k.a. the dialog box on your window.

Styling it with Bootstrap

The modal that we made earlier is pretty boring. So we'll style it using Bootstrap 5.3.

Here's the final code below:



<html data-bs-theme="dark">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body class="m-4">
      <dialog id="modal" class="rounded">
        <h1>Welcome!</h1>
        <p>Click Close or press esc to close modal</p>
        <form method="dialog" class="text-end">
          <button class="btn btn-primary">Close</button>
        </form>
      </dialog>

      <button onclick="modal.show()" class="btn btn-primary">Show Modal</button>
  </body>
</html>

Above is the final output of the modal. You can check it live on my Codepen here.

Thank you very much 😁

References:

Make a website and deploy it to GitHub Pages!

Faiz Byputra — Wed, 24 May 2023 05:08:29 +0000

Ever wondered how you can deploy your static HTML site for free and seamlessly? Now you can do it with GitHub Pages!

GitHub Pages is a feature of GitHub that enables you to deploy your static site and get a free domain based on your username. The domain name format is <USERNAME>.github.io. So if your username is faizbyp, it will be faizbyp.github.io.

In this article we'll use Visual Studio Code. So let's get started!

Let's make the site

First, make a directory named <USERNAME>.github.io, this will also be the name of your repository. Then open the folder in Visual Studio Code or any text editor that you prefered.

If you already have a repo named <USERNAME>.github.io, the next repo you deploy to GitHub Pages will be available in the same domain in <USERNAME>.github.io/<REPO_NAME> format.

Then, create an index.html file and make changes to the file as you want. I will make a simple 3 section site page with Bootstrap 5.3 Alpha.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <title>A Site Page</title>
</head>
<body>
  <header class="vh-100 d-flex justify-content-center align-items-center bg-primary">
    <h1 class="text-white">Hello, DEV!</h1>
  </header>
  <section class="vh-100 d-flex justify-content-center align-items-center">
    <h1>This is just a simple site</h1>
  </section>
  <section class="vh-100 d-flex justify-content-center align-items-center bg-dark">
    <h1 class="text-white">A simple footer</h1>
  </section>
</body>
</html>

Preview the code here

Publishing to GitHub

Now the HTML is done. The next thing is, initialize the repo and publish it to GitHub.

Simply go to Source Control tab in VS Code, and then click Publish to GitHub. Don't forget to login to your GitHub account (if you haven't). Then publish it as a public repository.

Free GitHub account doesn't allow a private repo to be deployed to GitHub Pages. So don't forget to make it public if your account is on a free tier.

Then go to your GitHub repo link. Go to Settings. Click Pages menu in "Code and automation". Select your deployment source and wait for a few seconds.

Voila! Your site is now live on the internet. Now share it to your friends and colleagues so they know you've made a site.

Conclusion

There are a lot of opportunity to the GitHub Pages. Technologies are growing so fast nowadays, so it's up to you to utilize the technologies available. Keep learning, and as Steve Jobs said, "Stay hungry, stay foolish".

I made a todo-list with Preact

Faiz Byputra — Sat, 29 Apr 2023 03:13:11 +0000

Hello! I'm Faiz, a Computer Science student. Recently I made a todo-list with Preact, localStorage, and PWA. This is one of my side project to learn about web development, especially in the frontend world.

Why Preact?

I'm introduced to Preact by Vite's CLI. There's an option to make a project with Preact template. So I was curious about this. The name is very similar to React.

And... yeah, after a bit of research, as far as I know, Preact is simply a smaller React alternative. Not much I know about it but here I am. I'm planning to make a simple todo-list so I think React would be an overkill.

Storing the data

I'm not the "Backend Guy". Making an API and tinkering with database is very difficult for me. And then I found this series about making todo-list with localStorage by Joseph Lynn and give it a shot.

So I know that localStorage is a key-value-based storage system stored in the client's browser. It's very interesting for me.

Make the app installable

The last thing I add is Progressive Web App or PWA. I tried it with vite-plugin-pwa for adding the service worker into the app. So the app is now installable on your devices!

Here's the GitHub repository of the project:

https://github.com/faizbyp/prudoo-list

And here's the live app:

https://prudoo-list.vercel.app/

I'd love to hear some feedback and suggestion so that I can grow more in the learning process. Thank you very much :D