DEV Community: Azril ardian

Mengenal macam - macam Metodologi penulisan CSS - Part 2

Azril ardian — Fri, 04 Nov 2022 06:29:12 +0000

Sesuai janji, kita akan melanjutkan pembahasan tentang metodologi CSS yang belum kita selesaikan di blog sebelumnya. Selain 2 metodologi CSS yaitu OOCSS dan BEM yang telah kita bahas kemarin, berikut ini adalah metodologi - metodologi lainnya.

SUIT

Metodologi SUIT adalah pendekatan berdasarkan BEM, tetapi dengan beberapa penyesuaian dan penambahan yang dibuat oleh Nicholas Gallagher. SUIT melakukan semua yang dilakukan BEM, tetapi bagi banyak pengguna, ini dianggap sebagai peningkatan.

SUIT terdiri dari Utilities dan Components. Di dalam komponen-komponennya mungkin terdapat Modifiers, Descendants, dan States.

SUIT menggunakan kombinasi dari gaya penulisan PascalCase, camelCase dan dashes. Konvensi-konvensinya menegakkan batas pada sejumlah garis putus-putus dan garis bawah yang membingungkan yang dapat muncul dalam BEM.

Sebagai contoh, kelas BEM .search-form__text-field akan menjadi .SearchForm-textField dalam SUIT.

Kelas SUIT CSS hadir dalam lima format:

u-utilityName
ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfName

Konvensi penamaan kelas ini menyoroti pembagian antara:

Utility
Component
Descendent
Modifier

Utility
Utilities menangani struktur dan gaya posisional, dan ditulis sedemikian rupa sehingga mereka dapat diterapkan di mana saja dalam suatu komponen. Mereka diawali dengan u- dan ditulis dalam camelCase.
Contoh: .u-clearFix.

Component
Sebuah komponen dalam SUIT seperti block pada BEM. Komponen selalu ditulis dalam PascalCase. Selain komponen, semua ditulis menggunakan pascalCase, ini membuat mereka mudah untuk diidentifikasi.
Contoh: .SearchForm

Component Namespace
Komponen opsional dapat diawali dengan namespace dan nmsp
Contoh: .mine-SearchForm

Descendent
Descendent dalam SUIT menggantikan elemen dalam BEM.
Contoh: .SearchForm-heading, .SearchForm-textField , .SearchForm-submitButton

Modifier
SUIT menggunakan modifier seperti halnya BEM, namun peran mereka lebih dikontrol ketat. Modifier SUIT umumnya hanya diterapkan langsung ke komponen, bukan ke keturunan. Ini juga tidak boleh digunakan untuk mewakili perubahan state, karena SUIT memiliki konvensi penamaan khusus untuk state.
Modifier ditulis dalam camelcase dan didahului oleh dua tanda hubung --.
Contoh: .SearchForm--advanced

State
State dapat digunakan untuk mencerminkan perubahan komponen. State memungkinkan mereka untuk dibedakan secara jelas dari modifier, yang mencerminkan modifikasi penampilan dasar komponen tanpa memandang state. Jika perlu, state juga dapat diterapkan ke turunan.

State diawali dengan is- dan ditulis dalam camelCase. Mereka juga selalu ditulis sebagai kelas yang berdampingan.
Contoh: .SearchForm.is-invalid

Dokumentasi resmi SUIT: https://suitcss.github.io/

ACSS ( Atomic CSS )

ACSS adalah metodologi yang dipopulerkan oleh Yahoo. Konsep kunci ACSS adalah menciptakan kelas untuk tingkat gaya paling atomik, yaitu pasangan nilai-properti, kemudian menggunakannya dalam HTML sesuai kebutuhan.
Gagasan dalam ACSS adalah untuk memiliki kelas kepada hampir semua pasangan nilai-properti terkait yang tidak dapat digunakan kembali.

Contoh:

.mr-8 {
   margin-right: 8px;
}

.fl-r {
   float: right;
}

Seperti yang kita lihat, jumlah kelas akan bertambah signifikan dengan metode ini, imbasnya adalah HTML akan penuh oleh semua kelas tersebut. Metode ini tidak 100% efektif, tetapi dapat dibuat bermanfaat jika diinginkan.

Pro:

Styling HTML tanpa meninggalkan HTML.

Kontra:

Terlalu banyak kelas
Css dan html menjadi tidak rapi.

Dokumentasi resmi ACSS: https://acss.io/

SMACSS ( Scalable and modular architecture CSS )

“SMACSS adalah cara untuk memeriksa proses desain Anda dan sebagai cara untuk menyesuaikan kerangka kerja yang kaku ke dalam proses pemikiran yang fleksibel.
- Jonathan Snook”

Dikembangkan pada tahun 2011 oleh Jonathan Snook.
Ide kunci dalam metodologi CSS ini adalah bagaimana kita mengkategorikan aturan gaya CSS kita.

Berikut kategori – kategori beserta contohnya:

Base

Gaya bawaan yang dikhususkan pada tag HTML dasar

Contoh:

