Yet another personal website

Thanks to my surgery, I recently had a bit of time to spend at home, so I built myself a new personal website. I spent a bit of time investigating the cool new features of HTML 5, CSS 3 and jQuery and ended up using a cool thing called jQuery Masonry, and here is the result:



This time, it's just a single page, because I can't really imagine what more I could share (besides the blog, of course). It's also only in English because... er... because.

Technically, I used some JavaScript not to do any copy-paste between the eight divs but ended up publishing a static html file with the end result.

Artistically, when I compare it to all the great designs featured on Smashing Magazine, I honestly think it sucks, but well, I'm more of a programmer than an artist. Plus, I put a lot of effort into editing it. Html is cheap and my mind has been to many many places, starting with Moroccan souks:


museums:


and texture factories:


All in all, I like it a lot, and I hope you do as well.

[Picture credit, credit, credit.]

Silverlight vs. CSS

I'm back to Silverlight blogging! I've been super busy these last months with school, getting married and swithing to Python at work and I haven't had time to look deeper into Silverlight 3 nor get my hands dirty digging in some code. But, summer is here, and here I come! Let's start with some philo: Silverlight vs. CSS.

But why not Silverlight vs. Flash?

First, because it's done greatly at Shine Draw (congratulations on becoming a Silverlight MVP!) . By the way, Smashing Magazine, which is the best webdesign resource ever (and anyone working on a user interface should read that kind of stuff ) has recently had a really in-depth technical article about that subject too (which kinda concludes that Flash is better as it supports more stuff, but I'd just say older, anyway, I'm just saying I'm not writing about Flash).

Second: Flash and Silverlight are two different tools. You usually know one or the other. You usually have to choose one or the other as your area of expertise and once your choice is made, you won't go back, no matter how I praise one and critiscize the other. Silverlight and CSS, however, are tools lying side by side in the same toolbox. Okay, lots of generalizing here, some people are pure C# programmers and don't need to worry about webdesign. I am the girl who uses SL more for websites than for applications and that's what happens: I need to embed SL elements in a webpage done in HTML (thus my interest for HTML Overlay) so a question arises:

Which elements do I do in Silverlight, and which in DHTML?

Here's an excellent example: the Fish Eye menu.

n.design studio did it in CSS/JS:


PageBrooks did it in Silverlight:



Shine Draw did it his style: both Silverlight and Flash, for comparaison:

Now say you need a Fish Eye menu on your site - which do you use?

First thing: ask yourself about your target. Some of my best friends use Linux and well, not everyone has Silverlight. But some people block all of their Flash and some turn JavaScript off - you can't please everyone. I think I'd go with JS here, but the topic is broad.

Second: is it ready? Is it free? For commercial purposes too? Because if it isn't and you have to do it yourself, I'd say one hour for Silverlight, a few days for debugging JavaScript in all possible browsers - absolutely incomparable times.

Still don't know? Don't worry, neither do I, the topic is way too broad. A lot depends on your goal: is it learning a technology? Pleasing a customer? Building an impressive portfolio? If the latter, one important word of advice: don't overdo it. I've seen a site with two moving Silverlight controls that were getting really annoying after a bit of time. Modern at first sight, but cheap at the second: "Mm, yeah, a rotating banner, how hard is that in Silverlight?" It's easy and it's great that it is, but let's use our tools wisely.

Silverlight: my app is up!

Yeah, finally! The website I was working on this summer is up (and featured on silverlight.net)! In Polish only, but my boss said we'll get it translated. For now, you can check out the cool animated tree menu and the HTML ovelay iframe that adjusts its height to you browser window (provided that your browser window is tall and you reaload the app) at bcp.softax.pl.

Oh, and did I mention I got engaged? Mmm, yeah, I did.

Silverlight and text-align:justify.

Silverlight has no such thing as text-align: justify! There is an explanation, but I'm not buying it, but I believe it will be soon fixed, as well as the right-to-left direction.

Okay, the future is bright, Silverlight is still beta, but I want text justified now. As I was saying, I am working on something more like a website than an application, and I chose HTML overlay to display more text. Still, there's one place where there are a few sentences about my company, that I'd prefer to keep in a stylish Silverlight control. Stylish like this:



