jump to navigation

MIX 10K Entry Techniques for reducing Silverlight code and XAML size February 10, 2010

Posted by Jose Luis Latorre Millas in Silverlight, Uncategorized.
Tags: , , , , , , , , , ,
3 comments

Preface…

As commented here are the full techniques I have applied for reducing the size of my MIX 10K entry, the “Silverlight Magic Lantern”, which can be found at the url http://mix10k.visitmix.com/Entry/Details/261.

The main basis of my entry was “to surprise” and that’s not easy being this the MIX Conference & MIX Online assistants a mix of Designers and Developers, some 100% developers, others 100% Designers and some rare cases 50% each – or even more rare cases 60 to 70% each…

As for my entry to comment that it has tried to combine both wow factors, having coded in less than 10kb the following techniques:

- Bing search engine integration through REST.

- Usercontrol creation (for the knob) in very very small piece of code..

- Inverse kinematics programming – which btw I had never done before J. I’d like to thank Jeff Paries for his great book which covers some techniques on the matter… Btw, I bought the Flash Book as I did not know that there was a Silverlight one J. Now I have both.. you can get it here http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X – with no commission ;)

- Magnifier effect – which was done initially with a shader (way cooler) and next with a writable bitmap in order to weigh less bytes L.

- Position the magnifier exactly where the inverse kinematics extreme was – that is no easy, believe me..

- Parallax effect with inverse-moving shadows, to provide a depth effect from the main front panel to the results at the back – At the end I had to take out the shadows in order to get more space available… L

Also I wanted to surprise graphically so I had the idea of enabling “skin interchange” but, sadly I had to take it out and let only one skin in place.. the nicest one of course… anyway it was way simple as it required only changing the source of the 6 images my entry uses… and it was implemented through a knob too ;) .

Both of that got me the edge (I hope so at least) of being able to surprise both Designers and Developers.. and hopefully the Judges too – Anyway there are pretty good entries this year so, the best one will win!!! Good Luck to you all!!

Aaand… I will release the code (the one that is not fully compressed) in short so keep tuned…

The Techniques…

As, for the main topic of this post, the techniques used to reduce code size have been, in order of precedence:

1. Common sense à Taking out code not used, comments, blank lines, etc.

2. Use of Var if the type name declaration is bigger…

3. In some cases use global variables so they haven’t got to be declared over and over. I had to do some metrics to see how much I was using an int variable to see how much space it was taking and declare it globally. Not the thing you do in your everyday code..

4. Use Inline if’s instead of normal if’s.

5. If you apply a compare rule more than once, package it in a Boolean ;) :

If you have:

If ((a ==b) &&( c!=z))&….

And

If ((a ==b) &&( c!=z))&….

You can do

G = ((a ==b) &&( c!=z))

And make

