Relative positioning and animations for my laser robot! (HTML, CSS, JavaScript)

Howdy everyone! This will be a short blog post because Ian is STARING AT ME and I feel obligated to rush.

So, last time I made a lovely robot out of divs. Well, I did that by stacking (literally) a few divs on top of each other and centering them to make a robot. That's pretty simple, but in order to have that robot move around on the page, its position needs to be relative to the edges of the page, not just centered in the middle of it.

By applying position: relative to the divs, I can move them around by using left: right: top: bottom: and giving pixel numbers to push them from those sides of the window.

While those move my robot pieces in two dimensions, I can also layer the pieces in the 3rd dimension, z-index: by using positive or negative numbers. If a blue circle has a z-index: -3 and a red circle has a z-index: 0 (which is the default, even if you don't apply a z-index) then the blue circle will be BEHIND the red circle.

Z-index does not scale the size of the elements. Also, if there is no declared z-index and two elements overlap, the one closest to the bottom will be shown first. (There's that cascade again!)

So here the wheel of my robot was moved up a little and given a negative z-index to be behind the torso. Also I made two other divs (inside the torso div) that contain J's, and rotated them and flipped one and pushed them behind the the torso. Woohoo.

As you guys can see above, I gave the right arm a special font, flipped it on it's Y axis (scaleY(-1)), rotated it, added some vendor prefixes for the whole "transform" thing, and then did other stuff to move it into place.

We also contained the pieces of the robot in one big robot div, and nested the divs for the arms in with the torso div:

BAM.

Now to animate those eyeballs.

Cotter, who is now much uglier than I remember, is yelling at me for his lasers. Those eccentric millionaires just don't know how to chill out..

So to do this, we're going to use an @ rule called keyframes. What @keyframes does is it modifies the state of something for a period of time, and then sets it back the way it was. We'll use this to modify the white glowy-eyes of our robot to become red for 50% of the time, over a duration of .5 seconds (.25 white, .25 seconds of red) that will loop for forever.

In order to do this, we need to define the keyframes rule and then assign it to the element it will be affecting.

Here is my definition of the keyframes rule, we've called it "blink":

Had to add in a bunch of vendor prefixes to be safe and make sure that it runs on all browsers.. but here's the breakdown of the syntax...

50% of the way through our timeperiod for the keyframe (which we'll define later, when we actually assign the keyframe), the background will take on the aspect of having a circle red gradient.

Above, I've assigned the animation "blink" to the brain div and given it a 0.5s time period and an infinite loop. This will modify the background of the brain div (the eyes) to be what we define in the animation (red) for 50% of the time (0.25 seconds) and to blink for FOREVER.

Cool. But Cooter--I mean Cotter still isn't happy. He wants to be able to turn the lasers on and off, not just have them shooting out for forever. I guess I get where he's coming from.. so we'll cover how to do that in the next blog post!

For now I need to go make some COOKIES. <3 bye="" christmas.="" guys="" merry="" p="">

Cotter loves robots. (HTML, CSS, JavaScript)

Here I am on my last segment of the Dash courses!
For this segment, my client is an eccentric millionaire named Cotter. He likes robots.

I'd be Cotter's best friend, because he looks kinda cute-ish maybe and he also has a lot of money. But alas, I am not anywhere near being a robot. Yet.

To please Cotter and provide a nice foundation for asking him if he'll be my sugar daddy, I'm going to have to learn about making shapes with HTML and CSS. Ian already had me so an exercise where I made a box that flashes back and forth between blue and red if I click it, but this may be more intense.

I'm also going to learn more about borders, and gradients, and background-size stuff. Sounds fun. LET'S GET TO IT.

So, by default a div is three things.. invisible, a rectangle based on the size of its containing element, and sexually frustrated. In the past, I inserted things into the div (color, text, pictures) to sate its burning desire to fornicate. This time, I'm going to shape divs and rub them all against each other in some softcore-porn-esque way to make them look like a robot.

...is it getting warm in here?

So since divs are born rectangles, it takes a little convincing to get them to loosen up and stop being so straight and just be a circle for a day or two. We do that with alcoho--I mean with border radius! Adding a border radius adds curves to your div. 

I just assuming that whatever value you give the border radius, it will reach out to the border and say "okay, from the center of the element, the border has a radius of this" and that makes sense to me. If you set border radius to one value, then you get something that's completely rounded. If the border radius is at least half the length of the shape, then you get a circle. 

The syntax is border-radius: top-left top-right bottom-right bottom-left; so if you only give some of the corners a radius to work with, you'll only have those parts of the rectangle rounded out. Simple enough.

Trapezoids are a bit more complicated. Because they have sharp edges, we don't use border-radius for something like a triangle. Instead, we move the border around the div.

Step 1: Make a div with some size (a size of 0 works, too)

Step 2: Add border thickness and color/transparency to create a shape that emanates from the div (which is invisible because it has no color).

Here's an example of a trapezoid I just made and some explanation below:

The div itself has no height, and a width of 140px. If it had no width, the middle square part would be gone and this would be a triangle.

The top border extends upwards 300px. Technically, the div's location in this picture is the very bottom border of the trapezoid. It has the 140px width and is invisible.

From here we create borders to the left and right of the div. Because there is no border on the BOTTOM of the div, the border on the sides stretches straight out from the center of the div, and connects to the top corners of the div. The color is transparent, so it kind of cuts triangles out of the div which would normally be a square.

Here's another illustration of the div (hooray MS paint skills):

My drawings should be in the fucking MoMA. 

Adding curves to the corners of this would let you shape it even more! I'm sure you guys could imagine the number of phallic divs I'm making right now.. tee-hee.

So I've done some fiddling and some rounding of edges and now I have a robot body, a wheel it rolls around on a-la the maid in The Jetsons, and a nice little head-shape. What he needs are glowy eyes. "How are the eyes going to be glowy?" you ask as you hang my illustration of my div above your mantle in your den... well I'll tell you how... RADIAL GRADIENTS.

Pop some radial gradients into the background and BAM, you got a big eye in the middle of the div. Adjust the background size of your (invisible) div, and the radial eye will start repeating, making two eyes! Or four! Or ELEVEN MILLION.

I'm not going to show you guys radial gradient things because this post is long enough.. but here is the syntax:

radial-gradient(shape, centercolor, outercolor);

In this case we made the shape circle, the center color "white 15%" and the outercolor "transparent 40%".. the percentages correlate to opacity so it makes it look more glowy.

Woohoo! After adding another little div to make an antenna, stuff is looking like a robot!

Hooray. Should put a Santa hat on him considering that it's Christmas eve... maybe later.

Anyway, the robot needs to do more stuff! It will start taking commands, moving its arms (which are yet to exist) and blinking its laser eyes. Exciting.

More to come.

Media Queries, the If-Then of the web! (HTML, CSS, JavaScript)

I love me some if-then statements, and media queries are what's up in CSS with that!
Here's the syntax for a media query:

Within the brackets are the condition that you're testing.
If that condition is TRUE, then the statements will execute on the elements of choice.
For example....

Above, when the page width is less than 501px, the font-size of h1 (header 1) is set to 50px.

FUCKING AMAZING. Remember to add your media query at the bottom of your style tags. Since CSS does "cascade" downward, you'll screw yourself if somewhere later in the style tag you modify what your media query is modifying. CSS pays attention to the modification that is closest to the bottom of the tag, so that's where you want your conditional formatting.

Anyway peeps I just got back from WINNING PUB TRIVIA, HELLZ YEAH, so I'm going to bed.
n00b, out!

Divs, mobile platform viewing, and sizing! (HTML, CSS, JavaScript)

So today I learn about how to make webpages look less horrible on mobile devices. Personally I hate hate hate mobile sites, because usually they change more than the way images scale and stuff.. they make an entirely new layout and it fucks everything up. But anyway, let us begin.

Apparently when making a website for that good-for-nothing whore Esha, I wasn't really understanding what I was doing when making div elements to hold photos and such of Esha's dishes. Specifically, the difference between making those photos the size of "cover" instead of "100%" or a specific pixel size.

We predefined the div height to 200px, and a div takes its width from the width of its parent element (Thanks Ian!) which, in this case, is max-width: 600px. Works out pretty perfectly for our photos... almost too perfectly...

Here's where stuff can get tricky. The body has a MAX width of 600, which is fine for the photos when the page is displayed in a bigger window. HOWEVER, on a mobile platform you probably don't have that 600px width unless you browse in landscape and the length is weird and shit. If these images were set to 100%, they would be resizing themselves to fit inside the div.

If the div goes down to 400px width, then in order for the picture to display 100%, the height of the picture must be scaled down to roughly 133px. If you remember, we made the height of the div 200px. That won't change. By default, there won't just be black-space for the other 66px of height.. it will be a repeat of the picture, like so:

For this reason, Cover is better because it just cuts the image off a bit and doesn't let it repeat. Looks slightly better.

HOORAY STORM OF SCREENSHOT'D PICTURES!

So, we'll use media queries (if, then statements) to fix this mess. But not after I watch American Horror Story with my bestie who is on her way over. EVAN PETERS IS A HOTTIE AMIRITE? I'd cover him, that's for sure.

"Gradients are a plague on humanity." - Hitler & Internet Explorer. (HTML, CSS)

Now now, guys. I haven't given up on coding just yet. Have some faith!

I've been extremely busy lately with family and friends, but now I'm a loser again and will have significantly less time away from home, so I'll be wrapping up my Dash tutorials tomorrow and continuing with codeacademy shortly thereafter.

HTML is pretty fun. Learning how CSS works is useful. I could probably be throwing some of that all in this post right now but it's almost 10 and I'm a grandpa who goes to bed early, so I won't even click the "HTML" tab here, let alone fuck with its contents.

Today I learned about how gradients aren't a default thing on the internet yet, and you need to add vendor prefixes to shit to make them work in Firefox (-moz), Chrome Opera and Safari (-webkit). IE is a loser and doesn't get any gradient goodness. Ever. Because it's a nazi and wants pure colors, all the way across. NO MIXING.

In other news, I got a new phone. THAT'S FUN. The camera is so good. HD dik pix coming ASAP, I swear guys. Those of you on my mailing list will not be disappointed.

But in all seriousness it's so much better than my old phone. I will not post about either of my phones because I know some fanboys and anti-fanboys will start yelling at me about phone things and IDNGAF.

Be good, y'all. Chat with you soon.

Esha can suck my div. (HTML, CSS, Javascript)

You know what, Esha? Why don't you make your own website for your shitty restaurant that ONLY HAS THREE DISHES AND ONE OF THEM IS A DESSERT. Also how about you learn how to describe your dishes? Here we go, let's do this one...

Are you fucking kidding me, Esha? Maybe your business sucks because you don't know what you're selling people and you're charging them 22 dollars for it. I don't think my super awesome HTML skills can help you, Esha. I really don't. BUT I'LL TRY ANYWAY.

In this lesson I'm learning about spans, gradients, transparency, and web fonts. Good ol' Ian tried to teach me about what a span was for a second and it basically was "it's kind of like a div but it's not"... that's all I remember, anyway. Gradients sound... fine? Transparency sounds fine as well... web fonts: comic sans all the way.

OKAY. But today I'm probably only going to do spans because I have videogaming to do. So.. SPANS. I guess I was really bad at listening to Ian because a span tag will let you change the formatting of whatever is inside the span, even if the greater tag, such as a paragraph tag, is telling it to do something else. You give each span a class name, and adjust the style from there in CSS. MAGICAL.

So then we encounter a problem... we're trying to take some prices and justify them to the right of the page, as opposed to the rest of the paragraph which is justified left. But then the span jumps up and is like "Whoa now, cowboy, I'm an inline element. I don't swing that way. I'm only block-element-curious when I'm like, really drunk".. which means that, because it's inline the element extends toward the end of the page and doesn't wrap around, so you can't be like "go all the way to the right" because it can do that for infinity. I think.

So then you have to float some more booze to our "totally inline" hot friend there and suddddenly he's so right-aligned you could throw a hotdog through the air and he'd catch it with his butt cheeks. Cuz floats will let you slide your element around inside the container element (in this case the paragraph, I believe) and you can just throw that bad-boy against the right wall and go to town.

So anyway that's what's up with spans. You can quote me.

MORE TO FOLLOW.

Ian helps me do some scandalous calculations...(javascript, HTML, CSS)

So, earlier today I was chatting with Ian on gchat (which I have up all the time during work guyz, add me) and he mentioned that he was making a javascript. He said it was a simple calculator, nothing scientific... add, subtract, multiply, divide... so I was dumbfounded.

"That sounds so easy, that sounds like your mom" I said, turning to everyone in the world to address their respective mothers. Then he sent me a link to this.

Immediately I was like WHAT. I have no experience with anything other than my silly python/javascript console. Never have I fiddled around with GUI stuff, or HTML.. or CSS... so we endeavored to play around with it and experiment via google Hangout later in the evening.

I was a HTML and CSS virgin. I asked Ian to be gentle. He rocked my world. Sometimes he was rough, sometimes he comforted me through the ordeal and through my frustration.. most of the time I felt amazing while I was workin' dat code.

So first Ian referred me to Dash to run through the introductory stuff and develop a light understanding of HTML. I had experimented before (literally for like, 5 minutes back in the MySpace days I think) and never came away really understanding what was going on.

All in all it was good. Hyper Text Mark-up Language and Cascading Something Something are TOTALLY my bitches now. Kinda. Sorta. They return my calls once in a while, is what I'm trying to say.

With that Ian helped me create the worst 'calculator' you could ever imagine, but it was something I didn't think I'd ever be able to do 12 hours ago.

It was really great having someone there with me, guiding me through and making sure I understood what was going on and testing me each time I did something wrong, or overlooked something. Brought me back to the times I'd harass good ol' Dan Miller and have him help me out.

Anyway, very excited to being a sort of pupil of Ian's. Stay tuned in if you want to read more boring shit about my n00bc0d3r adventures.

TIL javascript and java aren't really related?

So javascript was named javascript because java was popular and for no other reason.

THAT'S weird.

Anyway I'm learning some js now because my horrible friend Ian (who I do adore) is learning it. He is, however, already a web ninja and works with code on a daily basis so I'm way behind.

So far I've covered some basics... making functions and stuff... (functions are variables wtf?).. remembering all of my semicolons;;;;;;

Time to stop posting and continue codeacademy-ing.