| Comments

My blog runs on Subtext which has a pretty good skinning model (albeit a tad outdated) and allows you to customize whatever you want.  I’ve had my own custom theme since 2009.  I figured I was due for an update.  I was further strengthened by a post from Jon Galloway last week.

Now when I saw this I figured it was another nudge.  I did also have some time this weekend without any distractions so I took it as an opportunity to do some ‘work’ on this here blog.  Now a while back I was inspired by what Scott Hanselman had done on his site with a designer.  I reached out to a few designers that I admired, but frankly never heard back :-(.  I figured that was okay as I wasn’t in a position to really pay what I know it is worth for a good designer.  So I went looking for things on the web that I could do myself.  I did want some subtle design tweaks to represent some things I’m currently passionate about.

Bootstrap your CSS

After some digging I saw a ton of pointers to Bootstrap.  This is an Open Source Javascript/CSS library that sets your site up for styling success and layout goodness.  The documentation was some of the better docs I’ve seen for a library.  Each aspect of the library/styles where in the docs that I could visually see, interact with and see the code that produced the behavior.  I liked what I saw and went to work.

When I got all the styles configured (using the basic setup from Bootstrap) I went to work on some of my own minor tweaks.  One of the things I really liked is the responsive layout options, not only for the grid but also for different screen sizes.  By adding a simple class I can specify certain aspects that shouldn’t be displayed when viewing the site on a tablet or phone.  There were other cool responsive options for this such as the main menu will switch to a drop-down approach when on a smaller device.  Using Firebug, IE F12 tools and real devices I was able to get the precise tweaks that I wanted.  Here’s what my site looks like on an iPhone as an example:

timheuer.com on an iPhone

Notice the menu at the top is gone but replaced with a little icon (which is a drop-down).  Also notice the sidebar area is no longer visible (it is on the bottom of the site in this device view).  I like this subtle configuration that was really easy to do with just adding a class name to the area I wanted to collapse.

The other thing I wanted was to implement my primary navigation links in a little-more-than-text style.  I used the CSS sprite method by creating a single image that I would then define styles that used clips within that image to pull out the right area.  Here is the image in entirety:

Notice how the normal and hover states are the same image. 

NOTE: I put this on a black background so you can see them but it is actually a transparent background so the theme’s background shows through.

What I do then is just define a style for the <a> tag like:

   1: #follow {
   2:     background-image: url("navbarglyphs.png");
   3:     background-position: -195px 0px;
   4: }
   6: #follow:hover {
   7:     background-image: url("navbarglyphs.png");
   8:     background-position: -195px -70px;
   9: }

Now I was having a bit of difficulty with this because I was misunderstanding the background-position value in CSS.  A quick set of second eyes with Shawn Wildermuth (who is doing a bunch of HTML dev posts right now) helped me realize my math was wrong and I needed to use the negative value instead of what I was using.  Once that forehead-slap moment was done, I was set. 

I still have a few tweaks to go (need to re-work the comments sections but didn’t have the time to think about a design more) but I’m happy with the quick re-design.  It is very simple for sure, but I like it.  I tried on a few different screen sizes and I think I have met Jon’s challenge to adapt to the available space for the screen.  If you are working with a new site and aren’t a CSS/JS guru I highly recommend looking at Bootstrap as a solid starting point for your efforts.

| Comments

In IIS7 you can do very simple testing for SSL related site hosting.  It literally is like a 2 click process:

Enter a name for the cert and done, you now have SSL on your box.  Of course this is a self-issued/signed certificate so it will do you know good in the real world, but for most of the developer world it will work fine.  There may be those times, however, where things may not be quite working right and you want to eliminate the self-signed cert form the equation to make sure it isn’t the issue.

This was the need in my case.  I’ve been doing some messing around with secure services and Silverlight scenarios and ran into one issue that I needed to eliminate the self-signed cert and get a ‘real’ one.  Self-signed certs have a quirky behavior in browsers and I just wanted to eliminate that in my test.

I shouted out on Twitter an ask of “cheap ssl providers?” and got a few responses:

I always forget about GoDaddy when it comes to anything but domain registrations but they do have a lot of other services and this reminded me that they do have a good price on SSL certs ($30/year).  Having had previous experience (and happy with) InstantSSL I knew of their offering as well.  My goal was not to secure a beefy e-commerce system, or help secure personal information, etc.  I needed “https:” and that little icon :-) -- that’s it.  So for me, low cost was what I was seeking – I had no need for any of the deluxe offerings.

