Posted on

Making a website look good on all devices

N.b. Be sure to read this.

Responsive design is actually pretty straight forward. Use standard practices and don’t overcomplicate your html. But when we start to tweak something here or there, you quickly find yourself having to make sure that the code has adjustments for various devices. What does this mean to your programmer? Basically having to make changes to all of these:

/*********** Phones and handhelds ***********/
/*********** iPhones ***********/
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/*********** Galaxy Phones ***********/
/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/*********** HTC Phones ***********/
/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/*********** Tablets ***********/
/*********** iPads ***********/
/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/*********** Galaxy Tablets ***********/
/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/*********** Nexus Tablets ***********/
/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/*********** Kindle Fire ***********/
/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/*********** Laptops ***********/
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

/*********** Wearables ***********/

/*********** Apple Watch ***********/
/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

/*********** Moto 360 Watch ***********/
/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}
Posted on

Cross-domain communication

If I have an aspx site on one server, let’s call it foo.com and I have a php site on another server, let’s call it bar.com, and I want to use an iframe to include data from foo.com within the bar.com site, security for iframes prevents this correct?

So, if I instead create a subdomain of foo.com, let’s call it bar.foo.com and use bar.foo.com for the aspx site, does that overcome the cross-domain security issue since both sites are now part of the foo.com domain or does the nature of bar.foo.com being a tertiary domain still create the security issue since bar.foo.com is technically different than foo.com?

Posted on

Don’t use underscores in css ids

Today’s reminder from your friendly neighborhood codeslinger is "don’t use underscores in css ids!" You know, those lines _ that programmers like to use instead of spaces in variable names (because you can’t really have spaces in a variable name in most languages). This was an illegal character in the original CSS1 and CSS2 specifications (updated in 2001 to be valid) so setting an id to foo_bar (e.g. <div id="foo_bar">) would be translated by the browser as foo\_bar (e.g. <div id="foo\_bar">), well, some browsers, not all browsers because you know browsers are so consistent in their interpretation and implementation of these so called web standards.

The solution? Instead of underscores, opt for dashes (e.g. <div id="foo-bar">) or camel case (e.g. <div id="FooBar">) but remember that id’s and class names are case-sensitive.

See also.

Posted on

Seeking Next Project

I am coming to the end of a project and have an opening in my schedule. My strengths are programming in PHP, ColdFusion, JavaScript and jQuery, CSS, and HTML. I most frequently work with MySQL or MS SQL but can work on most database platforms. Code I write validates and is W3C compliant. I can also write Section 508 compliant code. I carry a project from concept to production as project manager, independent developer, and/or project team member. In addition to custom original code, I work well with open source projects and APIs. I usually telecommute but am not adverse to working onsite or traveling. I am not an artist and typically hire a graphic artist to provide the design for each project. I enjoy WordPress customizations (but have not done custom work to either Reality Me or Domestic Psychology). Please send referrals or inquiries to jugger@gmail.com or call +1-865-898-7189. Thank you!

Posted on

Always more to learn

No matter how long you do something, there is always more to learn. You’d think that since I’ve been doing HTML coding since around 1993, I’d pretty much know every in and out and every little tag and peculiarity regarding HTML. Not so. See, we form habits. We get into patterns. Specs change but we retain earlier hacks and assumptions. Today I learned an absurdly simple thing. Maybe I knew this and forgot. I rarely use tab orders on my forms. Most of the forms I create are very top down so the natural tab order is sufficient. In computing, counting starts at zero. But in HTML tab order, zero means exclude that form element from the tab order.

To exclude an element from the tab order, set the value of tabindex to 0. [Source, Webcheatsheet.com, How to Control Tab Order in HTML]

Because of my computer science studies, programming in PHP, JavaScript, C and so on, my inclination is to always begin with zero. Of course, my favorite web application language is ColdFusion and it always starts at one. I can only assume the Allaire brothers were originally targeting non-programmers.

