Is React’s setState Asynchronous?

For this post I am talking about in React when you use (see:

const [foo, setFoo] = useState(“bar”);

And then you use:

setFoo(“fizz”)  ← This right here

Let me ask you a question:

Is setState Asynchronous?

  1. Yes!
  2. No!

Trick question, the answer is “Well, it’s really complicated, and you should just assume it is.”

However…If you want more information about it, I can give you an answer in several parts…It’s complicated.

I feel like the true answer depends on the exact definition of “asynchronous.” So let’s explore how `setState` actually works.

Going deeper:

setState executes in two parts, the first part executing immediately, the second part executing later, however that second part is immediately added to the event loop…Actually that second part isn’t totally true.  It’s not technically added to the event loop – it tells React that it needs to re-render, the check for that is already on the event loop in React’s internal event loop…So technically, it’s not added to the end of the event loop, basically a flag is set saying “do a re-render” and that re-render happens after the current render finishes, when React gets to that check in its internal event loop.

We need to be clear about two different parts of state in React for this to make sense.  

  1. React maintains an internal state that is (usually – it is exposed in updater functions…for brevity, I’m stoping here) not exposed to you, the developer.  
  2. There is also a component state in the example above, this is  foo.

These two states are sometimes the same, and they are sometimes different.

The first thing it does is execute an update to React’s internal state (#1 above).  That is totally immediate, and I don’t think anyone would argue that it is asynchronous.  

When React’s internal state is updated, React tells itself  “I need to do a re-render.”  This re-render however is deferred till after the current render cycle is completed.

This means that the state inside your component (in the example at the top foo, #2 above) is NOT updated till that re-render.  The state inside your component only ever changes during render.  This is true for anything involving state in your component.  More simply: component state only ever changes during the render cycle.

So, is that second part asynchronous?

Well, you can’t await is, so no, it’s not, end of story…Except you can’t await setTimeout and I think we generally agree that setTimeout is asynchronous…You can however wrap setTimeout in a Promise and you can await that…Turns out, you can also wrap a setState in a promise and await that…But don’t ever do that because it makes React unhappy and throw errors.

Fact: React will always execute setStates in the same order, so the last one will always be the final value.  

Fact: You need to use an updater function if you want to access the current internal React value (#1 above) – meaning, if the current render has updated the state, the only way to see that updated state is in an updater function. 

Fact: You CANNOT access the current internal React value of a DIFFERENT state value (during the current render cycle) in your component, even in an updater function.  Meaning, if you have two state values, and you update one, then you update the second one – with or without an updater function – you will ALWAYS get the un-updated value of the first one.  Why: Because component state (#2 above) only changes on the re-render, and that doesn’t happen till after the current render completes.

By “asynchronous” do we mean “doesn’t execute immediately?”  Do we mean “Is added to the microtask queue?” …Does setTimeout(..., 0) count as asynchronous? A lot of what I read says “does not hold up execution” which well, it doesn’t, except it does after other stuff…

Well, that lead me to reading the ECMAScript spec about setTimeout and I couldn’t discern if setTimeout(..., 0) is added to the event loop, added to the microtask queue, one of the previous but with a slight delay, or something else…I’m actually not sure that the behavior is defined – If someone smarter than me knows the answer to this please let me know.

What I do know is that a setTimeout(...,0) will always execute after the re-render cycle (I know this because it obviously isn’t part of React’s render cycle and always is the final update – in my testing) – meaning, that if you have a setTimeout(...,0) that sets the state, as well as other settings of the same state, the final value will always be the one set inside of the setTimeout(...,0) …Except that I say “always” and I actually don’t actually know if that is true.  It is true in my testing.  If that setTimeout is added to the microtask queue, in between other tasks that set that state, then it is possible that it won’t be the final value…but I don’t know if it is…but generally it is true – at least in my testing…And again, I’m not totally positive that is even defined in the spec…and we are splitting hairs here.

Because I don’t think that is complicated enough, React was kind enough to make running in dev mode as opposed to prod work differently.  Well, kind of.  If you are using an updater function, React will update twice in dev mode, and once in prod.  Why?  Oh god how deep does this hole go? 

Short answer: it should be a pure function. (see: &

Technically when React tells itself it needs to re-render, it applies the update to that component state var (#2) to it’s queue with the current internal value (#1) of the variable – meaning that changes to that variable inside of an updater function ARE NOT SEEN – as the original value was already applied, when the call was queued.  So if you update the state of the variable inside of an updater function, and then try to update it again later with an updater function, the first update is ignored.  Meaning: that’s a really bad idea.  So, in dev mode React will run it twice, once with the first value, once with the second value, and if they are different, ya done goofed.  The reason it does this in dev mode is to show you that you goofed.

So again, how is “asynchronous” technically defined?  And is it asynchronous?  IDFK.

I say setState is not asynchronous because the execution order is defined, and everything it does is immediately added to the the event loop when it is called – if you know what you are doing, the results are deterministic, you absolutely know what the final result will be.  I say please don’t ever rely on this, because the next person who has to modify the code – including future you – is generally not smart enough to understand the nuances here, and if your code relies on this behavior, they will likely break things.

I also say it is asynchronous because part of it executes out of order, and we can (in theory) use a promise to `await` it.

Additionally – because this behavior is so esoteric, I don’t know that it will not be changed in React, sometime the future.


I probably made some technical mistakes above…Though I do think it is basically correct.  What I wrote is based on my reading many things, watching many things, and a butt load of tests I wrote myself….Really, I should have saved those tests so I could post them…If you want me to reproduce and post those test, let me know.


Bookmarklet For Increasing YouTube Speed

I made a new tiny bookmarklet to let you increase the speed of a YouTube video beyond 2x.

As always, just drag this link to the bookmark bar on your browser, then just start a YouTube video, once the video starts, click the bookmark, and enter how many “x” you want the video played at. I usually stick to 2.5 or possibly 3, it all depends on the video – but you do you!

YouTube Speed

The code is pretty simple and easily found online, but just in case that’s what you are looking for:

(function(){document.getElementsByTagName('video')[0].playbackRate = window.prompt('Please enter a new speed:');})();

Facebag – A Chrome Extension to make Facebook less interactive!

Long time no update! Well, I just made myself a little Chrome Extension for Facebook. All it does is delete the comment boxes, status box and like buttons from Facebook, so that I don’t use them. It’s great for me! I am considering adding other things to it as well, but for now this was quick and dirty and did what I wanted!

Chrome Store Link

Github Repo

Netflix Autoplay Chrome Extension – v0.8 – Chromecast Support!

I put out an update the other night, this one adds support for Chromecast.

And it looks like I was just in time for the new season of Orange Is the New Black, so get your binge on!

Web Store:


Netflix Autoplay Chrome Extension – Still More Updates

I have added still more updated to my Chrome extension.

0.6 Updates:
*Added episode counter in addition to timer
*Pausing video stops timer
*Fixed bugs when stopping

0.5 Updates:
*Play/Pause, Next and Stop media buttons on keyboard now work with Netflix.
*ctrl+q now causes the same action as the sleep timer ending (ex: pause movie & sleep).

Chrome store link:

Github link:

Netflix Autoplay Chrome Extension with Computer Sleep / Shutdown – Updates

I have added a number of updates to my Netflix autoplay extension. In addition to autoplaying TV episodes and shutting down when done, it now also adds support for the keyboard media keys play/pause, next, and stop to Netflix, and also adds a new keyboard shortcut of ctrl+q which does the same thing that will happen when the timer reaches zero. The extension and Github have both been updated.

Also, a little while ago I added default value options for the popup that can be set in the extension option.


Chrome Store Link:

Netflix Autoplay Chrome Extension – With System Sleep!

Bookmarklets are cool and all that, but what I have really always wanted the autoplay functionality for Netflix to do is emulate the ‘Sleep Timer’ found on most TVs. That is, I want it to play for some amount of them, and when done, shut everything off. I know I am not the only person around who has used the function on the TV for years while going to sleep. I have known that this is not possible using just a bookmarklet, but I never got the energy up to actually figure out how to make one. One of the reasons is that I have always known that calling something external like the Shutdown/Sleep command on the computer would be a huge pain. This new HTML5 video Netflix is using for Chrome though made it just a bit too tempting.

The core functionality works basically the same way as this one, since Chrome extensions just use Javascript. I had to figure out how to do all the fancy stuff that makes it an extension, AND add the stuff to allow it to interact with the system to call the Sleep command.

And here it is: Netflix Autoplayer – Chrome Extension

For the ‘Sleep’ functionality to work, once you have installed the extension, you must download the install.bat file that you will see a link for at the bottom of the dialog for the extension. You must run this (and I believe you might need administrator privileges when you do) it creates a couple files that are needed and adds a registry entry. Really, in general I would say you should not do something like that. You shouldn’t be running random things people on the internet tell you to. If you want the ‘Sleep’ to work though, that’s what you need to do. If you understand how .bat files work, it is actually really small, so you can check out what it is doing.

Once you have done the above you can actually edit one of the files it creates, it is located at:

And by default should have the following:

:: Lock
::rundll32.exe User32.dll,LockWorkStation
:: Shutdown
::Shutdown.exe -s -t 00
:: Hibernate
::rundll32.exe PowrProf.dll,SetSuspendState
:: Sleep
rundll32.exe powrprof.dll,SetSuspendState 0,1,0

As you can see, ‘Sleep’ is what it does by default, but I have entries for Hibernate, Shutdown, and Lock all listed, just uncomment the one you want and comment the others back out…Hell if you want you could really put anything you like in that file and make it run anything when the timer gets to zero.

Chrome Web Store Link:

Github Link:

Hope you enjoy!

NEW Netflix Autoplay Bookmarklet!


I was checking out Netflix today, and they seem to have moved to an HTML5 video player (for me in Chrome at least, and that is all I tested). This is awesome news as it made writing a new autoplay bookmarklet easy as shit! They also got rid if the bit of Javascript they were trying to use to prevent you from using the console. I don’t know why they made the decision to get rid of that, it could be because they know it is a dumb idea and anybody who actually knows what they are doing can get around it, it could be because they are now OK with people playing around, it could be just an accident, but I am going to take personal credit for it because of this post: I Don’t Like Being Told What I Can and Can’t Do.

Anyway, as I said, this awesome new HTML5 video player made my job super easy – as you can see by how much less code there is this time…and here it is:

‘use strict’;
//Check if user has already loaded an instance – if so, just update the play time;
if(window._ME && window._ME.autoplayer) {
//Get desired play time extension & convert to miliseconds
window._ME.autoplayer.playTime = window.prompt(‘Autoplay already started! Updating playtime. \n How many more minutes would you like to play for?’) * 60 * 1000;
if(isNaN(window._ME.autoplayer.playTime)) {
window.alert(‘That\’s not a number jackass.’);
window._ME.autoplayer.startTime = new Date();

window._ME = {
autoplayer: {}

//Get desired play time & convert to miliseconds
window._ME.autoplayer.playTime = window.prompt(‘How many minutes would you like to play for?’) * 60 * 1000;
if(isNaN(window._ME.autoplayer.playTime)) {
window.alert(‘That\’s not a number jackass.’);
window._ME.autoplayer.startTime = new Date();
var lastUpdate = new Date();

//Checks if the video has stopped or if we are done playing once a second
window._ME.autoplayer.interval = setInterval(function() {
var currentTime = new Date();

// Check if autoplay-interrupt has fired
if(document.getElementsByClassName(‘player-autoplay-interrupter’).length > 0 && document.getElementsByClassName(‘continue-playing’).length > 0) {
//Just click the continue button!

//Check if at end of season
if (document.getElementsByClassName(‘player-postplay-autoplay-header’) && document.getElementsByTagName(‘video’).length === 0 && document.getElementsByClassName(‘player-postplay-still-hover’).length > 0) {
//Click the next video picture

//Check if we have reached the users max play time
if(window._ME.autoplayer.playTime && currentTime – window._ME.autoplayer.startTime > window._ME.autoplayer.playTime && document.getElementsByClassName(‘player-play-pause’).length > 0) {
//click the pause button

//remove all traces of this autoplayer

lastUpdate = currentTime;
}, 1000);

Basically all I had to do this time was watch for when the right elements popup on the screen, and when they do, click them. Thank you Netflix!

The Thing You Want:
Here is the Bookmarklet: Restart Timer

Turn off Autoplay:
[sourcecode language=’javascript’]
(function() {

Bookmarklet: Turn off Autoplay

If you are new to this, to use these, simply drag those links up to your bookmark bar, then start up the TV show you want to watch, and click the first bookmark.

The bookmarklet will ask you how long you want to play for, and it will pause the video and remove itself when it hits that time limit. For never-ending play, just enter “0”.
-If you hit it a second time, it will as you again how long you want to play for, and restart the timer with the new length.

If you hit the second bookmarklet I have there, it will restart the timer. Meaning that if you put in “60” (for 1 hour of play time) hitting it will restart the countdown back to 60 minutes.

If you hit the third bookmarklet, it will remove all traces of the bookmarklet from the page (basically the same as just hitting refresh on the page).

This should have no problem with multiple seasons, or any of that fancy stuff. Let me know if you find any bugs, I may do something about them I guess.

And I should have this up on GitHub shortly here:

Yeah, I just tried this in FireFox, and apparently it still uses SilverLight, not HTML5 videos, so this wont work at all in it. So, please don’t tell me about how it is broken in FireFox, I will not be doing anything about that…If you are using IE, then I REALLLY don’t care if it works or not. If you send me anything about your IE situation I may send you back an insult, or possibly a picture of a cat butt, that might be fun for you I guess? I don’t know if you will be able to view them on IE though.

Checking for global scope leak

Last night I got a wild hair and wanted to write a bit of code for fun. Basically I wanted to see what variables were added to the global scope by different libs and bits of code. Basically you can run this and it will tell you if you have accidentally left off a var or added something to the global namspace in some other way. It is rather simple, it does add a var to the global, but I remove that at the end so you don’t see funny results.

To run it, simply replace the:

with whichever files you wish to check. The code is pretty simple:

I Don’t Like Being Told What I Can and Can’t Do

I was trying to update my Netflix autoplay bookmarklet since the autoplay feature that Netflix came out with is…not great. What I found was that Netflix tried to disable the console. Well, that became a more interesting problem to solve…and quite an easy one too. The code Netflix uses to disable the console is:

(function () {
    try {
        var $_console$$ = console;
        Object.defineProperty(window, "console", {
            get: function () {
                if ($_console$$._commandLineAPI) throw "Sorry, for security reasons, the script console is deactivated on";
                return $_console$$
            set: function ($val$$) {
                $_console$$ = $val$$
    } catch ($ignore$$) {}

To undo this is actually really simple, we just need to set the getter/setter back to 'undefined' and everything is happy:

Object.defineProperty(window, "console", {
	get: undefined,
	set: undefined

And of course this is easy to make into a bookmarklet like so:

Enable Console
Sorry Netflix =)

Netflix added autoplay!

Hey I don’t need to update my bookmarklet any more. Actually, I was going to update it again, but I had an interview with them and they told me it was about to happen, so that was why I didn’t bother! Didn’t know if I should post that before it happened though. It was fun though, thanks everybody for enjoying it!

Fixed Netflix Autoplay Bookmarklet!

As promised, here is the new fixed version of my bookmarklet:

Netflix Autoplay Bookmarklet
Please note I can no longer tell when the episode is almost over, so I am now just timing the entire length of play. You will now see a countdown telling you when it will change to the next episode. This means a few things:
* If you pause the show, or it takes a long time to buffer, or is has to buffer in the middle, the timer will be off and it will switch early. There are some things you can do about this, first, you will see ‘||’ next to the timer, clicking it will pause the countdown, clicking again will unpause it, so if you walk away, be sure to click this. Also, you can click the countdown and type a new time into it, you can either give a number of seconds, or enter time in the mm:ss format.

Also, next to the pause button you will see a ‘-‘ most of you can ignore this, but if you have a lot of problems with buffering taking a really long time or something, you can also click the ‘-‘ and enter a number of seconds there. This will be added to what the bookmarklet thinks is the length of each episode to allow for buffering and such. By default 10 seconds is added to allow the episodes to load properly.

I have not done extensive testing on this, so there could very will be some bugs. If you find any, let me know.


//Takes our countdown timer and converts it to mm:ss and displays to user
function updateTime() {
var seconds = (countdownTimer % 60) + '';
if(seconds.length === 0)
seconds = '00';
else if(seconds.length === 1)
seconds = '0' + seconds;

timerNode.innerHTML = Math.floor(countdownTimer / 60) + ':' + seconds;

//Grabs the data for the episode matching the ID passed in
function getCurrentEpisodeData(episodeId) {
var episode, i = 0, j = 0;

if(episodeData && && {
for(i=0; i<; i++) { for(j=0; j<[i].episodes.length; j++) { if([i].episodes[j].id === episodeId) { episode =[i].episodes[j]; break; } } if(episode) break; } } return episode; } //Grabs the data for the episode following the one with the ID passed in function getNextEpisodeData(episodeId) { var episode, i = 0, j = 0, found = false; if(episodeData && && { for(i=0; i<; i++) { for(j=0; j<[i].episodes.length; j++) { if([i].episodes[j].id === episodeId) { found = true; } else if(found) { episode =[i].episodes[j]; break; } } if(episode) break; } } return episode; } //base64 decoder function decode64(input) { var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=', output = '', chr1, chr2, chr3 = '', enc1, enc2, enc3, enc4 = '', i = 0, base64test = /[^A-Za-z0-9\+\/\=]/g; input = input.replace(base64test, ''); do { enc1 = keyStr.indexOf(input.charAt(i++)); enc2 = keyStr.indexOf(input.charAt(i++)); enc3 = keyStr.indexOf(input.charAt(i++)); enc4 = keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ''; enc1 = enc2 = enc3 = enc4 = ''; } while (i<input.length); return unescape(output); } if(window.NetflixAutoplayLoaded) { alert('Autoplay already loaded.'); //return false; } else { window.NetflixAutoplayLoaded = true; } //resize the player so we can see the text we are about to insert under it document.getElementById('SLPlayer').style.height = (window.innerHeight - 35) + 'px'; document.getElementById('SLPlayerWrapper').style.height = (window.innerHeight - 35) + 'px'; document.getElementById('page-content').style.height = (window.innerHeight - 35) + 'px'; //create the text and other shizzy we want var autoplayElement = document.body.appendChild(document.createElement('div')); = 'NetflixAutoplayContainer'; autoplayElement.innerHTML = '

Time left until switch: 00:00 || -
'; var timerNode = document.getElementById('NetflixAutoplayTimer'); var autoplayText = document.getElementById('NetflixAutoplay'); var pauseButton = document.getElementById('NetflixAutoPauser'); var delay = document.getElementById('NetflixAutoDelay'); //the number of seconds to wait for the show to buffer on load var timerDelay = 10; //Pull the current episode information and the full series data for us var episodeData = JSON.parse(decode64(netflix.Silverlight.MoviePlayer.getPlugin().settings.metadata)); var currentEppId = (/,EpisodeMovieId=\d*/.exec(netflix.Silverlight.MoviePlayer.getPlugin().settings.initParams)[0]).split('=')[1]; //gets data for current & next epps var currentEpp = getCurrentEpisodeData(currentEppId); var nextEpp = getNextEpisodeData(; var paused = false; //bool to see if paused var done = false; //bool to see if finished autoplay var editingTime = false; //bool to check if user is editing time //Javascript to execute to change episode var ini = document.getElementsByTagName('script'); ini = ini[ini.length-1].innerHTML; //Set the countdown till next episode + the pause we need for buffer function updateCountdown() { countdownTimer = parseInt(currentEpp.runtime, 10) + timerDelay; } var countdownTimer = 0; //episode length timer updateCountdown(); //Sets the count down timer for current episode //Prompt user for number of episodes var numToWatch = 3; function getNumberOfEpisodesToWatch() { var newNum; do { newNum = prompt('How many episodes would you like to play?', numToWatch); } while (isNaN(newNum)); numToWatch = parseInt(newNum, 10); //set the text if(numToWatch > 0) { autoplayText.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch; if(done) { //if we have already finished, restart done = false; switchEpps(); } } else { autoplayText.innerHTML = 'Netflix autoplay off'; } } //ask the user for the number of episodes they want getNumberOfEpisodesToWatch(); //handler for pause button function pause() { if(pauseButton.innerHTML === '||') { paused = true; pauseButton.innerHTML = '>'; } else { paused = false; pauseButton.innerHTML = '||'; } } //handles editing the buffer delay function delayEdit(e) { if((!e.keyCode || e.keyCode === 13) && !isNaN(delay.innerHTML)) { timerDelay = parseInt(delay.innerHTML, 10); if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); return false; } } //handler for editing time left to play function editTime(e) { timerNode.contentEditable=true; editingTime = true; if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); return false; } //handles updating time left to play after user edit function endEdit(e) { if(timerNode.contentEditable.toString() === 'true' && (e.type === 'blur' || e.keyCode === 13)) { timerNode.contentEditable = false; editingTime = false; var time = timerNode.innerHTML; if(time.indexOf(':') >0) { //converts minutes:seconds into time time = time.split(':'); countdownTimer = parseInt(time[0], 10)*60 + parseInt(time[1], 10); } else { //converts just seconds into time if(!isNaN(time)) { countdownTimer = parseInt(time, 10); } } if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); return false; } } //Does everything to change to the next episode function switchEpps() { //setup the script for the next epp ini = ini.replace(/,EpisodeMovieId=\d*/,',EpisodeMovieId=' +; //switch out data to the new epps currentEpp = nextEpp; nextEpp = getNextEpisodeData(; //Switch to next epp & update text if(currentEpp) { autoplayText.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch; updateCountdown(); eval(ini); nextEppTimer(); } else { autoplayText.innerHTML = 'There does not seem to be a next episode.'; } } //Main loop, updates our timer and stuff, switches to next epp when necessary, yadayda function nextEppTimer() { setTimeout(function() { if(isNaN(countdownTimer) || isNaN(numToWatch)) { autoplayText.innerHTML = 'NUMBERS DO NOT WORK THAT WAY! GOOD NIGHT!'; nextEppTimer(); return; } if(countdownTimer <= 0) { if(numToWatch-- > 0) { switchEpps(); } else { done = true; autoplayText.innerHTML = 'Netflix autoplay completed.'; numToWatch = 0; } } else { if(!editingTime && !paused) { countdownTimer--; updateTime(); } nextEppTimer(); } }, 1000); } //attach the events we need autoplayText.addEventListener('click', getNumberOfEpisodesToWatch, false); pauseButton.addEventListener('click', pause, false); timerNode.addEventListener('click', editTime, false); timerNode.addEventListener('blur', endEdit, false); timerNode.addEventListener('keypress', endEdit, false); delay.addEventListener('blur', delayEdit, false); delay.addEventListener('keyup', delayEdit, false); //START EVERYTHING! nextEppTimer(); })();

I Know My Netflix Bookmarklet Broken!

Yes folks, I know. I am sorry, the new player they released last week broke it. I too was sad to discover this, I mean I didn’t really make it for you all, I made it because I wanted it! I really didn’t know if anybody was actually using it, but seeings as my site has maintained traffic at pretty much double by highest day ever EVERY DAY since Netflix broke it, I guess other people like it too. Netflix changed a lot of things, some of it easy to fix, some not as much. Shit happens; que sera sera.

YES, I HAVE A FIX! It is not done yet. I think it will be better in some ways, worse in others. I promise you all (baring catastrophe) it will be out this week.

Thanks to everybody leaving comments and sending me emails telling me that you love it, were upset that it broke, and really want me to fix it! It is amazing to have people actually getting enough enjoyment out of something I made to do those things!

TL;DR: Fix will be out this week.

I Githubed myself!

(Githubbed?) Well, I finally took the time to throw my bookmarklet up on Github, I have some more projects I may add soon, but for now, if you want to fork my bookmarklet, I have it here:

Also, getting on Github with windows was not as easy as they made it sound, I had to generate keys using puttygen, doing it through GIT bash did not work at all like Ghithub’s documentation lead me to believe.

Netflix Autoplay Bookmarklet – With Multiple Season Support!

Not content to leave well enough alone, I was hacking on my bookmarklet some more. It can now handle crossing between seasons. There is also a bit less guessing going on now, so I am more confident in it.

For the record, I want to say, I hope Netflix does not get upset about this, if they want me to remove it I will.

To use this:
1. Drag the link below on to your bookmarks bar.
2. Start watching a TV show on Netflix.
3. Click the bookmark and enter then number of episodes you want to watch.

Note: I have now tested this in IE. It does NOT work. But you wouldn’t use IE anyway, would you?

Netflix Autoplay Bookmarklet – With Multiple Season Support![/raw]

javascript:(function(netflix, undefined) {
var seasonId = 0,
episodeId = 0,
numWatched = 0,
numToWatch = 3,
epIdRegex = /,EpisodeMovieId=\d*,/,
idregx = /\d+/,
done = false,

if(!netflix || !netflix.Silverlight || !netflix.Silverlight.MoviePlayer || !netflix.Silverlight.MoviePlayer.getPlugin() || !netflix.Silverlight.MoviePlayer.getPlugin().settings.initParams) {
alert('You do not appear to have a show playing, please start a show first');

//grab the things we need
sl = netflix.Silverlight.MoviePlayer.getPlugin().getScriptInterface();
init = netflix.Silverlight.MoviePlayer.getPlugin().settings.initParams;
currrentEpisodeId = parseInt(idregx.exec(epIdRegex.exec(init)), 10);
currentMovieId = parseInt(netflix.Silverlight.MoviePlayer.getPlugin().settings.movieId, 10);

//Check if the user has already loded teh bookmarklet
var autoplayElement = document.getElementById('NetflixAutoplay');
if(autoplayElement) {
alert('You have already loaded the autoplay bookmarklet, click the text at the botton to change number of episodes.');

//grab the metadata and decode it
try {
showData = JSON.parse(decode64(netflix.Silverlight.MoviePlayer.getPlugin().settings.metadata));
} catch(e) {
alert('Error processing data =(');

if(showData.Movie) {
alert('This appears to be a movie not a TV show. This bookmarklet only works on TV show.');

//set our pointest to match the episode we are currently on
seasons = showData.Show.Seasons;
for(seasonId = 0; seasonId < seasons.length; seasonId++) { for(episodeId = 0; episodeId < seasons[seasonId].Episodes.length; episodeId++) { if(seasons[seasonId].Episodes[episodeId].MovieId === currentMovieId || seasons[seasonId].Episodes[episodeId].MovieId === currrentEpisodeId) { done = true; break; } } if(done) { break; } } //check if we were able to find the episode the user is on if(seasonId === seasons.length) { alert('Error: Already of final episode, or episode data could not be found.'); return; } //Prompt user for number of episodes function getNumberOfEpisodesToWatch() { var newNum; do { newNum = prompt('How many episodes would you like to play?', (numToWatch - numWatched)); } while (isNaN(newNum)); numWatched = 0; numToWatch = parseInt(newNum, 10); //set the text if(numToWatch > 0) {
autoplayElement.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch;
} else {
autoplayElement.innerHTML = 'Netflix autoplay off';

//create the text that shows how many episodes left & insert it
node = document.createElement('span');
autoplayElement = document.body.appendChild(node); = 'NetflixAutoplay';
autoplayElement.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch;

//attach a click handler so people can change number of episodes
autoplayElement.addEventListener('click', getNumberOfEpisodesToWatch, false);

//prompt the user for number of episodes for the first time

//handle when the episode ends
sl.OnMovieWatched = function() {
if(numWatched < numToWatch && !waitTimer) { //Check if done autoplaying waitTimer = setTimeout(function() { //Set our timer so we do not end early var epp, numLeft; //move episode/season counters properly if(seasons[seasonId].Episodes[episodeId+1]) { episodeId++; } else { episodeId = 0; seasonId++; } //if there is a next episode, grab it if(seasons[seasonId] && seasons[seasonId].Episodes[episodeId]) { epp = seasons[seasonId].Episodes[episodeId]; } //if there is a next episode, play it and update the text if (epp) { sl.PlayMovie({movieId: epp.MovieId, episodeMovieId: 0, trackId: 0}); numWatched++; numLeft = numToWatch - numWatched; if(numLeft > 0) {
autoplayElement.innerHTML = 'Netflix autoplay on, Episodes left: ' + numLeft;
} else {
autoplayElement.innerHTML = 'Netflix autoplay completed.';

waitTimer = null;
}, 2*60*1000);

//This is just a bse64 decoder
function decode64(input) {
var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
output = '',
chr1, chr2, chr3 = '',
enc1, enc2, enc3, enc4 = '',
i = 0,
base64test = /[^A-Za-z0-9\+\/\=]/g;

input = input.replace(base64test, '');

do {
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));

chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ''; enc1 = enc2 = enc3 = enc4 = ''; } while (i<input.length); return unescape(output); } })(; 

In addition to handling moving between seasons, it now also adds a little text below the movie to tell you that it is on. You can click this text to change the number of episodes it will play. Entering 0 for the number of episodes will turn this off.

Netflix Autoplay Bookmarklet!

I have updated this plugin, please use the new BETTER version – Click Here

Netflix is awesome, most of the time the fact that I have to click the “Play next episode” button does not bother me, usually I am at my computer anyway. But, if you are like me, you enjoy throwing on a show (say Futurama) and having a few episodes play while you go to sleep. The ~22 minutes an episode is just not enough, I like to have about 3 play. Netflix does not have a way for me to do this. I thought to myself “How hard could this be?” and spent the rest of the night throwing this baby together:

Netflix Autoplay Bookmarklet
If you don’t know how bookmarklets work, simply drag the above link onto you link bar.

To use it, just start an episode of the show you want to watch, click the bookmark, enter the number of episodes you want it to play, then just let it run. It should keep playing episodes, until either the season ends, or it reaches the number you entered.

	var eppsWatched = 1,
		movieIDrgx = /movieid=\d*[&|#]/,
		trackIDrgx = /trkid=\d*[&|#]/,
		episoIDrgx = /episodeMovieId=\d*[&|#]/,
		idregx = /\d+/,
		epps, movieId, trkId, eppId, sl, tmp;

	//grab netflix JS interface for player
	try {
		sl = netflix.Silverlight.MoviePlayer.getPlugin().getScriptInterface() || false;
	} catch (e) {
		sl = false;

	if(!sl) {
		alert('Please start the first episode you wish to watch.');
	} else {
		epps = prompt('How many episodes would you like to play?', '3'),
		//number of episodes the user wants to watch
		epps = parseInt(epps, 10);

		//extract the IDs from the url
		movieId = parseInt((idregx.exec(movieIDrgx.exec(window.location)) || [0])[0], 10);
		eppId 	= parseInt((idregx.exec(episoIDrgx.exec(window.location)) || [0])[0], 10);
		trkId 	= parseInt((idregx.exec(trackIDrgx.exec(window.location)) || [0])[0], 10);

		//add even to movie finished
		sl.OnMovieWatched = function() {
			var waiting = null; //make our timeer

			//check if we have finished watching
			if(eppsWatched < epps) {
				//move to the next episode
				if(trkId !== 0) {
				if(eppId !== 0) {
				if(movieId !== 0) {

				if(!waiting) { //this event triggers about 2 minutes before the end of a show - and multiple times, my guess it is how they move their index to know they should start with the next epp next time
					waiting = setTimeout(function() {
						//tell netflix to play the next epp
						sl.PlayMovie({movieId: movieId, episodeMovieId: eppId, trackId: trkId});

						//increment our episode counter

						waiting = null;

Some caveats:

  • This (obviously) only works with shows, not movies, because there needs to be a "next episode".
  • This only works within a single season, so if you start with the last episode of a season, you will only ever see that single episode.
  • The movie ID seems to be the only one that matters, I haven't even seen the episodeMovieId used anywhere, I am incrementing all the IDs, it has worked for the 3 shows I have tried.
  • Netflix executes their "OnMovieWatched" event before the end of the movie, and I am not exactly sure how far before, so I just kind of guessed a bit.
  • This works for me in Chrome and Firefox, if you are using some other shitty browser, or an old version and it does not work for you, I don't care. Use a better browser.

    There is a good chance this does not work with all shows. In fact I would be shock if it worked on all shows. If you find a show it does not work on, feel free to let me know and I might take a look! If you want to fix it yourself and send me the update, even better!

    So, Netflix could easily stop this from working, but I hope they don't. Fortunately, probably only about 3 people read my blog, so I think this should be pretty safe!

    How did I figure this out? Well, I don't want to type that up right now, so it will have to wait for another post.

    Cascading form require/validation

    I ran into an interesting problem recently dealing with some complicated form validation. The issue was that we had several forms with fields that were required or optional based on if other inputs were filled out, with the requirements falling in a specific order. I came up with an interesting solution that looks at a data-ignore-validation attribute on the current form element and, if it exists will check the form element(s) with that name to see if they are filled out, or if they have a similar data-ignore-validation attribute meaning they can possibly be ignored as well. We have a nice little recursive solution that will check all of the form elements in a chain to see if the current one can be ignored.

    All we need to do is send the following function the form element to be checked as well as our form, and it will tell us if the element passed in should be ignored.

    [sourcecode language=’javascript’]
    function ignoreField(elem, form) {
    //if we have an data-ignore-validation property, we can ignore _this_ .val() if the field with the name = ignore-validation has a .val() set
    var ignoreOn = $(elem).data(‘ignoreValidation’);
    if(ignoreOn) {
    ignoreOn = ignoreOn.split(‘,’);
    //We use this var to hold the complete list of for elements we need to check
    var $ignoreFields = $();

    //get all of the fields this one can be ignored on
    for(var i = 0; i < ignoreOn.length; i++) { $ignoreFields = $ignoreFields.add(form.find('input[name="'+ignoreOn[i]+'"], select[name="'+ignoreOn[i]+'"]')); } //(recursively) check if any of the fields in the ignoreValidation have a value set for(var i = 0; i < $ignoreFields.length; i++) { if($ignoreFields.val()) { return true; } return ignoreField($ignoreFields.eq(i), form); } } return false; } [/sourcecode] Of course we do have an issue here where an inexperienced developer could put in a circular reference and we would end up with and infinite loop, but I leave it to you to either fix that issue, or just be smart enough not to do that.

    Duplicate IDs are baaaaaaaaaaaaaaad

    If you are not already very aware, duplicate IDs in your markup are a very bad thing. Now, technically they will work fine in CSS, and can possibly even make it faster, BUT they WILL break your javascript. Basically when you have multiple elements with the same ID what the browser will do is unpredictable.

    Sometimes in some browsers you might get what you want, other times in other browsers the wrong thing will happen, sometimes nothing will happen. You never know. On many different occasions I have been helping someone with some javascript, or fixing a website for a job and things just won’t work, and eventually I find the problem to be duplicate IDs. Dealing with this problem again today, I wrote a little jQuery plugin that checks your page for duplicate IDs. It is pretty simple, and you should never actually have this on a production site, it is just something you run while you are developing so you can yell at the jackass who wrote crappy markup to make sure you aren’t doing things you shouldn’t. The full code for the plugin is this:

    (function($) {
    $.dupCheck = function() {
    var ids = [], dups = [], dupCount = 0;
    //this just displays the result if there is no console
    if (!window.console) {
    var console = {
    log: function(msg) {
    } else {
    console = window.console;
    $('*').each(function() {
    var id =, i = 0, len = ids.length, isDup = false;
    if(id) {
    for(i=0 ; i < len ; i++) { //loop over the IDs we have already processed to see if the current one is a dup if(!isDup && id === ids[i]) { //if the ID is a dup, add it to the dups list and set our bool if(checkIfAlreadyDup(id) === false) { dups.push(id); } isDup = true; dupCount++; break; } } if(!isDup) { //if the ID was not a dup, add it to the list of processed IDs ids.push(id); } else { //if the ID was not a dup, clear out our bool isDup = false; } } }); if(dups.length === 0) { console.log('No duplicate IDs found =)'); } else { console.log('' + dups.length + ' duplicate IDs found repeated ' + dupCount + ' times =('); } function checkIfAlreadyDup(id) { var len = dups.length, i = 0; for(i = 0; i < len; i++) { if(dups[i] === id) { return true; } } return false; } return dups; } })(jQuery); 

    The way to use this is to load the plugin (or even just paste the code into your javascript console) then run the function:

     var dups = $.dupCheck(); 

    You obviously need to do this after the document is ready, and after any offending javascript/ajax calls have completed. It will output a message telling you how may duplicate IDs you have, and it returns an array of the IDs that are duplicates. It is pretty simple, but if you are banging you head against the wall trying to figure out why your javascript is not working, just run it, and it might give you the answer. Download: Dupcheck.js

    And I have now run this on this page, apparently I have a duplicate ID! Maybe I need to just get rid of that facebook ‘like’ button.

    Updates to my pub/sub

    I have updated my pub/sub plugin.  The two changes are:

    It now uses the full words, publish, subscribe, and unsubscribe – this change was because with 1.5, jQuery now has a sub method which I do not want to overwrite.

    Also, you can now publish and subscribe multiple tags at once using a space separated list like so:

    $.publish('first/tag second/tag');
    $.subscribe('first/tag second/tag', function(){/*do something*/});

    This just make it more like the rest of jQuery events and such.

    The new version can be downloaded here:

    Live DOM sub/pub

    Got to hang out at Google for dayofjs

    I got to go to the dayofjs conference (thanks MJG!) Not only was the conference really interesting, but I also got to hang out at Google which was cool. So, I snapped a few pics, as one does.

    This is where I found out that I parked about as far as I could have from where I wanted to be.

    Google lunch.

    Can’t really complain about the day

    Ahh, the free beverage fridge

    This doesn’t have anything to do with Google or Dayofjs, but I got In-and-Out on my way home after being stuck in traffic for 2 hours, because it has been a long time since I have had it.

    The mobile talks of the day were about:

    Sencha Touch:

    Appcelerator’s Titanium:

    jQuery Mobile:

    There was also a fair amount of talk about PhoneGap:

    Yehuda Katz also gave a talk about Sproutcore that was really good.  It was not really a mobile talk, but it was still very informative and interesting.

    Unit testing jQuery w/ QUnit

    So, like most developers I love having unit test, but I hate writing them. Really figuring out the best way to write them and have them work well, is a pain in the ass, and that is what I hate. I have spent some time recently playing with QUnit and despite the number fact that I have found a number of posts online about it, none of them have provided (in my mind) a good way to test a site. The ideas used work well for testing a library, or specific functions, but I don’t write libraries or one off functions, I develop websites. So, I have come up with a method that I like that allows me to test my sites in a way that I like.

    The Problems:

    The unit testing information I have found mainly deals with testing libraries – this is no good for me.
    Testing involves putting QUnit on your page, along with its specific markup – although you can have a “debug” mode for this, it just seems like a bad idea, for a number of reasons, including it not really being an accurate representation of your page, and it does not work across page requests.
    Using headless testing – it is cool, but not cross browser or even really O/S ready.
    Using something like Selenium – also cool, but involves building tests using a new tool that uses java.

    My solution:

    I have come up with my own solution, which, I admit is not perfect, but it does a darn good job of testing what I need tested. Basically it involves having a very simply html page next to your site, that loads your site in an iframe and runs the tests on it. It is cross-browser and cross-O/S safe, it works for pretty much any site, and uses the same javascript/jQuery I already write every day.

    There are a couple of problems still with my solution, but they are pretty easy to overcome, and writing tests becomes very simple. The basic page we need to get started with the testing is this:


    QUnit Tests

      test markup, will be hidden

      Note: We can (and probably should) actually move our tests into different .js files making it much easier to deal with as our number of tests grow.

      We are doing a couple of interesting things here, first we are testing multiple pages at one time. Every time a new page loads up, we grab the jQuery refrence from inside of it, then run the tests that are specified for that page.

      Another cool thing is how we get the jQuery reference for each page.

      We start by loading jQuery using noConflict(true)

      This is because we need to grab the jQuery instance from inside the actual website. When jQuery attaches events to DOM elements, it actually saves those events inside of itself, so although we can trigger events inside of the page itself using our external jQuery, triggering events inside of the iframe will not actually fire any events that were created inside the page. So, instead we grab the jQuery that is actually on the page and trigger the events using it. This has the added bonus that because it is the reference from inside the page we are loading, we can reference DOM nodes as though we were working that that page directly.

      Here we grab the jQuery reference from inside the iframe with:

      $ = window.frames[0].jQuery;

      Note: For ANY of this to work we must adhere to SOP, this is why we load this up on a server, side by side with our site. This is why I am loading up the iframe using location.protocol + ‘//’ + location.hostname rather than typing out the URL. This will allow it to work as we move between servers and such.

      One of the cool things we are doing here is tying the starting of the tests to a button, so we can get the page to any state necessary before starting the tests – such as logging in, waiting for ajax requests to finish, or navigating to somewhere specific (not that we couldn’t do these in the tests, it just gives us options.)
      Also, before we run our tests we are running the 2 following commands:

      $.ajax({async: false});
      $ = true;

      This will make our ajax requests and animations synchronous. Although you would never do this (especially the ajax one) on a site, for our tests it is necessary to ensure that the page is ready before we perform each test.

      Now that we have done this we can run our test just like we were on the page directly.

      We can select elements and trigger events on them, like so:

      $(elem).click(); or $(elem).trigger(‘click’);
      $(elem).mousedown(); or $(elem).trigger(‘mousedown);
      Test things, such as visibility:

      Basically anything you would normally do. Simple and easy.

      This is not a perfect way to test your events, it is however pretty good, and will let us know when we break things.

      Here are some examples of tests in action. I hope this helps you get started with unit testing.

      Tests in action!

      Playing with CSS hooks

      So, I wanted to give the new CSS hooks in jQuery a try. Unfortunately, the usually well documented jQuery has this as the total documentation on the hooks:

      As of version 1.4.3, jQuery’s CSS module was rewritten to provide a set of “hooks” for the .css() method. This advanced feature, $.cssHooks, allows for fine-grained control over the way jQuery handles certain style properties and enables the creation of custom, browser-normalized properties. The $.cssHooks object also extends the set of properties available to the .animate() method.

      Which isn’t much to go on. So, I broke out the old source code to see whats up. Basically, you can hook into a CSS property and create setters and getters for it. I started by making a simple hook that allows you to use show and hide on the display property, and have it call show() and hide(). The code is pretty simple:

      jQuery.cssHooks.display = {
      set: function(elem, value) {
      if (typeof (value) === 'string') {
      if (value === 'hide') {
      } else if (value === 'show') {
      } else {['display'] = value;
      } else {
      if (value.hide) {
      } else if ( {
      } else {['display'] = value;

      This simply checks if you are passing in a string or an object, and then calls show/hide with the supplied value (in the case of an object.) If you are not using show/hide it runs[‘display’] = value; which is what normally happens when you call .css.

      I made an example for it here:

      I’m a thing!

      The code here is pretty simple too:

      $('#hookButton').click(function(e) {
      var $this = $(this);
      if($this.text() === 'Hide') {
      $('#cssHookTest').css('display', 'hide');
      } else {
      $('#cssHookTest').css('display', 'show');
      $('#hookButton2').click(function(e) {
      var $this = $(this);
      if($this.text() === 'Hide Slow') {
      $('#cssHookTest').css('display', {'hide': 'slow'});
      $this.text('Show Slow');
      } else {
      $('#cssHookTest').css('display', {'show': 'slow'});
      $this.text('Hide Slow');
      $('#hookButton3').click(function(e) {
      var $this = $(this);
      if($this.text() === 'Hide REALLY Slow') {
      $('#cssHookTest').css('display', {'hide': 1400});
      $this.text('Show REALLY Slow');
      } else {
      $('#cssHookTest').css('display', {'show': 1400});
      $this.text('Hide REALLY Slow');
      $('#hookButton4').click(function(e) {
      var $this = $(this);
      if($this.text() === 'Hide Normal') {
      $('#cssHookTest').css('display', 'none');
      $this.text('Show Slow');
      } else {
      $('#cssHookTest').css('display', 'block');
      $this.text('Hide Normal');

      So, that’s about it, the CSS hooks, although called an advanced feature are really not that hard to use. So, give ’em a try.

      jQuery Live DOM sub/pub plugin

      Updated 2/10/10 – for the updates to the plugin (See: here)

      I made a new jQuery plugin the other day, it is pretty simple, it expands on the idea subscribe/publish idea. Basically it allows you to bind subscriptions to DOM nodes.

      You use it like this:

      //subscribe a node
      function(subName, [arg1], [arg2],...)
      {/*do something*/}
      'subscription/name', [arg1], [arg2],...

      The idea is that you are probably using sub/pub to keep your DOM interaction separate from your non DOM related javascript. So, when you publish, there is a good chance that the subscriber will take the published information and do something to the DOM based on it. Inside of you sub callback, this is the DOM node following jQuerys normal pattern for this.

      You can still setup normal subscriptions like so:

      function(subName, [arg1], [arg2],...)
      {/*do something*/}

      One thing to note is that nothing is actually bound to the nodes. In reality the selector that you give is simply saved, and used again when you publish, so this works like .live in that it will even work on nodes added to the DOM after you subscribe. Also like .live though, you must provide the full selector as a string, and you can’t use any of the traversal methods to select your nodes.


      You must enter something here
      Watch me.

      The code for this is :

      return false;
      $('#response').subscribe('formValidateDone', function(subName, result) {
      if(result) {
      $(this).html('The form is valid!');
      } else {
      $(this).html('Please try again!');
      function validateForm() {
      $.publish('formValidateDone', $('#textInput').val() !== '');

      Plugin Link: Plugin page

      Download: Download