Fremus.co.za

Demistifying Life and Web Development

Archive for the 'Web Technologies' Category

JavaScript alphabetical sorting (A is less than a)

So A < a, which means if you use the sort() function and your array contains elements starting with upper and lowercase then the uppercase will appear first, i.e.:

Art, ASP.NET, LawDeed, LINQ will appear as:
ASP.NET
Art
LawDeed
LINQ

To get this working correctly you need the following function:

    charOrdA: function(a, b) {
        a = a.toLowerCase(); b = b.toLowerCase();
        if (a > b) return 1;
        if (a < b) return -1;
        return 0;
    }

This function will make sure your alphabetical sortorder is correct so that the list appears like this:
Art
ASP.NET
LawDeed
LINQ

You have to pass the function name to the sort function like this:


arrCategories.sort(charOrdA);

Note that there are no parenthesis.

  • Share/Bookmark
posted by fr3dr1k in AJAX,Web Development,Web Technologies and have No Comments

Choosing a JavaScript library/strategy

JQuery, prototype, scriptalicious, moo tools and Microsoft Ajax are all JavaScript libraries that encapsulate common functionality, or rather commonly repeated tasks, into a re-usable form. One such example is accessing DOM elements. Usually you would type document.getElementById to get to a div element for example, which also implies for each element you access you have to type document.getElementById. Most JavaScript libraries provide an easy way to access elements, usually through a dollar($). In jQuery you simply type $(‘elementID’) and in Microsoft Ajax you type $get(‘elementID’) to get to the object. So basically the library has encapsulated the document.getElementById in some JavaScript function, and that function simply returns the object. Most JavaScript libraries also provide built-in AJAX functionality, which means that the library makes it easy to create XMLHTTPRequests. The libraries also make it easy to do all kinds of special effects such as animations and modal popups.

So which one do you use? What determines which one you use? Well personally I would take a pragmatic approach and say that no matter which library you choose, you still have to learn the basic concepts such as how HTTP requests work and how things are executed. Once these things are understood you can pick a library and make sure you learn it. Whether you pick jQuery or Microsoft Ajax is irrelevant, because with both you will have to spend time learning how the API works. I often find myself in a situation where I want to jump between libraries because I feel that there is a wow feature in the one and not the other. I also find myself creating my own JavaScript at times because I just don’t need the entire library. The most important thing to know though is that you have to commit your time and energy to learning JavaScript with or without the use of a library.

  • Share/Bookmark
posted by fr3dr1k in Web Development and have No Comments

Mimicking AJAX behaviour with Generic Handler (.ashx) file uploader

Earlier today I posted a blog about using a generic handler (.ashx) to upload a file to a web server, and in the back of my head I wanted to use it somewhere neat and special, and I also want to find the most reliable and working version. And I also want to learn what the approaches are to doing so, and why not to do it a certain way, etc.

So back to the topic of the post and the first thing that needs to be understood is that you CANNOT upload files with AJAX/JavaScript. This is because of you cannot retrieve the contents of a file off a local system, and if this was so it would cause major security headaches. So what I ended up doing is following the IFRAME approach, by which you make it look as if the upload is happening all AJAX-like when in actual fact its not. So what I did was create an IFRAME:

Notice that I added a div called divTimerValue, which I use to display some progress indicator, in my case it will be busy that will grow and subside with dots. In the source file (where the IFRAME points to) I create a form:

Notice that it has the ReturnValue.ashx action and that I have added an onclick function to the submit button, which looks like this:

        function dotsAnimate() {
            parent.document.getElementById("divFrame").style.display = 'none';
            var dotspan = parent.document.getElementById("divTimerValue");
            dotspan.style.display = '';
            setInterval(function() {
                if (dotspan.innerHTML == 'busy...') {
                    dotspan.innerHTML = 'busy.';
                }
                else {
                    dotspan.innerHTML += '.';
                }
            }, 1000);
        };

The dotsAnimate function uses the setTimeout function to create the animation. The generic handler then returns some HTML that contains a javascript function that clears the timeout and prints a message in the divTimerValue div:

        context.Response.Write(@"");
        context.Response.Write(savedFileName);

And this code produces the desired result.

  • Share/Bookmark
posted by fr3dr1k in ASP.NET,C#,Web Development and have No Comments

Getting to understand JavaScripts prototypal nature

One of the things that are quite weird to get use to, from a C# developer’s perspective, is JavaScript’s prototypical nature. Check out this basic example:


var objXMLHTTP =
{
    getXMLHTTPObject: function(url,elementName) {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else {
            alert("Your browser does not support XMLHTTP!");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                document.getElementById(elementName).innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }
};
objXMLHTTP.getXMLHTTPObject("http://localhost/YieldTester/Handler.ashx", "testDiv");

The code above creates a simple XMLHTTPRequest object, but you do not create an instance of the object, you call it directly. Note objXMLHTTP.getXMLHTTPObject. In C# you might have created an object and then you instantiate it through an instance of that object. I have taken the code as is given on W3Schools and modified it a little.

  • Share/Bookmark
posted by fr3dr1k in AJAX,Web Technologies and have No Comments

Is Firefox slowly dying?

I mean really, the performance sucks! The Firebug add-on is a 600Kb+ download and it feels as if it really, really slows it down. I have for a while now switched over to Google Chrome, because it is such a fast and responsive browser. I have found one or two issues when using Facebook with Chrome, but other than that its a pretty cool browser. The thing I dislike the most about Firefox is that its process does not terminate completely sometimes, and if you start a new instance of the browser the OS complains that Firefox is still running. Even IE is way quicker than Firefox. I used Firefox for development, and specifically the Firebug and Web Developer plugins, but I have decided to switch over to Chrome, because it does have a developer plugin. IE 8 also has a developer plugin. Thats my two cents for now.

  • Share/Bookmark
posted by fr3dr1k in Browsers,Chrome,Firefox,Internet Explorer and have No Comments

Deciding on a web-based user login system

This article aims to discuss some of the web-based user login systems that are available to .NET developers, and aims to provide some clarity. In my view there are three approaches that can be followed to developing a web-based user login system for .NET:

  1. Write a custom solution
  2. Use existing ASP.NET Membership and Roles
  3. Use OpenID


Writing a custom solution

I think its easy thinking I can write my own custom login system, right? I mean what are the things I must consider for writing my own custom login system. I must consider that users will each have an unique login and that users will be grouped into roles. Thats as far as basic structure goes. But how do you maintain a user’s login session for example, or when do you consider the session over? I have also seen systems that store user passwords in clear text, which means your system MUST use some sort of hashing or encrypting of passwords. There is a lot involved in writing a custom user login system, a lot more than meets the eye.

Use existing ASP.NET Membership and Roles

The ASP.NET Membership and Roles ships with .NET 2.0, and is implemented as an API in code.

Use OpenID

Stackoverflow uses it!

  • Share/Bookmark
Tags:
posted by fr3dr1k in General,Web Development and have No Comments

using System.Web.UI.DataVisualization.Charting;

Ok so I recently got a request to do a project that uses all kinds of pretty charts, and initially the development team wanted to use Open Flash Charts, but the developer I was working with on the project was on leave for two days and in that time I decided to check out New ASP.NET Charting Control: . First thing you need to do is download the free Microsoft Chart Controls and install that on your machine. Note that once installed it creates a folder under Program Files called Microsoft Chart Controls, with another folder called Assemblies under that, which contains DLL’s for both web and application. Once you have installed Microsoft Chart Controls you can choose to add the VS 2008 add-on if you are going to be doing web-forms development, but if like me you use a lot of web services and AJAX, you may not need it. So how do you get to use it then otherwise? By adding these two lines in your web.config file:



You then have access to a range of classes by typing the fully qualified namespace like this:

System.Web.UI.DataVisualization

Once you have access to the classes you can do all sorts of interesting things. You get to choose from 35 different chart types, that you can format with colours, 3D effects. And you can also use data with it very easily with a datareader, which impressed me. You can also save your charts as images.

  • Share/Bookmark
posted by fr3dr1k in ASP.NET,C#,Web Development and have No Comments

How do you put a value to social media?

I went to a seminar on SEO and the like last year. A company called Quirk hosted it, and at the time I spoke to one of their people and she indicated to me that they have yet to establish a way to determine the value that social media can bring in terms of monetary benefit. That thought stuck in my head and accidentally I have been a Twitter user for quite some time now and this morning I came across a website called Twendz that ‘analyzes’ trends on Twitter and specifically it listed a lot of American Idol stuff. I know this has probably been done before, but by analyzing what people say on Twitter you get an insight into their thoughts and you can develop trends on those thoughts. I use Twitter to follow developers and I generally get fresh and new articles from them. Following the thoughts of developers might give you insight into their trends. A trend I see sometimes is that a lot of developers from Microsoft are either going to presentations or preparing for them. It also seems developers are developing apps that make use of social media platforms.

Social Media provides trends which to me directly relates to a measurable value. I also think Social Media relates to things such as Cloud Computing.

  • Share/Bookmark
posted by fr3dr1k in General,Web 2.0 and have No Comments

Understanding JavaScript from a C# developer’s perspective

So during the week I did a lot of JavaScript and the thing that I found most, what shall I say, mindshiftable, is that you cannot think in the classical OOP way with JavaScript, as you do with C#. JavaScript does everything in functions, and everything within JavaScript is prototypical. Inheritance is prototypical, everything is prototypical. You dont create instances of objects but rather use the objects themselves. So its kinda like a static class, where you invoke members directly.

I started this week by looking at a SOAP client written in JavaScript that makes calls to web services. What the SOAP client basically does is cache the WSDL with all the functions in it, from a web service (in this case an asmx file), and then it sends SOAP requests, processes the request and if there is a callback it does the callback function. The code for the SOAP client is based on this code.

  • Share/Bookmark
Tags: ,
posted by fr3dr1k in AJAX,C#,Web Technologies and have No Comments

HTML 5 and other new web technologies

Read the spec here. The most interesting aspect of HTML 5 to me is this:

HTML 5 will be great step forward, standardizing things like dragging and dropping elements on web pages, in-line editing of text and images on sites and new ways of drawing animations. There’s also support for audio and video playback without plug-ins, a boon for usability and a worrisome sign for Adobe’s Flash, Microsoft’s Silverlight and Apple’s QuickTime. The language will also give a boost to web apps, as there are new controls for storing web data offline on your local machine.

Source.

  • Share/Bookmark
Tags:
posted by fr3dr1k in Web Development,Web Technologies and have No Comments
Get Adobe Flash playerPlugin by wpburn.com wordpress themes