Experiment Garden

TV News is Ridiculous Compared to Internet News

2012-02-14T09:15:00.001-06:00

Today while sitting in a waiting room I found myself watching CNN on the waiting room television, and what I saw got me thinking about the difference between television news and Internet news.

The first and most major difference is freedom of choice. If I am looking for news online I can chose which articles I want to read. Television news just feeds a constant stream of regurgitated pop culture drivel mixed in with the legitimate news about world developments. There is no way to skip the noise as you can online.

The second major factor is the quality of the news. The television news I just saw was ridiculously shallow. They literally spent about 4-5 minutes speculating about the cause of Whitney Houston's death. When the segment was over I thought back about what they said and realized that there was not one useful fact or insight in what they said. It was all what ifs and possibilities. This segment was followed by "breaking" news about developments in heart repair using stem cells. I read this breaking news three days ago on the Internet and the online article went into much better detail.

Last but not least is ads. Internet ads don't interrupt you completely. They sit in the page and although some sites have ads inserted into text, or animated ads that are distracting, Internet ads are in no way as intrusive as television ads which waste your time by completely changing the topic.

I don't understand how television news plans to stay alive. If I can absorb news on the Internet faster, with fewer distracting ads, and with the freedom to chose which topics I want to read then what does television have to offer? News anchors? Most of the time I can't stand their personalities and clearly opinion laced interview language.

Compared with television news, Internet news is much more effective for getting real, timely news, with much more freedom of selection.

AT&T Sucks, and now it is ruining T-Mobile too.

2011-07-28T20:12:00.000-05:00

When I heard the announcement that AT&T was in plans to buy out T-Mobile my first reaction was dread. My favorite phone company, the one with the best plans I ever found was going to be bought out by the telephone company that I hate most. The acquisition came and passed without any apparent changes to T-Mobile, so mentally I let my guard down and deluded myself with the hope that things wouldn't change with T-Mobile.

This week they did.

Two months ago I purchased T-Mobile's mobile 4G hotspot, a convenient device which turns T-Mobile's 4G network into a wifi network that I can use to connect my laptop, or iPad to the speed of 4G internet wherever I go. It came with a great plan as well: if I bought the device I could pay month to month just like my phone, and never have to enter a contract. This particular type of plan has always appealed greatly to me because I'm the type of person who would rather just buy the device outright and then pay for the service month to month rather than entering a two year contract.

T-Mobile's hotspot plan sweetened the pot even further by giving me a discount since I was already a T-Mobile customer: I received a fairly significant 20% discount on the purchase of the device and every month I would receive a 20% discount on my bill.

The service also offered 5 gigabyte and 10 gigabyte unlimited plans. The basic concept is that if you sign up for the 5 gigabyte plan you get 5 gigabytes of data at the full download speed of 4G, and then after that your service is not cut off but it is significantly rate limited.

I set my device up with the 5 gigabyte plan, planning to try it out and see if the rate limiting would affect me enough for me to need to sign up for the better plan.

Fast forward two months and I discover that I need the 10 gigabyte plan. The first month when the rate limiting kicked in I barely noticed it. Sure I couldn't stream YouTube videos anymore, but it wasn't that bad for web browsing and my web based work which mostly just involves transferring plain text code files too and from my local machine and the servers of the startup I work for.

But recently the rate limiting has increased greatly. This month when I surpassed 5 gigabytes of bandwidth due to Mac OS X downloading system updates the bandwidth slowed dramatically to a mere trickle of about 10-20 kbps. So I headed to the local T-Mobile retail store, wallet at the ready, eager to give them my money for five extra gigabytes of data per month.

Imagine my surprise when the customer service representative told me that there was no way they could increase my plan to the next level without making me sign up for a two year contract. Needless to say this did not appeal to me and I told him so. He proceeded to make a call, apparently to some higher up customer service center, and they also said there was nothing that could be done. I had to sign up for a two year contract.

By the time the customer representative got off the phone I could see that he was even more frustrated than me. He told me that he was really irritated with the policy change, that it didn't make sense, and that he had already seen customers cancel their plans with T-Mobile over it. He said there was nothing he could do for me, and suggested that I call customer support myself, complain, and threaten to cancel my service as that was the only way that I might possibly be able to improve my plan without needing to sign a two year contract.

So I did.

I called T-Mobile customer support and explained what I needed: the 10 gigabyte per month plan which was advertised a mere two months ago when I bought my wireless hotspot and signed up for the 5 gigabyte plan. Once again the customer service agents explained that there was nothing they could do. In fact, one of them told me that if I wanted to change my cell phone plan I would also need to sign up for a two year contract. This is ridiculous. Historically T-Mobile has provided great flexible month to month plans. If I wanted to add more minutes I could very easily, and it was month to month.

Now T-Mobile is quietly doing away with its convenient and economical month to month plans and trying to force all its customers into contracts. In the T-Mobile retail store, where my conversation was not being recorded and monitored, the frustrated T-Mobile customer service representative told me outright that they were trying to increase the number of contracts because of the AT&T buy out.

And so the time has come for me to leave T-Mobile behind. Really, why would I stick with T-Mobile's plan when there are much better plans like a CLEAR mobile plan for the same price:

Unlimited data usage – no extra usage charges
No preset download speed cap
Upload speeds up to 1.5 Mbps

