Silverlight Weblog Features Overview

Justin Angel picture

Justin
Angel

Hi folks,

Welcome to my new Silverlight Weblog!

Join me on a tour of the numerous features this blogging engine offers.

 

 

But first: Why Silverlight?

Simply put: my time is worth money.

Time is money

I blog as a labour of love, devotion and personal passion.
As such, I’d like to spend the minimum amount of time required to setup a blog.

Upon deciding to move out of my previous blog, I faced two prospects:

  1. Move to another HTML based weblog – which normally takes me a week (60 hours~) of fiddling around with HTML, CSS, Javascript and deployment.
  2. Recreate my blog in Silverlight – which I estimated would take about the same and I’d finally be rid of this horrible nuisance – HTML, Javascript and CSS.  

For me, it was an easy choice.

Now I get to experiment with which UI patterns work best for blogging.
Not just use the same handy down comprise-driven-UI I’ve always had.
Using accordions for the front page, expanding panels for comments, responsive user interface, and many others are just some of the benefits Silverlight afforded this blog. 

 

 

What Technologies were used?

Silverlight - User Interface front end.

WCF RIA Services - Server<->Client Communication.

PRISM – Commanding and Messaging support.

Managed Extensibility Framework (MEF) – Dynamically loading blog widgets.

ASP.Net Webforms & ASP.Net MVC – Processing client requests and returning shell HTML.

ASP.Net Dynamic Data (AJAX, Webforms) – The back office management portal.

WCF Syndication Services – RSS 2.0 and Atom 1.0 Feeds.

SQL Server 2008 – Database.

Entity Framework V3.5 – Data Access Layer. 

MSTest - Unit testing Server side.

Microsoft Silverlight Unit Testing Framework – Unit testing Client side.

RhinoMocks – Unit testing Mocking.

Unity – IoC Unit Testing framework.

3rd Party commercial component – rendering out HTML in Silverlight.

 Everything else – home grown.

 

 

Is Silverlight Weblog open source?

Yes. Get it @ http://SilverlightWeblog.codeplex.com under Ms-PL license.

 

 

Posting from Windows Live Writer

A major part of my workflow when authoring blog posts is using Windows Live Writer.
Support for Windows Live Writer is enabled through the Metaweblog API.

Here’s a sample blog post in Windows Live Writer:

Authoring a blog post in Windows Live Writer

After publishing this blog post to Silverlight Weblog it’ll render out as expected:

The Blog post displayed live

 

 

Hierarchical Blog Categories Widget

When posting from Windows Live Writer the blog post author can tag blog posts.
The Silverlight Weblog blogging engine support endlessly nested hierarchical categories.

Selecting a Category in Windows Live Writer Silverlight Weblog Category Tree

The Print screen above shows 3 levels of Categories, but in theory the blog supports infinite nesting.

Blog post Categories list

Clicking on a Category Link in the Categories Tree or In a Blog post would navigate the user to a list of all blog posts in that category.

 

 

Hierarchical Comments

Silverlight Weblog supports leaving infinitely nested comments on blog posts.
Having properly nested comments elevates the mess of replying to 6 people in one comment.

Sample of 6 comments in Silverlight Weblog 

 

As you can see from the above print screen each comment is accompanied with a Gravatar and can be infinitely nested to a parent.

 

 

RSS 2.0 and Atom 1.0 Feeds

Silverlight Weblog supports RSS and Atom feed formats through the Links Widget.

The Links Widget

Here’s a print screen of the main blog RSS feed:

RSS Feed Print Screen

Moreover, Silverlight Weblog supports RSS/Atom feeds for each individual category:

Categories Tree displays RSS Buttons

Clicking the RSS Icon next to each category would provide the user with a link to it’s RSS link.

 

 

Twitter Integration

Silverlight Weblog displays the latest non-reply tweets from the blog author on the Sidebar.

Twitter Widget in normal mode

When mouseovering the Twitter widget it smoothly expands it’s vertical height to accoemdate easier reading.

Twitter Widget in expanded mode

At the end of each blog post, it is suggested to the user to retweet this blog post:

Twitter This blog post link