If (G & … everywhere else..

6. Change constants defined by its direct value that is depending on the length of its value and its use, obviously.

7. Reduce functions using anonymous functions. For example:

nextSegment.MouseLeftButtonUp += new MouseButtonEventHandler(nextSegment_MouseLeftButtonUp);

void nextSegment_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { zoomActivated = false; }

Can be converted into:

nextSegment.MouseLeftButtonUp += delegate(object s, MouseButtonEventArgs e){ zoomActivated = false; };

8. Use Object & Collection Initializers, like:

ksi.go(new List<string>() { “Small”, “Medium”, “Large” }, “Size”);

9. Reduce functions size c hanging the default parameters sender by s for example, as the previous code piece.

10. Reduce the use of the usings, that is easily done by deleting/commenting them all and resolve all the dependencies manually.

11. Use Alias on the usings, but be careful, be aware this is only necessary in the case you have to write the entire namespace path in case of conflicts with a declaration of the same name.

12. Subclass a class you are using with just the signature – I did end up not using this as it was not worth it.

13. Reduce the use of XAML files – for example, app.xaml is not really needed.

14. Reduce app.xaml.cs size -à most of its code can be greatly reduced. Mine ended looking like this:

public class App : Application

{

public App()

{

StartupEventHandler ha = null;

if (ha == null)

{

ha = delegate(object s, StartupEventArgs e)

{

base.RootVisual = new mh();

};

}

base.Startup += ha;

}

}

15. Minimize XAML Code: there is a lot of code that Blend adds and it is not necessary, there is also a lot of code pieces that are set up but also are default so taking them out does not affect the render.

16. Refactor the variable names, function names, and all the other names! I recommend that this is done first in a 3 to 6 length name so it still has some meaning – at the end you can refactor that to only 1 or 2 characters if needed… So you can touch the code with full understanding of what you have coded J.

17. Use only one – C# file ;) – that will help reduce even more the use of the usings & also the own size of the extra files usage. This will reduce the namespace definition and usage to only one.

18. As the final step I compressed the code, I coded a simple tool that took a file and got all the whitespaces, carriage returns, etc.. it’s about 3 to 6 hours coding something like that.

 

Other ideas..

Other ideas I had but did not use but I think it’s cool to mention them :D :

1. Compressing the XAML

Compress the xaml (zip it) and uncompress it in runtime and render it over user control placeholders. As Silverlight comes with a compress/decompress utility the code needed for this is really small! I even looked up for the best way to do this (check this great post: http://www.sharpgis.net/post/2009/04/21/REALLY-small-unzip-utility-for-Silverlight.aspx) but the point is that I have to do whatever the “Initialize component does”. In my case is this:

[System.Diagnostics.DebuggerNonUserCodeAttribute()]

public void InitializeComponent() {

if (_contentLoaded) {

return;

}

_contentLoaded = true;

System.Windows.Application.LoadComponent(this, new System.Uri(“/bml;component/IKSegment.xaml”, System.UriKind.Relative));

this.LayoutRoot = ((System.Windows.Controls.Canvas)(this.FindName(“LayoutRoot”)));

this.ScaleSegment = ((System.Windows.Media.ScaleTransform)(this.FindName(“ScaleSegment”)));

this.RotateSegment = ((System.Windows.Media.RotateTransform)(this.FindName(“RotateSegment”)));

this.IKSegmentImage = ((System.Windows.Controls.Image)(this.FindName(“IKSegmentImage”)));

this.brazo = ((System.Windows.Controls.Image)(this.FindName(“brazo”)));

}

Which is not small code and it is unclear that this will end up giving me the edge… ;)

That technique is only for xaml intensive applications… but will keep this for next year’s MIX 10K :D .

1. Compressing different CODE pieces and compiling/running it “on the go”

Other technique I put my eye on was to have code zipped and unzip and make it run on the client but… it just can’t be done L it needs to travel back to the server, be compiled and returned to the client, then attached and et voila! It lives! This way would make the application to atone with the rules as all the code used would be in the XAP file – it just will be transferred to the server, compiled and returned back as an assembly J. I explored this for my Magnifier Tool but ended up not using this as there was no time and still had some “basic code compression” techniques to try out.

Anyway if you are interested, this is the best reference I found on how to apply this technique: http://nokola.com/TryCSharp/ Thanks Nokola!

At the end..

Hope you enjoyed the article, if you liked it I’d like to get your feedback, maybe with a comment? J

Thanks for reading!!

Dynamic Backgrounds October 23, 2009

Posted by Jose Luis Latorre Millas in Silverlight, Uncategorized.
add a comment

As this is a era of new user experiences, I’ve created a codeplex project to gather different user experience experiments with the target of offering an interactive background to the user, one that interacts with his mouse movements and enhances the experience without being too captivating not to get the user’s attentino for the whole website experience..

The main idea of this project is to keep adding clear implementation of these background techniques. By now there is only one which is a parallax multi-layer background that allows us to provide different elements across multiple randomly dynamically generated layers, it moves the layers more or less depending on how far away they are from the monitor so it provides a interesting depth feeling.

I used this for the Inetians contest and also other websites, some of them did not see the light :( – it was a 2nd silverlight contest in the shape of http://silverlightchallenge.eu/ but this time for the world, but the bad timing (the crysis) helped it not to become a reality… now we’re flooeded by contests so it doesn’t make sense – if you think it would make sense having a worldwide contest and make a big buzz, just let me know as this is a matter of looking for sponsors… everything else is written down ;) – you can get a glimpse here http://silverlightchallenge.ineta.org/ but I do not assure it will be working tomorrow, I’ve advised… please take in account it’s a work in progress and left unattended.. my apologies for that

There is other site that is using this approach in an evolved way, with more powerful algorythms with a star theme, with randonmly generated star shapes and a better mouse-driven animation, but it’s still to be finished and published :P – I can’t talk!!! or some company that starts with “M” and ends with “t”  will cut my tongue or worse…

Please, download the code and let me know what do you think… it is hosted at codeplex; http://dynamicbackgrounds.codeplex.com/

Have fun

Slides and demos of my talk at KulenDayz.. June 23, 2009

Posted by Jose Luis Latorre Millas in INETA, INETA Europe, Silverlight, Uncategorized.
Tags: , , , ,
add a comment

Thank you KulenDayz!

I am very thankful to have went to the famous european Event KulenDayz, name that comes with the game of mixing Cool Days and the famous “Kulen”, a great famous spicy food which is also, the logo of  the event, which can be seen next:

Kulen Dayz

There I was very happy to be able to provide an introduction to the new Silverlight version, 3.0, which will see the light in short time, the 10th of July.

As promised, here are my slides and the demos I showcased there. Note that I took off the videos in order to make the demos as small as possible.

I’ll be glad to answer any question regarding the slides or the demos.

And, as for the event, I’ll try to make a post in short, but, for now, here are some images I took there: http://www.flickr.com/photos/joslat/sets/72157619870531664/

Hope you enjoyed the session :)

Inetians live! February 5, 2009

Posted by Jose Luis Latorre Millas in Uncategorized.
add a comment

Well my Mix 10k entry has been recently published at the website of the MIX online  :) , and you can see it live here: http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0138.

