Responsive grids on responsive images using JavaScript & CSS3: A Tale of Past Projects

The Problem: Why the Change?!

So back on March 13th this year, I did a blog post about a simple battleship game I made while learning with Head First’s JavaScript book.  Anyone who can recall also knows that this was quite possibly the ugliest, poorly synchronized, wreck of green I have ever seen.

On top of that, it wasn’t responsive, so when I’d pull it up on my cell phone thinking about adding AI to add some actual element of interest and challenge to it, I’d remember I couldn’t actually dink around with the 1024px background image at all in a reasonable manner on my cell.  The reasonable, time-sensitive solution would be to grab my laptop, but instead I decided to ignore time-sensitive solutions and instead update my website that no one but I use at this point.

After all, the fact that I’d link people to my questionably entertaining JavaScript game and they couldn’t get back to my homepage without editing the address bar was a bit of an issue.

board
This. Green. Black. Nothing like my homepage (not to say that’s a bad thing, since my homepage is white and gray and has the color inspiration of someone who enjoys staring at lightbulbs).

Superficial Improvements!

White and grey is apparently the color scheme I was rolling with, and there’s clearly no reason to change that.  Ever.  Grey and white has, as described above, has the artistic influence of staring at a lightbulb.  Clearly I should have it infect every portion of my website.

Consequently, I spent some quality time with photoshop to turn the green/black scheme to white/grey.  It’s simple, elegant, not green.

New layout!  Responsive and all!
This. White. Grey. Exactly like my homepage.

Coding the changes with CSS and JavaScript!

I had originally thought, “I can definitely use some magical functionality of CSS I’m unaware of to make it responsive!”  Turns out there isn’t a magical functionality, at least not that I could find, so I decided to use JavaScript and jQuery instead to query changes.  There were a few aspects of CSS that were helpful though.  For example, using the board as a background image and having it be responsive was slightly problematic, so instead I used it as a normal image and used the CSS attribute “z-index”.  This allows stacking of elements in different orders with smaller numbers being at the bottom and larger at the top.  Consequently, I stacked setting the board to have a z-index: -1 and the table’s z-index: 1.  This caused the board to act like a background image with the table placed above it.

Next, I used the width() and height() methods to query the image, setting the page to make this query whenever a resize occurs.  I then set the resulting size of the table and individual cells to be dependent on this height and width based on the proportion of the board it occupies.

One mistake I had made during this process was at one point I set the “height” CSS attribute for the image to 100% as well (rather than just “width”), which resulted in image warping and strange overlays at small sizes.  Most modern smart phones won’t get to that size, but I figured it’d be best to just avoid that all together.  Learning is fun!

Here’s a jsfiddle to see how it works and the actual code.  Feel free to resize the “results” section to see the army of ships move about.  All your guesses will be correct, sure, but it’ll take you 49 turns to defeat me!  Bwahahaha.  Ha.  …Ha.

The Results: It’s Prettier, Hooray!

It’s not hideous!  It’s responsive!  A resounding success!

Oh yeah, now I can dink around with it on my cell phone while contemplating adding features to actually make it interesting and perhaps even enjoyable to play.  Maybe even clicking guesses instead of typing them!  Perhaps a slightly stupid AI to compete with!  The possibilities.

More importantly, though, I’ve made it so my site overall flows together a lot better.  The Great Dalmuti has even been contained to the confines of the wrapper div, which is always a nice perk since it looks less ridiculous on larger screens where you have 12 tiny cards sprawled across the monitor in one and a half rows.  Don’t get me wrong, lots of UI improvements need to happen on both ends, but it does mesh in with the rest of the site better, and who doesn’t want that?!  Hooray.  Meshing!

Other Notes & Personal Progress

While I’m still continuing to work on The Great Dalmuti (you’ll notice it has taxes now and wild cards!), I’ve also started a couple courses on Coursera.  They’re the “Fundamentals of Computing” courses, though I’m doing them with a few alterations.  Rather than taking one at a time, I’ve decided to attempt stacking them all together.  I figure this won’t be too problematic since I’m adept in the ways of Google to help support gaps in knowledge, and so far that has been helpful.  My background in JavaScript has made picking up Python overall very simple, though there are some aspects of it I’m not as familiar with.

