DEV Community: ChrysillaM

8 Things You Must Do in CSS

ChrysillaM — Tue, 03 Aug 2021 10:14:12 +0000

What is Clean Code?

This term might have different meaning for developers. Although there are several best practices you can follow but there is no exact definition for clean code.

But for what I have learned and read, this is what a clean code is,

Clean code is code that is easy to understand, straightforward and consistent, therefore it would be reusable and refactorable.

This is important because as a developer, most of the time we will collaborate with other developers so we need to make sure that our code can be understood easily by everyone in team.
Now, let's take a look on what are the things we must do to write clean code in CSS.

1. Write Meaningful and Self Descriptive Name

You should use meaningful and self descriptive names. There are several naming conventions or methodologies that you can follow, such as BEM, OOCSS, SMACSS, Atomic CSS and many more.

2. Prefer CSS Preprocessor

By using CSS Preprocessor, it enables you to use things like variables, nested rules, inline imports, prefix, and more.
There are several CSS preprocessor, you can choose such as SASS, LESS, PostCSS etc.

CSS preprocessor is very handy when we are working with team and when our app grows bigger, and by combining with naming convention of your choice it can also help us to avoid repetition in our CSS.

3. Write Modular CSS

You should split your CSS files into modules for easier maintenance. If you are using SASS, you can follow the 7-1 pattern for the architecture.

4. Use Shorthand properties

Write your CSS in a simpler way using CSS shorthands, you can use shorthands for border, margin, padding, background, font etc.

For example, this is how we create border in CSS without shorthand properties

.border {
  border-width: 1px;
  border-style: solid;
  border-color: #aeaeae;
}

with shorthand, we can refactor into this

.border {
  border: 1px solid #aeaeae;
}

5. Write Flexible CSS Selectors

When writing CSS selectors, don’t make it overly specific, otherwise it would be hard to overwrite. You should maintain low specificity in your selectors.

You can use element selectors (h1, h2, p) to write styling for your project's basic typography.
Related to naming, plain css names are great for defining class with low specificity that intended for reusability. For example: .container, .shadow-md, .shadow-lg.

6. Avoid `!important`

It has the highest specificity of all CSS selectors, and if you want to override, you need another !important and another !important and another. This would make your CSS hard to maintain.
To avoid this, in any circumstances, please please avoid using !important as much as you can.

7. Follow CSS Styleguide

Aside from naming convention, there is CSS styleguide that could help you create maintainable CSS. The most famous one is Airbnb styleguide. It is recommended to combine their style guide with BEM or OOCSS.

8. Use Code Formatter Tool

You can use a code formatter tool called Prettier to help you auto format your code based on your team's preference. You can also integrate with linter, such as ESlint for bugs prevention.

Key Takeaways

