July 5, 2011
Finally the Chicken Fortress is complete! The girls slept in their coop for the first time the night before last, up until then we put ’em in a bin and brought them in. I’ve delayed putting up any pics until it was in fully operational.
Filed under: Uncategorized | Comments (2)
July 20, 2008
png8alpha is a droplet app that converts 24bit pngs to 8bit pngs with transparency intact. These images render normally in modern browsers and IE6 treats them like gifs. Graceful degradation for pngs!
UPDATE: The latest build is png8alpha-02 (notes)
Drag and drop a 24bit PNG image onto the application and it will be reduced to 256 colors. Transparency will be tweaked to achieve the desired effect. The original PNG will be renamed to FILE.bak.png and replaced with the 8bit image.
I’m a huge fan of CSS sprites, to the point that on a current project I have a single image providing the “chrome” for most of the site. 1bit transparency sucks, so I’ve been using 24bit PNGs for full alpha transparency. I figured I would solve the Explorer PNG transparency issue later with hacks if possible, or substitute a GIF version for IE6 and below.
Then I came across this article: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Perfect! IE7+ and others get glorious alpha transparency and IE 4-6 get 1bit alpha like a GIF. The only GUI out there to do it is Fireworks apparently, which I don’t own and don’t intend to buy. So I looked into the available command line tools. After recompiling a few things and sorting out libraries, hacking makefiles, etc. I got them working. From there I wrote the bash script to string it all together and packaged it up as an app using Platypus.
Right now the credits required by all the various licenses are sorely lacking, I’ll correct that soon. I’ve written very little code myself at this point, just a bash script. The bulk of the credit goes to these excellent people/projects:
I intend to release the app under an MIT license in the next revision, but for now it’s a YOYO license… You’re On Your Own.
Filed under: Uncategorized | Comments (1)
June 6, 2008
Pixels are great, consistent and easy to understand. Explorer can’t scale them though. This means if older people or those with large displays want to increase the font size they’re stuck. This is somewhat less relevant for Explorer 7 with its zoom feature. Maybe when IE6 has dwindled away I’ll switch.
In the meantime…
I love to make layouts that scale with the font size. To do this I set a base font size as a percentage and then all other measurements are expressed in ems (with the exception of anything that is a fixed size like images). I read about this approach in this article that demonstrates the percentages resulting in consistent sizing across the major browsers and platforms. These percentages are applied to the body element in CSS:
body {
font-size: 69%; /* 11px */
}
The percentages and their equivalent pixel sizes are:
Lately most of the sites I work on use a base font size of 11px. This can make for some strange looking em measurements. Let’s say I need paragraphs to have a 6px bottom margin. The CSS would look like this:
p {
margin-bottom: 0.5454em;
}
See what I mean? Going to four digits ensures that you get the same measurement cross browser (due to differences in rounding). Actually there’s a simple formula you can use for smaller measurements without pulling out the calculator. Take the number of pixels, subtract one, then place the number next to it that would make nine if added that number. If that didn’t make life easier (hehe) here’s what some common values look like:
It’s geeky but easier to remember than the YUI percentages approach because there is a detectable pattern.
Filed under: Uncategorized | Comments (1)
April 18, 2008
Aptana is a client-side web development IDE shipped as both a standalone app and Eclipse plugin. HTML, CSS, and JavaScript editors with code completion and validation. Document your JS with Javadoc like syntax for inline context help. Supports major JS libraries. It’s a pain that MooTools uses NaturalDocs, so no IDE love for me with my favorite lib… but no other IDE supports NaturalDocs either.
The CSS validator is based on CSSTidy. It comes with some exclusion rules to prevent false positives and you can add your own. I use a couple of CSS hacks/filters, namely “*property” for all IE and “_property” for IE6/5. These regular expressions will prevent the validator from reporting errors related to the hacks. Enter them one at a time at Preferences -> Aptana -> Editors -> CSS -> Validation:
.*unrecognized : \*[-a-z]*: [%\(\)-_'"./?0-9a-zA-Z ]*; for .*
.*unrecognized : \*zoo 1; for .*
.*unrecognized : : for null.*
.*Property _[-a-z]* doesn't exist.*
.*Parse error - Unrecognized .*
UPDATE: I stopped using Aptana years ago when they dropped Ruby support and switched to Netbeans. I was really happy with the change for a long time and then I finally tried IntelliJ again. Really amazing, Hard to imagine what tool could top it but I’m sure I’ll be writing about it in a couple years. 🙂
Filed under: Uncategorized | Comments (2)