Follow the CSS Road

Posted by Stephen Wright on March 17, 2019

When starting on my first Sinatra project, I felt empowered. I felt confident in my ability to build my migration table (despite having to take a long time to build the seed data to load into it), I built my models with the necessary password encryption, configured my application controller to divert responsibilities to separate controllers for users and destinations, and I was on my way!

Did I hit some hiccups? Of course, we live in the land of the failing in software engineering. Overcoming formatting issues with my image url’s and having to refactor my edit and delete routes/views are nothing out of the ordinary since I sometimes forget to put a ‘/’ in front of my route or a ‘;’ at the end of my css elements.

However, that leads me to where I had the most trouble on this project: CSS. I know the specifications were much more focused on Sinatra and ActiveRecord, so I am grateful that I was able to check off all of the boxes for the requirements and even the bonus “error message” requirements as well, but nobody wants their first Sinatra baby to be ugly.

I tried building a lot of the CSS specifications on my own, but for my project - a traveler’s take on Pinterest - I REALLY wanted each destination to be set up in the card format. I searched online for different examples of how to do this, but none of them worked (I believe because I was using erb instead of pure HTML), I downloaded Semantic-UI from a suggestion, but had a terrible time trying to get it to work before removing it, and then I tried using Bootstrap to use some of their pre-built HTML/CSS designs. I failed at this too because I believe it is not meant for erb, and they always included JS specifications as well.

So I ended up back at making all of the CSS elements myself. I’m proud of my first website and all that it can do, but while my baby isn’t hideous, she could look a lot better. I’ll take this project as a lesson to practice HTML and CSS a lot more. Funcationality is only half the puzzle, and as an engineer, I feel I must make sure users love the look of my baby as well. It’s a journey, and I plan to keep moving forward…