Friday, May 8th, 2009
Category: CSS
Paul Hayes has been playing with CSS transformations and making 3D cubes:
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation).
This resulted in:
A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+
Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome
WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:
CSS:
-
-
.cube {
-
position: relative;
-
top: 200px;
-
}
-
-
.rightFace,
-
.leftFace,
-
.topFace div {
-
padding: 10px;
-
width: 180px;
-
height: 180px;
-
}
-
-
.rightFace,
-
.leftFace,
-
.topFace {
-
position: absolute;
-
}
-
-
.leftFace {
-
-webkit-transform: skewY(30deg);
-
-moz-transform: skewY(30deg);
-
background-color: #ccc;
-
}
-
-
.rightFace {
-
-webkit-transform: skewY(-30deg);
-
-moz-transform: skewY(-30deg);
-
background-color: #ddd;
-
left: 200px;
-
}
-
-
.topFace div {
-
-webkit-transform: skewY(-30deg) scaleY(1.16);
-
-moz-transform: skewY(-30deg) scaleY(1.16);
-
background-color: #eee;
-
font-size: 0.862em;
-
}
-
-
.topFace {
-
-webkit-transform: rotate(60deg);
-
-moz-transform: rotate(60deg);
-
top: -158px;
-
left: 100px;
-
}
-
Category: Browsers
Reposted from my personal blog
I was incredibly excited to see Dan Mills of the Weave team show off OpenID in the browser thanks to Weave. I have wanted this from long before joining Mozilla and Dan has done a great job and doing something smart to make it happen.
The key to this all is the notion of "logging into the browser." With the Weave project this is exactly what you do. Although the first service that Weave offered was the ability to sync bookmarks, all along it has been setup for much much more, and this is a perfect example of what the integration of a browser with a service backend can mean. One thing to note is that the Weave team really cares about privacy. The way the Weave system works right now is that the server has encrypted bits that it can never look at and understand. Instead, the client itself has the private keys that it needs to do the real work of holding the data, thus the browser, which is a natural extension to yourself the user, has full control. Think about how that differs from many services up in the cloud that make a lot of money off of your data (not that making money is bad!)
Back to the point at hand. Dan shows us how, once you are logged into Weave (and thus the browser) it will watch out for input's that match the openid spec (openid_identifier, openid_url) and replaces it with a simple button that tells you that you can just log in! With a click on the button you get logged in automatically via Weave and you are on your way. Now Ben will be able to login to the Web 2.0 Expo site with one click instead of a series of nightmare steps. I think this is a pretty big deal.
Here it is in action:
In one fell swoop we get:
- A usable login procedure that is trivial!
- We don't have to give trust to some third party site that we are giving the keys to the treasure too. Imagine if you used OpenID to login to your bank... would you trust your OpenID provider enough for that?
- It is important to note that they also integrated the Firefox password manager into the mix. This means that you can set auto login right from the URL bar widget (with your password, as well as with OpenID!)
Of course, this is early days, as Dan says in his post
Keep in mind that this is just a prototype that we hacked together in a few of days, so there are some very rough edges. But we’re super excited about the possibilities already. When demoing it to people, they said things like “whoa! how did you do that?” and “I want this! How do I get it?"
The answer is, “soon”, or if you’re brave enough you can try it out right now by installing the latest Weave development snapshot. Please let us know what you think by posting on the Weave forum!
People and Places
Now we are getting the notion of "people" and Identity in the browser, and we also have "location" too, we are really getting somewhere. A great week!
Thursday, May 7th, 2009
Category: jQuery
Media Players seem to be a hot topic right now. After the upgrades to Scott Schiller's SoundManager, Paul Bakaus of the jQuery UI team now puts a firm stake into the ground with the uberplayer.
The uberplayer takes a leaf out of the book of the UI of standalone media players. Instead of cluttering the interface with all kind of controls it only shows what is needed on demand. The different menus slide in and out as needed, there is a coverflow menu with video previews and very useful keyboard shortcuts.
Check it out - I love the amount of detail that went into it and how smooth the overall experience is.
Category: Ext
Two pieces of news related to Ext JS hit at the same time. Firstly, Ext JS in Action has gone into early access mode, and Jesus Garcia has been kind enough to give the Ajaxian community some exclusive chapters for free:
The Component Life Cycle
This article is taken from the book Ext JS in Action. As part of a primer chapter on the core fundamental concepts of the framework, this segment goes through each phase of the component life cycle, making sure that your custom widgets remain on track.
Data Submission and Loading
As part of a chapter on building and customizing input forms, this segment teaches you how to submit and load data into your newly created forms.
Manning has also given us the discount code "ajaxian35" that gives you 35% off of any version of this book. So, if you like what you see in the excerpts, get it cheap!
Ext JS 3.0 RC1.1 Released
Aaron Conran has announced the latest release candidate for Ext JS 3.0:
There are many enhancements in Ext JS 3.0, too many to include in a single post. Some of the major features in Ext JS 3.0 are the splitting of Ext Core and Ext JS, Charting for visualizations, additional User Interface improvements, CRUD-like support with Ext.data.DataWriter, Remoting using Ext.Direct, CSS enhancements to make theming easier, and Accessibility improvements - Section 508 and ARIA support. We also fixed several browser issues for the latest Chrome and Safari releases and added IE8 support.
I always love looking at how nice the widgets look, like this:
Read the post for a detailed view on the changes.
Wednesday, May 6th, 2009
Category: Flash, JavaScript, Sound, Video
Scott Schiller has updated his popular SoundManager 2 library to include new functionality made possible by Flash 9, such as:
* Full-screen MPEG-4 video (HE-AAC/H.264) and audio support
* "MultiShot" play (layered/chorusing effects)
* Waveform/frequency spectrum data
* Peak (L/R channel volume) data
* Audio buffering state/event handling
In addition, SoundManager 2 now includes improved console.log()-style debugging, a troubleshooting/help tool, and the project website sports redesigned documentation, updated API demos, and more examples.
One of those examples is a "360° UI" sound visualization; this is the screenshot at the head of the post. The website features plenty of other demos, including full-screen video playback, etc.
This obviously takes SoundManager to a whole new level and is very exciting stuff.
Tuesday, May 5th, 2009
Category: JavaScript, Performance
We have covered memoizers in the past, but John Hann has posted on a nice implementation that takes advantage of closures, arity, and recursion -- 3 concepts/features that Javascript was meant to use.
It leads to this generic version:
JAVASCRIPT:
-
-
// memoize: a general-purpose function to enable a function to use memoization
-
// func: the function to be memoized
-
// context: the context for the memoized function to execute within
-
// Note: the function must use explicit, string-serializable parameters
-
function memoize (func, context) {
-
function memoizeArg (argPos) {
-
var cache = {};
-
return function () {
-
if (argPos == 0) {
-
if (!(arguments[argPos] in cache)) {
-
cache[arguments[argPos]] = func.apply(context, arguments);
-
}
-
return cache[arguments[argPos]];
-
}
-
else {
-
if (!(arguments[argPos] in cache)) {
-
cache[arguments[argPos]] = memoizeArg(argPos - 1);
-
}
-
return cache[arguments[argPos]].apply(this, arguments);
-
}
-
}
-
}
-
// JScript doesn't grok the arity property, but uses length instead
-
var arity = func.arity || func.length;
-
return memoizeArg(arity - 1);
-
}
-
and this conclusion:
Yes, memoization is a neat concept. But why use it rather than just hand-coded caching mechanisms? It’s easy enough to write a caching routine, right? Here are a few good reasons:
- hand-coded caching mechanisms obfuscate your code
- multi-variate caching routines are bulky in Javascript
- fewer lines of code means fewer bugs
- Java programmers will think more highly of you ;)
Monday, May 4th, 2009
Category: MooTools
We've posted before about Harald Kirschner's excellent MooTools plugin FancyUpload which provides extensive functionality for handling file uploads. His newest update, FancyUpload v3.0, is a complete rewrite and includes a wealth of new features:
- The API with, separated uploader and file classes, allows an easy implementation in all kind of interfaces
- Events are dispatched for every step of the uploading process, to keep the interface as responsive as possible
- Progress tracks the loaded size, upload-rate, estimated time and other values for every file and for the batch as a whole
- File uploads can be stopped, restarted or removed anytime
- New Iframe-based class for multiple, asynchronous uploads without dependency on Flash
- Compatible with Flash 9 and 10 with the browse button as a transparent overlay or as an interactive image sprite
- Ability to change the upload URL and add
POST/GET data on runtime, customized for every file or the whole process
- Easy to localize to your favourite language with MooTools.lang, share your translations with others.
To see the uploader in action, Harald has started a showcase of demos which provide excellent examples of the plugins capabilities
MooTools based FileManager
Piggy-backing on Harald's work, Christoph Pojer extended it further by creating a new plugin that provides impressive file managing capabilities for your server.
- Browse through Files and Folders on your Server
- Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
- View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
- Nice User Interface ;)
- Upload Files via FancyUpload (integrated Feature)
- Option to automatically resize big Images when uploading
- Use it to select a File anywhere you need to specify one inside your Application's Backend
- Use as a FileManager in TinyMCE
- Provides your Client with the most possible convenience ( ;D )
The plugin is easily implemented as well:
JAVASCRIPT:
-
-
1. var manager = new FileManager({
-
2. url: 'manager.php',
-
3. assetBasePath: '../Assets',
-
4. language: 'en',
-
5. uploadAuthData: {session: 'MySessionId'}
-
6. });
-
7. $('example1').addEvent('click', manager.show.bind(manager));
-
Check out the cool demo Christoph created.
Category: JavaScript, Security
One of the dirtiest secrets of the Internet is that it runs on ads for monetization. All of us who surf the web and use systems had lots and lots of free lunches because of advertisements being shown on web sites. The only difference to TV is that they are less obtrusive and you can choose to ignore or skip them (for now).
Self-righteous developers who do not quite grasp this dirty secret use all kind of tricks to remove adversiting from web sites they surf. This could be because of not wanting to support the corporate machine but also because of security reasons. Ad code on the internet is dire - it is built to support every possible imaginable environment and work around restrictions of setups - the ads need to show, no matter what.
Basically there are two extensions for Firefox that allow you to get rid of this potentially dangerous but definitely annoying code. Ad Block Plus specifically targets advertising and removes it and NoScript goes much further by blacklisting all scripts and asking you as a user to allow what you want to allow.
From a paranoid, security-aware point of view NoScript is a great idea - you cannot trust any JavaScript until we have sandboxed scripting environments.
However, as mentioned in a discussion on SlashDot and commented in detail by Scott Schiller there has been a - quite ironic - incident lately.
NoScript had ads on their homepage (which gets loaded in your browser every time it gets upgraded, which is quite often) and the problem was that AdBlock Plus would block these - after all this is what it was built for. What people found out is that a build of NoScript actually detected the presence of AdBlock Plus and added its own homepage to the whitelist of AdBlock Plus programatically (the code that did this was obfuscated).
This poses some interesting questions:
Is AdBlock Plus a useful tool, if it can be changed that easily? On the other hand, seeing that the community found out the change this fast is a good sign.
Are changes to other installed software OK if the software that does it is free and makes the web a safer place?
Are free extensions a safe and useful way to battle unsafe advertising or is this the job of browser vendors?
Is the time of ads on web sites injected with JavaScript over?
What do you do about malware and ads on web sites?
Category: JavaScript, Library
Ah Rico. It was a big shot when Ajax jumped on the scene and Bill Scott was lashing up the accordion landscape. Now time has moved on, and Bill keeps feeding us with usability goodness, but what about Rico?
Well, Matt Brown is now on the case and has an early preview of Rico 3.0 for us to check out:
While previous versions of Rico were tightly integrated with Prototype, the new version can work with any of 5 base libraries - Prototype, dojo, jQuery, MooTools, and ext-core. The event model, Ajax model, Animation model, and CSS selector model are tied to the base library, but adapters provide common calling conventions. So now if your project uses jQuery, you can still use Rico LiveGrids!
The second big change is that Rico 3.0 is compatible with jQuery Themeroller. There are 5 built-in Rico themes that have been extended to cover not just LiveGrid, but all Rico widgets. But if one of those isn't exciting enough for you, you can now style LiveGrid and the other widgets using Themeroller. And, you can use those Themeroller themes without using jQuery - they will run with any of the 5 base libraries that Rico 3.0 is compatible with.
Great to see this old favorite doing good things. It is also fun to see how much is going "meta". Remember when ExtJS was YUI only? Now Rico can run on top of Ext..... maybe one day everyone will be able to run on top of everyone else ;)
Category: JavaScript
There was a cheer when Doug showed people that the module pattern could nicely give you somewhat "private" access in JavaScript.
At least, the Java folk definitely cheered.
Jonathan Snook on the other hand has no love for the module pattern and, after using it for some time, now avoids it:
Avoiding the Module Pattern makes debugging easier.
When it comes to troubleshooting a particular troublesome page, I like to crank open Firebug's console and play around willy-nilly. The ability to reshape objects lets me test theories before putting them into practice with real code. It also allows me to inspect things to make sure they're working as they should.
Make extending easier
Another frustration I have with it is the difficulty in being able to extend your objects. You can't just add additional functions onto it because you won't have access to the properties defined within.
JavaScript should be malleable
One of the features that attracts me to developing in JavaScript is the ability to manipulate objects so readily. As a result, the module pattern is something I try to avoid.
This is going to be contentious, with people feeling one way or another. There is certainly value to the pattern, but maybe it isn't the right choice for every team? What do you think.
Friday, May 1st, 2009
Category: Fun, Games, JavaScript
John has been working on a very fun scrabble typing game called Deep Leap and although he hasn't finished it yet, people found it (John, time to learn about .htaccess ? ;)
Just to tease him a little more and get the word out before it is finished, check it out!
Category: Cappuccino, Debugging, JavaScript, Safari
It's no secret that we're mightily impressed with the fine work of the 280 North crew, what with 280 Slides, Cappuccino, Atlas, working with SOFA to make Aristo free for other projects to use, and that whole Objective-J thing which we'll never use but we love nonetheless. ;-)
Francisco Tolmasky, one-third of the team, started blogging this week over at Alert Debugging. The inaugural post, Building a Better JavaScript Profiler with WebKit, is a bit of an opus.
He starts out pointing out a familiar sight to those of us who have profiling JavaScript:
Note the green question marks:
The reason these question marks show up is because somewhere the script in question contains an anonymous function. Anonymous functions, or lambdas as they’re sometimes referred to, are functions that you can declare just about anywhere in your program and not bother naming. Take the following code for example:
JavaScript:
-
document.addEventListener("click", function() { /*...*/ }, false);
Francisco goes on to point out that while in the case of event listeners you could simply bind the event to a non-anonymous function, for many meta-programming cases, there's no practical work-around. Further, he points out that there are often ambiguously-named functions that are also difficult to distinguish in the profiler.
displayName
To solve this problem, the Francisco introduced support for a "displayName" property into WebKit that its profiler supports, yielding much easier-to-read results:
![](http://ajaxian.com/wp-content/uploads/profiling2.png "Profiling with \\"displayName\\"")
Francisco built on this feature to create this rather nice profiling experience:
The best part about this though is that it’s not just limited to Objective-J: any language abstraction now has the opportunity to make the same use of these tools... Surprisingly enough, the folks over at Joose wasted no time incorporating this into their own library, so I’ve included links to their additions as well.
Francisco didn't stop here; he also patched the WebKit profiler to support a much better "Bottom Up View" that matches the behavior of Apple's popular Shark profiler, resulting in the ability to drill down into exactly where bottlenecks are occurring in code.
See Francisco's blog entry for more details!
Thursday, April 30th, 2009
Category: Examples, JavaScript, Yahoo!
I am a big fan of YQL, a terribly easy and fuss-free way to access APIs and mix data retrieved from them in a simple, SQL style language. Say for example you want photos of Paris,France from Flickr that are licensed with Creative Commons attribution, you can do this with a single command:
CODE:
-
select * from flickr.photos.info where photo_id in (select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='paris,france') and license=4)
Try it out here and you see what I mean.
The next step of this interface was to open it out to the public. You can define an "Open Table" as a simple XML schema and bring your own API into this interface with that.
One thing that's been burning on my tongue to tell the world about has been finally released now: YQL execute. Instead of making the YQL language itself much more complex (and thus running in circles) we now allow you to embed JavaScript in the Open Table XML that will run on the YQL server and allow you to access other web services, authenticate and scrape HTML with JavaScript and E4X. As Simon Willison put it:
This is nuts (in a good way). Yahoo!’s intriguing universal SQL-style XML/JSONP web service interface now supports JavaScript as a kind of stored procedure language, meaning you can use JavaScript and E4X to screen-scrape web pages, then query the results with YQL.
Using this, you can augment the original functionality of YQL to whatever you need. For example, you can scrape HTML with YQL using XPATH, but there was no way to use CSS selectors. Using an open table that invokes James Padolsey's css2xpath JavaScript on the server side, this is now possible.
CODE:
-
use 'http://yqlblog.net/samples/data.html.cssselect.xml' as data.html.cssselect; select * from data.html.cssselect where url="www.yahoo.com" and css="#news a"
Run this query in YQL
The data table is pretty easy:
XML:
-
<?xml version="1.0" encoding="UTF-8" ?>
-
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
-
<meta>
-
<samplequery>select * from {table} where url="www.yahoo.com" and css="#news a"</samplequery>
-
</meta>
-
<bindings>
-
<select itemPath="" produces="XML">
-
<urls>
-
<url></url>
-
-
</urls>
-
<inputs>
-
<key id="url" type="xs:string" paramType="variable" required="true" />
-
<key id="css" type="xs:string" paramType="variable" />
-
</inputs>
-
<execute><![CDATA[
-
//include css to xpath convert function
-
y.include("http://james.padolsey.com/scripts/javascript/css2xpath.js");
-
var query = null;
-
if (css) {
-
var xpath = CSS2XPATH(css);
-
y.log("xpath "+xpath);
-
query = y.query("select * from html where url=@url and xpath=\""+xpath+"\"",{url:url});
-
} else {
-
query = y.query("select * from html where url=@url",{url:url});
-
}
-
response.object = query.results;
-
]]></execute>
-
</select>
-
</bindings>
-
</table>
Check the official Yahoo Developer Network blog post on YQL execute for more examples, including authentication examples for flickr and netflix.
Category: CSS, Design, Utility
Andrée Hansson has created 960 Gridder, a grid layout tool for web developers that you can either use as an integrated component to layout your websites or use it as a bookmarklet. The grid is fully customizable but it defaults to the "960px grid standard".
960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it.
It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.
By default, it is set to work with 12 columns, 60 pixel wide columns with a 10 pixel spacer left and right of the column, making it a 20 pixel wide gutter (which actually is the ones this gridder renders).
You can see and read about the "960 standard" at http://960.gs.
Category: Showcase
David Semeria has been working on LM, another Ajax framework, for a number of years and has just announced it.
The first demo app is a highly customizable Twitter client, Twiggler, that runs in the browser.
Unfortunately nothing is public on the framework so we can't see how it actually works. It looks kinda like Squeak or X from an interface perspective, and you can see an interesting designer view.
Wednesday, April 29th, 2009
Category: Ajax
Matt Raible has posted on the analysis the he has done for a client on choosing an Ajax framework. This is the age old question "which Ajax framework should I use?" It is agonizing. It is hard. It isn't pretty. We created a dartboard:
Matts take compares Dojo, Ext JS, GWT, and YUI using various criteria that you can see here (including his ratings):
What you quickly see is that it is fairly hard to choose between the popular frameworks (and this is a specific subset that was narrowed down, hence no jQuery, Prototype, Mootools, etc).
I am interested in seeing what other criteria people use to choose.
« Previous Page —
Next Page »
