Life is a series of near misses !

“I believe life is a series of near misses. A lot of what we ascribe to luck is not luck at all. It’s seizing the day and accepting responsibility for your future. It’s seeing what other people don’t see and pursuing that vision.” – Howard Schultz, founder of Starbucks

jQuery Accordion and Dynamic Runtime Population

As I mentioned in my last post I’m playing with this idea of building a scoring application for boxing / mma events.

I want it to be a single page web application that scales to fit phones, tablets, etc.

An event contains a number of “bouts” and each bout will be a section in a jQuery UI Accordion control.

However, as is often the case, there are a couple of real world conditions that I couldn’t find documentation of sample to demonstrate.

1.) Event event can have a different number bouts.

This means that the accordion sections have to be dynamically built at runtime in the html page.

2.) The order of the events can change right up to the event time.

This means that the USER needs to be able to change the visual sequence of the bouts.

3.) The click-able header needs to be multiple elements.

All the demos I found assumed the headers were simple H3 elements.

You can play with a working version by clicking the image below.

Note that you can not only open and close the “bouts” but you can re-order them using drag-n-drop on the title bars.

– - – THIS IS A UI PROTOTYPE – - –

FightCard- 001

Built this way I can now add the AJAX logix fo recieve a JSON package that contains the event detail and use that data to populate the event.

Here is the code as it exists so far.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fight Card</title>
<link rel="stylesheet"
 href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
    /* IE has layout problems when sorting  */
    .group { zoom: 1 }
</style>

<script>

//-----------------------------------------------------------+
// addBout() - Add a single node to the accordian
// TODO: add JSON object as input parameter and build the
//       bout with that data,
//-----------------------------------------------------------+
function addBout(){
    var bout =
        "<div class=\"group\">" +
            "<span class=\"handle\"> " +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width33pct align-left\">" +
                            "<strong>Blue Fighter TBD</strong>" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "vs." +
                        "</span>" +
                        "<span class=\"cell width33pct align-right\">" +
                            "<strong>Red Fighter TBD</strong>"+
                        "</span>" +
                    "</div>" +
                "</div>" +
            "</span>" +
            "<div>" +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "Round<br />0" +
                        "</span>" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                    "</div>" +
                "</div>" +
                "<span>" +
                "Mauris mauris ante, blandit et, ultrices a, suscipit , " +
                "quam. Integerut neque. <br /> Vivamus nisi metus molestie" +
                " vel, gravida in, condimentum sit amet, nunc. Nam a nibh." +
                "accordion .ui- iconDonec suscipit eros. Nam mi. Proin " +
                " viverra leo ut odio. Curabitur malesuada. Vestibulum a " +
                "velit eu ante scelerisque vulputate." +
                "</span>" +
            "</div>" +
        "</div>";
    return bout;
}

$(function() {

    $( "#accordion" )
            .accordion({
                header: "> .group > .handle",
                heightStyle: "content"
            })
            .sortable({
                axis: "y",
                handle: ".handle",
                stop: function( event, ui ) {
                    // IE doesn't register the blur event when sorting
                    // so trigger focusout handler to remove .ui-state-focus
                    ui.item.children(".handle").triggerHandler("focusout");
                }
            });

    //-----------------------------------------------------------+
    // This for loop is just for testing.
    // The real app will iterate a JSON collection and send
    // each bout node to the addBout function for insertion
    // into the accordion
    //-----------------------------------------------------------+
    for (var i=0;i<5;i++) {
    $("#accordion").append(addBout()).accordion("refresh");
    }
});
</script>

</head>

<body>

<div id="main-container" class="main-container">
    <div id="accordion">
    <!-- Bouts will be inserted here -->
    </div>
</div>

</body>
</html>

And the CSS

