pythys

So I spent over 40 hours of work on what is supposed to be a simple bug. Google Maps are not rendering when the size of the map canvas is above 768px. You would think that is a trivial thing right? Wrong!

Web applications are simple. After all it is just HTML, CSS and JavaScript. When I started web development I thought the most challenging part for me would be JavaScript and learning functional programming concepts. In practical real applications though, my worst bugs were CSS based bugs.

CSS is extremely simple to code, but notoriously hard to debug. What makes that even worse is when you have legacy code with mixed pure CSS and higher CSS libraries like SASS and LESS.

The lesson learned from this bug hunting session is to always be consistent in your coding style and simplify as much as possible. CSS in a single file is simple, but when you have hundreds of CSS files with different !important modifiers that load at a different times and locations because of the back-end programming frameworks that you are using then things get very, very complex. In fact, for every new project we launch, our aim now is to try to strip down CSS files to only one source file (SASS based) and be done with it.