Proper hardware

By Jason Land

New monitor day!

There was a spare monitor up for grabs at class today so I grabbed it. We all come to class with just a laptop (though some more dedicated or experienced souls brought their own second monitor), so I felt like this was basically a necessity. I had forgotten how great it was to have extra space since quitting my last job.

I generally work with my text editor right in front of me and the browser window and its console to the left. I also leave my terminal just peeking out behind my text editor so I can see if new lines get logged while saving changes.

I’m used to a customized setup at my old work, and here it’s just a laptop and a desk. I figured I’d write a blog about how crucial it is to have an environment that’s frictionless and healthy for you to work in.

COMPUTER:

These days it doesn’t really matter what your OS of choice is, so pick whatever you like. Tools like Vagrant and Docker unify development environments for everyone on a team, so you can have a Linux production environment, Windows programmers and OSX designers (or vice-versa). If you’re sticking with a laptop, get one with a SSD for at least the operating system and your main programs, if not your data too. Make sure the keys are comfy and you don’t stumble on them while typing. If you have VMs, you’ll need a minimum of 16gb of RAM.

KEYBOARD:

If you’re programming, that means your primary means of interaction with your work is probably a keyboard. An ergonomic keyboard is a must. I go for split keyboards, with the Kinesis Freestyle for mac at work and an Ergodox at home. Splitting a keyboard is great because it spreads my shoulders and allows my body to rest more naturally. Eventually I’ll convert to two Ergodox keyboards so my muscle memory just has to stick with one layout. Once that unification is complete I’ll start using a Dvorak key layout.

MONITOR:

Two monitors is a must, three is a maybe. If the second monitor is big enough (24″ or more), turning it 90 degrees may work and you can have browser and console visible at the same time, though your width will have to be accounted for when doing responsive design testing. When you’re at a bootcamp, this is probably too much, so a 15 inch USB monitor is a good compromise here and can be had for less than $200.

Make sure they’re on risers as well. Place your monitors up so they match your field of view when you look straight ahead.

MOUSE:

I find most senior programmers suggest just learning how to not use a mouse, but I find that it’s too intuive to use. However the standard mouse design causes a huge amount of pain in my elbow after extended use, so I go with an ergonomic mouse as well. My personal favorite is the Evoluent Mouse (they make left-handed mouses too).

CHAIR:

It’s strange how many used Herman Miller Aeron chairs you can find on Craigslist these days. They’re pretty great though budget options exist. I don’t pay too much attention to how great a chair is because of the next section…

DESK:

Ikea now makes a cheap sit/stand desk, for around $280. It’s not motorized, but that option will take you uip to $500 for a desk. However, I’ve found that switching every hour from sitting to standing really does help how I feel at the end of the day. Just make sure you have supportive shoes (keep those arches up) and a anti-fatigue pad to stand on.

Angular Anguish and n00b News (Sublime Text Plugins to help with Angular)

By Jason Land

Second week. AngularJS. I knew it was coming. I’m finally in virgin territory- no more know-it-all status with my classmates.

I’ve had a history with Angular- I heard about it as the new hotness, saw a two-way data-binding demo that wowed me:

two-way-data-binding-angularjs

tried to get it past that rudimentary task more than a few times and eventually gave up on it. I even had to occasionally work with a fairly standard dashboard app built with it at my previous work- nothing out of the ordinary on it, but also incomprehensible for those of us who didn’t write it. Hearing everyone go:

and then get confused, lost and gripe about it

was a familiar story to me. But companies love it and pretty much all coding bootcamps that teach JavaScript also teach Angular, so there’s no avoiding it.

But on the other hand, I found some Sublime Text plugins that will make Angular (and coding in general) much more frictionless.

The obvious one to start with is AngularJS. This has some Emmet-like functionality as it will autocomplete ng-* tags in an HTML document. Very handy if you haven’t memorized all 63 built-in directives.

The other two aren’t specifically for Angular, but they have distinct benefits. The first is All Autocomplete. This will scan open files for function and variable names and add them to the autocomplete list that Sublime Text offers when typing something outside of its normal lexicon.

