FCC SpeedRun: Still Learning!

I have proof that I’m learning!

I’ve been playing around in Angular for the speed run and it was going great until last week. Life got real real fast and that meant less time sitting in front of a screen coding / webinaring / reading / etc. This issue with that was it happened right before I was about to start my next project, the recipe box.

**For those just tuning in, the FCC Speedrun challenge is to complete as many FCC projects as possible in a short amount of time (approx. 4 weeks). Repo and rules are listed here.

The Quest

Oh, god, the quest is to just keep moving forward!

Things have been kinda mellowing out, which means me and my three true loves, my computer, phone, and kindle, have been able to reunite me with the internet on a more ongoing basis. However, there is an issue. Every time I attempt to get somewhere on the recipe box, my mind rebels.

Side note: I’m sure that since I want to be connected to the internet, that means I have four true loves. It’s more of a hinge relationship, since I know the internet through computer, phone and kindle. And love it the same, I do. But, I digress…

The Route

What route? I’m turned around in the Forest of Angular and the troll is just having the laugh of their life because they know the way.

Before I sit down, I know exactly what I need to do. I’ve written it out. I have diagrams. I have psuedocode. But as soon as my backside touches wood and I pick up an oar, the boat starts flooding. Some of my brain cells decide in that very moment that they need an immediate cruise in the opposite direction of where I’m going. And it’s a good thing they left when they did, because a few others pick that time to play real life “Purge” and start killing their neighbors. Others still just sit back with a drink (most likely Bacardi Rum and pineapple juice) while singing “I’ll never tell”.

And all of that is alright. All of that frustration and coder’s block is how I know I’m learning.

The Forest Creatures

Troll: my brain cells or Angular itself? Really no way to tell right now.

The Reward

  • +5 for not beating my head against a literal wall seeing as I’m already doing it figuratively.
  • +25 for actually blogging about it instead of thinking I already did or actually writing it down and then not posting it because “no one cares”, but I care so nana nana boo boo! (I’m kinda in my feelings right now if you couldn’t tell)

145 Points ~ Level 2

Journal

Can your side quest’s side quest have a side quest?

 

*FYI: The Purge is owned by Universal Studios and we all know I don’t own Bacardi *sigh*

FCC SpeedRun Project #1: Camper Leaderboard

Guess what! I came out the gate fast and hard! (Keep your dirty jokes to yourself *wink wink*)

For those just tuning in, the FCC Speedrun challenge is to complete as many FCC projects as possible in a short amount of time (approx. 4 weeks). Repo and rules are listed here. I started in the Data Visualization section, before hopefully *fingers crossed* moving on to the Back End Development section.

The Quest

The goal of this here challenge was to recreate the freeCodeCamp leaderboard and make it ‘functionally similar’. The app allows the user to change the view between users with the most brownie points (for completing challenges and helping others) in the past 30 days and the most total points.

The Route

So I’d already picked out the general route I was taking when I picked my stack. So of course I needed to make sure my Angular game was on point. Before I knew about the challenge, I’d decided to pick it up, so I’d already been about a week into learning. I’m in the beginnings of the Angular 4 (formerly Angular 2) – The Complete Guide course on Udemy. Maximilian Schwarzmüller is an amazing teacher and I recommend his course!

Of course, with a jump in and figure it out attitude, I just knew I was ready to take off on this journey. But… Angular appears to be a massive framework, not to be tackled in one week. Damn that half buried tree root!

Initial Project

The initial setup was not at all complicated since the CLI does just about all the work. The longest part is waiting for the npm to install the dependencies.

Next was the components. Again, pretty straightforward since not many were needed.

Where things started to get hairy was the service. I hadn’t gotten to the services section of the Angular course yet, but I knew enough from reading around that it was needed to pull in data on the campers.

Mix-in Sass

Oh, yeah… Did I forget to mention that I’m supposed to use Sass?

