William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Category Archives: Other Development

using PhpStorm edit Remote PHP Project

using PhpStorm edit Remote PHP Project

I have a PhpStorm installed in local Windows, while having a remote CentOS 6.2 Server hoisted in godaddy.com.
How to edit ‘web apps reside in remote CentOS 6.2 Server’ within ‘local phpStorm env’?
Such as Laravel, Symfony2, cakePHP, worldpress project?
The following is the steps:

  1. Make sure a ftp server is running on centos 6.2, such as vsftpd. So local phpStorm can ftp access remote Linux server. In my CentOS 6.2:
    $ ps -e | grep ftp
    30261 ?        00:00:00 sftp-server

    mean the ftp server deamon is running.

  2. In PhpStorm IDE:
    File | New Project From Existing Files
    | Create New Project: Chooise Your Scenario
    | Web server is on remote host, files are accessible via FTP/SFTP/FTPS

  3. Make sure remote CentOS file directory’s permission is correctly: accessible, writable.
  4. Following the steps, config:
    – FTP Type. Here is SFTP (port 22)
    – remote file directory, e.g. /home/user/mvc/
    – remote web server root URL, e.g. http://example.com/
    – specify root folder on the remote server, e.g. /home/ussr/laravel/blog/
    – Specify project web path on remote server, e.g. http://example.com/laravel/blog/
    After done the config, it will auto sftp remote folder to locally PhpStorm Repository.
    Pretty cool!

  5. Now the new Prject can be editable in PhpStorm, using:
    Right click -> Upload to folder to sync the file.
  6. Also Menu -> Run to debug the updating. For debug, make sure XDEBUG is configured in both remote CentOS php.ini as well as local PhpStorm (Ctrl+Alt+S).
    So can debug remote web app in a local phpStorm environment.

  7. What else? It should work perfectly!

Affecting PHP’s Behaviour

Affecting PHP’s Behaviour

While we are immersed in work, it is better to look up and think see if there is some shortcut way for the solution.
The following is from php.net, for PHP performance collection:


  • APC — Alternative PHP Cache
  • APD — Advanced PHP debugger
  • bcompiler — PHP bytecode Compiler
  • BLENC — Blenc – BLowfish ENCoder for PHP source scripts
  • Error Handling — Error Handling and Logging
  • htscanner — htaccess-like support for all SAPIs
  • inclued — Inclusion hierarchy viewer
  • Output Control — Output Buffering Control
  • PHP Options/Info — PHP Options and Information
  • scream — Break the silence operator
  • Weakref — Weak References
  • WinCache — Windows Cache for PHP
  • Xhprof — Hierarchical Profiler

Perl Padre IDE

Perl Padre IDE, Catalyst, and others

Perl is good at text processing, the following are some examples:

1. Add space between words
my $text = "ThisTextWithoutSpaces";
$text =~ s/([a-z])([A-Z])/$1 $2/g;
print $text; # This Text Without Spaces
2. Get the size of a file in bytes
$size = -s “path/to/file.txt”;

