Links And Links!

     Well, it's Wednesday, and I'm late. Again. The fun part is I learned some things, and my website is actually coming along nicely! The other day, I showed my gf +Briana McCarty the code of what I'm working on. She was all, I don't know what this means, but it looks cool. I was like psh. Same here, but then she said that I wouldn't have been able to do most of this just a few months ago. And I realized that was totally true! I had like a mental slap in the face. I realized I had done most of the website with no guidance, or they would say do something, and I would know how to do it without looking at the demo. Le gf probably doesn't know any of this, because I was so tired I don't think I physically reacted. Anyhoo, the moral(AKA TL;DR) is that I actually  have come a long way, and maybe don't suck at this as much I think I do! Olé...? Maybe. I just need to keep plugging away! I did about five hours yesterday, and looked up and it was  7:00pm time just flies while I study. Which is one of the reasons this is so late. So, while I didn't learn too much, I did get some cool stuff. I have Grooveshark a-going, so it's time to plug in and plug away!

HTML/CSS

      The first thing up is font-weight. This is a CSS tag, and I can't believe that I haven't used it before. Now, this is actually more complex than it appears. Unlike some CSS tags, the title that goes to the right of the colon has more than just one or two options. So, as I do when it can be a wall of text, go to Mozilla and they have all the goods that you need.

      Next up! The wonderful attributes for links! Usually you have a{ some code} and that tells the CSS how to style the links, but you can also do some sweet sweet CSS magic to make the links react to things like being clicked on and such. Here are some examples that I will then tell you about:
a:hover{
   color:white;
}
a:visited{
   color:blue;
}
a:active {
color:red;
}

     The titles are pretty easy to understand. a:example means that anything with 'a' in the tag is going to have this applied to it. Which of course, means that a link will have it applied to because, as I'm sure you're aware, a link in HTML looks like this: <a href = "example.com"></a> and since that 'a' is all alone, it's our target! Hover is when the mouse hovers over the link, visited is when the link has been visited, and active is when you click on it. See? pretty easy.

And now, I'm going to hit you with some links because I need sleep, but you need to read more.

First, this one has FREE(legal) programming related books that you can download:
http://it-ebooks.info/

This one is free .js books. See? said that I would have more. Here ya go: http://jsbooks.revolunet.com/

For those of you that need to know thirty different things all at once that would be great to have on a laminated pamphlet, there is this:
http://www.visibone.com/

For a more advanced .js blog, this guy has some great stuff:
http://zenscript.wordpress.com/

Not only is this one funny, in a cussy sort of way, it's also pretty useful with the knowledge gainingness:
http://programming-motherfucker.com/

And here's music to listen to while you do some light reading:
http://grooveshark.com/#!/writhem/broadcast

     With that amazing link dump, I am out! Here's to hoping the Friday post is done earlier! See y'all then!

--Martin

Yeesh In A New Tab!

     Yeesh! This is sooo late! I did a lot of things today; it was crazy! I reeeaaalllyy wanted to say that I didn't feel good and that it's St. Patrick's day, but that was just an excuse, and those things suck when the next day shows up and you realize you didn't do what you were supposed to. Today, I'm working on a HTML/CSS project with Udemy.  It's actually pretty neat, you can make "websites" and use files on your computer to move around. Like, contact, home, and whatnot. Obviously, no coffee. It's almost 11pm... But, I've got Groovshark going, with the instructional videos cutting in every now and again. So, it's time to plug in and plug away!

HTML/CSS

     Yup, a website! The coolest things that I learned shall be brought forth into the light of your computer! First up is opening something in a new tab. I love it when a website opens something that I might just be checking out, but isn't a main feature, in a new tab. What you put is this:

<a target = "_blank">

  and that's it! It's super easy! And so freakin useful! Good thing I know about that now!    

 Next up is the redirect. If you want to show a warning, a statement, you don't want people to hang around, you use this! You set the time that the computer will wait, and then boom! Redirect!

 <meta http-equiv = "Refresh" content  = "12; url = http:www.bing.com"/>

 The number '12' refers to how long you want the client to wait before they go to the url.
     The next thing up is how to have a link go to a specific page on your website. Let's say you have a long article, and you want to be able to point out a certain area. Using this will open the link scrolled down to the area that you want them to see. You see this employed in FAQs and READMEs all the time.
     You give the section you want to go to with a tag like this: <a name = "example_name">

And then to call it, you use tags like this: <a href ="Example_page#example_name">Example</a>

Also, a good place to see a lot of other tags is to go here and just cruise around. It's w3; if you don't know what that is, look it up. Definitely worth knowing.

I just looked at the HTML version of this article. That was cray cray. Turns out it IS a good idea to do the html title thing in HTML because then you don't end up with a looott of completely unnecessary spans and divs. Anyhoo, back to the subject at... mouse? Not too sure what to call it when it's online.
The only thing left is: the different ways to call CSS, because; there's more than one way to do that! crazy, right? But, instead of me telling you, I'll let this guy do a better job than I could!

SO! That's going to do it for today, folks. I know, no .js. But never fear! I shall have some! At some point. I'm working with the HTML right now, but the class will be bringing in .js and PHP and some other cool stuff, so don't go crazy. I'll have some when I get some. See y'all on Wednesday!

--Martin

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

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