Jun
29

WordPress – Showing Nav menu based on user role

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.

Permanent link to this article: http://lindaocta.com/?p=499

Dec
05

5th December 2011

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 ;)

Permanent link to this article: http://lindaocta.com/?p=497

Jan
21

Installing Chrome in Ubuntu 10.4 – Lucid Lynx

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

Permanent link to this article: http://lindaocta.com/?p=401

Oct
29

Web Directions South Sydney Summary (October 12-15, 2010)

Workshop (October 12-13, 2010)

Conference (October 14-15, 2010)

  • Day 1
    • Active Web Development By Divya Manian @numbuin
    • RDFa everywhere by Knud Möller
    • Creativity, design and interaction with HTML5 and CSS3 by Dan Rubin @danrubin
    • Even faster websites by Steve Sounders @souders
  • Day 2
    • Javascript Sprachraum on the server by Patrick Lee @boundvariable
    • Location, location, geolocation by Max Wheeler @makenosound from Icelab
    • Building Mobile web apps by Myles Eftos @madpilot
    • Raphaël: native web vector graphics library by Dmitry Bara­novskiy @dmitrybaranovsk

Permanent link to this article: http://lindaocta.com/?p=396

Oct
29

Day 2 – Web Directions South Conference (October 15, 2010)

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

Database

Testing javascript (server) with unit test

  • vows
  • kyuri (gherkin)
  • nodeunit

Package management

Build on node

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

Server modules in js

Sample

Location, location, geolocation

Max Wheeler @makenosound from Icelab

Resources

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:

YQLGEO

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:

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):

Raphaël: native web vector graphics library

with Dmitry Bara­novskiy @dmitrybaranovsk

Resources

Permanent link to this article: http://lindaocta.com/?p=426

Oct
29

Day 1 – Web Directions South Conference (October 14, 2010)

Active Web Development

Tuesday, October 14 2010 By Divya Manian @numbuin

Reading

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

Useful link

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

Creativity, design and interaction with HTML5 and CSS3

By Dan Rubin @danrubin

Useful links

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:

Examples

Tools & useful links

Even faster websites

By Steve Sounders @souders

Reading

  • high performace web sites
  • even faster web sites

Links & Tools

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

Permanent link to this article: http://lindaocta.com/?p=424

Oct
29

HTML5 right, now – Workshop

Wednesday, October 13 2010 by Ben Schwarz @benschwarz

Brief Background:

  • Backwards compatible, the new tags will not be displayed in IE6
  • Build for browser vendor not for the user
  • You tube can’t work with HTML5 audio/video because HTML5 could not display the advertisement

Background reading:

New tags/attributes in HTML5 (partial)

Header

  • <!DOCTYPE html>: strict standard compliance mode
  • <meta charset="utf-8">
  • base: base directory (root directory)
    <head>
       <base href="http://www.w3schools.com/css/" target="_blank" />
    </head>
  • command: the abstraction behind menu items, buttons, and links. Reference
  • script, assume all script is javascript: <script src="path"></script>
    • async attribute: true if set and nothing else will be loaded (all partial download will be paused) until the javascript is downloaded. NOTE: The javascript might change the state of the DOM.

      • ie9, chrome can download up to 6 resources now

    • defer attribute: include script, but don’t need to execute the script. execute only after the document is loaded, (safari, chrome, ie9)
      • browser can cache this js so it will load faster
      • executed before window onload
  • style:
    • scopy attribute: If present, the styles should ONLY apply to the style elements parent element and its child elements.

Sectioning content tag

  • section:

    • Only Chrome has default style for this tag, thus, if use other browser, we need to create the default style.
    • Optional:
      • <header>: but basically no section without header
      • <footer>
  • article:
    • e.g. twitter tweet might be article or news paper clip, but this is not a blog post.

    • bascially the content can be taken and still make sense. it’s standalone content
    • <header><h1>
    • <time>:
      • Attribute:

        • HTML time tag
        • datetime for format,
        • pubdate: publication date with boolean value: e.g. of time tag: 47 mins ago
    • <footer>
  • aside:
    • similar to article can belong to article/section

      • can be removed from the article/section, but the content of the article/section is still clear

      • it’s just an additional information for article/section
      • <figure> that can be wrap around image, video, svg, object (visual base content)
        • <figcaption> the information of the figure. it can be used become tooltip of the figure
        • can have multiple figcaption per figures
  • nav: navigation
    • consist of <ul><li>

