DEV Community: Sulton

CSS @Keyframes

Sulton — Thu, 12 Jan 2023 08:41:23 +0000

Tahukah Kamu?

Dengan menggunakan CSS kita dapat membuat animasi untuk aplikasi website, animasi merupakan konsep untuk merubah style elemen secara bertahap ke set style yang lain.

Di CSS ada rule yang dapat digunakan untuk membuat animasi, yaitu @keyframes. Dengan @keyframes kamu dapat menentukan kapan terjadinya perubahan style.

Mari kita coba membuat animasi perubahan warna background menggunakan @keyframes.

body {
    background-color: yellowgreen;
    animation: henshin 5s infinite;
}

@keyframes henshin {
    0% { background-color: blueviolet; }
    50% { background-color: yellowgreen; }
    100% { background-color: blueviolet; }
}

Penjelasan

Kita membuat sebuah @keyframes dengan nama henshin, @keyframes tersebut dijalankan terus menerus setiap 5 detik, dan pada waktu tertentu dalam 5 detik tersebut akan terjadi perubahan style, dimana pada detik ke 0 (5*0%) background akan berwarna blueviolet -> detik ke 2,5(5*50%) akan berwarna yellowgreen -> dan detik ke 5(5*100%) akan berwarna blueviolet.

Hasilnya

Mengenal NPM

Sulton — Sun, 04 Jul 2021 06:34:20 +0000

Menjadi seorang developer tidaklah mudah, apalagi koding dari nol, karena ada banyak pekerjaan yang harus anda lakukan, mulai dari membuat beragam komponen untuk halaman website, membuat fungsi utilitas untuk mengatur logika kode, dan masih ada banyak yang akan perlu anda persiapkan. Namun, bagi programmer Javascript, ada tool untuk mempermudah development, yaitu NPM (Node Package Manager) yang dapat membantu proses koding dan membantu pengembangan aplikasi sehingga tidak perlu membuat kode dari nol.

Di artikel ini, akan dibahas mengenai apa itu NPM, cara kerjanya, cara penggunaannya, instalasinya, serta baris perintahnya.

Apa itu NPM?

NPM (Node Package Manager) merupakan alat untuk mengelola paket modul pada aplikasi. NPM mempunyai peran besar untuk mengatur modul/perpustakaan pada proyek aplikasi.

Dengan adanya NPM sang developer dapat menggunakan beberapa paket modul siap pakai yang dibuat oleh developer lain, sehingga akan dapat menghemat waktu development.

Sama seperti Package Manager lain, NPM terdiri dari 2 bagian, yaitu repository source code dan program client.

1. Repository source code.

Merupakan repo berbasis version control yang disimpan di server repository online.

2. Program client.

Merupakan command-line-tool yang bertugas untuk melakukan komunikasi dengan repository, dan digunakan untuk meng-install modul tersebut beserta dependency-nya.

Cara Menggunakan

Untuk menggunakannya developer perlu menentukan modul yang dibutuhkan, lalu buka terminal dan jalankan perintah install , maka paket modul tersebut akan terinstal di proyek kita.

Misal, saya ingin menginstal paket utilitas untuk mengatur logika kode. Pertama, saya ingin lodash sebagai modul yang dibutuhkan. Kedua, ketik npm install lodash di terminal, lalu jalankan dan tunggu sampai selesai. Maka, lodash akan terinstal di proyek aplikasi saya dan siap digunakan.

Cara Kerja

Ketika anda membuat proyek baru, anda akan diminta untuk mengisi beberapa data untuk proyek anda. Berikut adalah data yang perlu diisi:

Nama proyek -> nama proyek, misal react-navigation (harus unik ketika ingin dipublikasikan).
Versi -> versi proyek.
Deskripsi -> deskripsi mengenai proyek, untuk membantu developer lain mengetahui perihal proyek anda.
Repositori git -> tentukan dimana kode anda tinggal , berguna ketika orang lain ingin ikut berkontribusi pada proyek anda.
Keyword -> kata kunci untuk membantu developer lain menemukan proyek anda.
Lisensi -> lisensi proyek anda, sehingga orang tahu bagaimana izin untuk menggunakan proyek anda.
Dependensi -> modul yang digunakan agar proyek berjalan.
devDependency -> modul yang digunakan selama development.

Data tersebut perlu diisi untuk pembuatan dan publikasi, dan juga agar NPM dapat mengidentifikasi paket anda.

Instalasi

1. Instal Node.js

Langkah ini diperlukan untuk dapat menggunakan NPM, anda dapat mengunduh installer Node.js dari situsnya.

Setelah selesai diunduh, jalankan installer-nya dan selesaikan langkah yang diberikan untuk instalasinya.

Anda juga dapat menggunakan terminal untuk melakukan instalasi dengan menjalankan perintah brew install nodeuntuk di macos, sedangkan untuk linux sudo apt install nodejs dan sudo apt install npm.

2. Cek Instalasi Node.js dan NPM

Untuk memastikan Node.js dan NPM sudah terinstal di komputer, anda dapat memeriksanya dengan menjalankan perintah berikut untuk mengetahui versinya melalui terminal:

node -v && npm -v

