Sunday, December 29, 2013

Summary of file and directory operation in PHP

1) File Operation in PHP

There are a lot of functions in PHP to do file and directory operations, such as
fopen, fwrite, fread, fcolse, file_put_contents, file_get_contents,
For example fopen is used to open a file, fread to read from a file and fclose to close file handler.
code example:
//change file line break to HTML line break: nl2br
echo nl2br($content);

We can also read and get line by line from a file using fgets
code example
       echo $content."<br />";
Other functions related to file operation: filesize: file size
filemtime: modified time (change content)
filectime: changed time (change content or metadata such as chmod)
fileatime: last access time such as read  or change.
touch($filename): update file time.

code example:
echo strftime('%m/%d/%Y %H%M',  filemtime($filename))."<br />";

2) Directory operation in PHP

To get current working directory: getcwd
create a new directory: mkdir
makdir('mydir','0777'); //note permission  may be overwritten by umask
makdir('mydir/dir1/dir2','0777',true);recursively create new directoy

change directory chdir
remove a directory: rmdir
is_dir: to check if it is a directory
opendir: open directory to get directory handler
readdir: to get each file in a directory
        echo $filename.'<br />';

Close directory: closedir
scandir:  read all file names in the directory into an array
foreach($file_array as $filename) 
       echo $filename.'<br />';
To remove .  and .. in the array which may appear when we scan directory , we can add
if(stripos($filename, '.')>0) // i.e first occurrence of  '.' not the first position.

Friday, December 20, 2013

Transfer your CSS to cross browser compatible using prefixr

For example, for linear gradient from top to bottom for background in CSS (no browser supports linear gradients using only this standard syntax)
background: linear-gradient(red, blue);

I have to write four other CSS rules for each of these for the different browsers.
 /* For Safari and Chrome */
 background: webkit-linear-gradient(red, blue);
 /* For Firefox */
background: -moz-linear-gradient(red, blue);
/*for Opera */
background: -o-linear-gradient(red, blue);

/* For Microsoft Internet Explorer */
background: -ms-linear-gradient(red, blue);

It is quite time consuming to write all these CSS rules for different browsers. We can use prefixr website:
 In the input box, you paste
background: linear-gradient(red, blue);
then click Prefixize button, you can get
background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -ms-linear-gradient(red, blue);
background: linear-gradient(red, blue);

You can save a lot of time for  writing your CSS scripts.

Thursday, December 19, 2013

Add spellcheck plugin in Notepad++ in Windows 7

 Notepad++ is an advanced free source editor, which can be downloaded from
To add spellcheck plugin in Notepad++ in Windows 7
1) Go to
find Full installer  and English    aspell-en-0.50-2-3.exe and install
2) Add path
 ;C:\Program Files (x86)\Aspell\bin
detail steps:
- Right click on "computer" in the Windows start menu; choose properties
- Click on "Change Settings" at the bottom right of the pop up window
- Click on the new dialog's "advanced" tab
- At the bottom, there is an "Environment Variables…" button, click it.
- In the second section (System Variables)  scroll down until you see "Path"; select it.
- Click the "Edit…" button
- On the end of the text line add:
   ;C:\Program Files (x86)\Aspell\bin
 Video: Add spellcheck plugin in Notepad++ in Windows 7

Wednesday, December 18, 2013

CSS, difference between child selector and descendant selector

In CSS, what is difference between "li > a" and "li a"?
">" is the child selector, only for child level from parent, not grandchildren,
"" is the descendant selector, can be children, grandchildren and more.
Example 1
<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
Example 2
li a{ color: green; }
li>a{ color: red; }

HTML code 1
  <li><span><a href='#'>HERE</a></span></li>

 "HERE" will display as green due to that it is grandchild not child of li, CSS "li>a" will not apply.

HTML code2
  <li><a href='#'>HERE</a></li>
  "HERE" will display as red due to that it is both descendant and child of li, both CSS "li>a" and "li a" will  apply.

Monday, December 16, 2013

Manage all your passwords using keepass open source software

There are too many passwords need to be remembered. You may struggle to remember banking, email, Internet and PC computer passwords. You may need to manage all your passwords using a single master password. You can use keepass.  KeePass is a  free open source password manager, which can be downloaded from here:
KeePass is a free, open source, light-weight and easy-to-use password manager for Windows, Linux, Mac OS X and mobile devices. You can store your passwords in a highly-encrypted database, which is locked with one master password or key file.

In Apple store, the application is called minikeepass for free download. You can import and export secure password database  iPhone  to dropbox  to synchronize to your local Windows PC.
Video:  Manage all your passwords using keepass open source software

Wednesday, December 11, 2013

jQuery mobile example

jQuery mobile is a web framework to build mobile websites using HTML5 and CSS3.

Example code
1) Call jQuery library:
<script src=""></script>
2) Call  jQuery mobile library
<script src=""></script>
3)  Using jQuery mobile CSS
<link rel="stylesheet" href="">
4) Define viewport for mobile
<meta name="viewport" content="width=device-width, initial-scale=1">
5) Define a header
<div data-role="header">
    <h4>jQuery Mobile  </h4>

6) Define page content
 <div data-role="content"></div>
7) Define footer
 <div data-role="footer">
    <h4>&copy; 2013 Jiansen Lu</h4>

8) complete example1.html
<!DOCTYPE html>
 <title>jQuery Mobile code example</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

