Reflection on 7 Years of JSConf

JSConf.us has been a wonderful event with great talks for seven years. I thought I’d share some of my favorites. Other people will have other favorites and this should not be considered a best of list.

2009 - Looking back at the first JSConf one must marvel at the talks and the atmosphere. Magical describes about half of it. These are the talks that still influence me:
     Chris Anderson and Jan Lehnardt’s CouchDB to the Edge was funny and mind-blowing. I’m still a huge couchdb fan. James Duncan’s The Smart Platform. A JavaScript P.a.a.S had these great images of generators in factories and related the rise of electric power plant to the coming demise of in-house data centers. AWS must have watched this video. PhoneGap - Brian crushed this talk and continued to be a presence at JSConf every year. And calls for more bacon.
     I had a very small part at the end when I presented Chris Williams with some beers brewed in the year JavaScript was invented.

2010 - Again in DC with some of the better known JavaScript presenters like Brendan Eich, the inventor of JS, and Douglas Crockford who discovered JSON. Brendan sat at the table with me and the rest of the YayQuery group. Their influence on JSConf and JavaScript had been remarkable (see next year). Noted that everyone at the table had Macs and took a picture - which is lost. Also, this was one of the first US talks about node.js which had just introduced at JSConf.eu. Talks I remember vividly were:
     YayQuery’s Lunch Spectacular. Ryan Dahl on Less is More in Node.js. Dmitry Baranovskiy on Raphaël the Great which showed me that JS has no limits. And Steve Souders on performance.

2011 - Okay west coasters, JSConf is now closer in the beautiful city of Portland OR - and bigger and with more bacon. Then pinball. This is the year that the quality of the B Track really started to improve where the YayQuery speakers rules. Alex Sexton spoke on Uselessware. Rebecca Murphey’s Modern JavaScript was a great talk. And Paul Irish on Going Steady with the Chrome Dev Tools and he has since taken his expertise to YouTube fame. Yay!
     Mary Rose Cook’s Fakery, AI, Collision Detection, a 2D Platform Shooter in JS may not hold up with time but I thought it was a great moment. I also liked Ben Combee’s talk on Enyo, an early framework which I enjoyed.

2012 - Now in warm Arizona with a great pool so my family came along. Jake Archibald’s Application Cache is a Douchebag was a stunning title and he just kept me on the edge of my seat. And lastly, Chris Williams and Avni Khatri discussed Diversity In Computing. A topic we are still dealing with and having more successes every year.

2013 - First year in Florida for JSConf.us with CSSConf was the day before. Nicole Sullivan’s For The Love of Style Guides introduced me to the concept of a living style guide. Raquel Vèlez talk on AI.js showed the advantages of using JS for non-trivial robots. And Angelina Fabbro’s JavaScript Masterclass deserves to be the most popular video. And of course my talk on JavaScript Journalism that got quite a reaction from the journalists when the video was released.

2014 - Kawandeep Verde’s Open Web Art showed that JS really could be used for art. Yet another way to be creative or express oneself. Jenn Schiffer’s What the Harm In Sorting was hilarious. The talk that had the most impact on me was Patrick Hamann’s was CSS and the Critical Path given at CSSConf. He proved a concept I’ve argued for embedding CSS and JS in the HTML page for performance.

2015 - Mariko Kosaka’s Knitting for Javascripters was a completely unexpected talk and great on many levels. Also, Tracy Hinds’ Re-examing Recipe Search was a walk down a familiar path for me.

[Update expected with links to videos and later about LastCall.]

Halloween Jokes - 2015

When kids trick or treat at our house we ask them to tell a joke. We have the reputation as the 'joke house.' These are the best from this year.