Doesn't the bit of text just beg to be justified? It does to me and it's fortunately short so I can justify it by hand. So, here are a few tries, read on to learn about my adventures in text justifying or scroll down to the last one to see what finally worked.

First, I manually split the texblock into a few smaller ones, one for each line. Then I just assigned the the right width. Result below:

Well, the texblocks do have the required width, as you see on the framed one, but the text inside doesn't.

Second try: scaling them horizontally with a transformation. Take Blender, type the right thing (1.1) in the right box, like this:



And you get this:

So it's scaled. But: now it goes further on both sides. I just wanted to extend it to the right. We could now push it to the right too, but that would be a mess to find the right values for both transformations. There's a much easier way: move the origin point. It's by default at the center of the obeject, thus the RenderTransformOrigin="0.5,0.5". Setting it to "0,0" will move it to the left top corner. As we're not scaling vertically, we don't care about the top coordinate, so let's just put "0,0". Now all there is to do is find the right scale, I just binary searched between 1 and 1.1. The first line, for instance, got 1.03:


Here's the final result: six delightfully justified lines.
Phew, we're done. So that was a bit of work, but it was okay for such a short text. However, if the width of the frame was to change, I'd have to start all over! Split the textblock in lines again and scale each line again. If someone feels like it, you can try and write a piece of code that would do that programmatically. Yes, MS developers, I'm talking to you.

Silverlight: time for a little preview

Okay, so I've been writing about this Silverlight thing for a bit and it's time to show what I can do. The website I was working on will be released in a few weeks, but the content is irrelevant for most of you, so I scrapped all the content and some of the presentation and left only the interesting thing: the navigation tree in Silverlight.

The tree is cool: you can add as many levels as you want and from the second level, as many nodes as you want. "Want" as in "place on the canvas" and "won't take up all of your memory" (you know, this "exponential growth" thing can be tough in programming...). "Can" as in "I'm not releasing the sources so you can just wish". And... oh, yeah, I gotta go to bed, I'm not a good writer at this time of the night (2 a.m.).

So... *drum roll*... here it is!

Adventures in HTML overlaying

Wow, the demand for articles about Silverlight is overwhelming! I've just been featured on Silverlight Cream #342 and I don't have that much to share yet. But, don't worry, my Silverlight masterpiece will be released soon and I'm learning everyday, so more goodies are to come.

I was saying I would try HTML overlay - I did and it works great. The most useful resource was this thread on silverlight.net, which is about displaying pdf files, but HTML overlay works in exactly the same way. (And why not gifs or Flash while we're at it?)

So here's what I did:
The grey rounded border is in Silverlight (as the stuff outside of it), and everything inside is HTML+CSS displayed in an iframe. The orange thingy is a link to a Wikipedia page, so let's click it.

Wow! That looks funny! It shouldn't be a surprise, but the link opened in the iframe. I know exactly how to prevent this, but... it looks kinda cool! Okay, let's close this window to ensure the iframe will disappear with it.
Ooops! Recognize those rectangles from the previous picture? They're tables and they disappear in FF, but IE has to be IE and cause issues. Fortunately, that was easy to work around (reset the iframe source while hiding it), but why, oh why, when I try to make peace with the M-corporation products, do they have to remind me how annoying they can be?

How to dispaly HTML/rich text in Silverlight

Silverlight is intended for making applications way more that for making websites. If what you're making is more like a website (and what I'm working on definitely is), you're gonna want to put content, and if you're putting content, you're most probably putting text, and if you're putting a lot of text, you're gonna want to format it. And you've been formatting text in HTML since your early childhood, so your'e wondering how to insert this dear HTML of yours into a Silverlight application website.

You have three possibilities:

1. Formatting text using the "Run" element.
   
2. Using the HtmlTextBlock control written by Delay, which supports the tags: a, b, br, em, i, p, strong and u (but no CSS).
   
3. HTML Overlay:

HTML overlay is explained here (and that's where the picture's from).

I'm trying HTML overlay today.

Flag the bastard! (with cool Firefox add-ons)

I listed my blog on a few blog toplists and decided to see what other interesting blogs are there. One of these sites didn't have an "adults only" section and among the top blogs, many had inappropiate content. I decided to flag them a little bit. Now please don't give me the tolerance speech, flagging a blog doesn't send the authors straight down to hell, see here or here.

