Top 20 tools every Front-end developer should know

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.

--- JavaScript ---

#5 jQuery Library

    jQuery is a very popular and potent JavaScript library that allows easy manipulation of DOM elements. It owes its popularity to the fact that the syntax itself is much more readable than classic JavaScript, so it will also suit beginners.

#6 Having a Deep JS Foundation

    JavaScript is a language whose basics are easy to learn, but by deeper learning, its complexity grows. In order to become attractive to a larger developers community, it was created to "forgive" small mistakes, and his leniency just leads to a misunderstanding of the essence of the code. Therefore, in order to understand why something in the JS does not work as expected, we need to understand its true foundations.

#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

    Frameworks are tools that entirely alter the way our code works. Their goal is to simplify and upgrade JavaScript functionality, often by replacing the complete code structure and writing design. There is a large number of JS frameworks that compete with each other for dominance in the JS world, releasing periodically new and more powerful upgrades. The most popular among them are React, Angular, and VueJS.

#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.

#11 NodeJS

NodeJS is a modern platform that allows you to use JavaScript on the server. Yes, it is now possible to make a complete application using JavaScript only. In fact, on the market, there are complete stacks based on JavaScript as a programming language and JSON as a data storage format, such as MEAN(mongo + express + angular + node) and MERN (mongo + express + react + node). The popularity of the NodeJS is on the upward path so you will not be wrong if you start reading NodeJS documentation right now.

#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.

Quantox People- Doing Front-end the Right Way

With +500 developers Quantox is known for having some of the best front-end developers in the region. With a goal to share our knowledge and teach developers a proper approach to the technologies used in front-end, Quantox is often holding meet-ups, lectures and courses and presenting the knowledge that allows us to build effective and efficient IT solutions. Do you need a front-end developer to create an amazing digital product for you? Let's Talk!