Some js examples tested in FF console

Some js examples tested in FF console

Here I list some of my js function examples which I tested in FF console for quick retrieve:

;(function($) {
 $y = {
   b: function() {
    console.log('bbb');
   },
   c: 'ccc'
 };
})(jQuery);

(function($) {
 $.fn.extend({
   a: function() {
    console.log('aaa');
   }
 });
})(jQuery);

(function($) {
  $.extend({
    t: function() {
      console.log('ttt');
    }
  });
})(jQuery);

$(document.body).a();
$y.b();
console.log($y.c);
$.t();

function aa() {
  var x=function() {
   console.log('111');
  }
  x();
}
var bb = function() {
  console.log('222');
}

cc=aa;
console.log(cc===aa);
cc();
dd=bb;
console.log(dd===bb);
dd();

They are interesting, but very common in real-life.

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!

jQuery: terminate an event and apply for a new event

jQuery: terminate an event and apply for a new event: stop(true,true)

How to terminate a jQuery event immediately, and apply for a new event? It is better to use the interact function stop(true,true).
stop(true, true) is helpful to stop an running event on certain DOM element, and apply for a new event.
e.g.: stop a slideUp() event and apply a slideDown event, like this:

var mouseHandler = function (e) {
    e.preventDefault();
    e.stopPropagation();
    $.debug('<mouseHandler>, e.type=' + e.type);
    $('div#list_popup').stop(true, true).slideDown('slow');
    return false;
};  
$('div.list').one('mouseenter mouseleave', mouseHandler);

In this way, it will change slideUp() to slideDown() immediately when the ‘mouseenter’ or ‘mouseleave’ are triggered.

Tips for RubyMine and Aptana IDE

I am using Aptana Studio 3 and RubyMine 5.0.2 for Rails development. I have to switch between CentOS 6.3 and Window 7 environment, aside with github.com for version control, sometimes they are difficult to sync and debug Rails projects in CentOS 6.3.

Gradually I summarized up some tips to operate conveniently. Here are some sumup:

1. Use Windows’ RubyMine IDE to debug Linux Rails projects

• The IDE is JetBrain’s RubyMine in Windows 7;
• While the codes are in CentOS.

In this case I use Windows’ network mapping tool to map the CentOs directory to Windows local virtual drive, such as ‘Y’, or ‘Z’ disk.

The steps:
(1) Mapping:
Windows Explorer -> Tools -> Map network drive…
Do the configure:
Folder: Y
Location: \\linux_centos_6.3\webdev
to connect the server to local Y drive.

(2) Create Rails Project:
Then, in JetBrains RubyMine 5.0.2
File -> New Project ->
in ‘Create New project’ screen:
Project name: linx_ruby_project
Location : Y:/ruby_project
Project type: Rails application

This way, in Windows’ RubyMine IDE, we can code/debug Rails codes in CentOS in Real-time.

2. Change Aptana 3 themes

I prefer to use Aptana Studio 2 theme. To change it, Here is my steps in Aptana IDE:

Window -> Preferences -> Aptana Studio -> Themes -> Aptana Studio 2.x

3. use Samba service:

I don’t have much time to do the Samba stuff, however, there are a lot of resources in the web for access Linux resources by using Samba protocal.
I just list the basic steps to start Samba Service.
In CentOs:
// 1. config samba services
// 2. run samba daemon
$ sudo service smb start

Then, in Windows,
smb://samba_dir/…
to access the resources in CentOs server.

4. Access github resource from RubyMine

(1) Download and install ‘Github’ for Windows:
In https://github.com
Applications -> GitHub for Windows -> to Download ‘Github’ for Windows
git clone the projects whatever you want to locally.

(2) import to RubyMine IDE:
In RubyMine IDE, to create project for the cloned projects.

(3) in RubyMine IDE menu:
-> VCS
-> Checkout from Version Control -> GitHub

Git Repository URL: git@github.com:williamjxj/sample.git
Parent Directory: C:\RubymineProjects\
Directory Name: sample
Then click ‘Clone’.

PHP CMS Systems for Church Website

While I am looking for wordpress-based website CMS, I found a useful link:

The 7 Best CMS Systems for Your Church Website

I have my own PHP Church CMS system, and found wordpress has much resources on themes and various feature plugins. This kind of resource is a good help for my application with 3th-party reference. The following are the contents from Jesse Orndorff:

