Over a decade ago internet providers made the bold move of taking internet access “off the clock” by eliminating time restrictions on their service. This along with the ever-evolving connections made the internet the ideal canvas for creative development. Suddenly the average person was able to generate content that would reach a vast amount of people. This development paved the way for many entrepreneurs. Life on the internet was good, content was free-flowing, accessible, and very cheap to generate.

Today

As of June 7, 2010 AT&T introduced two new data plans (and so did many other providers) they said would encourage many users to get a smartphone because they were “inexpensive”. While doing this however they discontinued their unlimited data plan forcing new users to pick between a 200 MB plan or a 2 GB plan. Those who wished to keep their unlimited plan could do so as long as they kept their plan (or AT&T allows them to). Though a large percent of data users do not normally go over the 2 GB allowance, the limitation will start to make them think twice before watching a video on youtube, downloading a new app, or watching a streaming movie. And in today’s ever-evolving world of mobile devices data transfer will play a larger, more important role as new applications and features are developed.

Tomorrow

In the long run the limitations set on users via data caps will hinder the development of the internet and of mobile devices. Users, as I said before will have to think twice about doing anything on their phone that will require a hefty amount of data usage. As time passes, the restriction will offset more and more users to using a wifi connection instead, if enough of this happens there is a possibility ISPs will raise their prices or cap users. And hey, they have already started! Just check out Gizmodo’s article. Agh!

So where do you stand? Do you think these new and “affordable” plans are good? How much data do you normally use? I seem to be using about 3-4 GB on monthly on my iPhone.

Before you go on. I will advise you that in order to make the most use of Twitter it is my opinion that it is best to access it via a smartphone. Portability and accessability are key. You will make best of use of Twitter when you have quick access to it and not as much when you have to rush to a computer. Of course a few minutes a few times a day to read a couple of tweets will help too. I find that a lot of the people that use the website are new to the service and usually wind up dropping it because they don’t access it as often and therefore do not get the most they could out of if.

Breaking News

While you indeed have those people that tweet their every move, Twitter can have an actual use in our everyday lives. A real case scenario is, and has been seen used by all of us, the use of Twitter during catastrophes. We’ve all seen CNN, FOX, and the other networks start reading tweets during this important time. The reason is mainly because Twitter can resonate the voice of the people in the disposition in real-time. Way ahead of any news crew. And it is my opinion that the view of someone living it holds way more value than that of someone who’s job is to intrigue you with sensationalism to get good ratings. So while it is a good idea to follow your favorite local news network on Twitter for the latest headlines and links to stories, it is possibly a good idea, to save a search on your Twitter account for the words “earthquake in”, “tsunami in”, or “tsunami in”, as well as keeping an eye on the Twitter trends for anything intriguing. This way surely when you hear someone say something in the office about an earthquake somewhere you can tune to Twitter for info, reactions and links to the story often way faster than doing a Google search.

Following Your Career

Another great way to use Twitter is to follow people whom are important or iconic in your career. For example if you are a designer you might follow a designer you might consider inspiring or interesting or even follow a website that showcases a great artist’s work every day. There are so many possibilities.

So what if you aren’t sure of what person to follow? Well on Twitter there are also Lists of people to follow which are created by users. All it is is a group of people with something in common. It could be Artists, Bloggers, Activists etc. Like following a user you may follow one of these lists if you find one that suits your needs. So how do you find a list to follow? Listorious is just one of a few which can help you find the right list. Also to learn more about lists visit this article on Mashable.

Two more things to keep in mind to help you keep your sanity is that it is okay to not read all the new tweets from the people you follow. Also don’t feel forced to Tweet your every move, doing so might also make you lose interest. Keep yourself informed, keep yourself together.

Today I went out to quench my curiosity by seeing exactly what Google Island a.k.a City Island looks like. It was beautiful! So take this post as my personal nomination to bring Google Fiber to Sarasota. And please keep in mind: I don’t even live there! I think it’d be the perfect complement. Also I would like to point out that this is a section of City Island. I am sure the sections I was not able to visit is just as great.

So here are some pictures (pardon my shoddy image resizing) of what I saw so that you could experience it just a bit. I had a small video as well. Unfortunately I incurred an error during it’s upload from my phone and it was gone. Sad moment. Bad, bad technology!

