My next smartphone

Bookmarks To:

jQuery 1.3 issue - part 2

I have to apologize to the jQuery team, as it seems that jQuery does work. It seems there was a very strange issue with the Finjan software we are using at the office. When I downloaded jQuery at home, all seemed to be working.. after doing a file compare between what I got at the office and what I had downloaded at home, there was 1 line (the line I mentioned in previous post), different.

Anyway, this has been a lesson for me to double check the firewall and proxies..

Bookmarks To:

jQuery 1.3 issue/bug

First of all congrats to the jQuery team with the new 1.3 release, however maybe it is me only.. but it doesn't work. I have downloaded it used it on my test sites and none of them work: there is an issue in the jQuery code.

So I checked http://api.jquery.com and the same issue..(in IE7 and FF3)



Now I was interested what went wrong, downloaded dev version, checked the error message:



Line 2097 seemed the issue:

div.appendChild( document.createElement('Comment').data = "" );

I guess appendChild assumes an Element object, however:

document.createElement('Comment').data = ""

returns an empty string. Removing the .data="" fixes the issue for now, but I have no idea how it will effect the rest of the code.
I can't imagine that jQuery team released a non working version! Am i doing something wrong or do more people have this issue?

I still have some other pages which gives errors on events, but first a smoke :)

Bookmarks To:

Year++

or as seen on reddit </2008><2009>

Bookmarks To:

Future of Windows

As Microsoft is working on its hype of Windows 7, after the unsuccessful release of Vista, the question comes up what the future of Windows will be. You probably have seen some screen shots of how Windows 7 will look like. There are some pretty cool UI elements but will this help Microsoft on making Windows 7 a success? Time will tell, however what Microsoft should be focusing on (and probably is), is the future of the OS.

In order to understand what the future of the OS and Windows will be, we will need to look at the history of the (Microsoft) OS and look back how it has evolved. It's not up to me give you a history lesson, however my intention is to explain how I have seen it evolve.

When I first starting with computers (the commodore and apple ][ era), the OS was actually a tool to make use of the hardware and start applications. The most famous OS was actually DOS and as the name mentions it was a DISK Operation System. It was really low level and user unfriendly (that is why tools like Norton Commander, etc existed).
As the computers became more powerfull, Windows 3.x was launched, which actually kicked off the PC market. The power of the graphic user interface in combination with the support for old DOS applications and the ability to "multi"-task made it popular. The multitasking (which was actually the ability to switch between running applications) also introduced many people to the clipboard and the famous control-c and control-v key combination. From a developers perspective, there was now uniformity on controls, application interface, hardware independency which was now all taken care of by the Windows OS. Remember the time in DOS when each program had its own graphic driver (EGA/VGA) and printer driver (HP codes, etc). Now these days were gone and applications became uniform and easy to develop (and to use). A big boom on software came to the market and Windows became the standard.
Windows 3.11 added the network support which allowed the users to connect to each other (and connect to internet).

Windows 3.x still felt like a shell on DOS and DOS was still very important for fine tuning your system (autoexec.bat and config.sys files). The come of Windows 95 and 32 bits processors killed the DOS era. With Windows 95, Microsoft delivered a true graphic OS which was not an addon to an existing lower level (D)OS. In combination with developments like Internet and Windows NT Server, it ruled the OS market until Windows XP.

Windows 98 and ME felt like minor upgrades without real improvements and these even felt less stable. Personally, my home desktop has been on 95 until XP was released (in the meantime my business computer was Windows NT/2000 workstation).

Windows XP, is still the ruling OS because it does what the users want: Boot quickly, best hardware and application support, connect and surf the internet.

So if we need to summarize what happened with the OS:

• Start computer, start applications and locally store data (DOS)
• Easier user interface and switching applications (Windows 3.0)
• Network connectivity, allowing easily sharing of data (Windows 3.11)
• Multitasking and a true new interface with working with computers. End of DOS. (Windows 95)
• Improvement of user experience (multimedia/video/gaming) in combination with new hardware and server systems (Windows XP)
  