3.Running Windows? Got a file with UNIX line endings?
perl -ne "s/n/rn/; print;" linux.txt > windows.txt
# This changes 'n' to 'tn', like tr "n" "rn" 
4. Want to make a table of the number of times each word in $text appears?
my %words = ();
$words{lc($_)}++ for $text =~ /b([w']+)b/g;

Each key of the %words hash will be a word in $text, and the value is the number of times that word appeared.

5. Padre, the Perl IDE
Padre is a Perl IDE, an integrated development environment, the url is http://padre.perlide.org/.
After install Padre which also install Perl latest version (5.14), then install Catalyst, the Perl MVC framework:

$ cpanm Catalyst::Devel

Another AngularJS email-list CRUD management demo

AngularJS email-list CRUD management sample

I wrote a sample demo by using angular-fullstack to demonstrate CRUD (create, retrieve, update, delete), pagination, sorting, search. It is pretty cool.
Compare to previous one, this demo includes more rich features – CRUD implementation.
The sample demonstrates a complete implementation of CRUD, could easily pickup and extensible to complex project.

  1. Codes: https://github.com/williamjxj/angular_emails

  2. Demo URL: http://dixitruth.com:9000/

To implement locally, first make sure your mongod is running, then:

 $ git clone ..;
 $ npm install
 $ bower install
 $ grunt serve

Then, visit http://localhost:9000 to see the demo!

It should work fine in various platform: Windows, Windows WebStorm IDE, CentOS, Mac etc.

Angular, Express, MongoDB demo

Angular, Express, MongoDB

I wrote a sample demo by using angular-fullstack to demonstrate pagination, sorting, search. It is pretty cool.

The demo demonstates a complete implementation of search, sort, pagination, could easily pickup and extendable to complex project.

  1. Codes: https://github.com/williamjxj/angularjs_mongodb

  2. Demo URL: http://dixitruth.com:9001/

To implement locally, first make sure your mongod is running, then:

 $ git clone ..;
 $ npm install
 $ bower install
 $ grunt serve

Then, visit http://localhost:9001 to see the demo!

Use Plunker to test and share AngularJS

Use Plunker to test and share AngularJS

According to Plunker, Plunker is an online community for creating, collaborating on and sharing your web development ideas.
The front-side app it supports are a lot:

  • AngularJS
  • jQuery & UI
  • Bootstrap
  • Backbone
  • KendoUI
  • YUI

I put an AngluarJS emit/broadcast/on sample here for testing purpose:


WebStorm Live Templates – AngularJS

WebStorm Live Templates – AngularJS

The Live Templates of AngularJS in WebStorm, I list here for quick retrieving:

vim .exrc file

vim: .exrc file

I google from web to get this helpful .exrc example and the explanation:

What follows is my .exrc file for various versions of vi, and some more related stuff. I have yet to look through the vim documentation exhasutively to see if there are any more useful options — this is just stuff I have gleaned from random places on the Internet and from friends.

Plain vanilla vi (as on Solaris)
set nu ” show line numbers
set ts=4 ” tabs take up four columns
set sw=4 ” set shiftwidth (>> or <<) to 4 columns set showmatch ” show matches of ()’s, {}’s, and []’s
set showmode ” show what mode (e.g. INSERT) you’re in
set autoindent ” indent to the extent of the previous line

syntax enable ” enables syntax highlighting
set nu ” show line numbers
set ts=4 ” tabs take up four columns
set sw=4 ” set shiftwidth (>> or <<) to 4 columns
set title
” sets title of terminal in menubar to that of file currently being edited
set expandtab ” tabs aren’t really tabs, but many spaces
set softtabstop=4 ” delete four spaces when you delete a “tab”
set ignorecase ” perform case-insensitive searches…
set smartcase ” … unless there are capitalized characters in the search pattern
set mousehide ” hide the mouse when editing
set exrc ” eliminates the possibility of another .exrc getting confused with mine on multi-user systems
set backspace=indent,eol,start “explicitly makes the backspace work when at the beginning of a line
set bg=light “this almost always looks better — take this out or set it to dark if things look funny
set nohlsearch “no annoying search highlighting

” for common typos
command! Q quit
command! W write
command! Wq wq

Vim Python
set autoindent ” indent to the extent of the previous line

Vim C/C++/Java
set cindent ” indenting for C-style languages
set showmatch ” show matches of ()’s, {}’s, and []’s

For Text (Vim 7.0 only)
setlocal spell spelllang=en_us ” English(US) spellcheck on (Vim 7.x only)
set tw=0 wrap linebreak ” don’t split words between lines, only wrap at end of word
“lots of abbreviations (varies depending on the subject material)
ab STIA Science, Technology and International Affairs

How to produce nicely formatted C code in Vim (From p.221 of Learning the vi editor):
set nocp incsearch
set cinoptions=:0,p0,t0
set cinwords=if,else,while,do,for,switch,case
set formatoptions=tcqr
set cindent
syntax on
source ~/.exrc

Options set when vim 6.4/7 starts on my system (Ubuntu Linux):
helplang=en ” language to display help in
ruler ” show row and column in bottom right
ttyfast ” indicates a fast terminal connection
viminfo=’20,”50 ” configuration info
history=50 ” number of : commands and previous search patters to be remembered
scroll=32 ” number of lines to scroll with CRTL-U and CTRL-D commands
ttymouse=xterm2 ” mouse codes
backspace=indent,eol,start “explicitly makes the backspace work when at the beginning of a line
fileencodings=ucs-bom,utf-8,latin1 ” list of character encodings considered when starting to edit a file
printoptions=paper:letter ” controls format and output of printing
runtimepath=~/.vim,/usr/share/vim/addons,/usr/share/vim/vimfiles,/usr/share/vim/vimcurrent,/usr/share/vim/vimfiles/after,/usr/share/vim/addons/after,~/.vim/after ” list of directories which will be searched for runtime files
suffixes=.bak,~,.swp,.o,.info,.aux,.log,.dvi,.bbl,.blg,.brf,.cb,.ind,.idx,.ilg,.inx,.out,.toc ” Files with these suffixes get a lower priority when multiple files match a wildcard.

Cool stuff that I have seen various places but I didn’t find particularly useful (maybe someone else will):
set list “replaces all EOLs and TABs with $ and ^I
“auto-complete of brackets
inoremap [ [] <left>
inoremap ( () <left>
inoremap { {} <left>
inoremap ” “” <left>
inoremap ‘ ” <left>

To see the options vi(m) has enabled, enter :set
To get help with options in Vim, enter :help set or :set all for regular vi
Or just :help for the help contents… Vim has excellent documentation

Besides these, the ‘abbr‘, ‘map‘ sees quite powerful. For example, the following strange codes help me a lot:

abbr _href <a href=""></a>
abbr _img <img src="" border="0" width="" height="" alt="[image]" align="top">
ab get_jquery <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
ab get_bcss <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
ab get_bjs  <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
map ,html5  o<!DOCTYPE html>^M<head>^M  <meta charset="utf-8">^M<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">^M<title></title>^M<meta name="description" content="">^M<meta name="viewport" content="width=device-width">^M<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>^M<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">^M<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>^M
map ,body5 o  <body>^M  <div class="container">^M    <div class="row">^M      <div class="span4">^M</div>^M</div>^M</div>^M</body>^M<script></script>^M</html>^[

WordPress Blog Templates: https://github.com/williamjxj/wordpress_blog_template

WordPress Blog Templates

I have 2 web repositories to store my WordPress blogs:

Sometimes it is boring to post the same content twice, especially when the content is longer. Login to admin panel -> post new -> submit, not quite efficient.


I plan to use 3 steps to make it more automatic in my spare-time:

  1. Use templates (Here I use Dreamweaver’s .lbi and .tpl template). By put the templates in github, I can git clone or git pull anywhere whenever I want to write something. The templates are currently accessible at:


  2. Write perl scripts to directly interact WordPress database instead of screen, which cover tag, publish date, category etc.
  3. Every time when post, keep a copy in a mongo-based repository for integrating with other apps.

By the way, this template was done by Dreamweaver, and using Git Gui + Gui Shell to manage (need a ssh-key first).

Probably Gist can be used to do some storage.

Backbone, twitter bootstrap CDN

Backbone, twitter bootstrap CDN

Here I list some CDNs for quick applying, regarding on Backbone mixing with Twitter Bootstrap:

//1. jQuery			
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

//2. twitter-bootstrap
<!-- Complete CSS (Responsive, With Icons) -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

//3.a. backbone, underscore
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

//or: 3.b.
<script src="http://documentcloud.github.io/underscore/underscore-min.js" type="text/javascript"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js" type="text/javascript"></script>

Copy them, and paste them to any html files to start an Backbone MVC application quickly!