HTML is about to become HTML 5. Funny enough I just traded my HTML 3.2 book at McCay’s a few weeks ago. Maybe I should have kept it and re-read it.

Update Jan 12, 2009: Ian Tempest noted in the comments that zero does not exclude an element but rather moves it to the end of the tab order. From the W3C HTML 4.01 specification:

Those elements that do not support the tabindex attribute or support it and assign it a value of “0? are navigated next. These elements are navigated in the order they appear in the character stream. [Source, W3C, 17.11.1 Tabbing navigation]

Posted on

Today’s basic HTML question

Can <optgroup> be nested within <optgroup>? Is the following example legal?

<select>
   <optgroup label="A">
      <optgroup label="1">
            <option>Outlinepart1</option>
      </optgroup>
   </optgroup>
</select>

Answered! Optgroups may NOT be nested per HTML4 specification.

Posted on

Today’s Technical Challenge

I like the semantic web. That means that when I create a website I use markup as its intended. We used to have to use tables to make elegant layouts. Browsers have matured and become more compliant to the HTML specification. Now tables can be used for tabular data; however, designers still have tools which cut and slice designs up into tables rather than using CSS. Tables have their place in HTML. Specifically, tables use be used for presenting tabular data but not for arranging graphics or chopped up pieces of images in the browser window.

Menus and navigation are lists semantically speaking. Of course, no one wants to see a menu with a bunch of dots beside it nor should ever menu be presented as a vertical list with indentions for submenus. Using CSS we can remove the bullets, turn the list horizontal, and make the submenus appear as submenus when the mouse rolls over the navigation. This works great in a browser and because of the semantic nature will present well in a pda, phone or other mobile device. However, the WYSIWYG editor in an email client wreaks havoc on the page. "Huh?" is the correct response because really web pages, particularly dynamic web pages, should not be sent by email. Instead a link to the web page should be sent. BUT Internet Explorer is kind enough to provide under its FILE menu (PAGE menu in IE7) an option to "Send Page by Email" which in theory will deliver an HTML email that is an exact representation of the web page.

In reality, in a specific case which has not been narrowed down yet, the CSS menu is rendered with conditional comments.

<!–[if !supportLists]–>o<!–[endif]–>

Obvious steps have been to make sure that IE is upgraded to IE7 and that the email client is updated. And to confirm that the email is being sent as HTML and not plain text. Aside from returning to a tabled design, what other options should be explored?

Posted on

Take THAT you evil code!

Yes! I have been fighting a horrid coding problem and the code just lost! I beat it! I mean this is the type of problem that makes you have bald spots and want to give up programming for something less painful like digging latrines in third countries. This is like I’ve been trying to build a car engine but everything is in metric and all my tools are SAE and the client doesn’t care about the engine but really wants to know why the paint isn’t on the car yet. Oh how I want to be beyond the paint and putting the last bit of polish on the application. Today I should be able to make much progress. Oh wait, no I have to be at the body shop by 8am! Guess my workday will begin at 10am. How frustrating!

Posted on

Ridiculous ColdFusion/Webserver behavior

Solved! I had a conditional statement that would insert the following code into the <head> on one template: <base href="http://<cfoutput>#application.gDomainName#</cfoutput>"> Still doesn’t explain why it breaks.

Original problem: I have a bizarre situation and I am clueless on how to fix it. I have written an application that works fine on my development server. On the production server urls with cgi variables are behaving strangely. I have set up two ways to test the behavior. The first is in the application structure of application.cfm->index.cfm->included_file_with_href.cfm The href submits to itself like this: <a href="index.cfm?this=that&you=me&foo=bar">the link</a> I have include a <cfdump var="#url#"> as line 1 of the application.cfm. When the link is clicked the dump shows:

struct
amp;foo bar
amp;you me
this that

