|word cloud by wordle.net|
Without a doubt, raising team members' skills (esp. juniors) to a standard will not only enhance collaboration (as they should know what others are doing) but also improve their productivity.
When forming up my front-end team at Nau Studio, I thought a lot about what are the most essential skills and technical knowledge which will become my team's baseline and focus of basic training.
To begin, let's talk about the three pillars of Web Front End:
HTMLMany developers take HTML for granted. But the more they work with it, the more they'll realize that authoring HTML that is clear and lean requires great skills and I dare to say that it is kind of an art.
To become a successful developer with HTML, you must know how to combine elements semantically yet effectively. This involves good understanding of all common HTML elements in terms of not just default layout rules and styling but also their semantic and contextual usage. Part of this is gained by experience, but the principles can be taught and guided.
- HTML5 Doctor: Reliable reference to HTML5 elements' usage, especially in a semantic way.
- HTML basic tutorial: Basic HTML tutorials
CSSMany CSS beginners, especially IT students in Viet Nam, have very brief lessons about CSS at web dev classes and related textbooks are outdated. Most will practice trial-and-error tinkering and master CSS very inefficiently. (Or at least it was my case at the beginning)
This is not the case in my team. Fundamental concepts of CSS like cascading, specificity rules, selectors, inheritance, box model and stacking context must be well understood.
After the basics, you must then have some ideas of OOCSS or start practicing some points from CSS guidelines.
Besides, front-end developers who do CSS well always have a few common tricks up their sleeves. For instance, they must know all the tricks to vertically align contents while Flex box is not yet mainstream. They must also know when to use pseudo-elements, CSS shape tricks, icon fonts, or sprite sheet, etc. to achieve the UI designs with best performance and compatibility results.
And last but not least, a modern front-end developer should be able to use a CSS preprocessor (our favorite is SASS - SCSS flavor) to enhance maintainability and productivity of your work.
You might ask about CSS3 and cutting-edge features? It will be a piece of cake once you've mastered the basics.
- CSS Tutorials from webplatform.org
- OOCSS: Object-Oriented CSS methodology by Nicole Sullivan
- CSS Guidelines by CSS Wizardry - Harry Robert
- CSS Tricks: Who does CSS and hasn't visited this site before? :)
When you get more advanced in JS, and wanting to get a more structured and maintainable approach of doing it, you’ll learn JS idioms, patterns, modules and may be an MV* framework all along.
In my opinion, NodeJS is not in the baseline of Front End developers. Eventually, however, you will get to know it by using one of its many tools in the workflow or having to do some server-side coding using JS.
- TodoMVC: A go-to site for MVC frameworks evaluation and comparison
- Writing Modular JS: More details on modern JS modules
- Understanding ES6: Learn ECMAScript 6 with Nicholas C. Zakas
The Modern WorkflowAs I mentioned before, good team work is also affected by how well team members comply to conventions and coding style guides. In this modern age, however, it is not necessary for new joiners to learn by heart all those rules as long as they use linters (JSHint, CSSLint, SCSS-lint) and code styles checkers (JSCS), to impose and shape their coding styles.
In my team, we have a dotfiles repository which covers editor’s defaults and plugins, code linter config, most frequently used code snippets and some command line aliases and functions.
Since you develop for the Web, the browsers are undoubtedly your best sidekicks. Two know-hows I would strongly recommend are using the in-browser developer tools and so-called live reload software. All modern browsers have decent built-in devtools, but the most sophisticated and useful one, to me, is Chrome's. For live reload software, I recommend looking at Browsersync.
Next to browsers, the code editor plays as much an important role. Whatever you choose, make sure it has decent code completion with live feedback linting. The other highly recommended features of modern front end editors are multiple cursors and fuzzy file search. If you ask me, I suggest checking Sublime Text or Atom. Besides, don’t miss out Emmet, the plugin that will “greatly improves HTML & CSS workflow”.
The Front End workflow can't be completed without mentioning automation tools like the command-line-based Grunt or Gulp or the GUI-based counter parts namely CodeKit or LiveReload. Modern web front-end process targeting performance is becoming so complicated that it is very tedious to handle manually. Being able to use a process automation tool is becoming the baseline standard.
Other skills and knowledge that are too obvious to talk into details: version control system, software development process, agile methodologies, communication tooling and the OS platform you choose to work on.
- Nau's Front End Dotfiles: A set of tools and config for our team’s workflow.
- Automation with Grunt tutorial (screencast in Vietnamese): I’ll guide you through using one of the most popular automation tools for Front End dev.
- Front End Project Settings & Linters (screencast in Vietnamese): Part of our scaffolding workflow, semi-manual for now, but will be automated with Yeoman later.
- Modern Front End workflow from start to finish: An insightful read or current Front End workflow.
Progressive EnhancementKnowing Progressive Enhancement is now a must for modern Front End developers. It is not about the knowledge to implement websites exactly the same across browsers anymore, but ability to leverage the capability of each browser to provide the best experience on it. This requires developers to know how to use caniuse.com, Modernizr, html5boilerplate as well as knowing when a polyfill / fallback is required.
- Progressive Enhancement 2.0 by Nicholas Zakas, this is one of my eye-openers to PE
- Progressive Enhancement: What Is It and How to Use It from Smashing Magazine
UI Skills SetYou should have some understanding of typography, UI and animation concepts and can speak UI jargon fluently with your UX/UI designer fellows. (i.e: hamburger button, hero banner, the fold…)
Besides, you should be able to open a Photoshop file to get the necessary assets for your UI development as well as extract parameters (opacity, gradient, colors…) that are applicable for CSS authoring. These manual tasks may finally be replaced by auto CSS extraction with modern design tools (Photoshop CC 2014, Sketch…), but those know-hows will still benefit you as one day you are able to make some minor adjustment to the PSD without the help of designers.
In 2015, a new skill you should also get a grasp of is using a vector graphic editing tool (Illustrator, Inkscape…) to manipulate and extract vector images which are essential for scalable graphics in modern flat designs.
ConclusionThere you go! If you are a Front End rookie or a back-end-to-front-end convert, you may feel there are a lot to learn just to meet the baseline. It is indeed. Some even compare us with kind of programming masochists. But we still go for it because we enjoy making beautiful and useful UI and we feel greatly rewarded when our creations are released to the whole world to see and experience.
My 2 cents, not every programmer is suitable with the web front end path. What makes a good front end dev different from back end or full stack one, I believe, is that we are more visual sensitive, we can work with pixels painstakingly and possess some characteristics of perfectionists.
P.S:During the time I was writing this blog, Murphey published a new blog post about baseline for 2015 front end developers. I told myself not to read it until I finish this article to see how our ideas may collide or differ from one another.
I read Murphey’s post and I’m still glad I wrote this down. My target audience of this article are mostly mid-weight and below, and it aims to give you a good head start into Front End development and to collaborate better within a team. By all means, you will learn more advanced techniques through your progress with this career, but you can get away without first knowing how to write a NodeJS package or writing unit tests with Karma.
Anyway, I hope both articles can give very good insights of this career path that is quite picky of its followers, and that is very new and demanding in Viet Nam too.