Technologies for a web developer

Just a list of technologies/languages that you should be familiar with to be a good web developer,

* Java - used in most of the webbased applications for its scalablility and simplicity. MVC architecture understanding is a plus.
* SQL - query language basics is a must to deal with DB operations. Knowledge on persistence framework like hibernate is a plus
* JavaScript - Good knowledge on JavaScript which is the base of AJAX and ultimately web 2.0
* Regular Expressions - its everywhere, java, javascript, perl, python for a lot of operations
* HTML, CSS - which defines the structure and style of a web page.
* A Scripting language - Any one of the scripting languages which helps in some mundane operations you do. Perl, Python, PHP and Ruby are various options. Some of them have even evolved as equivalents to Java
* XML - Most commonly used technology for data isolation in many of the languages and applications
* XSD + DTD - Schema for XML, XSD is a successor of XSD
* HTTP Concepts - details about a http request, headers, and alternative protocols.

Yes, you definitely need good design skills. Knowledge on data structures and algorithms is essential.

webdev reference

JavaScript References

* Gecko DOM Reference
* Devguru Reference
* MSDN Reference for DHTML (as you know this will be specific for IE)


CSS References

* W3Schools
* Html Help
* Blooberry

HTML References

* HTML 4.0

W3C Technical Reports

* HTML Spec
* CSS Spec

ECMA Javascript Standards

From European Computer Manufacturers Association

Hard Earned Learnings

My Tough Time Learnings

I mention these Learnings are as tough time because I have really spent a lot of time in debugging these issues. This blog will be a mix-up of all the learning’s in various technologies. I start with PHP.

Configuring GD(Graphics Draw) for PHP

This write up guides you in installing and Configuring GD for PHP running as a Module in Apache for windows. The fact that I was using WAMP stack from Spike source took me some more time to identify the issue.

• Get php_gd2.dll for windows – download php-5.1.2 binary from php.org. The distribution will contain a folder called “ext” which includes all the dlls. Copy this folder and paste it in your current php folder. For a WAMP stack it will be “C:\SpikeSource\oss\php5”. Also copy the dlls directly inside php-5.1.2-Win32 folder of the distribution and place it inside “C:\SpikeSource\oss\php5”. Now you have got all the dlls required for GD usage.
• Configure php.ini – You have to tell PHP to load the GD extension for usage. For WAMP stack the php.ini file is under “c:\windows” directory. Don’t be taken away by the php.ini file in C:\SpikeSource\oss\php5 directory. This is just a copy. Open the php.ini file under c:\windows. Update the location of the extension folder.

; Directory in which the loadable extensions (modules) reside.

extension_dir = "C:/SpikeSource/oss/php5/ext"

Update the extension to be used. Remove the semi-colon from the line ;extension=php_gd2.dll

;Windows Extensions

;Note that ODBC support is built in, so no dll is needed for it.

extension=php_gd2.dll

• Restart your Apache server. Now you are ready to use GD, great.
• If you receive any errors in startup like - PHP Warning: PHP Startup: Unable to load dynamic library 'C:/SpikeSource/oss/php5/ext\php_gd2.dll' - The specified procedure could not be found. – then you haven’t copied the dlls completely.
• Try the following program

header ("Content-type: image/png");

$img_handle = ImageCreate (230, 20) or die ("Cannot Create image");

$back_color = ImageColorAllocate ($img_handle, 0, 10, 10);

$txt_color = ImageColorAllocate ($img_handle, 233, 114, 191);

ImageString ($img_handle, 31, 5, 5, "My first Program with GD", $txt_color);

ImagePng ($img_handle);

?>

It should display a image for you. For further doubts contact me at prathapnirmal+gd@gmail.com.

Unicode

Unicode as I learnt

I couldn’t resist writing about Unicode as I learnt it. I know already that it’s a way of representing all the characters of various languages using a unique computer number. Following are some of the interesting jargons that I came across when I started learning Unicode.

• Grapheme – a atomic unit of the script in any language
• Glyph – a shape representing characters, punctuations and other stuff in a script
• Phoneme – it’s the usual phonetics we talk about, a pronunciation. Its composed of one or more graphemes.
• Digraph – two graphemes make a single phoneme called digraph. For example, the word ship contains four graphemes (s, h, i, and p) but only three phonemes, because sh is a digraph. An example of a trigraph is the tch in itch.
• Trigraph – three graphemes

