Lightweight development, the quick follow-up

Time for a quick follow-up on my post on “Lightweight development“. So far, it’s worked great. Some conclusions, in no particular order:

  • GitHub is great
  • BitBucket is awesome too. I use it for some of my closed-source projects at the moment.
  • Git-tooling for windows is ok, even more devs should give it a shot
  • TypeScript is the best thing to happen to javascript in a long time. Don’t “but it’s microsoft!”- me, fire up npm and install the node package!
  • I didn’t like AngularJS because it felt to restrictive and complicated.
  • KnockoutJS is still my favorite lib for client-side databinding

There are so many libraries and frameworks in the open source ecosystem. Don’t waste too much time finding “the perfect fit”. Just pick something that feels natural and helps you to get stuff done.

Links #1

To compensate for my lack of posts, I will start posting some links to articles that I found interesting. Most of them dev related and actual, others not. This is just a replacement for “mail to friend” or “share on twitter”. 
DISCLAIMER: I do not necessarily completely agree with the contents of each post.

http://codeofrob.com/entries/a-note-on-working-hours-and-working-at-home.html

http://www.codinghorror.com/blog/2013/03/why-ruby.html

http://www.paulgraham.com/makersschedule.html

 

Lightweight development

A lot of the stuff I work on at home are merely prototypes or proof of concepts, and there’s really no need for an entire architecture with a lot of layers and files. In a lot of ways, it’s demotivating to have a heavy setup process before even typing the first line of code. “Create solution” in visual studio just seems too heavy for a lot of ‘hack and run’ projects.

That’s why I plan to focus more on brevity and development speed. An “every line counts” approach, where you can see what the intent of the application is in a glance, without scrolling through 100 files.

Some services, tools and frameworks I might use:

  • A free RavenDB instance on RavenHQ.com for dumping my data
  • GitHub
  • JsFiddle
  • Twitter bootstrap
  • KnockoutJS

This way of working provides a nice contrast with the larger projects I typically work on during my day job. Also, everything is in the cloud and open-source, which is great for a lot of reasons.

Hopefully this approach will allow me to be more productive.

Stay tuned!

My platform game engine using MonoGame

I would like to present the hobby project that I’ve been working on for a while now. It’s open source, and the repository is located at https://github.com/bramdemoor/MonoGame-PlatformerPOC.

It’s a proof of concept of a multiplayer platform game, built using MonoGame, the (pretty awesome) open-source XNA port. The main idea here is to play around with the POC until I have a solid foundation for a game. After that, I will start to develop the ‘real’ game (design document is ready, I’m looking forward to implementing it!).

I work this way because I often tried to do a lot of things at the same time in the past. Eventually, all these attempts failed miserably, so that’s why I’m taking the step-by-step approach now. And it’s working out pretty good so far.

When it’s completed, the engine will feature:

  • LAN network play for two to eight players (using the Lidgren network library)
  • Basic AI bots (allows up to 16 players in total)
  • In-game console
  • Full debug mode
  • Tiled level editor
  • Horizontally scrolling levels with parallax backgrounds
  • Multiple characters
  • Multiple game modes
  • Multiple weapons
  • Different tilesets and level backgrounds
  • Unit tests
  • Compiled to run at many platforms (“everything monogame supports”)

Some of these features are already partially implemented at the moment. But I still have a lot of work to do, and because of my limited time, it will take a while before everything is done.

Anyway, it’s in no way meant to be a one-size-fits-all game engine. It’s just a pile of code for my own use, but I hope somebody else can use it too.

In a while, I might post a video of the game in action, and also some follow-up posts about this project. All depends on the interest of course, so make sure to follow the project on GitHub or comment/tweet. That’s the best encouragement for a lazy developer 😉

Finally, here’s a screenshot of what the thing looks like now. Please note that I used some free graphics in combination with my own uber-sucky photoshop skills. The result: It looks like crap 😉

Don’t worry, the final game will feature graphics by a designer.

My first project on GitHub!

In my recent post Showing off code is hard I concluded that I wanted to focus more on sharing, the community and open source code.
A few days ago, I took a first step in the right direction. I created my very first GitHub repo! I forked this repo. It’s a simple demo of a multiplayer game using HTML5 Canvas for rendering, and SignalR for the network communication.
You can find my repo here. It’s called ‘Jetpack demo’, and builds on the foundations laid out by the original project. My goal with this project is to experiment with scalability, performance and manageability of games built on this simple stack. It’s not a real game, rather a proof of concept. At the moment, it only allows players to connect and fly around in the canvas. That’s about it 🙂
I really like the GitHub workflow so far. I’m using both GitHub for Windows and TortoiseGit. Putting small projects like this one online has a lot of advantages:
  • Instant backup
  • Can instantly show my creation to the guys at work 🙂
  • Maybe it helps/inspires someone
  • …and also…
