Blog posts


  • Add vertical dividers with CSS

    February 13, 2013 | Tags: CSS, HTML, Snippet

    This is a little snippet of how one adds a vertical line that is the same height to columns that isn't by using CSS.

    Lets say that you have a menu consisting of several columns, something like this:
    <style>
    .first-column,
    .column {
    float:left;
    width:200px;
    }
    .column {
    margin-left:30px;
    }
    </style>

    <div id="fat-menu">
    <div class="first-column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div style="clear:both;"></div>
    </div>

    And you would like to add vertical lines as dividers between each column. But using a border-left on all but the first column would not do it since the columns contains different amount of data and therefor are of different heights.

    Another solution would be to use CSS in order to add those lines and make them the same height of it's container, thereby following the highest column.

    This can be achieved by using the :before rule in CSS that injects elements before the matching element, in our case .column.

    Besides adding a new :before rule we need to make sure that any offset given using top and bottom attributes are relative to it's parent and not the window (or other grand parent). This is done by setting position to relative on the menu container.

    We use the margin in order to position the line 15 pixels to the left of the column.
    <style>
    #fat-menu {
    /* Set position so that offsets in children are based on parent */
    position: relative;
    }

    .first-column,
    .column {
    float:left;
    width:200px;
    }

    .column {
    margin-left:30px;
    }

    .column:before {
    content:" ";
    margin:0 -15px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666666;
    }
    </style>

    <div id="fat-menu">
    <div class="first-column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div style="clear:both;"></div>
    </div>

    Done! Adjust the top, bottom, background and margin attributes accordingly to your requirements.



  • FlashDevelop with Flex 4.6 and AIR 3.5

    January 29, 2013 | Tags: AIR, Tools, Actionscript, AS3, Flex, Flash
    If you followed the previous post about installing FlashDevelop with Flex you might notice that you got AIR 3.1 together with Flex 4.6. However, there are a newer version of AIR (currently 3.5) that adds some nice stuff. In order to use 3.5 you need to patch the Flex version. This might sound complicated, but it's really easy!

    1. Download FLEX 4.6 and unpack to the path you prefer (if you not already have).
    2. Download AIR 3.5 and unpack.
    3. Copy all files and folders from the AIR folder into the Flex folder. Replace all.
    4. Start FlashDevelop, now you have Flex 4.6.0/AIR 3.5 as SDK target!



  • How to install FlashDevelop with Flex

    January 23, 2013 | Tags: Game development, AIR, Tools, Actionscript, Open source, Flex, Flash
    This is the first of a series of post that aims to get a development environment set up ready for developing Flash-based applications for desktop and mobile (iOS/Android).

    FlashDevelop is a great alternative to Adobe Flash Builder, and it's completely free! In order to compile projects in FlashDevelop the Flex SDK need to be installed and properly configurated.

    Install FlashDevelop

    Goto http://www.flashdevelop.org/, download and install the latest release. The installer has an option to download Flex and AIR, but if you want a bit more control you can do this manually, as described in the following part.

    Manually install Flex

    Download the preferred Flex SDK, you find the latest version here or if you prefer a previous version (for instance 4.5.x) you can find older versions of the Flex SDK here.

    Unzip the archive to the destination of your choice, this will be the path to the SDK.

    Start FlashDevelop and goto Program Settings, found under Tools in the menu:

    Select AS3Context in the left menu and scroll down to Installed Flex SDKs, click the button to the right in order to bring up the next dialog:

    Click on Add (localized as Lägg till in the image below) to get a new slot for the Flex SDK. Select the new slot and enter the path to the previously installed Flex SDK in the Path property to the right (marked with yellow):

    Click OK.

    Congratulations! You now have an development environment setup in order to do some nice Flash development. Stay tuned for the next post on how to setup your first project.

    Note: You might want to patch the Flex installation with a newer version of AIR. You'll find instruction on how to patch Flex 4.6 with AIR 3.5 here.


  • Convert web application project to class library

    December 20, 2012 | Tags: ASP.NET, C#

    There's no way inside of Visual Studio to convert a web application project to a class library.

    However, this is pretty easy done using your favourite text editor of choice by editing the .csproj-file changing two lines.

    If you're  not totally confident with what you're about to do, make sure you start with making a backup!

    1. Open your project file (.csproj)
    2. Locate <projectguid> and make a small change to the GUID.
    3. Locate <projecttypeguids> and delete completely.
    4. Save and reload project in Visual Studio. It should load as a class library this time.


    Solution originally found here.


  • WCF and ASP.NET Compatibility Mode

    December 19, 2012 | Tags: ASP.NET, Troubleshooting, WCF
    Recently I had a troublesome error when developing a web hosted WCF service. The solution relied on some legacy components from an ASP.NET website - that is some cases throw errors, seemingly at random.

    After alot of trouble shooting I noticed that the problem only occured when - after building the project - I made the first request through a WCF client. The legacy components would then return errors until the project had been rebuilt. If I after rebuilding made a request to a test page within the WCF-project, the legacy components worked like a charm.

    Although I've done my fair share of web services in the past, this was my first WCF project. And there's a major difference between standard ASP.NET webservices and WCF.

    By default calls to the WCF service is run outside of the ASP.NET pipeline, in something called "Mixed Transports Mode". That means that it will bypass the ASP.NET pipeline and you'll loose things like HttpContext. Some of which the legacy components in my project apparently required.

    The solution was to switch to "ASP.NET Compability Mode". That means that the WCF request is treated as any other ASP.NET request.

    This is done by setting aspNetCompatibilityEnabled to true in the web.config:
    <system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
    ...

    And also decorate the WCF service class with the AspNetCompatibilityRequirements attribute:
    [ServiceBehavior]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]

    public class UserService : IUserService {
    ...

    To learn more about this I recommend the following post about ASP.NET Compability Mode.