Web Dev Coding Convention

Web Dev Coding Convention

Note: Term "Web Dev" di akan banyak mengacu spesifik ke development web dari sisi front-end.

Table of Contents

1. CSS Files
2. Javascript files

CSS files

Rolling Glory menggunakan CSS preprocessor Less. Setiap website pasti akan mempunyai file style.css yang merupakan hasil processing dari file .less seperti yang dijelaskan di bawah ini.

LESS files structure

File Less yang digunakan akan dibagi menjadi 5 file .less sebagai berikut sesuai dengan fungsinya.

1. references.less declares classes that used as reference in every less file whenever needed. Note : This references must be clean and should not be compiled and added to CSS.
2. variables.less declares static variables that are used throughout the site. Examples include colors, font families, and gap size.
3. utilities.less declares classes that are commonly needed, such as unstyled list and clearfix.
4. components.less is the core of this boilerplate. It declares classes for components such as forms, buttons, and tabs.
5. style.less compiles all of the previously mentioned files, as well as declares stylings specific to this web page.

JavaScript files

JavaScript style guide

Rolling Glory mengadopsi Airbnb JavaScript Style Guide untuk penggunaan dalam development dengan penyesuaian jika diperlukan karena Airbnb JavaScript Style Guide tersebut diperuntukkan untuk pengguna Babel.

Rolling Glory sedang menyiapkan linter untuk membantu dalam menyesuaikan dengan guide tersebut.

JavaScript files structure

File-file JavaScript akan dipecah menjadi beberapa file sesuai dengan kebutuhannya. Struktur di bawah ini adalah struktur dasar yang akan dimiliki setiap project:

1. utility.js akan berisikan routine-routine dasar yang siap digunakan secara langsung dan sudah sesuai dengan standard teknis Rolling Glory. File ini akan di-maintain di repo Web Base Code.
2. main.js berisikan fungsi-fungsi yang akan secara umum oleh keseluruhan website.
3. folder vendor akan berisikan file-file JavaScript dari third party plugin/library yang digunakan dan tidak diload langsung dari CDN.

Secara umum file-file JavaScript lain akan dipisah per web page yang menggunakannya atau per component/routine jika fungsinya cukup besar dan kompleks untuk dimasukkan ke dalam main.js.