DEV Community: ahoNerd

VS Code Fix Cannot validate since no PHP executable is set

ahoNerd — Sun, 04 Dec 2022 15:33:55 +0000

Pesan ini muncul karena VS Code berusaha untuk melakukan validasi code dengan PHP, tapi tidak dapat menemukan instalasi PHP pada system.

Detail error yang muncul:

cannot validate since a php installation could not be found. use the setting 'php.validate.executablepath' to configure the php executable.

Untuk mengatasi masalah ini cukup sederhana, yaitu tinggal klik tombol Open Setting pada dialog yang mucul lalu edit settings.json, dan akan terbuka tab seperti gambar berikut:

php.validate.executablePath kita isi dengan path dimana lokasi php.exe berada. Sebagai contoh, apabila kita menggunakan XAMPP maka php.exe secara default berada di C:\xampp\php. Kemudian tambahkan php.exe menjadi C:\xampp\php\php.exe.

Apabila muncul warning seperti gambar di atas, maka ganti backslash menjadi double backslashes, sehingga menjadi C:\\xampp\\php\\php.exe.

Setelah selesai edit, jangan lupa save.

Example

Berikut ini contoh setting untuk XAMPP dan Laragon

XAMPP

{
  "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
}

Laragon

{
  "php.validate.executablePath": "C:\\laragon\\bin\\php\\php-8.1.7-Win32-vs16-x64\\php.exe",
}

Settings file locations

Berikut ini adalah lokasi tempat settings file berada:

Windows

  %APPDATA%\Code\User\settings.json

macOS

  $HOME/Library/Application Support/Code/User/settings.json

Linux

  $HOME/.config/Code/User/settings.json

Settings untuk workspace dapat ditemukan di dalam folder .vscode pada root folder workspace.

Cara lain untuk membuka settings.json adalah melalui Command Palette dengan shortcut Ctrl+Shift+P atau melalui menu View › Command Palette, lalu ketik settings.json.

C# SQLite Database Connection

ahoNerd — Sun, 27 Nov 2022 00:47:45 +0000

Pada catatan kali ini akan kita bahas mengenai contoh penggunaan SQLite Database pada C#.

Visual Studio Template

Template yang akan digunakan untuk mencoba SQLite adalah Console App. Cara membuat console app project pada Visual Studio dapat dilihat pada link berikut: Creating New Console App Project in Visual Studio Code 2022.

Install `System.Data.SQLite`

Untuk dapat menggunakan SQLite pada Visual studio kita perlu menambahkan library dengan menggunakan NuGet Package Manager, dengan langkah-langkah seagai berikut:

Untuk langsung menambahkan library pada project yang tengah aktif, dapat dilakukan melalui menu Project › Manage Nuget Packages...
Pada tab Browse cari package dengan kata kunci system.data.sqlite kemudian pilih sesuai gambar lalu install dan tunggu beberapa saat untuk proses instalasinya
Setelah proses instalasi selesai, maka akan muncul dialog seperti gambar berikut, lalu tekan OK
Setelah itu akan muncul juga dialog konfirmasi lisensi penggunaan package, lalu tekan I Accept
Untuk memastikan bahwa package sudah berhasil ditambahkan ke dalam project, dapat dilakukan pengecekan pada Solution Explorer, sebagai berikut:

Test Connection

Untuk mencoba koneksi ke SQLite, dapat menggunakan code berikut:

Example Code

Code berikut akan menampilkan versi dari SQLite.

Output

Create Table and Add Data

Contoh pembuatan table dan penambahan data.

Example Code

Code berikut akan membuat database dengan nama fruits.db dan membuat table fruits di dalamnya, lalu menambah sample data Apple dan Orange.

Read Data

Contoh pembacaan data dari database.

Example Code

Code berikut akan membaca database dengan nama fruits.db yang sudah dibuat sebelumnya.

Output

Database Location

Database kita definisikan pada string cs = @"URI=file:fruits.db";, sehingga akan tersimpan di dalam project pada folder berikut:

\bin\Debug\net6.0

Custom Location

