RailsBridge

Recently I had an opportunity to attend a Front-End workshop organized by RailsBridge. It was my first event with this organization, and I look forward to coming back and learning more about the Front-End technologies, as well as Ruby and Rails. I was impressed by how supportive the environment was, and I already want to come back as a volunteer to help teach a class. Watch out!

After the workshop, one of the teachers - Andre - helped me to debug some old code of mine. In the very early days of learning HTML/CSS/Javascript/jQuery, I created a small project, where a user could press a button and a grid made of div elements would be displayed. The user would then hover over the grids and discover a hidden picture. 

The animation worked as expected in Safari and Chrome but not in Firefox. The grid was supposed to have 35 div elements on each side, and the main wrapping element was set to 960 pixels in width. For some reason, Firefox was displaying a 36th row consisting of just one div. That's how I learned that there are differences in how various browsers round pixels in fluid grids.

A proposed solution was to increase the total page width from 960 to 961 pixels, which took care of the rounding errors so that the proper number of div elements was displayed in all three browsers. Rounding errors is something I will keep an eye on from now on in future work.