Just Methodical Penguins

     Coffee! It happened! Olé! I've been making it a habit to not go to the coffee shop during the week and have a French press at home when I need the caffeine. However, getting out of the house on occasion is good for me. That's why I come to the coffee shop on Friday. It's good for everyone. I don't scare people/ get ridiculed because of my beard, I save money, I get to sleep longer, win-win really. I wear my +Jupiter Broadcasting  sweatshirt, (which will soon have a  matching shirt(whoo!)) and get things done! I've got a salad waiting for me when I need a break, I've had my coffee, I have Grooveshark (again. Such a creature of habit.) playing a Piano Guys playlist because I love the cellos and piano together, so it's time to plug in and plug away!


But first, a link: https://developer.mozilla.org Seriously, it's just a good place to go when you need some info on . js, HTML, CSS, and of course Firefox and all those things that they do. Also, Persona. Seriously. Sign up, get the newsletter, it's just a good idea.

HTML/CSS

      So, (again)there isn't much to report on this front. Mainly I'm getting through things and reading a lot of the stuff on Mozilla. So, if you want some HTML for today, head over there and check out some of that stuff. It's always a good idea.

JavaScript

      Now onto methods. Yup. Moar methods! This time it's something that helps us with a lot of things. It's such a long list, just go here and they'll tell you everything. Here's an example of prototype with penguins!


// create a Penguin constructor here
function Penguin(name, numLegs){
    this.name = name;
    this.numLegs = numLegs;
}

// create a sayName method for Penguins here
Penguin.prototype.sayName = function(){
    console.log("Hi my name is " + this.name);
};

// our test code
var theCaptain = new Penguin("Captain Cook", 2);
theCaptain.sayName();

And that means that we can create as many penguins as we want! You can also inherit from another Method so that you only need to add to something instead of creating an entirely new one. Example:

// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

// define a Penguin class
function Pengiun(name){
    this.name= name;
    this.numLegs = 2;
}

// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();
var tux = new Penguin("Tux");
console.log(tux);

     Notice on the first one that we had to say how many legs it had, but on the second one, we just have the name as a parameter, and the legs are always going to be two, because; well, penguins only have two legs. Unless they lost one to a seal, or something. We can also call tux with <sayName> and it'll do the whole script. Do this:

tux.sayName();

and you get this:

"Hi my name is Tux"

 The reason that happens is because we added it as a new Animal et voila! It does the magic.

     As an aside, this section was so full of bugs it that I am seriously going to need a walk. They just ignore the needs of their students and don't give a <censored> about anything. I'm just glad I'm almost done with them. At least in the .js and HTML area. That'll about for me folks. Don't forget to check out the Mozilla stuff. Seriously, tons of cool stuff over there. See y'all on Monday! If the lessons aren't TOO buggy, I should be celebrating the end of the course!

--Martin

Chippy Animation/New Method For You In There.

     Rejoice! There is HTML/CSS today! Olé!  I am here at the house up at way too early an hour for my liking, but I'm up and done with the necessities of the day, so let's get this going. You'll be happy to know that I'm listening to something else besides GrooveShark. I found some free ChipTunes albums thanks to MakeUseOf. They proved themselves worthy of my followingness. Followingness is now a word by the way. I didn't have any coffee today. Yet. So, if you see any grammar errors, blame it on that. I'll probably get a water later. 

     

HTML/CSS

     Animations! That's what we're working on today. It's a simple animation, really. We're just going to do model of the solar system. Sadly, there doesn't seem to be a cool scientific name that goes with that. Anyhoo, to start out with, it's just the sun and earth. I'll see if I can get more in there afterwards.

     The first new thing is this:

#earth {
     /* Style your earth */
     position: absolute;
     top: 25%;
     left: 25%;
 }

The %'s make the image in the earth tag adhere to a grid. It's much easier to use the % when you just need something in a general area. You can still use the <px> method if you need more accuracy.
The next new thing is:

box-shadow: 0 0 64px 10px white;

That's a line of CSS. Box-shadow does pretty much what you would expect. It gives a shadow to any element that you want. Here's what Mozilla tells us about the box-shadow's parameters:

"1st <length>
Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
2nd <length>
Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
3rd <length>
Specifies the blur radius. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
4th <length>
Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract."
The 4<length> also is the part that deals with brightness.

     You know things are about to get fun when the lesson starts off with this:

"The next couple of steps are going to be a little tricky, so hang in there."

Let's see what they're about to throw at us.
     
     The first thing we had to do was to surround the <img> tag with a div with the id "earth-orbit" I guess that means we're about to get some movement here! I was right! We have movement! Earth is spinning away because of webkit stuff. I won't really get into that right now, but it's pretty much what moves things around. To see the finished code/product plus a few planets, go here.  I'm pretty sure that they're going the wrong way, and I know that the scale for size and distance is off. I just did it for fun. 

JavaScript

Today, we get to deal with a new method called <hasOwnProperty> it gives back a boolean response as to what is in an element. Search for what you think is there, and it'll tell you. Example:

var myObj = {
    // finish myObj
    name:"john"
};

console.log( myObj.hasOwnProperty('name') ); // should print true
console.log( myObj.hasOwnProperty('nickname') ); // should print false

This might seem stupid now, but when you're dealing with thousands of lines of code, where the object is more complex, or it's not easy to be sure, this is what you want. It'll tell you straight up!

And here we have a use-case in an <if/else> statement:

var suitcase = {
    shirt: "Hawaiian"
};

if(suitcase.hasOwnProperty("shorts")){
    console.log("You remembered to pack!");
}else{
    suitcase.shorts="blue";
    console.log(suitcase.shorts);
}

So, as you can see, it's got quite a lot of good uses!
I've already gone over the <for> loop and I might have talked about the <for-in> loop? Not sure. Let me recapitulate: the <for-in> loop is like the <for> loop, but it's more simple. Here's a comparison:

The <for> loop that would print out the contents of an array:

var array = ["hey", 2, true,"dude"];

for (var i = 0; i<array.length; i++){
             console.log(array[i]);
}

It's cycling through each element of the array, and printing it out to the console.

And here's a <for-in> loop doing the same thing:

var array = ["hey", 2, true,"dude"];

for (var i in array){
             console.log(array[i]);
}
notice how less verbose it is.

Now, you might be thinking that having these two loops that are practically the same is just stupid. Why not just have one? Actually, if you look at the first loop, you'll notice that it has a specific end-point. It's only going to go as far as the end of the array, and when you're using it to do something else that needs a specific end-point, like creating a long list of numbers that doesn't crash, that would be the <for> loop. The <for-in> loop works better for these types of use-cases. Something where you're worried about the properties in an element and you need them printed out, numbered, or anything else you can think of.


     That'll about do for me today, folks! I had a lot of fun with this one! There was a lot of new stuff going on. I like new stuff. See y'all on Friday!

--Martin

Relocating/#smh

      Right now it is 12:11 pm and the internet is out. Again. If it doesn't get fixed soon, I'm going to have to go to the coffee shop. I didn't really want to do that, but I gotta do my studies, man! I was able do get some studies done before, it went out, but not enough to really count for anything. I do know that I found some interesting things in one of the .js lessons, and I'll cover that later. Right now, I'm going to wait thirty minutes. If there's no WiFi by then, I'm outta here!
There is no WiFi. My life is empty and meaningless. Time to go to the coffee shop! For me, that’s twenty minutes. For you, it’s the next character over -> Someone has my chair. I’m not happy about this. The light is all wrong, the pillows are weird, there’s only one armrest, I sound like Sheldon Cooper! haha! I’ll wait until they leave, and then strike!

HTML/CSS

      Psuedo--class selectors; that's what I'm starting with today. Lesson people say: "A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree (remember the tree structure we talked about earlier?). For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there!" Example: You know how when you click on something, it usually changes color like, blue to purple? That's what this is. And then there's the CSS thing where something changes when you hover over it:
a:hover {
color: #cc0000;
font-weight: bold;
text-decoration: none;
}       So, now that we have that weapon in our arsenal, let's take it to the battlefield; the console.
Alright, so now we have something to go with. Here's an e.g:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<a href = "https://www.google.com/">Google</a>
<a href = "https://www.yahoo.com/">Yahoo</a>
<a href = "https://www.bing.com/">Bing</a>
</div>
</body>
</html>
This looks just like regular HTML that has some links to some search engines. But when the CSS comes in, we get something else:
a:link{
    color:#008b45;
    text-decoration:none;
}
a:hover{
    color:#00ff00;
}
a:visited{
    color:#ee9a00;
}
If you want to test this out, go here. Unless you don't use Chrome. In that case go here follow the instructions, and then click the first link and be amazed. And with that, I'll leave this segment, and head over to the next.

JavaScript

      As I mentioned before, I found something interesting in my .js lessons. Yesterday, I was going over some lessons I'd already done. And realized something. I was looking at this code:

var bob = new Object();
bob.age = 30;
// this time we have added a method, setAge
bob.setAge = function (newAge){
  bob.age = newAge;
};

bob.getYearOfBirth = function () {
  return 2013 - bob.age;
};
console.log(bob.getYearOfBirth());

And I realized something. This section:

bob.setAge = function (newAge){
  bob.age = newAge;
};

is completely unnecessary! I took it out, and the lesson still worked! I seriously don't think these peopele really knew what they were doing. Their newer classes look better, but I think this one should still be in beta. Once I got past that I went on to the rest of the lessons. I'm still on the constructors because they're taking their time teaching this, which I'm totally OK with since they are difficult to learn. Here's what they said about constructors: "Constructors are a way to make objects with the keyword <new>. The most basic constructor is the <Object> constructor, which will make an object with no methods or properties."
     Ooooooh my. These people! Seriously shaking my head right now. I just passed my lesson using five different ways!! And most of them were just <undefined > or something similar. Which is just poop. There is no way that undefined is going to be ok in a real world situation. Here's the code:

function Rabbit(adjective) {
    this.adjective = adjective;
    this.describeMyself = function() {
        console.log("I am a " + this.adjective + " rabbit");
    };
}
var rabbit1 = new Rabbit("fluffy");
var rabbit2 = new Rabbit("happy");
var rabbit3 = new Rabbit("sleepy");
rabbit1.describeMyself();

At first, I tried to use <console.log> but apparently I was defining something wasn't there by using that, and then I tried a whole bunch of things, and they all passed, but I wasn't getting the return that I wanted. That's how I ended up with the code you see above. Kind of nifty. You just have to define a rabbit, and the words are already done. You don't have to write out each one, you just do it once! How neat!
Ok, this post is getting a little long here guys, so I'm going to call an end here. Remember to visit the links! Also, huzzah for beards.

--Martin