Untuk menyimpan database di tempat lain, cukup mengubah baris string cs = @"URI=file:fruits.db"; menjadi misalnya string cs = @"URI=file:D:\Data\test.db";, sehingga database akan tersimpan di partisi D pada folder Data.

Reference

system.data.sqlite.org

Creating New Console App Project in Visual Studio Code 2022

ahoNerd — Sat, 26 Nov 2022 13:19:20 +0000

Pada catatan kali ini akan kita bahas bagaimana cara untuk membuat Console App Project dengan menggunakan Visual Studio Comunity 2022

Download

Visual Studio Comunity 2022 dapat diunduh secara gratis melalui link berikut visualstudio.microsoft.com/downloads.

Create New Project

Untuk membuat Console App Project bisa ikuti langkah-langkah berikut:

Jalankan aplikasi Visual Studio Comunity 2022
Pada tampilan berikut, kita pilih Create a new project
Kamudian kita pilih Console App atau Console App (.Net Framework), lalu klik next
Masukkan nama project yang dikehendaki, tentukan folder tempat menyimpan project, lalu klik next
Apabila yang kita pilih adalah Console App, maka akan muncul layar berikut, langsung saja klik next

Sample Code

Untuk mencoba project yang baru saja dibuat, berikut ini contoh code yang bisa dicoba.

Code for `Console App`

Apabila yang kita pilih adalah Console App, maka kode berikut bisa langsung dijalankan:

Console.WriteLine("Berhasil!");

Code for `Console App (.Net Framework)`

Tapi apabila yang kita pilih adalah Console App (.Net Framework), maka kode harus kita input pada bagian Main():

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AhoConsoleApp
{
  internal class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Berhasil!");

      Console.WriteLine("\nTekan tombol apapun untuk keluar!");
      Console.ReadKey();
    }
  }
}

Start Debugging

Untuk menjalankan code di atas bisa dengan menekan F5, atau melalui menu Debug › Start Debugging atau langsung menekan tombol hijau seperti pada gambar berikut:

Vue 2 with Vuetify Example

ahoNerd — Thu, 24 Nov 2022 08:20:25 +0000

Pada catatan ini akan dibahas mengenai proses instalasi Vue 2 melalui Vue CLI dan menambahkan instalasi Vuetify di atasnya.

Apa itu Vue.js?

Vue dibaca seperti view adalah sebuah framework progresif untuk membantu pembuatan user interface. Core library-nya difokuskan pada layer tampilan saja, sehingga sangat mudah untuk diintegrasikan dengan library yang lain atau dengan project yang sudah ada. Dengan menggunakan Vue, akan sangat membantu dalam proses pembuatan SPA atau Single Page Application yang canggih dan interaktif.

Instalasi

Vue dapat di-instal dengan beberapa cara yang berbeda, tapi pada kesempatan kali ini kita akan membahas proses installasi Vue melalui CLI.
Vue sudah menyediakan CLI resmi untuk mempermudah proses instalasi hingga ke proses development aplikasi yang akan dibuat. Untuk dapat menggunakan Vue CLI tentunya di komputer harus sudah terinstall Node.js.

Apabila menggunakan Vue CLI versi 4.x akan memerlukan Node.js versi 8.9 ke atas dan direkomendasikan menggunakan versi 10 ke atas.

Memeriksa installasi node.js

Untuk memeriksa installasi node.js bisa menggunakan perintah berikut:

Node --version

atau

Node -v

Maka akan menampilkan versi node.js yang terinstal seperti berikut:

v16.15.0

Apabila output yang keluar adalah command not found: node berarti node.js belum terinstall pada komputer. Untuk instalasi node.js bisa download di link berikut: nodejs.org atau dengan menggunakan nvm (Node Version Manager).

Instalasi Vue CLI

Setelah memastikan bahwa node.js sudah terinstal pada komputer, selanjutnya kita dapat melanjutkan ke proses instalasi Vue CLI dengan perintah berikut:

npm install -g @vue/cli

atau

yarn global add @vue/cli

Seperti biasa untuk memastikan apakah instalasi sudah berhasil bisa dengan menggunakan perintah berkut:

vue --version

