Enable keep-alive in Apache

What is keep alive?

keep-alive-enabled

Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request. More simply put, it is a communication between the web server and the web browser that says “you can grab more than just one file at a time”. Keep alive is also known as a persistant connection.

– Source

Advantages of KeepAlive

  • Improves website speed: It reduces latency associated with HTTP transfers and delivers a better user experience.
  • Reduces CPU usage: On the server side enabling KeepAlive reduces CPU usage. Consider that a typical web page has dozens of different files such as images, stylesheets, javascript files etc. If KeepAlive is disabled a separate connection must be made for each of those files. Creating and closing connections has an overhead and doing it for every single file wastes CPU time.

Disadvantages of Keepalive

  • Increases memory usage: Enabling KeepAlive  increases memory usage on the server. Apache processes have to keep connections open waiting for new requests from established connections. While they are waiting they are occupying RAM that could be used to service other clients. If you turn off KeepAlive fewer apache processes will remain active. This will lower memory usage and allow Apache to serve more users.

Source

Edit httpd.conf.

vi /etc/httpd/conf/httpd.conf

Edit the following section – KeepAlive On.

#
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#
KeepAlive On

#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
#
MaxKeepAliveRequests 100

#
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
#
KeepAliveTimeout 100

Restart httpd.

/etc/init.d/httpd restart

CSS Basic Template

Here’s a basic CSS template that you can use. There’s a header, a footer, a left side and a right side.

You need to create an index.html and mystyle.css file. Place them in the same directory.

css_example

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<title>CSS Template</title>
</head>
<body id="backdrop">
<div id="container">
 <div id="header">
 <center>Header</center>
 </div>
 <div id="leftBar">
 <center>Left Side</center>
 </div>
 <div id="maincontent">
 <center>Main Content</center>
 </div>
 <div id="rightBar">
 <center>Right Side</center>
 </div>
 <div id="footer">
 <center>Footer</center>
 </div>
</div>
</body>
</html>

mystyle.css

@charset "UTF-8";
 /* CSS Document */
#backdrop {
     background-color:#333;
 }
#container {
   margin:auto;
   width: 100%;
   background: #ffffff;
 }
#header {
   background: #90F;
 }
#leftBar {
   float: left;
   width: 20%;
   background: #999;
 }
#maincontent {
   float:left;
   width:60%;
   background-color: #FF9;
 }
#rightBar {
   float:right;
   width: 20%;
   background: #999;
 }
#footer {
   clear:both;
   background:#90F;
 }

Google: Web Fonts

Are you still limiting the type of font on your webpage? Let me introduce you to Google Web Fonts.

There are three simple steps to follow.

  1. Choose your font
  2. Add the font API code between <head></head>
  3. Add CSS code

I went ahead and choose Stardos Stencil for this example.

I added the following code between <head></head>.

 <link href='http://fonts.googleapis.com/css?family=Stardos+Stencil&v1' rel='stylesheet' type='text/css'>
Then I added the following CSS code between <style></style>.
body {
  font-family: 'Stardos Stencil', arial, serif;
  font-size:30px;
}
font-stardos
You can see a working live example by clicking HERE. Feel free to view the source code.

Eye Drawing

I never thought that I’d draw anything in my life, but I decided today to pick up a pencil and try to draw an eye. I think it turned out pretty good considering I have never drawn a thing in my life. I hope I can make the time to draw more in the future.

I have a whole new respect for people that can draw.

This is definitely a work in progress.

My first eye attempt:

My second eye attempt:

YouTube Embed – iPhone & iPad Problem

Have you noticed a big black border around your videos when you embed them into your website and are viewing them on an iPhone or iPad device? So have I. This seems to be an HTML5 issue when being viewed only on mobile Safari browsers. Again, you will only notice the difference when viewed with an iPhone or iPad device. It will look normal otherwise.

NEW Code:

<iframe title=”YouTube video player” width=”560″ height=”349″ src=”http://www.youtube.com/embed/tPZfa7bZzF4?rel=0″ frameborder=”0″ allowfullscreen></iframe>

 

OLD Code:
<object width=”560″ height=”349″><param name=”movie” value=”http://www.youtube.com/v/tPZfa7bZzF4?fs=1&amp;hl=en_US&amp;rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/tPZfa7bZzF4?fs=1&amp;hl=en_US&amp;rel=0″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”560″ height=”349″></embed></object>


Here’s a few iPhone screen shots to show you the difference.

 

In other words, make sure to check the “Use old embed code” if you don’t want that big black border around your video.

 

 

This is hopefully a temporary solution until Google or mobile Safari figure it out.