Kartones Blog

Think Generic

Kartones — Sat, 07 Nov 2009 21:28:28 GMT

Sometimes, thinking in generic terms, instead of specific cases/problems, pays off later with greater benefits. I’m going to show you a small real world example.

When you develop a mobile website, you usually create at least two visual themes, and usually go up to three:

WML layer: Limited, almost text only, and very crappy because of the limitations of the devices requesting this version of the site.
XHTML layer, low/med-end capabilities: Devices that can render XHTML, some CSS, etcetera, but have small resolutions or some other problems (like no javascript, or a terrible CSS implementation, like PocketIE).
“Full” browsers: mostly WebKit and Opera for mobile devices. Capable of standard javascript, really good resolutions (and zoom), can run almost perfectly any website, just with a lower resolution than a computer.

If your website is properly developed, all the “mobile versions” will have a common logic layer and data layer (or if it’s an MVC, common Models and Controllers), so it’s just a matter of detecting what version the visitor falls into and rendering the appropiate view(s).

For WML is quite easy with the HTTP Accepts header, but with the more capable devices, we usually rely on checking the HTTP User Agent header.

As an example, this is an iPhone with 3.0 OS user agent string:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A542a Safari/419.3

For an iPod Touch is almost the same, just changing the “iPhone” with an “iPod”.

At first glance, a small regular expression to detect the words iPhone and iPod would solve the problem, no?

Well, it does, but not in a generic scope. Let’s see now how an Android user agent looks:

Mozilla/5.0 (Linux; U; Android 1.5; en; HTC Magic) AppleWebKit/528+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20

Using the proposed approach we would have to add “Android” to the “nice devices” list, but until then we would be rendering on all Androids the less fancy XHTML version.

But the alternative, is to search inside the user agent for two words, “Mobile” + “Safari” (order matters!). If you look at both user agents, they both are WebKit implementations, so both are Mobile Safari browsers. Using this second approach we already support all present and future Android devices without changing our code. In fact, we will support any new browser based on Mobile Safari!

So the lesson here is to try to go for a generic approach. In this example, targeting for browser type instead of specific device id gives a lot more flexibility with the same effort and even lowers the need of modifying the code in the future.

Two VirtualBox tricks

Kartones — Thu, 29 Oct 2009 00:09:52 GMT

At the beggining of the year, I was told to try VirtualBox as a Virtualization solution for my personal needs (trying Linux, and having a few VMs for things like beta versions of software). After fighting with VirtualPC, and not being convinced with VMWare, I must admit VirtualBox is almost perfect: USB support, 3D acceleration (experimental and not for games, but its faster than software rendering anyway), almost every OS (whenever its a Linux or Windows)…

But sometimes is not as easy to use as the others, hiding actions that, at least in my opinion, should be clearly visible and easy to perform. The two most common ones are this two:

Change UID of a VM: If you create a base VM, and copy the .vdi file, VirtualBox will complain that the UID is already in use. To change it on the copy, open a command prompt and execute (the executable is located in the VirtualBox install folder):
VBoxManage internalcommands setvdiuuid xxxxxxx.vdi
Mount a shared folder: To share folders between the host and guest operating systems, you have to use shared folders. But once you add one to VirtualBox, it doesn’t appear, does it? Well, you have to mount it manually (under my PC), because it is a network share instead of a virtual drive:
\\vboxsrv\xxxxxxxxxxxx

This are two actions you’ll end up performing sooner or later, so I hope they prove useful!

P.S.: As an offtopic note, I’m going to PHP Conference Barcelona this weekend so if you’re around and/or going just search for the Tuenti folks and I’ll be among them :)

Building a very basic Google Wave extension

Kartones — Tue, 20 Oct 2009 23:43:02 GMT

Alhough seems that all of us who have been invited recently to Google Wave have some limitations (can’t invite others, don’t have the “Extension Installer” wave…), we can still play a little with it and develop some wave extensions.

