Monday, September 8th, 2008
Category: Yahoo!
Okay I’d like to know how many of the Ajaxian readers are actually old enough to remember real arcade games which required endless amounts of quarters to become good. Yeah, those were the days when calluses on your thumbs were the norm and being able to “hold it” (ie: not go to the bathroom for long periods of time) was a HUGE advantage.
Via the YUI Blog, Kris Cieslak has re-created the arcarde hit Pacman using the YUI JavaScript library:
Warning! Ghosts are very smart, they are spending most of the time trying to find where are you hiding and when they finally finds you, they run away :)
(one of the A.I. bug!)
Smart is an understatement! Either my fingers are super slow or these ghosts are just too darn good!
Go check it out and have some fun!
Category: JavaScript
It’s truly amazing how the release of Chrome has ratcheted up the focus on JavaScript and its performance. It’s not to say that JavaScript performance wasn’t important before but with Google coming out claiming amazing speed improvements via V8, it’s really gotten the community focused on determining how to best measure these claims.
John Resig, who has been a blogging madman since Chrome was released, has been comparing performance via various postings and so far, seems very even keeled in his findings. In his latest post, he tackles the issue of the quality of these benchmarks and some possible solutions:
JavaScript Benchmarks aren’t adapting well to the rapid increase in JavaScript engine performance. I provide some simple tests for verifying this and propose a modified setup which could be used by all JavaScript Benchmarks to achieve high-quality results.
John compared the three major JavaScript performance benchmarks; WebKit released SunSpider, Mozilla released Dromaeo, Google released the V8 Benchmark. By testing the computational accuracy of the three styles of tests via a home-grown test application, John was able to come up with some interesting results that could help to improve current benchmarking applications.
Category: Mobile, iPhone
iPhone apps get a lot of attention and press and understandably so. For a lot of iPhone app developers, these tiny apps can turn into a tremendous cash cow making development for the phone platform invaluable. But considering that the iPhone is running Safari on it, it’s surprising that we haven’t seen a whole lot more buzz surrounding the use of the new Webkit functionality available to the browser.
Paul Bakaus, lead developer for the jQuery UI team, has started exploring the possibilities of what Safari can offer to web application developers:
So I wasn’t content with the things I’ve tried doing in Safari, and recently began digging through the documentation of the iPhone SDK and the actual CSS Transforms spec.
I was a bit skeptical when I first read about all the cool functions that work in Webkit iPhone, but nowhere else, because there was little documentation, and literally nothing done by other developers, no demos, no tests. I thought, surely, some students with too much free time must have jumped on that immediately?
Seems like Paul was on the right track as finding information on taking advantage of there features for the iPhone was scarce. So by using a iPhone simulator, Paul was able to start hacking at some of the built-in Webkit features, especially the 2D CSS Transforms.
Here comes the cool stuff: The perspective function seems to define how the other primitive functions behave.
Let’s have a look at a practical example: Take a look at the following three functions:
* rotateX - Rotates the element on the X axis.
* rotateY - Rotates the element on the Y axis.
* rotateZ - Rotates the element on the Z axis (By default, same as “rotate”)
Try these out - all three will give you flat, 2d animations, although they are, in fact, functions that use a 3D matrix. However, now change the -webkit-perspective property to 200, and try again. Now, you established virtual depth, and all three functions will give you incredible results.
The end result of Paul’s tinkering is a very cool flip effect that is handled within the iPhone’s browser and similar to that found in typical iPhone applications. While only a small demo, this opens up possibilities in how browser-based applications can react within the iPhone and what can be presented to mobile web users.
To see the demo, you will need an iPhone or an iPhone simulator.
Category: JavaScript
Robert Kieffer didn't like any UUID generators out there, so decided to create a lightweight randomUUID.js script. It creates RFC 4122-compliant ids:
The practice is probably a little different. The uniqueness depends on how random the numbers generated by Math.random() are. Generating truly random numbers is a notoriously tricky problem, solved in different (imperfect) ways across browser platforms and OSes. It’s difficult to say for sure what the real-world uniqueness of these numbers ends up being, but I suspect it’s more than sufficient for most purposes. Regardless, this is a weakness that all javascript UUID generators will be subject to, unless they rely on an externally-provided unique value. For example, one could use AJAX to fetch UUIDs generated by a site like http://www.uuidgenerator.com/, but that has it’s own set of issues.
JAVASCRIPT:
-
-
/* randomUUID.js - Version 1.0
-
*
-
* Copyright 2008, Robert Kieffer
-
*
-
* This software is made available under the terms of the Open Software License
-
* v3.0 (available here: http://www.opensource.org/licenses/osl-3.0.php )
-
*
-
* The latest version of this file can be found at:
-
* http://www.broofa.com/Tools/randomUUID.js
-
*
-
* For more information, or to comment on this, please go to:
-
* http://www.broofa.com/blog/?p=151
-
*/
-
-
/**
-
* Create and return a "version 4" RFC-4122 UUID string.
-
*/
-
function randomUUID() {
-
var s = [], itoh = '0123456789ABCDEF';
-
-
// Make array of random hex digits. The UUID only has 32 digits in it, but we
-
// allocate an extra items to make room for the '-'s we'll be inserting.
-
for (var i = 0; i <36; i++) s[i] = Math.floor(Math.random()*0x10);
-
-
// Conform to RFC-4122, section 4.4
-
s[14] = 4; // Set 4 high bits of time_high field to version
-
s[19] = (s[19] & 0x3) | 0x8; // Specify 2 high bits of clock sequence
-
-
// Convert to hex chars
-
for (var i = 0; i <36; i++) s[i] = itoh[s[i]];
-
-
// Insert '-'s
-
s[8] = s[13] = s[18] = s[23] = '-';
-
-
return s.join('');
-
}
-
Category: Aptana
Tom Kirkpatrick has written about writing one form, and using access control to map it to various roles using jQuery and Jaxer.
This is a simple pattern. You never want to use client code to manage access, for obvious reasons. The approach is to use the server to spew out HTML that makes sense, and then parse in the input and check access control.
Using Jaxer, this is all taken care of in JavaScript, and you can use libraries such as jQuery to do work there.
One solution to the roles issue is to manipulate the DOM on the server before it heads to the client. The magic lies in the 'server-nocache' directive which tells Jaxer than "the code should only run on the server, and that the code or should not be cached and will therefore not be available during callbacks."
HTML:
-
-
-
-
// some kind of authentication to get current users role
-
role = getRole()
-
-
// remove private form elements
-
$((role == 'employer') ? '.employee.private' : '.employer.private')
-
.remove();
-
-
// disable irrelevant form elements
-
$((role == 'employer') ? '.employee input' : '.employer input')
-
.attr('disabled', 'disabled');
-
-
// no need to inject Jaxer client framework (saves about 20k)
-
Jaxer.response.setClientFramework();
-
</script>
-
Of course, to be safe, you need to always test access control incoming, and not rely on the HTML that you send down.
Friday, September 5th, 2008
Category: Framework, JavaScript
One of the reasons Dion is such an effective editor here at Ajaxian is his sense for filtering all of the available news from the Ajax community down to about three stories a day. Truth-be-told, with all the submissions we get and what we find on our own, we could easily post 10 stories a day. But in today's saturated environment, we find three stories is about the right number to keep from overwhelming our readership with too much noise. We hope you agree, and we're interested in hearing if you feel otherwise.
A consequence of this arbitrary filtering is that some of the lesser known frameworks and libraries simply don't get covered. We never try to be king-makers, nor do we have that kind of clout--we simply can't cover everything.
We enjoyed Six Revisions' recent round-up of 10 new/up-and-coming JavaScript frameworks, many of which we've never covered, like Midori, Archetype, JUNE, UIZE, Simple.js, and fleegix.js.
The adventurous among you should take a look! Not too long ago, an up-start named jQuery shook up the existing players... some of these may be next.
Category: Podcasts
In the run up to The Ajax Experience conference coming up at the end of this month, Dion and I thought it would be fun to interview a few of the speakers. In this episode of Audible Ajax, we talk with Gavin Doughtie, a Dojo contributor and Google employee. The topics range from browser graphics to hiring good JavaScript engineers. Hope you enjoy it!
We have the audio directly available, or you can subscribe to the podcast.
Category: JavaScript
We were all very impressed with the work that the 280 North team did with 280 Slides, and they fulfilled their promise by opensourcing Cappuccino and Objective-J under LGPL:
Cappuccino is an open source application framework for developing applications that look and feel like the desktop software users are familiar with.
Cappuccino is built on top of standard web technologies like JavaScript, and it implements most of the familiar APIs from GNUstep and Apple's Cocoa frameworks. When you program in Cappuccino, you don't need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM. The unpleasantries of building complex cross browser applications are abstracted away for you.
Cappuccino was implemented using a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript. Programs written in Objective-J are interpreted in the client, so no compilation or plugins are required.
The team has done a good job doing what many opensource projects miss, giving documentation and discussion. It will be interesting to see how others take this work and produce compelling Web based products. Let us know if it is you!
Category: jQuery
The data grid above is a jQuery plugin jTPS that creates a table you can sort and page through, using nice animations, all via a simple call out:
JAVASCRIPT:
-
-
$(document).ready(function () {
-
$(’#TABLETOCONTROL’).initTable( {perPages:[5,12,15,50,'ALL']} ).controlTable();
-
});
-
Category: Games
Selim Arsever wants to make it easier to great JavaScript games, so he created gameQuery, based on jQuery.
gameQuery allows you to declare animations, which are made of one image with a succession of frames just like in a css sprite. An animation in itself doesn't exist until it's associated with a sprite.
JAVASCRIPT:
-
-
var myAnimation = new Animation({ imageURL: "./myAnimation.png", numberOfFrame: 10, delta: 60, rate: 90, type: Animation.VERTICAL | Animation.ONCE});
-
Thursday, September 4th, 2008
Category: Dojo, Flash
SitePen continues their work on Deft with a multi-file uploader:
The Dojo Toolkit now has support for multi-file uploads, thanks to the new Deft project. The dojox.form.FileUploader class embeds a hidden SWF file in the page which, when triggered, will open a system dialog that supports multiple file selection, and also file masks, which allows the user to filter their selection by file type.
Better yet, it’s fully degradable. If the user does not have version 9 or greater of the Flash Player installed it can, depending on the options you set, present the user with a standard HTML file input instead (or the option to install the latest Flash Player). The HTML form also supports multiple files, although due to browser restrictions, only one can be selected at a time. But they are all uploaded at once.
A major benefit to developers is the flexibility to supply your own styled upload button. For example, a paperclip icon toolbar button in an email application should not look like the standard file input with a text field followed by a “browse …” button. What inspired this design was working on projects where designers and clients would hand me a specification which would say, “the upload button looks like this“.
To use it? Fairly simple:
JAVASCRIPT:
-
-
var uploader = new dojox.form.FileInputFlash({
-
uploadUrl:"http.localHost/FileUpload.php",
-
button:myButton,
-
uploadOnChange: false,
-
selectMultipleFiles: true,
-
fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],
-
degradable: true
-
});
-
Want to try it out?
This comes after the YouTube uploader that uses Gears.
Category: PHP
Andi Gutmans announced Zend Framework 1.6 which includes the new Dojo support which they put to work on the site itself:
With this release we continue to provide enterprise-grade features with our new Zend_Soap component, which brings PHP-style simplicity to building and exposing SOAP web services. This component can operate in both WSDL and non-WSDL mode and makes creating or consuming a SOAP service a snap.
Preview of Tooling Project:
Zend_Tool is a component currently under development in the Zend Framework library. It provides services for generating and managing ZF-based projects. We are offering a preview release along with ZF 1.6 to collect feedback from users in a variety of environments and with different requirements. Please let us know how Zend_Tool works for you by visiting the Zend_Tool focus group site at http://tech.groups.yahoo.com/group/zf-tool/. We will also be posting an overview of Zend_Tool on the Zend Developer Zone within the next 24 hours.
Lucene 2.3 Index File Format Support:
Starting with 1.6, ZF supports version 2.3 of Lucene's index file format. This update to the format allows segments to share a single set of doc store (vectors & stored fields) files, which enables faster indexing in certain cases. This also makes Zend_Search_Lucene compatible with the latest version of the Lucene project.
Zend_Session save handler for Database Tables:
This is a database independent adapter for use with Zend_Session. Saving sessions in the database may be used for supporting sessions which must be maintained across multiple servers or kept for logging purposes.
Paginator Component:
Zend_Paginator is a new component for displaying large data sets in groups of 'pages' on a website. It can paginate data from virtually any source, and it fetches data lazily to maximize performance and minimize memory use when the data set is particularly large (as is often the case with data stored in a relational database). Zend_Paginator comes with a few data source adapters out of the box, along with an interface for implementing additional data source adapters.
Figlet Support:
Zend_Text_Figlet can create large ascii-character-based text given a figlet font and a string to render. Although they’ve been around for a long time, Figlets are most useful for captchas nowadays, especially when a lightweight solution is required and/or bandwidth is constrained. In fact, the new captcha form element includes an adapter for figlets.
ReCaptcha Service:
ReCaptcha is a very cool service that provides text-based captcha images. The answers submitted to ReCaptcha help digitize printed books. The new captcha form element also includes an adapter for the ReCaptcha service. Read more about ReCaptcha here: http://recaptcha.net/learnmore.html.
Captcha Form Element:
A form element to render and validate captchas, which are commonly used to ensure a human is submitting a form and not a (potentially malicious) bot. The captcha form element is backed by several adapters for different captcha mechanisms, including GD-based graphics, figlets, and the ReCaptcha service. Users can implement their own adapters;each adapter takes care of validation and decorators to ensure the form element looks and behaves correctly, regardless of the captcha mechanism used.
Zend_Config_Xml Attribute Support:
XML attribute support has been added to Zend_Config_Xml that allows ZF developers to write smaller XML documents that are more human-readable. This attribute support is already seeing a lot of adoption inthe Zend_Tool project.
Zend_File_Transfer Component:
This is a new component used for transferring files from one machine to another over multiple protocols. It currently supports HTTP, with an adapter interface that can be implemented to support additional protocols in the future. This component also supports validation on the transferred file.
File Upload Form Element:
This component completes the HTML form element support in Zend_Form. Files can be chosen by the user, validated for properties such as size, and uploaded to the server simply by adding a file upload form element to your forms. The element utilizes Zend_File_Transfer internally to validate the uploaded file and move it to its final destination.
Zend_Wildfire Component with FireBug Log Writer:
Zend_Wildfire is a new component supporting the Wildfire protocol: http://www.wildfirehq.org/. This feature also adds a FireBug log writer to write server-side log events to a FireBug console. A specialized FireBug Zend_Db profiler is provided to log DB profiler data to the FireBug console, as well.
Media View Helpers (Flash, QuickTime, Object, and Page):
ZF 1.6 contains new view helpers for embedding Flash, QuickTime, Objects, and Pages in a view.
Zend_Translate adds the INI file format:
This addition adds to the long list of translation file formats it already supports.
Category: Security
Eric Lawrence posted on IE 8 security issues in the beta 2 release, which include:
Restricting document.domain
In Internet Explorer 7, the following set of calls would succeed:
JAVASCRIPT:
-
-
// initial document.domain is app1.example.com
-
document.domain = "app1.example.com"; // 1. Domain property set to default value
-
document.domain = "example.com"; // 2. “Loosen” domain
-
document.domain = "app1.example.com"; // 3. “Tighten” domain
-
In Internet Explorer 8 and other browsers, the 3rd assignment will throw an exception, because app1.example.com is not a suffix of the then-current value, example.com.
Put simply, once you’ve loosened document.domain, you cannot tighten it.
Restricting Frame-Targeting
HTML5 also specifies the circumstances in which one frame is permitted to use the targetname parameter of a window.open() call to navigate another named frame or window.
The rules are meant to help prevent a window injection vulnerability. In a window injection attack, a malicious website in one browser frame attempts to “hijack” a frame or popup owned by a trusted webpage.
For instance, consider the scenario where http://contoso.com opens a popup window with the name helpPage.
JAVASCRIPT:
-
-
window.open("helpTopic.htm", "helpPage", "height=200,width=400");
-
If another page at http://evil.example.com attempts to hijack this window, like so:
JAVASCRIPT:
-
-
window.open("spoof.htm", "helpPage", "height=200,width=400");
-
…instead of navigating the helpPage window owned by Contoso.com, spoof.htm will instead open in a new browser window. While Internet Explorer 7 and 8 always show an address bar on every window, this new restriction makes window injection spoofs even less convincing.
MIME-Handling: Sniffing Opt-Out
As discussed in Part V of this blog series, Internet Explorer’s MIME-sniffing capabilities can lead to security problems for servers hosting untrusted content. At that time, we announced a new Content-Type attribute (named “authoritative”) which could be used to disable MIME-sniffing for a particular HTTP response.
Over the past two months, we’ve received significant community feedback that using a new attribute on the Content-Type header would create a deployment headache for server operators. To that end, we have converted this option into a full-fledged HTTP response header. Sending the new X-Content-Type-Options response header with the value nosniff will prevent Internet Explorer from MIME-sniffing a response away from the declared content-type.
For example, given the following HTTP-response:
HTML:
-
-
HTTP/1.1 200 OK
-
Content-Length: 108
-
Date: Thu, 26 Jun 2008 22:06:28 GMT
-
Content-Type: text/plain;
-
X-Content-Type-Options: nosniff
-
-
-
-
This page renders as HTML source code (text) in IE8.
-
</body>
-
</html>
-
XSS Attack Surface Reduction: CSS Expressions Disabled IE8 Standards Mode
Also known as “Dynamic Properties,” CSS expressions are a proprietary extension to CSS that carry a high performance cost. CSS Expressions are also commonly used by attackers to evade server-side XSS Filters.
As of Beta 2, CSS expressions are not supported in IE8 Standards Mode. They are still supported in IE7 Strict and Quirks mode for backward compatibility. While the IE8 XSS Filter can block attempts to reflect CSS Expressions as part of an XSS attack, blocking them in IE8 Standards Mode brings a performance benefit, improves standards-compliance, and acts as an attack surface reduction against script injection attacks.
Wednesday, September 3rd, 2008
Category: Browsers, HTML