Maka akan menampilkan versi Vue CLI yang terinstal seperti berikut:

@vue/cli 4.5.13

Pembuatan Project

Untuk membuat project baru dengan menggunakan Vue CLI dapat menggunakan perintah berikut:

vue create vue-2-vuetify-example

vue-2-vuetify-example disesuaikan dengan nama project yang dikehendaki. Dengan begini Vue CLI akan membuat folder berisi Vue project sesuai dengan nama project tadi sebagai sub folder dari flder asal dimana kita memulai menjalankan terminal atau command promt.

Setelah menjalankan perintah di atas maka akan muncul tampilan seperti berikut:

Pilih Manually select features lalu klik enter, lalu pilih feature yang dikehendaki dengan menggunakan space:

Kemudian pilih Vue versi 2

Pilih yes untuk mode penggunaan router

Pilih ESLint + Prettier

Pilih Lint on save

Pilih In package.json

Selanjutnya Vue CLI akan mempersiapkan project di folder yang sudah ditentukan sebelumnya.

Setelah proses pembuatan project selesai, buka folder project yang sudah dibuat dengan menggunakan Visual Studio Code dengan menggunakan perintah berikut:

cd coba-project && code .

Saat ini sebetulnya project sudah bisa dijalankan dengan perintah npm run serve tapi sebelumnya kita akan menambahkan Vuetify terlebih dahulu.

Penambahan Vuetify

Untuk menambahkan Vuetify pada Vue project dapat dilakukan dengan menggunakan perintah berikut:

vue add vuetify

Kali ini kita akan menggunakan pilihan Default

Setelah penambahan vuetify berhasil, kita dapat menjalankan development server dengan perintah berikut:

npm run serve

Maka development server akan bisa diakses pada link yang muncul di terminal seperti berikut:

Berikut adalah tampilan default aplikasi web yang dibuat dengan Vue setelah menambahkan Vuetify

Membuat Layout Aplikasi

Untuk memudahkan dalam proses pembuatan layout, kita akan menggunakan wireframe template yang sudah dipersiapkan oleh Vuetify yang dapat diambil dari halaman vuetifyjs.com/en/getting-started/wireframes/.

Pada project yang sudah kita buat sebelumnya, buka file /src/App.vue lalu ganti semua konten file menjadi seperti berikut:

Membuat Navigasi

Navigasi halaman akan ditangani oleh Vue router, sehingga untuk manambahkan item baru pada router maka kita akan menambahkannya pada file /src/router/index.js sebagai berikut:

Sehingga file tersebut menjadi seperti berikut:

Selanjutnya kita akan membuat file baru, yaitu /src/views/Mahasiswa.vue dengan mengisi konten sementara sebagai berikut:

<template>
  <div class="mahasiswa">
    <h1>Mahasiswa</h1>
  </div>
</template>

Dan untuk menampilkan navigasi pada aplikasi kita akan mengedit file /src/App.vue dengan mengganti

<!-- untuk navigasi -->

Atau di antara tag <v-navigation-drawer></v-navigation-drawer>

Menjadi sebagai berikut (baris 10-33):

Masih di file yang sama yaitu /src/App.vue, kita juga harus megedit bagian script menjadi sebagai berikut (baris 51-56):

Di atas kita sudah menggunakan Vue directives, yaitu v-for. Fungi dari directives ini adalah untuk looping item dari object yang didefinisikan kemudian menampilkannya. Pada contoh di atas kita menggunakan isi dari object dengan nama navItems. Attribute to di atas berfungsi untuk melakukan navigasi antar routes yang sudah dibuat sebelumnya dengan memanfaatkan feature dari Vue router. Sehingga apabila di-klik halaman akan berpindah sesuai dengan root path yang sudah ditentukan tanpa perlu reload ulang aplikasi. Tidak seperti attribute href pada tag a yang apabila di-klik secara default akan reload halaman web untuk membuka konten baru dari link pada href attribute-nya. Sehingga perpindahan halaman dengan menggunakan router ini akan jauh lebih cepat apabila dibandingkan dengan menggunakan tag a.