I’ve based my article in the official gadgets tutorial. You can’t create robots too, but to get the feeling of how all works I prefered something very simple. I’m going to create a small extension to be able to search in the posts of Kartones.Net and list the results inside the wave (google names ‘wave’ to a conversation thread).

An extension is just an XML file, containing two parts:

XML nodes detailing all configuration options, name, default size, etcetera.
A special XML node containing the full HTML of the wave.

Yes, as you will have noticed this is a bit clumsy and not the best option to debug, but at least works (I suggest to build the basic HTML and Javascript first in an HTML file and then add the extension XML and rename it).

I’m not going to repeat what it’s perfectly explained in the tutorials, so I’ll just show what my extension contains:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Kartones.Net Wave" height="50">
    <Require feature="dynamic-height"/>
    <Require feature="wave"/>
</ModulePrefs>
<Content type="html">
    <![CDATA[

    ]]>
</Content>
</Module>

The <Content> node will contain the HTML and javascript, we will store data inside the wave (<Require feature="wave"/>) and the extension will change its height when needed (<Require feature="dynamic-height"/>).

Our HTML will be quite simple:

And the JS a bit more but nothing too complex:

Basically, if we’re inside a wave, we setup a callback handler for state changes (SearchButtonClicked() sends state changes, that are nothing else than variables) and StateUpdated() gets called when we input something and click on the Search Content button (to avoid too many calls, if we haven’t wrote anything or is the same as was previously, no data is sent).

We use an iframe to render the search results, and we tell our gadget to update its height (to the iframe’s one in this example).

This is the final result (with a search performed):

If you are on a wave with multiple users, you can all search. Just remember that as this state is shared between all participants of the wave, only one search can be active at once (last value will override previous one).

You can test this extension inside Google Wave by adding this gadget url: http://Kartones.net/Demos/015/kartonesnet_wave.xml

ASP.NET: Flushing files to browser with Response.AddHeader()

Kartones — Sun, 18 Oct 2009 20:49:01 GMT

This post should be nothing new for people used to ASP.NET 2.0 or higher, but at my last job I had to fix a summary download page that was not flushing correctly the content to the browser (it appeared as downloading the .aspx page instead of a csv file).

Probably because of the configuration of IIS, the content header was not being applied correctly with Response.AppendHeader(), so just changing it to Response.AddHeader() it was solved.

Response.Clear();
Response.ClearHeaders();
Response.ClearContent();
Response.ContentType = "text/plain";
Response.AddHeader("Content-disposition", "inline; filename=" + summaryFilename + ".csv");
Response.Write(summaryResults);
Response.End();

So, if AppendHeader doesn’t works as it should, give a try to AddHeader.

5 Technological gurus I admire

Kartones — Mon, 12 Oct 2009 23:32:58 GMT

It is common to have models in life, to dream to be like them someday. Some people chose actors, others singers or rock stars… I’m selecting 5 technology-related individuals that I think are real gurus, people I really admire for their intelligence and the work they have produced.

Note: The list is in no particular order.

John Carmack: One of the fathers of the 3D first person view shooters (FPS), and early adopter of the shareware model in the 90s. A guy who loves creating 3D game engines and probably a math expert, who developed Doom RPG “because of the challenge of developing in such a limited hardware as J2ME mobile phones”.
Peter Molyneux: Creator of some games that marked my AMIGA and first PC years of gaming, Molyneux can be credited both for having fantastic and different game ideas, and for hyping so much his latest creations with features that end up simplified (Black & White, Fable). Nobody is perfect and innovation sometimes leads to dead-ends, but Bullfrog games were and will always be among my favourites.
Shigeru Miyamoto: As TIME magazine said, he’s “the Walt Disney of electronic gaming”. Creator of so many all-time classics for Nintendo consoles that the list has its own Wikipedia page. Mario or Zelda wouldn’t exist without him.
Charles Petzold: A 56 year old developer that started with Assembler in the 70s and now has written two books about 3D programming using WPF. Somebody with such a mind to still be developing and learning the latest technologies and programming language is simply amazing.
Mark Russinovich: As I like to say, its “the man that knows more about Windows than Microsoft”. Logically, Microsoft hired him on 2006, but his Windows Internals books (and his blog) are the deepest sources of Windows knowledge by far.
Apart from the things noted in the Wikipedia entry, Russinovich is the kind of guy that finds a problem with a driver, debugs it, finds the source and sends feedback to the owners of the driver X)