• What do you call an aligator wearing a vest? An Investigator!
• Why does Waldo wear stripes? He does not want to be spotted.
• Knock, knock. Who's there? BooHoo. BooHoo who? Why are you crying?
• Knock, knock. Who's there? Panther. Panther who? Pants or no pants, I'm going swimming.
• Why did the chicken cross the road? To go trick or treating.
• Why did the chicken cross the road? To avoid Chick fil A.
• Knock, knock. Who's there? Dishes? Dishes who? D'is the police, come out with your hands up.
• What did candy say to corn? Want to become candy corn?
• How does a mom dress up for Halloween? As a mummy!
• What did the skeleton waiter say after serving the food? Bone appetite!
• On Halloween, what did the bird say after knocking on the door? Twrick or Tweet!
• What did the teal crayon say to mom? I don't teal well.
• Knock, knock. Cashew. Cashew who? No thanks, I'd rather have a peanut.

Thanks to the woman who asked if I was from the midwest. I spent by trick or treat years in northern Indiana. She commented that in Iowa she was always asked to do something before taking a treat and loved the idea of the joke house.

There you have the best. 2014 and 2012 and 2006 are also available.

Accelerated Mobile Pages (AMP) For Landing Pages

The Accelerated Mobile Pages (AMP) are designed to load extremely fast which is the goal of most landing page. These are the pages you see when clicking on a link from an email, for example. So landing pages would seem to be a great fit the AMP.

AMP places limits on how the page is created in order to render so quickly. These limits include no original JavaScript or third party JavaScript. It also limits the HTML code and the CSS. Landing pages are some of the most creative area of web design and limits on creativity sound bad. However, constraints often produce great results. So I think it is too early to assume that AMP is bad for landing page creativity.

The primary purpose of most landing pages is for the reader to take an action like provide an email address, donate money or click on a button. For AMP to work for landing page, they must be able to provide a Call to Action.

Web designers are going to be creative since AMP does not currently allow user input from a form or JavaScript. So Calls to Actions will primarily limited to buttons though we might see some creative use of links. The linked page will be non-AMPed for collection emails, donations and other information from the user. So a landing page is mostlikely going to be two pages or more. This will change the analysis of page views, the “funnel” for the business and A/B testing.

Bootstrap, Foundation or other CSS frameworks are also incompatible with AMP. These are common ways to get a landing page up quickly with minimum coding of CSS and JavaScript. So instead of these frameworks, AMP templates will probably spring up in the Grunt, Gulp, Browser and front end tool ecosystem. Also expect plugins for common editors like Sublime Text and Atom.

While it is fun to speculate about AMP for Landing Page, building one might provide more insights. To that end, I’ll be rebuilding the landing page for my Reading.email project. The first version will be very simple and more features will be added.

AMP highlights Interactive News Stories

AMP does not kill interactive news but highlights interactive news. AMP (Accelerated Mobile Pages) should lead to readers becoming even more aware of the creative uses of JavaScript in journalism and telling other stories. Readers will expect a better version when they read non-AMPed news stories. This is good for writers, journalism, publishers and readers.

Readers are already well aware of the bad JavaScript practices with trackers and ads. Ad blockers are a hot topic currently for the Apple platform. Joshua Benton shows a Chicago Tribune page full of trackers. In my 2013 talk on JavaScript Journalism at 4:00 mark I pointed out that most newspapers have 30 times more JavaScript than text with the worst case being The New York Times with over 90 times. Newspapers and their third parties are notorious for their poor practices in using JavaScript.

I worked at The Washington Post on the mobile web. This was the mobile browser version of The Washington Post and our job as a front end developers was to deliver the news as fast as possible for readers. We had some success and were pioneers in the off-line first efforts. Later work by both USAToday and The Guardian pushed performance even further getting delivery in under a second.

However, in any news organization there is a conflict with the business side. I saw this first hand when our team had worked hard to increase performance by fractions of a second only to see it disappear when the business side signed an agreement to add yet another third party JavaScript code block to the site for ads or analytics. I cringed at seeing some of the new buttons and lost milliseconds.

So another impact of AMP will be that news organizations will have to re-evaluate their use of third party scripts and demand use of best practices by these vendors. Not even The Washington Post as one of the largest newspapers was in a position to demand more secure and better performance by these analytic and ad networks. Hopefully, AMP will solve this problem and force third party vendors to use JavaScript best practices.

So I am very positive about Google's introduction of AMP. It is a great step forward for readers, journalism, news publishers and the web.

