It is nearing the end of my graduate program, which means my classmates and I are working towards completing our online portfolios.  I thought I would address this topic from a web design point of view.  I haven’t made a web design post yet, but I feel like I should since front-end development and web design are so closely linked.  In fact, I have decided to change the title of my blog to: Desk Talk – Front-end Development + Web Design.  One of my passions is graphic design, so I really feel like I should be exploring both topics since this blog is meant to be a learning tool for me.  The more topics I write on both topics, the more I will learn in general about the web.  Plus, I believe most web design careers involve a little bit of coding.

Anyway, let’s get back to today’s topic: portfolios.

Portfolio sites are supposed to be platforms to show off your work.  It is recommended that you show 10 or 15 pieces.  The layout of the site is up to the creator, but generally you want to have it pretty simple.  Basically, you don’t want your really awesome interactive features taking away from the meat of the page, which is your portfolio work.

I am in the process of making my own portfolio site.  I thought I’d create a list of things to both do and don’t do when making your online portfolio.

Contact Details - Do
There is no point in making a portfolio if people can't contact you about your work.  Create a way for other people to contact you.  Make a contact form, create some social media buttons, and include a resume.  While this may seem trendy, it is really a necessity.  However, you could argue that the social media icons aren't needed.  It really depends on the career you are striving for.

Code Your Own - Do
This might not apply to all portfolio work, but if you have the necessary skills to code your own portfolio, do so.  You’ll have a more accurate representation of your skills and it will be more personalized.  Plus, you’ll save money; themes can host anywhere from $10-100.  You will also save some interview embarrassment when they ask if you have the skills to make what your portfolio portrays.

Skill Bars – Don’t

Those skill bars might look cool, but they are not that useful.  I mean, they might give a general idea of what you are better at, but they are not measurable data.  If you’re 90% in Illustrator, you might be at a 30% skill level compared to another graphic designer.  Furthermore, you're making yourself look bad by stating you are a less-skilled in some areas.  Don't speak of your weaknesses.  Plus, everybody is using them.  The number one rule in portfolios is to stick out. This rule will creep up again in more of these tips.

Be Generic - Don't

The generic portfolio that is taking over the web

Don't follow trends when designing your portfolio website.  Just because everybody else is doing, doesn't mean you should be doing it.  And sometimes, the trend isn't exactly a good thing (looking back at skill bars).  Design your own logo, layout, and color palette.  Reach for the stars.  Inspire others.

Write About Yourself Using Way Too Many Adjectives - Don't
You say you're a 23 year old web designer who likes taking long walks on the beach, taking national geographic quality images of the birds at the park, drinking awesome beer, and making it known that you're a creative individual. Great! But who cares? Nobody.  You come off somebody that is really into themselves.  Let your portfolio and resume do the talking.  You'll have plenty of time to talk about yourself in an interview.

Blog - Do/Don't
If you are going to keep up with your blog and post at least once a week, then definitely keep the blog.  It will be a great addition to your resume and it will show that you are knowledgable about certain subjects. It will also give your portfolio a personal voice.

Don't display a blog if it is something you haven't updated in weeks.  It makes your site look like it has cobwebs on it and that you are inactive in your field.

And finally, a humorous example of what not to do:

The Worst Portfolio Ever

Project Planning: Task Lists, Deliverables, Etc.

My graduate school program recently interviewed Kyle Schultz, the Creative Director at Dedo Inc. Dedo is a creative technology company that specializes in creating interactive installations to heighten the experience of a place or product.  Dedo is a small team, but they work with some pretty large companies.  Their deadlines can be very strict at times, but they produce these great projects time and time again.  

How do they do it? The answer is that they plan well.

Create Team Members

Like with any team, players are assigned certain roles.  For Dedo, a team may include graphic designers, developers, strategists, analyzers, and directors.  While the team is working on different parts of the project in their own specialties, the team is constantly in communication with each other.  Constant communication is key in producing a cohesive and realistic idea.

Task Lists

During the interview, I was pleasantly surprised to hear that Dedo uses tasks lists for their projects.  I’ve been doing the same thing for a project I’ve been working on!  In my Interactive Media program at Elon University, students are required to produce a capstone project in order to graduate.  This project is supposed to be a representation of everything we have learned through Interactive Media.  My advisor  recommended that we use task lists in order to get ourselves on track.  These task lists can be created however you want, but each task is usually assigned a deadline. You can divide your work into stages or by category, but the main idea with task lists is that you do not want to be working on every aspect of the project at once - such as working on the design, development, and content all at once. 

