Friday, 14 September 2012

The 30 CSS Selectors

For a list of CSS selectors browser support, please see here:
http://quirksmode.org/css/contents.html

The 30 CSS selectors:
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/


1) *

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2) #X

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3) .X

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4) X Y

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5) X

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6) X:visited and X:link


  1. a:link { colorred; }  
  2. a:visted { colorpurple; }   

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7) X + Y


  1. ul + p {  
  2.    colorred;  
  3. }   
Selecting the first sibling element Y immediately preceded by X.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8) X > Y

This selector selects the direct children only.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9) X ~ Y

Similar to X Y.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10) X[attr]

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11) X[attr="val"]

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12) X[attr*="val"]


  1. a[href*="tuts"] {  
  2.   color#1f6053/* nettuts green */  
  3. }  
Selecting anchor(s) with the attribute "class" contains the value "bar".

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13) X[attr^="val"]


  1. a[href^="http"] {  
  2.    backgroundurl(path/to/external/icon.png) no-repeat;  
  3.    padding-left10px;  
  4. }  
Selects all anchor tags with "href" that begins with "http". This does not account for url with "https"

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14) X[attr$="val"]


  1. a[href$=".jpg"] {  
  2.    colorred;  
Selects all "href" that are link to a jpg file.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15) X[data-*="val"]


  1. a[data-filetype="image"] {  
  2.    colorred;  
  3. }  

  1. <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  
Since an image file type can end with jpg, png, gif...etc, so rather than selecting different file types, we can use the attribute "data-filetype='image'" to select all image files.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16) X[attr~="val"]


  1. <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

  1. /* Target data-info attr that contains the value "external" */  
  2. a[data-info~="external"] {  
  3.    colorred;  
  4. }  
  5.   
  6. /* And which contain the value "image" */  
  7. a[data-info~="image"] {  
  8.   border1px solid black;  
  9. }  
Targets anchors with "data-info" with space separated list.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17) X:checked


  1. input[type=radio]:checked {  
  2.    border1px solid black;  
  3. }  

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18) X:after

Compatibility
  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19) X:hover

Compatibility
  • IE6+ (In IE6, :hover must be applied to an anchor element)
  • Firefox
  • Chrome
  • Safari
  • Opera

20) X:not(selector)

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21) X::pseudoElement


  1. p::first-line {  
  2.    font-weightbold;  
  3.    font-size: 1.2em;  
  4. }   
Selects the first line of a paragraph

  1. p::first-letter {  
  2.    floatleft;  
  3.    font-size: 2em;  
  4.    font-weightbold;  
  5.    font-familycursive;  
  6.    padding-right2px;  
Selects the first letter in a paragraph like a newspaper article

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22) X:nth-child(n)

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23) X:nth-last-child(n)

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24) X:nth-of-type(n)


  1. ul:nth-of-type(3) {  
  2.    border1px solid black;  
Selects the 3rd div in the page.

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25) X:nth-last-of-type(n)

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26) X:first-child

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27) X:last-child

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera
IE8 supports :first-child but not :last-child...

28) X:only-child


  1. <div><p> My paragraph here. </p></div>  
  2.   
  3. <div>  
  4.    <p> Two paragraphs total. </p>  
  5.    <p> Two paragraphs total. </p>  
  6. </div> 

  1. div p:only-child {  
  2.    colorred;  
  3. }  
Only targets the 1st div as its only got one child element p.

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29) X:only-of-type

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30) X:first-of-type

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera


Tuesday, 7 August 2012

Android - Install Apps To SD By Default & Move unmoveable Apps to SD

Reference:
http://www.howtogeek.com/114667/how-to-install-android-apps-to-the-sd-card-by-default-move-almost-any-app-to-the-sd-card/

My beloved Nexus One ran out of space the other day - it wasn't the first time that it happened to me, but this time, I couldn't find any apps that I want to remove, so the "low storage" error message kept flashing on my face...

Here, I will be listing the steps on how-to install apps on your android to the SD card by default and also moving the previously unmoveable apps to SD.

Please only take the steps below when the normal, conventional way of freeing storage does not help anymore.

1 - Enable USB Debugging

Settings > Applications > Development > USB debugging


2 - Download & Install the Android SDK here.

There are pre-requisites skipped in this step here, they are basically:

  • Download the Java SDK
  • Change your environment variable, path, to include the directory of the java sdk and the android sdk.
  • run adb on command prompt to make sure it works

3 - Open command prompt and type in (with the device plugged-in)

adb devices


4 - Make sure your device shows up under "List of devices attached"

The most common problem is that the adb doesn't return any attached device despite your computer detects your device. This usually meant that the google usb driver haven't install.

a) Download the Google USB Driver via the SDK Manager.


5 - Run the following command to set the default install location to the SD card

adb shell pm setInstallLocation 2

To revert this change, set the 2 to 0 in the above command line.

0 represents your device internal storage
1 represents auto
2 represents external storage - in this case, the SD card



Thats it! Almost all apps that you install now will automatically install to the SD card. You can also move some of the existing apps (that cannot be move previously) to the SD card.

Note: Some apps are probably better leave it in the internal storage, this are:
  • Launcher app
  • Widgets
  • Animated Wallpapers
  • Apps that you might still use when your SD card is mounted to the computer



Cheers!





Tuesday, 3 July 2012

VirtualBox + Lubuntu - proxies, guest additions and customization

Recently, I got to use Linux at work but because all the machines were Windows and I couldn't be bothered to wipe the drive and put linux on, I decided to use VirtualBox to run it in parallel.

I chose a lightweight version of Ubuntu, called Lubuntu. There is another lightweight one called Xubuntu as well, however, from what I have read when comparing those 2, lubuntu seems to use less system resource and maintain its usability.

I'm just going to list all the steps I took to setup proxies, install vbox guest additions and command prompt customizing. This post can serve as a reminder for myself if I ever going to do the same thing again.

My settings in vbox is as follow:

  • Linux | Other
  • 512 MB RAM
  • fixed 12GB VHD


1. Create a file called "95proxies" into /etc/apt/apt.conf.d - for updates in Lubuntu

vi /etc/apt/apt.conf.d/95proxies
Acquire::http::proxy "http://<user>:<password>@<proxy-url>:<port>/";

2. Update packages

sudo apt-get update
sudo apt-get upgrade


3. Install guest additions - copy & paste between Windows and scrolling enabled


sudo /media/[VBOXADDITIONS]/VBoxLinuxAdditions.run


4. Create a share folder between Windows and Lubuntu

Vbox Manager -> Settings -> Shared Folders -> Add



5. Mount the share folder

mount -t vboxsf [share] [mount-point]


6. Auto-mount of the share folder when start-up

vi /etc/fstab
[share]   [mount-point]   vboxsf

OR if it doesn't work, since there was a bug in my version of Lubuntu (12.04):

vi /etc/init.d/rc.local
mount.vboxsf -w [share] [mount-point]

7. Customizing command prompt - editing the bash file
vi ~/.bashrc
## Set the PS1 prompt#

colorsblue='\[\e[0;34m\]'

BLUE='\[\e[1;34m\]'

brown='\[\e[0;33m\]'

cyan='\[\e[0;36m\]'

CYAN='\[\e[1;36m\]'

GREEN_BR='\[\e[1\;32m\]'

green='\[\e[0;32m\]'

GREEN='\[\e[1;32m\]'

magenta='\[\e[0;35m\]'

MAGENTA='\[\e[1;35m\]'

RED_BR='\[\e[1\;31m\]'

red='\[\e[0;31m\]'

RED='\[\e[1;31m\]'

yellow='\[\e[1;33m\]'

NC='\[\e[m\]'

PATH=$PATH:/sbin

GPG_TTY=`tty`

PS1="${red}\t-${cyan}\w${NC}\n${BLUE}\u${NC}@${RED}\h${NC}\` if [[ \$? = 0 ]] ; then echo ${GREEN_BR}\\\>\\\:\\\)${NC}; else echo ${RED_BR}\\\<\\\:\\\(${NC}; fi \`"




alias ls='ls -p'


8. Set up proxy for Internet connections

Right click on Desktop -> Create New... -> Shortcut.
Set up shortcut as follow:
[Desktop Entry]
Encoding=UTF-8
Type=Application
Name=Chromium Browser
Name[en_AU]=Chromium Browser
Icon=chromium-browser
Exec=/usr/bin/chromium-browser --proxy-pac-url="<proxy-pac-url>"
Comment[en_AU]=Web Browser
vi ~/.bashrc
## Set proxy

function proxy(){

 echo -n "username:"

 read -e username

 echo -n "password:"

 read -es password

 export http_proxy="http://$username:$password@<host>:<port>/"

 export HTTP_PROXY="http://$username:$password@<host>:<port>/"

 export https_proxy="http://$username:$password@<host>:<port>/"

 export HTTPS_PROXY="http://$username:$password@<host>:<port>/"

 export ftp_proxy="http://$username:$password@<host>:<port>/"

 export FTP_PROXY="http://$username:$password@<host>:<port>/"

 echo -e "\nProxy environment variable set.\n"

}

function proxyoff(){

 unset username

 unset password

 unset HTTP_PROXY

 unset http_proxy

 unset HTTPS_PROXY

 unset https_proxy

 unset FTP_PROXY

 unset ftp_proxy

 echo -e "\nProxy environment variable removed.\n"

}
To start the proxy, just run "proxy" in the command prompt.
To turn it off, just run "proxyoff"
This way, I don't have to manage the password in 2 locations.



That's it! all done =)

Tuesday, 24 April 2012

Oracle UCM Operators (Idoc Script)

http://docs.oracle.com/cd/E28389_01/doc.1111/e10726/c02_application.htm#i1027623


2.5 Operators

Idoc Script supports several operators.

Section 2.5.1, "Comparison Operators"

Section 2.5.2, "Special String Operators"

Section 2.5.3, "Numeric Operators"

Section 2.5.4, "Boolean Operators"


2.5.1 Comparison Operators

Use the following comparison operators compare the value of two operands and return a true or false value based on the result of the comparison. These operators can be used to compare integers and Boolean values in Idoc Script.

If you are using Idoc Script in an HCSP or HCSF page, you must use special comparison operators. For more information, see Oracle WebCenter Content Developer's Guide for Content Server.


OperatorDescriptionExample
==equality<$if 2 == 3$> evaluates to false
!=inequality<$if 2 != 3$> evaluates to true
<less than<$if 2 < 2$> evaluates to false
<=less than or equal<$if 2 <= 2$> evaluates to true
>greater than<$if 3 > 2$> evaluates to true
>=greater than or equal<$if 3 >= 2$> evaluates to true


These are numeric operators that are useful with strings only in special cases where the string data has some valid numeric meaning, such as dates (which convert to milliseconds when used with the standard comparison operators).

For string concatenation, string inclusion, and simple string comparison, use the Special String Operators.

To perform advanced string operations, use  strEquals, strReplace,  or other string-related global functions.

2.5.2 Special String Operators

Use the following special string operators to concatenate and compare strings:


OperatorDescriptionExample
&The string join operator performs string concatenation. Use this operator to create script that produces Idoc Script for a resource include.
<$"<$include " & VariableInclude & "$>"$>
evaluates to:
<$include VariableName$>
likeThe string comparison operator compares two strings.
  • The first string is compared against the pattern of the second string. (The second string can use asterisk and question mark characters as wildcards.)
  • This operator is not case sensitive.
  • Evaluates to FALSE:
    <$if "cart" like "car"$>
    
  • Evaluates to TRUE:
    <$if "cart" like "car?"$>
    
  • Evaluates to TRUE:
    <$if "carton" like "car*"$>
    
  • Evaluates to TRUE:
    <$if "Carton" like "car*"$>
    
|The string inclusion operator separates multiple options, performing a logical OR function.Evaluates to TRUE:
<$if "car" like "car|truck|van"$>



For example, to determine whether the variable a has the prefix car or contains the substring truck, this expression could be used:



<$if a like "car*|*truck*"$>
Important:
To perform advanced string operations, use strEquals, strReplace, or other string-related global functions. For a list, see "Strings".
The like operator recognizes the following wildcard symbols:



WildcardDescriptionExample
*Matches 0 or more characters.
  • grow* matches growgrowsgrowth, and growing
  • *car matches carscar, and motorcar
  • s*o matches sosolo, and soprano
?Matches exactly one character.
  • grow? matches grows and growl but not growth
  • grow?? matches growth but not grows or growing
  • b?d matches badbedbid, and bud



2.5.3 Numeric Operators

Use the following numeric operators to perform arithmetic operations. These operators are for use on integers evaluating to integers or on floats evaluating to floats.


OperatorDescriptionExample
+Addition operator.
<$a=(b+2)$>
-Subtraction operator.
<$a=(b-2)$>
*Multiplication operator.
<$a=(b*2)$>
/Division operator.
<$a=(b/2)$>
%Modulus operator. Provides the remainder of two values divided into each other.
<$a=(b%2)$>



2.5.4 Boolean Operators

Use the following Boolean operators to perform logical evaluations.


OperatorDescriptionExample
and
  • If both operands have nonzero values or are true, the result is 1.
  • If either operand equals 0 or is false, the result is 0.
<$if 3>2 and 4>3$>
evaluates to 1
or
  • If either operand has a nonzero value or is true, the result is 1.
  • If both operands equal 0 or are false, the result is 0.
<$if 3>2 or 3>4$>
evaluates to 1
not
  • If the operand equals 0 or is false, the result is 1.
  • If the operand has a nonzero value or is true, the result is 0.
<$if not 3=4$>
evaluates to 1


Boolean operators evaluate from left to right. If the value of the first operand is sufficient to determine the result of the operation, the second operand is not evaluated.