DEV Community: Zen

Cara Mudah Membuat Website dengan Pug

Zen — Wed, 19 Mar 2025 05:37:00 +0000

Untuk membuat website, satu-satunya bahasa markup yang resmi adalah HTML

Tapi, yang jadi masalah adalah HTML ini kodenya sangat panjang buat diketik, apalagi kalau diketik menggunakan HP

Contoh kode HTML versi minimal:

<!doctype html>
<html>
  <head>
    <title>Hello</title>
    <meta name="viewport" content="width=device-width, inisial-scale=1"/>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Ini adalah isinya</p>
  </body>
</html>

Sangat panjang kan?

Nah, sekarang coba bandingkan dengan kode Pug berikut ini:

doctype html
html
  head
    title Hello
    meta(name="viewport" content="width=device-width, initial-scale=1")
  body
    h1 Hello World
    p Ini adalah isinya

Apalagi lebih mantap kalau untuk styling-nya, pakai Stylus, dan untuk scripting-nya pakai CoffeeScript

Seperti contoh di bawah ini:

doctype html
html
  head
    title Hello
    meta(name="viewport" content="width=device-width, initial-scale=1")
    style
      :stylus
        h1
        p
          text-align center
  body
    h1 Hello World
    p Ini adalah isinya
    script
      :coffee
        nama = "Zen"
        alert "Hello #{nama}"
        angka = 2
        if angka % 2 is 0
          console.log "Angka #{angka} adalah bilangan genap"
        else
          console.log "Angka #{angka} bukan bilangan genap"

Ternyata, membuat website dengan Pug itu lebih mudah, bahkan bisa kita kerjakan lewat hp

Pertanyaan sekarang adalah apakah bisa menampilkan website dengan kode Pug?

Tentu saja nggak bisa

Kita harus meng-convert-nya menjadi html terlebih dahulu

Perintahnya untuk convert adalah pug index.pug -o index.html

Tapi sebelumnya, pastikan dulu kita sudah menginstall Node JS

Setelah menginstall Node JS, kita bisa menginstall Pug dengan perintah:

npm i -g pug-cli

Kalau kita juga ingin memasukkan CoffeeScript dan Stylus di kode-kode Pug kita, maka install-nya seperti ini:

npm i -g pug-cli jstransformer-coffee jstransformer-stylus

Gimana?

Apakah kamu sudah tertarik untuk membuat website menggunakan Pug?

Jangan lupa juga join komunitas kita untuk dapat info terbaru terkait materi-materi seperti ini ya...

Build Project Svelte untuk Dibuka di Protocol "file:"

Zen — Sat, 06 Apr 2024 16:23:51 +0000

Buat project Svelte:

pnpm create vite

Pas ditanya project name, masukkan nama project yang diinginkan. Misalnya aja: "latihan".

Pilih Svelte.

Pilih JavaScript.

Kemudian, masuk ke folder latihan:

cd latihan

Git init (recommended):

git init

Buka dengan VS Code:

code .

Tapi, aku lebih suka bukanya dengan extension Project Manager sih. Tinggal klik aja nama "latihan" di list Project Manager.

Install dependencies:

pnpm i

Install Vite Plugin Legacy dan Terser:

pnpm i @vitejs/plugin-legacy terser

Edit vite.config.js menjadi seperti berikut:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
+ import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
+    legacy({
+      renderModernChunks: false
+    })
  ],
});

Build:

pnpm build

Buka dist/index.html. Kan isinya seperti ini awalnya:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>

  </head>
  <body>
    <div id="app"></div>
    <script crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-CsGtGfX8.js"></script>
    <script crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-CTkYmYBZ.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
</html>

Hapus crossorigin dan sesuaikan src dan data-src menjadi seperti berikut:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>

  </head>
  <body>
    <div id="app"></div>
    <script  id="vite-legacy-polyfill" src="./assets/polyfills-legacy-CsGtGfX8.js"></script>
    <script  id="vite-legacy-entry" data-src="./assets/index-legacy-CTkYmYBZ.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
</html>

Klik kanan dist/index.html, lalu pilih Copy Path. Nah, sekarang paste ke browser.

Berhasil.

Yuk join komunitas Zen Sharing untuk mendapatkan informasi bermanfaat seperti di artikel ini.

