GougeYourEyesOut: CSS

Best of 2008

noreply@blogger.com (cyclona23) — Sat, 13 Dec 2008 01:05:00 +0000

After a long hiatus from this blog, Im baaaack. Its the end of the year and everyone's pulling together their favorite Best-Of lists. Here's my favorite Best-Of lists this year.

Websites: WebDesignersWall

Fonts: FontShop

The Future of Ajax

noreply@blogger.com (cyclona23) — Thu, 20 Sep 2007 19:06:00 +0000

Plenty interesting article. Link

Yahoo! Pipes Open For Business

noreply@blogger.com (cyclona23) — Fri, 09 Feb 2007 01:02:00 +0000

... but temporarily clogged at the moment because of overwhelming interest. Pipes is a new service that allows drag and drop aggregation and/or filtering of various internet data feeds and allows you to redirect them anywhere; its mashups on crack that anyone can use, not just programmers.

"Using the Pipes editor, you can fetch any data source via its RSS, Atom or other XML feed, extract the data you want, combine it with data from another source, apply various built-in filters (sort, unique (with the "ue" this time:-), count, truncate, union, join, as well as user-defined filters), and apply simple programming tools like for loops. In short, it's a good start on the Unix shell for mashups. It can extract dates and locations and what it considers to be "text entities." You can solicit user input and build URL lines to submit to sites. The drag and drop editor lets you view and construct your pipeline, inspecting the data at each step in the process. And of course, you can view and copy any existing pipes, just like you could with shell scripts and later, web pages."

Link to article at O'Reilly Radar

Firebug 1.0 Is Out + Talk For Power-Users by Joe Hewitt

noreply@blogger.com (cyclona23) — Sat, 27 Jan 2007 01:13:00 +0000