Now I created a test.cfm under the same directory structure so that it is influenced by the same application.cfm (remember, the one with the cfdump at line 1): application.cfm->test.cfm and it submits to test2.cfm and the dump comes out as expected:

struct
foo bar
you me
this that

So what would cause ampersands & to remain as & in one scenario but translate to &amp; in another case on the same server? This makes no sense whatsoever!

The URL has to be getting screwed by either the web server or the ColdFusion MX7 server. Neither makes sense. Yes 7.0.2 hot fix 2 has been installed. IIS is current.

Other references: See also

Posted on

Are you valid?

OPML for the Top 20

HTML is hypertext which is nonlinear navigation between related or unrelated documents, ie. links, and markup language with is symbols (in web speak, tags) to indicated to the printer (in web speak, browser) how the content should look and be presented.

The term markup is derived from the traditional publishing practice of “marking up” a manuscript, that is, adding symbolic printer’s instructions in the margins of a paper manuscript. For centuries, this task was done by specialists known as “markup men” and proofreaders who marked up text to indicate what typeface, style, and size should be applied to each part, and then handed off the manuscript to someone else for the tedious task of typesetting by hand. A familiar example of manual markup symbols still in use is proofreader’s marks, which are a subset of larger vocabularies of handwritten markup symbols. [Source]

As bloggers, we tend to write quickly and proof later (yes I generalize but you will see this post on my first draft). The array of blogging tools out there provide handy little WYSIWYG editors to help rush content out. Personally, I disable WordPress’s wysiwyg. These tools allow us to be sloppy and produce bad code/markup. The W3C is an international member organization with the mission of creating Web standards and guidelines. The W3C does not define the World Wide Web but because Tim Berners-Lee, who is credited with inventing the Word Wide Web in 1989 while working for CERN, also created the W3C, and so many industry experts are part of the consortium, W3C recommendations are highly regarded.

The W3C provides tools to validate your markup against the HTML specification. By making sure your website, and a blog is just a website that updates often, has valid HTML you can be assured that page will present its information in most any browser or news reader as you want the person reading it to see it. Non-valid markup can send a browser into quirks mode and the outcome may be unpredictable. Valid markup also lends to more favorable search engine placement. A blogger who takes the time to make sure their site template is valid HTML and that their regular posts are valid HTML making the entire site valid HTML may get higher placement in a search engine than a comparable blogger who does not validate.

That said, there is an argument that validation for bloggers may not be all that important. According to Bug Leak, all the blogs in Technorati’s Top 20 fail to validate.

This probably means that complying to the W3C standards is not a priority for the most popular content creators on the planet. [Source]

The article lists these 20 blogs and the number of validation failures. I was curious to find out what separates these great content creators from RealityMe (of course, I can guess that they have focused topics, thousands of links in, huge readership, more regular posting, etc.) so I added each to my feed reader to gander daily for a bit. I have saved the RSS links as OPML so that anyone can import the same 20 blogs into their readers. Bug Leak points to a great tool for WordPress users called XHTML Validator plugin. This plugin checks the content going into the database (not the actual template) to make sure that your posts are valid. How does one write valid code without knowing what constitutes valid HTML? Simply install the XHTML Validator plugin and begin posting. When it shows you errors, correct them and learn by doing!

Posted on

And an afternoon of troubleshooting goes to one line

So IIS v6 wasn’t letting form variables post. <cfdump var="#form#"> would show an empty structure. CF’s built-in webserver on the development box worked fine. Changing the method from post to get made things even stranger with the query string using &amp; instead of &. I finally found the solution. I had used the obscure html tag <base"

<base href="http://domain.com/">

IIS v6 did not like this. Removing that one line fixed the problem. So much for trying to be the perfect coder.

Posted on

Don’t work for free

