Friday, June 5th, 2009
Category: Google
, Performance, Utility
Richard Rabbat and Bryan McQuade have introduced a new tool called Page Speed that is a fully open source (e.g. it has a public bug database, process for accepting code contributions, roadmap, etc) performance Firebug plugin:
Page Speed is a tool we’ve been using internally to improve the performance of our web pages — it’s a Firefox Add-on integrated with Firebug. When you run Page Speed, you get immediate suggestions on how you can change your web pages to improve their speed. For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn’t actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.
People will obviously compare it to YSlow (I wish they called it GFast ;) but there are some differences beyond the fact that it is Open Source which will hopefully allow a community to grow:
- Not only will the tool note that images can be optimized, but it will do the work for you!
- It automatically minifies your JavaScript for you and outputs it so you can use that
- Profile Deferrable Javascript option will automatically identify candidates for lazy loading
- An enhanced net panel with a better into cache hits and misses. I believe this is written in C++, so it gets around the “in process” limitations of Firebug’s Net Panel.
- Many different rules and checks
A must see performance tool to add to your belt. You can check out all of the rules and enjoy the tool!
Thursday, June 4th, 2009
Category: Safari, Showcase, Video
Charles Ying has been playing with some new cool features that just made it to WebKit Nightly, specifically CSS effects with HTML5 video.
With some cool CSS such as below, Charles gets the nice effect of reflection live on HTML5 video (which is playing a .mov that you select)
CSS:
-
-
.reflector
-
{
-
-webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));
-
}
-
-
.fader
-
{
-
-webkit-transition-property: opacity;
-
-webkit-transition-duration: 550ms;
-
-webkit-transition-timing-function: ease-in-out;
-
}
-
You will see that in a few lines of jQuery he builds the movie list and fades in and plays the video on click, all via:
JAVASCRIPT:
-
-
jQuery.map(movies, function (movie)
-
{
-
var thumb = jQuery('<a href="#" title="' + movie.title + '"><img src="' + movie.thumb + '" class="reflector" /></a>');
-
-
thumb.click(function ()
-
{
-
var video = jQuery('<video id="cell" autoplay="true" class="fader reflector" />').get(0);
-
video.style.opacity = 0;
-
jQuery("#holder").empty().append(video);
-
-
video.addEventListener("loadstart", function ()
-
{
-
jQuery(body).addClass("darker");
-
-
setTimeout(function ()
-
{
-
jQuery(menu).css("visibility", "hidden");
-
video.style.opacity = 1;
-
}, 550);
-
}, false);
-
-
jQuery(video).attr("src", movie.link);
-
-
var finished = function ()
-
{
-
video.style.opacity = 0;
-
setTimeout(function ()
-
{
-
video.pause();
-
jQuery(menu).css("visibility", "visible");
-
jQuery(body).removeClass("darker");
-
}, 550);
-
return false;
-
}
-
-
video.addEventListener("ended", finished, false);
-
-
jQuery(video).click(finished);
-
-
return false;
-
});
-
-
jQuery("#menu").append(thumb);
-
});
-
Nicely done!
Category: Examples
Matt Schoen has written a nice image thumbnail tool that lets you zoom in on the part of the image that you want to crop for a thumbnail.
You can check out the Processing code that does the work:
JAVASCRIPT:
-
-
void setup(){
-
size(600, 600); //for internal size variables
-
frameRate(30); //set our draw rate
-
stroke(0); //all lines will be black
-
color c = color(128,128,128,128);
-
fill(c); //all filled rects will be 50% gray with 50% transparency
-
}
-
-
int xoffset = 0; //temp variable while we're dragging the mouse
-
int yoffset = 0;
-
int xpos = 0; //where to draw the image
-
int ypos = 0;
-
int startx, starty;
-
int prsd = 0;
-
PImage a; // Declare variable "a" of type PImage
-
a = loadImage("img.jpg"); // Load the images into the program
-
double s = 1.0;
-
double r = 1.0;
-
-
void draw(){ //this method is called by processingjs at the above frame rate
-
background(0); //draw a black background
-
//for testing purposes, to figure out the scaling
-
scale(s);
-
image(a, xpos - xoffset, ypos - yoffset); //draw scaled image
-
scale(1/s);
-
//for whatever reason, using "scale(1.0);" didn't reset the scale here. I have no idea why...
-
-
//draw ghosting frame
-
noStroke(); //we don't want borders on these rects
-
rect(0,0,600,100);
-
rect(0,500,600,100);
-
rect(0,100,100,400);
-
rect(500,100,100,400);
-
line(0,560,600,560);
-
-
//draw the "button" regions
-
line(300,560,300,600);
-
line(570, 0, 570, 30);
-
line(570, 30, 600, 30);
-
}
-
void mousePressed(){
-
if(mouseY> 560){
-
if(mouseX> 300){
-
s += .1;
-
}
-
else{
-
s -= .1;
-
}
-
}
-
if(mouseY <30 && mouseX> 570)
-
link("http://www.pagefoundry.net/matt/jquery/renderthumb.php?x=" + xpos + "&y=" + ypos + "&s=" + s);
-
prsd = 1;
-
startx = mouseX;
-
starty = mouseY;
-
}
-
void mouseDragged(){
-
if(prsd> 0){
-
xoffset = startx - mouseX;
-
yoffset = starty - mouseY;
-
}
-
}
-
void mouseReleased(){
-
prsd = 0;
-
xpos -= xoffset;
-
ypos -= yoffset;
-
xoffset = 0;
-
yoffset = 0;
-
}
-
Wednesday, June 3rd, 2009
Category: Adobe, Browsers, Debugging
We were excited to see the sneak preview of what was called Meer Meer, at the last Adobe MAX.
Today Adobe has released a preview of the newly branded Adobe BrowserLab:
BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web. Also, Adobe Dreamweaver® CS4 software users have access to additional functionality such as testing local and active content.
Once into the browser lab you put in the URL for the site that you want to check, and then you can see it loaded up on the server on various browsers:
This is a great tool. Being able to point my application and view how it looks in various browser in a nice UI is great. Doing onion peal analysis is great. A lot faster than other browser shot sites up there.
The team will be adding to the list of current browsers supported (OS: XP or OS X, Firefox 2/3, IE 6/7), for example adding IE 8, Chrome, etc. There is also a lot of room for other great features.
Here is my wish list:
- I would love to setup alerts and have the browser lab be watching over my site. Tell me when something goes wrong (e.g. difference in browsers in the onion peal of more than X pixels?)
- Open API: I would love to have Bespin able to send up its projects to BrowserLab. Opening a new window would work, and inline would be even cooler. They have integrated Dreamweaver so that it can do more than you can on the website. For example, you can interact with the pages and see the differences due to the live WebKit magic they have. I would love to see this on the website itself.
- Dreamweaver features online. Dreamweaver has a bunch of cool analytics that it runs on the codebase. I would love to see those available in BrowserLab, so it could tell me "hey, the CSS that you are using with this HTML structure causes a problem in IE 6". Gold!
Really glad to see BrowserLab out there, and can't wait to see progress. What would you like to see?
Category: Cappuccino, Showcase
I am sitting in the JavaOne keynote watching the event in real-time through the new application, almost.at. It aggregates tweets, links, photos and videos all in one nice interface.
You will notice that the UI has an iTunes-like feel with the bottom timeline, and it looks great. I am starting to wonder if you have to get a UI review from Sofa before you deploy a Cappuccino application? What are you hiding 280North! ;)
Category: Debugging, Utility
Jan Odvarko of the Firebug team has created a new plugin and site that allows you to export data from Firebug in the HTTP Archive Format and then also view the JSON data via a HTTP Archive Viewer.
The format will look a little like this:
JAVASCRIPT:
-
-
({
-
"log":{
-
"pages":[{
-
"startedDateTime":"Fri, 29 May 2009 23:19:08 GMT",
-
"id":"page_0",
-
"title":"Facebook | Home"
-
}
-
],
-
"entries":[{
-
"pageref":"page_0",
-
"startedDateTime":1243639103761,
-
"time":3503,
-
"sent":0,
-
"received":65978,
-
"overview":[],
-
"request":{
-
"method":"GET",
-
"path":"/home.php?",
-
"prePath":"http://www.facebook.com",
-
"port":-1,
-
"httpVersion":"HTTP/1.1",
-
"cookies":[{
-
"name":"login_x",
-
"value":"idontthinkso"
-
},
-
...
-
Hopefully we will see other tools sharing the same format so we can go in between!
Tuesday, June 2nd, 2009
Category: Browsers
Asa has an updated look at the current browser stats and trends and what is probably most interesting is the image above showing the rise of IE 8. This is something to dance about, as we see the decline in IE 6.
Notice how IE 7, the browser with the most share in these stats is in the 30's. Firefox in the 20's. WebKit browsers in the 10's. We are at an interesting point where everyone matters and no one rules the roost. Here's to browser innovation in the near future, and to developers creating fantastic Web applications.
Category: CSS, Utility
John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.
You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.
John didn't stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.
Category: Announcements
The team behind AppJet and the successful EtherPad have announced that they are discontinuing the hosting of AppJet applications. This is a shame, as the server side JavaScript programming module makes writing certain back ends a breeze, as they showed with EtherPad itself!
I hope that it will rise again, just as I hope that Concorde will fly again some day. In the letter to the community, Aaron Iba discusses why this decision was made, and options that you have to migrate. The timing is good in that AppJet runs on Rhino which runs on App Engine, so there is hope to port over there in short order. Here is Aarons letter:
Dear AppJet Community,
This is a notice that we are discontinuing the free appjet.net hosting service on July
1st,
2009, so that we can focus on EtherPad. We are
sorry that we have to do this, but we believe it is the best thing to do for both our
EtherPad users and our appjet hosting users.
We initially developed EtherPad as a technology demo of the next generation of
the AppJet platform, AppJet 2.0. Historically, many of the best developer tools
have emerged symbiotically from applications that used them. This was our
strategy with EtherPad and AppJet 2.0.
We expected EtherPad to be an impressive showcase of our technology, but we did not
expect hundreds of businesses to write us asking to pay for a pro version. It turns
out that EtherPad has some killer use cases for businesses and professional software
developers: getting everyone (literally) on the same page, whether it's meeting notes
or API definitions.
As EtherPad usage grows, we are continuing to develop the new AppJet platform alongside it.
Since much of the core technology and new architecture of EtherPad revolves around
making it really realtime, the AppJet platform has evolved into what can best be described
as a new javascript platform for realtime web apps. But this new AppJet platform has
diverged significantly from the original appjet 1.0 for which we provide free hosting.
Eventually, we may release the new AppJet platform as a standalone product, but until then,
we do not have the resources to support the legacy version of the platform.
If you are interested in keeping your app online in some form, you have some options. The
simplest way to keep your app running with minimal work is to download AppJet in a Jar and find another place to host
your app using that. The downside of AppJet in a Jar is that it requires a dedicated machine
or VPS with root access. Another alternative is Google App Engine, which has recently
released support for Java. You can run JavaScript on top of App Engine using Rhino (See here and here for more info).
We have started a new forum for discussing migration options, and we encourage
you to share your thoughts and ideas here.
From the whole AppJet Team, we wish you you the best with all your future
programming endeavors.
Sincerely,
Aaron Iba
CEO, AppJet Inc.
I know it was a tough decision for them, and we thank them for their innovation in this area. We look forward to seeing more via EtherPad and other things they cook up.
Monday, June 1st, 2009
Category: JavaScript, Server
Narwhal "a flexible JavaScript standard library" is now live thanks to:
- Tom Robinson's Jack: the web server and web application/framework agnostic interface, similar to Ruby’s Rack and Python’s WSGI. Narwhal was conceived while building Jack, and was later extracted into it’s own project.
- Kris Kowal's Chiron: a system of interoperable JavaScript modules, including a type system, base types, general-purpose functions, events, encoding, decoding, hashing, and caching.
- George Moschovitis's Nitro: a web application framework built on top of Jack.
- Kevin Dangoor's getjs: a JavaScript package manager for ServerJS implementations
Put this all together and you get Narwhal, which conforms to the ServerJS standard. It is designed to work with multiple JavaScript interpreters, and to be easy to add support for new interpreters. Wherever possible, it is implemented in pure JavaScript to maximize reuse of code between platforms.
Friday, May 29th, 2009
Category: Database, Google
Robert Kroeger has released a nice library for local database access. The Web Storage Portability Layer nicely abstracts on top of HTML5 and Gears for database access.
The WSPL consists of a collection of classes that provide asynchronous transactional access to both Gears and HTML5 databases and can be found on Project Hosting on Google Code.
There are five basic classes:
google.wspl.Statement - A parametrizable SQL statement class
google.wspl.Transaction - Used to execute one or more Statements with ACID properties
google.wspl.ResultSet - Arrays of JavaScript hash objects, where the hash key is the table column name
google.wspl.Database - A connection to the backing database, also provides transaction support
google.wspl.DatabaseFactory - Creates the appropriate HTML5 or Gears database implementation
Also included in the distribution is a simple note-taking application with a persistent database cache built using the WSPL library. This application (along with Gmail mobile for iPhone and Android-powered devices) is an example of the cache pattern for building offline web applications. In the cache pattern, we insert a browser-local cache into the web application to break the synchronous link between user actions in the browser and server-generated responses. Instead, as shown below, we have two data flows. First, entirely local to the device, contents flow from the cache to the UI while changes made by the user update the cache. In the second flow, the cache asynchronously forwards user changes to the web server and receives updates in response.
By using this architectural pattern, a web application can made tolerant of a flaky (or even absent) network connection!
You can of course take a peak at the code to see how it works, for example:
JAVASCRIPT:
-
-
google.wspl.DatabaseFactory.createDatabase = function(dbName, dbworkerUrl) {
-
var dbms;
-
if (window.openDatabase) {
-
// We have HTML5 functionality.
-
dbms = new google.wspl.html5.Database(dbName);
-
} else {
-
// Try to use Google Gears.
-
var gearsDb = goog.gears.getFactory().create('beta.database');
-
var wp = goog.gears.getFactory().create('beta.workerpool');
-
-
// Note that Gears will not allow file based URLs when creating a worker.
-
dbms = new wireless.db.gears.Database();
-
dbms.openDatabase('', dbName, gearsDb);
-
wp.onmessage = google.bind(dbms.onMessage_, dbms);
-
-
// Comment this line out to use the synchronous database.
-
dbms.startWorker(wp, dbworkerUrl, 0);
-
}
-
return dbms;
-
};
-
Nicely done. It would be great to see a version that acts as a shim and when in Gears mode manually implements the HTML5 standard API so you can write your user code to that and not a new google package.
Category: Google
"Why doesn't Google use GWT more?"
That is a question that I was asked maaaany a time. There are sites like Base and the old mashup editor and others.... but "why not something big like Gmail?"
It was always so tough because it wasn't a totally fair question.
- Google has some of the best Ajax hackers out there. Teams with that talent may not be the right people to use GWT!
- A lot of sites were written before GWT was created, and migrating something is a different proposition
Google Wave on the other hand, had the chance to really evaluate GWT and they went with it. There was a talk at Google I/O about why, and some of the cool new features they use such as runAsync that does some incredibly smart things to lazily load code when needed (and gives you a much smaller initial download).
I don't have much to add to the massive coverage that Wave has gotten today. I see two pieces. The one that most people focus on is how it looks and what the site does. It is very rich, and cool, and some people will try it and some will not like how it feels.
That isn't the piece I am most excited about. Although it is great to reboot what a communication tool could be in 2009, but I am much more excited about the APIs. A lot of servers and frameworks and languages are vying for the "real time Web server" trophy. What Wave gives you is a federated implementation AND a spec to build your own stuff. At its core I see it as a great way API to let people collaborate on a shared object. That is a fantastic building block.
When I heard about it, I immediately thought about my own world of Bespin of course. From the initial prototype we had the notion of creating a collaborative social experience with code. One feature that has long been on the drawing board can be seen here:
We want to tie chat/status/microblogging content to files and even code snippets in a project. Imagine being able to highlight some code and see not only who created it and when, but also what was discussed. The social bar on the right has some of that concept. Then down below you see the timeline view that lets you go back in time and see the code change before your eyes. Maybe you want to replay the coding that a coworker did while you were out instead of staring at the diffs? This is the kind of thing that I hope we can experiment with Wave to do. We will see!
Thursday, May 28th, 2009
Category: Video
What are the odds? At roughly the same time we saw the top two user generated video sites on the Web show us a glimpse at the future:
At Google I/O, Vic showed us an HTML 5 demo of YouTube. It looks the same, but the controls are in HTML, powering the video tag. The related videos on the right hand side had a cool new feature. As you mouse over them, they would play along. Right now seeking around in video is an awful experience. With larger pipes we will be able to do iMovie style flip-throughs to find exactly what they are looking for in a video.
DailyMotion goes a step further. They announced not only a demo area but "a new R&D platform dedicated to open video formats and web standards: openvideo.dailymotion.com". You can find 300k videos all encoded in open formats right now.
Firefox has lead the way with Ogg Theora support, but as Mark Pilgrim noted Chromium can be built with support. The question as Mark says is "Will Chrome support Theora video?!"
Let's not kid ourselves, piranhas are out there in the murky waters, so it is a balsy move for anyone to do this, especially folks with lots of $ to go after.... but we need to blast open the doors. Here's to the march of Open Video.
Wednesday, May 27th, 2009
Category: CSS
Chris Williams has been having some fun with CSS gradients on a quest to create nice looking elements without images.
He uses CSS like this:
CSS:
-
-
.albumInfo {
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
-
height: 8em;
-
padding: 1em;
-
border-top: 1px solid #858585;
-
border-bottom: 1px solid #505050;
-
}
-
-
.albumInfo h1 {
-
font-weight: bold;
-
text-shadow: 0px -1px 1px black;
-
font-size: 1.2em;
-
}
-
-
ul.tracks {
-
background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
-
width: 25.7em;
-
}
-
-
ul.tracks li.odd {
-
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
-
}
-
to create elements like this:
Tuesday, May 26th, 2009
Category: CSS, Python
We have mentioned Sass and other CSS abstraction libraries before, but somehow CleverCSS slipped by.
The nesting DSL looks similar to other solutions:
CSS:
-
-
ul#comments, ol#comments:
-
margin: 0
-
padding: 0
-
-
li:
-
padding: 0.4em
-
margin: 0.8em 0 0.8em
-
-
h3:
-
font-size: 1.2em
-
p:
-
padding: 0.3em
-
p.meta:
-
text-align: right
-
color: #ddd
-
But, you can also use attributes:
CSS:
-
-
#main p:
-
font->
-
family: Verdana, sans-serif
-
size: 1.1em
-
style: italic
-
Define constants:
CSS:
-
-
background_color = #ccc
-
-
#main:
-
background-color: $background_color
-
Implicit concatenation:
CSS:
-
-
padding: $foo + 2 + 3 $foo - 2
-
-
// returns: padding: 15 8; if $foo is 10
-
Calculations:
CSS:
-
-
// calculations with numbers / values
-
42px + 2 -> 44px
-
10px * 2 -> 20px
-
1cm + 1mm -> 11mm
-
(1 + 2) * 3 -> 9
-
-
// string concatenation
-
foo + bar -> foobar
-
"blub blah" + "baz" -> 'blub blahbaz'
-
-
// You can also calculate with numbers:
-
#fff - #ccc -> #333333
-
cornflowerblue - coral -> #00169d
-
-
// You can also add or subtract a number from it and it will do so for all three channels (red, green, blue):
-
crimson - 20 -> #c80028
-
Nice :)
Friday, May 22nd, 2009
Category: Examples, JavaScript
Content extraction is still a hot topic on the web. We have lots of great text content but not much clue as to what those texts are. To make it more obvious we do term extraction for tagging but also geo location extraction for giving the text some spacial reference.
A fairly new web service that does this for us is Yahoo's Placemaker. What it does is analyze a text (or the document defined by an HTML or feed URL) and give you back all the geographical locations that are mentioned in it. Pretty awesome, but the problem is that the API only allows for POST values and has either XML or RSS output. This means you can't do it in simple XHR because of the cross-domain problem and you can't use generated script nodes as there is no JSON output. You'd have to use a server-side proxy service. This is pretty easy with PHP and cURL as explained in this blog post but can be annoying, too.
That's why I wrote a small wrapper in JavaScript that allows JS access to the Placemaker service called JS-Placemaker. I am not hosting a proxy for you, all you need to do is get your own application ID for Placemaker and use the JavaScript which you can host yourself if you wanted to.
Analyzing a text using JS-Placemaker is as easy as this:
JAVASCRIPT:
-
Placemaker.config.appID='YOUR-APP-ID';
-
Placemaker.getPlaces('Hi I am Chris, I live in London. Originally I am from Germany',
-
function(o){
-
console.log(o);
-
},
-
'en-uk');
The console output is an object or an array of places the service returned from the text:
The first parameter is the text you want to analyze (this could be a pointer to the innerHTML of a DOM element, for example), the second is the callback function and the third the locale of the text - the demo page shows that Placemaker groks several languages.
Under the hood, JS-Placemaker uses YQL to work around the issue of proxying the request. YQL allows you to define your own data tables and even allows for doing JavaScript conversion of data on the server-side before sending it on. YQL has JSON output, so I was able to use that to access Placemaker in JavaScript.
The geo.placemaker Open Table was built by Balaji Narayanan and Tom Hughes-Croucher and can be used in YQL directly. Say you want to get the geo location data from the Slashdot Homepage in JavaScript, you can do this with the following statement in YQL.
CODE:
-
select * from geo.placemaker where documentURL="http://slashdot.org" and documentType="text/html" and appid="...the app id..."
You can choose JSON as the output and you get the data a a nice object.. Define a callback method and you could use it directly in a script node.
Have a Play with the YQL console using the Open Table, but better get your own AppID, before this one exceeds the daily limits.
« Previous Page —
Next Page »
