Activate your free membership today | Log-in

Tuesday, August 5th, 2008

MooTools 1.2 Image Protector

It always makes me laugh a little when people try to "protect" things on the Internet. The dwProtector tries to "protect" your images with you just having to:

JAVASCRIPT:
  1.  
  2. window.addEvent('domready', function() {
  3.         var protector = new dwProtector({
  4.                 image: '/blank.gif',
  5.                 elements: $$('.protect')
  6.         });
  7. });
  8.  

How does it protect?

  • Prevents right-click "Save Image As".
  • Prevents dragging an image to the desktop.
  • Prevents right-click "Save Background As".
  • Prevents right-click "View Background Image"

Check out the example and try to copy it. Of course, a simple print screen / apple-shift-4 does the trick, let alone a view-source.

Posted by Dion Almaer at 5:23 am
34 Comments

+++--
3.3 rating from 99 votes

Monday, August 4th, 2008

Django and ExtJS Grids with Filters

Category: Ext, Python

Are you an ExtJS and Django user? If so, you will want to check out this article by Matt of Tangible Worldwide on Using ExtJS's Grid Filtering with Django.

He goes into detail on how to tweak the grid filtering system that is aimed at PHP, and getting it to work in a way that allows you to write this Django code:

PYTHON:
  1.  
  2. # take a ContentType model name (say, from the URL)
  3. # and create a QuerySet
  4. ctype = ContentType.objects.get(model=ctype_model)
  5. model_class = ctype.model_class()
  6. obj_qs = model_class.objects.filter()
  7.  
  8. # 'q' is the set of POSTed filtering parameters
  9. filter_params = request.POST.get('q', '[]')
  10.  
  11. # decode the filtering parameters w/ simplejson
  12. filter_params = simplejson.loads(filter_params)
  13.  
  14. # apply the filtering params
  15. filtered_qs = get_queryset_from_ext_filters(obj_qs, filter_params)
  16.  

ExtJS 2.1 saw inclusion of the popular (at least in my world) user extension for AJAX filtering of data by grid columns. As useful as this is (provided you can abide by the GPL or paid licensing options), the filter parameters serialized as a PHP array, which is not particularly useful for other languages. With a quick modification to the grid filtering serialization method and a helper function for Django, we can rewire the system to send a JSON string that Django can use to directly apply filtering to a QuerySet. I've found that most clients love having this sort of command and flexibility over their data -- especially the kind that don't necessarily realize that this visualization and control exists. I like that. Additionally, the amount of work and code required is minimal, and the code both reusable and straight-forward. I like that, too.

There are 4 steps to this process:

  1. Modify the serialization method in GridFilters.js
  2. Set up the helper function that will process the QuerySet with the grid filter parameters
  3. Slightly customize your models (see below)
  4. Add (simple) helper code to your Ajax view

Posted by Dion Almaer at 10:38 am
Comment here

+++--
3.3 rating from 28 votes

The browser landscape; Alex’s Perspective

Category: Browsers

Flash can get to “ubiquitous” across the entire web with new capabilities in roughly 18 months and the Open Web faces a best case replacement time-frame of 5 years.

Reducing that differential from 42 months to zero is now the defining challenge of the Open Web. HTML is back in the hunt. Time to see how fast we can teach it remember the new tricks we’re so eager to teach.

This is a key comment in Alex's perspective where he discusses his analysis on the browser market, and how it is changing... or isn't changing.

It can be a little depressing, but if you are optimistic like Alex, we can work to make life better. How can we help?

Posted by Dion Almaer at 8:30 am
7 Comments

++++-
4.2 rating from 13 votes

NoGray Visual Time Picker

Category: Component, JavaScript

The NoGray Time Picker is a component that lets you add a time picker that is visual. The clock shows up, and you move the hands to wherever you need to be. All via a simple:

JAVASCRIPT:
  1.  
  2. var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
  3.  

Or a more complex version that tracks the changes:

JAVASCRIPT:
  1.  
  2. var tp = new TimePicker('time_picker', null, null, {onChange:function(){
  3.                                           if (this.time.hour <12) var ampm = this.options.lang.am;
  4.                                           else var ampm = this.options.lang.pm;
  5.  
  6.                                           var hour = this.time.hour%12;
  7.                                           if (hour <10) hour = "0"+hour;
  8.                                           var minute = this.time.minute;
  9.                                           if (minute <10) minute = "0"+minute;
  10.                                           $('time3_value').setHTML(hour+":"+minute+" "+ampm);
  11. } });
  12.  

