JavaScript Classes

Class Keyword

JavaScript uses the class keyword, which was introduced in ES2015. Prior to ES2015, you can create objects by using function constructors and prototype inheritance. There are many developers who believe that classes do not belong to JavaScript. They consider JavaScript as a functional programming language. I have heard opinions from the other side of the isle, where they believe that classes provide a less complicated solution. So regardless of an individual’s belief, classes are here! They are here to stay and are used extensively in modern frameworks like Angular, React, and Ember. Before we go deep into classes, let’s understand what does a class mean to JavaScript.

Feels like Classes, Smells like Classes!

Introduction to classes in JavaScript was a great news for some, especially, former Java programmers who will feel like home. I believe, objective of people who added classes was just the same. However, I think a Java programmer will be more confused because under the hood classes do not act the same way as they do in Java. To quote a simple analogy, it’s like when you want your kids to eat more vegetables, you make a pizza, substitute tofu for cheese and spinach for pepperoni. Though you hide spinach in the middle layer, your kids can recognize that this is not a real pizza in their very first bite! Java programmers may feel the same as classes in JavaScript internally use the same function constructor and prototype methods from the versions prior to ES2015. Said that, syntactically classes are defined in the similar way as they are defined in Java.

Syntax

In the example bellow, we have defined class Car. Notice the difference between the function declaration and class declaration? While declaring a class, we do not use semicolon. Similarly, to define a constructor, use the keyword ‘constructor’ and add the parameters to set the initial properties. If you check the type of the class you will be surprised that it’s actually “function” not “class”.

 Inspecting  a JavaScript Class
Inspecting a JavaScript Class

If you inspect the newCar object in detail you would see similar structure when you create object with function constructor. The only difference is that the constructor displays the keyword “class”.



Simulating Class with Function Constructor

You can simulate the class behaviour using a function constructor wrapped inside an Immediately Invoked Function Expression (IIFE). This is obviously to see what is going on inside when you define a class.

Inspecting Function Constructor
Inspecting Function Constructor

Adding Methods

Now let’s add a drive() method to class Car. Note that there is no comma between two methods. It feels weird if all you have used is JSON Objects.

Inspecting Class Method
Inspecting Class Method

When you inspect the class Car, you would notice the prototype property. Expanding prototype property displays the drive method. This means that Car is actually a function and drive is its prototype methods. Sounds familiar ? :). As I said, Class keyword is nothing but what some call “syntactic sugar”. All the methods are public. Unlike java, JavaScript doesn’t provide a way to add private methods.

Next, let’s build objects from class Car. The syntax is similar to what we used with function constructors, using the new keyword. You can execute the method on this object by calling redCar.drive().

Sass CSS Tutorial for beginners

Sass stands for  Syntactically Awesome Stylesheet

File extension for a Sass file is “.scss”,  which stands for Sassy CSS. “.sass” is also a valid extension for Sass with bit concise syntax.  In this article, we will only look at the latest version which is SCSS.

Why Sass?

Sass is a preprocessor that gives you a little better way of writing styles where you can have features such as nesting that are missing from CSS. In nutshell, you can write a sort of object-oriented styles by using Sass. Sass compiler converts “.scss” files to “.css” files. Since you do not need to edit CSS files directly,  you can avoid some of the mess that CSS files may create.

Code Example

[Look at the SCSS example below. Click the SCSS tab to see the SCSS code, and then from the lower-right, click View Compiled. This way, you can toggle between SCSS and compiled CSS]

The following SCSS has an ID called main, and within that there are two nested elements a and h2.  When you click View Compiled, it produces CSS that creates a style for each element. This is a basic example of how SCSS works. You can modify the example and check the result in the Result tab.


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

Comments

There is a need for writing Sass specific comments that describes some of the rationals which is called Sass comments. When Sass compiler compiles down to normal CSS, the comments mentioned in Sass do not carryover to CSS.

Sass  comment :   // This is Sass Comment [Note: This is not valid in CSS]

CSS comment :  /* This is CSS Comment with opening and closing */


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

Variables

Variables are very useful features of Sass.  For example, you can define a variable for a color and use it for various styles. The advantage is that when you have to replace a color with a new color, you do not need to change the color throughout the style. You only make a change to the variable value. To define a variable, add a prefix $.  See the example below.

$hcolor = red;

h2{

color: $hcolor;

}


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

CSS align elements horizontally center

CSS align elements horizontally center

Let’s understand what we are trying to do here. We want to center an element horizontally within the parent element so that we would have an element placed at an equal distance from either sides.

CSS ALIGN HORIZONTALLY

There are two different ways we can align an element. The option depends on the display property of the element you are trying to place.

  • Center the element by using its own CSS – display:block;
  • Center the element by using parent element’s CSS – display:inline*
    *display:inline, display:inline-block; display-inline-flex;

1) Blocks

css block element
css block element

Elements with “display:block” property are blocks. When no width is specified, blocks occupy the entire width of the parent. In such case, there is no need to center these elements. When the width is specified, blocks would left align, by default.  You can center them by setting the left and right margins left to auto, respectively. In this case, you are adding style to the element and not the parent container. See the example below:

 


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

2) Inline-* elements

css inline element
css inline element

Elements with”display:inline”, “display:inline-block”, and “display:inline-flex”,  property are the inline elements. Since, you have multiple inline elements within the same row, the horizontal centering has to be done from the parent container and not by the element itself. This is done by adding style “text-align:center” to the parent container. See the example below:


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

[contact-form-7 id=”69″ title=”Contact form 1″]