Heading content tag

  • hgroup – block level element, grouping headers together although “h” tag itself is a block level element

    <header>
        <hgroup>
            <h1>sss</h1>
            <h2>ddd</h2>
        </hgroup>
    </header>

Content tag:

  • a with new attributes: See a tag
  • strong: In HTML 4.01, the <strong> tag defined strong emphasized text, but in HTML5 it defines important text.
  • q – inline quote
  • progress – tag defines work-in-progress
    • set the value of the progress bar

<a> tag in detail

PS: to stack the value up we can do rel=”feed licence nofollow” etc….

  • <a rel=”alternate”> alternate version that represent current page e.g pdf
  • <a rel=”archives”> list of old post/content
  • <a rel=”author”> author of the content
  • <a rel=”external”> external source e.g. arrow link for wiki page to point to external source
  • <a rel=”licence”> licence about the content (microformat)
  • <a rel=”nofollow”> e.g. we are linking to external content, but we don’t take responsible on the content
  • <a rel=”noreferrer”> (still draft) e.g. we don want to be referrer when you click on the link
  • <a rel=”feed”> e.g. rss feed. firefox will do auto discover
  • <a rel=”first”>
  • <a rel=”last”>
  • <a rel=”prev”>
  • <a rel=”next”>
  • <a rel=”up”> is for breadcrumbs. anchor up
  • <a rel=”prefetch”> – only work in firefox. if you hv link, firefox will automatically download the html page of the link and put it in cache. but only for one level. note: it won’t download image or other content of the page except the text. becareful if the page consist of post method of delete, it will be automatically happen.
  • <a rel=”tag”> for tag –> come from micro format
  • <a rel=”sidebar”> is like favourite in ie, panel in opera, bookmark in firefox it self. this sidebar might be disappear. used to add to bookmark
  • <a rel=”search”> when click on the link and do the search
  • <a rel=”pingback”> get response from other website e.g. about the current article

Embedded content tag:

  • canvas – bmp image
  • video
  • audio
  • embed
  • iframe: eg. sandbox attribute Defines restrictions to the frame content like allow-forms, allow-scripts, etc
  • img: align, border, hspace, vspace is not supported in HTML5

Interactive content tag:

  • menu

    • label
    • type: Defines which type of menu to display. Default value is “list”. e.g.:
      <menu>
      <menu type="toolbar">
      <menu type="list">
      <menu label="A pretty label">
  • Can hv ul, li
  • Can hv button

Block level links:

  • old way:

    <h>1><a href=''>title</a></h1>
    <p>Brief summary about my article<a href=''>readmore</a></p>
  • new way:
    <a href='/article'>
        <h1>title</h1>
        <p>Brief summary about my article</p>
    </a>

Microformats:

  • Microformats.org

    <p class="hcard">
            <span class="fn">Linda Octalina</span>
            <span class="adr region">Toowoomba</span>

            <span class="email">xxx</span>
    </p>
  • Firefox plugin to export person contact to addressbook using hcard
  • zotero

Microdata

  • Microdata specs: http://data-vocabulary.org
  • review bar at google search:
    • www.google.com/webmasters/tools/richsnippets: debugger for website for microformats and microdata. Result will show the google search preview on the url and the microformats/microdata from the url.
  • Sample:
    <header itemscope itemtype="http://data-vocabulary.org/Person">
        <img itemprop="photo" src="sss.jpg"/>
        <h1 itemprop="name">linda</h1>
    </header>
    • itemscope: is a “thing”
    • itemtype: link to show the documentation of metadata of the Person or other stuff like organization, product, review, review-aggretate, breadcrumb
    • itemprop to describe the tag type

Forms:

  • <input type=”email”> that will switch keybord in ipad with @ symbol. Have validator in webkit only (chrome)
  • <input type=”url”> get .com button in the keyboard. if we hold down .com button we will get .org or others. Have validator e.g. if there’s no http or no suffix (chrome)
  • <input type=”file” multiple> select multiple files to be uploaded (using shift to select multiple files).(Firefox, safari)

