Add an alternative image source for broken images
Awesome hack Show archive.org snapshot by Tim VanFosson Show archive.org snapshot :
<img src="some.jpg" onerror="this.src='alternative.jpg'" />
Related cards:
An Introduction to Sending HTML Email for Web Developers
A comprehensive introduction to sending HTML emails.
Intro:
HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your...
Auto-generating plain-text bodies for HTML e-mails in Rails apps
When building an application that sends e-mails to users, you want to avoid those e-mails from being classified as spam. Most obvious scoring issues will not be relevant to you because you are not a spammer.
However, your application must do one ...
Declare different CSS background-images for different locales
If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this easily by using the lang attribute in your views (ERB):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%...
Setting expiry dates for images, JavaScript and CSS
When deploying Rails applications you might have noticed that JS and CSS are not cached by all browsers.
In order to force Apache to add expiry dates to its response, add the attached .htaccess to the public directory. This will add a header su...
Defining new elements for your HTML document
Browsers come with a set of built-in elements like <p> or <input>. When we need a new component not covered by that, we often build it from <div> and <span> tags. An alternative is to introduce a new element, like <my-element>.
When a b...
MailStyle: A HTML Email Plugin for Ruby on Rails | Purify Blog
MailStyle allows you to write the css for your html emails as you normally would, then writes the styles inline when you send your emails. It also makes sure that your image paths are absolute rather than relative.
How to embed images in higher resolutions for printing
When you print out a HTML pages, all raster images (like PNGs) will appear aliased. This is because a printer's resolution is usually much higher than that of a computer screen.
If an image absolutely must look awesome when printed, a solution is...
SlickMap CSS — A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.
Semantic markup standard for search engines
If you would like to enrich your website with semantic markup like contact data, places or events you should have a look at schema.org. "Search engines including Bing, Google and Yahoo! rely on this markup to improve the disp...
Optimizing images for the web
For webpages to load fast it's recommended to optimize images. Ideally an image's file size should be as small as possible while still being of decent quality. This card demonstrates two command line tools for image optimization
Use identify to...