Continue reading »]]> I tried to show the navigation menu based on user role in WordPress. I couldn’t really find what I need from Google. So I decided to modify the template directly.

1. I need to create role for user. By default we can’t add new role in WordPress. So, I use Capability Manager Plugin to create new role with it’s capabilities. In this post, I create ‘Staff’ and ‘Client’ role. Then assign the new role to the user.
2. Next, I create 4 different menus; ‘public’, ‘admin’, ‘client’, and ‘staff’ menu. And set the ‘public’ as the default menu.
3. Open the header.php of the current theme, search for:
   <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

   and then add the following code:

   <?php
   if (is_user_logged_in()) {
       global $current_user;
       $user_roles = $current_user->roles;
       $user_role = array_shift($user_roles);
       switch ($user_role) {
           case 'staff':
               $menu = 'staff';
               break;
           case 'client':
               $menu = 'client';
               break;
           case '':
               $menu = 'main';
               break;
       }
       wp_nav_menu( array( 'menu' => $menu, 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
   }
   ?>

The code above just check what is the current user role and display the menu after the public menu based on the role. If it is public user, the default menu will be displayed.

Continue reading »]]> Yu hu! I am back working but this time I will be working form home. I am on trial working for local web hosting company to add new features for existing program. They don’t like the idea of hiring people to work from home but they are willing to try on my skill for a month. So I work around 20-38 hours per week, meet once a week and starts next Thursday.

I am so excited as I have not been using my brain lately. Apart from feel tired taking care of Lana, I was hoping to get job that can let me work from home so I can spend my time with her. My wish come true

Continue reading »]]> To install Google Chrome in Ubuntu:

1. Edit aptitude source list
   sudo gedit /etc/apt/sources.list
2. Append the distribution lists below on the bottom of the source.list:
   deb http://ppa.launchpad.net/chromium-daily/ppa/ubuntu lucid main
   deb-src http://ppa.launchpad.net/chromium-daily/ppa/ubuntu lucid main
3. Save and exit the source.list
4. Add the GPG key in command line from terminal:
   sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xfbef0d696de1c72ba5a835fe5a9bf3bb4e5e17b5
5. Update the source list through the terminal:
   sudo apt-get update
6. Ready to install chrome:
   sudo apt-get install chromium-browser
7. Ready to use the chrome through Applications–>Internet–>Chromium Web Browser

Continue reading »]]> Javascript Sprachraum on the server

Patrick Lee @boundvariable

How Javascript on server look like?

• Get ip address from server:
  <SERVER>write(request.ip)</SERVER>

Resources

• Web directions South, Javascript Sprachraum

• Server side js environment
• aptana jaxer – the javascript server
• node.js: use v8 script http://nodejs.org/
• Coffee Script

Database

• mongoD: support RDBMS
• couchdb
• Riak

Testing javascript (server) with unit test

• vows
• kyuri (gherkin)
• nodeunit

Package management

• node package management npm: http://npmjs.org/

Build on node

• cake: coffee-script version
• jake: java script version

Server modules in js

• http://github.com/ry/node/wiki/modules over 500 modules

Sample

• http://nodeknockout.com/

Location, location, geolocation

Max Wheeler @makenosound from Icelab

Resources

• Web directions South, Location, location, geolocation
• Geodesic: Location in longitude, latitude form
• Civic: Location in human understandable form e.g pub name

WOEIDs

• Where On Earth Identifiers (WOEIDs) unique identifier for place on earh (by yahoo)
• where.yahooapis.com/v1/place/URI
  <?xml version="1.0" encoding="UTF-8"?>
  <place yahoo:uri="http://where.yahooapis.com/v1/place/2507854" xml:lang="en">
    <woeid>2507854</woeid>
    <placeTypeName code="7">Town</placeTypeName>
    <name>Trenton</name>
  
  </place>

Data gathered from:

• GPS (assisted-GPS)
• cellular network id
• wifi networks
• IP sniffing
• manual input

Geolocation API

