DEV Community: Ilham Mubarok

Learn: Write Clean and Maintainable CSS for Future Use

Ilham Mubarok — Thu, 06 Jan 2022 04:23:56 +0000

When it comes to write the CSS codes from scratch it can be time-consuming sometimes. Moreover, refactoring the codes from the apps that are already running. Not infrequently we have to read all the codes from it's beginning, only to implement some small changes.

To avoid wasting time on it, I will explain 5 important points that I have learned in writing CSS code to make it maintainable for our projects. Here are the points :

Avoid Unnecessary Id's 🙅‍♂️

First thing we have to know that the value of Id must be unique. It cannot be duplicate. In case, if we have different element with the same style, but we targeting the Id selector in CSS, we have to write the duplicate code for every different Id.

Yes, for some reasons, the use of Id is important when we interact with JavaScript DOM. But, we talk about using the Id for CSS selector in this post.

In addition, Id selector has a higher priority than Class selector which will make it difficult for us to change the style in the future. As we know that Class selector cannot override the Id selector because of it.

Also, we will naturally targeting the class if we want to style the elements.

Using The Class Selector is Highly Recommended 📝

The Class selector is preferred over the Id selector because of it's simplicity. It will lead us to write the code that are much more simple but still consistent.

One more thing to remember is that there's no need to over-specified with the Type selector that refer to a specific element. Here's the example :

div.card {
  background-color: blue;
}

Next time if we have a <span> with the same style, we can't apply that codes. Cause it targeting only for the <div>. It means we have to write the new duplicate codes which is not effective.

The Flattened Rule 🌗

The purpose of this rule is to write CSS code that is equally or not too specific. The goal is to avoid problems related to specificity. Please read the following CSS codes and notice the difference :

// code1
.card-title {
  font-size: 24px;
}

// code2
.card .card-header .card-title h4 {
  font-size: 24px;
}

When we write very specific code (like code 2), it will be difficult for us to trace the code if the code is already complex. That required more time when we need to override the styles.

!important Doesn't Really Important 🚫

The !important property is a special keyword in CSS to override any style regardless of its specificity.

Why is it better not to use it?

Refer to the previous problem, when the CSS codes are getting complex, and there's an element that already use the !important property, then we must use this keyword in order to be able to change the styles of the element. Otherwise, any styles will not be overwritten.

In short, there will be !important civilization.

But for the certain cases, for example when we use Bootstrap, there are several helper class which in practice use !important. Because the behavior of those helper classes is to get things done quickly.

Content Agnostic Concept 📚

Instead of focusing on the content, it's better to pay attention to the layout.

For example, if we have an article section and post section that turns out to have the same style. This will be more effective if we write the CSS code using a class for the base style. The purpose of writing the base class is for the layout. Later if we want to use it again, simply we can call the Class selector in the HTML code.

Those are 5 points about writing clean and maintainable CSS codes based on what I have learned. If you want to get a better explanation about it, here is the main source in Indonesian language :

#TheCinCSS: Bagaimana Menulis Kode CSS Yang Maintainable?

Special thanks to Array ID for the useful knowledge!

Learn: Why It Took So Long to Finish The Side Project

Ilham Mubarok — Fri, 30 Apr 2021 16:04:16 +0000

We may have heard the phrase that "coming up with a new idea for a side project is easier than getting it done".

And it actually happens to most of us.

Before we move too far, let me share a bit of my story when I'm about to rebuild my personal portfolio. For version one, it was completed last year. But I was decided to migrate the entire tech-stacks. The main reason was, this version only uses the basic knowledge to build it: HTML and CSS.

With the increasing features that will be presented on this project, I think I have to migrate to a framework that can handle 'the heavier work' in the future. Since I was planning to add it.

From here, I realize there will be some roadblocks that may occur. So, here are some suggestions from me if you may facing the same roadblocks:

