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

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

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

I Got Glomped!/.js Is Hard!

      
     It's a Wednesday here in my timezone, and that means I gotta pump out some juicy coding goodness. Also, that's the nerdiest thing I've said since.... yesterday. My gf sent me an HTML script that said she loved me. Yup we're nerdy. There should be a nerd pride parade! that would be so cool with blinking lights and whatnot! Maybe make the GPS route that we follow spell out NERD. *Ahem! ANYhoo... I'm actually at the coffee shop today. I know, it's not Friday! You're wasting gas! ACtually, I have to run errends when I'm done, so I thought: why not study at the coffee shop today? And that's what I'm doing. I switched back to the dev channel on my Pixel because the beta channel was getting laggy, so now that I have a smoother UX I'm happier. The music of choice today is "Programming Electric&Alternative" on Grooveshark. It's actually OK as long as they don't hit me with some Drake or similar stuff. Alright, I have my coffee at hand, my music going, it's time to plug in and plug away!

HTML/CSS

      So, on this front, we have Class and ID selectors. I love these guys; they make my day so much easier! I can now call things directly without worrying about disrupting something, and still have differences in something with the same tag as something else. Here's an exapmle:
<h2 id="intro">Introduction</h2>
<h3 class="standout">Classes and IDs in CSS</h3>
<p class="standout">Classes and IDs are super easy in CSS.
                                                  You're using them right now!</p>
<h3>Regular HTML Selectors</h3>


      Notice that there are tags with the same name,but they have <id> or <class> inside the tag, and those equal a name. So, the CSS side to this would look like this:
#intro{
    color:#b83c3a;
}
.standout{
    color:#f7ac5f;
    font-family:Verdana;
}
     Again, notice a few things that are different. There's the <#intro>, but then there's <.standout> tag the <id> tags get the<#> in front of their name, and the <class>  tags  get a period<.> in front of them.  You can have the same name for an <id> and a <class> and they won't interfere with each other. Why have the two different types of ways to call something specifically? I have no idea. They both work the same way. But I suppose I'll figure that out at some point.

JavaScript

      I swear... Every time I'm about to get the .js going stuff happens. It's already 6:02 PM here, and I'm just getting this part going. I got glomped by a friend that I hadn't seen in a while and I regret nothing. We had a great time catching up. I believe I made the right choice. I had a ball and now I'm scrambling to get some .js going. So, if this part of the post is skimpy, you know why. Also, I need to ramp up my .js times of studies. It's getting into the technical part, so I have to study twice as much to get what I'm being taught.
      Alright here we go. Still on constructors, sadly. They're really giving me the run-around. I just can't seem to memorize how to do this. I'm going to get it, it just isn't going to be easy. Right now, I'm working on this:

function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  this.calcArea = function() {
      return this.height * this.width;
  };

  function calcPerimeter(height, width){
      this.height = height;
      this.width = width;
      this.calcperimeter = function(){
          return this.height * 2 + this.width * 2;
      };
  }
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

I wrote the calcPerimeter Method, but I can't seem to call it right, or it's missing something... I don't know. Turns out I had a lot of fluff in there... Typical me, add too much junk. I need to get that under control! Here's the finished code:
function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  this.calcArea = function() {
      return this.height * this.width;
  };

this.calcPerimeter =function (){
    return this.height * 2 + this.width * 2;
  }
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

Notice the much smaller addition that I added. Pretty much, I just got carried away and added those two lines that got deleted because they said use the code already there as a model, but they didn't mean everything. Well, now that I got that out of the way, I done! I shall see y'all on Friday! Unless I get glomped again, but I doubt it since I'll be at home. So... bye! 

--Martin

Powercord + Bad Memory = Two Trips/ Finally Using The 'This' Keyword

     I did it! I got the coffee, which saved my life, AND I got more of the JavaScript done than I said I was going to. It was very frustrating, but now I know how to use the <for/in> loop stuff. I think.Today, I finally get to see what the <this>  keyword does. I've seen it all over the place in other people's code, but I've never used it. So, now I finally get to learn about it. Today is Friday, so I'm at the coffee shop, for the second time... I got here, got some tea, because; I'm a rebel like that, aaaaand no power cord. Seriously. I can't believe that I forgot it; I was going to work without it, but my Chromebook was dead. So, I drank my tea in peace, and then I had to go all the way back home and get my power cord. I'm back now and jamming to the Foo Fighters thanks to +Tejas Richard . I've got four of their albums on random, so I should be good to go for a very long time. And now it's time to plug in and plug away!