…it puts some structure in my workflow!
Contrary to my projects at work, my personal projects tend to turn into a mess quite often. I start over a hundred times, throw code away only to realize I want it back, and I try to implement too much features at once. Working with Git (or any other version control system) makes me work more structured, even for mini-projects like this one. I do small, incremental updates with clear commit messages instead of dumping big-bang boatloads of code. This is a nice experience, so I’m going to put a lot of projects on GitHub in the future!
Specifically for this project, I have no real clue where it’s going. Worst case: it just sits on GitHub and gets abandoned. No harm there. It’s better than sitting on my harddrive.

But I might put some cool stuff in. Next things I might implement:

  1. Integrate a lightweight javascript game framework. Current #1 option for me is http://gamejs.org/, but I’m considering other options as well (let me know if you have a good one!). This abstracts away some of the canvas-related stuff and allows me to have an efficient and clear game loop.
  2. Experiment with simple physics, using server-side simulation and client-side motion prediction

Footnote: I often have the ‘my code is not good enough to release to the public’ syndrome. But more recently, I stopped giving a damn. If everyone thought that way, we’d still be in the stone ages of information technology 🙂

Book: The Agile Samurai

First post in the category ‘Recommended books’. More to follow soon!

The Agile Samurai: How Agile Masters Deliver Great Software

Verdict: This book is a great and fun to read overview of agile techniques.

Agile Samurai

  • It’s certainly not for project managers exclusively. Anyone involved with software development in any way benefits from reading this book.
  • Good eagle-eye overview of agile practices. Touches on a lot of topics without diving too deeply into the details
  • I made a lot of notes while reading:
    • General notes about the contents of the book
    • References to actual projects I was working on at that time (very applicable content!)
  • We used the book as an inspiration to improve our dev process at work
  • It’s a book from the ‘Pragmatic Bookshelf’, which is a great quality indicator in my opinion.
  • The book itself is very ‘agile’ and fun to read. Doesn’t get boring
  • Really, nothing bad to say about this book 🙂

Read more

Showing off code is hard

I recently created a Dribbble ‘follower’ account. Dribbble is a great website where designers show off small slices of their work.
I could spend hours just browsing and enjoying the nice stuff other people created. It’s nice that designers just need a few pixels on your screen to show off their work. Almost everyone can relate to their work and has an opinion on it. But if you write code for a living, like me, it’s a lot harder to show off your work.

People that don’t write code themselves have no clue what you’re doing in the first place. It’s just a bunch of lines in a language they don’t understand. Of course, the people using the web applications you create have a few ways to directly notice the impact of your code. For example, they can tell that it ‘it works smooth’, ‘never crashes’ etc. But that’s just the top of the iceberg, and most of the time, visitors and customers just take these things for granted. You only hear them when something bad happens, like crashes, data loss or downtime 🙂 It’s a pattern; front-end developers get more of the praise when something good happens, and coders take more heat when things go downhill. Devs might get a pat on the back for delivering solid code within the deadline. But in general, code is often regarded as a commodity instead of a craft, while I still find the thought process of creating software inspiring, fun and challenging.

But it gets even more complicated. It’s pretty difficult to show off code to our fellow devs as well. If I want to post some code snippets here, I’d have to add a lot of context before it starts making sense. I can’t just copy-paste some lines out and get ooohs and aaaahs for elegant LINQ-queries or tightly structured methods.
Open source projects are great – it’s common for a developer to have a Github account with a few open source projects in them. But creating and maintaining a decent open-source project takes a lot of time, determination and inspiration. It’s not something you do in just a few hours of spare time.
Sharing with colleagues is great, but we’re the www-generation so we want to share with the whole world.

