FCC Random Quote Generator

I finished the algorithm scripting at Free Code Camp on June 19th and started the Random Quote Generator on the 20th.

I have been working diligently for a few days on it. Usually we are instructed to use the Bootstrap CSS framework. When I went searching for an API I found Chris Coyer from CSS Tricks Quotes on Design API site and was enamored with the design and decided I wanted to do the same thing.

So I mocked it up in Sketch:

random_quote_generator

I needed to really think about how to write the CSS and code for this design. I am still working on that. I have traversed the web in search of layout advice and CSS tricks 1 to move the bottom quotes to the left and at the bottom.

Originally, when I built the HTML, I had both the quotes at the top right. I kept forgetting that the <div></div> tags can place elements, nest elements, etc in the places you want them to go.

So I placed the ending quotes below the Tweet This button.

Buttons

I want to either emboss the buttons or create a drop shadow to cue the user into it being a button and not just some random text. I know it says Tweet This but people like my mom have a hard time understanding that the Login button on her bank app is actually tappable and that’s how she logs in. So I need to give visuals cues that will allow the user to intuit this.

Layout

Still working on an adequate layout. I don’t want to totally rip off Chris’s site but the design is so fresh that I want to at least rip off some of the components.

I’ve gone into Chrome’s Dev Tools and poked around on his site and have gotten a feeling of how to build it.

WIP

You can see the pen at the bottom of the page. It looks weird because it is a work in progress.

  1. Pun not intended ↩︎

Algorithm Solutions

algorithm_solutions

 

I’ve completed three more Free Code Camp algorithms since my last go on May 30th.

I needed less guidance on these particular algorithms, all but one. The algorithm solutions weren’t too hard to come up with, however on Slasher FLick I really overcomplicated my solution. I was thinking way too hard about how to solve it— new array? Should I return newArray as a part of the function call? Do I push the result of the cut off part of the array into newArray?

The instructions were:

Return the remaining elements of an array after chopping off n elements from the head.

The head means the beginning of the array, or the zeroth index.

Remember to use Read-Search-Ask if you get stuck. Write your own code.

Here are some helpful links:

Array.slice()

Array.splice()

Seems simple enough. But I was thinking too much and making it more complex than it needed to be because of my recent previous solutions.

I used splice instead of slice as splice returns the chopped off part as a new array. For these instructions, here was the initial code:

Originally I had this:

I would get a double array, because like I said, splice returns a new array from the chopped off part. So I tried to use a non-initialized variable— var newArray;— that returned a TypeError.

I went to the Free Code Camp wiki to look at the explanation in more detail. I finally came up with an Aha! Moment. I only needed to return the array that was resulting in the splice method.

I settled on my final solution here:

Not too bad.

Getting Easier?

That one was easier to do. I hardly needed any help from Gitter. But then…

Mutations.

The instructions:

Mutations

Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array.

For example, [“hello”, “Hello”], should return true because all of the letters in the second string are present in the first, ignoring case.

The arguments [“hello”, “hey”]should return false because the string “hello” does not contain a “y”.

Lastly, [“Alien”, “line”], should return true because all of the letters in “line” are present in “Alien”.

Remember to use Read-Search-Ask if you get stuck. Write your own code.

Here are some helpful links:

String.indexOf()

I thought, okay. I got this.

The code:

I started out with this:

That didn’t work. I went to Gitter.

A guy there told me I needed to compare two arrays. I couldn’t figure out what he meant by that. To the wiki.

There I found out I should use toLowerCase and think about turning the array strings into an array of chars.

So then I came up with this:

as part of the equation. That also didn’t work. By this time, I am tired, it is late and I just wanted this to work. I went back to the wiki and found the solution.

I wouldn’t have ever came up with this yesterday night:

I am studying this. I am trying to figure out what is going on here and I will probably go to Code Newbie Slack to ask around.

Back At It

I am doing the Falsy Bouncer algorithm after this post. It looks easy enough, and if I get stuck I will go to Gitter instead of the wiki as the solutions are there. You don’t have to look, but I was tired and frustrated last night which is never a good mix.

I will also be reading all the algorithm books I have and the Coursera courses I downloaded from Stanford.

Avoid JavaScript Fatigue: Make a Learning Map

There are a lot of tools at our disposal as web developers. JavaScript has been in the tech news recently, with developers complaining of “JavaScript fatigue”— with frameworks and libraries coming out everyday it seems, who can blame them?

How do you avoid the never-ending rabbit hole of jumping from one technology to another? Cindy Potvin came up with a solution I am going to talk about here: making a learning map.

What is a Learning Map?

It consists of three parts:

2016-04-24 Core and Satellite Skills to Be a Web Dev

  • Core Skills (in turquoise)
    • These are skills you use on a daily basis that you need to have a solid grasp on to build any applications. These include: JavaScript, HTML, and CSS. If you are struggling with the basics of these, moving on to the next part of the map is not advisable.
  • Satellite Skills (in green)
    • These aren’t must have skills depending on what you want to get out of your application or website. Also, it depends on your experience as a web developer how far you go with these. You may want to work with MVC (something like React for Views) or backend frameworks (Node.js for the server), but those aren’t necessary to be a web developer, especially if design and front-end are something you want to focus on.
  • Helper Skills (in purple)
    • These are skills that aren’t related to your core skills but could be useful. For instance, algorithms aren’t a necessary skill but one that could come in handy when interviewing.

Analyzing Your Map

You may find you are weak in some areas and need to spend more time focusing on them before you get to the outside set of skills. Or, you may find out that some of these skills don’t interest you at all and move onto something different altogether. The important thing here is to list them, color code them, and see what you’re solid in and what you need to get better at.

Completing Algorithms

completing_algorithms

So, the last time I wrote an article here, I was struggling with the Truncate String algorithm.

I took to the forums again and a guy named Chuck told me to delete all the pseudocode. He talked to me about keywords and how to think about what was being asked of me. He broke it down like this:

If the length of str is longer than the value of num then shorten str to be as long as the value of num minus the length of ‘…’. Unless the value of num is less than or equal to three. In that case, just shorten str to be as long as the value of num. Either way, Then add ‘…’ to the end of str and give it back to us. Otherwise, just give us back str.

Oh wait! Three? ‘…’ is three dots! so we can change “the length of ‘…’ in our plan into three!:

If the length of str is longer than the value of num then shorten str to be as long as the value of num minus three. Unless the value of num is less than or equal to three. In that case, just shorten str to be as long as the value of num. Either way, then add ‘…’ to the end of str and give it back to us. Otherwise, just give us back str.

A ha! That made sense.

My code got a little better, but it wasn’t quite right. I went to the Gitter chat. I was struggling with getting the right truncated string. All but two tests were passing.

I got guided in the Gitter chat, but didn’t get the answer given to me, which I really loved.

My solution:

Sometimes, Instructions Are Starting Points, and The Ones Who Guide You Aren’t Always Right

I was reading on one of the Free Code Camp groups about Andrew Charlebois, a guy who took his Free Code Camp skills and in 5 months got a job as a Front-end dev.

I was curious about him— I loved his portfolio and so I hooked up with him on LinkedIn and checked out his Free Code Camp profile.

I looked at his solution for Truncate String and his was elegant. It looked like this:

Wow.

One of the things I got advised of in our Gitter chat was that you need to write the stricter conditional first, in this case if (num <= 3) {} instead of if (str.length < 3). But if you look at Andrew’s solution, it isn’t true. Maybe that is because he used <= in the conditional, but it shouldn’t matter.

I knew, also, that I didn’t need to actually use slice() but I didn’t know which of the stringmethods I could use. Andrew used substr()which is probably why it looks so clean.

Solidifying Knowledge of Prototypes and Objects

I have started on PluralSight’s JavaScript Track. I took their test to see how much JavaScript I know and I tested at the low-end of proficient, which makes me very happy. I want to get this down— Prototypal Inheritance and Objects before I start into ES6. Lots of syntactic sugar in there. I like it.

Algorithms…Again

algorithms

I am working on Free Code Camp Algorithms again. Things are going much better than they were…if you consider struggling through a simple algorithm for two days.

The algorithm is Truncate a String, the instructions as such:

Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a … ending.

Note that inserting the three dots to the end will add to the string length.

However, if the given maximum string length num is less than or equal to 3, then the addition of the three dots does not add to the string length in determining the truncated string.

Remember to use Read-Search-Ask if you get stuck. Write your own code.

Here are some helpful links:

String.slice()

I read and re-read the instructions. I went into the Gitter chatroom and asked general questions. For instance, the second part of the instructions didn’t make sense to me. I asked in the room how someone would go about thinking about it. I didn’t want the answer. Sometimes, when searching or going in the Gitter room, someone would give me the answer. Sometimes when searching, I’d find the solution in someone’s GitHub Gist and I’d be relieved of my mental burden…until the next one.

I know I need to learn this stuff and getting the answer isn’t the right way. So I asked around. I searched with broad search terms but it is hard to find what you’re looking for with broad searches.

I saw Free Code Camp in the searches, some gists again but I neglected those pages. I went to Stack Overflow. I read articles. I am totally mind-fcked.

I went over an old article I cross-posted to Medium in November. It had some code in it that I thought I could use. I copied it to Quiver and looked over it. I tried to implement it in my current solution but I’m not sure how to go from there to here.

So far my solution looks like this:

This is wrong, so wrong. Only two tests pass.

I am continuing to battle, though.

The Miracle That is Free Code Camp Forum

I honestly don’t know what I’d do without the Free Code Camp forums. I lamented on there about the Truncate String algorithm and got private messages willing to help me figure it out, without giving me the answers.

Seeing people struggle as well is so damn helpful. It may suck for them but I know I am not along and I am not stupid. That is priceless.

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