h1 {
   font-size: 32px;
}

div {
   margin: 0 auto;
}

a {
   color: blue;
}

Layout

Gaya yang digunakan untuk menentukan tata letak halaman, seperti style pada header, footer, dan sidebar.

Nama kelas diawali dengan layout-atau l-.

Contoh:

.layout-sidebar {
   width: 320px;
}

.l-comments {
   width: 640px;
}

Modules

Komponen modular dan dapat digunakan kembali.

Contoh:

.call-to-action-button {
   text-transform: uppercase;
   color: #FFF200;
}`

.search-form {
   display: inline-block;
   background-color: E1E1E1;
}

State

Digunakan untuk menyoroti elemen dengan status yang dapat diubah seperti disembunyikan atau dinonaktifkan.

Contoh:

.is-hidden {
   display: none;
}

.is-highlighted {
   color: #FF0000;
   background-color: #F4F0BB;
   border: 1px solid #CBBD15;
}

Themes

Tema digunakan untuk mengubah skema visual halaman.
Aturan gaya yang berbeda dapat diidentifikasi menggunakan awalan dalam nama kelas misalnya, l-header (untuk tata letak) atau t-header (untuk tema). Kita juga dapat mengatur berbagai jenis aturan ini dengan menempatkannya di file dan folder terpisah.

Pro:

Kode yang lebih terorganisir. Kontra:
Dibanding BEM atau SUIT, kemungkinan duplikasi class dan bobot selector lebih tinggi

Dokumentasi resmi SMACSS: http://smacss.com/

Penutup

Metodologi – metodologi diatas dapat digabungkan bersama, seperti OOCSS-SMACSS, atau OOCSS-BEM, atau BEM-SMACSS. Semua bisa disesuaikan dengan kebutuhan kita masing- masing.

Semua metodologi CSS menangani masalah skalabilitas dan pemeliharaan di CSS dengan menyediakan sistem berbasis kelas untuk memecah desain web besar menjadi banyak unit kecil, modular, dan terpisah. Setiap modul UI dapat digunakan berulang kali di seluruh desain, dan bahkan dipindahkan dari satu proyek ke proyek lain jika dua proyek berbagi metodologi CSS yang sama.

Dalam prosesnya, metodologi CSS melakukan lebih dari sekadar memperbaiki masalah skalabilitas CSS, keunggulan lainnya adalah kita menjadi lebih mudah untuk mengembangkan dan mengulang kembali desain yang ada. Mereka membuat kode front-end lebih mudah dibaca dan dipahami, menyediakan dokumentasi siap pakai, dan memudahkan banyak orang untuk berkolaborasi dalam sebuah desain.

Dan karena metodologi CSS mendorong penggunaan kembali kode yang ada, mereka menerapkan konsistensi dalam desain visual dan mengurangi ukuran halaman serta meningkatkan kecepatan rendering halaman.

Semoga semua rangkuman materi metodologi CSS pada blog kali ini dapat menambah wawasan kita mengenai betapa pentingnya struktur class CSS yang bahkan seringkali kita kesampingkan untuk diperhatikan pada saat melakukan styling pada website.

Sampai jumpa di blog selanjutnya, guys! 🖐️

Mengenal macam - macam Metodologi penulisan CSS - Part 1

Azril ardian — Wed, 02 Nov 2022 05:29:14 +0000

Di postingan blog kali ini, saya ingin membagikan rangkuman materi berisi tentang macam - macam metodologi penulisan CSS yang saya telah pelajari

Namun, sebelum lebih jauh lagi, kita ada baiknya mengenal apa arti kata metodologi itu sendiri

Apa itu Metodologi

Menurut wikipedia, Metodologi merupakan ilmu-ilmu/cara yang digunakan untuk memperoleh kebenaran menggunakan penelusuran dengan tata cara tertentu dalam menemukan kebenaran. Metodologi tersusun dari cara-cara yang terstruktur untuk memperoleh ilmu.

Wikipedia - Metodologi

Bagaimana? sudah terbayang jika kata metodologi ini kita kaitkan dengan CSS?

Untuk lebih yakin, mari kita pertegas.

CSS sangat sulit untuk dikelola dalam sistem yang besar, kompleks, dan berulang dengan cepat.
Salah satu alasannya adalah CSS tidak memiliki mekanisme pelingkupan bawaan. Segala sesuatu di CSS bersifat global. Artinya, setiap perubahan yang kita buat berpotensi menurun dan mengubah tampilan elemen yang tidak terkait.

Prepocessor CSS, seperti Sass, Less, dan Stylus membuat segalanya lebih mudah dengan menawarkan fitur yang membuat penulisan CSS lebih mudah. Tetapi ini tidak benar-benar memperbaiki masalah skalabilitasnya.

Itulah mengapa metodologi adalah solusi bagi skalabilitas dan pelingkupaan dalam CSS.

Jadi...,

Metodologi CSS adalah metode – metode terdokumentasi untuk membuat CSS dengan cara yang memungkinkan kita untuk mengembangkan, memelihara, dan menskalakan front-end sebagai satu set modul kecil dan terisolasi secara sistematis.

PENTING! Tidak ada metodologi CSS "terbaik". Masing – masing metodologi memiliki keunggulan dan kekurangannya sendiri. Pendekatan yang berbeda bekerja lebih baik untuk individu / tim / proyek yang berbeda.

1. OOCSS (Object oriented CSS)

Dikembangkan oleh Nicole Sullivan pada 2008, konsep-konsep kunci OOCSS (Object Oriented CSS) yaitu, CSS objek identifikasi, pemisahan struktur dan gaya visual, dan menghindari gaya berbasis lokasi.

OOCSS berfokus pada fleksibiltas dan modularisasi, single responsibility principle, separation of concerns, dan konsep – konsep lain dari paradigma OOP.

Dalam OOCSS, langkah pertama yang Nicole usulkan adalah mengidentifikasi objek dalam CSS.
OOCSS menganjurkan pemisahan struktur dari kulit. Metodologi ini membuat perbedaan yang jelas antara konten dan penampungnya.

Contoh:

.button - menyediakan struktur dasar tombol
.grey-button - menerapkan warna dan properti visual lainnya

Metodologi ini memisahkan kode – kode yang kemungkinan akan ditulis berulang ke dalam class terpisah, jadi ketika ada objek baru yang memiliki strukur kode yang sama, kita hanya tinggal menambahkan class-nya saja.

Contoh:

<button class="button grey-button">

Pro:

Kode styling visual yang dapat digunakan kembali (reusable)
Mengurangi duplikasi properti yang sama di berbagai aturan gaya
Kode lokasi menjadi lebih fleksibel
Pengurangan penyeleksi bersarang yang dalam

Kontra:

Tanpa cukup banyak pola visual yang berulang
Pemisahan struktur dan kode gaya visual yang keliatannya tidak perlu
Mendapatkan banyak kelas yang bisa jadi sulit dipelihara dan dikelola

Dokumentasi resmi: http://oocss.org/

2. BEM (Block, element, modifier)

Dikembangkan oleh pengembang di Yandex pada tahun 2009, konsep-konsep kunci untuk BEM (Block, Elemen, Modifier) mencakup identifikasi block, elemen, dan modifier.
Ide di balik BEM adalah untuk membedakan kelas CSS yang memenuhi peran yang berbeda. Ini dilakukan dengan memberi nama kelas CSS dengan cara yang menunjukkan peran mereka.

Contoh:

.block
.block__element
.block__element--modifier

Block adalah komponen UI modular yang independen, sedangkan elemen mengacu pada komponen dari block (gambar, judul, teks), dan modifier dapat digunakan ketika keadaan block atau elemen berubah, misalnya ketika kita ingin menambahkan kelas aktif ke item menu untuk menyorotnya, kelas aktif bertindak sebagai pengubah.

Block
Blok merupakan container atau context di mana element itu menemukan dirinya sendiri, seperti header, sidebar, footer.

Contoh: .search-form

Elemen
Elemen adalah bagian dari block. Block adalah keseluruhannya dan bagian-bagiannya adalah elemen. Elemen ditandai dengan menambahkan dua pemisah garis bawah __ dan nama elemen ke nama induknya.

Contoh: .search-form__heading, .search-form__text-field, dan .search-form__submit-button

Modifier
Modifier diterapkan ke block atau elemen untuk menandai perubahan dalam presentasinya, atau perubahan statusnya. Mereka ditandai dengan menambahkan pemisah dan nama pengubah ke block atau elemen yang ditujukan.

Dalam dokumentasi situs BEM resmi, pemisah pengubah harus berupa garis bawah tunggal _. Namun, konvensi Pedoman CSS “BEM-like” oleh Harry Roberts menggunakan dua garis --, ini lebih banyak digunakan dan dikenal daripada konvensi BEM resmi.

Contoh: .search-form--advanced

Pro:

Mudah digunakan karena setiap tag akan memiliki nama kelas dan pengurangan penyeleksi CSS yang mendalam.
Dapat menghindari penggunaan !important yang mana merupakan anti pattern pada css
Mudah dalam pengembangan
Menghindari membuat selector langsung ke elemen

Kontra:

Agar nama-nama tersebut terlihat waras, BEM menyarankan untuk memblokir elemen yang bersarang dangkal
Untuk html bersarang yang lebih dari 2-3 level akan membuat kita mungkin sulit untuk menentukan nama
Konvensi penamaan tidak intuitif bagi pengembang yang tidak berpengalaman

Perbandingan BEM dengan CSS standar

BEM:
• Memberi kita lebih banyak kode modular. Kita dapat mengambil bagian apapun secara terpisah.
• Memungkinkan siapa pun menulis CSS. Kita tidak perlu mewaspadai gaya penulisan dan penggantian kustom. Dalam tim besar, ini merupakan hal yang bagus.
• Menghapus masalah kekhususan apapun.
• Secara signifikan lebih bertele-tele.

CSS standar (yang bergantung pada penggunaan penyeleksi keturunan):
• Berarti gaya kita tergantung pada konteks.
• Membutuhkan kesadaran kaskade. Kode di satu tempat dapat mempengaruhi kode di tempat lain. Dalam tim kecil ini bukan masalah, namun pada tim besar akan menjadi masalah yang serius.
• Dapat menderita masalah kekhususan yang mungkin sulit bagi pengembang pemula untuk melakukan debug.
• Secara signifikan lebih ketat.

Pertimbangkan menggunakan BEM jika kita tidak memiliki arsitektur berorientasi komponen, jika kita memiliki kode lawas yang didukung, atau jika kita merasa sangat sulit melakukan segala sesuatu secara manual tanpa alat (sass, stylus, dll)

Dokumentasi resmi : https://en.bem.info/methodology/

Penutup

Nah, agar blog ini tidak terlalu panjang, kita bagi menjadi dua bagian, di post berikutnya kita akan melanjutkan lagi pembahasan mengenai metodologi ini. Stay tune, guys!

Istilah Umum dalam Pemrograman Komputer

Azril ardian — Mon, 31 Oct 2022 02:53:06 +0000

Programmer adalah seseorang yang memiliki kemampuan menulis dan merancang kode – kode program dengan menggunakan bahasa pemrograman tertentu.
Developer adalah seseorang yang bertugas untuk membangun dan merancang sebuah sistem, mengimplementasikan dan mengembangkan sistem tersebut dimasa yang akan datang.
Enginner adalah seseorang yang bertugas untuk menjaga dan merawat sistem.
Server adalah perangkat yang melayani permintaan data atau kebutuhan aplikasi di sisi klien.
Browser adalah perangkat lunak yang berfungsi untuk menerima dan menyajikan sumber informasi di Internet
Cookies adalah data jejak autentikasi yang tersimpan di dalam memori aplikasi browser seperti, username, password, email, user location, dll.
Cache adalah data jejak pengguna yang tersimpan di dalam memori aplikasi atau browser, seperti kunjungan ke situs, tautan, dll.
Database merupakan kumpulan data yang disimpan di dalam komputer secara sistematik sehingga kelak dapat dengan mudah digunakan kembali.
Data merupakan fakta yang mewakili suatu obyek seperti manusia, hewan, peristiwa, konsep, keadaan dan sebagainya, yang dapat dicatat dan mempunyai arti yang implisit
DBMS ( Database Management System ) adalah software atau perangkat lunak untuk menjalankan dan mengelola database, contoh: MySQL, PosgreSQL, MongoDB, SQL Sever, Oracle, dll.
HTTP adalah protokol yang berguna untuk komunikasi antara sistem yang berbeda.
HTTP Header adalah informasi tambahan yang bisa dikirim oleh client atau server.
Protokol adalah sistem peraturan yang memungkinkan terjadinya hubungan, komunikasi, dan perpindahan data antara dua komputer atau lebih.
Front-end Developer adalah programmer yang bertugas membuat tampilan yang meliputi layout, feedback, dll dari sebuah website, sehingga pengguna dapat melihat dan berinteraksi dengan website tersebut secara langsung.
Back-end Developer adalah programmer yang bertugas secara umum pada bagian server, aplikasi, database, dll. Kode yang dituliskan oleh back-end developer inilah yang menjembatani informasi dari database ke browser.
Fullstack Developer adalah programmer yang mampu bekerja sebagai Front-end dan Back-end sekaligus.
Web Statis adalah website di mana informasi yang terkandung di dalamnya tidak bisa di-update melalui aplikasi website tersebut melainkan harus merubah script yang ada di dalamnya.
Web Dinamis adalah website di mana informasi yang terkandung di dalamnya dapat di-update langsung di websitenya, tanpa mengubah script yang ada di dalam website.
Debug adalah proses mencari, menemukan dan mengatasi masalah yang terdapat dari sebuah program yang dapat mengganggu kelancaran penggunaan program tersebut dari berbagai sisi.
Bug adalah error atau kesalahan yang terdapat dalam sebuah program aplikasi sehingga mengganggu kelancaran penggunaan aplikasi.
Syntax yaitu tata bahasa dalam sebuah bahasa pemrograman.
Method / Function adalah kode blok yang dapat digunakan kembali dalam proses tertentu sesuai kebutuhan.
API ( Aplication Programming Interface ) adalah sekumpulan fungsi, sub routine, protokol komunikasi, atau tools untuk membuat perangkat lunak.
REST API ( Representasional State Transfer ) adalah gaya arsitektural perangkat lunak yang didalamnya mendefinisikan aturan – aturan untuk membuat web service.
Web Service merupakan aplikasi yang didesain untuk mendukung interkoneksi & interaksi antar aplikasi berbasis web yang terhubung melalui jaringan komputer.
JSON ( Javascript Object Notation ) adalah file format standar yang menggunakan tulisan yang dapat dibaca oleh manusia sebagai pertukaran data, yang didalamnya berisi pasangan antara key dan value.
URL ( Uniform Resource Locator ) adalah sebuah alamat untuk mengakses sumber daya / resource.
CLI ( Command Line Interface ) adalah antarmuka berbasis teks yang digunakan untuk mengoperasikan perangkat lunak dan sistem operasi dengan menggunakan perintah berupa teks.
VCS ( Version control system ) adalah sebuah sistem yang dapat mengelola setiap perubahan yang dilakukan dari waktu ke waktu.
Hosting adalah penyewaan tempat untuk menampung semua data – data yang diperlukan oleh website sehingga dapat diakses di internet.
Domain adalah nama unik yang digunakan untuk mengidentifikasi alamat ( ip address ) server computer, seperti web server atau email server
Web Workers adalah script javascript yang dapat berjalan di belakang layar sehingga tidak mengganggu kinerja dari halaman yang sedang dibuka.
SQL ( Structured query Language ) adalah bahasa pemrograman yang secara khusus digunakan untuk mengakses suatu data / basis data.
Generasi Bahasa Pemrograman :
- Bahasa mesin ( kode biner )
- Bahasa Assembly ( kode kode mnemonic )
- Procedural Programming
- GL ( Structured Query Language )
- OOP ( Object Oriented Programming )
AJAX ( Asynchronous Javascript and XML ) adalah suatu tehnik pemrograman aplikasi berbasis web untuk menciptakan aplikasi web yang interaktif.
Paradigma adalah cara pandang untuk melihat suatu persoalan.
Paradigma Pemrograman adalah gaya atau cara menulis program. Termasuk pendekatan – pendekatan untuk menyelesaikan persoalan dalam program.
Functional Programming adalah suatu paradigma pemrograman yang dimana suatu program komputer dijalankan dengan cara mengevaluasi ekspresi yang terdapat pada program komputer itu sendiri.
Algoritma adalah urutan langkah – langkah logis yang disusun secara sistematis untuk menyelesaikan suatu masalah.
Pseudocode / kode semu adalah deskripsi singkat atas algoritma pemrograman komputer menggunakan konveksi struktural dalam bahasa pemrograman yang dibuat agar lebih dapat dibaca manusia, bukan mesin.
Flowchart adalah bagan yang menunjukan diagram alir suatu program yang menampilkan langkah – langkah dalam bentuk simbol grafis dan urutannya dihubungkan dengan tanda panah.
Dynamic Typing yaitu tidak perlu mendeklrasasikan tipe data sebuah variabel sebelum menggunakannya. Akibatnya, pada saat program dieksekusi, sebuah variabel bisa merujuk pada tipe data string pada satu waktu, dan tipe data numerik pada waktu lain.
Static Typing yaitu perlu mendeklarasikan tipe data sebuah variabel sebelum menggunakannya. Jadi, selama program berjalan variabel tersebut hanya merujuk pada tipe data yang telah ditentukan saja.
First Class Citizen Function adalah perlakuan special terhadap function.
Higher Order Function adalah fungsi yang minimal memiliki satu fungsi didalam parameternya, atau mengembalikan fungsi lain.
Currying adalah tehnik mengubah fungsi dengan multiple parameter / argumen menjadi pecahan banyak fungsi. Tiap fungsi harus mengambil setiap parameter yang ada.
Immutable adalah tipe data pada Javascript yang tidak dapat diubah.
Muttable adalah tipe data pada Javascript yang dapat diubah.
Web Scrapping adalah proses pengambilan data dari sebuah website.

List post ini akan terus di update ya, stay tune!

Mengenal lebih lanjut HTML dan Semantic HTML

Azril ardian — Fri, 28 Oct 2022 06:59:09 +0000

Pengertian

HTML

HTML adalah singkatan dari Hypertext Markup Language.
HTML adalah bahasa yang digunakan untuk berkomunikasi dengan web browser dengan memberi instruksi untuk menampilkan tampilan website sesuai struktur yang telah dibuat.
HTML merupakan standar internet yang didefinisikan dan dikendalikan oleh World Wide Web Consortium ( W3C )
HTML adalah format pengembangan dari SGML ( Standar Generalized Markup Language ) yang digunakan sudah sejak dulu untuk memformat dokumen agar bersifat portabel.
HTML tidak case sensitive, artinya penulisan tag dalam HTML dapat ditulis dengan menggunakan huruf besar dan kecil.
HTML dibuat oleh seorang ilmuwan fisika dan Tim Berners Lee pada lembaga penelitian CERN ( European Organization For Nuclear Research ) yang ada di Swiss.
HTML berfungsi untuk membuat kerangka dari sebuah website.
Tim Berners Lee mengeluarkan versi HTML pertama pada tahun 1991.
Adanya web browser bertujuan untuk memudahkan pengguna saat membuka dokumen yang berformat HTML.

Semantic HTML

Semantic HTML adalah HTML yang mengenalkan makna kepada web daripada hanya sekedar menampilkan UInya saja.

Manfaat dari menulis tag HTML menggunakan semantic sebenarnya hanya agar mudah dalam hal komunikasi. Dengan tag semantic yang ditambahkan ke dalam dokumen web, maka akan memberikan informasi ke dalam dokumen tersebut. Tag semantic memperjelas makna dan konten dari sebuah halaman kepada browser.

Juga manfaat dari menulis semantic yaitu agar dapat menggunakan tag sesuai dengan fungsinya.

Struktur

Struktur HTML terdiri dari 3 konten, yaitu : Tag, element, dan attribute.

Tag HTML

Tag adalah suatu penanda untuk menandai element - element dari suatu dokumen HTML.

Fungsi tag adalah untuk memberikan instruksi atau memberitahukan kepada browser bagaimana suatu objek akan ditampilkan.

Contoh: <p>,<a>, <body>, <head>, dan sebagainya.

Elemen HTML

Pengertian elemen adalah rangkaian dari tag pembuka, konten, dan tag penutup.

Atribut HTML

Fungsi atribut adalah untuk memberikan informasi tambahan pada sebuah tag.

Ada 2 jenis atribut, yaitu atribut global, atribut khusus, dan atribut event.

Atribut global adalah atribut yang bisa ditambahkan pada semua elemen HTML.

Contoh: class dan id

Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu

Contoh: src dan href

Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini biasanya banyak digunakan pada pemrograman Javascript.

Contoh: onerror dan onload

Pengembangan

HTML Versi 1.0

Merupakan pionir, wajar jika banyak kekurangan. Fitur yang dimiliki:

Heading
Paragraf
Hypertext
List
Cetak tebal dan miring pada text
Peletakan gambar

HTML Versi 2.0

Merupakan pionir web interaktif.

Pengembangan versi sebelumnya, dengan penambahan fitur:

Peletakan form

HTML Versi 3.0

Pengembangan versi sebelumnya, dengan penambahan fitur:

Figure, pengembangan dari image untuk meletakkan gambar dan tabel.

HTML Versi 3.2

Pengembangan versi sebelumnya, dengan penambahan fitur:

Kemampuan untuk meletakkan teks di-sekeliling gambar
Tabel
Frame
Stylesheet
Kemampuan untuk meletakkan script diluar HTML, seperti javascipt dan VBscript.

HTML Versi 4

Terdapat banyak perubahan dan pengembangan dari versi sebelumnya, seperti:

Tabel
Link
Image
Text
Meta
Imagemaps
Form
Dll

HTML Versi 4.01

Perbaikan kesalahan – kesalahan kecil dari versi sebelumnya.

Versi ini juga menjadi standarisasi untuk elemen dan atribut dari script XTML 1.0

HTML Versi 5

Merupakan sebuah prosedur pembuatan tampilan web yang menggabungkan HTML dan CSS dengan Javascript.

Fitur yang dimiliki:

Cleaner code, kode yang terlihat lebih sederhana karena sebagian kode sudah termasuk kedalam sintaks HTML5
Greater Consistency, HTML5 telah melakukan banyak penambahan sintaks yang dibuat dalam struktur lebih baik dan sederhana daripada sintaks – sintaks sebelumnya.
Improved Semantics, berbagai elemen kode di dalam HTML5 telah distandarisasi, yang mana nilai semantic dari sebuah web dapat lebih ditingkatkan.
Improved Accessibility, teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, jadi developer dapat membangun pemahaman yang lebih detil mengenai halaman web.
Client Side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
Geolocation, HTML5 mempunyai API yang terintegrasi dengan geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
Offline Application Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
Smarter Forms, terdapat semacam regular expression ( regex ) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data, dan interaksi dengan elemen lain.
Sharper Focus on Web Application Requirments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis, dan masih banyak lagi.

Menulis kode Javascript yang bersih – Style Guide, Code convention, dan ESLint

Azril ardian — Mon, 23 Aug 2021 08:52:56 +0000

Javascript merupakan bahasa pemrograman yang terbilang cukup mudah untuk dipelajari, mulai dari penulisan sintaks, sifat dinamisnya, adannya fitur automatic semicolon insertion, dan masih banyak lagi. Namun, terkadang kemudahan ini yang justru membuat kita sulit untuk menjaga konsistensi dari kode – kode program yang kita buat.

Memang kenapa menjaga konsistensi kode itu penting ?

Bagi seorang programmer, menulis kode yang konsisten akan memudahkan kita dalam proses debugging dan dapat meminimalisir adanya bug. Selain itu, kode yang konsisten juga akan sangat membantu kita ketika bekerja secara tim, karena selain akan terlihat lebih rapi, kode dapat dengan mudah dibaca oleh anggota tim lainnya.

Oleh sebab itu, sudah seharusnya bagi kita seorang developer untuk mengetahui bagaimana penulisan kode yang baik dan benar dan sekaligus secara konsisten menjaga setiap kode program yang kita kembangkan.

Pada lanjutan blog kali ini, saya ingin berbagi ringkasan ilmu dan pengalaman saya tentang apa saja hal – hal yang dapat kita lakukan sebagai web developer untuk meningkatkan kualitas kode yang kita buat dan menjaganya agar tetap konsisten.

Cus...

1. Style Guide

Salah satu cara yang dapat kita gunakan untuk menjaga konsistensi kode adalah dengan mengetahui dan menerapkan style-guide.
Style Guide merupakan kumpulan peraturan mengenai bagaimana cara penulisan kode yang baik bagi developer secara individu maupun tim. Dalam style-guide tertulis secara lengkap aturan yang harus diikuti oleh setiap developer, seperti penamaan variabel, indentasi, penggunaan double-quotes atau single-quotes, semicolon, dan masih banyak lagi.

2. Code Convention

Ketika kita bekerja dengan tim, penting untuk menentukan satu gaya penulisan yang akan diadaptasi agar kode yang dituliskan menjadi teratur dan pengembangan produk dapat terhindar dari berbagai macam bug.

Namun kita tahu bahwa gaya pada setiap individu berbeda, inilah yang menjadi tantangan dalam tim untuk menyepakati gaya mana yang akan diterapkan. Ini pun terjadi pada perusahaan besar.

Banyak perusahaan membuat style guide dan menyepakatinya sebagai pedoman para engineer-nya dalam menuliskan kode.

Style guide yang sudah disepakati dan direkomendasikan oleh banyak developer itulah yang disebut dengan Code Convention. Di JavaScript sendiri, terdapat tiga style guide terkenal yang direkomendasikan untuk diikuti.

Dokumentasi dari setiap style-guide diatas sudah cukup jelas untuk dibaca dan terapkan.

Tidak ada yang mengharuskan kita untuk memahami semuanya, jadi pilihlah salah satu yang sekiranya cocok saja ya.

3. ESLint

ESLint adalah tools yang dapat membantu kita dalam mengikuti gaya penulisan.

ESLint tidak memaksa kita untuk menggunakan salah satu gaya penulisan. Kita dapat menetapkan aturan-aturan secara manual atau memilih gaya penulisan yang ada secara mandiri. ESLint memiliki konfigurasi yang sangat fleksibel serta banyak plugin penunjang agar dapat memenuhi kebutuhan kita secara maksimal.

Keunggulan lainnya dari ESLint adalah ia dapat diintegrasikan dengan Text Editor/IDE popular, seperti VSCode, Atom, Bracket, atau yang lainnya.

Dengan mengaktifkan fitur integrasi, penggunaan ESLint akan lebih powerful dan seamless. Sehingga kita dapat mencari dan memperbaiki kesalahan kode yang kita tuliskan dengan cepat.

Pentutup

Dengan berbekal pengetahuan diatas, seharusnya kita sudah tau bagaimana cara menjaga konsistensi dan meningkatkan kualitas kode yang kita buat. Tentu catatan saya diatas masih terbilang sangat minim, oleh karena itu cobalah untuk mencari tahu lebih lanjut lagi mengenai materi – materi diatas agar ilmu yang di dapat semakin luas.

Ini adalah bagian dari lanjutan blog Menulis kode Javascript yang bersih – Variabel. Selanjutnya, saya akan berbagi catatan mengenai cara menginstal dan mengintegrasikan ESLint dalam proyek yang kita buat, Menulis kode Javascript yang bersih – Install dan Integrasi ESLint.

Stay tune, teams.

Menulis kode Javascript yang bersih - Variabel

Azril ardian — Wed, 11 Aug 2021 05:42:03 +0000

“Membuat kode program itu mudah, yang sulit itu membuatnya dapat dibaca dan dikembangkan”. Saya lupa darimana kalimat diatas saya dengar tapi saya rasa kalimat tersebut telah menampar diri saya cukup keras. qqoosjflp.

Setelah berlalu lalang untuk mencari ~~kitab suci~~ tahu bagaimana cara membuat program yang tidak hanya dapat berjalan lancar, tetapi juga dapat dengan mudah dibaca dan dikembangan, akhirnya saya menemukan sebagian kecil ? faktor dari apa saja yang dapat meningkatkan kualitas kode program yang saya buat, terutama dalam bahasa pemrograman yang saya gunakan sehari – hari, Javascript.

Izinkan blog pertama ini saya mulai dengan membagikan pengetahuan saya tersebut, yaitu tentang bagaimana cara kita meningkatkan kualitas kode program untuk dapat dengan mudah dibaca dan dikembangkan, khususnya pada bahasa pemrograman Javascript.

Agar blog ini tidak terlalu panjang, saya akan membaginya menjadi beberapa bagian, dan ini merupakan bagian pertama : Menulis kode Javascript yang bersih - Variabel

1. Jelas

Walaupun memberi nama variabel itu cukup memakan waktu, percayalah itu akan memudahkan kita di masa yang akan datang 😊

BAD

let h; // hours

GOOD

let hours;

Jangan ragu – ragu membuat nama variabel yang panjang, karena penamaan nama variabel yang jelas akan sangat membantu kita untuk mengerti kode program di kemudian hari nanti.

2. Mudah Diucapkan

Usahakan juga menggunakan nama variabel yang mudah untuk diucap.

BAD

let yyyymmdd = moment().format('YYYY/MM/DD');

GOOD

let currentDate = moment().format('YYYY/MM/DD');

Bayangin kalau nama variabel kita yyyymmdd, terus ada anggota tim nanyain variabel, jadi kerepotan sendiri kan nyebutnya ?

3. Hindari God Number

Angka yang hanya dimengerti tuhan. Waduh gimana tuh.

Tenang itu cuman sanggahan para programmer buat angka yang kurang jelas dari mana asal usulnya.

BAD

for (let I = 0; i <= 60; i++) {
    // do something
}

GOOD

let minutesInHours = 60;
for (let i = 0; i <= minutesInHours; i++) {
    // do something
}

4. Ekplisit (Avoid Mental Mapping)

Hindari menerjemahkan kata menjadi kata lain karena alasan kata tersebut sudah umum digunakan. Biasanya ini masih sering terjadi ketika berurusan dengan perulangan.

BAD

const fruits = ['Strawberry', 'Apple', 'Orange', 'Watermelon'];
fruits.map((e) => {
    doSomeStuff();
});

GOOD

const fruits = ['Strawberry', 'Apple', 'Orange', 'Watermelon'];
fruits.map((fruit) => {
    doSomeStuff();
});

5. Hindari penambahan kata yang tidak perlu

Hindari penamaan kata yang konteksnya sudah jelas.
Ini sering terjadi ketika memberikan nama pada properti class atau object.

BAD

const Car = {
    carVendor: 'Honda',
    carModel: 'Jazz',
    carColor: 'white',
};

const paintCar = (car) => {
    car.carColor = 'Blue';
};

GOOD

const Car = {
    vendor: 'Honda',
    model: 'Jazz',
    color: 'white',
};

const paintCar = (car) => {
    car.color = 'Blue';
};

6. Gunakan CAPITALIZE untuk penamaan variabel global berupa `const`

Ini akan membantu kita untuk dengan cepat membedakan mana tipe data yang berupa konstan ( tidak berubah ) dan yang hidup ( berubah )

BAD

let baseUrl = 'https://randomapi/';

GOOD

let BASE_URL = 'https://randomapi/';

7. Gunakan tipe data `const` ketika nilai tidak akan pernah berubah

Selain untuk memaksimalkan tipe data yang ada di Javascript, ini juga berguna untuk mempermudah kita ketika membaca kembali kode program karena hanya dengan melihat sekilas saja kita bisa membedakan mana yang merupakan nilai tetap dan yang bukan.

BAD

let BASE_URL = 'https://randomapi/';

GOOD

const BASE_URL = 'https://randomapi/';

8. Gunakan sanggahan yang tepat untuk nilai boolean

Terkadang sangat membingungkan ketika terdapat nilai boolean pada perulangan atau pengkondisian, mungkin salah satu faktornya karena kita tidak secara tepat memberikan nama pada variabel boolean tersebut.

Gunakan sanggahan is atau has untuk memaksimalkan penulisan variabel bertipe boolean

BAD

if (vehicle) {
    // do something
}

GOOD

if (isVehicle) {
    // do something
}

Penutup

Itu tadi sedikit catatan saya mengenai bagaimana cara kita untuk dapat meningkatkan kualitas kode yang kita buat, khususnya pada variabel di Javascript. Semoga bisa bermanfaat.

Untuk catatan selanjutnya, will be added soon ya.

DEV Community: Azril ardian

Mengenal macam - macam Metodologi penulisan CSS - Part 2

SUIT

ACSS ( Atomic CSS )

SMACSS ( Scalable and modular architecture CSS )

Base

Layout

Modules

State

Themes

Penutup

Mengenal macam - macam Metodologi penulisan CSS - Part 1

Apa itu Metodologi

1. OOCSS (Object oriented CSS)

2. BEM (Block, element, modifier)

Perbandingan BEM dengan CSS standar

Penutup

Istilah Umum dalam Pemrograman Komputer

Mengenal lebih lanjut HTML dan Semantic HTML

Pengertian

HTML

Semantic HTML

Struktur

Tag HTML

Elemen HTML

Atribut HTML

Pengembangan

Menulis kode Javascript yang bersih – Style Guide, Code convention, dan ESLint

1. Style Guide

2. Code Convention

3. ESLint

Pentutup

Menulis kode Javascript yang bersih - Variabel

1. Jelas

2. Mudah Diucapkan

3. Hindari God Number

4. Ekplisit (Avoid Mental Mapping)

5. Hindari penambahan kata yang tidak perlu

6. Gunakan CAPITALIZE untuk penamaan variabel global berupa const

7. Gunakan tipe data const ketika nilai tidak akan pernah berubah

8. Gunakan sanggahan yang tepat untuk nilai boolean

Penutup

6. Gunakan CAPITALIZE untuk penamaan variabel global berupa `const`

7. Gunakan tipe data `const` ketika nilai tidak akan pernah berubah