A lovely new minesweeper on android I made

Today I am finally releasing my little minesweeper for android! I’ve been working on this as a hobby for the past few weekends, and now it is finally smooth enough to let other people see it! The problem with most minesweeper applications in the market is that they are either really ugly or haven’t really figured out how to adapt the original mouse controls to a touchscreen. I set out to solve these two problems so I can play some mines on my phone!

To solve the ugliness problem, I drew some tiles in photoshop in a very minimal style, to disturb the eyes as little as possible and let you focus on the game. Here is how it turned out.

mines on the nexus 7
mines on the nexus 7 (click to open full res; kind of depressing how a screenshot from a tiny tablet doesn’t fit my 15′ macbook pro’s screen at 100% resolution)

To navigate the board, you can use the normal multitouch gestures like pan and pinch to zoom. To place a flag, you can long press a tile or you can double tap an open tile and drag to a closed tile (these gestures won’t let you win speed competitions, but they’re pretty good if you’re lazily solving the board)

drag from an open tile...
drag from an open tile…
and put a flag
and put a flag

You also get some pretty sweet statistics when you win or lose!

boom!
boom!

 

 

Download it here!

Facelift

So it was time to update the visual of this blog, as the default twenty twelve wordpress theme was starting to show its age. I started finding it visually boring a few months ago and the fact that it is not a responsive design let me to decide that a redesign was in order. My original idea was to just create a new responsive template using foundation, but after some research it turns out creating a wordpress there is quite an involved process. Not only would I have to create all the theming HTML/CSS, I’d also have to integrate them in the necessary PHP code scaffolding. As most tasks that require a significant time investment, I put this off indefinitely.

Luckily a few weeks back with a new wordpress came a new default theme, twenty thirteen. This is a nice responsive theme which places visual emphasis on the actual posts with larger fonts and no cumbersome sidebar (all that stuff is now in the footer, which is a great idea). This meant I only had to edit the CSS to get something which fulfills my requirements and has at least some identity.

The process started by creating a child theme. Since I am quite happy with the base layout, all I needed to do was to edit the colors to my heart’s content. Like all color challenged engineers I had to resort to some cheating. The usual place to cheat is to pick a pallete from colourlovers; but I find it is still an overwhelming experience. There is still simply too much to choose from. What I need is a very constrained set of good looking colors. To the rescue: flatUI colors. I picked the midnight blue as the main color for the header as a nod to the visual design my homepage had during my teenage years (nostalgia time). Then I desaturated it for the other blues I needed. For some contrasty accents, I went with the alizarin, which is also a pretty cool name for a color. Here is the pallete I built:

Alizarin
Midnight blue
Random blue #1
Random blue #2

Even though a real graphic designer is probably appalled by these choices, I’m pretty proud of how the visuals turned out. I have recently started paying more attention to design, which I think is an often overlooked area by scientists and engineers. It is already hard enough to communicate our work to a wide audience  and boring designs aren’t helping one bit.

SASS is awesome and you should use it

Trying to fix some bugs in the mobile layout for prospicious I realized the stylesheets had become an unmaintainable mess. So I converted the codebase to use SASS which was a bit of a pain because I had to convert well over 800 lines by hand. Luckily though there is backward compatibility so I could leave many classes untouched. However monstrosities like

can be simplified by the use of mixins, essentially the SASS version of macros:

By using mixins and variables you can avoid the annoying repetition of property blocks so common in large stylesheets. Better, by defining global variables you can iterate properties such as colors quickly, without constantly using find and replace, which is extremely useful when you’re at the prototyping stage of your app.

I found SASS via foundation, the responsive css framework I used for prospicious. They suggest the use of SASS in conjunction with compass which is a css authoring framework. I tried playing around with it but creating a new project resulted in an insane project hierarchy in the filesystem with html files and asset directories when all I wanted was one folder with sass files and one with css to integrate in my existing project.

This appears to be a problem in general with frameworks, they try to do everything for you and you end up with a bloated code base with hundreds of unused lines of code. Foundation is modular enough that you can just pick whichever parts of it you want in your code and not include the rest. Perhaps compass offers this as well but I couldn’t immediately find it so I stuck with ‘normal’ SASS and a handmade folder structure which served me well.