Tales from the Evil Empire

Bertrand Le Roy's blog


Bertrand Le Roy

BoudinFatal's Gamercard

Tales from the Evil Empire - Blogged

Blogs I read

My other stuff


October 2010 - Posts

Hello Netduino!

(c) Bertrand Le Roy 2010We’re makers, all of us, we build stuff for work and pleasure. Software development is a great discipline for people like us as the ticket to entry is relatively modest. All you need is a computer and that is pretty much it. There is no real limit to what you can do.

Today, hobbyist electronics are blooming thanks to the availability of the universal logical components that are microcontrollers. Open-source hardware platforms such as the Arduino give anyone the ability to build pretty much anything they can think of for a few dozen dollars.

Microcontrollers are for all practical intents and purposes small computers with a bunch of digital and analogic inputs and outputs. They are more powerful than the multi-hundred dollars Ataris and Commodores I was playing with in my youth. And now, they can even be programmed in C# and debugged from Visual Studio.

Today, with the help of my friend Fabien, I started playing with one such microcontroller: a Netduino, which you can buy for $34.95. After stealing the micro-USB cable from my Kindle (most smartphones come with one too) and downloading the .NET Micro-Framework and the Netduino software, I was able to write my first program, which is just blinking the on-board LED until someone presses the on-board button:

public static void Main() {
    var ledPort = new OutputPort(Pins.ONBOARD_LED, false);
    var switchPort = new InputPort(Pins.ONBOARD_SW1, false,
Port.ResistorMode.Disabled); while (switchPort.Read()) { ledPort.Write(DateTime.Now.Second % 2 == 0); Thread.Sleep(100); } }

Here, I’m opening a port to the LED and a port from the button. Don’t worry about the other parameters for now, they are advanced features that you don’t need to know about just now. I haven’t myself taken the time yet to dive in there.

I’m then reading the button state until it’s false (counter-intuitive, but false is pressed). In the loop, I’m getting the state of the LED to toggle every second and tell the controller to sleep for 100ms until the next iteration.

That’s nice but how about some real hardware interaction? Well, we’ll do some of that next time but before I conclude this short post, here are a few little tricks I learned along the way…

  • Even though the Netduino has a power plug, you don’t need a power supply until you build autonomous projects: the USB cable is perfectly sufficient to power the microcontroller while connected to a computer.
  • You’re going to build your projects on a breadboard, and microcontrollers dangling to a USB cable have a natural tendency to wiggle around and fall off the table. Just get a big rubber band and use it to secure the microcontroller on the breadboard.
  • You’re going to need lots and lots of wires so buy a lot. The nicest to use are jumper wires, which take about a tenth of a second to plug or unplug into your Netduino ports or into a breadboard.
  • Oh, and resistors too. Well, we’ll include a big nice shopping list to the next post.
A quick look at what’s new in Orchard 0.8

(c) Bertrand Le Roy 2010We shipped Orchard 0.8 on Monday and it’s the last release we will make before 1.0, which is scheduled for January 2011. We think it’s a pretty nice release in that it wraps up the UI story for the platform.

1. New theme engine with Razor and Clay

ASP.NET MVC, on which Orchard is built, supports alternative view engines. Orchard does too, and 0.8 is the first release where the new Razor view engine is the default. All existing views in Orchard have been moved to Razor. An introduction to Razor syntax can be found here:


We also improved the way view models are built in Orchard: in a CMS, the type system needs to be flexible enough to allow for the dynamic creation of new composite types at runtime. That very flexible data model then needs to be morphed into markup, which makes using statically-typed view models hard. Instead, Orchard builds for each page an intermediary Page Object Model (POM) that will represent the data structure of the page with dynamic objects. Those dynamic objects, which we call shapes, are extremely easy to build, modify and extend at runtime: they are Clay objects.

Shapes are the representation of arbitrary semantic constructs that are then going to be rendered by the theme engine. Examples of shapes are layouts, zones, menus, menu items, pagers or whatever you want to add. Here is an example of shape creation:

var msg = New.Message(
Content: T("This is a test"),
Severity: "Really bad!!!");

No Message type is pre-existent here, we are creating a Message shape with two properties on the fly. After this, you can for example access the Content property as expected: msg.Content.

If that shape has been added to another shape in the POM, when it comes time to render it, the theme engine will look for a message.cshtml template in the views folder of the current theme and will hand it the shape as the model and render it.

