Web-Program-athon

Trying out Silverlight 2 with Eclipse

2008-10-15T23:42:06-07:00

I downloaded Silverlight 2 and set up the Eclipse development environment for Silverlight, which was quite easy to do. Then, I thought I'd download some free vector art and try to get it into a Silverlight project. Here are some screen shots of what I was trying to do with Silverlight, Eclipse and Inkscape (to convert from Illustrator's .ai into .xaml).

First, I found this neat image of a bonzai tree on Vector Art. Vector Art provides "free vector illustration file downloads" licensed under Creative Commons 3.0. I blogged about other providers before, and the list of where you can get free vector assets for your RIA is growing by the day.

Then, I opened the bonzai vector (an Illustrator .ai file) with Inkscape, an open source vector graphics editor, and saved it to Microsoft's .xaml format. Inkscape, like Eclipse, is available for Windows, Linux and Mac OS (X).

This is what the xaml looks like in a text editor, a mess of markup (not unlike svg, Inkscape's primary file format).

And finally, copy-and-pasting the xaml into a new Silverlight component in the Eclipse Silverlight IDE, which has preview pane and code-behind too.

There we go, RIA development with open source tools, and open licensed assets.

Just need to figure out how to open an Inkscape-created .xaml file in Eclipse without going straight to the source. My initial attempt resulted with Eclipse spewing some uncaught Java exceptions, so I resorted to opening the .xaml with Notepad and copying the markup into Eclipse, which worked, in that it didn't cause any more errors in Eclipse. However, as you can see, the bonzai image looks all jumbled up. I'm sure this requires just some minor tweaking to get it working properly. (Could be some WPF-vs-Silverlight xaml issues.)

I wonder if I can get Silverlight 2 on Eclipse to work with Aptana for an end-to-end JavaScript (read Jaxer-to-Managed JScript/plain old browser JS) driven RIA solution.

Anyway, some related links:
Silverlight Update Aims for Greater Adoption Through Developers
Silverlight 2 announced with plans for development support on Mac and Linux
Eclipse for developing Mono applications
Kaxaml

jQuery is LINQ for DOM?

2008-09-30T10:11:44-07:00

Has jQuery become Microsoft's default choice of query mode for JavaScript? Granted, it's a framework that sits on top of JS and not a fully language intergrated feature like LINQ. And it's also confined to querying the DOM, which is okay, because that's really where jQuery shines. Check out its featureful $() selectors which support basic XPath (sorta' like the XPathSelectElement extensions method) and CSS, even some version 3.

Here's a buncha' links which further explore querying the DOM, and LINQ-like querying for JavaScript:
Script and LINQ?
LINQ to Objects for JavaScript
Javascript LINQ-like Querying?
LINQ to JavaScript
LINQ & Lambda, Part 3: Html Agility Pack to LINQ to XML Converter
Querying HTML with LINQ to XML

Keeping in mind that now with things like the DLR and LINQ around, querying the DOM can just about as comfortably fall into either the realm of client-side scripting or server-side programming. Or anyplace in between, or both.

I mean, what's to stop someone from writing a jQuery plugin that leverages on .NET (postbacked/ajaxed, or even via Silverlight) to provide full XPath support. Or to query the DOM in C# with ScriptSharped versions of jQuery and its plugins - who won't like a unified way to automate tests for the whole web app, especially when custom plugins are involved. Possibilities are endless. (Though I suppose nobody has ever sufficiently had the need to actually sit down and do this.)

ASP.NET Heart jQuery

2008-09-29T03:13:42-07:00

Today, I'm happy to discover that, Microsoft will ship jQuery as part of its official development toolkit.

Last year, I blogged about integrating the jQuery datepicker control into webpages with existing frameworks. The example I used involved an ASP.NET webpage with a in-house developed AJAX implementation (this was before AJAX.NET), and I went on a bit about the problems I encountered. With Microsoft's inclusion of jQuery into its developer tools (read Visual Studio), it looks like these kinda' issues will be confined to blog archives. Just make sure all legacy code is updated :D

See how jQuery popularity is rocketing:

Read more around the web:
jQuery and Microsoft
jQuery now officially part of the .NET developer’s toolbox
jQuery to ship with ASP.NET MVC and Visual Studio
Introduction to jQuery Article posted
jQuery to Ship as Part of Visual Studio
jQuery, Microsoft, and Nokia
Microsoft Gets a Clue, Adopts jQuery

Helpful link for those Pesky IE6 Issues

2008-09-23T00:14:43-07:00

If only this article was published a few weeks earlier.. CSS for IE6, 6 common problems and fast ways to fix them

Online Image Editors

2008-09-18T23:46:40-07:00

I use the free Paint.NET for most of my image manipulation needs, but am quite impressed with Pixlr, web-based image editor not unlike Photoshop Express from Adobe. It runs pretty smoothly on my browser too. What these online image editors really need is offline support. Then, I might do away with my desktop apps.

Quick Web Pages with Open Source Resources

2008-09-11T07:28:30-07:00

I'd been wanting to get myself into affiliate marketing on the web for some time.

Recently, the opportunity presented itself, in the form of GDI's multi-level marketing for .ws domain names. Subscription is $10/month and this fee doesn't start for newbies until after 7 days from signing up. As you can work out, $10's still a lot when converted into Malaysian Ringgits. So, my strategy was to put everything up as fast as possible so I can decide if I still want in, before I'm charged any fees.

I'd wanted to put up a decent website for this. After googling and clicking around a little, I found Open Source Web Design. Sites like OSWD and Open Web Designs have a lot of good stuff, all open for you to use. (Check out this Smashing Mag article for loads more. I didn't have the time to go through every link, but these are the options.)

It took me a while, but I finally found my desired template without too much of a hassle. It's originally designed for a music site.

I kept the look and feel, changed the title, turned the lorem ipsum into actual content (which actually took me quite some time), filled in images with stock.xchng photos, and finished the page off with ads.

I bet the original designer'll be pretty pissed when he sees what I've done to his baby. But that's the beauty of open source designs: Take it, appropriate it. No fussing about with ground-up wireframes or worrying about browser incompatibilities, the designer's done it for you! (Also worth a mention is morgueFile, another site I ring up for my photo needs.)

In the end, after much obsessive refreshing of my web analytics tool, I think I'll give it more than the initial 7 days to prove itself.

Although it took me only a few hours of tinkering about to get the site up, it'll probably take a lot more time for traffic, and eventually (hopefully) click-throughs to start making it worth my effort and money.

The website, if you're interested, is Domain Bre.ws (loaded with affiliate links).

Take AppJet Development Offline

2008-09-10T01:18:24-07:00

You can now work on your AppJet apps offline, or more accurately, host your JavaScript apps locally for development purposes. The one AppJet .jar file that you'll need to do this requires Java 1.6 to run, and its source is available for hackers to play with. However, you'll need to use a desktop editor in place of AppJet's wonderful in-your-browser IDE.

If you think this is hot, check out Aptana's server side JavaScript solution, Jaxer. Aptana also offers a pretty nifty IDE.

I blogged about AppJet before:
AppJet your Facebook application
Creating RESTful JSON services with AppJet

Links: Coverflow, addSizes, and Some Browser Detection (JavaScript)

2008-09-04T20:58:29-07:00

Coverflow in JavaScript, display the size of a file link with addSizes.js, block IE6, and detect Google Chrome.

Better Facebook IFrame Apps with XFBML

2008-09-03T17:00:54-07:00

FB Developer update: You can now use FBML tags on IFrame-based Canvas pages with XFBML, which was previously made available for developing FB Connect sites. Other changes include cached friends list:

You can access friend lists faster using the standard JavaScript client library's FB.Facebook.apiClient.friends_get(callback) call. This call detects if the data is already rendered on a canvas page, avoiding a server request and loading the data instantly through the cross-domain communication channel.

Mapping Resources: Tutorials, MapMaker & TrueSpace for VE

2008-09-02T22:55:06-07:00

The links:

Tutorials: finding a postcode with Virtual Earth using the VEMap.Find() method (JavaScript); overlay data on maps using XSLT, KML, and the Google Maps API (JavaScript, and some PHP); and from web scraping, to geo-coded XML documents, to Google maps (C#).

Google's mid-year launch of MapMaker, a WikiMapia-alike for its Maps service.

Build 3D objects with trueSpace and export it to Virtual Earth.

More mapping resources:
Y! HTTP Geocoder API, Geohashes, browser-based geolocation
Google Maps .NET Control, GeoRSS with WCF
Mapstraction, Geocommons, GeoCoder.us with C#
OpenLayers and OpenStreetMap

Silverlight for Prism, and stuff

2008-09-02T20:17:15-07:00

Silverlight will be supporting Prism, Mozilla's desktop web app, erm, platform. I was kinda' hoping instead for Gears to make this announcement - offline feed reader and document word processing, anyone? - but I'll take this as a positive move for users and developers alike. What all this (and the recently announced Google Chrome) means is an exciting time is ahead of us.

I'm fairly excited to see what you're capable of, if Morpheus is right and all...I'm not supposed to talk about this, but if you are...a very exciting time. We got a lot to do. We got to get to it....

- Tank, The Matrix

It also means a lot more waiting before anything happens. Meanwhile, we can start working with what we have, doing things like this, create an IPhone UI with Silverlight. But as before, there's more waiting in this also, before Silverlight on Windows Mobile comes to make this really exciting and worthwhile.

Update: Looks like Chrome with its built-in Gears support has already taken care of the desktop app side of things, especially with the Application Shortcuts feature, coolness.

Google Chrome is Coming!

2008-09-01T19:34:21-07:00

Yes, by now everyone's heard of the new Google browser, I'm just wondering what it'll do for developers like us. More browsers to test for now?

Accessing Secured Web Content and Web Methods

2008-08-27T23:21:56-07:00

Some interesting tales, or rather, blog posts, from the dark side of web programming today.

The first and less sinister of the two, talks about accessing server side ASP.NET AJAX PageMethods from the client side, while the second one talks about accessing secured client side web pages from the server side. Follow? (The second article even utilizes an example that violates LinkedIn's user agreement.)

The scraping article, the second one, shows you how to do it by using a simple C# program to make HttpWebRequests with authentication data programmatically embedded in a cookie. You'll need to first get this cookie by signing into the website legit on your browser and then sniff it out with a tool like Firebug (which incidentally, having recently been updated, means you need to check this awesome tool out now).

From the first article, you'll learn how to access PageMethods using JavaScript. Which is a pretty innocent and useful thing to do. I'm just wondering if coupling this with JSON style script tag requests will let you circumvent AJAX's cross-domain restrictions on PageMethods, the same way it does for ASMX web services. Anyway, some ways you migth be able do this easily, with jQuery. Update: read more about ASP.NET security with JSON.

Your Browser 6 x Faster - Take TraceMonkey for A Spin

2008-08-23T00:18:41-07:00

John Resig hands you the keys:

If you want to try these out for yourself, just snag a nightly of Firefox 3.1, open about:config, and set the following preference to true:

javascript.options.jit.content

You should be, happily, in just-in-time tracing land. It's still buggy (hence the reason for hiding behind the preference wall) but it should be good enough to handle most web sites.

More on this:
TraceMonkey: JavaScript Lightspeed
The birth of a faster monkey

Gears 0.4, with Geolocation

2008-08-22T00:50:13-07:00

Gears 0.4 is released, and with geolocation support for these devices (via cell ID) using Windows Mobile (5 or higher) pocket IE 4.01 upwards:

* HP IPAQ hw6900
* HTC 4350
* HTC 8525
* HTC Atlas
* HTC P3300
* HTC P3450
* HTC P3600
* HTC P3650
* HTC Touch (not supported on some devices)
* HTC Touch Dual
* HTC Touch Diamond (only works in IE Mobile)
* HTC TyTN
* HTC TyTN II
* o2 XDA Orbit
* Palm Treo 750
* Samsung Blackjack II
* Samsung i780
* SCH i760

Looks like it's going to be a busy weekend for me now :D

Testing Your Web App for Different Browsers

2008-08-20T02:55:51-07:00

I recently did some front-end interface work. Using YUI helped me get the work done fast, and with only some minor frustrations. Until I received reports of layout inconsistencies in older versions of IE and Firefox. (Haven't tested with Opera or Safari yet.)

I thought using a modern CSS framework like YUI's would have eliminated these difficulties from the yesteryear. Unfortunately, I must have been doing some things rather unconventionally or against best practices. Maybe I should have started with Dreamweaver.

No matter, the milk is spilt. So to help me thoroughly test and make the site work on different browser platforms, I found these links helpful:

Install multiple versions of IE on your PC, and, Taming Your Multiple IE Standalones, articles I came to via PPK's Multiple Explorers. You can get standalone versions of IE from here too. Microsoft recommends testing within a Virtual PC, you can find the VPC images here (with IE8!)

Also, Legacy Versions of Firefox, which links to the portable editions of the Mozilla browser.

These are great because you can install them (both the Firefox and the IE versions) without messing up your computer. Just need to also test with Opera, and Safari, and I'm all done!

Links: JavaScript Dev and a Ruby-to-JS Tool

2008-08-18T19:56:11-07:00

Firebug on browsers other than Firefox? Use Firebug Lite. Also, quick scripts to view generated source and stacktrace.

Red - Ruby to Javascript translator

Links: Games written in JavaScript

2008-07-16T01:40:51-07:00

A few games written in JavaScript recently came to my attention, and these aren't your run-of-the-mill video games either. They're pushing the boundaries of what can be done inside your browser.

Of note is two Defender-style games: Spacius! A Space Adventure (with variable/expandable playing field, and nice sound via SoundManager 2); and, Defender of the Favicon (which renders the full game in the page's favicon, no kidding.)

Also, there's WolfenFlickr 3D which mashes up browser-bound Wolfenstein 3D with Flickr images, and Rockford the Invincible, the dysfunctional Boulder Dash clone written in only 20 lines of JavaScript.

Previously,
Links: Wolfenstein 3D in JavaScript

Links: OpenID

2008-06-24T20:35:06-07:00

EmailToID is an OpenID to email mapper web service.

Also, on the web today, hints of better OpenID support from both Microsoft and Google. The latter with new evidence in Google Maps code, in addition to early adopter Blogger. I also previously posted a link of the App Engine-powered OpenID provider for Google Accounts. And Yahoo! already is an OpenID provider.

Link: Firefox 3's Awesome Bar in JS

2008-06-22T19:48:08-07:00

JavaScript implementation of Firefox 3's "Awesome Bar".

Mapping resources: Yahoo! HTTP Geocoder API, Geohashes and Browser-based Geolocation

2008-06-13T00:49:08-07:00

Links:

Webmonkey takes a look at Yahoo! Geocoding API
Geocoding is the process of converting human-readable place data -- a city name, ZIP code, or address -- to latitude and longitude points that can be easily plotted on a map.

Tips & Tricks with Geohashes, another geocoding service, which provides a geohash with gradual precision degradation - instead of latitude and longitude - from human-readable address data.

Not to be confused with xkcd's Spontaneous Adventure Generator.

Geolocation Redux and a JS Library, a proposal for browser-based geolocation functionality with a JavaScript library to start getting your hands into it. Looks interesting.

Other posts in this series:
Mapping Resources: Google Maps .NET Control, GeoRSS with WCF
Mapping Resources: Mapstraction, Geocommons, GeoCoder.us with C#
Mapping Resources: OpenLayers and OpenStreetMap

Link: Databinding PDFs in ASP.NET

2008-06-12T02:38:18-07:00

An interesting article about generating PDFs in .NET using iTextSharp, a port of the iText open source Java library written entirely in C# for the .NET platform. And incidentally, elsewhere db4objects releases its Sharpen Java to C# tool for free. It converts your Java source code into C#!

Another C# to JavaScript cross-compiler

2008-06-10T23:57:15-07:00

Just when C#'s update to 3.5 felt like it's turning into JavaScript (well, a little bit, especially with the new Lambda capabilities), ECMAScript 4 started to feel like JavaScript was heading into C# territory, with more advanced types, and type and objects support, and then some. Anyway, I digress. What I'd wanted to say was what I'd found today, in a rather roundabout kind of way (via John Resig's post about writing ECMAScript 4 with Mascara which recompiles the new ECMAScript standard into classic JavaScript). It's this: JSC, an MSIL to JavaScript recompiler. You write C# code, and I quote, and the application magically appears!

Almost as cool as Script#.

Somehow related,
Ruby love in the browser
ParenScript for the javascript universal runtime

Links for Work: ASP.NETand stuff

2008-06-05T20:59:52-07:00

I've been busy at work, mostly with taking out the budgeting functionalities in our HR-based Training module and turning it into a standalone web application. This gave me a few interesting architectural challenges as I decoupled the software, and later reintegrated it back into the main product in a more modular approach. Basically, we wanted to reuse the Training module's budgeting component in our Recruitment module.

This exercise also let me play with some of the newer technologies, like LINQ and ASP.NET 3.5 which have somehow fueled my obsession with things like code base reduction, doing things declaratively with ASP.NET, and a new-found preoccupation with performance which in a lot of cases have lead me down the dark path of premature optimization. Anyway, many interesting lessons learnt, and a few more days and I'll be off this project. Here are some interesting links which I've collected:
Asynchronous ASP.NET pages
Using JSON with ASP.NET 3.5
Self Sorting GridView with LINQ Expression Trees
7 tricks to simplify your programs with LINQ
Loading and Executing JavaScript Files From JavaScript, ASP.NET AJAX
Try-catching in a single line of code

Previous work-related posts here on this blog:
Partial rendering without UpdatePanel
Detecting a BLOB's MIME type

ViewerSvg

2008-06-01T07:50:46-07:00

ViewerSvg, the Svg to Xaml converter.

Previously,
Use free vectors in your Silverlight development
Kaxaml (Silverlight tool, sorta)
XAML inspection with Silverlight Spy