RSS
 

Archive for the ‘JavaScript’ Category

Which Technology To Choose?

03 Jan

Since this seems to be interesting for a lot of developers, I thought I’d share my thoughts:

Introduction

Which technologies to choose is getting increasingly more difficult for developers, web and embedded alike. Questions like “Why Java?”, “Why HTML 5 (HTML + JavaScript + CSS Modern Extensions)?’, “Why C++?”, “Why PHP?”, “Why Python?” or “Why not something else?” are not easy to answer. There are many advantages and disadvantages in using any of these programming languages and environments. Within these languages there are even more possibilities of choosing development tools called frameworks. When talking of frameworks, I mean jQuery (JavaScript), OpenLayers (JavaScript), (Geo)Ext (JavaScript), Twitter Bootstrap (HTML5), Drupal (PHP), Symfony (PHP), Java EE, Wicket (Java), Hibernate (Java), GWT (Java -> JavaScript), just to name a few I’ve had the pleasure (and pain) to work with. More and more I’m coming to the following conclusions:

Choosing The Path Of Least Resistance

Maximum Gain With Minimum Pain

This has always been my main goal with the development tools I choose. After all, computers are there to make our lives easier and not harder. You might be surprised of some of the choices I’ve made with OS and tools. While choosing the Windows or MacOS platforms seems like the easier path, Linux and yes, the command line, actually have proven easier or at least more powerful by now. So, what seems the easiest at first might be harder in the long run and vice versa. Also, Linux tooling for web or any kind of development is far better documented, supported and a lot cheaper (free). So, if you are like me (and most other people) and have more time than money, it is probably worth your while to learn and invest (time, at least) into Open Source. It has had a great return in terms of moral and now even monetary rewards. There are companies out there that invest their staff’s’ time and resources into Open Source. Among those not least Google and Facebook, the biggest Internet companies in the world!

Frameworks

Frameworks might in fact make life harder rather than easier. Sure, I use many framework in my work, but sometimes it seems like learning and choosing a framework sometimes takes longer than writing your own and using it. At least attempting to write your own framework(s) has proven as a good exercise for learning how to use them and vice versa, choosing a framework and using it might give you ideas on what to do and more importantly on what not to do. Now, I haven’t written my own complete framework as yet, but I have started doing so. I guess once you start your own framework, you are never finished. The main framework I am working on since about 2 years has been a client side spatial portal application framework called the LcrToolkit (Landcare Research Toolkit, used on http://ourenvironment.scinfo.org.nz, http://smap.landcareresearch.co.nz and others to come out soon). Thinking back now, I could have come up with a more original name for it, but that is just a side note. It is a very specialised framework for putting up spatial portal applications. Learning to use a framework is a big time commitment, whether this is Microsoft .NET, PHP (Symfony, Drupal, …) or Java’s many frameworks. So, if it were for saving time, some people say, use .NET, because some people believe the ads that the time investment will be minimal. This (in my opinion) is wrong! Learning PHP and JavaScript frameworks can be achieved much faster, because these languages (at least the basics) are very simple AND they are openly developed with tons of documentation and since they are free, there is a lot more support from developers and advocates. Not only do these developers innovate and support free products because they are super nice people and want to make the world a better place, they develop Open Source products, because these products live longer and if they are good, attract a lot of developers. This is not only because Open Source is better, but also because developers get credit for what they have achieved. Furthermore, Open Source is very competitive and therefore secure. To get your name out there as an Open Source developer, you have to be (one of) the best. That means you have to compete, BUT always in a friendly and respective manner. To be the best, you have to be prepared to fail to succeed. You have to be open to being corrected and that is not always easy to handle. To get back to Frameworks: There are a lot of them out there and I have named a few already. It seems like there are simply too many. The more I research frameworks, the more time I could spend trying them all out. The possibilities are endless. So, one must put a vigorous filter into ones research. Lately, I’ve been wanting to implement a testing framework inside the LcrToolkit and eventually went with qUnit (JavaScript), not because I think it is the best, but simply because I do not have time to try them all. qUnit is simple, well documented and works just fine. Surely, there must be more advanced testing frameworks for JavaScript, but qUnit is easy to pick up and that is the main criteria these days for me. Things like Hibernate and JPA don’t really appeal to me. They are bloated, take a lot of time to learn and don’t really gain you anything. The only benefit you get from ORMs is that you are “independent” of a particular database management system. Just use PostgreSQL for Christ’s sake. It is the most advanced database out there, and yes I mean the most advanced DBMS. It is superior to even Oracle and far better than MySQL or Oracle’s DBMS. Not that Oracle is a bad company… anyway, I’m missing the point. Frameworks: There are so many that one cannot grasp all of them. I’ve been a bit of a grasshopper on frameworks. I’ve worked with Drupal, Joomla, CiviCRM, GWT, Wicket and all of the above and have taken away that frameworks are great, BUT cannot replace good developers. You need to be thinking all the time about security, look and functionality of your app, whether it is a web app, website or even “just”  an embedded program.

To be continued… ??

 
No Comments

Posted in CSS, HTML5, Java, JavaScript, jQuery, Linux, OpenLayers, PHP, Plugins, Programming, Web Design

 

OpenLayers – Questions and Answers

09 May

Here I would like to try to answer questions about OpenLayers. Please ask in a comment.

  1. How to enable animated zooming as in http://www.tomtom.com/livetraffic/ (though it seems they implemented their own method)

    View http://openlayers.org/dev/examples/google-v3.html or http://dev.openlayers.org/sandbox/emanuel/animatedZooming/demo.html. The performance of those sites might not be as good as Tomtom’s because they might not have as fast WMS servers or the tiles are not cached efficiently. If you need fast tile seeding/caching, have a look at MapServer and in particular MapCache on the server side. Both of which are CGI programs implementing WMS.

  2. How to restrict the map to a certain area by giving lon and lat values.

    View http://openlayers.org/dev/examples/restricted-extent.html or http://openlayers.org/dev/examples/all-overlays.html (line 18; view source). Generally, I think the maxExtent property of the Map class will do the trick.

 
1 Comment

Posted in HTML5, JavaScript, OpenLayers

 

HTML5 Mastery – Anselm Bradford & Paul Haine

19 Feb

In HTML5 Mastery Anselm Bradford and Paul Haine present the complete set of new elements that HTML5 has to offer.

This is for the beginner as well as the advanced level web developer/designer to learn the new techniques for developing standard compliant web sites/pages.

If you are a web developer and know the basics of HTML and want to take that leap forward into a new era of web standards, this book is for you. Anselm and Paul describe all of the elements that have been added by the time of writing in a very efficient and concise way. Examples of use and use cases make the context in which these elements should be used very clear and explanations are kept simple in order to maximise the readers understanding. If you are looking for a book that gives a complete overview of HTML5 you have come to the right place. If you are looking for a book going into detail on the new JavaScript APIs, this book gives you an idea of what you can do but is by no means the focus of this book. The focus is more on HTML5 as in its markup elements. So, in essence, it serves the title well.

Chapter 1

Here the authors describe how HTML5 came about and what the history behind it is. The reader gets a general introduction to an HTML5 documents basic structure and its ease of implementation compared to previous standards.

Chapter 2

In Chapter 2 "Using the right tag for the right job" the old and new elements are described in detail. It is filled with a lot of information on how to effectively use the correct element in the right situation. If you need a refresher on old elements and need to know new elements, this chapter is for you.

Chapter 3

This is all about semantics. The aim of the standard is to provide for a semantic web that is better searchable and discoverable. The main thing I got out of this chapter is that HTML should be used to optimize content and not for styling. The good part here are a lot of diagrams that visually explain the concepts and outline the tags and their usage.

This is not a complete summary by all means. I merely try to give an overview and make you aware of this book’s use. This book is useful for designers and web developers alike. What I got out of it is a lot of information that I wouldn’t have even looked up because I wouldn’t have thought of it. It is definitely a must read for web oriented people who want to embrace the advances of HTML in the 21st century’s second decade. If you would like a complete reference and understanding of markup, this book is for you. If you are a pure programmer and want to know more about HTML5′s canvas and video element’s API, this book only scratches the surface. However, all you need to know is what is possible and this book is good at telling you that.

 
No Comments

Posted in CSS, HTML5, JavaScript, Review, Web Design

 

jQuery Plugin – Image Radio buttons

12 Oct

At work I’ve written this jQuery plugin. It’s only 2KB big and turns your normal radio buttons into images, you can set any images you like for src, checked and hover. Simply attach the configuration to your html input field as the class attribute as a JavaScript like object. I know you might want to attach a class to your radio buttons, but this is how far it currently is.

Here an example:

Get the JavaScript code
Get the HTML/JavaScript code

Edit: Just found this which seems to make this plugin obsolete. :-( Wish I would have found this earlier…

 
11 Comments

Posted in JavaScript, jQuery, Plugins, Programming

 

JavaScript Concepts

06 Aug

Having learned JavaScript mainly by doing, it was quite late that I figured out some important details. Please comment if you think or know that I’m wrong.

The arguments array as well as the caller instance are universal variables inside every JavaScript function. The names are self-explanatory.
An anonymous function inside another function keeps the variables in scope as in:

var somefunction = function(arg1) {
  var avar1 = 10;  
  object.onclick = function() {
    alert('arg1=' + arg1 + ' avar1=' + avar1);
  }
}
somefunction('Foo');
// "arg1=Foo avar1=10" when object is clicked on

So this means that the scope of the function defines what variables can be accessed within it, even after the function call has finished.

Another part I always found confusing in JavaScript is the “this”-keyword, but that might have to be the topic of another post.

 
No Comments

Posted in JavaScript, Programming

 

GeoExt and OpenLayers – Zoom Mode

03 Aug

Just playing around with GeoExt and OpenLayers, I figured out how to easily change the control to a zoom rectangle with minimal changes:

First create the normal and the custom control with:

var inZoom = false;
var navigation = new OpenLayers.Control.Navigation();
var ZoomBoxNav = OpenLayers.Class(OpenLayers.Control.Navigation, {
 zoomBoxKeyMask: null // this ensures that a box is always drawn
});
var zoomBox = new ZoomBoxNav();

Then all you need is a button or better Action object, which adds the appropriate control to the map:

var toggleRectZoom = function() {
  if (inZoom) {
    map.addControl(navigation);
    map.removeControl(zoomBox);
    inZoom = false;
  } else {
    map.addControl(zoomBox);
    map.removeControl(navigation);
    inZoom = true;
  }
}
 
zoomButton = new GeoExt.Action({
  text: 'Zoom Mode',
  handler: function() {
    if (inZoom) {
      zoomButton.setText('Zoom Mode');
    } else {
      zoomButton.setText('Pan Mode');
    }
    toggleRectZoom();
  }
});
 
toolBar = new Ext.Toolbar({
  items: [ zoomButton ]
});
mapPanel = new GeoExt.MapPanel({
  border: true,
  region: "center",
  // we do not want all overlays, to try the OverlayLayerContainer
  map: map,
  center: [172.1569825, -42.6109735],
  zoom: 6,
  layers: myLayers,
  tbar: toolBar
});
 
No Comments

Posted in JavaScript, Programming

 

Thoughts on JavaScript compilers

25 Jul

I think JavaScript compilers sort of defeat the purpose of a programming language. I can understand that you would want to compress JavaScript to save download time on the client side. However, it seems strange to me that another programming language writes code in another, higher level language. If the JavaScript you write is good and not highly redundant, another PL wont be able to generate it. The only place where it seems useful to me is when creating variables’ values like a count or an array of file names or similar. However, generating JavaScript from PHP or any other server side language seems to defeat the purpose of reusable code. You can in fact write highly re-usable code in JavaScript, it supports inheritance etc and libraries like jQuery make it highly compact. When it comes to deployment though, it is beneficial to have a script running that compresses the JavaScript.

Anyway, let me know your thoughts in a comment.

 
3 Comments

Posted in JavaScript, Programming