Strategies For Staying Educated About Interactive Media, Front-end Development, and Web Design

A lot of professions require keeping up to date with standards and trends, but for interactive media, it is almost a weekly commitment and should be a part of the job.  With interactive media, there are trends that appear every year and it is usually a good idea to follow them.  It is almost expected that people accept these trends and throw away the old ones; if you don't, you'll quickly be called outdated.  I've been there.  Within development, there are frameworks are pop up every now and then.  If you want to stay in the business, you must learn these new frameworks.  Every couple of years, the semantics of code is changed and you must learn the new tags.  Browsers are always being updated, operating systems change, platforms are introduced.  So how do you stay up to date?  Let's explore how.

Front-end Development

I've already made a post about this, but following the key players is probably one of the best ideas.  All of the big developers are on twitter and some of them have blogs.  It's important to keep up to date with these guys because some of them are the ones making changes to the markup.  Some are developing the  platforms where your future code will rest.  Others create new libraries, like jQuery for example.  However, the best thing is that you can have a one on one interaction with these internet celebrities.  More than not they will answer your questions.  Additionally, you get access to their thought process, their random ramblings, their weird lunch thoughts.  Today is a weird world; we pretty much have access to everybody's journal through twitter and blogs.  Use it and hopefully you'll get a peak into an artist's process.  Attend conferences.  Here you will have a chance to see the most up to date technologies and trends.  Attend field-specific conferences too, like front-end development conferences.

Web Design

Staying up to date with web design is pretty much on the same level as front-end development.  In order to be the best web designer, you must know how the web works.  If you don't know how stuff is made interactive, then you definitely have a disadvantage compared to other more well-rounded designers.  To stay up to date requires observing others.  Dribbble, for instance, is a great way to see what other web designers are doing.  You can take a peak into their process because a lot of the shots are works in progress.  Dribbble is also a great way to see what is trending; the most popular page is full of trendy designs, fonts, colors, and methods.  It is worth taking a lot at some agencies as well.  These are the guys making the products for the startups.  They should be making the most up to date stuff. And it usually looks good.  Attend conferences.  These conferences will be showcasing the most up to date technologies and trends.  There are conferences all over the United States, but a must is SXSW.  Attend the web design specific conferences as well; they'll have workshops and lectures.

Overall

Create.  It's that simple.  One of the best ways to keep learning is to keep working.  Keep working on your own skills, but also explore some new methods.  Experiment.  Who knows, you might stumble upon the next trendy element in design.

What To Look For When Hiring A Developer

A recent experience made me think about this post, but this was also a topic of debate on the Web Development subreddit on Reddit this week.  I was working with the client to improve their SEO, social media, and user experience.  The client told me that they had a redesign of their site in February, so I was really shocked when I first encountered their site.  I was looking through it and I noticed that their web developer had placed a link to their site, which had rates for their work.  I was surprised to find that this guy was charging $75/hr plus $1000 to start working on the site and the end product for my client was so terrible.

If you're hiring a web developer, you need to find somebody you can trust to give you a great product.  This means that they have a great body of work, but they also have people skills. Let's go over what you should be looking for within each area.

When Looking To Hire A Developer For Your Site

Portfolio: Look For Frequent Updates

A frequently updated portfolio gives the audience a good idea of what your current work is like.  However, it is really great for showing clients that you are active within the field.  It shows that the developer is serious about the craft, is working to improve, and has plentiful clients or ideas.

Best Projects

From the point of view of the developer, you want to make sure you are showing your best works.  Basically, don't cloud the portfolio with every single project you have ever worked on.  Show the best work and really try to sell it.

This might be hard to judge from the client's point of view, but make sure you really like what you're seeing.  If the developer happens to show a ton of projects, make sure you really are obsessed with the latest ones.

Side Projects

Look for some side projects.  If a developer is spending the time to work on side projects not related to client work, then that developer really loves what he or she is doing.  A developer should feel the need to work on these type of projects as well; it shows creativity and a drive to complete that idea.

People Skills

