DEV Community: Arvind Ram Sankar

Four SEO Practices every Frontend Developer should Follow

Arvind Ram Sankar — Sat, 26 Dec 2020 00:00:00 +0000

SEO is critical to any website. You might be using HTML and vanilla javascript or fancy frameworks like react and vue, but in order to make sure that people see it, it needs to show up on google search.

A recent study shows that more than 70% of the people prefer changing their search query rather than going to the second page of google. Therefore, we have to make sure that our website shows up on the first page of google.

In this article, I’ll take you through four simple tips, which will greatly improve the SEO compatibility of your website.

1. Header Tag

The header tag <head></head> contains all the information about the html page. Some of the important tags important for SEO are listed below.

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home | Brand</title>
<meta name="description" content="Description of your website">
<link rel="canonical" href="https://www.example.com/">
</head>

Title

The title tag <title></title> is nothing but the title of your website. It is displayed on the browser tab. The title should be relevant to your website and include all the necessary keywords.

Example of Title Tag

For example, if your website is for a specific brand, make sure your title always has the brand name. The home page should be “Home | Brand” , the about page should be “About Us | Brand” and so on.

Meta Description

Meta description is another extremely important tag. Whenever you search for something in google, the small description that you see below each link is the Meta description of the website. This is what the users read before clicking on the link.

Example of Meta Description

Always keep the meta description between 90-160 characters long. Google only shows the first 160 characters of your description and cuts out the rest.

A good meta description should have all the relevant keywords that will make the users click on the link as soon as they read it.

Canonical URL

Let’s take a simple example to understand this tag. Let’s say you write an amazing blog post. You post it on your website. Then you post on Medium, Blogger and some of the other blogging platforms. Now, there are multiple copies of the same content existing on different websites.

You don’t want the google bot to think that one website has copied from the other or vice versa. And you also don’t want the same content to compete against each other for top ranking on search results page. Therefore, if you put the <link rel="canonical" href="https://example.com">, the google search engine will know that they are the same content existing in two different places. The href provided in the tag is considered to be the master copy. And you need to put the canonical tag in all the other websites where you’ve duplicated the content.

2. Image Alt Attribute

Always add alt tags to your images. Image alt tags are extremely important. It looks something like this:

    <img src="someimage.jpg" alt="Image of a flower"> </img>

The google bots which crawl your websites cannot see what the image is about. Instead, they use the alt tag to understand what the image is about. Therefore, it is important that you put these alt tags to all the images on your website.

3. `rel` Attribute for Links

SEO is all about links. In order to have a higher SEO ranking, you need to gain links from various websites. Adding links to your website provides helps improve SEO of the linked website.

<a href="https://google.com" rel="nofollow noopener"> Link </a>

rel="nofollow" is essentially like a SEO blocker. If you see a website that has links to your website but has the rel="nofollow" attribute, that means it doesn’t contribute to your SEO. Similarly putting it on your website won’t pass on SEO juice to the linked website.

Make sure to use this cleverly and always keep this in mind when you are looking for backlinks to your website.

4. Sitemaps and Robots.txt

Sitemaps, just like its name suggests is a map to your site. It is usually located at /sitemap.xml. For example, the sitemap for my website is located at arvindrs.com/sitemap.xml. It contains a list of all the URLs located in my website. Since my website is built using Jekyll, I use the jekyll-sitemap plugin to automatically generate these sitemaps.

Google and other search engines use web crawlers to index and rank your website. Robots.txt is a file which contains guidelines on how these crawlers should index your website. You can mention which URLs to crawl and which shouldn’t be crawled. You can checkout my Robots.txt file at arvindrs.com/robots.txt. It doesn’t really have anything because I don’t have any restrictions for crawling.

Now, although both of these files don’t affect SEO directly, these are really helpful for web crawlers when they index your website. It is always a good practice to add both the files to your website.

Conclusion

In this article, we saw four basic ways to perform search engine optimization as a front-end engineer. We should always follow these good practices to make sure that our content has a good ranking.

But remember, these four points are barely the tip of the iceberg. There are so many things that you need to take care of when performing search engine optimization. There are social media tags, open graph tags, h1 tags and so much more. So, keep exploring!

How to Make your own CSS Framework - Part 3