I've been using the latest and greatest version of the Firefox add-on Firebug 1.0 which made its debut this week. For those of you not familar, Firebug is a powerful plug-in that is like Venkman on steroids for javascript development, as well as powerful and easy-to-use CSS/DOM inspector tool. We were lucky enough to have its author, Joe Hewitt, come in to give a talk for all you would-be power users at HQ recently. You can catch this talk and more if you go check out the YUI Theater from Yahoo!. Below I've summarized some of the key highlights of the video in case you are pressed for time (it's almost an hour long).

The new version features enhancements to the DOM/CSS inspector, including inheritance and precedence information. It quickly tells you which rules override other rules and where they are, all packaged into a super-slick and usable GUI. It also features live editing of CSS and HTML right there in Firebug to help you work your kinks out faster. Click on the Inspect button to view the element in the DOM tree view. Edit the innerHTML of the element by clicking on it *or* right-click on the selected element and choose "Edit HTML" to more easily modify or add HTML right there. Same goes with CSS rules in the style tab. Hint: for numeric values in the CSS tab, you can use the up and down arrow keys to increment and watch the layout change as its css property value increases or decreases. You'll also want to check out the Layout tab that lives next to the styles tab once you've chosen a DOM node. For kicks, run the mouse over the offset, margin, border, and padding labels in that tab.

But the best new thing about Firebug I've found since I've been playing with 1.0 is the expansion of Javascript logging toys. Once you get going you'll see a new tab next to the Inspect tool called "Profile" which you can turn on while youre using a page that is executing some JS and it will record all kinds of useful info about whatever js functions were executed between when you first hit it to start recording and when you hit it again to stop recording. It tells you how many calls were made to each particular function as well as how much time it took and how much time it took relative to the other functions that also fired. The best part is that you can also turn the profiler on and off directly in your code just like a console.log or console.info... Just throw in a console.profile() before the code you want to measure to start the profiler and console.profileEnd() to stop it and your output will show up in the console with all the relevant info. This is a great leap forward for developers who are very performance-conscious about their apps, which in theory should be all of us. Another whizbang logging feature is console.trace(), which does a stack trace of all the functions being called at the particular moment that you invoke it and traces the values being passed around to each of them. More about FB logging.

Speaking of performance, another enhancement rolled into the new version is the "Net" tab, which essentially gives you a break-down all the HTTP calls your page is making and tells you how fast (or slow) they are returned. Each file type is grouped and has its own sub-tab (HTML, CSS, Scripts, XHR -aka XMLHttp Request or AJAX, Images, and even Flash has its own tab). An interesting factoid about performance brought to you courtesy of the Performance group at Yahoo! is that most of the time spent fetching a file from a server is spent on the actual HTTP request, not the data transmission itself. Think about that next time you are trying to decide whether to put your javascript or css into separate files or include them inline. The Network tab is also a handy tool for debugging your XHR requests, as every file request is clickable in Firebug and expands to reveal its HTTP headers and content.

One thing to note is that javascript event logging has changed and is now tied to the DOM inspector. To log events now, you just hit "Inspect" and choose the DOM node you want to watch; its kind of like attaching a special Firebug event listener to an element in the page. Once you've chose the element you want to watch, right click the highlighted DOM node and choose "Log Events" from the menu. Now you can zoom over to the console and interact with the element while you watch all the events fly by.

Firebug features many new, advanced Javascript debugging tools which I won't go into further detail about here because using them is hard to write about, so I'll just point you to spots in the embedded movie clip above that you can jump straight to that are relevant if you're interested:

Using break-points for debug --> 27:00
Using watch-expressions for debug --> 28:45
Using mini javascript command line --> 29:20
Run-to-line feature --> 32:35

Other quick pointers: you can detach Firebug's window by clicking the up arrow icon next to the search box on the upper right. You can also jump right to certain lines in javascript files by typing the # symbol and line number into that same search box. You can also expand the command line by clicking on the up-arrow in the lower right hand corner.

"In The Year 2000..."

noreply@blogger.com (cyclona23) — Thu, 25 Jan 2007 00:16:00 +0000

Link

List of IE6 Bugs That Have Been "Fixed" in IE7

noreply@blogger.com (cyclona23) — Fri, 05 Jan 2007 23:53:00 +0000

I'm not gonna vouch for the validity of the list of fixed bugs the Internet Explorer team has posted in their blog as "fixed" in IE7. Just sayin'.

http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx

The list has links to examples of all the bugs, so at the very least this might be helpful for you if you are trying to identify what species you are dealing with.

Donate to the Cooperative Research Project NOW

noreply@blogger.com (cyclona23) — Sun, 31 Dec 2006 19:01:00 +0000

I dont usually get political on this blog since its meant more as a forum for tutelage on various front-end issues, but this is a special occasion. A very generous user has pledged to match donations up to $10,000 at http://www.cooperativeresearch.org and they have less than 24 hours left to get the remaining $894 they need.

For those of you unfamiliar with this work, its a website that grew out of an investigative journalism project started by Paul Thompson after the 9-11 World Trade Center attacks. Its original focus was very clear: put together a timeline of events leading up to the attacks to sort of "follow the money". The result was a disturbing pattern of oil money, neoconservatives, defense contractors, and CIA/Pentagon involvement that leads up to the highest ranks of US government for the last 20 years. It is the story that the mainstream press in the US won't touch because they are afraid. This isn't some crackpot conspiracy website; these are actual journalists collaborating online and in plain view on a very important project to bring truth to the brainwashed American public.

Now that the Democrats have siezed control of Congress in the wake of the public's dissatisfaction with what is happening in Iraq, some of the connections compiled in this work have a chance of seeing daylight. In other words, America is finally starting to get its head out of its ass about all this stuff.

In the years since 9-11, the timeline has blossomed into a full-blown wiki-style collaborative website that supports grassroots investigative journalism. Some of their other projects include investigations on Hurrican Katrina, the decision to invade Iraq, prisoner abuse scandals in Iraq and Afghanistan, and the confrontation with Iran. This website is meant as a civic oversight and now that Congress is set to begin investigating these things, they are trying to get their ducks in a row. So please check out the site and donate today.

I realize alot of my readers are international visitors, but you can donate, too. The unfortunate fact of life right now is that the detrimental policies of the US government effect each and every one of us on this planet -- socially and probably more importantly at this point, environmentally. So please consider donating to this cause at this critical juncture. Link

CSS Grids and Layouts by Yahoo! Developer Network

noreply@blogger.com (cyclona23) — Thu, 16 Nov 2006 22:21:00 +0000

I notice that there are alot of people sniffing around for CSS grids and feel obliged to point you to the best, most flexible resource I know if (which happens to come from the company I work for). The Yahoo! front-end gurus make your life easier with the Y!UI Library. Just download a lean, mean 2.5k css file and include it in your strict doctype html and follow the easy directions on the page linked from here to create 200 different types of layouts! Doesn't get easier. Link

An interesting feature of the Y!UI libaries is the CSS Reset file, which when included, essentially levels the playing field across browsers by neutralizing all incompatible presets to give you a stable foundation on which to build your pages. Link

Escaping HTML Character Entities in Javascript - ''' and '''

noreply@blogger.com (cyclona23) — Wed, 01 Nov 2006 02:10:00 +0000

This blog has become a chronicle of wierdo bugs, so here's a new one to me. Maybe its not even a bug; but its annoying. I always thought that encoding HTML character entities in Javascript was a no-brainer until we ran across this bug tonight when launching a French version of a Yahoo! property. French language contains lots of apostrophe's (je t'aime, ce n'est pas, etc) and much to our dismay the HTML character entities for apostrophes, both ' and ' both seem to be automagically parsed as apostrophes and not special characters by Javascript, so instead of pulling out your hair trying to figure out why your code is broken, just escape the HTML entities like any other apostrophe would be. You can see for yourself with this little test right here. The first one is the escaped version... Second is not escaped and produces the error. You can do a view source if you don't believe me!

test

test2

Safari Debugging + DOM Tree Model

noreply@blogger.com (cyclona23) — Thu, 19 Oct 2006 22:19:00 +0000

I never knew about this little trick but apparently its been around for a long time. Gives you javascript debugging and DOM tree. Supposedly Safari is getting a Firebug-like DOM inspection tool soon so this will be obsolete, but for now...

Type the following command in Terminal (while Safari is NOT running):

defaults write com.apple.Safari IncludeDebugMenu 1

Then launch Safari, and enjoy the new Debug menu. If you want to disable it again type the same comand only with a 0.

Yahoo Frontend Engineering Talks on Y!Video

noreply@blogger.com (cyclona23) — Wed, 18 Oct 2006 20:10:00 +0000

Yahoo frontend engineering has uploaded some good talks for those of you out there who want to dig deeper into Javascript and the DOM. I recommend "An Inconvenient API: Theory of the DOM" by Douglas Crockford. Also featured are "The New Hackers Toolkit" and Joe Hewitt's talk at Y! about Firebug, the latest and greatest of Firefox extensions. They're not terribly exciting or visual so you can run em in the background while youre working, which is pretty nice. Thanks to Eric Miraglia for putting them online. Link

Journalism & SEO

noreply@blogger.com (cyclona23) — Wed, 12 Apr 2006 18:34:00 +0000

If you're at all interested in Search Engine Optimization, or are just a plain, old-fashioned hit-hog, you might know a bit about the never ending chess game of SEO. This is a link to an interesting article about SEO and journalism. Seems like the old boys club of journalism is starting to get a clue about the world of online media. Link

Free Icon Library

noreply@blogger.com (cyclona23) — Tue, 04 Apr 2006 18:09:00 +0000

Mmm. Yummy. (Link)

Getting Alpha-Channeled PNG's to Work in Internet Explorer

noreply@blogger.com (cyclona23) — Tue, 21 Mar 2006 21:22:00 +0000

Many people have discovered the use of alpha-channeled .PNG files to be a thing of beauty. Unlike the traditional .GIF format which supports total transparency, .PNG's allow for varying shades of transparency. Which is all well and good, until you try to get them to work in Internet Explorer 6 (or any IE < 7). So here's a tip on making them work across browsers:

1. Make your alpha-channeled PNG in Photoshop or other image editor of choice. Save it as a 24-bit .PNG (yes, a 24-bit PNG!) with alpha channeling enabled.

2. Since IE < 7 requires that alpha channeled .PNG's be used with a filter, that's what we'll do in the css. So say we assign the image in your html an id of #foo. You'll want to apply this rule to #foo:

#foo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/foo.png', sizingMethod='crop');}

And that's it... None of the other current browsers that support PNG transparency (Safari, Firefox/Mozilla, Opera, etc) will require any extra rules/instructions on how to treat the alpha-channeled PNG. Your transparecy works and you're done!

Some Basic (X)HTML Tags

noreply@blogger.com (cyclona23) — Fri, 03 Mar 2006 00:15:00 +0000

Here's a primer on some simple basic html (and xhtml tags) at the request of my web pupils. The main difference (that's what we'll say for now) between html and xhtml is that xhtml uses self closing tags, which means that in many cases tags that normally have no closing tag in html such as <img> or <br>
(as opposed to link tags which are wrapped around content and include an opening <a> tag and a closing </a> tag) look like this <img /> or <br /> and are called "self-closing". Blogger templates, for example, use xhtml. You can tell if you are using html or xhtml by going to the very tip top of your page's source code. If you see something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

... then your page is using XHTML... if you dont see "XHTML" in the doctype (or if there is no doctype at all) then most likely your page is in HTML.

So here's some basic (x)html tags. Easy!

Image Tag
<img src="http://gougeyoureyesout/img/whatever.jpg" border="1" width="100" height="50" title="My Image" >

So if you're writing xhtml in your blogger template, the last part would look like this ...title="My Image" />

Links
<a href="http://gougeyoureyesout.com/mylink.html">My Text</a>

To open your your link up in a new window for those of you who hate losing traffic (ahem), you can add this simple trick to your tag:

<a href="http://gougeyoureyesout.com/mylink.html" target="_blank">My Text</a>

Line Breaks
You can create a line-break by adding <br> (or that's <br /> if you're in XHTML world).

Code Comments
To hide pieces of code from the browser but still leave it intact and present in the code, you can do what's called commenting code out. So say you go to your Blogger template and see something in the template that you want to hide, but would also like to keep around in case you ever want to bring it back. You can just slap this  around it, like so:



... and that's it... whatever is between the two bolded brackets the browser will ignore. So if you did a View > Source on your code, you would see the commented-out code in it, but the browser will ignore it as if it wasnt there. Yay!

This is Gonna Be Huge

noreply@blogger.com (cyclona23) — Mon, 13 Feb 2006 19:07:00 +0000

I dont normally blog about stuff like this here, but Nokia has announced its first VoIP phone. The handsets will use voice-over-IP when in range, and the usual horse-and-cart phone company plan when not in range to make a voip call. Yay! I can't wait till all the wireless carriers get the rug pulled out from under them. Especially Verizon who once charged me nearly $400 to roam in California one month. I love it when technology overcomes tyranny. Link

IE7 Beta Is Out The Door

noreply@blogger.com (cyclona23) — Wed, 01 Feb 2006 23:09:00 +0000

Ive seen some mixed reviews. The browser UI itself looks clugey. Personally I'm too afraid to even look at it yet re: css support.

Here's some Flickr streams of screenshots with comments from developers.

IE Blog: The Internet Explorer team announces the beta and begs for help (please help them if you can spare your running copy of IE6 and install IE7. seriously. please.)

All Peers is Coming

noreply@blogger.com (cyclona23) — Tue, 03 Jan 2006 22:06:00 +0000

P2P + Web Browsing = All Peers

It looks like there's a new killer app about to launch... it's called All Peers, a(nother) Firefox extension that is basically a persistent buddy list that sits in the side of your browser and lets you share files from your local machine with your buddies. So say I have 100 pictures from my trip and want to share them with my whole family... boom! Directly from my machine. It even works when you're offline. It's also a full-on Bit Torrent client that lets you download files with a quickness from multiple sources in your lists, other people who have decided to share the files you are looking for.

AJAX for Tony

noreply@blogger.com (cyclona23) — Tue, 03 Jan 2006 20:13:00 +0000

Tony's giving a talk about web development and he has to talk about fancy stuff like Ajax (the stuff that powers mapping technologies like Google maps), so I just wanted to pop a few links up here that might lead him to the promised land of ansynchronous XmlHttp requests:

Ajaxian.com
Lishen.name

For extra credit, you might even want to talk about JSON, an AJAX alternative that's lightweight, and allows for cross-domain queries. Have fun!

Get A Real Web Browser

noreply@blogger.com (cyclona23) — Thu, 15 Dec 2005 20:25:00 +0000

I've been reading alot lately about how Mozilla is about to get alot more serious about promoting Firefox to the unwashed masses still using Internet Explorer, people who dont even know they have a choice. I was wondering how the Firefox community was going to go about this seeing as how its a poor little open-source community vs. the giant robot of corporate America. In true David vs. Goliath fashion, I ran across this website today Kill Bills Browser. It's guerilla marketing at its finest so I thought they deserved a nod here (not that that means much, but still, PROPS!). Microsoft is evil evil evil; they go against web standards and implement stuff in their browser that is meant to be proprietary in the hopes of making developers choose whether to code for standards or code for IE; and because IE has massive market-share, many developers and small companies have no choice but to bend to Bill's Will, but now we are going to rise up and Kill Bill.

If you're too lazy to follow the link above, I'll summarize: the site gives users 13 great reasons to switch, most of which involve stopping your machine from getting spammed by viagra ads and porn. The last reason is the best I think:

13. Because the Department of Justice Lacks Balls.

They spent years and years on the Microsoft anti-trust suit and it did absolutely nothing to reduce Microsoft's monopoly. Great work guys. It's time to take the law (erm, the Sherman Antitrust Act of 1890?) into our own hands.

That's right: Using Firefox is an act of civil disobedience. My readers are smarty-pantses (yeah, I check the logs, ok?) and most of you are already using FF or some other non Internet-Exploder browser so to you I give a shout-out, and to the rest of you: switch already, dammit!!!

To be fair, I'll present the other side of the story which is that I've heard that many of Mozilla/Firefox's developers are being snapped up by Google for day-jobs; which basically means that David is packing some serious nukes in his back pocket. To demonstrate how serious this war has become, Google is offering $1 for every IE user that web publishers deliver from evil at ExlorerDestroyer.com. I am not going to participate in the $1 per user thing because I'm not really into Firefox getting gobbled up by Google, either, and it would be hypcritical for me to take their fuck-bill money, so I'll just say this: if you decide to switch your shit, you can switch it here.

Free CSS Layout/Box Model Templates

noreply@blogger.com (cyclona23) — Tue, 29 Nov 2005 00:16:00 +0000

CSS-driven layouts (no tables here). Free!

New Firefox Extension

noreply@blogger.com (cyclona23) — Thu, 10 Nov 2005 20:01:00 +0000

DevBoi is another sweet Firefox extension that makes web developer's lives, well, more sane. It's a sidebar with quickie info about css implementations broken down by browser. I'll take one of those, thankyouverymuch.

And just as a shout out, for those of you who havent installed and played with the Web Developer Toolbar extension for Firefox by Chris Pederick, check that out here. It has just about every tool you could need to do your development work.

And just to be fair and not so proprietary, Internet Explorer 6 has a developer toolbar that I'll pretend to care about here that's pretty nifty too. This one has a ruler tool that the Mozilla one doesn't. So mmmmah.

CSS Shorthand

noreply@blogger.com (cyclona23) — Wed, 09 Nov 2005 20:30:00 +0000

This is a cool article about condensing css style rules. In fact when I built this blog and dissected the css I found a style rule like this:

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

... and didnt know what the second number, the 1.4% was about. Turns out its shorthand for:

font-size: 78%;
line-height: 1.4em;
font-face: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

There's no official guide to shorthand; you kinda just know it or you don't is the way it goes right now. But this guy is putting an un-official one together for you consumption. Nice. Viva La Fast Code!

Simulating Min-Width for Internet Explorer

noreply@blogger.com (cyclona23) — Tue, 08 Nov 2005 18:05:00 +0000

So of course all of you designers out there are busy peeing your pants because the Internet Explorer 7 team has announced its doing away with all your ugly little hacks; things like the now-deprecated * html selector just got the chopping block and now your layout is... hosed.

Fear Not!

One of the biggest problems with IE up to this point (as of IE6.x that is) is the lack of support for min-width... Supposedly Microsoft says that IE7 *will* be supporting min-width (and I'll beleive it when I see it), but what about IE6,5,5.5, etc... ???!

As of IE5 there have been these proprietary (go figure) IE things called "expressions" which you can embed directly in the css (and in most cases act kind of like javascript), which I had never heard of until recently. Do I live in a cave you say? NO! I've been at this a long time so I figured if I didnt know about them, you might not either. So here's what an expression simulating min-width would look like for a div named foo (sounds like a Johnny Cash song).

div#foo {
width: 99%;
width: expression( document.body.clientWidth < 801 ? "820px" : "99%" );
min-width: 820px;
}

You set the default width to 99%, and all the browsers catch that. Then IE picks up the width: expression statement, which basically in this case says that if the browser window is less than 801 pixels then the width of the div should be 820px, and if not, then 99%. None of the real (gecko mozilla) browsers see this line and instead obey the min-width rule beneath that sets the div to 820px.

Obviously this solution is not as robust as, say, real support for min-width in IE would be, but you might find it a handy workaround.

Quickie Favicons

noreply@blogger.com (cyclona23) — Sun, 16 Oct 2005 01:32:00 +0000

Favicons are the little nuggets of joy that sit next to your web address in the url bar (like my little "G" above). This site is nice enuf to provide a little tool that lets you upload your image and automatically generate one of these little buggers:

http://www.chami.com/html-kit/services/favicon/

Well isnt that special?

All that's left to do is slap this tag around it in the head of your html:

<LINK REL="icon" href="http://gougeyoureyesout.com/img/favicon.ico" type="image/x-icon">

... and you're good to go.