Autofocus, Placeholder, Search, Required:

  • placeholder: not working with IE6
  • autofocus: on the text input. it’s boolean
  • search: Have special look (can be overwritten) and hv an x icon when word is typed in. e.g: <input type=”search” placeholder=”search”>
  • required: only work in chrome but will not see the error message

Dates:

  • still working on it
  • how the calendar should look like, for now, still very ugly
  • in all browser only show a textbox same as normal input box

Modernizr by Paul Irish

Modernizr is javascript that let you to control the design of your site to work different browser. And you can implement CSS3, HTML and Modernizr will detect if the browser supports the style/tag, and Modernizer will control the fallbacks for browsers that don’t yet support them.

  • sample: https://gist.github.com/afd9cdb72bfed8f6fa70
  • automatically add class to html tag.
  • E.g check if browser support csscolumn. In css:
    p {width: 33em;}

    when use modernizer it will set .csscolums p style. If the browser support csscolumn, it will create two colums otherwise only 1 column will be displayed.

  • If autofocus is not supported in the browser, get the very first field that hv autofocus attribute and focus it. Sample code:

    $(function() {
        if (!Modernizr.input.autofocus) {
            $("[autofocus]:first").focus()
        }
    });
  • placeholder same way. use jquery code to set the placeholder value to the input field if the field not on focus and set to empty if it’s in focus. Other issue: if the user put space, it will not put the placeholder back
  • For IE, Shiv wrote script for IE like <!–[if IE]> <script src=/docs/js/shiv.js”></script><![endif]. Modernizr will handle this work for IE 8 and below as IE9 does not require this.
  • Modernizer also set almost everything to block like:
    section, article, header, aside, figure, footer, menu, nav {display: block;}

Canvas tag

  • performace slow but ie9 using dedicated memory/graphic card so it’s better
  • can draw video in canvas
  • E.g. Akihabara games uses canvas and svg: http://www.kesiev.com/akihabara/

Svg

  • supported in IE 9 and might be the best support
  • using <svg> tag and put content in the tag like <circle>
  • raphaeljs.com for drawing svg and can have xml as the input. SVG will still be displayed in IE6
  • unlike canvas, we can change the value within svg because all is defined as DOM nodes

Video & Audio

  • h264 – by codec apple, licencing constrain (need to pay by number of user), there’s rules for this codec: ie9, safari, chrome
  • webm – lead by google. it’s a decoder (open source)
    • mozzile, opera, sony, youtube.
    • not supported by safari
    • ie
  • solution: flash – jwplayer
  • firefogg: video encoding and uploading for Firefox
  • http://diveintohtml5.org/video.html By Mark Pilgrm
  • http://hacks.mozilla.org: http://hacks.mozilla.org/category/audio/
  • Video & audio attributes:

    • autoplay

    • controls: optional
    • autobuffer
    • loop
  • Sample: To make this work in iPad, h264 mp4 need to be the first in the video tag
    • Video

       <video controls autoplay autobuffer loop>
          <source src="movie.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
          <source src="movie.webm" type="video/wem; codecs='vp8, vorbis'"> everything else
          <source src="movie.ogv" type="video/ogg; codecs='theora, vorbis'"> firefox
          <object> this is where flash come in </object>
       </video>
    • Audio

      <audio controls autoplay autobuffer loop>
          <source src="sound.mp3">
          <source src="sound.ogg">
          <object> this is where flash come in </object>
      </audio>
  • NOTE:
    • mp3: not work in ff, safari (+wav), opera(+wav), ipad, iphone
    • ogg: ff and chrome

