Flexbox, you are the next!

Leave a reply

Time has come to get rid of the complexity of layouting with float and position properties, its the turn for flexbox. We are able to create more complex layouts with float, position properties, plus a little bit of javascript. But the complexity to implement it in the wide variety of browsers is also awful. Flexible box or in short, flexbox is the property in CSS which make the layout model much easier.

Technically flexbox is not a new concept, but it has got a remarkable evolution over the past few years. The problem still persist with flexbox is the browser compatibility. With the support of CSS3, flexbox may take some time to get support across browsers; even though if we combine both “old” and “new” flexboxes together, we can accomplish a decent browser support. There are mainly 3 versions:

  • 2009 : display: box; and properties as box-{*}
  • 2011: display: flexbox; and flex() function
  • current: display: flex; and flex-{*}
Version Firefox Chrome Opera Safari IE
New  21+ (-webkit-)  12.10+  11?
Mid  10 (-ms-)
Old  3+ (-moz-)  <21 (-webkit-)  3+ (-webkit)

Compatibility table for support of Flexible Box Layout Module in desktop and mobile browsers.

I. Flexbox Properties:

Let’s have an example:

HTML:

<div class="container">
    <nav class="box1">Box1 contents</nav>
    <article class="box2">Box2 contents</article>
    <aside class="box3">Box3 contents</aside>
</div>

CSS:

.container{ padding: 2em }
.box1, .box2, .box3{ padding: 1em }

 
This snippet doesn’t have any float or position properties. Let’s layout it with flexbox.
 

1. Display Property

For the child elements box1, box2, box3 to arranges inside the container with flexbox, the parent tag need to set the display property.

Version Property Block-level flex Inline-level flex
New display flex inline-flex
Mid display flexbox inline-flexbox
Old display box inline-box
box 1 contents
box 2 contents
box 3 contents

2. Orientation of flexbox axis

Version Property Horizontal Reversed horizontal Vertical Reversed vertical
New flex-direction row row-reverse column column-reverse
Mid flex-direction row row-reverse column column-reverse
Old box-orient
box-direction		 horizontal
normal		 horizontal
reverse		 vertical
normal		 vertical
reverse
box 1 contents
box 2 contents
box 3 contents

3. Sizing

Version Property Value
New flex <number>
Mid flex <number>
Old box-flex <number>
box 1 contents
box 2 contents
box 3 contents

4. Ordering

Version Property Value
New Order <number>
Mid flex-order <number>
Old box-ordinal-group <integer>
box 1 contents
box 2 contents
box 3 contents

5. Horizontal Align

Version Property Start Center End Justify Distribute
New justify-content flex-start center flex-end space-between space-around
Mid flex-pack start center end justify distribute
Old box-pack start center end justify –

Start

box 1 contents
box 2 contents
box 3 contents

Center

box 1 contents
box 2 contents
box 3 contents

End

box 1 contents
box 2 contents
box 3 contents

6. Vertcal Align

Version Property Start Center End Baseline Stretch
New align-items flex-start center flex-end baseline stretch
Mid flex-align start center end baseline stretch
Old box-align start center end baseline stretch

Start

box 1 contents
box 2 contents
box 3 contents

Center

box 1 contents
box 2 contents
box 3 contents

End

box 1 contents
box 2 contents
box 3 contents

Baseline

box 1 contents
box 2 contents
box 3 contents

Stretch

box 1 contents
box 2 contents
box 3 contents

7. Wrapping

Version Property No wrapping Wrapping Reversed wrapping
New flex-wrap nowrap wrap wrap-reverse
Mid flex-wrap nowrap wrap reverse-wrap
Old box-lines single multiple –

II. Holy Grail Layout with Flexbox

One of the difficult problems in CSS – the holy grail layout – can be done amazingly easier with flexbox method. Here is a sample (with good browser compatibility).

HTML:

<header>Header</header>
<div class="container">
    <article class="box1">
        Article contents<br/ >( Box 1 )
    </article>
    <nav class="box2">
        Navbar contents<br/ >( Box 2 )
    </nav>
    <aside class="box3">
        Sidebar contents<br/ >( Box 3 )
    </aside>
</div>
<footer>Footer</footer>


*{
	margin: 0;
	padding: 0;
}
body{
	padding: 2em;
	background-color: #6D899F;
}
header, footer{
	background-color: #FFFFFF;
	padding: 1em;
}
.container{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
  
	width: 100%;
}
.box1{
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
  
	-webkit-box-flex: 3;
	-moz-box-flex: 3;	
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;
  
	background-color: #BCD39B;
}
.box2{
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
  
	-webkit-box-flex: 1;
	-moz-box-flex: 1;	
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
  
	background-color: #CE9B64;
}
.box3{
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
	-ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;
  
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
  
	background-color: #62626D;
}
.box1, .box2, .box3{
	padding: 1em;
}