• not working in IE6-9 and safari 4
• navigator.geolocation –> using modernizr Modenizr.geolocation and get extra data
• one-shot request: get location of the user getCurrentPosition (successEvent, errorEvent, other optional params). errorEvent is optional
• watch position: continue watchin & update application the user location, only trigger position location. this will run forever, so we need to makesure we clearWatch to stop watching
• reverse geocoding: get long, lat and turn to address
• reverse geocoding: get address and turn in long, lat
• navigator.geolocation.getCurrentPosition –> will return: longitude, latitude, accuracy, altitude, altitudeAccuracy, heading (in degrees and use in compass in iphone, ipad), speed (how fast moving from point a to point b –> not really working well in mobile)
• Example code: With this anonymous function (function without name) and return array of latitude and longitude
  navigation.geolocation.getCurrentPosition(function(location) {
      return [location.coords.latitude, location.coords.longitude]
  }

Sample:

• http://gowalla.com/

• decaf sucks: http://decafsucks.com
• tinygeocoder.com
• placefinder from yahoo
• google: using googlemap api
• http://code.google.com/apis/maps/articles/tutorial-iphone.html native geolocation API (iPhone)

YQLGEO

• a wrapper for geolocation services
• http://isithackday.com/hacks/geo/yql-geo-library
• If we deny position, it will do IP lookup and return the lat/long of that IP

NOTE:

• Use google direction API to show the direction on how to go to the location
• drawing map: try to use static map to avoid too much overhead in mobile

Building Mobile web apps

By Myles Eftos @madpilot

Resources:

• Web direction South, Building Mobile web apps

Available mobile platform and the language used for the native applications

• iPhone: Objective C
• Anroid: Java
• Nokia: C++
• Win 7: .net
• Palm pre: html + css + js

Framework

• PhoneGap:
  • Advantage:
    • Webkit
    • Add javascript bridge e.g. hardware devides like camera, geolocation, gmap
    • All the mentioned phone above
    • Fast to develop: using html + css + js
    • deploy to appstore easily
    • use existing development tools
    • lifecycle like normal browser load html, css and js
    • Use JQ unit test for unit testing
    • iPhone, Google Android, Symbian, Palm and Blackberry
  • Disadvantage:
    • Slower than native apps
    • can’t access everything yet
    • no position:fixed support e.g. footer
    • no debugger, but can use firebugs through computer
    • file system support is limited
  • Issue:
    • memory + cpu are issue
    • abritary of 10 mb image limit –> will stop loading if image too big (work for normal safari but not mobile safari)
    • only handles text files
    • working asynchronously is hard –> work on only 1 thread
• Jquery JQTouch
  • html + css + js library
  • worth it for js application
  • html + css –> clunky
• SenchaTouch (extjs, jqtouch, raphael): http://www.sencha.com/products/touch/
  • extjs which is better for app dev

  • better performance than jquery
  • weird licence: it’s GPL but developer need to pay
  • html + css + js
• iScroll 3.0
  • Not a full framework
  • fixed scrolling position –> use CSS3
  • uncanny valley problem
  • renamed to GhostTouch? –> but still in development
• Titanium by Appcelerator:
  • Use this for developing different mobile platform native app (using native code)
  • complies js down to bottom
  • will loss the css3 + html5 look & view by styling using js
  • develop on desktop
  • Advantage:
    • Make use as UI widget & perform at same speed as native app
    • no crazy square bracket notation
    • pretty good abstraction
  • API:
    • bigger API than Phonegap
    • mainly generic but some platform specific
    • threaded UI means file & db functions return synchronously
  • Disadvantage:
    • docs lack of sample (but the forum good)
    • structuring code is less defined than on the web
    • no debugger
    • code-build-crash cycle much slower than code-refresh-cycle
    • unit testing is hard
• iui: not working anymore, using predefined html to display the content like iphone

Native apps are faster than webkit mobile app dev (phonegap) because in webkit:

• image loading is slow
• rendering a gradient, makes an image (use canvas) and then convert to bmp before displaying
• accelerated animation (opacity, translate3d)
• use native touch event (slower than click event by 300 ms)

Pretending to go native

• html5 new form input like email, web than can switch keyboard layout
• turn on/off auto correction & auto capitalize (work for iPhone but not anroid)
• notification API provides alert & confirm (can set the title and the button vaue)

Conclusion

• Use Phonegap for better non-native UIs, fast prototyping, simple apps & web base app

• Use titanium for the rest

Working for mobile

• hardware acceleration: e.g. iphone (css animation)
• html5 offline-ness (manifest) e.g. reading gmail offline from iphone/ipad
• style: http://developer.apple.com/iphone/index.action –> using sdk and load iphone simulator, can switch iphone version (3, 4) or ipad. iphone 4 has a big graphic resolution that can’t fit in one screen –> can turn on debug screen to see the javascript error. apple dev site also provice human interface guidelines

Sample ipad/iphone application using html5 and javascript (not in appstore yet):

• http://grip.heroku.com

Raphaël: native web vector graphics library

with Dmitry Bara­novskiy @dmitrybaranovsk

Resources

• Web directions South, Raphael
• http://raphaeljs.com/

Continue reading »]]> Active Web Development

