The art of problem solving
#dailychallenge23
A solution is not great by it self, it needs its nemesis: the problem. These every day tasks that brings pain to a group of people need to be dealt with an iterative process of data gathering and testing.
Creating products is not an easy task, I do like to complicate a lot and after to much struggle we find out that the real problem worth solving is a different one.
One of my first works was a single page website with 5 sections where each should have the height of the device screen. At a first glance this was an easy task but in the end it was a complete nightmare (of course I’m over reacting). Here’s the story.
1- The first is never the last
Any one who works in web development (specially front end developers) knows that to set the height equal to the current device screen you need to set it to 100VH (virtual height). At first it worked pretty well until I found out one of the many browsers didn’t support it and it needed to have height in pixels. I decided I should use a function to solve this one out! I made a function that could get the device height and force it into the sections in pixels, so it would work perfectly in every browsers. Ta-da!!! It worked… or so it looked like it.
2- Three problems in one
The content inside the sections wasn’t centered, which means that the text or images were all fixed in the top of their respective section. So in different screen sizes this content wasn’t adapting by itself in order to fit in the middle of the sections. So I just needed to put all the content centered in the middle and I could do that by setting margins for them but the main obstacle still was the different screen sizes. I could use percentages in the margins but it wouldn’t be totally right and so it needed to be done in another way. I tried the approach with a css property named “transform” and the value “translate”. This enables me to set a percentage or virtual height for the content, so I can set a rule that makes all the content to move 50% down of its current height. So I went with “transform: translate(0, 50VH)” but then again it would work on all browsers and using “transform: translate(0, 50%)” wasn’t going to work perfectly as it should. I came up in a dead end again… After more or less then an our I remembered about my first love in the css world “FLEXBOX” which makes it easier to align all the content in the middle of the sections, plus it was compatible with the browser that was giving me trouble.
3- There is always a forgotten special case
After a long lasting battle there was a bitter discovery. I did resolved all problems and conflicts but there were still some work to be done. There was a section that had 3 cards with some text inside it but the height of those cards was different because their text length. It worked well setting a fixed height for them but when put in some smaller screens the words would come out of the box… another problem was coming along. Wtf, there is no end to this!!! How did I solve this one? I made another function to fetch the current height of each card, find which one is the largest and then force all of them to share the same height. Hurray!
4- Sometimes you need a wingman
The struggle continued. I had finished testing everything in mobile and desktop when I actually realised I forgot about one thing. Fortunately I think for two people, or else I’d need someone to help me out with testing. I thought: “what would happen if a user uses his device in a horizontal position instead of the vertical one we always use?”. I tested it and what a nightmare. All the rules I made were disconfigured, the heights weren’t setting straight has I wanted to and, the last but not the least, I was almost ready to give up. Actually I did, I paused my work and went home, no more time for this! In the next day the so called nightmare wasn’t that bad, what really went wrong was the fact that I didn’t set the functions to work whenever the window was resized so that’s what I did, I just made the functions work when there was any resizing.
5- The client bad timing
The client asked for some changes, it was nothing special, he just asked to change the height of the first section in mobile devices. So after all the work there was another set o rules to change. At first it was a bit struggling for sure but with all the functions I made I knew how to twist this sticky situation. I changed some of the previous functions into a different one that worked when the device width was less then the device height. This would display the first section in a different aspect in each horizontal and vertical positions.
Well the problem wasn’t solved yet but let’s go to the point. Solving a problem can be difficult because there are always micro-problems in each iteration of the process in solving these kind of stuff and solving a problem to make a business company is the same, you will face micro-problems after another.
Just to see how much work a single problem took me, I’ll list the problems that came along the process of solving the first one:
- Set the device height to 5 sections (Starting problem);
- One of the browsers wasn’t compatible with Virtual Height;
- The content wasn’t centered in each sections;
- The css rule transform:translate wasn’t a good solution because it used VH or percentages;
- There was a height difference in the cards (a problem that I didn’t thought would actually happen);
- The rules for the device in a vertical position didn’t match in the horizontal;
- The client asked to change the first section (a client “change” is also knowned as a “this first feature is a problem, please fix it!”);
- The rules for the recent request weren’t compatible which ended in restructuring the older functions into a new one.
Thanks for reading, hope it helps in taking a deep breath in your next creation or solution for your business.
Cheers,
