This website uses cookies to deliver content specific to your interests. You can enable/disable cookies in your browser's settings.

Read more

17 Essential Web Developer Tools that Your Boss Expects You to Know Inside Out - Part II Visual and Collaborative

Posted  by Gosia Podzorska

Web Development is a bit like art, you need to learn how to think outside the bracket but also how to seamlessly merge the creative design with technology. Check out the second part of our developer tools guide below.

If you haven’t read the first part of this article, we suggest you check it out now, before diving deeper, in order to get the full list of essential web dev tools that are indispensable for junior web developers.


10. Colour Palette

As a web developer, it would be a smart idea to develop a sense of design aesthetics, especially if you want to work freelance. No one wants to create something that looks unattractive or unprofessional. You need to learn which colours match and which don’t. Nothing easier than grabbing a couple of handy tools that can show you the best combinations of colours within the colour palette.

Adobe Color CC

By using the Adobe Color CC we can pick a specific hue and see exactly all the other hues of a particular colour that match, it’ll help you in creating visually pleasing designs. With this tool, you could even discover an interesting mix of colours that you wouldn’t think of otherwise. If you want to check other similar sites that can help you decide on a perfect colour palette, download our ‘Developer Tools’ ebook below.

Free 'Developer Tools' E-book


11. Image Selection

We live in an image-dominated world and we need to make sure we use high-quality images in our projects, as they stand for professionalism and build considerable trust with our users. There are plenty of websites that offer free royalty images for commercial and private use. The most important is to double check the license. Is attribution required? Can we use them for commercial purposes?

We mostly use Pexels and Unsplash in our daily work but the list is much longer and it’s a good idea to source your images from lesser-known websites so that your visuals are less often replicated on other websites :). Check out the full list below!

unsplash free royalty pictures

12. Icons

As a web developer, you’ll most certainly be using various vector icons on a daily basis. The most popular web page for sourcing icons is Font Awesome.

With Flaticon you can build your own collection and export it as a font, which is quite handy. You can also export different versions of the same icon in PSD format so that it’s easily customizable.

Devicon is a really interesting platform where we can use one technology for all the icons, rather than search for images of different icons, on different websites. You can easily use the icons as a font or export the SVG code and use it directly in your project.

13. Graphics Editors

There are a couple of good graphics editors that are worth mentioning, the obvious ones are the industry standards like Photoshop and illustrator. When our graphic designer sends us a PSD file, we can easily edit in Photoshop, however, Adobe products are paid solutions. There are some free alternatives that you might consider for the start.

Photopea - is similar to Photoshop in an online and wait for it...free version! It can’t be stressed enough that it’s a bit primitive when compared to Photoshop, however, it does let you open PSD files and edit them using the online interface that you don’t have to pay for so it’s pretty useful and gets the job done. In Photopea we can also open Gimp and Sketch extensions so it’s a pretty interesting solution that shouldn’t be disregarded, especially when you’re new to coding and need to view or edit PSD files to finish a school project.

Avocode - is pretty impressive as it smooths the collaboration between teams working on the same designs. It promises a seamless transition between the work of graphic designers and web developers as it enables to open PSD and Illustrator files without the need of having those specific digital tools installed on your computer. What’s more, it can even turn specific elements into code so it’s indispensable for any up-and-coming web developers. Unfortunately it’s not free, however, you can start a free trial and test the waters before you decide to invest and purchase the full version.

14. Visualization of the Interface

There are times when you have to showcase the functionality of the interface to those that are non-technical, be it your client or your colleagues from the marketing department. In this case, you’ll need a special tool that will help visualize the product without going deep into technical bits.

That’s when InVision app comes in handy as you can upload a finished project, discuss the functionality and show the layout of the product to others. If there is anything that needs a bit of tweaking, presenting your code in inVision app will make sure that everyone is on the same page.

.

Zeplin - this particular platform can help web developers save time as it automatically generates accurate specs, assets and code snippets, directly from designs!

15. Notes

In your day to day job as a Web Developer, you’ll have plenty of larger and smaller tasks to track and complete. In order to keep your ‘to do list’ tidy and well organised, we encourage you to use specific apps that make it simple and effortless. With Dynalist you can create an account, write and store notes, add additional lists so that developers don’t forget if someone asks them to check this, do that, amend this etc. Take our word for it, it’ll undeniably increase your productivity!

If you’re a night owl and prefer to work in the evenings, you should also install F.lux that limits the emission of blue lights and consequently prevents you from straining your eyes.

16. Task Management

For even greater task management, especially when you need to collaborate with others on several projects, you should download task management tools like Trello. It’s especially useful for smaller companies as it’s free and has the basic functions of assigning the tasks, setting deadlines and marking the tasks ‘to do’, ‘in review’ or ‘completed’.

If you work for larger companies then there is a high chance you’ll need a much more powerful tool like Asana, that enables to monitor the development path of IT projects.

In large corporations, you’ll most probably work with Jira, which completely monitors the programming path. You are presented with a dashboard that gives you a clear overview of the ‘to do’, ‘in progress’, ‘code review’, and ‘done’ sections. You can make Jira even more powerful by connecting various apps like Slack for example. It’s a serious tool and a professional solution for effective teamwork.

17. Communication & Collaboration Tools

Slack - it’s one of the most popular collaboration tools, a bit similar to messenger but with the selection of dedicated channels where all the communication between teams is brought to life and where magic happens. There are plenty of slack integrations, readily available to download. You could even link giphy and spam your colleagues with cute cat gifs, just saying ;).

GSuite - the most popular toolset from Google that facilitates communication and collaboration within teams through Gmail, hangout, google docs, g drive and gives you a handy administration control to see who has access to what.

Web Developers are constantly in high demand, with JavaScript being number 1 most popular programming language used by developers according to GitHub and 14000 live vacancies for Full Stack Developers on Glassdoor in the UK. Following our guide, you’ll know exactly which tools you need to become a Web Dev Pro. Modern technology shapes our future and you can be the one responsible for its layout!

You can download our ‘Developer Tools’ ebook below, which mentions a couple of additional resources, enjoy!

Free 'Developer Tools' E-book