Category Archives: Random Thoughts

Was Mark Zuckerberg an AOL add-on developer?

mark_adjusted_350

Facebook founder Mark Zuckerberg’s first website was recently found to still be online at Angelfire, an early free web hosting site. The Internet Archive confirms the site existed in its current form back in 1999, and the page’s source code is noted to be authored by “Mark Zuckerberg”. In addition, the author states they’re 15 (the age Mark was in 1999), and that they live outside of New York City (where Mark lived when he was 15). Motherboard provides further evidence, showing that the primary AOL account for the email listed on the site is a name commonly used by Mark Zuckerberg’s father.

The site screams 1999 web design, and is a very cool piece of internet archaeology. It should also be noted that it’s actually a pretty decent effort for the time for a 15 year old (you only have to see the About section of this blog to see my effort at 16). However, the most interesting aspect of the site is “The Vader Fader”, an AOL add-on application that Zuck was heavily promoting on the site. Did this mean he was apart of the AOL add-on community? Did he use AOL progs? Did he develop in Visual Basic?

vader

I downloaded The Vader Fader, and it is for AOL, and it was indeed written in Visual Basic. I tried firing it up, but got a message box saying I needed to be “online” and then the window on the left popped up. Ugh, I just want to see what this app looks like, I have to have AOL open? So I hunted down a version of AOL 4.0, installed it, and then tried running the app again. This time I got a runtime 6 error – this was most likely caused by Zuck using Integers to store window handles instead of Longs. After Windows 98, window handles started being Longs instead of Integers.

Being persistent, I decided to download Windows Virtual PC and load up Windows 98. After burning AOL 4.0, The Vader Fader, my API Spy, and a hand full of VB dependences to CDs and then loading them up on the OS, I fired up The Vader Fader. This time it didn’t crash, but it still told me I needed to be online. Crap… how was I supposed to do that? I tried signing on, to see if by some fluke AOL was still active and letting random people sign in, but it didn’t work. It then occurred to me – how did progs back in the day determine if someone was signed on? I couldn’t believe I remembered this, but the way it worked was the app would find the main AOL window, and then look for a child window that had a caption that started with “Welcome, “.

I used my API Spy to change the caption of the existing AOL sub-windows to “Welcome, PAT or JK”, and then tried launching The Vader Fader again. This time it worked! Well, sort of. Instead of a message popping up, the caption of the main AOL window changed to “The Vader Fader”, and then nothing happened. I poked around, and the app was running in the background, but there was no main window and it didn’t appear to have done anything else. My best guess is the app worked by augmenting AOL chat rooms and IMs with fading options (why else would it change the main AOL window’s caption?). If that’s the case, there really wouldn’t be much to see, or really any way to see it – given that AOL 4.0 chatrooms and IMs are long defunct.

I was a little sad, but glad I’d at least gotten the app up and running. I also ended up digging through the app’s machine code a little for any other clues on how it was created, but didn’t really find anything interesting (other than the 10 color choices). Since the app used the same online detection mechanism as most other apps at the time, I wonder if Zuck used a common bas file like dos32.bas or genocide.bas – that’d be pretty cool if he did. It’s also kind of neat that the main app he was pushing was a fader, since that was the first app I released on this site. Anyway, I’ve spent way too much time on this. The site is a cool piece of internet archaeology and definitely worth poking around a bit if you have a few extra moments.

Facebook Bug Hunting

Image By laikolosse

Facebook has a neat security bug bounty program where developers, hackers, security researchers, and random Joe’s can submit security flaws to Facebook in exchange for a monetary reward and a place on their White Hat thank you list. Their minimum payout for finding a bug is $500, and that number increases based on the severity of the issue you report. Recently I’d read about amounts as high as $3,000 and $3,500 being paid out, and while this isn’t a ton, it’s definitely a nice amount of pocket change.

Since I was on break with my newborn last month, I decided to take a stab at uncovering an issue myself. Finding bugs is more about being clever than it is about being smart, and I figured the surface area for security issues on Facebook had to be pretty big.

I started out my journey by setting up a couple of test accounts in the Facebook sandbox. At first I tried a number of broad attacks – generic CSRF attacks, generic XSS attacks, faking email headers when sending email to an @facebook.com address, and lots of other really obvious things. Nothing seemed to work, and Facebook seemed to be a more hardened application than I had originally thought.

