Essential frontend development skills and tools at itMedia

You know that feeling when you click something on the web, something cool happens and you think to yourself “Wow, look at that”? Well, every magic moment on the web is a product of a front end developer. That is the person who makes the design alive by coding it using coding languages.

Front end development is a process, and it includes a whole set of skills and tools that make that process easier and more efficient. This is especially important when working in a team, where multiple people work on the same project. Everything should be consistent and easy to understand.

Front end development is not possible without primary skills like HTML, CSS and JavaScript. 

In order to write better and easier-to-understand code, we use tools that allow us to use multiple modules and components. We rather create several files with less code, than one large file with thousands of lines of code which no one can read or understand. 

CSS preprocessors

We use Sass to speed up CSS coding. A CSS preprocessor adds extra functionality to CSS and keeps our CSS scalable and easier to work with. With the variables and mixins, Sass lets us create reusable code which we can use on multiple projects.

CSS frameworks

Speaking of CSS, the good people created a lot of CSS frameworks. Basically, they are pre-built libraries that contain most necessary styles, for example for navigation, buttons, forms, cards etc., and are already intended to ease responsive design. We mostly use Bootstrap.

Webpack

At its core, webpack is a static module bundler for modern JavaScript applications. It allows us to create modular JavaScript code and minifies all of our .js and .scss files into one file, which makes our apps compact and the lightest as possible. 

JavaScript frameworks

With apps being bigger and bigger, and customers’ demands more complex, we needed to start using React and Angular, in order to create modular and scalable web applications. These frameworks speed up development by giving us a jumpstart, and minimize how much from-scratch coding we have to do.

APIs

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API. So do we. For some apps, we use existing Apps, including the APIs from Instagram and Facebook, but also our own, created by our backend team.

Testing and debugging

No matter what you do, at some point you have to make a mistake. Such mistakes in development are called bugs, and we find them by testing. In itMedia, we prefer manual testing. The most used tool for debugging on the frontend is Chrome Developer Tools.

Git and version control

It is important to track versions and every code change over time. Git is a main tool for this, and it allows us to revert code if we mess something up. Also, working in teams means a lot of communication, fun, working together, but on the other side, the “colliding” is very possible and it happens. When two or more people work on the same file, overlapping could occur and Git also helps us to merge the code without affecting the other team member’s work.

To conclude, front end development is fun and always interesting. It’s great that we have tools that help us focus on the code and functionality. We’re always looking for the new technologies and solutions which can make our development process easier and more efficient.