Never touched Webpack before. Didn’t even know where to start to try to use Sass in Angular. Trees closing in on me. Big balls with legs hanging from branches. Pretty sure they’re spiders. And since I’m working on my RL spider phobia, I took a page from that book. Try not to panic. They’re more scared of you than you are of them. If it’s not on you yet, you still have time.

Turns out that they were more scared of me. Three hours on Google yielded quite a few tutorials on how to changes .css extensions to .sass and go add dependencies to Webpack. A side-eyed, frustrated 5 minute search at 6 am the next morning revealed a simple two line solution. StackOverflow for the win!

A Dash (or All) of Material

I added in Bootstrap, but wanted to use Material also. It was fairly simple to add but there were a few installs and imports needed before things started coming together.

The Forest Creatures

Services aka the tree root:

  • Contrary to popular belief, it was not adorably cute like Groot (who else can’t wait to see ‘Guardians of the Galaxy, Vol 2″???)
  • Angular just updated from v2 to v4 and while they might not have been breaking changes, there was still enough of a difference that following a tutorial made from just a month before the update can trip a beginner up.
  • Pay attention to importing the following:
import { Injectable } from '@angular/core';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';

Sass via Webpack aka the huge spiders in the trees:

  • Worse than the tree root, because ewwww spiders! Actually this was more like “WTF, I need a shower because spiders!”
  • New projects: ng new project-name --style=scss
  • Existing projects: ng set defaults.styleExt scss and remember to change existing .css files to .sass
    • Make sure to update all .ts files and the angular-cli.json file

Material aka The Mystical Colorer:

  • Magical from the eyes of a beginner because of all the things pulled out of thin air to add a little color to life
  • npm install --save @angular/material @angular/animations hammerjs
  • npm install --save-dev @types/hammerjs

The Reward

  • +30 ability to set up a basic Angular app.
  • +10 basic understanding of services
  • +15 using Sass (I’m claiming 10 of those points for the research involved!)
  • +10 for adding Material
  • +50 finished project #1

115 Points ~ Level 2 achieved!!

When did programming turn into a RPG? Is there a programming RPG? If there is, could someone point me in the right direction, because that sounds like it could be fun!

Journal:

View the source code here

See the live demo on Surge

Find Francesco Agnoletto (Kornil) awesome repository of favicons

 

*FYI: Groot/Guardians of the Galaxy belong to Marvel/Marvel Studios/Walt Disney Studios

FCC Speedrun – Day 1

Who knew red pandas had a need for speed?

red panda sleeping

So speedy up there is the mascot for my Chingu cohort. And I’m about to push him out the tree so we can get this show on the road! (Don’t worry, I’m sure he’ll land on his feet)

This challenge is thanks to P1xt, who made the challenge to push herself last month, Chance who started the awesome Chingu groups and all the others that help and motivate!

Rules of the speedrun (I picked the ones I deemed most important):

  1.  This is not a challenge/contest against the other participants. This is a challenge with yourself. The goal is to push, get kicked out of the comfort zone and learn as much as possible. Where you are now is not where you should be in 4 weeks. Even if you were only able to complete one project, that’s progress!
  2. Runs from April 18th until May 19th
  3. There’s 2 phases
    • Phase 1: Complete as many of the FCC Projects as you can in a four week period.
    • Phase 2: Integrate all of the FCC Projects you created in Phase 1 into one comprehensive single page portfolio application.
  4. During phase 1, challengers can collaborate, but phase 2 is an individual effort.
  5. Pick a stack and stick to it!
  6. For each project, write a blog post about working on it.
  7. Help others understand and dang it ask for help when you need it.
  8. If you pair with someone, credit them in your repo and blog post.
  9.  Give it your all, but remember to have fun!

My Speedrun progress:

  • I kinda started on the Camper Leaderboard yesterday. We were allowed to start early and I’m glad I did. Angular is fun and all, but I can’t help looking at it cross-eyed. It looks so easy when following a tutorial.

