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.

1. Be organized

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

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.

Four of our MEAN 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

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

1. https://zeplin.io/ — Speed up your process from sketch to HTML/CSS
2. https://squoosh.app/ — Decrease size of all images on your website/app
3. https://bundlephobia.com/ — Keep bundle small, but don’t get crazy. Business needs — first
4. Postman — 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

4. Security

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

1. Detectify — automation security test
2. https://observatory.mozilla.org/ — a great tool to check your site
3. OWASP top 10 security risks.
4. Tool for generating ‘safe’ config for your 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 / Hippa compliance
14. 100% of breach protection? Nope, it’s about risks and costs

5. Hardware and how we work

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. Be careful with destructors. 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 — 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
6. Don’t forget about the huge complete solutions at github.com and 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.

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
2. Traversy Media
3. Coding Tech
4. UI/UX
5. Goolge Developers
6. Google Chrome Developers
7. Academind

Podcasts:

1. Codepen Radio
2. Syntax

Medium.

1. https://medium.com/@jeffdelaney
2. https://medium.com/@citizenblr
3. https://medium.com/@wesgrimes

Books and official docs of libs

In my experience, these sources are unfortunately neglected.

9. Server technologies and DB

Even though full-stack has become more frontend orientated, with tools like Firebase, Nhost (graphql), AWS 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 fast editing configs
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. ✌