Tag Archives: Javascript

Chrome – Bypass Access-Control-Allow-Origin on Mac

About a year ago, i posted an article about allowing the Javascript accessing the local file system in order to read the local JSON file.

 

So if you are using Mac, you need to quit the Chrome application. Then execute the following command in Terminal.

/usr/bin/open -a "/Applications/Google Chrome.app" --args --allow-file-access-from-files

 

Reference: Disable same origin policy in Chrome on Mac OSX

About these ads

AngularJS – Service VS Factory VS Provider

Design pattern is very important if you want to build a manageable and scalable application. In AngularJS, we could develop module, which is also regarded as a dependency, for specific feature and it could be injected to the controller whenever it is needed. This dependency injection design help us to build clean and well structured application and reduce redundant code.

There are different ways to create the dependency. Most common terms are service, factory and provider which are all singleton and you can find a lot of discussion online about their differences, when and how to use them. Here are some notes which summarize the AngularJS documentation about writing Provider.
 

-

 

1. When a dependency is injected to the controller, the injector from AngularJS framework will register a recipe such that the injected controller could make use of the type provided by the dependency.
Continue reading

Meteor – High Network IO as it keeps polling MongoDB

I was working on a Meteor project which is connected to a mongoDB hosted on MongoLab. Since it is a sandbox plan, the oplog of the mongoDB instance is not available and in that case the Meteor will keep polling the mongoDB in around every 10 seconds. This causes a very high consumption on CPU and network bandwidth.

If you are running, Meteor 0.7.0 or above and your mongoDB has oplog enabled. You won’t experienced the problem.

Since the oplog is not available so the only workaround which i could think of is to unsubscribe the dataset. Here is a main.js which is executed when the app is loaded and when the user is idle for than 3 mins. Stop the subscription and that will stop polling the mongoDB.
Continue reading

Javascript – Check if user is idle

Nowadays, websites are becoming more advanced with many different features. Sometimes it would be beneficial if we could switch off them on the client browser when the user is idle for a period of time in order to reduce the web server loading.

Here is a Javascript example which would pop up an alert box if the mouse doesn’t move for 3 mins.

$(document).ready(function () {
  // Set timer to check if user is idle
  var idleTimer;
  $(this).mousemove(function(e){
    // clear prior timeout, if any
    window.clearTimeout(idleTimer);

    // create new timeout (3 mins)
    idleTimer = window.setTimeout(isIdle, 180000);
  });

  function isIdle() {
    alert("3 mins have passed without moving the mouse.");
  }
});

 

Done =)

Reference: StackOverflow – Detecting idle time in JavaScript elegantly

AngularJS directives of Foundation

We got the Foundation 5 with Sass styling working on our AngularJS project which was scaffolded by Yeoman.

 

Let’s continue our ng-foundation example above.

To utilize the Foundation framework in a more effective way, the Mad Mimi team creates some native AngularJS directives based on Foundation‘s markup and CSS which is available on Bower.

Continue reading

Yeoman – Setup AngularJS and Foundation 5 with Sass

The generator-angular written by the Yeoman team comes with Bootstrap integration. But instead of using Bootstrap, i would like to use Foundation 5 with Sass. The following example is created under Node.js v0.10.29.

1. Create your project directory. In my case, i will name the project ng-foundation.

mkdir ng-foundation

 

2. Move to the ng-foundation folder.

cd ng-foundation

 

3. Scaffold the AngularJS project using the generator-angular as usual.

yo angular

Continue reading

Javascript – Round a number to certain significant figures

I found an elegant solution written by Ateş Göral about rounding number to a certain significant figures in Javascript.

Magnetiq – Rounding to a Certain Significant Figures in JavaScript

function sigFigs(n, sig) {
  var mult = Math.pow(10, sig - Math.floor(Math.log(n) / Math.LN10) - 1);
  return Math.round(n * mult) / mult;
}

alert(sigFigs(1234567, 3)); // Gives 1230000
alert(sigFigs(0.06805, 3)); // Gives 0.0681
alert(sigFigs(5, 3));       // Gives 5

 

Done =)

jQuery – Select elements with or without specific child

In jQuery, the has() method allow us to reduce the set of matched elements which only contains the specified child. For example:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

 

// Set background color to red to the li which contains ul
$("li").has("ul").css("background-color", "red");

Continue reading

Google Visualization API – Group lines in tooltip

Instead of showing the data of the mouse hovering line in the tooltip, i would like to show all lines data of the same x-axis value. This can be easily done by adding the focusTarget in the chart options object.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var rawData = [
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ];
        var data = google.visualization.arrayToDataTable(rawData);

        var options = {
          title: 'Company Performance',
          focusTarget: 'category' // Group the lines in tooltip
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Continue reading