PostCSS Deep Dive: Bermacam-macam Barang

Indonesian (Bahasa Indonesia) translation by Anggun Cornelis (you can also view the original English article)

Sepanjang seri ini kami telah melalui berbagai kategori PostCSS plugin, menawarkan semua jenis kelebihan yang berbeda untuk pengembangan CSS Anda. Tetapi beberapa plugin PostCSS yang terbaik tidak cocok ke dalam kategori yang kita telah bahas dalam seri entri kami sebelumnya.

Dalam tutorial ini Anda akan belajar tentang lima dari ini "bermacam-macam barang". Kita akan membahas:

Menghasilkan grid dengan Lost
Melihat bagaimana desain Anda terlihat oleh orang yang buta warna dengan postcss-colorblind
Mengkonversi unit px ke rem dengan postcss-pxtorem
Auto-generating versi RTL stylesheet Anda dengan rtlcss
Auto-generating panduan gaya dengan postcss-style-guide

Mari kita mulai!

Setup Proyek Anda

Seperti biasa, hal pertama yang Anda harus lakukan adalah men-setup proyek Anda untuk menggunakan Gulp atau Grunt, tergantung pada preferensi Anda. Jika Anda belum memiliki preferensi untuk satu atau yang lain saya merekomendasikan menggunakan Gulp karena Anda memerlukan lebih sedikit kode untuk mencapai tujuan yang sama, jadi Anda harus menemukannya sedikit lebih sederhana untuk digunakan.

Anda dapat membaca tentang bagaimana untuk setup proyek Gulp atau Grunt untuk PostCSS dalam tutorial sebelumnya

Dengan berurutan

Jika Anda tidak ingin secara manual men-setup proyek Anda dari awal sekalipun, Anda dapat mendownload file sumber yang ada dalam tutorial ini, dan ekstrak proyek Gulp atau Grunt starter yang disediakan ke dalam folder proyek kosong. Kemudian dengan terminal atau prompt perintah menunjuk pada folder jalankan perintah npm install.

Menginstal plugin

Sekarang kita perlu untuk menginstal lima plugin ke proyek Anda. Entah Anda menggunakan Gulp atau Grunt, jalankan perintah berikut di dalam folder proyek Anda untuk menginstal plugin yang akan kami gunakan:

1	npm install lost postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev

Serta lima ini kita juga akan menggunakan rtlcss, tapi karena bekerja sedikit berbeda dengan plugin PostCSS lainnya, kita akan menggunakannya melalui plugin Gulp atau Grunt yang sesuai.

Jika menggunakan Gulp, instal gulp-rtlcss dengan perintah:

1	npm install gulp-rtlcss gulp-rename --save-dev

Dan jika menggunakan Grunt instal Grunt-rtlcss dengan perintah:

1	npm install grunt-rtlcss --save-dev

Sekarang kita siap untuk memuat plugin ke proyek Anda.

Memuat plugin melalui Gulp

Jika Anda menggunakan Gulp, menambahkan variabel ini di bawah variabel sudah dalam file:

var lost = require('lost');
var colorblind = require('postcss-colorblind');
var pxtorem = require('postcss-pxtorem');
var styleGuide = require('postcss-style-guide');

var rtlcss = require('gulp-rtlcss');
var rename = require('gulp-rename');

Sekarang tambahkan masing-masing nama variabel yang baru ke dalam array processors Anda:

    var processors = [
  	lost,
		// colorblind,
		pxtorem,
		styleGuide
	];

Catatan: colorblind yang dikomentari, yang akan dijelaskan nanti.

Melakukan tes cepat yang semuanya bekerja dengan menjalankan perintah gulp css kemudian memeriksa yang baru "style.css" file telah muncul dalam proyek Anda "dest" folder.

Memuat plugin melalui Grunt

Jika Anda menggunakan Grunt, perbarui objek processors, yang berada di bawah pilihan object, sebagai berikut:

        processors: [
          require('lost')(),
          // require('postcss-colorblind')(),
          require('postcss-pxtorem')(),
          require('postcss-style-guide')()
        ]

