Simple URI Tip for HTML

You may already know this, in which case you ran across it randomly, or are the kind of developer that reads specs. But if you haven’t run across this, prepare for a face-palm moment wondering why you didn’t know this years ago.

Using a uri like the following tells the browser to get the content over whatever protocol the current document was fetched from.

<script src="//platform.twitter.com/widgets.js"></script>

Think of all the little annoying server side script you’ve written to determine the protocol based on the request variables in order to avoid security warnings. Never again. Enjoy.

One warning… don’t do this in phonegap.

More detail, and links to rfcs at stackoverflow.

VicinityBuzz: Writing A Mobile App

This post is intended to go through the process of writing and publishing an app. It will be a high-level introduction. The idea is that future posts that will dig into specific topics in depth. This post will be updated to link to those future posts as an index of mobile development topics. The app I’m describing is VicinityBuzz and it’s available here.

Product Vision

While I had been thinking about writing a mobile application for a while, I needed an idea to stick with to completion. The app stores are relatively young, but they are fairly saturated, and bringing something new to the table was a challenge. Recently I read Eric Ries’ The Lean Startup and I do like the idea of MVP(Minimum Viable Product), so I didn’t feel the need to have a telephone book of requirements. I was just looking to have an original idea for the app stores.

In the case of VicinityBuzz, I have always felt that there are not enough good ways to search social media, particularly by location. There are social media sites like FourSquare solely dedicated to location, but I’m referring to something else. Using networks where content is the reason (not location) but by location. For instance, at a conference, users often hashtag their tweets with the name of the conference. But not always. And the hashtag will draw attention from people not at the conference. That’s fine, and there can be useful conversation by just using the hashtag, but what if I want to see posts of all users that are actually at the location.

app screenshot

This is particularly true of news events. On the day of the shootings at Chardon High School, I used the application to see what students and families in the area were posting about. They were each telling their own version of the story. It was heartbreaking and much more informative and up to date than the news being released to the public. Hashtags were useless in this case, for two reasons. First, the students weren’t hashtagging their posts, they didn’t need to. They were posting to their real-life friends and thus already connected on twitter. Second, the tag was full of a lot of the reaction from the public around the globe. That was interesting too, but it wasn’t was I looking for. I wanted facts and eye-witness accounts. It was like CNN’s iReport, but on steroids.

Platform Selection

Native or not? As a web developer, I chose PhoneGap. It’s a mobile platform framework that uses html and JavaScript, which are skills I already have. And the application didn’t have very many device needs that would require native access. GPS is the only device call I make, and that is easily accessible from the PhoneGap JavaScript API. I knew it would be faster than for me to learn the ins and outs of the Cocoa framework and Objective-C, although I am in the process of doing that now for future apps. I have written some small applications in the native iOS sdk, and even paired with some developers to help bootstrap their iOS work, but I just didn’t feel comfortable writing an app consumable by the general public yet. Along with PhoneGap, I’m using jQuery mobile.

Essentially PhoneGap provides project templates for your platform (Android, iOS, WP7, and more) that create a shell of an application that hosts a browser control. All of your files go in a directory (like resources) and get loaded up by the browser control.

app screenshot featuring controls

Using PhoneGap gives me a version that is easily ported to Android and WinPhone 7. Although those markets lag Apple’s AppStore in terms of developer revenue, I want to cast the widest net possible with this application for obvious financial reasons, and also to learn. The more feedback I can get on the application, the better I can make it.

At some point I may go ahead and do a native rewrite. But for now, I’m very happy with what is possible in PhoneGap and jQuery mobile.

Prototyping

I started development with jQuery UI in a browser. Using the built in JavaScript debugger in Chrome was easy. Note you could just as easily use Firebug in Firefox, or the IE Developer tools. Once I was satisfied with functionality, I swapped jQuery mobile in place of jQuery UI and moved the app into the PhoneGap container. More on that in the next section.

One note: If I had to do this over again, I would have simply started with jQuery mobile. It’s not that hard to get started with as the docs are great, and it’s best to just start down that path.

App Store Submission

Thus far, I can only speak to the Apple Store submission process. After going through the steps provisioning portal, it was fairly easy to test the app on a device. In order to submit to Apple, you then create a profile for the application (screenshots, contracts, payment details, etc) and submit a signed binary to Apple for review. The process of signing a binary for release can be a little tricky, but the walk-through on Apple’s developer portal helps a lot.

One thing to note: Apple requires you have a support page. I stole an idea from the Trello folks, and used a public trello board for this purpose. It took less than 5 minutes to setup.

Marketing

I created a basic web page with a description of the application. Apple has a page for making the link to their store. If you are interested in opening the store automatically, either see the options in this stackoverflow post, or add the query paramter “ls=1” to the url you get from the link maker.

