Time to put some new prints on my walls. Here's a little generative thing I've created to get the job done - a generator that spits out 18 variations of lovely origami-like figures - all in SVG, so that they'll scale well.
During the past few months I had a gig at fastforward, one of the most experienced Magnolia CMS implementation companies in Switzerland.
I was involved in the relaunch of Montanara, a provider of wonderful mountain, ski and trekking tours through the Swiss Alps. My primary responsibility was the implementation of the new UX/User-Interface and some e-commerce features.
We used Magnolia, a Swiss-made and java-based open-source CMS, to produce the solution. It was the first time I had used Magnolia and this post is about some of the experiences I had along the way.
This blog is running on an outdated version of Wordpress and an update is desperately needed. Since updating a customised WP-Version can be a pain and I don't really need all the features WP offers, I decided to switch to a static site generator. I had a look at a couple of options and settled for Wintersmith. It is straightforward to setup and easy to customise.
Here are some notes on how I customised this blog using Wintersmith.
Based on the work I did for cocomoshi I created this small library called Keystrokes.js. The library allows for an easy and interactive way to display shortcuts and controls.
At cocomoshi we like it a little playful.
And retro.
Tools/frameworks that minimize boilerplate code while not abstracting away the underlying technology are wonderful. Thanks to SASS and Compass it is actually fun to work with CSS3 and all browser specific prefixes. The combination is a great timesaver and helped me a lot to make the about page of cocomoshi just a little more playful. Here’s a little variation.
Here’s a useful little interactive cheatsheet I made to better remember all the functions inside the Flex lifecycle. I’ve never found the time to validate all the descriptive stuff so please use with care. Most of the information provided should be pretty accurate and should still be applicable to Flex 4.6. But again, be sure to double check.
This little tool visualizes the lifecycle of the Flex 4 Spark component model and hopefully helps to understand what happens behind the scenes.
Basically it is an expanded stack trace with comments showing the most important method calls during the lifecycle’s birth, life and death phase including invalidation and validation.
Flex is great to prototype.
Here’s a little thing I’ve thrown together a while ago. Pick and create football-formations.
It features a couple of custom components like a JerseyEditor, a simple Color-Picker a formation list and some custom item renders.
You can adjust the formations on the fly entering any system you like. Try 4-4-2 if you’re more in for a classical style, try 2-3-4-1 for an attacking lot or use drag and drop to adjust your own custom formation.
Clicking on a player opens up the editor so you can add your own players. And no, the colours of the jersey editor do not get passed over right now.
It’s been a while since Adobe managed to nuke its developer base with a single press release. In the past few months I’ve been repeatedly asked if I would still bet on Flex, so I might as well write it down. My short conclusion: Flex has a future but within a limited scope.
Quick note on how to copy all maven dependencies to a target folder.
If you can’t get Maven to work with a particular IDE or plug-in it might be helpful to at least copy all dependencies (jars) to a destination-folder. The Maven Dependency Plug-In will kindly assist you to copy maven dependencies to a target folder.
I had a look at Google App engine and some of the new features in Spring 3 (MVC).
I decided to create a platform for city ratings and –rankings. I polished the whole thing a bit in the hope to attract some visitors. I wonder if I can get some peaks in traffic to see how this service will perform in GAE under load outside of a stress test.
To see what I’m talking aoput, a first version is up and running at CityClash. To read about my experience with Google App Engine read on after the screenshot.
Mobile Flex Apps are around the corner. Hence it might be a good thing to inspect some of the more light-weighted approaches of Flex to create visual elements and components that can take part in the Spark layout process. In this last example I had a look at SpriteVisualElement.
Now, it’s time for the GraphicElement.
Example using custom Graphic Elements. View source is enabled.
Here’s a first version of a simple Ruler component that takes some of the techniques discussed in the couple of previous post into account.
The ruler can be scaled down or up by holding CTRL/SHIFT while clicking and can be moved by holding the ALT-Key and keeping the mouse button pressed. When scaling an animation is applied for smoother transitions. For the labels an array of Strings can be set, each one defining a division on the ruler. The number of subdivisions can be set as well
Simple ruler component. View source is enabled.
This took me a while to figure out.
In a project I created a custom PopUp, nothing fancy, just a couple of text inputs. When I tried to enable Tab key navigation I set the required properties but Flex would simply ignore tab key navigation to the input fields in the pop up.
The Documentation about the IFocusManager states that a pop up will get its own FocusManager and its own tab loop.
After some tracing I found that my pop up and its child weren’t included in the FocusManager as focus objects. In fact, there was no FocusManager for my pop up at all.
In Flex 4 the standard way to create a custom control is to extend from SkinnableComponent, then implement the handling and management of events and states there and use a separate skin class for the visual representation of the component.
A class that gets less attention, but might be useful in a couple of scenarios to create a control alternatively, is the SpriteVisualElement class.
This example shows an implementation of a simple ruler by extending the SpriteVisualElement.