<div data-role="page" id="pageone">
  <div data-role="header">
    <h4>jQuery Mobile  </h4>

  <div data-role="content">
     <ul data-role="listview" data-inset="true" data-dividertheme="b">
                     <li data-role="list-divider">Options</li>
                     <li><a href="menu.html">Food menu</a></li>
                     <li><a href="">Location</a></li>
                     <li><a href="">Search Nearby</a></li>
                     <li><a href="">Contact us</a></li>

  <div data-role="footer">
    <h4>&copy; 2013 Jiansen Lu</h4>


9) The link menu.html
<!DOCTYPE html>
 <title>Food Menu</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="home" data-theme="c">
<div data-role="content">
<div id="branding">
<h1>Food  Menu </h1>
<div class="choice_list">
<ul data-role="listview" data-inset="true" >
<li><a href="" data-transition="slidedown"> <img src="seaweedtofu.JPG"/> <h3> Sea Weed ToFu </h3></a></li>
<li><a href="" data-transition="slidedown"> <img src="shrimpdumpling.JPG"/> <h3> Shrimp Dumpling </h3></a></li>
<li><a href="" data-transition="slidedown"> <img src="boiledegg.JPG"/> <h3> Boiled Eggs</h3></a></li>
<li><a href="" data-transition="slidedown"> <img src="Congee.JPG"/> <h3> Congee</h3></a></li>
<li><a href=" " data-transition="slidedown"> <img src="snowpeas.JPG"/> <h3> Snow Peas </h3></a></li>
</div><!-- /page -->

10) Demo page:

Password protected your Microsoft Word 2010 and EXCEL document

In Microsoft Word and Excel, there is a feature to encrypt your document and set password protected.
In  Microsoft Word 2010 and EXCEL document:
1) Go to file tab and Click Info
2) Click "Protect Document", a menu pop-up, select  second "Encrypt with Password"
3) Type your password, after "Confirm Password", type the same password again.

Now your  Microsoft Word  and EXCEL document  are password protected.

Tuesday, December 10, 2013

Remove bettersurf ads program in Windows 7

Bettersurf plus (better surf, ads by bettersurf) is an ads program installed in your local computer. It will display ads in your browser with double underline under text. To remove bettersurf plus in Windows 7.  Click start and click control panel,  click "uninstall a program" under programs. Find program name "BetterSurf Plus", right click mouse and uninstall program.After bettersurf plus  ads program is uninstalled, Firefox will restart.

Video: Remove bettersurf ads program in Windows 7

Monday, December 9, 2013

Design two side-by-side divs in CSS

Left div contains video or image, right div contains questions in quiz.
Left div, I used "width:60%;" and "float:left";
Right div, I use "width:35%;" and "float:right";
So the distance between two divs is 5%,
Final code:
<div style="display:block; width:60%;  overflow:auto;float: left;" > </div>
<div style="display:block; width:35%; height: 800px; overflow:auto; float: right;" ></div>

Thursday, December 5, 2013

modernizr JavaScript library: detect mobile, CSS3 and HTML5 features in user browser.

We can use  server-side useragent to detect browser type:

Example code to show browser type using  useragent
<button onclick="myFunction()">Try it</button>
function myFunction()

The userAgent property returns the value of the user-agent header sent by the browser to the server.

But a lot of time, we need to detect the specific features of   mobile, CSS3 and HTML5 rather than browser type. modernizr  JavaScript library is a client-side script to detect  mobile, CSS3 and HTML5 features in user browser.  modernizr  JS library can be downloaded from:
To use   modernizr JavaScript librar:
<script src="modernizr-1.7.js" type="text/javascript"></script>
test for geolocation  feauter
Modernizr.geolocation  will return true or false.
test for touch feauture
Test for HTML5 feature
local storage
and more 

HTML5 boilerplate: 

Wednesday, December 4, 2013

Emulators for Windows Phone, for Android, and for Opera Mobile

You may want to test your web design codes in all mobile devices. Below is how to install emulators  for Windows Phone, for Android, and for Opera Mobile (iphone).

1) Install emulators for Windows Phone:
Download  Windows Phone SDK from:
And installing Windows Phone SDK ,  the Windows Phone Emulator can  be found under the Windows Phone Developer tools.

2)  Install emulators for Android:
Download Android SDK from:

3) Install Opera mobile emulator:
Download Opera mobile emulator from:

Tuesday, December 3, 2013

Responsive web design--sliding and swiping through pages on iphone and ipad using swipejs JavaScript library

In responsive web design, you may need to move the content with your fingers in mobile phones.
SwipeJs is a JavaScript library for touch-enabled mobile slider, which can be downloaded from:
The company website:
My demo:

To use this code,  jquery library and swipe.js are called.
<script src="//"></script>
<script src='swipe.js'></script>

swipe.js uses touch events for mobile instead of mouseclick in desktop.

Apples event object for touch events

The event object contains the following arrays:
  • touches - contains touch information upon touchStart and touchMove not touchEnd events
  • targetTouches - contains information for touches originating from the same target element
  • changedTouches - contains touch information upon all touch events

We can detect a swipe (left, right, top or down) using event.touch:

There are several other JavaScript libraries related to swipe feature in mobile phone:
3. dragend JS is another good option.
5. SwipeView
works both for desktop and tablet/mobile