Category: JavaScript

Netflix and Why Options Are Bad For You

I will make your life better by taking away your choices.

I probably sound crazy right now. Let me change your mind.

How often do you find yourself drowning in a vast, empty sea of television shows and movies without giving a single shit about which one you watch? It’s like walking down the aisle in a grocery store and searching through an endless variety of laundry detergents when all you want to do is get that damn stain out of your good shirt.

As it turns out, there’s a reason for this uncertainty you experience when browsing through too many options. It’s called the Paradox of Choice. I came across this feeling first on Netflix. I found myself never being quite satisfied with whatever I watch on the brilliant streaming service.

That’s where Netflixr comes into play. A quick bookmarklet that will give you just a few random options from the Netflix page you’re currently viewing. It’s pretty simple, but sometimes that’s the way it should be. Mindless television should be a bit more mindless.

With more options comes more responsibility.

Think of it like this: Given a thirty minute break for lunch, you have enough time to heat up a quick meal and watch something before getting back to work, with a little wiggle room to get your mac n cheese to the right temperature. The longer it takes you to decide between It’s Always Sunny in Philadelphia, the Office, or Derek, or anything else, that’s less time you get to eat and enjoy your damn television show.

Turns out, I wasn’t the only one thinking this way. Sheena Iyengar, who literally studies how people choose, has a TED talk about the very same topic. In it, Iyengar mentions that more options will sometimes make it more difficult for people to commit. She then goes on to mention a few ways to make that decision easier for the consumer. One of those ways? You guessed it. Cutting options.

I will make your life better by taking away your choices.

Who’s crazy now? 😉

As usual, to install the Netflixr bookmarklet, drag this link to your address bar. Simply click on the bookmark on any Netflix page, and viola!

FB Friend Selector

It doesn’t happen often, but when you’d like to invite ALL of your friends to your Facebook event, you’re left with the daunting task of having to go through and click on each person, one by one.

Well not anymore!

Using what I learned from my previous project, a simple bookmarklet will allow you toggle all of your friends with one click.

To use it:

1. Drag the following link to your bookmarks bar.

2. Go to your Facebook event page and open the ‘Invite Friends’ dialog.

3. Make sure to scroll all the way down, so it loads all of your friends.

4. Click on the link you just bookmarked.

5. Depending on how popular you are, it may take a second. Then you’re done!

As per usual, here is a link to the pure JavaScript file.

Enjoy!

FCCheck

If you’re simply looking for FCCheck, a quick and easy way to make sure lyrics are FCC clean, click here! To install this on your computer, simply drag this link to your bookmark bar. Or copy the Link Location from the link and save that as the URL for a new Bookmark item.

What?

FCCheck is a tool that will allow you to very easily view all the FCC 7 dirty words on a page. This can be especially useful for DJ’s looking to clean up some (potentially) dirty songs.

Why?

For those of you who don’t know, I am an underground hip hop DJ on WKNC. Check out my co-host (Casual-T) and me (tomeslice) on Sunday nights, midnight-1:30 am. Tune in: http://wknc.org/listen.

It didn’t take us long to find out that one of the hardest parts of being hip hop DJ’s was finding clean music. For each song we wanted to play, we had to look up the lyrics, use the Find command and search for the ‘dirty 7’, an informal list that the FCC uses to make sure radio broadcasts are age-apropriate, and then skim the page just in case we missed something. This process became long and tedious after some time, as you might imagine. So I threw my thinking cap on, and in just one afternoon was able to come up with a solution: FCCheck.

I wanted to automate the process of searching for the dirty 7 in a lyrics page. I’ve used UserScripts before, but the nature of the UserScripts wasn’t what I was looking for. I wanted a button of some sort that I could click on while I was browsing any page, and for it to count how many occurrences of each word was on the page. And just for fun, highlight each occurrence as well. I was sadly coming to the realization that I may need to turn this project into a browser add-on. This isn’t a big deal, except for that I didn’t want to have to make 4 browser add-ons for each browser. Plus, I wasn’t familiar with how to go about doing this.

And then it hit me: bookmarklets.