Set the priority of this side project. If it looks like it will take up a lot of time to work on, plan carefully in terms of how much time will you spend on it. Don't let the side project took away so much time in your life.
Learn about the technologies to be used. Make sure that at least you are familiar with the technologies. One thing you have to believe that migration in the middle of the process is a bad idea.
Determine the purpose in mind. In order to avoid a side project that sinking in the middle of its journey, there are generally three things as a goal — to learn something, to develop a specific product, or to show up your skill.

Because in the end, as all things should be, done is better than perfect.

Learn: Get To Know Before Integrating Google APIs & Services into Our Projects

Ilham Mubarok — Thu, 18 Mar 2021 14:12:09 +0000

Have you ever wonder how a Sign-In with Google button works? Or displaying a location using Google Maps? These can be done by integrating Google APIs & Services into our project.

In my personal experience, I was trying to show a Maps that integrated with EONET from NASA Open APIs. About this project, I store it on my GitHub here. But I can't fully show the Maps cause there's a watermark "for development purposes only" that covers up the entire Maps.

Moving on to my next project recently when I'm about to use Google Sign-In API. Besides, showing static maps using Google Maps Javascript API based on geolocation. The sign-in process and display of the information are smooth. But the problem here, the static maps that used latitude and longitude by accessing the coordinates can't be shown.

Then I came up with a conclusion after understanding the roadblocks. It tells me that I should :

Activate my billing on Google Cloud Platform.
Make sure that APIs and Services are enabled.

The Importance of setting up billing on Google Cloud Platform is a must if we want to have full access to the services.

Friendly reminder: The bill costs. Do not forget.

Learn: Developed Extension Pack for Visual Studio Code

Ilham Mubarok — Wed, 17 Feb 2021 03:32:53 +0000

This post will not cover step by step on how to create Visual Studio Code Extension Pack. If you are looking for a tutorial, I found this article helpful :

https://code.visualstudio.com/blogs/2017/03/07/extension-pack-roundup

Moving on to my first intention when I developed it cause I have to re-install operating system in my laptop. For the cleaner installation, I decided to delete any installed programs. It means that I need to set everything up from the very start.

Focus on the Code Editor that I use all this time and it's Visual Studio Code. So, I think that I have to setup my developer environment again. There are many options that can be taken, but I choose to make the VS Code Extension Pack to solve it. The reason was...

When you can create a tool that may give the benefit to others as long as it also solved your problem. Share it instead!

If you are willing to take a glance at my Visual Studio Code Extension, come visit the VS Code Marketplace. Feedbacks are welcome and I really appreciate that.

Learn: Speed Up The Development Process Using Figma

Ilham Mubarok — Tue, 12 Jan 2021 12:28:03 +0000

Before we start, I would recommend you to try Figma. Why? This will give you a clarity.

While created side projects, I straightly run to code it for most of the time. My consideration before were only around "What tech stack would I use to complete it". I only thought about technicalities of the process, but didn't really deep dive into the interface design of the application that I built.

And then I realized by now that I spent quite a bit of time to design proper Interfaces. I need to define the style as it represent how my apps will look alike. I have to create a prototype first.

Built somethings in prototyping tools is not my first time experience. I've used Adobe XD before, though not that often.

Speaking of which, I'm exploring Figma documentation and read/watch some tutorials recently. Then I try to install Figma and start crafting my first design. It turns out that there are so many interesting concepts from Figma to learn.

For now on, I have decided to join #TeamFigma

Learn: Blade Templating Engine and Eloquent ORM on Laravel

Ilham Mubarok — Tue, 01 Dec 2020 08:16:07 +0000

I never thought of deep diving into Laravel this far. The main reason that pushed me to learn it was "My college project".

It was my first time using Laravel. But I've been exploring CodeIgniter for two semester before. Hence I thought it was not that scary to learn.

Refers to what I've mentioned in the title. The Blade Templating Engine gives me so many things to expand as much as the benefit it has. For the Eloquent ORM, I surprised a lot cause it can hugely reduce my codes. Also gives me more insights about the MVC method.

I can say that Laravel keeps me learn more. And code more often.