Mustache JS the JavaScript Template System

Mustache JS is an open source logic-less template system developed for languages such as JavaScript, C#.NET, Java or any web programming languages.  Mustache provides templates and views as the basis for creating dynamic templates. It is easy to be designed in such a way to separate the logic between UI and JavaScript.

Most of the web developers that are not aware of template systems create new chunks of HTML code and dynamically insert them into the DOM using JavaScript. A common way of doing this is use innerHTML for conventional JavaScript approach, or using JQuery .html(content) to replace the value of your DOM.

The old technique no longer works for developers nowadays, because it makes developers difficult to maintain the system improvement because of the DOM id or classes existed inside your JavaScript source code or certain IF ELSE logic appeared in the HTML content.

Not just it affect code readability, without separately the business logic from the HTML templates, it makes life much more difficult in term of reusing the template for other purposes. Below are a few easy examples on how to use Mustache JS.

 

Mustache Source Code

var rendered = Mustache.render($("#template"), {name: "Khai"});
$('#target').html(rendered);

Template Source Code

<script id="template" type="text/script">
Hello {{ name }}!
</script>

Result / Output

Hello Khai!

And you can complete your repeater like below,

Data Source Code

{
  "person": [
    { "name": "Khai" },
    { "name": "Yong" },
    { "name": "Lim" }
  ]
}

Template Source Code

{{#person}}
<b>{{name}}</b>
{{/person}}

Besides that, you can include simple IF ELSE condition in your Mustache JS like below, # represent true, ^ represent inverted.

Template Source Code

{{#value}} Value is True {{/value}} {{^value}} Value is False {{/value}}


For more examples or technique you can refer to https://github.com/janl/mustache.js or http://www.stackoverflow.com

Conclusion

Overall Mustache JS is very easy to be implemented. And you only required to include a single Mustache JS file. But if you are developing a more comprehensive table / repeater that required things like template, sorting, instant edit mode, or search as a whole package,  probably Knockout JS will be a better solution.

Improve your WIFI signal by diagnosing your networks

It is quite often I received complains from friends and relatives regarding internet problem. What they normally unsatisfied are wifi is slow, having difficulty to connect to certain web page, and even face similar problem when loading Facebook videos. There could be a few reasons behind all these. It can be an Internet Provider issue, router problem, wifi weak, or channels clashing with neighbors.

We will never know the solution if we don’t understand the root causes of the problem that we are facing with. It could be 1 or more causes that I listed above. So the first step is to diagnose the networking problem, and narrow down all the possible angle, so when we know the root cause of it, then we can fix our networks.

Diagnose the WIFI signals

It is always important to diagnose the problem first. So below are a few things we have to try an error before we decide what to fix.

So if you have a router at home, it will be good if it is connected with at least 2 devices. The first one go with a desktop / laptop that connected via a LAN cable (wired), and the second one it is going to be your phone or your tablet device.

Most of the standard cheap router is able to handle less than 5 wireless devices, when you have more than 5 devices,  then you will encounter networking problem.

Slow router processing speed OR too many WIFI access around

If the internet access works good with a wired LAN cable, but do badly with WIFI, then there are only 2 reason why this happened. The first major reason is too many wifi access around. Second reason is because the router processing speed no longer can catch up with all the devices that connected with it. Normally this happened when you have more than 5 to 10 wireless devices that connected to your router simultaneously. The budget way is to disconnect all your wireless devices, and keep only 1 or 2. If the problem is solved, then please consider change your router that can handle more wireless devices.

You still probably can stick with new 2.4GHZ router, but comes with a better processing power. But if after you removed all the devices, and those 2 that you kept earlier are still having internet connection problem, then it must be too many Wifi access around your area, that directly affecting your wifi channel.

If down to this, there is only one solution, is to change to a new AC router (5.0 GHZ).

The different between 2.4Ghz and 5.0Ghz. Source from [http://www.gofetchcomputers.com/blog/]

Could it be Internet Provider Issue?

Yes, potentially it can be an Internet Provider Issue, or broken international cables. If you only use a PC/laptop connected to your router using LAN cable, if the internet is still not met your expectation, then it is most likely an Internet Provider problem.

So I added a flowchart into this post. It will helps you on how to diagnose the slow network problem.

YouTube now lets you save videos offline in Malaysia

Now it is live in Malaysia

Before that, you probably have to download your youtube video using an online youtube download site, of save your youtube video using windows application such as youtube downloader.

The feature was announced way back in 2014 but it tooks some time to go live in Malaysia.

You can’t save video while you are watching it

I have a tried on the youtube app on my IPhone IOS 9.1, it somehow designed it in such as way that you can’t save video if you are watching on it. This design surely has to be in this way because if the app allow you to download the video at the same times while you are streaming on it, it is definitely going to affect the network performance. But it looks like working fine with Android phone.

Default on WIFI, But you can do it with your 3G/LTE

By default you can only download the videos if you are connected to WIFI, but there is a setting somewhere in the youtube app can be turn ON so that you can download the videos too even with you 3G/LTE. I warned you!

Not all the videos can be downloaded

From what I noticed is that not all the video can be downloaded. I strongly believed that this has to be related to the copyright of the videos.

Once you downloaded those videos, you has to be connected to the internet at least within a range of 48 hours, or else those downloaded video will be automatically removed.

Finally, I tested and proved it, it is working on my phone!