Web Linker

     As far as I know, most web development is done with tools which are little more than text editors. For as long as the web as been around, you'd think that these tools would be a bit more sophisticated. Sure, they have syntax highlighting, code hinting, and automatic spacing. Dreamweaver has a design view that will auto create the appropriate HTML and CSS for you, and Word can save a document as an HTML file. But, I feel that there should be more.

     Content Management Systems like Wordpress and Drupal does wonders for designers who don't have the time (or knowledge) to edit raw HTML and CSS. But at what cost? Have you seen how many stylesheets are on some of those sites. There is a main stylesheet, a stylesheet for the theme, each plug-in has its own stylesheet. It's madness! I've even seen websites that don't come from a CMS with upwards of 7 - 10 stylesheets. And then there are all the javascript files that are called; custom scripts made just for the site, jQuery, some other script from some other place. I saw one website with a total of 14 external CSS and JS files. That is an extra 14 requests the browser has to make, not including having to get any images that aren't cached.

      I read on Stack Overflow somewhere that firefox limits the number of concurrent requests to 6. I'm assuming that other browsers do the same and that the number of requests they limit is probably comparable. Lets say that a good connection has a ping of about 100ms, those extra requests will take a minimum of 300ms to get. 300 milliseconds. Thats pretty quick. But what about those who don't have such a great connection. Maybe something is interfering with their wifi, or they are using a mobile device and the network is clogged to high hell (like using a iPhone in New York City). What if their ping time was around 500ms. With that many external files to load, your looking at a minimal of 1500ms. Thats just getting the stylesheets and javascript files. Any images that aren't cached on the client computer would have to be requested as well. Still kinda quick in people time, but that is FOREVER in computer time. And yes, people do notice when a website loads slowly. I always dreaded the "my computer seems slow" phone call for tech support.

     Why don't we just embed the styles and the javascript directly into the webpage? Then you only have to get one the webpage and any images associated with it. Lets say hello to code maintenance. Those who have had the pleasure of inheriting any sort of code to update or fix, will know what I'm talking about. Code is hard to really hard to read. Much harder than it is to write, and putting all your code in one giant file is like writing a ten page essay without dividing it up into paragraphs. In writing, a paragraph should really have one main idea, with some details sprinkled in to support that idea. In programming, each individual file is a paragraph, one main idea, or purpose, and a lot of details sprinkled in to support that purpose. This makes it easier to read, find bugs, and allows you to know where to look to change something.

     So web developers compromise. They keep all the files separate so that their code is easy to maintain at the expense of efficiency. They justify this by saying that the trade-off is worth it. Of course, they are talking from their perspective. If they can load their page reasonably quick, then it isn't their fault if someone else can't. How can they be expected to go completely crazy trying to debug a 10 page long paragraph. It isn't fair to the developer.

     This is why development and production are kept separate. For this very reason. So that developers don't have to pull out all of their hair looking around for bugs. They can have their nicely separate files on the development side, and when its time to go to production, embed all the external CSS and JS into one file. Hell, you can even write a script or small program to do it for you, kinda like a linker. Those of you not familiar with what a linker is (as some who work exclusively with the web aren't), a linker is a program that takes the code that is created from a compiler and combines it into one file. Sometimes it's called a loader. Usually the linker and the compiler is the same program.

     However, none of the places I've worked at has this kind of separation between development and production. The production side is always just a mirror of what is on the development side. When a bug needs to be fixed, or a change needs to be made, its changed first on the development side, and then those files are copied over to the production side. I don't know if this is because no one wants to deal with the overhead of a "web linker", or if the thought of one just never crossed their mind.

     Of course, why stop at just a linker. Why not have a program that does more, like maintain a "CSS Smart Library", or allow developers to link notes or documentation to files (a little different than comments). Oh, or even have a built in bug tracker (*giggles like a little school girl). Imagine being able to write code once and then having a button that transforms it to PHP, ASP, Python, Javascript, or whatever else you want it to be. Or even have an optimize button that optimizes your webpages for specific browsers so you don't have to deal with ugly looking hacks. If anyone knows of such a wonderful thing that exists, please, please, PLEASE......let me know. Heck, leave a comment and let everyone know.

     I guess I just want more out of the tools I use for writing code. I did a search of web tools today and found a couple that look interesting and will give them a try. What? You mean I could build the thing that I want? Why, yes I could do that, but I'm pretty busy. I need to adjust the margins of my blog and find just the right shade of green for the background. I don't have time to do something like that!

