To Start: Where to Start?
For this post, I'd like to talk about the website that I put together for the final assignment in the FlatIron Pre-Work. There were some conceptual challenges for me going into it. For one, as a complete-novice programmer, my "eyes" were bigger than my "stomach," in terms of what I wanted to pull off with code (more on that later). There was also trying wrap my mind around being told I have a whole sandbox, and I have to use all of it:
But, that wasn't actually the hardest part for me.Where I first got stuck is where I usually get stuck in creative thinking: where to start? Should I...gather a bunch of my favorite things and have them all...do something? What? Should I dedicate the space to be a public service announcement - with code? On What? Knowing Your Rights?
In the end, I decided I would indeed make the website around a theme. One of my favorite subjects, actually. Movies!
There were a few reasons for this. One, as mentioned above, it's one of my favorite subjects (your author holds a Bachelor of Arts Degree for majoring in "Cinema Studies" baby!). Another reason is that several of my friends work in film and tv. So please, when you get the chance, watch their videos too. ("Tell them I sent you," as it were...).
But the main reason I chose this topic is honestly, truly: so I can show off the documentary I edited together in college. It's been nigh on twelve years and I'm still super proud of it. I appreciate your adoring clamor to watch it right this very minute, but I implore you to keep reading, and that in exchange for your patience there will be a link at the end.
HTML + CSS + JS = ???
So, I had my theme. What next? Well, now that I had the hard part out of the way, it was time for me to stitch and weave together everything I had learned through the previous weeks' work.
While I felt relatively confident in my grasp on the material while doing the work, there really is nothing like being forced to use it. Based on what I knew I wanted, I started with the page's basic structure in an HTML Document:
Emphasis on basic : \ What would have been challenging in HTML in another era was super easy thanks to YouTube's "embed" feature. The most I had to do to the videos was reformat them to "center".
I also found getting my background "just right" to be a fun challenge. I wanted the background to be evocative of an old "Movie Palace." The kind of place where, at showtime, the lights would dim and the curtains would open, revealing the ornate screen behind them. In the end, I got what I was after: a backdrop that changed with the size of the window:
Notice how in every case, the drapes match the...nevermind.
This was a fun challenge because, to start with, the image itself is huge. Here's what it looks like au naturale:
There is literally no point to my sharing a screenshot for that setting in action, as the image is too large for it to have any effect.
I found the "cover" command, which scales the image to completely cover the window, while preserving the image's original aspect ratio. When I tried that, the bottom of the image was at the bottom of the page, but the right side was way off the scale:
But, in the end, CSS indeed had the method for me. It turns out it's referred to as a "stretch." What made this method work for me is that it allows two input parameters, for the size of the image's x- and y-axis. What made that method work for me is: if the value is added as a percentage (ie, rather than pixels or cm, etc), CSS interprets that value in relation to the browser window. By setting the x and y values each to 100%, I was ensured 100% of my browser window would be draped with rich, velvety glory every time. Huzzah!!
All glory to CSS!
Similarly, none of the glory for the popcorn banner goes to HTML. While the empty banner was provided in HTML, the image was defined and sized and repeated in CSS.
vs: 
As was the banner-image's alter ego:
I realize a big point of the pre-work was to learn how to recognize and create Javascript Event Listeners, and that was seriously my goal. But then I learned how easy it was to do with CSS!
(Ahem) JavaScript!
Okay, okay. Time for Javascript. Not unlike my HTML Content, I kept it relatively short and sweet. Part of that was a desire to "leave them wanting more," and part of that was quality over quantity. But the biggest part of it, for me, was realiizing just how much I don't know.
Still - I was proud of my (tenuous) grasp on Event Listeners. This one calls a "pop" sound to play whenever the user clicks on the #popcorn <div>:
Man, I feel like my understanding of Event Listeners is already so much better...This code is honestly slightly embarrassing.
The single Event Listener is, I think, small but mighty. Or maybe it's an addictive rush to feel like I'm at the stove cooking popcorn thanks to having that sound at the click of a button. I do love popcorn...
Without Further Ado
So, now that you've seen the Behind the Scenes, here is the final product. What do you think?
So, what would I have done differently?
As they say, you need to walk before you can run. As a first "walk," I'm pretty happy with this output. But here are some other ideas that went through my head, and only time will tell if I have the skills to bring them to fruition (and/or, if they are even fruition-able). If I had the skillset:
-I would love to have the page background "dim" to near-black as the user scrolls down the window. As I mentioned above, I want the page to evoke an old school Movie Palace.
Side note: the limitations to this are strictly knowledge-based. I know this one is possible! I just haven't worked it out. Yet?
-Originally, my thought that was that when the user scrolls over the popcorn, both the image could change, and the sound would automatically play. The sound would then automatically stop when the cursor left the popcorn <div>.
The limitations for this were twofold. First, I would need some kind of binary (or ternary?) Event Listener. I have no idea (yet?) if such a thing exists. But also, it turns out that having a "mouseover" event is slightly trickier, at least in GoogleChrome.
Apparently, as some sort of default/privacy/anti-spam(?) feature, Chrome won't "autoplay" any sound or video until the user has "interacted" (ie, in Event terms, a "click" or "keyDown") with the "document" (ie web browser/page). So, when I was first setting up this Event Listener, this is the error message I got:
Including this link for more info: https://developer.chrome.com/blog/autoplay/
Of course, I suppose this means I could still have the user "click" to start the sound, and scroll away to stop it. So, I'd still need to look into a "binary" Event Listener...
-Lastly, going way back, my original idea was a line of individual popcorn kernel images. When the user scrolled over them, they would individually change into popped kernels and play an individual popping sound. Then, when the user scrolled away, it would revert back to the unpopped kernel, and the cycle could repeat -ad infinitum! Imagine - it would be like having your own virtual bubblewrap on hand at all times!!
The limitations for this started, frustratingly, at the stylistic level: on short notice, with a budget of $0, I couldn't find what I needed (surprise, surprise).
I couldn't find the sound of one corn popping. Nor could I find an image of one corn kernel - popped or un-. And, at the nitpick level, none of the images turning up in my internet search were the shape of a kernel. They were all squares - with backgrounds. The red background was as close as I could get to camouflaging with the curtains. (How does it look?)
So, there went my hopes for on demand virtual bubble wrap made of 'floating' popcorn kernels. A man can dream...
Comments
Post a Comment