Which Fork to Take? Left or Right?

How about both?

Since my programming abilities are climbing, it’s been past time for me to start building other skills. Mainly the soft skills, like communication through writing.

You’d think that’d be an easy one for me, but no. I’ve found that while I might understand or know how to put something together doesn’t mean I know how to explain it to someone else. So since you were standing off in the forest, doing a bad job of hiding, you’ve been tagged to be my test bunnies!

As previously mentioned somewhere on this blog, I’ve been doing FreeCodeCamp. I’ve adjusted my timeline on that as I needed/still need to veer off to do deeper learning on certain concepts instead of stopping in the middle of a project to learn them.

I’ve completed the API projects for the back end portion and have moved to the data visualization part to learn Angular before moving into the full stack projects.

I started in the web dev cohort of CoderGirl (FYI they have an information session coming up on May 6th) back in January. It’s awesome! Although I’ve been able to go through some of the beginning lessons easier because I’ve been learning the last year, it’s still very beneficial.

Having mentors to answer questions, having teammates to bounce questions, ideas and resources off of, and the fact that I’m not coding alone in my house all the time have made a difference. We’ve started 3 projects so far in the learning track and I can’t wait for the project track that’s coming up!

Third, I’m in a Chingu Cohort, started by Chance via the FCC forums. Px1t, who is bad ass and very helpful and forthcoming with information, did a speedrun last month. So we’re doing one in the cohort starting this week. I was on the fence but signed up because even if I only get one project done, it’ll be more than what I have done now.

I’ve decided to go with the MEAN (Mongodb, Express, Angular, & Node) stack because even though I was leaning toward using Vue.js as my frontend framework for this, I’d like to continue to tackle and continue to put the hurt on Angular.

As you can see, the amount of interests/projects are piling up, and that’s just within the tech lane. Good thing I’m a great plate-spinner!

Climbing Out of the Pit

Do not fear. I have not stopped in my quest to learn Full Stack Development! It’s actually been taking up the majority of my time.

As the title said, I’ve entered and made it to about the halfway point of the intermediate algorithms on Free Code Camp.

The whirlpool that was the “Intermediate Front End Development Projects” didn’t want to let me go. For something that quite a few people mentioned was so simple, it was thrashing my boat all over the place. The funny part of it was, once I figured things out, I had to stare at my reflection in the calm waters, in confusion mind you, to see why it took me so long, because the things really were simple!

Now the algorithms:
I fully expected to be going through this section, clutching my safety vest in horror, as I headed towards the big rocks on the starboard shore. However, while the scenarios are hard, I’m able to break them apart and solve them fairly quickly.

I hope this means I’m truly starting to think like a programmer!

Projects So Far:
Personal Portfolio Webpage
Random Quote Machine
JavaScript Calculator
Tribute Page
Local Weather
Wikipedia Viewer
Twitchtv JSON API

API’s Are Helpfully Evil

I’ve been slowly moving forward with FreeCodeCamp. I’ve got a few back solutions to post after they’re prettified and de-Jennifered to make them universally understandable. I’m learning a large amount of information, even if I can’t immediately see how it will be helpful, or even understand it at first. Which brings me to my arch nemesis: API *dun dun dunnnnn*

 

Let me tell you a little story about how we met and didn’t fall in love at first sight:
I was young and naive when I walked into the room. There was a party for all the programmers and I figured I was old enough to attend. All the nice people in the Gitter chat were gushing over how nice API was and how they were a great friend to have. Even though their name, application program interface, suggested otherwise. I figured, I’m nice. I like to meet new people. I bet we could become fast friends. Famous last words if there were ever any.

API Party Love

I swear the party looked just like this when I walked in.