After all that though, is it easier than asking to put in the time?

Posted by Dion Almaer at 7:54 am
15 Comments

+++--
3 rating from 23 votes

Deft-fully using Dojo and Flex

Category: Dojo, Flash

Tom Trenka of SitePen has created a new top-level Dojo package called Deft which "focuses on ActionScript components created in support of the various projects within the Dojo Toolkit (mostly for DojoX). Deft source files are well organized based in part on the organization of other Dojo Toolkit projects, as well as the package structure required by the Flex compiler. Most Flex applications are based on the Flex AS3 Application class, which forces you to write at least one “controlling” MXML file in order compile your code. Instead of this, Deft components inherit primarily from the Sprite class — which allows you to write pure ActionScript code."

It contains a few goodies in it including the multi-image uploader, and pre-alpha quality support for dojox.gfx. Future plans include support for audio and video. "Hopefully Adobe will continue its current path towards being open source friendly, helping Deft flourish."

The article goes into detail on downloading the Flex SDK so you can build applications with it.

This is an interesting experiment in the melding of Flash and Ajax techniques. I would love to see the Flash player giving us more access via simple JavaScript, so we don't even need to create SWF bridges.

Posted by Dion Almaer at 6:38 am
5 Comments

++++-
4.1 rating from 13 votes

Friday, August 1st, 2008

Another Jaxer 1.0 Release Candidate with new APIs

Category: Aptana

Greg Murray has blogged about a new release candidate for Aptana Jaxer that contains a lot of new features.

Kevin Hakman told us about the release:

We've had server-side JS database APIs all along, but now handing result sets is even easier. There's also now full fine grain control and access to the entire communication cycle with APIs for message headers, redirects, content and types. Speaking of types… for the first time with Jaxer, you can return content types other than HTML including JSON, XML, GIF, etc… Yes, even GIFs. Jaxer has a fresh new Image API that among other things can convert Canvas to static images and serve them up. Like, Greg, I too really like the idea of using Jaxer for easily creating JSON data services which is a rapidly growing trend as developers discover the powerful capabilities of JSON more and more. In Jaxer, it's very cool since it's all native JavaScript on the client, on the wire, and on the server. There's even enhanced JSON serialization to make it even easier than before on both client and server. JSON services also open Jaxer to be useful in combination with rich internet clients other than Ajax UIs such as Flash, Flex or even Silverlight since all those support JavaScript on the client and can consume JSON data. For Ajax and RIA developers this is a boon since you can now write your client-side and server-side code in the same language. And if you prefer XML data services Jaxer's native E4X (ECMAScript for XML) support means you can handle XML docs natively in JS on Jaxer as well.

This release also includes a totally new concept: a secure sandbox which as Greg explains, "lets you load, on the server, pages from other domains and allow their JavaScript to execute without giving them access to the Jaxer API or your own server-side code, but still gives your code access to their window objects and anything inside them". For anyone who has ever done screenscaping for mashups or other applications, this really helps a lot since Ajax pages have historically thwarted scraping operations. With this feature in Jaxer you can securely get a remote page, execute its functions, and scrape the resulting DOM nodes (yes, you need not do tedious manipulations with strings) and voila!

Here are the features:

  • Application context settings that allowing for easier app configuration, app properties, database settings, etc...
  • Database API enhancements with richer APIs for working with result sets.
  • Server-side image manipulation including server-side canvas support and ability to convert to other image types.
  • Native command execution API so that you can run system commands and handle the output from those.
  • Asynchronous server-side JavaScript processing lets you implement callbacks in your server-side code too.
  • Ability to return custom content types (e.g. json, xml, gif, html, etc...)
  • Full control of the request/response lifecycle including setting redirects, headers, content, etc...
  • Secure sandbox supporting cross domain calls, sandboxed JavaScript execution, META refreshes, ...
  • Serialization support for JavaScript objects to and from XML, E4X and JSON.

Uri Sarid has a great post that shows how you can do DOM Scraping with Jaxer, and updates it for this latest release:

There's a lot of other new goodness in Jaxer 1.0, as well as the official released version of the Mozilla engine found in Firefox 3. So for example getElementsByClassName is natively implemented (see John Resig's speed comparison), in addition to the other Mozilla features such as built-in XPath functionality and a very robust DOM feature set — just what you need for some serious 'screen scraping', mashups, and content repurposing.

Let's see it in action!

It includes code that shows the Sandbox in action, as well as the DOM work:

JAVASCRIPT:
  1.  
  2. // Gets a fragment of the remote page's HTML, after some cleanup 
  3. function getFragment(title, url, isClassName, identifier, classesToRemove) 
  4. { 
  5.     var sandbox = new Jaxer.Sandbox(url)
  6.     var contents = sandbox.document[isClassName ? 'getElementsByClassName' : 'getElementById'](identifier)
  7.     var container = addToPage(title, contents)
  8.     if (classesToRemove) 
  9.     { 
  10.         if (typeof classesToRemove == "string") classesToRemove = [classesToRemove]
  11.         classesToRemove.forEach(function(className) 
  12.         { 
  13.             removeNodeList(container.getElementsByClassName(className))
  14.         })
  15.     } 
  16.     return container.innerHTML
  17. } 
  18. getFragment.proxy = true
  19.  

Posted by Dion Almaer at 1:51 pm
7 Comments

++++-
4.6 rating from 25 votes

Open Web 0.4: Composability, Interop, Ubiquity, and the Client

Category: Editorial

Brad Neuberg got a huge amount of feedback on his call for a definition of the Open Web. He distilled that information and tried hard to come up with something that fits into one sentence, and ended up with this:

The Open Web is an interoperable, ubiquitous, and searchable network where everyone can share information, integrate, and innovate without having to ask for permission, accessible through a powerful and universal client.

His litmus test for this asks if the technology in question has:

  • Composability The ability to innovate, link, contribute, search, and integrate without red tape, fear of a lawsuit, or having to ask "please?"
  • Interoperability The ability for developers to interoperate without having to know of each others existence
  • Ubiquity The ubiquity of a set of open technologies and services agreed upon by the widest possible community
  • Universal Client Empowering and evolving the browser and web technologies as a universal client

Posted by Dion Almaer at 8:51 am
6 Comments

+++--
3.4 rating from 16 votes

Cross domain access now, and support for the future

Category: XmlHttpRequest

Kris Zyp is really leading the charge on various missions such as JSON-* and XHR-*. This time he has a posting on a new cross-site XHR plugin repository that wraps up the myriad of techniques that are both pending in standards (XDomain, XHR++) and work arounds (window.name, magic iframe hackery). It also falls back to the faithful "just put up a proxy" for those poor browsers that can't handle the ninja.

JAVASCRIPT:
  1.  
  2. // Access-Control: allow <*> for XHR
  3. dojox.io.xhrPlugins.addCrossSiteXhr("http://othersite.com/");
  4. dojo.xhrGet({url:"http://othersite.com/data"})
  5.  
  6. // window.name
  7. dojo.require("dojox.io.xhrWindowNamePlugin");
  8. dojox.io.xhrWindowNamePlugin("http://othersite.com/");
  9.  
  10. // proxy for the other folk
  11. dojox.io.xhrPlugins.addProxy("/proxy?url=");
  12.  

Fantastic work as usual.

Posted by Dion Almaer at 6:45 am
10 Comments

++++-
4 rating from 30 votes

chosr: Quicksilver interface in the Web

Category: GWT, Showcase

Chosr is another Quicksilver inspired piece of software, that lives in the Web, created by Julius Eckert using GWT.

Very interesting to see the interactions, although I wonder a little on the usage. The great thing about Quicksilver is that you hit a quick key combo and you are there. You type what you need, and you are sent off again.

Posted by Dion Almaer at 2:10 am
4 Comments

++---
2.5 rating from 19 votes

Thursday, July 31st, 2008

JavaFX: The preview has landed

JavaFX was announced at JavaOne.... in 2007, and we are now seeing a preview release.

Josh Marinacci of the JavaFX team put together a post with an example that builds the following:

The code for this is simply:

JAVA:
  1.  
  2. package blogdemo;
  3.  
  4. import javafx.scene.*;
  5. import javafx.scene.paint.*;
  6. import javafx.scene.geometry.*;
  7. import javafx.application.*;
  8. import javafx.scene.transform.*;
  9. import javafx.input.*;
  10. import javafx.animation.*;
  11. import java.lang.System;
  12.  
  13. var angle = 0.0;
  14.  
  15.     windowStyle: WindowStyle.TRANSPARENT  visible: true
  16.     width: 400 height: 400
  17.     stage: Stage {
  18.         fill: null
  19.         content: Group {
  20.             translateX: 100 translateY: 100
  21.             content: for(i in [0..10]) {
  22.                 // here is the magic with binding
  23.                 Rectangle {
  24.                     fill: Color.rgb(25*i,0,0, i/10.0)
  25.                     width: 100 height: 100 arcHeight: 10 arcWidth: 10
  26.                     stroke: Color.BLACK strokeWidth: 5
  27.                     transform: bind [
  28.                         Transform.rotate(-i*36+angle/2,50,50),
  29.                         Transform.translate(angle/4,0),
  30.                     ]
  31.                 }
  32.             }
  33.             onMousePressed: function(e:MouseEvent):Void { System.exit(0); }
  34.         }
  35.     }
  36. }
  37.  
  38. var anim = Timeline { keyFrames: [
  39.         KeyFrame { time: 0s values: angle => -360 tween Interpolator.EASEBOTH },
  40.         KeyFrame { time: 2s values: angle => 360 tween Interpolator.EASEBOTH },
  41.     ]
  42.     autoReverse: true
  43.     repeatCount: Timeline.INDEFINITE
  44. };
  45. anim.start();
  46.  

And you can check out the application if you have Java 1.6 installed.

Michael Coté got together with the Sun folks and recorded a demo and interview:

I am interested to see what Sun does with JavaFX, but I have to admit to being underwhelmed and more excited about what Sun could do with the Java plugin and have that as a way to interact with Ajax applications.

Posted by Dion Almaer at 10:51 am
13 Comments

++---
2.8 rating from 33 votes

IE 8 and the User Features

Category: Browsers, IE

The first main play for IE 8 was to get developers on board, and start a conversation with us on what they are fixing, and where they are going.

There were a couple of user features such as Activities and Web Slices, but you could tell they hadn't finished there.

In their latest blog post they talk about reliability and the fact that they now have isolation between web pages and the chrome itself via processes. This means that a page could die, but the browser is fine:

One of our most significant investments is in a feature called Loosely-Coupled IE (“LCIE”), which is an architectural attribute that helps isolate different parts of the browser from each other, most notably, the frames from the tabs. LCIE is the foundation that we have built a few of our features on including Automatic Crash Recovery of which I expand on below.

For Beta 2, we added the following changes:

Frame Process Merging

To help improve startup performance, we have reduced the number of processes that we start. Instead of firing up two processes every time you launch the browser (one for the frame and one for your tabs), we now only fire up one frame process the first time you launch IE. Subsequent launches will only start a new tab process or make a new tab in an existing tab process.

For users that are accustomed to browsing websites in multiple “sessions”, for example if you want to log in to multiple email sites simultaneously, you can specify the “-nomerge” command line option to disable this feature.

More tab processes

It turns out that the vast majority of all IE sessions contain three or fewer tabs. Accordingly, in Beta 2 we try to give users three efficient tab processes. This is contingent on the user’s computer capabilities, but the more capable a computer is, the more processes we will use, up to a point. Adding more processes gives users much better isolation in the event of a failure. If each tab is in its own process, websites are completely isolated from each other.

Virtual tabs

We have also added the internal capability to “hot swap” the process from underneath a tab. Previously, Protected Mode worked on a per-process basis. For example, say you add a website to your trusted sites in IE7. If that site links to another site that is not in your trusted sites, it will cause you to switch browser windows when you click the link.

We improved this in IE8 Beta 1 with LCIE when we split the frame from the tabs. With the split we can create a new tab in the same window and switch you to that tab as opposed to being “punted” to a new window.

Virtual tabs lets you navigate across Protected Mode in the same tab since we just switch the process under the tab to the correct integrity level. This is really just “UI-sugar” – virtual tabs do not impact security or protected mode in any way, other than to make it more convenient to transition between protected mode on/off.

LCIE's capability of isolating different parts of the browser coupled with more tab processes and virtual tabs will improve the performance and overall reliability of Internet Explorer.

I saw an early IE 8 beta 2, and there are other very interesting features in there too. Some were subtle but interesting. We should get our hands on it soon!

Posted by Dion Almaer at 9:27 am
28 Comments

+++--
3.6 rating from 20 votes

JSON Pickle: Serialize your complex Python objects to JSON

Category: JSON, Python

John Paulett wanted to be able to define complex Python model objects, then seamlessly pass them into CouchDB and to client-side Javascript.

To make this happen for objects that are beyond primitive sets he created JSON Pickle which has been used on the Universal Feed Parser, and lets you do the following:

PYTHON:
  1.  
  2. >>> import jsonpickle
  3. >>> from jsonpickle.tests.