As we can conclude from the above list, with each step there was an essential improvement and need for an OS update. If we look at the Vista situation, there was no trigger for the Windows community to start using Vista. Besides that it had issues with existing hardware, had high hardware requirements, was incompatible with business critical software and probably because of the reasons mentioned earlier, it was slower (compared to XP). The improvement Vista brought (like better security, fancy user interface effects like aero) was not enough to convince the majority of XP users to switch to Vista. Actually there is nothing XP can't do what Vista can't do (even all the cool gimmicks).

Having looked backed at the past, we also now have to look to the current situation and the future to try to vision what will happen to Windows. What is happening is that more and more people are switching to Windows alternatives, like Mac OSX and Ubuntu. There are a couple of reasons for this, but I think the most important reason is the independancy on the OS and OS specific applications. If we look at the average user and try to summarize what the main activities are, we will probably get the following list, from most to less time spent:

• Surfing internet
• Communication: email, instant messaging and voip
• Gaming
• Store and organize digital media like photo and video (and share them)
• Write documents (personal use or blogging)
• Easy calculations (based on spreatsheets)
• Watch media (movies, tv series, etc)
  

Personally, I have to say that, if I have no internet available on the computer, the machine feels dead and there is no trigger to use it. Having a browser and internet almost allows all the above to be accomplished (except Gaming, while the internet connectivity is very important though). So as long as we have a good browser and a machine which allows us to do the above, most people really don't care about the OS anymore. I have been using Ubuntu and Mac OSX recently and to be honest, i didn't miss anything (especially on Ubuntu). In the future when the connection speeds and the html techniques will become better and extended, almost all we need or will use will be running in the are going to be will be on the browser.

Coming back to the actually subject: the future of Windows. I truly believe that Microsoft should focus on 4 items (besides the obvious like networking, etc):

• Hardware support, allow the hardware developers to easily create drivers for the OS
• Speed, extreme fast booting without any bloat and a very reactive system
• Low level speedy graphics (directx on the OS level)
  

Besides this they should provide the OS with the fastest HTML/javascript rendering engine.
If Microsoft can achieve this, they will regain and keep their dominance in the OS market, otherwise I think they will loose the OS battle in the long term.

Bookmarks To:

Tables: The Next Evolution in CSS Layout is Now

After reading an excellent article at Vitamin about using CSS tables and how it will be next evolution for design once IE 8 is released. But I think we already should start using it, because with the help of jQuery, we can easily modify the DOM to emulate the CSS tables in IE 7 and below.

The trick is to replace the CSS table elements to real table elements for IE, which can be very easily done and the results are amazing. See my example.

Actually the code convert the elements to tables is the following:

$(document).ready(
function() {
// check for ie (it would be better to check for IE version too in the future)
if( jQuery.browser.msie){
// update the cells....
$('#container > div > div').each(
 function(){
   $(this).replaceWith('<td class="'+$(this).attr('class')+'">'+$(this).html()+'</td>')
 }
);
// update the rows
$('#container > div').each(
 function(){
   $(this).replaceWith('<tr>'+$(this).html()+'</tr>')
 }
);
$('#container').replaceWith('<table id="container_table">'+$('#container').html()+'</table>');
}
}
);

What the code actually does is converting the div elements containing the display: table-cell to td elements and the same for row (to tr elements) and finally the container div to a table.

To be honest, I am amazed with the results myself and for now on I will start using this technique for all my projects.

See below for the screenshots (as you notice, they all look the same)

Firefox:


Safari:


IE 7:


Of course what I have done here is a quick test whether it was possible. The code I have presented is just an idea and it can be optimized and generalized for common use.

Good luck on using the CSS tables!

Bookmarks To:

Using mapstraction and Yahoo maps to determine lat/lon of a location

(View demo).

During this week, I started experimenting with maps in my web applications. As a good developer, you should always google and see what is out there. Why invent the wheel again. One the first things I encountered was a javascript framework called mapstraction. It really does a nice job on working with maps (independent of the maps provider).

Having a look at the demos provided by mapstraction it was quite easy and fast to create mapping functionality. My biggest problem was the choice of the mapping provider. Having a look at the various api's and providers, there are actually 2 mapping api's which look good: Yahoo and Google. Being stubborn and not being a sheep in a flock, I have chosen for yahoo. I think yahoo is doing a very good job with their services.

