GWT Has Style
May 14th, 2008
With Twitter unreachable right now, I guess I’ll put this here:
Archive for the ‘HTML and CSS’ Category
Reset CSS?
March 21st, 2008
I plan to create a new theme for this blog, and am seeking opinions. Should I base my CSS on this Reset Reloaded stylesheet?
What do you do for your own sites?
On Links and IDs
March 20th, 2008
After writing Best. Comment. Ever., I realized comment permalinks were not working on my blog. Clicking the link brought up the page, but failed to scroll to the comment.
Jörg offers this advice:
Firefox does right, and so does safari: You anchors name (”…#comment-7155″) contains a “-”, which is an invalid name. Try something like “#comment7155″, it will work.
While his suggestion served as a catalyst for me to finally investigate the problem, I was not convinced “-” was the cause. So I researched the HTML specification, which has this to say:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (”-”), underscores (”_”), colons (”:”), and periods (”.”)
Dashes are frequently used in URLs, so this cannot be the problem.
The Solution
While my heavily customized WordPress theme defined links, it failed to define anchors or IDs. So the links were going nowhere. I had to edit comments.php and add this ID to a <div> tag:
<div id="comment-<?php comment_ID() ?>" class="comment">
And that fixed the problem. I also re-learned some things about HTML that I probably knew at one point, but forgot:
- On the receiving end of an anchor-type link, you omit the # character
- You don’t have to link to <a name=”something”>. As my theme shows, you can link to <div id=”something”>
I suspect WordPress works fine out of the box, but I must have screwed it up when creating this theme.
IE 8 Passes Acid2 Test
December 19th, 2007
Didn’t see this one coming…today the IEBlog breaks the IE 8 cone of silence:
Last week, we achieved an important milestone that should interest web developers. IE8 now renders the “Acid2 Face” correctly in IE8 standards mode.
Here is how Acid2 renders today, under IE7 on Vista:
Under IE8 “in standards mode”, the face renders like this:
Standards Mode or Quirks Mode?
Here is the first line of the Acid2 Browser Test test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
That line actually puts IE7 into something called “Almost Standards Mode”, according to the Wikipedia Quirks mode article.
Watch the Video
When you visit the Acid2 Browser Test page, will IE8 be in “Almost Standards Mode”, or will it render in “Standards Mode”?
The IEBlog did not make this clear. I found myself wondering if they did this:
- Visit the Acid2 Browser Test page
- Save the source to a file
- Edit the first line of HTML to something that puts IE8 into standards mode
- Load that slightly modified file
Fortunately, the Video on Channel 9 clears this up. Fast forward to around 21:30 in the video to see that the smiley face renders correctly on the live site, not on a modified local copy.
This is really good news. Let’s hope they continue improving standards compliance in IE8 and beyond.
Make CSS Work
December 6th, 2007
Microsoft just announced the next version of IE will be called…IE 8.
Add that to my “Wow” list.
My ideas for IE 8:
- Properly implement CSS, in particular the box model. Consistent page layout across browsers is a huge challenge.
- Make sure Vista still works even when I have Firefox configured as my default browser.
- Make standards modes default, not quirks mode.
- See that search box at the top of my blog? It works in Firefox, but in IE I’d have to use a hack to get that background image to disappear when the box has focus. Fix that.
I guess the last bullet is another CSS issue. The previous bullet is probably more an issue with Microsoft web sites insisting on being IE proprietary, which sucks.
So, to summarize:
Make CSS Work.
GWT First Thoughts
December 3rd, 2007
With a sick child at home, I had some time this afternoon to play with Google Web Toolkit (GWT). Learning GWT has been on my “technologies to investigate” list for far too long; today I finally dove in. First impressions:
- GWT is quite a bit simpler than I thought it would be. I guess all that procrastination was for nothing.
- Having two monitors really helps the learning process. There are a huge number of getting started articles and tutorials, so having a web browser open on one display to read examples while coding in an IDE on another display is almost essential.
- Just dive in and start coding. I’ve attended GWT presentations, watched online videos, read (some) docs…but nothing compares to writing code.
- One of the first things I created was a TabPanel. I was someone surprised by the complete lack of a default style. Until you start messing with CSS, it looks nothing like a tabbed pane. I got completely sidetracked hacking CSS, which took vastly more time than writing the Java code to create the tabbed pane in the first place!
- It seems like there is an opportunity for talented CSS designers to put together GWT Theme Packs, consisting of ready-to-use CSS and images that give your GWT app a particular look.
- The biggest surprise (for me) was the fact that GWT still uses Java 1.4 syntax. I guess I just assumed it would be Java 5 based on experience with other Google Java APIs.
- Other than the CSS, writing a GWT app feels nothing like writing a web app. (this is a very, very good thing…)
- They’ve done a great job providing a usable development environment out of the box. Far too many other tools leave IDE and app server configuration completely up to the developer. Thus, when starting with most technologies, you spend a great deal of time tracking down JAR files, configuring Tomcat, coming up with a custom development “flow” to compile, deploy, bounce Tomcat, etc. GWT comes with tools to setup the initial project, hot deploy, and test.
- A bit more on the previous bullet…they’ve also managed to do that without locking you into a particular IDE like Eclipse or NetBeans. I find it disturbing when vendors try to lock me in to a particular IDE by writing tutorials and plugins that assume I only use one specific IDE and app server combination. So far, GWT works great in IDEA. I’m sure I could easily switch to Eclipse and everything would work there as well.
- I plan to continue this journey.
Oops: Phone Not Supported
November 26th, 2007
The comments for Oops, browser not supported are a good read. A few quick highlights include:
- A reference to Yahoo’s graded browser support. This is great stuff, as explained in my fabulous graph below.
- A link to Reset Reloaded, something I definitely need to do for my own site. I keep running into margin and padding inconsistencies, for instance when embedding certain tags inside of thought bubble comments.
Now for the Graph
This highly technical graph shows why toolkits and libraries like YUI, GWT, Dojo, and others are inevitable:
I test my blog on my PC with two browsers: IE 7 and Firefox 2. I simply do not have the resources (time/money/desire/etc) to test on a variety of browsers and operating systems. But I do worry about it…
- What does my site look like on cell phones and PDAs?
- Is accessibility even remotely supported?
- What about Macs? Linux? Old browsers?
The graph shows a vertical dashed line. There comes a point where you have to support so many browser and device combinations that you simply cannot hand code a sophisticated site.
Old Story, New Rules
We’ve dealt with this issue for years and years and years. What makes it any different today than it was a few years ago?
- Devices, devices, devices - pretty soon an awful lot of people will be browsing your web site with phones, MP3 players, game consoles, and other gadgets. A world with 2 incompatible browsers is childs play compared to today’s reality.
- User expectations. You can’t just hand-code some XHTML-strict along with compliant CSS and expect great results. People expect AJAX, animations, WYSIWYG, drag-and-drop, mapping, etc. Good luck hand coding all that.
So there you have it. I hope you enjoyed the graph. I wonder how that 453 pixel wide PNG looks on your cell phone?
Thanksgiving Blog Purge Challenge
November 19th, 2007
Why would you want a map like this on your blog?
Everyone’s blog traffic looks like that. A bunch of dots blobs scattered across the globe with a void in Africa. Get rid of it.
How about this:
People do not visit your blog for the weather report.
And about that tag cloud…Jeffrey Zeldman called tag clouds the new mullet way back in 2005. (personally, I think goatees are the new mullet, but to each his own…)
Heat Maps
Every person with a blog should read Banner Blindness: Old and New Findings. That article contains some really awesome heat maps that show what people actually look at on a web page.
I wonder why we spend so much time agonizing over how to create 3-column CSS layouts when people rarely look at those other columns anyway?
Great Versus Typical
I think Russell Beattie’s Weblog has a fantastic style: clean, beautiful, and easy to read. I modeled my site after his, although I’m certainly no graphic designer.
Unfortunately many blogs look more like this:
Yuk.
Be the Steve Jobs of Your Blog
Apple hardware design kicks ass:
Largely because they have the balls to remove extraneous features.
Corporate committees are the enemy of simplicity. Committees rarely produce anything inspiring. Instead, we get watered down politically correct pandering slop that tries to please every faction, while delighting nobody.
Your blog belongs to YOU. You do not have to answer to a committee! Be an evil dictator! Delete, purge, CLEAN UP! You can be Steve Jobs in your own little corner of the Internet.
Removing the clutter will make your blog better.
Thanksgiving Challenge
Your challenge is to remove something from your blog theme. Drop a calendar, a tag cloud, a map, a badge…whatever. Just go for simplicity.
(The hypocrisy of the gigantic ad on my own blog is noted…)
Thought Bubble Comments
November 5th, 2007
I just added “thought bubble” graphics to my blog comments. Scroll down to see the results.
Check out Comic: Wide-Stanced Programming for another post with a handful of comments.
I have no idea if this works in your browser. I tested on Vista using IE 7 and Firefox 2.0.0.9. It’d be great if people on other operating systems and browsers could let me know how the bubbles render.
Almost Bullet-Proof CSS Calendar
September 17th, 2007
Check out the calendar detail to the left of the post title. I created this with a combination of some simple div tags, two background images, and some CSS. It looks really good in Firefox, and “ok” in IE. If you change the text zoom size in IE, the borders get a bit flaky. I’m sure with a bit more hacking we can make it look better in more browsers.
This diagram shows how the div tags fit together:
Here is the CSS for the outer box:
.datebox {
width: 50px; /* same width as the background image */
float: left;
margin-right: 1ex;
margin-bottom: 1em;
}
The width matches the width of the background image, which is anchored to the top of the .month box. (shown next). The float tells the entire datebox where to go on the page, and the margins ensure text does not smash up against the box. The values 1ex and 1em are just pulled out of thin air. Other values work fine.
The month box contains the background image anchored to the top edge. It is important to know the exact color of this image so you can make the background color of the box match. Furthermore, the image must not be transparent, otherwise the background color of the box bleeds through the top edge of the image.
.datebox .month {
font-family: Cambria,"Times New Roman",Times,serif;
font-size: 0.9em;
padding-top: 0.3em;
padding-bottom: 0.1em;
text-align: center;
background: #660033 url('images/calendar-top.png') left top no-repeat;
color: #dddddd;
}
The top padding gives just a bit of space to allow the background graphic to show. The bottom padding is arbitrary, I just tweaked it until I liked the way it looks.
Finally we have the CSS for the day box:
.datebox .day {
font-family: Cambria,"Times New Roman",Times,serif;
font-size: 1.4em;
text-align: center;
padding-bottom: 0.1em;
color: #333333;
border-right: 1px solid #660033;
border-bottom: 1px solid #660033;
border-left: 1px solid #660033;
background: #faf8d2 url('images/page-fold-small.png') right bottom no-repeat;
}
The folded paper image is anchored to the bottom right. This box also provides a 1-pixel border that matches the background color of the other elements.
That’s it. If you are a better artist than me, you can probably improve on the look of this calendar. But after trying to zoom the text on several other people’s blogs, I think my CSS version scales pretty nicely.
WordPress Code
Here is the actual WordPress PHP code. I added this to index.php and single.php:
<div class="datebox">
<div class="month"><?php the_time('M') ?></div>
<div class="day"><?php the_time('d') ?></div>
</div>
I do think some stone-tablet graphics would go better with my theme.