CLEAR offers me the same 4G internet, with no download speed cap no matter how much data I use. Best of all they offer the month to month service with no contract required, just like T-Mobile used to.

I really don't understand the logic behind T-Mobile's change. If AT&T is pushing T-Mobile to ruin their plans and make them as bad as AT&T plans they are just going to lose customers to the providers that are now better, like CLEAR.

So goodbye T-Mobile. I see no reason to stay with a service which won't let me increase my plan (hence paying you more money every month), without signing up for a two year contract. Probably the only reason they want me stuck in a two year contract is so that they can't lose me to the better service providers like CLEAR. With CLEAR I'll be able to use 10 gigabytes, or even 20 gigabytes of data if I need without having to worry about a download speed cap.

For the time being I'll keep my T-Mobile cell phone plan because I am grandfathered in, but if it comes to a point where I need to adjust my cell phone plan there is no way I'm going to sign up for a two year contract. Once again there are better month to month plans that won't tie me into a contract.

A message to AT&T and T-Mobile: If you want to keep your customers loyal to your service the way to do it is with exceptional service and great plans, not restrictive two year contracts. You are just shooting yourself in the foot.

How to merge two directories on Mac OS X using the command line.

2011-07-08T18:07:00.000-05:00

On Mac OS X if you use Terminal to paste a folder to a location where another folder with the same name exists then that folder will be replaced by the folder you are pasting. But what if what you want to do instead is merge the files in the existing folder with the folder you are dropping?

The easiest way to do this is to use ditto, a command line tool for accomplishing this task. For this example imagine that we have two folders:

Folder number one exists in your Downloads directory under the name "Backup" while the other exists in your Documents folder as "Work". You can use the following command to merge them:

ditto ~/Downloads/Backup ~/Documents/Work

Note that the order is important. Files in the first folder which are different from files in the second folder will be replaced by their counterparts in the second folder. Files in the first folder which are not in the second folder will remain, while files in the second folder which are not in the first folder will be copied over.

Recursively remove .svn directories in Mac OS X using command line bash.

2011-07-08T17:09:00.000-05:00

If you want to remove all the .svn folders from a SVN repository to "uninstall" SVN from it, or clean it in preparation for deployment or making a tarball you can use the following simple line of bash script. This has been test and verified to work in Mac OS X Snow Leopard:

rm -rf `find . -type d -name .svn`

Inverted Pendulum on Vimeo

2010-11-29T13:38:00.001-06:00

via vimeo.com

This incredible robotic device can swing up a pendulum and balance it, even a pendulum that has a joint in the middle.

Posted via email from Experiment Garden

Top HTML5 Canvas Applications and Demos

2010-11-28T09:09:00.000-06:00

HTML5 promises a number of interesting improvements that will allow even more engaging web apps. One of these is the canvas element, which allows programmers to draw or process images using JavaScript. This article lists the top most interesting canvas applications and demos that I have found:

Rippling Water Cavas Demo

In this demo a beautiful rippling water effect is drawn using the HTML 5 canvas element. The ripples can be triggered using the mouse to drag or click. Unfortunately this demo is a little slow. On my Macbook it ran at only 5 FPS in both Safari and Google Chrome.

8-Bit Palette Color Cycling Canvas Demo

This very impressive canvas demo reimplements a trick used in the days of 256 color palettes in video games. Because these graphical effects were designed to run on very slow early computers they run excellently in the canvas element. The demo has a nice set of options such as zoom and blending mode adjustments.

Online Collage Generator Implemented in Canvas

This canvas demo is a web app that helps you create an online collage. You can search for images to include and then adjust their rotation, shadows, and placement above another backdrop image.

HTML 5 and Canvas Sketchpad Web Application

This impressive online painting and drawing application has the potential to be an online Photoshop. The interface is very well designed and the drawing canvas is fast and responsive to input and brush strokes.

Pictures from Texas Renaissance Festival

2010-11-27T15:17:00.001-06:00

This is an index of pictures that I took at the 2010 Texas Renaissance Festival. Choose a category to view selected photographs from it:

Or you can view all the pictures, including many that didn't make it into my blog posts, in my public Google Picassa gallery.

Shopping at Texas Renaissance Festival

2010-11-27T15:09:00.000-06:00

The Texas Renaissance Festival has shop after shop full of renaissance garments, shoes, hats, weapons, and anything else that you might need or want for cosplay. There are also plenty of shops selling household decorations, furniture, and other goods. The shop keepers dress in costumes, speak with English accents and ask for pounds not dollars.

Buildings at Texas Renaissance Festival

2010-11-27T15:08:00.002-06:00

All the buildings and shops at the Texas Renaissance Festival are designed to look like they could have come from medieval times. The shop lined streets beneath towering pine trees are beautiful from an architectural standpoint.

Misc Pictures From Texas Renaissance Festival

2010-11-27T15:08:00.001-06:00

These are some of the other pictures which I thought were noteworthy, but didn't fit into one of the other categories.

Cosplay at Texas Renaissance Festival

2010-11-27T15:08:00.000-06:00

The cosplay was one of my favorite things about the Texas Renaissance Festival. The variety and attention to detail on the costumes amazed me. One man I talked to said he had been working on his costume and character for thirty years. It wasn't just people who worked there that were dressed up. It was also guests who love Renaissance culture and clothing.

