Hey Drake, where you at!? How to make a spotlight/lightbox effect using HTML, CSS, and a little bit of JavaScript for those afraid of JavaScript

Last week I was tasked with creating a 5-10 minute presentation on anything I wanted at HackerYou. I had wanted to explore the beast that is JavaScript a little further (all I had done with JavaScript up to this point was simple things like add, removing, and toggling classes after a click). I remembered a plugin I had seen some weeks ago called Shine.js, which served as inspiration in that I now knew that it was possible to make things move relative to the position of your mouse.

I was struggling to think of a way to implement something to do with mouse movement, when I was told about the JQuery UI Draggable and Droppable, which somehow led me to thinking about searching. Then, like a lightning bolt it hit me – Where’s Waldo! For those not aware, Where’s Waldo (or Where’s Wally in the UK) is a children’s book game where you have to find the namesake character in huge image filled with many diversions and distractions.

My first attempts at creating the “spotlight”/”lightbox” effect were by and large huge failures. That, however, is not to say that they weren’t valuable exercises – I feel like you learn more from your failures than you might from your successes (don’t be afraid to try something new!). Nevertheless, it turned out that creating a circular div with the image of the Where’s Waldo page with a giant div of all black spanning the whole screen would (somehow) not create the effect I was looking for. I don’t know why I thought this would work, but it most definitely did not in any capacity. Back to the drawing board.

After playing around with a couple more options (including creating a giant black image with a circle cut out of it in photoshop – this probably would have worked, but I was convinced that this effect would be possible using CSS), I was brought back to my old friend background-attachment: fixed. Most people use this declaration on images when they want to give the effect of another div scrolling overtop of it on their web page (an example of such on my own website), however, it turned out to be exactly what I needed to remedy my situation. Remember: this property essentially makes the image stationary, regardless of whatever else is happening on the page. Here’s what my CSS looked like at this point:

Image

Boom shakalaka. One important thing to note was that I put a 10px border of solid red just to see where the div was actually positioned on the page before I started tinkering with it’s position (which was absolute and then adjusted the top and left – don’t use margin here, you’ll move the whole div and the “spotlight” effect won’t be apparent)

Next was bringing in the JavaScript. If you’re anything like most entry-level developers (like myself), you lock up slightly at the mention of JavaScript, much less JQuery, and you probably aren’t even aware of JQuery UI (don’t worry, I didn’t either, it’s not that scary). Here is where things get a little more involved, but not terribly so, and by the end of it you’ll have something pretty cool that you can show off to your friends that seems a lot more complex than it is. Onward!

To do this, we’re going to need to access JQuery, which is a library built on top of JavaScript (essentially gives JavaScript a new skin, making writing JavaScript much easier for developers – all praise JQuery!). To do this, we need to load the JQuery Content Delivery Network (CDN), which Google has kindly hosted for us. Paste this snippet in the head of your document.

Next, we’re going to need to access the JQuery UI, which allows us to another set of plugins built into JQuery. If you’re familiar with other programming languages, think of this like importing a module such as math or antigravity. This snippet for this is available once you’re viewing one of the plugins, I got it from looking in the head of Draggable, but can be a little tricky if you don’t know what you’re looking for, so here’s the snippet: <script src=“//code.jquery.com/ui/1.10.4/jquery-ui.js”></script> . Paste this snippet in the head of your document, and we’re ready to rock.

For the sake of brevity, I’m just going to cover using Draggable, but you can take using Droppable (which has Draggable already built into it) pretty far by setting a target (such as on top of Waldo) and have the script do something when you drop your spotlight on him – an example of which is up on my Codepen.

Now that we have JQuery and the JQuery UI loaded on our page, we can get started. Head on over to the Draggable page and click “view source”. A window with all the code necessary will become revealed. Copy every thing from the beginning of the opening script tag (<script>) to the ending of the closing script tag (</script>). Paste this into the bottom of your document before your closing body HTML tag. This is important because JavaScript is what is called “blocking”, meaning that if you put it at the top of your document and it does not load, or takes a long time to load, the rest of your page will not load until JavaScript is done loading (or won’t load at all if for whatever reason your JavaScript fails to load – a reeeaaaaal pain in the everything).

