Links to the past/Linux, Baby!

     In the grand wisdom that is Codecadamy, I did and also did not finish the JavaScript course. Turns out they have two courses, and the second one is only half way through by the end of the first one. So, that was slightly disheartening. I got over it in typical heroic fashion. I'm afraid I don't have much for y'all today. I was busy putting Crouton onto my Pixel. Gotta love that xfce sweetness. Now I have the Sublime text editor of awesome and Brackets for HTML/CSS because it does live preview. There's a Chrome ext. called Tailor, and it's a port of brackets, but I didn't have any success with it on ChromeOS. Then again, I'm on the dev channel, that might be why. So, that's what I was up to today. Getting all the things done. I did do some more .js, so that's a bonus. The first is a retrospective. I happened to see some of my code from a few months ago, and it was interesting to me in the ways the that the format had changed. I saw this:

var isEven = function(n)
{
    if (n % 2 === 0)
    {
        return true;
    }else
    {
        return false;
    }
};

The way that I would do it(if I was to use an <if/else> and not a ternary operator) it would look like this:
var isEven = function(n){
     if(n%2===0){
         return true;
     }else{
         return false;
     }
};

I never realized hov spread out my code was. Yes, I know it acn be more compact, but this is the easiest way for me to read it.

     The other thing we have is this:

//using typeof in <for/in> loop to print what we want.

var languages = {
    english: "Hello!",
    french: "Bonjour!",
    notALanguage: 4,
    spanish: "Hola!"
};

// print hello in the 3 different languages
for (var i in languages){
    if(typeof languages[i]==="string"){
        console.log(languages[i]);
    }
}

     How cool is that?? using a <for-in> loop and the <typeof> method, we're able to print out just what we want and ignore the rest. That could be super useful. Ok. Well kids, this a rather short post today, but fret not mein Kinder, ther will be plenty for you on Wednesday! See y'all!

--Martin

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

Lines of HTML/ Typeof For Your Noggin

In case you don't do much internet, you'll know that Texas got crazy ice and frozen stuff. Good thing I have no where to go! I'm going to stay inside and get some solid study time in! Also, I found out how to do lines! No, not cocaine, HTML! You just use <hr /> who knew! Well, obviously a lot of people do, so... I know now! yeah, that's better.

---

Heh. Lines.

---

Today's music is... Electro Chill. I know, not very informative, but that's pretty much what it is. Anyways, I'm cold. So, I'm going to make some coffee and get a sammich, or something and then I'm going to plug in and plug away!

JavaScript

---

      Today, we're doing fun with functions. I know; lame play on words. If you can even call it that. Blame the class. They're the ones that used it. AAANYhoo, Here's a little something for you:

/*Add a speak method to the Person constructor. Whenever speak is called, it should print "Hello!" to the console.*/

function Person(job, married) {
    this.job = job;
    this.married = married;
    // add a "speak" method to Person!
    this.speak = function(){
        console.log("Hello!");
    };
}

var user = new Person("Codecademy Student",false);
user.speak();

Now, here's the thing; not all of that code applies to what they wanted me to do, but I think I can point out where and why you need it. This code is called a Constructor and we have a Method inside of it. Notice that there is the new Peron and the user.speak. They just wanted me to add the speak part. The whole function applies to user, but when you call a specific section like user.speak, it doesn't matter what else you have wrong as long as what you're calling is correct. Everything else applies to the variable user, and if I was to call that and anything was wrong, I would get errors.

     Woah. That was crazy. I'm always amazed when I know what they're talking about in the lessons. I figured it out with the hint, and usually those things are no help at all. This time I got it! I'll count that as a victory for me.

     Well, that was just stupid. Apparently, the lesson has a bug, and the devs don't seem to care to fix it. The forum was filled with people that couldn't figure it out. So, I posted the working code that I found/figured out in the forum. Hopefully that'll help some people.  Definitely a WTF moment.

     And, last, but least, I leave with a new built-in operator. <typeof>  //angel voices
It's actually really helpful! Here's Mozilla's definition on it: "The typeof operator returns a string indicating the type of the unevaluated operand." Basically, if you don't know what type of code you're dealing with, you use typeof, and there you go! it'll tell you!

     There you have it, folks! a whole bunch of .js. for your noggin. I'm still getting through the HTML. The only new thing I've learned is the <hr /> thing that makes a line. I'll see y'all on Wednesday! Hopefully the ice will be gone.

--Martin

Links/Do You Even Do Age, Bro?

  Today, as I'm sure the job-weary are aware, is Friday! And that means I'm at the coffee shop! I had a big frappé, and it was delicious! Now to capitalize on this energy! As I said in the last post, I finished the HTML course(olé!) and this has a good side and a bad side. The good side is that I am happy with what I learned, the bad news is that in the next course HTML course that I'm taking starts with the basics. While I appreciate going over the fundamentals, it means that I really don't have anything HTML/CSS related to report today. Bear with me while I slog through and get to a place that I don't know about. I should have something by Monday unless they really want to explain elements, or something along those lines. The new course is on Udacity (<<--link)for those of you looking for a place to learn HTML. They don't cover CSS, sadly. I'll have to look for somewhere that does. Now that the frappé has been imbibed, and Grooveshark is going(again). It's time to plug in and plug away!