Disclosure: The project lead of AMP, Malte Ubl, is a friend. He is also the curator of JSConfEU which I have attended.

Medium.com and "Is media becoming a wire service?"

Erza Klein took a narrow view when he wrote about media becoming a wire service. So I wrote a response on medium.com which went unnoticed - only two views to date. I assume that I don't publish enough there. It is published below.

My view is heavily influenced by Marshall McLuhan. Perhaps the title should be "Vox is old media, the content of new media."

Let me know if there is any interest in seeing a prototype of a news site powered by a graph database where news and profiles get equal weight. I would be an interesting hackaton project at Startup Weekend DC - Media Edition

---

Erza Klein’s provocative article “Is media becoming a wire service?” contains a hidden subheading asking “Is the golden age of media innovation over before it’s even begun?” The answer to both is yes in the right context, but the real answer to about news media innovation is no.

Klien laments that his “new media” is “like the old media.” Vox.com and other new news media startups like FiveThirtyEight.com are just spin offs of The Washington Post and The New York Times. These startups were found by some great journalists (disclosure: I was a Washington Post web developer and colleague of some) who were constrained by the confines of the technologies of these newspapers. When they started anew the print edition was dropped but they kept the underlying technology. All news organizations publish using a Content Management System (CMS).

Vox Media’s Chorus is maybe a better CMS than Methode that The Washington’s Post uses. Chorus and some of the CMS enhancements by Greg Franczyk at The Washington Post improved the delivery of news on the web and in the internet. But in the end Vox.com like The Washington Post and most others are still CMS driven news organizations. Klein acknowledge’s this when using the term “on-platform”. On-platform news is not disruptive or significantly new. It may be better, but not new.

RSS is given a casual mention in the article and Klein infers that it is “nothing new”. I would strongly disagree. The vast majority of news organizations did not embrace Dave Winer’s RSS technology. First, few news organizations used RSS to distribute content. Most just feed out summaries because they wanted readers to click back to the platform. It should be noted that Vox.com provides full articles. Second, time and again Dave Winer has discussed the River of News on his blog and in NiemanLab. It would have been interesting to see a new organization make RSS their core technology instead of CMS.

It is rather strange that Vox.com, which thinks of itself as innovative, is complaining that innovation is over. Innovation within the context of a CMS is not over. As Klein points out, though he does not use the term, Javascript Journalism allows stories to be told that were not possible before. He highlights Vox’s card stacks, Upshot’s Social Mobility article, The Post’s “The N-Word” or BusinessWeek’s “What is Code”. There are many others including a portfolio of work by Wilson Andrews. It must be pointed out that these stories have a shelf life much longer than your typical breaking news. Technology will continue to be used to tell these types stories so this is a golden age of long form, long shelf life stories. [Note: the most recent golden age of journalism, i.e. Woodward and Bernstein era, happened after afternoon newspapers died because of television news. New media can produce golden ages for old media.]

Marshall McLuhan said “the content of any medium is always another medium”. He shows many examples of the content of new media is old media. This is Klein’s lament. Vox.com is becoming content for the new journalism medium of social feeds. [McLuhan is famous for saying The Medium is The Message, but he did not mean medium.com.]

Vox.com has a choice: Accept that Vox.com is old media which can be very profitable. Or innovate by embracing a core technology beyond CMS.

Reimagining the way we explain the news means reinventing newsroom technology…..The engine of those sites is a world-class technology platform, Chorus, that blows apart many of the old limitations. — Ezra Klein on announcing Vox is our next in January 2014.

Beyond the CMS News Organization

The environment, the circumstances for creating a truly, powerful new medium for news are present. Contrary to Ben Thompson’s dire conclusion on “Facebook Reckoning”, this is the perfect time for innovation as Robert Johnson describes in his book “Where Do Good Ideas Come From”.

To create a new medium instead of just self-describing a news organization as “new media”, the CMS must not be the core technology. A CMS can produce a better web site, but that is old media. A new medium must fully embrace a new technology.

