Working on the Free Code Camp Weather App

I am working on the Free Code Camp weather app quite consistently.

Understanding the difference between $getJSON() and $ajax() to parse the JSON response from your chosen weather API is key. You can technically use $getJSON but the $ajax API call syntax is much easier to understand, though is more verbose. You can also customize how you get your response as well as other options.

Take:

[javascript]
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var url = \”https://api.darksky.net/forecast//\” + lat + \”,\” + lon;
$.ajax({
type: \’GET\’,
url: url,
dataType: \”jsonp\”,
success: function(data)
)};
[/javascript]

This jQuery code has an $ajax() function with an object inside it. It specifies what type of ajax API call it needs, which is GET— we are retrieving information from the API, in the form of a JSON response. We are passing in the API URL which we assigned to the url variable in the self-executing anonymous function expression navigator.geolocation.getCurrentPosition(function(position). Also in the ajax call is the dataType which expects the type of data the response will give back which is most commonly jsonp, and the success callback.

This is fairly easy to grok if you are familiar with jQuery.

$.getJSON() or $ajax()?

$.getJSON(url, data, success) is how you would use it. It\’s simple, not verbose, yet it is limiting.

A better $.ajax() example which showcases the complexity you can accomplish:

[javascript]
$.ajax({
type: \’GET\’,
url: filename,
data: data,
async: false,
beforeSend: function (xhr) {
if (xhr && xhr.overrideMimeType) {
xhr.overrideMimeType(\’application/json;charset=utf-8\’);
}
},
dataType: \’json\’,
success: function (data) {
//Do stuff with the JSON data
}
});
[/javascript]

There are a lotof parameters here. Some are asking if you want to get the results asynchronously, using an xhr response from the server, and several other types of parameters. This gives you more control, depending on the API.

Link to the App?

It\’s almost finished. Still need to get civic data and do some CSS Kung fu. But after that, it should be ready to go. No link– I have an API key I am using and need to keep it a secret for a bit. Once it is done I will link it up on GitHub Project Pages.

100 Days of Code, Day 12:

11 December 2016

Today’s Progress:
I worked on the Free Code Camp weather app for a couple hours today. I am sifting through the Dark Sky API, Skycons, and Stack Overflow. It isn\’t as hard as I am making it. I should have it done within the week.

Thoughts:
I am more comfortable with $.ajax() and $.getJSON() functions to get JSON from an API endpoint that uses JSON [note]which is most of them[/note]. I don\’t quite know how I\’ve come to understand these things, or how I\’ve become more efficient at searching for and understanding the code in places like Stack Overflow but the change from newbie and intermediate is welcome.

I will be working more on it later this week as now I want to start working on CodeWars code katas and HackerRank algorithm challenges.

Link to work:
It\’s a private pen.

Bonfire Tears (Free Code Camp Edition)

\"Crying\"

“Laughter and tears are both responses to frustration and exhaustion. I myself prefer to laugh, since there is less cleaning do to do afterward.” ― Kurt Vonnegut

There comes a point in every new programmers life when they hit a barrier, a wall, a threshold of understanding or non-understanding of the material at hand.

I hit that threshold yesterday.

And the day before it. It was a solution so simple; I had the right idea several times. I got explained to and encouraged, and guided and it was like their words were bouncing off my skull instead of being absorbed into my grey matter. The question was:

Check if a string (first argument) ends with the given target string (second argument).

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

Here are some helpful links:

String.substr()

The given code:

function end(str, target) {
 // "Never give up and good luck will find you."
 // -- Falcor
 return str;
}




end("Bastian", "n");

What the Hell Substrings?

\"headdesk\"

You’ve done it before and you can do it now. See the positive possibilities. Redirect the substantial energy of your frustration and turn it into positive, effective, unstoppable determination. –Ralph Marston

I knew that, since we had lengths of different strings. The tests proved that. So I kept hardcoding for one particular string. I couldn’t get past that. How do I code this thing for different string lengths? How do you get the length of a string? .length. Right? YES. But how. Where do I put the .length? I had this code:

function end(str, target) {
 //"Never give up and good luck will find you."
 // -- Falcor




//dees [8:42 PM]
//\'abcdefghijklmn\'.substr(0, 3) // \'abc\'
//"grab 3 characters starting with the character at address number 0"
​
 var isEqual = str.substr(6, 1) === target.substr(0, 1);
 return isEqual;




}
​
end("Bastian", "n");

I found out in Free Code Camp’s Gitter chat that you can get to the end of a string with a negative number; no need to keep popping off all those letters before the “n” on Bastian. But I continued to hard code for “Bastian” and “n”. I needed a broader approach.

I tried:

function end(str, target) {

​
 var isEqual = str.substr(-1) === target.substr(-1);
 return isEqual;




}
​
end("Bastian", "n");

But I wasn’t really making any progress. All but one of the tests were passing, and I wasn’t really utilizing .length to have a basic variance of string lengths. So I did this:

function end(str, target) {

 var n = target.length;
 var z = str.length;
 var isEqual = str.substr(-1) === target.substr(-1);
 return isEqual;

}
​
end("Bastian", "n");

Same result. I knew I needed to have .length; up there. But where to go after that?

Aha!

\"Aha\"

Finally, I had to be guided to the answer. The woman was in Britain and I am pretty sure I was keeping her awake. So we came up with this solution:

function end(str, target) {
 // "Never give up and good luck will find you."
 // -- Falcor

 var length = target.length;
 var isEqual = target === str.substr(-length);
 return isEqual;
}

end("Bastian", "n");

var length = target.length; gets the length of any target string and assigns it to the length variable.
var isEqual = target === str.substr(-length); compares the target string with the original string, subtracting the last characters of the length variable, starting with the end of the string.

I hope I explained that right. I understand it. It takes a bit to look at and understand but when we came to that solution, I felt like a complete idiot.

I cried. I literally did. Part of that is just me already being emotional. The other part is me not wanting to put my fist through my MacBook Pro screen. Strings are characters. Not words. And I was totally getting stuck on that.

Bonfire tears indeed.

Free Code Camp Bonfires

\"bonfire\"

“…talent means nothing, while experience, acquired in humility and with hard work, means everything.”
― Patrick Süskind, Perfume: The story of a murderer

So I started the Free Code Camp Bonfires. I am really being tested as far as algorithmically; how do you come up with a solution to this problem? I guess I got a chance to do this in class when I build these Java projects and do these little code snippet things for MyProgrammingLab. But the JavaScript really tested me in ways I didn’t think I could be, because I am actually conscious of the fact I am coming up with algorithms.

The first one was easy. The second one I needed serious help with. The third I did a ton of research on, and eventually came up with a solution. I am not sure if it is “eloquent” but it ran. What I am finding out is that the Bonfires, while they get harder, actually build upon skills you learned in the previous. So we are working with a ton of for loops and iterating over arrays, changing a string to an array, concatenating arrays, splitting them and splicing them to determine if words are palindromes and changing a sentence to Title Case.

I worked with Mark Pearyer on the Title Case Bonfire. Our solution was not elegant but he took charge and didn’t use the Gitter chat or Stack Overflow. We worked straight from the MDN docs. I am thinking of using Scratch js to refactor the code we wrote and debugging it in the browser.

One of the things Mark taught me was using a console.log to get results as you’re iterating your project. I knew this was a thing, I learned it early at Codecademy but forgot it was in my toolkit. Will be doing that from now on.

This is Hard…

\"thinking_guy\"

The price of success is hard work, dedication to the job at hand, and the determination that whether we win or lose, we have applied the best of ourselves to the task at hand. – Vince Lomabardi

…As it should be. Programming isn’t easy. I’ve hit a bump, a snag, the honeymoon not as great as before but I still love it. I love it when my code just works. I may have had to iterate a million times and I may have introduced 10 more bugs than I had before in the source code but it is so worth it to see the end result.

Here is a gist of one of my solutions. You’re free to refactor.

 

 

 

 

 

NaNoWriMo? How About NaCoWriMo?

\"NaCoWriMo\"

November, if you’re an internet savvy fiction writer, is NaNoWriMo, or National Novel Writing Month. As a writer in my previous life, I participated in NaNoWriMo several times. The objective is to write 50,000 words of a novel in one month. It’s insanity personified. I spent countless nights awake writing to get to 50,000 words and only ever “won” once. You win a certificate and some nice discounts from writing software people. The community is great as well.

Well, I want to propose a NaCoWriMo, National Code Writing Month, where new devs especially, write as much new code, or contribute to a few new open source projects, or work on their own projects, everyday, for the month of November. You could also do a tutorial everyday, like Treehouse or Free Code Camp. Should you have a finished project? Nah. Coding is harder than writing is, despite what writers say, and so you should have something if you are working on a new project. If you’re contributing to an open source project, contribute to at least two or three.

So how do I measure winning? In NaNoWriMo you won when you got to 50,000 words on December 1st at midnight. How I measure it will be if you have a working framework of a project, have your green commit blocks filled, have your Free Code Camp logs filled green, everyday for a month. What do you win? The satisfaction of knowing you accomplished something, small or large, contributed to something large or small, that pushed you further towards your goal of becoming a competent developer.

Maybe I’ll thow in something good to the first person to complete NaCoWriMo, like a book or Amazon Gift card (I don’t have a lot of money so you’re looking at $25 max) or an iTunes Gift Card for that dev app you were eyeing.

Good idea? Let me know in the comments.

Day 3: Event Handlers and Animations

\"Day_3_badge\"

I only did one jQuery class today as I had a lot to get done otherwise, but we went over documentation (which I never use the browser for because Dash) and preparing your prototype with comments, looking at your HTML file to see what you need to animate.

We went over manipulating the DOM (more on that in a moment) and Traversing the DOM and Event Handlers.

So you can manipulate the DOM with the [jquery].hide()[/jquery] method as well as the

.show()

. But we also added a button to the DOM in the HTML with this

$(".spoiler").append("<button>Reveal Spoiler!</button>");

Also we went over event handlers. So now that we have the button made in our HTML you can add a

$("button").click(function(){});

with passing an anonymous function in order to do something when the button we made is pressed.

$(this)

So in the code block with the button selector with the [jquery].click(function() {});[/jquery] you can do nifty things. So inside this code block we used

$(this).show();
$(this).remove();

I hadn’t really gotten my head around [jquery]$(this)[/jquery] until he explained that since we had two

<span>

elements under the

<div class= "spoiler"</div>


we needed to specify which button the

.show();

and

.remove();

when clicked. So I found that

$(this)

is magical. So when I click on the first spoiler button, this knows what to do with it. It knows I’m not clicking the second spoiler button. It knows to hide remove the second one when I am clicking the first. Cool stuff.

It was a pretty easy lesson since I have gone over this on Codecademy and Free Code Camp. But refresher is great for reinforcement.

Day 2: Rehashing jQuery Basics

\"jQuery_badge\"

So today I went over jQuery basics, documentation and a total disruption of what I learned on Free Code Camp and Codecademy.

At both Free Code Camp and Codecademy I learned to write:

$(document).ready

before all the other code to help load the DOM before the rest of the page gets loaded. Without that, the wisdom was, some of your code wouldn’t load first, animations, etc would break because they were loaded a little down further in your js document.

But throughout Treehouse courses we always put the script tags at the end of the HTML document, right before the end

<body>

tag. This loads the document first before any JavaScript or jQuery.

So imagine my surprise when we were writing:

$(“.warning”).hide().show(“slow”);

without the

$(document).ready

at the top of the document.

Basically it was all videos. I’ll post more tomorrow as I do it. Excited about my progress.

FCC to Treehouse

\"TT.jpg\"

Free Code Camp to Treehouse

 

 

Treehouse is a Godsend

Let me say first: I love Free Code Camp; I love what Quincy Larson is doing for busy people to learn how to code at their pace, on their time without needing to go to college to get a job. I love the premise and I still want to use it.

My problem is I don\’t learn well in their model. I have been doing Free Code Camp for about two or three months now (I think). I didn\’t do it everyday but I would go on streaks of doing the Waypoints and then stop. When it was time for me to return I was completely lost. I was learning but what I found is that whenever I had to complete a challenge on Codecademy or write my own program, I\’d continually need to look at the hints or Q&A forums. There were only a few times I didn\’t need to do that and it was frustrating me. I know that I am far from stupid but this type of constantly second-guessing myself was making me feel incredibly inadequate. I thought, a lot, that I wasn\’t cut out for this at all.

Then comes me visiting Nick Queen\’s blog and seeing his Treehouse badges. My buddy Mark had started Treehouse as well and I had checked it out, signed up for a free trial but never used it. I let my free trial dwindle because I didn\’t have a school ID to get the school discount and I honestly didn\’t see the point. I was already doing just fine with Free Code Camp and Learn Python the Hard Way. But stopping by Nick\’s site and talking to him and seeing his progress on Twitter, as well as how improved Mark was in his knowledge of JavaScript I thought I\’d sign up for a new account and trial and actually work through it.

So I started the HTML track and skipped it. I then started the CSS track and found just how much I was actually learning in such short amount of time. The key is: videos and explanations, plus following along with Workspaces. These three things help you get a grasp on the material. There are quizzes and challenges that make certain you have a grasp on the concepts.

I went ahead and skipped majority of the CSS beginners track as I have a JavaScript project looming and I know enough CSS to get by.

I am learning so much in such a short time that I have even more app ideas. The explanations behind the concepts is something I appreciate. I often had to reach out to other people to find out the why of something. For instance:

$(this)

I am certain Treehouse has answers for me about this and I kinda grok it. But I am looking to Treehouse to make it even more clearer.

I have gotten 5 badges in three days and I am excited to get more. The gamification of all these sites really keeps you in them. And the fact I can display my badges is icing on the cake.

What About Free Code Camp?

Oh they\’re still on my radar. I will come back to them once I know more about what I am doing in JavaScript. The chatroom is so great that I don\’t think I\’ll ever give it up. I am hoping Treehouse gets a Slack or Gitter because that is the next step to make it great. I\’ll have to pay for Treehouse, unlike Free Code Camp, but that\’s okay. It\’s $9/mo for students so not too much of a burden. And you can pause your enrollment at any time. Like I said, I love Free Code Camp. The style is just not right for me right now.

JavaScript, JavaScript, JavaScript

\"JS\"

Free Code Camp, love. I really am in love with this site. I guess it’s kind of disingenuous– Free Code Camp outsources its JavaScript course (for beginners) to Codecademy. But I’ve built some pretty interesting games, felt the frustration of debugging (missing curly brackets search for 30 minutes. Seriously), and the rewarding feeling of building something small. I’ve taken lots of notes in Quiver, the notes app that can mix code, markdown, text, and LaTEX in one note (excellent resource). I plan on using Quiver as my main notes app for computer science classes.

Anyway, I stumbled a bit on functions because of the way they looked. Here is the first part of a function:

var orangeCost = function (price) {
}

You set up a variable called orangeCost and that is also the name of the function. I was stuck on var orangeCost being just a variable and not a function. I finally got it down with practice. What helped was understanding parameters.

I had some difficulty with this function:

var orangeCost = function (price) {
var quantity = 5;
console.log(quantity * price);
}
orangeCost(5);

The problem? This:

\”You are a creature of habit. Every week you buy 5 oranges. But orange prices keep changing!

You want to declare a function that calculates the cost of buying 5 oranges (So you could name the variable orangeCost and assign the function price since you are looking for the price of the 5 oranges).
You then want to calculate the cost of the 5 all together (quantity).
Write a function that does this called orangeCost().
It should take a parameter that is the cost of an orange, and multiply it by 5.
(the parameter is in between the parentheses in the function. This is where you’d put price. The price changes each time.)

It should log the result of the multiplication to the console.
Call the function where oranges each cost 5 dollars.
?
Hint
What is the one bit of input that changes each time? It would be the price. So give your parameter the name price. And when you call your function, put in a number for the price to see how much 5 oranges cost!\”

I was trying to make the math a function. I wasn’t thinking in algorithms and not breaking the problem down into smaller chunks. I was still not exactly clear on the concepts of functions so this made it difficult. But I knocked it out of the park with subsequent exercises.

Here is my Rock, Paper, Scissors game. I am thinking about improving it, as suggested by Codecademy, but I was so frustrated by the debugging I just wanted to get it over with.


What else? Well, I mentioned debugging with the missing curly brackets. It’s because of the nesting with the If, Else if, and Else, loop/function (am not certain which these are currently though I am leaning towards a loop). There was so much code there and so many loops that I just didn’t remember to put the curly brackets to close the loop.

Here iit is, the Rock, Paper, Scissors game, the debugging job from hell:

var userChoice = prompt(“Do you choose rock, paper or scissors?”);
var computerChoice = Math.random();
if (computerChoice &lt; 0.34) {
computerChoice = “rock”;
} else if(computerChoice &lt;= 0.67) {
computerChoice = “paper”;
} else {
computerChoice = “scissors”;
} console.log(“Computer: ” + computerChoice);

var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return “The result is a tie!”;
}
else if (choice1 === “rock”) {
if (choice2 === “scissors”) {
return “rock wins”;
} else {
return “paper wins”;
}
}
else if (choice1 === “paper”) {
if (choice2 === “rock”) {
return “paper wins”;
} else {
return “scissors wins”;
}
}
};
compare(userChoice, computerChoice);

