I had a great idea. Why not grow a moustache like I did last year but only this time, document it and put the pics on a website? Upon further research I found the domain mymoustacheand.me to be open. It was in the stars. So I bought it and got to work. In less than a month I put together the site and January 1st it was launched.

After that I had to justify it a little more so I took the opportunity to hand craft some HTML5 and CSS3 along with a tiny bit of jQuery (I'm slowly learning)!

I have no idea what I was thinking but the feedback so far is positive with the word "ridiculous" followed by laughter coming up quite a bit. Take a look and let me know what you think.

But, as they say, when one problem is solved another steps up to take its place. In this case its licensing restrictions for some fonts. The problem in a nutshell: foundries make awesome fonts. They sell those fonts to us — designers — and in turn we use @font-face to put those fonts on web pages. But when we do that we often break the licensing rights that come along with those fonts since putting them on the web is just like distributing them. Just as you can download an image from the web, so to would you be able to download the font. Until those fonts can be protected, designers won't take the risk.

A solution presents itself with Typekit — a subscription based web app that let's you link to their online font files without worrying about licensing restrictions. An excerpt from their site:

As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.

Will Typekit change everything? No. Well, maybe. Right now it's a little early to tell from the beta reviews. It'll come down to pricing and even then what advantages will it grant over just using @font-face with some free, creative-commons typefaces? Don't get me wrong, I don't hate it or think it's a bad idea; far from it. I just think Typekit might be a step to bigger things to come. But the most interesting thing about Typekit is they're using subscription fees rather than buying as a new idea for the licensing model.

Besides Typekit, the .webfont format and OpenType with added meta data could fix the problem of the fonts' licensing. Basically they would both have meta data within the file that would allow the font to be displayed — and not downloaded — to prevent theft of the font. Problem with this is it would first have to go through the bureaucracy know as the W3C. The W3C has along track record of drawing things out far too long, like the recommendation for CSS3 which took 8 years (and still aren't complete today). And if the formats did get recommended there would still have to be support from the browsers.

The good news is there are solutions for now like using fonts that are free & open-source. Sites such as The League of Movable Type are making a new model different from other foundries and type designers. I won't go into detail but check out their site and read their manifesto. After a long time of waiting its good to finally see the long-neglected web typography area finally moving forward.

Is you're interested in learning more, checkout these links: #^@! the Foundries, Webfonts — Where Are We?, Getting Started with Typekit and a great example of Typekit in use: For a Beautiful Web.

This past Friday the first Front-End Design Conference was held in St. Petersburg, FL. Ryan and I made the early morning drive to St. Petersburg for the festivities.

For awhile there hasn't been a conference or event that has focused on front-end design. Okay, there has been but nothing even remotely close to Orlando. I was surprised to hear about the Front-End Design Conference and quickly made plans to attend (thanks to NFi for covering the cost for the tickets). And it was an even bigger reason to attend when I found out the speaker lineup who included folks and companies I've actually heard of and follow.

Speakers included Kevin Hale of Wufoo, Jonathon Longnecker of Forty Seven Media, Grant Friedman of Colorburned and Chris Coyier of CSS-Tricks who had a great talk on jQuery.

Andrew Maier offered a great presentation on affordances in web design:

How do your users decide what actions lie behind a given interface element? For example: what makes a button a button? In this talk, we'll focus on the logical underpinnings of design; drawing on research in the fields of product design and ergonomics. We'll examine the foundations of usability and what it means to interaction design.

The talk also covered overdesigning and a good share of the theory behind interaction design. Andrew presented really forward-thinking ideas on why objects and interfaces look and work the way they do and how that relates to design. In the future I will definitely be thinking about these ideas and theories in my work.

Another great talk was by John Ashenden of Grooveshark about how to work creatively to customize your user interfaces. Fabio Sasso also had a great presentation about gathering design inspiration and how he first started the mega popular site Abduzeedo.com.

The great thing about FEDC was the format. Instead of the traditional breakaway format where you'd have to pick between two or more talks to watch, only one talk/session went on at a time.

Thanks to Dan Denney for putting on a great conference. I meet some great folks and had a lot of fun. The speakers were great, the locale was fantastic and everything just seemed to come together to make this event stand out. Even though it was the first year it's been held, I can see this conference becoming a must attend in the future. Great stuff going on in Tampa/St. Pete.

Traditional fixes consisted of either A) setting an element with clear: both; after the floated element or B) basically floating everything. Option A is not semantic and option B is very inefficient. I've used both options since I've learned CSS so I was surprised when I read Sitepoint's article about how to clear floats easily.

Okay, now pay attention. The way to fix this problem elegantly is to put the following on the parent container:

1. #parent_container {
2. overflow: auto;
3. }

That's it! The Sitepoint article author's original reaction was about the same as mine and consisted of "Whaa…?" and then actually testing it for myself. And I'm happy to say it works really well — for the sites I've used it in.