Setelah perubahan di atas, maka tampilan aplikasi akan menjadi seperti berikut:

Pembuatan dan Penggunan Component

Untuk memahami konsep komponen pada Vue akan kita coba implementasi langsung dengan memodifikasi views yang suda ada. Pertama kita aka membuat file baru, yaitu /src/components/About.vue kemudian buat template sebagai berikut:

Kemudian kita modifikasi file /src/views/About.vue menjadi sebagai berikut:

Setelah melakukan perubahan di atas, tidak akan terjadi perubahan pada tampilan aplikasi. Hanya saja perbedaanya kali ini halaman about ditampilkan dengan menggunakan komponen. Komponen ini bisa digunakan ulang dari beberapa views yang berbeda dan tetap bisa dinamis dengan menentukan props yang berbeda.

`Watch`, `Methods` dan `Lifecycle Hook`

Methods pada Vue digunakan untuk mendefinisikan function yang dapat digunakan untuk melakukan suatu perintah. Function yang didefinisikan pada methods dapat diakses langsung dari component melalui attribute @click atau dapat juga dipanggil pada lifecycle seperti mounted atau created. Watch dapat digunakan untuk memantau perubahan pada ractive property dan menjalankan function tertentu berdasarka perubahan tersebut.

Untuk penjelasan lebih detail mengenai Vue lifecycle dapat dipelajari pada halaman berikut: v2.vuejs.org/v2/guide

Untuk mendemonstrasikan cara penggunaan methods dan lifecycle kita akan melakukan perubahan pada file /src/components/About.vue sebagai berikut:

Pada awalnya variable nama berisi string kosong, akan tetapi variable tersebut dimanipulasi dengan function setNama pada saat mounted. Contoh lain penggunaan methods yaitu pemanggilan function tambah yang dilakukan langsung dari attribute v-btn, sehingga apabila tombol tambah di-klik maka angka yang ditampilkan pada v-chip disebelanyapun akan bertambah, begitupun dengan tombol kurang.

Kemudian kita memantau perubahan pada variable angka dengan menggunakan watch, sehingga v-chip dengan attribute v-if="sepuluh" hanya akan tampil apabila angka sama dengan sepuluh.

Contoh `Methods`

Contoh `Watch`

Membuat Table Mahasiswa

Berikutnya kita akan mencoba menampilkan data mahasiswa yang disimpan di vuex store melalui mapGetters. Untuk itu kita akan melakukan perubahan pada file /src/store/index.js pada bagian state dan getters, sebagai berikut:

Object state.listMahasiswa di atas akan kita gunakan untuk menyimpan data mahasiswa yang kemudian data tersebut akan bisa diakses melalui getters.

Kemudian kita juga akan melakukan perubahan pada file /src/views/Mahasiswa.vue menjadi sebagai berikut:

Untuk dapat mangambil data dari vuex store di atas kita menggunakan mapGetters dengan terlebih dahulu melakukan import mapGetters dari vuex, kemudian untuk mendapatkan feature reactivity kita akan menyimpan data listMahasiswa pada Vue computed property. Dengan begini apabila data di vuex store mengalami perubahan, maka variable yang ada di computed property juga akan otomatis terupdate.

Setelah perubahan pada kedua file di atas, maka tampilan aplikasi kita akan menjadi seperti berikut:

Demo

Replit

Source Code

github.com/ahoNerd/vue-2-vuetify-example

Unknown at rule @apply scss(unknownAtRules)

ahoNerd — Thu, 24 Nov 2022 08:04:51 +0000

Cara mengatasi error Unknown at rule @apply scss(unknownAtRules) pada VSCode (Visual Studio Code).

Explanation

Error ini biasanya muncul apabila kita bekerja dengan VSCode pada saat menggunakan TailwindCSS atau UnoCSS directive @apply untuk memanggil template class dari file CSS atau SCSS.

Sebenarnya ini bukanlah error, tapi linter berusaha memberitahu kita bahwa ada rule yang tidak diketahui atau tidak dimengerti oleh SCSS preprocessor.

Solution

Ada beberapa metode untuk mengatasi masalah ini, diantaranya akan kita bahas pada postingan kali ini.

