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*

Advertisements

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!

Mini Update: Continue vs Break

After attempting to crash my computer with an infinite loop, I understand the very important difference between the Break statement and Continue statement.

What the definitions said:
Continue ~ “breaks the current iteration of the loop”, only if a certain condition is met, then continues on within the loop.
Break ~ “breaks the loop” and continues on to what’s after it (it being the entire loop).

What I interpreted:
Continue ~ Stop petting this bear. Leave this cave. Go find the next cave. Start petting the bear in there.
Break ~ Stop petting the bear because he’s getting really damn cranky. Matter of fact, get the hell out of there. Leave the entire cave system alone. Go find a cute little squirrel to chase.

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

Conquering the Rapids

I believe I’ve entered an area of rapids!

Since the new year hit, I’ve been going non-stop. But not on the things I thought I would be. Hell, I didn’t think the water would be this frothy for a while to come. The last year or so has been full of stagnant water. Not just slow moving, but completely at a dead stop. There were times when I didn’t need my paddle to get moving. Sometimes, the paddle was forgotten or ended up floating alongside the boat, and there was the one time I cracked it in that ‘sword’ fight with the guy in the next boat. That was fun! But other times called for full on rowing, only to feel like I was turning in circles.

I’m not saying those circles weren’t useful to an extent, but they weren’t what I wanted. They made me lethargic, cranky, and depressed. I got a lot of reading done, but other than that, nothing was keeping my interest. Just wanting to start a project wasn’t enough to keep me motivated through it. Which is why although some things are being pushed to the side, I’m grateful for the rapids.

Full Speed AHEAD!!!

I mentioned a while back that I started learning web development through Free Code Camp. Well, that’s sorta been on pause. I love the site and direction and the projects that are lined up, so I’ll definitely be starting that back up. The issue was I need a little more depth and direction. I was able to stumble through a few of the projects, but the whys were bugging me. And when something’s bugging me, if the questions lead to an infinite loop of questions when I’m already depressed, then frustration sets in, right before I stop caring.

Turns out, right before the uncaring kicked my door down, Udemy had a $10 Christmas sale and because I just had to get myself a gift, I stumbled upon the Ultimate Web Designer & Developer Course (UWDDC for short). (Don’t worry; I’m not getting paid to advertise. I’m just happy I found it!) So from front to back, I had the who’s, what’s and why’s of the foundation. The very freaking thing that I needed, all in one convenient place!

I sat down, plotted a course 30 days out, and got to paddling. I’ve gotten behind schedule (who needs them anyway) and my arms hurt but I can’t stop now. I’m currently 65% done with the course and I can confidently code a page, both static and responsive, prettify with CSS and play with JavaScript and jQuery, all of which I was muddling through to figure out on my own.

*Time for a side note:
I in no way put down self-learning. I think it’s one of the best ways to learn, because you make mistakes and figure out what blew up and it sticks in your mind why one thing worked better over the other. However, I do believe that sometimes extra help is needed and condone getting this help. Learning to know when you need help is damn hard and pride becomes a nagging bitch, but just push it overboard. Yes, you can give it a life vest first… but only if you have extra.

Know your limits, make it a goal to push through them, but also know when you need help knocking down a dam to get the river going again.

I haven’t even had time to go on any side trips with how fast I’ve been moving. This is a good thing and I plan to keep up the momentum for as long as I can. Next steps are to:

  • Revamp my portfolio project started from FCC
  • Learn PHP, MySQL, Angular JS, and WordPress Plugins through UWDDC

In my waxing poetic about how water and technology can mix, I almost forgot to mention what’s at the back of the boat. I’ve started the computer science curriculum through Open Source Society University on Github. I’m not sure how far I’ll get in this, but it’s something I’ve always wanted to look at.

So, to continue:

  • Start with Intro to Computer Science and see how I progress

My bad, I didn’t mean to start an essay. I started out about depression and ended up gushing technology. Let’s blame it on fatigue from working to miss all the rocks.

On a sadder note, at this point last year, I’d already read almost 40 books off my never-ending to-read list. As it stands, I’ve just staggered my way through the 18th one. Just a little upset about that.

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.

Hobbying the Internet

Has anyone noticed that a standard question when you meet someone new is “What do you do in your free time/to relax?” aka “So, what you be doing?” I’ve always thought my answer was lame. “Oh, nothing really. Read, hang with friends, surf the net.” Then I imagine the person is thinking, “Wow, she spends most of her free time on the internet. Not out doing something more interesting and meeting people.” But really, is my answer all that bad. Like everything, it depends on what you’re doing and if you’re enjoying it.

Yes, I spend quite a bit of time in the virtual world.
I love computers. I love the vast amount of information available online. I love reading random facts, search for whatever pops into my head, find the amazing things that people create, and teach myself something new, whether it’s useful or not.

I am going to point out here that just because someone else thinks that something is not useful/is a waste of time, doesn’t mean they’re correct. It’s just not useful to them. I, on the other hand, found it interesting enough to learn, which makes it useful to me.

FYI: These people are called ‘haters’. You’ll meet a shit ton of them in your life. Just keep doing you.

Not that I’m extremely up to date, but I think I drool over electronics and information the way my brother drools over comics and games. Don’t even get me started on that. Just. Don’t.

No, this does not make me a hermit.
The funny thing is I love to meet new people. I like to know what people like and how they feel over things they love. I just don’t find a lot of things worthwhile that others do. And many people don’t find what I’m interested in worthwhile. And that’s alright. Not everyone’s going to get along, which means that we just move along. And I sit and read a book or Google something until it’s time for me to leave.

I’m not about who’s fighting who on Facebook, someone Instagrammed their dinner (which is sometimes helpful when I’m in a rut), and what Kanye and the Kardashian did. I don’t care enough to have a real conversation about that. I like to know how things work, what books people like to read, where they work and why they like it, what their best vacay was, why the clouds are fluffy, what that creepy fish is at the bottom of the ocean, why space is expanding and what new Earth-like planet was found. I do have a healthy (try to read that with a straight face) obsession with Tumblr though. 😀 Don’t judge.

I’m surprised I’m not hella late on hearing about the Nicki Minaj vs. Miley thing. Although if I had to explain to someone what happened there, I’d face plant on the road of confusion.

Yes, I still like to spend time alone (or be alone in a crowded room), but still not in hermit territory.
Like I said earlier, I love to meet new people. But I get social overload also. I need to spend time by myself. The internet gives me to option to be alone, while still interacting with people. It gives me more control of the amount of contact I have without completely shutting myself off from the world like I would want to.

If you do find me interesting, talk to me. If you don’t, talk to me anyway. I honestly won’t turn anyone away, even if you do want to talk about Miley.

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