DEV Community: Saepul Malik

Deploy Nextjs ke Aws Amplify

Saepul Malik — Wed, 28 Aug 2024 01:36:33 +0000

Aws amplify adalah platform cloud yang menyediakan layanan untuk mengembangkan (develop), mendistribusikan (deploy) dan mengelola aplikasi web. AWS Amplify sangatlah mirip dengan platform cloud vercel. berikut langkah-langkah deploy nextjs ke aws amplify

Persiapkan repository git yang sudah siap dengan project nextjs nya
Buka AWS Management Console: Masuk ke AWS Management Console di https://console.aws.amazon.com/
Buka Layanan AWS Amplify: Di konsol AWS, cari dan buka layanan AWS Amplify
Klik "Get Started" atau "Connect App": Pilih opsi untuk menghubungkan aplikasi Git repository Anda dengan AWS Amplify.

pilih source code provider, disini kita akan menggunakan github
kemudian pilih repository dan branch

selanjutnya setting app, tentukan nama aplikasi, build setting dan service role
save and deploy.

Setalah terdeploy jika ingin menambahkan setup lainya, seperti custom domain dan environment variable bisa di setup pada app overview di tab hosting

Memanfaatkan reduce, map, dan filter untuk Pengolahan Data dalam React Project

Saepul Malik — Tue, 27 Aug 2024 02:04:31 +0000

Selama kurang lebih 5 tahun saya bekerja sebagai web developer, 3 fungsi array ini adalah yang paling sering saya gunakan untuk mengelola data dan berinteraksi dengan array. untuk react project sendiri 3 fungsi array ini sangatlah powerfull untuk pengolahan data, berikut kurang lebih penggunaan yang efektif dari ke 3 fungsi tersebut.

Map untuk renderList

import React from 'react';

const users = ['Alice', 'Bob', 'Charlie'];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

Filter untuk kondisional rendering

import React from 'react';

const users = ['Al', 'Bob', 'Charlie'];

function UserList() {
  const filteredUsers = users.filter(user => user.length > 3);

  return (
    <ul>
      {filteredUsers.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

Reduce untuk Menghitung Data

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 1200 }
];

function TotalPrice() {
  const totalPrice = products.reduce((acc, product) => acc + product.price, 0);

  return (
    <div>
      <h2>Total Price: ${totalPrice}</h2>
    </div>
  );
}

export default TotalPrice;

Menggabungkan map, filter, dan reduce dalam React

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500, discount: 200 },
  { id: 2, name: 'Phone', price: 800, discount: 50 },
  { id: 3, name: 'Tablet', price: 1200, discount: 100 }
];

function DiscountedProducts() {
  const discountedProducts = products.filter(product => product.discount > 0);
  const totalDiscount = discountedProducts.reduce((acc, product) => acc + product.discount, 0);

  return (
    <div>
      <h2>Total Discount: ${totalDiscount}</h2>
      <ul>
        {discountedProducts.map(product => (
          <li key={product.id}>{product.name} - Discount: ${product.discount}</li>
        ))}
      </ul>
    </div>
  );
}

export default DiscountedProducts;

Kesimpulan

Dalam aplikasi React, map, filter, dan reduce bukan hanya alat untuk memanipulasi data, tetapi juga cara untuk merender UI secara dinamis dan efisien. Dengan memahami dan menguasai fungsi-fungsi ini, kita bisa membuat aplikasi yang lebih modular, mudah dibaca, dan scalable. Jadi, terus eksplorasi dan terapkan fungsi-fungsi ini dalam proyek React kita untuk hasil yang maksimal

Berbagai Cara Efektif untuk Memposisikan Div di Tengah dengan CSS

Saepul Malik — Sat, 24 Aug 2024 03:40:54 +0000

Pendahuluan

Ada beberapa cara untuk memposisikan elemen div di tengah (center) menggunakan CSS. Berikut adalah beberapa metode umum:

1. Menggunakan Flexbox

Flexbox adalah salah satu metode paling populer untuk memposisikan elemen di tengah secara horizontal dan vertikal.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

2. Menggunakan Grid Layout

CSS Grid juga memberikan cara yang mudah untuk memposisikan elemen di tengah.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