See what I mean? Ha.

Great week of learning so far. Back at it tonight.

 

Update:

I found that I need to actually write out math problems by hand to figure out how to write them in code. This may seem counterintuitive but is a must for me– in all my math classes I\’ve used my iPad and Noteability to figure out problems and equations. So this makes sense for me.

Killing This Code– LIKE A BOSS

\"Science!\"

(First, let me apologize for the glitch in these images on this page– theme creator knows about the glitch (going on two months) and hasn\’t found a way to fix it. They float left no matter what I do, and all the custom CSS I\’ve found to fix it doesn\’t do anything. I am looking for a temporary theme like this but it is hard to find what I am looking for).

 

Working at Free Code Camp is like having your own little cheerleading team as you string out lines of code, hunched over your MacBook Pro, the glare of the computer screen a reminder that you have an end goal and that goal is to make your living as a developer, staring at a screen and creating awesome things. (As far as the glare, get f.lux. Seriously. Your eyes will thank you).

The encouragement at the end of each challenge addicting. I find myself coding there more and more. Going through the CS101 by Standford and killing it. They use a modified version of Javascript which looks something like this:

image = new SimpleImage(“flowers.jpg”);

for (pixel: image) {
// your code here

}

print(image);

Sort of kinda like JS but not quite. Simpler for learning concepts.

I am almost done with the CS101 track on Standford/Free Code Camp sites and am looking to dive into the Javascript track on Free Code Camp.

Take a look at how I’m killing it. Here is my Trello board/checklist for this month. I can probably start on July’s challenges.

\"Trello\"