Author: Abdullah Yahya

Easily Share Code with Pastebin

I recently needed to share some code with a colleague while making it easy for him to read it all color-coded and properly indented. I tried out Pastebin and that seemed to be really easy and worked very well. Other options would include creating a diff file and sending that to other people who can then view the changes using a diff viewer. Or, committing changes to a versioning system (SVN/GIT)  and letting others do an update to merge any changes.

Modernizr: Use HTML 5 and CSS 3 with Progressive Enhancement

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.

Inline VS Block Elements and Spacing (Padding, Margin, etc)

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.

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

jQuery.ajax()

▲