Until out of blue I checked the mailbox of the default mailing account: noreply@mydomain.com.

The mailbox is filled with undeliverable emails (which is normal), and surprisingly, a quite amount of user emails. Here is the scenario: my website has an online form that supports one to send message to an email address. So if abc@domain1.com uses the form to send message to xyx@domain2.com, an mail will be delivered to xyz@domain2.com, through Gmail using noreply@mydomain.com. Also to achieve better user experience, when Swift Mailer message is constructed, I also set the “from” address to abc@domain1.com, so when xyz@domain2.com receives the email, the message appears to be from abc@domain1.com directly. The idea is also that when xyz replies, the message goes back to abc.

The problem is in the replying part. You might have guessed or figured out, all the replies went back to noreply@mydomain.com. So basically all responses were lost since no one care about the noreply mailbox.

I looked more carefully into the email header and found the problem: the from address looks up like this: abc@domain1.com<noreply@mydomain.com>.

As you can see abc@domain1.com is only treated as a “display name” and actual email address is still noreply@mydomain.com. So even the from address appears to be correct in a email client, replying to the message sends the response to a black hole.

After identifying the problem I started to tweak the Swift Mailer message but no matter what I try Gmail will always append the noreply address in the from header. This left me in a despair mood. Other options are not good. I can write a program to automatically check the mailbox and forward those emails, or modify the message with some warning to notify the receiver not to reply directly, or just switch to a new email service. All these options are either too complicated (without a good cause), or will negatively affect user experience.

After some more poking around I found this email header option: “Reply-To”. If it does what its name indicates my problem can be solved by adding this header in mail messages. You might be laughing at me right now for not knowing this but before this I had never really studied email headers and I did get a load of information by trying to solve this.

Adding a header field is pretty easy in Swift Mailer and it worked. With the “Reply-To” header the mail client (and webmails that I tested) correctly put the right email address when replying.

It’s always fun to be able to solve a problem in a simple way, before going too far down the other paths. And hopefully this post can help someone else in the same boat.

As I worked on testing and development the code in my browser, I realized the browser was getting less and less responsive. So I opened up the task manager to find out what’s going on and found out that the browser’s memory usage has been continuing growing every time I refreshed the page, and the usage wouldn’t come back. And at one point, Firefox is hogging over 600M or memory on my system. And the bad behavior is consistent across Internet Explorer and Firefox. This means if a user use the page for some extensive time he’ll have to shutdown the browser to re-claim the system memory.

Not a very good user experience. Being a amateur Javascript developer I don’t have a lot of insight on how the memory is managed in Javascript. As a matter of fact, it has been largely ignored in my patty little scripts before. This time I have to take it seriously. So I hit up the web to see what could have caused the Javascript memory leak.

What could cause memory leaks

When we talk about Javascript memory leak, we often refer to the behavior that memory is not properly de-allocated when a web page is closed or refreshed. Web browsers have the build-in garbage collectors to collect and release the memory when it’s not used anymore. Usually when a page is done, the browser will remove everything created by Javascript, unless, however there are connections between Javascript objects (variables and functions) and DOM elements.

Another situation should probably be better addressed as memory management. A good Ajax app lets use to access different information while staying on the same page and in this case, the app can also eat up memory and become sluggish over the time. Although most of the time we might not notice this but a poorly written app can ramp up memory usage quickly and cause some bad user experience.

In theory, what should be avoided

The two biggest culprits that will cause memory leak are “Circular reference” and “closure”. Other people have written good articles about them. This article illustrates the problems in a relatively simple explanation. “Circular reference” is basically what I would call it “spaghetti code” in Javascript. The modern Object Oriented languages have helped reduce this kind of code, but in Javascript, it can easily happen. A simple example is to have a DOM element refers to a Javascript function (using onclick event call for example), and the Javascript function refers to the DOM element. If you used inner function in Javascript, you know what closure is. It is convenient in terms of inheriting the variables but it is also an easy way to hide the circular reference.

These two things probably are the source of most of the memory leaking problems. However, theories aside, I found it hard to spot the case in real code. Most of the time the code don’t really resemble the evil demos. The best way to avoid a problem is to stay away from it. So I come up with some good practices here that I believe which will be helpful to avoid problems, or at lease, minimize the risk to the lowest level.

Watch the variables