3. Menggunakan Position Absolute dan Transform

Metode ini menggunakan position: absolute dan transformasi untuk memposisikan elemen di tengah.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

4. Menggunakan Margin Auto

Metode ini digunakan untuk memposisikan elemen secara horizontal di tengah dengan margin otomatis. Namun, untuk vertikal, diperlukan trik tambahan.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`<div class="centered">Isi di sini</div>`}

5. Menggunakan Text-align dan Line-height (Hanya Horizontal Centering)

Cara ini bekerja dengan baik untuk teks atau elemen inline-block.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

6. Menggunakan Table Display

Ini adalah teknik yang lebih lama tetapi tetap berfungsi.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

Kesimpulan

Untuk centering elemen di tengah halaman baik secara horizontal maupun vertikal, metode Flexbox dan Grid adalah yang paling mudah dan modern. Namun, metode lain masih berguna tergantung pada kebutuhan proyek. Terimakasih telah membaca artikel ini sampai akhir

Berbagai Cara Efektif untuk Memposisikan Div di Tengah dengan CSS

Saepul Malik — Sat, 24 Aug 2024 03:40:54 +0000

Pendahuluan

Ada beberapa cara untuk memposisikan elemen div di tengah (center) menggunakan CSS. Berikut adalah beberapa metode umum:

1. Menggunakan Flexbox

Flexbox adalah salah satu metode paling populer untuk memposisikan elemen di tengah secara horizontal dan vertikal.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

2. Menggunakan Grid Layout

CSS Grid juga memberikan cara yang mudah untuk memposisikan elemen di tengah.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

3. Menggunakan Position Absolute dan Transform

Metode ini menggunakan position: absolute dan transformasi untuk memposisikan elemen di tengah.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

4. Menggunakan Margin Auto

Metode ini digunakan untuk memposisikan elemen secara horizontal di tengah dengan margin otomatis. Namun, untuk vertikal, diperlukan trik tambahan.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`<div class="centered">Isi di sini</div>`}

5. Menggunakan Text-align dan Line-height (Hanya Horizontal Centering)

Cara ini bekerja dengan baik untuk teks atau elemen inline-block.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

6. Menggunakan Table Display

Ini adalah teknik yang lebih lama tetapi tetap berfungsi.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

Kesimpulan

Tutorial Git untuk Pemula

Saepul Malik — Fri, 23 Aug 2024 02:22:04 +0000

Tujuan dari penulisan artikel ini adalah sebagai dokumentasi dan catatan pribadi. saya publish agar memudahkan pencarian catatan, dan mungkin saja ada teman-teman dev yang memerlukan catatan ini juga.
dalam artikel ini akan dibahas terkait Git untuk yang baru pertama kali memulai dan tidak punya basic sama sekali. kurang lebih artikel ini akan terdiri dari

Table Konten

Pendahuluan
Instalasi Git
Konfigurasi Git
Membuat Repository Git
Menambahkan File Ke Repository
Melakukan Commit
Melihat Riwayat Commit
Mengembalikan Perubahan
Bekerja dengan Git Branch
Menggunakan Github
Kesimpulan

Pendahuluan

Git adalah sistem kontrol versi (version control) yang banyak digunakan pengembang (developer) untuk melacak perubahan dalam kode sumber (source code) selama proses pengembangan. Dengan Menggunakan Git, kita bisa bekerja sama dengan tim, melacak perubahan yang terjadi, dan kembali ke versi sebelumnya jika ada kesalahan.

Instalasi Git

1.Windows

Download Git dari situs resmi Git.
Jalankan installer dan ikuti petunjuk yang ada di layar.
Cek instalasi dengan buka command propmpt dan ketik perintah berikut

git --version

2. macOs

Gunakan Homebrew untuk install Git (kalau belum punya hombebrew install dulu) :

brew install git

Verifikasi instalasi dengan perintah git --version ### 3. Linux
install git menggunakan package manager
- Ubuntu/debian

sudo apt-get install git

Konfigurasi Git

Setelah install Git, langkah selanjutnya adalah konfigurasi nama pengguna dan email. ini penting karena setiap perubahan yang di buat bakal dikaitkan dengan informasi ini.