Yes, that is a segway that the man is riding.

Music at Texas Renaissance Festival

2010-11-27T15:07:00.001-06:00

These static images can't convey the sound of the music, or the motion of the dancers and musicians but I did my best to take pictures that would show the variety and atmosphere of the music.

Entertainment at Texas Renaissance Festival

2010-11-27T15:07:00.000-06:00

The entertainment at the Texas Renaissance Festival were many and varied, from comedy acts, to drama, acting, and stunts. Hopefully this photographs can give you a taste of the variety of things going on.

In the above picture the performer is graphically demonstrating why its not a good idea to run while holding scissors. I have no idea how he managed to insert this large pair of scissors up his nose. I don't want to know.

I chose to put this picture under entertainment rather than music because the show was part miming act, and there was only one musician playing one instrument rather than a full band. The custom bell organ was extremely loud, but very beautiful sounding.

Firefox Button/Text Height and Padding Fix

2010-11-25T19:26:00.004-06:00

Recently in one of my web projects I ran across a frustrating bug in Firefox. When I defined a text input and a button input with the very same CSS styling rules they did not have the same height. Instead the button control appeared to be about two pixels taller than the input control:

Safari:

Firefox:

Internet searches revealed numerous possible fixes, from adding a DOCTYPE to the page, to trying to find work arounds for line-height. Now of them worked. I finally tracked the problem down to a default CSS rule in Firefox that can easily be fixed using the following CSS code:
button::-moz-focus-inner{padding:0; border: none;}

For some reason the default CSS stylesheets are set to add extra padding and an invisible transparent border to the inside of button controls, making them larger than text areas styled with the exact same CSS code. This makes absolutely no sense, but fortunately you can easily fix this by adding the above line of CSS to your stylesheet, or better yet add it to the CSS reset you use in all your web design work.

Basic Computer Networking Devices

2010-06-24T09:33:00.001-05:00

NIC

The NIC (Network Interface Card) is part of the host computer. It contains the MAC address, uniquely identifying the machine on the network. The NIC contains the data link network layer logic, and performs other basic functions of detecting and processing network communication at the lowest level.

Repeaters

Repeaters are devices which connect two physical wires. They are powered and boost the signal if it must travel over long physical distances. In the case of digital signals the repeater restores the signal, removing noise as well.

Hubs

Hubs are non-intelligent network devices which do little more than connect wires together. They operate on the physical layer only, and thus do not stop broadcast storms or prevent network collisions. Powered hubs also function as repeaters, boosting signals and cleaning digital signals.

Bridges

Bridges work on layer one. They interpret data frames, recording the MAC addresses on outgoing packets so that they can build a bridging table that associates each MAC address to a port on the bridge. Bridges also read the MAC address on incoming data frames, then uses the table to send the frame through the correct port. If the incoming frame has an unknown MAC address then the bridge floods the frame to all ports. Bridges are much slower than hubs because they store frames internally to read them before forwarding them.

Switches

Switches do everything that a bridge does, and more. The main difference between a bridge and a switch is that switches use a variety of different higher level techniques to improve latency and reduce errors and collisions.

Store and Forward

This switching technique stores incoming frames in a buffer, and does not forward it until the entire frame has been received. It also performs a CRC error check to ensure that the frame is valid. If it is not then it drops it, saving bandwidth and further limiting collisions by not forwarding an invalid frame. Unfortunately this technique is the slowest, because the switch has to wait for the entire frame. This technique is adopted from the technique used by bridges to forward frames, but with an added error check.

Cut Through

This forwarding technique reads the incoming frame until it detects the destination MAC address and then immediately begins forwarding it. This is the fastest technique, but it does not allow error checking. In addition, this technique is more likely to cause network collisions.

Fragment Free

This frame forwarding technique reads the first 64 bytes of the frame and then forwards the frame. On modern contention based Ethernet networks most network collisions happen within the first 64 bytes of the frame. As with cut through forwarding there is no error detection on the switch. This technique offers high latency and also significantly limits collisions.

Adaptive Cut Through

This hybrid technique detects the error rate on the connection. If there are many errors and network collisions then it switches to store and forward technique. If there are very few errors due to a high quality connection then it uses cut through technique. This allows high latency on good connections, and fewer collisions and errors on bad connections.

Other Switch Functionality

More expensive switches may operate even higher up on the OSI model, even up to the session or application layer to perform advanced statistical analysis and security functions. Switches can also be used to create VLANs (virtual local area networks). This technique allows groups of ports to be treated like a single LAN. This creates separate broadcast domains, stopping broadcast storms and improving security by preventing different VLANs from interfering with each other. In addition VLANs can be configured to operate across multiple switches that communicate via higher level routers. In a static VLAN each port is manually mapped to a specific VLAN. In a dynamic VLAN the ports determine which VLAN they belong to using a manually created database defining which MAC addresses are in which VLAN. This allows devices to be moved between ports without having to reconfigure the VLAN manually.

Routers

Routers operate at the third layer of the OSI model. They are used to connect multiple networks. Rather than using bridging tables of MAC addresses, they instead read the logical address from the packets. These logical addresses are stored in a routing table. The advantage of using a router to connect two switches is that the router separates the two switches into two logical networks. This does even more to prevent collisions, improve security, and stop broadcast storms.

