Chingu Speedrun Challenge: Weather and Wiki

Projects 3 and 4 of my Speedrun challenge are now functional. You can find the code to the four front end projects I’ve completed so far in this GitHub repo.

As I’ve stated before, for the sake of time I’m holding off on styling the apps until the end, so these Local Weather and Wikipedia Viewer apps are pretty ugly. They do, however, function properly, which is all I’m looking for right now.

What I learned

The Weather and Wikipedia projects provided more repetition in making HTTP calls using Angular. Both projects require the use of an API call in which fairly large JSON objects are returned. Working through the two projects helped solidify my ability in handling such calls and rendering the relevant results.

Biggest Challenge

I think the biggest obstacle I had to face with these two projects (other than putting together an API link to Wiki that actually worked) was rendering the results of the Wiki API.

For each query to the Wiki page, you’ll receive an object that contains (potentially) multiple responses that you need to render in the HTML page. In Angular, this immediately makes you think of the *ngFor directive, but that will only work for objects that are iterable.

If I query the Wiki Viewer for the word “fire”, the following object is returned:

You can see that Response.query.pages contains 10 objects that we need access to in our HTML. As this object is not iterable and at the moment (as far as I know) Angular does not provide an option for iterating over objects, we need to figure out a way to iterate over the object.

It’s possible to reformat the results into an array, but it would be easier to use a pipe (see this stackoverflow answer).

The following function will return an array of keys to the object ‘this.results’.

You can see when we set

 and we run it with the same example as above, ‘fire’, we get an array of keys to the pages object:

We can now use the keys() function to iterate over the object we want to access in our HTML using *ngFor

That’s it! I’m on to my next project….

-Jeremy

Chingu Speedrun Challenge: Quotes and Rabbit Holes

This is an update to my Chingu Speedrun Challenge. If you don’t know what the hell I’m talking about, it’s explained here.

The Speedrun Challenge is all about repetition and iteration so that something new becomes second nature. This post covers the second project, the Quotes app, which should be the first of several projects that will focus on making and handling API calls in Angular.

I’m off to a slower start than expected in my Speedrun for two reasons. Actually three reasons, but I don’t plan on ‘fixing’ time spent taking my kids to baseball and football, I’ll just have to work around that…

The two causes for the slow start that I can address are A) being overly nit picky about the design of each project (Tribute Page) and B) diving down deep rabbit holes (Quote Project).

Hold off on Design until the End

The first issue (design) I plan on addressing by not styling any of my projects until the end. I’ll focus instead on getting as many functional apps built as possible. At the end, I will style the collection of apps as a whole as much as possible before addressing them individually.

Each project will have a minimum level of styling that is essential to the functionality of the app. I will attempt to keep the styling to the level of functionality and not get stuck in the weeds on the little things.

Avoid Rabbit Holes

The second issue (rabbit holes) will be harder to fix.

While I was building out the Quotes App, I got stuck focusing on how to cast an observable to a custom type. I had a working API call fairly quickly, using the https://talaikis.com/api/quotes API (this API returns 100 quotes so I could limit the HTTP calls).

It’s my nature, however, to dig deeper when I don’t fully understand something. Here, I was having a hard time understanding the best practice in Angular for taking the Observable that is returned from the HTTP call and converting it to a custom type.

This led me down a rabbit hole looking into observables, classes, interfaces, reading more on Typescript, etc, etc.. While this was definitely helpful, and I learned quite a bit, I have to keep in mind that the Speedrun is mostly about tackling as many projects as possible.

Moving forward, I’ll try to make a conscious effort to limit my research to gaining a working knowledge of a topic, then move on. This will be difficult, as I have a habit of digging deep into topics that I don’t completely understand. For these instances, I’ll keep a list of topics to research further after the Speedrun ends.

You can find the code for the Quotes App here. I’ll be working on the Local Weather App next.

Chingu Speedrun Challenge: Project Started and Tribute Page Built

Earlier this year I was fortunate enough to discover, and become part of, the Chingu Cohorts.

Here’s a medium article on what the Chingu Cohorts are, but suffice to say that it’s an online (Slack) community of individuals determined to be the best developers they can be and help each other along the way. It’s a place for learning, building, collaborating and motivating, and I feel lucky to have found it.

 

Recently, a group of Chingus started a Speedrun Challenge, which is basically up to a month spent building as many of the Free Code Camp (FCC) projects as possible to learn and master a particular stack. You can learn more about the Speedrun Challenge in this Medium article and this GitHub repo.