body {
   font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
   font-size: 62.5%;
   background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;body {
	font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
	font-size: 62.5%;
    background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;
}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

A simple HTML/CSS adaptive container.

So if you’ve been reading me for a while or you follow me on Twitter you probably know I’m a fight fan.

I’ve started building a sports app related to fighting sports and I’m starting with an HTLM5 app that will run adaptively in any size browser.

I didn’t find an example that did what I want.

My desire was to place the functionality inside a DIV that would take up most of the width of the screen, scale with the size of the screen but ONLY up to 960 pixels.

Like this is the browser window is greater that 960px.

adapt-proto-1

And like this when the browser window is less than 960px.

adapt-proto-2

Here’s the code I came up with.

Simple, but meets my needs.

<html>
    <head>
        <title></title>
        <style type="text/css">
		body {
			background-color:#b0c4de;
		}

		div {
		    width: 96%;
		    max-width: 960px;
		    height: 100px;
		    background-color: white;
		    position: absolute;
		    top:20px;

		    left: 0;
		    right: 0;
		    margin: auto;

		}
        </style>
    </head>
    <body>
	    <div>
	    	--- app content ----
		</div>
    </body>
</html>

Fix for Ubuntu 13.10 64 bit crashing caused by Nvidia drivers.

About a year ago I switched from Linux Mint to Ubuntu because I had gone to work for Zend and Zend did not support Mint.

I had been running Ubuntu 12.04  32 bit on a Thinkpad T61 and kept that version because Ubuntu 13.10 comes with Apache 2.4 which was not supported in Zend Server until version 6.3  (Feb 2014)

Having left Zend I though I would upgrade my Linux boxes to 13.10 and installed Ubuntu 13.10 64 bit on my Thinkpad 13.10.

Everything went as expected with the install but actually using Ubuntu 13.10 on my T61 was frustrating.

Ubuntu 13.10 64 bit began crashing a lot !

Click on the Unity Icon – CRASH (well, a bit more than 1/2 the time).

Open lots of Windows in Firefox, CRASH.

After a bit of searching I discovered that there seems to be a universal issue with the default (one source) drivers on Debian based distros and Nvidia graphics sets.

It turns out that Nvidia makes proprietary Linux drivers for their graphics sets as well.

Note: The hard core open source folks will tell you not to use closed source drivers and not to installed from unverified PPA sources.

In my case the steps below not only seems to ave stopped the crashing and increased my graphics performance.

Your mileage may vary.

sudo add-apt-repository ppa:xorg-edgers/ppa
sudo apt-get update
sudo apt-get install nvidia-current nvidia-settings
sudo apt-get remove --purge xserver-xorg-video-nouveau

Choosing AbiWord as the Word Processor for Blogging.

images

For the past few years I’ve created a long list of topics I wanted to blog about but the day to day demands of my job prevented me from finding the time to actually do the writing.

Now that I’m“in between adventures”, I’m working on blogging more and I hope, what ever I do next career wise, I’ll be able to write regularly again.

For blogging I generally use WordPress, though I also write content that gets published on Joomla & Drupal sites.

Embedded editors tend to be compromises at best and when I write I want to use a word processor. Yes, I know, how 1990s.

I generally have a number of writing efforts under way simultaneously, some are under way for hours, others for many weeks.I find WordPress (etc.) drafts to be a sub-optimal choice for work in process version management.

I also need to write off line. Why? I fly (a lot), I have active children and I live in the country where even cellular data services is not ubiquitous.Horse riding lessons,singing lessons, gymnastics, soccer, school play rehearsals, etc, etc add up to a LOT of potential writing time.

My needs for blog writing are not that complex, I want a word processor loads quickly and has a fast UI,has goods pell checking, supports hyper-links and can save as HTML.Since I also use Linux, Windows and Mac, I want to be able to move my documents easily between platforms.

There are lots of those (MS Word, LibreOffice, OpenOffice, Apple Pages) so what’s the problem.

Well the problem is that all the“big”ones pollute the HTML when they save the document. Microsoft Office is famous for he mess it makes of HTML.

Lets look at the output of a document saved by html from LibreOffice Writer

Here is a snippet form the CSS that LibreOffice Writer Writer creates.


.P1 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
.P2 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
.P3 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
.P4 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
.P5 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
.P6 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
.P7 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }

And here is a snippet of the HTML mess it produces in the same file.

Note that even basic paragraphs have custom classes and Writer generates them for html paragraphs even if nothing changes from one paragraph to the next.

And, of course, the html is ugly.



Since some will ask.....

Yes, I considered going back to Microsoft. I think they
are doing some interesting things and the recent changes in senior management
should be good for Microsoft's developer focus over the next few years.

No, I didn't get the job. The heaviest focus
for the position was on driving apps into the Windows Phone Store and
engaging college students. I don't have any apps in the Windows Phone Store,
wasn't really a Silverlight guy and am 53 years old.

But the interview process caused me to update my look at
Microsoft developer focused strategy and the  state of affairs of Windows
Phone 8 and the mobile apps development landscape.


Enter AbiWord. AbiWord is a light but well featured word processor available for Linux, Windows and Mac.

It’s fast, supports the features I want and DOES NOT pollute the markup it generates when I save as HTML.

Now lets look at the HTML created by AbiWord when I save a document as HTML.


p, h1, h2, h3, li {
	color:#000000;
	font-family:'Times New Roman';
	font-size:12pt;
	text-align:left;
	vertical-align:normal;
}

Note the more standard use of CSS ad the absence of custom classes.


And, the simple, formatted HTML.


      For the past few years I’ve created a long list of topics
         I wanted to blog about but the day to day demands of my job
         prevented me fromfinding the time to actually do the writing.


So……

