Front End Knowledge

<aside> 👤 By Durahman Firmansyah Alamsyah Created at : Sunday, 09 June 2024 Last update : Sunday, 09 June 2024

</aside>

Pemahaman Bahasa Pemrograman

HTML (Hyper Text Markup Language): HTML adalah bahasa markup standar yang digunakan dalam pengembangan web. HTML digunakan untuk membuat dan menyusun bagian-bagian dari halaman web, seperti paragraf, judul, link, dan blok konten lainnya. Halaman web yang dihasilkan kemudian dapat diakses oleh browser web.
```
<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Ini adalah Judul</h1>
    <p>Ini adalah paragraf.</p>
</body>
</html>
```

CSS (Cascading Style Sheets): CSS adalah bahasa gaya yang digunakan untuk mendesain dan mempercantik tampilan halaman web. Dengan CSS, kita dapat mengontrol layout, warna, tipografi, dan aspek visual lainnya dari halaman web. CSS dapat digunakan secara terpisah dari HTML, memungkinkan pemisahan antara struktur dan desain.

/* Ini adalah komentar */
body {
    /* Ini adalah penjelasan selector, property, dan value */
    background-color: #ffffff; /* properti: background-color, nilai: #ffffff */
    font-family: Arial, sans-serif; /* properti: font-family, nilai: Arial, sans-serif */
    color: #333333; /* properti: color, nilai: #333333 */
}

/* Ini adalah class selector */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Ini adalah id selector */
#header {
    background-color: #f5f5f5;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

/* Ini adalah pseudo-class */
a:hover {
    color: #ff0000;
}

/* Ini adalah media queries */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* Ini adalah keyframes animation */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

SASS (Syntactically Awesome Style Sheets): SASS adalah preprocessor CSS yang memungkinkan penggunaan fitur yang tidak tersedia dalam CSS murni, seperti variabel, nested rules, mixins, inheritance, dan lainnya. SASS membantu dalam penulisan CSS yang lebih efisien dan mudah dibaca.

// Ini adalah variabel
$font-stack: Helvetica, sans-serif
$primary-color: #333

// Ini adalah nested rules
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

// Ini adalah mixins
@mixin transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property

.box
  @include transform(rotate(30deg))

// Ini adalah inheritance
.message
  border: 1px solid #ccc
  padding: 10px
  color: $primary-color

.success
  @extend .message
  border-color: green

.error
  @extend .message
  border-color: red

// Ini adalah control directives
@for $i from 1 through 3
  .item-#{$i}
    width: 2em * $i

// Ini adalah function
@function set-font-size($size)
  @return #{$size}px

body
  font-size: set-font-size(16)

Javascript: Javascript adalah bahasa pemrograman tingkat tinggi yang utamanya digunakan dalam pengembangan web interaktif. Javascript memungkinkan halaman web merespons aksi pengguna, seperti klik, drag dan drop, pengisian form, dan lainnya. Ini adalah satu-satunya bahasa pemrograman yang bisa berjalan di browser.

// Ini adalah fungsi dalam Javascript
function sayHello(name) {
    return "Hello, " + name;
}

// Ini adalah penggunaan fungsi
console.log(sayHello("John")); // Output: Hello, John

// Ini adalah contoh penggunaan loop
for(let i = 0; i < 5; i++) {
    console.log(i); // Output: 0, 1, 2, 3, 4
}

// Ini adalah contoh penggunaan kondisional
let age = 20;
if(age > 18) {
    console.log("You are an adult."); // Output: You are an adult.
} else {
    console.log("You are a minor.");
}

// Ini adalah contoh penggunaan array
let fruits = ["apple", "banana", "mango"];
console.log(fruits[0]); // Output: apple

// Ini adalah contoh penggunaan objek
let person = {
    name: "John",
    age: 30
};
console.log(person.name); // Output: John

// Ini adalah contoh penggunaan fungsi dalam objek
person.sayAge = function() {
    console.log("I am " + this.age + " years old.");
}
person.sayAge(); // Output: I am 30 years old.

// Ini adalah contoh penggunaan array of objects
let people = [
    {
        name: "John",
        age: 30
    },
    {
        name: "Jane",
        age: 25
    },
    {
        name: "Joe",
        age: 35
    }
];

for(let i = 0; i < people.length; i++) {
    console.log(people[i].name); // Output: John, Jane, Joe
}

// Ini adalah contoh penggunaan event
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

