Contacts App Update

working_on_contacts_app

 

I haven’t written an article in a week or so. I have lost time or something because I don’t remember what I did while I was away. I did work some Free Code Camp, ran some errands, had a doctor’s appointment and went out with a friend from back home.

So these past two days I have been working on the contacts app I have been working on for forever. I did some of the logic a week or so ago but in the meantime, I wanted to go from pill navigation to navbar navigation. The problem I had was responsive/collapsable navbar. I am trying to follow the Bootstrap docs but I am not having much success.

Navbar Code

My navbar code is as follows:

Not sure what is happening but it looks like this:

contacts_app

The Logic

My js is pretty basic right now. I want to have a better framework for the logic and I have a TaskPaper list to sort of flesh this stuff out.

Here is the logic I have currently:

Now this isn’t passing Travis CI tests, obviously. I don’t think it will pass until I figure it out better and the basic logic here is sound.

Updated Docs

You can find my updated docs here

On the Grind

Some video fun.

Back to Pitt

back-to-pitt

I’m going back to Pitt.

So, if you have been following my journey for the last few months you know I quit school during an intense period of depression— a kind of nervous breakdown. I am finally coming out that, and am working quite hard on the things I had set up when I quit. I’ve worked harder at learning, growing, and building since quitting.

I need to get a medical withdrawal from the school— I left the semester under the care of a doctor but I didn’t properly withdraw— I could barely leave my apartment. It was pretty bad. So if I didn’t get the medical withdrawal, I would have failed the semester. I told my advisor I planned on coming back but not right now. I said it to be pleasant. She told me I would need to come back before Fall 2017 or I’d go inactive.

I posted on Facebook about it and said I planned to go inactive. My opinionated friend I know in real life and some that I’ve been “friends” with for many years encouraged me to continue. In fact, my buddy Joe, who really started this journey I am on now by splitting his majors up 1 told me to “get that degree. Goddammit. It opens all kinds of doors, no matter what you major in. Don’t let them tell you no. Don’t give up.”

Reevaluating School

I decided to go back. I am not really looking forward to it, to be perfectly honest. I missed it in some ways and in more ways I am perfectly happy with this structure. But I know they’re right. So I decided instead of CS, I’d do Information Science, which is programming, business, and design. This is the easiest path to a BS for me. And I will have that piece of paper. Soooo… H2P!?

Confidence in Building the Contacts App

I had to admit to a few people that I am really afraid of the blank text editor.

I was so afraid of it, I picked up a book that was on my iPad that I had downloaded a long time ago called Thinking Like a Programmer by V. Anton Spraul. I mentioned it in the last blog post.

Well, after reading the introduction and writing that blog post, I went to bed and before I fell asleep, I was thinking about my Contacts app. When I fell asleep, I dreamt about the app, how to structure it, using prototypes, breaking things down with functions in an OOP way. When I woke up I half-remembered but my mind got jogged by talking to a friend.

I started working on it. I asked questions on Code Newbie Slack. I opened up the MDN docs on Dash. I started to build it.

This gave me the confidence I needed to look at other projects. I found the documentation for the Alfred workflows I want to build. I feel comfortable reading those docs and I think I will be starting it soon.

Travis CI and Shields.io Badges

It took me a while to set up Travis CI and Shields.io badges. I still don’t know how to get the amount of commits I have made since a certain version of my app to show on the badge.

I wanted to use my GitHub page to show my documentation. It took me four hours to figure this out. I stayed up until 3 am trying to get it to work and I finally did it. This is where my badges are. I plan on adding more.

You can find my paltry docs here.

  1. I was going to just get my MFA and that was it until I saw him go for his MFA and law school. I then thought I could get a CS degree and an MFA but quickly abandoned writing as programming got more intense and I fell in love with it. ↩︎

Thinking Like a Programmer

thinking like a programmer

I am reading, Thinking Like a Programmer by Anton Spraul and the first few sentences say:

Do you struggle to write programs, even though you think you understand programming languages? Are you able to read through a chapter in a programming book, nodding your head the whole way, but unable to apply what you’ve read to your own programs? Are you able to comprehend a program example you’ve read online, even to the point where you could explain to someone else what each line of the code is doing, yet you feel your brain seize up when faced with a programming task and a blank screen in your text editor?

You’re not alone. I have taught programming for over 15 years, and most of my students would have fit this description at some point in their instruction. We will call the missing skill problem solving, the ability to take a given problem description and write an original program to solve it.

This describes me a lot of the time, especially on the last Treehouse assignment.

I looked over some of the code today and realized while some of that stuff looked foreign to me after I downloaded the solution, taking my time and actually writing some pseudocode and breaking the problem down could have actually helped me figure it out.

Breaking Things Down Into Smaller, More Manageable Pieces

This has been drilled into my head by several experienced Code Newbie programmers in the Slack channel.

When I was at Pitt learning Java I often struggled understanding a large problem and actually looking at it as a whole. Karen Bigrigg, my Intro professor, actually taught us the Divide and Conquer method of programming which is basically an algorithm for breaking down a problem into smaller pieces and dealing with them that way. In this instance, it may or may not fit for what I am trying to do, but it essentially is the way programming works, in general.

I tend to get stuck looking at the whole problem. Perhaps writing pseudocode or looking at one feature at a time when building my contacts app, workflows, etc would make me less afraid of the code editor.

Sometimes, Though, I Actually Win

A lot of times when I am building something, I actually have an idea of where to go and how to implement what I am trying to do. If I don’t, I Google or go to Dash Docs 1 for a quick lookup of something I don’t understand.

For instance, Free Code Camp does a good job of preparing you for projects you are about to build, and the Research, Google, Ask methodology they implement is a pretty important skill for any developer, junior or otherwise.

I’ve gone into the CodePen challenges quite ready for them, even though they’ve been pretty simple so far, not really requiring any JavaScript at all 2. I know they’ll get more difficult but I feel like out of Treehouse and Free Code Camp, Free Code Camp prepares you much better. I use Treehouse to shore up some knowledge and Free Code Camp to become better.

My Plan

My plan is to remember what I’ve been taught. I look at a thing like my contacts app and get overwhelmed. This can be avoided by looking at a small bit of functionality, brainstorming it with a mind map, listing things to do in TaskPaper, and then writing pseudocode to flesh it out, followed by actually source code implementation.

  1. There’s devdocs.io for online documentation, much like Dash Docs that won’t nag you and isn’t just Mac only. Kapeli has a fork of Dash for Windows you can find on his website. ↩︎
  2. Though I did add jQuery to the tribute page just to look like I knew what I was doing. Ha. ↩︎

Finishing OOP JavaScript at Treehouse

OOP JavaScript

We learned a bit about constructors and prototypal inheritance in OOP JavaScript in this final section. We also went over prototype chaining which I found interesting.

Inheritance of Properties Through the Prototype Chain

Every JavaScript object has a Prototype object and inherit from Object.prototype. You cannot inherit from classes in JavaScript as there is no “class” per se. You only inherit from other objects.

In order to spread functionality throughout different functions and scopes, we can chain different objects together using the inherent nature of Object.prototype. We can do this a couple of ways but in the Treehouse example, we use Object.create() to chain together two objects.

Take for example this code:

This is an example of a constructor with some functionality. What if I have another constructor that I want to inherit properties from this constructor? You could do this:

The Movie() constructor is inheriting properties from the Media() constructor.

The call() Method

You can also use call() to chain constructors for an object. In the example above, we’ve used:

The call() method always takes two or more arguments, with this always being the first, which refers to the current object, or the calling object.

The Final Project for OOP JavaScript at Treehouse

I was lost. I honestly don’t know how I was supposed to come up with the answers provided. I didn’t know where to start, which was honestly my fault. I didn’t take very good notes while going through the course at the end. But I wasn’t the only one stumped by this challenge. I don’t feel I was prepared enough for it, regardless of how many notes I took. You can find the gist of the solution down below.

See what I mean? We didn’t learn half this stuff. I love Treehouse and this was a hard course for Andrew to teach. But I felt it sorely lacking in practice.

