GalaXQL - Sorting crotches among the stars.

Today I'm looking at GalaXQL, as suggested by my friend Andrew, to revisit SQL (Structured Query Language) and not just because I'm pretty interested in anything que(e)ry related but also because he promised it was fun and wouldn't put me to sleep like the last time I touched SQL.

AND SO WE BEGIN. A little "game" that tells me with SQL I can modify the bodies of the heavens themselves... an entire galaxy at my fingertips in in all its 3D particle sprite glory!

look at that fucking hipster professor, i bet he's running linux

Professor Guru starts off teaching you some very basic skills.. how to do math, for instance. Apparently you just use the SELECT command and then say whatever you want. "SELECT 3" returns 3. "SELECT 2+(5*4)" returns 22. Nothing special. Then we start querying the database itself, which is non-cryptically named "stars".

"SELECT * FROM" stars for example will select all columns from the stars database and return as a result. This particular database is pretty big and the results of the query were capped at 1000 stars, but the stars had attributes like "starid", "name", "intensity", etc. When used in conjunction with the "AS" command, you can turn take your results and turn them into something new and exciting! IT CAN BE WHATEVER YOU WANT IT TO BE. "SELECT x, y, z AS imagination FROM stars".. why the fuck not. Do what you want. Use that "imagination" row for whatever the hell you want to use it for. You are god now.

  

..if you haven't watched The Most Popular Girls In School, please unsubscribe

But moving on from making bogus columns of data, Professor Guru (the twat) wants us to learn more clauses for use in our queeryz. WHERE, AND, OR, NOT, ORDER BY, DESC and ASC are on the menu at this moment. WHERE can be used to only display data that meets certain criteria. "WHERE starid=2348" would only display data pertaining to the stars that have the value starid equal to 2348 (only one star, in this case). You could combine certain criteria with AND, OR and NOT. So "WHERE starid>2348 AND starid<2350 2349..="" 2349.5="" a="" data="" equals="" for="" have="" like="" only="" or="" p="" probably="" return="" something.="" something="" star="" starid="" unless="" we="" where="" with="" would="">

OR and NOT work as well, and anyone who has touched basic programming before knows enough about them.. but I'll explain anyway. OR means that one of the possibilities needs to be true, but not necessarily all. NOT means that the following thing must not be true for the query to return the result.

SELECT NOT suitcolor=black FROM borat

So say you get a list of all of Borat's suits which are black........NOT! How do you want to sort them? WELL, maybe by the price of the suit? You can throw "ORDER BY price" or something at the end of that query and BAM, they're in order (from lowest to highest value, typically)... but you can add "DESC" or "ASC" to the very end to be sure you have descending or ascending suit prices.

But you're a real madman when it comes to suits. You need them in a VERY particular order, and Borat buys most of his suits from SEARS when they're on sale so there's like 10 of them that all cost $50. You could add another thing to sort by afterward. So say...

"SELECT * FROM borat WHERE NOT suitcolor=black ORDER BY price DESC, crotch"

...maybe this will first sort by highest to lowest price, and then lowest to highest room in the crotch for your massive dong (which is really becoming a problem when looking for pants that fit).

so much crotch fashion

Anyway I've taken a lot of time to talk about crotches and not enough time to actually start molding my galaxy. I'll get to that some other time. Bye.

Update on Balloon Pop, and some other stuff! (JavaScript, HTML, Regex)

Howdy guys!

Been a while since my last teaser post about Balloon Pop and such. In short, Mr Ian sat down with me and was like "We're going to re-factor your code and make some things more efficient before we continue!" and we ended up breaking a lot of stuff which had to be fixed... which led to Ian working on most of it and then just taking it off and finishing the project overnight.

It looks great, I've got to say, but I can't follow the syntax he used. Oh well. Moving on. Maybe I'll post a link to the "finished" product just so you guys get to click around.