If they can't communicate well, drop them.  You might run into several problems during and after development, and if you haven't talk with them about your issues, you're going to have a bad time.

Responsive

Mobile-first web development is key.  If you their portfolio or work doesn't work for mobile, then theres a chance yours won't be coded for mobile either.  An increasing amount of people are using mobile phones to access the web.  You will lose valuable customers if your site fails to have great user experience on mobile.

Google Them

See what comes up.  See if you can find any social media mentions.  Explore Twitter and see if anybody has reviewed them, mentioned them, followed them.  See if they are active within the community, blog, etc.

When Hiring

People/Interview Skills

This is kind of a given, but having an employee with great interview skills shows that they care about the position, would fit in with your company, and if need be, could communicate well with clients.

Skills Test

This might be the most important one.  With development, proving they have the skills in a controlled environment shows they are capable of working in that position.

Attention To Detail

Attention to detail is always great, but really important with development.  This is where you need to look at their code.  Look for clean, semantic code.  Make sure the code is readable. 

Conclusion

In the end, this is an exchange of trust.  They are going to be in charge of creating an online presence for your client or company.  If you can't trust them as a person or find their portfolio to be lacking in something, then you might want to look elsewhere.  There are plenty of great developers out there who are willing to work for you.  If price is your issue, remember: you usually get what you pay for.

My favorite resource? Dribbble, of course.

Studying other artists is perhaps one of the biggest ways to grow as a designer.  Having work critiqued by other artists is also extremely valuable, but we aren't all blessed with a workplace full of designers willing to critique our work.  It's also fun just presenting work and getting more eyes on it.

