So you want to be a .net developer? Web, Backend, Middle Tier? You’re asking yourself where do I start?

So occasionally I get asked from friends and friends of friends and friends of friends of friends, I want to be a <insert, programmer, web developer, build websites, etc>.  How do I get started?

This is a loaded question. There so many directions to go and languages to choose from and then there is the college route, certification route or both. Then you have the Unix side of the house, the Microsoft side, now the all popular apple and android sides. Web platform, OS platform or mobile platform. Then you have to figure out where you like to work the most; on the front-end UI, back-end logic or maybe the database layer.

So for this article I’m going to with a bunch of assumptions.

  • You want to build web applications (You can apply this to OS applications, website and mobile later)
  • I’m assuming college doesn’t matter and is not needed (though a Computer Science degree would be awesome)
  • You aren’t doing it for the money (more on this later)
  • You’re following the Microsoft track using .NET (though the same techniques can be applied to other languages and application types, got to start somewhere)

 

You are not in it for the money:

This is my biggest pet peeve. If you are trying to be a programmer because you think they get paid a lot. Stop right now and go find something else to do.  Do what you like not because it pays a lot. Those type of programmers are the worst I ever meet. You go to work and do your job and try to get all your learning from on the job training. You go home and don’t give a crap about your job or try and don’t try to learn and enhance your skill sets at home.  You drain the life out of all the other programmers at work. I’ve seen this time and time again.

If you want to be a good programmer, or awesome, programming needs to be your hobby. You need to go home after work and continue learning.  You have to have a desire to be on the computer; programming your own projects for fun to learn new techniques after work. At home at night on the weekends. In life you should do what makes you happy and what you enjoy. Not because you think you can make a lot of money. If you don’t enjoy programming, don’t do it. I can go on about this so I’ll stop here.

 

What to Learn:

  • The Presentation Layer (or what we can the “Front-End” work): This is the visual aspects of your application and interactions. What it looks like how it functions.
    • HTML – Must Learn
    • CSS – You can get away with it if you don’t like front-end work but you should learn the basics
    • Javascript – You can get away with it if you don’t like front-end but you should learn the basics
    • jQuery – This heavenly needed for good interactions on your web application but you could get away with this if you don’t like the front-end. However, you should have a basic understanding.

Training Suggestions: On the web. Start with W3Schools. Great site, simple and straight forward. Soak in all the information you need. Always a good resource.

  1. W3Schools – For each section complete the “Basic” section. HTML, HTML5, CSS, CSS3, HTML DOM, JavasScript, jQuery,
  • The Business or Middle Tier Layer (or what we call the “Back-End”): This is the logic and heart of your application. Taking the information provided in the Presentation Layer and doing something with it. Calculations, data manipulation, saving it to the database etc..
    • .NET C# (or VB.NET but C# is more popular now a days and usually pays more (being that you are doing this even as a hobby, then yes pay is important and a side-benefit.))
    • ASP.NET MVC3 (this is newer then ASP.NET WebForms which is just as popular, but MVC is the future)

Training Suggestions: On the web and study books for certifications. Some people knock certifications, usually the ones that don’t have one. Certifications won’t make you great, only experience will do that. However, Certifications will teach you everything you should know and aspects that others don’t know because they don’t study for the certs. Small things here and there that add up. As well as showing to an employer that you might not have experience but you definitely can program and know the basics if you have your certs. More about certs in an updated post. Old post here.

  1. ASP.NET is a great place to get started. Specifically ASP.NET / MV3 site. Go through Chapters 1 through 12.
  2. C# Station – I’d stay maybe go to chapter 8 or 10.
  • The Database Tier (Also, part of the “Back-End”): This is storing data. Manipulating data. How to retrieve the data and run reports or searches.
    • First learn some SQL basics from W3Schools. Go through all the SQL Basic chapters.
    • Optional: Then you can learn say T-SQL which is Microsoft language of SQL built off of basic SQL. However, you don’t need this yet and learn as you go after W3Schools.

This is enough to get you started. Learn all the basics then figure out where you like to play the most.

  • Advanced Items: Other things you should know.

My Customized version of ClarkLab’s Animated Drop Down Menu with jQuery

 

I found this post on Clarklab.net, Animated Drop Down Menu with jQuery.  Looked simple to use and I loved that I didn’t need any plug-in files like other “plug-ins”. I guess this really isn’t a plug-in.  Just nice, basic jquery and css.

They give the step by step and why you nee each line of code.

This is their version and their demo is here.

Row colors

 

 

My Need for it and How I Used

I had an application that had two date pickers.  The goal was to make it easy for the user to be able to set the date on the second date picker based on the date from the first date picker. Adding X days to the date in the first date picker.

I’m using Telerik’s AJAX Calendar control for my date picker so some of the Javascript you’ll see is specific to their Client API.

image

I followed their steps but altered the CSS and UL list of course.

My CSS:

<style type="text/css">

.menu_head{border:0; margin-top:10px}
.menu_body ul, li{margin:0; padding:0; list-style:none;}
.menu_body {display:none; width:100px; margin-left:-40px; font-size:small;}
.menu_body li a:hover{font-weight:bold;}

</style>

Added my UL list..

<img src="/Images/BlueArrowRight.png" alt="Copy Date Over" height="24px" width="24px" class="menu_head" />
<ul class="menu_body">
    <li><a href="javascript:CopyDate(0);">Copy Date</a></li>
    <li><a href="javascript:CopyDate(15);">Add 15 days</a></li>
    <li><a href="javascript:CopyDate(30);">Add 30 days</a></li>
    <li><a href="javascript:CopyDate(45);">Add 45 days</a></li>
    <li><a href="javascript:CopyDate(60);">Add 60 days</a></li>
    <li><a href="javascript:CopyDate(90);">Add 90 days</a></li>
    <li><a href="javascript:CopyDate(120);">Add 120 days</a></li>
</ul>

 

Then added my jQuery.. I’m sure there is a better way to close the menu, but I threw it in my CopyDate() method. Again, note that picker.get_textBox() and get_selectedDate() are Telerik Client API methods on their controls.

<script type="text/javascript">
    $(document).ready(function() {
        $("ul.menu_body li:even").addClass("alt");

        $('img.menu_head').click(function() {
            $('ul.menu_body').slideToggle('medium');
        });

        function CopyDate(TotalDays) {
            AddDueDate(TotalDays);
            $('ul.menu_body').slideToggle('medium');
        }

        function AddDueDate(TotalDays) {
            if (TotalDays >= 0) {
                var picker = $find("<%= calDateOfLetter.ClientID %>");
                var textBox = picker.get_textBox();
                var destination = $find("ctl00_ContentPlaceHolder1_calDueDate_calDatePicker");
                var destTextbox = destination.get_textBox();

                var CurrentDate = picker.get_selectedDate();
                CurrentDate.setDate(CurrentDate.getDate() + parseInt(TotalDays));
                destination.set_selectedDate(CurrentDate);
                picker.hidePopup();
            }
        }
    });
</script>

 

Finished Version (yes the dates are old, the record I’m testing on happens to be old)

image

Clicking on the arrow you get the menu..

image

Click on a date and it gets added and the menu closes..

image

Works great! I love it, client loves it, end-user loves it.  Thanks Clarklabs!

20 jQuery Methods to use

 

Great post on Net.tutsplus on 20 Helpful jQery Methods you Should be Using.

  1. after() / before()
  2. change()
  3. Context
  4. data() / removeData()
  5. queue() / dequeue()
  6. delay()
  7. bind(), unbind(), live(), and die()
  8. eq()
  9. get()
  10.   grep()
  11.   Pseudo-Selectors
  12.   isArray() / isEmptyObject() / isFunction() / isPlainObject()
  13.   markArray()
  14.   map()
  15.   parseJSON()
  16.   proxy()
  17.   replaceAll() / replaceWith()
  18.   serialize() / serializeArray()
  19.   siblings()
  20.   wrap() / wrapAll() / wrapInner()

 

Of course see the original post on the details of each of these.

5 Ways to Make Ajax Calls with jQuery

Such a great post I had to back it up for reference sake, in case it ever goes down.

Source: http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

By: Piao Yishi

Source File:

Live Demo: http://nettuts.s3.amazonaws.com/412_ajaxCalls/DEMO/index.htm

What is AJAX
This section is for those who have no idea what AJAX is. If you don't fall into this category, feel free to skip to the next section.