There are two type of variables in terms of the scope. One is declared outside a function, with or without the var keyword; the other is declared inside a function, WITH the var keyword. The later obviously is supposed to live a shorter life and only be used in the function scope. Although the first type is often referred as “global variable”, it is not necessarily the same as the global variable in other languages because it’s only supposed to live in the lifetime of a page.

The key is “supposed to”. Since Javascript runs in browsers, it becomes browser’s responsibility to release the memory allocated to variables when they are not in use. To judge whether a variable is “in use”, browser checks if there is any other reference to this object. If there is, browser will not de-allocate it. As more activities happening the browser will continue to take but not release any memory.

Because they don’t always do. Here is an scenario when “closure” is used in Javascript code. One common example for closure is using a function inside a function. But there is more. To understand more about closure, this is a great article.

But closure can easily cause memory leak if used like this:

function localDocElem() {

var elem = document.getElementById(’ClickElem’);

elem.bind(’click’, function() { elem.innerHTML = ‘<span class=”highlight”>’ + elem.innerHTML + ‘</span’; });
}

This function simply attach a click event to a DOM element so whenever it is clicked the content gets “highlighted”. However, the function attached to the DOM object “elem” also uses the DOM object, hence, a circular reference is created between the DOM object and function object (in Javascript, even a function is maintained as an object) so the browser won’t garbage collect the local variable elem even after the localDocElem function returns. In this particular example, since a DOM object is connected with Javascript function, it is possible that the browser does not garbage collect either even the user leaves the page and the only way to claim the memory back is to shutdown the browser completely.

Consider using global variable to hold large amount of data can reduce some of the risk above. Let’s you have a Javascript that uses Ajax to to pull data from the server constantly, you can use JQuery’s $.getJson method to archive this. The returned data is better to be held in a global variable than local.

Un-allocate and nullify often

In a map application, lots of objects like icons, markers, etc. are created dynamically. They take memory to store and they can take up large chunk of memory quickly. It is a better practice to “nullify” them whenever they are not in use, for example, when displaying a completely different set of markers in a map view. Usually we can just assign the null value to the variable to achieve this, however for a clean de-allocation you’ll need to make sure to remove anything that is attached to them. For example, events, callback functions.

Remove listeners

To make an app interactive to user activities we create event listeners. Take a Gmap app example, we add click listener to an icon so when it is clicked, more detailed information is show. In some other cases, you could add a click event listener on a div element so whenever it is clicked, the background color changes. Since listeners and the function they trigger are attached to an object, you can see this is another easy case to get into the circular reference loop. In my code, a lot of listeners are created on the fly for those Gmap “markers”.

What I found helpful was to promptly remove the listeners when the markers are refreshed (along with the code to nullify the marker variables).

Delete the dynamically generated DOM objects

Often we use Javascript to create DOM elements, like “populating” a div tag on the fly. Since some browsers manage the DOM objects and script objects differently, the circular reference scenario can be easily created like discussed above. When you are done with the content and move on to something else, it might be helpful to eliminate the DOM element completely. For example, if you have update the content of a Div tag, you can empty out its inner HTML like this:

document.getElementById(’MyAjaxTarget’).innerHTML = ”

Create cleanup methods for different stages

GUnload is provided as default Gmap cleanup call when the page is unload. However it is probably not enough since it is only called when a use leaves or refreshes a page. What we need to make sure is that memory is always released promptly when not in use. So I created several “cleanup” methods just to do that. The cleanup methods can include everything talked above, and they are called whenever needed in the code flow.

In summary, while Javascript enables us to enrich the user experience it can also do just the opposite if not done correctly. Although the modern browsers are doing much better jobs today to manage the Javascript garbage collection, we still need to do our due diligence to develop the code that are not only fancy, but also “responsible” to our users.

Here is the link of my Google map app if you are interested.

If you have a good tip to help better manage memory usage in a Javascript, please share your comment!

After I dig into it a bit deeper this new concept of “StyleVar” really got into my head. It is as tedious to work on as it can be. So I hit up on the internet and see if there is any tips or tricks that I can use. Surprisingly all I got were complaints on VB 4.0. There seemed to be a lot of negative sentiment against Vb, specifically the 4.0 release.

Some mostly talked about complaints are:

• Expensive and confusing upgrade pricing.
• Skins created for 3.x.x versions need to be re-done completely in 4.0.
• No significant changes in 4.0 and the code base is quite bloated.
• The “Gold” release is still buggy.

