I <3 Polymer 1.0

One of my more recent pet projects has been to create a web-based application using Polymer 1.0, a web framework Google released at their I/O conference this past Spring.

In short, I don’t think I can ever go back to developing on the web without it. Not only do I strongly suggest everyone give Polymer 1.0 a try, but I implore new developers to learn web development by implementing it, and current dev teams to incorporate it into their product lifecycle – at the very least during their rapid prototyping stages.

Why is that? Good question!

For one, it is the first time I’ve ever used a web framework where the resulting code base feels legitimate, complete, and inherently organized; not a mesh of scripts and views that the original developer will need to walk other devs through to ramp them up.

For new devs, the clean, class based, object-oriented structure will help mature their web development habits. Even as an engineer with over 15+ years of development experience, I felt like using the framework improved my habits.

For product teams, the scoped modularity of the elements allow their group to quickly re-work layouts and functionality – on an element-by-element basis. You can inherit core elements and layouts, and test them individually as you assemble the project. Designers can perfect a single element’s look and feel even before the structure of the application is built. It makes for an excellent segway between mockup and final product.

What makes Polymer so Different?

1: It uses web components, shadow dom, and pure HTML/CSS to render templates.

2: Each element you create is packaged individually and contains: a tag based HTML layer, a scoped CSS layer, a JS layer and an import framework.

The web  world is made up of hacks

The truth is most (if not all) HTML/JS frameworks are made up of what could be described as a series of “hacks” that attempt to create a consistent end-product across all web browsers (and versions of browsers) out there.  These hacks are necessary due to the slow pace to which web standards evolve, and exacerbated by the fragmentation created by the popularity, and propriety, of those browsers.

A Polymer Breakdown

Shims and Polyfills

Shims and polyfills are hacks that transparently help protect a developer from the need to implement legacy or cross browser functionality. As the name describes, they fill in all the compatibility holes browsers leave behind.

Shadow DOM

You actually interact with the Shadow DOM all the time on the web without realizing it. When you use an HTML tag such as <video>  you are requesting an element to be rendered by the browser. That element is composed of many subelements you can’t see in the inspector, ergot “shadow dom”. These subelements, such as the ones composing the video tag for example, manipulate and manage each frame of your video content. By creating your own custom elements utilizing the shadow DOM you are able to encapsulate entire chunks of your application’s functionality into a single tag.

WebComponents.org

Webcomponents.org has created a Polyfill library that allows users to take advantage of custom elements like the ones descrived described above. For example, a profile card you create can be shared and implemented as a single tag: <profile-card></profile-card>, by simply importing the “/profile-card.html” component.

Unlike other frameworks or libraries (such as Angular, Handlebars or JQuery) which work to manipulate and manage separately constructed HTML tags and CSS code, Polymer combines web components, polyfills, shims, CSS, HTML tags, two-way binding and the shadow dom into into a single package.

Scoped CSS

The Polymer/WebComponents structure solves certain small annoyances of web development, like having to keep track of all your CSS styles and hierarchies across your app. Every Polymer element scopes its CSS selectors to the element itself, thus, these selectors will not affect other CSS selectors outside of the custom element you create. In other words, you can use “.my-box” over and over to style different boxes based on their element context without affecting one another.

Some other useful features:

  • Drop-in documentation rendering system
  • Drop in testing frameworks

I could really go on and on about how smooth and organized it feels to develop something using Polymer, but it’s best for you to give it a shot yourself. Let me know what you think or if you have any questions.

Getting Started

Here is a look at a basic custom element setup:

fake-element_html_—_bitlang

If you are unsure of where to begin, start by using Polymer’s sample project (aka Polymer Starter Kit). It is a fully functioning app with a folder structure and gulp file built in. I original strayed away from the starter kit structure, but found myself ending up the same place as they did eventually. They did a good job with it, and it looks like they keep iterating on it.

