Technical

CSS Font-Size: em vs. px vs. pt vs. percent

CSS Font-Size: em vs. px vs. pt vs. percent

One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.

Meet the Units

  1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally,1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

font-size-1

As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.

Em vs. Percent

We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.

In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), youprobably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).

font-size-2

When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.

The Verdict

In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.

The winner: percent (%).

:eq() Selector an jQuery API Documentation / eq() Selector

:eq() Selector : It Select the element at index n within the matched set.

jQuery( “:eq(index)” ) :- index: Zero-based index of the element to match.

jQuery( “:eq(-index)” ) :-     -index: Zero-based index of the element to match, counting backwards from the last element.

jQuery eq() selector is the index-related selectors (:eq():lt():gt():even) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.

Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why$( ".myclass:eq(2)" ) selects the second element in the document with the class myclass, rather than the first. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification.

Prior to jQuery 1.8, the :eq(index) selector did not accept a negative value for index

Example : $( “ul.nav > li:eq( 2 )” ).addClass( “myClass” );

Object Oriented JavaScript – OOPS

Object Oriented JavaScript – OOPS an Introduction :

Object-oriented programming :Object oriented programming is a programming that uses abstraction to create models. It uses several techniques including modularity, polymorphism, and encapsulation.Today, many popular programming languages support object-oriented programming (OOP).

Object oriented programming may be seen as the design of software using a collection of cooperating objects, as compared to a traditional way of programming. It may be seen as a collection of functions, or simply as a list of instructions.
In OOP each object is capable of receiving messages, processing data, and sending messages to other objects. Each object can be viewed as an independent little machine with a distinct role or responsibility.

Object oriented programming is intended to promote greater flexibility and maintainability in programming, and is widely popular in large scale software programming.

   OOP-in-JS

Terminology in OOP:

Class : Defines the characteristics of the Object.

Object : An Instance of a Class.

Property : An Object characteristi.

Method : An Object capability.

Constructor : A method called at the moment of instantiation.

Inheritance : A Class can inherit characteristics from another Class.

Encapsulation : A Class defines only the characteristics of the Object, a method defines only how the method executes.

Abstraction : The conjunction of complex inheritance, methods, properties of an Object must be able to simulate a reality model.

Polymorphism : Different Classes might define the same method or property.

Will write about in detail some other time with the helpful examples on some other day as of now….
I am more excited to go to the high altitude all set to venture ALONE this time and experience bone chilling cold nights, thin air, AMS / Acute Mountain Sickness (The worst place in the world for altitude sickness), sands, mountains, snow, pristine lakes, always seen by the enemy, lots of yak, Kijangs, double humped camels, starry nights, deep blue skies, Royal Enfield ride with my CANON EOS 600D and a full of Photography loaded all the way from Manali to Leh a journey in the highest altitude motorable road in the world crossing the high peaks like ROTHANG Pass, BARALACHA LA, LACHANG LA, TAGLANG LA and also a ride to KARDUNG LA can’t wait Ladhak is calling me again and again ….

One more OS – FirefoxOS, a new mobile operating system

Ooooooooopz …. yes I am right we are getting one more mobile OS “FirefoxOS, a new mobile operating system

Its Powered by the Web.

Now, in July 2013, Its introducing a new product — Firefox OS — based on non-profit principles. It’s the first Web-based operating system for smartphones and it’s designed to give more people access to the Web from more places and in more ways than ever before. Built entirely using open standards, Firefox OS is free from the rules and restrictions of existing proprietary platforms.

Find more here or @  Firefox OS

Install Apache, PHP, APC, & MySQL on Amazon EC2 with Amazon Linux AMI

The following guide is a step by step guide on installing and configuring Apache, PHP (with APC) & MySQL (LAMP Stack) on an Amazon EC2 instance running Amazon Linux AMI.The procedure has been tested on Amazon Linux AMI

1. Install Linux updates, set time zones, followed by GCC and Make

sudo yum -y update
sudo ln -sf /usr/share/zoneinfo/America/Indianapolis \
      /etc/localtime
sudo yum install -y gcc make

 

2. Install PHP and PHP extensions

sudo yum install -y php
sudo yum install -y php-devel php-mysql php-pdo
sudo yum install -y php-pear php-mbstring
sudo pear install Log
sudo yum install -y pcre-devel

 

3. Install Apache httpd

sudo yum -y install httpd
sudo service httpd start

 

4. Install MySQL

sudo yum -y install mysql-server mysql
sudo service mysqld start

 

5. Install PHP APC module