AJAX stands for asynchronous JavaScript and XML. If you see another term XHR, which is shorthand for XML HTTP request, it's the same thing. Don't be afraid of this jargon; AJAX is not rocket science.

  • In Gmail, switch from inbox to draft. Part of the page is changed, but the page is not refreshed. You remain on the same page. Url has not changed (except for the #draft at the end of the url, but that's still the same webpage).
  • In Google Reader, select a feed. The content changes, but you are not redirected to another url.
  • In Google Maps, zoom in or zoom out. The map has changed, but you remain on the same page.

The key to AJAX's concept is "asynchronous". This means something happens to the page after it's loaded. Traditionally, when a page is loaded, the content remains the same until the user leaves the page. With AJAX, JavaScript grabs new content from the server and makes changes to the current page. This all happena within the lifetime of the page, no refresh or redirection is needed.

Caching AJAX

Now we should know what AJAX actually is. And we know that, when Gmail refreshes some content without redirection, an AJAX call is made behind the scenes. The requested content can either be static (remains exactly the same all the time, such as a contact form or a picture) or dynamic (requests to the same url get different responses, such as Gmail's inbox where new mails may show up any time).

For static content, we may want the response cached. But for dynamic content, which can change in a second's time, caching AJAX becomes a bug, right? It should be noted that Internet Explorer always caches AJAX calls, while other browsers behave differently. So we'd better tell the browser explicitly whether or not AJAX should be cached. With jQuery, we can accomplish this simply by typing:

view plaincopy to clipboardprint?

  1. $.ajaxSetup ({ 
  2.     cache: false
  3. }); 
	$.ajaxSetup ({
		cache: false
	});
1. load(): Load HTML From a Remote URL and Inject it into the DOM

The most common use of AJAX is for loading HTML from a remote location and injecting it into the DOM. With jQuery's load() function, this task is a piece of cake. Review this demo and we'll go over some uses one by one.

Minimal Configuration

Click on the first button named "load()." A piece of HTML is injected into the page, exactly what we were talking about. Let's see what's going on behind the scenes.

Below is the JavaScript code for this effect:

view plaincopy to clipboardprint?

  1.     $.ajaxSetup ({ 
  2.         cache: false
  3.     }); 
  4. var ajax_load = "<img src='img/load.gif' alt='loading...' />"; 
  5. //  load() functions
  6. var loadUrl = "ajax/load.php"; 
  7.     $("#load_basic").click(function(){ 
  8.         $("#result").html(ajax_load).load(loadUrl); 
  9.     }); 
	$.ajaxSetup ({
		cache: false
	});
	var ajax_load = "<img src='img/load.gif' alt='loading...' />";
	
//	load() functions
	var loadUrl = "ajax/load.php";
	$("#load_basic").click(function(){
		$("#result").html(ajax_load).load(loadUrl);
	});
  1. $.ajaxSetup forces the browser NOT to cache AJAX calls.
  2. After the button is clicked, it takes a little while before the new HTML is loaded. During the loading time, it's best to show an animation to provide the user with some feedback to ensure that the page is currently loading. The "ajax_load" variable contains the HTML of the loading sign.
  3. "ajax/load.php" is the url from which the HTML is grabbed.
  4. When the button is clicked, it makes an AJAX call to the url, receives the response HTML, and injects it into the DOM. The syntax is simply $("#DOM").load(url). Can't be more straightforward, hah?

Now, let's explore more details of the request with Firebug:

  1. Open Firebug.
  2. Switch to the "Net" tab. Enable it if it's disabled. This is where all HTTP request in the browser window are displayed.
  3. Switch to "XHR" tab below "Net". Remember the term "XHR?" It's the request generated from an AJAX call. All requests are displayed here.
  4. Click on the "load()" button and you should see the following.

The request is displayed, right? Click on the little plus sign to the left of the request, more information is displayed.

Click on the "Params" tab. Here's all parameters passed through the GET method. See the long number string passed under a "_" key? This is how jQuery makes sure the request is not cached. Every request has a different "_" parameter, so browsers consider each of them to be unique.

Click on the "Response" tab. Here's the HTML response returned from the remote url.

Load Part of the Remote File

Click on "load() #DOM" button. We notice that only the Envato link is loaded this time. This is done with the following code:

view plaincopy to clipboardprint?

  1. $("#load_dom").click(function(){ 
  2.     $("#result") 
  3.         .html(ajax_load) 
  4.         .load(loadUrl + " #picture"); 
  5. }); 
	$("#load_dom").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl + " #picture");
	});

