Stickymap Blog

This is another post on web development that you may find interesting.

As you may know, many of our location descriptions include external links. For example, a restaurant posted might contain a link to that restaurant’s website. Here is an example of a location with a link.

Until recently, clicking on those links would cause the web page to load within the iframe that contains the location information. This was a problem because the iframe is only 500 and change in pixel width, and most pages want to be 800 pixels in width. So, we finally got around to changing it.

When you have a link from within an iframe, say <a href=’newPage.php’>, the new page will automatically load within the iframe. In order to make it open up a new browser window, write <a href=’newPage.php’ target=’_blank’> and in order to navigate away from the main Stickymap page, write <a href=’newPage.php’ target=’_parent’>.

Now those 2 options present us with an interesting choice. Do we want external links on locations to open up a new browser window or simply navigate away. Many sites choose to open up a new window in order to prevent users from navigating away from their page. However, this practice is considered by some to be annoying and even spammy. However, I chose to do it that way because when I’m browsing Stickymap, I often want to know information about many different locations. Therefore, it would help me to be able to click on those locations, and have all the company websites open at once without closing my map.  I’d like to get some feedback from you, our users, on this: do you agree with this decision, or would you rather just see a link navigate you away from Stickymap.com?

Another point of interest is how we implemented this change. All external links from these pages have no target attribute. In other words, they all look like this: <a href=’newPage.php’>. When the description is loaded into the page, is there a way to change the target attributes of all the links? Fortunately, there is, and I’ve used a special javascript library called jquery (website) to make it easier. I surrounded the description in an html <span> element, and gave that element a class of “fix_links”, so the html looks like this: <span class=’fix_links’> ….wiki description in here…. </span>.

Now, in order to change the target attribute of all links within that span, all I had to do was execute the following javascript, which is nice and concise thanks to the jquery javascript library.

$(‘.fix_links a’).attr(“target”, “_blank”);

Max

As of now, we are still in the process of upgrading to our dedicated server.  It is taking a lot longer than we like, and there are a lot of complications involved.  First, while we were waiting to get our nameserver switched to the other site, stickymap.com was still pointing to the old server even though our database was already copied over.  Therefore, when people posted markers in that intrim period they “disappeared” when stickymap.com finally pointed to the right place.  We turned this around by copying over the newly created markers (and user profiles, photos, etc.) to the new server.  But – was that a pain!

Then there were some other problems when our hosting company transferred us over.  They failed to transfer our .htaccess file, which means that stickymap.com/mappage would no longer forward to stickymap.com/mappage.php.  The apache software that was installed made it impossible to access our “icons” folder, which is reserved in apache, which is why our icons are not showing up, and some php settings were changes which is causing some warnings on our local pages.

So, sorry about the service disruption today and tomorrow.  We’ll try to get this back up and running smoothly as soon as possible.

Max

Some knowledge of the web development process is required for this post…

Some of you Internet Explorer users may have noticed that while using the sifter or creating a marker the icon selector was way is slow. Well, not anymore – we’ve introduced some upgrades yesterday, so be sure to clear your cache and enjoy fast loading of the icon selector.

Why was is slow? Was the server taking too long to respond with the icons? Were the images taking too long to load?

It turns out to be neither. The problem was string concatenation. Yes, after the information about the possible icons are retrieved from the server and before the images of each icon are loaded, the HTML list of icons is constructed. The code was doing that was very inefficient – going through each icon and concatenating it onto a very long string. IE constructs a new string every time that happens. That means if there are 100 characters for every item in the list, and 100 icons in the list, that’s

100 + 200 + 300 + 400 + … + 10000 = 505,000 character operations!

That’s too much. So after discovering this issue, I switched to a more efficient method for concatenating the strings.  I put the HTML string for each row into an array.  Then I used the array.join(” “) function in javascript to put them all together.  My guess is that the time for this operation is proportional to the number of characters involved.  Using the same assumptions as above, that’s 100 x 100 = 10,000.  It seems like a lot, but your computer can do this very quickly.  That’s fifty times as fast as the way we were doing it before!

So for all you javascript programmers out there, there is a moral:  if you has a large number of strings that you want to concatenate, use array.join(” “) instead of looping through the values.  Thanks to that, you can enjoy a better experience on Stickymap!

Currently, there is a great opportunity for innovation. Our team has tried to take the best of each available resource to create a dynamic system that empowers the web. Presently, large web companies have created a new niche by making expensive to develop technologies available to the masses. In addition, free software licensed under the GNU General Public License provides developers with low cost, easy to manipulate tools. This open source environment creates a system of trust between internet web corporations (Yahoo and Google) and software/web developers. The web corporations have provided a jumpstart to innovators through large capitol investment that funds the creation of new technologies. While the success of the web companys’ investments lie in the trust and acceptance of developers, the innovator has faith that the technology will be reliable, ideally free and open source.
While the web appears to be removing barriers, one major issue still persists. Before beginning this project, the team consisted of web developer amateurs. We have found that the development of our technology was impeded by the terrible differences of structure between the internet browsers. We strongly feel that the lack of standards obstructs the growth of the World Wide Web by increasing development costs. We encourage software companies to adopt universal codes.