sudo yum -y install httpd-devel
sudo pecl install apc-beta
echo "extension=apc.so" | sudo tee /etc/php.d/apc.ini
Or Simply:
sudo yum install -y php-pecl-apc

 

6. MySQL Configuration

sudo vi /etc/my.cnf
[mysqld]
...
skip-external-locking
long_query_time=1
slow_query_log
slow_query_log_file=/var/log/log-slow-queries.log
log-bin=mysql-bin
server-id= 1
...
[mysqld_safe]
...
myisam_recover_options
...
[mysqld]
...
key_buffer_size = 128M
max_allowed_packet = 3M
table_open_cache = 64
read_buffer_size = 2M
read_rnd_buffer_size = 8M
myisam_sort_buffer_size = 16M
thread_cache_size = 8
query_cache_size= 32M
thread_concurrency = 8
innodb_buffer_pool_size = 128M
innodb_log_file_size = 32M
innodb_additional_mem_pool_size = 8M
innodb_log_buffer_size = 4M
...
Log Slow Queries:
sudo touch /var/log/log-slow-queries.log
sudo chown mysql.mysql /var/log/log-slow-queries.log
sudo /sbin/chkconfig --levels 235 mysqld on
sudo service mysqld start

 

7. PHP Configuration Changes in php.ini

sudo nano /etc/php.ini
expose_php = Off
memory_limit = 128M
date.timezone = America/Indianapolis
Note: Location of error file
/var/log/httpd/error.log

 

8. Auto Start Apache in EC2 Amazon Linux

sudo /sbin/chkconfig --levels 235 httpd on
sudo service httpd start

Twitter bootstrap with Less css framework

  Twitter Bootstrap

is a responsive html5 framework with all features for user interface readily built; Just a UI developer need to add the them and implement his color and other design element, Thus making it easy so a UI developer doesn’t need to worry much on cross browser issues and also no need to worry on screen resolutions or devices or OS as Bootstrap is responsive (Also available for fixed dimensions).

Speaking the true advantage are Bootstrap uses LESS … Lets deviate a bit !! what is less?

LESS

less

Less is The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

I think this is enough for the less for time being we will discuss about less in detail some other time, here Bootstrap is already built over less so no need to worry much on less

Lets get bit more into Bootstrap..

  • Twitter Bootstrap is a toolkit to develop web apps and web sites fast.
  • It includes basic CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc
  • Twitter Bootstrap is created with modern browsers in mind. So, you will find it working perfectly with all the modern versions of Chrome, Firefox, Safari, Opera and Internet Explorer but As Botstrap says ” Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. “

This was a brief intro about the great tech available.. I will write in detail how to work with Bootstrap and Responsive and less in coming weeks, as now i want to make shift of my web to bootstrap first.

You can check out my Bootstrap page at http://www.prasadk.com/bootstrap/

URLs :

http://twitter.github.io/bootstrap/

http://lesscss.org/

Windows 7 for Tethering WiFi (act as a WiFi hotspot)

Option in Windows 7 for Tethering WiFi (act as a WiFi hotspot) to connect your other devices like mobile / tablets to internet

A detailed step-by-step to setup tethering in Windows 7 without any 3rd party software:

  1. From admin command prompt type:
    netsh wlan set hostednetwork mode=allow ssid=mywifinetwork key=mysecretkey
    
  2. Enable new virtual Wi-Fi adapter (it might be disabled upon creation)
  3. From admin command prompt type:
    netsh wlan start hostednetwork
    
  4. From current internet conection adapter share (ICS) to the virtual adapter
  5. Connect from wireless client to virtual SSID. Wi-Fi client gets an auto IP and you’re good to go.

After host computer restart you only need to repeat steps 3 & 5 to be up and running.

As a alternate (If facing any issues) simply you can download Virtual WiFi Router application

CNET URL : http://download.cnet.com/Virtual-WiFi-Router/3000-2651_4-75599199.html

Direct URL : http://www.virtualwifirouter.com/p/downlooad.html

cURL / PHP

cURL is a command line tool for transferring files with URL syntax, supporting FTP, FTPS, HTTP, HTTPS, SCP, SFTP, TFTP, TELNET, DICT, FILE and LDAP. cURL supports HTTPS certificates, HTTP POST, HTTP PUT, FTP uploading, HTTP form based upload, proxies, cookies, user+password authentication (Basic, Digest, NTLM, Negotiate, kerberos…), file transfer resume, proxy tunneling and other useful tricks.

Fetching a web page

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://example.com/");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
?>

Alternative for file_get_contents()

Instead of:

<?php
$file_contents = file_get_contents('http://example.com/');

// display file
echo $file_contents;
?>

Use this:

<?php
$ch = curl_init();
$timeout = 5; // set to zero for no timeout
curl_setopt ($ch, CURLOPT_URL, 'http://example.com');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);

// display file
echo $file_contents;
?>

Otherwise if you are getting some errors with the code above, use this:

<?php
$site_url = 'http://example.com';
$ch = curl_init();
$timeout = 5; // set to zero for no timeout
curl_setopt ($ch, CURLOPT_URL, $site_url);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);

ob_start();
curl_exec($ch);
curl_close($ch);
$file_contents = ob_get_contents();
ob_end_clean();

echo $file_contents;
?>

Getting binary data

Images

This script retrieves a remote image and assigns the binary data to the variable $image, before outputting the image to the browser:

<?php
$image_url = "http://example.com/image.jpg";
$ch = curl_init();
$timeout = 0;
curl_setopt ($ch, CURLOPT_URL, $image_url);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);

// Getting binary data
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);

$image = curl_exec($ch);
curl_close($ch);

// output to browser
header("Content-type: image/jpeg");
print $image;
?>

Alternative for file()

Instead of:

<?php
$lines = file('http://example.com/');

// display file line by line
foreach($lines as $line_num => $line) {
    echo "Line # {$line_num} : ".htmlspecialchars($line)."<br />\n";
}
?>

Use this:

<?php
$ch = curl_init();
$timeout = 5; // set to zero for no timeout
curl_setopt ($ch, CURLOPT_URL, 'http://example.com');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);
$lines = array();
$lines = explode("\n", $file_contents);

// display file line by line
foreach($lines as $line_num => $line) {
    echo "Line # {$line_num} : ".htmlspecialchars($line)."<br />\n";
}
?>

Wrapping it all in an easy class

Use the following class to make reading/saving remote files easy. This class will automatically delete the temp files downloaded at the end of your PHP script.

<?php

class downloader {
    var $tempFolder;
    var $tempFiles = array();

    function __destruct () {
        foreach ($this->tempFiles as $file) {
            unlink($file['temp']);
        }
    }

    function __construct ($temp)
    {
        $this->tempFolder = $temp;
    }