Review: Object-Oriented JavaScript

Object-Oriented JavaScriptObject-Oriented JavaScript by Nicholas C. Zakas
My rating: 4 of 5 stars

Great, quick read that will help any new or intermediate JavaScript or web developer get more familiar with OOP JavaScript.

The best parts of the book for me coincide with the things I am learning at Treehouse during their OOP JavaScript course in the full-stack JavaScript Track.

As far as the OOP nature of JavaScript. A lot of the syntax and ideas borrow heavily from Java and it is evident when I am writing in JS. Fortunately, the book stresses the Prototypal Inheritance of JavaScript instead of thinking about it in a Classical Inheritance type of way. Eric Elliott has already crooned the virtues of Prototypal Inheritance, which is a feature of JavaScript people either love or hate.

I learned a lot in this book, that really just gave me a slightly more in depth look into the stuff I was already learning. Having gone to Pitt for two semesters and taking CS classes, a lot the OOP stuff was familiar as Java is a Classical OOP language. But thinking about it in the JavaScript way was helpful. Four stars.

View all my reviews

Digging Into OOP JavaScript

Digging

On Treehouse, I am going through their Full-stack JavaScript track and we came up on OOP JavaScript.

Learning about Objects, state, and the origin and usage of this is intriguing as I have learned a bit about OOP through Java during my time at Pitt.

JavaScript doesn’t have regular Classes and instead uses Prototypes. Classical inheritance is seen as a big problem in JavaScript, which when you consider JavaScript doesn’t have real Classes, it makes sense. Brandon Eich, the creator of JavaScript admitted he wanted JavaScript to look like the little brother of Java, which leaves us with syntax that looks like Java when we use things like Constructors. For instance, in Java, you create a new Object like this:

Where we are importing the Scanner Class and any I/O classes that Java has. We create a new Object here from the Scanner Class by using Scanner keyboard = new Scanner(System.in);. This is an example of Classical inheritance, creating Objects from either predefined Classes in the Java API or Classes you create.

The syntax for creating Objects in JavaScript from Constructors, which is not the same as a Constructor function in Java, looks similar to creating an Object in Java.

Take a look:

Notice how we created the Objects: with the new keyword. Also notice that we have an instanceof operator. In Java, you create an instanceof a class by creating an Object through Classical inheritance. Here you’re creating an instanceof the constructor.prototype in the object’s prototype chain. This is weird and I am not sure why Prototypal inheritance wasn’t used.

Coding Daily

I have pretty much stuck to what I said I was going to do. I had Sunday off and I really missed it. Some days I start later than others, like today as I am being killed by allergies and am sluggish. But tonight I am going back to Treehouse and Free Code Camp before bed.

Screenshot2016-04-23_11-22-55_PM

Thoughts

I won’t get into which is better, Prototypal of Classical Inheritance. There are plenty of articles about this.

I am reading a lot of Eric Elliott’s posts on the topic. It doesn’t jive with the stuff I am learning as it leans heavily on Prototypal Inheritance features in ES6. But I need to learn the OOP way first, at least for now, to lessen confusion.

Restructured Learning: Trying Harder

Optimized-Learning

 

So after reading yet another good post on That Amazing Programmer, I got to thinking about my own reluctance to sit down and learn programming. I knew I should be trying harder.

Chris wrote down some of his apprehensions in a freewrite type of entry in his journal. I didn’t do that. I guess I am forcing myself to actually program 8 hours a day; yeah, a full-time job full of learning.

Here is my Priorities whiteboard:

Optimized-IMG_1149

So far yesterday I programmed for close to four hours after getting up super late as allergies are killing me and when that happens, not much gets done. And I am still looking for small freelance projects to gain more experience so I can be gainfully employed. I am probably going to head to bed very soon.

restructuring_learning

Daily Whiteboard Schedule

Treehouse and the jQuery for AJAX Requests Dilemma

We were going along, using vanilla JavaScript for our AJAX requests, when the next course that popped up in the AJAX basics track was jQuery for AJAX. I felt a twinge of uh oh. Don’t think this actually something you should be doing.