JavaScript

      Today we're going to be writing a validation script. It's going to check if a person(under the premise that they're being honest) is old enough to enter a website. It's about 8 lines of code, but it really shows how much you can do with just 8 lines of code in .js. We start off with this:

var userAge = parseInt(prompt());
Notice the new word: parseInt; it's a fairly obvious term. The variable <userAge> returns a string, so rather than setting userAge equal to the prompt, you put a function around the prompt that will return the value that prompt() gets from the user into a number, and that means you parse an integer with <parseInt>! pretty nifty, eh? I thought so.

Next up we have this:

if(isNaN(userAge)){
    console.log("Not a number,bro.");
}

It's checking to see if the response wasn't a number. ParseInt can only turn a string into a number if it is a number, obviously. So, you make an <if/else> that makes sure that the person entered what was wanted. This is a good practice for pretty much anything ever when it comes to this kind of thing.
You should also notice the use of <isNaN>. isNaN stands for is not a number. Like many things in .js there are tons of these little words that are so useful, and this is definitely one of them. So, next time you need to have something that checks if something is returning a number, it's <isNaN> to the rescue! You just stick your parameter in there, userAge in this case, and it's good to go.

The next step is a simple < else if/else> setup:

else if(userAge<18){
    console.log("You're not allowed in here, young whippersnapper!");
}else{
    console.log("Come on in!");
}

That pretty much explains itself, so here's the whole script:

var userAge = parseInt(prompt("Do you even do age, bro?"));
if(isNaN(userAge)){
    console.log("Not a number,bro.");
}else if(userAge<18){
    console.log("You're not allowed in here, young whippersnapper!");
}else{
    console.log("Come on in!");
}

That should be enough info to take in for now. I hope y'all have an amazing weekend, I'll see you on Monday! It might be a late post, it's possible I'll have a million things to do. See y'all!

--Martin

I Finished the course!/.js is still a-happening.

     I already know that this is late because I'm writing the intro last. What, I can do that. It's called mixing things up. I do that sometimes. The good news is that I finished the HTML/CSS lesson! Olé! The boring news is that I still have a ways to go with the .js. Not really sure that's boring since that just means I'll be learning a lot more new things. Learning new things is always fun. So, I take the back the boring other news is that .js is still going on.  Ye olde(See, I did it again!) grooveShark is still blazing away. No coffee today. Just pure gumption over here! Time to plug in and plug away!

HTML/CSS

     Working away ye olde(I say ye olde too much) HTML/CSS again. Remember that website about an angry puppy from a while back? right around when I started CSS. They had me build it now. Which was weird, because; I knew what they were talking about! Whaaaaat?? That is just weird. The play on words was delightful. I'm working on positioning(still) and I am using it to make a "resumé" and they said how to "position" yourself. I laughed. Good grammar and a funny play on words is always delightful. Today was review. Lots of review.
     And now I know why! I'm done the lesson! Good thing I've got plenty of classes elsewhere that use HTML.

JavaScript

     First up are the notations. I've already gone over them, but today's theme seems to be review.
First there is Literal notation. "Literal notation creates a single object. It uses curly brackets { } and the object's default properties are defined within the brackets using <property:value> notation.
I find this to be the quickest when it applied to a small number of elements.

     Second is the Construction notation. "Constructor notation involves defining an object constructor. And like defining a function, we use the function keyword. You can think of this constructor as a "template" from which you can create multiple objects. To create a new object from a constructor, we use the new keyword."
I use this one when you have multiple elements with same properties.  For example:
//this one is the Construction notation.
var james = {
    job : "programmer",
    married : false
 
};
//This one is the Literal notation.
function Person(job, married) {
    this.job = job;
    this.married = married;
}

var gabby = new Person("student",true);

     See how many lines of code are needed in a Construction notation for one Object?
The Literal notation has more lines of code up front, but then you're able to add more in one line later on. The Construction notation has its uses, but, usually, in a more singular case. I say usually, because; everyone has their own way of doing things, and I'm sure that for some people, the Construction notation is their go-to trigger. My go-to trigger is my laptop. I found my old laptop, which means that I might be talking about a game soon. It's running ElementaryOS. I think I'll try and get Sublime Text or something along those lines and take a crack at it. That's all for today, folks! See y'all Friday!

--Martin

500, What?/Nothing Of Importance.

     It's Monday. Again. It keeps happening, man! No matter what I do, there's Monday! No-one gets away from Monday. I've had my coffee, but I'm still exhausted! I can barely keep my eyes open! I'll try to get this thing going quickly. Sound City is playing from G music. "From Can To Can't" is my favorite song in the album. Now, time to plug in and plug away!

HTML/CSS

      It seems that I've done 500 lessons! That's nifty. The lesson says I'm about 70% complete with HTML/CSS. Again, that's nifty. Really, I need to find out how to make a game with my new-found powers. Right now I'm working on positioning. Working with Margin, Padding, Border, and Content; you get abbreviations like 'TP' 'TM' 'TB' The 'T' stands for 'Top' the other are: 'Padding', 'Margin', and 'Border' respectably. I've already worked with margin somewhat, you have: auto, but you can also do something like:

div { 'margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}

Or, you can do:

div{margin:5px 10px 5px 10px;}

it's the same thing. You would use the first example when you're trying to specify less than all of the aspects of a tag's properties. Maybe just the left and the right, or something similar.
      You also have the same thing with Padding. You can also use negative positioning. Such as: div{margin-left:-20px;} instead of moving the object twenty pixel's worth to the right from the closest border, it would move it 20 pixels closer. Maybe even past it.
      Then there's float. You can move that left or right. Unfortunately, sometimes large floating elements get mixed with non-floating ones, and elements do end up on top of each other. To combat this, you use <clear> you can clear left, right, or both.
      If you don't specify an element's positioning type, it defaults to static. This is when you use <position>. You have absolute, which means that it's going to stay the same distance from its first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>.
      Relative is another term, but also more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.
      Finally, we come to fixed positioning. Fixed anchors an element to the browser window; you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past. Hipster websites loved that trick for while there.

JavaScript

      Nothing of importance to report on this one. I'm working away, but it's just reinforcement. I'll have more on Wednesday. See y'all then!

--Martin