Web sockets:

  • webkit browser: chrome, opera
  • create connection to the server and can call back to the server every 20 miliseconds
  • push data. sort of like tcp socket
  • e.g. headers of each request returned by server. if too many request can crash the server
  • ws:// – same as http://
  • wss:// – same as https://
  • they are birectional:
    • connect to the server with all the headers exchange
    • send/receive as many times as you want on that connection
    • disconnect
    • each frame is 2 bytes of overhead (every message is sent only 2 bytes overhead including message)
    • simple API:
      var socket = new <a class="missing wiki" href="/trac/wiki/WebSocket" rel="nofollow">WebSocket?</a>("<a target="blank" href="ws://www.domain.com"><span class="icon"> </span>ws://www.domain.com</a>");
      socket.onopen = function () {};
      socket.onmessage = function () {}; --> will receive json from server
      socket.send(message);
      socket.onclose = function () {};
  • server will not know when the client drop off

Mobile Extra tags

  • define by apple, see http://developer.apple.com/library/safari
  • meta:
    • <meta name="apple-mobile-web-app-capable" content="yes">
    • <meta name="format-detection" content="telephone-no"> –> turn of telephone number
    • <meta name="apple-mobile-web-app-status-bar" ...> –> the signal bar on top of iphone
    • <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable:0;">
      • width = fix to device resolution
      • initial-scale: zoom in the website
      • maximum-scale: max zoom
      • user-scalable: if the page can be scaled by user
  • link (can set icon):
    • <link rel="apple-touch-icon-precomposed" href="mobile-icon.png"/>: Will overwrite the default gradient on the icon.
    • <link rel="apple-touch-icon-style" ... >: Will remove the address bar to make the website look like native app
  • css3 media query: for device detection.

    • Sample for iphone 3 (need to change for ipad/iphone4)

      @media all and (max-device-width: 480px) {
          body { margin 0 3 em font-size 200%; }
      }
    • double density screen: -webkit-min-device-pixel-ratio:2 (can get from apple mobile dev site) –> for iphone4 especially
  • Note:

    • We need to real specific on the style. e.g. potrait and landscape. if style has changed, need to set the original style back: http://goldenlink.com.au the floating when the page oriented
    • iphone3/4 ipad, anroid use webkit but they are slightly different for the styling

Offline mode

  • can be set through javascript
  • only work for firefox
  • <html manifest=”site.manifest”> –> for site.manifest filename can be changed
  • content-type:text/cache-manifest –> server need to send this information so it will be cache
  • sample cache manifest file:
    CACHE MANIFEST
       
    /
    /css/master.css
    /js/
       
    NETWORK: --> (optional) require network access (or ask if they want to connect to internet)
    /people
       
    or
    NETWORK:
    *       --> everysingle address need network
       
    FALLBACK:   --> optional
    /offline.html  --> divert  to offline.html if not online instead of giving them error
    • To force cache update

      CACHE MANIFEST
      # Rev 1 --> version number will be updated if there's update in the resources
  • localstorage:
    • browser will not clear it up

      localStorage.setItem(key, stringValue);   //stringValue MUST be a string.
                                       //if json need to be parsed yet
      .getItem(key)
      .removeItem(key)
      .clear() //clear local database

Permanent link to this article: http://lindaocta.com/?p=422

Oct
29

jQuery <3s designers – Workshop

Tuesday, October 12 2010 by Craig Sharkie @twalve

Useful Links:

Useful Plugins:

Permanent link to this article: http://lindaocta.com/?p=416

Jul
16

Set value of the variable in “FOR” loop in Window batch script

Running for loop and setting the variable values within the for loop is different in window batch file comparing to other scripting or programming language.

Following example is trying to get the total value of 1, 2, 3 and 4.

set COUNT=0
for %%F in (1 2 3 4) do (
set /A COUNT=!COUNT! + 1
echo %COUNT%
)

But we will get:

0
0
0
0

This is because batch processor expands the variable only once, thus %COUNT% is expanded to its value, which is the initial value, 0.

To fix this, ENABLEDELAYEDEXPANSION can be turned on to delay the batch processor expanding the variable the end of the looping. Also, using ! instead of % to expand the environment variable value.

setlocal ENABLEDELAYEDEXPANSION
set COUNT=0
for %%F in (1 2 3 4) do (
set /A COUNT=!COUNT! + %%F
echo !COUNT!
)

The result of the above code is:

1
3
6
10

There’s another way to enable the delay expansion is through the registry. Please refer to http://batcheero.blogspot.com/2007/06/how-to-enabledelayedexpansion.html.

Permanent link to this article: http://lindaocta.com/?p=337

Jul
15

Writing files to NTFS drive in Snow Leopard

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.

LABEL=volume_label none ntfs rw

Useful link:

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

Permanent link to this article: http://lindaocta.com/?p=360

Older posts «