Original Image By javier.reyesgomez

At this point most people would get bored and move on, but I’m a little more stubborn than most people. I regrouped and realized my current path was fruitless. What I really needed was focus. I needed to look at one feature and see if I could find a hole in it. After surveying the different privacy settings, I decided to see if I could get around the setting that allowed someone to hide their friends list from their friends.

I poked and prodded and looked at everything related to the listing of a user’s friends. Finally I noticed something odd about Facebook’s one of the ajax calls that was being made under the covers. I was able to get it to return an error if a certain user parameter wasn’t a friend or a friend of a friend. Hrm, this was interesting. This meant I could do a check to see if a user was my friend or a friend of one of my friends. I wondered if this check factored in friends that were hidden from me. I rearranged the friend relationships in my test accounts and tried it out. Sure enough, the check didn’t respect hidden friends. This meant I could check if certain people were on the friends list of friends who were hiding their friends from me. If I only had one friend hiding their friends list from me, I could definitively check if certain people were on their friends list.

I ran some more tests, and with the consent of my friend Joel, confirmed the issue on the production version of Facebook. I then wrote up a test case (an attacker friends a victim, the victim accepts the friendship but hides everything from them) and submitted the how-to steps to Facebook’s Security Team.

And then I waited. Two and a half weeks came and went. I began to think my submission had been ignored when a message popped into my inbox from Facebook’s Security Team. They apologized for the delay, were very polite, and told me they thought the trick was pretty interesting. However, they wanted to double check with their Privacy Team to confirm how certain behavior was supposed to work and then they’d get back to me. They also mentioned they were going through a large backlog of issues. This made me curious as to how many submissions they get a day. Interestingly, around the time of this email I saw another individual go public with a bug they’d found due to not hearing back about a report quickly enough.

I was hopeful after the first email. The trick allowed someone to obtain information about their friends that was supposed to be hidden. It wasn’t the greatest find, but it was a neat little trick. However, the following week they emailed me saying that while they thought it was a cool trick, they felt it was an acceptable risk and that planned updates they were rolling out would eliminate it anyway.

The wind came out of my sails, and I felt like the achievement had slipped through my fingers. I still applaud them for setting up such a system, and being able to work in a sandboxed version of Facebook to try out different techniques is really cool. However, I’m left with mix feelings. Though then again, if you’re bored and just want to try and hack Facebook, it’s a fun way to spend a few hours.

Update 2013/27/02: I got confirmation a few days ago of a 1k reward on another bug I submitted. I may do another post on it, or may just make a short update here.

Don’t want to use JavaScript? What about Tcl? Or LOLCODE?

Wouldn’t it be neat if web browsers had more client-side languages available? Wouldn’t it be kind of cool if you could code up your app in Tcl and place it in a script tag? Well, it turns out you actually can (sort of)! The below Tcl code is mostly non-sense, but it does do some DOM manipulation, and you can see it in action here.

<script type="text/tcl">

proc appendTextNodeToElement {divId text} {
    set div [document getElementById $divId]
    set textNode [document createTextNode $text]
    $div appendChild $textNode
}

proc listNames {name1 name2} {
    if {== $name1 $name2} {
        set nameStr $name1
    } else {
        set nameStr "$name1 and $name2"
    }
    puts "hi $nameStr"
    return $nameStr
}

appendTextNodeToElement "testDiv1" "This is a test!"
set names [listNames "Bob" "Alice"]
appendTextNodeToElement "testDiv2" $names
appendTextNodeToElement "testDiv3" "2 + 2 = [+ 2 2]"

</script>

It turns out that when a web browser is parsing a script tag, if it doesn’t recognize the “type” attribute, it will ignore the code within the tag. This allows newer browsers to support additional languages without breaking older browsers. However, the older browsers still leave the contents between its opening and closing tags there, so if you have some JavaScript code that will parse and interpreted it, you can execute it.