// Ini adalah contoh penggunaan Promise
let myPromise = new Promise(function(resolve, reject) {
    let success = true;

    if(success) {
        resolve("Success!");
    } else {
        reject("Failure!");
    }
});

myPromise
    .then((successMessage) => {
        console.log(successMessage);
    })
    .catch((failureMessage) => {
        console.log(failureMessage);
    });

Typescript: Typescript adalah superset dari Javascript yang menambahkan fitur pengetikan statis. Hal ini berarti bahwa tipe data variabel dijelaskan pada saat kompilasi, yang kemudian dapat membantu dalam deteksi kesalahan sebelum kode dijalankan. Typescript juga mendukung fitur lain seperti kelas dan interface, yang membantu dalam penulisan kode yang lebih rapi dan mudah dikelola.

// This is a sample use of data types in Typescript
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];

// This is a tuple
let x: [string, number];
x = ["hello", 10];

// This is an enum
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

// This is any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

// This is a void function in Typescript
function warnUser(): void {
    console.log("This is my warning message");
}

// This is a sample use of interface
interface SquareConfig {
    color?: string;
    width?: number;
}

// This is a sample use of class
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

// This is a sample use of inheritance
class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    constructor(name: string) { super(name); }
    bark() {
        console.log('Woof! Woof!');
    }
}

let dog = new Dog("Tommy");
dog.bark();
dog.move(10);

// This is a sample use of generic
function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("myString");
let output2 = identity<number>(100);

// This is a sample use of namespace
namespace MyMath {
    export const PI: number = 3.14;

    export function calculateCircumference(diameter: number): number {
        return diameter * PI;
    }
}

console.log(MyMath.calculateCircumference(3));

// This is a sample use of module
import { StringValidator } from "./StringValidator";

let lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
        return lettersRegexp.test(s);
    }
}

Dart: Dart adalah bahasa pemrograman yang dikembangkan oleh Google. Dart dirancang untuk pengembangan aplikasi mobile, web, dan server. Dart paling dikenal sebagai bahasa pemrograman yang digunakan dalam framework Flutter, yang juga dikembangkan oleh Google untuk pembuatan aplikasi mobile.

// Ini adalah komentar dalam Dart.
/* Ini juga adalah komentar dalam Dart. */

// Deklarasi variabel dalam Dart.
var myVariable = 'Hello World';

// Fungsi dalam Dart.
void greet(String name) {
  print('Hello, $name');
}

// Memanggil fungsi.
greet('John Doe');

// Penggunaan if-else statement dalam Dart.
if (myVariable == 'Hello World') {
  print('Variabel sama dengan Hello World');
} else {
  print('Variabel tidak sama dengan Hello World');
}

// Penggunaan for loop dalam Dart.
for (var i = 0; i < 5; i++) {
  print(i);
}

// Penggunaan while loop dalam Dart.
var count = 0;
while (count < 5) {
  print(count);
  count++;
}

// Penggunaan class dalam Dart.
class Person {
  String name;
  int age;

  // Constructor dalam Dart.
  Person(String name, int age) {
    this.name = name;
    this.age = age;
  }

  // Method dalam Dart.
  void greet() {
    print('Hello, my name is $name and I am $age years old');
  }
}

// Membuat objek dari class.
var person = Person('John Doe', 25);

// Memanggil method dari objek.
person.greet();

// Penggunaan list dalam Dart.
var myList = [1, 2, 3, 4, 5];

// Penggunaan map dalam Dart.
var myMap = {
  'name': 'John Doe',
  'age': 25
};

// Mengakses nilai dari map.
print(myMap['name']);

Syarat Penamaan File

Pemisahan kode, pemahaman dan penggunaan lazy load

File Vue.js biasanya dinamai menggunakan capitalize-case. Contoh: MyComponent.vue.
Variabel dalam Vue.js biasanya dinamai menggunakan camelCase. Contoh: myVariable.
Method dalam Vue.js juga biasanya dinamai menggunakan camelCase. Contoh: myMethod().
Dalam Vuex, nama modul biasanya menggunakan kebab-case. Contoh: my-module.js.
Untuk action, mutation, dan getter dalam Vuex, biasanya menggunakan camelCase. Contoh: getMyData(), setMyData().
Dalam Vue Router, nama route biasanya menggunakan kebab-case. Contoh: my-route.

Dalam Vue.js, lazy loading dapat diimplementasikan dengan menggunakan sintaks import() yang merupakan bagian dari spesifikasi ECMAScript yang memanggil fungsi dinamis import(). Contohnya sebagai berikut:

const MyComponent = () => import('./MyComponent.vue')