Apart from these five, I want to make two special mentions to “finalists” that didn’t made it because lately the quality of their work is (in my oppinion) going down drastically:

Hideo Kojima: Apart from defining the stealth action genre with its Metal Gear series, those games (beggining with Metal Gear Solid) had deeper than initially apparent themes, emotional scenes, fantastic orchestal music and fantastic narrative. The problem is that instead of letting rest the MGS series and creating a new franchise, too much related games have appeared, most of them with questionable innovation (and quality in some cases). But technically the MGS games have been showcases of all the three Playstations “horsepower” (excluding the PSP).
Will Wright: The creator of the “Sim” label, he is another videogame designer genius, but loses points for me because lately seems to have become lazy: Since The Sims (the original one), only Spore promised something different, and ended being a group of editors badly joined, a fantastic idea (control a civilitation lifespan from the bacteria level to inter-galactic expansion) gone a too simplistic approach. And Spore expansions and spin-offs seem to follow the Sims path (try to get as much money as possible until exhaustion of the franchise).

So, this is the list. Probably you won’t agree with it (I know I’m very influenced by videogames ;) , or maybe you have better gurus, so I encourage you to leave your comments!

Kartones.Net CS2007 Addon 1.4, Related Posts and a bit of caching

Kartones — Sun, 04 Oct 2009 23:28:50 GMT

This post is a 3x1 because I prefer to not write multiple smaller posts when they are so related.

First, I want to announce a new revision of my CS2007 Addon Pack, 1.4.0. The news are:

Internal refactoring of the Assembly. I’ve created a separate Assembly for all Kartones.Net specific features so this public one has now fewer classes and weights a few kilobytes less.
Internal refactoring of Twitter related components. This is still in semi-beta, but seems to work perfectly except when Twitter is down or going too slow (drop me a comment or email if it doesn’t). The only downside is that now the source appears always as “web”, I have to investigate it.
I expect to finish soon with a few stuff and there will be small but interesting changes related to it.
RelatedPosts Community Server 2007 component. It’s a blog feature that it’s starting to spread, and if done correctly (I didn’t check what blog engine they were using, but I’ve seen multiple terrible examples) can help to engage new readers to your blog.
My implementation, altough not perfect, has the following features:
- Searching of related posts by tags
- 5 Results maximum
- Caching of the results to ease SQL usage on subsequent calls
- Only appears when viewing a single blog post. Not in a post list, not in RSS… I don’t want to waste anybody’s time so it’s mainly focused for web visitors arriving for example from Google search results.

And now, the third part of the subject: a bit of caching.

As I’ve just mentioned, the Related Posts component caches the results for 30 minutes. In fact, the final HTML markup is cached so almost nothing is done server-side, apart from cheching the cache and retrieving the string containing the markup.
So its a per-post cache (the keys are “RELATEDPOSTS_{0}”).

This approach works fast as hell, and if you have tons of visits and tons of RAM you’ll be good to go. But it is really reusable?

Not really, each post ID is unique for a given post and not used anywhere else. So I made an internal version for this blog community that works differently when managing the cache.

First, as part of my CS optimization, I’ve created a WeblogPostLite class containing just the critical and minimal fields needed to operate with a post, returned by a new WeblogPost.GetLite() method. I plan to use it in multiple places that do heavy operations with post objecs (but using just few common fields of them), but for now, they provide me 00% serializable and fast objects.

When I search for related posts, I (as in the normal component) get 5 posts of each category (the generic component allows to choose for most viewed or most recent ordering). And here comes the trick: I insert into the cache a List<WeblogPostLite> per blog and per tag (cache key could be “RELATEDPOSTSLITE_{0}_{1}”).