The idea fascinated me and I wanted to see if I could whip up a proof of concept. I found a neat open source Tcl interpreter written in C called Picol, which was only 550 lines and covered only a sub-set of the language. I figured this was perfect for my needs and decided to see if I could port it to JavaScript. The port was really straight forward and I was pretty amazed when I actually saw it working. I went ahead and added in a few DOM manipulation functions, but decided not to get too carried away. The code for this is available here. I only went far enough to get a proof of concept though, so it’s not very feature rich. I also don’t really have any plans to go further with this, I just sort of got excited at the idea and wanted to see what would happen.

I also decided to search around and see anyone else had ported other languages for use on the client side. I ended up finding some code written by a Dutch programmer which allows for LOLCODE in the browser (zip mirrored here). However, rather than interpreting the code, his method converts the LOLCODE to JavaScript, and then appends this new JavaScript into the web page via a script tag. Still neat though.

Also, I’m aware interpreting code with an interpreted language isn’t the best idea performance wise, and that there is currently a growing number of languages that compile into JavaScript. So client-side developers aren’t technically limited to just JavaScript, but I do still find the idea of JavaScript-based interpreters kind of neat.

Lastly, there are a couple of JavaScript Tcl interpreters out there already. I played around with a few, but ultimately found them a little too confusing, and I wasn’t sure they were made for what I wanted to do (basically act as a JavaScript substitute), so I passed them over when doing this experiment. However, I’ll link to them below for those of you who are curious.

Pronouncing SQL: S-Q-L or Sequel?

I know, I know, tomato-tomahto, but I’ve had people tell me I say it wrong when said each way, which has left me rather confused, so I decided to do some research and figure out how SQL is actually pronounced. SQL is the language used for querying and managing data in a relational database system. Some people say S-Q-L and some people say “sequel”. This difference in pronunciation also effects the writing of documentation. The indefinite article that’s used before the term (a or an) is based on how it’s pronounced (try saying “a SQL” and “an SQL”). No one wants to sound ignorant, so which way is correct? It turns out they’re both correct/acceptable, but that the S-Q-L way of saying it is more “official”.

SQL was initially developed at IBM by Donald Chamberlin and Raymond Boyce. It was initially called “Structured English Query Language” (SEQUEL) and pronounced “sequel”, though it later had to have it’s name shortened to “Structured Query Language” (SQL) due to trademark issues. It was created to supplant the then popular QUEL database language, and the name “sequel” was meant as a pun (it was the sequel to QUEL) [1]. However, this leads to the big question – was language still called “sequel” after the name change?

If you look at Oracle’s official documentation on SQL, it says it’s still pronounced “sequel” [2]. However, if you look at MySQL’s official documentation, it says “MySQL” is officially pronounced “‘My Ess Que Ell’ (not ‘my sequel’)” [3], and Wikipedia says SQL is officially pronounced “S-Q-L” and references an O’Reilly book on the subject [4]. So this is no help, the major sources aren’t agreeing on the way it’s “officially” pronounced.

Then a thought occurred to me: SQL was created in the 70’s, the creators are probably techies, I can probably just email them and ask them how it’s pronounced! Ray Boyce had passed away at a young age, but Don Chamberlin was alive and now teaching at a university. I felt a little silly, but I decided to fire off a short email to him:

Hello Don,

I’m sorry to waste your time with such a silly question, but I’ve often heard SQL pronounced S-Q-L or as Sequel. I’ve also seen the official pronunciation listed both ways. According to wikipedia, you and Raymond Boyce created the language and it was shortened to SQL after some legal dispute. So my question is, is there an official pronunciation to SQL? Thank you for your time.

– Pat

To my delight, he replied back:

Hi Pat,

Since the language was originally named SEQUEL, many people continued to pronounce the name that way after it was shortened to SQL. Both pronunciations are widely used and recognized. As to which is more “official”, I guess the authority would be the ISO Standard, which is spelled (and presumably pronounced) S-Q-L.

Thanks for your interest,
Don Chamberlin

I felt a little dumb wasting his time with such a goofy question, but I was thrilled he replied back. Later I would find out that he himself pronounces it as “sequel” [5], so it’s interesting he would be so unbiased, though I suppose his pronunciation is consistent with him noting that the original guys kept calling it “sequel”. With this I felt I had found my answer: Both were acceptable, though the standard indicated S-Q-L was probably more official.

