Pond Life Ep.2

Hello Everyone!
Welcome back to the pond! Last week we touched on the importance of mentoring juniors and Github best practices. In this week's episode, we'll be following up on the junior workflow from last week by discussing two tools you should definitely have and how to install them, exploring new ground by touching on some entry level SCSS techniques, sharing my AHA! and FAIL moments of the week, and lastly, our weekly query for you good people out there to ponder. So lets jump right into it shall we?

The right tools for the job..

Here at Metal Toad we mainly work with Drupal/PHP, the LAMP stack so I will discuss two must have tools for this environment and how to install them. For many Juniors (I know this was definitely true for me) you will spend the entire first day, maybe even more than that, just trying to get your local environment set up. Since environments can vary greatly from agency to agency we will just be focusing on two of the most helpful tools (for now) along with basic installation instructions. For me, configuration was doubly tricky because we use virtual environments here but it was worth the extra trouble and I highly recommend a virtual environment over just using a local environment. The reason for that is because you can use whatever tools you want in your project locally but still have a virtual environment that matches your current project requirements.

Our Lead Architect Dylan Tack has come up with a brilliant solution that he is providing completely open source which he calls "Trevor" (it is named after Neville's toad from Harry Potter) and it is simply amazing. Stay tuned in the next few weeks for a video tutorial on how to get your Trevor environment set up. It will change the way you look at work environments and give you a reliable outlet to use whatever environment your projects demand without giving up the use of your familiar local tools.

Drush

The first tool you need is Drush (even though it would be very Miami Vice of you to accentuate the "D" and all, it's just drush, pronounced as one word). What is Drush? Glad you asked! It is a shell interface for managing Drupal from your command line. You can download the latest stable version of Drush from here and there is a list of all the commands along with what they do here. You can use it to implement updates, installs, field commands, project manager commands, SQL commands, and well...pretty much everything helpful. Use it! If all goes well, you should see this when typing drush -v in the command line along with a long list of various drush command definitions:

Capistrano

The next tool you're going to want is Capistrano which is a remote server automation and deployment tool written in Ruby. It is a safe, reliable, and efficient tool for pulling/pushing/deploying databases from various servers. Ruby comes installed on Mac OS 10.6 or greater so if you are on an OS X machine you are good to go. If not, you can download Ruby here. If you are on Windows you can download it here. Once installed, make sure your gems are up to date by jumping into the command line and enter the following command: sudo gem update --system. Now you are ready to install Capistrano (This may take a while). While still in the command line, sudo gem install capistrano. Now add its dependency sudo gem install capistrano-ext. Congratulations! You can now run Capistrano commands by typing ‘cap’ in a terminal window. The flow should look like this:

You can verify the install by running cap -T in the command line to see a list of possible commands. (The example image is just the start of the list. The actual list is much longer.)

SCSS

The final topic we will be touching on today is one of the most important to keep in mind as you delve deeper into development: do not underestimate or ignore the front-end. Since the vast majority of aspiring devs have the most trouble wrapping their heads around back-end logic, many opt to ignore the front-end for as long as possible and instead fall back on pre-fabricated, front-end frameworks such as Foundation and Bootstrap as they work on their logic chops. The problem there is that both sides go hand in hand and the fact is, knowing one will most definitely help you understand the other. It will also help you obtain the ability to approach your tasks better during planning and implementation. These days, the front-end can be just as complex as the back-end and should be treated similarly. SCSS is moving toward taking an object-oriented approach coined OOCSS. Information on that can be found here. Since this blog is mainly for juniors and people outside of development just looking for insight, here we will stick to discussing basic SCSS.

SASS

There is a lot to be said about the front-end so I will be speaking more about it next week too but I will start by providing a brief intro here. SASS stands for "Syntactically Awesome Stylesheets" and is an evolved, more dynamic version of CSS. It allows you to do amazing things such as utilize:

Variables - Assign variables for colors, font stacks, or any CSS value you want to re-use.

Nesting - You can nest CSS styles much like HTML and give it a hierarchy which also makes it more readable.

Partials - You can create files that are modular by prepending the file name with an underscore. In this way, the file won't be generated into a CSS file and you can separate styles in an organized manner (example follows below). The result lets you use @import to make those styles available to any file that requires the styles.

Mixins - This one is fun! It lets you make groups of CSS declarations that can be reused. You just prepend your module with @mixin and when you want to reuse it somewhere else, after the class you want it to be applied to, put @include in the parenthesis followed by the name of the original module. You can use parameters with this directive too.

Inheritance - Using the @extend you can share a set of CSS properties between selectors. This is a great way to keep your code DRY.

Operators - You can use operators too. How cool is that?! This is great for width, margin, float, and general container situations.

Great stuff all around. More on this can be found on the SASS website complete with visual examples here. This is an example of what it looks like in a project :

AHA! and FAIL

Ok so this week's AHA! moment also ties into my FAIL. It came to me when I was trying to isolate a tag that was nested within multiple classes. I kept failing to target the tag because of specificity. CSS selectors all have different weights and specificity determines which CSS rule is applied by the browser. If two selectors apply to the same element, the one with higher specificity wins. Here you can see the p tag I was trying to target, highlighted in blue :

My goal was to go for the most unique tag in an effort to ensure the styles in the module I created only affected that particular p tag. However, I targeted the tag too literally in my .css file. I literally wrote all the classes out, together with no spaces :

The problem here is that I made the specificity too high which would not allow me to override it later down the line if I needed to. I learned that finding and using a specific individual class is good enough to target an element; you don't need to be overly specific. In SASS your goal should always be to target an element with as few selectors as possible.

Since .pane-1 is very specific, I used that to target the p tag and it did the trick, kept the specificity low, and hit my target using only a single class:

That's all for this week. Aspiring juniors and technology enthusiasts, please share your answers in the comments below:
What tool, best practice, or framework would you like to learn more about?

For the seniors:
Do you feel that most developers don't focus enough on the front end?

I hope you enjoyed this episode. Don't forget to check in next week when I will be diving deeper into SASS, touching on some more Git command line action, providing an update on Dylan Tack's Trevor module, and sharing a link to our newest Toadcast which includes an interview with yours truly and our very own VIM master and talented developer/K-Pop fan Jeebak Kim!