SOS

Shane O'Sullivan's technical blog… really ties the room together

Posts Tagged ‘Javascript’

URL & JSON Decoder in ReactJS

Posted by Shane O'Sullivan on July 20, 2014

I was debugging some network traffic, and needed to decode a URL that contained JSON values.  It looked like there was no good example readily discoverable on Google, so I threw together one using ReactJS, the amazing JavaScript library from my colleagues at Facebook.

Check it out at http://chofter.com/decode

It’s a simple single page application, and can be used as a good example of how to structure a simple ReactJS application. The source code is available on GitHub at https://github.com/shaneosullivan/react-url-decoder .

Screen Shot 2014-07-19 at 6.21.10 PM

Posted in Technical | Tagged: , , | Leave a Comment »

Edgeconf 2013 Web Performance Panel

Posted by Shane O'Sullivan on February 12, 2013

Edgeconf 2012 Web Performance Panel

I had a great time at Edgeconf, taking part in the Web Performance panel. We got to discuss many of the common issues that web developers face when building complex web apps, such as avoiding reflow, repaints and avoiding garbage collection.

The full video is available now HERE.

The slides are available here

All other panel videos are available HERE, or will be soon if not yet uploaded.

Posted in Technical | Tagged: , | Leave a Comment »

New release of Flickr Addict for the Palm Pre

Posted by Shane O'Sullivan on January 21, 2010

Version 0.2 of both Flickr Addict and Flickr Addict Lite have been released on the Palm App Catalog, just three hours or so after submission, so kudos to Palm!  This release is an incremental improvement mostly, but it contains a number of features that a lot of people asked for:

  • Manual sizing of wallpapers.  You can now pinch to zoom the image in order to manually select just a portion of the photo to use as a wallpaper.
  • Better randomization of images.
  • More options on how often images are changed.   Some people felt that 5 minutes was too short, and one hour too long, so you can now change the wallpaper every 5, 15,  and 30 minutes, and every 1, 6 or 24 hours.
  • More information on the currently displayed image.  You’ll see a new button at the bottom of the screen when viewing a full screen photo.  Clicking it shows the title of the photo and the person who took it.

It also includes some bug fixes, and improvements to downloads to make them go faster.

The big news for  users of the free Flickr Addict Lite app is that this release gives you two days use of the full app features, before returning to Lite mode, so you get to see what all the fuss is about ;-)

See the demo of the latest version at http://www.youtube.com/watch?v=dRUckwtvF6U

Posted in Technical | Tagged: , , , , , , , | 13 Comments »

Navigating in an IE Modal Dialog

Posted by Shane O'Sullivan on December 31, 2007

Internet Explorer has a nice feature where a new window can be opened modally using the window.showModalDialog function, meaning that the page that opened it cannot be accessed until the new window is closed. This can be useful in many situations.

However, the main limitation of IE Modal Dialogs (other than being non-standard), is that any hyperlink clicked in a modal dialog causes another, non modal, dialog to be opened, rather than opening the page linked to in the same window, as would happen in a normal pop up window.

The key to solving this problem is to note that a modal dialog only opens another window when a GET request is made, not when a POST request is made. However, an anchor tag automatically causes a GET request, so the solution is to:

  1. Catch the click on each anchor tag, cancel it,
  2. Submit a dynamically created FORM element, with it’s method set to ‘POST’ and it’s action set to the URL of the link clicked.

While it is possible to put a listener on each anchor tag to achieve this, such an approach will not scale well. Instead, place a listener on the body tag. The example below is done using methods from the Dojo Ajax Toolkit, since that the toolkit I use the most, but you can of course use whatever methods you like to achieve the same result:

<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.body(), "onclick", function(evt) {
if(evt.target.tagName != "A") {return true;}
dojo.stopEvent(evt);
var form = document.createElement("form");
form.setAttribute("target", window.name ? window.name : "SrPopUp");
form.setAttribute("action", url);
form.setAttribute("method","POST");
document.appendChild(form);
form.submit();
return false;
});
});
</script>

This method assumes that you have control over the content of the page being shown in the modal dialog. It would also make sense to add a similar listener to the body tag for key events, as a user can trigger an anchor tag by tabbing to it and hitting enter.

Thanks to Danny Goodman and Steiner Overbeck Cook for coming up with this solution.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Posted in Dojo, Internet Explorer, Javascript, Technical | Tagged: , , , | 15 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: