Keep the footer at the bottom

Sirage Al dbiyat — Mon, 01 Mar 2021 14:39:40 +0000

A Page footer should be always kept at the bottom of the page, for some it is maybe a difficult task, taking 1-2 hours to accomplish while it is pretty simple. Probably you are reading this right now because you are stuck on it. Let’s show you how to keep the footer where it belongs in 2 steps (with explanation).

TL;DR Go to the bottom to see the code.

1- add a footer under your body then add a class .footer to it, then add these properties to the class.

.footer {
    position: absolute;
    background-color: #333;
    color: white;
    width: 100%;
    bottom: 0;
}

Explanation :

putting a position absolute in our footer will remove it from the document flow so we are free to give it a new position.
Since it is a position absolute we give it a bottom: 0, but this wont let the footer go to the bottom of the page, instead it will be placed relatively to the containing block which is the body in our case.

2- We should now create an HTML element under body wrapping all pages content including footer and header, add to this element a class and let’s call it .mainContainer

.mainContainer {
    position: relative;
    min-height: 100vh;
}

Magic !, Now the footer is at the bottom of the page.
Explanation :

When an element with a position:absolute contained by an element with a position: relative it will be placed according to the parent element.
giving a min-height : 100vh means that the mainContainers height will always take 100% of the browser page height.

As a final result, you have now the footer at the bottom of the page, contained by mainContainer.

TL;DR Here is the code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div class="mainContainer">
        <div>
            My content
        </div>
        <footer class="footer">
            My footer
        </footer>
    </div>
</body>
</html>

in your main.css

.mainContainer {
    position: relative;
    min-height: 100vh;
}

.footer {
    position: absolute;
    background-color: #333;
    color: white;
    width: 100%;
    bottom: 0;
}

you can follow me on twitter.
Check my website iLoveSemicolons.io for more articles/tutorials and Open Source project

Happy coding :)

Over-engineering your app, the orange juice approach

Sirage Al dbiyat — Wed, 02 Dec 2020 12:40:37 +0000

What is over-engineering in a simple approach, the orange juice approach :

The problem : You have a farm where there are just oranges in it, so you opened an orange juice shop and you decided to start selling orange juice in two months.

The optimal solution : Buy an orange juicer, adapt it to your needs and deploy it in your shop as soon as you can to start selling orange juice in two months.

What you did : You bought a lot of different pieces and began building/inventing a juicer that would make juice from a lot of fruits and vegetables (oranges, onions etc.). This juicer is connected by both wi-fi and Bluetooth to a mobile app created specifically build for this juicer, the juicer will start juicing fruits by clicking on a “juice” button on your mobile app.

The result : You finished building your powerful and well-structured pressing machine 4 months later, but you ended up having 2 month late on your project timeline, resulting in the loss of all your orange crops because they were rotten. You’ve lost time and money because of your solution, but maybe the machine you invented will be used by many companies because it is adapted to a lot of fruits and vegetables, it is fast and powerful.
Developers could easily be drawn into the over-engineering hell when developing new applications.

Over-engineering is bad even for scalable and large applications, it is also an absolute over kill for smaller ones since it adds more layers of complexity and more complexity means more maintenance and more development time and more expense.

React apps use components, that are like Javascript functions, they accept arguments called props, and return HTML elements. Components makes “dynamic html elements”. React allows developers to make reusable UI components, this reusability concept will facilitate and accelerate the development process, but this concept may also lead some developers to over-engineer their applications.
In the next example, you can see a simple console.log that will introduce an Orange.

const oragne = "Hello, I am an ornage";
function introduce (fruit){
    console.log(fruit);
}
introdice(orange);
//output : Hello, I am an ornage

Another solution approach approach

In this example, it is a function that can introduce any fruit we want, but in our case we only want to introduce an orange, so why making a function to introduce anything ?

//Overkilling example
const fruits = [];
const orange = ["Orange", "Hello, I am an orange"];
fruits.push(orange);

function fruitToBePresented(fruits, fruitName){
    for(let i=0; i<fruits.length; i++) {
        if(fruits[i][0] === fruitName){
        introduce(fruits[i][1]);
        }
    }
}

function introduce(fruit){
    console.log(fruit);
}
fruitToBePresented(fruits,"Orange");
//output : Hello, I am an orange

How to prevent overengineering your components :

Don’t make a component if you don’t want to use it more than once.
Your code needs to be simple and clear. Simple doesn’t mean that things should be done in the “it does the job” way of things.
Ask yourself these questions, “Am I writing a well-structured code ?, is it complex? , will a random developer understand my code ?”, if the answer is no, you need to redesign your code.

Enjoyed this post ? , react to it and follow me for more :)
You can also visit my web site iLoveSemicolons.io

DEV Community: Sirage Al dbiyat

Keep the footer at the bottom

TL;DR Here is the code

Over-engineering your app, the orange juice approach

What is over-engineering in a simple approach, the orange juice approach :