Skip past navigation, straight to the content
Bloc Party’s debut is already on many critics’ shortlist for the best of 2005. It’s a great rock album that will also appeal to all the hipsters pissed that Interpol and Franz Ferdinand made it outside of their circle of friends.
Registered Users can sample the album in the Album of the Week.
Highly Recommended (A-)
Dizzee Rascal’s albums are two of my all-time favorties (let’s say top 50); although he’s only 20, his beats, lyrics, and flow are mature and accomplished. His live performance was strong, but the show was held back by an unnecessary second MC (a frequent problem with hip-hop shows) and a DJ who wasn’t particularly creative.
Recommended (B+) Needless sidekick and overdubbed beats, but good nonetheless
Segoe Script is another gorgeous OpenType font Microsoft is working on. Segoe Script supports automatic fraction formatting, another OpenType feature. The animation below illustrates the automatic formatting in Avalon, as the words “3/4 Cup Sugar” are typed:
This formatting can be enabled through the Typography.Fractions property:
<TextFlow FontFamily="Segoe Script" FontSize="50"
Typography.Fractions="Slashed">
3/4 Cup Sugar
</TextFlow>
Unfortunately, most fonts only carry special characters for three common fractions: 1/4, 1/2, and 3/4.
Today I’ll show you how to do something slightly more complicated with Avalon. First, we’ll start with a grocery list written using Segoe Script, which I showed yesterday.
The markup here is fairly straightforward:
<TextFlow FontFamily="Segoe Script" FontSize="20">
<Paragraph Margin="0, 16">
Honey,
</Paragraph>
<Paragraph>
Please pick these up from the store on your way home:
</Paragraph>
<List Typography.Fractions="Slashed" Margin="16">
<ListItem>3/4 cup sugar</ListItem>
<ListItem>1/2 cow's brain</ListItem>
<ListItem>1/4 lb ostrich filet</ListItem>
</List>
</TextFlow>
Even with a nice font, this list is pretty boring. Let’s add a background and a dropdown list with some smarmy replies:
I’ve tweaked our markup by adding another row to the Grid, placing a ComboBox in the new row. I’ve also used a Rectangle to paint a light yellow background.
<Grid Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Fill="#ffc" Grid.RowSpan="2" />
<!– Trimmed for brevity, see final markup –>
<TextFlow FontFamily="Segoe Script" FontSize="20"
Margin="20, 0" VerticalAlignment="Top" />
<ComboBox FontFamily="Consolas" FontSize="20" Padding="10"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Margin="20" Grid.Row="1">
<ComboBoxItem IsSelected="True" FontFamily="Consolas"
FontSize="20">
Yes, Dear
</ComboBoxItem>
<ComboBoxItem FontFamily="Consolas" FontSize="20">
Not tonight
</ComboBoxItem>
<ComboBoxItem FontFamily="Consolas" FontSize="20">
You Never Call
</ComboBoxItem>
</ComboBox>
</Grid>
The note looks a little flat, we’ll add some depth with a subtle gradient on the background and a light shadow:
What I’ve done is changed the background of the Rectangle to a gradient. I’ve also added a second Rectangle with a mostly-transparent gray background and a SkewTransform to add a shadow effect. Here’s our new markup:
<Grid Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Fill="#2666" Grid.RowSpan="2">
<Rectangle.RenderTransform>
<SkewTransform AngleX="1" AngleY="1" Center="0,0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="VerticalGradient #ffc #fea" Grid.RowSpan="2" />
<!– Trimmed for brevity, see final markup –>
<TextFlow Margin="20, 0" VerticalAlignment="Top" />
<!– Trimmed for brevity, see final markup –>
<ComboBox VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Margin="20" Grid.Row="1" />
</Grid>
Finally, let’s rotate the note slightly and let the note scale intelligently.
I used the RenderTransform property to apply a RotateTransform to our top Grid, then I wrapped the entire Grid within a Viewbox for scaling. Here’s our final, full markup:
<Viewbox xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Grid Margin="30" Width="300">
<Grid.RenderTransform>
<RotateTransform Angle="-5" Center="150,200"/>
</Grid.RenderTransform>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Fill="#2666" Grid.RowSpan="2">
<Rectangle.RenderTransform>
<SkewTransform AngleX="1" AngleY="1" Center="0,0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="VerticalGradient #ffc #fea"
Grid.RowSpan="2" />
<TextFlow FontFamily="Segoe Script" FontSize="20"
Margin="20, 0" VerticalAlignment="Top">
<Paragraph Margin="0, 16">Honey,</Paragraph>
<Paragraph>
Please pick these up from the store on your way home:
</Paragraph>
<List Typography.Fractions="Slashed" Margin="16">
<ListItem>3/4 cup sugar</ListItem>
<ListItem>1/2 cow’s brain</ListItem>
<ListItem>1/4 lb ostrich filet</ListItem>
</List>
</TextFlow>
<ComboBox FontFamily="Consolas" FontSize="20" Padding="10"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Margin="20" Grid.Row="1">
<ComboBoxItem IsSelected="True" FontFamily="Consolas"
FontSize="20">
Yes, Dear
</ComboBoxItem>
<ComboBoxItem FontFamily="Consolas" FontSize="20">
Not tonight
</ComboBoxItem>
<ComboBoxItem FontFamily="Consolas" FontSize="20">
You Never Call
</ComboBoxItem>
</ComboBox>
</Grid>
</Viewbox>
Run the Road is a compliation of greatest hits for grime, a recent sub-genre of UK hip-hop with heavy garage influence.
I was only familiar with a few of the artists on this compliation (Dizzee Rascal, Wiley, the Streets); one of the better tracks is by Lady Sovereign, a 19 year-old, 5′1″ girl who kinda looks like Sporty Spice and sounds more Jamaican than British.
The standouts are by Lady Sovereign, Kano, Wonder and Plan B, and Terror Danjah. Surprisingly, the biggest names give some of the weakest performances: Dizzee Rascal’s track is mediocre, and the Streets’ contribution is absolutely terrible.
Registered users can check out the album in the album of the week.
Recommended (B+) A good introduction to the genre; will completely alienate your elders
South beach was great. Although it rained in the morning, the weather cleared up later in the day.
DJ Kicks is a long-running series of DJ mixes by the !K7 label; Erlend Øye is half of the Norwegian indie pop duo Kings of Convenience. Through his side projects, Erlend has moved into electronic and dance music, touring as a DJ.
This mix was actually released last year, but I didn’t hear it until earlier this year and it’s been in heavy rotation ever since.
The music is primarily microhouse, but what makes the album unique is the fact that Erlend sings over most of the tracks. He’s got a surprisingly good voice, paired with goofy, melancholy lyrics that work well over his chosen instrumentals.
As usual, registered users can sample the album.
Highly Recommended (A-)
Here’s a flyer for a great upcoming show displayed in Avalon:
Let’s take a quick look at how this was constructed. First, the background image was found on the excellent Stock Exchange. Next, we’ve used Noe Stout, a font by Dan Noe which was found via the very useful FontLeech. We’ve also made use of Candara, one of Microsoft’s new fonts for Longhorn.
The flyer’s layout is contained within a Grid, which is placed inside of a Viewbox in order to provide automatic scaling.
Most of the layout here is straightforward, so I’ll go over only the new or tricky parts.
I’ve used small caps for the names of the performers; small caps can be enabled easily through the Typography.Capitals property, like so:
<Bold Typography.Capitals="SmallCaps">DJ Baby Shower</Bold>
The words “DJ Baby Shower” (in the top-left corner) are shifted a bit to give a cut-out effect; the RenderTransform property is used to apply a TranslateTransform to the entire TextFlow.
<TextFlow.RenderTransform> <TranslateTransform X="-5" /> </TextFlow.RenderTransform>
Because this offsets all of the text contained within the TextFlow, I then applied a bit of Margin on the other Paragraph elements.
Finally, because the lower portion of the image isn’t as dark, I’ve applied a translucent background to some of the text, as well as some opacity on the Button and TextBox. For the text, I used a semi-transparent gradient background on the containing Border:
<Border Background="VerticalGradient #9fff #4fff" ... />
Note that I’ve used a shorthand syntax for the colors: the first hexadecimal digit is the opacity, and the next three are the rgb values.
Here’s the complete markup (If you’re trying this at home, make sure you download the font and image I’ve used — name the image street.jpg):
<Viewbox
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Margin="10"
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="350" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="street.jpg" Stretch="Uniform"
Grid.ColumnSpan="3" Grid.RowSpan="3" />
<TextFlow FontFamily="Noe Stout Bold"
Foreground="White"
Grid.ColumnSpan="3">
<TextFlow.RenderTransform>
<TranslateTransform X="-5"/>
</TextFlow.RenderTransform>
<Paragraph FontSize="200" LineHeight="135">
DJ baby<LineBreak/> shower
</Paragraph>
<Paragraph FontSize="93" Margin="0,10">
+special guests
</Paragraph>
<Paragraph FontSize="60" Margin="10,50">
5-8pm @<LineBreak/> bed, bath, and beyond
</Paragraph>
<Paragraph FontSize="60" Margin="10,50">
1114 18th st, next to <LineBreak/>
applebee's
</Paragraph>
</TextFlow>
<Border Background="VerticalGradient #9fff #4fff"
Grid.Column="2" Grid.RowSpan="3"
VerticalAlignment="Bottom"
HorizontalAlignment="Right" Margin="8">
<TextFlow FontFamily="Candara" FontSize="23"
Margin="15">
<Paragraph FontSize="32" FontWeight="Bold"
Typography.Capitals="SmallCaps">
Last Chance
</Paragraph>
<Paragraph>
Join
<Bold Typography.Capitals="SmallCaps">DJ Baby Shower</Bold>
on the final stop of his blockbuster tour:
<Bold Typography.Capitals="SmallCaps" >
Miss Manners Presents:
The Expectant Couple
</Bold>.
</Paragraph>
<Paragraph Margin="0, 10">
Openers
<Bold Typography.Capitals="SmallCaps">MC Crate & Barrel</Bold> and
<Bold Typography.Capitals="SmallCaps">Mix Master Trimester</Bold>
will rock the mic early.
</Paragraph>
<Paragraph Margin="0, 10">
Don't miss out on this
<Bold Typography.Capitals="SmallCaps">Invite-Only Event</Bold>!
Bring a baby monitor or bouncy seat for drink specials!
</Paragraph>
</TextFlow>
</Border>
<TextBlock FontFamily="Candara" FontSize="22"
Margin="10,10,10,0" Foreground="#9fff"
Grid.Row="1" Grid.ColumnSpan="2" >
<Bold Typography.Capitals="SmallCaps">
Add Yourself to the Guest List:
</Bold>
</TextBlock>
<TextBox Opacity=".7" FontFamily="Consolas" FontSize="16"
Grid.Row="2" Margin="10,0,0,10">
you@example.com
</TextBox>
<Button Opacity=".7" FontFamily="Candara"
FontSize="16" FontWeight="Bold"
Grid.Row="2" Grid.Column="1" Margin="0,0,10,10">
Add
</Button>
</Grid>
</Viewbox>
Mash-ups are a relatively new genre where two or more songs are mixed into one. In it’s simplest form, the acapella version of one song is played over the instrumental track of another. As the techniques have matured, more adventurous compositions are being created and the scene continues to grow.
I don’t know enough about the mash-up scene to give an informed opinion about the albums’ modest claim.
Highlights include: Sweet Home Country Grammar (Lynyrd Skynyrd / Nelly), “It Takes Two to Kiss” (Rob Base & DJ EZ Rock / Prince), “Benny got Back” (Benny Benassi / Sir Mix-A-Lot), “No One Takes Your Freedom” (George Michael / the Beatles), and “The Immigrant Check” (Led Zeppelin / Beastie Boys).
Registered users can sample the album through in the album of the week section. You can also hear samples through Juno Records.
Solid (B) Well executed, but the novelty fades quickly
My Mom sent me a link to Ricardo Freire’s writings about his trip to Luanda. Although I was born in Angola, I left at a very young age and have no memories of Africa whatsoever. Constant wars destroyed the infrastructure and economy of the country; Angola hasn’t been in particularly good shape since it’s liberation in 1975 (not that Portuguese rule was all roses, but it was probably slightly better than civil war).
Ricardo was in Luanda just over a month ago; it’s interesting to see the pictures and read the Brazilian’s perspective on Angola. Here’s my translation of one of his posts:
There’s no tourism in Angola — the vast majority of foreigners that are here didn’t come to sightsee. If I called the hotel receptionist to ask for a taxi to go to the beach, she’d think I was joking. But once the minimal infrastructure is in place (within three, five, ten years?), I have no doubt that the tourists will start to show up.
Luanda’s location is wonderful: the city sits on the shores of a beach that looks more like a lagoon, protected from the open seas by a long and straight peninsula the locals call “The Island of Luanda.” Along the bay runs a road which reminds me of Malecón de Havana, with very pretty colonial buildings and a fort set atop a hill (there is no Portuguese colonial town without such a hill).
The area around the Island is the city’s playground, with extensive public beaches and — I need to make it clear that I adored this — small private beaches, served by well-run restaurants frequented by the Angolan elite and the “expatriates,” which is what they call the gringos (Portuguese included) around here.
Much like Brazil, the poverty is far too evident — outside of the central core, the city turns into an endless musseke, the Kimbundo term for Favela [the Brazilian term for shantytown — Fil] …
I’d like to visit Angola some day. It’s nothing like the country my parents grew up in, but it’s an interesting glimpse at what my life could have been had my family stayed.
I’m too lazy to write a review today. There are plenty out there if you’re bored.
Of course, it’s in the album of the week (registered users only).
Recommended (B+) Easily his best since Odelay
During my last few posts, I’ve made heavy use of Viewbox in order to scale content; today I’ll introduce the TransformDecorator, which provides a slightly different approach to scaling.
The contents of a Viewbox do not re-layout due to changes in window size; they’re essentially frozen to a particuar layout, then scaled as a whole by the Viewbox. In contrast, the contents of a TransformDecorator will re-layout given changes in window size, just like other layouts such as Border. TransformDecorator is special because it can manipulate how its content lays out through scaling and rotation.
Let’s start with some text and an Ellipse within a TextFlow, which I’ve placed inside a Border contained within a TransformDecorator. Here’s the markup:
<TransformDecorator xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
VerticalAlignment="Center" HorizontalAlignment="Center"
Transform="scale 1.0">
<Border Background="RadialGradient #eef #aaf">
<TextFlow FontFamily="Segoe Print, Comic Sans MS" FontSize="15" Margin="10">
<Paragraph>
Duis effet finis suspicit quast. Quisque vitae sem. In magna felis,
fermentum ut, interdum nec, venenatis et, leo.
</Paragraph>
<Paragraph TextAlignment="Center">
<Ellipse Fill="HorizontalGradient #0fff #c00" Width="300" Height="150" />
</Paragraph>
</TextFlow>
</Border>
</TransformDecorator>
TransformDecorator has a Transform property; currently, it’s set to scale 1, which scales the content by a factor of 1 (boring). If we change the value to scale .6, we see the following:
Notice that all the content has been scaled and the text has reflowed to fit the window’s width. Let’s make our content bigger by changing the value to scale 1.5:
If you resize the window, you’ll notice that, unlike Viewbox, the content inside the TransformDecorator isn’t frozen and reflows when resizing. This makes TransformDecorator a good choice if you want to scale your content and still resize.
This type of transform is related to RenderTransform, but differs because the RenderTransform is applied after layout occurs. I’ll cover this in more detail in a future post.
(Aside: I’ve used Segoe Print, another new Microsoft font in the same family as Segoe Script)