Desk Talk - Front-End Development + Web Design: March 2014

Friday, March 14, 2014

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!

Thursday, March 13, 2014

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.

Wednesday, March 12, 2014

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

Thursday, March 6, 2014

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.

Tuesday, March 4, 2014

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.