That makes is EASY for me to do my writing in the AbiWord word processor, save as HTML, then publish in WordPress, etc. with minimal work required to customize the markup for my specifc blogging platform requirements.

Why Windows Phone has a future.

A couple of weeks ago I interviews with the field developer evangelism group at Microsoft New England.

Since some will ask…..

Yes, I considered going back to Microsoft. I think they are doing some interesting things and the recent changes in senior management should be good for Microsoft’s developer focus over the next few years.

No, I didn’t get the job. The heaviest focus for the position was on driving apps into the Windows Phone Store and engaging college students. I don’t have any apps in the Windows Phone Store, wasn’t really a Silverlight guy and am 53 years old.

But the interview process caused me to update my look at Microsoft developer focused strategy and the  state of affairs of Windows Phone 8 and the mobile apps development landscape.

According to Business Insider, Windows Phone & Skype lose Microsoft about a half a billion dollars per year. Meanwhile, Microsoft’s revenue from the sale of Android Phones tops two billion dollars.

This makes sense if you think about it because Microsoft’s revenue on Android phones is basically patent insurance. Android manufacturers pay Microsoft in agreements that keep Microsoft from suing those manufacturers for what Microsoft claims are patent infringements present in Android. Thanks means the per device cost to Microsoft is ZERO and the revenue is 100% profit.

So as I look at Microsoft’s huge focus on growing the Windows Phone market share I’ve been thinking about WHY Microsoft would bother. I mean Android is king and enjoys something like 1.5 million activation EVERY DAY!  With Microsoft being paid between $5.00 and $10.00 per Android handset, that seems like a ton of net new profit for Microsoft with absolutely no ongoing investment necessary to sustain that revenue stream.

So why would Microsoft bother to continue to sink money and time into a phone operating system on which they have spend many billions of dolars to develop and market only to achieve 5% (USA) market share to date.

I think there are several reasons.

1.) Microsoft controls the licensing fees for the Windows Phone OS and their per devices licensing fee is greater than the patent fee they receive from the sale of Android phones.  So, the more new Windows Phones they can sell and the more they can displace existing phone customers, even Android users, the larger the per device dollar figure they receive.

2.) There are SEVERAL ancillary revenue streams that come with winning the device market share for Microsoft

- Microsoft charges developers an annual membership to submit apps to the store and takes 30% of all app revenue.

- The greater the use of Windows Phones the greater the demand for apps. Microsoft’s Visual Studio, Expression and MSDN sales go up.

- Microsoft’s developer tools simplify the integration of Microsoft Azure based cloud services with will make their use preferential to other cloud services.

3.) There is a combinatorial benefit across form factors in that today I can share large portions of code across Windows Phone, Tablet, and Phone devices. (And it appears that Microsoft will continue the runtime convergence that makes this possible.)

4.) Microsoft’s Android patent revenue trick may not last forever. The actually validity of Microsoft’s patent claims have not been really tested in court. Especially outside the USA, Microsoft may not find courts favorable to their patent claims.

So it’s good for Microsoft but is it good for me, the developer, if Microsoft succeeds in making Windows Phone successful at the expense of Android or iOS?

I have enough experience with the iOS and Android development tool stacks to comfortably say the Windows Phone 8 development experience puts the others to shame, but event the best development experience may not be interesting to me if the market share hovers at 5%.

IDC says Windows Phone 8 is the fastest growing mobile phone operating system. I’m not sure that means anything though. When your competitors have 96.1% of the existing market share, virtually any growth in your market share makes you the fastest growing.

Still, there are compelling reasons to develop for Windows Phone and there are reasons to think Microsoft might continue to grow the Windows Phone market share.

1.) Windows users are used to paying for premium software (and Android users are notoriously not). So developers may experience better financial success with apps in the Windows Phone Store than in the Android / Google Play store or the saturated Apple Store.

2.) The hardware is better. Yes, I know you may want to argue about this but if you look at the cool new devices coming out of Nokia (which is being acquired by Microsoft) and the sheer pace of new device appearance, he cool hardware factor has to go to Microsoft’s favor.

3.) Desktop Synergy. Microsoft still owns over 90% of the desktop market share. Yes, I know that only 10% of that is Windows 8 but it still leaves Microsoft with the customers ears and the PC manufacturer relationships to keep their hold on the desktop user (especially “consumer” users).

4.) With Xamarin’s products I can take my Microsoft code and target Android, iOS and OSX users as well.

So as of today, the reach opportunity on mobile is Android and the revenue opportunity slights favors Android but if Microsoft gets Windows Phone 8.1 & 9 right, if it gets the legacy Windows Desktop upgrade story right and drives the OS and Tablet prices down (I know, some big ifs) Microsoft has a good chance to become a really significant player in the mobile space.