Example Task List

Deliverables 

Another important aspect of task lists is the constant creation of deliverables.  Kyle explained how his team completes a lot of paper prototypes, wireframes, and eventually some high fidelity mockups through InvisionApp.  I was really stoked because my capstone advisor has encouraged us to do the same. I just recently completed all of the above for my capstone.

Creating deliverables is a great way to stay on track, but it also produces something that you can hand over to your client.  It is better to have feedback earlier than later in case you need to change something. Producing deliverables is just a great practice to pick up.

Paper Prototype

Write

Kyle also encouraged us to provide some written feedback after each task is completed.  For example, if a graphic designer just completed a logo mockup, he or she will complete a write up explaining if the logo worked and how they might improve it.  Kyle stressed the ability to talk about your own work.

Free Task List Template

If you want a nice task list template, here is the one I am using: Task List Template - Created by David Holland.  Custom it to your project.

Front End Development

Encourage your team to use task lists if they don't use them.  You can also use them if you are working solo.  As a front end developer, a majority of your work comes near the end of the project because people hand you content, but make sure to keep in touch with your team members; tell them if something isn't possible to make.  Make yourself produce deliverables, even if it is just for you. Make your own paper prototypes and wireframes.  Get your hands on as much of the project as possible.  Create deadlines and don’t let yourself get too behind.  I guarantee you will produce a better project in the end.

Twitter: Who to Follow?

Twitter is inescapable.  With 200 million active users, Twitter is one of the most successful start-up companies of all time.  Twitter also just recently joined the NY Stock Exchange.  With that many heads talking, Twitter can provide a great wealth of knowledge and resources for any subject. With that said, Twitter should be a part of every web developers toolkit and should be treated as a resource.

Informative websites and founding developers can both be found on Twitter, but for this week, we will target some important people to follow so that you can get up to date information straight from the people developing the future.  In a sense, you’ll get to see history be written in the development community.  Ok, let’s not get too geeky here.

Developer Twitter Accounts:

John Resig - @jeresig

John is the founder of jQuery, which is by far the most popular Javascript library.  John currently lives in Brooklyn, NY and is working at the Khan Academy.  Previously, he worked for Mozilla.

Eric A. Meyer - @meyerweb

Eric Meyer is best known for his writings on web standards and cascading style sheets (CSS).  He is an active writer and has published several books.  He is also extremely active on Twitter with over 23,000 tweets.

Jeffrey Way - @jeffrey_way

Jeffrey Way is an extremely active voice within the developing community.  He frequently writes at Nettuts+, where he breaks down concepts into easy to digest tutorials. He is the founder of Laracasts.

Paul Irish - @paul_irish

Paul was previously on the jQuery team for a few years, but has switched to the Google Chrome Developer relations team.  He created the HTML5 boilerplate and also created the familiar Modernizr tool.

That’s it for now, but keep it mind there are hundreds of developers actively tweeting!  On top of developers, there are also website gathering resources on Twitter such as Nettuts+. 

What is an API? A Brief Overview

If you’re new to the world of front end development, you might have heard the term “API”. API stands for “Application Programming Interface” and is something that we use all the time without knowing about it.  APIs allow for the communication between two different applications.  For example, a project can author an API that allows for other projects to pull features or data from their interface.  The original project doesn’t have to share any of their code for the features or data.

Here’s a definition from Wikipedia:

“An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers.”

Mentioned previously, APIs are everywhere.  Let’s take a news article for example.  At the bottom of the page, articles usually have a social media bar that has links to facebook, twitter, reddit, etc. so that you can share the article on your own social media page.  All of these features are powered by APIs.  Even the comment system, which is sometimes powered by facebook comments, uses the facebook API to pull your profile name, picture, location, etc.

The LATimes uses the facebook commenting system for their news articles

What can you do with them?

If you’re a blogger or journalist, having those sharable social media buttons would be a nice touch for your content.  However, we’re not all journalists.

I think most people have a Twitter account nowadays.  Twitter has built a widget that uses their API to create a timeline for one individual.  You can then link this timeline on your webpages.  I’ve used this for several projects and it is a great way to show off tweets without having to actually go to Twitter.  Again, Twitter is using an API to share their features with another application without having to share their code for Twitter.