Consistent on what you and your team has decided. And just like any other programming language, keep your code DRY (Don't Repeat Yourself) and KISS (Keep It Simple Stupid).

Reference

Thanks for reading!
If you want to know more on Javascript clean code, you can head over to this article

Would really appreciate if you could share your thoughts and feedback in the comment ✨

Writing Clean Javascript Code for Beginners

ChrysillaM — Tue, 03 Aug 2021 10:13:38 +0000

What is Clean Code?

This term might have different meaning for developers. Although there are several best practices you can follow but there is no exact definition for clean code.

But for what I have learned and read, this is what a clean code is,

Clean code is code that is easy to understand, straightforward and consistent, therefore it would be reusable and refactorable.

This is important because as a developer, most of the time we will collaborate with other developers so we need to make sure that our code can be understood easily by everyone in team.

Now, let's take a look on what are the things we must do to write clean code in Javascript by writing examples code related to a Restaurant application.

1. Variables

Use meaningful and self descriptive names.

⛔️

let rn = 'Bambang Restaurant';

✅

let restaurantName = 'Bambang Restaurant';

Usually we use camelCase for variables and functions, and PascalCase for class. Sometimes you can also find variables in UPPERCASE, which means the variable is a constant.

⛔️

let IsMENUAvAiLaBle = true;

✅

let isMenuAvailable = true;

2. Function

Just like variables, function should have self descriptive name.

⛔️

function addToList(list, menu) {
  // ...
}
addToList('Indonesian', 'Nasi Goreng');

✅

function addMenuToList(menu, list) {
  // ...
}
addMenuToList('Nasi Goreng', 'Indonesian');

Ideally, function should only have two or fewer parameters. If you have more than two, you should consider using object.

⛔️

function createMenu(title, description, price, isAvailable) {
  // ...
}
createMenu('Rendang', 'Most delicious dish in the world', 50000, true);

✅

function createMenu({title, description, price, isAvailable}) {
  // ...
}
createMenu({
  title: 'Rendang',
  description: 'Most delicious dish in the world',
  price: 50000,
  isAvailable: true
});

Function should only do one thing.

⛔️

function advertiseMenus(menus) {
  menus.forEach(menu => {
    const menuList = data.find(menu);
    if(menuList.isOpen()){
      advertise(menu);
    }
  })
}

✅

function advertiseAvailableMenus(menus) {
  menus.filter(isAvailableMenu).forEach(advertise);
}

function isAvailableMenu(menu) {
  const menuList = data.find(menu);
  return menuList.isOpen();
}

Set default object with Object.assign().

⛔️

const restaurantSettings = {
  name: 'Bambang Restaurant',
  details: null,
  category: ['Fine Dining']
}

function createRestaurant(settings) {
  settings.name = settings.name || 'Lorem Ipsum Restaurant';
  settings.details = settings.details || 'Lorem ipsum dolor sit amet.'
  settings.category = settings.category || ['Casual Dining']
  settings.isOpen = settings.isOpen || false
}

createRestaurant(restaurantSettings);

✅

const restaurantSettings = {
  name: 'Bambang Restaurant',
  details: 'All you can eat and drink',
  category: ['Fine Dining']
}

function createRestaurant(settings) {
  let finalSettings = Object.assign({
    name: 'Lorem Ipsum Restaurant',
    details: 'Lorem ipsum dolor sit amet.',
    category: ['Casual Dining']
    isOpen: false
  }, settings);

  return finalSettings;
}

createRestaurant(restaurantSettings);

3. Conditional

Encapsulate conditionals.

⛔️

if (menu.discountPrice && paymentMethod.isAvailable) {
  // ...
}

✅

function shouldShowPromoRibbon(menu, paymentMethod) {
  return menu.discountPrice && paymentMethod.isAvailable;
}

if (shouldShowPromoRibbon(menuInstance, paymentMethodInstance)) {
  // ...
}

Avoid negative conditionals.

⛔️

function isRestaurantNotOpen(restaurant) {
  // ...
}

if(!isRestaurantNotOpen(restaurant)) {
  // ...
}

✅

function isRestaurantOpen(restaurant) {
  // ...
}

if(isRestaurantOpen(restaurant)) {
  // ...
}

Avoid conditional whenever possible. Although this sounds very difficult, you should prefer polymorphism and inheritance over conditional.

⛔️

class Restaurant {
  // ...
  getStandardOperationTime() {
    switch (this.type) {
      case 'Cafe':
        return this.getStandardOperationTime('Cafe');
      case 'FastFood':
        return this.getStandardOperationTime('FastFood');
      case 'Bar':
        return this.getStandardOperationTime('Bar');
    }
  }
}

✅

class Restaurant {
  // ...
}

class Cafe extends Restaurant {
  // ...
  getStandardOperationTime() {
    return this.standardOperationTime;
  }
}

class FastFood extends Restaurant {
  // ...
  getStandardOperationTime() {
    return this.standardOperationTime;
  }
}

class Bar extends Restaurant {
  // ...
  getStandardOperationTime() {
    return this.standardOperationTime;
  }
}

4. Classes

Prefer ES6 classes over ES5 plain function.

⛔️

const Restaurant = function(name) {
  if (!(this instanceof Restaurant)) {
    throw new Error("Instantiate Restaurant with `new` keyword");
  }
  this.name = name;
};

Restaurant.prototype.getSize = function getOperationTime() {
  // ...
};

const Cafe = function(name, location) {
  if (!(this instanceof Cafe)) {
    throw new Error("Instantiate Cafe with `new` keyword");
  }
  Restaurant.call(this, name);
  this.location = location;
};

Cafe.prototype = Object.create(Restaurant.prototype);
Cafe.prototype.constructor = Cafe;
Cafe.prototype.popularDishes = function popularDishes() { 
  // ...
};

✅

class Restaurant {

  constructor(name) {
    this.name = name;
  }

  getOperationTime() {
    // ...
  }
}

class Cafe extends Restaurant {

  constructor(name, location) {
    super(name);
    this.location = location;
  }

  getPopularDishes() {
    // ...
  }
}

Use method chaining.

⛔️

class Restaurant {

  constructor(name) {
    this.name = name;
  }

  setLocation(location) {
    this.location = location;
  }

  setCategory(category) {
    this.category = category;
  }

  save() {
    console.log(this.name, this.location, this.category);
  }
}

const restaurant = new Restaurant('FastFood');

product.setName('Fast Fried Chicken');
product.setLocation('Bogor');
product.save();

✅

class Restaurant {

  constructor(name) {
    this.name = name;
  }

  setName(name) {
    this.name = name;
    // Return this for chaining
    return this;
  }

  setLocation(location) {
    this.location = location;
    // Return this for chaining
    return this;
  }

  save() {
    console.log(this.name, this.location, this.category);
    // Return this for chaining
    return this;
  }
}

const restaurant = new Restaurant('Cafe')
    .setName('Kopi Kopian')
    .setLocation('Bandung')
    .save();

You should prefer composition over inheritance whenever you can. Quoting from clean-code-javascript by Ryan McDermott, here is a decent list of when inheritance makes more sense than composition:
Your inheritance represents an "is-a" relationship and not a "has-a" relationship (Human->Animal vs. User->UserDetails).
You can reuse code from the base classes (Humans can move like all animals).
You want to make global changes to derived classes by changing a base class. (Change the caloric expenditure of all animals when they move).

5. Javascript Style Guide

There are several principles or guides on how to write Javascript you and your team can follow.

6. Code Formatter and Linter

You can use a code formatter tool called Prettier to help you auto format your code based on your team's preference, which you can also integrate with linter, such as ESlint for bugs prevention.

Key Takeaways

Consistent on what you and your team has decided. And just like any other programming language, keep your code DRY (Don't Repeat Yourself) and KISS (Keep It Simple Stupid).

Reference:

Thanks for reading!
If you want to know more on CSS clean code, you can head over to this article

Would really appreciate if you could share your thoughts and feedback in the comment ✨

Top 6 ES6 Fundamentals You Need to Know

ChrysillaM — Fri, 04 Jun 2021 04:43:30 +0000

Table Of Contents

What is ES6?
1. Let and Const
2. Arrow Functions
3. Template Literals
4. Default Parameters
5. Rest Parameters and Spread Syntax
6. Destructuring Assignment
Bonus: Promise

What is ES6?

ES6 or ECMAScript 6 was the second major revision to Javascript, which enable us to write less and do more. It has a lot of new features and new syntaxes to make your code looks more modern, more structured and more readable.

On this article, we will cover several ES6 fundamentals that you need to master to get you ready with Modern Javascript. Let's dive in!

1. Let and Const

let: mutable variables, means we can reassign its value. let can be declared without being initialized.

const: immutable variables, means we cannot reassign value to const variables. const must be initialized during declaration.

Both of them are block-scope variables, which means it is only available within the block where the variable is declared.

Takeaways

It is recommended to use let and const than using var, because when we use let and const will be hoisted to the top but they are not initialized (unlike var that has been initialized with the value of undefined) and this helps us to get better error message. Furthermore, we can't iniatialized those variables before we declare them. This is useful to make sure that our variables has been declared before we can use them and this is a good practice in programming.

Code Examples:

// traditional
var x = 5;
y = 8;
var y;

console.log(x); // 5
console.log(y); // 8

// es6
let i = 10;
j = 15;
let j;
console.log(i); //10
console.log(j); // Error: Cannot access 'j' before initialization

const k = 29;
k = 39;
console.log(k); // Error: Assignment to constant variable.

let m;
m = 'hello';

const n;
n = 'goodbye';
console.log(m); // hello
console.log(n); // Error: Missing initializer in const declaration

2. Arrow Functions

Let's begin by showing you how to write function in traditional syntax vs ES6 syntax.

// traditional
var sum = function (a, b) {
  return a + b;
}

// es6
const sum = (a, b) => a + b;

It's really awesome, right?
The arrow function makes your code looks clean, more structured and more readable.

When the body inside arrow function has more than one line, we need to wrap it inside {}.

const sum = (a, b) => {
  const result = a + b;
  return result;
}

Arrow function commonly used as callbacks. You will find it a lot when working with map(), filter() and reduce().

// traditional
const arr1 = [1,3,5];
const square1 = arr1.map(function(item) {
  return item ** 2;
});
console.log(square1); // [1, 9, 25]


// es6
const arr2 = [1,3,5];
const square2 = arr2.map(item => item ** 2);
console.log(square2);

Although it is a powerful addition in ES6 but there are limitations that we need to understand to avoid errors that are difficult to track, such as when using this inside arrow function.

On the car2 example, the result might be something that you are not looking for. So, we need to be careful when using arrow function. This happens because arrow function doesn’t have its own bindings to this, instead they inherit from parent scope, which is called lexical scoping.

// with regular function
const car1 = {
  brand: 'Toyota',
  showBrand: function() {
    console.log(this.brand);
  }
}
car1.showBrand(); // 'Toyota'


// with arrow function
const car2 = {
  brand: 'Mazda',
  showBrand: () => console.log(this.brand)
}
car2.showBrand(); // undefined

3. Template Literals

Template literals or template strings is a new way to concatenate strings in ES6.
Let's take a look at code example below.

This is how we create greetings function that will greet the given name in traditional syntax.

// traditional
var greetings = function (name) {
  return 'Hello ' +  name;
};
console.log(greetings('Bambang')); // 'hello Bambang'

Now, let's refactor to template literals!

// es6
const greetings = (name) => `hello ${name}`;
console.log(greetings('Bambang')); // 'hello Bambang'

With template literals, our code looks more structured. We don't need the + sign anymore and we can use ${} to call variables.

4. Default Parameters

In ES6, we can give default value to function's parameters.

With the old syntax, this is how we create default value to a parameter.

// traditional
var sayGoodbye = function (name) {
  name = name !== undefined ? name : ‘Lorem Ipsum’;
  return `Bye bye ${name}`
}

Now, let's refactor using ES6 default parameter!

// es6
const sayGoodbye = (name = ‘Lorem Ipsum’ ) => `Bye bye ${name}`
console.log(sayGoodbye()); // Bye bye Lorem Ipsum
console.log(sayGoodbye(‘Bambang’)); // Bye bye Bambang

It's so simple and easy to understand. This also helps you to handle error in advance when you forget to assign the parameter.

5. Rest Parameters and Spread Syntax

Previously, before we have rest parameter, we can code like this to convert arguments to array. However, it only supports limited number of arguments and you need to be sure how many items are there.

// traditional
var cities = function(city1, city2, city3, city4, city5) {
  var citiesToArray = Array.from(arguments);
  return citiesToArray;
}
console.log(cities('tokyo', 'singapore', 'jakarta', 'moscow', 'frankfurt')); // ['tokyo', 'singapore', 'jakarta', 'moscow', 'frankfurt']

But now, thanks to ES6 which introduces us to Rest parameter.

Rest parameter accepts unlimited arguments and returns it as array. You can use rest parameter by adding three dots .... When you use rest paramater as argument inside a function, it must be at the end.

// es6
const cities = (city1, city2, ...others) => {
  console.log(city1); // 'tokyo'
  console.log(city2); // 'singapore'
  console.log(others); // ['jakarta', 'moscow', 'frankfurt']
}
cities('tokyo', 'singapore', 'jakarta', 'moscow', 'frankfurt');

Because it turns our parameters into an array, we can combine it with map() just like the example below.

const doubleTheNumbers = (...args) => args.map(item => item * 2)
console.log(doubleTheNumbers(3,5,20)); // [6, 10, 40]

Next we have spread syntax ..., which looks exactly the same as rest parameter.
However, spread syntax does quite the opposite of rest parameter. With spread syntax we can get list of arguments from array.

For example, let's say we have an array and we want to find the lowest number. Here's how we can do that with spread syntax.

const arr = [6, 5, 8, 2, 9];
console.log(Math.min(...arr)); // 2

Besides that, we can easily push elements into array using spread syntax. Without spread syntax, it would be something like this, which might be not what we are looking for..

// traditional
const fruit1 = ['apple', 'mango'];
const fruit2 = ['strawberry', 'grape', 'melon'];
fruit1.push(fruit2)
console.log(fruit1); // ["apple", "mango", Array ["strawberry", "grape", "melon"]]

Now, let's refactor with spread syntax!

// es6
const fruit1 = ['apple', 'mango'];
const fruit2 = ['strawberry', 'grape', 'melon'];
fruit1.push(...fruit2);
console.log(fruit1); // ["apple", "mango", "strawberry", "grape", "melon"]

We can copy an array using spread syntax too!

// copy array
let nums = [3, 7, 5, 6];
let copyNums = [...nums];
copyNums.push(9);
console.log(nums); // [3, 7, 5, 6]
console.log(copyNums); // [3, 7, 5, 6, 9]

Both rest parameter and spread syntax are really useful, powerful and easy to understand!

6. Destructuring Assignment

Destructuring assignment allows us to unpack values from array and properties from object into variables.

Array

This is how we destructure an array into variables.

const menu = ['chicken', 'beef'];
const [menu1, menu2] = menu;

console.log(menu1); // chicken
console.log(menu2); // beef

We can also use destructuring assignment to swap between two values in array.

Here's how we swap array using traditional syntax.

// traditional
var swap = function() {
  var arr = [1,2];
  var temp;
  temp = arr[0];
  arr[0] = arr[1];
  arr[1] = temp;

  return arr;
}
console.log(swap()); // [2,1]

And now, let's refactor the code using destructuring assignment!

//es6
let [a,b] = [1, 2];
[b,a] = [a,b];
console.log(a, b); // [2,1]

We have less code and it's easier to understand, isn't it?

Object

We can also use destructuring assignment with object. Take a look at the example below.

Here's how we do it with traditional syntax to get the object's value.

// traditional
var car = {
  model: 'Toyota',
  year: 2015,
  colors: ['black', 'blue', 'yellow']
}

var model = car.model;
var year = car.year;
var colors = car.colors;

console.log(model);
console.log(year);
console.log(colors);

Now let's refactor with destructuring assignment!

// es6
const car = {
  model: 'Toyota',
  year: 2015,
  colors: ['black', 'blue', 'yellow']
}

let {model, year, colors} = car;
console.log(model);
console.log(year);
console.log(colors);

There's a lot more you can do with destructuring assignment as it is really useful and practical, especially when you are working with modern Javascript.

Bonus: Promise

In Javascript, Promise means doing something that takes time then produces a result, just like real-world promise.

After a Promise takes the time needed to produce the promised result, it will either resolve when it’s fulfilled or reject when there is an error. If it’s resolved, we can get access to the returned data and if it’s rejected, we can throw an error.

In this example, we want to create a network request from API that returns either a resolved Promise when it's succeed or a rejected Promise when we couldn't get the data.

const getTodo = (resource) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();

    request.addEventListener("readystatechange", () => {
      if (request.readyState === 4 && request.status === 200) {
        const data = JSON.parse(request.responseText);
        resolve(data);
      } else if (request.readyState === 4) {
        reject("error getting resource");
      }
    });

    request.open("GET", resource);
    request.send();
  });
};