This caching means that for a low amount of posts, I use more memory (4-5 fields per “lite” post, up to 5 posts per category, easily 5 or 6 categories per real post,…). But as soon as visits are spread upon multiple posts, benefits start to appear: Any decently used tagging of posts will achieve a great percentage of cache hits. And the amount of memory consumed is not linear (stabilizes, unless you use insane amount of tags).

In my opinion, caching is itself not hard to do, but strategical decisions about how, what and when to optimally cache data. And as usual, is really subjective and different in each scenario.

Note: The related posts search is not perfect, and while it yields nice results most of the time, sometimes it doesn’t :) I plan to do “something else” more interesting to actually have the best related results but needs one important change in CS core and, most important, time (my greatest problem, lack of free time!).

ASP.NET: Split AppSettings and ConnectionStrings to separate files

Kartones — Mon, 28 Sep 2009 23:24:59 GMT

This is a simple yet not always known "trick".

We usually have in our ASP.NET Web.Config files the app settings variables and connection strings:

  <appSettings>
    <add key="MyAppSetting1" value="" />
    <add key="MyAppSetting2" value="" />
    <add key="MyAppSetting3" value="" />
  </appSettings>

<connectionStrings>
  <add name="Conn1" connectionString="xxx" providerName="System.Data.SqlClient"/>
  <add name="Conn2" connectionString="xxx" providerName="System.Data.SqlClient"/>
</connectionStrings>

What is not so commonly known is that you can split both sections, using special attributes on the nodes:

<appSettings file="AppSettings.config">
  <add key="MyAppSetting1" value="" />
  <add key="MyAppSetting2" value="" />    
</appSettings>

<connectionStrings configSource="ConnectionStrings.config" />

The <appSettings> node can have some or all keys in another file, like this AppSettings.config sample file:

<appSettings>
  <add key="MyAppSetting2" value="" />
  <add key="MyAppSetting3" value="" />
</appSettings>

Now, we would end having the same 3 keys as in the original web.config file, but MyAppSetting2 would be overwritten in AppSettings.config and MyAppSetting3 would be created in the same file.

