Monday, July 27, 2015

Day 6: Bootstrap, LESS, and Git

I'm on the second of the fourteen weeks at the bootcamp and I'm feeling optimistic, especially since I had a breakthrough this weekend with my first front-end framework, Bootstrap. The first time I ever heard of Twitter Bootstrap, Bootstrap for short, was during my last year in college. Up until then I had coded all my webpages from scratch and assumed that that was how I was expected to code my all my projects for my career. Then Bootstrap sprung up as a framework with pre-built CSS features that makes creating websites much easier. I tried to teach myself Bootstrap back then but it was really just so confusing. I told myself that I'd come back to it another time. I bought a tutorial book earlier this year and gave it another try and while the basics were easy to grasp I had a difficult time understanding how it can be applied to bigger projects.

Some frequent questions I had were:

  • What if I wanted to make a change to the font-size? 
  • What if I wanted to have more than twelve columns of boxes in a rows?
  • How can I specify background settings?

In hindsight the answer to all these questions seemed so obvious. Last week I began to grasp the bigger picture when my classmates and I briefly covered the importance of resets. As I mentioned on day 2 our group covered resets, which solved the problem of browser compatibility. To elaborate, every browser has their own sets of rules for font-size, typography, margins, etc. This makes it difficult to sites to run identically on all those different browsers. Resets chance the defaults by implementing their own rules, henceforth compatibility. They operate usually as reset.css and if you place your styles.css stylesheet after that you can make your own modifications while keeping reset.css as the default. 

One of my classmates took the time to explain that to me and at that moment something clicked in the part of my brain that dealt with the Bootstrap conundrum and I asked if Bootstrap can be considered a reset. He said yes. Bootstrap's css file is default and I can make modifications so long as I place my CSS file after the Bootstrap. I kept that in mind for the weekend that followed. 

On Saturday I began the Bootstrap section. Bootstrap covered just one section of the CSS chapter but that was enough to understand it beyond the simple tutorials. Next thing I knew I was coding up a webpage with ease. If I needed to make a change to the margin or increase a component's height I'd just make the modifications on my styles.css sheet that followed Bootstrap's. I can't believe I've been making coding so hard for myself all these years. This felt like a milestone accomplishment. The next day I wanted to do more and so I began to lay down the foundations for a personal website that I've been wanting to set up. I laid it out in half-an-hour, loaded it onto my Github account and intend on making it prettier before I even consider publishing it. 

Today and I met up with a classmate again and we covered the last section of the CSS chapter, LESS. I've known about LESS for as long as I've known of Bootstrap but I never knew how to implement it. Prior to the bootcamp I was instructed to set up MAMP, a server application, on my computer. I did it but didn't understand why. Then today the lecture instructed me to activate it while having the link to the LESS site on my webpage's header. It translated LESS into my webpage, making it easier to organize the contents of my CSS file. 

We spent most of the CSS chapter learning how to write CSS code from scratch and ending it knowing that it can be done much simpler using Bootstrap and LESS. I guess it's all part of the preparation. This kind of reminds me of an episode of Arrow where Oliver learned how to use the bow. Since he was a novice Shado made him slap water in a bowl for days. Oliver eventually got frustrated and demanded to know why he was doing this and she told him its purpose was to focus his strength to handle a bow correctly. This might have been a play off The Karate Kid but the message was the same: repetition is key. 

After lunch came the new topic of Git and the Terminal. I've been using terminals for four years and so I brushed through half that chapter is no time. Then came the topic of git. Git is a repository for recording our data and reverting back to a certain step if needed. I've hard a hard time using it on the terminal and made it easier on myself by using the Github app on my computer. Still, I've known that a day would come when I'd have to face using git on the terminal. Even the developers at my old job used the terminal even though many of them had macs and could have downloaded the Github app to avoid the complicated mess of seeing everything through the terminal.

The process of using git is simple: make a change to the code, then commit to the repository. Making a commit was actually very simple. Now reversing it, that was a completely different story. For some reason git would not reverse a commit. Even my classmate couldn't figure out what went wrong. We restarted that assignment a couple of times but it didn't fix anything. The day eventually came to an end and I had to leave without finishing the rest of the day's assignment.

Tomorrow we're beginning jQuery and I'm behind with git. I'm going to have to try to stay up tonight to try and get this fixed. He's hoping that we can do a collaboration before we can move onto jQuery. If I can fix this one problem tonight I might be able to work on the collaboration in the morning and have time for jQuery. Maybe.

Well, at least I take comfort knowing that the front-end components have been greatly simplified. These lessons build up and the foundation for tackling the tougher problems has been strengthened. 

No comments:

Post a Comment