Brevity in Code.

9/10/17

I recently watched a video that I think is very insightful and as a new developer it was quite helpful. It’s titled Brevity and Visualization in Code. It was centered around writing clean and concise code. Things like, why write long functions when it can be concise with half the lines. Also, the speaker went into reasons for keeping code within the 80 characters limit. He said that over time a lot of developers have thrown that rule out because of the large monitors we have now. A developer might think: “well I can easily read a line of my code up to 120 characters because I have this awesome 32 inch display.” Ok that’s true, but what about your team members? What about your boss while they are traveling with a small laptop? The speaker made an interesting suggestion. He said, try reviewing your code on a different device, such as a tablet, just to see what it looks like for other developers. That was just a couple of the topics covered.

Sounds like an informative video, huh? I would love to link you to it, however it has since been removed from the user’s YT page. I don’t know why. I forget who the speaker was too. I will be on the hunt for it though, and when I find it I will try to archive it and link to it from a future post. I would like to be able to re-visit it along my coding journey.

That video actually made an impact on me. It opened my eyes and made me think. When I finished watching it I opened VS Code and looked for any option to somehow highlight character 80. I found a user setting for a vertical ruler. Here’s how:

  1. Open the Command Palette
  2. Enter in user settings and press enter
  3. Enter in ruler
  4. Edit the setting for “editor.rulers”
    1. I set mine to 75. In my own opinion, it isn’t a hard rule. It’s just a warning, and I have already noticed a difference in my code. As I’m approaching the ruler, I start looking for a graceful breakpoint to drop my code down to the next line. If there isn’t one, and I go a few characters past 80 I’m not going to lose sleep over it.
      1. When you encounter a webpage with a wall of text, spanning from left margin to right margin, how likely are you to read it? What if that text was placed into three columns? A little more likely in the latter scenario, I bet. It would be the same mindset for code review.

We want less code like this:
{company: "Ninja Coders", title: "Engineer", technologies: ["HTML", "CSS", "JavaScript", "React"]}

…and more of this:
{
company: "Ninja Coders",
title: "Engineer",
technologies: [
"HTML",
"CSS",
"JavaScript",
"React"
]
}

…right? WordPress doesn’t do a good job at indenting pseudo code, so that might not look good on your screen but you get what I’m trying to say.

Speaking of indenting, the presenter covered that as well. He was saying that we have become obsessed with lining everything up, to a point where we end up with really crazy indentations sometimes. It can actually back-fire and make it look more chaotic sometimes. He showed a few examples that he has seen over the years and discussed ideas about cleaning it up, so the code would be easier to interpret. This also lead to a discussion about comments and he showed some examples of code comments that had a bunch of asterisks around them. He said we usually dive into the code first, so why waste so much space on comments. It’s true, when I review someone’s code I usually try to figure out what is going on before I read the comments. It’s like when you get a new gadget- most people tinker with it before they read the instructions. Maybe we should focus on better naming conventions. Let the function or class name explain its purpose.

It was a really great video and I hope I can track it down!

Cheers to clean code <beer mug emoji />

Advertisements

Firehose…

3/23/17

My classes are moving at a fast pace now. At Coursera.org I just finished a JavaScript project and at Thinkful.com I just finished up some CSS positioning lessons. It’s like drinking from a firehose! I’m having trouble keeping track of all the new things I am learning that I want to get logged here. Just over the past week I was introduced to Git and GitHub- GUI and command line. I learned the Git commands that I’ll be using the most as a developer. I’ve been practicing them in Git Bash. I’ve also checked out GitKraken to see what the GUI is like. I will be checking out SourceTree soon as well. The Git flow is taking me a little while to fully grasp but I’m getting there. I’ll have it down like an old habit soon. I’ve also been working out of three different code editors- Sublime, Atom, and VS Code – so I can get a feel for all of them. My goal is to pick one and move forward with that. Right now, I am leaning towards Code. I basically made a list of all the features I want my code editor to have and then figured out which editor I can get there with the least steps. Sublime wins; it comes with the most features out of the box. However, for some reason there is a draw to Code that I am having trouble resisting. I just like it a lot. So why fight it. I’ll most likely make that my go-to.

This is what my feature wishlist looked like. This is an out-of-the-box comparison.

  • dark theme (atom, sublime, visual studio code)
  • auto-indent \ beautify \ format (sub, code)
  • html boilerplate (sub, atom)
  • emmet (code)
  • vert guides (sub)
  • minimap (sub)
  • last line of code can be scrolled to the top of the screen (sub, code)
  • multi cursor edit (code, sub, atom)
  • insert lorem ipsum text (code, sub, atom)

As you can see, Sublime ticked almost all of the boxes. I should totally go with Sublime, but like I mentioned I am just drawn to Visual Studio Code more. From a fresh install of VS Code, all I need to do to get it up to speed, is install extensions for the boilerplate code and the vertical guides. The rest, such as the minimap, is enabled in settings. Pretty simple to get my coding environment to my liking. That’s exactly what I want too. I want the least amount of setup as possible.

Here’s a few things I learned lately:

  • The other day I had a realization about the CSS display declaration. I was having trouble fully understanding the difference between inline and inline-block. It finally clicked! I use inline-block if I need the element to fit inline AND if I need to adjust its dimensions. If it’s just inline, then I can’t adjust width and height.
  • I learned a couple methods for eliminating white space between inline divs. That’s something I have struggled with prior to these classes that I’m taking. If the divs are on separate lines then the browser renders the carriage return as a space, so by keeping the divs butted up against each other it will eliminate the space. Another method is to add “font-size: 0” to the parent.
  • I had another ah-ha moment when I was working on a JavaScript project. I was using a while loop but I couldn’t figure out why my variable wasn’t getting iterated. Well I realized I had the variable called within the loop so it was always getting reset every time the function was called. I placed it outside of the loop but it still wasn’t working properly. Well then I realized my while loop was looping until my variable was zero, so then it was reset back to the initial value each time the function was called, rather than iterating. That’s when I discovered the power of For Loops! I learned how to use an index to iterate, and then my project worked! It was such an awesome feeling to have one of those moments. I had been trying to get my code to work for at least two hours. As soon as I got the For loop dialed in everything worked! That’s the best feeling when I figure something out and learn something valuable at the same time.

 

There is probably a ton more to share but like I mentioned it’s all going so fast now! I’m learning a lot and I am really enjoying it too.

Bootcamp: Day 1

3/8/17

Today was the start of my Web Developer Bootcamp at Thinkful.com. I’m really happy with my decision so far! I think this is going to be a great experience!

As expected, it starts out with the basics. Here are some of the things I did today:

  • Learned how to use CodePen.com
  • Installed Sublime text editor and learned how to: access the command palette, use the tab completion feature, setup a folder structure in the side panel, install Sublime packages, use the multi-edit feature, and some other handy keyboard shortcuts.
  • Review of basic HTML and CSS.
  • On my own, and unrelated to the class, I took a break and learned how to create a triangle using CSS. At first I couldn’t wrap my head around it. I couldn’t figure out how the triangle was formed by making the adjacent sides transparent. Then I found an animated gif that showed how the borders meet an angle. Then it all made sense. Pretty cool stuff!
  • Then I went back to my class and learned more about the Sublime editor, which lead me to these helpful pages:
  • I’ve been including some links with each entry, so on-top of the two above here is an interesting article I read today about creating standards within the coding bootcamp communities.