    function get ($url) {
        array_unshift($this->tempFiles, array(
            'extension'=> array_pop(explode('.', $url)),
            'original'=> basename($url),
            'temp'=> $this->tempFolder . md5(microtime()),
        ));
        $ch = curl_init($url);
        $fp = fopen($this->tempFiles[0]['temp'], 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
        return $this->tempFiles[0]['temp'];
    }

    function read ($index = 0) {
        return file_get_contents($this->tempFiles[$index]['temp']);
    }

    function readArray ($index = 0)
    {
        return file($this->tempFiles[$index]['temp']);
    }

    function listFiles () {
        return $this->tempFiles;
    }

    function save ($path, $index = 0) {
        copy($this->tempFiles[$index]['temp'], (is_dir($path) ? $path . $this->tempFiles[$index]['original'] : $path));
    }
}

$d = new downloader('/home/<username>/<temp folder>');

?>

Configuring SSL and HTTPS for your website (Amazon EC2)

A lot of effort had gone into making our website into a HTTPS enabled website. I literally had to screw my ass out. Really a tough job as i had little guidance in setting up the HTTPS on Apache which was running on Amazon EC2. Its actually pretty easy, it was just that I was making a few mistakes which i couldn’t figure out easily. Here it goes
First of all I had bought an SSL certificate from PositiveSSL. I got it for $9 from namecheap.com. It’s worth it. The process as a whole is not very tough. It all depends on the amount of system administration experience that you have.
Coming to the configuration. Am going to assume that you are going to set it up on your Amazon EC2 instance. Anyway that doesn’t make a big difference as the same applies to the web server that you would be configuring.
Set up Apache on your instance.
1. Install apache and mod-ssl
yum install httpd mod_ssl
2. Enable the ports 22 and 443 on your Amazon EC2 instance. Open up the ports for access for 0.0.0.0/0 under security credentials.
Follow the instructions in this post to get your SSL certificate from an SSL provider.
http://wp.me/p1yWAu-3C.
3. Installing the certificate on to your Apache Web server.
3.1 : Copy your certificate file
You will receive an email from your SSL provider (yourdomainname.crt). Open you certificate in some text editor and your certificate will look something like:
—–BEGIN CERTIFICATE—–
MIAGCSqGSIb3DQEHAqCAMIACAQExADALBgkqhkiG9w0BBwGggDCCAAhAF
UbM77e50M63v1Z2A/5O5MA0GCSqGSIb3DQEOBAUAMF8xCzAJBgNlVTMSAw
(…….)
E+cFEpf0WForA+eRP6XraWw8rTN8102zGrcJgg4P6XVS4l39+l5aCEGGbauLP5W6
K99c42ku3QrlX2+KeDi+xBG2cEIsdSiXeQS/16S36ITclu4AADEAAAAAAAAA
—–END CERTIFICATE—–
Copy your Certificate into the directory that you will be using to hold your certificates. In this example we will use /etc/ssl/crt/. Both the public and private key files will already be in this directory. The private key used in the example will be labeled private.key and the public key will be yourdomainname.crt.
Make sure that it’s readable only by root.
3.2 : Install the Intermediate Certificate
You will need to install the chain certificate (intermediates) in order for browsers to trust your certificate. As well as your SSL certificate (yourdomainname.crt) .If you are using Apache you’ll need the following files AddTrustUTNServerCA.crt and PositiveSSLCA.crt certificates and then your key file as well.
You need a bundle file.Create a file say bundle.txt. To do this you will need to open the certificates with a text editor and add both of the certificate texts to that file, first the PositiveSSLCA.crt then the AddTrustUTNServerCA.crt and save this file as bundle.txt
Copy the bundle.txt file to the directory that consists of httpd.conf (/etc/httpd/conf/) (this contains all of the CA certificates in the chain).
4. Configure virtual hosts in httpd.conf
NameVirtualHost 23.21.221.101:443

ServerAdmin webmaster@dummy-host.example.com
DocumentRoot /var/www/html
ServerName www.myexample.com
SSLEngine on
SSLProtocol all -SSLv2
SSLCipherSuite ALL:!ADH:!EXPORT:!SSLv2:RC4+RSA:+HIGH:+MEDIUM
# ErrorLog logs/errorlogs
# CustomLog logs/custom
SSLCertificateFile /etc/ssl/certs/lets/certificate.crt
SSLCertificateKeyFile /home/ec2-user/private.key
# SSLCertificateChainFile /home/ec2-user/PositiveSSLCA2.crt
SSLCACertificateFile /etc/httpd/conf/bundle.txt
SetEnvIf User-Agent “.*MSIE.*” nokeepalive ssl-unclean-shutdown
# CustomLog /usr/local/apache/logs/ssl_request_log \
# “%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \”%r\” %b”

5. Since I have given the name of the files make sure you configure it according to the above configuration file. For readers convenience i’ll list out what each configuration means.
• SSLCertificateFile is the certificate you received through email from SSL provider
• SSLCertificateKeyFile is the private key
• SSLCACertificateFile is the bundle you created
6. Save your httpd.conf file and restart Apache.
7. Pray to God that it must work. I had to figure out so many things. I’ll post them once i recollect these things. It’s been a while since I did this.
8. Make sure mod_ssl is installed. Reflect the changes in /etc/httpd/conf.d/ssl.conf file as well. I mean the path of the configuration of the above parameters.(SSLCertificateFile ,SSLCertificateKeyFile ,SSLCACertificateFile )
A few tips: (Common issues)
1. Make sure hostname configuration is fine
2. Check for iptable rules that may be blocking access
3. Check Amazon security credentials for any denial of access
4. Update your instance. (yum update)
5. Check for resolv.conf, /etc/hosts configuration, /proc/sys/kernel/hostname parameter.
6. check nmap localhost, check if ports 443 and 80 are open.

Getting a new certificate from SSL provider

First of all you need to generate an CSR ( Certificate Signing Request) and a private key for your own Apache Web Server.
The steps to get you SSL certificate are as follows.
openssl req -nodes -newkey rsa:2048 -keyout myserver.key -out server.csr
It’ll ask for the following fields make sure you give the details correctly especially the hostname must be of the format myexample.com
Country Name (2 letter code) [AU]: US
State or Province Name (full name) [Some-State]: Washington
Locality Name (eg, city) []: Seattle
Organization Name (eg, company) [Internet Widgits Pty Ltd]: Herp and Co
Organizational Unit Name (eg, section) []: Herping
Common Name (eg, YOUR name) []: mydomain.com
Email Address []:
A challenge password[]:
An optional company name[]:
This will create a .csr file and a .key file. In this example myserver.key is your private key and server.csr is the Certificate Signing Request file.
Now go to the site where you want to get the SSL certificate from. I chose PositiveSSL. Got one for $9.
Now open the server.csr file and copy its contents. Make sure you copy the entire contents. (including the dashes).
Paste it when you are prompted. Ask the web admin to approve the certificate request when its prompted. You’ll receive the mail and you’ll be getting the certificate, the root certificate and intermediate server certificate as well.
In my next post I’ll talk about installing SSL certificate on to your web server.