What’s Next?

Apple just announced “the new iPad” so I have to do some updating to support that. I haven’t read the new docs, but I assume this means a high-res iPad splash screen and icon. All of my other assets are web assets and scale accordingly.

My next steps are to add a simpler user workflow, a refresh button to update your current search, and add some social networks like Facebook and Instagram.

After that, I’m going to start porting to Android and WinPhone 7. Since the application is already written, it should be as simple as getting a PhoneGap project running for each environment. I have also considered the Mac App Store and the upcoming Win 8 Marketplace for desktop application versions.

Finally, I’ll blog more in depth about some of the topics covered, and provide links to those posts on this page. Mobile development is rewarding, but can be challenging for those coming from a web or desktop background. I’d like to pass on some of the things I learned so that others working in mobile can save some time.

Feel free to provide feedback and questions if you have something in particular you’d like me to cover. And checkout the application!

Flex is a Relic and Silverlight is a Zombie

…or some other catchy metaphor that will grab your attention. These technologies were hot over the last 5 years. Flex gained a particular amount of popularity in the Java community where UI technologies have a bit of a spotty record (that’s like saying my Bengals have a bit of a spotty record over a lifetime). Silverlight gained a lot of traction among Microsoft developers who actually cared about design and UX. Many alpha-geeks of the Microsoft space were running around giving conference talks about the MVVM pattern, and sharing code on codeplex. So what happened?

Both of these technologies are going to fade on the public web. Tablets and mobile devices are too big a share to ignore. Html5, phones and tablets did them in. The heavy hand of Steve Jobs probably gets credit for the coup de grĂ¢ce. The browser vendors and phone OS creators have really put their weight behind Javascript and Html5. If you have have that skill-set right now you can create:

  • Web Content
  • Mobile Web Content
  • Mobile Apps via Appcelerator
  • Mobile Apps via PhoneGap
  • Windows 8 Metro Apps

That’s a pretty wide reach for a markup / scripting language set.

So what do you do if that’s your trade? You work as an AIR/Flex developer or Silverlight developer, what do you do? There are good options for each camp, and some universal options.

Flex Developers

I think this is the slightly less promising path in the long term (despite it hitting a much higher peak than Silverlight). That said, Flash and Air will live on for a while, and you have some time to make a transition. Additionally, the ability to use the Adobe tools to make mobile applications provides a bridge to the hot mobile market. And you can make long term plans to transition to another cross-platform tool (PhoneGap, Appcelerator, etc), or go native. If you’re in the Adobe camp, new tools like Edge are likely to ease the transition to the standards-based technologies of the web.

Silverlight Developers

Similarly, Silverlight won’t be gone tomorrow. Intranet applications that need rich functionality (and simple deployment) are still a nice fit for Silverlight Desktop applications. And the adjustment to WindowsPhone 7’s flavor of Silverlight is straightforward, though I would be cautious and investigate the financial realities of that market. Finally, while Windows 8 Metro Apps don’t specifically use Silverlight, they can use C# with XAML and a subset of the .Net libraries that emphasize a security sandbox and async data connections. Sound familiar? That’s because they re-animated the corpse of Silverlight and made it an option for writing Metro apps. Long term, you should probably learn to use the Html5 / JavaScript hooks for Metro due to the ubiquitous nature of those skills. But isn’t it nice that you can learn the new API (WinRT) while keeping C# and XAML, and then make the languages switch at your leisure.

For Everyone

Both camps should embrace these newer web technologies and the UI skills they picked up during their time with the respective technologies. Good user experience and design are rare skills in developers, and retraining the languages and tools should be the easy part. Keep your black turtlenecks and invest in the next tools rich applications. You already have a leg up.

On Outsourcing, Protectionism and Education

Things are often more complicated than they seem. Certainly in the worlds of economics and nationalism. It’s no wonder that as the largest economy in the world, America wants to protect that place and Americans are sensitive to any efforts to move jobs elsewhere. Certainly that is true today, with unemployment currently at 9.1%.

In my own field of software development, the concern is that jobs will go to markets in Asia, like China and India. Chad Fowler’s first edition of The Passionate Programmer was even titled My Job Went to India: 52 Ways to Save Your Job. And at first, it seemed strange that this would happen in software. After all, when all the manufacturing jobs started leaving the country, the prevailing argument behind those who accepted this, was that the labor force would be retrained for higher tech jobs, and ultimately a higher potential wage. So how could it happen that the new jobs start getting outsourced?

I’ve followed Dr. Michio Kaku since I read his book Physics of the Impossible, and he has some interesting ideas around this:

Well, is he right? Based on what I observe, I would say he is. When jobs were leaving the auto industry, there was already downward pressure on the wages (signalling low demand). But software developers make a lot of money. It’s not unheard of for developers without a college degree to make 6 figure salaries, even in Midwestern states. By the way, I’m not equating a college degree with skill, but it’s a fact that when demand and supply are near an equilibrium in mature fields, a degree is usually expected. For example, accounting work was not always done by those with a college degree or certifications, but now that is a normal expectation. So I would say that when there are software developers with little to no formal education past the age of 18 making more than some attorneys and doctors with 8+ years of school (and associated student loans), that software development is a field in high demand, and it sounds like Dr. Kaku is right.

There are areas of development that are more prone to offshoring than others. Consulting style services for large corporations have a higher communication threshold and so cultural barriers and communications barriers can be an issue. So these jobs are not typically easy to outsource. However, small projects, and product creation and maintenance (ISV work) is a little easier to move.

So what does all this mean? What if we did try to protect those jobs? Short term, Software Developers would be happy. Supply would plummet and the demand for the best talent would help salaries skyrocket. But Dr. Kaku is right, it would do severe damage economically. Take the regular IT work of companies, and software / web startups, and double the cost. So much work would not be done, because the ROI would no longer justify the increased cost.

To me, the real way to help keep Americans employed is the fix education. If technology is a high demand industry with a lot of promise, why not supply as many educated Americans as we can do fill those jobs. Dr. Kaku seems to be suggesting that. And if you think that’s a soft sounding idealistic answer to the question, consider who else is making the same point to Congress. Not too many people accuse Bill Gates of being a hippie.

I recently watched Waiting for Superman. It’s full of opinion and outright bias, but there are some really clear points that are hard to argue with. In particular, I thought it made an excellent point about schools being designed in an era when the bottom 50% of students went into manufacturing & agriculture, with the next 30% or so headed into non-degree jobs (office administration, clerical, low-level business, sales), and the top 10-20% going to college for professional jobs (law, medicine). According to those requirements, schools aren’t doing that bad, but that reality isn’t true anymore. College is necessary for many more career paths. Producing those same ratios without manufacturing and agriculture simply floods the service sector. It’s why pay is so low in restaurants and call centers.

To support a higher standard of living, our education system has to support technology and innovation. Technology can be taught, but innovation is harder. I think innovation takes 2 parts technology, 1 part business-savy, 1 part liberal arts, and some God-given natural talent (think Steve Jobs). What do you think?

Popup Overlay Auto-Applied to an Anchor with jqModal

Working on a relatively straightforward page, I want to have some of the simpler static contact come up as an overlay style of popup. Following web standards, it would be nice to have this code automatically work based on a CSS class. This would provide two benefits: easy to add more such links without writing new code and it will work without javascript.

I worked through a solution using a variety of samples. The project uses html5, jquery, and the jqModal plugin.

The footer code where I have the link I want to change gets the “popup” css class added to it.

          <a href="terms.html" class="popup">Terms</a>

terms.html itself is a simple static html page with a header and some paragraphs, so I won’t show it here. I’ll only mention that it can still have html and body tags of it’s own.

In css, I have some simple styling in place for jqModal to use.

.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    height: 600px;
    overflow:auto;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

Finally, here’s the javascript that sets it all up. If you were going to use this on multiple pages, you might want to move it into it’s own file.

      <script type="text/javascript" 
            src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js">
      </script>
      <script type="text/javascript" src="jqModal.js"></script>

      <script type="text/javascript">
        var dialogs = {}; // cache for dialogs keyed by url

        $().ready(function() {
          $('a.popup').click(function(event){
            event.preventDefault();
            var url = $(this).attr('href');
            if(!(url in dialogs)) {
              dialogs[url] = 
                $("<div class='jqmWindow'>Loading content</div>");
              $(dialogs[url]).jqm({ajax:url});
              $('body').append(dialogs[url]);
            }
            $(dialogs[url]).jqmShow();
          });
        });
      </script>

First, you’ll notice the code references jquery via the Microsoft CDN. It also pulls in a local copy of jqModal.

Then, I declare a page level variable. “Global” variables are not something to use often, but as a page level cache, this is actually an appropriate use. If this was off in it’s own file, you may want to use namespacing tricks in javascript to avoid name collision (outside the scope of this example).

Next, in jquery’s document ready function, we add a click handler for any anchor (link) with the class popup. It stops the default behavior (which for a link is to submit a get request). Then, the function tests to see if it has already setup a dialog div for that url. If not, it creates the html for the div with the proper jqModal class, and adds it to the body. Finally, it sets up the dialog div to load the url from the associated anchor via ajax.

The final step after either creating or fetching the dialog div, is to call it’s jqmShow() method.