Sessions on Web Development

Good Job NED Volunteers Thumbs up 


Source: http://www.devnextug.org/2011/04/sessions-on-web-development-using.html

On request of students from NED University of Engineering and Technology, DevNext User Group recently organized two day sessions on Web Development using ASP.NET at NED University. The sessions were held on 12th and 19th March, 2011.

The purpose of facilitating such sessions was to provide students firm understanding of web architecture and development using HTML, JavaScript, CSS and ASP.NET.

We would like to thank speaker and our volunteers at NED University for organizing such useful sessions.

About Speaker:

Mr. Anas Raza is a graduate in Computer and Information System from NED University and currently working as Software Engineer at ITIM Pakistan.

About DevNext User Group:

DevNext is a user group which has been created with the intention of providing a platform for the Next Generation Designers & Developers sharing and discussing knowledge regarding different tools and technologies. Our mission from inception has been to develop a peer group of developers, designers, architects, and managers who are interested in learning, sharing and growing their knowledge and capabilities. The group’s vision is to provide members with a forum to hear top industry experts speak, learn and teach others who are interested in the same technologies as you and are facing the same challenges.

Interested in organizing technology sessions in your University? Please contact us at contact@devnextug.org and we will be happy to assist you.

Beauty of jQuery

Since last year when we discussed jQuery in one of our User Group Meeting, I have been amazed by the power of jQuery. A month ago, I also tweet a picture “Say No to JavaScript without jQuery” and that is because with CSS and jQuery we can exploit the power of JavaScript/CSS, by writing just few lines of code, plus it allow you to make your HTML markup clean and independent of script/event logic. If you take a look at the twitpic below, you will observe that markup does not register any event rather the binding on click event has been taken care inside script tag using jQuery selectors.

twitpic

And that is not the all. To further decouple it, we can use CSS class instead of button Id “btnTest” and then move the JavaScript in .js file. I hope this make sense to you! (if not than don’t worry, just continue reading…)

But today what I am going to share is a real world scenario of how jQuery helped me in observing change in any input element of page.

Usually, we have requirement on web form that when users presses a cancel button after entering any information on page then we have to prompt a cancel confirmation dialog like:

Cancel Dialog

And I really don’t know what is the best way to do this but what I have observed is that developers have done this by registering onchange JavaScript event on every single input element that needs to be tracked down. Something like snippet below:

Observing Change without jQuery

along with some script:

JavaScript without jQuery Library

So what it does is that whenever users enters any text in text input element or change the value of dropdown then it will fire the method SetChangeVariable() which will set value of isChanged to true, which means we need to show cancel confirmation dialog.

Now imagine if I have a page with more than 20-30 fields then I have to go and manually wire the onchange method. Let’s see what jQuery and CSS together offers to us.

Suppose that we have a CSS class element

CSS Element

Then we will assign each element class “TrackChange” that needs to be taken care of as in code snippet below:

Observing Change with CSS

along with some JavaScript that uses jQuery library:

JavaScript with jQuery

What above code does is that when document is ready, that’s what $(document).ready does, its going to select all elements with class assigned “TrackChanged” through one of its selector $(“.TrackChange”) and wired up event of change and set global variable isChanged to true. That’s it!

By using CSS class you can now move the JavaScript in .js file and make your HTML markup clean…

If you don’t like assigning CSS class, another great thing you can do with jQuery is to wire change event on all input elements using input selector:

jQuery Input Selectors

and no need to assign any CSS class! Isn’t that amazing?

That is all for today. Happy Coding!

Microsoft Ajax Minifier

One good thing I came across at the Microsoft MVP Summit is that Microsoft released Ajax Minifier, a tool to compress the size of Javascript (.JS) and Cascading Style Sheets (.CSS) files. Later I found a Scott Gu post on it.

The Microsoft Ajax Minifier is a small tool to remove unnecessary content from your js or css file. It can bring down the size of js file by 60%. You can download the Ajax Minifier from here.

After installing the tool, you will get a command prompt

image

and let’s say I have a js file with name “Validations.js” Let’s try minifying the file using this tool

A point to note here is:
Original Size: 7710 bytes; reduced size: 4918 bytes (36.2% minification)
Gzip of output approximately 1586 bytes (67.8% compression)

Currently the Ajax Minifier ships with two modes of

  1. Normal Crunching
  2. Hyper Crunching

With normal mode, it removes extra whitespace, all comments etc. When you use Hyper crunching mode it takes some more additional steps that includes shorting the name of local variables etc.

In order to use hyper crunching mode you need to add –hc switch in the command line. For instance:

ajaxmin validations.js –hc –o validations.min.js

So go ahead and try it out. Another great thing is that Ajax Minifier can be integrated with Visual Studio as well, which I will cover in the next post.