Tag: jquery

Categories
Web Development

localStorage With Cookie Fallback

I mentioned the other day that localStorage can be used as an alternative for cookies. The benefit is that localStorage doesn’t sent it’s data back on every request to the server like a cookie. Headers are uncompressed in http making that very costly. However not every web browser out there supports localStorage. Most however do.

Here’s an example based on jQuery and jQuery.cookie. It’s designed to turn objects into JSON and store the JSON representation. On retrieval it restores the object. This doesn’t handle things like expiring cookies (it simply defaults to 365 days). I just had this around from an old project with these very specific requirements and figured I’d post it as-is in case it can help anyone and to demonstrate. This isn’t ideal for reuse, but for someone playing with the idea, maybe it will motivate 😉 .

function storeData(type, obj){
    var data = jQuery.toJSON(obj);
 
    // If using a modern browser, lets use localStorage and avoid the overhead
    // of a cookie
    if(typeof localStorage != ‘undefined’ && localStorage !== null){
        localStorage[type] = data;
    }
 
    // Otherwise we need to store data in a cookie, not quite so eloquent.
    else {
        jQuery.cookie(type, data, { expires: 365, path: ‘/’ });
    }
}
 
function loadStoredData(type){
     var data;
 
    // If using localStorage, retrieve from there
    if(typeof localStorage != ‘undefined’ && localStorage !== null){
        data = localStorage[type];
    }
 
    // Otherwise we have to use cookie based storage
    else {
        data = jQuery.cookie(type);
    }
 
    // If we have data, lets turn it into an object, otherwise return false
    if(data){
        return jQuery.secureEvalJSON(data);
    }
    return false;
}

Pretty simple right? It’s still a key/value API.

Categories
Web Development

jQuery And Checkbox Values

I rarely use checkboxes and radio buttons. Perhaps because of that I forgot this little rookie error.

For the intents and purposes below assume the following HTML:

<p>
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" id="checkbox1" checked="checked"/>
</p>
 
<p>
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" id="checkbox2"/>
</p>

You wouldn’t really expect it, but both of these return “on” when you get the val():

$(‘#checkbox1’).val(); // returns "on"
$(‘#checkbox2’).val(); // returns "on"

Now say you flipped them by unchecking checkbox1 and checking checkbox2. Same thing:

$(‘#checkbox1’).val(); // returns "on"
$(‘#checkbox2’).val(); // returns "on"

Now reload the page, so one is checked and two is not checked. Try again this time using .attr('checked');. That also doesn’t work, but that makes sense. jQuery 1.6’s release notes even explain it:

Before jQuery 1.6, .attr(“checked”) returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state

The best way I’ve found to get a checkbox value is to use the is() method:

$(‘#checkbox1’).is(‘:checked’) // returns true

As to why val() doesn’t check the type of node and do this for me automatically? I’m not entirely sure. I’m assuming backwards compatibility. I suspect I’m not the only one who keeps forgetting this little caveat.

Categories
Around The Web

2012 Presidential Candidate Websites

Back in 2008 I did a special segment in my “Secrets In Websites” series for the 2008 Presidential Elections. It was quite popular (almost crashed the server). I decided to do it again, but slightly revised for 2012.

Continue reading “2012 Presidential Candidate Websites”
Categories
Mozilla Web Development

Browser Detection In JavaScript Libraries

I was curious what browser detection in various JS libraries look like. While we always try to avoid doing browser detection, it’s sometimes a necessary evil. Here’s what I found.

Continue reading “Browser Detection In JavaScript Libraries”
Categories
Mozilla Open Source Politics

WhiteHouse.gov Goes Open Source

I noted in January that WhiteHouse.gov relaunched for the Obama administration using a closed source infrastructure (it was using ASP.NET on IIS 6.0) running a proprietary CMS.

It has now relaunched using open source Drupal. Also interesting is that it’s no longer broadcasting any headers regarding it’s server. Considering Drupal is by far better tested on a Unix OS andApache, I’m wondering if they dropped Windows Server/IIS 6.0 in favor of some sort of Linux and Apache. I can’t find any hint at what they are using.

It’s noteworthy that Drupal was already used on recovery.gov and has been used in politics by way of CivicSpace for the Dean campaign in 2004.

Via Drupal it’s still using jQuery (verison 1.2.6). It’s also now using RSS rather than ATOM for feeds, which I presume is by way of the switch to Drupal rather than an intentional effort.

Another interesting change is they tweaked the doctype from XHTML Transitional to XHTML+RDFa.

Pretty much everything else is still the same including the design. Analytics is still done using WebTrends (holdover from the Bush administration) and Akamai still sits in front of their servers.

For CSS hackers: They still choose conditional CSS for IE compatibility.

Their pages don’t fully validate anymore, though there is no terrible markup either.

Video is still done using Flash, maybe they’ll consider adopting HTML5 video. They could do so and fallback to Flash. The latest versions of Firefox, Safari, and Chrome could take advantage of it today. The rest of the browsers would get the Flash experience. That would be the next major step in opening up. Mark Pilgrim has a good primer if they need.

Edit [9/26/2009 @ 1:45 PM EST]: Tim O’Reilly confirms it is indeed running on LAMP, specifically Red Hat Linux with Apache, MySQL and obviously PHP. Apache Solr is used for search.

Categories
In The News Internet Politics

Whitehouse.gov Analysis

A few notes on the new whitehouse.gov website as I did for the campaign sites after about 5 minutes of sniffing around:

  • Running Microsoft-IIS 6.0 and ASP.NET 2.0.50727. The Bush administration ran Apache on what I think was some sort of Unix. Data is gzip’d.
  • Whitehouse.gov is using Akamai as a CDN and for DNS service.
  • Using jQuery 1.2.6 (someone should let them know 1.3 is out). Also using several plugins including jQuery UI, jcarousel, Thickbox. Also using swfobject.
  • Pages tentatively validate as XHTML 1.0 Transitional! I’m shocked by this. I’ve checked several pages all with the same result.
  • Using WebTrends for analytics. Bush Administration also did.
  • IE Conditional Stylesheets and a print stylesheet.
  • RSS feeds are actually Atom feeds.
  • The website is setting two cookies that I can see WT_FPC and ASP.NET_SessionId which expire at the end of the session which is not prohibited in federal government as per OMB Guidance for Implementing the Privacy Provisions of the E-Government Act of 2002 (using Google Cache for that link since I can’t find it anywhere else, our government should really keep those in a more permanent location).

I should note that this is quite different in architecture than the Obama campaign site which ran PWS/PHP, no notable JS library, feed, and Google Analytics.

Update [1/20/2009 @ 9:00 PM EST]:

Categories
Web Development

jQuery

Pretty big news from the jQuery camp today. Both Microsoft and Nokia will be making it part of their development platforms.

Extra interesting is that they aren’t forking, but utilizing the existing code under the same license, and will contribute and participate like everyone else.

I’ve been using jQuery on sites for quite a while now (about 2 years). Seeing more and more support for it just makes me feel that it was an even better decision.

Congrats to the jQuery team.

Categories
Mozilla Open Source

Shaver on Silly Season

Shaver’s got some interesting thoughts on silly season (prior reading, highly recommended). My favorite is this little nugget:

If you choose a platform that needs tools, if you give up the viral soft collaboration of View Source and copy-and-paste mashups and being able to jam jQuery in the hole that used to have Prototype in it, you lose what gave the web its distributed evolution and incrementalism. You lose what made the web great, and what made the web win. If someone tells you that their platform is the web, only better, there is a very easy test that you can use:

I took the liberty of highlighting the Web 2.0ish language.

Both of those are great reads, I highly recommend taking a few minutes to read them.

Categories
Mozilla Software

Fuller Screen Mode

Daniel Glazman is at it again, this time with Fuller Screen Mode. This has serious potential for anyone who ever has to do a presentation. I’ve had it in the back of my mind for a while. With a copy of Firefox, you now have full screen presentations that look great. For presentations on the go, consider a USB Drive and Portable Firefox if you’re using Windows. Very easy, very compatible, very usable. Combine it with jQuery and the Interface Elements or script.aculo.us (with included prototype.js), and you can even have some fancy transitions and everything. Not to mention it can print out very well, and is very compatible to share on the web.

Of course you’ve seen that S5 is a great way to make presentations. Still waiting on someone to make an extension for NVU/Mozilla Composer that makes S5 presentations a snap for average Joe who doesn’t want to code.