I’m starting a Speedrun today and will be working with the MEAN stack. Part of the Speedrun Challenge is to write a blog or Medium post for each project completed. This is my post for the Tribute Page.

Given that the Tribute Page is the first ‘Basic Development Project’ in FCC, it’ll be a very basic project consisting of one static page paying tribute to someone or something. To speed things up, I’ll be reusing the content from my original tribute to Thomas Edison.

Project Structure

The final part of the Challenge is to create one single page application (SPA) out of all the projects that you’ve created. With this in mind, I’ll be building all the individual FCC projects as one larger application with a single landing page.

I created the project using the Angular CLI by running the following code in the VS Code terminal (View->Integrated Terminal):

This sets up a project called “fcc-portfolio” in the current terminal directory. The various flags do the following:

  • --prefix fp  will prefix all the the component selectors with “fp” (default: app)
  • --routing  will generate a routing module (default: false)
  • --style=scss  will set the style file extensions to scss (default: css)
  • --source-dir=client  will name the source directory ‘client’ (default: src)

Big thanks to P1xt for pointing out the bottom 3 flags listed above. They definitely saved me some time setting up routing and Sass.

Once the project was up and going, it was quite easy to add the Tribute page using my previous project as a guide for content.

 

Currently, I have the app.component acting mostly as the <router-outlet> with the router serving up the LandingComponent and the TributeComponent as called for.

The LandingComponent will continue to act as the main landing page with links to all the various projects.

You can follow my code in this GitHub repo.

Biggest Challenge

For me, the biggest challenge here was design and making the page responsive. Maybe challenge is the wrong word… It’s certainly where I spent most of my time.

I’m fairly new to working with CSS Grid and Sass, so incorporating those and making the page fully responsive took more time than it should have. But hey, isn’t that why I’m doing this??

You can see the final product above. I’ve decided to call this good enough for the time being (with respect to design) and move on. I’ll come back in the end and work on getting the design to look consistent throughout all projects.

Alright, off to my next project.

-Jeremy

Active vs Passive Learning – What’s the best way to learn to code?

So, you’re learning to code… When you sit down at the computer, do you open an online course? A book? An IDE and start hacking away?

Photo by Alejandro Escamilla on Unsplash

After all, what is the most effective and efficient way to learn to code?

We live in exciting times and the ability to code can open a lot of doors. Never before have this many top notch resources been so readily accessible to anyone willing to roll up their sleeves and dig in.

So, what is the best way to learn to code?

Learning to Code Strategies

The way I see it, there are two main strategies for learning to code.

The first, passive learning, involves the consumption of resources. By this I mean reading books, websites, and other blogs, or watching tutorials on Udemy, Coursera and YouTube.

The second, active learning, involves lots of practice.  This can include building side projects, working through the freeCodeCamp curriculum or writing solutions to algorithm challenges at sites like CodeWars or HackerRank.

But which is better, active or passive?

The answer, in my opinion, lies somewhere at the intersection of the two.

I know, way to take a stance, right? Let me explain…

Photo by Syd Wachs on Unsplash
When to Make the Leap

I’ve given this question a lot of thought lately with how it relates to my own situation…

I’ve been learning Angular over the last several months while working my way through the Free Code Camp data visualization and back end sections.

I started with Angular by doing some reading, then enrolled in this Udemy course. Max is an excellent teacher by the way, and I highly recommend his courses.

The problem is that there are almost 400 lectures and over 26 hours of content! Considering that I coded alongside the examples and took copious notes (not to mention my full time job and two kids!), this course would take me forever to get through.

After spending a few weeks working my way through most of the course and it’s examples, I started wondering — “do I know enough to try to build something??” It turns out, no, I really didn’t…

It wasn’t that I didn’t know Angular in enough depth. You don’t necessarily need to know something in great depth to get started, that’s where the iteration between active and passive comes in.

The problem was that I didn’t have the breadth of knowledge to start on my own. I had a hard time moving from the active phase to the passive phase because I didn’t know what I was looking for.

This led me to come up with the following guideline to use in the future

“Try to learn what you don’t know before you starting on your own…”

Photo by William Iven on Unsplash

I know, sounds pretty asinine right? Let me try to explain with an example…

How can you possibly “learn what you don’t know”?

Let’s return to the Udemy course example.

I had worked my way through the components, data binding, directives, services and forms modules of Max’s course. Of course, I didn’t know everything about implementing them off the top of my head, but at least I had a general idea about how they each worked.