Went back to basics after a break (I'm lazy, I know) and watched all of The New Boston's JavaScript tutorials. Now I'm learning regex and I'll maybe look at some more HTML stuff to solidify my understanding in that realm.

Thanks for reading. Time for the gif of the week:

thanks to Nick Fish for this one guuuurrrrlll

-n00bc0d3r

GET EXCITED, I'M DOING THINGS. (JavaScript, HTML)

So some CRAZY THINGS have been going on and I've been pretty busy.. but now things are calming down significantly and I'm going to have a lot more time to devote to code.. (I probably sound like a broken record... I've said this so many times..)

every day i'm shufflin' -- shufflin' -- shuff -- shufflin' -- shufflin'

Anyway, the last post I made was about a balloon-popping game I was going to be working on with Ian (Mac-Daddy) the web-ninja. Well, I finally got around to it.

What Ian gave me was a little base code to work with.. basically a stage where red dots would pop up in random locations. If you clicked the dot, it animated and "popped" and added a point to the bottom of the page.

There were some buggy things we fixed together.. for example, if you clicked really fast on a "balloon" while it was "popping", it would register multiple points.. not good.

Anyway, after fixing some things I started ADDING some things! Now, there are the beginnings of a "lives" system, where instead of playing until time ran out (lame) you play until you suck too hard (swallow it).

gulp

You (will be able to) lose lives by not popping balloons fast enough. To combat you being REALLY CRAPPY and losing all your lives, once in a while a heart will pop up in the staging area. Inside the heart will be a random letter (A-Z, not cAsE-sPeCiFiC) and if you type that letter in-between popping balloons, the heart will burst and you will get another life to play with (max of 3 lives).

Here's a stunning and visually dynamic preview of the game IN ACTION (without my mouse cursor because screenshots don't dig mouse cursors):

fucking fantastic

Soon, everyone will be able to pop some balloons! I don't know if I can do a "high score" board or anything, so until then, I'll probably have you guys email me screenshots of your super high scores. Yay.

Thanks for reading! #n00bc0d3r #yolo #swag

Pop mah motha-fukkin balloons! (HTML, JavaScript)

Howdy folks! It's me, the n00bc0d3r, back to tell you about some n00bc0d3 I am trying to muster up the strength to work on.

My good friend Ian yelled at me and told me to make a website. So I have, kind of, the beginnings of a little website (look at how awesome it is in this screenshot):

I AM TOTALLY A L337 W3B D3$IG|\|3R!

Anyway. One of the pages (I'll have to add it to the nav bar up top) will be a little balloon-pop game! Ian has already made a huge chunk of it.. a little box that spawns divs in it at random locations, and when the user clicks on a div it has a little pop "animation" and then you get points.

The divs spawn constantly every 2 or 3 seconds about. If you leave it alone, I'm sure the entire window will just be full of little "balloon" divs.

What I'd like to make happen with this game:

• As each balloon is popped, the time between balloon-spawns decreases slightly.
• Balloons that are not popped within double the time that they take to spawn are DESTROYEDDDD and the player loses one life. Lose 5 lives and game over.
• Over time, the chance for another div, a little heart, to pop up in the background that awards the player one life (max 5 lives) will increase. The trick to getting this extra life is not to click on it, but to type in the appropriate letter on your keyboard. The letter will be shown inside the heart.

That's all for now! I haven't even begun trying to tinker with what Ian has already made because I took one look at the code he wrote and was like "I HAVE NO IDEA WHAT THIS SAYS WHAT IS THE POINT OF MY LIFE"

I'm sure I'll figure it out eventually.

Personal Home Page Hypertext Pre-Processor (PHP)

That's what PHP stands for. It's an acronym inside of an acronym.

PHP

PHP

PHPHP

Personal Home Page Hypertext Pre-Processor

I ALREADY DON'T LIKE THIS.

Done with Dash!

Well I know I didn't post for a while because I was being a silly billy, but I've finished Dash.

I figured summarizing literally everything I do in each dash tutorial was kind of cheap and annoying so FUCK THAT NOISE. I'm done with Dash and you bitches can deal with it!

I can't say I'd recommend Dash to a friend, because I walked away from it not knowing much. Sure, I did a lot.. and it was easy to kind of understand what was going on when I was doing it, but I didn't retain much from Dash. All of it was written right there in front of me. "Oh hey, type this exact thing in. You're such a 1337 c0d3r."

But it was nice to do! And a good starting point. I think I'll pay my husband Bucky Roberts a visit and look at this HTML5 TUTORIALS because his content is always enjoyable. Also did I mention he's a cutie?

Oh yeah babi.

Anyway, much thanks to my friend Ian for introducing me to dash and getting me started with html. For now I'll go back to fiddling around with code academy I suppose! Also I need to get another set of flashcards so I can drill syntax and all. Woohoo.

Bye guyz.

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