Facebook's Assault On Privacy

So Facebook is having their annual F8 conference this week to announce new features to the site and changes in how to develop applications. Among the mostly mundane and superficial changes like changing "became a fan of" to "like" Facebook has continued their goal of turning information you intend to share privately with friends into public content which other companies will pay them to see.

The latest development is changing how user data is handled by application developers. Until now, any information you posted to Facebook was generally visible to the developers of applications you used (like Farmville) and they were allowed to keep it for up to 24 hours after you used the application. This include your name, where you are, who you're friends with and, in some cases, if you shared it your email address and phone number. As announced this week this 24 hour restriction no longer exists. The information they collect about you and your friends is now theirs to hold on to indefinitely to use and share (and sell) as they see fit.

So, to combat this and keep your privacy private. Here are the steps to change your seeing to make yourself more secure when using these apps.

1. From your facebook page go to Account > Application settings
2. Change the Show select box to Authorized
3. Click the "x" next to any applications you do no use on a regular or are simple things such a quizzes or surveys. (quizzes are generally just nonsensical apps the developers make to trick you into sharing your information with them)
4. In the popup click "Remove" and the "Okay"
5. Rinse and repeat

These steps will make it so that the developers of these applications can no longer see your information you are sharing with friends. But there's one more aspect to what you share with applications that most people don't know about. That's what information you share with the applications your friends use.

There are a number of applications which also collect information on you when your friends authorize an application that you may have never heard of, let alone authorized them to see your information. These steps will protect you from sharing this information with them.

1. From your facebook page go to Account > Privacy Settings > Applications and Websites
2. Next to "What your friends can share about you" click "Edit Settings"
3. On this page uncheck ALL of the boxes and click "Save Changes"

From just a quick skim of the checkboxes you can see the MASSIVE amount of information developers can get from you whether authorized them directly or not.

There are many, many more holes is Facebook's default security and privacy settings and I encourage you all to explore and change these settings as you see fit. This is a company who is in the business of making your information more public and you should ALWAYS make sure they are not making it more public than you want it to be.

On-Screen Keyboard Widget using jQuery-UI

One Last Update: It's been a good while since I gave a good update on this project's state, so here's the deal. I started this project to fulfill a need I had at the time and opensourced it so someone might have a something to start with to fulfill a similar need. Turns out Mottie had a similar need and found this a good starting point. He has now built an on-screen keyboard widget much better than anything I had intended to develop. This post is staying here for reference, but I highly recommend going over to Github and get the latest version of Mottie's branch instead.

A while back I came to a project which I was developing for a small touchscreen device with a limited Linux install which may or may not have a physical keyboard attached. While our overall plan for the project was to not have any forms to fill out and thus no requirement for a keyboard, we saw a potential need down the road and rather than wait until we must have it I set out to see what kind of touchscreen keyboard jQuery could make possible.

Now, as a touchscreen with no keyboard is a very limited need in the jQuery world there were very few examples out there and none that took full advantage of many of the things build into jQuery UI. So, I new pretty early that I'd be building something from scratch. I wanted it to not just be a function you call that happened to use jQuery, but rather built as a true widget much like the datepicker built into jQuery UI. I also wanted it to be very customizable: resize with the reset of the page, have multiple keyboard layouts, even allow users to define their own keyboard layout. After a little planning and a couple days of coding here and there I came up with this:

Samples removed due to jQuery plugins site being erased

With a simple jQuery call and a few additional lines of css you can have any keyboard layout you could possibly need.

$('input[type=text], input[type=password], textarea')
    .keyboard({
        layout:"qwerty",
        customLayout:
            [["q w e r t y {bksp}","Q W E R T Y {bksp}"],
            ["s a m p l e {shift}","S A M P L E {shift}"],
            ["{accept} {space} {cancel}","{accept} {space} {cancel}"]]
    });

It has been tested on most browsers supported by jQuery UI and works. At this time the keyboard will center itself top-to-bottom on the left side of the screen, this is a feature I plan to change so that the keyboard appears from the field you are actually editing. I have they entire source available for download at both jQuery Plugins and Snipplr. Feel free to give any feedback you may have.

Creative Commons Attribution-Share Alike 3.0 Unported License

Update: It seems something in Blogger's style are forcing the keyboard to only appear at the top of the page. I'm working on it quickly, until then you are able to scroll to the top when it appears and use it.

Update: Fixed!

Update: After a little more tweeking, the positioning of the keyboard works much better across the board. All sources have been updated.

Cascading Select Boxes using jQuery

Today, we came across a need for a set of cascading select boxes to filter through a list of Organizations, Territories and Location. When I've come across this need in the past I tended to use ajax calls to load a new list into the select box based on the selection. While the ajax option is good for very large sets of data to keep the initial load time of the page down, it creates a few minor issues for smaller data sets.

1. Returning a short list of options via ajax can be slow due to having to make a separate call to the server.
2. Additional requests being sent to what may already to a taxed server
3. There can be a good amount of server-side code that needs to be written to handle and respond to the ajax requests.

For our smaller data set we felt it would be more beneficial to start by loading all available options during page load and use jQuery to quickly filter and show only the options we need from the options already loaded into the browser. I came up with this function to do just this.