Enough so that, while I probably won’t be deploying FirefoxOS or Ubuntu Phone apps for my upcoming applications venture, I’m definitely adding Windows Phone to iOS and Android in my mobile plans,

My last days at Zend.

This weekend I told a developer friend that I would be leaving Zend in a couple of weeks.

His response was, “wow, when I talked to you at ZendCon you were really bullish on Zend”.

I was, and even tough I’m leaving, I still am.

I know that sound’s like PR spin, but it’s not. Zend has some GREAT products and I’ll keep using them.

So, if the products are great and the company is growing, why am I leaving?

Well, I’m a “developer” guy. That’s my thing.

I’ve been developing software, or working on developer related products and communities for over 30 years.

Zend will always be involved in PHP development technologies like Zend Studio and Zend Framework – but Zend Server is the product that pays the bills.

In the last year we’ve come to understand that Operations (DevOps) is where Zend’s Enterprise Server has it’s strongest value proposition. With this understanding Zend has devoted a great deal of engineering resources to enhance the Zend Server offering with a new and growing collection of Continuous Delivery integration patterns.

To do a great job engaging the right potential audience for Zend server, Zend’s primary community strategy needs to move in the right (operations / CD) direction.  Zend has always focused on developers and they assure me that won’t change, but the focus for Zend Server will be at a higher level. VP of Development / VP of Operations.

I’m not an ops guy :)

Sure, I could spend a year developing operations center experience and “faking it” – but I don’t want to BE an operations guy. And Zend doesn’t need a operations and continuous delivery expert a year from now – that conversation has already started. (http://www.zend.com/en/solutions/continuous-delivery/)

I joined Zend because it’s co-founder Andi Gutmans has been a friend for many years.

When the my needs and experience are no longer a match for the company’s needs and opportunities, its a bit sad, but the right choice is obvious.

And so, February 14th will be my last official day at Zend.
My friendships will stay in place, I’ll keep using Zend’s Products, and I’ll still be at ZendCon :)

A quick note of thanks to my coworkers at Zend. Especially Andrea for the laughs, Mathew, Zeev, Guy & Natalia for all the technical support and Maurice – the tireless & expert developer !

So what will I be doing next ?

As of today, I have no idea. :)

I’ll be looking for a full time gig, doing some contract writing & video work in the meantime and writing some code (something my duties over the past few years have forced me to do less of than I would have liked.)

I’ll be doing some Drupal development and I have a few mobile apps in mind for WM8, IOS & Android.

Maybe I’ll even have time to get back to blogging.

In the meantime, if you have any ideas for me ?

My home office isn’t my kitchen table !

If you follow me on Twitter or Facebook you probably saw this morning that I’m moving on to my next career challenge – though I don’t yet know what it will be other than that I’ll be paying special attention to finding a great fit.

Though I’m not “stuck here” … I’ve worked from a “home office” for over 15 years with most of that time being based on the west coast – the opposite side of the country form which I live. (Yes, I travel :) )

A team that I’ve been talking  to about some consulting work asked me what it looks like to “work from home”.

For me, it’s a bit like any other office.

Except…….

My commute is about 30 yards. (I live on am 8 acre lot in the woods of New Hampshire and built a separate building.)

Office upstairs, gym & garage downstairs.

It has great band width, a great technical library (yes kids, I still read books printed on paper), everything except plumbing (which I had planned to before the bubble burst – add and still will some day.)

I built the building during the “dot com” boom when I was sort of a serial “start-up” guy. It was originally configured with modular capacity for up to 12 people.

HomeOffice_01

 

Yup – tons of hardware. When you do lots of competitive analyses – it helps to be able to go hands on with everything.

 

HomeOffice_02

I’ve done tons of technical “how-to” and product marketing videos and podcast so at one point I built a micro studio. Note the green screen to the left !

HomeOffice_03

It’s a great place for long hours !

HomeOffice_04

Yes, I’m sorry to my young eco-friendly friends – I’m an old guy who still prefers books printed on paper :)

Maybe an article on the “art of working remotely” might be of interest to people.

Building a VM Infrastructure for Continuous Delivery Demos

Zend has been doing a lot of work in the Continuous Delivery Space for PHP applications.

See the “Zend Blueprint for Continuous Delivery”

And I’m building out a “demo” infrastructure in virtual machines

Any comments of suggestions ?

What conferences should Zend join in 2014 ?

So, one of my first tasks for 2014 is to plan what events Zend should participate in.

So, please share your thoughts.

World wide, what are the most significant……

1.) PHP Developer Conferences

2.) DevOps Conferences

3.) Multi Technology, Web and Mobile focused events.

And what are the value criteria? (Number of attendees, press coverage, etc…)

Thanks in advance !