I believe it was about a year ago when the idea of microdata, became popular. Microdata is the concept of putting text for humans in the content of tags and machine readable content in attributes (there are applications outside of HTML, but those aren’t relevant right now). At that time the approach was called micro formats, and it looked something like this:
<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/</a>
With the HTML5 spec (at least WHATWG’s spec I haven’t checked W3C’s) comes native microdata. Now the above would look like:
<div itemscope itemtype="http://example.org/vcard/">
<div itemprop="fn">Joe Doe</div>
<div itemprop="org">The Example Company</div>
<div itemprop="tel">604-555-1234</div>
<a itemprop="url" href="http://example.com/">http://example.com/</a>
</div>
The div with the itemscope attribute contains exactly one item of the type that is manifested by the optional itemtype attribute. The itemtype attribute points to a url that describes the type of item. The best way to think about it is in the object/class association, or if you’re not familiar with object oriented programming, house/blueprint. There is no standard syntax for defining an itemtype, so each individual microdata reader would have their own, although since creating a parser would be complicated, most would probably use google’s (google was on of the first adopters of microformats, that’s how you get things like ratings of restaurants in search results, so there is good reason to believe that google will develop a standard syntax for creating itemtypes) ]]>
The desktop music streaming service, Spotify has created a big hype, but many people have given up on it because it is only available in a few countries. A while ago, people discovered a UK based proxy (UK being one of the allowed countries), which was blocked by the Spotify people within a few days (thanks to techcrunch for publishing that on such a huge blog). I found out about that too late, so I did a quick google search and within a minute I was on the signup page for Spotify.
How to Get it
The first step is to go to the spotify website, and click “try spotify”. This will bring you to the page where they apologize for spotify being unavailable in your country, it also shows a list of countries it is available in. Do a google search for <country Spotify is available in> proxies. Then all you have to do is find a proxy in one of he countries and go to the spotify website, from there you go to the “try now” page and instead of an apology, it gives you a sign up form!
I’ve just been given a chance that many web designers and developers never get. I got to co author an article with Chris Coyier on his website, css-tricks.com (one of the biggest web design and front end development sites out there, among nettuts, a list apart and six revisions) about the css3 lightbox “hack” I came up with. Better yet, some people commented with a tip to use tabindex instead of contenteditable, which is A: a bit more semantic, and B: a way to prevent editing of content within the lightbox. I must say it’s pretty amazing the first time you get your name put out like that.
]]>Siege is a card game I invented while I was bored. It uses a single deck of cards (no jokers), but that deck is split in two ― one half black cards, the other red. At the start of the game, players line up 5 cards in front of their deck. It’s hard to explain so here is a visual:
DEK* | |
Qh** | |
9d***| |
6d | |
5h | |
3d | |
| | 5c****
| |10s******
| | 2s
| | Kc
| | 8c
| |DEK
*DEK will represent the deck from now on
**h represents hearts
***d represents diamonds
****c represents clubs
*****s represents spades
******it doesn't exist yet, but DIS will represent the discard pile
the order of the above is irrelevant, the cards are randomly picked
Notice that red’s cards are offset from black’s cards.
Objective and Basic Play
The objective of siege is to “kill” all of your opponent’s cards. There are a few ways to go about this: the first way is to get one of your cards to the spot in front of the opponent’s deck (Q♡ in the above example), The second is to kill all of your opponent’s cards in battle (more on battle soon), and the third is to have your opponent sign a “treaty” (treaties are like resignations or draw offering in chess, except that you can ask your opponent to resign). Since battle is the most important part of the game, we’ll start with that.
Before we actually get to battle, we need to know what we can do. Each turn, a player draws a card, and then chooses to either play or discard it. If it is discarded, it gets placed at the bottom of the deck and the player can choose a different type of move. If the player chooses to play the card, (s)he can either place next to one of his/her existing cards, or place it one space in front of his/her front-most card. The example below shows two turns, first black draws a 3♣ and places it next to his 10♠, and then red draws a 7♡ and places it in front of her 3♢.
Turn 1:
DEK| |
Qh | |
9d | |
6d | |
5h | |
3d | |
| | 5c
| 3c|10s
| | 2s
| | Kc
| | 8c
| |DEK
Turn 2:
DEK| |
Qh | |
9d | |
6d | |
5h | |
3d | |
| | 5c | 7h | |
| 3c|10s
| | 2s
| | Kc
| | 8c
| |DEK
So what now? The 5♣ gets “killed” by the 7♡ because black’s total value of the cards in that row is greater than red. For now that means that 7 beats 5. But let’s imagine that black put his 3♣ next to his 5♣ and then red drew 9♡.
Turn 1:
DEK| |
Qh | |
9d | |
6d | |
5h | |
3d | |
| 3c| 5c
| |10s
| | 2s
| | Kc
| | 8c
| |DEK
Turn 2:
DEK| |
Qh | |
9d | |
6d | |
5h | |
3d | |
| 3c| 5c | 9h | |
| |10s
| | 2s
| | Kc
| | 8c
| |DEK
Red still ends up winning, but black played smarter this time, he defended his weak front lines from attackers. How? The total value of his front line is now 8, and before it was 5. It’s the total value of a row that counts in battles. so if red’s card was an eight or lower, black’s front line would have been sufficiently defended.
More Complex Rules
So since red won a battle, what happens? If you guessed that the 3♣ and the 5♣ get “killed”, then you’re wrong. What actually happens is that the weakest card in the row that lost gets “killed” in this example, the 3♣ only.
Now suppose black draws another card and it turns out to be a 5♠. It’s not a great card on its own, but he can use it to win a battle. If he puts the 5♠ where the 3♣ was, then that row’s total is 10; which is more than red’s, 9.
Turn 3:
DEK| |
Qh | |
9d | |
6d | |
5h | |
3d | |
| 5s| 5c | 9h | |
| |10s
| | 2s
| | Kc
| | 8c
|DIS|DEK
Now red lost her 9♡ and she draws a 2♢. She puts the 2♢ next to the 3♢ to defend it. It turns out to be sufficient, because on the next turn, black draws a 3♠, which isn’t enough to beat the 5 total value of red’s row. This is where discarding a draw comes into play. Black puts the 3♠ at the bottom of his deck so he can move a card. he moves his 5♣ one space forward to “attack” red.
Turn 4:
DEK|DIS|
Qh | |
9d | |
6d | |
5h | |
3d | 2d|
| | 5s
| |10s
| | 2s
| | Kc
| | 8c
|DIS|DEK
turn 5:
DEK|DIS|
Qh | |
9d | |
6d | |
5h | |
| | 5c | 3d | 2d|
| | 5s
| |10s
| | 2s
| | Kc
| | 8c
|DIS|DEK
Before we continue, here is a list of rules about moving:
- you can move once per turn
- you can move as many cards as you want from a single row per turn
- you can only move cards from a single row in a turn
- bonus rule that applies to moving: you can only have three cards in a row
Since the values of the rows for both players is the same, no card gets “killed”, in fact nothing happens. But now it’s red’s turn and she draws a 8♡ and places it next to the 3♢ and 2♢. This wins a battle and “kills” the 5♣.
turn 6:
DEK|DIS|
Qh | |
9d | |
6d | |
5h | |
| | 5c | 3d |2d |5h
| | 5s
| |10s
| | 2s
| | Kc
| | 8c
|DIS|DEK
Treaties
Imagine a position such as the following (not a continuation of the previous examples):
DEK|DIS|
Qh | |
Ad | |
Qd | |
Ad |Ah |Kd
Kc| Ac| As
| | 5s
| | 3s
| | 2s
| | 4c
| | 5c
|DIS|DEK
A-A-K is the most powerful row possible, since each player has only 2 aces. So if both players have that in their front lines, then there is no way for either side to win. So red might offer a treaty that says she wins because she has higher value cards and black would decline because he has more “territory”. Eventually they might decide to go with something like a draw, all one of the aces in both players’ rows be “killed”, or even something informal, like both of them kicking the first bum the see on the street.
Analogies to Actual Warfare
- the deck: training camp / capitol
- Different ranked cards: weapons
- rows: camps
My original forms library didn’t support anything but textboxes/textareas and buttons and it had ugly “messages” (messages being errors/warnings/info markers). It also had only a single theme. All that changes in version 2.0.
Themes
Version 1 had only a single gray theme, which looked nice, but wouldn’t work everywhere. Now there are 3 more color themes: blue, green, and red. All of the colors (minus error/warning/info messages) fit the color scheme.
What to expect in v2.5: A “transparent” theme with semi-transparent fields
Radio/Checkbox Support
When I first designed version 1, I thought it would be impossible to style radios and checkboxes without javascript. This time around I knew more tricks and was able to cover the radios and checkboxes with the :before pseudo-element, but that didn’t work in mozilla so I made a javascript fallback.
What to expect in v2.5: MUCH better <select> support
Errors/Warnings/Info Messages
In version 1, the “messages” that were intended for validation were ugly and nearly impossible to place properly next to their corresponding fields, an afterthought. Although they were an afterthought again this time, they are 500 times better. Just giving the field’s container a class for what kind of message it has and add a <span> with that same class next to the field and a simple message appears next to the field and the field changes color (slightly).
And There’s More!
I also made some other minor aesthetic changes, such as how hovered and focused fields are displayed and even adding a subtle -webkit-keyframes animation to focused fields to have them glow.
It’s still a work in progress, but I’ve found a way to register a click even on any element with css3 and html5. It makes use of the contenteditable html5 attribute and :focus css pseudo-class. It’s current bugs include difficulty closing the lightbox and one time a webkit browser crashed, but I think that was caused by something else.
Demo
Zuko
On the right is an example, but be careful, it did crash espresso once, don’t use it if you have unsaved work open in the browser!
Why is it this way?
It wasn’t always like this, before the mainstream adoption of CSS, web designers would work more like print designer, styling each page to work with the content. But when CSS became popular, designers would use on global stylesheet. What designers seem to have forgotten is that a design is 95% about content. Sure, nice header styling and animated sidebar widgets add to the appeal of the page, but by far the most important thing is to style the content beautifully. A great example of how a page can look beautiful without anything but well styled content is Life is Not Read-Only. 
The style of that site is too simple to work for anything but a single page, but it looks a lot nicer than Codewalkers, and that has all the elements of a full website. You may be screaming that that’s because of the ugly colors and look of things other than the content, but the content is just as ugly. Arial font at an irregular size and and an unbroken span of text.
It seems like web designers need a reminder of what CSS actually means: Cascading Stylesheets. The inventors of CSS intended for multiple stylesheets to be used, one global, and one for the topic or article.
Yeah, I agree, it would be nice if weblog posts were as “pretty” as magazine posts, but what can I do
Developers
- Make a wordpress or other CMS plugin
- If you’re a web designer, encourage your clients to use a variety of designs
- If you blog, change your theme to have custom color support using wordpress post-meta or an equivilent
Bloggers
- Vary your colorscheme and layout to enhance the content
- Make your posts interesting! I changed the colorscheme of this post and added interesting external text features such as this table/list thing
Everyone Else
- Comment on well designed posts complimenting the author/designer, it’s hard work!
- Promote the post using stumbleupon, digg, etc.
Here’s a visual presentation of the above
The interactive object is also good for breaking up the content.
]]>I finally figured out the problem! I had accidentally deleted the image updater for the weather and the date!
• gradient background is a buch of images from: here just placed next to each other at 70% opacity
• the weather text is: curl --silent "http://xml.weather.yahoo.com/forecastrss?p=21044&u=f" | grep -E '(Current Conditions:|F<BR)' | sed -e 's/Current Conditions://' -e 's/<br \/>//' -e 's/<b>//' -e 's/<\/b>//' -e 's/<BR \/>//' -e 's/<description>//' -e 's/<\/description>//' – I used Lucida Grande size 18pt with a silver color at a 600 second refresh
• the weather icon is 2 geeklets. The first one is a shel and uses this command: curl --silent -o /tmp/weather.html http://weather.yahoo.com/united-states/oregon/portland-23424682/; curl --silent -o /tmp/weather.png $(grep "div\ class=\"forecast-icon\"\ style=\"background:url" /tmp/weather.html| awk -F"'" '{ printf $2 }');for NUM in $(grep -n "<li><strong>.*\n" /tmp/weather.html|cut -d":" -f1); do TARGET=$((NUM+1)) ; sed -n "$NUM"p /tmp/weather.html|sed 's|<li><strong>||g'|sed 's|</strong>||g'| sed 's/^[\t]*//'; sed -n "$TARGET"p /tmp/weather.html ; done
make that geeklet invisible by setting the text color to transparent and set it to refresh every 10 minutes (600 second)
• the second weather icon geeklet is an image pointing to file://localhost/tmp/weather.png set it also to refresh every 10 minutes note: the icon won’t work without the other script as the script is what grabs the image from online
• the day of the month is a shell: date +"%d" size Lucida Grande size 144pt silver refresh every 10 minutes
• the abbreviated month script is: date +"%b" Lucida Grande size 40pt silver refresh every 10 minutes
• the day of the week is: date +"%A" Lucida Grande size 40pt silver refresh every 10 minutes
• the time script is: date +"%I:%M %p" Lucida Grande size 40pt silver refresh every 60 seconds
• the calendar is: cal | sed "s/^/ /;s/$/ /;s/ $(date +%e) / $(date +%e | sed 's/./#/g') /" you have to install a new font called monospace typewriter and set it to size 13pt silver
• finally the music info uses bowtie with the geektool theme with the window level set to embedded in desktop
]]>