@font-face CSS3

While creating my site, I decided to implement my own font, one that is not a generic browser or system font. To achieve this, I decided to use the new CSS3 @font-face property. The simple syntax is as follows:

@font-face {
font-family: 'elanio';
src: url('elanio.eot?') format('tryetype'),

This is great syntax, but I was not done yet. While this will work, it is not ironclad cross browser compliant. Each browser will only recognize certain font types, so you much create backup syntax and fall backs. Take a look at the following:

@font-face {
  font-family: 'Elanio Bro';
  src: url('ElanioBro.eot?') format('eot'), url('ElanioBro.woff') format('woff'), url('ElanioBro.ttf') format('truetype');
}

Let’s take a look at what is going on here: src: url(‘ElanioBro.eot?’) this question mark ‘?’ at the end simply forces a no 404 page in IE. With out it, IE would request the source file as such: …elaniobro.eot’)%20format(‘… which would result in a 404.

This method is credited to the same guy behind font squirrel and via Paul Irish’s blog

Posted: May 31st, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

BGB hockey site launches

I put together a new website for my hockey team BGB. I was recruited to play for a new team at Chelsea Piers in New York. It is a division IV league with a high tempo and fast pace!

Seeing as our team is in its infancy (compared to most of the other teams in the league who have been playing together for 5+ years), I decided to put a site together to help build camaraderie, through player profiles and an aggregate of news, pictures, videos and thoughts.

Posted: March 25th, 2011
Categories: 9-5
Tags: ,
Comments: No Comments.

Something Cool

A good friend of mine, whom I have known for many years is putting together a movie that is going to be ‘Something Cool’. In an effort to help support him I have posted a widget here on my blog to help facilitate more financial support and success.

Check out the video which sheds more light on what this movie is all about.

Posted: March 19th, 2011
Categories: Design
Tags:
Comments: No Comments.

Google maps longitude & latitude coordinates

While working on my site, I decided to incorporate Google maps into my biography page to enhance the appearance as well as to provide a little bit of interactivity. I wanted to customize the appearance, i.e. the markers and the the accompanying popout.

To achieve this I had to first figure out the longitude and latitude in which to input into the map function that is called by the Google API. To do this, I simply went to www.maps.google.com searched for a location I wished to plot and put the following in the URL address bar and hit enter. This created a JavaScript alert with the longitudinal coordinates I needed to place markers on the map.


javascript:void(prompt('',gApplication.getMap().getCenter()));

Posted: February 19th, 2011
Categories: tutorial
Tags:
Comments: No Comments.

Google New York Engineering Open House

Tonight I had the privileged of being one of the select few who was able to secure an invite to the first, of what I hope to be many, installments of an open house at Google Headquarters in New York City.

Highlighting how Front End Engineering and Engineers are impacting some of Google’s most exciting projects was the theme for this first session. Speaking tonight were:

  • Tim Dierks, Software Engineer
  • Fuzzy Khosrowshahi, Director, Software Engineering
  • David Nagle, Director, Software Engineering
  • Elizabeth Hamon Reid, Director, Engineering

Biography backgrounds on the speakers above can be found here.

While I had plenty of good food and drinks at their famous cafeteria, I also came away with insight about some obscure labs programs. While waiting inline to grab some falaffel and a gyro, I met with and talked with a Google employee who enthusiastically turned me onto closure, a Google JavaScript compiler. Here is a brief synopsis of what closure is from their website:

“The Closure tools help developers to build rich web applications with JavaScript that is both powerful and efficient.”

I will give this a whirl and reply with some of my thoughts in a future post.

Posted: February 3rd, 2011
Categories: code
Tags: , , , ,
Comments: No Comments.

Overriding inline CSS

While working on the MLS (Major League Soccer) redesign, I came across an instance where I needed to override an inline style. I did not think this was possible at first, but after doing some research and googling, I came up with this solution. It uses CSS selectors which are very powerful and allow you to target specific elements on a page regardless of an ‘id’ or ‘class’.

Here is an example of inline styles being applied to an element on the page:

<div class="example-page">
    <div class="example-content">
        <div id="picture" style="position:absolute; margin:100px">
            <img src="/img/example.png" height="100" width="100"/>
        </div>
    </div>
</div>


Here is how you can override the inline style:

#picture[style]
{
    position:relative;
    margin:0;
}

Posted: February 2nd, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

jQuery Error ‘expected identifier, string or number’ in IE7

While working on a site today, I came across an issue where some of my jQuery code was not functioning properly. The code in question was working properly in all the browsers sans IE7. (FireFox, IE8, Chrome, Safari on both mac and PC)

Having to debug it as soon as possible, as it was on a live site, I came across a solution. Take a look at the code in question (small snippet) that was throwing the error.

function performShippingQuote(addr, zipcode, province) {
    if (addr == last_addr && zipcode == last_zip) return;
    last_addr = addr;
    last_zip = zipcode;
    
    $.ajax({
      type: 'GET',
      url: Drupal.settings.basePath,
    success: updateShippingCost,
       dataType: 'json',
      data: {
         q:'addresses/shipping_ajax',
         program:$j('input#edit-program-program-nid').val(),
         address:addr,
         zip:zipcode,
         state:province,
       }
     });
}
  

If you notice on line:16 there is an ‘,’ at the end. This trailing comma was the culprit! Upon removing it presto everything worked like a charm across all browsers!

Posted: January 15th, 2011
Categories: code
Tags: , ,
Comments: No Comments.

Atari: Project Runway for the Wii

Last month, I was contacted by Atari games to come in and help put together a promotional website for their recent title release ‘Project Runway‘. To read more visit the portfolio page.

Posted: December 23rd, 2010
Categories: 9-5
Tags: , ,
Comments: No Comments.

IE7 not displaying CSS background image

I ran into a problem while working on a site for a client, where the background image was not displaying in IE7 at all. I was pouring over forums and looking for a fix. I came across multiple “solutions”, but none of them worked.

After re-reading my code, I noticed a ‘typo’, if you will, in my code.

Original CSS code:


body {
background: #ccc url('../../img/bg.gif')repeat-x top;
}


The above code worked perfectly in all browsers EXCEPT IE. I noticed that there was no space following the img path declaration. I inserted a space and voila!
Working CSS code:


body {
background: #ccc url('../../img/bg.gif') repeat-x top;
}


Hope this helps some of you who have been stuck.

Posted: October 19th, 2010
Categories: code, tutorial
Tags: ,
Comments: No Comments.

liz-osborn.com now live!

I recently helped set up an actress’s website, (who is based out in L.A.). The site is rather straightforward, with a clean and easy to use interface. While it may not look like a lot on the surface, there is a bunch of technology that is being used under the hood.

  • jQuery (image roll over and contact menu)
  • PHP (email script, header)
  • JavaScript (used to embed the flash video)
  • HTML (base code for the site)
  • CSS (styling to manipulate the size of the font, as well as placement of imagery)
  • Flash/AS3 (used for the video player and mp3 player)
  • Apache MOD-rewrite ( allows for a clean looking URL, as well as cleaner server side markup and folder structure)
  • Google Analytics (for stat tracking, and user reports)

While the above mention of coding languages used may seem irrelevant, I wanted to point them out so you are aware that I am up to date with the latest and current technology trends. Please feel free to view the site here:
www.liz-osborn.com
and you can view her original site, prior to me being brought in here:
www.liz-osborn.com/0

Posted: September 22nd, 2010
Categories: 9-5
Tags: ,
Comments: No Comments.