At the moment, 90% of the work I do goes unnoticed. It’s buried in a codebase that’s silently buzzing on a server somewhere. It’s not very satisfying to write code and then forget about it. I know there’s more value to be gained from the work I do. But the process of extracting knowledge we can share and appreciate out of ‘anonymous’ codebases is hard and takes a lot of time. It’s difficult to put structure in our thoughts and create and share thoughts, snippets, libraries, patterns and projects. Personally, it even takes me way too much time to write a single blogpost. But even if it’s hard, quitting or whining is not an option. Progress starts with ourselves. Blogposts, open-source projects, conferences – we’re doing this stuff after our hours to create a community where we can share. I really appreciate the time people put in sharing, because I know how hard it is. Some people write thousands of great blogposts, and great new initiatives, projects and communities arise everyday. I’m confident that things will always get a bit better.

For me pesonally, staring at my feet was a mistake I made too often in the past. One of my goals for the future is to spend slightly less time coding, and a little more time sharing. If we don’t ‘market’ our work to our managers, our coworkers, the community and our clients, it might as well not exist. We have to show what we do and make clear why it matters. The key investment is time, and lots of it. But I’m convinced that it’s a good investment to make in the long run.

If you’re a developer, you probably experienced the feelings I’m describing here in some way. What’s your take? How do you show off your code? Comments or follow-up posts are appreciated 🙂

Strongly typed XtraReports

At work, we have an application that needs to generate PDF documents related to invoicing. While I usually dislike working with WYSIWYG editors of any kind, the process of creating PDFs to mail and print is so fixed unit-based that it actually makes some sense here. We ended up using XtraReports from DevExpress.
The problem with most reporting frameworks is that they are, well, reporting solutions instead of pure document generation frameworks. So all their concepts are tightly coupled to directly querying a database and aggregating data. Things I don’t need here: I just want strongly typed bindings on in-memory objects! Out of the box, I don’t see any simple way to achieve this. This means: let’s get to work! 🙂
 
Here’s what I want to end up with:
  • Layout created by the report designer, following all conventions of the reporting tool itself
  • A clean viewmodel, so we can prepare the data we want, using LINQ etc instead of some obscure reporting binding language.
  • All databinding strongly typed (e.g. in the’ code behind’ of the report document)
I was very happy when I found the blogpost ‘Strongly-typed Telerik reports
by Jimmy Bogard. I quote: “Magic strings are maintainability grenades, and I like to squash them wherever they show up.” This post really set me on the right track. But Jimmy’s solution is for Telerik, and since we used DevExpress, I had to move some things around. The solution presetend here also uses the ‘UINameHelper‘ class (just google “UINameHelper”). Our custom class where the magic will happen is DevExpressBindingExtensions:
using System;
using System.Linq.Expressions;
using DevExpress.XtraReports.UI;

namespace Reporting
{
    public enum SimpleFormats
    {
        None,
        Date,
        Currency
    }

    public static class DevExpressBindingExtensions
    {
        public static void BindTo<TModel>(this XRLabel label, Expression<Func<TModel, object>> expression, SimpleFormats format = SimpleFormats.None)
        {
            label.DataBindings.Add(new XRBinding("Text", null, UINameHelper.BuildNameFrom(expression), GetFormatString(format)));
        }

        public static void BindVisibilityTo<TModel>(this XRControl control, Expression<Func<TModel, object>> expression)
        {
            control.DataBindings.Add(new XRBinding("Visible", null, UINameHelper.BuildNameFrom(expression)));
        }

        private static string GetFormatString(SimpleFormats format)
        {
            if (format == SimpleFormats.None) return "";
            if (format == SimpleFormats.Date) return "{0:dd/MM/yyyy}";
            if (format == SimpleFormats.Currency) return "{0:€ 0.00}";
            return "";
        }
    }
}
 Then, in a document, we can bind a label like this:
lblCompanyName.BindTo<InvoiceDocumentModel>(m => m.Invoice.Company.DisplayName);
Or we can use a simple format:
lblAmountTotal.BindTo<InvoiceDocumentModel>(m => m.Invoice.AmountTotal, SimpleFormats.Currency);

Finally, we need to address one more issue. As far as I could tell, XtraReports only allows us to bind to collections, and we have a single model instead. Let’s put the fix for that in a single place, the line where we render the actual report:

        internal byte[] RenderTemplate(XtraReport template, TModel model)
        {
            using (var memoryStream = new MemoryStream())
            {
                template.DataSource = new[] { model };        // WHY: XtraReports can only bind to collections
                template.CreateDocument();
                template.ExportToPdf(memoryStream);

                return memoryStream.ToArray();
            }
        }
This feels a lot more natural to me than the standard databinding features. What do you think? Useful or not? Any feedback is welcome!