As a web designer, developer, or church staff member, you have to update your church website. Usually it is a small change, updating an event, posting a new sermon, or writing a blog post. The best and simplest way to update your site is using a content management system. These systems provide an easy user interface that makes your website easy to update, come with add on components that add in additional functionality, and allow you to easily change website designs. Today I wanted to share the 7 best CMS systems you can use for your church website, enjoy!

1. LightCMS

This is by far my favorite platform to design and develop for! When designing a church website, I first suggest them to use the Light system. Developed with the church in mind, the system easily allows your staff to update your website, with very little (or no) HTML knowledge. It allows for ANY element to be drag and drop ready, so you can move anything to anywhere on the page. Also, simple donations, email forms, and calendar features are included. The software is hosted, so there is a monthly fee, depending on the amount of pages you have, but a great system!

If your a designer/developer, you will love the way the system works. Design two pages, one home, one interior, code them, drop in LightCMS tags to define what is an edible region and you’re set!

2. WordPress

If you’re looking for a great content management system, easy to use, and are on a budget, nothing can beat WordPress for your church’s website. I have received such an overwhelming amount of requests for WordPress sites in the last year that I am launching a WordPress focused design company!

WordPress offers a lot in terms of features, with a large community of developers offering free or low cost plugins, a huge template market, and WordPress is free! All you really need is a web host and you can be up and running. For churches on a budget, this is the way to go.

Resources:
Official WordPress Site:
WordPress.org
Paid Themes:
ThemeForest WP Themes
Woo Themes
Free Themes:
Free WordPress Templates

3. Pagelime

Pagelime is a unique offering, focusing on designers, this simple CMS allows you host your own website, then update it using their hosted CMS. I have used this on a few client sites and I was very impressed. Simply plug-in their code into any area of a site you want to make editable and you’re set. They offer a free account for up-to 3 sites.

4. Halogy

This one is probably unknown to a lot of users, but I stumbled across this CMS a few months ago and was blown away with how simple this CMS is to use. This is one of the few systems that allows you to buy the source code, host it on your server, and develop on top of it. Created using PHP, this system is extremely fixable.

Features include the ability to add templates, add a shopping cart, and edit content in a simple way! Check them out.

5. Expression Engine

One of most complete and advanced CMS systems on the market today. Some of the biggest companies run their sites using this system and the features are outstanding! A large development community and support will be able to help you get started.

A few downsides include a larger start-up cost and because the system is complex, the learning curve is steep.

6. Ekklesia 360

One of the only two CMS on this list that was built specifically for churches. I have not used the system, but I have heard from a few companies that swear by it for church websites. Church specific modules, sermon manager, and member system all make this system very unique.

7. SquareSpace

SquareSpace has come a long way and is one of the best CMS systems available. For only $12 a month, you will get a hosted website, that you can hand to anyone to update. Easy to update, templates, and blogging are all a few features that this CMS includes.

A rails+mongo Gemfile sample

A rails+mong Gemfile sample

While I learn Rails, I found a good sample to combine MongoDB into Rails, I list here for quick retrieving:

source 'https://rubygems.org'
require 'mongo'

gem 'rails', '3.2.12'
gem 'bootstrap-sass', '2.1'

group :development, :test do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  gem 'mongo_mapper', '~> 0.12.0'
  gem 'bson_ext', '~> 1.8.2'
  gem 'bson', '~> 1.8.2'
  gem 'mongo', '~> 1.8.2'

  gem 'uglifier', '>= 1.0.3'

  gem "rspec-rails", "~> 2.0"
end

gem 'jquery-rails'

Of course, need to install (probably need root permission):

$ bundle install

After successfully install, I created a config file: #{app}/config/initializers/mongo_config.rb to initialize it:

MongoMapper.connection = Mongo::Connection.new('localhost', 27017)
MongoMapper.database = "test"
 
if defined?(PhusionPassenger)
  PhusionPassenger.on_event(:starting_worker_process) do |forked|
  MongoMapper.connection.connect if forked
   end 
end

After the config, right now when Webrick starts, the MongoDB is associated to connect.

bash Comparison Operators

bash Comparison Operators

Here is Bash comparison operators from http://tldp.org/LDP/abs/html/comparison-ops.html. I extracted for quick searching:

A binary comparison operator compares two variables or quantities. Note that integer and string comparison use a different set of operators.

integer comparison

-eq

is equal to

if [ "$a" -eq "$b" ]

-ne

is not equal to

if [ "$a" -ne "$b" ]

-gt

is greater than

if [ "$a" -gt "$b" ]

-ge

is greater than or equal to

if [ "$a" -ge "$b" ]

-lt

is less than

if [ "$a" -lt "$b" ]