Creating the map

The first thing we need to do is to get an app key from Yahoo. After we have this we can start coding. We start off by including the javascript files to our page. Then we create a div element which will hold our map. (Keep in mind that thesize of the div element needs to be specified, either directly or in the css).

Basically we are now set for coding.

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid={yourappkey}"></script>
<script type="text/javascript" src="js/mapstraction.js"></script>
<!-- the size must be specified here, or in the CSS -->
<div id="mapcontainer" style="width:300px;height:200px;"></div>

As always for javascript coding, I use jQuery. When the dom is ready, we will start
creating the mapstraction object and then initialize it.

$(document).ready(
 function() {
   var bw = $('body').width();
   // we want the map to be as width as the browser window
   $('#mapcontainer').css( 'width', bw);
   // initialise the map with yahoo API
   mapstraction = new Mapstraction('mapstraction','yahoo');
   // add some controls for it (for zooming and panning)
   mapstraction.addControls({
     pan: true,
     zoom: 'large',
     map_type: true
   });
  // this function we will use to put some markers on the map,
  // eg coming from a database
  fillmap(true);
  }
 );

Almost done... Just need to fill the map with markers. In my example I will have 1 marker which is predefined, but you can easily get this from your database (eg, by using an ajax call)

Markers on the map

In order to be able to add markers on the map, we need to define a point based on latitude and longitude. Once we have this point, we can add the marker to the given position.

function fillmap() {
 // check if we have a mapstraction defined
 if (mapstraction) {
   // set the lat/lon value of the location we would like to mark
   // in this example, it is Rotterdam (centrum of the world :))
   var lat=51.92434043666618;
   var lon=4.47817325592041;
   // get rid of existing markers (if they are)
   mapstraction.removeAllMarkers();
   // create a point with lat/lon coordinates defined
   var myPoint = new LatLonPoint(lat,lon);
   // create a marker positioned at a lat/lon
   var my_marker = new Marker(myPoint);
   // add the marker to the map
   mapstraction.addMarker(my_marker);
   // center map on the location and zoom (level 9)
   mapstraction.setCenterAndZoom(myPoint, 9);
 }
}

It is possible to add text to a marker, however this is not my goal. If you want to do that, you can use the my_marker.setInfoBubble() method.

The goal is to get the latitude and longitude values of a location the user selects on the map. In order to do this we need to add and onclick event to the map. This can easily be done by using the addEventListener of the mapstraction object.

// capture the mouse click event
mapstraction.addEventListener( 'click', onClickMap);

// on each mouse click this function will be called with the point
// object of mapstraction
function onClickMap( point) {
 // the yahoo map returns 0 for lat and 180 for lon when user
 // clicks on a control on the map (for example on the pan-left arrow)
 if (point.lat != 0) {
   // we will remove existing markers on the map (resetting the map)
   mapstraction.removeAllMarkers();
   // we add a marker at the clicked location
   mapstraction.addMarker( new Marker( new LatLonPoint(point.lat,point.lon)));
 }
}

Now we are finished. To conclude: it is very quick and easy to geo-enable your application by using mapstraction.

Demo

For a demonstration of the code, have a look at my lat/lon finder. Please look at the source to see the full implementation.

In order to accomplish the search functionality and removing of markers in the demo, I have modified/extended the mapstration.js with 2 functions (for Yahoo):

Mapstraction.findCenterAndZoom(findtxt, zoom)

Marker.setClick(onMarkerClick)

The first function allows to search on a text and then centers the found location with a zoom. The second function allows a callback function when the marker is clicked. This was a function I really missed in mapstraction.

While I was busy working on the demo, I also found it interesting to be able to retrieve the location name of clicked/entered location. This is done by using the geonames.org JSON webservices.

Finally, I also implemented the parsin of the URL with lat and lon parameters, allowing a permalink. All in all, I think it is a usefull demo ;)

Feedback/Comments

If you have any questions or remarks about this code, as always you can always contact me.

Bookmarks To: