Top Tools That Can Help You as a Web Developer
Depending on what you do, there are often a few tools that you use from time to time that help you in your work. Some of them can even have daily use.
Here is an organized list of the top resources I use the most while working as a web developer.
This list contains resources in the form of tools, websites and even articles.
Their order is random, based on their order that they appear in my bookmarks :)
Carbon
The first tool on this list is Carbon. As their description says, Carbon is a tool for sharing images of the source code. The main advantage is that you can share an image of a code snippet and at the same time, the URL of the page changes to reflect the code you wrote.
The following link will take you to Carbon and populate the script tab with the code from the image above.
So you can easily share the code you write in form of images and the URL to the source code as well.
ResizeImage.net
Most of the time the web apps that we develop include images as well. Usually, these images come from external sources and come at the best resolution and quality. The problem is that we can’t display the images at their original size, because it will make the page load very slow. Thus, they must be optimized before they can be used.
ReizeImage.net is a web tool that can help you achieve this. Though it has multiple options available, option number 4. Resize your image and option number 7. Optimize your image( optional ) are exactly what you need to optimize your image.
Figma
Figma is now my top choice when it comes to web design.
The fact that is free to use and it’s a web application made me give a try to it.
The rich palette of options and the ease of use with an excellent UX made me give up all other tools (Photoshop and Adobe XD) and stay with this tool.
Even though it a web application, the performances are amazing. I have never had a problem with Figma in which I lost my work due to a sudden and unexpected crash and I have never suffered from performance problems.
When it comes to web design it has everything that you can need.
Unsplash
Unsplash is no longer a new tool and I think it's safe to say that most of us already heard about it. But, almost all the pictures that I used on my websites or in my articles are from this website so it deserves its place on this list.
And for those of you who haven’t heard of this site before …
Unsplash is a photography website where you can find free photos of the best quality that you can use in your work.
But what differentiates Unsplash from other similar sites is that all the photos seem to be taken by professionals and they are all very beautiful.
Bundlephobia
If you ever want to see the cost of the npm packages that you add to your bundle, then Bundlephobia is the tool you need.
Simply type the name of the package you want to inspect or add your package.json file and this tool will show you an analysis of it.
Trello
Trello is a free web-based Kanban-style list-making application that can be used to keep track of the work that your team performs.
It’s like Jira, but smaller.
The ease of use and the good UX of this tool makes it a good choice for personal projects, but the entire suite of features that it has makes it a good choice for teams as well.
You can create a board for each project that you want to manage and then you have a UI in a Kanban board style, where you can create different cards that can be grouped in lists.
Overall, I think I used it in almost all my projects and it very useful to keep track of the work that needs to be done.
MailTester
The story of MailTester is simple: a cheap, simple and efficient way to quickly test the quality of your newsletters or individual mails.
While I was configuring my VPS to communicate properly with the mail server, I found this requirement very difficult and what made this setup so tough to achieve was that I had very few options to test the settings I was doing.
After a few days of thinking I did everything right, I saw that some of my emails were not being delivered.
Mail-tester was a developer exactly for this problem. Its working principle is simple.
A random email address is generated each time you access their webpage. You take that email address and test your system against it.
Once an email was sent to that address, MailTester will be able to analyze the message, the mail server, the sending IP… and show a detailed report of what’s configured properly and what’s not.
Box-Shadow generator and CSS Gradient generator
When it comes to CSS, there are some properties that I find very difficult to remember the syntax for. And they are box-shadow and background with a linear-gradient
If you find yourself in the same situation as me then maybe these tools will help you.
BoxShadowGenerator is a web application that allows you to interactively configure this property and at the same time, you can actually see what it will look like.
They have a tab for Gradient Generator as well, but I find CSSGradient application more useful for this job
CSS.gg
As web developers, we all know about Font Awesome. However, there is another set of icons called CSS.gg which, although not so popular, is worth a try.
It has over 700 icons all that are available in the following formats:
.css, .svg, .tsx, .fig, .xd, .json, .xml
They are pure CSS icons made only from CSS pseudo elements.
These icons are also available in Adobe XD and Figma, so you can now use the same icons you used in your design on your website as well.
Because they are pure CSS icons, they are very lightweight and take almost no space in your bundle.
While this is a plus, it can be a minus as well. The cons are that these icons are hard to resize, a simple font-size or width/height will not help you in this case.
I know this because I used these icons in one of my projects and I found this limitation myself. At first, I thought that is impossible to change the size of the icons and I wanted to drop the use them and go back to FontAwesome, but after, I found a way to resize them. The trick is to see the CSS rules for the icon you want to use and to overwrite the properties that use fixed sizes with a mixin. You can use DevTools to inspect the CSS rules or you can take a look at the source code directly.
For example, this is the overwrite that I did to control the size of a chevron icon.
The code snippet above will increase the size of all the chevron-right icons by 20%
CSS.gg is great for projects where bundle size is very important and definitely is CSS.gg is a project that worth monitor for further improvements.
Mastering Markdown
Even though I use markdown to write the Readme file for all my projects, there are still times when I simply forget the syntax. I think I needed to add over 100 links to be able to remember the syntax correctly.
That’s why I found this guide very helpful for those who use the .md syntax
Google Fonts
When it comes to embedding a font in one of my projects, Google Fonts is my first pick
You will find most of the available fonts there and you can easily download them or you can simply select the ones you want to use and the application will create an embed link for you that you can use on your page.
Code Editor pick & extensions
VS Code it’s my choice when it comes to choosing a code editor, and I don’t think that’s a surprise, because most developers use it. What I want to share on this topic is the extension that I use and make my life as a web dev way easier.
Here is a list with my top pics and a short description for each one of them
- Atom Keymap — This extension ports popular Atom keyboard shortcuts to Visual Studio Code
2. Better Comments — used to create more human-friendly comments
3. Bracket Pair Colorizer — This extension allows matching brackets to be identified with colors.
4. Color Highlight — Highlight web colors in your editor
5. env-cmd-file-syntax — It helps by highlight the key-value string in .env files (e.g. .env, .env.development and so on).
6. Live Server — Launch a local development server with a live reload feature for static & dynamic pages.
7. Material Icon Theme — Material Icons for your files
8. Peacock — Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances
Wrap up
The list that I presented in this article it’s a personal pick of tools, that I find very useful.
I’m sure that there are other ones that I simply forgot to mention, so if you have some resources that you use very often while you work as a web dev then please add them in the comments section so that we can improve this list.