-le

is less than or equal to

if [ "$a" -le "$b" ]

<

is less than (within double
parentheses)

(("$a" < "$b"))

<=

is less than or equal to (within double parentheses)

(("$a" <= "$b"))

>

is greater than (within double parentheses)

(("$a" > "$b"))

>=

is greater than or equal to (within double parentheses)

(("$a" >= "$b"))

string comparison

=

is equal to

if [ "$a" = "$b" ]

Note the whitespace framing the =. if [ "$a"="$b" ] is not equivalent to the above.

==

is equal to

if [ "$a" == "$b" ]

This is a synonym for =.

The == comparison operator behaves differently within a double-brackets test than within single brackets. [[ $a == z* ]] # True if $a starts with an "z" (pattern matching). [[ $a == "z*" ]] # True if $a is equal to z* (literal matching). [ $a == z* ] # File globbing and word splitting take place. [ "$a" == "z*" ] # True if $a is equal to z* (literal matching). # Thanks, Stéphane Chazelas

!=

is not equal to

if [ "$a" != "$b" ]

This operator uses pattern matching within a [[ ... ]] construct.

<

is less than, in ASCII alphabetical
order

if [[ "$a" < "$b" ]]

if [ "$a" \< "$b" ]

Note that the “<” needs to be
escaped within a
[ ] construct.

>

is greater than, in ASCII alphabetical order

if [[ "$a" > "$b" ]]

if [ "$a" \> "$b" ]

Note that the “>” needs to be
escaped within a [ ] construct.

See Example 27-11 for an application of this
comparison operator.

-z

string is null,
that is, has zero length

String='' # Zero-length ("null") string variable. if [ -z "$String" ] then echo "\$String is null." else echo "\$String is NOT null." fi # $String is null.

-n

string is not null.

The -n test requires that the string be quoted within the test brackets. Using an unquoted string with ! -z, or even just the unquoted string alone within test brackets (see Example 7-6) normally works, however, this is an unsafe practice. Always quote a tested string. [1]

Example 7-5. Arithmetic and string comparisons

#!/bin/bash a=4 b=5 # Here "a" and "b" can be treated either as integers or strings. # There is some blurring between the arithmetic and string comparisons, #+ since Bash variables are not strongly typed. # Bash permits integer operations and comparisons on variables #+ whose value consists of all-integer characters. # Caution advised, however. echo if [ "$a" -ne "$b" ] then echo "$a is not equal to $b" echo "(arithmetic comparison)" fi echo if [ "$a" != "$b" ] then echo "$a is not equal to $b." echo "(string comparison)" # "4" != "5" # ASCII 52 != ASCII 53 fi # In this particular instance, both "-ne" and "!=" work. echo exit 0

Example 7-6. Testing whether a string is null

#!/bin/bash # str-test.sh: Testing null strings and unquoted strings, #+ but not strings and sealing wax, not to mention cabbages and kings . . . # Using if [ ... ] # If a string has not been initialized, it has no defined value. # This state is called "null" (not the same as zero!). if [ -n $string1 ] # string1 has not been declared or initialized. then echo "String \"string1\" is not null." else echo "String \"string1\" is null." fi # Wrong result. # Shows $string1 as not null, although it was not initialized. echo # Let's try it again. if [ -n "$string1" ] # This time, $string1 is quoted. then echo "String \"string1\" is not null." else echo "String \"string1\" is null." fi # Quote strings within test brackets! echo if [ $string1 ] # This time, $string1 stands naked. then echo "String \"string1\" is not null." else echo "String \"string1\" is null." fi # This works fine. # The [ ... ] test operator alone detects whether the string is null. # However it is good practice to quote it (if [ "$string1" ]). # # As Stephane Chazelas points out, # if [ $string1 ] has one argument, "]" # if [ "$string1" ] has two arguments, the empty "$string1" and "]" echo string1=initialized if [ $string1 ] # Again, $string1 stands unquoted. then echo "String \"string1\" is not null." else echo "String \"string1\" is null." fi # Again, gives correct result. # Still, it is better to quote it ("$string1"), because . . . string1="a = b" if [ $string1 ] # Again, $string1 stands unquoted. then echo "String \"string1\" is not null." else echo "String \"string1\" is null." fi # Not quoting "$string1" now gives wrong result! exit 0 # Thank you, also, Florian Wisser, for the "heads-up".

Example 7-7. zmore