As I sip through these and figuring I probably made a mistake purchasing 4.0 license I found Invision Power Board was being mentioned by a lot of people and got a lot of nice reviews too.

So I decided to give IPB a try. IPB offers a free 24 hour demo account and signing up was quite easy. After a little play around I was totally impressed by IPB 3.0.

What I really like about IPB 3.0:

• The demo capability upfront.
• The modular design approach. The IP.Board, Blog and Gallery are individual components that can be installed separately. Now this might not sound like a benefit for most of the people but to achieve this feature the code but be designed well from the ground up.
• Powerful templates. The template design in IPB is very powerful, it contains variables and logics (such as if for foreach statements) and can take PHP code block directly. For lot of the board admin who don’t have the technical skills this might be a bit of difficult to manage but developers will like it.
• IP.Converge, which provides a nice framework for the Single Sign On solution that I have been looking for for a long time.
• The more advanced features like OpenId, Facebook integration and API capability.
• Skinning IPB. Since I develop using HTML and CSS the approach that IPB takes feels easier.

What I don’t like:

Based on my personal experience the quality of documentation is a bit lacking. Part of the reason for this is that comparing with VB, IPB still has a small developer community. The IPB developer community hasn’t been as much active as VB’s, in terms of participating development discussions, writing tutorials etc. So if you have a question it takes a bit more researching and digging around.

Yes I switched to IPB 3.0.

Forum softwares have been powering the web for a long time but as new things emerge forums need to adapt too. It is a lot harder to run a forum board these days because of the low barrier to entry – a lot more forums are online these days – and competition from social network sites. This demands higher standard on forum software. Looking forward IPB has a lot to gain in the paid forum software market.

That being said vBulletin is still the most popular forum software at the time being. But it has been sitting on its own success for too long. Unfortunately its own success may be the biggest obstacle toward bigger and bolder innovation. The new 4.0 version is definitely an improvement but the change fell short. From what I gather most of the existing board admin chose to stay on version 3 and IPB 3 has become a serious choice for those who needs new forum software. So now it really is a do or die moment for VB and the vb team needs to get their act together to come up with a better next generation release to stay in competition.

Rumors on the street is that Apple will release its tablet device in 2010. Whatever it will be called it should be capable to get online and be used as a nice reading device since it is larger than a smart phone. And more importantly, it will set out a trend on more of the similar ones and cheaper ones to be built. What publishing companies can do is to build apps that work best on these devices to display their contents and sell subscriptions. However that is not enough. What they need to do is to give out devices for free (or close to free) like wireless companies do with their cellphones.

I suspect a lot of consolidation will also take place in the near future. As a result, stronger ones become content distributors. A tablet that can be used best as a “reader” is probably the best medium for the future content distribution.

I have been using wireless network since then and I was generally pretty happy about it. However I’m moving my office to the basement and if the router follows me the wireless access will be very spotty from the second floor. Adding more access point is not a good option in my opinion so I decided to re-configure the wiring so I can have the wired data access in rooms that I want.

One big pre-condition for this setup is that I DON”T have a landline and don’t intend to get one. Like 20% of American household (and growing) we only use cellphones. I do have a SIP phone (basically a VOIP solution) and it needs a data port. Currently it is connected to my wireless router through a VOIP adapter. My VOIP phone is another good reason to have more data ports around the house. I have a cordless phone set which only needs one line to the base station (all the other handsets are cord free).

So I made the decision to go ahead re-wire cat5 to support data only.

One alternative – if you need voice jack – is to split the cat5 cable to support 2 jacks, one for voice and the other for data. Obviously that requires more work. Since this is not my configuration I’ll briefly mention it at the end of the post.

What is cat 5 cable

Here we need to have a little bit of explanation on cat5. “Category 5″ is a cable specification.

The cable looks familiar? Yep, you see it everyday if you look under the desk, around your ethernet switches.

A cat 5 cable includes 8 wires, every two of which are twisted together, known as twisted pairs. The wires are color coded, they are: orange, white orange, green, white green, blue, white blue, brown and white brown.

These wires carry voice or data signal. As a matter of fact, only 2 pairs (4 wires) are needed to support a 10/100 BASE-T network; only 1 pair is needed for a voice line. That’s why it’s possible to split one cat 5 for both data and voice. Again, in my case, I’m going all data.