Note: I should mention that there has been one annoyance I’ve had to deal with while learning Polymer: the lack of documentation and relating forums. The things that ARE available refer to Google’s originally releases Polymer 0.5 from a few years ago.  These posts are often unhelpful since so many nuances are different in 1.0. The good news is my new questions posted on Stackoverflow had responses within a matter of hours.

 

Facebook JS login on Chrome iOS workaround

I was putting together a Facebook JS SDK based login on a site I’m working on – only to find that Chrome on iOS does not support the action.

JH8Un

 

What was even more surprising was the lack of documentation or support online (with Chrome or Facebook) to help work around the issue.

I saw a few suggestion that had solutions based on using Parse or where others suggested using a backend based login API. I didn’t want to install another framework just to solve this problem, and my objective for the interface was to offer a seamless login process that doesn’t interrupt the user’s current modal based workflow.

To make matters worst, and I am really disappointed in Google for this (which is rare,) popping out windows on Google Chrome iOS makes a null reference to the  “opener” in certain situations. This makes it hard to complete a seamless login between two windows once the FB auth page is verified.

Below is a solution that checks if FB is authed, if not, manually opens an FB auth window that forwards the user to an Opener Handler page. That page forces a refresh of the openers auth tokens and closes the window. Once completed the user is sent back to the original page (with no page refresh) and can now proceed with a validated FB auth.


var ABSOLUTE_URI = "http://yourpage.com/openerhandler.html&quot;;
var FB_ID = "123456778";
function openFBLoginDialogManually(){
// Open your auth window containing FB auth page
// with forward URL to your Opened Window handler page (below)
var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI + "fbjscomplete";
var scope = "&scope=public_profile,email,user_friends";
var url = "https://www.facebook.com/dialog/oauth?client_id=&quot; + FB_ID + redirect_uri + scope;
// notice the lack of other param in window.open
// for some reason the opener is set to null
// and the opened window can NOT reference it
// if params are passed. #Chrome iOS Bug
window.open(url);
}
function fbCompleteLogin(){
FB.getLoginStatus(function(response) {
// Calling this with the extra setting "true" forces
// a non-cached request and updates the FB cache.
// Since the auth login elsewhere validated the user
// this update will now asyncronously mark the user as authed
}, true);
}
function requireLogin(callback){
FB.getLoginStatus(function(response) {
if (response.status != "connected"){
showLogin();
}else{
checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){
// Check FB tokens against your API to make sure user is valid
});
}
});
}

view raw

FB JS Auth

hosted with ❤ by GitHub


<html>
<head>
<script type="text/javascript">
function handleAuth(){
// once the window is open
window.opener.fbCompleteLogin();
window.close();
}
</script>
<body onload="handleAuth();">
<p>. . . </p>
</body>
</head>
</html>

view raw

Opened Window

hosted with ❤ by GitHub

Google testing out preview pages in search

I stumbled onto the google test list tonight and noticed a new preview feature in search. It works really well and takes good advantage of the excess white space on their search page. A nice bonus is the non forced nature of it. If you mouse over any of the results nothing happens unless you click on one of the magnifying glasses. The full length preview of the page immediately comes up (way quicker than I have ever seen on other search engines) and since its the full page scrolled you can read and browse it quite thoroughly. After the first magnifying glass is selected, subsequent search results show the preview by simply putting the mouse over it. Also if you scroll the preview does not flicker through mouse over events so you can browse the full preview. When you stop scrolling and mouse over a new result it then switches. Overall feel was great and I hope they roll this out.

Google preview
Google preview

Quantify my language

oDesk Search Results
oDesk Search Results

The cost to scale a web application has changed considerably and therefor the way most people decide to plan out thier development strategies has changed as well. Not every web site is an enterprise solution and getting many sites or versions of sites out to the public quickly has become the greatest focus on a fledging comapanys mind.  Because scaling is so cheap and servers are so easy to set up with clouds I often hear, ‘lets deploy first and see what people think and if it gets big we will just through some servers at the problem, and improve the code as we grow.’  For the most part I agree, in the case that a complex problem arises an RPC call to some seperate more efficient code base, server or algorithm can be used.