Clicking the “Twitter this blog post” link would open up a new tweet on twitter.com.

New Tweet on Twitter com

 

 

User Friendly URLs

Silverlight Weblog generates easy to remember user-friendly URLs.

This enables people to easily link to your Rich Internet Application and have it load up the relevant blog post.

Demoing a Permlink

 

 

Single and Multi-user Support

When hosting blogs, some blogs are meant for only one user while others are used by multiple users.

Silverlight Weblog supports both schemes with it’s easy to customize UI and user-relevant URLs.

User individualized home page

User individualized RSS feed

In the print screens above it’s easy to see how the blog supports multiple users through a convenient URL schema.

 

 

Authoring Rich Content with Macros

When authoring blog posts It’s always helpful to introduce richer content.

Macros translate text into visual elements.

 

For instance, the following macro (presented here as an image) would translate into a video player:

[SimpleVideo:source=http://mschannel9.vo.msecnd.net/o9/mix/09/wmv/key01.wmv | width=650  |height=400]

[SimpleVideo:source=http://mschannel9.vo.msecnd.net/o9/mix/09/wmv/key01.wmv|width=650|height=400]

 

This next macro will translate a literal string into a Visual XAML element:

[Xaml:string=<Rectangle Width="250" Height="250" Stroke="Black" StrokeThickness="1" Fill="Red" />]

[Xaml:string=<Rectangle Width="250" Height="250" Stroke="Black" StrokeThickness="1" Fill="Red" />]

 

And this last built-in macro would load up an external XAP file and present it’s main visual element:

[Xap:source=SilverlightTestApp.xap | type=SilverlightTestApp.MainPage]

[Xap:source=SilverlightTestApp.xap|type=SilverlightTestApp.MainPage]

 

 

SEO (Search Engine Optimization)

Silverlight weblog is fully indexable by Google, Bing and Yahoo.

Each Silverlight weblog has a Robots.txt and a Site Map which lets the search engine know of the available blog posts.

Silverlight Weblog testing Sitemap

Each blog post page emits the proper HTML as to be indexed by google and accessible to disabled users.

In the following print screen you can see the Text-Only Webrowser Lynx fully reading the content of a Silverlight Weblog blog post:

Text view of Lynx Silverlight Weblog

If you’re interested in this SEO technique you can read more about it at Brad Abrams’ blog post.

 

 

Deep Linking and Back/Forward Support

When navigating in Silverlight Weblog the URL Anchor fragment changes accordingly.

Which enables Silverlight Weblog to support Refresh, Back and Forward uses.

 

Search Deep Linking

Search Deep Linking

 

Category Deep Linking

 Category Deep Linking

 

Blog Post Deep Linking

 Blog Post Deep Linking

 

Home Page Deep Linking

Home Page Deep Linking

 

 

Google Analytics Support

Every user action performed in Silverlight Weblog can be logged into Google Analytics.

Google analytics custom actions

In the above print screen there’s a list of all User initiated actions (which did not cause a server postback) and have been logged in Google analytics.
Primarily, Loading Blog Posts, Performing Searches, Leaving Comments, Viewing categories and other user initiated actions.

 

Silverlight weblog also supports drilling down into specific google analytics data.
Here’s a drill down of which searches were performed and which categories were viewed:

  google analytics searches breakdown google analytics category views breakdown

On the left there’s a list of search terms searched, and on the right a list of categories viewed.

 

 

Management Back office

Using ASP.Net Dynamic Data an easy to use back office is generated for silverlight weblog.

image

 

 

Extensibility

Silverlight Weblog is fully extensible.

Each piece of the UI is considered a Widget and each response is an independent Service.
Widgets and Services communicate through Messages.
Both of which are loaded dynamically by MEF which ends up composing the UI.

I’ll go into greater detail on this topic in future blog posts, but here’s an easy to understand breakdown of the UI:

Extensibility Silverlight Weblog overview 

Implementing custom Widgets and changing the default layout and behaviour is much easier than it appears to be.

 

 

Personalized Widgets

Through the Extensibility mechanism in Silverlight Weblog I easily implemented two of my favourite widgets.

Picture Sidebar Widget Business Card Widget

 

 

Custom Get Silverlight Screen

When first approaching a Silverlight Weblog, users will get an easy to understand “Get Silverlight” screen.

Custom Get silverlight screen

 

 

Customized Splash Screen

Silverlight Weblog supports changing the default loading splash screen into a more relevant user exprience.

In my case I wanted to let people know they were going into my blog.

Custom Splash Screen meant to scare little children away

 

 

Fin

There are many other features included in Silverlight Weblog.

Hopefully this first Silverlight weblog blog post was enough to give you a quick overview of this project.

 

One final note is I’d like to thank all Beta Testers who took part in making sure Silverlight Weblog actually works:
Scott Hanselman, Rob Eisenberg, Velvárt András, Yasser Makram, Rui Marinho, Ian Smith, Juan Puebla, Mark Woodhall and Jim Wightman.

 

Feel free to leave a comment and let me know your thoughts!

 

Sincerely,

-- Justin Angel



Comments

Justin Angel Says:

Wow, I'm actually leaving a comment in my own Silverlight powered blogging system.

Jeremy Likness Says:

This looks very sharp! Glad you had some cycles of testing and user feedback, it definitely shows. Not much more to add, other than I wanted to be one of the first besides Justin to comment here! (LOL)

Armin Says:

I want to see what happens when i leave a reply :)

Jorge Levy Says:

Nice job... it will increase the acceptance of Silverlight...

Downloading the code to check it and try to contribute...

Again, nice job...

W.Meints Says:

The concept of using silverlight to build a weblog is great.
But as I can tell now, there's still some things that need polish ;)

Keep up the good work though, because this could lead somewhere really really great!!

Justin Angel Says:

Sure, if you've got any feedback on what can be improved, let me know!
My email is J@JustinAngel.net

Michael Washington Says:

It looks great. Having my Garavitar automatically appear after I type in my email address is "Silverlight Cool". I also like how the box gets bigger as I type.

My only issue is that it woud be nice if the page did not load until I scolled down. It too a bit for all the graphics to load and when I scroll up and down the page it is sluggish.

Also my Google toolbar spell checker doesn't work :(

Balaji Says:

Great work man keep doin !!!!!!!!!!!

A small comment the Look and feel can be little improved to prove the capabilities.

John Papa Says:

Very cool Justin!

Travis Says:

Great idea! You make this an open source project?
Travis

Justin Angel Says:

Hi Travis,

Yep, Silverlight Weblog is open source under the permissive Ms-PL license.
Contributions and changes will be accepted as they come along.

Later this week I'll publish a few blog posts meant for developers on this blogging engine.

I want to remain anonymous in fear of MOSSAD Says:

It's taking ages to load. Dude do your modularization homework :-P

Justin Angel Says:

Really? It's pretty snappy on my dev and test boxes.
What exactly are you seeing? I'd love to solve it.
Can you email me at J@JustinAngel.net?

meez again Says:

I see your sunglasses. I mean they are nice and all as they fill with %%%. But it takes 10-15 seconds until it's done here in europe. This is unacceptable in teh day and age of teh interwebz for a weblog. I have a regular DSL connection. How big is the initial XAP?

Scrolling is also sluggish on my dual core 1.6ish ghz notebook here (which would nowadays be filed under a netbook). Mmmkay it's a big article too. But still, if it was HTML, it was a lot smoother. Maybe Microsoft should come up with a better flow content model for Silverlight. On the other hand, I haven't seen something similar (full content page) for Flash either (albeit I haven't looked really), so who am I to judge.

Ian Blackburn Says:

In the uk here too and on a pretty slowish connection from home <2Mb. The initial load took a few seconds but after that it is quick, and no issues in scrolling on my t61p laptop. Would be nice to lose that loading screen though and get the first content shown more quickly...

me again(st) Says:

Loading is a lot faster once the app is in the browser's cache of course.

But this time the browser displayed "Waiting for google analytics..." in the status bar while the screen remained white for 5 seconds or so... I think Big G should be invoked later when the page is already rendered and asynchronously.

Scrolling works fine now tho, dunno what was going on before.

Dan Wahlin Says:

Looks really nice Justin!

Davide Zordan Says:

Awesome!!! Very cool, great job :)

Ian Blackburn Says:

Great work - and a great mix of technologies. Will enjoy playing with the source from codeplex.

Many thanks!

SmartyP Says:

this is a neat project.. i will be curious to see the arguments over practicality versus functionality - i must admit it is very exciting to imagine an entire blog that can be Silverlight powered anywhere/everwhere..

this looks like a great first release, best of luck going forward with this!

Brad Abrams Says:

Very cool! Great work..
I think the initial load is a bit much, but I guess that has to do with the amount of graphics in the first post? What do you think loadtime will be on an average blog?

Oh, and any RIA Services feedback for us? i am glad it worked out for you!
..brad

Noam Says:

Very impressive work.
The scroll bat behaves a bit strange in my Chrome (4.0.288.1) - can't click on it, and before it just got activated when the mouse hovered over the current location. Now it just performs "pageup", every time I get the mouse to hover over it, and now it is stuck at the top of the page, even thouse using the scroll wheel of my mouse got me "here".

Glenn Block Says:

Very nice work Justin! And a great proof for SIlverlight.

Glenn Block Says:

Beating a dead horse, you definitely need to work on the startup time.

Justin Angel Says:

Thanks for the perf feedback.
I've implemented some changes and the blog has a 60% faster uptime.

Michael Washington Says:

Definate improvement on the page loading on 1/12/2010. The scroll bar works and is not sluggish. However now it it throwing some JavaScript errors on the page.

But, overall this is looking very good.

Joe Farro Says:

Wow, very well done! It's killed me to see so many silverlight 'pros' writing thier blogs in html, and even using flash..but there really wasn't a solution to really show off the technology. This looks like a great start! I love the SEO, Live writer integration, and widget functionality out of the gate. Nicely done!

Al Pascual Says:

This is fantastic, I'll be migrating my blog to this engine soon!

Rich Blumer Says:

Awesome job! I am looking forward to start blogging again soon and using this blogging engine.

Morten Says:

From a technically standpoint this is a great piece of work. Kudos! However from a UX standpoint, it's absolutely horrible. This feels like a Silverlight blog for the sake of Silverlight, and not for the sake of your readers. Your arguments for choosing Silverlight even seem far-fetched.
You are pretty much taking away all the control of my browser. Scrolling is choppy and not how I defined it in my system settings. I can't open a link in a new tab, or right click it and copy the link. Common browser gestures are simply ignored. Generally the normal browsing experience has been completely redefined to how YOU like it.

Don't get me wrong... I'm a huge Silverlight proponent (it's what pays my bills even), but I also think Silverlight should only be used where it makes sense, and let HTML do the job where it does the job well (which it could do just fine for most of this application).

Justin Angel Says:

Hi Morten,

Definitely good feedback.
All the things you mentioned (Right click, O/S level scrolling, etc) will be implemented as part of this blogging engine as soon as Silverlight 4 ships.
Unfourtnately, it's not possible to do those things in a consistant way in Silverlight 3, but it is possible in Silverlight 4.

Right now, from what i'm seeing, it's still a positive sum exprience. Users are getting a better and more responsive exprience and the issues you menbtioned are a small price to pay.

While I respect the position of "use RIA when appropriate" I don't subscribe to it. My position is "Kill HTML, Javascript and CSS". You can disagree with me, but it's my blog and it's my choice.

Morten Says:

We'll have to agree on disagreeing then :-) You can stab it, you can trash it, you can run smearing campains against it, but HTML will not die (hey you couldn't even get around it but had to use a 3rd party HTML-to-Silverlight module).

Even though you can implement more features in SL4, you will never be able to recreate how my particular browser acts, what plugins I'm using etc. Right-click->open in new tab is only one thing (and if I'm not mistaken with SL you can only open new window not a new tab).