With that in mind I didn’t want to purchase a cert from each on of these just to see what the deal was.  That being said, this isn’t all too fair of a comparison of them all, but only 2.  Please keep that in mind.  GeoTrust was by far the most expensive and I can’t quite tell why to be honest.  RapidSSL was pretty on par with everyone else.  OpenSSL.  Well, it’s free if your time is.  I mean it isn’t necessarily integrated into every server environment (yes I know it likely is in Linux), so be aware that there is some setup there.  Remember my goal: fast and cheap.

GoDaddy was offering $15/year SSL certs and InstantSSL had 90-day free ones.  Both perfect for my needs.  I didn’t find out about GoDaddy’s deal until after I started down the path of InstantSSL (which you’ll see was quick).  GoDaddy’s $30 price tag for my purposes was enough for me to consider just doing the free 90-day one from InstantSSL. 

Both processes would require me to create a request from my server.  I’m taking that part out of the equation.  The time I’m talking about is from request to issuer to installation and operational. 

IntantSSL had a simple form.  I input my CSR text added my contact information and clicked submit. 

I was told I’d get two emails: one verifying me as the domain owner (pulling contact information from WHOIS…another reason to ensure you always keep this updated correctly) and once complete a second one with my cert.  By the time I was done reading that sentence, the verification email was in my inbox.  Click on a link, cut/paste a code, click submit.  Inbox now contained my cert and instructions.  Installation was a breeze as i just processed the request and pointed the file.  Seriously, the total time was < 8 minutes.  2 emails, one click.  Having been a previous customer I can assure you that the process is the same should I have opted for their 1 year basic SSL at $80.  Just as quick (adding the purchase step in).

In that time I saw a twitter that GoDaddy had a $15 deal promotion.  I figured, what the heck, that price removed any barrier for even my test use of the cert.  So I started their process.  It went something like this:

    1. Buy cert, add to cart
    2. Go through 3 screens of add-on service (clicking ‘no thanks’ each time)
    3. Checking out (fast/simple)
    4. Received email – instructions weren’t too clear on next step
    5. Logged into account
    6. Navigate to certificates…realized i bought a “credit”
    7. Activate “credit”
    8. Go to cert manager
    9. Enter request
    10. Wait for verification
    11. Recieve certs.

It still didn’t take very long, but was noticeably more steps and not clear direction for a lay person I’d have to say.  I received the cert in my email with a link to instructions.  I was warned of this on Twitter that there would be an extra step.  It isn’t that bad, but is an extra step.  GoDaddy needs some intermediate authorities to be on the box before your certificate is trusted.  They ship these with your cert so you don’t have to go digging.  This step does involve opening Management Console, etc.  and then going to finalize the request in the IIS manager.  Overall time for GoDaddy – I’d estimate 15-20 minutes.  Still not bad…and the price is right.

I’ll stick with my GoDaddy cert of course because at the $15 price I got a full year so no reason to change now.  I would have to say that GoDaddy and InstantSSL both offered the easiest and fastest route to request –> operational I could have hoped for in the process.  I imagine by the name ‘RapidSSL’ that they’d be similar.

One Twitter comment was:

instantssl is actually the best quality for the price I've seen.

And having seen their offerings and been through their process, I’d have to agree.  Either way there is a list of folks to look at.  I’d recommend InstantSSL first, then GoDaddy based on my experiences.

Oh yeah, OpenSSL is free…if someone can convince me that I could have set it up in < 10 minutes I would have tried.  It took me longer than that to figure out what I might even have to do!

| Comments

intersoft just sent me an email that the beta versions of their WebUIStudio.NET 2008 R1 is available, which includes a few new silverlight controls: WebAqua and WebCoverFlow.

i'm curious how soon the apple attorneys might prepare a cease-and-desist on the naming of both of these controls, but that's for them to figure our.  I'm more interested in getting my hands on them and playing around.  you can read their press release here on where to get them.  it's very exciting to see so many controls popping up.  i hope that when silverlight 2.0 releases that these will all be ready for primtetime as well!

| Comments

one of my colleagues and super-star-wizard-man david chou posted recently on platforms.

he previously was chatting about popfly as a platform and then thought it a bit more to back up from a larger view to help us ponder what exactly a 'web platform stack' means.  i think for people who haven't really distilled it down into any consumable thought areas, it does a good job defining where some web platforms fall in to the greater scheme of the overall goals of a web strategy.