git config --global user.name "Nama Kamu"
git config --global user.email "email@example.com"

untuk melihat semua list konfigurasi git yang sudah diatur jalankan perintah :

git config --list

Membuat Repository Git

Repositori adalah tempat penyimpanan semua file project. Untuk membuat repository Git, lakukan lagkah dibawah

buat direktori proyek:

mkdir nama-proyek
cd nama-proyek

Inisialisasu Repository Git :

git init

Perintah ini bakal bikin subdirektori .git yang berisi semua file yang diperlukan buat melacak perubahan di repositori ini.

Menambahkan File ke Repositori

Buat file baru dan masukan code project lalu jalankan perintah

git add .
//untuk menambahkan spesifik file
git add nama-file

Melakukan Commit

Commit adalah tindakan menyimpan snapshot perubahan yang sudah dibuat. setiap commit harus disetai pesan yang menjelaskan perubahan yang dilakukan

git commit -m "Pesan commit kamu"

pada kebanyakan case biasanya add dan commit dilakukan secara bersamaan dengan menjalankan perintah :

git commit -am "pesan commit kamu"

Melihat Riwayat Commit
untuk melihat riwayat commit, bisa menggunakan perintah

git log

Ini bakal menampilkan daftar commit dengan detail seperti ID commit, penulis, tanggal, dan pesan commit.

Mengembalikan Perubahan

Git memungkinkan kita untuk mengembalikan perubahan yang sudah dilakukan.

Mengembalikan file ke kondisi sebelum di ubah

git checkout -- nama-file

Membatalkan commit terakhir, tapi tetap disimpan di staging area

git reset --soft HEAD^

Membatalkan commit dan menghapus perubahan

git reset --hard HEAD^

Bekerja dengan Branch

Branch memungkinkan kita bekerja pada fitur atau perbaikan secara terpisah dari branch utama (main atau master)

Buat branch baru:

git branch name-branch

Pindah ke branch baru

git checkout nama-branch

Atau untuk kita bisa gunakan shorcut untuk buat dan pindah langsung ke branch baru

git checkout -b nama-branch

Gabungkan branch ke branch utama:
- Pastikan ada di branch utama

git checkout main

Gabungkan branch

git merge nama-branch

Menggunakan Github

Github adalah platform untuk hosting repository Git. Untuk memulai menggunakan Github:

Buat akun github di Github
Buat repositori baru lewat antarmuka Github
Hubungkan repositori lokal yang telah kita buat dengan repositori Github

git remote add origin https://github.com/username/nama-repositori.git

Push perubahan ke github:

git push -u origin main

Kesimpulan

Git adalah alat yang sangat powerful untuk mengolal source code dan berkolaborasi dengan tim. Semoga bermanfaat dan terimakasih sudah membaca artikel ini sampai akhir

Setup Prettier Pada Nextjs Tailwind Project

Saepul Malik — Thu, 01 Aug 2024 06:21:03 +0000

Biasanya ketika saya membuat project saya selalu menggunalan auto formater, untuk membuat code saya terformat dengan baik. formater yang biasa saya gunakan adalah Prettier, dan berikut ini langkah langkah setup Prettier pada Project Nextjs tailwind

Install Package

npm install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

Tambahkan Script ini pada file .eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier":[ "warn",
    {
      "endOfLine": "auto"
    }]
  }
}

tambahkan file .prettierrc.json di root project kemudian tambahkan masukan format prettier yang dibutuhkan, contoh :

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Menambakan Husky Pada Nextjs 14

Saepul Malik — Thu, 01 Aug 2024 04:58:53 +0000

Husky adalah alat Node.js yang memudahkan konfigurasi git hooks. Git hooks adalah skrip yang dijalankan sebelum atau setelah tindakan git tertentu. Dengan menggunakan Husky, Anda dapat memastikan bahwa kualitas kode, standar pemformatan, dan aturan khusus proyek diikuti.

Install Husky

npm install husky@latest -D

Inisialisasi husky pada project

npx husky init

Menambahkan git hook

setelah inisialisasi dijalankan maka akan ada folder .husky kemudian pada file pre-commit kemudian tambahkan semua script formating yang kamu perlukan