November, 2020 - Anthony Marques

(AS ALWAYS THERE IS A TLDR BELOW)

The sticky footer. If you have been searching for a while then i think you know what a sticky footer is by now (if not here is a good explanation of one. The challenge is that there is no short way of doing “position stay down please” like so:

position:stay-at-the-bottom-please-thanks-k-bye

You sadly need to know what is going on and what other components/elements are invovled in order to get the position of the footer right at all times…sticky footer style kinda times.

So we now know that there is no one position solution and no position: “sticky” is not an option<insert sarcastic tone>

please note the styles, the colors are horrible.

I tried with the min-height set to 100%, but no dice for me for some reason. The sticky footer is a tricky concept to catch. You need to understand the position property and also its relationship with the absolute position.

Think of the absolute position… its relative to the other style/component overall position.

(had to add a pause when proof reading the sentence)

If this doesn’t work..i would only imagine that the scope of your relative element is not aware of the style that has the position of absolute. Its ….relative to your project and how its structured.

The margin and padding being set to zero is to make sure that the “min-height” takes on the full page. In some cases you may not want to have a scroll bar showing when the page is blank.

TLDR

Of course this is what worked and made sense to me i’m open to update this post or remove it entirely 🙂 have a great evening. (Yes this is a repost on a footer topic that i tried to cover and understand and to which i didn’t understand, so this should work i’m sure of it)

html,
body {
  margin: 0;
  padding: 0;
  
}
.wrapper {
    min-height: 100vh;
    position: relative;
    background-color: rgb(227, 228, 231);
}

.content {
    min-height: 100%;
}

.footer {
    position: absolute;
    width: 100%;
    color: rgb(42, 63, 121);
    height: 100px;
    bottom: 0px;
    left: 0px;
}

Notes:

html, body style updates is to ensure that the wrapper class takes in the whole screen size without padding

.wrapper has that min-height: 100vh (100% of the view height of the screen/device,
position is relative, think of it as a note of where this element is

.footer position absolute, accordance to the relative positioned element
bottom and left refers to setting the element relative to the other element and
place element at the 0th bottom left px of the screen…of the element

Sadly i only have an angular sample project, but it is better than nothing and the results stay the same this uses basic css and works on IE so.. apparently flex box and sticky footer doesn’t work for IE so i could be corrected on this.

Repo for your tinkering: tony2tones github

As always there is a TLDR. Its been a while and yes everyday i’m still learning so much about myself and yadda yadda lets get on with it.

Thankfully i am blessed to work at a company where ‘Process is King’ (although this can be a good and bad thing…but that’s another story). As part of said process when it comes to stories/features we have a definition of “Ready”, this is a super important concept. This means that all questions have answers and you know as much as you can about the task/feature and there is no blockers or dependencies (i won’t go into detail but that could be anything from does the project actually run locally to do you need an API up for said feature to have you spoke to Big Phil yet?)

Each story/feature normally has its challenges and there are always unknowns and weird surprises…normally they just eat away at your time. These are the things you and the team will need to be concerned about and the developer that will carry this feature will need to make a decision if they are ready or not.

Now for the list , this is in no particular order.
*checklist listed here is credited to my current mentor fyi.

TLDR

Do you have the requirements/BRS/documentation and have you read over the functional specs for the story?
Are there any dependencies?
Does the project I’m working on for this story run on my machine?
Do you have a high level understanding of the story?
Have you thought loosely about an implementation strategy?
Do you have the designs necessary
Is there a chance that you may have left the fridge open?

Overall there is always a lot of things to be aware of. The above list will help in most cases perhaps your project requires more particular checks before you can be “Ready to Dev”.

Of course if you feel that you do not understand the story or feel its too much for you or something on your checklist is not met, you must speak up to your Business Analyst or Project manager. This is super important to not set yourself up for failure.*

I am not saying that this list will take care of all the checks you need, but make a list that makes sense to you. This post is just expressing my opinion based on my experience so i’m happy to adjust my posts if they are not fair or correct….or if i have to add anything else
Have a great day.

Readers contributions

If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright.
Aaren Reggis Sela

Month: November 2020

[newbie] sticky footer css, a solution

[newbie]Dev notes: Basic checklist when starting a feature