With load(url + "#DOM"), only the contents within #DOM are injected into current page.

Pass Parameters Through the GET Method

Click on the "load() GET" button and open firebug.

view plaincopy to clipboardprint?

  1. $("#load_get").click(function(){ 
  2.     $("#result") 
  3.         .html(ajax_load) 
  4.         .load(loadUrl, "language=php&version=5"); 
  5. }); 
	$("#load_get").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, "language=php&version=5");
	});

By passing a string as the second param of load(), these parameters are passed to the remote url in the GET method. In Firebug, these params are shown as follows:

Pass Parameters Through the POST Method

Click on the "load() POST" button and open Firebug.

view plaincopy to clipboardprint?

  1. $("#load_post").click(function(){ 
  2.     $("#result") 
  3.         .html(ajax_load) 
  4.         .load(loadUrl, {language: "php", version: 5}); 
  5. }); 
	$("#load_post").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, {language: "php", version: 5});
	});

If parameters are passed as an object (rather than string), they are passed to the remote url in the POST method.

Do Something on AJAX Success

Click on "load() callback" button.

view plaincopy to clipboardprint?

  1. $("#load_callback").click(function(){ 
  2.     $("#result") 
  3.         .html(ajax_load) 
  4.         .load(loadUrl, null, function(responseText){ 
  5.             alert("Response:\n" + responseText); 
  6.         }); 
  7. }); 
	$("#load_callback").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, null, function(responseText){
				alert("Response:\n" + responseText);
			});
	});

A function can be passed to load() as a callback. This function will be executed as soon as the AJAX request is completed successfully.

2. $.getJSON(): Retrieve JSON from a Remote Location

Now we'll review the second AJAX method in jQuery.

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It's very convenient when exchanging data programmatically with JSON.

Let's review an example.

Find the $.getJSON() section in the demo page, type in some words in your native language, and click detect language.

view plaincopy to clipboardprint?

  1. //  $.getJSON()
  2. var jsonUrl = "ajax/json.php"; 
  3.     $("#getJSONForm").submit(function(){ 
  4. var q = $("#q").val(); 
  5. if (q.length == 0) { 
  6.             $("#q").focus(); 
  7.         } else { 
  8.             $("#result").html(ajax_load); 
  9.             $.getJSON( 
  10.                 jsonUrl, 
  11.                 {q: q}, 
  12. function(json) { 
  13. var result = "Language code is \"<strong>" + json.responseData.language + "\""; 
  14.                     $("#result").html(result); 
  15.                 } 
  16.             ); 
  17.         } 
  18. return false; 
  19.     }); 
//	$.getJSON()
	var jsonUrl = "ajax/json.php";
	$("#getJSONForm").submit(function(){
		var q = $("#q").val();
		if (q.length == 0) {
			$("#q").focus();
		} else {
			$("#result").html(ajax_load);
			$.getJSON(
				jsonUrl,
				{q: q},
				function(json) {
					var result = "Language code is \"<strong>" + json.responseData.language + "\"";
					$("#result").html(result);
				}
			);
		}
		return false;
	});

Let's jump to Line 9:

  1. $.getJSON doesn't load information directly to the DOM. So the function is $.getJSON, NOT $("#result").getJSON. (There are pairs of similar looking functions in jQuery such as $.each() and each(). Check out their respective documentation for more information.)
  2. $.getJSON accepts three parameters. A url, parameters passed to the url and a callback function.
  3. $.getJSON passes parameters in GET method. POSTing is not possible with $.getJSON.
  4. $.getJSON treats response as JSON.
$.getJSON's function name is NOT camel-cased. All four letters of "JSON" are in uppercase.

Look at the response in JSON format in Firebug. It's returned from Google Translate API. Check out ajax/json.php in source files to see how language detection works.

3. $.getScript(): Load JavaScript from a Remote Location

We can load JavaScript files with $.getScript method. Click on "Load a Remote Script" button in the demo page; let's review the code for this action.