Add Custom Data for CSS Language Service

Metode berikut ini paling direkomendasikan, karena dengan ini kita memberitahu linter bahwa warning yang muncul memang untuk rule yang sengaja kita tentukan.

Ikuti langkah-langkah berikut untuk menambahkan CSS custom data:

Buat file dengan nama css-custom.json di root project dengan konten sebagai berikut:
Tambahkan object berikut pada file settings.json

Disable Linter Warning

Metode berikut ini sebenarnya tidak dianjurkan, karena dengan begini kita tidak akan diingatkan oleh linter apabila ada warning yang mungkin berguna. Dengan metode ini kita hanya perlu menambahkan object berikut pada file settings.json

Untuk CSS
```
"css.lint.unknownAtRules": "ignore"
```
Untuk SCSS
```
"scss.lint.unknownAtRules": "ignore"
```

Where to find `settings.json`

Untuk melakukan pengaturan VSCode secara terpisah atau per-project:

Buat folder dengan nama .vscode di root project
Buat file dengan nama settings.json

Untuk melakukan pengaturan VSCode secara global:

Buka global setting VSCode dengan cara
Tekan F1 atau Ctrl+Shift+P atau Cmd+Shift+P
Pilih Preferences: Open User Setting (JSON)

Reference

Untuk info lebih detail dapat dilihat di github.com/microsoft/vscode-css-languageservice

Get Absolute Position of Element

ahoNerd — Wed, 23 Nov 2022 09:59:16 +0000

Cara untuk mendapatkan posisi absolut dari suatu HTML element terhadap browser windows.

Explanation

Untuk mengetahui posisi serta ukuran lebar dan tinggi dari suatu element, kita dapat menggunakan getBoundingClientRect().

Sebagai contoh kita akan coba metode ini pada element acak sebagai berikut:

console.log(document.getElementById('aho').getBoundingClientRect());

Akan menghasilkan output kurang lebih sebagai berikut:

{
  "x": 950,
  "y": 298.78125,
  "width": 320,
  "height": 1490.390625,
  "top": 298.78125,
  "right": 1270,
  "bottom": 1789.171875,
  "left": 950
}

sehingga misalnya untuk mengetahui lebar element cukup menggunakan:

console.log(document.getElementById('aho').getBoundingClientRect().width);

CodePen

Use Case

Class C# Siap Pakai untuk Konversi Angka menjadi Terbilang

ahoNerd — Wed, 23 Nov 2022 03:05:34 +0000

Pada catatan kali ini akan kita bahas mengenai contoh class siap pakai pada C# yang memiliki fitur konversi dari angka menjadi string terbilang melalui akses index.

Class `Terbilang`

Contoh penggunaan pada program

Berikut ini contoh bagaimana mengkonsumsi class di atas dari program yang kita buat:

Pastikan namespace pada class sama dengan namespace pada program.

Output

Output berikut ini dihasilkan dengan menjalankan program di atas pada Visual Studio Comunity 2022 dengan menggunakan template Console App (.Net Framework)

Try It Yourself

onlinegdb

onlinegdb.com/RboCahEiZ.

Replit

GitHub Gist

Code di atas dapat di-clone dari gist ahoNerd di gist.github.com/ahoNerd.

Reference

learn.microsoft.com

Add Multiple Attribute to an Element using javaScript

ahoNerd — Wed, 23 Nov 2022 02:40:35 +0000

Untuk menambah beberapa attribute pada sebuah HTML element dengan menggunakan javaScript dapat menggunakan beberapa cara yang akan kita bahas berikut ini.

Function Expression

Code berikut ditulis dalam format TypeScript:

Methode #1

const setMultipleAttr = (elm: any, attributes: any) => {
  for (const key in attributes)
    elm.setAttribute(key, attributes[key])
}

Methode #2

const setMultipleAttr = (elm: any, attributes: any) => {
  Object.keys(attributes).forEach((attr) => {
    elm.setAttribute(attr, attributes[attr])
  })
}

CodePen

Reference

eveloper.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Add Multiple Inline Style to an Element using javaScript