Since the router is a level three device that communicates using packets it can be used to connect networks of different types, for example ethernet and token ring networks.

Interior routers operate within an office, directing data between separate LANs. Border routers connect interior LANs to WANs. Exterior routers connect WANs together, and are typically owned by ISPs.

The most important functionality of routers is that they calculate what path network packets should take as they travel over the network. In static routing, paths are chosen be administrators manually. This only works in small offices and other interior routers because it does not keep track of changing conditions present in the exterior internet. However, static routing is extremely fast, so for a small interior network it makes a lot of sense. Dynamic routing is much better for large external networks, because it allows routers to communicate with each other to keep track of changing conditions on the network. This communication is designed to work automatically so that humans do not have to interfere. However, this computation is vulnerable to much higher latency, however, so routers require much faster processors and better hardware than a switch or bridge.

Three different routing protocols are used: distance vector, link state, and hybrid.

Distance Vector Routing Protocol

This routing protocol tries to minimize the number of hops, or the number of routers to the destination. However it doesn't take into account the quality and speed of the connection. They are effective for small networks only. Routing Information Protocol (RIP) was an early distance vector routing protocol. It causes routers to communicate with each 30 seconds, and also limits the number of hops to 15, making RIP useless for modern internet. Border Gateway Protocol (BGB) has replaced RIP as the primary distance vector routing protocol used on border and exterior routers.

Link State Routing Protocol

In this technique routers communicate with each other when there are changes. Every router maps the entire network independently. This allows every router to be much more flexible and capable of dealing with problems. OSPF (Open Shortest Path First) was an early link state routing protocol. Under this protocol there is no hop limitation. The most commonly used link state routing protocol is EIGRP (Enhanced Interior Gateway Routing Protocol). This protocol is a hybrid which combines distance vector and link state routing depending on the situation. It is useful for interior and border networks.

Brouters

Brouters can operate as either a switch or a bridge. Unlike a bridge which can only accept frames and read MAC addresses, and a router which can only accept packets and read IP addresses, a brouter can read either frames or packets and forward them accordingly.

Gateways

Gateways translate between different protocols, for example allowing Linux, Mac OS X, and Windows networks to communicate and share files. Gateways can help different email systems communicate with each other, translate voice data to data packets and vice versa, or work as a firewall. Gateways are primarily software that can be run on computers, servers, or routers.

Posted via email from Experiment Garden

Education Crises Infographic Video

2010-06-22T14:08:00.001-05:00

via vimeo.com

This video is both an incredible piece of animated infographic art and a detailed look at the education crises faced in America.

Posted via web from Experiment Garden

High Altitude Weather Balloon Experiment

2010-06-15T14:01:00.001-05:00

via vimeo.com

This fascinating video shows an experiment that involved a high altitude weather balloon and two cameras operating using some hacked together code. The balloon reached a peak altitude of more than 20 miles, allowing the cameras to take some incredible video footage and still photos before the balloon burst and the cameras floated back down on a parachute.

Posted via web from Experiment Garden

Removing Blue Text Input Outline in Safari

2010-06-15T13:34:00.002-05:00

As much as I love the Safari browser, I really hate the fact that it adds a fuzzy blue border around text inputs. This can interfere with custom styling of text controls, and is just bad practice from my point of view. After a bit of searching and research I came up with the following technique for removing the border using CSS. No hacks are required and it cooperates well with other browsers as well.

/* Get rid of the annoying blue outline in Safari */

input[type=text]:focus,

input[type=password]:focus

  outline: 0 none;

I have added this simple CSS solution to my custom CSS reset kit.

Posted via web from Experiment Garden

Loading JavaScript Functions Via AJAX

2010-06-14T14:27:00.001-05:00

This article will explain an AJAX technique that I am using in the development of my current startup project Kliqd. Those who have already been following the project will know that Kliqd makes extensive use of AJAX. Kliqd is designed so that as much of the HTML creation as possible happens on the client side. The client side JavaScript asks the server for data via JSON and then uses it to create the pages.

Recently I came up with an idea for how to further streamline this AJAX technique and make it even more efficient. Most pages on Kliqd contain extra functionality that isn't going to be used every time the page is viewed. For example, if a user of Kliqd is viewing another user's profile they will see buttons to follow that user, befriend that user, or invite that user to an event. Each of those buttons is tied to JavaScript logic that is used to open modal dialogs so that members can send a friend request, send an event invitation, and so on.

What if it was possible to load that JavaScript logic on the fly, when it was needed, rather than right from the start? So if a user opens a profile and never clicks the friend button, then the logic for opening the friend dialog will never be loaded. This would save bandwidth and time on the front end, causing the page to load faster and display faster. With this goal in mind I started experimenting with a way to load JavaScript functions via AJAX and execute them after the page is done loading.

The First Experiment

First I created a basic page which loaded a *.js file via AJAX, used eval() to interpret it, and then called the function which was contained within the downloaded file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<html>
  <head>
    <title>Ajax JavaScript Loader</title>    
    <script type='text/javascript' src='jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
      $.ajax({type: "GET",
              url: "1_loader.js",
              success: function(responseText)
              {
                eval(responseText);
                internalFunction();  //This function defined in the JavaScript code loaded.
              }
            });
    </script>
  </head>
  <body>
    This is a basic test of loading JavaScript code via AJAX and then running it.
  </body>
</html>

1 2 3 4

