View the example

jQuery code used:
$(document).ready(function() {
$('#toggle_control').bind('click', function() {
if ( $('#copy_toggle').is(':hidden') ) {
$("#copy_toggle").slideDown('medium', function() {
});
}
else{
$("#copy_toggle").slideUp('medium', function() {
// Animation complete.
});
}
return false;
});
});

Many new methods of font substitution are coming of the wood work and old methods are now getting a second look.

@font-face method

The @font-face method was added to the CSS2 spec but then not recommended in CSS2.1. However with CSS3 it’s back and supported by most popular modern browsers. Read about @font-face at W3.org.

This method requires the font being loaded on the server and will cause a slight flickering of the font rendering while it is stored in the cache. The plus side of this method is it’s easy to implement and requires no JavaScript.

Here is an example of @font-face being used. Click Here

Sample CSS code used (Note: font is stored on the server)

@font-face {
font-family: 'BrushScript';
src: url('BrushScript.ttf') format("truetypefont");
}
/* for IE */
@font-face {
font-family: 'BrushScript';
src: url(BrushScript.ttf);
}
body {
font-family: 'BrushScript', helvetica; /*degrades to a standard web font if unavailable */
font-size:1em;
}

Cufon JavaScript Method

This currently my personal favorite method. No font is stored on the server and there is no flicker of the font while loading. The wizard also provides many options and settings so you can customize the needs for your site.

Easy to add

Cufon provides a simple method for converting fonts on your local machine into a js file that you include in the header along with the Cufon script. A simple replace call is used to substitute the font. Read more about Cufon here

Example of the Cufon Method »

Example Header Code

<script src="cufon-yui.js" type="text/javascript"></script> <script src="AGaramondPro_400-AGaramondPro_700-AGaramondPro_italic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h1');Cufon.replace('p');</script>

Background Image method

This method is good for replacing a few headers and best method to use with the logo of your site. Detailed px to px cross browser look with the design is needed while the code remains semantic. This method has been implemented in this version of my site since for major section H1 headers and the logo of the site.

XHTML Example Code

<h3 id="Portfolio">Portfolio</h3>

CSS Example Code

h3#Portfolio
{
background:url('/portfolio/2009/gfx/title_portfolio-trans.png') no-repeat;
text-indent: -9999px;
width:229px;
height:61px;
}

This will work with all browsers. A list will be added shortly of the other methods and their support.

Here are few quick steps to turn on PHP5 on your mac. This an easy modification allowing you to work with in your WebServer folder.

Note: To use this method 10.5+ is required.

• With your favorite text editor (I recommend Textmate) open Macintosh HD/private/etc/apache2/httpd.conf. You must allow hidden files to be seem to view and open.
• Once the httpd.conf file has been opened go to line #114 and edit the following #LoadModule php5_module      libexec/apache2/libphp5.so remove the “#” sign and save the file. You will be prompted to enter root password.
• With Terminal open, type the following series of commands, each followed by Return:
  cd /private/etc
sudo cp php.ini.default php.ini
• Now open the file with your text editor.
• Go to line #305 and change “error_reporting = E_ALL & ~E_NOTICE” to error_reporting = “E_ALL” and save the file and enter your root password.
• Open your System Preferences click on Sharing and then turn on Web sharing.

After the above steps have been completed PHP5 will be working with in your WebServer folder located in “Macintosh HD/Library/WebServer/Documents”.

To confirm everything has been configured correct create a php file with the following:

• <?php phpinfo(); ?>
• Save the file with the documents folder as info.php.
• In a browser window go to: http://localhost/info.php and you will see your php settings.

Here is an updated version of the Naked Wordpress theme to support HTML5.

Wordpress Naked has been put together by us as a simple Wordpress theme to assist developers that need to quickly implement a blog using Wordpress but don’t really have the time to spend looking under the hood in any detail or reading documentation when it comes to applying a custom theme (e.g. their clients’ design).

Find out more about the original theme.

Download HTML5 Theme

Here is a download to the HTML 5 Bundle I have started for Textmate. This is my first attempt at creating a bundle from scratch please provide feedback and requests and I will add them.

Download Here

Update 7/19/2009

The bundle has also been uploaded to Github.

View Repository

After messing around with my Hackintosh today I needed to remove some of my kext files in /System/Library/Extentions (S/L/E). I wasn’t in the mood to find an early build of a hackers app I just wanted Terinal su/root access.

Here is an easy method to activate root access in Terminal for Mac OS X 10.5 or later.

1. From the Finder’s Go menu, choose Utilities.
2. Open Directory Utility.
3. Click the lock in the Directory Utility window.
4. Enter an administrator account name and password, then click OK.
5. Choose Enable Root User from the Edit menu.
6. Enter the root password you wish to use in both the Password and Verify fields, then click OK.

Related Links:

A better terminal app

Here is a sample player using HTML 5 (Note this is at a very early stage and only has play/pause functionality).

<div id="myVideoContainer">
<video id="myVideo" src="../videos/WheretheWildThingsAre.mov" autoplay="autoplay">
<p>Sorry Your Browser Doesn't Support HTML 5. Safari 4 will support this video player, download it here</p>
</video>
</div>

Related information:

• YouTube testing with html 5
• Webkit html 5 media support

Last week I completed a email campaign that I was only brought into only to code. I felt that the process followed was generally flawed that the team took. I started with a finalized approved design which I was suppose to code into a mailer. From the beginning I started noticing flaws in the designs and how the design would be translated into many of the the popular web clients of today like Gmail for example.

Often I think people and small teams rush the designs of the mailers and don’t fully understand what it takes to develop and what will be rendered by each client. Most web based email applications won’t properly read divs, background images, or even external style sheets. With these short comings and designers unaware of these limitations or bad and unexpected things can happen.

When creating a mailer its important to first and foremost take your audience into consideration. Are they main using web based clients like gmail, yahoo, etc.? Are the checking there mail on the mobile devices? Or they simple just using a desktop client like Mail (OSX), ThunderBird, or Outlook? All of these and a combination should it most cases be assumed.

Rules of thumb to help achieve the audiences viewing of the mailer

At the of the top of the design provide a link for the subscribers to see a web version. Most mailers these days are filter and end up in junk mail boxes or the software is smart enough to hide the images. Leaving your pain stacking work looking like a blob of random text bits. Having this link at the top will give the user and easy way to view the mailer as it was ment to be presented.

Keep it simple. Since most clients ignore CSS  including background images your going to have to get old school with some tables. By keeping the design simple you will be able to get you message across to the widest audience. I good example of this is UrbanDaddy.com’s mailer(seen below).

Allow the users to easily forward and print the mailer.

• martinott
• simplestation.com
• lachoseinteractive.net
• svnbook.red-bean.com (free book)

I’ll be perfectly honest.. I didn’t know much about Adobe Flex. I knew that it was more or less an all coding method for Flash developers and the early adopters using JS/AJAX really enjoyed working with it. Flex based sites had always impressed me but the idea on how to make them seemed to complex. Since Flash MX had been released I had little experience writing any sort of AS other then animating banners or updating AS for already running sites.

Over the past couple of days I have been messing around with it and am truly having fun writing the code. My main focus for the last few years now has been XHTML/CSS as well as design and with basic understandings of Flash. Moving forward to improve my skill set Flex seems to be a fun tool to learn and a good next step for someone with a similar skill set.

If your interested in playing around with Flex here is a link that really helped me get started Setting up a AS3 Project in Textmate.