Confused? See here - http://en.wikipedia.org/wiki/Grapheme

Above all the encodings available right now, UTF-8 is the most widely used encoding followed by ISO 8859 1. UTF-8 is a variable four byte encoding set which can represent any available character in any character set. Its becoming the wide standard in web, email and storage applications. Following are the resources I referred to read about Unicode and understand encoding,

• http://www.unicode.org/standard/WhatIsUnicode.html
• http://www.unicode.org/standard/principles.html
• http://en.wikipedia.org/wiki/Unicode
• http://en.wikipedia.org/wiki/UTF-8
• http://en.wikipedia.org/wiki/ISO_8859

Atlas Framework

Atlas Framework

Atlas is a .NET based framework that helps developers to build rich web based applications, specifically AJAX based web apps very quickly without compromising factors like cross-browser support compatibility and performance.

What it contains?

Client Side Script Library

It contains a client side script library which is actually the script framework. It contains the code for making AJAX calls, writing dynamic HTML on page, populate auto-complete forms, refresh a particular part of the page at regular intervals(like cricket scores) and a lot of other dynamic stuff you can think off.

Server Side Framework

This is kind of a module which you import in your .NET code and use some controls from this module to enable this dynamic functionalities. If you are aware of .NET it has controls which are readily available for you that you can use in your page, a .aspx page. Similarly the atlas components are controls.

Let’s take an example where I want to refresh a part of the webpage, when the user clicks a link. Then what I do actually on my .NET coding is that, I enclose the block of page which should be refreshed in a block and configure certain things to it. For this specific functionality I add a trigger to this update panel,i.e, when this updated panel should be updated(on what event). My requirement here is that it should be updated on clicking a link. So what I do is just add a line of code on server,

Please note that this is not the exact .NET syntax. I am just explaining the concept, the source indicates that source of the event is the link object, event specifies the name of the link event for which the trigger happens and for specifies the destination.

Partial Rendering

Now that you have defined all these you are done with developing a AJAX enabled page. When you view this page in your web browser and click the link only the update block gets refreshed and not the whole page. Atlas uses a concept called partial rendering which means that a part of the page only which needs to be refreshed is rendered. Meaning Script at the client side hits the same URI with a additional header value called delta = true which indicates the server that it should render only the partial content and returns the response which is further processed by the atlas script framework loaded on client.

Some Internal Stuff

What happens really to achieve all these? When you add code in the server like Updatepanel, trigger, etc at the server it in turn creates a set of XML tags and attaches the XML with the response. Along with this the framework JS atlas.js is included in the response to be loaded. This framework contains code that parses the XML attached with the response. It parses and gets information about the various dynamic functionalities like the updatepanel we discussed above, triggers associated with it. Based on the information it grabs the javascript objects hosted by the browser and binds them with specific functionalities. So there is a specific contract between the atlas.js and the code that generates the XML info that is attached at the server side.

Available Controls

Following are some of the controls that are readily available on Atlas that I have heard of,

• UpdatePanel – updates a block of page like weather information in response to a trigger
• AutoCompletionExtender – associated with a textbox. Autocompletes textboxes as you typein. At server it is associated with a datasource from which the data for autocompletion has to be fetched.
• Timer Control – refeshes particular information periodically like cricket scores
• DragOverlayExtender – enables a asp:panel to be dragged and dropped in the UI. Also supports remembering the last position
• Progress Indicator – displays the progress of a particular process that is initiated

Browser Support

Currently the browsers that are supported are

• Microsoft Internet Explorer
• Mozilla Firefox
• Apple Safari

WIP to support other browsers like Opera.

.asmx

Well apart from the partial rendering atlas also supports complete AJAX. That is instead of contacting the same URI and get a partial content, ping a different URI and get the required content, a web service. For example in case of AutoCompletionExpander we can use a .asmx command as resource. You configure the trigger to call this command. What it returns is a set of data that matches fetched from the datasource that you mentioned.

FYA

All the above stuff is what I heard from Mr.Nikhil Khotari, Microsoft Architect for Atlas. Also there might be some concepts that I have misunderstood from what I heard. So forgive me if I am wrong.

Kick Start Web Dev Blog

This the place where i start posting my web dev blogs