CSS line-height units

In CSS, you can specify line-height of text that span multiple lines. Though you can specify this in pixels or other units, you should specify them without any units so it becomes a fraction or percentage of font size.

Example:

If you have font size set to 12 px and your line height is set to 18 px, you can convert your line height to 1.5 (18px/12px = 1.5). This way, if you font size changes or if you use a different font, the line height will adjust proportionally.

Website Design for Internationalization

When designing a website, it’s easy to forget about users from other countries who may want to view your website in another language by translating it with, say, Google Translate. That’s why, it’s best to design your pages in such a way that when text becomes longer or shorter, your pages won’t break. Usually your content area is safe. But, your header and navigation areas can easily break if you design them to be fixed width.

Tip: always use flexible width for text that may expand or collapse when translated into a different language.

HTML Email Tips

Creating HTML emails is a pain in the ass! It’s much worse than just trying to get your website to look right in all the browsers. Here are some things I learned that can save you some time.

  • You must specify line-height explicitly.
  • Use Premailer to optimize html email code (make CSS inline, changes relative links to absolute links, etc)
  • If using CSS, make it all inline
  • All links must be absolute to a file hosted online
  • Background images don’t work in CSS and aren’t reliable in HTML. For more consistent results, don’t use them.
  • For images <img> tags in HTML tables, set their display to block so that there isn’t any white space around them
  • For tables, set border-spacing: 0 to remove whitespace
  • For table cells <td>, set their padding: 0 to remove whitespace
  • Use HTML table instead of CSS  for spacing and layout
  • Use http://www.putsmail.com/ to test sending an HTML email to yourself or someone else
  • Some HTML email boilerplaters
  • For fonts, use font-family: ‘Open Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, sans-serif;

The above font stack means the following:
– Email clients will use Open Sans font if they can load it from the internet.
– Email clients that only use native fonts (there are several such clients in popular use) will use one of these equivalent fonts: Lucida Grande (Mac) or Lucida Sans Unicode (PC).
– Extremely old email clients (that don’t have the common default fonts) will use whatever sans-serif font is available to them. Get the Open Sans font using the following

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
</style>

Simple Ajax Using jQuery

Here’s a simple example of adding AJAX functionality to you website using jQuery.

[cc lang=”javascript”]

$(document).ready(function() {
$.ajax({
type: “GET”,
url: “http://www.somedomain.com/path/to/script.php”,
error: function () {
// do something
},
success: function(data, textStatus, jqXHR) {
console.log(data);
// do something
}
});
});

[/cc]

Since the call to http://www.somedomain.com/path/to/script.php happens behind the scenes, use Firebug’s Network tab to see what the response is from that call.

To learn more about the features included in jQuery’s AJAX functionality, visit

http://api.jquery.com/jQuery.ajax/

Regular Expression Text Editors for Developers

I’ve been looking for a lightweight, free text editor with strong regular expression capabilities. While NotePad++ has a lot of nice features, regular expressions is not one of them. Here is a list of various free text editors for Windows:

  • Notepad RE
  • Programmer’s Notepad
  • Notepad++
  • EditPad Lite 7
  • Zeus Lite
  • jEdit
The best one for regular expressions is jEdit!
UPDATE: Sublime Text 2 is way better!

Website Uptime Monitoring

Many hosting services say they guarantee 99% uptime. But how would you really know without checking your site every often. Pingdom is a popular web service that allows you to automate this by telling it to ping your website every specified interval (e.g. 1 minute). Based on certain settings, you can have it notify you when your site is down. You can give it a URL to a page to ping. But, don’t give it your home page since that would inflate your Google Analytics (or other statistics software) home page visit count. Instead, specify a URL to a unlinked page like http://www.yoursite.com/pingtest.htm

 

Easily Parse HTML Using Simple PHP DOM Parser

Back in the day (a few years ago), if I needed to parse content from an HTML source, I’d write a script that would search for tokens / identifiers in the code to mark the start and end points and then use string manipulation functions to extract what I’d need. Now, a much easier way is to use Simple PHP DOM Parser which lets you select elements jQuery style and process them easily in PHP. Here’s an example from their website:

[cc lang=”php”]
// Create DOM from URL
$html = file_get_html(‘http://slashdot.org/’);

// Find all article blocks
foreach($html->find(‘div.article’) as $article) {
$item[‘title’] = $article->find(‘div.title’, 0)->plaintext;
$item[‘intro’] = $article->find(‘div.intro’, 0)->plaintext;
$item[‘details’] = $article->find(‘div.details’, 0)->plaintext;
$articles[] = $item;
}

print_r($articles);
[/cc]

Light Bulb Comparison

Recently, I hired some people to install recessed lights in my home. Unfortunately, with so many types of light bulbs available, it was quite confusing trying to find which lights I should get. The small GU10 lights bulbs were great as spot lights for the bathroom and kitchen / dining areas. Following is a comparison of the 3 main types of light bulbs available and their characteristics:

Continue reading Light Bulb Comparison

Wrap Long Lines of Text

If you have pasted some text into a web page and it doesn’t wrap, here’s one way to fix that.

[cc lang=”css”]
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}[/cc]