I have had a proper 9-5 job for 3 weeks now. I now understand why most developers do not try to create tech start-ups all the time. After 8 hours of staring at a screen, I do feel that it is more difficult than before to get into the proper flow of things. With that on the table, I am still coding routinely and remember why my UI's are usually simple. Creating awesome animations and beautiful UI's on all screen sizes is difficult. Now that I have iterated twice over my website's home page UI, I am making the decision to dumb it down and make it simple like my last project. A simple UI done well looks better than a complex one done poorly any day of the week. I am particularly excited that I have outsourced my Hero image to Fivver. This time round no holds are barred. I will use a professionally made image instead one I found on Google.
I also have a cool CSS trick to report. When creating the header for the third time, I decided to implement a hamburger menu. I rendered this under the section that had the rest of the header in the DOM. The problem was that when the menu would slide out it would go over the top of the hero section but not the header (because in the HTML it was rendered second). I figured that if I just slapped a z-index on it then that would solve my issue. It did not. So before I rearranged the HTML (JSX in this case), I decided to solve another issue with the slide-out menu. I needed to remove it from the document object flow in order to not have the rest of the site rendered under it. The menu having a height of 100vh obviously needs to have stuff under it. So I made the position absolute and the hero section appeared where it should, success. But then I thought to just add a "top" property to the slide-out menu to force it into covering the header; that way I do not have to bother with the HTML. In doing this I found a cool trick, if you add a "top" value of 0px, for some reason it renders the slide-out menu over everything else, even the header that is technically above it in the DOM. The slide-out menu does have a height of 100hv so it is as tall as the screen, but before the "top" value of 0px it would not cover the header, now it does.
Just thought I would share that trick. So I am gonna get back to the grind. Sorry for the terrible blog schedule. Got a lot on my plate right now. Honestly, I still love the idea of the project so I still am not willing to share it.
Top comments (0)