If you haven’t heard of bookmarklets, you’re missing out. Bookmarklets let you store a JavaScript function, as a URL, in your bookmarks. This means that you can have the power of JavaScript, on any page you’re browsing, just a click away. To see how powerful these can be, check out some of these:
Kick Ass – Turns any page into an interactive, Asteroids-like game
Mark Up – Let’s you draw and write notes on any page you’d like, and then share it with the Mark Up Community
Urban Dictionary Lookup – Looks up the selected term on the page on Urban Dictionary
Wikipedia Lookup – Looks up the selected term on the page on Wikipedia

A bookmarklet was so perfect for this project, I don’t know how I didn’t realize it earlier. A few hours later, FCCheck was born. Try it, click on it! (To install FCCheck, drag the previous link to your bookmarks bar. You’re done!)

How?

The first thing I did was made sure the bookmarklet pointed to my servers to fetch the script. This has a few advantages. If I ever want to update the script, make it more efficient, or add some features, it will automatically show up for everyone who’s using the same bookmark! Plus, I can easily track and see how many people use the script. However, hosting the script on my server means that it can’t be edited by the user. And for that purpose, as well as if you’d just like to check out my code, here is a link straight to the JavaScript so you can do with it what you please!

Next, I needed a good way to count occurrences of words on the page, and then highlight them. As of now, RegEx is used to count the occurrences, and a third-party script searches through the page’s source and highlights each word on the page. Then an alert is shown displaying the number of occurrences of each word in the dirty 7 array, and a total at the bottom.

While I can say with great certainty that it should work correctly most of the time, please make sure you look over FCCheck’s results. I do not want to be held liable in case of any mishaps. Also, keep in mind that FCCheck will scan the WHOLE PAGE when looking for cuss words. On lyric sites where people post comments at the bottom, or if there are links to other songs at the sidebars, FCCheck will tally up those words as well. In other words, please use caution while using this bookmarklet and remember that it is not a one-all solution.

Thoughts? Improvements? Efficiency boosts?

Simple PHP + JavaScript CAPTCHA

While I was developing Fuck It All, I came across an issue that I’ve never had to deal with before. Since I was accepting user input that would in turn be posted on my site, I needed a way to make sure SPAM bots wouldn’t be able to make posts. There is quite a simple solution to this and I’m sure you have all come across it before, CAPTCHA inputs.

CAPTCHA inputs are small verifications, usually found on forms, which are easy enough for all humans to solve, but something that an automated machine wouldn’t be able to compute. These are commonly just a few words, but with some sort of distortion applied to them. Such text is, up until now, unreadable for computers. However, most humans can distinguish the individual characters without a problem.

For me to set up a system like that (without outsourcing), was way beyond what I wanted to do/had time to do. I could have easily used a publicly available widget and integrated that into my site, but I wanted to keep it classy and in-house. My friend helped me implement a simple CAPTCHA mechanism that can easily be implemented into a site using only PHP to generate the CAPTCHA and JavaScript to validate it.

HTML entities are reserved characters in HTML. To read more about HTML entities, go here.

Now for the actual CAPTCHA. Using these HTML entities, we can show a simple addition problem with two numbers. Most humans should be able to pass this quick test, while spam bots won’t be able to recognize what your site is asking them due to the HTML entities.

In your form, add the following PHP code:

<php 
   $num1 = "&#" . rand(49,57) . ";";
   $num2 = "&#" . rand(49,57) . ";";
   echo "<label for='captcha'>* <span id='captchaval1'>$num1</span> + <span id='captchaval2'>$num2</span> = </label><input type='text' name='captcha' id='captcha' maxlength='2' required /> (just making sure you're not a robot)";
?>

This generates two random numbers between 1 and 9 and tells the user to solve the math problem. Now we need to check if the user is correct using the following JavaScript code:

<script type='text/javascript'>
function validate() {
   var passed;
   var val1 = document.getElementById('captchaval1').innerHTML;
   var val2 = document.getElementById('captchaval2').innerHTML;
   var captchaval = document.getElementById('captcha').value;
   var result = parseInt(val1) + parseInt(val2);
   if (result != captchaval) {
      passed = false;
   } else {
      passed = true;
   }

   return passed;
}
</script>

By returning the ‘passed’ value to the form, you can check whether the user got the simple math question right or not. From there, you can handle the form submission as you please.

I would also like to thank my good friend Daniel for bringing this to my attention and helping me out with this code. If you have a second, you should check out some of his stuff as well. Right along the same alley: http://omniimpact.com/

Thanks for reading! I hope you guys enjoyed my first code posting!