ahoNerd — Wed, 23 Nov 2022 02:35:27 +0000

Untuk menambah beberapa inline style pada sebuah HTML element dengan menggunakan javaScript dapat menggunakan beberapa cara yang akan kita bahas berikut ini.

HTML code

Sebagai contoh pada catatan kali ini kita aka menggunakan HTML element sebegai berikut:

<div id="cobaInlineStyle">
  <span>Coba</span>
  <code>HTMLElement.style</code>
</div>

HTMLElement.style

style adalah read-only property yang mengembalikan inline style dari suatu element dalam bentuk object CSSStyleDeclaration yang berisi daftar dari semua style property untuk element tersebut.

Berikut ini daftar CSS Property yang bisa digunakan.

javaScript code

const elm = document.getElementById('cobaInlineStyle');

elm.style.backgroundColor = 'tomato';
elm.style.color = 'white';
elm.style.lineHeight = '64px';
elm.style.padding = '0 1em';
elm.style.display = 'inline-block';

Result

<div id="cobaInlineStyle" style="background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;">
  <span>Coba</span>
  <code>HTMLElement.style</code>
</div>

Browser Support

caniuse.com/mdn-api_htmlelement_style

CSSStyleDeclaration.cssText

javaScript code

const elm = document.getElementById('cobaInlineStyle');

elm.style.cssText = 'background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;';

Result

<div id="cobaInlineStyle" style="background-color: tomato; color: white; line-height: 64px; padding: 0px 1em; display: inline-block;">
  <span>Coba</span>
  <code>HTMLElement.style</code>
</div>

Browser Support

caniuse.com/mdn-api_cssstyledeclaration_csstext

Conclusion

Dapat diperhatikan bahwa kedua metode diatas menghasilkan output yang sama persis, selain itu keduanya memiliki browser support yang baik, maka kedua metode di atas dapat digunakan sesuai degan kebutuhan.

Selain mengunakan metode di atas, masih ada cara lain untuk menambah atau mengatur tampilan dari suatu HTML element, yaitu dengan cara menambahkan class yang ada. Untuk lebih jelasnya bisa dipelajari pada catatan berikut: Add and Remove Multiple Classes to an Element using javaScript

Reference

My Favourite Git Command

ahoNerd — Thu, 17 Nov 2022 18:07:34 +0000

Change git init Default Branch Name

Setelah Git versi 2.28, kita dapat menentukan nama branch default default secara global untuk setiap kali melakukan git init, yaitu dengan perintah berikut:

Global Configuration

git config --global init.defaultBranch main

Initialize New Repository

Setelah konfigurasi di atas, apabila kita melakukan inisiasi git baru, maka akan membuat branch baru dengan nama main.

git init

Output:

Initialised empty Git repository in D:/Repo/Test Project/.git/

Check Status

git status

Output:

On branch main

No commits yet

nothing to commit (create/copy files and use "git add" to track)

Rename `master` branch menjadi `main`

Untuk mengubah nama branch master menjadi main dapat dilakukan dengan cara berikut:

Pertama kita pastikan bahwa kita tengah berada di branch master
```
git checkout master
```
Output:
```
Switched to branch 'master'
```
Input perintah berikut untuk mengubah nama branch menjadi main
```
git branch -m main
```
Lalu kita pastikan perubahan nama branch sudah berhasil atau tidak
```
git branch
```
Output:
```
* main
  newfeature
```

newfeature hanya contoh nama branch lain yang ada di repo.

Commit History

Perintah dasar untuk menampilkan commit history adalah: git log. Tapi perintah ini akan menampilkan list commit dengan tampilan yang kurang intuitif dan mungkin menampilkan informasi yang tidak perlu. Berikut perintah yang bisa digunakan untuk menampilkan log dengan tampilan yang lebih mudah dibaca:

git log --pretty=format:"%s by %an at %ar" --graph --shortstat

Output:

*   Merge branch 'newfeature' by ahoNerd at 15 seconds ago
|\
| * New Feature 2 by ahoNerd at 2 minutes ago| |
| |  1 file changed, 0 insertions(+), 0 deletions(-)