Dividing up a site into 3 parts is key, re-inventing the wheel tasks, already built better then we can build it widget/api tasks, lets solve a new problem tasks. For example: login, and register has been developed 100 times over as well as setting up projects and DB connection settings. Getting a users feedback or publishing your content to all the social networks has been done beautifully by many companies that now give it away for almost nothing and are great to use, unless your new great idea has a core innocation in such technolgies. Then there are the problems out there that may be partially solved, but there is still quite a bit of technique and brain power needed to tackle your unique version of the problem to complete your companies mission, like improved search of billions of peices of data or 3 degree+ of sepration colculations. The mission is use what you can that already exists if its not your CORE business to own such IP (often times people think they have 5 core’s….they don’t) and use what you can to get that core going as quickly as possible. This isnt true for all web startup’s — but it is for most.

oDesk Feedbacks
oDesk Feedbacks

I will save more on that topic for a later post. Today I simply wanted to take the problem of getting started up a level or two and look at the first part of development for non developers.  I mean I personally know what I like to develop in, and it’s always good to ask someone with more experience then you what he/she thinks, but I all to often I find people that have inadvertenntly chosen the more expensive, more timley path and in the end they have a mess, a bill, and an almost incomplete site. They are then left with finding a batch of new developers who can jump right in and take over. I see this ALLOT and it breaks my heart. Is it jus a product of bad consulting? Is there a way to help get non developers a leg up and allow them to make good desicions quinatitatilbyl without a consultant telling them biasedly which way they can go to suit there own needs.

I know that oDesk, and other internet based freelance servcie is where allot of folks turn to so I went out and got some basic datapoint to start this conversation. Below are some charts I put togther using search scripts to get results sets from oDesk (whom I think should put out more repots on this matter to help out the public).  I simply tried to query things people may be wondering and get results sets for each lanuage respectivley. I was suprised to see how flat the results were.

oDesk Search Results:

# high rated   feedback (2+ FB & 4+ stars) total   feedbacks (4+ star) most hours (2+ FB & 4+ stars) $/hr of most hours (2+ FB & 4+ stars) avg top 10 hours avg $/hr of avg top 10 most hours avg cheapst top 5 avg most exensive top 5 highest reqested rate
Python

3

6

606

$33.00

146

$25.34

$24.67

$28.10

$83.00

Ruby

12

9

2300

$16.00

663.5

$27.50

$14.93

$95.51

$230.00

PHP

64

37

4045

$30.00

1923.7

$26.44

$9.33

$75.62

$166.00

Java

12

15

712

$27.78

530.3

$26.13

$8.45

$54.09

$166.00

.net

10

14

2490

$19.44

641.6

$26.85

$11.55

$40.80

$111.00

Below is a list of some languages and how many hits came up when the languages marked with an X where combined in the search. I guess what I was going for here is how many people know what combinations of languages. For example people who posted a knowlagdge of all languages was 7, and those that claim to provide services to both python and ruby were 35.

Java

Python

Ruby

.net

PHP

Search       Hits

x

1427

x

246

x

300

x

1757

x

2397

Expand to show all results +

oDesk Results
oDesk Results

I will admit I dont like .net and I am not a fan of PHP as much as I used to be and although I enjoyed building FamilyOven.com in Java iterating over quick changes on the fly got really annoying having to compile and recompile my code. The pside of course is its great stability and easy to debug format. It’s just that scripted code suits my needs more these days. I put things together to push out new sites and stabiiy in the first year isnt that hard to do with server costs the way they are these days.  Python and ruby have allot of abstraction but for the first year I probably wont care, second year I will just pull hard tasks out like I explained in the first part of this email.