Photo by Tim Umphreys on Unsplash

In other words, I knew that these parts of Angular existed and generally what they were responsible for. That way, when I encountered a problem, I knew where to start digging for a solution.

For these topics, I knew what I didn’t know.

I had not, on the other hand, looked at the HTTP section of the course. So when I had to make an API call in my Angular app, I didn’t know there was a mechanism in Angular to handle this.

So I turned to something I already knew… I tried setting up a jQuery.ajax() call, not knowing that Angular had their own HTTP service.

Had I at least glanced through the HTTP module, I would have learned enough to know it existed, and therefore would have turned to the proper solution make my API call.

The Take-Home Lesson

My point here isn’t that I’m an idiot for trying to set up $.ajax() in an Angular app. Although if the shoe fits, right??

My point is that I would have been better off if I had gotten a broader understanding of Angular before I had begun. I didn’t need to know exactly how the Http service worked, just that there was one, and therefore, would have known where to turn to make that API call.

To sum it all up, the passive phase is great for exposing yourself to the breadth of a topic (concepts, ideas, etc), whereas the active phase will really hammer home the knowledge and give you a deep understanding of what you are learning.

The trick is finding the sweet spot where these two intersect.

Thanks for reading, I hope you were able to take away something of value for your time. Please feel free to comment below either way.

-Jeremy

Learning to code? Avoid Workload Paralysis

There’s a lot to consider when learning to code.

A LOT!

In fact, saying “there’s a lot to consider” is a huge understatement. Chances are, at some point you are going to get overwhelmed with trying to find the best path forward.

With that overwhelmed feeling comes the sense of workload paralysis. You know, that feeling where you have way too much on your plate and you can’t possibly picture a way to get everything done.  So you just sit there, shut down and stare at your monitor like a deer in headlights…

Sound familiar??

The Triggers

This has happened to me several times while on this ‘Learn to Code’ journey and in looking back, I’ve identified two main triggers for it…

Either a) I’ve read the opinions of too many people, each giving different advice on how to approach learning to code or b) I’ve let my mind to wander from the task at hand and allowed the big picture overwhelm me.

Granted, these are what I’ve identified as my triggers. Yours could be different, so it might be worth a little time reflecting on the situations that send you into paralysis.

For the time being, let’s dig a little deeper into mine…

The Trap of Too Much Advice

Reading advice is a good thing, it can help you navigate your journey more efficiently. But taking advice from too many people, all with opposing views can be paralyzing.

Or worse, you’ll start resembling this cat trying to catch a laser pointer.

via GIPHY

That could get ugly pretty quick… But what to do about it?

Make it your mission to find someone whom you trust, and who is offering advice on the exact goals you have set out for yourself. Doing this will keep you focused on your own path, not someone else’s…

Use this advice to draw a path forward and trust that if you maintain that path, you’ll eventually reach your goals.

Most importantly, write the plan down.  I’ll discuss this more below, but if you try to keep this all in your head you’re destined to become that cat…

The Big Picture

Don’t get me wrong, I’m not saying that you shouldn’t have perspective of the big picture.  But if you allow it to overwhelm you, you’ll lose sight of the path you’ve have carved out for yourself.

As I mentioned above, use the advice of someone you trust to create a plan.  A key part of this, is writing it down and approaching it in a step by step manner.

All you really need for this is a pen and a piece of paper, but if you prefer to keep a digital copy, Trello or even Google Docs are decent options (yes, I know there are plenty of storyboard and goal writing apps out there, but that’s beyond the scope of this article).

Once you write everything down, you no longer have to spend the mental bandwidth on remembering the entire plan.  You can clear your head and focus on the next step.

Again, allow yourself to look at the big picture but ALWAYS keep your focus on the next small task in order to maintain momentum on your path forward.

As alway, I hope this was helpful, feel free to leave comments below.

Now go build something awesome!!

-Jeremy

Deployment of Angular2 App to GitHub Pages

Angular 2, or just Angular as it’s now called, is new, exciting and constantly evolving.  While it’s great to be on the cutting edge of a JS framework, the process can be extremely frustrating at times…

I’m currently working through “Angular 2 – The Complete Guide“, an Udemy course by Maximilian Schwarzmuller.

I wanted to take a quick break to test how much of the course has sunk in, so I went back and rebuilt my Random Quote Generator App from the Free Code Camp frontend projects.  I picked this because it was fairly simple and I wanted to build an Angular project from creation to deployment without investing too much time.

