Wednesday, May 29, 2013

Clarifying about including json data in javascript file

Just received a beginner question about passing json data to the amchart.
A friend was confused about inline json object creation and loading external json file

All the following two versions work

Version 1:

    <!-- main.html -->
    <script src="js/amcharts.js" type="text/javascript"></script>
    <script src="js/your_formatted_data.js" type="text/javascript"></script>
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    <!-- js/your_formatted_data.js -->
    var chartData = [
                      {country: "USA", visits: 1234},
                      {country: "HK", visits: 5678},
                    ];


Version 2:

    <!-- main.html -->
    <script src="js/amcharts.js" type="text/javascript"></script>
    var chartData = [
                      {country: "USA", visits: 1234},
                      {country: "HK", visits: 5678},
                    ];
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";

I would suggest the version one because it is easier to maintain and more readable.
You can change the json data inside your_formatted_data.js without changing the main.html

Tuesday, May 28, 2013

Power Charging your Mac for development: Finder, Sublime Text, Zsh

Here are some tips I shared during my General Assembly Ruby On Rails class, to make your Mac better for coding development


1. Finder

1.1 Setting Finder shortcut to a "projects" folder


since we travel a lot between different project, download, application folders during our coding exercises, it is better to organize all our code in a coding folder (I call it "projects" with subfolders named after the project / organization names)
and to speed up the travelling even faster, I add my projects folder shortcut to the Finder favourites.

1.2 Use Path Finder


if you are willing to pay, there is one Finder alternative called "Path Finder" which provides more file management features and more friendly to users familiar with Windows operating system.



2. Personalize Sublime Text

2.1 Sublime Text Command Line shortcut


we always navigates between Terminal (or iTerm) and Finder (or Path Finder)
so, being able to open the current Terminal project in Sublime Text is a huge speedup

http://www.sublimetext.com/docs/2/osx_command_line.html

2.2 Sublime Text Package Control


There are lots of wonderful plugins being developed by other talented people, setting up Package Control enables you to search and install them with few keystrokes

http://wbond.net/sublime_packages/package_control/installation

2.3 Sublime Text Plugin: Sidebar Enhancement


After setting up Package Control, the first plugin I recommend you to install is Sidebar Enhancement
- Open up Command Palette by pressing Apple + Shift + P
- Open up Package Control by typing Install Package and click Enter
- type SidebarEnhancement and click Enter
- after installing successfully (status message at the bottom of Sublime Text), restart Sublime Text completely (Quit and Open, not just close the current window editor)

2.4 Format your code nicely with spaces


use 2 spaces instead of tab
http://www.sublimetext.com/docs/2/indentation.html

2.5 Remove trailing whitespace after save automatically


http://blog.nategood.com/sublime-text-strip-whitespace-save




3. use Zsh for terminal shell


You can type less characters to execute commands. Zsh is also smart enough to correct your typo and suggest correct commands and arguments

https://github.com/robbyrussell/oh-my-zsh



Happy Coding !