I felt a little uneasy that Dave McFarland actually said a lot of developers use the library to do their AJAX requests. It didn’t make sense.

So I consulted the Code Newbie Slack. And boy, it did not disappoint.

Using a lib like jQuery can really slow your site down— it’s huge and even if you use a CDN, like we did in this exercise, it has to pull a large resource from that CDN which can slow things down considerably. Take a look at this, however:

This is deceptively simple code. Short and sweet as opposed to the XMLHttpRequest method of vanilla JavaScript, which is here:

There’s a few more lines of code here but it just looks crazy.

But, as I know and had gotten confirmed, the less dependencies the better. And for someone new, actually learning the XMLHttpRequest method of creating AJAX requests is something that I should do. The jQuery though. It’s just so simple and pretty

Finished Up The Programming AJAX and AJAX Concepts Courses

And am almost done with the AJAX JavaScript track in the full-stack JavaScript track at Treehouse. Tonight I am finishing this AJAX course up and heading back to Free Code Camp.

Screenshot2016-04-19_08-40-58_PM

Using Trello to Track Learning

Screenshot2016-04-18_09-41-31_PM

Chris Johnson, one of my favorite programming bloggers posted his Trello board for ASP.NET MVC Mastery. I saved the board as it is public but I forgot I had it. I just recently looked at it and whoa. A great idea, indeed.

So I copied the board minus the cards and started work on my own board. It is called Full-Stack JavaScript Mastery. I copied all the lists and edited them to work more along the lines of what I need to do.

Descriptions of Lists

  • Information
    • This has the cards:
      • Purpose- The purpose of the board
      • Who Am I- A brief introduction to who I am and what I need to do with the board
      • Where Am I- Lists all my social and blog links
  • Resources
    • The cards here are
      • Free Code Camp and its link
      • Treehouse Front-end Development track and its link
      • Treehouse Full-stack JavaScript and its link
      • JavaScript Understanding the Weird Parts and its link
  • Skills Needed
    • Lists all the skills I need to be a full-stack JavaScript developer with some extraneous skills and helper skills mixed in.
  • The Road Map
    • Has one card that will be updated when I figure out the plan to get one set of skills done at a time.
  • Free Code Camp Full-stack Mastery
    • Here I will list the skills I have learned during my time at Free Code Camp which is my current place of constant learning
  • Treehouse Front-end Development
    • Same as with Free Code Camp’s card
  • Treehouse Full-stack JavaScript Track
  • Pluralsight JavaScript Courses
  • JavaScript Understanding the Weird Parts

Where You Can Find My Board

Of course you want to know. You can find it here:

Full-stack JavaScript Mastery Trello Board

Crawling Before You Walk

Sad

 

I am reading Data Structures and Algorithms in JavaScript and I’m up to Chapter 8 when we are talking about hash table algorithms.

I had to reread the code examples several times to understand what was happening. Here is some sample code from the book

This code here creates a constructor function called HashTable and several references to other functions that will be used in our regular code instead of this constructor. Easy enough.

We create an Array here that is 137 indices wide. We do this because when we run the hash algorithm we can run into something called collision where two items are hashed to the same value in the hash table. The proper thing is to use a prime number. I am still not sure why.

In these examples we used keys to store data in the array. The key is mapped to a number whose value is mapped from 0 to the size of the array, which in this algorithm is 137 indices in length.

In the next example code we are using ASCII values of letters in the key and adding them. This is the hash function used, using the simpleHash() function we added to the constructor function.

Here in this code we are attempting to run the algorithm using the showDistro() function from the constructor.

The output:

This is where I was stuck. What are those numbers on the left?

I had to reread a few pages back to see that we used an array of 137. These are the positions of the hashed results on the hash table, according to the array size.

Wow.

Fitting a Square Peg Into a Round Hole

This was a difficult concept to wrap my head around at first. And using JavaScript for these algorithms probably isn’t the best approach but for the sake of approachability, he used JavaScript. I understand, but a better language probably would have been C++.