function internalFunction()
{
  alert("Success.");
}

This experiment worked, demonstrating that I could interpret a function using eval() and then call it. I immediately went on to create a second experiment, but I didn't realize that I had missed an important detail about the first experiment which would cause my second version to fail.

The Second Experiment

Feeling ambitious I created a more complicated piece of logic which allows the programmer to include JavaScript logic after the page has already finished loading. Requests to include JavaScript files are put into a buffer and handled one by one in the order they were issued. There is even a handler so that you can execute a piece of JavaScript or a function call after all the logic is loaded via AJAX. As I hinted earlier, though, the following code does not work. As you read through it, see if you can spot the subtle bug that I missed. Afterwards I will explain what went wrong:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

<html>
  <head>
    <title>Ajax JavaScript Includer</title>    
    <script type='text/javascript' src='jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
    
      //The list of loaded resources.
      var loaded = new Array();
      
      //The list of resources that have yet to be loaded.
      var loading = new Array();
      
      //Whether or not we are currently loading a resource via AJAX.
      var currentlyLoading = false;
            
      function loadAjax(resourceUrl)
      {
        $.ajax({type: "GET",
                url: resourceUrl,
                success: function(responseText)
                {
                  //Set up the variables and functions loaded.
                  eval(responseText);
                  
                  //This item is loaded, remove from queue.
                  loading = loading.slice(1,loading.length);
                  
                  //Add it to the already loaded queue.
                  loaded[loaded.length] = resourceUrl;
                  
                  //Now check the load queue for another item to load.
                  if(loading.length>0)
                  {
                    //Load the first item in the queue via AJAX.
                    loadAjax(loading[0]);
                  }
                  else
                  {
                    //We are done loading logic via AJAX.
                    currentlyLoading = false;
                  }
                }
              });
      }
      
      function include(resourceUrl)
      {
        //Check to see if this resource has already been loaded.
        for(var i=0; i<loaded.length; i++)
        {
          if(loaded[i]==resourceURL)
          {
            return;
          }
        }
        
        //Store the in the loading queue.
        loading[loading.length] = resourceUrl;
        
        //Now check to see if we are already running an ajax request.
        if(currentlyLoading == true)
        {
          return; //The current loading process will work its way through the queue.
        }
        
        loadAjax(resourceUrl);
        currentlyLoading = true;
      }
  
      //This makes it easy to execute a function after all items to be included are
      //loaded.
      function waitForInclude(afterSafeFunction)
      {
        if(loading.length==0)
        {
          afterSafeFunction();
        }
        else
        {
          //Wait 100ms and then try again.
          setTimeout("waitForInclude("+afterSafeFunction+")",100)
        }
      }
    
      include("2_setFoo.js");
      include("2_outputFoo.js");
      
      waitForInclude(function()
      {
        setFoo("Set in ajax.");
        outputFoo();
      })
      
    </script>
  </head>
  <body>
    This is a basic test of loading JavaScript code via AJAX and then running it.
  </body>
</html>

1 2 3 4 5 6

var foo = 'test';

function setFoo(bar)
{
  foo=bar;
}

1 2 3 4

function outputFoo()
{
  alert(foo);
}

At first glance it appears that nothing is wrong, but when the code is run, it says that the functions setFoo() and outputFoo() cannot be found. What is wrong? To understand what was wrong I had to understand the difference between the first experiment, which does work, and this second experiment. Simply put, the first experiment calls the function within the same code block in which it was created using eval(). The second experiment attempts to call the function from outside the code block. To demonstrate what I mean, notice the difference between the following code and the code in the first experiment:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<html>
  <head>
    <title>Ajax JavaScript Loader</title>    
    <script type='text/javascript' src='jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
      //Sadly internalFunction can not be accessed here, only with the scope of the
      //success function in which it was created using eval();
      function nonScope()
      {
        internalFunction();
      }
      
      $.ajax({type: "GET",
              url: "1_loader.js",
              success: function(responseText)
              {
                eval(responseText);
                internalFunction();  //This function defined in the JavaScript code loaded.
                nonScope();
              }
            });
    </script>
  </head>
  <body>
    This is a basic test of loading JavaScript code via AJAX and then running it.
  </body>
</html>

The eval() function creates the function within the scope of the AJAX response function. Essentially it creates a function within a function:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<html>
  <head>
    <title>Ajax JavaScript Loader</title>    
    <script type='text/javascript' src='jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
      //Sadly internalFunction can not be accessed here, only with the scope of the
      //success function in which it was created using eval();
      function nonScope()
      {
        internalFunction();
      }
      
      $.ajax({type: "GET",
              url: "1_loader.js",
              success: function(responseText)
              {
                function internalFunction()
                {
                  alert("Success.");
                }
                internalFunction();  //This function defined in the JavaScript code loaded.
                nonScope();
              }
            });
    </script>
  </head>
  <body>
    This is a basic test of loading JavaScript code via AJAX and then running it.
  </body>
</html>

That function within a function can only be accessed within the function in which it was created. Once I identified the problem it was relatively easy to fix.

The Third Experiment

I made a few simple changes to my code from the second experiment so that rather than defining a function within a function, the loaded JavaScript defines its functions as members of a global object which serves as a type of namespace for all the logic loaded via AJAX:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