The second is AutoFileName. This one isn’t perfect, as it activates whenever your cursor is between two quotes, as in both class="" and src=""but it’s easily ignored when unwanted. Since splitting functionality across different files is part of the Angular way, getting the path to those files can be a pain in the ass. This plugin helps autocomplete paths by showing all possible files and folders starting at the top level and narrowing as you type.

Tune in later this week when maybe I realize it’s not so bad or I think we should burn it all down and just use Lisp instead.

11 hours today and 13 different API’s so far, to get POST working! #HUSTLE

Trip to Wonderland: Falling down coding rabbit holes

By Mark Srethabahkti

For my final project, I am making a “Very Simple Sign-in Sheet Application” (or V triple-S A for short) for my dance coach’s studio. I’ve broken the project down into 3 week long sprints with the last week for any spillover user stories and debugging moving towards the final presentation date on August 31st so last Friday marked the end of my first sprint. Conclusion? Fairly successful so far. The goal for my first sprint was to create working API endpoints for authentication and sign-in sheet functionality as well as scaffolding  a MongoDB using Mongoose and all of these benchmarks were met with the commit last week. Through a process I like to call “consume and assimilate” I have managed to stitch together a fully functional API from three separate Treehouse tutorials, a Scotch.IO guide and several of my old projects. In the mean time, Sean also showed us a great program called Balsamiq for creating mock-ups for your front end user interfaces and I was able to show my coach, the “product owner,” some designs so that I knew what I should be building this week.

So what does that have to do with Alice in Wonderland?

My classmate Fabian “FABproject” Martinez coined the phrase in our cohort “falling down rabbit holes” to refer to focusing so hard on a highly specific problem that you get lost in the Stack Overflow, WC3Schools, Youtube tutorial Wonderland of mostly irrelevant information, and that’s pretty much what happened to me today. Also, my particular rabbit hole has to do with time so, I guess it’s fitting that I followed the white rabbit. You see, in order to create an instance of a sign-in or lesson object, I wanted to create a date object in the local time so that I could later filter the lessons returned using the local time, but no matter what I did MongoDB would save the date object as “Coordinated Universal Time” or UTC for short. I spent hours looking at time related stack overflow posts, documentations and plugins before Sean slapped some sense into me and told me that this “problem” that I had would not even impact my end user. It was only after I stopped focusing on the time problem that I realized that while MongoDB stores all incoming date objects in UTC format, it also automatically converts filter times passed into it from local time into UTC and returns results based on that filter. My end user literally would not be affected at all. *sad trumpet noise*  Anyways, I figured why let my research go to waste. The following is a list of some sites and plugins with useful date functions:

  • AngularJS Date FiltersI ended up using these to change the incoming UTC time from my database into the local time format for display for my view layer. Very easy to use, and very powerful as it will use the local time of whatever machine is calling the view.
  • Moment.jsAwesome plugin that extends the functionality of the traditional DateTime data type allowing users to not only format time in ways not possible with just Angular Date Filters, but also to perform basic arithmetic like adding or subtracting days and hours.
  • StackOverflow on ISOString DateTimeFabian linked me some code from this posting that helped him get his Javascript Datetime element to line up with SQL’s DateTime data type. The second highest posting  contains a helpful code snippet for creating a DateTime object in Javascript that is usable in SQL.
  • MongoDB Date() DocumentationIn case you were wondering about how MongoDB stores DateTimes, the documentation is chock full of exactly how much everything is displayed as UTC time all day every day. So there’s that.

It’s really easy to get caught up looking for answers for a problem that seems completely game-breaking at the time, but are actually relatively trivial. When you’ve spent a few hours on the same problem, it doesn’t matter how important you think it is to your overall project, it is time to step back, take stock of the whole situation, and maybe you’ll find that the solution is simpler than you thought. Sometimes those who wander really are lost, so thanks again Sean for pulling me out of the rabbit hole.

End of the Day, End of the Week

By Jason Land

Well hot damn, that was a hell of a first week at Origin Code Academy. As one of the students with some previous experience, I became the unofficial teaching assistant. I finally know what my old CTO felt like whenever I pestered him on Glip. My classmates made my brain sweat and commuting 6.5 miles round trip by bike made the rest of me sweat.