It also let me know that this part of the book may be too advanced for me; that I should learn more of the code I am currently writing before digging into these types of algorithms.

The first part of the book will inevitably help me with Free Code Camp Algorithm challenges as it goes over exactly the types of methods we use in those challenges, the challenges I burnt myself out over.

Regular Coding Schedule as Well As Taking Care of Yourself

I am at a crossroads. I had a pretty bad nervous breakdown that started at the beginning of the year that culminated after some bad news. I know, I know totally I was doing too much. If you subscribe to my newsletter, you know some of my history. I suffer from depression and other things and I just did too much too fast, and burnt out. New depression medication and I am still trying to find my way. But I decided that sitting in the apartment daily doing nothing but grinding wasn’t the best way to go when you suffer from some unseen-to-the-public issues.

So I went back to the gym yesterday. If you are a desk jockey like me, I would suggest going to the gym or at least walking outside everyday or every other day. It helps clear you up, gets your blood flowing, and helps you get the exercise that not only helps in your coding endeavors, but keeps you healthy as well.

As far as keeping a regular coding schedule. Yeah. I need to wake up earlier to do this and right now it is almost 1 am. I plan on coding later today and doing it even when it gets hard or stresses me out. Pushing through those rough patches is key.

Off My Soap box

This post got looooong but I haven’t posted in a minute. It’s been hell lately emotionally but I am dealing with it.

Deal With It

Hey Everybody! Let’s Shit on JS!

shit_on_javascript_mmkay

 

From my Facebook post:

I hate it when people shit on a language I like. Yeah, JS is a shambles right now. NPM debacle with kik and left-pad, the trillions of lines of spaghetti code written in JS, trying to practice OOP with a prototypal language (there are no classes here, just prototypes which according to people in the know, are bad for classical OOP). It’s fun to shit on JavaScript. It’s fun to call it a terrible language. It is the hip thing to do. It’s the new PHP! It’s the new Java! Whatevs.

Do you know how to write it correctly before you shit on it? No? Then gtfoh with your bullshit. No language is perfect. ABSOLUTELY NONE. Learn how to write it, learn its intricacies. Then talk to me about how terrible it is.

As defensive as I am here, I know JavaScript is sucking hard right now. I know this. There are things about JavaScript that absolutely puzzle me as a new developer, for instance you can’t sort the properties of an Object but you can sort the properties of an Array, which is an object. This makes little sense to newbies. I was informed that Arrays have ordered data and Objects have unordered data, and that sorting an Object would be like sorting an unordered list in HTML.

It made more sense to me after this explanation. So can we really call an Array an Object then? How can an Array be an Object when it has ordered data? Does this have to do with prototypes? I am assuming it does.

But JavaScript isn’t the only language that has this type of garbage. It isn’t as eloquent as Ruby. It doesn’t need to be. They are accomplishing two different things.

Complexity in JavaScript can be a good thing, if people know how to wield that power. Like every language, it has good parts and bad parts.

We could talk about NPM and having a JSON file with 200 dependencies. But what about depending on Ruby gems? Could you break your site with an updated gem that you know nothing about? Absolutely. Can you have 200 dependencies in your Make file? I don’t know. But when I have done a bundle install for whatever project I am working on, there are lots of gems downloaded to the Make file.

No one is Talking About the Real Issue Here

These people using left-pad and kik, these 11 lines of code, a small function that, you know, you should be writing yourself? Why aren’t you? How lazy are you as a developer? If you have to depend on an npm module to add whitespace to the end of a string 1, then you’re a shitty developer.

Micro-dependencies to hide complexity isn’t something we should be doing. Maybe this is a flaw in npm but I really don’t like it and think it’s a bad idea, generally.

Strive to have as few dependencies as possible, where possible. This isn’t a JavaScript thing. Less gems, less npm modules, less swift packages. Just write good code. If you’re a shitty developer, you probably couldn’t care less about any of this. This type of laziness isn’t quarantined to the JavaScript community so let’s stop pretending that is.

  1. I am not totally clear on what left-pad does ↩︎