10 insights I wish I had known as a junior full-stack developer
Tags: fullstack, productivity, angular, startup
Published: 2019-12-06 14:32:25


## 10 insights I wish I had known as a junior full-stack developer

At Sensivo, we constantly try to improve our work, work methods, and work surroundings. Today I will share the top 10 hacks/tools that we use every day. **Let’s jump right into it.**

![](https://cdn-images-1.medium.com/max/2000/0*Ev4ZAYggPrQ4xGV8)

## 1. Be organized

![](https://cdn-images-1.medium.com/max/3200/0*Avh1So5GN0IPXt2K)

You can build millions of features, but don’t forget about two terms:

**Efficiency** and **effectiveness**. **Efficiency** is doing things right; **effectiveness** is doing the right things. In our team, we use **Trello** as a tool for project management, but it’s actually doesn’t matter which tool you choose. The golden rule with any project management tool is consistency. It is like going to the gym, should be done regularly.

## **2. Spend more time on tooling**

![](https://cdn-images-1.medium.com/max/3200/0*k_HvF_2VEN-uC-GL)

20 years ago it was cool to write your website in notepad, but not so cool nowadays. Our most important resource is time. Use it wisely.

For our [MEAN](https://en.wikipedia.org/wiki/MEAN_%28software_bundle%29) stack, we are using: **VScode** as IDE. This **IDE is great** but the extensions are awesome:

 1. TSlint/JSlint

 2. Code Spell Checker

 3. Auto close tag

 4. DotEnv

 5. Prettier Code Formatter

 6. Beautify

 7. Debugger for Chrome

 8. Angular 8 Snippets / For React or Vue

 9. Auto Import

 10. Auto Rename Tag

 11. CodeMetrics

 12. Git History

 13. GitLens — Git supercharged

 14. npm

 15. Paste JSON as Code

 16. SCSS Formatter

 17. SFTP

 18. TODO Highlight

 19. Trailing Spaces

## 3. Tooling outside of IDE

![](https://cdn-images-1.medium.com/max/3200/0*Fg4B3tG9HGm0RWmA)

Coding is just a part of the full-stack journey. Here are some tools to speed up our work:

 1. [https://zeplin.io/](https://zeplin.io/) — Speed up your process from **sketch** to **HTML/CSS**

 2. [https://squoosh.app/](https://squoosh.app/) — Decrease the size of all images on your website/app

 3. [https://bundlephobia.com/](https://www.youtube.com/redirect?redir_token=ERLbJ6YQRYrQ3ZjRv67VluDNNk18MTU3NDc5ODQyNkAxNTc0NzEyMDI2&q=https%3A%2F%2Fbundlephobia.com%2F&stzid=UgxSHpxnGB0juw-xdht4AaABAg&event=comments) — Keep bundle small, but don’t get crazy. Business needs — first

 4. [Postman ](https://www.getpostman.com/)— testing your API and auto-documentation

 5. Chrome extension such as **VisBug**, **WhatFont**, **Ruler Measurement**, **Full Page Screen Capture**

 6. **Lighthouse** / **Performance** — use only fonts that you need, compress images, enable **gzip** and all other things that will boost your site speed

![](https://cdn-images-1.medium.com/max/2660/0*BmYq5B-UV8rB2o3y)

## 4. Security

![](https://cdn-images-1.medium.com/max/3200/0*QUXzANRF_qNDAONc)

Nowadays — security is a hot topic. Let’s see what we have to assist us in that area:

 1. [Detectify](https://detectify.com/) — automation security test

 2. [https://observatory.mozilla.org/](https://observatory.mozilla.org/) — a great tool to check your site

 3. [**OWASP top 10 security risks**.](https://blog.sucuri.net/2019/01/owasp-top-10-security-risks-part-v.html)

 4. [Tool for generating ‘safe’ config for your Nginx](https://www.digitalocean.com/community/tools/nginx)

 5. Npm audition — use libraries wisely

 6. Don’t trust input from frontend

 7. Two-step authentication is always better than one

 8. Force user to use strong passwords

 9. Data protection at rest/In Motion

 10. Access Control/ Role-Based-Access-Role

 11. Disaster recovery

 12. Backups

 13. GDPR / HIPAA compliance

 14. 100% of breach protection? Nope, it’s about risks and costs

## 5. Hardware and how we work

![](https://cdn-images-1.medium.com/max/2000/0*d_MWxTIDU_xsRx9K)

Your **computer**, **monitor**, **mouse**, **working space** — with all of these things you interact most of your day time. It is a good idea to invest a little bit in your professional tools.

***What we use:***

 1. Fast laptops and external monitors. I am using a DELL **laptop with i7/ 16 GB RAM**

 2. Headphones with noise cancellation for better focus, like **Bose Quiet Comfort.**

 3. I found that working standing some part of the day works pretty well for me, my back and neck. For sure standing all day can be challenging, however, the mix of standing and sitting position works perfectly well

 4. Space between laptop and surface. Get some **fresh air** into your laptop fan

 5. **Hot Module Replacement** in an angular, **auto-page refresh**, **auto import**, **auto fix**, **prettier on save**. All things that can increase the speed of development and be automated

 6. Avoid distractions. On average it takes 10 minutes to get back into the ‘**flow**’ of peak performance. Turn the phone off, Switch Slack, and other chats to **‘do not disturb mode’.** For some developers, music can keep you in flow for a long time. Try to achieve and stay in flow for an hour, then stand up for 5–10 minutes for a small break, check social networks, do a small exercise or take a walk and then go back.

## 6. What about Code management?

Code is basically what you produce every day, let’s see how we can improve here :

 1. **Git** — nowadays must have

 2. [Clean message commit style](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-guidelines) — learn from Angular team

 3. **CI/CD** — automated integration and delivery processes

 4. Extensions for **VSCode** such as **CodeMetrics/TSLint/Prettier** — let’s keep our code clean and easy to read

 5. Look at the best practices in your environment. Good article for [Angular](https://itnext.io/clean-code-checklist-in-angular-%EF%B8%8F-10d4db877f74)

 6. Don’t forget about the huge complete solutions at [github.com](https://github.com/) and[ npmjs.com](https://www.npmjs.com/). Choose wisely, look at the **list of contributors**, **starts**, **issues, date of the last commit**, is it has a passed test badge.

## 7. Are you business-friendly? What about soft skills?

We are trying to build things to solve real business needs first. Not too many optimizations at the start. If the feature works, when we can optimize/refactor, test (if you are not in TDD), and add documentation on it.

Need to build **Landing Page**? Perhaps an online site configurator is enough and it’s no need to build SPA with State Management with 100% test coverage. The right tool for the concrete task.

No matter how smart you are, be **friendly** to other people with different experiences. Sometimes it can be destructive to hire the **brilliant geek** into the team.

![](https://cdn-images-1.medium.com/max/3072/0*W3-91-K9fTfttpUS)

## 8. What is your source of information?

Keep yourself updated about the industry. The new version of Angular? How can we improve our efficiency? This section is really personal, but I will share what is in my channels:

***Youtube:***

 1. [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA/videos)

 2. [Traversy Media](https://www.youtube.com/channel/UCtxCXg-UvSnTKPOzLH4wJaQ/videos)

 3. [Coding Tech](https://www.youtube.com/channel/UCtxCXg-UvSnTKPOzLH4wJaQ/videos)

 4. [UI/UX](https://www.youtube.com/user/JesseAtomic)

 5. [Google Developers](https://www.youtube.com/user/GoogleDevelopers)

 6. [Google Chrome Developers](https://www.youtube.com/user/ChromeDevelopers/videos)

 7. [Academind](https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w)

***Podcasts:***

 1. Codepen Radio

 2. Syntax

***Medium.***

 1. [https://medium.com/@jeffdelaney](https://medium.com/@jeffdelaney)

 2. [https://medium.com/@citizenblr](https://medium.com/@citizenblr)

 3. [https://medium.com/@wesgrimes](https://medium.com/@wesgrimes)

***Books and official docs of libs***

In my experience, these sources are unfortunately neglected.

Really good [article](https://medium.com/datadriveninvestor/must-read-books-for-software-developers-e25e47c46037) about 'must have' books for software developer 

I also found [https://www.goodreads.com/](https://www.goodreads.com/) where you can organize your readings and see what other people read in your circle
 
## 9. Server technologies and DB

![](https://cdn-images-1.medium.com/max/2000/0*v2iregfM2GJVuaFT)

Even though full-stack has become more frontend orientated, with tools like [Firebase](https://firebase.google.com/), [Nhost](https://nhost.io/) (Graphql), [AWS lambda](https://aws.amazon.com/lambda/), it’s still good to know your backend stuff. Here is what we using:

 1. One of backend language and framework: **Laravel/PHP**, **Nodejs/Express**, **Python/Flask** or **.Net/Java** depend on your skills and project requirements

 2. **Putty/Terminal** to connect via SSH to a remote server + **WinScp** for file transferring

 3. **SQL/NoSQL DB** and when use one other another

 4. **Redis** or **Memcached**

 5. **Unix** basic commands/ **crontab**

 6. **Vim/Vi** — for file editing or advance coding :w!

 7. **Git** commands

 8. **Telegram bots** for notification

 9. **Virtual machines** / **Docker containers**

## 10. Be open for discussion

Fullstack is a hot topic, and **new libraries**, **extensions**, and **best practices** appear everyday. I would like to invite you to the discussion in the comment section below, share your hacks, tools or tips. ✌

*p.s*
It's my first experience writing an article here.

In the [next article](https://dev.to/skobak/what-have-i-learned-from-5-startups-failures-2paf) I would like to share insights about building own startup as a full stack developer, please don't hesitate to 💖 or share - that is really good motivation✌