| * New Feature by ahoNerd at 5 minutes ago| |
| |  1 file changed, 0 insertions(+), 0 deletions(-)

* | New Fix by ahoNerd at 4 minutes ago
| |
|    1 file changed, 0 insertions(+), 0 deletions(-)

* Initial by ahoNerd at 57 minutes ago
   1 file changed, 0 insertions(+), 0 deletions(-)

Ignore file yang sudah terlanjur di-commit

Seperti yang telah kita ketahui bahwa git dapat mengabaikan file atau direktori yang kita atur melalui file .gitignore. Tapi hal tersebut hanya berlaku untuk file yang berstatus unctracked atau belum di-commit. Nah, bagaimana jika kita ingin mengabaikan beberapa file atau folder yang sudah terlanjur di-commit? Berikut ini step-by-step-nya:

Persiapan

Pastikan semua revisi yang sedang dikerjakan di-stash atau di-commit terlebih dahulu.
Pastikan juga file .gitignore sudah berisi semua file dan atau direktori yang sesuai.

Proses clean-up

Hapus semua file dari index (tenang saja dengan perintah ini tidak akan menghapus file sebenarnya)
```
git rm -r --cached .
```
Karena semua file sudah dihapus dari index, maka kita perlu menambahkan lagi semua file ke stagging area
```
git add .
```
Lakukan commit
```
git commit -m "Clean up ignored files"
```

Credit

Photo by Gabriel Heinzer on Unsplash

Hide Scrollbars using CSS but Keep Functionality

ahoNerd — Sun, 09 Oct 2022 00:00:00 +0000

Cara untuk menyembunyikan scrollbar tapi konten tetap bisa di-scroll dengan menggunakan CSS.

Explanation

Untuk menyembunyikan scrollbar dengan CSS, sebetulnya kita dapat menggunakan:

.hidden-scrollbar {
  /* Hide vertical and horizontal scrollbars */
  overflow: hidden;
}

atau

.hidden-scrollbar {
  /* Hide vertical scrollbars */
  overflow-y: hidden;
  /* Hide horizontal scrollbars */
  overflow-x: hidden;
}

Apabila kita menggunakan metode di atas, meskipun betul dengan begitu scrollbar akan disembunyikan, akan tetapi konten juga akan menjadi tidak dapat di-scroll seperti yang diharapkan.

Hide Scrollbars But Keep its Function

/*
untuk browser berbasis webkit seperti
Chrome, Opera, Safari dan Edge versi baru
*/
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* untuk Internet Explorer dan Edge versi lama and Firefox */
.hidden-scrollbar {
  /* IE dan Edge versi lama */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
}

Add and Remove Multiple Classes to an Element using javaScript

ahoNerd — Sat, 08 Oct 2022 00:00:00 +0000

Untuk menambahkan dan menghilangkan beberapa class pada sebuah HTML element dengan menggunakan javaScript, kita cukup menggunakan metode classList.add() dan classList.remove() seperti biasa. Metode add() dan remove() di sini dapat menerima satu atau lebih parameter dalam hal ini nama class.

Add and Remove Single class

Berikut ini contoh menambahkan dan menghilangkan satu class pada HTML element:

Add Single class

Diasumsikan kita akan menambahkan class .bg-red pada element dengan id #aho

document.getElementById('aho').classList.add('bg-red');

Remove Single class

Diasumsikan kita akan menghilangkan class .bg-red dari element dengan id #aho

document.getElementById('aho').classList.remove('bg-red');

CodePen

Add and Remove Multiple classes

Berikut ini contoh menambahkan dan menghilangkan beberapa class pada HTML element:

Add Multiple classes

Diasumsikan kita akan menambahkan class .txt-red dan .bg-blue pada element dengan id #aho

document.getElementById('aho').classList.add('txt-red', 'bg-blue');

Remove Multiple classes

Diasumsikan kita akan menghilangkan class .txt-red dan .bg-blue dari element dengan id #aho

document.getElementById('aho').classList.remove('txt-red', 'bg-blue');

CodePen

Adding and Removing classes in Multiple elements