Tim Erickson Says:

Sorry, Justin, I love your work for the most part, but I agree that I don't much like this all-SL blog. It's not too too bad, but that's to say it's not real good, either. Choppy all over (on a decently fast machine), slow load time (ok, I'm on free Sea-Tac WiFi, but hey), and completely and I mean completely unusable on my iPhone. I saw the link the the INPC article on twitter, and when I hit the link on my iPhone all I saw was the "Get Silverlight" graphic (yeah, right), and the article title/summary. There was no way for me to access the content. It looked like it was there below the fold, but I was totally unable to scroll on the page at all to get below the fold, if the content was indeed there.

That being said, I'm glad someone smarter than myself is trying this (blog entirely in SL) to push the technology!

Justin Angel Says:

Hi Tim,

If you've got specific features you'd like to see implemented or specific bugs you'd like to see resolved, I'd love to get on it. Ping me at J@JustinAngel.net.

It's an open source project, so for all I know you could end up sending me a patch :)

The blog is limited to running on platforms that support Silverlight.
Since there's rich content all around and it is a blog about Silverlight, I'm OK with that choice.

Sincerely,
-- Justin

Mike Greenway Says:

Hi Justin.
This is great! you have just opened a real big door and one that needed to be opened.

I have a slow connection and on my second visit it took about 3 seconds to load - thats in my OK range, I blink ones and it is up.

I think that you could do some great layout and be the first blog to correctly use all of my wide screen monitor. Ever other blog is just a thin strip of text in the center with a big blank spot on each side where the menus and ads shoulf be.

thank you for the great work

mike greenway

I don't want to know html and I'm really tired of " there are 136 javascripted errors on this page"

Jose Luis Latorre Says:

Fabulous, I was waiting for this :)
I'd be setting this up this weekend too - you are giving me work, Justin! - btw, there is any deployment trick's apart than the ones proposed at the project's website?
Other minor detail would be a right click menu when having something selected that provides copy/paste functionalities between others. on the links it could be "navigate to other tab". That would help much.