One thing to note about this snippet is that you’ll have to change a few things about it. If you noticed, the script provided targets something with an id of draggable because the example on the page targets something with an id of draggable. So, accordingly, we must change our selector (or, at least I do because my “spotlight” div has a class of “spotlight”). At this point, here’s what my CSS and JavaScript looked like before I saved:

Image

After a quick save and opening up in the browser, I was elated to find that my crazy idea (which I’d previously thought was impossible, or overly ambitious) totally worked! Again, not that hard to implement, but looks pretty darn impressive, and made me a lot more comfortable working with JavaScript/JQuery. I’d definitely recommend this for anyone who wants to explore JavaScript but doesn’t know where to start, or for those who are acquainted with JavaScript, but are comfortable with things like adding, removing, and toggling classes. I did end up implementing Droppable and writing a little extra script to show a success message once you found Waldo, the code for which (in case you didn’t catch it the first time) is available at my codepen.

Not long after I finished the Where’s Waldo example, my good friend Vanessa Merritt showed me the infamous video of Drake lint rolling his pants. Since we live in Toronto, and pretty much anything involving Drake and the internet is nothing shy of hilarious, one thing led to another, and, well… Where’s Drake was born. My mom is very happy that I dropped out of school to make this.

Advertisements

Snack Attack: Caramelized Captain Crunch

First, let me preface the rest of this by saying that I straight up ripped this technique off from Christina Tosi of Momofuku Milk Bar, but I’ve added a few tweaks to it, making it slightly more my own, although it is quite true to the original.

Sometimes, when I need a mental break from coding, I bake stuff. This is one of those times.

I first came up with this when trying to come up with a new dessert for the restaurant I was working at at the time. I was trying to find something that would add texture to the dish, while still being packed with flavour – I find that a lot of “crumb” components in desserts lack flavour, and I’ve always tried to make sure anything I put on a plate has a function. I also wanted something playful, and something that people would recognize. After a little brainstorming, Captain Crunch came to mind, and I also thought that corn was a flavour that was constantly underplayed in the pastry world.

Once I decided upon Captain Crunch, I looked through a few of my cookbooks until I stumbled upon this technique from the Milk Bar book. I knew immediately that the “crunch” technique needed to be married with Captain Crunch (I mean, come on – it’s right in the name!). Now, how to make it my own?

A quick look through my pantry would answer that for me. Korean red pepper flakes – a product I’d taken to dousing on more or less everything I eat – stood out as another flavour that was criminally underplayed in the pastry world. My logic went something like: “Captain Crunch is made from corn, corn and dairy is delicious, corn and chilies are amazing… so mixing all three must be super amazeballs!” I merged the two and a star was born.

The only problem with this recipe is that I never got to actually use it – all the other cooks and I ate it all as a snack before it ever even touched a plate. Now when I bring it out, it’s kind of a special occasion, and it always takes less than an hour before it’s devoured (usually as a topping for sundaes or as a garnish on top of a slice of cake for some texture). Anyways, without further ado, caramelized Captain Crunch:

Recommended listening: Blu – Good Morning Neighbor

Mise En Place

  • 130g (2 1/3 cups) Captain Crunch
  • 40g (1/2 cup) skim milk power
  • 30g (2 1/4 tablespoons) caster (white) sugar
  • 2g (1/2 teaspoon) salt (use kosher salt if possible)
  • 6g (1 tablespoon) Korean red pepper powder (optional – you can omit or add more if you like)
  • 100g (1/2 cup) oil (I like using grapeseed, but you can use whatever you want, as long as it’s not olive oil)

 

Method

  • Preheat oven to 275°F
  • Combine all the ingredients except for the oil in a bowl and give them a quick toss to disperse evenly
  • Add the oil and toss/mix, taking care to break down the Captain Crunch as little as possible (ideally not at all), and all the pieces are coated evenly (something like this)
  • Spread out in an even layer on a sheet pan, and bake in your oven for 12 minutes – rotating the pan halfway through the cooking process
  • Once the 12 minutes is up and your “crunch” is looking mighty tasty , let it cool for at least 10 minutes (this is the hardest part of the whole recipe – resist temptation)
  • Eat, enjoy, and contemplate the finer things in life

 

 

 

 

Out of the frying pan, into the fire

Well, today it finally hit me: I just quit my job and dropped out of school to become a web developer. You’d think I’d be terrified (maybe I should be), but I’m more excited than anything. Coming hot off the heels of HackerYou‘s part-time web dev course, I feel like I’m at a stage somewhere just passed “web n00b”, but not quite at “l337 web ninja” just yet. Hopefully over the next 9 weeks I’ll end up closer to the latter, but until then the internet will just have to deal with me stumbling through the web.

It’s been an interesting first few days at the full-time bootcamp, there’s a distinct sense of community already within the first few days, which is something that only formed in more or less the 11th hour of the part time class. I think it’s mostly due to the fact that all of us are more or less fish out of water, which is not a bad thing at all, and I’m definitely embracing.

So far, there’s been a lot of review – which, while it may seem boring, has actually been amazing! While I was doing the part-time course, I was constantly trying to juggle between working two jobs, school, and coding in class or the few precious moments that I had free time. As you can imagine, there wasn’t much time to really absorb the content – now I feel like I can really process the content, fix any bad habits, and help out with other people who might not be as exposed this web voodoo as I’ve become over the past few months – which is rewarding in it’s own way.

Since we’ve got our first project coming up at the end of the week, I decided to take a look at the first project I did for the part time class. It’s hilarious. Hilarious in the “looking at pictures of yourself in middle school” kind of way – a little cringe-worthy, but still awesome. If nothing else, I can say that I’ve made progress away from being that clumsy with my code in the past few months, but I’m still nowhere near where I’d like to be. Even my final project, which I finished just says ago, has a number of flaws that I’ll most definitely touch up before I pitch it to the intended client.

With that said, here’s a list of things I’ve picked up along the way for anyone just getting web dev to consider:

  • Don’t try and design while you code – This is a terrible habit that I have, and it makes absolutely no sense as to why I picked it up . There are plenty of free online resources to give you templates, use them, but don’t copy the code. Ever.
  • Good photos make your website look infinitely better – There are plenty of online resources like Unsplash that give you awesome photos for free. Hire a photographer if you need head shots  or specific photos taken. Whatever you do, you need to promise me that you will never ever ever use a photo from your phone on a website.
  • More complex ≠ more awesome – Have the content speak for itself. Too much information can be disorienting and lead to terrible user experience, as well as leaves a large margin for messy code
  • Don’t be afraid of Javascript – After hearing about how complex Javascript can be, I was pretty terrified of it. Then I reached a point where I realized that I would need it. As it turns out, it’s not so bad. It has an odd syntax, and it’s a bit of a pain when it doesn’t work – but it’s no worse than your Python program not working, and much less worse than accidentally getting yourself stuck in a “for loop” in the Python IDE (for those of you who are lucky to have not have done this yet – you need to restart the program to get it to stop)
  • Take a break – I’ve encountered a few times where I can’t figure out what’s stopping my code from looking the way I want it to. Thinking I could somehow brain-muscle the code into working, I would spend hours trying to tweak it to get it to work. When my smarticles had been exhausted (I have precious few), I’d end up going to the gym, where, of course, the answer to my problem would come to me (usually mid-squat or some other equally unfortunate time)
  • Learn to say “no” – This one is probably the hardest to learn. Telling your friends that you can’t come out, or your significant other that they can’t come over, because you’re “in the zone right now” or “are really trying to nail floats” goes over about as well as trying to tell people that rollerblading is cooler than skateboarding (I tried this when I was 11 – 0/10, do not recommend). Unfortunately, part of getting awesome at anything is actually taking the time to get awesome at it in the first place, and that means that at times, it might eat up other parts of your life. Tough break, kiddo.

Anyways, I feel like that’s probably enough of my ramblings for the evening. I’ll try and keep this thing updated as often as possible, until then – keep your stick on the ice.