function cascadeSelect(parent, child){
 var childOptions = child.find('option:not(.static)');
 child.data('options',childOptions);
 
 parent.change(function(){
  childOptions.remove();
  child
   .append(child.data('options').filter('.sub_' + this.value))
   .change();
 })
 
 childOptions.not('.static, .sub_' + parent.val()).remove();
}

I was shocked at the ridiculously small amount of code needed to provide this functionality. After pre-building may page with a form containing the select boxes and added a class to each option in the child select to define which option from the parent it was associated with ("sub_1" where parents value is "1"), simply call the function with the parent and child defined as jquery objects:

cascadeForm = $('.cascadeTest');
orgSelect = cascadeForm.find('.orgSelect');
terrSelect = cascadeForm.find('.terrSelect');
locSelect = cascadeForm.find('.locSelect');
 
cascadeSelect(orgSelect, terrSelect);
cascadeSelect(terrSelect, locSelect);

And voila:

Organization:	Select an Organization Organization 1 Organization 2 Organization 3
Territory:	- All Territories - Organization 1 - Territory 1 Organization 1 - Territory 2 Organization 2 - Territory 1 Organization 2 - Territory 2 Organization 3 - Territory 1 Organization 3 - Territory 2 Organization 3 - Territory 3
Location:	- All Locations - Organization 1 - Territory 1 - Location 1 Organization 1 - Territory 1 - Location 2 Organization 1 - Territory 2 - Location 1 Organization 1 - Territory 2 - Location 2 Organization 2 - Territory 1 - Location 1 Organization 2 - Territory 1 - Location 2 Organization 2 - Territory 2 - Location 1 Organization 3 - Territory 1 - Location 1 Organization 3 - Territory 2 - Location 1 Organization 3 - Territory 3 - Location 1

I've posted a full sample html at Snipplr. Feel free to comment and give suggestions there. As with all my code it's licensed as Creative Commons Attribution-Share Alike 3.0 Unported License. Feel free to consume and improve accordingly.

Update: ::face-palm:: In my joy of completing a task that seemed to good to be true, I posted this before realizing it was to good to be true. At this time I've only had a chance to test this code in Firefox. After an attempt to show it off, it appears to not work properly in WebKit browsers and maybe others. I will run it through the full gauntlet soon and do by best to ensure cross-browser compatibility for all browsers officially support by jQuery.

Update 2: After a little work and a better understanding of what doesn't work to "hide" options in browsers other than Firefox, I now have code that does just as I explained above but works cross-browser. I have updated the code above as well as the full example on Snipplr. Again, please feel free to give any feedback you might have.

Confirmed Working:

• Firefox (3.6 RC1, 3.5, 3.0, 2.0, 1.5, 1.0)
• IE (8, 7, 6 SP2, 6)
• Safari 4
• Opera (10, 9)
• Chrome 4

JQuery: Scrollable Table with Frozen Headers

After much difficult searching to no avail, I finally have completed a jQuery based process to create a scrollable table with fixed headers. The following code requires the header rows to be within a "thead" tag, the table body in a "tbody" tag and the entire table in a tag with the "overflow" style set to "auto" or "scroll".

This script creates a new table cloning the "thead" section and attaching it to the absolute top of the containing element so that it does not move when the containing element is scrolled.

As always I release this script under Creative Commons license, and is compatible with all browsers which are compatible with jquery except for Firefox 2.0 (a few minor alignment issues i plan to fix when i have time).

EDIT: Code Move to Snipplr

Tested and working with:

• Internet Explorer(Win) (6.0, 7.0, 8.0)
• Firefox(Win, Linux) (3.0)
• Safari(Win, Mac) (3.0)
• Chrome (Win) (2.0)
• Opera (Win) (9.6)

Tested and having issues with:

• Firefox (All) (1.0, 1.5, 2.0)

Edit:

It was brought to my attention that I forgot to include an example. So here's a quick and dirty one. I've tried to mark it clearly in the source so it will be easy to grab.

1. Build and style your table inside a div that has a limited height and "overflow" style at auto
2. Include the function above in your scripts
3. When document is "ready" call "scrollableTable()" function with the container of the table (".scrollContainer") and, if you choose, the class name to be applied to the new header as arguments.

I will try to type up some better documentation on this and clean up the code a bit, but in the mean time please let me know of any issues you may run into so that I can fix them soon.

Column 1	Column 2	Column 3	Column 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4
data 1	data 2	data 3	data 4

Update 10/27/09:

This project has fallen by the wayside due to lack of time and a redesign of the site I needed this script for anyway. I may get back to it later, but in the mean time, I've moved the code to Snipplr (link above). Feel free to further comment there. I would be happy to include any contributions/bug fixes anyone may have or link to a derivative work anyone else may be working on.

On Patriotism

No party holds the privilege of dictating to me how I shall vote. If loyalty to party is a form of patriotism, I am no patriot. If there is any valuable difference between a monarchist and an American, it lies in the theory that the American can decide for himself what is patriotic and what isn’t. I claim that difference. I am the only person in the sixty millions that is privileged to dictate my patriotism.

- Mark Twain