CSS3 Fun

Today I learned about two new CSS3 rules that both work in newish webkit (Chrome/Safari) browsers.  We can FINALLY vertically align elements in a div, without resorting to use/simulating of tables, by using box-sizing.  About freaking time.  And you can now also resize elements in the client.  I clearly need to read up more on what’s coming in CSS3…

Example (you'll need a newish webkit (Chrome/Safari) browser):
You can resize the div below – see how the image always stays centered?

Source:

<div style="display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; resize: both; overflow: hidden; width: 200px; height: 200px; background-color: black;">
<img src="http://www.appliedis.com/images/tagline_01.gif" style="max-width:100%; max-height: 100%">

iPad Mockups To Go

After using the heck out of Peldi’s (here and here) and Simon Herd’s (here) original templates for Balsamiq iPad mockups, I decided to give back to the community by creating some templates that I found were missing:

The iPad Portrait and iPad Landscape templates are 1:1 scale iPad mockups, with an inner frame with 1024x768 resolution.  I assembled the frame of the iPad piecemeal, so as to leave a “hole” in the middle, for your content to shine through.  This is something I sorely missed with Peldi’s templates, forcing me to do far too much work in Paint.Net, manipulating my images to fit his frame exactly.

Complementing these is my iPad Keyboards template.  If you’re already using one of the above templates, this one isn’t necessary, but if you want to use Peldi’s templates, my template will come in handy.  It's simply the iPad keyboard as Simon Herd originally created it, but in 4 different resolutions, with minor corrections:

Enjoy.

Outlook's dumbest feature?

and the corresponding

Why? Why? Why?

It seems 9 out of 10 times the line breaks are significant and SHOULDN’T be removed.

The feature has persisted for about a decade (if not longer – I don’t recall if it was part of 97 and 98); if you don’t know by now, this is how you remove it:

Tools – Options – Preferences – Email Options, Uncheck the Remove… checkbox.

Looking through the source of SharePoint on SharePoint

Microsoft launched their new SharePoint site a few days ago, and for the first time the SharePoint site is actually hosted on SharePoint (!).  It’s a nice looking site, with a dynamic user interface, courtesy of AJAX and Silverlight.  I decided to take a closer look at the visible source code – that is, the rendered HTML, JS, CSS, and Xap files.

Below are some observations:

• They’re first loading the OOTB stylesheets, including HTML Editor and core.css (all 4K+ lines of it), completely unmodified, then they override the defaults with additional stylesheets (the MSCOMP_Core.css is another 4K+ lines of css) – seems inefficient?
• They only load Core.js if authenticated, through a custom server control:
  <!-- RegisterCoreJSIfAuthenticated web server control -->
  <span id="ctl00_RegisterCoreJsIfAuthenticated1"></span>
• Interestingly MS uses Webtrends
• They use custom js to get around the name dll:
  <script type="text/javascript" src="/_catalogs/masterpage/remove_name_dll_prompt.js"></script>
• There’s extensive Control look and feel customization through Control specific CSS
• A lot of their stylesheets reference slwp_something – SilverLight WebPart perhaps?
• The viewstate looks pretty nasty but in the end is only 61KB, which I guess is acceptable
• The page includes the standard minified versions of MicrosoftAjax.js, MicrosoftAjaxWebForms.js, and SilverlightControl.js
• The on-page Silverlight initialization code is NASTY, not sure if this is standard for Silverlight, or if this is an ugly exception.  Why not use JSON?  Why use encoded javascript?  Here’s a very short random sample – note that they didn’t bother getting rid of spaces (%20) before encoding:
  SiteNavigationDefinition%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FChildSites%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSiteNavigationDefinition%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CSiteNavigationDefinition%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSelected%3Efalse%3C%2FSelected%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSiteName%3EECM%3C%2FSiteName%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSiteUrl%3E%2Fproduct%2Fcapabilities%2Fecm%2FPages%2Fdefault.aspx%3C%2FSiteUrl%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C
  Best of luck debugging that.
• There’s a mix of absolute and relative references to the same image library, (but that’s a very picky observation)
• YSlow result:  D, pinging it on number of HTTP requests, lack of a CDN (why doesn’t MS have a CDN?), Expirations headers, ETags and not minifying JS and CSS, but overall size is not bad for a MOSS page, especially not one this visually engaging – but then it turns out YSlow does not account for loading of Silverlight content – the Xap files for the Top Nav and main control are 240KB and 632KB, respectively:
  
• The XAP files also contain some interesting content, like this test image for the header – but they’re not actually using fast for the search…
  
• They use an Image Transitioner component from Advaiya (sidenote – pure Silverlight websites are just as annoying as pure Flash websites), who has supported MS on other Silverlight initiatives – wonder if the SL pieces were outsourced to them?

So – all in all a nice looking site, but I have some questions as to the completeness of the project.  Maybe it’s just me, but if I was Tony Tai (MS SharePoint Product Manager), I would spend another week finishing things up a bit…

HTML: Conditional Else Comment

IE browsers support Conditional Comments, but the syntax only supports IF statements – there is no ELSE.

Stu Nicholls and the JavaScript Kit to the rescue;  the following simulates an else statement:

<html>
 <head><title>Choose a browser...</title></head>
 <body>
  <p>You chose
  <![if ! IE]>
  wisely
  <![endif]><!--[if IE]>
  poorly
  <![endif]-->
  ...</p>
 </body>
</html>

Copy to a text file, save as html and run in IE and Firefox/Chrome/Safari/Opera…

I like Balsamiq

I’ve been using the free version of Balsamiq Mockups to create some application page mockups.  It’s not quite as fast as pen and paper, but sure as hell beats doing it in something like Visio.  I really like it*. 

The application is available both online and in an Adobe Air version that can be downloaded and run from the desktop – I’ve used both and probably will continue to use both, the differences between the two versions are marginal. 

Balsamiq Mockups comes in a free trial version as well as a paid for version ($79).  As far as I have experienced, also the only differences between the free version and the paid version ($79) are that 1) the free version nags you every 5 minutes, and 2) you can actually save your files with the paid version, and also 3) print the mockup.  To make the free version useful, Balsamiq does allow you to export the markup as XML (and re-import the xml to re-create the drawing.)

Below is a screenshot of a markup I did of mo.notono.us – took all of 10 minutes:

*… in the interest of full disclosure I fully intend to email Mariah to see if I can get myself a free license….