Abdullah Yahya

Recently, I needed to create a dropdown menu using CSS. It was a pretty tricky menu since it contained convex and concave rounded corners and drop shadows. I wanted to do with a few images as possible and in a flexible way that display correctly regardless of font size, family or language. I used the CSS “border-imge” feature which worked great in modern browsers like Firefox and Chrome but IE 9 doesn’t support “border-image”. To accommodate IE users, I used Modernizr to detect whether a browser supported “border-image” or not and if not, display a different, simpler drop-down menu without fancy rounded corners. I think I’m going to have to add Modernizr to my toolset.

http://www.modernizr.com/

One caveat though is Modernizr depends on Javascript so if it’s disabled, Modernizr won’t be able to help you modernize your website.

Changing spacing (padding, margin, height, width, etc) for inline elements can be tricky. Here’s a nice explanation of the differences and how to get inline elements to display as block elements.

http://www.maxdesign.com.au/articles/inline/

In addition to changing inline elements to display:block and floating them (e.g. float: left), you can use display: inline-block.

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.

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.

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
  • http://www.emailology.org/#1
  • http://htmlemailboilerplate.com/
• 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>

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

jQuery.ajax()

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

 

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]

Many websites uses gradients (the blending of colors from one color to another) to create nice visual effects. Sometimes, it’s not easy find what colors to fade to. I came across this web site that fixes that problem. Check it out.

http://0to255.com/