Tuesday, October 14 2010 By Divya Manian @numbuin

Reading

• casscading style sheets o’reilly
• designing web standards jeffery zeldman

Useful link

• Web directions South, Active Web Development
• Difference between html4 & html5
• xhtml in html5
• HTML5 cheatsheet
• MSDN scriptjunkie
• HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

Create rituals for learning:

• create support chart for new features

• bling: features that will render only if browsers support them. eg. border-radius, box-shadow
• needs fallback: feature you will use, but with some kind of fallback for browsers that do not support: html5 forms – X-html5widgets, html5-ecanvas
• can’t use now: e.g.feature you wont use yet: websockets
• keep updating the chart every month (at least)
• Filing browser bugs report: http://www.browserscope.org/browsers

RDFa everywhere

by Knud Möller

In Brief

• a way to very precisely mark up data in webpage
• Web directions South, RDFa everywhere
• Slide
• W3c RDFa working group: working undwerway for rdfa core 1.1, rdfa api and xhtml+rdfa
• Sample: <#me> foaf:name "linda"
• old and new attribute:
  • @about: to say what some info is about (subject) <span about="#marge" typeof="foaf:Person">
  • @typeof: what kind of thing is
  • @rel how things relate to another (predicate): <a rel="test.com">
  • @href what thing related to (object): <a ... href="lindaocta.com" ..>
  • @content to provide machine readable content (a literal object): <span ... @content="2010-10-14" ...>
