How I Gained 25 Hours in Coding.

First off, let me go on a rabbit trail and say, I love my day job! A year ago, I would have never dreamed that I would be sitting here telling you about my experiences in coding. I honestly love learning and finding better/faster ways of doing things. This is a very exciting time in my life. My wife is able to stop watching kids during the day. Now she just watches our 2-year-old son which seems a lot easier after watching 5 kids. The drive to my work is literally 15 mins. I couldn’t have asked for a better location. The people are great, and I’m so excited to begin this next journey into coding websites for a living.

Ok, I’m done with my rabbit trail. Now back to coding.

This week I figured out how I could gain 25 hours in coding. What I discovered is not mind blowing. It’s a couple small steps I added in my process, but in the long run saved me 25 hours of coding time.

The first step was literally wireframing out all my grids and boxes on a piece of paper using a pen. It took only a few minutes but was worth it to me to have a game plan. After drawing it out, it was within a matter of seconds implementing my code. My goal is to do more intentional code and less mindless coding. Overall when I don’t have a plan and just start mindlessly coding I run into unexpected errors that could have been prevented if I would have spent a few minutes coming up with a plan.

And here is my second step that is ever changing and growing….have you ever heard of the term “repeatable code”? It is basically code that can be used on the majority of every site that you build. It more than likely has generic labeling to allow for flexibility.

Have you also heard of what are called “code snippets? If you work in an agency, these two terms should be very familiar to you. If you don’t know what a code snippet is then I will explain. Code snippets are repeatable code that allows you to access them within a matter of one or two keys strokes. Once you type out the prefix and hit tab or enter, the code that you normally spend an hour on typing out will autocomplete within seconds.

I work within Atom editor and have found a package called “atom-bootstrap3”. This package includes your basic code snippets of repeatable code.

Screen Shot 2017-04-05 at 10.37.28 PM

Once installed, scroll down and click “view code”.

Screen Shot 2017-04-05 at 10.43.13 PM

Here is where it gets fun and super productive. You can add custom code snippets within your editor. This is super powerful and a huge time saver. The trick is to be mindful while you are coding and be aware of code that is being repeated multiple times. Once you discover what code is being repeated then you can add it to your custom code snippet’s file.

To continue, once you click on “view code”, it will bring you to a new window that looks something like this.

Screen Shot 2017-04-05 at 10.45.13 PM

Click on the “snippets” folder.

Screen Shot 2017-04-05 at 10.46.13 PM

Then click on “grid.cson”. The .cson means Coffee script Object Notation. Once you click on grid.cson, it will look something like this.

Screen Shot 2017-04-05 at 10.48.05 PM

Every line is important and needs to be taken into account. If you have never worked with code snippets before, then you will find that this next part can become frustrating very quickly. The more attention to detail, the better it will turn out for you.

Ok, so let’s break this down a bit. On line 1, you will see ‘text.html’; that means the code below can only be utilized in an HTML environment. This can be changed to suit the language that you will be adding it to. For example, you can also create code snippets for writing in javascript too. I have used a front-end javascript framework called Vue.js and my instructor created this code snippet.

Screen Shot 2017-04-05 at 10.58.43 PM

As you can see, the line starts with ‘.source.js’; that means that the code below is going to be utilized within a javascript environment. 🙂

Ok, so I covered line 1. Line 3 is for naming purposes. Line 4 is what you will type when wanting to activate this specific code snippet. Also, when you start typing out the prefix, line 3 is what you will see first to notify you that your code snippet is ready to be activated.

Line 5 is where you will begin adding your specific “repeatable code”. The three quotation marks do matter. They need to be at the beginning and the ending of your code snippet. Line 7 you will notice a dollar sign with a number after it…. this allows you to choose where your cursor will begin typing. Another great feature is that when you add that same dollar sign to multiple times they all edit at the same time. If you were to add another dollar sign with an ascending number then it will allow you to tab through to the next one.

Screen Shot 2017-04-05 at 10.48.05 PM

Also, just FYI… be mindful of indenting. If you look above on line 22 and line 24, both divs line up. Lining these up will help minimize the headache up your first code snippet not working. And if you switch back over to your file to test out your first code snippet, be sure to reload the file by using shortcut cmd + shift + p and then typing “reload” and hit enter.

If your code snippet still doesn’t work after reloading the page, check out this link below for more information.

This is the tutorial that I used as well to get my first code snippet up and running. 🙂

That is all for today. Leave comments or questions below.

-til next time.

Shaun Willis


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s