Things Remembered/Know The Rules

Well, howdy! Or, rather, hello netizens. Sorry, I got a little Southern there. For those that don't know, netizen: a person who actively uses the internet especially in a proper and responsible way. The more you know. So, today I'm going to talk about some things that have made me stumble for stupid/crazy simple reasons. There are two main issues that I've come across. But first! I'm going to make coffee. Good thing this isn't a live stream. Now that ten minutes have passed for me and about a second for you, I'm back with coffee and sustenance. Le Music De Goog(read Google Play Music) is going and I'm ready. Time to plug in and plug away!

The biggest thing that gets my metaphorical goat is when your code looks like it's correct, there aren't any errors or anything like that, and it still doesn't return the result that you want. for instance: nested if statements. If you don't do them the right way, they will ignore entire sections of the code. For example:

<script type = "text/javascript">

var artist = "Foo Fighters"

var song = "Walk"

if(artist != "Foo Fighters"){

    alert("You don't like 'em, eh?");

      if(song == "Walk"){

        alert("nice choice");

      }else{

        alert("Too slow for you?");

      }

  }else{

    alert("Nice!");

  }

</script>

While this looks like it is correct, notice that the first if statement has a != that means does not equal. But the variable artist does equal "Foo Fighters" so it has to go to the end of the script to use alert("Nice!"); which means that the second if statement gets completely ignored. However, if the artist variable didn't equal "Foo Fighters" you'd be fine. So, it just calls for a little preexisting knowledge about your variables. Because if you don't know what's going on, your code will soon get really messed up and you won't know why because it all looks fine. Makes for debugging very annoying when you find out that you just had things in the wrong order, or something. The worst is when you spend hours trying to fix your code and it turns out that you're missing a period, or something like that. And if you haven't had this happen, it will. Don't worry.

Another thing that will mess you up is not knowing the rules. And the rule that doesn't get talked about too much, is that you can't name a variable with a number. So, var 1 ="hi" wouldn't register. It just sits there and does nothing. I'm not saying I've done this(totally have),but if I had(which I did) then I would tell you that it's annoying to look up the problem and it just makes you realize what a newb you are. 

So, there we have it, some things to watch out for in any language. 

1. Know the order in which things are read and run.

2. Know the rules.

3. Know that you'll mess up and don't be afraid of it.

And with that, I'll go and finish listening to +Jupiter Broadcasting because those guys are awesome.

See y'all on Wednesday!

 --Martin 

Explain (not all) The Things/ It's Not Scary

   Well, howdy y'all! It's Friday and that means that I have a post to... post? Yeah, that's gotta be a thing. Today, for my "doozy" I decided to take some of the names of things in JavaScript and try to define them AND link to Mozilla. They know how to explain things really well. Sometimes. So, after having made it to the coffee shop and dealt with people, I'm ready to do this. My music is random things from Google and The Roots' latest album. So, let's plug in and plug away!

 JavaScript 

      So, the first things we should cover are the basics such as Values, variables and literals.

Variables
   Variables are just like in algebra. They store info. Of any type. For example: var x = 25 var x = "Hello" var x = true Notice that var is variable. Duh. The first var is a numeral. Numerals are numbers. Duh, again. Most of the names for things make sense which is good because there are a lot. The second var is a string. A string is anything (numbers, symbols, punctuation) surrounded by quotations. "this" "15" "A" "string..." those are all strings. the last var is a Boolean. You hear a lot about Booleans. A Boolean is just a true or a false. That's it.

Arrays
   Arrays are mainly just like variables, but there's usually more than one of them. The only difference is that they have brackets([]) surrounding whatever it is that is an array. For example: var x = ["French Roast", true, 25]; Notice that different types in the array. This can be very helpful when you need to call certain things multiple times.

   Now, I don't expect to show you all of the things that could be called. I'm just trying to show that everything makes sense and has its own way of working. It's not a scary foreign language. It's just something that can make really cool things happen.
   For a larger list with bigger words, check out this to realize that there is a lot of stuff. But, again, don't let it scare you. Just think of the dictionary. That's a really thick book, but you don't have issues communicating. Same thing with this. The words you need, you will memorize.
For now, that'll be all. See y'all on Monday.

 --Martin 

Back To The Basics/.js All Up In Your HTML

Hello, y'all! Yup, it's a Wednesday. Again. Darn thing keeps coming back! Today's post is going to cover JavaScript since we're back to the basics, all of y'all should be able to keep up. Today's music is NOT GrooveShark. Whoa, right? Not really. I'm a big Jimmy Fallon fan and watch the show all the time. The band that plays on there is called The Roots and they came out with a new album, so that's what I'm listening to! That took a while to explain. I love the album! It's called "... and the you shoot your cousin" Yup. On le Google Music. It's also on iTunes and whatnot. So, now that I overly explained my musical choice, let's plug in and plug away!

 JavaScript 

      This might have been covered before, but like I said, I'm going over some things again. Today, I'm working on using a .js script on an HTML5 webpage. Which is a lot like CSS. You can put in the <script> tags into the actual HTML page. The location of which can mean things. Not like, spiritually! Goof. Like when they when triggered and such. The easiest(for now) way to do it is how you call a CSS script from another page. For those of you that don't know how to do that, go here where it talks about other things getting called and how it can effect things. Affect things? Buh. Those two... ANYhoo, you just in a script like this:

<!DOCTYPE html>
  <head>
    <title> Hola al mundo</title>
    <script type = "text/javascript" src = "Day_One.js"> <!--The script for the .js stuff -->
    </script>
  </head>
</html>

   Notice the script tag calling out the type and source of the .js script from a separate file. Now, once things get going, the source can became quite convoluted especially if you're using a NAS drive or something fancy. So, always remember to get everything correct. Now, the .js side to this doesn't have to change anything, it just does its own thing, and gets called out by the HTML. So, the code that I'm using that is getting called out looks like this:

 for(i=0; i<10; i++)
      if(i===5){
        alert("there is a five");
      }else{
        document.write(i);

      }
Now, the fun thing to be noticed here is that the code will run from 0 to 4, throw the alert at you, and only AFTER you acknowledge it, the code will continue. Pretty nifty! So, there you have it, how to connect the two things. 

   I'm going to go find a doozy for y'all on Friday. See y'all then!

--Martin

Embed The Fact That I Finished

     I have made it back for another week! Not that I went far. I did venture out into meatspace a few times. Don't worry, I have virus protection (read Kleenex) and no one got hurt. The cool news is that I finished the XHTML/CSS section of the class! Now it's onto .js! I've been using Sublime Text 2 on the XFCE partition on my Chromebook and it's been so nice to use it, but Brackets has proven itself great when it comes te HTML/CSS so I think I'll use Sublime Text 2 mainly, but if I have something that is just HTML/CSS then it'll totally be Brackets. On Wednesday, expect some .js. Today I don't have Grooveshark going(such shock!!) Instead I'm listening to a live-stream of one of my favorite radio stations. Listener-supported FTW! I already had my coffee(French-press of awesome!) and the music is going so it's time to plug in and plug away!

HTML/CSS

      Today the first thing we're going to start off with some easy stuff; templates, and CMS's. CMS stands for Content Management System. That's a fancy way of saying pre-made website. CMS's are sometimes a good thing to use if you just want to create something really quickly, or it's a simple website for just a few things, and you don't think that you're going to be changing a lot, for example, a blog. There are a lot of free ones out there, but they aren't always the best, because; they are usually limiting, they're pretty much a template that lets you cheat. www.freecsstemplates.org is a good place to go to check some of them out. Something I forgot to cover in the forms section, is the <label> it is used to identify elements inside a form, but really you can use it any time you want, but it seems it's handy in that type of thing.

     Now we get to the embedding section. Embedding is pretty much just like linking, it just creates its own little space that shows whatever you're trying to link to. Here is an example of YouTube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/P3Of6vsIIA8" frameborder="0" allowfullscreen></iframe>

 The way you get the embed code, you just go to the 'share' section of the video, and either use the code right there, or select a size or do a custom size (the size can always be changed in the editor) and put the code where you wont it. One thing you have to know about this is that YouTube changed its code requirements, but of course their embed code didn't change. So, you have to add an http: in front of the //www. in the src. Even though it's a video and not text,  use text-align to  align it how you want.

     Google maps looks a little different now that they've taken the new Maps out of Beta(it looks so good on my Pixel's screen), you just click on the settings gear and you'll have the option to embed and all the things you need.
 With Twitter, you have to click on the three dots and it gives you embed. Twitter has a lot of way to embed. Go here for all the info about how to do widgets and all the things you can do with Twitter.

A little pro-tip for when you're working on creating your website:
Keep your different file types in their own folders/sections makes it easier to manage things and remember to save periodically. That way it's just easier to manage.

We have discussed the different types of things you can do to a link before, but there's an order to them so that they don't cancel each other out or cause some hinkery that gets annoying fast. When you do the active, visited, hover, link tags on a link  make sure to have them in this order: link, visited, hover, active. That way you can have different colors for different activities, and they won't overwrite themselves. You don't have to use any/all of them if you don't want to.

Last, but not least, we have the favicon. The favicon is the little picture that shows up in the tab. Sometimes it's just a piece of paper with a folded corner. That usually means that they didn't set up a favicon. The best place to get one is to go here. You can upload any image, and it will give you a favicon in .ico and .gif form. The .gif just scrolls constantly. If you use that, I will judge you.
The way to implement it is like this:
<link href="images/fav.ico" rel="shortcut icon"></link>

You just put it by your meta tags and your CSS tag at the top in the head.

And that's it for today! Today(3/24/2014) at 7:06pm I finished the XHTML/CSS section. Only took ten days! Whoo!! I powered right through it! Which just means I'll slam right into .js tomorrow. I'm sure that makes some of you happy. See y'all on Wednesday!

--Martin

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