HTML/CSS

      Today I'm getting my first real taste of CSS. Now to see that I can keep up. First, they're making sure I can do tables with HTML so that I can use the tables for pictures, I think. It would seem that I was right. I'm making a table of pictures that link to stuff. You know, <a href> and shtuff. So, now to do the nine cells in the table and get this thing imaged up! I now know something new. The image that you see when the picture hasn't loaded yet, or doesn't load, is the HTML bits doing their thing. Well, consider me impressed. Here is a page laid out with just HTML:

And here is the same thing except that this code(<link type="text/css" rel="stylesheet" href="stylesheet.css"/>) was added in. That's it. And you get this:

That is very cool! Not really sure how that all worked, so let's go study what they're telling me.  

     So, the stylesheet bit is actually referencing a page called stylesheet.css(it's one tab over from the one I'm working on.) I didn't see the tab that had all the CSS goodness. So, as I thought, the(<link type="text/css" rel="stylesheet" href="stylesheet.css"/>) bit was referencing the CSS tab not just one line of code that does amazing things. And I feel stupid for thinking that could ever be a thing. OK, so now that the confusion is out of the way...

      Time for a coffee break! Delicious delicious coffee. Yeah, I couldn't go without it.

JavaScript

     Now for that fabled <this> keyword does! According to the lesson:"The keyword this acts as a placeholder, and will refer to whichever object called that method when the method is actually used." That's clear enough, I suppose. So, to break it down even more for youse guise, here's an example of when to use the <this> keyword thingie:
// here we define our method using "this", before we even introduce bob
var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
bob.setAge = setAge;

// make susan here, and first give her an age of 25
var susan= new Object();
susan.age=25;
susan.setAge=setAge;


// here, update Susan's age to 35 using the method
susan.setAge(35);
So, anything with the (.age) at the end of it, is going to be run through the setAge function(if you do things correctly/ you want them to connect) it will patch you through and you have the magic of <this>! pletty cool, eh? I sure thought so! Which is where I'm going to end this! I know, I know, why so little on the .js, Martin? Well, it's hard that's why! Well, that and it's Friday. I promise to have more next time. So, I'm going to go study some more and report more on Monday. Have a nice weekend, y'all!

--Martin

So Late.../Debugging

     Well, it's a Wednesday, as we all know, and I'm at the house about to get a French press going again. My music of choice today, is one of my favorite modern singers. Allen Stone has done some amazing work. I love the jazzy style in his music. Today, I have hit my first real debugging issue ever. I was doing some lessons earlier today, and did exactly as the instructions said. That didn't really get me anywhere. Again, I have issue with the specialized console that I'm working with. It was giving me errors because I had an <else> to my <if> which is just crazy. There is no way that should interfere with anything, right? So, after getting through that craziness, I'm doing it again to ensure a better memorization of this lesson, there will be more after the HTML. So, now that I'v got that out of the way, time to plug in and plug away!
I really do love Allen Stone's music.

HTML

     So, the HTML, contrary to the JavaScript, is actually going quite nicely.  After finishing the tables section about monsters, I'm on to <div> and <span> I've already been dealing with <div> for a little while. I saw it on here, and did some research and found out how useful it is. I love it! You can make colors apply to exactly where you want it to. I'm so familiar with <span>, but I'm pretty sure I can take a stab at what it means. I suppose I'll find out when I get to it. So, <span> gives you more finite control. Let me give you a visual demo:
     Hello, my name is <div> and I make it so that when you hit enter things stay the same, but when I get

brought in

things get pushed around and there's not much you can do about it.
     See? I didn't put a <br /> tag in there or anything, that's just how it does things.
OK, let's try <span>:
      Hello my name is <span> and I don't mess things up. So, When I get called, You barely notice.
The <span> is around the "I" in case you didn't notice. Sly, right? Indeed. OK. Back to business!
     Well,I've been working away and now it looks as though I may need to have HTML/CSS as the header on this section. All done here for now!

JavaScript

      Man. Today the .js has been winning instead of the other way around. I just don't know about this, man. I think I need to take a step back and maybe a few chapters as well. They're just brushing over things that I barely have even heard of! So, What I'm going to do, is go back a few chapters and reexamine them tomorrow. This won't upset my progress, because; I'll be where I am now by Friday.       So, with that in mind, I'm going to finish what I'm working on now. I seriously did not like the debugging experience, but I know that it's a part of the process. So, just to clarify, I'm not discouraged, I just realize that I have so more to learn and need to reinforce certain areas. Which I think, is a good thing to do all the time anyways.
      I am getting it to work! Which is where I'm going to end this! The coffee, by the by, was TERRIBLE and I am definitely getting something tomorrow better than what I found lingering in the cabinets. So, tomorrow, I have two things: One: get some good coffee beans from the coffee shop. Two: Analyze the last few chapters of .js. I'll report back on Friday! See y'all!!

--Martin