So here’s my first week in review:
Most everyone is worrying their ass off about how out of their depth they feel. Some students got very emotional about that issue and felt like they wouldn’t be able to keep up. Another cohort is in progress with us, though they’re eight weeks ahead. One of those students let us know that he had quit a well paying job to enroll in Origin and he had a family and kids. We also saw a video of previous graduates self evaluations of their first week and they all sounded like us (I don’t understand this, the first assignment was hard, how will I be able to cope?, etc), which was reassuring.

The biggest thing that helped us through is that the class is very supportive of each other. There’s 20 of us, which is kind of big for a coding bootcamp. But that also means there’s someone to go to at almost any time. I’ve asked for help from classmates fresh to coding and received great solutions that probably would’ve taken me hours. My takeaway:

CODING IS COLLABORATIVE

I did come across some curveballs myself. I’m used to grabbing data and displaying it on a page with little manipulation on the client-side. Even assignments such as a change calculator (telling the user how many quarters, dimes, nickels, pennies to give in exact change) stumped me. So there’s always something new for us to learn. Next week will put me squarely into newbie territory as we’re covering Angular.js, and that is a big scary monolith to me. Check in next week to see how full of stars it is.

n00b News- Adding Texture to your Site

By Jason Land

The first week at Origin Code Academy is mostly focused on JavaScript basics. A lot of our first projects look very much the same, especially once our teacher introduces CSS frameworks to us (Bootstrap is popular, but I prefer Pure).

However, the blank backgrounds can be boring, despite Google’s full court press with Material Design.

pure
A flat design, super boring.

Our solution was to add some code to the body tag in CSS like so:

body{
    background-image: url('images/gplaypattern.png');
    background-color: #558ED3;
}

The first line in that CSS rule sets an image for the whole body of the HTML page. However, this has to be a transparent PNG file. The background-color rule tints it, and is changeable without re-rendering a new PNG file.

green
pink
We used textures from  Transparent Textures and Subtle Patterns

Note: You’ll have to open the PNGs from Subtle Patterns in a photo editor that lets you change the transparency and bring it under 100%, as they only offer opaque images.

N00b News- A Git Cheatsheet for First-time Coders

By Jason Land

TL;DR: JUST ENOUGH GIT TO BE DANGEROUS

Make new repo on Github.com or Bitbucket.com, and a new project folder on your computer. Inside the folder type:

git init
git status
git add name_of_files_to_commit
git commit -m "description of this commit"

git remote add origin git_repo_url
git push -u origin master

There was much wailing and gnashing of teeth over some of the command line concepts yesterday,

…so I thought I’d post a blog about the basics just to cement them in my head, and provide a link to pass around to my classmates. This will work for both OSX, Mac, Linux and the sites Github.com or Bitbucket.com.

The first thing to do is to navigate to the folder you want to build your project in on the command line. If you’re in the main user folder on OSX, you’d see something like this (it looks slightly different on Windows, but the commands I’ll be using are the same:

folders

I’m going to put my new project in my Sites folders, and that command looks like this (press enter after you type it):

cd Sites

Once you’re where you want to create a new project, make a new directory, and navigate into it.

mkdir my_new_project
cd my_new_project

Even though you haven’t written any code, at this point you should initialize the folder as a git tracked project.

git init

We’re going to leave the command line briefly and open your browser to Github.com. Login to your account (or register one if you’re really starting from scratch), and create a new repo. Give it any name you like (it doesn’t have to match your folder name) and click “Create repository”

newrepo

Make some empty files in your folder in your text editor (like index.html, style.css, app.js) and save them. On the command we’ll check out which files are new by typing in:

git status
statusred

It’s a good idea to track from the very beginning, so we’ll add these to our staging area (files being readied for a commit):

git add index.html style.css app.js

If you type in git status again, you’ll see the added files have changed to green.

statusgreen

Time to commit! One simple command for this:

git commit -m "description of the commit you're making"

The -m is necessary after git commit so Git knows to add your message in quotes to your repo. Now we need to get our Repo location from your Github/Bitbucket account. Both of those websites show this to you when you create a new repo, it looks like this:

gitremote

Copy both of those lines and paste them into your command line. Once you do that, refresh the page on Github, and you should see it now shows you’ve uploaded the files:

uploaded
Follow

Get every new post delivered to your Inbox.