<html>
  <head>
    <title>Ajax JavaScript Includer</title>    
    <script type='text/javascript' src='jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
    
      //We have to declare a global object that we will use as a namespace for storing
      //the eval loaded functions and variables, otherwise they will only exist within
      //the scope of the ajax response function, which is be useless.
      var fooNamespace = new Object();
    
      //The list of loaded resources.
      var loaded = new Array();
      
      //The list of resources that have yet to be loaded.
      var loading = new Array();
      
      //Whether or not we are currently loading a resource via AJAX.
      var currentlyLoading = false;
            
      function loadAjax(resourceUrl)
      {
        $.ajax({type: "GET",
                url: resourceUrl,
                success: function(responseText)
                {
                  //Set up the variables and functions loaded.
                  eval(responseText);
                  
                  //This item is loaded, remove from queue.
                  loading = loading.slice(1,loading.length);
                  
                  //Add it to the already loaded queue.
                  loaded[loaded.length] = resourceUrl;
                  
                  //Now check the load queue for another item to load.
                  if(loading.length>0)
                  {
                    //Load the first item in the queue via AJAX.
                    loadAjax(loading[0]);
                  }
                  else
                  {
                    //We are done loading logic via AJAX.
                    currentlyLoading = false;
                  }
                }
              });
      }
      
      function include(resourceUrl)
      {
        //Check to see if this resource has already been loaded.
        for(var i=0; i<loaded.length; i++)
        {
          if(loaded[i]==resourceURL)
          {
            return;
          }
        }
        
        //Store the in the loading queue.
        loading[loading.length] = resourceUrl;
        
        //Now check to see if we are already running an ajax request.
        if(currentlyLoading == true)
        {
          return; //The current loading process will work its way through the queue.
        }
        
        loadAjax(resourceUrl);
        currentlyLoading = true;
      }
  
      //This makes it easy to execute a function after all items to be included are
      //loaded.
      function waitForInclude(afterSafeFunction)
      {
        if(loading.length==0)
        {
          afterSafeFunction();
        }
        else
        {
          //Wait 100ms and then try again.
          setTimeout("waitForInclude("+afterSafeFunction+")",100)
        }
      }
    
      include("4_setFoo.js");
      include("4_outputFoo.js");
      
      waitForInclude(function()
      {
        fooNamespace.setFoo("Foo was set using a function loaded via AJAX, and output using another function loaded via AJAX.");
        fooNamespace.outputFoo();
      })
      
    </script>
  </head>
  <body>
    This is a basic test of loading JavaScript code via AJAX and then running it.
  </body>
</html>

1 2 3 4 5 6

fooNamespace.foo = 'Not yet set.';

fooNamespace.setFoo = function(bar)
{
  fooNamespace.foo=bar;
}

1 2 3 4

fooNamespace.outputFoo = function()
{
  alert(fooNamespace.foo);
}

This example finally works, proving that it is possible to load and run JavaScript functions after the page has finished loading. This means that it is possible to have on demand downloading of JavaScript code, preventing wasted bandwidth, and decreasing page load times by making it possible to download and display the page very quickly, then download the JavaScript logic as it is needed.

Conclusion

I put together a slightly more complicated example containing my AJAX JavaScript includer code as a library. To get started download the following sample code, which includes the library:

JavaScript Include Ajax Example

The file include.js contains two simple functions that are all you need to get started:

include(fileUrl);

This is fairly obvious. It downloads the file at fileUrl via AJAX and executes its contents. Be sure to create functions as members of a global namespace as in my third experiment.

waitForInclude(functionToExecute);

This function will execute functionToExecute() after the queue of JavaScript files to download and execute has been completely processed.

If you would like to use the code feel free to do so. A few ideas that could be added might be callback functions that could be used to display an AJAX spinner, or advance a progress bar while JavaScript logic loads in the background. Please let me know if you use my code on any interesting projects because I would love to keep track of whether or not this technique catches on, and if so who starts using it.

Posted via web from Experiment Garden

Project Kliqd - Early Designs, New Logo, New Landing Page

2010-06-14T13:22:00.001-05:00

This article is the third in a series covering the development of Kliqd, my current startup project. The first article introduced the focus and plan behind Kliqd. The second article covered some of the technical details of how it works behind the scenes.

In this article I will show some of the early designs to show how Kliqd's appearance has evolved as the project has developed. Kliqd started out with a very red color scheme. The following screenshots show the changes made to the profile pages and the dialog for creating a new event:

See and download the full gallery on posterous

Recently however, we have decided to give Kliqd a more pleasing blue and gray theme. Along with this change we are replacing the old red logo with this new one:

As I convert each page over to the new blue and gray design I will share screenshots of the ongoing progress. In the meantime we have built a new landing page for the purchased domain. You can submit your email address to be among the first to receive a notification when we launch the website:

If you are interested in Project Kliqd then please visit the kliqd website and sign up to receive a notification on launch day, or subscribe to this blog to keep up-to-date on the recent progress.

Posted via web from Experiment Garden

Google Releases SSL Beta Version

2010-06-11T08:55:00.001-05:00

See and download the full gallery on posterous

It appears that Google is now making all searches use SSL for true privacy. I don't see any other news about it on the internet so either I'm a beta tester of something new, or the mainstream media just hasn't caught up yet.

Posted via web from Experiment Garden

The New Mediators - Designed Transparency in a Complex World