For Loop Nonsense in Javascript

     I wrote my first program when I was 12 years old. Wow, that's 15 years ago; I'm not sure how I feel about that. I had a class that taught BASIC. I know we used Apple computers in that class, but my memory isn't good enough to remember exactly which model, only that it was command-line only. Perhaps I didn't care enough to know which model it was. The first program I wrote displayed the American flag and showed the lines of the Pledge of Allegiance. Then I wrote a "choose-your-own-adventure" game. I was to show off the game at the school's open house, but I guess I forgot to save my work from when I finished as it was incomplete, so I showed the flag instead. After the open house, I really got into programming. I cut one of my not-so-important classes to go to the computer lab and code. I spent class time handwriting code when I should have been reading a textbook or studying instead. Yep, I wrote code by hand. Sometimes, I still do. The class I cut all the time to work on my new program was Life Management, and I almost failed it! I kind of find it funny that I nearly failed Life Management because I became obsessed with writing code.

     The new program I was coding at the time (in case you were wondering), was another game. It was another "choose-your-own-adventure" game. This one had a spy theme. I was including an inventory system, money, allies (that could die if you weren't careful), and a password system so that you can pick up where you left off. The programs we made were unable to save/load data. I'm not sure why, maybe I just hadn't learn how to do that. One thing I remember from back then was using the GOTO statement. Handwriting code using the GOTO statement is not fun. For those of you not familiar with the GOTO statement, here is an example (disclaimer: the syntax written for the GOTO statements is pseudo code, I do not wish to fill my head with too much GOTO nonsense):
     
          GOTO 125

     That means jump to line 125 and continue from there. This is how control statements worked. For example:

          6  if (something = 0) GOTO 8
          7  GOTO 10
          8  line of code if the if statement is true
          9 GOTO 11
          10 line of code if the if statement is false
         11  code after the control statement

     Oh, what a mess. And this is how loops were done as well.

          5  some line of code
          6  some line of code
          7  if (something = something) GOTO 5
          8  code that comes after the loop

     That's actually not as bad to look at as the control statement really, since that example had only one GOTO. However, this article is not about GOTO. It's about the For Loop. I like to know exactly what is happening when I write code. I had always felt like there was more going on with For Loops that what meets the eye. What does this have to do with GOTO? Well, in BASIC the GOTO statement is how the loop restarts itself. In the For Loop, it's the bracket that closes the loop. But I wondered, when does the counter get incremented? When does the comparison happen? Of course these questions are pretty easy to answer. The comparison happens at the beginning of the loop and the increment happens at the end. The initalization for the counter variable happens before the loop starts the first time and then never again. But this wasn't enough for me. So I decided to play around with it a bit. I took a simple For Loop (all this is in Javascript by the way, I'm not sure if the same applies to other programming languages.):

          for (var a = 0; a < 3; a++)
          {
               alert(a);
          }

and decided to "translate" it to how I think it would work as a while loop:

          var a = 0;
          while (a < 3)
          {
               alert(a);
               a++
          }

Why "translate" it to a while loop? I feel that while (true) { } is the purest form that a loop can take. I used it many times when I needed a quick loop and didn't feel like thinking much. While looking at it, I wondered....what would happen if I replaced "var a = 0" with something else? I'm sure that it would be an error. So I tried it. I went from

          var a = 0;
          alert("Starting the Loop");
          while (a < 5)
          {
               alert(a);
               a++;
          }

to

          var a = 0;
          for (alert("Starting the Loop"); a < 5; a++)
         {
              alert(a);
         }

And holy cow it worked! I got the message "Starting the Loop", and then a message for each iteration of a. Why did it work? It isn't supposed to work like this. Every tutorial I've read, every lecture about loops I've listened to...none of them ever mentioned that you could do this. How far down the rabbit hole does this go? Are the other statements in the For Loop similar? I tried out other ways to write the For Loop, getting more and more absurd just so I can see how far I could go. All of these ended up working:

          for (var a = 0; a < 5; alert(a))
         {
              a++;
         }

        for (var a = 0; 1; a++)
        {
             if (a > 3)
                  break;
             else
                  alert(a);
       }

       for (; a < 5; a++)
       {
            alert(a);
       }

      for (; ; a++)
     {
          alert(a);
          if (a > 5)
               break;
     }

     for (; ; )
    {
         a++;
         alert(a);
         if (a > 5)
              break;
    }

    for (var a = 0; alert("printAlert"); a++)
   {
        if (a > 3)
             break;
   }

The last one only printed "printAlert" once before ending the loop. I guess since alert() has no return value it evaluates to false.

     In what situations would I need to mangle a For statement so badly? Probably none. I suppose the reason why no one ever mentions that it's possible to do this is because you shouldn't be doing this. That's what the While loop is for. However, I now feel like I understand the For Loop much better than before, even if all that nonsense above is useless 99.9% of the time.

   You can go here to view to view all the examples I put here and see them actually working.