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.

Mono.py

So remember how I had this horrible flu? Haha... hahahahaha.... it's fucking mono.

Brb laying in bed for the better part of a month.