After a two-year hiatus marked by large projects and life in general, I finally (and quietly) re-launched the most challenging project any designer HAS EVER FACED.
One’s own portfolio site.
Many years ago, I was contracted to design and build such a site for an agency. It was a genius move in my opinion, as the internal politics are often set aside with such an approach.
My previous company site was completed in 2012, right around the time that responsive web design was becoming inescapable. It wasn’t long before my site was caught feeling stale, and I quickly moved to redo it.
Then, some large contract jobs pushed my portfolio to the backburner, and my new site went from being 95 percent complete to an afterthought. Nearly two years later, I sought to finish what I’d started, and I found it rather introspective to revisit my own development process.
This site relied exclusively on JQuery to make what was essentially a single-page app. Ultimately, it wasn’t tremendously SEO friendly, and there was no minification going on, so the download wasn’t necessarily heavy, but it was cumbersome.
Yes, I was using a reflection in the design, which only added more wrinkles to the elder face of my non-responsive site.
I truly believe the future of front-end development is one that uses object-oriented programming principles, so I decided to build my site foundation in Angular JS, which was gaining a lot of popularity at the time. My problem was, while Angular was evolving quickly, it was still pretty cutting edge, leading me to some unmarked roads. I started with a pre-1.0 version, and at the time, handling transition animations (now accomplished with ngAnimate) was still in a nightly build and making things search engine-friendly had me looking into headless browsers.
For layout, I was using Bootstrap. For icons, I was using Font Awesome for general icons and Foundation’s icon library for social icons. For animations, I was dabbling with the handly little Animate.css.
I returned to my working portfolio site which was 95 percent complete, yet settled in Angular 1.2. Thankfully, the time away allowed browsers to catch up, and I am confident that IE9 and below needn’t be supported any longer.
News had been revolving around Angular 2.0, and I think Google really blindsided their community when they announced Angular 2.0 as being a completely different animal than the current Angular 1.3, one with an entirely different architecture and syntax. Not wanting to be on a sinking ship, I chose Facebook’s React for a similar project and basked in the glow of its simplicity. I definitely wanted to rebuild my portfolio with React, but time won out and I needed something up.
I proceeded to update Angular in my project from 1.2 to 1.3. This Angular migration guide made a world of difference, as controller instantiations are completely different.
I chose the Gulp flavor over Grunt simply because I like the simplicity of the code. While there are several generators for creating projects in Angular, I tested them all out and settled on the vanilla generator-gulp-webapp.
I don’t necessarily like the “magic” that comes with Yeoman’s gulp-load-plugins, as having a ‘$’ in the code to represent all plugins loaded really dumbs down my understanding of which particular plugin is called. That said, I found that, unlike in 2013, the Angulartics module was waiting for me to solve my headless browser/SEO problem. I also discovered that ng-annotate was essential to wiring up with generator-gulp-webapp to get it to publish.
So, as I said, introspective. Is this all too technical for me to be called a designer? I hope not.
Following a brief conversation the other day a designer responded to me with “…so, you’re more a developer.”
While I know the industry pigeonholes folks these days, I think it’s the responsibility of a designer to know how things work and appreciate the design of process and code in the projects they are a part of. With posts like this, I’m just hoping to create more of a dialogue about it, too.