The start of a series / Sobees app review

After having a couple of people ask me for my favorite web-app that does _______, I've decided to review several of my overall favorite web apps right here. These apps will range from unique utilities to sites that may only interest a certain demographic - but in each site I think there is a lot to learn: design, application layout, typography, etc. Starting right here I'll review one app at a time in a blog-style format. If this sounds interesting to you, then follow me down this primrose path and let's begin...

Of all the online tools I use, the oldest in my repertoire is Sobees (sobees.com). Sobees touts itself as a "social desktop aggregator". This tool will be extremely interesting to all of the social [media] butterflies out there.

Sobees allows you to view your LinkedIn, Facebook, and Twitter feeds all on one screen. You can even add multiple accounts from each service. So if you want to monitor your personal and business Twitter accounts... you can! They also offer a couple of iPad apps, one for Android, as well as a traditional desktop application for your PC (if you're into that sort of thing).

When you visit the site the first time, you'll notice one of my favorite features: no login. All of your settings are stored in cookies on your computer. Of course this means if you visit the site from another computer, you'll have to set everything up again. But there are options to backup and restore your settings, so you could simply backup your settings on one computer, then restore them on a second computer and… viola… you have the identical setup. The site’s design is simple, sleek and unobtrusive: what more could you ask more in a web app?

While you’re checking it out, don’t overlook the “Search feed” option. In addition to the various supported social media networks, you can also create a custom - near live - search feed. This is especially useful if you really want to stay on top of a certain trending topic. I’ve used this in the past during severe weather (#arwx) and when iOS 5 was about to be released (#ios5).

If you use multiple social networks, check out Sobees at Sobees.com.

(... and just because I realized this sounds like an advertisement, I just wanted to point out that this is an unsponsored review. However, if someone wants to pay me for it, I'm ok with that too.)

The first date... ever.

I've been working on the third version of Vend-Trak for the past couple of weeks. We're going to incorporate Google Maps with directions, Google Charts (faster than the Java charts we've been using) and some other neat features. But really the biggest changes are all "behind the scenes".

Currently the application is written in ASP Classic (3.0) and is supported by a MySQL database.  These choices were great at the time, and they served us well.  But Vend-Trak has grown so much in the past few months that it's almost grown "too big for it's britches", as we say down here in Arkansas.

So that lead us to the decision that it is time for Vend-Trak to make the jump to ASP.Net.  And we figured we might as well migrate to a full fledged Microsoft SQL Server while we were at it.  This system-based relational database, along with the compiled ASP.Net application, should result in a MUCH faster application for the end-users. (I'll post the results when we're done.)

So that brings me to this blog.  I knew that migrating from MySQL to SQL Server wouldn't be easy.  But after some Googling I came across some helpful information.  First, I needed to install the MySQL ODBC driver on my SQL Server so that I could pull the information from the old server.  At that point I could create a "linked server" on the SQL Server by using a command similar to this:

EXEC master.dbo.sp_addlinkedserver @server = N'MYSQL', @srvproduct=N'MySQL', @provider=N'MSDASQL', @provstr=N'DRIVER={MySQL ODBC 3.51 Driver}; SERVER=127.0.0.1; DATABASE=ORIGINAL_DATABASE_NAME; USER=your_username; PASSWORD=your_password; OPTION=3'

Now that the MySQL server was linked from the SQL Server, I could copy each table from the original server to the new one with a single line:

Select * into newTable from openquery(MySQLServerName, 'select * from oldTable')

Up until this point it looks that maybe this won't be so bad after all. However, I hit a snag.  After importing two of the 33 tables, I received this message:

Error converting data type DBTYPE_DBTIMESTAMP to datetime.

It took me several cups of coffee and lots of research to finally discover that MySQL's datetime datatype has a minimum value of January 1, 1000, while Microsoft SQL Server's datetime datatype begins with the first day of the year after the Gregorian calendar was put into use in British and American records: January 1, 1753.  (Thanks to Peter Gulutzan and Trudy Pelzer for that tidbit of information.)

Now you might be thinking, "Josh, why is the world would you have dates in this database that are before January 1, 1753?"  Well I'll tell you: inadequate error checking.  When we provided inputs for users to be able to enter dates, we didn't consider that they would enter "8" as a year.  Of course, when the users entered such a date and they didn't see the item that they just created on the calendar, then they created it a second time using VALID dates and got the expected result.

So, while there was a valid problem occuring, the end-users probably never realized that this was indeed a valid issue that needed to be reported, and we never considered that such a scenario was taking place.

I hope that this is useful to someone else and saves them from countless hours of frustration.

Ajax made simple

Any article about Ajax should probably start by explaining that it's not a new programming language. Rather, it's a methodology that enables a greater level of user interactivity in web-based applications. Ajax is based on two languages that have been around for quite a while: JavaScript and eXtensible Markup Language (XML). The "A" in Ajax stands for asynchronous, which literally means, "not at the same time." This is the key that separates Ajax from the classic web page.

In your standard web application model, there is a "back and forth" kind of action. The user requests a web page, the page is served, and in order for the user to see any additional information, he/she must make a separate call for data for more data, which causes (at a minimum) the page to reload. Requests and responses for the new data set occur at the same time, or synchronously.

Using the Ajax methodology, you can add the same level of interactivity to your web-based applications that, previously, was unique to desktop applications. In this model, the user requests a web page and the page is loaded as normal. The difference is that each time the user needs to be presented with more data, a JavaScript makes a call back to the server and retrieves the data in an XML format. This allows the developer to change the content of the page without reloading the entire page. As you can imagine, this can be extremely appealing to the end user. Ok, so lets get started...

In order to fully understand this article, I have to assume that you already have a firm understand of HTML, JavaScript and XML. Teaching these components of Ajax is outside the scope of this article, but you can find some excellent tutorials at http://www.w3schools.org.

Now, let's describe what you are going to create. We are going to create two select boxes from which we can select a Make and Model of vehicle. The Models that we can select from will be determined by the Make that is first selected.

Aside from the HTML present, you'll need an XML file. If you don't have one handy, you can use the one from this example (20070314.xml). After you have an XML file, you'll need a JavaScript that you can call to load the XML document. For this you can copy the script below:

function ajaxRead(url, method, parameters, functionToRunWithXMLResponse) {
          var xmlObj = null;
          if (document.all) { 
               xmlObj = new ActiveXObject("Msxml2.XMLHTTP"); 
          } else { 
               xmlObj = new XMLHttpRequest(); 
          }
          
          xmlObj.onreadystatechange = function() {
               if(xmlObj.readyState == 4) {
                    if (xmlObj.status == 200) {
                         eval(functionToRunWithXMLResponse + "(xmlObj)");
                    }
                    else {
                         alert("The requested operation returned an error code: " + xmlObj.status + "\n\n" + xmlObj.statusText);
                         return;
                    }
               }
          }
          
          xmlObj.open (method, url, true);
          if (method == "POST") {
               xmlObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               xmlObj.setRequestHeader("Content-length", parameters.length);
               xmlObj.setRequestHeader("Connection", "close");
          } else {
               parameters = "";  // Just to make sure it was called correctly.
          }
          xmlObj.send (parameters);
     }

  

The ajaxRead function will access the given URL to read the XML file once it reads the XML file it then passes the XML Document Object to whatever function you specify in the functionToRunWithXMLResponse parameter. Here is an example of how the ajaxRead function should be called:

ajaxRead('/xml/cars.xml', 'GET', '', 'loadMakes');

Once you have the XML Document Object, you can simply crack open the XML document itself with JavaScript using the Document Object Model (DOM) and have your way with the data. In the example above I have chosen to simply load the names of the Makes and Models into a pair of select boxes.

function loadMakes(objXML) {
          // Get a handle on the XML Document Object passed from the ajaxRead function.
          var xmlDoc = objXML.responseXML.documentElement;
          var arrLevelOne = xmlDoc.childNodes;
          var intLength;

          //Populate the Makes
          for (var x = 0; x < arrLevelOne.length; x++) {
               intLength = document.form1.selectMake.options.length;
               document.form1.selectMake.options[intLength] = new Option(xmlDoc.childNodes(x).childNodes(0).text, xmlDoc.childNodes(x).childNodes(0).text);
          }
          document.form1.selectMake.options[0] = new Option("Select a Make", "Select a Make");
          document.form1.selectMake.options.selectedIndex = 0;
     }

The last thing I did to complete the example given was create another JavaScript function that loaded the Models based on make that ran when the onChangeevent fired from the Make select box.

Using this method of web application development, developers can create fully interactive applications that enrich the user's experience and actually change the way your site's visitors think about the web.

Supporting documents:

• 20070314.xml
• 20070314.js

Clorox won't make the web any better... but AJAX will!

In 1995 Netscape hired Brendan Eich to take charge of a development project in which they were creating a new programming language to add interactivity to web pages.  This language was called LiveScript by the developers because of its ability to change itself and web page content.  Later, when the language was released to the public, it was announced as JavaScript.  As it turns out, this was a change that didn't make much difference to the marketers who made the decision, but have made things very confusing for up-and-coming web developers ever since.

Just following, the eXtensible Markup Language (XML) was developed in 1996.  Simply put, XML is a markup language (not a programming language) that is used to define and describe data. 

While these two languages have been around for quite some time, it has only been during recent years that people have discovered the potential made possible by combining them.

By combining JavaScript, a primarily web-based programming language, with XML, which is used to define and describe data, it is possible to dynamically access data and data descriptions over the web.  This method of combining these two is known as AJAX: Asyncronous Javascript + XML.  Now, I know that sounds like a lot at once, but take a look at our example and you'll see how easy it can be.

In order to demonstrate how cool AJAX can be, I created an AJAX-based Instant Messenger (click here).

Notice that when you post a message, or receive one, the window does not refresh; there is no "post back".  This is because every time you send a message, there is a JavaScript that is dynamically creating a new browser instance with which to send the message.  It then receives an XML response with all of the current messages that have been posted.  Feel free to dig around in the source code.

The term "Web 2.0" is being used to describe where we are headed once all web-based applications are using AJAX to interact with users.  Imagine the possibilities...

The case of the forgetful web application.

Q: Mr. Carroll,  (See that "Mr"... makes you feel old doesn't it!)  Hope you remember me; I was in your IIS class a couple of weeks ago.  I have a question if you could spare some time.  We talked about setting memory restrictions to recycle application pools.  Our web applications die every few days and I have determined it is the w3wp.exe that is the problem.  It's memory usage grows until it crashes but it crashes at different amounts of memory used.  So my question is if I set the memory restriction a low amount or a short time period to recycle will this cause performance to decline on our web apps?  Hope you can help... and great class by the way!  And see, your teachings are already paying off for your students!

Thanks,
Kerry

A: Hey Kerry. Thanks for the compliment; I'm glad you enjoyed the class.

The results of how you adjust the memory usage settings will differ from web-app to web-app. The way to get the best result is to change the settings and benchmark the results. It may take four or five times to optimize the settings for your particular app, so make sure to log the results each time.

Another thing to consider is, if the application was written locally (that is to say it is not an off-the-shelf product) you should talk to the programmer who wrote it and make sure that he/she hasn't left any memory leaks in the application. (When I say "locally" that also includes anyone at a higher echelon of your organization. Just because John Doe is the head programmer of your corporate headquarters doesn't mean that he doesn't make mistakes.) To ensure this, have the programmer ensure that they are destroying any objects that they create, like this:

In this example you have a bit of ASP code using VBScript as its language. In VBScript, Nothing is a keyword that is used to remove objects from memory or "destroy" them.

Once you've gone through the code and adjusted the memory settings of your application in IIS, you can always gain a little more memory capacity by having your web-app reduce its caffine intake... at least, that's what my wife says.