become a productive front-end developer & continue to be one

Trevor Davis

Continue to be one

Become a Productive Front-End Developer…

&

Hi, I’m Trevor Davis.

I’m a Front-End Developer at Matrix Group in Alexandria, VA

Title here

1. My path through web development

2. How to become a successful Front-End Developer

3. Questions throughout

Today’s agenda

How did I get here?

By learning “everything”

Title here

‣ Went to Georgetown Prep in Rockville

‣ C++ classes

‣ Summers & winters at Montgomery County Government

‣ User support

‣ Web intern

High school

Title here

‣ Went to Dickinson College in Pennsylvania

‣ Knew I wanted to do something with computers

‣ Majored in Computer Science

‣ Worked breaks from school at Montgomery County Government

‣ Thought I wanted to go to grad school

‣ First real HTML/CSS exposure: Senior internship & project

College

Title here

Internship - Harrisburg Horizon

Title here

‣ Social networking site for College Musicians

‣ PHP/MySQL

Senior Project - The College Forecast

Ok, now what?

How do I get a job?

Title here

‣ College cheerleading site for girlfriend

‣ Portfolio for mom’s friend who is a makeup artist

‣ Scoured Craigslist for small projects and full time jobs

‣ Ended up at Matrix Group

Build a Portfolio

Title here

‣ Slicing sites

‣ Regular updates

‣ Implementations

‣ Mild programming

‣ The “glue” that holds everything together

My role at Matrix Group

Title here

Our process

Information Architecture Design

Slicing Implementation

Programming

Completed Website

Questions so far?

It all starts with the structure

Would you build a house without a foundation?

Title here

‣ Always start with the HTML

‣ CSS with bad HTML is worthless

‣ “CSS doesn’t care which element is doing what, an element is an element” - Eric Meyer

‣ Once you have a solid foundation, then you should add the style and the behavioral level

‣ jQuery is amazing

Don’t touch that CSS!

Title here

‣ It’s a craft

‣ Semantic (in naming too)

‣ Clear & Concise

‣ Avoid classitis and divitis

‣ Use descendant selectors

‣ Simple Example

How do you define “good” HTML

Let the web be the web

Otherwise, you’re wasting your time

Title here

‣ The web is constantly evolving

‣ Don’t waste time trying to get everything to look exactly the same in all browsers

‣ Do you think end users are going to open your site in 2 browsers to compare?

Let the web be the web

Stay organized

Your time is money

Title here

‣ Folder structure

‣ files, images, includes, scripts, stylesheets

‣ Start with a “framework”

‣ Comments in CSS

‣ Alphabetize CSS properties

‣ Single line vs. multi-line CSS

‣ Find what works for you

Find a system that works

Title here

‣ Reset

‣ Alphabetize

‣ Organization

‣ Consistency

‣ Start in the right place

‣ http://net.tutsplus.com/tutorials/5-tips-to-writing-better-css/

NETTUTS article

Utilize available tools

There is so much awesome free stuff

Title here

‣ ExpressionEngine Core

‣ WordPress

‣ Joomla

‣ Drupal

‣ Textpattern

Content Management Systems

Title here

‣ Django

‣ Ruby on Rails

‣ CakePHP

‣ CodeIgniter

‣ Blueprint CSS

‣ 960 Grid System

‣ JavaScript frameworks (jQuery, Prototype, MooTools, etc)

Frameworks

Avoid Hacks

Maintaining them will make your life hell

Title here

‣ Firefox, Safari & others first

‣ Then, use conditional comments for IE

‣ Code with the knowledge of what will break in IE

‣ Double margin bug

‣ Duplicate characters bug

Code for the best, first

Progressive enhancement

Create the best, for the best, but make it work everywhere

Title here

‣ Take advantage of advanced selectors

‣ Just make sure that it’s non-essential to reading the content

‣ CSS itself is progressive enhancement

‣ Drop Cap Example

Most browsers move faster

Title here

‣ IE

‣ Screen readers

‣ People without JavaScript

‣ Resizable text (page zoom)

‣ Examine the site’s audience

‣ Drop Down Menu Example

The content needs to work for all

Know how things work

Some things are simpler than you think

Title here

‣ Ability to use someone else’s code is good

‣ Being able to create your own version to suit your needs is better

‣ Some plugins are ridiculously bloated

‣ Accordion, Tabs, Resets, Scrollers, etc

‣ Lightbox Example

‣ Accordion Example (UI)

Learn how to create your own

Collaborate

It can only make you better

Title here

‣ Each discipline speaks different “languages”, and you can learn something new from everyone

‣ I learned so much from my fellow FEDs; I never would have gotten to where I am today

‣ Collaborate all the time during the day

‣ Network with others at events or online

Collaboration is key

Know how to do everything

Make yourself more valuable

Title here

‣ Learn programming languages

‣ There is no reason for programmers to code simple things like email forms

‣ Take design classes

‣ Designers aren’t going to design every element for a site

‣ While it’s great to be able to collaborate, it’s also awesome to “own” an entire site

Be a master of all trades

Validation isn’t everything

Don’t live and die by it

Title here

‣ Validation is just a tool to help in building

‣ CSS is an immature language

‣ You should always strive to do everything as semantically as possible, but sometimes you can’t

‣ Image Replacement Example

‣ Sometimes you just need to get it done

Validation isn’t everything

Title here

‣ As such, “standards” will never appear on my priority list. When I’m working on a project, my priorities look something like this:

1. Create solutions that solve the client’s stated problems.

2. Find ways to achieve the client’s stated goals.

3. Find ways to solve problems the client doesn’t even know they have.

4. Use tools that are elegant and efficient, and help me produce quality work within the client’s budget and timeframe.

Jeff Croft

Title here

‣ Really, that’s about it. Notably missing from the list is: Use Web Standards (including established best practices).

‣ http://jeffcroft.com/blog/2007/aug/29/standards-web-standards-and-standardistas/

Jeff Croft

Experiment

How else would you learn?

Title here

‣ If you think of an idea, try it

‣ Talk with others about it

‣ Post it on your site and get feedback

‣ Play, play, play

Experiment

Investigate

Learn from how others have done it

Title here

‣ I rarely go to a webpage and don’t look at the markup, CSS, JavaScript, etc.

‣ Firebug

‣ Web Developer Toolbar

‣ HTML Validator

‣ Think about how you would do things differently

Investigate

Keep learning

Don’t fall behind

Title here

‣ Read Books

‣ RSS Feeds (96 feeds)

‣ Attend conferences

‣ Visit forums

‣ If you stop learning, it will pass you by; technology moves too fast

Keep learning

Enjoy the jobs you take

You’ll do better work when you are happy

Title here

‣ Do projects that you want to do

‣ Do something that will challenge yourself or expand your skillset

‣ You most likely won’t be a millionaire, so make sure you enjoy what you are doing

‣ Example of bad projects

‣ WordPress migration

‣ Online store customization

Enjoy the jobs you take

Title here

‣ At my job: FEDs vs. Programmers

‣ Push the bar

‣ New technology

‣ ExpressionEngine project

Be Passionate

Give back

Use your skills to make a difference

Title here

‣ Participate in forums

‣ Share knowledge through blog articles

‣ Create a website for a good cause

‣ Pro-bono

Give back

Questions?

Title here

‣ Online: http://trevordavis.net/

‣ Twitter: http://twitter.com/davist11

Get in Touch with Me

Thank You.