Author: Abdullah Yahya

Many developers install virtual machines on their local development machines in order to test their web pages in different versions of IE. On your local machine, you may run a local server and test pages on localhost (http://localhost). If you’ve installed VirtualBox and a VM like Win 7 with IE 8, then you’ll probably want to be able to open IE 8 in that VM and go to localhost to see your pages. The default Network Adapter settings in VirtualBox is NAT as shown below.

While you’ll be able to access pages on the internet like www.google.com, you won’t be able to go to localhost to see pages on your host machine. One way to solve this is by editing your host file in your VM to point to the IP address of your host. On your host machine, open a command prompt and enter ipconfig to get your host machine’s IP address.

Continue reading Virtual Machine / Host File Settings to Test Web Pages Served on Host Machine

Microsoft has a website for developers to download free virtual machines containing various versions of IE on different versions of Windows for testing purposes. You can access the downloads at

http://www.modern.ie/en-us/virtualization-tools#downloads

Every now and then you may come across a design that calls for double borders around an element. The “border” CSS property only gives you one border. Instead of wrapping your element in a div and applying another “border” property to it to give the effect of two borders, you can use the “box-shadow” CSS property and setting the thickness of one border to be larger than the other. Copy and paste the code below and adjust accordingly.
[cc lang=”css”]
box-shadow: 0 0 0 1px #ededed, 0 0 0 2px #dfdfdf;
[/cc]
Note: The “box-shadow” property doesn’t work in IE 8.

There are two jokes in the web design community. The first one goes like this:

 A web designer walks into a bar and immediately leaves in disgust upon noticing all of the tables.

HTML Email.

Basically, HTML emails are a b@#4ch!  If you want your fonts to look as you’d expect in your HTML emails, use one of the following.

Sometimes you may need a layout that calls for fixed width content but a fluid background. You can accomplish this with multiple divs or, if you use the calc function, you can just use one div or element, as exemplified below.

[cc lang=”html”]

[/cc]

[cc lang=”css”]
div.section {
width: 200px;
padding: 0 calc(50% – 100px);
background-color: blue;
color: white;
}
[/cc]

See the demo at jsfiddle.

When you want to make rounded corners on divs using CSS, all you have to do is specify a CSS border-radius style to the div, e.g.

[cc lang=”html”]

[/cc]

However, if you want this to work on a table element, you need to add overflow: hidden, i.e.

[cc lang=”html”]

[/cc]

Sometimes you may come across a situation where you need to keep typing the same message over and over again like when you’re replying to customer emails. Most people would save different messages in a text editor like Notepad and use copy and paste to avoid having to retype their messages. However, there’s an even easier way using a Windows program called AutoHotKey. With AutoHotKey, you won’t have to switch windows and copy and paste text. You can create a simple script in a text file and assign it to a certain key and when you click on the key (or combination of keys), the text you saved will be written to where your cursor is (in a text area). Here’s an example script in a file called AutoHotKey.ahk in my Documents folder:

#F1::
Send Thank you for your order. {Enter} Please reply indicating which two kites colors you want. We have blue kites, red kites, and purple kites.
return

Continue reading Canned Messages Using AutoHotKey

Every now and then I need to delete a bunch of files. I don’t do this very often so sometimes I wonder whether my deletion will accidentally delete more files than I’d like. One way to preview which files will get deleted is by echoing your command, e.g.

echo rm -rf *.txt

echo rm -rf *

Here’s an easy way to remove the background of an image if the background is a solid color.

1. Click the Background Eraser tool
2. Make sure Sampling: Background Swatch is selected
3. Set the background color to the color of the background. In this case, it’s white.
4. Adjust the size of your brush and click away the background.

Let’s face it. The biggest loads and cause for slow performance of most websites comes from images. While there are many projects that offer automated ways to optimize and process CSS like Sass and Less, these optimizations result in a much smaller performance gain compared to what you get from optimized images. The problem with optimizing images is finding a balance between optimization and maintainability. You want to use sprites to minimize the number of requests but you want to reuse images in multiple pages to simplify maintenance (not have multiple copies of the same image). Assuming that most people view 2 or 3 pages per website during any visit, following is a proposal for an image optimization algorithm. This algorithm would generate two types of image sprites as follows:

• global.png / global.jpg (for images that appear in all pages, e.g. in the header and footer like the website logo)
• page-path.png /page-path.jpg (for images that appear in a single page, e.g. about-us.png, about-us.jpg, products-computers.png, products-tvs.jpg, etc)

If a web page is at the URL www.somedomain.com/products/computers/index.html, then the sprite for that page would have the file name products-computers.png and/or products-computers.jpg (slashes are converted into dashes). Continue reading Website Image Optimizer / Pre (post?) Processor