With the <connectionStrings> node we can take out all conn strings (beware, you can't split between the two, if you specify a configSource then all must go on that file):

<connectionStrings>
  <add name="Conn1" connectionString="xxx" providerName="System.Data.SqlClient"/>
  <add name="Conn2" connectionString="xxx" providerName="System.Data.SqlClient"/>
</connectionStrings>

Note: Both AppSettings.config and ConnectionStrings.config must only contain <appSettings> and <connectionStrings> as the root XML nodes. Do not place any other xml tag (not even the <?xml version="1.0"?> definition tag).

Working with PHP, six months later

Kartones — Tue, 22 Sep 2009 22:38:57 GMT

Now that I’m back from a small vacations, time to get back to blogging too!

A bit more than six months ago, I changed once again where I work, but this time it was not only a new company, but a new world, with PHP as the flagship. Six months later, I’m not only still alive, but I have learned a lot more than just a new programming language.

Things like the subtle (but vital) difference that supposes working with a fully scripted language (everything ends when the HTTP request ends) from a compiled, object oriented and instanced language (memory pool, state, garbage collection,…).

Things like why PHP has the horrible fame among all object oriented developers, and yes, the language needs a serious internal flamethrower purge that gets rid of all backwards compatibility with un-scoped, function-like development, but as with human actions, not everything is bad, beautiful things can be created too: PHP can implement a lot of design patterns, PHP 5 has object orientation (not perfect, but enough to properly code), PHPUnit allows for some unit testing, and Sellenium to do even flow and UI testing.

“Think big” they say; yes, think big, as big as if a single “SELECT COUNT(*) FROM xxxx” could bring down your entire site if not properly scaled.

But I’ve not only adquired knowledge on a new language. I have now a broader vision of things (I think ;).

I now know that many of those apparent “linux trolls” are not so but just ignorant of current state of “the Windows ecosystem”, that some Mac users are real fanatics, but others know exactly the correct state of ~~monopolism~~ things and perfectly talk about Apple’s flaws, that even Linux machines give kernel panics, that Linux Terminals/shells have an incredible hidden power that now I only wish I had in MS-DOS or Windows Command Prompts…

I can now switch from 8 daily hours of PHP coding to one or two related to .NET/C# without problems, and I’m happy to start to become some kind of hybrid coding monster. I’m even starting to care a bit about “presentation” of stuff (at least to try to not do dirty CSS things), thanks to the fantastic designers I work with.

It’s a curious mutation? evolution? Well see in another six months or so :P

Transitioning from a synchronous model to an asynchronous one?

Kartones — Tue, 08 Sep 2009 06:34:00 GMT

I’ve been lately analysing how my habits have changed in some aspects of my daily computer use. This might not be the case for everyone, but in general I see it happening too to a lot of my friends.

Around 2001, when I started my computers degree at university, we were in the IRC/Chat boom, but it had some limitations, mostly related to how non-power users using it: Either you had to learn how IRC works and create private channels to talk with your friends, or you had to rely on web-based chats (this was a boom of Java Applets too, now almost forgotten because of Flash).
The Instant Messaging networks and clients got hype and they spread like a virus. I had an ICQ account, a Yahoo one, and a Windows Messenger one (later rebranded to MSN Messenger, and now called Windows Live Messenger). Everyone started to have at least modem connections (DSL lines were still spreading at least over Spain), so we started to spend hours and hours connected to IM clients (in my case, mostly Messenger) chatting with our friends. It was the cheaper substitute of phone/mobile conversations. Instant, synchronous communication.

Now, IM clients are still there and widely used, but both for technical constraints (proxys/firewalls blocking access, crappy protocols that at the minimum network loss disconnect, weak wifi signals,…) and time constraints (while working you have to concentrate on your tasks instead of on offtopic chatting), it is being moved to a second, less interest layer, in favor of social networks.

At Facebook, Tuenti, or whatever social network you use (even Twitter if we consider it like a micro-social network), there’s a lot of activity. I have lots of friends with whom, having them on IM clients, I speak way more now via social networks. The few times I logged in into Facebook until I disabled the chat (I mostly only login to reply to comment or private message notifications) usually were a lot of friends connected/online, friends to whom usually if you send an email it takes from hours to days to get a reply. But if I comment on their walls or send a private message inside the social network, they reply sometimes instantly ;)

At first I thought it was curious, but it makes some sense, because in a social network, you don’t need to reply at once if you don’t want or you can’t. In a IM client you must be synchronous, reply from time to time. On a social network, you decide when you do it, you have the control and the pace. You don’t feel the same stress of real-time bidirectional communication.

Something similar happened to me with the news sources. In the past, I had lot of email subscriptions to various news.
Then, RSS came and transformed the way of receiving data to an asynchronous model. Data gets fetched when appears, but gets stored until you have the time to read it.
I now get stressed if I have too many pending emails (although doing a simple psychological trick of marking them as read on GMail after adding a “PENDING” tag to them works like a charm), but I don’t feel pressure if I see +200 unread feeds.

Even in development we’re switching… In the past, sockets programming was used for almost everything, even applications that didn’t need instant responses. Now, excepting online multiplayer games and a few specific areas, the use of web services is so widely spread that for example in .NET Remoting has become a rare knowledge, but almost everybody knows how to create a ASP.NET Web Service or WCF layer. Everything that doesn’t requires a synchronous communication it is created as an asynchronous one now by default.

So probably yes, we’re moving from a synchronous communication model to an asynchronous one. Partly because this way time stops being a constraint factor, but partly too because with an async. model we have the control of when to pause and when to resume the flow of communication (at least to some extent).

Book Review: Design Patters (Gang of Four)

Kartones — Mon, 31 Aug 2009 20:35:58 GMT

Today a review of a maybe not so fresh book, but basic and highly recommended one, the Design Patterns book by the gang of four (GoF).

I have a few more books halfway read (I cheated, because I read this book a while ago) so I’ll try to post another review soon ;)