view plaincopy to clipboardprint?

  1. //  $.getScript()
  2. var scriptUrl = "ajax/script.php"; 
  3.     $("#getScript").click(function(){ 
  4.         $("#result").html(ajax_load); 
  5.         $.getScript(scriptUrl, function(){ 
  6.             $("#result").html(""); 
  7.         }); 
  8.     }); 
//	$.getScript()
	var scriptUrl = "ajax/script.php";
	$("#getScript").click(function(){
		$("#result").html(ajax_load);
		$.getScript(scriptUrl, function(){
			$("#result").html("");
		});
	});
  1. $.getScript accepts only two parameters, a url, and a callback function.
  2. Neither the GET nor POST params can be passed to $.getScript. (Of course you can append GET params to the url.)
  3. JavaScript files don't have to contain the ".js" extension. In this case, the remote url points to a PHP file. Let your imagination fly and you can dynamically generate JavaScript files with PHP.

See the response JavaScript in Firebug.

4. $.get(): Make GET Requests

$.get() is a more general-purpose way to make GET requests. It handles the response of many formats including xml, html, text, script, json, and jonsp. Click on the "$.get()" button in the demo page and see the code.

view plaincopy to clipboardprint?

  1. //  $.get()
  2.     $("#get").click(function(){ 
  3.         $("#result").html(ajax_load); 
  4.         $.get( 
  5.             loadUrl, 
  6.             {language: "php", version: 5}, 
  7. function(responseText){ 
  8.                 $("#result").html(responseText); 
  9.             }, 
  10. "html"
  11.         ); 
  12.     }); 
//	$.get()
	$("#get").click(function(){
		$("#result").html(ajax_load);
		$.get(
			loadUrl,
			{language: "php", version: 5},
			function(responseText){
				$("#result").html(responseText);
			},
			"html"
		);
	});
  1. $.get() is completely different, as compared to get(). The latter has nothing to do with AJAX at all.
  2. $.get accepts the response type as the last parameter, which makes it more powerful than the first functions we introduced today. Specify response type if it's not html/text. Possible values are xml, html, text, script, json and jonsp.

5. $.post(): Make POST Requests

$.post() is a more general-purpose way to make POST requests. It does exactly the same job as $.get(), except for the fact that it makes a POST request instead.

view plaincopy to clipboardprint?

  1. //  $.post()
  2.     $("#post").click(function(){ 
  3.         $("#result").html(ajax_load); 
  4.         $.post( 
  5.             loadUrl, 
  6.             {language: "php", version: 5}, 
  7. function(responseText){ 
  8.                 $("#result").html(responseText); 
  9.             }, 
  10. "html"
  11.         ); 
  12.     }); 
//	$.post()
	$("#post").click(function(){
		$("#result").html(ajax_load);
		$.post(
			loadUrl,
			{language: "php", version: 5},
			function(responseText){
				$("#result").html(responseText);
			},
			"html"
		);
	});

The use of $.post() is the same as its brother, $.get(). Check the POST request in Firebug (shown in the following image).

Finally... $.ajax():

Up to this point, we've examined five commonly used jQuery AJAX functions. They bear different names but, behind the scenes, they generally do the exact same job with slightly different configurations. If you need maximum control over your requests, check out the $.ajax() function.

This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). -jQuery's official Documentation

In my opinion, the first five functions should satisfy most of our needs. But if you need to execute a function on AJAX error, $.ajax() is your only choice.

Conclusion

Today, we took an in-depth look of five ways to make AJAX calls with jQuery.

  • load(): Load a piece of html into a container DOM.
  • $.getJSON(): Load a JSON with GET method.
  • $.getScript(): Load a JavaScript.
  • $.get(): Use this if you want to make a GET call and play extensively with the response.
  • $.post(): Use this if you want to make a POST call and don't want to load the response to some container DOM.
  • $.ajax(): Use this if you need to do something when XHR fails, or you need to specify ajax options (e.g. cache: true) on the fly.

Before we conclude, here's a comparison table of these functions. I hope you enjoyed this lesson! Any thoughts?

jQuery Plug-In Links I’ve collected

Here some links I’ve received from friends and have run across that have some cool jQuery plug-ins that I would like to use one day.