Thursday, March 11th, 2010
Category: Geo, JavaScript, Library
I just finished doing some talks on geo hacking (slides are available here) and how to use some of the Geo technologies Yahoo and Google provide as part of a University gig in Atlanta.
As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.
I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:
- Detecting the visitor's location with the W3C geo API and with IP as a fallback
- Find geo location from text
- Find location from lat/lon pair
- Find locations in a certain web document (by URL)
- Get the location for a certain IP number
And all of that in pure JavaScript. For example:
JAVASCRIPT:
-
yqlgeo.get(
-
'paris,fr',
-
function(o){
-
console.log(o);
-
}
-
)
Will get you:
JAVASCRIPT:
-
"place":{
-
"lang":"en-US",
-
"uri":"http://where.yahooapis.com/v1/place/615702",
-
"woeid":"615702",
-
"placeTypeName":{
-
"code":"7",
-
"content":"Town"
-
},
-
"name":"Paris",
-
"country":{
-
"code":"FR",
-
"type":"Country",
-
"content":"France"
-
},
-
"admin1":{
-
"code":"",
-
"type":"Region",
-
"content":"Ile-de-France"
-
},
-
"admin2":{
-
"code":"FR-75",
-
"type":"Department",
-
"content":"Paris"
-
},
-
"admin3":null,
-
"locality1":{
-
"type":"Town",
-
"content":"Paris"
-
},
-
"locality2":null,
-
"postal":null,
-
"centroid":{
-
"latitude":"48.856918",
-
"longitude":"2.341210"
-
},
-
"boundingBox":{
-
"southWest":{
-
"latitude":"48.658291",
-
"longitude":"2.086790"
-
},
-
"northEast":{
-
"latitude":"49.046940",
-
"longitude":"2.637910"
-
}
-
}
-
}
Other uses:
This gets the name and the country of a lat/lon pair:
JAVASCRIPT:
-
yqlgeo.get(33.748,-84.393,function(o){
-
alert(o.place.name + ',' + o.place.country.content);
-
})
This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)
JAVASCRIPT:
-
yqlgeo.get('visitor',function(o){
-
alert(o.place.name + ',' + o.place.country.content +
-
' (' + o.place.centroid.latitude + ',' +
-
o.place.centroid.longitude + ')'
-
);
-
});
Read all about it on my blog and enjoy!
Friday, March 5th, 2010
Category: Library, YUI, jQuery
I just came across this wonderful Gist on gitHub:
JAVASCRIPT:
-
-
var $;
-
YUI().use('*', function(Y){
-
$ = Y.get;
-
for(var p in Y) {
-
$[p] = Y[p];
-
}
-
});
-
-
// test
-
$('body').append("boo!");
-
In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?
Thursday, February 25th, 2010
Category: Accessibility, JavaScript, Library
EnhanceJS is a new library from the Filament Group, who are serious about progressive enhancement and accessibility.
What is EnhanceJS?
EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren't capable of supporting all advanced features. It's designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they're only delivered to browsers capable of understanding them.
So, you have simple markup, if you pass the test you will get "enhanced" with new CSS and JavaScript behaviour additions to take things to the next level. You can even do conditional CSS for IE:
HTML:
-
-
<script type="text/javascript" src="enhance.js"></script>
-
-
enhance({
-
loadStyles: [
-
'css/enhancements.css',
-
{href: 'css/print.css', media: 'print'},
-
{href: 'css/ie6.css', iecondition: 6}
-
],
-
loadScripts: [
-
'js/jquery.min.js',
-
'js/enhancements.js'
-
]
-
});
-
</script>
-
There are detailed docs:
Go to the bottom of their blog post and click on the low-bandwidth version to see it in action.
Friday, February 19th, 2010
Category: JavaScript, Library
Bram Stein has done some really fun work. He has taken the Knuth and Plass line breaking algorithm and implemented it using Canvas:
The goal of this implementation is to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.
You can see the subtleties at work:
Check out the linebreak code which does more than solely justification. It can also perform all sorts of alignment with an appropriate selection of boxes, glue and penalties. It is also possible to give it varying line widths to flow text around illustrations, asides or quotes. Alternatively, varying line widths can be used to create interesting text shapes.
Thursday, February 11th, 2010
Category: Canvas, JavaScript, Library
We covered GLGE, a WebGL based engine recently, and now we have a new one; Copperlicht. The engine features:
- 3D World editor: CopperLicht comes with a full 3D world editor named CopperCube.
- Many supported 3D file formats: .3ds, .obj, .x, .lwo, .b3d, .csm, .dae, .dmf, .oct, .irrmesh, .ms3d, .my3D, .mesh, .lmts, .bsp, .md2, .stl. and more, see below.
- Incredibly fast: CopperLicht is highly optimized and able to render and animate even huge 3d scenes.
- Simple to use: easily understandable SceneGraph API with lots of tutorials and examples in the documentation
- Binary compilation: Unlike other WebGL 3D Engines, CopperLicht compiles your 3D meshes into a small, binary file which downloads quickly, reducing bandwith usage for your users. Simply import your 3D files into the CopperCube editor and publish it as CopperLicht scene.
Check out some of the demos in a WebGL capable browser: Quake 3, Toy Car.
Friday, January 22nd, 2010
Category: JavaScript, Library
John-David Dalton has released Fusebox, a library that allows you to sandbox natives:
Extending JavaScript natives gives you the power to customize the language to fit your needs. You can add convenience methods like "hello world".capitalize() or implement missing functionality like [1,2,3].indexOf(2) in JScript. The problem is that frameworks / libraries / third-party scripts may overwrite native methods or each other's custom methods resulting in unpredictable outcomes. Fusebox, a limited version of the sandboxing component found in FuseJS, avoids these issues by creating sandboxed natives which can be extended without affecting the document natives.
For example:
JAVASCRIPT:
-
-
var fb = Fusebox();
-
fb.Array.prototype.hai = function() {
-
return "Oh hai, we have " + this.length + " items.";
-
};
-
-
fb.Array(1,2,3).hai(); // "Oh hai, we have 3 items."
-
typeof window.Array.prototype.hai; // undefined
-
John has a series of short screencasts to introduce the topic of sandboxed natives, how to use them, and the techniques used to make it all happen:
- Sandboxed Natives 101: Screencast One
- How to create a sandbox: Screencast Two
- How to create a Fusebox: Screencast Three
- The Final Countdown: Screencast Four
Great to learn from. It is a shame that you have to remember to use a very different way to access the types of course and that you have to do all of this magic.... but with JavaScript, it is what it is!
Monday, January 18th, 2010
Category: CSS, JavaScript, Library, Testing
Geuis Teses has released an enjoyable library called Helium that has the goal of testing your stylesheets for unused style.
You inject helium into your site (e.g. put it in an included footer) and then when you hit the first page you will have a popup asking for the pages you want to test. Helium will find the style sheets that you use and will store that information and the page information inside of localStorage. Then it will XHR around (so your styles need to be on the same host), test each page, and finally give you results.
I put up a trivial example to give it a ride and ended up with:
I ran into a minor issue with regards to relative stylesheets so I did the Github thing and forked, fixed, and pull requested. I love Github :)
Friday, January 15th, 2010
Category: JavaScript, Library, jQuery
The incredibly popular jQuery library has released jQuery 1.4 on a new website that will celebrate 14 days of jQuery.
There are a lot of new features, and as usual performance gains are showcased.
- Easy Setter Functions: For a while now, you’ve been able to pass a function into .attr() and the return value of that function is set into the appropriate attribute. This functionalilty has now been extended into all setter methods
- Ajax: A lot of enhancements to the various remoting functions including support for native JSON parsing, etags, request context, and more
- .css and .attr have been improved
- Per property easing on effects
- If you want to ensure that “this” inside a function will be permanently bound to a particular value, you can use jQuery.proxy to return a new function with that scope
- New events: focusin and focusout
And Joe Walker will be really excited to see that dojo.create has made it in! :)
JAVASCRIPT:
-
-
jQuery("<div />", {
-
id: "foo",
-
css: {
-
height: "50px",
-
width: "50px",
-
color: "blue",
-
backgroundColor: "#ccc"
-
},
-
click: function() {
-
$(this).css("backgroundColor", "red");
-
}
-
}).appendTo("body");
-
Congrats to the jQuery team. I look forward to seeing posts over the next 2 weeks that go into more detail on the new coolness.
3.6 rating from 112 votes
Thursday, December 31st, 2009
Category: JavaScript, Library
Want to show how to use your layout library? Why not mimic a well known layout and show how easy it is? That is what Volodya Kolesnikov has done with his Google Wave layout in 100 lines of code sample.
It is powered by uki (shorted from "ui kit") and Volodya told us more about it:
UKI is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with rich view-component library ranging from Slider to List and SplitPane. Here are some examples:
Simple example:
JAVASCRIPT:
-
-
uki({
-
view: 'Button', text: 'Click me',
-
rect: '10 10 100 24' , anchors: 'top left'
-
}).attachTo( document.getElementById('container') );
-
-
uki('Button[text^=Click]').click(function() { alert(this.text()); });
-
Here is a more complex example:
JAVASCRIPT:
-
-
uki(
-
{ // create a split pane...
-
view: 'SplitPane', rect: '1000 600', anchors: 'left top right bottom',
-
handlePosition: 300, leftMin: 200, rightMin: 300,
-
// ...with button on the left
-
leftChildViews: { view: 'Button', rect: '10 10 280 24', anchors: 'top left right', text: 'Clear text field' },
-
// ...and a vertical split pane on the right...
-
rightChildViews: [
-
{ view: 'SplitPane', rect: '693 600', anchors: 'left top right bottom', vertical: true,
-
// ...with text field in the top part
-
topChildViews: { view: 'TextField', rect: '10 10 280 24', anchors: 'top left', value: '0', id: 'field' },
-
// ...and a slider in the bottom
-
bottomChildViews: { view: 'Slider', rect: '10 10 673 24', anchors: 'top right left' }
-
}
-
]
-
}).attachTo( window, '1000 600' );
-
-
// on slider change update text field
-
uki('SplitPane Slider').bind('change', function() {
-
uki('TextField').value(this.value())
-
});
-
-
// on button click clear the text field
-
uki('Button[text~="Clear"]').bind('click', function() {
-
uki('#field').value('') // find by id
-
});
-
Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks the same on any of them.
Uki is still in its infancy. There may be bugs. No docs available. Certain features like disabled are still missing. Nevertheless it is already capable of build complex layouts in hours.
Tuesday, December 29th, 2009
Category: JavaScript, Library
Jeremy Ashkenas is experimenting with a new language that translates down to JavaScript. The language is CoffeeScript and I kinda like the syntax.
Jeremy told us:
I've been working on a little language with a Ruby/Potion-esque syntax that compiles into JavaScript. It tries to enforce "the good parts", convert statements into expressions automatically, and adds some extra goodies like array comprehensions and conditional assignment.
Think of it as JavaScript's less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it's just another way of saying it.
The code looks like this:
I particularly find interesting the JSON style elements (assigment, etc) and how well the code reads without function() all over the damn place. There are nice examples of easy reading in general... for example: launch() if ignition is on.
Nice work Jeremy!
Monday, December 28th, 2009
Category: Canvas, JavaScript, Library
The infamous Christian Effenberger has a new library to share:
TransM.js 1.0 allows you to add programmable image transitions to your webpages. Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. Requires no plugin/extension or any other external resource! It uses unobtrusive javascript to keep your code clean.
You can play around with an inline preview:
And check out the demos.
Wednesday, December 23rd, 2009
Category: JSON, JavaScript, Library
Lloyd Hilaiel of Yahoo! BrowserPlus fame, has a little holiday gift for us. He has created a simple library called Orderly that "is a textual format for describing JSON. Orderly can be compiled into JSONSchema. It is designed to be easy to read and write."
He shares:
A little bit of orderly...
JAVASCRIPT:
-
-
object {
-
string name;
-
string description?;
-
string homepage /^http:/;
-
integer {1500,3000} invented;
-
}*;
-
...describes a little bit of JSON...
JAVASCRIPT:
-
-
{
-
"name": "orderly",
-
"description": "A schema language for JSON",
-
"homepage": "http://orderly-json.org",
-
"invented": 2009
-
}
-
...and compiles into JSONSchema.
JAVASCRIPT:
-
-
{
-
"type": "object",
-
"properties": {
-
"name": {
-
"type": "string"
-
},
-
"description": {
-
"type": "string",
-
"optional": true
-
},
-
"homepage": {
-
"type": "string",
-
"pattern": "^http:"
-
},
-
"invented": {
-
"type": "integer",
-
"minimum": 1500,
-
"maximum": 3000
-
}
-
},
-
"additionalProperties": true
-
}
-
Go into detail on Orderly in the documentation or try the
interactive by-directional Orderly - JSONSchema area.
Tuesday, December 15th, 2009
Category: Library, Mobile, iPhone
John Gruber has spotted a library for iPhone web apps, from none other than Apple. This mysterious library, called PastryKit, seems to have flown under the radar as a Google search reveals precious little on it. In similar vein to other efforts, Apple's library provides support for native-feel websites - websites that run in Mobile Safari, but feel like native apps. (That's the objective anyway; some look-and-feel emulators are "good enough", while others get stuck in the uncanny valley).
To get hands-on with PastryKit:
- Visit http://help.apple.com/iphone/3/mobile/ from your iPhone or iPod Touch. This is an official Apple site using PastryKit. If you're feeling lazy/iPhone-challenged, watch Gruber's screencasts.
- Now with the same site in regular Safari (on your Mac/PC), open up the Develop Menu (if it's not there, enable it in Preference|Advanced). Choose User Agent > Mobile Safari 3.0 (or probably any other version number). And now you can see it in your browser. From Develop Menu, Web Inspector will let you view the script.
The HTML includes PastryKit as follows:
HTML:
-
-
<!-- PastryKit -->
-
<link rel="stylesheet" href="dist/PastryKit-ug-compact.css">
-
<script type="text/javascript" src="dist/PastryKit-ug-compact.js" charset="utf-8"></script>
-
PastryKit Javascript and PastryKit CSS are available. Unfortunately, they're a bit unclear due to compression, but Gruber nonetheless pored into the source:
PastryKit accomplishes all three of the aforementioned things — hiding the MobileSafari address bar, providing fixed-position toolbars, and providing scrolling with momentum — by disabling regular scrolling and setting up its own view hierarchy and implementing its own scrolling.
The whole question of native iPhone apps was a hot topic last month after PPK whipped up a storm on the question of web apps replacing iPhone apps. The really interesting thing here is Apple's stance. They launched the iPhone with web intended to be the platform for 3rd party apps, then switched over to native apps and haven't done much to facilitate native-style web apps since then. Is a change coming? As Gruber puts it:
The $64,000 question, though, is whether PastryKit is something Apple intends (or that a team within Apple hopes) to ship publicly. It seems like a lot of effort to build a framework this rich just for this iPhone User Guide, so I’m hopeful the answer is yes. Perhaps something integrated with the next major release of Dashcode? And, perhaps with integrated UI layout tools, along the lines of Interface Builder?
As well as apperaring in the user guide website, Chris Messina noted PastryKit apparently appears in the iTunes LP files.
Monday, December 7th, 2009
Category: JavaScript, Library
We posted on the underscore.js initial announcement and we liked what we saw.
Jeremy Ashkenas of underscore.js pinged us to let us know that it is chuggin' along and the library is now up to 0.5 and has had changes such as:
- OOP-style wrapping:
_([1, 2, 3, 4, 5]).each( ... );
- OOP wrapping allows you to chain together computations:
_([1, 2, 3, 4, 5]).chain().map( ... ).flatten().reduce( ... ).value();
- Added speed comparisons with jQuery to the test page. Because Underscore delegates to the native implementations whenever available, its "each" function is over 5 times faster than jQuery.each in Safari, and over 3.5 times faster in Firefox. Your mileage may vary, so you can use the test page to check it in your browser of choice.
- Added reduceRight / foldr, to go along with reduce / foldl.
- Added first / head, and rest / tail for car and cdr enthusiasts. It turns out that they're immensely useful on JS arguments objects.
- Added a "range" function, identical to Python's range(), for easy array initialization.
- A slew of other minor improvements, to get Underscore working out-of-the-box on Rhino, to use the native StopIteration object to break out of loops where available, and so on.
The latest Underscore.js 0.5.0 includes a couple of API cleanups, a couple of speedups, and a more comprehensive isEqual() function, with Date, NaN, and RegExp support.
Marcus Irven has ported the commonly-applicable Underscore functions to Lua, and released an Underscore.lua library this weekend.
Friday, December 4th, 2009
Category: JavaScript, Library
We all want better and better charting libraries. Dojo has some good stuff, Protovis is a good option, and there are many many more (put your favourite below!).
The latest guy in the ring is Highcharts uses either jQuery or MooTools for some common JavaScript tasks. In addition, Internet Explorer needs ExCanvas which emulates the Canvas element.
For some simple code like this:
JAVASCRIPT:
-
-
var chart1 = new Highcharts.Chart({
-
chart: {
-
renderTo: 'chart-container-1',
-
defaultSeriesType: 'bar'
-
},
-
title: {
-
text: 'Fruit Consumption'
-
},
-
xAxis: {
-
categories: ['Apples', 'Bananas', 'Oranges]
-
},
-
yAxis: {
-
title: {
-
text: 'Fruit eaten'
-
}
-
},
-
series: [{
-
name: 'Jane',
-
data: [1, 0, 4]
-
}, {
-
name: 'John',
-
data: [5, 7, 3]
-
}]
-
});
-
You can get nice charts like this:
Be sure to check out the demo gallery.
Wednesday, November 18th, 2009
Category: JavaScript, Library
Kevin Miller has updated his simply buttons library to use the button element. This library offers better looking and behaving buttons across all browsers. It does not need a javascript framework and is very easy to install and use.
It is all the rage to build a perfect button and you can get some nice ones via SimplyButtons.init()
Next Page »
