-4 minutes read

Front-end development has come a long way in last five or so years. From humble beginnings of HTML, CSS & vanilla flavored JS we now have HTML5, CSS3 and all the goodies JS & jQuery libraries afford us. The question now becomes what should one front-end developer know and what his arsenal consists of. Lets try and and answer that.

Get your tools ready

It would be a suicide to try and define best practices, snippets and libraries used for front-end development so I’ll just stick to the outlines.

  • HTML & CSS – it’s self-explanatory but you gotta have semantic HTML5 and basic CSS techniques (including transitions, animations and media queries) in the pocket. Throw in there SVG techniques and you will have leveled up your CSS game. CSS pre-processors like SAAS, LESS and Stylus are spiking in popularity and when you get the hang of it your CSS game will guarantee you that next-level-achievement-unlocked feeling as well as speed up your development and code specificity.
  • CANIUSE – caniuse.com – just use it, even if you are aware how a specific CSS selector works and is supported it’s always a good practice to regularly check the compatibility and implementation in most used browsers.
  • JS – jQuery is the most popular JS library and if you want to spice up your front-end interfaces with interactivity jQuery is essential for that. You don’t even need to know that much vanilla JS to write jQuery as jQuery basically shorthands raw JS code. Getting further into it, things like jQuery plugins and libraries will become a everyday thing for you. Oh,  and lets not forget JS testing!
  • AJAX – power up your site with interactivity that does not require user to refresh the page. I’m on the fence about should this be considered a basic or advanced skill. Judge for yourself, depending on the type of projects you’re usually working on.
  • PHOTOSHOP – or other graphics editing program is a must-have as you will often find yourself editing that media file that “their designer” sent you. Do not think that you will only work with pixels, Adobe Illustrator or some other application will make you cringe while editing SVGs.
  • BROWSER COMPATIBILITY – CSS grid layouts are still a thing of the future, more so than flexbox features, so you should always have in mind cross-browser compatibility, not just regarding CSS but JS in general. There is not even discussion for this, except if you throw in IE backwards compatibility but by then you can just quit your job and find one where you do not have to support IE7 in great year of 2016.
  • BACKEND GOODIES – if you are in front-end business you will probably have worked on, if not extensively, then marginally with PHP or some other language. If PHP is your poison then you will have most certainly worked with WordPress. There are a lot of pros and some cons regarding WordPress but when a quarter of all sites on world wide web are powered by it then it’s not a question of using or not using it. Developing themes and plugins with WordPress will become your second nature. Do not forget that you need to know basics of that DB/SQL stuff as well. I also suggest learning basics of Java as it will come handy on some project, no doubt about it. However, if you are by any chance extensively tangled with .NET as a front-end developer just quit your job now. Do it now.

 

  • TASK RUNNERS – We’re getting into advanced stuff, but TRs like Grunt, Gulp and Webpack (all married to inferious Node.JS) will automate and enhance your workflow. Getting the latest build of dependencies for your projects in form of NPM packages will power up your development. Things like CSS autoprefixer, CSS/JS minifiers and linters will make your job a lot easier. However, it’s not for every project. Depending on your project size it may even slow your development. Personally, I never complicate things with task runners on small projects but that’s just my personal preference.
  • WEB APPS – Angular, React & Redux, Meteor.. take your pick and make your first web app. You could argue that we’re getting in the water of JS developers now but it’s always a good to know a thing or two about how most popular JS frameworks & libraries work.
  • PROJECT MANAGEMENT – Structuring your project into meaningful and logical fashion is a skill which will evolve as you progress in your job. As always, more projects means more experience and hopefully diversity in projects which will allow you to better structure your files & folders and most importantly, time spent on individual tasks.

A front-end developer is aware

Chris Coyer once again wrote a splendid article, one in which he outlines that a front-end developer’s job is not just to build the interface from a spec but rather be involved in the whole process – be aware of design, performance, back-end, content strategy, testing and accessibility. And that’s all not including the actual job of building the interface with HTML, CSS & JS! Head over at css-tricks to read the article.

Sum it up

In conclusion, you need to have a sufficient basic knowledge of almost all the tools available but be able to, depending on the current project, expand the knowledge of specific field and integrate it in all your future projects. Fear not, for it may look like an impossible task, but you don’t need to know everything all the time. Code snippets, Stack Overflow, Google search and other tricks will always come in handy when you are stuck and don’t know how to proceed next

Front-end development is not for everyone. It’s in a constant state of flux. Technique or library that works today may not and probably will not survive in 3 or 6 months, either due to the halt of development, lack of support or simply because better or cleaner technique or library has been released. So, it’s hell, a never ending battlefield but it’s also fun, a frontier of development which will push you to your limits and make you think outside of that box, supercharging your innovation skill set.

BONUS: NEWSLETTERS

Do not think twice about it, you know nothing. At some point you will be doing newsletter layouts and if by then you haven’t had broken at least one set of keyboard and mouse you will now. Get ready to work with different newsletter delivery systems like MailChimp, CampaignMonitor or email testing tools like Litmus. Know that you will never get emails to display properly on all devices and across all screens and you will, at first, be in agony about it. Later you will learn that you have the inner strength and you will not give your soul to newsletters. Rather, you will see them as necessary evil. To completely thwart that evil you will eventually build yourself a newsletter builder app which will consist of most used and general email templates which will make your job a lot easier.