getTodo("https://jsonplaceholder.typicode.com/todos/1")
  .then(data => {
    console.log("promise resolved:", data);
  }).catch(err => {
    console.log("promise rejected:", err)
  });

Promise is a part of Asynchronous Javascript, a technique that allows us to create an action that we start now and finish later, which means we can let our code do several things without blocking the main thread.

If you want to learn more on Asynchronous Javascript, you can head over to my Async/await post.

Thanks for reading!

Would really appreciate if you could share your thoughts and feedbacks in the comment ✨

DEV Community: ChrysillaM

8 Things You Must Do in CSS

What is Clean Code?

1. Write Meaningful and Self Descriptive Name

2. Prefer CSS Preprocessor

3. Write Modular CSS

4. Use Shorthand properties

5. Write Flexible CSS Selectors

6. Avoid !important

7. Follow CSS Styleguide

8. Use Code Formatter Tool

Key Takeaways

Reference

Writing Clean Javascript Code for Beginners

What is Clean Code?

1. Variables

2. Function

3. Conditional

4. Classes

5. Javascript Style Guide

6. Code Formatter and Linter

Key Takeaways

Reference:

Top 6 ES6 Fundamentals You Need to Know

What is ES6?

1. Let and Const

Takeaways

Code Examples:

2. Arrow Functions

3. Template Literals

4. Default Parameters

5. Rest Parameters and Spread Syntax

6. Destructuring Assignment

Array

Object

Bonus: Promise

6. Avoid `!important`