I don’t have any plans to be that guy and start correcting people who say “sequel”, though now I feel I can at least defend saying S-Q-L if someone tries to correct me. Additionally, while this may seem like a really trivial matter, some people seem to take it rather seriously. On a thread at Oracle’s message forum, a DBA who pronounces it “sequel” mentioned that “I’ve rejected interviewees because they didn’t know how to pronounce SQL … If you can’t pronounce it correctly, then I have doubts as to your ability to use it correctly.” [6] Though then again, the Oracle community seems to have adopted the “sequel” way of saying it, so maybe adapting to whatever environment you’re in is the best policy. Whatever the case, knowing why it’s said one way or another can useful.

[1] http://www.ibphoenix.com/resources/documents/design/doc_123
[2] http://docs.oracle.com/cd/B10501_01/server.920/a96540/intro.htm
[3] http://docs.oracle.com/cd/E17952_01/refman-5.1-en/what-is-mysql.html
[4] http://en.wikipedia.org/wiki/Sql
[5] http://www.youtube.com/watch?v=ghxpXpTuALM#t=33m23s
[6] https://forums.oracle.com/forums/thread.jspa?threadID=630585&start=15&tstart=0

Is ___ more of a boy’s name, or a girl’s name?

Photo By Zach Klein

So my boss came into my office on Friday and off handily asked me if “Stacy” was more of a boy’s name, or more of a girl’s name. I immediately thought “piece of cake!” and brought up my Baby Naming Trends Tool, only to be really confused that there was no feature for determining this. “Wait, I remember programming this feature last Fall, where is it?” I thought. Then I remembered I had waited to push the update out until I finished a couple of other features (which remain unfinished). D’oh!

Since male vs female feature was kind of fun, I decided cut out the unfinished functionality (for now), and push out the update so users could query the data. Now you can see if names are more popular for girls or for guys. Just place a “m:” or “f:” before a name when you enter it in. Here are some examples of names commonly given to both boys and girls:

  • Casey – Very close, more male leaning though.
  • Jordan – More male leaning.
  • Mackenzie – More female leaning.
  • Pat – A nick name, but popular with female babies in the 30’s and 40’s (though it’s almost no longer used). Patrick and Patti are more popular.
  • Quinn – More female leaning.
  • Riley – More males, but trending towards more females.
  • Stacy – More female leaning.
  • Taylor – More female leaning.

However, when creating this feature, I noticed some interesting abnormalities. No popular names seemed to be 100% male or female, even names that were obviously male or female. For example, according to the data, 11 females were named John in 2010, and during its peak popularity, when 80,000 males a year were being named John, the data says 200-300 females a year were being named John. Even though that means only ~0.375% of John’s were female, it still seems bizarre that someone would name a baby girl “John”. I wondered if this was a mistake on my part, but the underlying data showed the numbers to be correct.

The idea that someone would give a baby girl or boy a name of the opposite sex isn’t too far fetched, I know a few guys with names more commonly associated with girls, but are there really hundreds of guys named Jennifer walking around in the US? I accept that there may be a hand full, but my guess for the real reason this anomaly appears is because nurses or doctors sometimes make mistakes when recording the data. That makes me a little sad, but I suppose any data that’s hand recorded is going to have some errors. Though if this is the case, since this data comes from the US Social Security website, does this mean that these people may have their sex incorrectly recorded on their birth certificate? Though then again, perhaps people give a name for their baby, but then change it when it’s born and they find out it’s a different sex. Or then again, maybe there are lots of male Jennifers out there. Whatever the case, it makes for an interesting blip in the data.

Keyboard Layout Analyzer Update

I’ve rewritten the Keyboard Layout Analyzer. Back in November I told a guy I was close to being done and would have a new version up in “2 weeks”. I then told two other people in December who asked for additional features that I’d have it up in “2 weeks”. I now feel a little bit like a jack ass, but I honestly have been really busy. My new plan is to simply put up a preview version soon. The new app is mostly done, but rough around the edges in the output department.

JavaScript Parallax Scrolling Experiment

Parallax Clouds at patrickgillespie.com

There’s a neat CSS technique called “Horizontal Parallax Scrolling”, where background images will move at different horizontal speeds when the window is resized (example). It’s done by positioning several divs on top of each other and having their background-position property set to different offsets. You can read a great CSS tutorial on it here.