Understanding `import-html`: Facilitating HTML Usage within HTML

Zen — Thu, 07 Mar 2024 00:28:13 +0000

In the world of web development, there is often a need to create well-structured and modular web pages. While HTML is sufficient for creating the basic framework, sometimes we want to use parts of one HTML page in another HTML page. Unfortunately, the ability to import or embed HTML into another HTML is not directly available. This is the problem addressed by a tool called import-html.

Background

In the process of website development, we often want to separate page components to make code management easier. While we can use JavaScript (JS) and Cascading Style Sheets (CSS) to be imported into HTML pages, using HTML within HTML remains a challenge. Tools like import-html are here to solve this problem.

What is `import-html`?

import-html is a tool that allows web developers to embed parts of one HTML file into another HTML file. In other words, this tool enables you to import HTML content into other HTML pages easily and efficiently.

Usage

Suppose you have an index.html file with the following content:

<p>
<import src="article.html"/>
</p>

Meanwhile, the article.html file contains:

<strong>Hello</strong> world

After running import-html, the content of index.html will become:

<p>
<import src="article.html">
<strong>Hello</strong> world
</import>
</p>

Thus, the content from article.html has been successfully inserted into index.html, making code management and structure easier.

Installation

You can install import-html using npm (Node Package Manager). Here are the steps:

Open Terminal: Open the terminal or command prompt on your system.
Run the Installation Command: Type the following command and press Enter:

   npm i -g import-html-again

Wait for the Installation Process to Complete: npm will download and install import-html along with its dependencies.

After the installation is complete, you can directly use import-html by running the import-html command in the Terminal.

Conclusion

With tools like import-html, the web development process becomes more structured and efficient. The ability to easily embed or import parts of one HTML page into another HTML page allows developers to create more modular and organized websites. With easy installation steps and intuitive usage, import-html becomes an effective solution for web developers.

Mengatasi Path Include PHP yang Dianggap Salah Path

Zen — Sun, 26 Nov 2023 23:13:00 +0000

Untuk menggunakan include di PHP, kita biasanya menggunakan kode seperti ini:

<?php include "./footer.php" ?>

Misalnya aja file PHP tersebut kita panggil dari index.php. Jadi, posisi filenya seperti ini:

index.php
footer.php

Tapi, akan menjadi masalah jika file yang kita include, melakukan include lagi pada lokasi lainnya. Contohnya seperti ini:

index.php (include) komponen/footer.php
komponen/footer.php (include) keterangan.php

Nah, kita pasti di komponen/footer.php menuliskannya seperti ini:

<?php include "../keterangan.php" ?>

Ketika kita membuka localhost/komponen/footer.php, dia works. Tapi, ketika membuka localhost, dia akan error pada bagian footer tadi karena kita memanggil seperti ini yang dibaca oleh server: localhost/../keterangan.php, bukan localhost/keterangan.php.

Solusinya adalah menambahkan dirname(__FILE__) . "/". Jadinya seperti ini:

<?php include dirname(__FILE__) . "/" . "../keterangan.php" ?>

Perlukah Membuat Aplikasi yang Berbahasa Inggris?

Zen — Sun, 14 May 2023 02:47:14 +0000

Seperti yang kita tau bahwasanya bahasa Inggris adalah bahasa internasional. Ketika kamu menuliskan sesuatu dengan bahasa Inggris, maka akan ada banyak orang yang paham dengan apa yang ingin kamu sampaikan. Makanya, sangat dianjurkan menggunakan bahasa Inggris.

Tapi, bagaimana jika berbahasa Inggris itu malah menjadikanmu menjadi beban dalam membuat aplikasi, membuat tweet, membuat APK, Chrome Extension, dan produk digital lainnya? Padahal, proses yang membuatmu enjoy itu (mungkin itu adalah suatu side project) malah menjadikanmu benci, membuatmu tak ingin lagi membuat aplikasi-aplikasi yang bermanfaat. Maka, tak ada salahnya juga membuat aplikasi dengan bahasa kalian masing-masing. Kalau aku, tentu saja bahasa Indonesia.

