Comment All The Input Types!

     Hey, it's Friday!!! Whoo! I'm here at the coffee shop(I've been here all day) and raring to go! I've had two coffees, so I'm totally on a caffeine/sugar high. Today I bring the gift of moar HTML/CSS. Yay, right? Well, maybe. I actually did some pretty fun stuff. I figured out that if I do five lessons a day on the weekdays, I should be finished this class in two months. So, the minimum is five a day. The music that I'm playing is, of course, Grooveshark. I'm playing a playlist of some of my favorites. Which is fun, for me. Not everyone is a fan of 8-bit music. I've had my coffee, my music is playing, it's time to plug in and plug away!

HTML/CSS

      Today, we have a few things relating to forms. Such as multiple options or drop-down menus. First up is the drop-down menu:

<select>
        <option value = "red">red</option>
        <option value = "blue">blue</option>
        <option value = "yellow">yellow</option>
        <option value = "green">green</option>
</select>
First, you have the HTML <select> tags. and then inside of them you have the <option> you can make them be whatever you want, but make sure that the value and the element that gets shown (the word between the >< tags) are the same that way when you use JavaScript that will take those as variable, or something, you will be able to tell what goes with what. And it just makes for clearer code, which is something you always want. The only thing you besides clear code, is comments. COMMENT ALL THE THINGS! You might think you know your code, and it's easy to understand, but wait a few weeks and you can get so lost! So, always always always comment! This message brought to you by the entire coding community.

Next we have the text input area. Again, this will later be used by JavaScript. The instructor has promised that it will get fun with this once .js gets involved. This one is even simpler than the option tags. You just write this:

<textarea name = "comments" rows = "3" cols = "30">

The rows = downward size, and cols(columns) = rightward size. It is naturally anchored on the left side, but of course, you can position it. This would be useful for anything where you want them to write out a free-of-restrictions response, or something the . js can react to.

After that you get these guys. They're all in the same element form, but they all look different. They're called input types and the code looks like this:

<form>Username:
<input type = "text" name = "werfwerf" value = "username here, please!"/>
</form>

Always make sure to have the <form> tags around the inputs. Let me break this down for you; you have the type, which in this case is text, and this would be applied to something like an email address. Something where it would be necessary to have them write the response, but it's just one line, or in a similarly short fashion. The name, is just the title for the input, it can be anything you want, or it can be the username you're looking for. the value is what would be shown in the text area. Here's an image of what the above code would look like:

Notice how the value is shown in the text box. A list of all the "type"s:
text = text input area.
button = button such as 'submit' or 'click here!'
radio = select between different things such as are you: male, female etc. <-- you can only select one.
checkbox = A...checkbox.<-- you can select as many as you want.
And last, but not least we have:
password = Put in text and it will show asterisks, or something similar. (******) used for... passwords. Duh.
That is all for today, folks! I'm going to go enjoy some daylight! It's almost 6:00pm and it's still light out! Crazy! And that's the last time I'll mention it. Don't need to be one of those people that points it out once a week! See y'all on Monday!

--Martin

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

All-In-One Flip!

     There's new things! Olé! Well, new(ish). The other day I sort of had a break through. I'm still figuring out if it was good or bad, but that's not too big a deal. I was perusing the internet, as is my wont, and found many amazing places that do .js bootcamps, tests, free books. Many amazing things! And what they all told me is that I have seen a lot of lessons, but haven't really retained as much as I should. Which is sad. So, to combat this, I'm going to start creating stupid little program that use all the things I should know. The main problem is, I know what they are, I know what they do, but I haven't used them in anything besides following instructions. So, I'm going to create some small script things, and figure things out! So, what you'll see on here is stuff I came up with, if it's overtly simplistic, that's because (as the title says) I'm a total newb. I don't have any problems with that, but I don't want to be a total newb for too long. That would mean I'm not learning anything. Which would be sad. For today, I'm going to do the .js, HTML and the CSS all on one thing. I know! Crazy, right? I found a couple lines of code that make text flip around. If Blogger was able to use CSS as well as HTML I would show you and it would be awesome! But, instead, we shall look over the code in this all in one special! It's a Friday, so I'm at the coffee shop, I've had my coffee, Grooveshark is going, time to plug in and plug away!

 JavaScript&&HTML/CSS 

      The first thing we need to do is look at the code, obviously. So, here's the HTML: 
<html>
  <head>
    <title>Hey, wassup.</title>
    <script type = "text/javascript" src = "script.js"><!--script for the .js -->

    </script>
    <link rel = "stylesheet" type = "text/css" href = "thing.css"/>
     
  </head>
  <body>
      <!-- put whatever you want to here. -->
<p>Hey, this is a line of text with a border!</p>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content --><span>Hey,</span>
        </div>
        <span class="back">
            <!-- back content --><span>do you even <a href = "http://www.google.com"><g>G</g><o>o</o><t>o</t><h>g</h><l>l</l><e>e</e></a>, bro?</span>
    </span>
  </body>
</html>










Not exactly the cleanest layout, but it does some pretty nifty stuff! The thing with the bunch of tags in a row spells out Google and the CSS makes it turn into the Google colors. A little touch of fun, you know?
Speaking of CSS, here's the CSS:


p{
    clear: both;
    text-align: center;
    border-radius: 50%;
    border: 10px solid black;

}

a{
    text-decoration:none;
}

g{
    color: blue;
}
o{
    color: red;
}
t{
    color: yellow;
}
h{
    color: blue;
}
l{
    color: green;
}
e{
    color:red;
}


/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

The code s commented quite nicely so that you may understand it easily. The basic idea is that it's activated by the mouse and once you go below the div, it flips over. 

Now, if you noticed, which I'm sure you did, there was this:  

<script type = "text/javascript" src = "script.js"><!--script for the .js -->

Which my comment tells you about. Yesterday I found something I probably should have known about a looonnngg time ago!
document.write()

It writes to the, you guessed it, the document! Whoo!
So, today, I just did a simple line of text, and a FizzBuzz, because those are fun:

document.write("&nbsp;Hey this is a thing, now! You can write with .js! <br />\
 and have it print out to the webpage.<br /> I knew that was a thing. <br />\
 I just couldn't find it till now!<br />");

 for(var i =1; i<=71; i++){
      if(i%15===0){
        document.write("FizzBuzz <br />");
      }else if(i%3===0){
        document.write("Fizz <br />");
      }else if(i%5===0){
        document.write("Buzz <br />");
      }else{
        document.write(i + "<br />");
      }
    } 

Also, notice the fact that both &nbsp; and <br /> are used in the .js text. Yup, that's right folks, you can use those HTML elements in .js text. Pretty nifty, if I do say. 

     All of this texts makes for a pretty lackluster page with a spinning dealie on it. Told you the scripts were going to be stupid. Expect better each time! Well, that's what I'm hoping. Next time I'm going for a better looking page with more spinning and motion!!
See y'all on Monday!

--Martin

Happy Birthday Internet, I failed you.

Dear internet,

     I have failed you. I got nothing done today. I should have been able to, but I overslept and missed my window of opportunity. And then I got distracted... typical terrible day for me here. I then had to drive all over. Now I'm in Dallas hoping to get some studies done.  Also, today is the birthday of the internet! Yay me for failing it on its birthday... But, in lieu of nothing .js/HTML/CSS to write about, I thought I'd write about my beginning experiences with the internet and its included technology. Basically a copy pasta from G+ that I did earlier today, plus a few flourishes. Here goes:

     I was born the same year as the internet, but my birthday is not until November, so I'm not one of the cool people that was born today twenty five years ago. Unlike a lot of people my age, I remember the first time I heard about the internet. The main reason for this is that my family didn't have internet or even a computer till the year 2002-2003 before that we had to go to the library to access the internet. I was about seven the first time I heard about the internet from my oldest sister. She told me about how I needed to go to the big blue E(IE) and then type in yahoo.com and then from there I could search for things. I didn't really do much for a long time, the games were stupid, you had to stand the whole time, there were a lot of loud, whiny kids that, like me were trying to figure things out. This was back when I was somewhat of an introvert, so loud people was not really my thing(still isn't really) I didn't really start doing anything until (again) my oldest sister, who had now moved out and gone to the Navy, gave the family an old computer that she no longer needed. Using dial-up the family would do their emails and my mother would write on there instead of the Word Processor she had before. My parents didn't want me to use the computer and instead forced me to go outside, or read a book, or something. This new technology couldn't be good for a young mind like mine. However, I am somewhat of a rebel(not because I live in Texas btw) and learned the dial-up password(this was in the days when you had to sign into the internet yourself) I tested it at midnight, and woke my brother up from all the dial-up sounds. He made me go back to bed, but I had the password! from then on I would sneak as much time as I could on there. My mother, being the wise old soul that she is, soon figured out that I was sneaking onto the computer. Of course, she thought I was looking at porn and such (that didn't come along till later) mainly because this was the time when the news stations were freaking out about how porn would kill the fertile minds of the youth of America. I just wanted to play games and learn everything I could about how it worked. But, my mother would hear none of it; she started by hiding essential(or so she thought) parts of the computer. Hide the keyboard? learn that there's an on-screen keyboard. Hide the mouse? learn keyboard shortcuts, that you can use the number pad to direct the pointer, and that tab comes in handy all the time. Hide the power cord? make a new one. Really, what I'm trying to say is that there really wasn't a way to keep my offline. But my mother tried her hardest. My father didn't really have an issue with it as long I wasn't on there all day. He also was the one who found me looking at porn when he came home early. "I clicked the wrong link" only worked the first time. The internet and I have had a long and tumultuous relationship. I've known the world without the web, but that's only because I wasn't allowed to know it until much later than most. Today, as you can see, I'm still trying to learn how things work. I'm way behind, and have a lot of catching up to do, but I'm not planning on stopping. As much fun as Reddit and all those meme sites are, I just ignore them (usually) and now I need to learn so much! But, unlike some, I want to learn. I want to know as much as I can! Right now it's just .js and such, but once I get those down enough, I don't plan on stopping there. As long as technology exists, there will always be something new to learn. So, sock it to me baby, I'm ready and willing!

--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