I thought it was kind of cool and decided to see if I could come up with a way of doing “Vertical Parallax Scrolling”. There are a lot of ways one could approach this, but I decided to go with fixed positioned divs that would move when the user scrolled the page up and down. These divs would be attached to the background and a content div would sit on top of the background which would have a z-index higher than any of these fixed positioned divs. All content for the page would go inside of this content div. I figured this approach would suit me well since I was thinking of creating something where there’d be lots of floating objects in the background.

After playing around a bit I came up with something that worked reasonably well in IE7+, Firefox and Safari, and ok-ish in Chrome. The effect was neat and 3D-ish, so I decided to use it at patrickgillespie.com. It replaces the silly CD cover experiment I’d previously hosted there. The effect is still not as smooth as I’d like it, but I think for a really nice smoothness I’d probably have to use a canvas element instead of a bunch of divs. Anyway, if you’re interested, I’ve put together an example which you can download here.

Muller Images Experiment

The Muller Formula is a neat little color formula that aims to predict which sets of colors people will find pleasing. No actual formula is given for it, but it’s concept is described. Given a set of colors with the same hue but a different lightness, the colors with the lighter hues should be shifted to a more naturally bright color and the colors with a darker hues should be shifted to a more naturally dark color. I thought this was a neat idea and figured I could possibly simplify it to work with a single color (what I decided to call a “Muller Color”). If a color had a high lightness, its hue would be shifted to a naturally light color. If it had a low lightness, its hue would be shifted towards a naturally darker color.

HSL Color Wheel
Image By Jacob Rus

The original article used a the traditional artist’s Red-Yellow-Blue color wheel. I wasn’t able to find a good conversion formula to go from the Red-Green-Blue color model (RGB) (which is popular in computing) to the Red-Yellow-Blue color model (RYB), but I did find formulas to go from RGB to the Hue-Saturation-Lightness color model (HSL). I figured this would work well since the HSL model had everything I needed to calculate a “Muller Color”. I could detect the lightness of a color and then adjust its hue accordingly.

Looking at the HSL color wheel, I decided to use the primary colors (Red, Blue and Green) as the more naturally dark colors, and the secondary colors (Yellow, Cyan, Magenta) as the more naturally light colors. This decision was just based on my own judgement. Using the HSL color model and the concept described by the Muller Formula, I was able to generate interesting colors from RGB inputs. And to make a long story short, I ended up using this idea in my Image to Color Palette Generator app. A color palette would be generated of an image, but in addition, the user would also see a palette of the corresponding Muller Colors.

Primary and Secondary Colors
Image By SharkD

I figured I was done with this idea until I received a recent email from someone suggesting I take the images people input into the Color Palette Generator program and create “Muller Images”. Basically, call the Muller Color formula on every pixel in the image and generate a new image. I thought this was a really cool idea so I whipped up a quick prototype which you can see here. The shift percent indicates how much a color should shift. For example, if the color is between red and yellow and the shift is 100%, it will become yellow if it’s light and red if it’s dark (a dark yellow would even end up becoming red and a light red would end up becoming yellow). If the shift is just 50%, it will just shift 50% of the way closer.

Unfortunately, the results weren’t as stellar as I hoped. Calling the Muller Color formula on every pixel caused them to gravitate towards similar colors, so the resulting image tended to look like poorly compressed gifs. An example of a 10% shift can be seen in the Bernie Madoff pumpkin pic below.

Normal Image and Muller Color-ed Image

It was still a cool idea, and maybe it could still be used for something, though it’d probably have to be tweaked a little bit. There are other images available to Muller-ize on the experiment page if anyone else is interested. Thanks to David Dailey for the idea on this one.

How Fast Do Your Individual Fingers Type?

Some big updates were made to my Typing Speed Test. I’ve spent the last two weeks brainstorming and implementing ideas I thought would make it more useful. Once I found I could easily capture the speed at which the keys were typed I realized that this also meant I could deduce how fast each finger was moving.