Which new technology? What comes after a CMS? Certainly there are many possibilities and different organization will try different things. A successful news organization must fully embrace the new technology beyond a CMS. It cannot be like those news organization that just tried RSS as an aside and then said it did not work. Or just use JavaScript for business purposes. Fully embrace the new technology.

Let’s discuss two givens. Melissa Bell at Vox.com was almost correct that “The home page is dead!”. She built one anyways. The home page really is obsolete, not dead. It should be an app which I called VoxDeck. Right now most home pages are very weak apps with the majority of code serving ads and business analytics. It should be an app for the reader, a personal dashboard for the news and personal information.

Second, the internet makes news sites into membership organizations. When Bezos bought The Washington Post the value was the audience or the members of the paywall (i.e., credit cards on file). Revenue from advertisers is in decline while member revenue is just starting. In the age of social media, members deserve and expect equal treatment.

This new medium will give personal profiles equal weight as news. In the organization the Membership Services Director will have equal resources as the Editor-In-Cheif. The app will be on many devices that sync and will use APIs into the profiles, ads, products, sources, stories and news. The backend is certainly a graph database like neo4j. Interestingly neo4j started as a CMS according to Emil Eifrem’s recent talk at Sweden House in Washington, DC. A graph database equalizes personal profiles and news data creating a relationship.

So Erza Klein can lament that Vox.com is old media and enjoy those profits. Or he can embrace that his readers’ profiles deserve equal company resources as the news. It will be interesting to see which path he and Vox Media take.

Lena Reinhard – “A Talk About Nothing” | .concat() 2015

Voodoo Chile

Best song ever. Yes that was a period.

You must listen in headphones.  My top players: Hendrix, Windwood and Casidy. A dream supergroup!

If you watch the DVDS you might yell at the screen "Call Steve Winwood! !!!"

Please listen in headphones. Anything else is mono. Or worse.

Trio of Startup Books: Hooked, Traction and Growth Hacker Marketing

Software is truly eating the world including marketing. A successful new company brings their product or service to market differently now. This is especially true because most products are software or require software infrastructure.

In this changed environment there are a few new terms to describe successful marketing methods. Reading these books about these methods will change your view of marketing. Note that the links are to my Amazon Associate account - that I rarely use - but I wanted a easy way to show the book covers. The books are:

• Hooked: How To Build Habit-Forming Products by Nir Eyal
• Traction: A Startup Guide to Getting Customers by Gabriel Weinberg and Justin Mares
• Growth Hacker Marketing by Ryan Holiday

Hooked
		Nir Eyal's book and workbook are guides to building habit forming products. He examined many different companies including Pinterest, Twitter, Instagram and others. This resulted in the Hook Model. The four components are: Trigger, Action, Investment and Variable Reward. The book is recommended because with this model, you can examine any technology and see how small changes can make it habit forming and thus more profitable. One of the great aspects of the book is that he examines the ethical aspects of using this model. It is great to go viral but the profit is in customer retention which requires making your product a habit. You can receive the workbook free by signing up for his newsletter. I bought the Kindle version.

Traction
		The Bullseye Framework will help you focus on the best method to get traction for your startup. The book has chapters on 19 channels (eg Viral Marketing, Pr, etc.). There are interviews with 40 founder about traction and case studies validate the work. Even if you've already decided on a channel, it is worth considering others. However, the book makes a convincing case to focus on one channel while the framework makes you consider all. It is a good exercise to really consider all as it helps define your product with some perspective. For my app viral marketing is my focus. The chapter on viral marketing helped with some specific suggestions on how to measure if the strategy is work. The book's website will give you the first three chapters free when you subscribe to their newsletter. Also links to other reviews. I own the hard cover.

Growth Hacker Marketing
		Ryan Holiday comes from a marketing background and convinces us that Growth Hacking is replacing traditional marketing. He ties it into "Product Market Fit" in such a way that Product Market Fit now makes more sense. And I must now emphasis AB testing in my plans. More than any other blog, article or book, Growth Hacker Marketing validate for me that I'm on the right path in creating my apps. It is not "build it and they will come" but build it and growth hack it without the traditional marketing and advertising. The book's website will give you a sample chapter and bonuses. There is also a course available. The author has also written an article on 99u called "A Creative Guide to Growth Hacking" which is a good synopsis of the book. I own the softcover Revised and Expanded version.

