Monday, May 27, 2013

Unobtrusive JavaScript

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

<p id="printthis">Thank you for your order. Please print this page for your records.</p> <script type="text/javascript"> (function(){ if(document.getElementById){ var pt = document.getElementById('printthis'); if(pt && typeof window.print === 'function'){ var but = document.createElement('input'); but.setAttribute('type','button'); but.setAttribute('value','Print this now'); but.onclick = function(){ window.print(); }; pt.appendChild(but); } } })(); </script>


  • By wrapping the whole functionality in an anonymous function and immediately executing it — this is what(function(){})() does — we don’t leave any global variables behind.
  • We test for DOM support and try to get the element we want to add the button to.
  • We then test if the element exists and if the browser has a window object and a print method (by testing if the type of this property is function).
  • If both are true, we create a new click button and apply window.print() as the click event handler.
  • The last step is to add the button to the paragraph.

Thursday, May 16, 2013

Develop Website on Mac

1. Set up Development Environment

Download and Install XAMPP on Mac OS X
http://www.apachefriends.org/en/xampp-macosx.html#849

X (to be read as "cross", meaning cross-platform)
Apache HTTP Server
MySQL
PHP
Perl
Local folder location:
/User/YourUserAccount/Sites/

Access Vis
http://localhost/~YourUserAccount

or /Applications/XAMPP/htdocs/
It cannot be modified at first, asks for authentication
Refer to: http://stackoverflow.com/questions/9046977/xampp-permissions-on-mac-os-x
  1. Open applications folder
  2. Locate XAMPP folder
  3. Right click, get info (as described above)
  4. In pop-up window locate the 'sharing & permission' section
  5. Click the 'locked' padlock symbol
  6. Enter admin password
  7. Change 'Everyone' permissions to read & write
  8. In the get info window still, select the 'cog' icon' drop down option at the very bottom and select 'Apply to enclosed items' this will adjust the permission across all sub-folders as well.
  9. Re-lock the padlock symbol
  10. Close the 'Get Info' window.

2. Install Eclipse
 I used Eclipse PDT (PHP Development Tool)

Refresh a view, hold "fn" key + F5

3. Add favicon
Create your favicon
http://tools.dynamicdrive.com/favicon/

Add between <head>
<head>
    <link rel="icon" type="image/ico" href="favicon.ico"/>
</head>

Problem: refresh browser doesn't change to new favicon
Solved: clear cache in browser, force-refresh (Command +R)

but it only works when files are on the server, not locally.

4. Setup MySQL
http://localhost/phpmyadmin/
#2002 The server is not responding (or the local MySQL server's socket is not correctly configured) 

Re-opened in a New Incognito Window, it worked; so clear the browser cache did the trick.

Refer to: Creating a MySQL Database using XAMPP
http://complete-concrete-concise.com/web-tools/creating-a-mysql-database-using-xampp

Refer to: Access MySQL Command Line in XAMPP
http://ja.meswilson.com/blog/2007/04/07/access-mysql-command-line-in-xampp/


5. Setup Wordpress
Refer to: http://www.siteground.com/tutorials/wordpress/wordpress-installation.htm


  1. Download wordpress  http://wordpress.org/download/
  2. Unzip it
  3. Put the folder under your web directory, in my case /Applications/XAMPP/htdocs/
  4. Open a browser  http://localhost/wordpress/
  5. It will say I don't have a wp-config.php file, click the button "Create a Configuration File", enter Database name, User name
  6. Next page "Sorry, but I can’t write the wp-config.php file.You can create the wp-config.php manually and paste the following text into it." so create wp-config.php and change database name, user name and password.
  7. Run and install http://localhost/wordpress/wp-admin/install.php