Arvind Ram Sankar — Wed, 23 Dec 2020 00:00:00 +0000

This article is the third part of a comprehensive guide on how to build your own CSS framework, starting from planning, designing all the way to coding. These are the things that I learnt while I built my own CSS Framework Sleek, which is completely useless.

If you haven’t seen the two previous articles, go check it out here:

How to Make your Own CSS Framework - Part 1

How to Make your Own CSS Framework - Part 2

Designing and other stuff

This is the final step before we start the coding. In this section we will mainly talk about the following things:

CSS Reset
Media Queries for Responsive Design
Coming Up with Design System
1. Tools for Designing
2. Typography
3. Color Scheme

If you are already familiar with these things, feel free to skip ahead.

CSS Reset

Different people use different browsers, it maybe Firefox, Chrome, Safari or even Internet Explorer. We need to make sure that our style looks the same everywhere. This is where the CSS Reset comes in.

CSS Reset does exactly what it sounds like, it resets the style so that we have a uniform and a consistent style across all types of browsers and devices.

The code below shows what a CSS reset might look like. This is just a small subset. There are a lot of other components that require reset, for example tables, captions, textinput etc.

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
ol,ul {
    list-style:none;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}

We will be using Normalize CSS, which is a really small and an amazing reset. You can checkout the code for Normalize here. It is well documented and you’ll be able to clearly see what components are being reset to what values.

Media Queries

A responsive design is one which works well on any device irrespective of the screen size. Obviously, in order to make that happen, you need to write CSS which is responsive. This is what media query helps us with.

Media query allows you to write different CSS for different screen sizes.

@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}
@media only screen and (min-width: 600px) {
  body {
    background-color: green;
  }
}

The above code sets the body background color as blue when the screen size is below 600px and sets it to green when the screen size is above 600px. Using media query, we can write CSS that looks perfect on all devices starting from desktops to smartphones. We will be setting breakpoints to distinguish different screen sizes and use different CSS for different breakpoints.

Bootstrap uses the following breakpoints:

/*Extra small devices (portrait phones, less than 576px)*/
/*No media query for 'xs' since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { ... }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { ... }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { ... }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }

We will be defining similar breakpoints for different devices and try to make the design more responsive.

Design System

Before you can start making your framework, you need to have a design in mind. For example, if you want to build a button, you need to determine it’s size, the margin, the padding, size of the text inside the button, border radius and so much more.

There are a lot of good design systems like Material Design or Ant Design which you can use for inspiration. Their websites have extensive guidelines about the design system.

I am not really an expert in web design or UI/UX. But it is really easy to find a lot of good design guides and references on the internet.

Tools for designing

My go to tool for designing is Figma. The main reason is that it’s an online tool and it offers upto 3 projects in free version, which is more than enough for me.

There are lots of other good tools in the market like AdobeXD, Sketch. This article gives a really good comparison of some design tools.

But always keep in mind that in the end, it’s just a design tool. What matters is what you build with it. A lot of people tend to waste time jumping from one tool to another. Just pick one which feels comfortable to use. You can always switch tools in the future if it doesn’t feel right. Most of the skills you pick up are transferable. Once you master one software, it won’t take much time to master a new one.

Typography

This is another essential element to a CSS Framework. Your font defines your CSS framework.

There are a plethora of font faces available for you to choose from. Picking the right font is just as important as anything else. Your font should be cohesive with the rest of your design.

While browsing the web, I found this is really good Crash Course on Fonts. This will give you a good idea about types of font available for you to use.

Personally, I tend to find Sans-serif Geometric Typefaces to be really attractive because they are simple and elegant. But the typeface also depends on your framework. If you are building some wacky CSS Framework like NES, you can even use Comic Sans. That’s totally upto you.

But make sure it is in harmony with the rest of your framework. It shouldn’t stand out from the rest of the design.

Color Scheme

There are a total of 256 x 256 x 256 combinations of color possible. It is generally preferred to pick a bunch of colors from this huge set and use it on your website.

Again this is not something that I am expert at, but there is a whole subject about colors, how to choose appealing colors and what colors look good when you combine them. There are different color schemes like monochromatic, complimentary, triads etc.

The Adobe Color is a really good online tool which gives you colors based on different schemes.

Adobe Color Tool

The image below shows the colors used in Bulma CSS Framework. If you have worked with different frameworks, you should know that a framework traditionally has colors like primary, success, danger etc.

I’ve linked to various frameworks’ colors. Check them out and observe what colors they are using. Maybe you’ll find some inspiration for your own framework.

Conclusion

In this article, we briefly went through some of the basic things involved in designing a CSS Framework. Since I am not good at designing, I decided to not write much about it. You can easily find more guides online about various things like color theory, typography etc.

In the next article, we will finally start coding the CSS Framework. When building the framework, I will be mostly borrowing designs from Bootstrap and Bulma, since they are really popular and lloks good.

Further Links

This is the third article out of a series of article I am going to write. I hope this gave you more insight into how to plan out your framework.

This is still a work in progress. I will be finishing up these articles soon so that you can get started building your own framework.

How to Make your Own CSS Framework - Part 1

How to Make your Own CSS Framework - Part 2

How to make your own CSS Framework - Coding/Documenting (Coming on 31st December)

How to make your own CSS Framework - Part 1

Arvind Ram Sankar — Wed, 09 Dec 2020 13:40:34 +0000

A couple of years ago, I made my very own CSS framework from scratch called Sleek. Of course, no one used it, including me.

So I decided to write a series of article on how I went about making one starting from the planning, designing stage all the way to coding and documenting.

Here's a link to this series:

How to make your own CSS Framework Part -1 : Introduction

How to make your own CSS Framework Part -2 : Planning

How to make your own CSS Framework Part -3 : Design

The rest of the articles are coming up soon.

How to Make your own CSS Framework - Part 2

Arvind Ram Sankar — Wed, 09 Dec 2020 00:00:00 +0000

This article is the second part of a comprehensive guide on how to build your own CSS framework, starting from planning, designing all the way to coding. These are the things that I learnt while I built my own CSS Framework Sleek, which is completely useless.

If you haven’t seen the previous article, go check it out here: How to Make your Own CSS Framework - Part 1

Let’s start Planning

Now that you have decided to start making a CSS Framework, it’s time to start planning and chalk things out. There are two main things that you need to address at this stage:

Various CSS Architectures for Frameworks
Complexity of your Framework

Both of these are something that you need to determine before you go any further. Let’s have a look at each one of them.

CSS Architectures

Now, the unique thing about CSS is,it has no rules. What I mean is that there are several ways to achieve the same thing. For example, if you want to center a text, you can use text-align, or you can use margin and padding to align it, or you can use flexbox to justify it, or use a code that you copied from stackoverflow. It’s like a lawless jungle. Since CSS doesn’t have any such rules, people might end up writing haphazard code with weird classnames and styles.

What are CSS Architectures?

CSS architectures are guidelines on how to name, organize and write your CSS classes and styles with a focus on maintainability, scalability and reusability , which is really important when building a framework. You can use these architectures even when writing the CSS for a website. They help you write better CSS with a lot of flexibility.

If you haven’t heard of CSS Architectures before, then this is a really good place to start. In this article, I’ll be looking at mainly four popular architectures:

OOCSS - Object Oriented CSS
BEM - Block Element Modifier
SMACSS - Scalable Modular Architecture for CSS
ACSS - Atomic CSS

Again, these are not strict rules but rather guidelines to better organize your code. You need not stick completely to these guidelines. You can always go wild and modify it according to your needs.

Object Oriented CSS (OOCSS)

Object Oriented CSS is loosely based on object oriented programming. Object Oriented Programming promotes the use of classes, object with a focus on reusability and modularity. The aim of OOCSS is the same.

But what does an object in OOCSS mean? Here, an object refers to any repeating style that can be converted into reusable code. If something repeats again and again, make it into a reusable snippet, as simple as that.

Here is a quick overview of the OOCSS guidelines.

Reusability

If you have something like this:

.box1 {
    margin: 10px;
    padding: 10px;
    background-color: red;
}

.box2{
    margin: 10px;
    padding: 10px;
    background-color: green;
}

We can convert this into following:

.box {
    margin: 10px;
    padding: 10px;
}

.redbox{
    background-color: red;
}
.greenbox{
    background-color: green;
}

And then you can use it HTML like <div class="box redbox"> or <div class="box greenbox">.

Separation of Skin and Structure

We should also separate the skin and structure of components.

Structure involves physical attributes like height, width, margin, overflow, padding etc.

Skin refers to visual details like color, font, border etc.

Here is a simple example of separation of skin and structure:

.box-structure{
  width: 100px;
  height: 100px;
  margin: 10px;
}

.box-skin1{
  border: 1px solid black;
  background-color: red;
}

.box-skin2{
  border: 1px solid green;
  background-color: yellow;
}

Separating skin also improves modularity and reusability. A same structure can be used multiple times with different skins.

Separation of Container and Content

Let’s say you have a <div class="shape"> and an <img> inside the div.

Try to avoid combining the styles of parent and child. For example :

.shape img{
  width: auto;
  height: auto;
  border: 1px solid black;
}

Doing this prevents reusability of code. Always separate the container and the content.

Many of the popular frameworks such as Bootstrap and bulma use the OOCSS guidelines. This was just a brief overview of some of the OOCSS guidelines. You can read about it in this amazing article by Smashing Magazine or at it’s Github page.

Block Element Modifier (BEM)

The BEM contains guidelines on how one can go about naming their CSS classes. BEM is actually a subset of the bigger OOCSS architecure. As it’s name suggests, in BEM you essentially split you CSS into blocks, elements and modifiers.

Blocks : A block is a standalone entity that is meaningful on its own. Headers, footers, Forms etc fall can be considered as blocks.

Elements : Elements are a part of a block that has no standalone meaning and is semantically tied to its block. Buttons in Navbar, Text Inputs in a form etc are elements associated with blocks.

Modifiers : Modifiers are variants/extension of the Blocks and Elements. They might be offer different size, different color etc.

Elements of a block class .block{} are denoted as .block__element{} and a modifier is denoted as .block--modifier{}.

The codepen below illustrates an example of BEM based CSS

This was just a simple overview of the BEM style guide. You can find out more about it on it’s website BEM.

Scalable Modular Architecture for CSS (SMACSS)

SMACSS provides a way to maintain and organize your code such that it is scalable and modular. It divides the complete CSS codebase into five different categories:

Base : Base contains the code for all the default values. For example, you might want to remove all margins from html, or set a default size for h1, h2 etc. All of these fall under this category.

html {
    margin: 0;
    padding: 0;
    font-family: Arial;
}

a {
    color: #ffffff;
}

h1 {
    font-size: 50px;
}

Layout : These components help divide the page into major sections. This includes components like header, footer, body etc.

Modules : These are the reusable modular components of a design. That includes components like buttons, cards, alerts, lists etc
State : State describe how things look when in a particular state (hidden/expanded or active/inactive). These are generally prefixed with is-. For example, is-active, is-inactive, is-expanded, is-hidden.
Theme : Theme define things that have to do with the appearance like a color scheme or typography etc.

Frameworks like Bulma and PureCSS follow the SMACSS guidelines. The SMACSS website has more in-depth information about each one of those categories. But this much should be enough to proceed further.

Atomic CSS (ACSS)

Atomic CSS is completely different from conventional CSS Architecture. Tailwind CSS uses Atomic design and if you have used it before you must know that it is quite a unique way of working with CSS.

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Atomic CSS, also known as Functional CSS is nothing but a collection of single purpose styling units. Atomic CSS is like a common “vocabulary” meant to style documents regardless of context or content.

The code below shows a simple example:

/*red background*/
.bg-r{
  background-color: #eb4034;
}

/*green background*/
.bg-g{
  background-color: #34eb59;
}

/*small margin*/
.mr-s{
  margin: 10px;
}

/*medium margin*/
.mr-m{
  margin: 20px;
}

You can keep building CSS vocabulary like this and use it in your HTML. The codepen below illustrates the same.

The CSS classes themselves are small and immutable, you cannot modify them. And the most important thing is that Atomic CSS is unopinionated. It’s not a framework with fancy components having fancy design. Rather, it’s just a bunch of utility classes that you can put to use. You can construct your own design out of these utility classes.

Which architecture is the best?

When we build our own CSS Framework in Part 4 of this series, we won’t be sticking to any one architecture. These are just guidelines to facilitate the process of making the framework. We will be borrowing a lot of concepts from these architectures and build one of our own. For example, we will use SMACSS guidelines to organize our folder, we will use OOCSS and BEM to name our classes and structure the styles and we will build some utility classes just like in Atomic CSS.

There is no such thing as the “best” architecture. Each has it’s own set of advantages, disadvantages and use cases. You are free to choose whichever framework depending on what your vision for the framework is.

Complexity of your Framework

The complexity of your framework can lie anywhere between 0 to 10, with frameworks like PureCSS and Milligram at level 1 and frameworks like Bootstrap, Semantic and Foundation at a level of 10.

Remember, there is nothing right or wrong here. Bootstrap is complex because Bootstrap is meant for rapid prototyping. You can put together a big website using bootstrap in a matter of minutes; just put a navbar at the top, a jumbotron, a couple of cards, some grid layout and you are set. PureCSS on the other hand is meant to be simple and extensible. It’s less than 10kB and it only comes with a few basic components, typographies and layouts. You can easily extend it with your own CSS or combine it with any other frameworks too.

The complexity of your framework depends on what your vision for the framework is. You don’t need to stuff it with all sorts of different components, unless that’s what your aim is.

If you are building one for learning purposes, it doesn’t exactly matter what you are doing. You are free to make it however you want because no one is probably gonna use it.

If you want to make a design system as a part of an organization or for yourself, start small. First implement the bare minimums like buttons and layouts that are used frequently. Incrementally add more and more components until you have a collection of components.

And finally, if you are building it for other people to use, you might wanna think about how it is different from the existing ones out there. Does your framework offer a superior design? Or maybe some components that people use frequently but isn’t provided by any existing frameworks. What is it’s selling point? It should be really good in order to make people leave their existing framework and use a new one. Most of the developers take a liking to framework and never come out of the comfort zone.

If it’s just another framework with a couple of layouts, buttons and cards, no one will probably use it, just like my framework Sleek.

Here’s an Assignment for you

Go through the components list of each and every framework out there, have a look at the various components they offer and how they look, feel and work. Make a list of components that you would like to have in the V0.0.1 of your framework.

Here’s a link to some of the framework’s documentation. My favourite component to start off with is the button. So, I have linked to buttons of all these frameworks. Use this as a starting point and check out all the other components.

Remember, only choose components that are essential. You can always add more components in the future.

Conclusion

If you managed to read till this point, I hope this article gives some insight into what goes into planning a CSS framework. When you finish your planning, you should have an idea about the components that you will be including in your framework and have some clarity on different CSS architectures.

In the next article, we will talk about some basic design guidlines after which we will start coding the framework in SASS.

Further Links

This is the second article out of a series of article I am going to write. I hope this gave you more insight into how to plan out your framework.

This is still a work in progress. I will be finishing up these articles soon so that you can get started building your own framework.

How to make your own CSS Framework - Designing (Coming on 14th December)

How to make your own CSS Framework - Coding/Documenting (Coming on 16th December)

There are various other architectures likes SuitCSS which I haven’t mentioned here for the purpose of keeping this aricle short and concise. You can find more about it by just seraching them on the internet.

DEV Community: Arvind Ram Sankar

Four SEO Practices every Frontend Developer should Follow

1. Header Tag

Title

Meta Description

Canonical URL

2. Image Alt Attribute

3. rel Attribute for Links

4. Sitemaps and Robots.txt

Conclusion

How to Make your own CSS Framework - Part 3

Designing and other stuff

CSS Reset

Media Queries

Design System

Tools for designing

Typography

Color Scheme

Conclusion

Further Links

How to make your own CSS Framework - Part 1

How to Make your own CSS Framework - Part 2

Let’s start Planning

CSS Architectures

What are CSS Architectures?

Object Oriented CSS (OOCSS)

Reusability

Separation of Skin and Structure

Separation of Container and Content

Block Element Modifier (BEM)

Scalable Modular Architecture for CSS (SMACSS)

Atomic CSS (ACSS)

Which architecture is the best?

Complexity of your Framework

Here’s an Assignment for you

Conclusion

Further Links

3. `rel` Attribute for Links