Planning

A good planning always pays. Here is a list of things you need to check and prepare before start cutting wires.

• You house is wired with cat 5 or cat 5e. Usually this is done in newer house and it can be confirmed by checking the outlet. It should say cat5 on it. If this is not the case, stop reading and go visit reddit.com.
• You have “star” wiring. Meaning every single wire branches out from the central panel. If they are in a loop, you can stop now and go watch a movie.

• You can access your switch board and it is either inside the house or in your basement. Because you’ll put cable modem and network switch there it needs to be securely located.

• Equipments, tools and parts.

1. The cat 5 jacks. I bought 10 for $29 and didn’t even need one at the end.

2. The Leviton data board.

3. A bunch of ethernet cables.

4. A wired router

5. Some tools

• Internet downtime.

The internet will be broken for a few hours and you’ll need to let the wife know.

Let’s roll

1. Re-wire the patch panels

Note: I chose to do this first – instead of the jack – was because there is a chance the wiring of the jacks will work without any changes.

The following photo shows the patch board where all the cat 5 cables are originally terminated. Notice the third from the left is the new data board that I added. The builder’s contractor did a great job labeling the cable so I didn’t have any problem to locate the one that I want to rewire.

So I basically cut of the wires and punch them in to the new data panel (3rd one on the left). Remember the color codes for those twisted pairs? Now it’s the time to use them. Below is my color code mapping.

Although the color codes seem to be a straight one to one mapping there is somewhat a standard to follow. And it matters because both ends of the cable need to follow the same standard to get the data juice flowing. Just remember T-568A is the standard we are going by here. You may or may not need to rewire the jack to T-568A, depending on what your builder used originally. To learn more about the standards you can visit this page.

The Leviton patch board has instruction on the color mapping on each punch slot so it was super easy to find the correct punch slot. It’s the first time that I work on these punchdowns and I have to say it was pretty easy to get a hang of it. Just keep a steady hand and enjoy that little clicks when you push the wire in. The plastic tool that comes with the patch panel was good enough for me and I don’t think you need to invest a $30 punch tool unless you are planning to do this to make a living. Again, I’m cheap.

This photo shows the two wires are terminated into data panel. The cables coming out of the black ports go into the router.

2. Connect the patch panel to a router

Now is the time to notify your family that the internet will be down. I took the cable modem and connect it directly to cable company’s video feed. Did I mention I don’t have cable TV? If you do, you probably need a splitter. Then, connect the cable modem to a wired Linksys router (I left the wireless router upstairs and it will be my access point). Now it’s also a good time to configure/check the router if it’s a new one. Once you verified it is online, connect it to your patch board and make sure you use the right port where the wires were terminated.

3. Check and re-wire the jack, if needed.

If you are as lucky as me your jack is a data port already. If not, it is possible it’s not wired using T568A standard so you’ll need to rewire it that way. The cat 5 jack should have a label on it that clearly indicates which color goes where for A or B standard so it should be pretty easy to punch and attach. Here is the color code mapping:

As I mentioned I didn’t even need to rewire the jack but I did one anyway. Here is a picture:

At this point you should have one room wired. So plug in a your computer you should have the internet. If not, check the wires, connections.

4. Take a break and finish up

Now it’s a good time to take a break and give yourself a pad on the back. If you have more outlets to convert, repeat the same steps. Once you are done, tidy up the wires and outlets.

The old wireless router can now be used as a simple access point. Just make sure to re-configure it to a different static IP (192.168.1.2 for example) and turn off DHCP (The wired router is doing that now). Connect one of the LAN port to a network switch or a data jack you are done.

Voice + Data over one cat 5

As I mentioned I don’t use this kind of setup but since I did some research on it I might as well write it down.

Remember there are 4 pairs of wires in a cat 5 cable? We just used 2 pair. The 2 pairs left can be used for phone lines, and as matter of fact, two phone lines if you wish.

1. Make a phone jack

You can use a cheaper voice jack for this one. Here is the color code mapping:

2. Terminate phone jacks

Since I don’t have a land line of my own so I don’t get a chance to practice this. Basically one twisted pair can support one voice line so you can play with it and see what’s the best fit for you.