I have this standing rule that I break all too often: Don’t work for free. I had this bad habit of giving too much and asking too little. I like seeing people happy; that is why the stage is so appealing to me. On the stage, you instantly know if the audience is happy and, if they are not responding well, you can change the show on the fly to fit the audience. In the business world, not asking for your worth is a guarantee that you will not survive. The customer is temporarily happy but because you undercharged or over delivered their expectation will not be realistic. For future work, you will either not be around to service them because you went out of business due to not making your expenses, or the future work will appear exorbitantly high since they received so much for so litle from you in their previous experience.

I entertained a phone interview recently. The recruiter had explained that if the interview went well, the company would ask me to write a sample webpage. At the time, I thought this made sense. All creative types should keep a portfolio to demonstrate your worthiness. However, when you start running at the pace that I keep there is little time to manage a portfolio; simply pointing to work you have done is no good because other hands change it. For example, if my job was to paint a mural by the interstate, overnight my artwork could turn into a mess of graffiti. The Internet is very similar. You might make a wonderful site that validates and is Section 508 compliant but the minute your influence is gone from the company you cannot expect that website to stay compliant.

Section 508 requires that electronic and information technology developed, procured, used, or maintained by all agencies and departments of the Federal Government be accessible both to Federal employees with disabilities and to members of the public with disabilities, and that these two groups have equal use of such technologies as federal employees and members of the public that do not have disabilities. [Source]

Doing a sample website could show my skills that portfolio, pages due to time or lack of budget, may not reflect. Like I said, seemed like a good idea at the time. I did have the wherewithal to ask the recruiter if I would have an hourly rate for the sample project…no. When the interviewer got to that part of the phone interview, I was graced with the sample project. "Could you set aside 5 days?" My jaw dropped!

I have a checks and balances when it comes to estimating projects. I have dollar figures defined for lengths of commitments to clients. I do my estimate based on the specification but then I check my standards to see if my estimate is accurate. That means if a client says they need me for a day the estimate should be between $a and $b; if they need me for a week, the estimate should be between $m and $n; and if they need me for a month, the estimate should be between $x and $y. A week generally looks like $dddd.dd.

I mentioned in a chatroom, with ambiguity for client confidentiality, the request to write a sample website and asked if that was common. The online community of chatters responded with outrage stating that a portfolio should be sufficient or that questions in an interview should easily ferret out the developer’s skills. The people speaking are big names in my industry; I could walk through Borders and point to several books written by them. Frankly, they suggested I not consider the company and asked, "if this their expectation in an interview, what will their expectations be as an employer?" They implored me not to do the sample project and reinforced that such a trend could be bad for our industry.

Now in all fairness, I interpret 5 days as "we are giving you five days so that you can show us you can meet a deadline and we understand you have other work to do." The interviewer said that it really shouldn’t be a day’s worth of work (that would look like $ddd.dd). I hope he is right that it doesn’t need the full 5 days otherwise I have already blown the job possibility. This week I also had a small project that turned out to be somewhat painful. Additionally, a client was holding payment while I worked out a bug in an application so that had my focus. I have 3 people waiting on estimates (estimates are the hardest part of my job and they pay $0). I got the go ahead on the next phase of a client’s project. Another client said I could begin working on his project because he is certain the end client will give the go ahead on Monday. And a maintenance client needed me for half a day because their network went down; they also need me to upgrade their accounting software this weekend. Sounds equitable right? Maybe in a perfect world but if you read it again you’ll see that almost none of that pays until down the road (if at all).

I suppose I could have ignored everything except the sample project on the premise that I will nail this job. That would have shown a huge lack of ethics toward my existing clients plus I have assured them that if I step out of consulting or take a long term committed project that I will give them sufficient notice and make sure their work is uninterrupted. This potential job is with a company that I admire. And, if this sample project is indicative of how they organize their actual projects, working with them will be an absolute pleasure. However, I must manage my risk and assume that the job will not come through. I know the interviewer is a big blog reader so I am certain this post will appear in their feed reader. Hopefully it is not read negatively.