To access this widget, just go to your settings menu, then go to Widgets, and Create A New Widget.  

I decided to create a timeline for my master’s program:

Tweets by @EloniMedia

This is just one example of what can API can do.  I’ve also recently worked with Vimeo’s Player Embedding API to show all of my account’s videos on a web page without having to go to the actual Vimeo website.

For your next project, explore how you might possibly display something with an API rather than the normal way.

Developer Toolkit: Web-safe Font Generator

Fonts are incredible tools for designers.  A font is just like every other visual tool out there in that it has the capacity to: spark an emotion, carry a message, or be so well emerged with its surroundings that its aesthetics are easily overlooked.  There are literally thousands of fonts for a designer to choose from, but it is believed there is only one true font to fit a specific need within a project.  Picking that font can be a huge task, especially if you’re lost in the sea of downloaded fonts, but implementing that font on the web should be hassle free.

If you’re a developer, I’m sure you have already discovered that a custom font coded via the @font-face tag doesn’t always work across every browser.  The problem is that each browser supports different fonts.  For example, Internet Explorer and Mozilla Firefox do not support SVG fonts.  And mobile support is a different story.

To combat this problem, it is as simple as referencing every font file type for the font you want to use.  However, getting every file type is not so easy.

Have no fear; Font Squirrel’s Webfont Generator is here!

Font Squirrel’s tool takes away the painful task of finding every file type for a font by converting one file type into four.  To use the tool, the user must own the font they want to use and make sure that it is legal for the font to be used on a personal level.  Sites like Font Squirrel or dafont provide fonts to download and they usually provide the license and rights information.  Once you have cleared your font for use, you may upload the font and Font Squirrel will convert the font to four formats: .eot (Embedded OpenType), .svg (Scalable Vector Graphic), .ttf (TrueType), and .woff (Web Open Font Format).

The process is very nifty, but don’t go writing code just yet.  Font Squirrel also provides the lengthy bit of code to use in order to get the fonts to show up on the web.

Font Squirrel’s Webfont Generator provides an incredible service at no cost.  That’s right: it’s free. So go ahead and give it a try. This tool really excels when you have several fonts that you want to use across your project; it saves a lot of time.  I recently used the tool for one of my projects and it couldn't have been easier.

Resource Roundup - Keep Your Skills Up To Date With These Five Resources

Coding is similar to every other profession in that one needs to keep up to date with their knowledge and skill sets so that they don't fall behind.  This is possibly true for coding more so than any other profession because the technology changes so rapidly.  If you fall behind, you might fall out of your job.

Luckily, the coding community is an active bunch of bloggers, writers, and networkers.

In this week’s blog post, I’ll share some of my favorite resources that I have been following since my venture into front end development.

For Beginners:

CodeCademy

If you have never coded a single line of text in your life, then CodeCademy is a great stepping-stone towards front end development.  It has detailed, interactive tutorials on multiple languages including HTML, CSS, PHP, JavaScript, jQuery, Python, and Ruby.

For Everybody:

Hey, designer!

Hey, designer! is a great resource for both developers and designers.  A small portion of my blog is dedicated to web design, so why not share a resource that has both subjects underneath one website?  Hey, designer! is basically a resource gathering board; all of the links lead to external sites.  Posts range from educational blurbs about design to in depth JavaScript library tutorials. The best part of the site is the trending section, which shows which articles have been clicked on the most for the day, week, or month.

HTML5 / Javascript Weekly

If you’re looking for a once a week update that comes as one newsletter, these resources are great.  Once a week, an email will be sent in a newsletter format with the latest news surrounding each subject.  Each newsletter features a featured section, code and tools, watch, read, and a job openings section (ding ding!).  I recommend signing up for both.

Here’s an example issue for HTML5:

http://html5weekly.com/issues/125

Codepen.io

Like art, checking out other people’s work is a part of being an artist.  It keeps you on your toes, culturally up to date, and it might spark some inspiration.  Codepen.io is a great resource if you want to see what other people are doing.  Projects are hosted on Codepen with all of their code available for the world to see.  Most creations are on the brink of falling apart, but these people are trying to push the boundaries of coding.  However, when something works well and you want to use it on your site, you are able to by just copying and pasting the code.  Everything is shared.  After all, everything is stolen from somewhere nowadays.  You just have to steal correctly.

THE Front End Development Resource

