Expectations of Frontend developer have significantly increased in past years, and the main reasons for that is a bigger power of browsers as well as the appearance of holistic Frontend frameworks and various kinds of tools that raise the scale of opportunities to the one much higher level. A good Frontend programmer today is not somebody who knows how to create a navigation menu and popup dialogs, but it is a person that is expected to have a diverse skill set – in demands are logic and creativity, precision and flexibility.
So, what are the skills that one good frontend developer should have? What follows is a list of 20 useful tools that can help you to upgrade your existing skill set
— HTML & CSS —
#1 Responsive Design & Media Queries
The development and use of smartphones in everyday life have led to the fact that almost all websites have more visits via mobile devices than over PCs. Therefore, it has never been more important to develop a web application in an away to provide an excellent user experience on the screen of all sizes and shapes. In this respect, media queries could help us a lot to adjust different styles depending on the type of screen.
#2 Flexbox & Grid Layout Systems
Using these two layout systems significantly improves the quality of HTML code writing, saves us unnecessary duplication of elements (for each type/screen width) and contributes to the flexibility of styling the application. If this seems too complicated, there are also frameworks that make it easy to set up a grid layout, and the most popular among them is Bootstrap.
#3 CSS Preprocessors
The utilization of standard CSS to stylize applications requires a lot of repetition in writing, which is one of the bad practices in general in programming. If you, at the end of the project, decide that you don’t want the main color of the theme to be blue, but for example, green, you will have to go through the entire code manually and make changes. And as soon as you do something manually, it’s not good either from the aspect of speed or from the aspect of avoiding mistakes. This problem is solved by CSS preprocessors (SASS, LESS …) which broadly extend the functionality of standard CSS.
#4 CSS Animations
An easy and powerful way to impress visitors on your page is by using animations. CSS offers many possibilities for this – you can choose when, how, how often and with how long delay a certain animation is to take place. It is important to note that only some CSS properties are animatable.
#5 jQuery Library
#6 Having a Deep JS Foundation
#7 Local Data Storage
Databases are not the prime Frontend developer area per se, but there is an exception, which is when certain data should be stored in the user’s own browser. Why would there be a need for that tools? Let’s say that, from the aspect of user experience, it is good that he does not have every time he visits our website to type in the username and password, but it only needs to be done for the first time, after which the data is stored in its storage, to which only the user can access. Here you need to distinguish three popular storage types: localStorage, sessionStorage, and the cookies.
#8 JS Debuggers
One of the key advantages of modern browsers is that they have built-in debuggers that help us detect errors in our code by allowing us to pass through our JS code a step-by-step while creating breakpoints on the lines where we suspect we made a mistake.
#9 JS Frameworks
#10 Asynchronous Programming
Asynchronous programming represents tools which allow web applications to remain responsive even when multiple tasks are processed simultaneously. Events related to user interaction, such as filter search or mouse click, occur regardless of the standard flow of the application. Therefore, the application waits for user action and then reacts depending on it. Various techniques (promises, observables, callbacks) support the process of asynchronous programming.
#12 Packet Managers
Is it really necessary to lose a few hours for, say, making a calendar for selecting a date, when simple, ready-made solutions and tools exist on the web, that is free and can be used in a few minutes? It’s exactly where that package manager such as npm, bower or yarn, enters the scene, with their simple commands to import someone else’s code from the Internet. Of course, you should always take care of the correctness and security of the entered code, but certainly, this type of help is well-suited in certain situations.
— Design —
#13 UX Design
Good communication and planning significantly affect the quality of every business, and the development of web applications is not the exception. To make sure that we understand the client’s requirements (or even our personal requirements), it is advisable to make a wireframe (prototype) before the start of the code writing, where the basic app structure will be displayed with emphasis on the functionality and users’ needs. Creating these drawings is easier with the use of one of the many tools available on the web (Axure, UXPin …). Although the UX design does not strictly apply to the frontend, there are situations where a client expects his developer to know the basics.
#14 UI design
When we finish with wireframes and app structure, we can move to the aesthetic appearance of the application – the user interface. This design area is much more familiar to the frontend developer than the previous one, but it does not mean it is less demanding and that it requires less effort to learn the basics. UI design is a step before coding, a setup of a complete visual appearance of the future application, and it could be made by using some of the software tools that enable it (Adobe Photoshop, Sketch, GIMP …).
#15 Basic Rules of Design
For a good design you should have idea and inspiration, but in addition, it is necessary to know certain rules. What is the meaning of certain colors, how colors interact with each other, the use of lines of different shapes and thicknesses, the use of empty (negative) space, typography, symmetry and asymmetry, and the harmony of the parts are just some of the things that you must be aware of if you want to be successful in graphic design.
#16 Icons and Images
Icons are more important part of the application than it maybe seems. Apart from being good looking, they also have functional advantages. They take less space than text, so there is more room left for other things. And if you have visited a site in a foreign language, the icon can help a lot in understanding what is behind the link. For the correct use of images, you should know the advantages and disadvantages of certain formats (jpg, png, gif, svg…), as well as the rules of optimization.
— Communication —
#17 Control Versioning System
Numerous tools exist for the purpose of code versioning, but often the first association for most developers is GIT. Whether you work alone or in a team, it’s important that you keep your code on one of the software specializing in code versioning and that you have an insight into the changes that occur over time. Another significant advantage of GIT is the ability to branch code in order to make the building of the specific functionality isolated until it is finished when it can be returned to the master branch.
#18 REST Architecture
REST is an architecture that has become the standard for communication between client and server. The basis of REST is the use of HTTP protocols and its standardized operations (GET, PUT, POST, DELETE …) that allow data exchange. Another standard in this area concerns the format in which a particular data is sent from one side to another – JSON.
#19 English Language
One of the main coding standards is, regardless of the field of speech, the writing of the code in English. This is important because all programming terms are in English, most tutorials, documentation and video materials are in English, and after all, if the client does not have the same native language as you, it is expected that you will communicate in English. Therefore, if you are a programmer, there is no reason not to start learning it immediately.
#20 Text Editors
Although it is advised for all beginners in programming to use Notepad to learn the basics of programming without using shortcuts, it is absolutely necessary to use more advanced editor for serious projects, which does not only allow faster and more transparent code writing, but also checks for frequent syntax errors, offers the ability to complement the code depending on programming language used, offers element definition, helps to debug the code, and has an integrated versioning control. At the moment, the most popular frontend editors on the market are VS Code, WebStorm, Atom and Sublime Text.