But, as the article points out, the solution isn't perfect. Internet Explorer 7 sometimes puts unwanted scrollbars on the container elements. In that case use overflow: hidden; instead. It has the same effects as overflow: auto; but seems to work in IE a little better.

If you're interested in learning a couple more clear tricks, NETTUTS has a great piece on CSS and containing children. Also check out Sitepoint's Simple Clearing of Floats.

Photo by markkrupinski

This past week I visited Miami to take in the sites and expand my knowledge a bit by attending BarCamp Miami and the annual FOWA (Future of Web Apps) conference. Both events were absolutely amazing and much fun was had by all. Here's my recap of the week in Miami.

Last Friday evening a few co-workers (Sterling, Elizabeth, and Daniel) and I skipped the usual NFi happy hour and drove down to Miami so we could get an early jump into the weekend where we'd be attending BarCamp Miami and on Tuesday, Carsonified's FOWA. BarCamp, which was Sunday, got off to a great start with a sea of people (500+) flooding the courtyard of the venue at which it was being held. (Oh, and for those who don't know what BarCamp is, read about it here.) I caught a bunch of great talks including one by fellow Orlander (Orlandian?), Greg Rollett and Adaptive Blue's Fraser Kelton, plus I did one of my own. I'm not gonna go too in-depth about it but it was really awesome to get up in front of an audience of your peers and present on a topic that you love and are knowledgeable in (web typography for me). For those who missed my talk or want the slides, you can get them here.

After the day wrapped on BarCamp, it was time for the after-party at the Mayfair Hotel's cabana rooftop bar (sweet!). It was great to meet and hangout with all the great folks who made it out to BarCamp, especially all the Orlando peeps who made it down in mass.

Next I hung out at Miami's co-working space, Brikolodge. That place is really a testament to Miami's tech scene. It was great to finally do the whole "co-working thing." (For more on co-working check out Orlando's Colab and co-working explained.) I also meet the guys from Done21 (thanks again Jim for the adapter) and some of the Grooveshark team.

Photo by alexdesigns

Next up, the big one: FOWA. I attended last year's Future of Web Apps, but this year definitely had better presentations, ideas, speakers and technology. An amazing event. Some highlights included Jason Fried of 37 Signals on Getting Real 2.0, Alex Hunter of Virgin on Brand 2.0, Aza Rankin of Mozilla on Ubiquity (very cool app) and of course Gary Vaynerchuk. The overall theme, which was stated pretty clearly in a few different talks, was how these new technologies aren't made for bringing people and information together, but for bringing people together. As contrasted with past years which were heavy on the side of social media and its importance, it was a fresh idea to bring to the table and ultimately, at least I think so, will have a lasting impact on the industry.

After FOWA wrapped for the day, yet another party was planned at Nikki Beach on South Beach. This is where things get a little fuzzy, but I meet a lot of great folks, including Ryan Carson and Gary Vaynerchuk. We actually stayed until they kicked us out (who says geeks can't party?).

All in all, I meet some fun people, had a few beers, learned a few things and had a great time in Miami. Already stoked for next year.

I installed Safari 3.1 a few hours ago and didn't really think much of it. Then I came upon an article that gave a rundown of the new features that Apple has packed into the new version. I went back to Safari and I'm very impressed at what Apple has done.

Have you ever done a search, clicked through a bunch of pages and not found what you were looking for? Instead of hitting the 'Back' button a few hundred times to get back to your original search results, Search Snapback resets the search with just a click. Very useful.

A feature I haven't heard too much about but am very eager to check out is extended support for CSS3 and downloadable web fonts!

But the big feature I'm most excited to see with 3.1 is the Web Inspector. I'll preface this by saying that I like Firefox but I really like Safari, but the reason I use Firefox over Safari everyday is because of Firebug. Its standard in my work and an invaluable tool that only is for Firefox. With that said I think I'm going to be switching to Safari full time very soon. Safari's Web Inspector takes Firefox's Firebug and improves it 10 fold. Browse/view images and a few other features stand out. The really nice part is the great UI though. Great. Wow. I really can't wait to start to use this.

With this update, I'll soon be making the switch to Safari for my primary browser. Sorry Firefox. Maybe IE8 will have a few surprises too...

Okay, so its not exactly a framework in the traditional sense of coding but it is and can be used as a solid CSS reset.

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

I first heard about Tripoli from a Smashing Magazine article on CSS frameworks and resets and I started to use it lately in a couple sites. Overall it does a really good job of wiping the board clean of all a browser's basic standards on how it will render an (X)HTML page, then rebuilds those same elements so they will look the same across all browsers, no matter what styling is applied. This is a great help to prevent all those pesky “I hate Internet Explorer!” moments.

Since released in August 2007, Tripoli has underwent some changes and is about to be released in Beta version. To use and find out more about Tripoli and the upcoming Tripoli Beta release, check out the Tripoli website.