Twitter bootstrap

A few weeks ago, we built a new internal tool at work. Developing this very UI-intensive application required me to write more javascript, CSS and HTML5 and less C# than I’m used to. The process of writing so much javascript in a structured way is worth a blogpost of its own. For now, I want to focus on how we created the layout.

For an internal tool like this one, functionality is much more important than design. But although there’s no designer involved, people expect it to look good anyway. So I started looking for a quick way to make a decent layout. I could use a template or framework of course. But I was a little reluctant to that, because in the past that often resulted in me fighting the template, to ultimately end up with a less than optimal solution.

And then my colleague Thomas (who helped me build this app, even on a Sunday!) suggested to use the Twitter bootstrap framework, the UI framework created by some smart guys at Twitter. I checked it out and was pleasantly surprised…

Image

I instantly liked it, mainly because:

  • It’s very easy to get going
  • It has everything you’d expect in such a framework
  • The documentation is good
  • The design itself is very clean
  • As far as I could tell, it follows common conventions (both in layout and code)

But what I like most about it is the philosophy it follows. The way everything is structured just makes sense, even to someone who’s not a UI specialist. Just glance at the following snapshot, taken straight from the docs:

This is the kind of html you’ll be writing to do 80% of the work. Nothing complicated here. It’s completely void of any boiler plate code you’d typically have to write.

Finally, the knowledge you gain by using a framework like bootstrap is very relevant. It’s not about learning to work with a bunch of very specific abstractions. It’s submerging yourself in a coherent set of best practices presented in the best way possible: a working and modular framework.

Conclusion: Twitter bootstrap is a very useful framework for prototyping and developing tools and backend systems. I’m not sure how it fits in other use cases (as the base of a large website for example). As with all frameworks, It’s probably not the holy grail for all types of webapps and websites in the world. Anyway, I highly recommended it and will certainly use it again in future projects.

Side note: another great thing that we ended up using the (optional) LESS version of bootstrap. Checking out LESS was on my TODO list for a while, and I’m glad I had a hands-on start now.

Bram’s toolbox: Evernote

Let’s kick off this relaunch of my blog with a series: Bram’s toolbox. It’s a simple concept: I introduce a tool/application that I’ve been using for a while and that makes me happy while I use it.

Today’s tool of choice: Evernote – an application to manage notes.

When I started using this application a few months ago, I instantly liked it. I’ve been using it ever since, stockpiling notes like a maniac. I’ve used a lot of other approaches for managing my notes in the past, and they all sucked. But this just feels right.

My evernote account currently holds more than 500 notes. This is a massive amount of information that would be hard to manage with most other tools. Can you imagine working with 500+ word docs organized in folders?

Some of the stuff I store in it:

  • Interesting things I read about programming. And that’s a lot of content!
  • Interesting articles about various subjects (news, history, health, lifehacking,…)
  • Guides to games I play
  • Guitar tabs
  • Some really funny pictures
  • Recipes
  • My own ‘sysadmin’ notes about configuring  PCs, smartphones and networks
  • Some blogpost drafts
  • Small code snippets
  • Inspirational stuff, like interior designs and website designs
  • My own notes about programming, e.g. libraries I used, tricks, procedures,…
  • Memories of nice moments (picture + quick notes)
  • Interesting tweets
  • General notes about… Anything
  • Inspirational/funny quotes

What I really like about evernote:

  • The web clipper. So much better than bookmarks, because… It saves the html and images for eternity.
  • The free account, which I use, is good enough. I’ve never hit any limits so far.
  • It just works
  • Store massive amounts of information without thinking about ‘files’
  • Easy searching, tagging etc.
  • Organize stuff YOUR way. The application doesn’t get in your way
  • Don’t waste time creating ‘documents’ with a ‘layout’ in a ‘folder’ when all you want to do is dump text and hit ctrl + s

Things I don’t do in evernote:

  • Everything that involves dates (that stuff gets messy fast, and belongs on my google calendar)
  • Overviews of stuff I’m currently working on, todo lists, goals I need to keep track off etc => those things go in Trello, which is another great app that I will feature in this series.
  • Links to websites I visit regularly. That’s what bookmarks are for.

Anyway, hopefully this post helps someone. I personally know some chaotic bookmark-hoarders who would certainly benefit from using Evernote. 🙂

Disclaimer: I’m not affiliated with any tools I promote in this series. I don’t get any money or perks.