Front-end ecosystem is evolving rapidly with new libraries and frameworks released on a hectic pace. Developers need to adopt new technologies and keep their skillset up to date. Mastering one tool might be enough for a given task, but mastering the core principles of front-end development gives tools to adopt new technologies faster and with more confidence. Not forgetting critical reviewing of such trends.
My path towards front-end development
I started to really get into front-end web development around 2010 when I was working with PHP CMSs. Browsers were a mess and didn’t work with same set of standards. We used libraries like jQuery, Prototype.js and underscore etc. to achieve cross-browser functionality when implementing interactive or dynamic features to websites.
I started as a software designer with heavy lean towards front-end in early 2014 at Solita.
Now that I’ve been interviewing candidates from a variety of backgrounds, I find that some of them are more-or-less in the same situation that I was. Eager to learn and with some experience, but lack in some fundamental skills. Some have fiddled with React, Vue or Angular and managed to piece together a decent demo. But questions like “Why did you use the framework x?”, “What was the problem that you solved with the library y” or asking how one would implement a bundle discount feature for shopping cart are causing some headache to candidates.
These are my selected topics for developers focusing on front-end development and applying to work with us.
- Clean Code Book
Browsers are your runtime
Understanding performance and tools for optimization are fundamental skills for a front-end developer. When web applications grow, and more business logic is handled on the client side, we want to make sure our applications are loading fast, have 60fps animations and work properly also on devices and platforms that have lower computing power. Low speed networks are also to be considered. Especially when developing applications locally or with high speed networks, one must also consider low speed mobile networks.
Throwing some styles to make your application or website look fancy is fairly trivial thing. But what about when there’s five developers and the application is a large-scale single page application? Or it might be a collection of components from different sources? There are plenty of different paradigms to solve these problems, some of them better than others, depending on whom you ask.
UI libraries tend to come with preferred or default way of doing styling, but it might be worth the time to evaluate if that really suits your needs. Should you do global styling or component-based styling? What does cascading really mean in the context of stylesheets?
Even though you would end up using css-modules or some other technique in your app, it’s fundamental to understand how cascading, or in other words, priority scheme of styles really works. It will help you in the future. As well as learning the basics of collapsing margins, the box-model and so on. Then get into the more advanced features like flexbox and css-grids.
HTML is more than just markup
HTML5 was a huge step towards more standardized and semantic markup. With HTML5 we can improve accessibility with semantically correct markup. There are actually 124 HTML elements in the standard.
Screen readers understand semantically correct markup pretty well. Users with eg. vision impairment needs to have a decent user experience regardless of their condition. Especially projects for public sector have requirements to meet accessibility standards set by EU law. Familiarize yourself with the standards and you’re good to jump into a project and learn more by doing.
- Web Content Accessibility Guidelines (WCAG) Overview
- Accessible Rich Internet Applications (ARIA)
- Web Accessibility Policy
Learn the tools
Most of us working with front-end also need to think about building our application. For me it’s often webpack and npm scripts, some might use Parcel or do some other magic. When our applications grow, we need to start thinking about code splitting, tree-shaking and other common performance concerns. Often you don’t need to be hacking the webpack configs on a daily basis, but when you do, it’s good to know what you’re about to do.
When you have your build tools configured to get your code transpiled, scripts bundled, styles transformed, everything optimized, it’s great. Then you need to deploy your application. Take a look into the basics of continuous integration (CI), meaning what happens when you push your code to remote repository. You most likely need to build production builds in the CI pipeline. DevOps people specialize in these matters, but knowing and understanding the fundamentals won’t hurt.
Building modern, reliable web applications requires testing. In the backend, testing is business as usual, but still there are loads of front-end projects that lack tests all together. When more and more logic is on the front-end side of the application it becomes crucial to be able to trust that the application works as intended. It doesn’t just give you the ease of mind that your code is working as you intended, but it also helps you code better (opinionated view). It challenges your own solutions and, at least for me, encourages me to create simpler functions and structures. Resulting usually in pure functions.
I would say that the job description of a front-end developer is varying and there are maybe more aspects in the job than one might guess. Front-end developer doesn’t need to be expert in all the above subjects, but it certainly helps to have some sense of each. There’s a great amount of different kind of roles for front-end developers at Solita, and its adaptable position. Dive deep and apply to work with us!
Writer is Solitas experienced front-end developer Henri Kontio who is active, besides in software development, with developer candidate interviews.
Read more about the technologies that we use and how we use them from our developer blog dev.solita.fi.