It’s not that we’re unhappy with how things are done now, but with the new Flex 4 and everything associated to it, I’ve felt that there’s an opportunity to make some improvements to our workflow.

Summing it up

As presented below, there are a few conclusions to be drawn here, for example:

• Flex 4 seems to be a really nice upgrade and probably something you can’t ignore in the end.
• There’s little information on the web about development of large Flash/RIA applications (like those we do). Pretty much all focus is on Flex development of small-to-medium sized applications. I’m not to speculate on the reasons why no one is spreading the word, but hope that my work can shed some light on the area.
• There’s a lot of fuzz around the Adobe products in general and Flex in particular. Very few seem to have any criticism at all when it comes to Flex, which is a bit disturbing, as nothing that looks too good to be true ever is. But maybe I’ve just been looking at the wrong side of the web? Just a reflection…

Presentation of findings

I held an in-house presentation on my findings yesterday, and I thought I’d better share it with the world (= your favourite search engine). I’ve stripped it down a bit, as there were some company specific things in there, but most of it is free for everyone to read.

A few things to consider before jumping in, though:

• This is a PowerPoint (well, OpenOffice actually) slide with notes. There was lots said when presenting each slide, so I can’t guarantee that you’ll learn everything I said. I understand this is not perfect, but figured that it’s better to upload this than nothing.
• It’s just plain slides with notes, really. I did have some imagery in the original slides, but left it out as it’s probably only needed as “distraction” when viewed on a large screen with me talking next to it. So don’t get mad if it’s boring!
• The plan wasn’t actually to hold an in-house presentation, but I figured it was a good idea. So the format on which it is presented may or may not be optimal, as it’s pretty much been summarized as I’ve went along. It could be a good idea to shape it up and make it a bit better, but at the moment, it’s more important just getting it “out there”.

The presentation itself

With that having been said – and my back having been covered – here it is (also available as a PDF):

[gview file="http://blog.sommestad.net/wp-content/2009/10/Catching_up_with_Flex_public.pdf" width=538]

EDIT: Also added the presentation to SlideShare.

Nothing new really, but a good summary of what works and what doesn’t. The consensus is of course that you have to be aware of that IE6 pretty much can’t handle anything, so we’re still bound to write old code to be compatible with it. Sad but true!

Hence, from time to time you need to adjust your code to make it work in all – well, actually it’s mostly about making it work in IE too, as it’s not as good as the others in following standards – browsers.

A handful of issues

A few days ago, I was testing a site in IE (both 6 and 7) and figured I might as well write down the (CSS) issues I came across:

• Issue: Opacity animation of text looks jagged.
  Solution: Adding background-color to the animated element.
• Issue: Some elements get “magic” padding/spacing at the bottom, due to the whitespace in the code.
  Solution: Adding overflow: hidden to the element(s).
• Issue: Elements within links do not inherit text-decoration, especially on :hover.
  Solution: Set text-decoration on inner elements too, e.g. text-decoration: none.
• Issue: Right floated elements without a set width expands to 100%.
  Solution: Always set width of floated elements – particularily those floating to the right.
  Note: The W3C CSS2 specs used to state that floated elements require an explicitly set width, but that section has now been removed. Do note that it’s probably good practice to set width on floated elements if it’s vital to always keep them next to each other.
• Issue: Lists (ul li) treating list-style-position and margins differently in FF and IE.
  Solution: Always use list-style-position: outside and margin-left instead of list-style-position: inside.
• Issue: Lists with images gets no padding to text.
  Solution: Adding padding-left to the list element (li).
• Issue: Block elements aren’t centered in Internet Explorer.
  Solution: Make sure to set both side margins to auto and text-align: center.

Note that these are only a handful of the issues that you can come across.

Position is Everything

Apart from Googling answers to CSS issues, I’ve got a favourite site for finding and solving Internet Explorer related problems: Position Is Everything. After a while, you know these issues by hand, but until you do, it’s really a good place to get help before tearing your hair out…

Sometimes, developers get confused when it comes to understanding why a certain selector overrides another. I guess the standard ways of solving it is reordering the selectors in the CSS or using ID selectors instead (as they’re well known to override most other selectors). But there’s of course plenty of logic to why certain selectors override others, and the reasons can be found in the official W3C documentation.

It’ll help you a lot in creating a sold and good structure in you CSS documents. Probably a good idea to keep the list bookmarked until you remember the rules, though…