And who could blame you? Who could judge you even if you've already started to forget or maybe just to underestimate the basic stuff? The old front end best practices? With so many cool technologies emerging almost on a daily basis and considering how complex front end development has got over the last years (it's definitely not just about the animated dropdown menus anymore) you've drifted away from the very basic, “healthy” habits of a front end developer. “Habits” that go beyond coding! Now, let's dust them off and discover how precisely getting back to the basics can actually help you secure your future projects' success!
Ember, SASS, jQuery, Angular... and the list is a never-ending one, since there might be new cool, innovative technologies, new libraries for you to learn how to use even as we speak!
When you're constantly “bombarded” with new frameworks that you feel the pressure to learn, for keeping up with the latest releases, you automatically start to “neglect” your good old hearty routine as a front-end developer.
You start to forget that:
- The results of all your hard work, as a front-end developer, irrespective of the innovative technologies that you might be using, should be easily “digestible” and maintainable (by your clients of course!). Your key “mission” is to deliver them 100% usability and easiness of use.
“Wowing” them with your knowledge comes last!
You need to make sure you empower your clients to manage and to maintain their web products themselves after you've delivered them and also that these products actually serve their needs. Never lose sight of this “mission” of yours, as a front-end developer, before you get too “intoxicated” about all the new frameworks and the libraries that you feel the “urge” to learn at the cost of losing sight of your “mission”. - You're part of at least one team: there's at least your team of front-end developers and the team of web designers. Therefore, getting stubborn in your code-related decisions and working in isolation won't get you too far.
Won't help you grow as a developer and won't guarantee your projects success' either (at least not on long-term).
You need to consider your fellow front-end developers when you write your code and you also need to get collaborative and empathetic (try putting yourself into their shoes) when your work and the designer(s) work intersect.
This being said, without beating around the bush any longer, let's shake the dust off some of these essential front end best practices!
They're surely nothing new to you, but maybe you've got too absorbed in coding and keeping up with the latest libraries that you've started forgetting why they were essential in the first place:
1. Build and Constantly Improve a Close Developer-Designer Collaboration
And this definitely goes beyond maintaining a friendly work environment! The front-end developer-designer collaboration is the very decisive factor striking the line between just OK-ish or disastrous web projects and cohesive, successful ones.
The designer is not your “enemy” and you aren't a member of the “adverse” team, either! In the name of a good collaboration resulting in much more successful, time-efficient and on-budget projects, try some empathy for a start!
Try putting yourself into their shoes and maybe then you'd see how you could write code that comes to complete and to add functionality to their design works. Instead of striving to code for coding's sake or for just showing off your expertise.
Needless to add (and yet I still do, apparently) that we can't be talking about a good collaboration without a good communication!
2. Design Review: One of THE Truly Efficient Front End Best Practices
No, I'm not exaggerating! Now that we've tackled the developer-designer collaboration issue, let's move on to practice: use your expertise and experience to review your designer coworkers' wireframes before the clients and the creative director do!
And turn this step into a critically important one in all your projects' workflows!
There might be pieces of design that you'll realize that are impossible to code or that, once coded, wouldn't work as expected. Let the designer(s) know that and you'll be saving lots of time and money!
This highly effective practice goes the other way round, too: don't hesitate to ask your designer co-workers how they feel about, let's say, the animation that you're working on. Their aesthetic sense can definitely streamline your own work, as well!
In the end, putting together an aesthetically pleasing, functional web product, on budget and on time, is both your and your designer colleague(s) main goal. And since you share the same goal, why not “concentrate your forces” to meet it together more efficiently, more quickly?
3. Never Underestimate the “Power” of Version Control
And this is another “habit” that should go on top of your front end best practices list!
If you've been working as a front-end developer long enough you surely have confronted yourself with situations where you made changes to a file, uploaded it on the website via FTP and... Boom!!!... you broke it!
If this sound way too familiar to you, then you should start making GIT part of your life ASAP (of your professional life, of course!).
The version control system (an open source distributed one) will help you regain total control over everything you'll change in a project (small or large). This way, you can see everything (“painted” in green, so you can differentiate your changes from the rest of the code) that has changed.
Moreover: the entire team can use it to store their repositories! Speaking of speed and efficiency at the entire project/team's level, right?
If you're new to GIT, tryGit!
Also, maybe this is redundant information and yet I shall add it: NEVER EVER DEPLOY YOUR CODE RIGHT ONTO YOUR PRODUCTION SERVER!
4. Dust Off and Sharpen Your Social Skills
Again, I feel like highlighting this aspect: getting yourself isolated, just you and your precious lines of code, won't get you too far!
You need to start to learn how to work with all the remembers of the team involved in a given project: designers, fellow developers, managers etc.
This way you'll get a clear understanding of what exactly you're doing as you're carrying out your front-end development tasks and which is the goal you should have in mind as you're working on them!
5. Write Code as if Another Developer's Watching Over Your Shoulder
I know this sounds as if I'm portraying a... psychopath, but you get the picture: always write clear, READABLE code that all the other developers reading it after you should be able to easily user it. It's, by far, one of the front end best practices that you could integrate into your routine!
Let's face it: front-end development is less about writing new code and surprisingly more about reading code. Reading others' code!
So, there you have it, the unbeatable argument for optimizing your code for the next person who'll need to use it: just imagine that you'd be in their position, to read, to understand and to efficiently use another front-end developer's code!
6. Learn Design Basics
Growing, as a front-end developer, surely isn't limited to “jumping on” the latest framework and learn all about it or to adding more cool tools to your own toolbox!
It's also about learning the basics of design.
Now you don't want to put the designer(s) in your team in the position of checking each and every pixel after you've done your part in the project, right? It's not time-efficient and it's definitely not a self-esteem-booster either!
“Never stop learning” is a saying that never gets outdated!
7. Handle Responsiveness the Right Way
And you'll be able to tackle it the “the right way” once you:
- realize that by simply installing Bootstrap Twitter you won't instantly turn a given web design into a responsive one
- accept that there are way too many devices, too many breakpoints out there to worth the effort/the time/the budget of striving to make the given design fit perfectly on all of them
- sit down and talked to your designer co-workers and came to the conclusion that their design might not look “ideally perfect” on all devices, but that at least it looks good, it's good for all the possible breakpoints and it works properly on all of them
8. JavaScript: Learn the Language Itself
I know that with all the frameworks, all the tools popping up every other day it's easy to lose sight of the importance to learn the very language itself. To learn JavaScript!
Yet, you should! Focus on learning core JavaScript first and it's then that you'll easily understand how each framework works.
You can't learn how to ride a bicycle before you know how to walk, right?
9. It's Time You Learned Functional Programming
Since programming has becomes less about classes and more about functions, you need to learn how to “joggle with them”. How to write your code using functions!
10. Review Code and Get Your Own Code Reviewed
That's right, code reviewing still is one of the front end best practices that guarantees you a clean code and... useful knowledge!
Don't bee ashamed to ask your fellow front-end developers to review your code! There might be parts of it that you could improve and issues that you just can't see any longer after having worked on a website for a long time!
Also, start seizing all the opportunities you get for reviewing your colleagues' own code, as well! It's a never-ending source of new coding techniques for you! Never, ever stop learning!
Now when it comes to code review tools, GitHub still is one of the most popular ones among development teams. Yet, feel free to run your own research and find the one that best suit's your team's needs!
11. Don't Get Lazy: Always Comment Your Code
No matter how busy you might be working on a project, how stressed out since the deadline is knocking at your door: always remember to comment your code!
Take it this way: it's like future-proofing your code!
You comment it now and a couple of years latter, when you need to use it for another project, you'll have all the useful comments at your disposal. You'll be able to easily use it once again... and again... and again!
12. Never Stop Testing
OK, you should still stop at some point or else your project will be a never-ending one!
But, as long as you're working on it: test, test, test... excessively!
Test your work using the testing tools that you prefer and test it on several devices.
Also, never skip the step where you ask your colleagues to test/review your code! Track those errors down before your client does!
13. Documentation: Put It On Top of Your Front End Best Practices List
It's a dread, I know, and yet, it weights so heavy in the relation you'll try to build with your clients! And you surely do not want to be working on one-time-only projects, right?
In other words: the clearer and more concisely you write your docs, commenting all those key pieces of code that will enable your client to do some essential changes himself on his website/app, the more future collaborations you'll attract!
Go for GoogleDocs, for Google Sites, for whatever tool you find suitable for writing and organizing your documentation!
14. Write Client-Editable Code
And this is more than just another one of the good practices in front-end development: it's a routine that should come as naturally to you as brushing your teeth in the morning!
Always make sure that those key parts of a web project that your clients might wish to edit one day, will be easily editable!
You'll be saving your time, his/her time and this “commenting routine” will ensure you future collaborations as well (no client would want to be fully dependable on you for every minor change he/she needs to make to his website).
Now, it looks like I've ended up with a quite crowded list of front end best practices for you to pin up somewhere near your desk and never lose sight of.