Nowadays, web development is a job that you love and hate at the same time. This field evolves so fast, that the huge amount of new tools that are made available to you every day is enough to make you dizzy. The way we build websites now differs greatly from what it was just a few years ago. I feel like the below image, created by Kamran Ahmed, best illustrates this level of complexity, and reflects the training path of a front-end developer in 2019.

If we do not devote enough time to learning new technologies and choosing proper tools, it might turn out we’re trying to “dig a tunnel under Mordor with a screwdriver”.

<a href="https://chop-chop.org/how-i-became-a-web-developer/" target="_blank" rel="noreferrer noopener">Modern web developer</a> should be able first and foremost to use the solutions created by those that came before them. The times where most of the web was based on and <code>table</code> and, gifs constituted majority of the content, are long gone. Implementing a modern website is much more demanding. Luckily, we also have a number of libraries, frameworks, scripts, snippets and other solutions at our disposal, to help us create a site that is up to today’s standards. So much so, that it’s impossible to familiarize yourself with all of these technologies. A good developer should then first and foremost be able to skillfully analyze a problem, and choose a suitable solution.

Styling has gone a long way from a thousands-lines-long <code>style.css</code> file to its current format. I am talking of course about preprocessors, which enable us to widen the possibilities of the CSS language by a lot. They allow us to use advanced logic in stylesheets, e.g. variables, nesting, inheritance, mixins, functions and mathematical operations. We also have a possibility to divide the code into smaller modules, which makes it more readable and easier to debug. Preprocessors have their own syntax, which is then compiled to the CSS format that browsers can understand. Right now the most popular preprocessors are Sass, Less and Stylus.

Good old HTML. For many people it is a question of debate whether it should even be considered a programming language since it is made up of tags only. In itself HTML is quite limited, but here we can use the help of so-called template engines. <a href="https://mozilla.github.io/nunjucks/" target="_blank" rel="noreferrer noopener">NunJucks</a>, <a href="https://pugjs.org/api/getting-started.html" target="_blank" rel="noreferrer noopener">Pug</a> and <a href="http://handlebarsjs.com/" target="_blank" rel="noreferrer noopener">Handlebars</a> are some of the more popular, but I assure you there are many many more. In my opinion, the most important feature they introduce is modularity, which increases the reusability of code. If you’ve never used a template engine, just imagine that you could use loops, conditional operators, reusable blocks and layouts, module imports, module imports or iterating over JSON data. Sounds great, right? An interesting and less challenging alternative for template engines is using <a href="https://github.com/posthtml/posthtml" target="_blank" rel="noreferrer noopener">PostHTML</a>. This tool expands the possibilities of HTML, without forcing you to learn new syntax.

JavaScript plays a huge role in modern web development. Back in the day the developer was a sort of a one-man army - today a more demanding market means it is impossible to be good at everything, and specialists are more desired. JS Developer, Frontend Engineer or JavaScript Ninja are just a few of the positions for which companies are searching candidates. Web browsers are having a hard time keeping up with the new developments in JavaScript. To use cutting-edge technologies, we need a tool that will transpile the code so that it’s readable for older browsers. Here I mean of course <a href="https://babeljs.io/" target="_blank" rel="noreferrer noopener">BabelJS</a>.

JavaScript allows us to create a dev environment and automate many processes (Gulp/Grunt). It saves time on all of the actions which earlier on needed to be carried out manually. Transpiling (Babel), bundling (Webpack, Parcel), unit and integration tests (Jest, Mocha, Jasmine, Cypress), code consistency (JSLint, JSHint, ESLint), as well as building the application on the server using one command - all of this is made possible thanks to JS.

While writing complex scripts, we have tens of thousands of packages created by developers from all around the globe available on <a href="https://www.npmjs.com/" target="_blank" rel="noreferrer noopener">npmjs</a>.

When talking about JavaScript, it would be impossible not to mention frameworks and libraries which help us achieve fantastic results. React, Angular and Vue are technologies that help us create very complex and optimized UI. Those technologies were used by companies such as Facebook, Alibaba, Netflix, Yahoo, Instagram, PayPal, Google to create some of their applications.

The above technologies are just the tip of the iceberg when it comes to web development. Back in the day, everything was simpler but not necessarily better. The tools we now have at our fingertips make the development process faster and easier. Developers do not have to waste time reinventing the wheel and instead focus on implementing new features for the application. <strong>Choosing these tools should always come from a good understanding of the project and clients’ needs.</strong>

Here at Chop-Chop, we make sure to use the right technologies for each project. We believe that this is key to providing well-optimized, quality products. If you would like to see firsthand how we do this, do not hesitate to <a href="https://chop-chop.org/contact" target="_blank" rel="noreferrer noopener">drop us a line</a>.