inetians
 
It comes from some background experiments with parallax, inspired in old age video games and an interesting entry from Jose Fajardo, http://www.cynergysystems.com/blogs/page/josefajardo?entry=what_a_beautiful_thou_distracting in which he introduced a very interesting background effect that I tried to emulate and make it a bit toolable -  a codeplex project for this background system is on its way ;) .

Also I wanted not only to create static background items but , why not, live elements that seem to be alive and at different levels, giving some Experience to the users of the website.

As I was developing the Background system of the coming Global INETA Silverlight Challenge, between other components of the same, I used the Inetians image as background so the evolution was clear.
I added a Silverlight user control “Inetian” with a random vector direction with a Max speed, then a control for not going out of the visible area, and some features, some of them were women, some men, they have a lifespan and when they get over 18 if they found some Inetians nearby of opposite sex, they do reproduce ;) and new Inetians are born…
I also put a cap on how much Inetians could be represented at once, and that is applied to the reproduction moment, so you can see it as a population regulation – sorry for that – but believe me, your screen and cpu will thank you ;)
Also they are rendered in different layers, providing – at least initially -  a cool 3D parallax effect.

There are some interesting things I would have loved to add, but did not have the time or the 10k limit pushed me into not implementing them:

  • Make them disperse naturally – everybody needs their vital space.
  • Add “Food” elements, with their lifespan and regulate the behaviour of Inetians between “wandering around”, “flirting” and “eating”.
  • Add the capability of moving between layers, up and down, depending of the food and flirting needs.
  • Add the capability of Dragging and dropping the inetians at the top layer . You can help the community!!! Just put an inetian near food or other inetian of different sex!
  • Add them functionality to their eyes… so they will look their “target”, being it the Inetian they have fallen in love with or the food they want to eat…
  • Make them aware of the cursor, if there is a cursor near them, make them look at it with fear (or not).
  • Adding them animations for changing state, eating, flirting, moving from layers, being dragged, etc..

If you have more ideas, do not hesitate to propose them or contact me ;)

In short I will publish this as a codeplex project and add whoever thinks this “live background” idea is cool and will be happy to have some help with this. 
Also, if you think the idea is original, I’ll be happy to get a comment on http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0138 and if you want to vote for my entry, I might end up getting the community prize.

By the way, if won, all the community prize will be given completely to INETA Europe… ;)

Thanks!!
Jose

MVP! February 5, 2009

Posted by Jose Luis Latorre Millas in Uncategorized.
add a comment

As it is usually said, better late than never… and I would like to give an enormous thank-you for having been recognized by this award, a thing that honors me deeply.

mvpaward2009
Thanks so much to all that have supported me, believed in me and, more important, have been my friends – and still are – on this trip that I am doing since some years ago, on the .Net roadway, a trip that will never end and that it is being added new stations each year, where to stop and find new emotions, technologies, passions and friendships; .Net 2.0, .Net3.0, 3.5, WPF, Silverlight, Azure, Windows 7, ….

There is indeed a lot to walk and fortunately on this “tech” train we all are in there is everybody that is reading this right now and a lot more that doesn’t have time to..
Thank you all!!
Jose