Lalu, bagaimana jika tidak ada yang mendownload? Nggak masalah. Kita membuat aplikasi itu (terutama yang side project) adalah untuk diri kita sendiri. Kalau diri kita nyaman membuatnya, nyaman juga menggunakannya, maka itu sudah cukup. Buatlah aplikasi sebanyak-banyaknya, konten sebanyak-banyaknya, tutorial di YouTube sebanyak-banyaknya, lalu kalian nikmati hasil pekerjaan kalian. Yuk, mumpung upload ke YouTube belum dikasih limit. Begitu pula dengan upload aplikasi Android ke PlayStore.

Lalu, untuk masalah pendapatan dari aplikasi yang kalian buat, nggak usah khawatir. Intinya, buat sebanyak-banyaknya. Nyalakan kreativitas kalian. Insya Allah, semua ada jalannya...

Cara Antar Komponen HTML Berinteraksi Tanpa Framework JavaScript

Zen — Sat, 29 Oct 2022 06:32:20 +0000

Jadi, di sini kita menggunakan localStorage. Caranya seperti ini:

Pada setter:

localStorage.nama = "Zen";
dispatchEvent(new Event("storage"));

Kemudian, pada getter:

addEventListener("storage", (x) => {
  if (x.key == "nama") {
    console.log(`Namanya adalah ${localStorage.nama}`);
  }
});

[ASK] How to monetize Chrome extension?

Zen — Wed, 25 May 2022 00:00:23 +0000

I can monetize Android app with Admob. I can monetize blog with Adsense. But, how to monetize Chrome extension? Thanks

Menggunakan Axios untuk GET dan POST PHP

Zen — Sun, 11 Apr 2021 11:56:36 +0000

Untuk GET:

const axios = require('axios')
async function init(){
 let hasilnya = await axios.get('https://kucing.com')
 hasilnya = hasilnya.data
 console.log(hasilnya)
}

Menggunakan Purge CSS

Zen — Tue, 27 Oct 2020 14:55:49 +0000

Install:

npm i -D purgecss

Di package.json:

"scripts": {
    "purgecss": "purgecss --css public/dist/bootstrap.min.css --content src/**/*.svelte --output public/dist2",
    "build": "routify -b --dynamic-imports && rollup -c && npm run purgecss && node script/salin.js && node script/pakaiPurge.js",
},

Buat file public/dist2/.hello

Di .gitignore:

/public/dist2/bootstrap.min.css

Tambahkan di dist/global.css:

body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}

Isi dari script/pakaiPurge.js:

fs = require('fs')
namaFile = 'hasil/index.html'
fs.readFile(namaFile, 'utf8', (_, x) => {
    x = x.replace('/dist/bootstrap.min.css', '/dist2/bootstrap.min.css')
    fs.writeFile(namaFile, x, 'utf8', () => {})
})

Hasil: https://svelte-brown.vercel.app/

Catatan: Dia kalau di Svelte kita pakai dynamic class (nggak ditulis langsung di htmlnya, nama classnya), purgecss nggak bisa deteksi. Solusinya pakai whitelist di option purgecss (ada di Google tutorialnya)

Store in Svelte

Zen — Sat, 17 Oct 2020 23:00:44 +0000

store.js

import {writable} from "svelte/store"
export const apple = writable(5)

Get store

<p>I have {$apple} apples</p>
<script>
 import {apple} from "./store.js"
</script>

Change store

import {apple} from "./store.js"
$apple = 10

import {apple} from "./store.js"
$apple = $apple + 1

I finished Hacktoberfest!

Zen — Sat, 17 Oct 2020 07:11:55 +0000

CRUD in JSON

Zen — Fri, 16 Oct 2020 02:39:36 +0000

data = [
 {
  "id": 0.63773,
  "nama": "Zen",
  "asal": "Samarinda"
 },
 {
  "id": 0.5262,
  "nama": "Yogi",
  "asal": "Loa Janan"
 }
]

// create
// tambah data

data.push({
 id: Math.random(),
 nama: "Maryam",
 asal: "Buah hati"
})

// read
// ambil data tertentu

x = data.filter(x => x.id == 0.5262)

// update

n = data.findIndex(x => x.id == 0.5262)
data[n].nama = "Anggi"

// delete

x = data.filter(x => x.id != 0.5262)