The data I gathered made me seriously wonder for a moment, am I just falling into the hype or is python and ruby as smooth, efficient and easy to develop sites quickly as great as it seems? I didnt jump on the ruby, python band wagon quickly. I created a few sites on it before I formed an opnion for sure.  I guess whats more important to notice here is how the hell is a non-technology/development person able is to decide on a languge to go with after talking to vendors and seeing results like these. I mean these data points love .net and php as giving off the impression that they are affordable, and popular.  I feel however that those that I know that use Ruby and Python are more innovative, fast, and love what they do more so then the others, not to mention cheaper in that they get more done more quickly. (or so it seems that way as of late) I would love to get some advice on ways to mine for data that respond with data that can statistically prove my sentiment isn’t just an opinion, a sort of freakenomics style of analysis if possible. I dont want to try to manipulate data to prove my point I just want to see if there are any true data points out there that confirm what my gut tells me.

Of course being that ruby and python are new compared to the other languages one could expect such unimpresive numbers and stats, I also think that being that they are so new to the common developer tool set it is impresive just how many people code on it already and how many plugins are available. One metric that could be usefull is expense to get started materials wise, free easy to use documentation, number of plugins, and time to start a basic project/site.

Python for instance is part of the Google standard languages, that speaks highly to me. It is supported by the Google App Engine and it has jython a frameowkr taht allows python to run in java runtime. That is mportant as well as java run time is more efficient then most things out there so you have flexability. Ruby has tons of plugins as well as python. and all scripting languages take almost no time to set up.  Also it is important to pointout that other then biz spark from MS getting a project developed is MS systems are not free to get started on from servers, to dev environments to documentation and support many MS product cost quite a bit which can get in the way of trial and error, innovation, speed to market, and keeping initial expenses down.

Please comment if you think I should account for a factor I missed or if youhave some data on your own.  If you have some crutial data points please list them and the source you were able to get it from. THe more straight data we get the more we can help people make better descisions rather then just using he told me so approach.

Here is some data about the job market in 2008. More data on jobs and how they relate to development would be helpful as well. i.e.  http://dotnetslackers.com/Community/blogs/xun/archive/2008/08/18/who-has-respect-in-web-development.aspx

Google Data API's

Data APIs
Data API's

Get google search results for all data streems

Here is an example of getting their images:

http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=Paris%20Hilton&callback=foo&context=bar

These API’s can be called through JavaScript scripts and class definitions Google provides (see below) or trough URL API  calls.

These API’s are great for mashup sites or to help you increase the on page data you display to your users to show relevant topics and increase engagement or decrease clicks for data as the browse your site. I used a couple of them, for example, on http://www.appmakr.com/try_demo to pull relevant RSS feeds and Images based on a companies domain name.

You can read more about this service and browse through googles documentation below:

Documentation home:

http://code.google.com/apis/ajaxsearch/documentation/

AJAX:

http://code.google.com/apis/ajaxsearch/documentation/reference.html

URL Based:

http://code.google.com/apis/ajaxsearch/documentation/reference.html#_restUrlBase

Data API List:

http://code.google.com/apis/gdata/

Google Data API’s

Data APIs
Data API's

Get google search results for all data streems

Here is an example of getting their images:

http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=Paris%20Hilton&callback=foo&context=bar

These API’s can be called through JavaScript scripts and class definitions Google provides (see below) or trough URL API  calls.

These API’s are great for mashup sites or to help you increase the on page data you display to your users to show relevant topics and increase engagement or decrease clicks for data as the browse your site. I used a couple of them, for example, on http://www.appmakr.com/try_demo to pull relevant RSS feeds and Images based on a companies domain name.

You can read more about this service and browse through googles documentation below:

Documentation home:

http://code.google.com/apis/ajaxsearch/documentation/

AJAX:

http://code.google.com/apis/ajaxsearch/documentation/reference.html

URL Based:

http://code.google.com/apis/ajaxsearch/documentation/reference.html#_restUrlBase

Data API List:

http://code.google.com/apis/gdata/