Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40
Filed in:CSS
Web Dev·The Web

Better @font-face Syntax

September 4th, 2009  · stk

I recently published an article about cross-browser font embedding, using the @font-face CSS selector. It turns out that the code I put forth causes a 404 look-up in Internet Explorer. A reader has suggested some superior code, which I put to the test

Paul Irish Sets My Morning Schedule

Funny how a single comment can change the direction of my day!

Paul proposes two concepts - new to me - in his recent article, "Bulletproof Font Face Implementation":

  • Internet Explorer tries and fails to download the TTF file (with 2-selector syntax) even though the 2nd @font-face selector includes a "format" declaration.
  • He proposes a single @font-face selector, which satisfies all browsers (obviating the need for two selectors), searches the local computer for the font first and eliminates the Internet Explorer "file not found" problem.

Okay ... this is techie, geeky cool and - for sure - not everyone is going to want to read about this, so here is where you should get off the geek train (if you haven't already).

If you're all aboard, heading for geekdom and want to be cool, then read on brave web-font enthusiasts ...

I'm a Geek, I want More

(Permalink)
Views: 83731 views
10 Comments · GuestBook
default pin-it button
Updated: 23-Aug-2010
Web View Count: 83731 viewsLast Web Update: 23-Aug-2010
Filed in:CSS
Web Dev·The Web

Improving a Lightbox Effect

August 31st, 2009  · stk

There's a spiffy-looking CSS Technique that's been getting a lot of play in the web-design and web-development social circles lately. Unfortunately, it's not a CSS technique and even as a JavaScript technique, it's crap! Did you spot it?

"Innovative CSS Technique" Making Rounds is NOT a CSS Technique

Even as a JavaScript Technique, it's Crap

This article, authored by Emanuele Feronato, has been getting some attention within the web-design and development social network recently. I've seen it Tweeted, FaceBook'd, Blogged, Digg'd and included in various "Totally Amazing CSS Techniques" lists.

On his website, Emanuele bills himself as an "Italian Geek & Programmer". Unfortunately, his article demonstrates he knows very little about web-standards, W3C validation, pure-CSS, graceful degradation, cross-browser compatibility, accessibility or white-hat SEO. He says his LightBox-like effect is "100% CSS-based" and that it's made "only with CSS - no JavaScript needed".

No JavaScript needed? What a pile of hooey!

The article is the most popular article on his blog, sporting over 252 comments and it's currently being shot across the design social circuit like it was the newest communications satellite. While some of the commentary points out the shortcomings, most (who don't know better) are lapping up this code - using it on commercial sites and passing it on.

At first blush, the technique seems very cool, but it's not code we would use and you shouldn't either. In a nutshell, out-of-the box it's crap. (Are you a web-developer, designer or programmer? Can you spot the problems?")

To learn more about why this code is crap (and to get an improved version) ... carry on ...

Turning Crapola into Shinola

(Permalink)
Views: 32699 views
8 Comments · GuestBook
default pin-it button
Updated: 13-Feb-2011
Web View Count: 32699 viewsLast Web Update: 13-Feb-2011
Filed in:CSS
Web Dev·The Web

xBrowser Fonts

July 4th, 2009  · stk

For years, web designers and bloggers have been limited to a select number of "web-safe" fonts. With the Jun 30th release of FireFox 3.5, it's now possible for cross-browser font embedding using the CSS3 @font-face selector. Here's a tutorial to show you how

@font-face font hell

Expand Your Font Palette Using CSS3

In a tale involving proprietary font formats and a week-old release of FireFox, I'm here to say that using the CSS @font-face selector to spice up your website typography is an easy, light-weight, valid and cross-browser solution. Finally, fancy fonts for the masses!

Can this be true? You bet your sweet bippy! Read on.

 

Fancy Fonts For All

(Permalink)
Views: 979435 views
237 Comments · GuestBook
default pin-it button
Updated: 12-Jul-2011
Web View Count: 979435 viewsLast Web Update: 12-Jul-2011

Blue Bird of Happiness

June 14th, 2009  · stk

We have a "new" twitter update status tool for our blog. See how it works (will be followed-up with a detailed discussion of how we made it, modified the JavaScript that comes with the Twitter API and some other nifty tricks we added). Some assembly required.