Then, naturally, I’m not paying for the certificate either since given the current attitude towards non-traditional education from businesses, I don’t think it actually has any value in a 1st world country.  Not to mention I’m just there to leech knowledge.  I won’t go into a long rant about the problems in traditional education with my former teacher hat on, but suffice it to say I think non-traditional education is a good use of resources and a good source of independent growth if you’re remotely disciplined.

I’m currently organizing a Seattle area (Eastside) study group if anyone would like to join us.

Shoulder still recovering.  Still have zero sense of body awareness.  One day, I will be body aware, just you wait!

Advertisements
Responsive grids on responsive images using JavaScript & CSS3: A Tale of Past Projects

JavaScript Card Game: The Great Dalmuti (or look Ma, I used JavaScript to make a card game my friends won’t play with me!)

Hi, my name is Stephanie, and I’m a recovering board and card game addict.  My addiction has manifested itself in some very concerning ways over the years including a stint of playing DnD with nerds online over IRC chat in college, but the most recent iteration is by writing myself a small JavaScript app version of The Great Dalmuti/Daihinmin/President.

When I am able to coerce my friends to play this game, we all wear different hats to indicate our position in society, because unlike public schools you are allowed to wear hats in my home, and at times it is required like a construction site.  Only, instead of building apartment complexes, we’re building camaraderie?  Clearly, my preference is to give the dudes in our group the pinkest, prettiest hats I can knowing that society typically doesn’t approve of them embracing their love of lightish red and wanting to give them an opportunity where they can excuse their pink-embrace as the whims of a game addict while their hearts palpitate in an elation they had never previously knew possible from headwear.

Consequently, when I threw together cards based on a stick person I was able to create using arial font, they all had different hats to help simulate this very important part of the Dalmuti experience.  My only regret is that the 12 and 11 needed far more different hats than I provided due to a lack of inspiration in the last 5 minutes of my 30 minute hat making adventure.  Which is why those will not be cards I show you intentionally.  Instead, have an apple merchant:

Or, you know, a red blob saleswoman.
Here we have an apple merchant. 

She has large feathers in her luxurious purple cap and has done well in an apple-deprived market. Apple pies, apple crisps, and apple cider are the mainstays in the realm, and she is rolling in apple dough so much her feathers are bigger than her arms. Life is good for the apple merchant.

Totally did not make her an apple merchant because apples are easily distinguishable at small sizes.  It was definitely a lore thing.  Definitely.  Same with this carrot guy.  Lore.

Or, the amazing orange stick salesman.
The carrot merchant. 

A man with small feathers to signify his small wealth in comparison to the other merchants, especially that darn apple merchant. There was a time in his life where he spent day in and day out trying to convince the members of the realm that orange is the new red, but after being threatened with incarceration by the Great Dalmuti himself, he resigned to his fewer boxes of unwanted carrots and accepted his lot in life. After all, he could be a peon.

Look at that well-developed story line.  It makes you want to play a card game with robots because your friends won’t play with you, doesn’t it?

On a more technical note, this was fun to practice for some of the different things I’ve learned and a nice break from my behavior tracker app I’m working on.  I added some changes from my original based on suggestions from friends and spouse (ex. delayed listing of what the script in the browser has played rather than it showing as it loads which is instantaneously from a person’s perspective).  There are still some aspects of the game I need to implement (wild cards, revolution, greater revolution, taxes after the 1st play through), I want to make a much better UI, and I need to refractor my code a bit more since in some places I’m pretty sure it’s a bit awkwardly put together.  I’m also likely going to put together a multiplayer version using me some node and socketIO, but that’s for later because if I could get friends to play with me in the first place I wouldn’t have needed to make a computer version.

In the mean time – hats.  Hats are the answer.

JavaScript Card Game: The Great Dalmuti (or look Ma, I used JavaScript to make a card game my friends won’t play with me!)

My nemesis: AngularJS docs.

Hello neglected blog!  I’ve missed you and your beautiful blue-ish pages.  I’m sorry it’s been so long since I’ve interacted with you (and my faithful 15).  I am drowning in the sea of AngularJS as I dig around the MEAN stack.

And I do mean sea.  As anyone who has attempted to read AngularJS’s docs can tell you, the experience is special in the way you describe a friend you personally love but are very aware that anyone who hasn’t spent the time getting to know them will need to invest a large amount of time disliking them to find the love.  With AngularJS docs, as you stumble upon the first page that you’re almost 100% certain any other documentation page for such a large scale project would include the information you’re looking for about the module you want to implement to make your HTML page not look like, well, this:

Yeah...learning is fun.
An uncomfortable mixture of unreadable and mid-html logic intensive that will inevitably be reused when I get back to my login page again and failing to be DRY.

When you navigate to that page in the Angular docs, it starts to answer the question, letting you step into the sea a few inches, feeling the sand between your toes, certain this is the relief your mess was looking for.  Then, as you inch in further, suddenly you realize the sea was not a sea but instead a decapitated kraken in a kiddy pool who wants nothing, as it is mindless and headless, and instead will grab you by the ankles and throw you about the bouncy edges of its plastic entrapment until you resign, regretting your trip to the sea, and crawl away onto the dried out, dying lawn.

Which then leaves me digging around blogs.  The bad thing about bloggers (such as myself), is often we don’t update for years in a row.  So while we had a solution that would have worked a few versions ago, we don’t have a great one for the moment – or even a mediocre one.  So essentially it’s like looking for the sea and finding a puddle.  Sometimes this puddle can offer a bit of relief, but more likely than not if you try to drink from it you’re going to get a disease (in my case, looking at other blogs in hopes for a bit more detail) that will result in hours wasted and no actual relief.

Then I decide the solution is to use vanilla JavaScript, but then I look back at the rest of my code and see how odd that little chunk seems in comparison to everything else.  It’s like meeting an adorable toy poodle with a very unfortunately uneven haircut that looks like missing blocks in a LEGO recreation of the Tower of Piza.  So then I hang my head in shame, crawling back to Angular, apologizing for my failures, and begging to be taken back as a negligent neophyte.

You talk to mentors, peers, anonymous strangers on the internet, but they all respond the same.  “You check Google?” because JavaScript is often perceived as the bastard child of programming languages, and so finding those dedicated to it is like trying to find a bastard child in good standing who will dedicate themselves to live on a giant wall of ice without reasonable comforts in celibacy without being forced there (i.e. Jon Snow).

Consequently, Google frequently leads to this:

xkcd reading. Wait, no. StackOverflow. I’m pretty certain DenverCoder9 moved on, tried something else, and succeeded. (Un)fortunately, I am the embodiment of perseverance (read: stubborn), so…

Unrelated, I’ve interacted with some dev bootcamps & their former students lately out of curiosity (or more realistically wondering if they had a magical instructional model that the internet and bookstores did not), and decided against pursuing it any further, at least not for the foreseeable future.  Maybe I’ll write a post about that later once I’ve finished finding some body of water of AngularJS knowledge that won’t beat me senseless in a kiddy pool, act as a massive time sink without much gain, or simply fade into nothingness.

In summary, AngularJS docs are my nemesis and why I’ve been a negligent blogger.  Google overlords, you have failed me 😥  If anyone happens to know a resource to find information on modules that isn’t painfully out of date, I would LOVE a link.  Love.  Like I would marry that link, eagerly wake up to see it every morning by my side, and grow old with it.

My nemesis: AngularJS docs.

Getting MEAN: Building My First Web App for Realsies (and also fries are the worst food gift)

You heard me, for realsies.  I even got to self-create security violations, but thankfully as the app works now it doesn’t include usernames.  Unless you’re capable of inferring.  Then, yeah, definitely an issue.

Not THE Batman.
I AM Batman.

I love you, internet, you’re a great outlet for all of my weird.

But first?  Fries.  Three nights in a row, my husband has eaten out for dinner due to working crazy hours recently (poor, handsome bastard).  Since he knows the secret to a happy marriage is food, he brought me home left over fries.  Now, I love fries.  When I was a kid and I got fries from McDonald’s, I would happily eat those hot, salty, death sticks as soon as I could get my fingers on them.

I ate them before my cheeseburger.  Not because I didn’t love the hot, cheesy, non-compostable burger as much as the death sticks, but because the death sticks would gradually develop a weird texture and consistency as they grew cold.  This is especially true with fries that will actually decompose over time such as those that you get from a sit down restaurant.  That crispy, crunchy, delicious starchy stick just turns into a cold, lumpy, limp, soft wad.  It’s like coal in your stocking on Christmas.  Complete disappointment unless you happen to live in a town running on coal power that is running low, and for Christmas you want to give everyone around you warmth again.

