Portfolio site, Part 1: Learn by building

My blog (this blog) provides a decent digest of what I’m up to. GitHub has a pretty complete collection of my work, too. But last weekend, I thought it might be time to have a portfolio site and that building one might be a good opportunity to dig deeper into Polymer, a new “web components” framework from Google.

The Teamtreehouse way

This section is an aside.

We recently made our 5th hire at Upswing. Michael Plunkett joins us to help build a better experience for our customers. He’s going to start with front end projects, adding to the admin portal – the part of our application that school administrators use to monitor Upswing usage, see which students are in need of support, and so on. He’s going to be learning Angular, our front end framework. Now, Michael might learn in ways I know nothing about. But, I suggested he try building something basic with Angular to get the feel of things.

After all, Angular seems to have become the best practice for quickly hacking together a proof of concept or MVP. Here is an example. In January, I went to the last AngularJS meetup that I did not help organize (I’m now a co-organizer) at IBM’s new Design Studio. They are hard at work redesigning IBM’s hundreds, maybe thousands, of stale software products. It’s a new division of IBM, part of a deliberate effort by new CEO Ginnie Rometty to revitalize the business (read more on that here). There areabout 100 employees in the newly opened Austin office of the Design Studio, and most of them started at the company through IBM’s DesignCamp, as recruits in one of four different fields: user research, visual design, ux design, and front end development. From the Design Studio careers page:

Screen Shot 2015-02-24 at 3.12.05 PM

And the front end developers use Angular, to hack together the products they work on, in teams of 4-16, over 2-4 week sprints. Here is an insider’s perspective on the experience.

I would wager that the MEAN stack is probably the people’s choice for rapid prototyping. Now, I happen to believe that practice is better than study when it comes to learning the concepts of programming and different programming frameworks. Therefore, I suggested to Michael Plunkett that to get familiar with the Angular paradigm he should think of a relatively simple project he could hack together for practice. At the time, I alreadycould tell he’d be capable of picking it up quickly. But, this sort of challenge would also be an indicator of his willingness to tackle other parts of the development process – designing theUI/UX, creating your own technicalspecifications, and building for an MVP and not perfection, to name a few.

This, to me is the Teamtreehouse way. If you know me, and have every expressed even a mote of curiosity about how to start learning anything about web design or development, then you would have heard me sing the praises of Teamtreehouse. I am practically a spokesperson. I think they have set the standard for manageable, bite-size videos that teach concepts through projects. Such as, when I was an Angular newb, it took but an hour of instruction to create a clone of Dribbble.

Polymer and me

That is Angular. Mineis going to be a Polymer project. I’ve been toying with Polymer on a couple projects (College Cipher, Upswing Chat) and think it outperforms Bootstrap at building quick Minimum Viable Products (MVPs) and new products. However, for the most part I have only taken advantage of the predefined elements put out by the Polymer team, namely the Core and Paper elements.

For the portfolio site, I’m going to use only Polymer. That will require building my own elements.Of course I’m going to cheat though – I willstart with the Topeka Quiz app, sparing myself the grunt work of “scaffolding” a website, whilegetting a strong enough grip of Polymer that I can tailor it for my own purposes.

Here’s what stands out:

All the data used in the rest of the app is fetched through topeka-datasource and published.

From topeka-datasource.html:

My understanding is that firebase-login gets the user id. Then, firebase-element gets the actual user object.

Here are published properties:

publish: { user: null, categories: null, url: '' },

I’m wondering why the url is getting published.

It’s also cool (is that the word?) to see how Google (the team behind Polymer and the team that built this demo app) builds front end web applications. Such as, there is all this in the Polymer script:

ready: function() { this.test = window.location.search.indexOf('test') >= 0; this.offline = this.test || window.location.search.indexOf('offline') >= 0; if (this.test) { this.user = { name: "Test U", avatar: 1, score: 0 }; } else { try { this.user = JSON.parse(localStorage.getItem('topeka-user')) } catch (e) { this.user = null; } } window.addEventListener('offline', function() { Firebase.goOffline(); }); window.addEventListener('online', function() { Firebase.goOnline(); }); },

So, this is how google tested their app? This is how they handle a lost internet connection? Actually, it’s just the tip of the iceberg, their code is riddled with handlers for these and other scenarios that I would hardly even consider, on my own.

That’s it for now. Over the next couple weeks, I’m going to have to want to add a router to this app, so I can share links to specific projects of mine. Then, I’ll have to figure out how much data can go into Firebase or should be written into the html.

Stay tuned.