Full Stack Developer Tools You Should Know About

Hello Javascript Today readers!

Greetings from the sunny side of Mexico! This is Goktug Erol from Javascript Today and I’m super excited about sharing the tools I use when I develop some awesome stuff. As developers, our main arsenal is the programming languages, frameworks, and libraries we use.

And everyone can have a different set-up for their development environment but we all know that using some external tools is crucial. Not only it makes our job easier but also faster.

For companies, there are lots of great stuff available and most of the time you get a great premium service with paid plans, especially for hosting, DevOps tools and cloud services.

But if you are a solo developer or even if you work in a company environment but you’re looking to improve your productivity, you might be interested in getting some free tools available around the internet.

Personally, when I code, I like to focus on coding and not procrastinate with stuff that distracts me. I don’t like to lose my valuable time when there are a lot of things need to be done in my projects.

So as a full-stack developer, I would like to share some of the tools I use when I’m coding. Some of these tools even let you push your app to production. In my future posts, I will dig deeper into the use of some cloud solutions I mention here.

You can use these tools to make your job faster and easier even if you’re working in a company, if you do a side project or if you run your own software business. I have lots of tools that I use and they help me a lot. So I separated them as Frontend, Backend and Software Design Tools.

Frontend Tools

1. CSS Glass

You may want to add a glass effect to your CSS boxes. This is something you can easily do / learn and you can code yourself. But why to spend lots of time doing this when you have to do it and give your time to completing some more complex tasks?

This webpage helps you to get your glass box ready. You just need to customize it according to your needs, when you configure, you just need to copy the code it gives and add it to the CSS file.

You can play around, but for a fast test, why don’t you just create an <h1> tag, add a class, and then add the code this site gives to see how it works?

After implementing the code, you can customize it more by changing parameters or adding new parameters. The size automatically adjusts according to text size so you don’t even need to worry about width or height.

2. Angry Tools

Angry tools offers lots of features that helps you to save time for big projects. It has lots of features to choose from.

You just need to set-up what you want to and let angry tools to handle the rest. Once you’re done, just copy the code and paste it in your style file.

3. Animista

Everyone loves animations and in today’s web industry, making responsive and attractive animations with awesome user interface design to give the users an experience where they motivate to use your website/app again is a requirement, not an option.

CSS is an endless world. People do amazing things using plain CSS and you can even use SASS or Tailwind to make it even better.

But you can also use Animista to handle some stuff.

Animista helps developers to create some animations, you can visually make an animation using their web interface and get it as a code to implement in your style files.

It’s totally free. You can create your animations and when you’re done, just click the curly brackets on the right side of the page to get your code.

When you click the curly brackets, you get your code and just paste it into your style file.

And done. Easy peasy, you didn’t have to lose time coding and testing for a simple animation. Now imagine you work on a project where it requires 200 animated objects and all animated in a different way. You can code the same thing without using this tool. But when you can get the job done in a faster way with shortcuts, why to choose the long path?

If you like the app you can support the developer by buying him a coffee. We are not affiliated with the creator/s of Animista. I just like the tool and share it with our readers.

4. LOREM PICSUM

We all know about Lorem Ipsum. (And here’s a pro tip. If you type lorem500 and click enter VSCode gives you lorem ipsum text with 500 characters, if you type lorem30 it will give you a text with 30 characters and so on).

Lorem Picsum is a project is similar but for images.

You don’t need to do a google search to find random images when you are designing the structure of your project, setting up margins and boxes. You can just use this website to get random images according to your need.

It has grayscale, blur, random static, and specific image options. Why to use this website if you can use others? Well here’s the deal with an example.

Let’s get a grayscale image from this website:

https://i.picsum.photos/id/434/200/300.jpg

You see that 200 and 300? it’s the height and width of the image and you can add whatever value you need. It gives you the random image in the size you want, you see how it looks and then you just copy and paste it in your HTML.

https://i.picsum.photos/id/237/200/300.jpg

You can also change id to get a different image from their library.

Simple and powerful tool.

5. Bootstrap Components

You can use pre-made bootstrap components like navbar, footer buttons, cards etc to get a fast components for your web project. They have wide variety of options to choose.

Software Design Tools

1. Diagrams

Diagrams is a free diagram tool and you don’t even need to create an account!

It helps you create diagrams for your software design documentation. Then you can download it locally to your computer or sync it with your cloud.

2. Whimsical

Whimsical is another amazing tool that you can use to design your project. You can create different folders for each part of your project and it comes with lots of handy tools you can use.

Backend Tools

1. Mailtrap

Mailtrap offers an API that you can use to test your authentication components like email verification, confirmation emails for new users, password reset emails etc. You can redirect your authentication methods to the API and see the emails.

It’s free for testing in the sandbox. You need a paid plan for the production API.

2. Lighthouse by Google

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

3. Render

Render offers free hosting and free web services for your web apps. You can easily deploy your apps without paying a single cent. It’s awesome for testing your apps and you can even connect your custom domain. You can connect your app directly from your GitHub repo.

Render has support for:

• Express (Node.js)
• Ruby on Rails
• Django (Python)
• Gin (Go)
• Phoenix (Elixir)
• Rocket (Rust)
• Laravel (PHP)

4. Digital Ocean

Digital Ocean is my favorite so far. It is super easy to use, and it offers lots of features for free.

Paid plans are not expensive and they give amazing customer service with a great community. You can deploy your app directly from your GitHub repo. They even give you free trial so you can also test premium features without paying.

Soon, I will write about the comprehensive use of Digital Ocean so stay tuned!

5. MongoDB

MongoDB is another amazing tool that I use all the time. It offers free solutions as well as paid plans. But most importantly, MongoDB stands for its extremely easy-to-use Database. I love MongoDB for it’s developer-friendly solutions and easy & fast code implementation.

These are some of my favorite tools I use to improve productivity and speed in development.

What are your favorite tools? Let me know in the comments down below!