There is something very unique about IT working environment. As I have struggled throughout many kinds of work I have never experienced such a desire to share your knowledge with other people as I have right now while working in IT as a programmer. Organizing Lunch&Learn session at work is crucial for making sure that your employees are always on track and always keeping up with new things. At Pretius we just had such a pleasure when Sebastian Fituch, our FE developer, made a presentation for us called “Front-end for back-end developers“.
As I said before, new things appear in front-end technology almost every day. We had bower, then npm and now we have yarn.
Sebastian wanted to share with us his thought about those technologies to make it easier for others to make a decision. While bower is already old and doesn’t support many desired features the choice between npm and yarn might be hard for some people or might have been before 2018. Both of those tools make a great package manager. But one of the main differences between them was package-lock.json but it has been already added to npm with version 5.0 and that made it even more difficult for people to choose their tool. Plus, npm doesn’t send usage information to Facebook. This might be a dealbreaker for some people.
At the beginning, there was inline included js file. Then we merged all our files into one.
Now we merged them into one… but differently 🙂 We have grunt and gulp as task runners where grunt uses configuration over code approach while gulp code over configuration. Those approaches are the key differences and you must choose your own approaches based on your own desire and what you actually want to accomplish. There is also webpack which is a module bundler. It helps you bundle all your files.
But there is more to it. To help back-end developers improve their front-end skills and a better understanding of this technology ESLint is a dream come true. It’s the most popular linter. Completely customizable. It is capable of fixing most of the reported errors and can be added through terminal or IDE’s plugins.
What would front-end be without it’s CSS ? Thankfully we not only have CSS but also preprocessors generating CSS such as Sass, Less, Stylus and…PostCSS. Sass, Less, and Stylus are preprocessors generating CSS basing on its own syntax. They add features such as variables, nesting, and mixins, loops and functions. Post CSS is a tool that changes CSS basing on its own plugins.
When you start your own personal career as a programmer most often it will be just you and the code. When there is only one person in a project you don’t have to worry about different styles in every file. Why would you? You wrote it. It’s just safe to assume that those files will have the same advantages and disadvantages. The problem appears when you have to code within a group of developers. You need to choose one style for all the files. But how to maintain it?
One of the answers is EditorConfig. The project consists of a file format for defining coding styles and IDE’s or text editor collection of plugins that can read the file format and define styles. With this help, you don’t have to worry about several coding style approaches within one file or project.
DRY. Please DRY. Please don’t repeat yourself. Or as others may say. Don’t do something that was already done.
Great help for every developer working on front-end tasks is a library called lodash.
There aren’t many things that a computer has a problem with than tracking time. In JS Date API is very poor and manipulating with it is very hard and problematic. When you have to remember about time zones it gets even worse. That is why you should use Moment.Js and date-fns. Both of those libraries resolves mentioned problems and are very easy in use. They are well documented and can get you up and going with time problems in no time.(pun intended).
Every developer working in front-end projects and tasks has to communicate with API. Right now probably the easiest way is with using axios. Promise based HTTP client for the browser and node.js great documentation, entirely configurable. A large number of mechanism “out of the box”. Axios can save you a lot of time while working. I highly recommend that you use axios in your projects.
New frameworks keep appearing all the time. But it’s nothing to worry about. AngularJs is with us from 8 years, React 5 years and since Angular 2 years have passed. Well maintained frameworks will have new versions coming up every now and then. They will be improved and so will your project.