2010-06-10T14:21:00.001-05:00

via vimeo.com

The New Mediators by Jonathan Jarvis makes the argument that our increasingly complicated world needs better ways to explain complex subjects in a transparent manner. The video itself implements the very method it advocates and manages to express a tremendous amount of data and argument into just one minute and fifty-three seconds. There is no sound, just animation, yet the ideas are clear.

Posted via web from Experiment Garden

Project Kliqd - Technical Details

2010-06-10T13:06:00.002-05:00

This is part two in a series of posts about Kliqd, my current startup project. The first article about Kliqd introduced the basic idea and monetization scheme behind the startup. This article will begin a discussion of the technical details of the project.

Technical Specifications

I am most familiar with PHP so that is the server side language that I am using to develop Kliqd. Now I know that most startups seem to be using Ruby on Rails, Python, Perl, or other glamorous languages, but I favor the simple speed of PHP development. In addition PHP is easily supported by all decent web hosts.

For database storage I am using MySQL. Once again, MySQL is not an exciting solution like Cassandra, Redis, or other newer database systems. However, I have designed Kliqd's database usage such that it can be easily converted to another database system such as Redis in the future. I am using a hybrid database approach that combines key value pairs and relational tables. Key values are used for storing extra data attached to user profiles, events, and other items which I may want to expand in the future. Normal relational tables are used for storing some of the critical values that I use to sort and limit queries. This allows me to take advantage of the querying power of MySQL relational tables while letting my key value tables provide room for expansion. In the future the key value portion of Kliqd can be easily moved to Redis or another key value database system.

Current State of the Code

In its current state as of today Kliqd is made up of 4848 lines of PHP, HTML, and JavaScript. Over the years of developing PHP I have developed a coding process where I try as much as possible to separate my code into modules which can be reused if possible. So for example, I have a file that contains the content for a login form, and another file that contains the content for a registration form. To complement these I have a code module for the logic behind registering a new user, and another for checking a login attempt. This makes it easy for me to throw together a new project using logic and content that I have already developed and tested in other projects.

Server Side Logic Flow

When a user requests a page from Kliqd a simple .htaccess file rewrites requests such as...

http://localhost/folder/page

...to a static file which serves all requests:

http://localhost/pageServer.php?major=folder&minor=page.

This allows me to use a sensible and beautiful permalink structure without needing to expose the ugly bits behind the scenes. For example I can easily create a database of permalinks so that rather than having to see and ugly url like this...

http://localhost/index.php?q=event&id=345

...users can instead see a clean url such as...

http://localhost/events/sxsw-hacker-news-meetup-austin

This is desirable both from a UX point of view, but also from a SEO point of view. URI's that have a sensible structure and keywords in them are more likely to be higher ranked in search engines.

Once the page is requested the page serving code can begin work. First it checks to see if the request includes data that has been submitted by POST or GET. If so it launches another code module which checks to see what type of data has been submitted. Each form has a hidden input control which identifies which form the data came from. In addition each AJAX request made from the client incorporates the same value. Using a white list of acceptable form types, the code then includes the logic necessary to store or use the submitted input data, or serve the AJAX request.

Kliqd makes heavy use of AJAX to load data from the client side and build the page on the client side rather than the server side. Data is encoded in JSON format on the server side and then sent to the client. On the client side JavaScript simply does an eval() on the results of the request, then uses the data to build the page.

This saves bandwidth by reducing the need for complete page refreshes. For example, the page that lists local events includes a header and footer, CSS statements, and other extra chrome. There is no need to refresh this entire page and all the chrome if the only thing that differs between two pages of event listings is the inner content. Loading the data via AJAX and then building on the client side not only saves bandwidth by eliminating the need to needlessly refresh the page chrome, but it also saves server load. Rather than having to generate HTML on the server side, the server can just send JSON and let the client take over from there.

Of course this results in more complicated JavaScript on the client side, but it is a reasonable tradeoff I believe.

Summary

This article has covered a few of the basic technical details about the way Kliqd operates. To summarize Kliqd is written in PHP, and uses MySQL in a hybrid mix of relational database and key value. Kliqd uses .htaccess to rewrite requests and make it possible to have good looking URL's that will perform better SEO-wise as well. Last but definitely not least, Kliqd uses JSON encoding to send data to the client side via AJAX and build the page HTML on the client side rather than on the server side.

Of course every programming project is a learning experience, so I would love to hear your thoughts and advice. Feel free to comment if you have a suggestion or a question. In future posts I will share some more details and code snippets. Please subscribe to Experiment Garden if you would like to keep up-to-date on how my startup is progressing.

Posted via web from Experiment Garden

Basic Computer Networking Concepts

2010-06-08T13:37:00.001-05:00

Modulation

Modulation is the technique by which data is turned into an analog wave or a digital signal. There are different techniques of doing this. Amplitude modulation mixes a plain carrier wave with another data wave to change the amplitude of the carrier wave. Frequency modulation changes the frequency of the carrier wave to encode digital data into the carrier wave. A fast frequency may stand for a one whereas a normal frequency means zero. The most complicated type of modulation is analog modulation that uses phase to encode data. This changes the wave's starting point to encode data.

Analog Modulation is used in AM radio. Frequency Modulation is used in FM radio. Old broadcast television uses analog modulation for video, frequency modulation for sound, and phase modulation for color.

