Recently, I have been looking at [Miro Website](https://miro.com/careers/ "Miro Website") and I was amazed by their design, choice of fonts, colors everything was perfect, however, one thing that stood out for me was the background grid.

Soon, I saw this on some other site, and then another. I want to understand how they are doing it, one obvious answer is that they have one svg added to the background, with size: cover, but then I find out an even better way; Linear Gradient.

Linear Gradient, as the name suggests are a way to add gradients to your website. However, this is not the complete truth about linear gradient, as it turns out you can do all crazy and weird stuff with this property including adding these grids to your site.

### Code

```css
body {
  background-color: #282c35;
  background-image: linear-gradient(#ffc4a715, 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, #ffc4a715 0.1rem, transparent 0.1rem);
  background-size: 3.5rem 3.5rem;
  color: #fefefe;
}
```

Its just these few lines and you will have a background grid to whatever section you want to add it to.

##### Code Explaination:

- background-image: linear-gradient(#ffc4a715, 0.1rem, transparent 0.1rem), linear-gradient(90deg, #ffc4a715 0.1rem, transparent 0.1rem);: This line defines two background images using CSS gradients. Gradients are smooth transitions between two or more colors.

- The first gradient linear-gradient(#ffc4a715, 0.1rem, transparent 0.1rem) creates a vertical gradient that starts with a semi-transparent yellow color (#ffc4a715) at the top and transitions to transparent over a distance of 0.1rem.

- The second gradient linear-gradient(90deg, #ffc4a715 0.1rem, transparent 0.1rem) creates a horizontal gradient that starts with the same semi-transparent yellow color at the left and transitions to transparent over a distance of 0.1rem.

- Both gradients are combined using the comma (,) separator.

- background-size: 3.5rem 3.5rem;: This line specifies the size of the background images. Each image will have a width and height of 3.5rem. This means that each color segment in the gradient will repeat at intervals of 3.5rem, creating a pattern on the background.

And that's it. You can play with these values, add different angles, multipe gradients to achieve all kind of different patterns here, so what are you waiting for, go ahead and create some beautiful patterns.

You can view it in action here at my [blog](https://blog.relativelyrehan.co "blog")


How to generate Grid like background for your landing page or other web projects 

How to add grid

How I added this background Grid to my blog

> Nothing remains as it was. If you know this, you can
> begin again, with pure joy in the uprooting.”
> ― Judith Minty

Some experiences make you sore,
I am not there anymore,
you re-live the same life, same dreams
but the same things become more of a chore.

It's no wonder that time passes,
you will get whatever you ask for,
but it's a wonder you stood there,
hoping one day you'll reach the shore.

You can forgot a lot of things,
bad times, bad people, the first person you fall for!
You should however never forgive,
the person brought the time abhor.

Still fighting to reach there,
some days are tough some rewards gore,
wounds heal in some time,
you pick up your mantle again for the war

However let me make something clear,
whenever you come looking for,
I am not there anymore.

Some experiences make you sore,
I am not there anymore,
you re-live the same life, same dreams
but the same things become more....

I am not there anymore

I am not there...anymore

>For God created man to be immortal, and made him to be an image of his own eternity.
> -Genesis, Bible

Computer programming is a tool that enables humans to communicate with computers and make them do things according to their needs. All one has to do is just write a few lines in English called code, and the computer will execute the task. In the early days of computers, programming is limited to perform calculations, but now, the limit of computer programming languages is the sky. It can schedule tasks, book tickets, predict the weather, automate tasks, create twitter, and many more. It can virtually create a completely new world, sometimes more real than the reality itself.

But computer programming is just a bunch of lines written in English, how does that enable computers to perform these complex tasks. They do not understand or attach meaning to the language and for that matter, computers do not understand anything that we humans tell them. Computers do not understand this language, this code. We have to make them understand this in their language, BINARY!

All the code which is fed to the computer first has to convert into the language which machine understands, machine code. Machine code is represented using only two digits 0 and 1. There exists a number system called Binary Number system, consisting of only two numbers to represent almost everything that we perceive as symbols, shapes, images, alphabets, etc. These 1s and 0s are nothing but the states of registers in the processor. These registers together form a circuit that performs all the tasks. To convert this English code into machine code, it first has to pass through a computer program known as Compiler.

The compiler performs different algorithms (Set of instructions) to that code and converts it into assembly language an intermediate language between human-readable English code and Computer-readable machine code. Then assembler converted it into machine code. Consider the following example,

### A C language code

    #include<stdio.h>
    #include<stdlib.h>
    int main () {
      int num1 = 5;
      num1 += 5;
      printf(“%d”, num1);
    return 0;
    }

### Machine Code (Equivalent)
    11111110001111100010000000001000
    10000010000000010000000111111111
    00000111110101010101111100000000
    10101010100001111100001111110000 
    00011111111110000000110101010100
    01111010101010000001111111000010 
    10101010000001111110101010000011
    10111111110101010000000010101010

   (For descriptive purpose only)

 The above example above is a hypothetical conversion of the real C language code to its equivalent machine code. In this code, a variable num1 assigned a value 5, and then its value is increased by 5, which will make it 10. Then in the last line, the computer is being instructed to print the final value on the screen, which is now 10. This conversion despite being quite primitive does capture the basic idea of compilation and how English code is converted into machine code.

*But what does this machine code imply?*

This code is just a set of commands for the processor to turn on or off the registers with 1 means ON and 0 means OFF. These instructions set up a circuit that will perform the task which is written in English. The compiler will convert this code into the assembly language instructions and finally to the machine code. Then after the execution and completion of all the instructions task is completed.

But the most extraordinary or remarkable thing about this is that the circuitry which performs all this task already exists in the processor in the first place, it is just the code that enables certain registers and disables others to perform this particular task. Early computers may have a very basic circuitry but still, computer programming makes it do things which otherwise are not possible by default. This inspiration of circuitry comes from a very popular biological object, HUMAN BRAIN.

The human brain, which is like the computer processors, also acts in the same way. The human brain also consists of all the circuitry ranging from Einstein to Edison, Mandela to Hitler, from Shakespeare to Sylvia Plath, Muhammad Ali to an obese American, from Kabir to orthodox Pandit, the human brain can be programmed to perform like any of these people. All the circuitry is there, and research is showing that the human brain is structured in a way to improve itself with generations. So, with time we must be seeing more advancements in the fields in which we programmed our brains.

However, the surge in the numbers of obese Americans or orthodox pandits are a lot higher than compared to Einstein or Kabir or Shakespeare population-wise. This disparity exists because most of us are ignorant of the fact that humans are pre-programmed to perform any task, cling onto any ideology, be a part of any culture, to embrace any thinking or to reject any. People deny the existence of the very circuit which is enabling them to deny its existence!!!!

They are ignoring the possibility that all it takes is just a good code to instruct the brain to do those tasks. However, people assumed that, if they are following a certain ideology or belongs to a certain group their children have to do the same, or in more accurate words, they thought that their children won’t be able to become a part of any other group or culture as they are born to them.

This attitude is the main reason for such a high number of orthodox pundits or obese bodies and so fewer Einstein. All of this ignorance is the root cause of all the communal violence across the globe, criminal cases, rapes, honor killings, suicide bombings, caste system, etc. Killing someone because a better coded brain finds a perfect life partner for itself but their elders do not consider them a wise match because it contradicts their circuitry as the two might belong to a different ideology or killing someone because of their eating patterns are different from the others(beefeaters) or denying someone the same water which people drink thinking that their touch will make the water unfit for drinking(Dalits in India). But all these problems exist just because humans are constantly denying that they all are just currently coded in one way, and if they want, if they try, they can choose to code their brains differently. All the circuitry is there. All of them can be programmed into any of them, it is just their fathers have chosen this way(code). Had it not been for their fathers and forefathers choosing this code they might be a completely different person.

If humans accept this fact, that they’re pre-programmed and all it takes is just a different code to change or a good code to alter them into a better version of themselves, then the world would be so much better place to live. If humans start to exercise this in their general life and try to feed their children a good code not only one good code but a different variety of code, then, it will increase rational thinking among all the coming generations and in the community likewise. There will be a higher tolerance in the world and a better version of all the ideologies (we have come a long way from Pac-man to Pokémon go). All the world religions will be so much more peaceful as people will accept that they could be them too if are coded differently and even could be like them now if they switch their codes. This will introduce a human race so advance no one would have ever thought.

One of the interesting things about computer coding and compilers is that they’re improving every day. What is dull and boring in the earlier days of programming has become visually attractive and mentally engaging. The same would be the case for human coding. If people continue to code their children with good instructions every next generation would be more advanced than the former one, the process will achieve dynamics and will continue to thrive over the years. The advancement in computer programming is a result of great efforts from the coders who are working day and night for this advancement. Similarly, people also have had to work tirelessly to achieve the same feat for human programming.

If people truly work on human coding then, soon the day will come when we meet the best of our people. We’ll have a society which appreciates more and complain less. No more Hitlers, no more Romans fighting for their religion, no more orthodox preachers, but a race of scientists, poets, artists, innovators, thinkers, writers and, __HUMANS__.


Computer programming is a tool that enables humans to communicate with computers and make them do things according to their needs.

Creation of adam

We the creator?

Have you created a site and are worried about the layout for the larger screens. With work from home becoming a norm, many developers are setting up their desks with big monitors, really big monitors 😅

If you have created a layout for 100% of the screen width, it will look ugly, bloated on these bigger screen sizes, and hurts the readability of your content. If the user has to skim from left to right on their 42-inch screens, they will soon feel tired and leave. 

You have to structure your content in such a way that whenever a new user comes to your site, the main section should not take up more than a pre-decided fixed space on their screens. The content should be in the attention span of users so that they can concentrate and get the most out of your content.

![Layout One](//images.contentful.com/hx2v5p1u46xh/3Oe4mDlq0TI6ct63fLU0PC/3fdd34512cd9eb1e828b7782258ef524/Screenshot_2021-08-09_at_12.21.20_AM.png)

Just at the first glance, you can tell there is some major problem going on and the problem is obviously the layout. So how do we fix it then?

This problem is basically two steps.

- Set the background to the full width of the viewport.
- Set the width of the container (content) to a fixed width and not to scale beyond that.

The first part is fairly easy. We can select the main tag, give width 100% and we're done. And for the second part, we just have to set a max-width for our content. The question is what will be this max-width?

So, there is no hard-coded value for this max-width. It can be the max-width of your design file like 1440px (recommended). You can also go for something shorter than that, like 1280px. The number is up to you, but it shouldn't be more of a value that'd unleash the bloated layout monster. Once the max-width is set, you can use any trick to center the container on the webpage with one simple trick is __margin: 0 auto__

If you're using some CSS framework, then chances are it already has one *container* class available just for this purpose.  For example, in tailwindCSS, there is this container class.

When you apply these two basic things, the width 100% to the body, and the container class to the main section, you'll get this result. It's looking a lot more organized and controlled than the previous one.

![Layout two](//images.contentful.com/hx2v5p1u46xh/4NxihuK7qEWGK1LdXuGLEo/3524266f6288b0d3560337548d007e3e/two.png)

You can check out the tailwindCSS code for this layout [here](https://play.tailwindcss.com/4FxuX8ap2I?layout=horizontal&size=1960x867).


Have you created a site and are worried about the layout for the larger screens. With work from home becoming a norm, many developers are setting up their desks with big monitors, really big monitors 😅

Thoughts from a scattered mind

Recent Posts