Catatan: require('postcss-colorblind')(), adalah komentar, yang akan dijelaskan kemudian.

Lakukan tes cepat agar semuanya berjalan dengan menjalankan perintah grunt postcss lalu periksa apakah "style.css" file telah muncul dalam proyek Anda "dest" folder.

Menghasilkan Grids dengan Lost

Lost adalah sistem pembuatan grid berbasis PostCSS yang lengkap oleh Cory Simmons, pencipta Jeet, sistem grid lain yang sangat sukses yang ada di Stylus. Ini memiliki daftar panjang fitur yang mengesankan, namun penyebaran sangat lurus ke depan.

Mulailah dengan membuat sebuah file yang bernama "index.html" dalam folder "dest" kamu. Kami akan menyiapkan layout grid dasar dalam file ini. Tambahkan kode berikut untuk itu:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="row">
	<div class="main"> 
		<h1>Main Area</h1>
	</div>
	<div class="sidebar">
		<h1>Sidebar</h1>
	</div>
</div>
	
</body>
</html>

Kemudian tambahkan kode ini ke "src / style.css" Anda untuk menyiapkan tata letak kolom dua kolom dasar, dengan kolom kolom utama dan kolom sidebar:

@lost gutter 1.618rem;

.row {
    lost-center: 75rem;
}

.main {
	lost-column: 3/5;
}

.sidebar {
	lost-column: 2/5;
}

Mari kita memecah apa yang telah kita lakukan di sini.

Pertama, kita menggunakan @lost di-aturan untuk memberi nilai sendiri pada salah satu pilihan Lost: gutter size. Secara default gutters (celah antara kolom) adalah 30px. Saya selalu suka menggunakan 1.618rem untuk jarak dalam desain, jadi saya menetapkannya sebagai gutter size baru dengan garis @lost gutter 1.618rem ;.

Selanjutnya, kami menyiapkan kelas .row yang akan kami bungkus di sekitar kolom kami. Ini hanya membutuhkan menggunakan properti lost-center dan menentukan lebar untuk baris. Plugin akan mengatur max-width di kelas, memusatkannya, dan mengbersihkannya.

Setelah itu, di kelas .main dan .sidebar, kami telah menbuat kolom kami.

Lost tidak membatasi Anda untuk bekerja dengan sejumlah kolom yang telah ditentukan seperti dua belas atau enam belas; Anda dapat memiliki sejumlah kolom yang Anda inginkan. Lebar kolom ditentukan dengan menggunakan properti lost-column dan menetapkan pecahan sebagai nilainya. Dalam kode kita kelas .main menggunakan pengaturan 3/5 sehingga ia akan mengambil 3 kolom 5, dan .sidebar menggunakan 2/5 karena itu akan membutuhkan 2 kolom 5.

Kompilasikan file Anda dan dalam "dest/style.css" file Anda sekarang harus melihat kode ini:

.row {
    *zoom: 1;
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.row:before {
	content: '';
	display: table;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}

.main {
	width: calc(99.99% * 3/5 - (1.618rem - 1.618rem * 3/5));
}

.main:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.main:last-child {
	margin-right: 0;
}

.main:nth-child(5n) {
	margin-right: 0;
}

.main:nth-child(5n + 1) {
	clear: left;
}

.sidebar {
	width: calc(99.99% * 2/5 - (1.618rem - 1.618rem * 2/5));
}

.sidebar:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.sidebar:last-child {
	margin-right: 0;
}

.sidebar:nth-child(5n) {
	margin-right: 0;
}

.sidebar:nth-child(5n + 1) {
	clear: left;
}

Dan bila dilihat di browser, "dest / index.html" Anda file sekarang harus ada dua kolom layout seperti ini:

Agak sulit untuk melihat persis apa yang terjadi dengan grid kita di sini, yang merupakan alasan Lost juga menyediakan Lost-utility: edit; untuk menyorot grid Anda untuk mudah visualisasi selama pengembangan.

tambahkan ini ke masing-masing kelas kami telah membuat sejauh ini:

.row {
    lost-center: 75rem;
	lost-utility: edit;
}

.main {
	lost-column: 3/5;
	lost-utility: edit;
}

.sidebar {
	lost-column: 2/5;
	lost-utility: edit;
}

Sekarang ketika Anda mengkompilasi ulang dan me-refresh halaman Anda Anda akan melihat grid Anda yang disorot seperti ini:

Mari kita membuat semuanya sedikit lebih jelas untuk melihat lagi dengan beberapa tambahan styling (yang juga akan membantu kita dengan kemudian bagian dalam tutorial ini). Update "src/style.css" Anda file berikut, menambahkan beberapa tambahan seperti padding di dalam kolom dan beberapa warna latar belakang dan teks:

@lost gutter 1.618rem;

* {
    box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	font-family: "Open Sans";
}

html {
	padding: 0;
}

body {
	padding: 1.618rem;
	background: #16a085;
}

.row {
	lost-center: 75rem;
}

.main, .sidebar {
	padding: 1.618rem;
	min-height: 500px;
}

.main {
	lost-column: 3/5;
	background: white;
	color: #232323;
}

.sidebar {
	lost-column: 2/5;
	background: #2c3e50;
	color: white;
}

Kompilasi CSS Anda lagi dan muat ulang halaman Anda dan sekarang Anda harus memiliki layout dua kolom klasik seperti ini:

Apa yang kita sudah bahas di sini hanya menyentuh permukaan apa yang dapat dilakukan dengan Lost, jadi pastikan untuk membaca tentang seluruh fitur di: https://github.com/corysimmons/lost

Lihat Melalui Mata Colorblind

Efek kebutaan warna sebagian besar pengunjung situs Anda lebih banyak daripada yang mungkin Anda sadari. Sebagai contoh, jenis yang paling umum buta warna adalah deuteranomaly, mempengaruhi 6% dari semua laki-laki dan 0,4% perempuan. Untuk menempatkan itu dalam perspektif, diperkirakan IE9 dan IE10 dikombinasikan digunakan sekitar 4% dari semua lalu lintas web. Orang mungkin menyarankan bahwa jika kita dapat memasukkan sejumlah besar waktu untuk mendukung peramban tertentu, kita dapat mengukur ukuran waktu yang sama untuk mendukung orang.

Plugin postcss-colorblind oleh Brian Holt membantu dengan tak terkira dalam menilai betapa mudahnya desain untuk orang-orang dengan berbagai bentuk kebutaan warna, karena ini memungkinkan Anda melihat sendiri bagaimana skema warna Anda akan terlihat jika Anda memiliki persepsi visual yang sama. Hal ini memungkinkan Anda untuk menghasilkan versi stylesheet Anda yang mensimulasikan delapan jenis buta warna. Mari kita lihat bagaimana Anda dapat menggunakannya.

Tambahkan beberapa warna tambahan

Pertama, kita akan menambahkan beberapa warna tambahan untuk desain kita sejauh ini untuk membantu kitai lebih jelas melihat efek dari stylesheet berbeda yang akan kita hasilkan. Kita akan menambahkan lima ubin"metro style", dengan menambahkan html berikut di bawah baris yang sudah kita miliki dalam kami "dest/index.htm" file:

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

Sekarang tambahkan kode berikut untuk Anda "src/style.css" file untuk gaya ubin ini dengan lima warna yang berbeda:

.row {
    margin-bottom: 1.618rem;
}

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

.tile:nth-of-type(1) {
	background: #f39c12;
}

.tile:nth-of-type(2) {
	background: #c0392b;
}

.tile:nth-of-type(3) {
	background: #8e44ad;
}

.tile:nth-of-type(4) {
	background: #2980b9;
}

.tile:nth-of-type(5) {
	background: #d35400;
}

Setelah kompilasi, Anda harus melihat file Anda sekarang tampak seperti ini dalam browser:

Menghasilkan simulasi buta warna

Anda mungkin telah memperhatikan bahwa ketika kita menyiapkan array processors kita, entri untuk colorblind telah dikomentari. Itu karena segera setelah plugin aktif maka akan menerapkan simulasi colorblind ke stylesheet Anda, jadi Anda tidak ingin menyalakannya sampai Anda siap menggunakannya. Komentar itu dalam array processors sekarang.

Untuk mensimulasikan salah satu dari delapan jenis colorblindness, lewati method pilihan untuk plugin ini di Gulpfile atau Gruntfile Anda, beserta nama jenis colorblindness yang ingin Anda periksa.

Sebagai contoh, untuk mensimulasikan deuteranomaly menetapkan pilihan ini:

/* Gulpfile */
colorblind({method: 'deuteranomaly'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'deuteranomaly'})

Sekarang kompilasi ulang stylesheet Anda dan segarkan halaman Anda dan Anda akan melihat disain Anda sebagai orang dengan deuteranomaly:

Anda akan melihat warnanya terlihat sangat berbeda. Seseorang dengan deuteranomaly melihat warna merah dan hijau berbeda, jadi sementara Anda akan melihat warna biru hampir sama, warna merah dan hijau sangat berbeda.

Untuk memvisualisasikan protanopia atur opsi ini:

/* Gulpfile */
colorblind({method: 'protanopia'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'protanopia'})

Kompilasi ulang stylesheet Anda dan sekarang Anda akan melihat ini:

Seseorang dengan protanopia pada dasarnya tidak melihat warna merah sama sekali, dan melihat hijau dengan cara yang berbeda. Anda akan melihat lagi bahwa blues yang kuat tidak terlalu terpengaruh, tapi ungu telah menjadi biru murni, dan warna yang tersisa menjadi variasi warna kecoklatan kekuning-kuningan yang sama. Sudah menjadi sangat sulit untuk membedakan ubin berwarna merah dan dua orange dari satu sama lain.

Kemampuan untuk menghasilkan semua jenis simulasi colorblind ini sangat berwawasan, dan membantu kita untuk memastikan skema warna yang telah kita pilih tidak bergantung pada persepsi rona tertentu dan dengan demikian dapat diakses oleh semua orang..

Baca lebih lanjut tentang postcss-buta warna di: https://github.com/btholt/postcss-colorblind

Konversi unit px ke rem

Dalam hampir semua desain, ada alasan yang sangat baik untuk unit rem untuk memainkan peran penting. Namun sangat sulit untuk berpikir di rem unit, dan lebih mudah untuk berpikir dalam px unit ketika menciptakan layout. Postcss-pxtorem plugin membantu dengan ini speedbump, dengan secara otomatis mengkonversi unit px rem unit.

Plugin menggunakan daftar putih properti yang berlaku, jadi secara default unit px akan dikonversi menjadi rem bila digunakan pada:

font
font-size
line-height
letter-spacing

Anda dapat menambahkan properti ke daftar putih ini dengan menyetel opsi prop_white_list. Perbarui Gulpfile atau Gruntfile untuk menambahkan properti width seperti:

/* Gulpfile */
pxtorem({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),
        
/* Gruntfile */
require('postcss-pxtorem')({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),

Sekarang tambahkan kode berikut untuk "src/style.css" Anda file jadi kita bisa menguji proses konversi:

1	.convert_this {
2	width: 500px;
3	font-size: 18px;
4	}

Kompilasi file Anda dan dalam "dest/style.css" file Anda sekarang harus melihat nilai rem yang dihasilkan:

1	.convert_this {
2	width: 31.25rem;
3	font-size: 1.125rem;
4	}

Baca lebih lanjut tentang postcss-pxtorem di: https://github.com/cuth/postcss-pxtorem

Menghasilkan versi RTL stylesheet Anda

Jika Anda melayani audiens global, Anda mungkin perlu memberikan dukungan untuk naskah yang dibaca dari kanan ke kiri dan bukan kiri ke kanan, seperti bahasa Arab dan bahasa Ibrani misalnya. Bila orientasi script dibalik, sebaiknya juga tata letak situs Anda sehingga keseluruhan desain masuk akal bagi mereka yang melihat sisi kanan layar terlebih dahulu.

Plugin rtlcss oleh Mohammad Younes membuat proses pembuatan tata letak kanan-ke-kiri lebih mudah, karena secara otomatis memindai lembar kerja Anda dan mengubah orientasinya, menukar kata "kiri" untuk "benar" dan sebaliknya.

Plugin ini benar-benar bekerja sedikit berbeda dengan plugin PostCSS lainnya, karena kami tidak dapat menambahkannya ke array processors kami. Sebagai gantinya, selama penyiapan proyek kami, kami memasang plugin Gulp and Grunt untuk rtlcss, dan kami akan menyiapkan tugas terpisah untuk menjalankannya.

Jika menggunakan Gulp, tambahkan kode ini ke Gulpfile Anda:

gulp.task('rtl', function () {
    return gulp.src('./dest/style.css')
		.pipe(rtlcss())
		.pipe(rename({ suffix: '-rtl' }))
		.pipe(gulp.dest('./dest'));
});

Jika menggunakan Grunt, tambahkan baris ini setelah garis grunt.loadNpmTasks yang ada:

1	grunt.loadNpmTasks('grunt-rtlcss');

Kemudian tambahkan koma, setelah tugas postcss Anda, dan sisipkan tugas rtlcss baru ini:

rtlcss: {
	'default':{
		dest   : 'dest/style-rtl.css',
		src    : 'dest/style.css'
	}
}

Sekarang, jika menggunakan Gulp jalankan perintah gulp rtl, dan jika menggunakan Grunt jalankan perintah grunt rtlcss untuk menghasilkan stylesheet kanan-ke-kiri bernama "style-rtl.css" di folder "dest" Anda.

Edit "dest/index.html" file untuk memuat "gaya-rtl.css" sebagai ganti "style.css", refresh situs Anda, dan Anda harus melihat tata letak Anda telah dibalik:

Anda akan melihat teksnya masih tetap sejajar, tapi ini bisa dengan mudah diperbaiki dengan menambahkan teks-align: left; dalam stylesheet default Anda, yang rtlcss akan dikonversi menjadi text-align: right ;.

Baca lebih lanjut tentang rtlcss dan rekan-rekan Gulp dan Grunt di:

Buat Panduan Gaya

Plugin postcss-style-guide adalah alat fantastis yang dibuat oleh Masaaki Morishita. Ini memungkinkan Anda membuat styleguide secara otomatis berdasarkan stylesheet Anda. Yang harus Anda lakukan adalah menambahkan beberapa komentar ke CSS Anda, dan komentar tersebut akan diuraikan sebagai Markdown dan digunakan untuk mengisi styleguide Anda.

Hal pertama yang akan kita lakukan adalah mengkonfigurasi beberapa pilihan untuk styleguide kita. Kami akan menetapkan nama proyek kami sehingga bisa ditampilkan di header styleguide, dan kami juga akan menggunakan tema khusus bernama 1column.

Untuk menginstal tema kustom yang akan kita gunakan ke dalam proyek Anda, jalankan perintahnya:

1	npm install psg-theme-1column --save-dev

Sekarang perbarui Gulpfile atau Gruntfile untuk memberi opsi name dan theme sebagai berikut:

/* Gulpfile */
styleGuide({
	name: 'Auto Style Guide',
	theme: '1column'
})

/* Gruntfile */
require('postcss-style-guide')({
	name: 'Auto Style Guide',
	theme: '1column'
})

Cara kerja postcss-styleguide adalah bahwa ia akan mencari komentar Anda di lembar kerja Anda dan mengubah masing-masing yang ditemukannya menjadi entri styleguide. Ini akan menganggap ada komentar yang berkaitan dengan CSS yang mengikutinya, sampai pada komentar lain atau akhir dokumen.

Untuk alasan ini, setiap CSS yang ingin Anda tampilkan di styleguide Anda harus dipindahkan ke bagian bawah lembar kerja Anda. Kita akan memiliki ubin berwarna kita muncul di styleguide, dan juga elemen h1, jadi kita memerlukan keduanya untuk berada di akhir dokumen kita.

Mulailah dengan memindahkan semua kelas yang mempengaruhi ubin kita ke bagian bawah lembar kerja Anda; itu kelas .tile dan lima .tile: nth-of-type () gaya. Kemudian juga menambahkan sedikit kode untuk elemen h1 kontrol sehingga bagian bawah stylesheet Anda terlihat seperti ini (.tile:nth-of-type() gaya tidak ditampilkan untuk menghemat ruang):

h1 { font-size: 42px; }

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

Sekarang kita dapat menambahkan beberapa komentar untuk menjelaskan gaya ini. Setiap html yang ditambahkan dalam komentar ini akan diterjemahkan sebagai html di styleguide, dan CSS yang mengikuti komentar akan muncul di kotak tampilan.

Tambahkan beberapa komentar ke lembar kerja Anda yang menjelaskan gaya h1 dan kelas .tile, dan termasuk beberapa contoh html, jadi Anda akan mendapatkan yang berikut ini:

/*
This is the h1 style

<h1>Heading 1</h1>

*/

h1 { font-size: 42px; }

/*
These use the .tile class

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

*/

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

Sekarang kompilasi stylesheet Anda, lihat di folder akar proyek Anda dan buka "styleguide.html" file yang Anda temukan di sana dalam browser:

Hey presto, instan styleguide!

Pada saat ini terlihat sedikit funky karena telah memunculkan warna latar belakang tubuh dari stylesheet kita. Yang kami inginkan adalah agar konten kami berada pada latar belakang putih, dan kami bisa mendapatkan styleguide untuk mengambil kode lain dari stylesheet kami untuk mewujudkannya.

Area tengah template styleguide ini menggunakan elemen section, jadi di atas komentar yang menjelaskan elemen h1 Anda, tambahkan kode ini:

1	section {
2	padding: 1rem;
3	background: white;
4	}

Kompilasi ulang kode Anda, segarkan styleguide Anda, dan Anda akan melihatnya sekarang memanfaatkan styling yang baru saja ditambahkan ke elemen section dan terlihat seperti ini:

Ini, jauh lebih baik.

Baca lebih lanjut tentang postcss-gaya-panduan di: https://github.com/morishitter/postcss-style-guide

Mari kita rekap

Kesimpulannya segala sesuatu yang kita sudah bahas di atas:

Plugin Lost memungkinkan Anda membuat grid fleksibel hanya dengan beberapa properti, dengan banyak fungsi tambahan tersedia jika Anda memerlukannya.
Plugin postcss-colorblind memungkinkan Anda melihat sendiri bagaimana desain Anda terlihat pada orang-orang dengan delapan tipe warna yang berbeda.
Plugin postcss-pxtorem memungkinkan Anda menulis kode menggunakan unit px namun memilikinya secara otomatis dikonversi ke unit rem selama pemrosesan.
Plugin rtlcss secara otomatis menghasilkan stylesheet kanan-ke-kiri dengan memindai kode Anda untuk kata "benar" dan menggantinya dengan "kiri", dan sebaliknya.
Plugin postcss-style-guide secara otomatis menghasilkan styleguide, berdasarkan komentar yang ditambahkan ke stylesheet Anda.

Yang akan datang: Membuat Plugin Anda sendiri

Pada instalasi akhir dan akhir dari PostCSS Deep Dive ini, Anda akan belajar membuka salah satu keuntungan terbesar yang ditawarkan PostCSS; itu menjadi kemampuan untuk menggunakannya untuk menciptakan jenis fungsi yang Anda inginkan.

Anda akan belajar membuat plugin dasar Anda sendiri, dan dari dasar itu mudah-mudahan Anda bisa terus membuat lebih banyak plugin untuk kebutuhan apa pun yang mungkin timbul di masa mendatang.

Aku akan melihat Anda di akhir tutorial!