Digital modulation uses much less power than analog modulation, and is one of the reasons why small battery powered devices tend to use digital modulation. In digital modulation a clock is continuously sending on pulses, such that the signal looks like it is turning on and off extremely fast. The on and off signal that needs to be transmitted is mixed into these clock pulses.

Multiplexing

Multiplexing is the technique by which multiple network communications are transmitted on a single physical wire. It can be compared to a highway with multiple lanes and cars. In the physical electronic version multiple signals are combined into a single signal using a multiplexer. On the other end of the wire a demultiplexer performs the reverse operation to break the single signal into multiple signals again.

Time division multiplexing gives each signal using the wire an equal share of time to communicate over the wire. After one signal has used its share of time the next signal starts using the wire. These single shares of time are extremely short so that it appears as if all signals are using the same wire at the same time. Time division multiplexing is wasteful, however, because if one signal does not have anything to communicate it still gets a share of the wire time, which is then wasted.

Statistical multiplexing is more complicated. It measures how much each signal needs to use the wire, and signals with more data to transmit get a greater share of time using the wire. This maximizes the bandwidth by ensuring that very little time is given to signals that have very little data to transmit.

Frequency division multiplexing gives each signal is own frequency to communicate it. This allows multiple signals to communicate at the same time, rather than having to divide wire usage time into dedicated segments.

Wavelength division multiplexing is used for fiber optic multiplexing. Beams of light from different carrier waves are mixed into a single beam of light, as if by a prism. On the other end the wavelength demultiplexer works like a prism to split the light into different wavelengths again. Dense wavelength division multiplexing is an extreme version of wavelength division multiplexing, which breaks light up into 80 to 160 separate channels. It requires very high quality equipment that is extremely expensive.

Simplex, Half-Duplex, and Full-Duplex

Simplex network communication is only one direction. An example may be television, radio, or a baby monitor. You can receive communication but you can not send communication. In half-duplex network communication data can travel in both directions, but only in one direction at a time. An example may be a walkie-talkie in which you can send and receive, but not do both at the same time. In full-duplex communication you can send and receive at the same time, for example on a phone.

Point to Point versus Point to Multipoint

In point to point communication one sender is communication with one receiver. In point to multipoint communication one sender's signal is heard by many receivers. This is also called broadcast or multicast communication as opposed to non-boradcast point to point communication.

Throughput versus Bandwidth

These two terms are often used interchangeably, but technically they mean two different things. Bandwidth refers to the range of frequencies used on a channel. This range is closely correlated with the possible speed of the communication. Throughput is the actual measure of how many bits you can transmit per second. Because of the close relationship between bandwidth and throughput the term bandwidth is often used to mean throughput.

Throughput is reduced by transmission flaws such as noise, which may result in transmission errors that have to be corrected; and latency, which slows communication times.

Baseband versus Broadband

Baseband is a transmission form in which there is only one communication channel. Broadband has multiple channels. An example of this might be cable television.

Transmission Flaws

Noise is caused in a communication by electromagnetic interface, cross talk between wires, radio frequency interface. Noise causes analog waves to no longer be smoothly curved.

In a digital communication noise causes the square on and off state of the network to appear slightly jagged. A analog signal is extremely hard to clean of noise. Amplifiers to boost the analog signal may even exaggerate the noise. With a digital signal repeaters can effectively clean noise from the signal completely. Noise can also be limited by shielding wires with metal conduit, or choosing network mediums which are more resistant to noise.

Attenuation is the loss of a signal's strength. The further the signal gets from the source the less distinct it becomes. Amplifiers for analog signals and repeaters for digital signals boost signals to remove attenuation. Amplifiers and repeaters are simple devices that fit in the physical layer of the OSI model. They have not understanding of what they are amplifying or repeating.

Latency is a third transmission flaw. The farther away from each other two network hosts are the more latency there will be. Latency depends on the type of network used. Fiber optic will have less latency than copper wire networks, which will in turn have less latency than a wireless network. Latency can also be caused by bottlenecks and slow hardware on a network.

Posted via web from Experiment Garden

Network Transmission Basics - Analog and Digital Signals

2010-06-08T11:01:00.001-05:00

Analog Network Signaling

An analog signal is best compared to a wave. It has similar properties to an ocean wave, and can be described using three specific characteristics: amplitude, frequency, and wavelength.

To use the ocean wave analogy an analog signal's amplitude is like the height of a wave rolling in onto the beach. The frequency of an analog signal can be compared to how fast the waves roll in. Wavelength can be compared to the distance between one wave and the next wave. Wavelength is measured as the distance between the peak of one wave and the next.

Advantages and Disadvantages of Analog Signals

Analog signals are variable and can convey more subtly than a digital signal. For example the human voice is analog, and has more tone than a digital representation of the same voice. However, analog signals are very vulnerable to interference from outside forces and other waves which can cancel them out.

Digital Network Signaling

A digital signal is made up of on/off states. Unlike the smooth curve of an analog wave, the digital signal cuts on and off, like morse code. This happens to perfectly fit the type of communication inside a computer, which is made up of on/off states as well.

Advantages and Disadvantages of Digital Signals

Digital signals are much more reliable than analog signals because they are less vulnerable to interference and errors. However, digital equipment costs more and is much more complex.

Posted via web from Experiment Garden