You might be wondering why we even have this type of article in UX Do-Re-Mi. Well, I believe UX / Web professionals should not only focus on product- and service improvements, but also their very own portfolios and the manner by which they demonstrate their expertise and mastery of their respective fields.
Nowadays having an online resume and submitting hard copies of your transcript and qualifications to prospective employers bears little weight without the testimonies of other professionals who have worked with you (–LinkedIn provides very good service for professionals in this area), as well as viewable samples and demonstrations of your works. Likewise, for a team of professionals who want to win a prospective client’s trust and confidence in their ability to actually deliver, it helps to show not just the deployed projects and collective efforts of the group, but also the individual contributions and skill set of each member of the team.
If you’ve been developing or designing websites for a long time, you may have already used git or github for some of the projects you’ve worked with. Today, you’ll find that having your own github account is particularly useful in building your portfolio whether you are a developer or a designer (for as long as you deal with coding and not just visual design), and how you can partner that with codepen to demonstrate your codes.
Most of developers use git/github as a sandbox for web applications and sharing open-source codes. But you can also use it for sharing even bite-size codes or snippets to demonstrate correct usage of techniques or simply serve as a template for other coders. You do this by creating gists.
A gist is a a snippet you can share and paste with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository. But the best part about it is that you can use your github profile to bring together all the gists you’ve ever written and showcase actual codes of your work. Visit my sample profile showcasing my gists:
You can also embed your gist codes in any page or blog that explains how they should be used, and if you need to update the codes or make corrections, the codes are updated throughout the pages where they were inserted. This is good for wikis or code documentations to accompany your repositories. For example, I can add this script within the body of a web page or blog content of my liking:
My code might look like this…
Run it yourself and see what it does. You’ll see all my codes embedded on the page.
It’s all good for a designer or developer to place shareable codes in a repository, especially when working with a team. For one thing you get to document all your coding contributions, and your team can even help you improve your codes as they fork it and apply updates of their own. You should also label your codes properly so your team will know what they are for.
NOTE: Sometimes you want your codes to be private or share them with just a few of your trusted colleagues and friends. You can only make a repository private if you upgrade to a premium github account. But if you want something to be really private, then hold off posting them on any website at all.
Now that you have your gists in one place, demonstrate their use in CodePen
Creating your own demos can set you apart from other web professionals who just talk about what they can do. It gets even better when other designers/developers “heart” your work, apply it in their own projects, and share your awesome work with others! This kind of acknowledgement will show your clients that you are a leader and innovator in your field when other people follow you. So don’t keep your techniques or knowledge to yourself, show them off and gain credits from the rest of the community!
This is why CodePen is such a great tool, especially for designers who want to demonstrate their interfaces. It’s like a sandbox where other designers can tweak your codes and see the effect of their changes instantly. Your collection of “pens” are just like gists, other members can fork them and apply updates of their own. Best to use your github access to log in to codepen and get started on your demos now.
Checkout my sample codepen profile looks like: http://codepen.io/talknowmonica
Viewing a pen will bring out a basic 3-column board for your HTML codes, your CSS, and your scripts, plus a preview pane for your sandbox.
Putting up demos rather than just sharing the codes will help others experience immediately the power of your codes (—or not, so be careful of what you put there)! As CodePen puts it, “Demo or it didn’t happen.” But the greater benefit is that you can slowly build a library of demos that can be used as a reference by your team or others in the industry. You can leave your mark and a spankin’ portfolio, free!
You also have the option to go premium and evangelize others of your awesomeness as you establish yourself as a teacher or a pro. Besides that you get other collaborative features and the ability to set some pens as private. But if your folio is just about consolidating your work and showcasing your styles and techniques, the best option for you is still a free account.
A word on collaborating with a team…
Actually, a statement. Using tools like GitHub and CodePen is not just good for showcasing your own works, it’s also used for setting up a shared repository with your team. GitHub lets you create an organization for this, or you can join existing organizations of your team or company. This sharing of knowledge within a team helps develop everyone’s skills, getting them up to speed with techniques and coding practices so that no one in the team is groping or starting from scratch over technologies or best practices that are already being applied by the other members. The team can focus on getting the work done or improving existing techniques rather than grope and experiment on something that has already been used or perfected before. There is also something beautiful about a team that builds each other up. It speaks well of both the team and the individual who contributes in that team. What more if you are an individual who helps grow an entire community!
Finally, it also matters that the repository is composed of codes and demos that are sound, well tested, well documented and are usable.
For group repositories, they must be well maintained, a moderator should be knowledgeable in segmenting or categorizing codes using directories, and identify or deprecate any obsolete and duplicate codes. He also sees to it that codes in the alpha stage are segregated from the working ones, and that someone is assigned to make sure that work on the alpha builds are continuous and their progress is consistent.
For individual repositories this means that gists and pens are properly labelled and tagged. Make it easy for your audience (whether they are prospective employers, clients, or the web community in general) to find your codes/demos and make sense of their purpose.
In short, the quality of the repository is more important than merely having one. In the end, the quality of our work still determines the level of our skills and expertise, but we take advantage of tools like GitHub and CodePen to showcase them better for our audience.
The bottom line for anything that we do, even as we maintain and grow our own repositories, is to give our audience, whoever they may be, a better experience in getting to know who we really are as professionals; how we work, the quality of our work, and how well we collaborate with others. After all, “True user experience goes far beyond giving customers what they say they want, or providing checklist features…”, customers also need to see (and feel) they can trust you and count on you for their project.
Don’t you agree?
If you have any thoughts you’d like to share about this topic, or recommend more tools for setting up coding/demo portfolios for web professionals, feel free to post a comment for me and the rest of our readers. =)