17
5 most important things I learned in 5 years of front-end development
I have been doing websites professionally for roughly 5 years now. I think I learned quite a few important things down the road. This article is more intended for beginners but I would love to hear what others front-enders think.
Indent and wrap your CSS
Update: Reading the comments, I will not recommend to indent your CSS anymore, but please make easy and readable CSS.
I started indenting CSS 3 years ago and for me this is now a life breaker. I can never go back to the old and boring CSS style on one line. Indenting makes your CSS less confusing, when you look at indented CSS you understand visually your html structure. Yes, Firebug will tell you the line where there is a bug. Indenting will tell you everything you need to know about parent style and how it is affecting your mark-up. Believe me or not but I had employers who looked at my code and told me that it’s the cleaner code they saw from the CV list. Indenting helps, a lot.
-
// TABS NOT WORKING WELL IN EDITOR BUT YOU GET THE IDEA
-
#wrap {margin:0 auto; width:921px;}
-
#wrap #header {
-
float:left;
-
position:relative;
-
width:100%; height:285px;
-
}
-
#wrap #header #utilities {
-
float:left;
-
width:100%;
-
text-align:right;
-
}
Also, please “minimize” your CSS tags. It is nicer to read and it can reduce considerably the size of big CSS file.
-
// BAD
-
#imageBg{
-
background-image:"/img/bg.jox";
-
background-color:#000;
-
background-position:top left;
-
}
-
// NICE
-
#imageBg{background:#000 url('img/bg.jpg') top left no-repeat;}
Use a good JavaScript framework
If they did not taught you at school, start learning a JavaScript framework like jQuery or Mootools right now. Front-end developers tend to be good coders without being great. JavaScript frameworks will expand your potential much further than you can imagine. Working with plain JavaScript on the DOM is really a pain, frameworks will give you steroids.
Keep a plugin library for everything from modal boxes to form validation (mine preferably 
) to FAQ page animation. You will become a JavaScript power house for creating website. Also create plugins yourself, share them, add them to your portfolio.
Don’t be afraid to talk UX with your designer or project manager
Our work with CSS makes us see a lot of UI, chances are you often read about this subject too. I am not a great graphic designer, however I know more about UX than most people can imagine. We do the fore front of sites, we test them, in some ways I think with time it makes us a bit more knowledgeable on the subject. This is not true with every front-enders, but with most of us, anyway, that’s my feeling.
I think it is safe to assume that when you will have tested more than 50 sites that you also worked on from the ground up, you begin to see patterns that work , and others that don’t. Document yourself about these patterns. Over time it will ring a bell in your head, something is wrong with this news listing. Talk about it, generally if you are working in a good company, everyone wants to make websites better. Give them better options, if they say yes, cool, if not, well at least you tried and they will see that you care about it.
Follow the community and explore, do not stay still
Unfortunately, front-end is, as with most technology’s jobs, evolving at a rapid pace. If you want to work in this industry more than 10 years it means you need to do more than 40 hours/week. You need to keep getting informed on what is happening in our world. You need to become faster and stronger on what you do.
If you don’t, you might wake up 15 years later loosing your job and no one wanting to hire you because you cost too much for what you are doing, and this university guy you were 15 years ago will be more attractive than you.
If you are learning nothing at your job, look elsewhere
If you can’t push for new technologies, have no times experimenting new solutions or creating good code. I would move on. This go hand in hand with my last point. Don’t stay in a boring CSS job because you are okay there and because it pays well. This will not serve you in the long term, unless you want to become a project manager maybe.
Bonus: Have a front-end portfolio
Show XHTML/CSS templates, javascript plugins, it will help you find a job a lot faster, I assure you it will.
Conclusion
I could also have talked about project dead lines or stress management but I wanted to be specific about my job as front-end. Hope it gave insights to some of you. I would love to hear what you guys have to say on this.
Author: Cedric Dugas
Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.
10 Comments to “5 most important things I learned in 5 years of front-end development”
Leave a comment
Articles
Some Tweets
- browseemall a nice solution for cross-browser testing http://t.co/b9ijFDqp
- Backbone.js 0.9 is kind of a nightmare for me, I see nothing in the changelog that should break my code but, lot of stuff are broken
- jQuery Mobile and backbone.js, the ugly http://t.co/Vi0UJlxe
- Instapaper Founder Marco Arment On The App Business http://t.co/HjiSYwjO
- CSS bug on ie8, only on windows xp, yay me, testing on a decade years old OS
- jQuery Mobile and backbone.js, the ugly http://t.co/Vi0UJlxe
Amen to the learning point. The thing I love most about web development is the opportunity to learn new things. Even if you think you know it all, there’s more than likely a better way to do something. Ta!
I disagree about having your css indented. Properly formatted, the one-line method is far easier for me to read when scanning through copious amounts of code. It’s definitely a matter of preference though, as I know other developers who are like you and prefer it your way.
For the record, I too have been told the legibility of my code sets my work apart.
Great article though! I love your site and check it regularly =)
I agree with Kelly – Jonathon Snook recommended always coding CSS on one line so that you can quickly scan down the document for the required style. I heavily indent related styles aswell which helps and I make everyone I work with do the same and they soon see the benefits!
Love the site!
Cheers,
M
Interesting, I will have a look at Snook article
[...] 5 most important things I learned in 5 years of front-end development « Position Absolute (tags: css ui UX) [...]
I’ll have to try the CSS indent trick, that looks great. You’ll have to twist my arm to get me to try the ‘minimize your CSS’ trick, but it makes sense.
I would not add code formatting preferences to an advice article. There are quite a few different code formatting styles out there for CSS, each used by a lot of skilled front-end developers who could swear it’s the best thing since sliced bread. You know what? No coding style is.
My coding style for CSS involves two levels of comments that work like titles (/* — COMMENT — */ and /* Comment */), one declaration per line with one indent, a hierarchical order of declaration by property (display, positioning, text, background), no hierarchical indentation. Is that better than yours? Certainly not. Yet my (small) company is going to standardize its coding style around that one because we need a common standard, my own is decent and i’m the CSS expert.
The coding style is not important. What’s good (in my opinion) is to have one and stick to it. So, when coding Python, we try to follow PEP8. It might not suit or taste all the time (i prefer tab characters over the recommended 4-space-indents, the line length restriction is a bit too strict…), but sticking to it most of the time helps everyone understand coworkers’ code.
I’d say all your other pieces of advice are solid, but coding standards are mostly arbitrary.
CSS indenting is a non-existing issue, just use a code browser within your editor
Thanks for the tips. It’s nice to hear what other people have learned from their positions.
thank good code.