Best,
Jose

MrLim Says:

hi can silverlight website be view on mobile phone

Abdul Ahad Says:

Wow , great look, interesting .... will try it.

sudhir Says:

Nice job... :)

Oragamster Says:

This is good, but needs scroll work. The scroll chunk is just too big.

slyi Says:

I must compliment on your brave choise of SL for your blog over all it works quite well but with a few misgiving.

1. The loading time is bit poor, did you consider js binded splashscreen eg: http://dl.dropbox.com/u/6589941/jsdatabinding/index.html ~ 2 sec rather your current 10 sec PLT1 (6 Sec PLT2)
2. No WP7 support, maybe better in lynx :o)
3. Deep linking doesnt update the the current url

Regards
slyi

olivier Says:

Very cool project. Thanks for sharing it on Codeplex.
I'm a bit fade up of BlogEngine and all the memory leaks causing pool recycling on my web site, I'll test Silverlight WebBlog and certainly switch to it.

One question : BlogEngine is supporting exporting throught BlogML, Is your project supporting Import from this format ?
Else is it something planned ? Can I help to implement it if needed ?
Thanks again.

cool Says:

So cool,like.

Wim Says:

Just the fact that is has a custom scroll bar that doesn't work with the the gestures on my mouse or trackpad is reason enough to dislike it. Just like all those Silverlight login-windows that don't work with my password manager. Silverlight adds another incompatible platform layer like Flash did. It's the wrong direction and I'm glad Microsoft understands that now.

PHenry Says:

I think this is awesome! I love it and am thinking of checking this out for my own blog. But I have two questions I'm hoping you have an answer for. One, can you go black/white lists? And two, can you handle images inside the blogs?

I'm getting the same bozos littering my blog with sales/marketing "stuff" which my readers don't see (cause I delete them! haha) but I still have to deal with them. I would like to respond once by black listing emails or urls or something like that. Is that possible?

I like to put images in my blog, I'm very pictorial, and a few of my readers like that aspect of my blog. is this possible?

bala Says:

i m using treeview to bind records in lakhs based on hierarchial level ... rightnow i m developing application in SL bussiness application n db as sql server. i tried with both stored procedure & linq an entity based. But i see a issue with delay in binding.


i need a suggestion for this !! .

I m planning to shift to xml ....But need a correct choice. n NOTE:- these records are static.