So which book do you buy or start with? While I recommend buying all three, I've read them in the order presented above. However, I'd recommend starting with Growth Hacker Marketing.

Obviously, as you can follow the links above, there is alot about these topics available for free on the web, so in some sense the books are optional. But I highly recommend the ideas and concepts that they discuss. Happy growth hacking, getting traction and hooking your users.

PS The app I' working on is http://reading.email - a better way to read newsletters. In alpha.

Hapijs for Proxy Routes and mapUri

One of the strengths of Hapijs is the proxy route. This involves making a request to your Hapijs server and having it make a request to another server. Actually a reverse proxy.

First will be a simple, hardcoded proxy. Next example uses the Url query string. Final example uses Url path.

Hello World Proxy

Sometimes a proxy to an absolute url is all that is needed. It is very simple:

var Hapi = require('hapi');
var server = new Hapi.Server();
server.connection({
    host: 'localhost',
    port: 8882
});
server.route({
  method: 'GET',
  path: '/',
  handler: {
    proxy: {
      uri: 'https://www.google.com/search?q=Hello+World'
    }
  }
});

In your browser go to: http://localhost:8882 to see the Google search for "Hello World".

Proxy Using Url Query for Input

But what if you want to search on a query besides "Hello World"? Or need the flexibility for something else. Hapijs provides a mapUri method for proxy to map the request uri to the proxied uri.

This means that your code can take the url, or parts of it, from a request and proxy to a modified uri. In our case the request will have a query ('q=hello+world') that we want to use in the proxy request. Add this route to the above code:

server.route({
  method: 'GET',
  path: '/search',
  handler: {
    proxy: { //https://www.google.com/?gws_rd=ssl#safe=active&q=hello+world
      mapUri: function(request, callback){
        var url='https://www.google.com/search?q='+request.url.query.q;
        callback(null, url);
      }
    }
  }
});

The browse to http://localhost:8882/search?q=hello+world to see the same Google page as above. Now browse to http://localhost:8882/search?q=hello+galaxy to see a search for "Hello Glaxay".

Proxy Using Url Path for Input

What if you wanted the proxy to change based on the path instead of using the query part of the url? For example, http://http://localhost:8882/hello+universe. Add this code to the above:

server.route({
  method: 'GET',
  path: '/{query}',
  handler: {
    proxy: { //https://www.google.com/?gws_rd=ssl#safe=active&q=hello+world
      mapUri: function(request, callback){
        var url="https://www.google.com/search?q="+request.params.query;
        callback(null, url);
      }
    }
  }
});

Now browse to http://http://localhost:8882/hello+universe to see a search for "Hello Universe". Or for something more down to earth: http://http://localhost:8882/earth.

Uses for Proxy

There are many ways to use the proxy. One example is to avoid Cross Site Scripting (CORS) issue. Or when replacing a legacy system a Hapijs server could be stood up with every route being a proxy to start. Then replace one route at a time with new Hapijs code. And of course, using an API where some manipulations is needed.

Conclusion

This tutorial shows how simple it is to do proxies with Hapijs with three short examples. There are several more options not covered above. See the Hapijs documentation for more details.

Note: Hapijs 8.4 was used for the above code.

Other Tutorial

Getting Started With Hapijs and Testing

VersionError with Pouchdb and status 500 error. SOLVED

Got this "VersionError" message using Pouchdb. The solution was in the versions of Pouchdb. This sequence is important.

1. Replicated into the browser with Pouchdb version 3.1.0. This went well.
2. Then with version 3.2.1 of Pouchdb. No problem.
3. Finally went back to Pouchdb version 3.1.0. Got error of "VersionError".

I resolved the error by going back to version 3.2.1. 

The hint came from https://github.com/pouchdb/pouchdb/issues/2603 which talked about "because indexedDB itself can only bump the version up but not down."

Hope this helps someone.