• adopters:
  • facebook ogp: announce open graph protocol using rdfa, any webpage can become a node in the graph by adding some simple markup
  • sample website: semantic web dog food http://data.semanticweb.org/
  • drupal:
    • drupal 7 provide rdfa
    • drupal content types and data fields are mapped to vocab like dc, rss, sioc ( http://sioc-project.org/ comment, post), foaf, skos, etc
  • search engine like google (rich snippets), yahoo (searchmonkey)
  • retailers: bestbuy(5), overstock, tesco
• linked(open) data:
  • linked data instead of linked document

  • data producers like gov, media, etc open their structured data to public
    • identify everything in uri
    • use http:// uri unless they can’t be found
    • provide useful info at each uri
    • include links between datasets
• LATC: linked open data around the clock
  • EU “support action” project for linked open data
    • publish tutorial
    • maintain library for linked data tools (opensource)

RDFa 1.1

• backwards compatible with rdfa 1.0
• rdfa no longer tied in one language, it is embedded in any suitable host languages e.g. xhtml, html5, svg, odf
• rdfa core defines attribute, precise processing model, requirements on host languages, etc
• xhtml+rdfa 1.1 defines a number of language specific terms, and provides a formal schema and DTD
• no more reliance on @xmlns (too much tied to XML) instead the more generic:
  • @prefix:
    <html xmlms:foaf="xxxx" xmlns:dc="xxxx" /> become <html prefix="foaf: xxxx" dc: xxxx" />
  • @vocab to avoid prefixed
    <html vocab:"xxxx" />

    but only can use one at that time

  • @profile, which defines terms and/or prefix mapping by loading external document, this might increase processing time but need to define with specific data (e.g. extension)

RDFa api

• focussing on “using”, rather than “producing” data
• ideally one day supported natively by browsers
• allow abstraction from underlying RDF model
• design oriented on other DOM-based API: document.getElementsBySubject() = document.getElementsById()
• first target: ECMAScript, but other langugage like js should work
• access both data and DOM element: document:getElementsByProperty("foaf:name”), document.getElementsBySubject(“#Linda”)
• extensibility: non-RDFa parsers (microformats, microdata), other datastores, etc

Online tools for parsers/syntax checkers

• rdfa distiller: http://www.w3.org/2007/08/pyRdfa/
• checkrdfa: http://check.rdfa.info allows to check Facebook Open Graph Protocol and google rich snippets
• http://rdfa.info/wiki/Tools

Creativity, design and interaction with HTML5 and CSS3

By Dan Rubin @danrubin

Useful links

• Web directions South, Creativity, design and interaction with HTML5 and CSS3

New in CSS3 (partial)

• new selector
• rounded corners
• @font-face
• RGBa & HSLa : HSL for lightness, a is alpha
• box-shadow
• gradients
• multiple backgrounds
• media queries
• visual effects & animation

Testing and detecting browser support:

• http://selectivizr.com/: css3 selectors for IE

Examples

• css media queries:
  • @media –> to set the width of the device screen

  • can include media attr in <link> tab –> not recommended
  • example: http://simplebits.com/
  • http://hardboiledwebdesign.com/
  • twitter new site

Tools & useful links

• http://code.google.com/p/css3-mediaqueries-js/: for parse, test and apply CSS3 Media Queries
• HTML5 & CSS3 Resources for Designers: http://realworldcss3.com/resources
• http://disable-javascript.com/
• http://www.tutorialspoint.com/html5/html5_modernizr.htm
• http://krsmrs.com/2010/10/web-directions-south-2010/

Even faster websites

By Steve Sounders @souders

Reading

• high performace web sites
• even faster web sites

Links & Tools

• Web direction South, Even faster websites
• Slide
• Profiling web browser
• Google webmaster
• Web page test
• Steve souders blog’s on Frontend SPOF
• YSlow from yahoo
• google async snippet for analytics

Web performance optimization (WPO)

• speed is the most important features
• drive traffic
• improves UX
• increases revenue
• reduce costs

What makes sites feel slow?

• lack of Progressive Rendering
  • by document flushing: e.g. flush the header first (logo –> to be shown first) –> make user feel faster by loading most part of it dynamically

  • Progressive Enhancement deliver html, defer javascript, avoid DOM, decorate later –> will achieve Progressive Rendering
  • focus on js –> can block the parallel downloaded of the content after the script downloaded
  • other browser might take approach to download content in parrarel –> by putting script tag on the buttom, but still not paraller with script
  • split js, download those that is needed to be executed first and everything else. then include the script after the page on load (or when we need it next)
  • use page speed of firebug (to split manually) or some other microsoft tool ( doloto)

Sample Good page performance sites from top to down

• google use sth
• Bootloader used in Fabcebooke to load script dynamically
• yahoo hv something else
• you tube still hv script on top of the source
• amamzon: put the script 40% down in the page
• craigslist: jquery script on the bottom, nvr use it on the first page for the pre-fetching to be used in 2nd page
• ebay: lots of script download in the body –> bad in ie7
• new twitter: use LABjs.com
• bing: scripts over the place
• wikipidea: all script on head

New stuff

• mobile waterfalls: download only after the prev download done
• http://browserscope.org includes mobile browser
  • the performace differ from: wifi, carriers
    • they hv different carrier transcoding for one website. e.g: optus changing the size of the images, fix the data and redirect the link to download ALL the resources in paraller. They also inject js file in everypage they download and this is very bad script.

WEBP image

• format from google ( http://code.google.com/speed/webp/)

• 39% smaller compression images
• based on VP8 codec
• loss of quality

Continue reading »]]> Had problem in writing files to my external harddisk with NTFS format through Snow Leopard.

In some forum, expert recommended to use free utility tools like: iNTFS and NTFS mounter

Write files to NTFS drive is actually supported by Snow Leopard but this functionality is not enabled by default. The above utility tools are useful for Leopard, as Leopard does not support write operation. To enable the write operation fro NTFS drive in Snow Leopard:

1. In Terminal, type diskutil info /Volumes/volume_name, where volume_name is the name of the NTFS volume. From the output, copy the Volume UUID value to the clipboard.
   diskutil info /Volumes/drive_name
2. Back up /etc/fstab if you have it; it shouldn’t be there in a default install.
   sudo cp /etc/fstab /etc/fstab.ori
3. Type sudo nano /etc/fstab
   sudo vi /etc/fstab
4. In the editor, type UUID=, then paste the UUID number you copied from the clipboard. Type a Space, then type none ntfs rw. The final line should look like this:
   UUID=123-456-789 none ntfs rw

   where 123-456-789 is the UUID you copied in the first step.

5. Repeat the above steps for any other NTFS drives/partitions you have.
6. Save the file and quit nano (Control-X, Y, Enter), then restart your system.
7. Restart the computer, the added NTFS drive should be able to be written.

NOTE:
If there is not UUID, use the volume label instead.

Useful link:

1. http://www.macosxhints.com/article.php?story=20090913140023382
2. http://www.insanelymac.com/forum/index.php?showtopic=211212