Apabila instalasi berhasil, terminal akan menunjukan versi Node.js dan NPM yang ter-install di komputer.

Baris Perintah (CLI)

Karena NPM berbasis command-line-tools maka anda perlu mengetahui beberapa perintah untuk menggunakan NPM. Ada banyak perintah yang tersedia, anda dapat melihat lebih lengkap di situsnya.

npm cache clean -> hapus data dari folder cache.
npm init -> membuat paket baru.
npm install -> menginstal paket baru.
npm uninstall -> menghapus paket.
npm update -> memperbarui paket.

Demikian penjelasan singkat untuk mengenal NPM. Semoga bermanfaat.

Referensi:
https://www.niagahoster.co.id/blog/npm/
https://www.codepolitan.com/mengenal-package-manager-dalam-pemrograman

Node.js membuat Javascript luar biasa

Sulton — Sun, 02 Aug 2020 02:07:23 +0000

Komputer tidak memahami bahasa selain 0 dan 1 (binary digit), lalu bagaimana bisa komputer memahami bahasa pemrograman seperti Javascript?

Bahasa pemrograman mempunyai engine agar komputer dapat mengerti kodenya, setiap barisan kode tersebut akan diterjemahkan oleh engine itu sebelum diterima oleh komputer, misalnya Java yang mempunyai JVM (Java Virtual Machine), Javascript juga mempunyai engine untuk menerjemahkan kodenya agar dapat dibaca oleh komputer. Engine Javascript tertanam pada browser sehingga dibutuhkan browser agar komputer dapat menjalankan kode Javascript.

Ada banyak browser saat ini seperti Firefox, Opera, Safari, Chrome, dll. Dan masing-masing dari mereka mempunyai engine tersendiri untuk menerjemahkan kode Javascript. Saat ini ada 8 engine Javascript, misalnya Firefox dengan SpiderMonkey, Safari dengan JavaScriptCore, dan Chrome dengan V8.

Perkembangan Javascript dimulai saat adanya engine dari Google yang bernama V8, tujuan Google menciptakan engine ini yaitu untuk memaksimalkan layanan Google Map yang membutuhkan kecepatan tinggi saat me-load semua resource-nya karena engine yang ada tidak dapat memaksimalkan semua fitur layanan ini.

Saat ini, engine V8 adalah engine yang tercepat yang mempunyai performansi yang bagus. Karena alasan itu, Ryan Dahl yang sedang mencari teknologi untuk meningkatkan performa website memutuskan untuk menggunakan engine Javascript V8 yang akan dipakai pada Node.js.

Karena itu, Node.js membuat Javascript yang tadinya hanya untuk interaksi web dan hanya berjalan di sisi client sekarang berubah dan berevolusi menjadi bahasa universal yang hampir dapat berjalan di client maupun server, dan hampir di semua platform.

Node.js membuat engine Javascript ada diluar browser sehingga dapat mengeksekusi Javascript diluar browser. Karena itulah mengapa Javascript dapat berjalan di sisi server dan membuat program Javascript dapat dieksekusi dimanapun.

Menghindari import bersarang

Sulton — Thu, 30 Jul 2020 04:42:00 +0000

Mengimpor file akan menjadi sangat menyakitkan ketika basis kode Anda tumbuh dan menghasilkan file bersarang.
Perhatikan struktur direktori berikut:

app/
   components/
     Alert.js
     Button.js
   screens/
     Home.js
     About.js

Dengan struktur direktori tersebut, katakanlah Anda ingin mengimpor komponen Button atau Alert, misal: import Button from ../../components/Button, ketika lokasi file berubah kita perlu memperbarui pathnya, kalau tidak tentu pasti akan menghasilkan error.

Menggunakan absolute import

Ada solusi untuk mengatasi ini, yaitu dengan menggunakan absolute import. Selain dapat menghindari error saat lokasi file berubah, penggunaan absolute import juga akan membuat kode menjadi lebih bersih dan tidak rumit.

Pertama, dengan mengkonfigurasi file jsconfig.json di root proyek

{
   "compilerOptions": {
      "baseUrl": "app",
   },
   "include" : [ "app" ] 
}

Disini Anda perlu mengatur baseUrl ke direktori root yang diperlukan sebagai basis impor sehingga Anda dapat mengimpor komponen dengan jalur absolut. Sekarang, ketika ingin mengimpor komponen cukup dengan cara: import Button from components/Button.

Kedua, menambah file package.json ke direktori komponen

app/
   components/
     Alert.js
     Button.js
     packages.json
   screens/
     Home.js
     About.js

Anda dapat memanfaatkan package.json dengan menambah property name yang nantinya ini akan digunakan sebagai home directory saat import komponen

{
   "name": "components"
}

Sekarang, ketika ingin mengimpor komponen cukup dengan cara: import Button from components/Button.

Kesimpulan

Dengan memanfaatkan absolute import selain dapat menghindari error saat lokasi file berubah, juga akan membuat kode menjadi lebih bersih. Karena ketika lokasi file berubah Anda tidak perlu memperbarui pathnya, dan saat anda melakukan import file anda tidak perlu mengetahui hirarki file berbeda jika Anda menggunakan relative path.

Reference: https://create-react-app.dev/docs/importing-a-component#absolute-imports