So I tried a few solutions.  One: microwave.  BAD idea.  Ten times as soggy.  Two: oven.  Took way too long.  Still quite soggy.  Three: Toaster oven.  Still soggy, but warm fast.  This may have been improved if I could cook directly on the toaster rack without complete and utter fear of causing a small fire.  This may have been a fear exacerbated by the quantity of “in case of fire!” signs all over my toaster oven, I admit, but also fries slide through thin cracks quite easily so it may also just be a common sense thing that I wish didn’t exist.

I tried to think of other food gifts that came home as bad as fries.  Don’t get me wrong, anything that is a starch to which you add sauce isn’t great (burgers, sandwiches, etc), but a quick run in the toaster oven can fix all of those.  Fries though, too thin to be toaster ovened without aluminum foil.  Tis truly a shame.  If anyone has a leftover fry solution, let me know, cause I have quite a bit left.

(Side note: Dear Husband, if you happen to read this, please don’t take this to mean that I do not appreciate the lumpy food gift, but rather that I am desperately seeking a way to improve my enjoyment of the lumpy food gift as google has not provided an answer that works with the cookware we currently own.  This was a pretty close answer though.)

Now onto the programming portion of our lecture.  A couple months ago I followed a django tutorial that told me I made a web app, and once I finished the site I had loaded congratulated me for my amazing endurance for all of the 5 minutes it took, but I knew the truth.  I knew I had accomplished nothing.  When I attempted to make my own web app at that point, my brain laughed at me and called me names, so I knew I had more work ahead of me.

I landed on learning the MEAN stack because it could all be done in JavaScript.  At that point, I’d finished a majority of the Headfirst Javascript book (2 chapters away from the end, I believe?), so I really wanted to learn something that I could use to help solidify what I had learned about JavaScript.

I have an idea for a program I want to make for some of my old teacher buddies to make life a bit easier, and while I have an idea of the kinds of data I need and some of the objects, I decided it’d probably be better to start with something a little simpler.  There were a good dozen plus websites going through MEAN stack tutorials creating a to-do list (the “Hello World” of web dev), and a few making chat programs.  I decided to be awkward and make a chat program where you talk to yourself and no one else.  Why?  It felt right and had the kind of functionality I knew would be a good stepping stone into the future.  It also allowed some really awkward test cycles where I posed as Batman and used the classic trilogy throat-tearing voice every time I posted a test.  It made the whole experience feel way more epic.

Using a combination of resources including the documentation for node.js, angular.js, MongoDB and express.js, multiple websites, blogs, and video lectures from strangers, it took me about a week of working on it after work to get it together.  I learned that express.js is a beautiful blackbox where I don’t know anything about what goes inside, but I should probably learn what happens in that blackbox.  Finally, the best learning tool of all was learnyounode.  The reason for this is because it is called learnyounode, which automatically makes it amazing.  Plus it just gave you problems to solve using the JavaScript you hopefully know to start creating a web server.  Pretty good times.

Here’s a link to the outcome.  More importantly, here’s a link to all my testing posts.  It gets weird in all the right ways with Batman, Joker, and Robin being the stars of my tester accounts.  This page would look a lot less awkward if I tagged the users who post, but since, again, my intent is to only see MY posts alone when I sign in, I don’t see this as an issue.

I think my next step will be to start working a bit more on the app I’d like to build for my teacher friends.  I’ll need to plan out what it needs to do and how it will work a bit more first so I can get my MVC on.

Getting MEAN: Building My First Web App for Realsies (and also fries are the worst food gift)

Simple JavaScript Image Slideshow: Refactoring = Progress!

Now, I know the posts about me programming are a bit dull since I’m still very much a beginner, but since I didn’t have any activities scheduled this weekend and no work stuff to take care of, I felt like I was finally able to make some significant growth in my programming powers.  Admittedly, compared to anyone who is even remotely competent, I’m still a babbling baby, but still, it’s pretty cool to go back to something I made about a month ago from going along with a webmonkey post to going through and making it my own AND more easy to read, change, and follow along with.  I think the combination of those two things are something I really love about coding.  You can look up just about anything online (at least for the kinds of problems my beginner butt is running into), and then you can recreate bits of what you find with other knowledge you have to make them more simplistic or elegant.