The rules are simple: bloggers are free to blog about what they want, readers are free to flag them. Cool. But one of the bloggers disabled the navbar. I'm pretty sure he didn't do it for estethical reasons, as he didn't care for a nice blog template. I felt my right to flag has been violated. I got angry. The dude had to get flagged. But how?

First thing to do, RTFM. A help group led me to The Real Blogger Status, who advised to make a bookmark to the URL "javascript:toggleFlag();". I was too lazy to make a bookmark and only copy-pasted the command in the navigation bar using that blog as a lab rat (intending to unflag it right away, of course). Failed. Still to lazy to make the bookmark and afraid the solution might be outdated, I decided to find my own way.

What is the navbar anyway? Normally speaking, the navigation bar at the top where you can search or flag the blog for example.
Geek speaking:

1. Click down here to activate Colorzilla.
2. Move the cursor here to find out what it is.
3. Get the answer from here: div#b-navbar. So it's called "navbar" and is placed in this div.

Okay, now to the bastard blog. In the Web Developer Toolbar, let's pick "CSS", then "Edit CSS".
What to we have here:

1. Inappropriate content (blurred, kids are reading).
2. No navbar to flag it!
3. A "navbar" iframe (I guess it's in the div mentionned above.) with the "display" property set to "none".

So what did I do?
1. Of course, changed the "display" property. Removing it didn't help, but setting it to "block" did.
2. Flagged the bastard!

I'm not saying it's the best or easiest way or anything. However, Colorzilla and Web Developer Toolbar are definitely cool to have.

Microsoft strikes again

I learned that Microsoft bid $44 billion for Yahoo!. What wouldn't they do to divert attention from the concerning facts I wrote about recently.

Anyway, good for Yahoo!, I guess. They definitely need some refreshement, judging by how the page http://features.yahoo.com/webceleb/britney/ looks like. (Not even a menu! That's wrong, even for April 1999!)

Webdesign: wavy underlined links

When I first saw the wavy border in CSS3, I was really excited and couldn't wait. But, the same applied to rounded corners. A year later, still not much CSS3 support, and rounded corners are everywhere (even here! though I didn't make these myself). By the time most people will have browsers tha support CSS3, rounded corners will be totally out. So, I decided I wouldn't wait and do wavy underlined links right now.
I used this image as a background for my links and obtained the following effect on embrion.pl:
Today, I ran across LaurenConrad.com and noticed that the same idea has been used:
Very pretty. But I wonder if this effect was intented:
I don't think the images should be underlined. Seems like someone hasn't paid attention to classes. Worse yet, no contact with the webmaster (hello usability!) and the menu uses Flash. I don't approve of Flash at all, and if you're using it for stuff that could easily be done with CSS and JavaScript and only make the site a little less fancy for users with no JS, you're dead.
Anyway, I'm going from one subject to another again, Lauren's site looks good anyway, and I was talking about wavy underlined links and how much I like them and how they were my idea (do you think echomusic copied from me?).
I wonder what the next rounded corners will be.

Major news: the new IE

A little quote from http://channel9.msdn.com/showpost.aspx?postid=367207:

The IE team has been very hard at work on IE 8 for the past several months and they hit a huge milestone last Friday evening. The IE dev team checked in a bunch of code that included several new features implemented in the core rendering engine that enable IE to pass the ACID 2 test! This is great news for web developers: IE 8 is going to be our most standards compliant browser to date.

Wow. Better late than never. However, I still am waiting for the days when us web develeopers won't have to work with N browsers open at once and do CSS hacks for IE6. It's not even that much fun, when you think you've got way more work to do just because someone screwed his part.

Ribbons in webdesign

I suffer of an unexplainable ribbon obsession. See the pic on the side: what's in my hair?
(Well, to be honest, I haven't worn ribbons in my hair for quite a while, as I don't really care what I look like while coding, and last week was all about coding... but I love ribbons, the more colorful the better. )



So naturally, I incorporated ribbons into the design of my personal website. Today, I ran across another website with ribbons in the design: www.splittheatom.co.uk (it was featured on SmashingMagazine, which the geek used to read on a regular basis). I really like how colorful ribbons have been used for the navigation and frankly, I am a bit surprised that I don't see ribbons on websites more often (contrary to pieces of paper). Well, there's an area to explore. If
you're interested, here's a nice tutorial about creating ribbons in a graphic editor.