@T("Something happened: {0}. It's that bad: {1}.",

Alternatively, instead of using a template, you can use a shape method. This is useful when you want to define the default rendering of small shapes. Shape methods are methods marked with the Shape attribute and have the name of the shape to render.

For example, the above message could be also rendered using the following method:

public IHtmlString Message(string Content, string Severity) {
    return T("Something happened: {0}. It's that bad: {1}.",
        Content, Severity);

Themes can also contain dynamically compiled code and in principle could do everything a module can do. That enables a theme to have its own control panel for example.

2. Widgets!

The second big feature of this release is widgets. Widgets are small pieces of reusable UI that can be arbitrarily positioned on the pages of your site. Examples of widgets could include a tag cloud such as the one you can see in the left sidebar of this blog, or a search form, a twitter feed or whatever you can dream of.

In Orchard, widgets are content types, which enabled us to reuse a lot of existing APIs and UI, and which will enable you to factor a lot of your work efficiently between regular content types and widgets.

For example, if you look at the optional map module that is available on the Orchard module gallery, you will see that the map really is implemented as a content part. A content part is a small piece of content focused on a specific task such as mapping.

You can add the map part to your own content types. For example, you could add a map to an event content type and show the location of that event.

Because a widget is a content type, and the map is a content part, building a map widget is trivial. Here’s how you do it:

"MapWidget", cfg => cfg .WithPart("MapPart") .WithPart("WidgetPart") .WithPart("CommonPart") .WithSetting("Stereotype", "Widget"));

This code is creating a new content type named MapWidget with the common part, the map part, and the widget part and stereotype (that makes it a real widget and not just a plain content type).

You can then go to the manage widgets admin panel and see the map widget in the list of available widgets:Widgets and layers

You can also see on the left the list of layers, and in the middle the list of available zones.

Layers consist of a rule that determines what pages the widgets of the layer apply to, a set of widgets, their zone assignments, display orders and configuration.

Before you add a widget, you need to decide where it’s going to appear. Do I want it on the homepage only, on all pages, only for authenticated users, or somewhere else based on some other criterion?

If there already is an existing layer with the rule you want, use it, otherwise you’ll have to create your own. For example, let’s create a rule that will apply only for the About page:Adding a layer

I’ve entered a very simple rule which is that the rul is ~/about. You can in fact write much ore complex rules as the language that’s being used to parse the rules here is IronRuby. That means you can use nots, ors and ands in there and combine rules in any creative way you want. You can even add your own rule syntax if you want to by implementing IRuleProvider. Orchard comes with the url and authenticated rule providers which you can see in use in the TheHomePage, Authenticated and Anonymous layers.

The Theme Machine's zonesThe list of zones you can see in the widget management page comes from the theme’s manifest:

Name: The Theme Machine
Author: jowall, mibach,
loudej, heskew Description: Orchard Theme
Machine is a flexible
multi-zone theme that
provides a solid
foundation to build
your site.
It features collapsible
widget zones and is
flexible enough to cover
a wide range of layouts. Version: 0.1 Tags: Awesome
Zones: Header, Navigation,
Featured, BeforeMain,
AsideFirst, Messages,
BeforeContent, Content,
AfterContent, AsideSecond,
AfterMain, TripelFirst,
TripelSecond, TripelThird,
FooterQuadFirst, FooterQuadSecond,
FooterQuadThird, FooterQuadFourth,

All the zones available across all the layouts of the current theme will be displayed on the widget management screen. The one I’m interested in here is AsideSecond. After I clicked “Add to Zone” next to the map widget, I could configure it with the AsideSecond zone, and then give it a title and the location of the core team:Adding the map

After saving and navigating to the about page, I can see my map in place:The map widget on our about page

3. The rest

Orchard 0.8 shipped with a number of smaller features such as e-mail notifications, more pagination support and various little improvements. Of course, it’s not perfect, and we had our share of regressions (see release notes), but we’re advancing.

We are now sprinting to 1.0 which will be released in January. There is a lot left to do, in particular for performance, security and hosting (medium trust has been a much requested feature since we started the project for example).

But even 1.0 will be only the beginning: it will be a platform much more than a finished CMS. There are lots of small and big features that we deprioritized in favor of infrastructure in order to ship in January.

See this as an opportunity: the community (that’s you) will provide lots of these missing features and much more. If you are a student, there is even a competition going on as part of the Imagine Cup that could win you a nice trip to NYC.

So go, go, go! Make themes! Make widgets! Make modules! Make amazing stuff!

Orchard 0.8:

Using LinqPad to open SQL CE 4.0 databases

(c) Bertrand Le Roy 2010I love SQL CE 4.0 because it promises to solves a problem that only SQLite has been able to solve thus far: no-install, x-copy deployable relational engine with good performance.

The disadvantage in using such a recent engine is that tooling is only slowly coming together and is not there yet. I’ve been playing a little with LinqPad though and have noticed that SQL CE 4.0 was already supported. Here’s how to set it up.

Download and “install” LinqPad (the install is just unzipping the package wherever you want):


Once you’ve unzipped the package and double-clicked the executable, you should see the following screen:

Now click “Add Connection”. Switch to “Use a typed data context from your own assembly” and click “Entity Framework” then the “Next >” button:Choose data context

On the next screen, under “Data Context”, choose “Automatic”, and under “Provider” choose “SQL CE 4.0”.Connection paramatersFinally, click “Browse” next to “Attach database file” and choose your SQL CE .sdf file:Browse to your sdf file

Click “OK” and there you go: your SQL CE 4.0 database opens in LinqPad:Database opens in LinqPad

That was easy. But still, super-useful.

UPDATE: Sébastien Ros reminds me that there is a SQL Server Compact toolbox that integrates into VS and that you might want to try as well:

Building my new blog with Orchard – Part 3: one way to skin a cat

Building the houseThese last few weeks I’ve been refraining from starting any deep work on my new Orchard-powered blog because most of what I had in mind involved widgets, which are being built right now. Version 0.8 is just around the corner: the team is just putting the final touches to the new theme engine and to the widget system.

In the meantime, there is still some work I could do that I knew would not be throw-away, and that is CSS.

My objectives with this new blog is to reflect in design what the content is about and what it is not about. VuLu is about knowledge, science, art and philosophy. It’s not about shiny gadgets, technology or engineering.

That of course means I want nothing web 2.0 in here. Good thing as I don’t have much love for rounded corners and shiny gradients.

Too shiny

Too round

Too many gradients

Seriously, I'm not a designer so I had to go for something simple to set-up and maintain, but it comes as a welcome coincidence that the designs I've been liking lately have been heavy on typography with an emphasis on imperfection and organic looks.

Collages, organic textures and rough typosUnclean, organic look, subdued and natural colorsAlmost monochromatic, unclean textures

But I wanted something even more radical than this, something that would look more like a book than like a web site. Preferably even like an old science book. The Dollar Dreadful web site is a pretty good example of what I had in mind, although it looks more like a wild west newspaper than a science book. The monochromatic, ancient look and reliance on typography are all there though:Monochromatic, heavy on old typography and gravure-style imagery

I started from Jon Wall’s Classic white theme for Orchard, which is extremely simple and typography-based:The Classic white theme

I wanted the markup to remain the same so that I could switch to the new version of the Classic theme when it’s available and also because it’s rather clean to begin with. The only adjustments I wanted to make for the moment were to the style sheet and images. More precisely, I wanted to change the typo.

Typography has not got enough love from web designers, mainly because their options were fairly limited so far. In the last few years though things have started to look a lot better and including font beyond the boring Times, Arial and Courier we were forced to use before is now possible with little effort. And it even works on old versions of IE.

There are many options, such as typekit.com, that recently got lots of high quality fonts added by Adobe, but that’s not a completely free option and it so happened that I found exactly what I wanted on Google’s Font Directory. I went for two imperfect and ancient-looking fonts: OFL Sorts Mill Goudy TT for the text, and IM Fell English SC for the titles.

OFL Sorts Mill Goudy TTIM Fell English SC

I am particularly fond of IM Fell English SC, which has a very pirate-y look.

Adding the fonts to the site was extremely simple and was done pretty much the way you’d expect it, in the style sheet:

body {
    font: normal 62.5% "OFL Sorts Mill Goudy TT", serif;
height: 100%; text-align:left; color:#444; background:#eee; } h1,h2,h3,h4,h5,h6,legend {
font-family: "IM Fell English SC", sans-serif;

I did have to include Google’s font bootstrapping library to my theme’s document.aspx:

<script type="text/javascript">
WebFontConfig= {
google: {
families: [
'IM Fell English SC',
'OFL Sorts Mill Goudy TT'
</script> <script type="text/javascript"

All I needed to do was to declare the Google fonts I intended to use in a small parameter object, then include a small library.

The rest of the changes to the original stylesheet were mainly size adjustments for the new fonts and removing all color to leave only shades of gray, nearly blacks and nearly whites.

In all of my blog posts, I try to include an illustration in order to make the post more appealing. On this blog, I’ve been using mostly my own photography but that wasn’t an option on the new blog because of the black and white parti-pris. After some binging, I did find quite a lot of public domain illustrations coming from old science books that were exactly appropriate for the site. In particular, Gray’s anatomy and http://www.oldbookillustrations.com/ are gold mines if you’re into that sort of delightful old-fashioned gravures.

In the end, I’m quite happy with the end result and how it looks on post pages, although it’s still a little too austere on the home page because of the lack of illustrations and widgets. This will improve soon.The current look of the site

You can find the first two posts in this series here:

More Posts