A couple of weeks ago Google launched one of its greatest products thus far: Google Buzz. People like myself praised Google for the introduction of this social medium while others criticized it. Those who criticized it had a very good reason to: the Gmail user’s contacts email addresses were being published on their Google public profiles. This was probably due to the fact that Google developers had tested Buzz between themselves during its development in a corporate environment and thus saw no need for privacy. Though kind of understandable it still does not let Google off the hook in my and many other people’s eyes. Privacy is something all of us hold dear, and though it is hard to be private on the internet we certainly want to separate what our friends can see versus what our co-workers, bosses and stalkers can see. This separation was not considered upon Google’s implementation of Buzz. The lack of privacy controls made a lot of people unhappy and brought Google a few steps back in gaining the user’s trust.

About two days later Google made some changes to the Buzz application allowing user to have more control over their privacy. This quick response shows, or at least is interpreted by myself that Google cares about its users and I applaud that.

Looking Forward>>>

So after Google tweaks, buffs, and polishes Buzz what will we have? What do you think? Will it fail? Will it replace Facebook, Twitter and friends? Or will it enable communication between all these websites?

I go for the last one! I think this will push social websites to develop ways to “speak” between each other and will in the end prove to be a breakthrough. Google, you win! Please just try not to compromise your user’s privacy anymore or your users won’t trust you. Like Wallstreet you are also not too big to fail. : )

1. Make XMLHttpRequest Object

This is the most important thing. It is what AJAX is all about, it is the object that fetches stuff for you to display on your web pages. Without it (and well along with the user having JavaScript enabled) basic AJAX is not possible. I know there are “workarounds” that might give the impression of AJAX but I am just talking about straight-up AJAX. Anyways, the XMLHttpRequest object is important, so it is understandable it must work on every browser. I hope I didn’t lose you. This is how we do it.

var req = null; // XMLHttpRequest Object 

var init = function() {
   try { // firefox, safari, ie7
   req = new XMLHttpRequest(); }catch(e) {
   try { // later ie
   req = new ActiveXObject('MSXML2.XMLHTTP');}catch(e) {
   try { //early ie
   req = new ActiveXObject('Microsoft.XMLHTTP');} catch(e) {
   return false;}}}
   return req;
}

So what did we do here? If you look past all the ‘try’ you notice that we try to declare the ‘req’ object as whatever form of XMLHttpRequest is available depending on your browser. In older versions of Internet Explorer AJAX occurs in the form of ActiveXObjects. This explains most of the clutter in the preceding code.

2. Open The XMLHttpRequest

So you made the object now you need to tell it what to fetch. For this we use the open method of the XMLHttpRequest object which takes three parameters: method (get or post); url, and whether our request is asynchronous or not. What asynchronous means is allowing to happen at different times.

Additionally you have to execute the ‘send’ method of the request object passing a null value. The ‘send’ method ships our request to the server, the value it takes is used for POST requests which is why we pass null this time. This is what it looks like.

req.open('GET', 'index.php?call=Marco', true);
req.send(null);

For simplicity’s sake in our example we are going to use the form’s ‘GET’ method to request text from the server as opposed to XML. Using the form’s ‘POST’ method is a little more difficult and requires additional code. I will later explain how that is done in another post.

Another thing you might want to know is that some browsers might try to cache the response you received from the server. So no matter how different the response you are expecting is, it returns the same one always. To avoid this you might want to try append the time the request was made to your ‘URL’ string as so.

var time = new Date();
req.open('GET', 'index.php?call=Marco&time=' + time.getTime(), true);
req.send(null);

Note

Also please note that AJAX will only work within the server that made the request so make sure the ‘url’ value you pass is a local one. Cross server AJAX requests are not readily possible for security reasons but can be allowed through additional server configuration.

3. Check For The Request’s State Change

Now the next few steps might get a tiny bit complicated. I will try extra hard to simplify them.
First we want to try to monitor the ‘onreadystatechange’ event of the XMLHttpRequest. The ‘onreadystatechange’ event tells us when there is a change of state in our request as the name already suggests. So we are going to listen in by making an event handler for it.

req.onreadystatechange = function() {
     ...
}

However the ‘onreadystatechange’ event handler itself won’t really tell us anything. The reason being that there are four states the request can move around from which won’t necessarily hold the data we want. They are listed below. For our purposes we only care about state #4 which means our data is ready for our viewing.

• Uninitialized (0)
• Loading (1)
• Loaded (2)
• Interactive (3)
• Completed (4)

So in order to check when our state is at 4, we create a simple conditional statement within our event listener.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        ...
    }
}

