DEV Community: zidanpahrudin_

Building Core Loops in UI/UX: Turning Actions into Habits

zidanpahrudin_ — Tue, 12 Aug 2025 08:41:45 +0000

A core loop is a repeated pattern in a system that keeps users coming back — not because they are forced to, but because they want to.
This concept is popular in game design but is also highly relevant for web and mobile applications.

🔄 The Structure of a Core Loop

Trigger – Something that prompts the user to act (notification, need, curiosity).
Action – A specific action taken by the user.
Reward – An immediate and satisfying outcome.
Investment/Progress – Value that grows over time with continued use.
Repeat Trigger – A follow-up prompt that encourages repeating the cycle.

💡 Why It Matters

A well-designed core loop builds habits.
The more often users interact, the more value they accumulate in the system, increasing the switching cost and making it harder for them to leave.

📍 Case Study: Web CRM Application

Trigger: A notification says, “You have 5 leads waiting for follow-up today.”
Action: The user contacts the leads through the CRM.
Reward: The lead’s status changes to “Qualified,” and the chance of closing the deal increases.
Investment: The CRM stores interaction history and communication logs, making sales analytics more accurate.
Repeat Trigger: A weekly pipeline progress report encourages the user to return for more follow-ups.

🎯 Tips for Building Effective Core Loops

Variety & escalation: Identical loops can get boring — increase challenge or reward over time.
Nested loops: Combine small loops (instant rewards) with larger loops (long-term progress).
Loss aversion: Make users feel they are losing something if they stop engaging.

💬 Think beyond single clicks — design for long-term engagement.
A core loop is not just about interaction — it’s about building a relationship between the user and the product.

ProjekHarusJadi — Hari 2: Merakit UI Kit di Figma

zidanpahrudin_ — Mon, 11 Aug 2025 11:01:11 +0000

Hari ini adalah HARI KEDUAA DARI SEKIAN HARI YANG TERLEWAT HAHAHAA perjalanan membuat CRM untuk target startup dan UMKM, yang akan hadir dalam bentuk responsive web (desktop & mobile). Setelah kemarin fokus inisiasi dan moodboard, hari ini aku masuk ke tahap UI Kit — pondasi visual yang akan dipakai di seluruh desain.

Kenapa UI Kit penting?
Karena UI Kit itu semacam “peralatan dapur” kita. Sebelum masak, kita siapin bumbu dasar dulu. Kalau sudah siap, nanti semua masakan (baca: halaman web) akan punya rasa yang konsisten.

🎯 Fokus Belajar Hari Ini

Typography — memilih font utama dan pendukung
Color Styles — menentukan palet warna utama
Buttons — membuat gaya tombol yang konsisten
Form Inputs — menyiapkan gaya input form
Auto Layout & Component di Figma — supaya desain fleksibel dan mudah diatur

1️⃣ Typography — Maksimal Tiga Font Saja

Aku memutuskan untuk memakai dua font utama:

Noto Sans Javanese → primary font, tegas tapi ramah, cocok untuk heading
Work Sans → secondary font, simpel dan nyaman dibaca untuk body text

Kenapa cuma dua?
Menurut prinsip desain, terlalu banyak font akan membuat pengguna bingung dan menciptakan kesan desain tidak konsisten. Banyak panduan profesional menyarankan maksimal tiga font dalam satu desain—termasuk font di logo—untuk menjaga keterbacaan dan keselarasan visual (UX Planet, UX StackExchange).

🎓 Tips: Kalau ingin variasi, gunakan berat font (font-weight) yang berbeda, bukan ganti font-nya.

2️⃣ Color Styles — Satu Rasa, Bukan Satu Warna

Untuk palet warna, aku ingin harmonis dan “satu rasa”, supaya antarmuka nyaman dilihat dan tidak melelahkan mata.

Primary: Biru (#1B4CD3) → warna utama, untuk aksi penting
Secondary: Hijau (#7ECB93) → penunjang, memberi aksen segar
Danger: Merah (#EA3838) → khusus peringatan atau aksi destruktif
Neutral: Putih (#F4F6FA) & Hitam (#22262B) → dasar dan teks

Menurut teori Color Harmony, warna yang selaras membuat desain tampak seimbang dan profesional (Interaction Design Foundation, CareerFoundry).
Desainer juga sering membatasi palet menjadi ±5 warna utama agar mudah dikelola dan tetap rapi (GraphicDesign.SE).

3️⃣ Buttons & Form Inputs — Komponen Seragam

Di UI Kit ini, aku membuat:

Tombol Primary (aksi utama), Secondary, dan Danger
Variasi tombol dengan warna netral (putih, hitam)
Form Inputs untuk normal state, focus state, dan error state

Kenapa dibuat dari awal?
Supaya nanti setiap tombol & input di seluruh halaman terlihat seragam, tanpa harus mendesain ulang dari nol.

4️⃣ Auto Layout & Component di Figma

Hari ini aku juga belajar (dan langsung praktik) fitur Auto Layout di Figma.
Manfaatnya:

Elemen otomatis menyesuaikan ukuran ketika teks berubah
Spacing antar elemen konsisten tanpa hitung manual
Perubahan di satu component akan otomatis update di semua instance

🎓 Tips: Biasakan membuat semua tombol, card, dan form sebagai component sejak awal. Ini akan menghemat waktu luar biasa saat revisi.

📸 Screenshot UI Kit Hari Ini

📝 Insight Hari Ini

Font maksimal tiga jenis → lebih dari itu, visual jadi tidak fokus
Palet warna terbatas → lebih terkontrol, harmonis, dan nyaman dilihat
Komponen seragam → membuat pengalaman pengguna lebih konsisten
Auto Layout & Component → kunci desain yang scalable di Figma

📂 Understanding `.htaccess` — The Gatekeeper of Your Apache Website

zidanpahrudin_ — Mon, 11 Aug 2025 10:27:51 +0000

.htaccess may be small in size, but it plays a huge role.

For an Apache web server, this file is the control gate — deciding who can enter, what can be accessed, and how your site responds to requests.

Think of .htaccess as the bouncer at an exclusive club:

They can reject unwanted guests (block IPs).
They can control the queue (redirect & rewrite URLs).
They can ban cameras (block access to sensitive files).
They can even set the room’s vibe (disable caching).

Ignore it, and your club’s doors stay wide open for anyone — including those with bad intentions.

That’s why .htaccess should be every developer’s best friend.

📌 Global vs Local `.htaccess`

Global → Applies to the entire server, usually set in Apache’s main configuration file (httpd.conf).
Local → Applies only to the directory where the .htaccess file is placed.

Pro tip: Local .htaccess is perfect if you don’t have root access to the server but still want to control your site’s behavior.

1️⃣ Prevent Browser Caching

Ever updated an HTML/CSS/JS file, but the browser still shows the old version?

The fix: force the browser not to store cache.

<IfModule mod_headers.c>
  Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
  Header set Pragma "no-cache"
  Header set Expires 0
</IfModule>

Why this matters:

Caching is great for performance, but terrible when debugging or updating visuals.
This ensures every refresh loads the latest version.

Quick breakdown:

Cache-Control → Stops caching completely.
Pragma → Old-school support for legacy browsers.
Expires → Marks files as instantly expired.

2️⃣ Redirect Pages (URL Redirection)

Redirecting old URLs to new ones is crucial for:

Avoiding broken links.
Preserving SEO when moving pages.

Example: Redirect /about.html to your homepage.

Redirect 301 /learn_htaccess/about.html http://localhost/learn_htaccess/index.html

SEO Tip: Use 301 for permanent redirects, 302 for temporary ones.

3️⃣ URL Rewriting (Clean URLs)

Make URLs clean and easy to remember.

Example: index.php?id=12 → /12

RewriteEngine On
RewriteRule ^([0-9]+)$ index.php?id=$1 [L]

Why this is cool:

More user-friendly.
SEO-friendly (Google loves clean URLs).

4️⃣ Remove `.html` or `.php` Extensions

Keep URLs clean: /index.html becomes simply /index.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^([^\.]+)$ $1.html [L]

Pro tip: Can also be adapted for .php or .asp.

5️⃣ Custom Error Pages

Make errors more user-friendly:

404 → Page not found
403 → Access forbidden
500 → Internal server error

RewriteEngine On
ErrorDocument 404 /learn_htaccess/notfound.html
ErrorDocument 403 /learn_htaccess/forbidden.html
ErrorDocument 500 /learn_htaccess/error500.html

Bonus: Create error pages that are informative and even interactive.

6️⃣ Block Access to Sensitive Files

Don’t let anyone peek into crucial files like .env or config.php.

<FilesMatch "^(config\.php|\.env)$">
    Order allow,deny
    Deny from all
</FilesMatch>

7️⃣ Force HTTPS (Redirect HTTP → HTTPS)

Security is non-negotiable. Force all traffic over HTTPS:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/learn_htaccess/$1 [L,R=301]

Note: Make sure SSL is installed before enabling this, or your site will go down.

8️⃣ Block Specific IP Addresses

Kick out unwanted guests based on IP:

Order Deny,Allow
Deny from 123.45.67.89

You can also block entire countries using IP ranges.

9️⃣ Disable Directory Listing

Prevent visitors from viewing folder contents:

Options -Indexes

📚 References

💡 Conclusion

.htaccess is more than just a tiny config file — it’s your Apache site’s security gate and traffic manager.

Use it wisely: the wrong rules can take your site down, but the right ones can make it safer, faster, and more professional.

## 🧩 #ProjekHarusJadi — Hari 1: Inisiasi & Struktur Desain di Figma

zidanpahrudin_ — Tue, 22 Jul 2025 13:01:15 +0000

Halo semuanya!
Hari ini gue mulai perjalanan bikin proyek UI/UX pribadi yang udah lama banget tertunda — dan gue kasih nama series ini: #ProjekHarusJadi 💪

Kenapa?
Karena banyak dari kita (termasuk gue) sering nunda-nunda ide, padahal ide itu gak bakal jadi apa-apa kalau gak dikerjain.
Jadi kali ini, harus jadi titik awalnya. 🎯

💡 Apa Proyeknya?

Gue lagi bikin desain CRM Web App yang nantinya ditargetkan buat:

Startup kecil
UMKM
Freelancer / perorangan

Desainnya akan responsive (bisa dipakai di desktop & mobile) dan fokus pada kebutuhan dasar CRM: kelola pelanggan, leads, aktivitas, dan user.

🧭 Apa yang Gue Lakuin Hari Ini?

Hari ini fokus gue adalah inisiasi proyek & struktur desain di Figma.
Gue gak langsung desain halaman, tapi belajar dulu gimana nyusun fondasi desain biar terarah dan konsisten.
Berikut beberapa hal penting yang gue pelajari dan kerjain:

📐 Struktur Halaman Figma

1. 🎨 Moodboard

Moodboard adalah tempat referensi visual.
Isinya:

Palet warna yang bakal dipakai
Font yang cocok dengan tone desain
Screenshot inspirasi dari desain lain
Style icon, ilustrasi, dan tone visual keseluruhan

Intinya: moodboard nunjukkin kira-kira "rasa" dari desain kita nanti.

2. 🧱 UI Kit

Ini adalah "kumpulan komponen dasar" dari desain yang bakal dipakai di semua halaman.

Isinya:

Typography styles (heading, body, caption, dsb)
Warna (primary, background, text, dsb)
Komponen UI: button, input, card, navbar, dsb

Tujuannya? Biar desain konsisten dan efisien.

3. 🧾 Wireframe

Wireframe dibagi 2 jenis:

Low Fidelity: Sketsa kasar layout, pakai warna abu-abu, tanpa style.
High Fidelity: Sketsa yang udah dikasih warna, font, dan style visual.

Wireframe penting untuk fokus ke struktur konten sebelum mikirin estetika.

4. 📱 Final Screen

Ini versi desain full yang siap ditunjukkan ke stakeholder atau developer.
Udah pakai semua elemen dari UI Kit + layout final.

Biasanya gue pisahkan untuk:

Web screen
Mobile screen

5. 🎯 Prototype

Tahap ini bikin desain kita bisa diklik dan diuji alurnya.
Fitur utamanya:

Simulasi interaksi antar halaman (klik, transisi)
Cek user flow & experience

✍️ Catatan Akhir Hari Ini

Hari ini walaupun belum mulai desain UI-nya, gue belajar banyak soal struktur dan pondasi desain di Figma.
Dengan pondasi yang kuat, desain ke depannya bakal jauh lebih rapi dan scalable. Gak asal "bagus", tapi fungsional dan konsisten.

Kalau kamu juga lagi nunda-nunda bikin portofolio atau side project,
yuk bareng-bareng mulai dari sekarang!

“Projek gak harus sempurna di awal, tapi harus mulai dulu.”

Sampai jumpa di log berikutnya!

Everything what I love about NodeJS ecosystem.

zidanpahrudin_ — Thu, 11 Jan 2024 01:23:05 +0000

It's been three years since I've been working with Node.js for backend development. Over this time, I've developed a bit of a love-hate relationship with it.

Here list my oppinion about NodeJS :

A to Z package
With its massive community support, you can get everything you want through NPM, which stands for Node Package Manager or other package managers.
Simplicity
We adore JavaScript for its straightforward syntax. Node.js acts as a bridge between the JavaScript language and C++, facilitating communication. Thus, all Node.js syntax is essentially JavaScript.

"The greatest ideas are the simplest." – William Golding.

Write once, build anything
Absolutely, Node.js is versatile—it allows you to construct anything: frontend, backend, IoT, AI, and more. Nonetheless, every programming language has its strengths and weaknesses, and Node.js is no exception. While it's highly capable, it might not be the perfect solution for every task. So, it's wise to choose thoughtfully when employing it.
Fast development
Yes, Node.js indeed speeds up development thanks to its efficient runtime environment.
Huge demand in the job market
In my country, Node.js holds substantial demand in the job market. If you're contemplating learning programming, consider the job market demands in your area.

The list I've compiled is based on my experiences. You might agree or disagree with my opinions. Thank you for your attention!