/* mobile layout */
@media (max-width: 480px){
	.container{
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
  
		width: 100%;
  
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
                -ms-flex-orient: vertical;
                -webkit-orient: vertical;
                orient: vertical;
	}
	.box2{
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;	}
	.box1{
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
	.box3{
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;	
        }
}

 

Check out this Pen!

So, Flexbox, you are the next!

Setting up Virtual Hosts in Apache

Leave a reply

I have a Windows7 PC with XAMPP installed in it. Whenever I need to setup multiple sites in my machine, I used to put the site folders under C:\xampp\htdocs\ folder, which is the default ‘localhost‘ directory. The reason is that dynamically linked files need a host to run perfectly.

An alternative way or the perfect solution to this method is to use the Virtual Hosts. Through this way we are able to make virtual hosts irrespective of the location of working directory of the website. In simple words, we don’t need to put all the website files to default location of localhost directory (C:\xampp\htdocs\).

Virtual host is actually localhost itself, but with a different alias. Every virtual host points to local IP, i.e., 127.0.0.1. The simple way to setup virtual hosts for multiple sites for the Apache server in xampp is described below:

  1. Stop the apache service from xampp control panel.
  2. Open file C:\xampp\apache\conf\extra\httpd-vhosts.conf with a text editor.
  3. Uncomment or remove the hash of line 19 “# NameVirtualHost *:80“. So, we will get, 
    NameVirtualHost *:80
  4. Concatenate the following snippet at the end of the file. This will help you to access ‘localhost’ all time. 
    <VirtualHost *>
    ServerAdmin admin@localhost.com
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
    ServerAlias localhost
    <Directory "C:/xampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
  5. For any additional virtual host, add the code to the bottom of the above file. For example, I want to setup a virtual host ‘testhost’ at D:\websites\ 
    <VirtualHost *>
    ServerAdmin admin@localhost.com
    DocumentRoot "D:\website"
    ServerName testhost
    ServerAlias testhost
    <Directory "D:\website">
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

    Don’t forget to save the httpd-vhosts.conf file.

  6. Now we have to set the IP for virtual host. For that, open Windows hosts file (C:\Windows\System32\drivers\etc\hosts) with a text editor.
  7. Find the following lines in hosts file: 
    # localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost

    add the virtual host ip as same as localhost after that line.

    # localhost name resolution is handled within DNS itself.
	127.0.0.1       localhost
	127.0.0.1       testhost #this is the virtual host name</pre>
  8. Restart Apache and type ‘testhost‘ in addressbar of browser. You can see your website running in the new virtual host!

Awesome Geometric Patterns Using Matlab

Leave a reply

Do you think it is difficult to make 3 dimensional patterns like this one? then you are wrong. Its absolutely not!

The basic line pattern of this chess pattern is as shown below:

Such line patterns can be easily generated using this simple Matlab script:

function pattern(angle)
lower = 2;
upper = 12;
stepvalue = 0.2;
lastindex = (upper-lower) * (1/stepvalue) + 1;
mid = ceil(lastindex/2);
x = [lower:stepvalue:upper];
line1 = tand(angle)*x;
line2 = tand(180-angle)*x + line1(lastindex)+line1(1);
plot(x,line1,x,line2);
for i = 1:(mid-1)
hold all
plot([x(i),x(mid+i)],[line1(i),line2(mid+i)]);
hold all
plot([x(i),x(mid-i)],[line1(i),line2(mid-i)]);
hold all
plot([x((mid*2)-i),x(mid+i)],[line1((mid*2)-i),line2(mid+i)]);
hold all
plot([x((mid*2)-i),x(mid-i)],[line1((mid*2)-i),line2(mid-i)]);
end

daspect([1,1,1]);
set(gca,'XTick',[0:1:(upper+2)]);
set(gca,'YTick',[0:1:line1(lastindex)+1]);
set(gca,'XLim',[0 (upper+2)]);
set(gca,'YLim',[0 line1(lastindex)+1]);
set(findobj('Type','line'),'Color','black');
end

Run this script as:


>>pattern( angle_value )

For example,


>>pattern(45)

This will generate the pattern shown below:

You can also generate colorful thread patterns using this script! Choose an angle value between 90 to 180 degree or between 270 to 360 degree, which will generate different patterns according to the angle input.

For example,


>>pattern(145)

Generate the following multicolor pattern:

Isn’t it really cool?

Python script to find the current External IP

1 Reply

Here is a simple python program for finding the current external IP address.

import httplib 
import string

conn = httplib.HTTPConnection("checkip.dyndns.org") 
conn.request("GET","/index.html")
r1 = conn.getresponse() 
conn.close() 
if r1.status == 200:
   data1 = r1.read() 
else:
   print 'Error connecting to the server!! Check your internet connection'
   exit() 
startstr = string.find(data1,': ')+2 
endstr = string.find(data1,'&lt;/b') 
print data1[startstr:endstr]