Building the project was relatively quick and painless, which is a testament to Max’s course mentioned above.  You can see my GitHub repo here (and the app finally deployed here).  Given that it’s a static app (i.e. no backend), I figured GitHub pages would be a good place for deployment.

This is where the headache started…  One of the inherent problems when working something like Angular, that’s constantly changing is that many of the resources become irrelevant and incorrect very quickly (this one, no doubt, included).

I found multiple blogs and Stack Overflow answers, some written only months ago, claiming that you could deploy to GitHub pages with the following one command:

After much frustration, and multiple attempts at rebuilding and redeploying, I found that the deploy command was removed from the angular-cli.

So the command written above certainly wouldn’t work.  The functionality, however, is available through the angular-cli-ghpages npm package.

Before we proceed on how to use the angular-cli-ghpages package, there are a couple assumptions being made in this process that will need to be met if this is going to work…

First, I’m assuming that you have Node.js installed on your computer.  If not, visit the Node.js site for instructions for download.

I’m also assuming that you have an Angular app, associated with a GitHub repo, written and ready to deploy…  If not, go create something and commit it to GitHub!!

With those assumptions out of the way, input the following in a terminal to install the npm package globally:

Once installed, you’ll need to build the app.  In the app’s folder, run:

This will create a dist folder that contains the compiled code for your app.  Obviously, you’re going to want to change the above command to include your GitHub username and the repo name.

Then deploy:

or just:

You can find all the options at the angular-cli-ghpages site.

This will deploy a new branch to your GitHub repo called gh-pages branch. Make sure you’re using this branch as the source for your app.  You can find/change this option under the GitHub Pages section of the Settings tab of your repo.

It might take a few minutes for the app to show up on your page, be patient!

That’s it for now, I hope this was able to help.

-Jeremy

Prefer Heroku?  Here’s a good article if you’re having trouble deploying a static angular app to heroku.  The title says Vue, but it works great for angular now that they’re using webpack…

The MEAN Stack – A New Direction for Crooked Code!

It’s been about 8 months since I began the Crooked Code blog…  And so far it’s been a great experience!

While the overall purpose for writing the Crooked Code blog has been, and will continue to be, helping others learn to code, most of the posts fall under one of two major themes…

The first of these themes has been articles covering Algorithm Scripting Challenges in the Free Code Camp curriculum. Two of the most popular of these posts, based on pageviews, have been Symmetric Difference and Map the Debris.

The second major theme has been tutorials on JavaScript, including the Rubber Ducking Series I started a couple months ago based on (but not affiliated with) ‘You Don’t Know JS’.

Where to go from here??
Where to go from here??

While I plan to continue adding JavaScript tutorials, particularly the Rubber Ducking Series, I’m planning on putting a temporary hold on new posts covering Free Code Camp algorithms.

As you may have heard, Free Code Camp has announced they are adding a major expansion to their curriculum. A look at the current map of the beta version shows that many of the advanced algorithms will be supplemental to the main program.

Because of this, I’ve decided to wait until the beta is released into production before I continue writing up more algorithm challenges, as I have no way of knowing which challenges will make the final cut.

I am, however, very excited to announce that I’ve decided to add a third major theme here at Crooked Code – Angular 2 (ng2) and the MEAN stack.

Angular 2

I’m doing this for several reasons…

First, about 90% of my focus lately has been on learning Angular 2.  It’s the first JS framework I’ve learned, so the process has been a long one, and judging by many of the comments I’ve seen throughout the FCC community, I’m not the only one on this journey.  Which brings me to my second reason…

The final release of ng2 is so recent, many of the tutorials and videos out there are a mix of earlier release candidates and the final release all mashed together…

This causes some major confusion in building a working ng2 app, particularly in how to structure the project.  So I hope to shed some light on what I’ve found and save others some of the time I’ve spent (and continue to spend) making sense of it all.

MongoDB, express, Angular2 and NodeJS
MongoDB, express, Angular 2 and NodeJS

Further, I plan to highlight how the ng2 frontend framework ties into the rest of the MEAN stack.

Now that I’ve spent some time digging into Angular 2 on a deeper level, I’m planning on using my previous experience with Node, Express and MongoDB (with Mongoose) to build larger full stack apps.  I think this will be a great opportunity to share what I’m learning with the Crooked Code community.

That’s all for now,

-Jeremy