Untuk menambahkan dan menghilangkan beberapa class di beberapa HTML element kita dapat melakukannya dengan looping atau iterasi pada setiap element.

Contoh HTML code

<div id="demo">
  <div class="aho">coba 1</div>
  <div class="aho">coba 2</div>
  <div class="aho">coba 3</div>
  <div>
    <button onClick="add()">add</button>
    <button onClick="remove()">remove</button>
  </div>
</div>

Contoh CSS code

.txt-red {
  color: crimson;
}

.bg-blue {
  background-color: cornflowerblue;
}

Contoh JS code

Pada contoh berikut, kita menggunakan metode document.querySelectorAll untuk memilih semua element di DOM yang memiliki class .aho, kemudian kita menggunakan array.forEach untuk melakukan iterasi dari setiap element.

const aho = document.querySelectorAll('.aho');

function add() {
  aho.forEach((elm) => {
    elm.classList.add('txt-red', 'bg-blue');
  })
}

function remove() {
  aho.forEach((elm) => {
    elm.classList.remove('txt-red', 'bg-blue');
  })
}

Selain menggunakan array.forEach seperti pada contoh di atas, kita juga dapat menggunakan metode looping yang lainnya seperti for loop atau for...of.

Dengan Metode `for`

const aho = document.querySelectorAll('.aho');

function add() {
  for (let index = 0; index < aho.length; index++) {
    const elm = aho[index];
    elm.classList.add('txt-red', 'bg-blue');
  }
}

Dengan Metode `for...of`

const aho = document.querySelectorAll('.aho');

function add() {
  for (const elm of aho) {
    elm.classList.add('txt-red', 'bg-blue');
  }
}

CodePen

Conclusion

Dengan metode classList.add() dan classList.remove() kita dapat menambahkan atau menghilangkan satu atau lebih class. Akan tetapi metode ini akan mengasilkan error apabila parameter berupa string kosong atau string yang mengandung spasi.

DEV Community: ahoNerd

VS Code Fix Cannot validate since no PHP executable is set

Example

XAMPP

Laragon

Settings file locations

C# SQLite Database Connection

Visual Studio Template

Install System.Data.SQLite

Test Connection

Example Code

Output

Create Table and Add Data

Example Code

Read Data

Example Code

Output

Database Location

Custom Location

Reference

Creating New Console App Project in Visual Studio Code 2022

Download

Create New Project

Sample Code

Code for Console App

Code for Console App (.Net Framework)

Start Debugging

Vue 2 with Vuetify Example

Apa itu Vue.js?

Instalasi

Memeriksa installasi node.js

Instalasi Vue CLI

Pembuatan Project

Penambahan Vuetify

Membuat Layout Aplikasi

Membuat Navigasi

Pembuatan dan Penggunan Component

Watch, Methods dan Lifecycle Hook

Contoh Methods

Contoh Watch

Membuat Table Mahasiswa

Demo

Source Code

Unknown at rule @apply scss(unknownAtRules)

Explanation

Solution

Add Custom Data for CSS Language Service

Disable Linter Warning

Where to find settings.json

Reference

Get Absolute Position of Element

Explanation

CodePen

Use Case

Class C# Siap Pakai untuk Konversi Angka menjadi Terbilang

Class Terbilang

Contoh penggunaan pada program

Output

Try It Yourself

onlinegdb

Replit

GitHub Gist

Reference

Add Multiple Attribute to an Element using javaScript

Function Expression

Methode #1

Methode #2

CodePen

Reference

Add Multiple Inline Style to an Element using javaScript

HTML code

HTMLElement.style

javaScript code

Result

Browser Support

CSSStyleDeclaration.cssText

javaScript code

Result

Browser Support

Conclusion

Install `System.Data.SQLite`

Code for `Console App`

Code for `Console App (.Net Framework)`

`Watch`, `Methods` dan `Lifecycle Hook`

Contoh `Methods`

Contoh `Watch`

Where to find `settings.json`

Class `Terbilang`

Rename `master` branch menjadi `main`

Dengan Metode `for`

Dengan Metode `for...of`