But again we need more since it is not enough for us to know when AJAX has something to show us. The reason is that it might have encountered an error and we wouldn’t want to show that to the users right? So now we must check to see if everything worked out right and that there were no server errors or anything of the sort. There are two ways to do this. One is to make sure our request’s status (req.status) is greater than or equal to 200 and that it is also less than or equal to 299. Together with the rest of our state change code it would look like this.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if (req.status >= 200 && req.status <= 299) {
            ...
        }
    }
}

A more simple alternative to the last step we did is to check if the 'statusText' property of our request simply returned 'OK'. For the sake of our Ajax In A Nutshell post name we will stick with the alternative. This is what that looks like.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if(req.statusText == 'OK') {
            ...
        }
    }
}

Now wasn't that a lot easier?

4. Retrieve Your Data

Finally we grab our much awaited data which will be stored in our request's 'responseText' property. I suggest you structure your main function to accept a handler function for the data. This handler function would then either further process the data and or place it on the HTML document for viewing. In our example we are going to be passing our data to another function (our handler function) which will display it on a div in our HTML document. Below is what the passing of our data to the 'handler' function will look like along with our state change code from before.

req.onreadystatechange = function() {
    if (req.readyState == 4) {
        if(req.statusText == 'OK') {
            dataHandler(req.responseText);
        }
    }
}

So there it is. Getting your data from the server wasn't that hard. Hopefully you are not like me and actually get it on the first few reads.

Sample Please?

I have built a sample page and script that uses this code to submit a form to the server. The form will just submit the hidden value "Marco". The server will then respond "Polo" which will be displayed on a DIV below the button.

You can download the sample files here: ajax_sample (28)

Removing Indexes

Options -Indexes

Adding Indexes

Options +Indexes

As simple as that! Here is the link I found that might come in pretty handy.
http://www.hostingmanual.net/other/htfun.shtml

document.forms['myForm'].onsubmit = function() {
       // Your code
}

Or

document.forms[0].onsubmit = function() {
       // Your code
}

Currently there is no documentation on this app. However before using it there a couple of things you should know.

You should know

1. You need ‘write’ permission on the directory where you plan to house your galleries. This application generates resized images and thumbnails and stores them on your server. Without the permission the application will not work.
2. This application puts ALL the thumbnails of your gallery on the same page. So if you have a million pictures, it will show a million thumbnails. Some web users like myself might find this bothersome. I will try to change it in the future but keep that in mind for now. My recommendation: make different galleries for different things.
3. The application might not like and therefore might not link up thumbnails and full sized-images with special characters correctly. Again, will be fixed at a later time. For now try to avoid odd characters in your gallery images names.
4. This application only supports (at the moment) JPEG images. Sorry GIF lovers, maybe on the next update.
5. Don’t forget to add your own title on the ‘index.php’ file and for search engine optimization I recommend changing the ‘author’ and ‘description’ meta tags on the html head to fit your needs.
6. Give lots of love to the jQuery folks and a little to myself. Maybe in the form of a donation to help me pay my hosting? Try the app first though, make sure it works for you.

Installation

1. Make sure you have ‘write’ permission on the folder you wish to store your galleries. You might be able to use your FTP software to change the permission. I recommend setting the permission to CHMOD 0755.
2. Go into the file ‘index.php’ and change the gallery title and meta tags (optional) to fit your needs.
3. Copy all the .img files to a subdirectory in your gallery’s directory.

   Example:

   Main gallery: “/pictures/”

   Where to put .img files: “/pictures/italy2009/” or “/pictures/mycars/”.

4. Delete the sample image’s and any subdirectories i’ve included in the ‘images’ folder that came with this application.
5. Rename the htaccess.txt file to .htaccess
6. Upload your own image files via FTP to the ‘images’ folder that came with this application.
7. Use your web browser to navigate to the location of the subdirectory where you placed the .img files. On the first run the application might take some time to load. This is because it is creating thumbnails and resizing your images (if it thinks theyre too big) in the background. After that is done, it will load much faster, as it has no more images to create.

Also

If you plan to add/remove/rename images from the ‘image’ directory, it is best to delete the ‘thumbs’ and ‘resized’ folder and rerun the application. This is because eventually you’ll be left with unused, leftover images in those directories which might confuse you later.

Demo: http://quinterox.com/shared/handled/dotimg_v1.12J/

Download: .img (40)

Though I do not have the whole .htaccess thing down yet. I have found some code that simply works. As always I post it for myself as well as anyone who needs it.


<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>