One suggestion is that you should use a regular voice jack, which is smaller than cat 5 jack so you can’t accidentally plug in data cable in a voice jack. Since there is always a chance the wires are not done correctly, the high voltage generated from the phone rings can toast your network adapter if the cable is plugged into the wrong jack.

Some think there will be data transfer degradation when the voice line is in use. Based on what I read and talking to friend who actually did this setup, it seems more like just a theory.

Document what you did

Once you get it working please make sure finishing the last mile before start surfing the web: documenting what you did. Label the wires, mark the jacks. Or write a blog post, maybe.

So that’s how I rewired my home to version 2.

As landline becomes less and less popular these days I really think this is a setup that may become more and more popular. As we are going to see more and more “network intelligent” electronic devices in homes in the future. Devices to stream internet video to TV is a good example and is already making the front run. With more bandwidth hungry devices in your home wireless access point can become a bottleneck. In that case, the more data port, the merrier. Of course if you are building a new home and have the chance and means, you can pimp the wiring up by doubling cat 5 or even adding cat 6. But for most of the existing homes, it’s not that easy to drag wires behind the walls and this might be a more feasible solution.

On the revenue side, there will be ads, and there will be revenue sharing with the publishers who want to flip with Google.

Google takes the usual product launching route. Put it in “lab”, collect user feedback and go from there.

If I’m a big time publisher like New York Times I would develop my own version of “Fast Flip”, NOW.

This is the exact kind of innovation that the publishers should take. You have the content, use it; you have the original digital copy, you can do better job converting them to images; the technology and development? a small team should be able to crank it out in a few months.

The upgrade was smooth for me. Just pop in the DVD and let it run the course. There are some nice interface tweaks, and not to mention the saved disk space. But a few enhancements that I like the best are:

• Access over local network are much much faster. I have a shared drive in the LAN and it used to be a pain to view large images and QuickTime movie files over the network. After the upgrade, the delay is gone and the video plays smoothly.
• The new QuickTime Player has the video, audio and screen recording built in now. Since my MacBook has the camera and microphone built in, making an video is as conveniently as making a few clicks and start talking.
• The Microsoft Exchange support. Works very well. Enough said.

I’m no Apple fanboy but sometimes I love using Apple product because it provides an “environment”. An environment that has a nice mixture and balance of great design and usability. For us web builders, this is both an influence and inspiration. It helps us, in a subtle way, to make product with good taste and also works.

The feature I really like is the preview feature. For example if you search for “PHP tutorial” you get this page:

http://www.bing.com/search?q=php+tutorial&go=&form=QBRE

A page from php.net is listed as the first entry, which is in my opinion, beats the result from Yahoo. What’s more, you can hover your mouse on each entry of the result page, a little link will appear on the side and you can use your mouse to activate it to show a preview of the page. I tested several queries and the previews are very accurate. The preview also shows other links on the page that are relevant to the subject, which help to decide whether this page is “click through worthy”.

I don’t know if Bing can dethrone Google on web search, and as long as Google continues delivering the relevant results it is hard for anyone to make a legit threat on its dominance. But MS seems to have some nice things going in Bing just off the bat. Since Google relies on its search engine for most if not all its revenue, MS has an advantage here to make some bolder move, and be more innovative, like a real decision engine that was just released: hunch.com.

Luckily safe mode did work so I was able to back up all my files and made decision to re-install the OS.

I do have some decisions to make.

1. Re-install Vista. No way after this.

2. “Upgrade” to WIndows 7 RC. I don’t think I can trust this OS yet since it is just out of the oven.

3. How about Ubuntu? I do like it. However, I don’t want to have to load a “Windows” inside it so I can use some Windows Apps that I use every day.

So in the end I chose the good old XP.

It turned out I probably have a broken wireless adapter. It is a Buffalo WLI2-PCI-G54S card. In XP, when I tried to install the driver the system froze again and the installation screen shows “copying cbg54.sys”. Hard reboot is the only way to bypass this, but at least XP starts.

So the story pretty much ends here. It was probably a hardware issue and I don’t know if Microsoft is the one to blame here. Nevertheless it doesn’t seem Windows OS is handling this in a graceful way, or anyway at all. An OS with a good kernel should at lease prevent this kind of issues from making the whole system useless.

Oh by the way, I can’t believe I would say this, after a few monthes use of Vista, XP feels so clean and easy. I wouldn’t go back to Vista again even all the issues and concerns are addressed.