maybe i'm not saying it well :-) -- but you should go check out david's post about it and leave your thoughts.

| Comments

first, thanks to all who came out to the microsoft silicon valley campus on thursday to listen to me babble about microsoft and web developer technologies.  as promised, i said i'd make a post with answers to unanswered questions and/or concerns... so here we go!


expression web product: i learned some clarification on the fulfillment of the expression web product (note: if you didn't hear, those that registered and attended will receive a not-for-resale copy of expression web, one of the products we discussed and showed in the morning for developing/authoring standards-based web sites/pages/applications.  there was confusion (mostly on my end, well not mostyl...all) about where it would be shipped.  i've learned that it will be shipped to the address on file when you registered.  i told our fulfillment house that everyone put their information on the eval, and they said they would try to accommodate that, but that the address used during registration would be used. 

evaluations: for those who weren't able to get an evaluation form, this is required for the product fulfillment :-).  i took some business cards and will send you a note with a pdf of the eval form.  if you could kindly fill it out and fax it to me (fax number to be included in the email) i will appreciate you that much more.


here's some questions we got that i didn't know the complete answer to...

    • expression tools and source control...when will that happen : we don't have a definitive answer to this right now, sorry...when i know more i will post it.
    • cab/xpi deployment of silverlight: there were some strong opinions here despite the fact that the deployment is the same number of clicks for the end-user...with that said, the team continues to take feedback and i've provided the feedback from the attendees of the event to the deployment team. 
    • where can i get the silverlight.js file? - this is included in the sdk which is at http://silverlight.net -- if you want just the latest file only and don't want the sdk, see this post.
    • coho winery ajax application sample: where's the source code? download coho code here
    • silverlight for mobile?  watch the keynote from and you'll see a sneak preview -- it is definitely on our minds but we have nothing to show/talk about beyond that right now.

because there was discussion on the deployment of silverlight, i wanted to clarify the deployment process...

if the user does not have the plugin installed, they will be presented with a silverlight-branded experience indicating such.  there are two options for the user...the default is an image that looks like below telling the user to get the silverlight plugin:

you can alter the creation of your silverlight object, by using the inplaceInstallPrompt property (default is false) and changing it to true.  a typical createSilverlight function might look like this (taken from the sdk):

   1:  function createSilverlight()
   2:  {  
   3:      Sys.Silverlight.createObject(
   4:          "plugin.xaml",
   5:          parentElement,
   6:          "myControl",  
   7:          {             
   8:              width:'1024',
   9:              height:'530',
  10:              inplaceInstallPrompt:false,
  11:              background:'white',
  12:              isWindowless:'false',
  13:              framerate:'24',
  14:              version:'0.9'
  15:          },
  16:          {
  17:              onError:null,
  18:              onLoad:null  
  19:          },
  20:          null);           
  21:  }

by changing inplaceInstallPrompt (line 10) to true, then the user will be presented with a different branded experience:

this would allow them to click right there and install the plugin inplace without leaving the site.  note: the wording on this portion of the inplaceInstallPrompt is not to be edited per the sdk (since it involves the EULA of the plugin).  the images, however, can be altered to your liking -- these are just default user interfaces, you can provide your own and alter the javascript file that emits them.  an in fact, it might be a good idea...for example, if your silverlight application area is smaller than the default images, you may want to create a size-appropriate one (and vice-versa).  for example, you can create one that says this:

leveraging the inplaceInstallPrompt enables the user the fewest clicks to install the plugin and provides the same experience as other plugins. 

it was also asked what would be seen in an unsupported browser scenario (please note the browsers supported are IE, FireFox on windows and Mac, Safari and Opera (not currently but planned), the first image (indirect download) is what would be displayed in unsupported browsers -- directing them to a page that shows what the requirements are for download.

source and samples:

during the session we did some demonstrations using asp.net ajax and silverlight.  i'm going to include them here for reference.  these were quick samples and there are much better on the reference sites :-).  this is a visual studio 2005 web site project and requires the pubs database.  you'll need to change the connection string in the web.config to point to an instance of sql server that has the pubs database.

File: asp.net ajax and pubs data using client script


again, thank you much for attending and i hope it was informative.  you have my email...you have my blog.  i write a lot about web stuff so i encourage you to visit often or subscribe to my syndicated feed.  if i missed anything, let me know!