Automatic Browser Protocol Detection

When designing websites, you normally don’t want to hard code any link or references to files. For example, if you reference an image, you should do so as

[cc lang=”html”]/images/header.jpg[/cc]

instead of

[cc lang=”html”]http://www.mysite.com/images/header.jpg[/cc] Read More

Improve Website Performance Using a CDN (Content Delivery Network)

If you’re a local business targeting a local geographic area, it may not matter much. But, if many of your customers come from different parts of the world, you can improve website performance by using a CDN (Content Delivery Network). Basically, website assets like images and videos can be referenced in your code to come from a CDN instead of the same server hosting your web pages. If a user is viewing your website from the US, then the website’s assets will be downloaded from a fast server near the US. Similarly, is a user is viewing your website from Europe, then the website’s assets will be download from a fast server near Europe. Though CDNs used to be expensive, they’re cheap now. Amazon offers a cheap and easy-to-use CDN called CloudFront where you pay per use.  Here’s one way to set it up: Read More

eBay / eCommerce Selling Tips

Here are some tips I picked up while experimenting with selling physical goods online and on eBay.

  • Include value-added items for free
    For example, if you’re selling something that requires batteries and your competitors say “batteries not included”, sell yours with batteries INCLUDED. You can buy batteries two AAA Duracell batteries in bulk online for $0.28 each including shipping. That’s practically free and will save your customers the hassle of having to look for or buy batteries.
    Example 2,  if you’re selling kites, write a tips and tricks guide and save it in PDF format to email to your customers as a free digital download. This way you don’t have to waste paper and ink printing it and extra shipping costs due to a heavier weight.  Then, promote it as a free value-added item.
  • Offer a variety of combinations
    For example, if your’re selling batteries, don’t just sell one. Sell packs of 2, 4, 6, 10, 20, etc.  Of course, the bigger the set, the cheaper you sell for. And that’s OK. It never hurts to offer a wide variety of packages. Just don’t go crazy like they do in Asia where you they offer you so many options you can’t never make up your mind. Read More

Specifying CSS color with alpha transparency / opacity

Say you want to set the background color of something to black. In CSS, you might write something like:

[cc lang=”css”]background-color: #000000;[/cc]

But, what if you wanted the color to be less dark while showing whatever is underneath it like what you’d get by specifying 50% opacity in Photoshop. To do that, do the following:

[cc lang=”css”]background-color: rgba(0, 0, 0, 0.5);[/cc]

The first 3 parameters are the red, green and blue values and the fourth is the alpha transparency from 0 to 1.

Creating CSS 3 Drop Shadows for All Browsers

To add a drop shadow to an element using CSS, just add the following code to your CSS
[cc lang=”css”] .shadow {
-moz-box-shadow: 3px 3px 4px #000; // for firefox
-webkit-box-shadow: 3px 3px 4px #000; // for chrome and safari
box-shadow: 3px 3px 4px #000; // for CSS3-supported browsers
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);/* For IE 5.5 – 7 */
}
[/cc]

If a browser doesn’t support drop shadows, it just won’t show them.

To change the direction and size and opacity of the drop shadow, tweak the values. Learn more at http://www.css3.info/preview/box-shadow/

Center Align HTML Elements

Here are some different way to horizontally center HTML elements:

<div style=”margin: 0 auto; width:500px;  height: 500px;”> some text </div>

The div is centered but the text within it isn’t.

<div style=”margin: 0 auto; text-align: center; width:500px;  height: 500px; “>some text </div>

The div and the text within it are centered. Read More

Creating CSS3 Gradients for All Browsers

To add a gradient to an element using CSS, just add the following code to your CSS

[cc lang=”css”] background: #dcd9d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dbd8d0′, endColorstr=’#f4f3f1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#dbd8d0), to(#f4f3f1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #dbd8d0, #f4f3f1); /* for firefox 3.6+ */
[/cc]

If a browser doesn’t support gradients, it will just display the background color.

To change the direction and other values of the gradient, check out http://webdesignerwall.com/tutorials/cross-browser-css-gradient.

Creating CSS3 Rounded Corners For All Browsers

To add rounded corners to an element using CSS, just add the following code to your CSS
[cc lang=”css”]/* 4 rounded corners */
-webkit-border-radius: 10px; // for Safari and Chrome browsers
-khtml-border-radius: 10px; // for Konqueror browser
-moz-border-radius: 10px; // for Firefox browser
border-radius: 10px; // for browsers that support CSS 3
[/cc] Of course, change the values (10px) to whatever value you want to change the corner radius.

If a browser doesn’t support rounded corners, it will just show square corners.

For more information, visit http://www.css3.info/preview/rounded-border/

Some of my favorite quotes

Many of life’s failures are people who did not realize how close they were to success when they gave up.

Thomas A. Edison

If you want to increase your success rate just double your failure rate.

Tom Watson

You must be the change you wish to see in the world.

Mahatma Ghandi

Read More

Free Tech & Business Books

Borders Books has gone out of business. The ebook revolution is here. If you read technology and business books like myself, you’ll be happy to know that you can access a lot of free, new books online at Safari / ProQuest. The catch is you need to access the site as a member of your local library.

For the San Francisco Public Library, the link is at

http://sfpl.org/index.php?pg=2000005001

 

Read More