Twitter This, Twitter That

twitter bird

When the blue bird chirps, we've Tweet'd w/in the past hour.

twitter-logo

It seems that the whole world is a-flutter, over little blue birds (which are the universal symbol for "Twitter", a increasingly popular "micro-blogging" service). Twitter is used to make 140-character comments about what you're doing. You can even embed photos, videos and links - to be rendered in-place, by browser add-on applications. Use it to keep in touch with "friends", for time-delayed "conversations", social networking, staying on top of important (and not-so important) breaking news, popular topics, wasting your employers time or digging deeper into research: trends, keywords, news and other things.

We started tweeting early this year and I finally got around to customizing a "twitter status update", which you'll find in our "Site Tools" section of our blog sidebar. It's a bit different than most Twitter status updates I've seen and here's how it works:

IF you see the blue-bird a-singing (animated musical notes), it means that we've "tweeted" within the last hour or so. Hovering over this little blue twitter bird will reveal a stylish pop-up containing our latest "tweet" (140-char story-line of "what we're doing right now"). It's a great way to see what we're up to, see how witty we can be and we think it's a nice add-on (a mini-blog, if you will).

If you CLICK the blue-bird, whether he's singing or not, you'll get a pop-up list of our last 5 tweets. Each tweet may - or may not - contain links to web-pages or our fellow twitter friends, with whom we're "conversing". Follow the links to learn more. At the bottom of the 5-tweet list is a CSS-rollover link that invites you to "follow us" on twitter. It even degrades gracefully if JavaScript is disabled. We think it's pretty cool.

Coming Soon: A Twitter-torial covering "How to add a Twitter status update to your own blog", which will include detail about using the Twitter API, modifying the JavaScript, make a Twitter status list pop-up and some of the other cool stuff involved in making our own twitter status update tool.

(Permalink)
Views: 28503 views
4 Comments · GuestBook
default pin-it button
Updated: 15-Jun-2009
Web View Count: 28503 viewsLast Web Update: 15-Jun-2009

Helping IE6 Out the Door

June 12th, 2009  · stk

Randsco No Longer Supports Internet Explorer Six

Last month, we made the decision to drop support for Internet Explorer version six (IE6). Visitors using this eight-year-old browser will see a pop-up information box, when they land here. The box says:

quote

Update Your Browser

As of May 2009, we no longer support Internet Explorer 6. The reasons for this decision are many.

We strongly recommend that you upgrade your browser to a newer version. The current version is Internet Explorer 8. The upgrade is free.

Hint: For a better browser, use FireFox.

 

To learn about our reasoning for this move, what it means for visitors, the problems with IE6 and why FireFox beats IE hands-down ... read on.

Why We Dropped Support for IE6

IE6 is listed as #8 of The 25 Worst Tech Products of All Time

- PC World Magazine   

Below is a short list of some of the reasons behind our decision to drop support for Internet Explorer 6:

  1. IE6 is old and antiquated
  2. IE6 is crappy compared to modern alternatives
  3. IE6 support costs web-developers frustration & time
  4. IE6 needs to go - now

 

IE6 Is Old

The release date for Internet Explorer Six is Aug 2001. That was before the 9/11 terrorist attacks on the World Trade Center! IE6 is older than the iPod, the television show "24", IE5 for the Mac and the Hummer H2.

At its peak, in 2003, IE6 commanded roughly 95% of the browser market and created for Microsoft, a browser monopoly that resulted in a U.S. Justice court case against the company.

Success of IE6 is attributable to a number of factors:

  • Unlike early version of Netscape & Opera, IE6 was free
  • It was bundled and integrated with the most popular O/S - Windows
  • It was the best browser available at the time and competitors were lacking

IE6 Is a Crappy Browser

IE6 may have been the best browser in 2001, but this is 2009 and eight years is an Eon of time, technologically speaking. Compared to modern browsers - which are many and all free - IE6 is wildly inferior. Here's a brief list of some reasons why:

IE6 is one of The 25 Worst Tech Products of All Time.

 

(Permalink)
Views: 19366 views
Leave a Comment · GuestBook
default pin-it button
Updated: 21-Aug-2012
Web View Count: 19366 viewsLast Web Update: 21-Aug-2012