So, there I am, propping up the wall, trying to figure out how to approach API without coming across as too ignorant. Lo and behold, they make the first move. Over comes CodeAcademy to give me tips on what API likes and doesn’t like. CA waves over his friends “Get”, “Post”, “Put”, and “Delete”. They hold my hand while breaking some things down for me. “Get” likes to learn and is always requesting information, while “Post” likes to create new information. “Put” walks around updating and tidying up small things. The three warned me to beware of “Delete” though. His names says it all. I just think he’s misunderstood.

So after our little intro and a little liquid courage, I’m feeling confident and stroll over to meet API for myself. I swear it was like trying to find a ninja that was wearing all black on the night of the new moon in a freaking dense as hell forest. I had no clue where to start. I started to get antsy, but figured before I had a full blown panic attack, I’d ask around.

One person told me that API was wearing a green shirt and liked to walk everywhere backwards. The next said they were wearing a pink tutu and hanging upside down from the rafters. The next person said API was just a myth and I didn’t have high enough security clearance to hear any more.

jQuery saw I was floundering and tried to boost me up, but it was like I’d suddenly forgotten English with as much as I understood him. I politely wandered off. As I was trying to sneak out AJAX bulldozed over me. She bought me a drink, or three, and at that point, I felt I could take on the world.

I boldly stepped to the middle of the room, shouting over everyone, and demanded that API showed their face. Well, remember how they’re a ninja? I saw a foot right before I hit the floor. Node.js sauntered by with a muttered “You asked for that.” I thanked Node for his unsolicited and unhelpful comment before peeling myself, my pride and my migraine up off the floor.

I didn’t officially meet API until 3 days later. Thankfully, their feet stayed on the floor that time. They told me they overreacted, thinking I was another hard-core fan, coming to kidnap and alter their genes again. I gladly accepted an invitation for coffee and a promised explanation of their past and how to make things easier.

We’ve still got a long way to go with getting to know each other, but the Gitter base was right. API is a swell person once you get past that mean round house kick.

Return Largest Numbers in Arrays

I feel like curling up in the corner to cry. I have been working on this bonfire for days!! And I was overcomplicating it. Part was I couldn’t figure out why I was unable to get to the nested arrays. Part was, it just can’t be that simple. But it really was.

I threw out four lines of code, added a variable and the thing worked like a charm!

 

Instructions:

Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.

Remember, you can iterate through an array with a simple for loop, and access each member with array syntax arr[i] .

If you are writing your own Chai.js tests, be sure to use a deep equal statement instead of an equal statement when comparing arrays.

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

Continue reading

Bonfire: Title Case a Sentence, Difficulty: 1

Instructions:

Return the provided string with the first letter of each word capitalized.

For the purpose of this exercise, you should also capitalize connecting words like ‘the’ and ‘of’.

Remember to use RSAP if you get stuck. Try to pair program. Write your own code.

 

My Solution:

Continue reading

Bonfire: Factorialize a Number Difficulty: Level 1

I had to redo this one. It showed up correctly the first time, but apparently my answer was so far out in left field, that I got a false positive!

Instructions:

Return the factorial of the provided integer.

If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n.

Factorials are often represented with the shorthand notation n!

For example: 5! = 1 * 2 * 3 * 4 * 5 = 120f

Remember to use RSAP if you get stuck. Try to pair program. Write your own code.

 

My solution:

Continue reading

Navigating the Bonfires

So, I reached the bonfires on Free Code Camp faster than I was expecting, especially with the few breaks I took. Apparently it helped that I knew a lot of the HTML and CSS already. The Bootstrap and jQuery were both fun and fast. The basic Javascript flew by because I already knew a little about for/while loops. I felt confident that I could stumble my way through some practice programming.

As I sit here staring at this huge wall of “I had no fucking idea”, I’m both worried and excited. Worried because this is a massive wall! Because I’ve been trying to learn this for years but I kept trying to scramble up a solid slick surface without any tools. But I’m excited because I finally found some grappling hooks and footholds that’ll help me to pull myself to the top.

Thankfully, I don’t see myself running from this anytime soon.