CS vocabulary has been a bit new to me.  There are a lot of words I know in completely different contexts that have a very different definition in CS.  I’ve been trying to track new words I learn as I read about them and trying to see if I can understand them without my brain hurting while looking it up.  Sometimes I’m completely able to get it, and other times I sort of brain fart and feel like a toddler again.  So, for example, I read an article about a person who was working as a recruiter for a company.  This company was concerned about gender/racial bias interfering with its interview process, so together with the recruiter decided to do the programming portion of the interview with the candidates completely anonymously online.  Aside from written language (which one might argue could give some of this information away), he never saw or spoke with the candidates.  He gave them a refactoring challenge where they were to identify code smells.  When I read through the rest of the article, I was completely and utterly confused about exactly what it was he was having them do, but from what I could guess at the time he was having them look for hints of something being inefficient or problematic in the code then restructuring it.  Thanks to some quality time with my overlord Google, this turned out to mostly seem accurate.

Refactoring is when you alter the internal structure of the code without changing its external behavior.  When I wrote the first draft of my slideshow code I hadn’t any experience with objects or events, so when the site I followed along with pointed out different events, I just sort of rolled with it without really fully understanding what was going on beyond that when something was clicked, I told it to execute a function.  I also used global variables quite liberally, because that was the only way I really knew how to get some of the work done that I needed.  Even after I switched out all my functions to be methods instead, this hasn’t really changed too terribly much if I’m honest, but the beginning value of the variables is all easily accessible at the beginning of the method object.

Now, with the original script I had made a slight change to it.  I had added a while loop to create the imageArray[] since typing them in individual was not on my future desires list.  At the time I felt slightly successful being able to make that change, but ultimately I had mostly ended up with code very similar to the article as I wrote it after reading what needed to be done, and then I compared to what they had with functionality.  Not a great strategy, but again, the event handlers were a bit over my head at the time.

When I went through it to refactor, I renamed some variables to names that made more sense to me.  I added comments.  I restructured it to have the functions sorted as methods in objects and all the variables within objects as well.  None of what I did was really ground breaking, and a lot of it was work I honestly will probably change again as I continue learning in the next few weeks, but it helped me practice the skills I have learned and apply them, which is always helpful for retaining information and being able to use those skills creatively in the future.

You can go to my GitHub account to check out the code and the revision in a Gist.

One thing I need to revisit when I’m less sleepy is the event handlers.  I left them in HTML like I had before since I was running into strange errors when I tried placing them in the JavaScript instead.  I believe this was caused by setting the onclick handler and trying to pass it an argument, which I don’t believe is supposed to happen.  Without the argument, the rest of the code was no longer interested in functioning.  I checked some JavaScript documentation, but I wasn’t able to come up with an alternative that would work any better than just leaving the event handlers on the HTML page.  I will likely need to review options when I’m less sleepy, and with any luck, I’ll keep thinking about it while I dream and wake up with an answer!  I love code dreams.  So productive.

Next: to improve the Battleship game.

Simple JavaScript Image Slideshow: Refactoring = Progress!

You Sank My Battleship! (Learning JavaScript Continued)

So I’ve been learning JavaScript using Head First’s book, as I’ve mentioned about 12 times when frustrated with the pacing of other sources.  Around the 8th chapter, you’re given the goal of developing a JavaScript web app for battleship.  They go through it step by step how to make it, but typically when given a project, I’ll read the next step and create it on my own.  I still don’t feel I have a great conceptualization of how those steps are reached – I’m working on it – but this is a good start.  Afterward, I tested, and then I’d compare my code to the book’s.  Obviously, I learned through the book, so in some areas what I produced as incredibly similar to what the book suggested, and sometimes what I did was less efficient, and others I believed it was more efficient.  As far as event handlers, though, I had to look up information on that mostly and definitely need to learn more before going further.

Battleship Link!

My next steps for it are to include a way for the player to place ships for the computer to guess in order to compete and add sound.  I think this will help with my issue with feeling a lack of experience going from start to finish with a project.  Also, my goal is to change what I have to make it response as well, since currently on my phone, while I can zoom in and play, I feel like I should play anywhere!

The game itself isn’t very fun since it’s like playing Battleship with a wall, but I still think it’s a pretty good project for learning.  Plus, it’s just nice to look lovingly at something you made and feel all productive about it.

What I’ve learned so far with this project: testing after each implementation of a code block is essential.  Objects make me feel warm and fuzzy, and it’s lovely to be able to make information more easily structured using them, and I haven’t really used them until now.

That’s all the post for today, folks.  Back to work I go!  Happy Digital Learning Day!  Practice safe computing!

You Sank My Battleship! (Learning JavaScript Continued)