I’m a firm believer of taking breaks regularly, but something just happened today that I thought was funny.
In building a responsive website, I was tasked with creating an overlay to play a really short video showing off a feature of one of our new products (sorry for being vague, but it’s not released yet).
Because the image is going to adjust size based on width, as well as height, of the viewport, the overlay had to also react to these changes right away. I started with some really simple JS to force the image’s parent div to remain the same size as the image itself so I had a relative container to place the absolutely positioned responsive overlay. I even set the script to run on resize…
I kept thinking to myself, if only I could use a float so the browser would do all this work for me… but damnit, I need to keep this element centered… so off to lunch I go…
In the middle of eating my tostada it comes to me: use inline-block you newb!
Problem solved, no more JS, no more jankiness… sigh… removed about 15 lines of really badly performing JS with a high overhead all for display: inline-block.
What problems have you solved recently after a good break?