I saved the best for last.  Yes, I meant to capitalize the; this resource is the resource to end all resources. I’m not sure who this person is, but they have combined every front end development resource out there into one, easy to navigate document.  Everything is split up into categories, so it’s easy to digest.  It might take you a year to go through it all, but it is definitely worth playing with.  And look, it’s hosted on GitHub.  This could be a project that a lot people have worked on.

Tool Review: Sublime Text 2- make the switch to a better text editor

For developers, the debate over which text editor to use is along the lines of every other product comparison feud; each product has its positives and negatives for people.  However, there seems to be a text editor that is standing out more than others: Sublime Text 2.  Sublime Text is marketed as a code, markup, and prose editor.  It’s fast, available on all platforms, and has a few tricks up its sleeves.

One of the first things that sticks out about Sublime Text is the overall look.  The colorful text really contrasts the black background.  You really feel like you’re in one of those movies that has some guy coding on a black screen with green text all night.

On the right, another scrollable frame exists that shows your entire project zoomed out.  Sublime Text calls this the Minimap.  This is really useful for when you are working in a large project and need to quickly scroll through the text.

Most code editors can be visually altered, so looks aren’t everything.  So what else makes Sublime Text special?

Navigating documents and Sublime Text is very fast.  One of their features, Goto Anything, allows users to open a document with ⌘P and then they can begin typing the name of the document. Once the document is open, they can type @ to quickly jump to symbols, lines, or words.

Sublime Text 2 in action

You can also be at several places in the document at once. Multiple Selections allows users to type on multiple lines at once.  Instead of making ten changes across the document, you can change all of those lines at once.  This is especially useful for when you need to rename variables or make batch edits.

You can also quickly change the syntax of documents.  If you're working in a CSS documents and it hasn't automatically changed the syntax to CSS, you can do so.  This syntax has special color coded tags that allows for easier editing and navigation within documents.

Another appeal is that it is the same across all platforms.  Currently, Sublime Text 2 is $70, but your purchase extends your license across all platforms.

With that said, Sublime Text 2 is highly customizable.  This is probably the most important feature and why Sublime Text is so popular.  There is a huge library of plugins, which allow for further customization.  In a future blog post, I will discuss some further enhancements you can make to get the most out of this text editor.

GitHub: the open source backbone for your projects

If you are unfamiliar with GitHub, it is a code sharing community where programmers can network to tackle projects together.  In the beginning, it was mostly intended for code use, but now people are going beyond that and hosting non-code documents and files so that multiple people can work on one project. 

Users can host their projects on the site by “pushing” their content through Git, which is the source code management (CSM) software behind GitHub.  Linus Torvalds, who was the lead developer behind the Linux operating system, created Git in 2005.

Git operates by hosting projects in directories, or in GitHub’s case, repositories.  These repositories are then hosted on GitHub where anybody with an account can “fork” the project.  Forking a project creates a copy of the existing project and places it underneath your profile.  From here, you can continue to view the project, but the most important feature is the ability to edit the code.

My GitHub profile.

For developers, this is big.  GitHub is excellent for new open source projects.  With several developers forking and editing a project, a project can become so much more than what one person could complete.

For new users, GitHub can be kind of overwhelming.  It involves using Terminal, or whichever command-line software your operating system uses.  Because of this, many people don’t use GitHub.  To help, here are two tutorials to get started:

• Introduction to Git
• Open Source DIY

My two cents:

As an aspiring front-end developer, I’ve questioned whether or not it is worth using GitHub.  I recently used it for a project in which I was in South America without internet access for most of the day. 

Using GitHub actually promoted good coding practices.  GitHub provided a backup of my site in case I happened to lose or damage my laptop, which was a very strong possibility in one of the biggest cities during the rain season.

It is also promoted working offline.  I could code during the day without Internet access and push what I had completed when I arrived at the hotel.

It allowed for easy collaboration.  I worked closely with a professor during this time.  When we ran into a problem, we would fork each other’s work and push our ideas back at each other.  It was a smooth and painless process.

Finally, I had a complete project to show off on GitHub.  To me, having the final product on GitHub was like a trophy.  It documented all of my hard work; it showed every update I completed.

In the end, if you learn how to use GitHub, you’ll be strongly rewarded.  On top of learning some great coding practices and being a part of a popular, active community, you’ll have the opportunity to be a part of the next big project.  You might just fork and edit the code for the next Facebook.