#!/bin/bash # zmore # View gzipped files with 'more' filter. E_NOARGS=85 E_NOTFOUND=86 E_NOTGZIP=87 if [ $# -eq 0 ] # same effect as: if [ -z "$1" ] # $1 can exist, but be empty: zmore "" arg2 arg3 then echo "Usage: `basename $0` filename" >&2 # Error message to stderr. exit $E_NOARGS # Returns 85 as exit status of script (error code). fi filename=$1 if [ ! -f "$filename" ] # Quoting $filename allows for possible spaces. then echo "File $filename not found!" >&2 # Error message to stderr. exit $E_NOTFOUND fi if [ ${filename##*.} != "gz" ] # Using bracket in variable substitution. then echo "File $1 is not a gzipped file!" exit $E_NOTGZIP fi zcat $1 | more # Uses the 'more' filter. # May substitute 'less' if desired. exit $? # Script returns exit status of pipe. # Actually "exit $?" is unnecessary, as the script will, in any case, #+ return the exit status of the last command executed.

compound comparison

-a

logical and

exp1 -a exp2 returns true if
both exp1 and exp2 are true.

-o

logical or

exp1 -o exp2 returns
true if either exp1 or exp2 is
true.

These are similar to the Bash comparison operators
&& and ||, used
within double brackets.

[[ condition1 && condition2 ]]

The -o and -a operators
work with the test command or
occur within single test brackets.

if [ "$expr1" -a "$expr2" ] then echo "Both expr1 and expr2 are true." else echo "Either expr1 or expr2 is false." fi

But, as rihad points out: [ 1 -eq 1 ] && [ -n "`echo true 1>&2`" ] # true [ 1 -eq 2 ] && [ -n "`echo true 1>&2`" ] # (no output) # ^^^^^^^ False condition. So far, everything as expected. # However ... [ 1 -eq 2 -a -n "`echo true 1>&2`" ] # true # ^^^^^^^ False condition. So, why "true" output? # Is it because both condition clauses within brackets evaluate? [[ 1 -eq 2 && -n "`echo true 1>&2`" ]] # (no output) # No, that's not it. # Apparently && and || "short-circuit" while -a and -o do not.

CSS tips: Initializr, HTML5 Boilerplate, skype phone display, minify CSS

1. How do I prevent phone numbers looking twice as large and having a Skype highlight?

If this is occurring, it is because a user has the Skype browser extension installed.
Use the following CSS to prevent Skype from formatting the numbers on your page:

span.skype_pnh_container {
    display: none !important;
}

span.skype_pnh_print_container {
    display: inline !important;
}

2. How can I integrate Twitter Bootstrap with HTML5 Boilerplate?

You can use Initializr to create a custom build that includes HTML5 Boilerplate with Twitter Bootstrap.

Read more about how HTML5 Boilerplate and Twitter Bootstrap complement each other.

3. Minify Your CSS

Here is a Free CSS Compressor and CSS Compression Tool:
http://www.minifycss.com/css-compressor

4. CSS tips

Here are some CSS Best Practices extracted from the book ‘Visual QuickStart Guide’ by ‘Jason Cranford Teague’.

• Prefer shorthand properties. use ‘Font’ to set multiple values with a single property.
  This not only cuts down on the amount of code, it also keeps similar property
  values together, makeing editing easier.
• Use RGB for color:
  RGB values are easier for mere mortals to understan and you can now set transparent colors using RGBA.
• Use background images or other styles for interface chrome.
• Use CSS form simple background gradients.
• Favor margin over padding.
• Favor <link> over @import.

CSS Reset

Reset CSS

“Resetting Browser Default Styles” to make sure all browsers are the same in various equipments (smart phone, tablet, desktop/laptop). There are a lot of articles like this to introduce and provide codes.

Here is Meyer’s “Reset CSS” 2.0 CSS source code, I copy here for quick retrieving.

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Ruby IDE: Aptana Studio 3 vs. RubyMine

Ruby IDE: Aptana Studio 3 vs. RubyMine

JetBrains’s WebSotrm for JavaScript/NodeJS development is very cool.
WebStorm is a JavaScript IDE, also a HTML editor. I used it in both Windows as well as in Ubuntu environments.

Now Using its serial production RubyMine for Rails development.

All JetBrains’ productions are not free, including WebStorm and RubyMine, but with good quality.

Aptana Studio 3 is also a good choice, and a benefits over RubyMine is that Aptana is free.

By comparing both of them in the environment of Ruby and Rails developments, I vote for RubyMine. It is slighter easy and convenient to use and more quick.

An other comparison result is to Aptana IDE, which can be installed in CentOS 6.3, but RubyMine is only a Windows version.