However, to be able to accommodate Dvorak and Colemak users, I had to make the user’s keyboard layout one of the configuration items. I also realized that not everyone types according to the standard fingering positions, including myself. I noticed this back when I was learning the Dvorak layout. My right pinky kept getting really sore. When I switched back to the QWERTY layout, I noticed that the only keys I used my Right Pinky for were the “Enter” key and the “Right Shift” key. To accommodate the people who deviate from the norm, I also made it so users could manually set which fingers they used for each key.

Allowing users to change the normal Finger-to-Key mapping lead to some hard user interface decisions. What I ended up creating was a keyboard map where the user changed a key’s mapping by clicking it one or more times. When it’s clicked, its mapping goes to the next finger in the legend. I initially had a design that used radio buttons, but I didn’t like all of the back and forth movement it caused with the mouse. I’m still not sure I have the best design, but for now I think what I have works fine. Below you can see an picture of the user interface. The keys are set with the finger positions I typically use.

My Custom Keyboard Finger Positions

My custom keyboard finger positions.

Once you finish the test you’ll now be presented with stats on how well you typed and stats on how fast your individual fingers were. To make the test more blog friendly, I also decided to present the user with the HTML code for the output tables. Below you can see two of my tables from a run I did.

Typing Stats
Words Per Minute (WPM): 76
Characters Per Minute (CPM): 378
Words Correct: 32
Words Incorrect: 0
Fastest Finger: Left Pinky
Slowest Finger: Left Ring
Keyboard Layout: QWERTY
Test Duration: 30 Seconds
Stats From PAT or JK’s Typing Speed Test

Average Finger Response Time
Left Pinky: 119 milliseconds
Left Ring: 228 milliseconds
Left Middle: 158 milliseconds
Left Index: 206 milliseconds
Right Index: 135 milliseconds
Right Middle: 128 milliseconds
Right Ring: 188 milliseconds
Right Pinky: N/A
Thumb(s): 100 milliseconds
Stats From PAT or JK’s Typing Speed Test

I should note that the finger speeds are based on all of the key presses you make and not just on the ones that lead to correct words. Also, FireFox seemed to be able to detect Backspace key presses while IE did not.

I still have a bunch more ideas that I want to add in, but I haven’t gotten to them yet (like the hot spot visualization I mentioned in my last post).

If you find any errors or bugs let me know. You can post them in the comment section of this post.

Generating T-Shirts?

About a month ago I had an interesting idea for my Text Ascii Art Generator (TAAG) program. Though due to being busy with work and buying a house, I haven’t had time to try it out. However, the idea is applicable to almost any web service, so I thought I’d share it with you all in case someone out there was looking for a nifty way to make some extra money off of a web app or blog without posting a bunch of ads up. I’m aware that too much commercialism can kill a website, however, I think this idea is kind of clever.

Hypothetical T-Shirt

Hypothetical T-Shirt

The idea originally struck me when I was brainstorming improvement ideas for TAAG. I thought that it might be cool if the user could put their output on a t-shirt. It’d make for a really neat way for someone to show their techiness/geekiness. After deciding I liked the idea, I then wondered if the t-shirt companies had already thought about 3rd party applications creating dynamic designs for them. After some quick googling, I discovered they had.

Both Zazzle and SpreadShirt allow you to dynamically submit designs for t-shirts which you can then sell. CNN even uses SpreadShirt to sell t-shirts of recent headlines. And you’re not limited to just t-shirts, you can put your designs on all sorts of crazy products – mugs, purses, hats, buttons, mouse pads, shoes, postage stamps, posters – the list goes on.

I’m not advocating turning your web apps or blogs into online stores, but if carefully used, this could compliment their output. An online photomosaic program that would let you buy a poster of your output might be kind of cool. And web comics that would let you buy t-shirts of your favorite comics would probably do pretty well, I had a whole bunch of Far Side t-shirts when I was in middle school.

Though as I said at the start of this post, I haven’t done any of this myself yet. I talked briefly to the FIGlet creators and they were cool with the idea, however, since I didn’t create the fonts themselves I’d feel wrong selling products with other people’s artwork on them without their permission / giving them a cut, and since there are over 300 fonts, this creates a rather complicated situation. So I may not even implement this idea (I’m still thinking about it though), but I figured I’d share the general concept, since it appears it could apply nicely in certain situations.