There is where Dribbble (with 3 b's) comes into play.

Dribbble suggests this question: what are you working on?  Dribbble is a community of web designers, graphic designers, and various other designers that create small snapshots (shots) of their work in progress or at completion. Members can then comment or like the shots.  If you haven't figured it out yet, Dribbble has this basketball theme around it.

Anyway, it's a great way for designers to showcase their work.  Designers can provide critiques, which can help improve the work because a lot of content is a work in progress.  It's also a great way to get some inspiration, which is why I use it.  The world's leading designers are on Dribbble and it's amazing what people can accomplish.  It really helps you keep up to date because the most popular section is always flooded with the trending design elements.

Oh yeah, Dribbble is sort of private.  It requires an invite to become a member, but you can still browse the site without a membership.  Members just have the opportunity to contribute content, which is really fun.

The Main Page

The main page is where all of the recent shots of the people you follow appear.  Following people is pretty easy and it doesn't require an approval.  There is also a social media-like section which shows your recent activity, such as comments on your work.  Finally, there is a suggestions tab which suggests works that you might like based on the stuff you have favorited.

The Shot

Once you're looking at a shot, you can like or comment the work.  If you have a similar shot or the shot inspired you to create something based on that work, then you can rebound the shot by linking up to the original work.  You can also see how many views the shot has.  There is also a handy color palette tool that shows the colors the work primarily used, which I've used a few times to try to find a color palette for a project.  If you're a paying member, you can actually link the original file to the shot so that users can get the big picture.

Jobs

One of the awesome things about Dribbble is that it has created a section similar to LinkedIn or Indeed in that companys can post job openings. You can search by location, but I don't think there is an option to search by job position.  However, pretty much all of the jobs are design-related.  If the company is actively on Dribbble, then they can become a team, which is where multiple members post to.  If a team is advertising a job, then a little icon is placed beside the job opening.  This is usually a nice place to work at because Dribbble is a great resource.

Conclusion

Dribbble is a lot like Adobe's Behance, but to me,  Dribbble is more creative and professional.  For one, it requires an invite to become a member.  I also just love the entire theme of the site; the basketball thing is pretty funny.  I am always impressed with the content as well.  I don't think I have ever seen anything horribly designed on the site, which is impressive.  It's a great resource for getting inspiration.  Dribbble really is one of my best kept secrets, but I really think every designer should be a part of it.

How to push a project to Github

In a previous post, I mentioned that every developer should be using Github.  Github is a cloud-hosting service that creates backups of repositories, or projects.  These projects can be viewed, shared, or edited by other members of Github.  Github creates a wonderful experience because it creates a worry-free backup of your work and other people can contribute towards your work, which can create bigger and better projects.  

In order to use Github, you have to be a little bit familiar with a command-line interface, such as terminal for Mac.  It's been a few months since I've pushed a project to Github, so I thought I would go over the steps to both help you and myself.

Before I begin with the initial Github push, there are three basic steps when pushing a project.  First, edit content.  This means editing a piece of code, adding images, added documents, whatever.  Second, you commit the changes, which means you kind of create a save state.  Three, you push the save state to Github.

Step One - Create Your Repository

This is actually an easy step and it doesn't require the command-line interface.  Visit Github and perform the necessary on-screen steps. Be sure to name your repository and remember the name, because we will have to refer to it in step three.   It doesn't matter what you select for the README; we are going to wipe out the settings in a second!

Also, make sure you have a folder on your desktop for your project.  The beauty of Github is that you can work offline and then push your content online.

Step Two - Install Git

Git is required in order to push projects to Github.  If you don't have it installed already, you can actually install it from Terminal.  Follow the steps provided at the Git website.

Step Three - Initialize Git

Now that you have Git installed, you can get started!

In Terminal, cd to your local project folder on your computer.

Type the following in the Terminal:

git init

This creates a git repository in your project folder on your computer.

Then add files to the Git index:

git add .

Commit the added files:

git commit -m 'Whatever you wish to say'

Commiting is like a save state for your project.  You can add messages to help you remember where you are at within your project's progress.  This is added in between the single quotation marks.

Create a connection with Github

git remote add origin https://github.com/username/your-project.git

Make sure to change the your-project to your project's url address. You can get the url from the repository you created through Github.

Push Project to Github

git push -u origin master

This sends your commits in the master branch of Github. Basicaly, this is sending your save state to Github.

Final Thoughts

That's all!  Using Terminal for the first commit and push is required. Once you have done this, you can download a Github client that will make it easier to commit and push; it doesn't require Terminal. I prefer Github for Mac. However, you can always commit and push to Github through Terminal like we just did. This time, this is all you have to do for the next commit and push:

git add .

git commit -m "type your commit message here"

git push origin master

UX Best Practices

UI/UX design is a new and upcoming field in the digital media world, but its concepts have been around since the creation of interactive media.  Great UI/UX, or user interface and experience, is a balance of both high convertion rates and ease of use.  These two are great together because it means more business for your company and there is a lack of frustration with the software that can immediately leave a bad taste in a customer's mouth.  Thankfully, there is a lot of research out there for what makes great UI/UX. For your next web design project, try some of these suggestions out and see how they work out for your client's business.

1. Know Your User

This is a no brainer.  You need to design for the user and not yourself.  Context plays a big part in the design.  What is the site about?  What is the purpose?  What is the end goal?  Design these things with both the user and client in mind.

Also, while you may know how to use a website because you designed it, your users might not have the same intuition to click something.  Make things more intuitive.

2.  Surprise The User

While I just said to keep things intuitive, surprise the user occasionally.  This will provide a better user experience and it will stay in the user's mind.

3.  Solve Problems

One of the many reasons you have been hired as a ui/ux designer is to solve problems.  A website or product can be a great tool for solving problems.  Solve these problems through design, but keep things intuitive and don't over-complicate.  Everything on your website is there to help the user.

4. Keep a Consistent Navigation

One of the easiest ways to confuse a user is to switch up the navigation.  You may think that your navigation gets boring if it remains the same across all pages, but really it is quite comforting to know where the navigation is, know where the links are within the menu, and where they are at within the site.

5. Rethink What You Just Designed

There are multiple ways of designing something within every aspect of your design.  There are thousands of fonts, colors, shapes, layouts, progressions, forms, etc. etc. etc.

For example, instead of a three column layout, try out a one column layout.  A one column layout will keep your layout more focused.  It leads to a better narrative and better attentiveness.

For more of these examples, there is a great blog called goodui.org.  I recommend reading every one of their posts.

The Problems With Modern Web Design

Just recently, I made myself research the top web designers of our age.  Having an art history past, I am used to having artists to look up to or gain influence from.  I hadn't really thought about it until the other day when I asked a visiting graphic designer who he gets the most influence from.  And then it hit me,  there's gotta be some web designers that are making most of the content or, atleast, analyzing it.  And then I came across Trent Walton.

I just finished reading Trent Walton's post on "Device-Agnostic" web design and I couldn't agree more with everything he said.  We are in a point in time where designing for the web isn't as easy as it once was.  2.4 billion people are using the web and a lot of them are from developing countries.  This means the web is being accessed by an infinite amount of screen sizes, operating systems, devices, software versions, and connection speeds.  Thus, designing for the web has definitely become a challenge, but the thing to do is focus on the harshest conditions first, and then go from there.  Walton addresses four topics:

Hostile Browsers

Hostile browsers are a real problem.  People are using all sorts of browsers to view the web.  This includes browsers that are a few updates old to browsers that aren't even supported anymore, like the recently discountinued internet explorer 6 (thank god).  Other situations can occur such as javascript timing out or a mobile phone temporarily losing service.  Walton explains that we need to design using the progressive enhancement method.

According to wikipedia,

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

This makes a lot of sense to me, but I am unsure how to provide different experiences based on who interacts with my content.  But I guess advanced browser software can be considered up to date modern browsers and everything beneath that mobile quality.  If that is the case, then designing for mobile first is definitely the smartest thing to do.  I am currently designing a mobile application using the Bootstrap framework.  Bootstrap is advertised as a mobile-first framework and I think there are a lot more of these frameworks popping up. Anyway, while the framework is advertised as a mobile framework, it provides an equal experience on a desktop.  Bootstrap is pretty popular as well, which means more people are designing in this modern way.

Tiny Screens

According to The Verge, mobile and tablet sales are far exceeding desktop sales.  Again, this means that mobile should be the first consideration when designing for the web.  On top of this, the experience needs to stay the same between all screen sizes.  Pages should not act wonky on mobile, fonts should look the same, and interactivity shouldn't be affected.  Furthermore, mobile-sensitive topics like data plans should be considered.  Having large images and HD video can really eat up a data plan.

Another problem is that sometimes the mobile website doesn't have all of the features that the desktop version has.  This is really annoying if you have to visit the desktop version of the site to do something.  This brings up the question: if it doesn't fit or work for mobile, why does it fit for desktop?

Slow Load Times

Nothing kills an experience like slow load times; we don't have time for it.  As designers, we are accustomed to building websites on fast servers around the office or at school.  But in reality, most of the web doesn't have the same quality of internet speed as we do. Since 2010, the average page size has doubled.  This is becoming a big problem, especially if we are in the mindset of designing for mobile first.

The problem lies within us, the web designers.

We need to be aware that everything we add to a page is adding more weight in file size.  We need to question ourselves: is what I just added valuable to the website?  Overall, just be more aware of files sizes.  You can fix this by minifying your code, using low quality jpgs over pngs, and when applicable, using code in the place of images.

Touch Inputs

We need to design with a fat-finger approach.  On desktop, links are often really small and only the size of the text that links. For mobile, buttons need to be a big size so that fingers can accurately press them. Design should be consistent across everything, so this needs to be something to think about.

Conclusion

In 2014, simply coding a site with a responsive framework doesn't cut it anymore.  Mobile pages need to work just as well as the desktop version.  Having a responsive site doesn't eliminate every problem: images still need to be compressed, hd videos shouldn't be on mobile pages, and specific phone orientations shouldn't be required.  In the end, it might be easier to design your website as if you are designing for mobile.  It really should be the first thing you consider when designing for the web in 2014.

Twitter Gets A Familiar New Look

If you haven't noticed yet, your Twitter profile page has received a makeover.

About a month ago, Twitter announced plans to roll out a new profile page that would make profile pages represent their owner's personality even more.  If you think about it,  the old Twitter profile page was pretty bland and generic.  However, their new page is eye-catching, but it does resemble something.  Twitter perhaps received some inspiration from Facebook because the two profile pages look pretty similar now.  They both have a profile picture nested in the top left corner along with a large cover photo that stretches across the entire top of the screen.  Below all of this rests content.

The new profile page

For Twitter, this now includes best tweets, pinned tweets, and filtered tweets.  Let's check them out!

Best Tweets

Notice the size difference.  The one on the bottom is part of the new best tweet feature

If you take a look at your new profile page, you might notice that certain tweets are larger than others.    This is because they have been labeled as a best tweet.  According to Twitter, the tweets with a lot of engagement will appear larger on your profile page, which makes it easier to find the most important or interesting content.

Pinned Tweets

They sit at the top of your profile page

Have a tweet you are super proud of?  Or perhaps a celebrity interaction?  You can now pin tweets at the top of your profile page so that others can quickly see them.  Ideally, you will want to pin a typical tweet so that new followers will know what you are all about.

Filtered Tweets

Twitter understands the importance of photos and videos.  They are visually stimulating and our eyes automatically fall on pictures over text.  If you want to just look at tweets that have pictures or video, you can now filter tweets on your timeline.  Other options include view all tweets and view tweets with replies.

All of this is a lot to take in.  If you don't want to switch right away, Twitter is not pushing the switch just yet.  You can demo these new features, but they won't stick until you tell Twitter that you are ready.  With that said, all of these new features improve an already amazing web experience.  I think I'm finished talking, so if you haven't tried out the new Twitter, visit your profile page and try it out!

How to Write Better Code

Writing code is all about readability.  Even if it's just for you.  When writing code, using some best practices and standards will make your life a lot easier when trying to fix errors, stay organized, or when working with teammates.

1. Use Comments to Help Readability

Comments within code are useful for several reasons.  First, comments are a great way to type out in a conversational language what the code is doing.  Second, they are a great way to organize your code.  If you're scrolling through a long piece of you, it's a lot easier to look for comments than a particular line of code; they stand out more.  Third, it's a great way for team members to understand what you were doing or thinking as well.

2. Use a Standard When Indenting

When writing code, make sure to keep a standard throughout all of your code.  When you indent a certain way, do it for a similar piece of code later on.  It helps improve readability, audience understanding, and it might even help you spot errors.

3. Use a Standard When Naming Files, Classes, Etc.

Take a look at the code in green.  It's in camelCase.

There are several ways to name files and it really just boils down to what you're comfortable with.  A lot of people might be used to doing something like this: Desk_Talk_Blog or DESK_TALK_BLOG, or Desk-talk-blog.  But for me, I like to use a modified version of PascalCase called camelCase.  I will keep the first word lower-cased and for the second word I will capitalize the first letter and so on.  This is what it ends up looking like: deskTalkBlog.  So why do this?  Again, it helps with readability and it just gives you some organization.  I recommend doing it throughout your website down to the folder directories.

4.  Avoid Deep Nesting and Keep Line Length To A Minimum

Don't do this

It's easy to get carried away with nesting.  It is usually a great way to keep organized and matches a standard when indenting, but sometimes it is totallly unneccesary and just adds difficulty when trying to read it.

Furthermore, keep the length of your lines short.  It is so annoying when you're trying to read a line of code and you have to scroll to the right to continue reading it.  There's a reason why newspapers use multiple columns rather than one column; it's much easier to read.

That's it for now.  These tips have mostly been focused on HTML/CSS, but they can extend how to other languages as well.

Web Design Basics

I'll just begin by stating it.  Great web design is tough.  It's a delicate balance of pleasing aesthetics and usability.  You could have an extremely impressive and beautiful website, but if users struggle to navigate through the content, then you have failed as a web designer.  Like with any form of art, there are some basic principles behind the design that have existed for decades.  I really wish to say centuries here, but web design has only existed for the past two decades or so.  However, web design is pretty much art; the principles behind art have existed since the beginning of time.

Anyway, let's not get too caught up in being correct with our wording here.  There are some basic principles behind web design.  Follow these principles and you should be able to make a great interface and web experience (UI/UX).

1. KISS (Keep it simple, stupid)

Simple, flat design

Play KISS music on page load.  Actually, that is an extremely bad idea.

Simplicity is really overlooked with beginning designers.  It's easy to get caught up in adding flash and thrill to a design, but really it's just unnecessary junk that is taking away from your work's usability.  Ideally, beginning artists or designers should work with minimalism for a large portion of their learning experience.  If you are able to make an attractive design with minimal materials/shapes/lines, then you have the potential to be a great designer.  But back to web design, keeping it simple will definitely help make your site easily navigable and it will just flow so much better.

2. Don't Make Users Think

Yeah, I'm going there with the stock photography

This is a continuation of KISS.  Making users have to think about how to use your website is going to cause some negative thoughts about your site, which could potentially harm your brand.  Having a really complicated design might look great, but it could cause problems in some users.  Just because you think something works well doesn't mean everybody else will have the same opinion.  You have to remember, the web plays host to all sorts of skill levels.

3. Remember Conventions

This is like a design principle within a design principle.  Following conventions works because, well, it's a convention; it's just the way something is usually done.  For example, when first loading a page, most users' eyes will travel to the top left of the page because we have been taught to read from left to right.  Most people expect the site's logo or home link to be placed there.  It's really something we are so used to and we don't have to think about it.

Explore a handful of websites and pick up some of the conventions they are utilizing.  However, this doesn't mean you have to play by the book 100%.  Deviating from the norm is actually a good way to explore your creativity, but ignoring several design conventions in doing so could lead towards poor usability.  In other words, the sites that deviate from the norm still apply some of the basic web design conventions.

4. Stay Consistent

For some, a website is just another tool to represent a brand or an idea.  These brands have already made decisions for their color schemes, typography, etc.  These visuals stay consistent across all forms of media and it's comforting because we can still recognize it as the original brand.  Your website shouldn't be any different.  Using 15 different fonts, different spacing rules, different layouts, alignments,  or pages that don't look similar to the original index page can cause users to question if they are even looking at the same website.  It can cause usability issues as well. You want to stay consistent with your page design.  You are creating a set of rules within the first few seconds of a page visit.  Users will understand these rules quickly.  But if you can change the way the site works or feels, you are really causing some problems.

5. Get Inspiration/Explore!

There is no better way to learn than by learning from your peers or competitors.  Visit as many websites as you can within your site's field and see what trends are popular, what conventions the sites share, what layouts are working, and what doesn't work.

Developer Toolkit - Essentials

I've made a post before about developer toolkits and stuff to add to them, but I haven't really mentioned the essentials.  In today's post, I'm going to go over items that I use almost on a daily basis.  Sometimes, I don't even realize I am using them because they are part of my boilerplate.  Let's get started:

1. HTML5 Boilerplate

This is basically an HTML5 ready template to get started with your projects.  It includes a lot of stuff that I'm going to go over, but I have just started using this boilerplate. Before, I had to download everything separately.

2. Normalize.css / Reset.css

These stylesheets reset CSS so that your document is pretty much clean from styling.  It's a great way to start projects because you don't have to tackle with any predefined CSS styles.  These stylesheets are also great for browser compatibility.  For example, a line height might look different across several computers.

3. HTML5 Shiv

This makes older versions of IE understand HTML5 tags.  Very useful, but it looks like the days of supporting XP are numbered.

4. jQuery

Download the full or minified versions and slap them on your <head> tag. This is the most popular Javascript library out there.

5. Modernizr

Another Javascript library.  This one checks to see if your browser has certain features.

6. Adobe Kuler

This tool is more for a designer, but I have really grown to enjoy the application.  It comes in both a desktop and mobile version.  It basically helps you choose color palettes.  You can also take pictures with your phone and it will auto detect the color palette of the picture.

That's about it for my toolkit.  Again, these are my most-used tools.  There are plenty of tools out there and I ocassionally I will use them, but these are a must-have.

Take care and stay tuned for more updates!

Desk Talk Weekly - Web Turns 25 and More

Hey y'all,

I've decided that I might start collecting weekly news articles and trending conversations about web development and post them here.  Besides stuff in the news,  I want to talk about stuff that is trending or that people are talking about a lot.  We've got a big news event this week, so let's get started:

The World Wide Web Turned 25 Wednesday

Tim Berners-Lee submitted a proposal for the idea of the internet in March of 1989, the year I was born.  His proposal brought ideas of community and sharing stuff over what we call today, the Internet.  Soon, they developped the first website ever.  Today, Berners-Lee is still promoting the web, but argues that it should be open, free, and accessible by everybody.

CSS UI Icons

Trevan Hetzel has taken some of the most popular icons on the web and has recreated them using only CSS.  He argues that images are really annoying to deal with.  They can mess up responsive environments, are sometimes large, and they load slowly.  But, images cannot be replaced for now because we enjoy them too much.  Instead, he argues that we should code what we can.  I can see these becoming really popular; they are some of the most used icons and he provides the code for each one.  He also explains his method.

2048

This game has been talked about a lot this week.  The game is really simple and addicting, but what we're interested in is that it was made with Javascript!  Maybe the author will come out and talk about his Javascript creation soon.

Crowdsourcing Missing Plane Search

Crowdsourcing on the internet has been a big thing in recent years.  Basically, we are able to do bigger and better things through online collaboration; stuff that one person or a small team could never do.  This week, we were greeted with the sad news that a recent Malaysian plane was lost which carried over 200 people.  In an attempt to find the missing plane, which is still lost as of March 13th, people have been scanning satelitte images and reporting pictures of wreckage-like images.  So far, nothing has turned out to be anything of note, but the fact that we are all working together is an awesome thing.  And as developers, we have the opportunity to make stuff like this happen.

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

CSS Code Snippets

People love to save time.  It’s no surprise to find that developers enjoy saving time as well.  Mentioned in a previous blog post, developers are very particular about which code editor they use.  As we saw with Sublime Text 2, some editors have built in features that allow users to save time and code faster.  In this week’s post, we will go over another way in which people save time while working on projects: CSS code snippets.

CSS can be very basic; it’s a markup language.  In contrast to JavaScript, there is usually just one or two ways to make the document behave or look a certain way.  As a result, you can easily build something and share it with somebody.  CSS is very easy to tweak as well, so why not allow users to change up the code so that it suits their needs?

Some friendly and good-hearted developers have done just that.

Let’s say you want to quickly build a div that has a border radius.  If you’re like me, you still have trouble remembering the exact syntax to do so and looking up the documentation for it can be time consuming.  Instead of researching, try finding a tool for it.  In the border radius example, you can adjust the settings of the CSS to suit your needs.  We will go over a few websites that have these types of tools!

5 CSS Code Snippet Websites

CSS3Generator

The site provides 12 different tools including border radius, box shadow, multiple columns, transition, and transform.  One of the features that I really enjoy is the browser compatibility feature.  For each tool, the site will tell you which browsers the code is compatible with (including browser versions).

CCS Tricks

This site is a classic, fantastic resource.  The author, Chris Coyier, is well known in the developer community for his work on the site and his work with Codepen.  CSS Tricks provides a ton of snippets; some of which are more complex than CSS3Generator’s.  For example, he provides snippets for useful LESS Mixins.  He also provides snippets for other languages, so you can definitely spend a few hours here if you wanted to.

CSS Button Generator

HTML5’s button tag is nice and all, but it looks extremely plain.  This fancy little tool allows you to dress up buttons.  You can even create them with gradients and hover effects.

CSSFlow

This site provides some really nice looking results.  If you’ve got time, there are 11 full pages of code snippets ranging from toggle switches, buttons, tables, bars, etc.  A lot of it is really trendy looking as well.  The site also provides some nice looking UI kits.

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.