April 11th, 2024, posted in learning
by Adelina
Originally, we thought of making a list of all the tools we at UPDIVISION use to build apps. From Paint to Postman :) The idea was for everyone to see what everyone else is using, so we can work together better as a team.
After making the list, we thought it would be a good idea to share it with the web developers’ community out there. Also, if you’re just starting out on the journey to become a web developer, this list will give you a rough idea of what you’ll be using.
Our tools. At a glance.
Operating systems: Linux(Ubuntu)/Unix(Mac) (70% of the team), Windows (30% of the team)
Code Editor: Visual Studio Code, PHPStorm
Console: Git bash for Windows; Terminal for Linux/Mac
Local development environment: WampServer, Vagrant + Homestead
SSH(SCP) /FTP clients: WinScp; PuTTY; Terminal for linux/Mac
Database managers: MySQL WorkBench; PhpMyAdmin
Remote Control: TeamViewer
Versioning tools: GitLens, TortoiseMerge
Mail testing: Mail Trap
API testing: Postman
Wireframing & UML diagram generation: Google Draw, CaCoo, Moqups
Screen video recorders: Record it, IceCream Recorder, Chrome’s Nimbus
Browser extensions: Full Page Screen Capture; Wappalyzer; Vue Devtools; Form Filler; Lighthouse
Task & project management: Jira; Trello
Time management: UpYourTime
Communication: Workplace Chat (internally); Skype (externally)
Our tools. Extended Version.
Code Editor: the programmer’s bread and butter.
Our weapon of choice (for most of us, at least) is Visual Studio Code. It’s very popular, you can customize it with whatever plugins you need, and you can find plugins for anything you need. It doesn’t eat up too much of your resources, especially when compared to PHPStorm. We’ll write a full-blown article listing plugins for visual studio code, so stay tuned.
PHPStorm is programming Santa’s tiny helper looking over our shoulder as we code. It allows us to prevent errors, debug our code, and is always there giving us autocompletion and code refactoring.
Console: the programmer’s best friend when it comes to debugging code.
We use the git bash integrated with Visual Studio Code. With it, you can quickly run commands into the console directly from the editor, just a keyboard shortcut away. It’s very convenient to use: you can open several instances, you can easily navigate between open instances, you can configure any shell as the default console. And it opens directly in the editor we use.
We also work with Git bash for Windows. It comes already installed with Git, and you can open it with a right click straight from the current folder.
Local development environment: Where code is born.
We use WampServer, because it has everything you need to create a local environment for web development. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your databases. It’s easy to install, easy to use. It helps us work well together.
At other times, since we work with Laravel a lot, we use Laravel Homestead on Vagrant. Vagrant provides a simple, elegant way to manage Virtual Machines. Homestead is a pre-packaged Vagrant box that doesn’t require you to install PHP, a web server, and any other server software. The best things are that you can create a development environment that is identical to the production environment, and you can configure it any way you like because it’s a virtual machine.
SSH/FTP clients: It’s how we speak with servers.
We found WinScp gives us the best means of file transfer between a local and a remote computer. It gives us a graphical user interface, integrated text editor, integration to Windows, PuTTY and other applications. It’s very helpful since you can do background transfers (queue transfer included), you can save workspaces for each project, and it offers scripting and basic file manager functionality. We also use PuTTY for SSH connection in Windows.
For the part of the team that uses Ubuntu or Mac, they’re pretty cozy with the terminal.
Database: From schema to big data.
MySQL WorkBench is indispensable for database architects and developers. With it we design the database diagrams, and it supports all objects such as tables, views, stored procedures, triggers that make up a database. Another great thing about Workbench is that it has a built-in model-validating utility that reports any issues that might be found to the data models. The Visual SQL editor allows us to build, edit and run queries against MySQL server databases.
Some of us work with PhpMyAdmin to handle the administration of MySQL over the Web. It can be accessed directly from your browser. We use it to quickly access the databases.
Some of use also use the console for large imports, seeing logs or quicky checking permissions.
Remote Control: When we really need to sit in your chair.
We use TeamViewer to connect to remote computers, provide remote support and collaborate online.
Versioning tools: Because many developers need to work as one.
Git comes with built-in GUI tools for committing and browsing. We use quite a few Git tools, so we won’t list them all here.
- But asking around we’ve found some of us use GitLens, which works with the Git capabilities built into Visual Studio Code. It allows us to visualize code authorship at a glance and easily navigate and explore Git repositories.
- Some of us also work with TortoiseMerge, which enables us to track differences between different versions of code we wrote.
- Although it belongs to the editor category, PHPStorm has built-in VCS tools.
Mail testing: When spamming developers is a must.
For mail testing, we use Mail Trap. This is a fake server to test, view and share emails sent from development environments without spamming real customers. It’s a walk in the park to set it up, can be used for both development and staging purposes, and has built-in goodies for web developers.
API testing: From endpoint to endpoint.
For API testing, Postman gives you everything you need. It’s the most widely-used and the most useful API specification format. And it’s got the only complete API development environment, with integrated tools for every stage of the API lifecycle. We use it as a knowledge base for our APIs, it’s indispensable for our backend work, and it helps with everything from testing to debugging.
Wireframing and UML: The beginning of a beautiful app.
As you probably know if you’re a web developer, we need to generate UML (Unified Modelling Language) diagrams and create wireframes for apps before we actually sit down and start coding on them so that we know how it will work as a system. For these purposes, we tend to use different things according to what each of us is already used to, but Google Draw, Moqups, and Cacoo seem to be most popular. It’s just drawing, after all, nothing too fancy – it’s the understanding of the system behind it that counts.
Screen recorders: Bugs and Demonstrations – The movie.
We use screen video recorders to be able to send clients visual demonstrations of bugs and features of the apps we build. Just like with UML generation, the exact tool we use is up for grabs. Developers in our team are using Record It, IceCream Recorder, or browser extensions such as Chrome’s Nimbus Screenshot & Screen Video Recorder.
Browser extensions: That little extra something.
We all use them, programmers or not. But we’re not talking about adblockers. These are extensions that help us in our work.
- Chrome’s Full Page Screen Capture, well, does pretty much what it says on the box. Screen captures, like screen recorders, help us communicate to the clients what we work on.
- Wappalyzer uncovers all the technologies used on websites so we don’t have to pick them apart by ourselves.
-Also from Chrome, Vue Devtools enables us debug Vue.js apps.
- Form Filler fills all inputs in a page with dummy data.
- Google’s Lighthouse helps us audit webpages, checking things like performance and accessibility so we can improve them.
Task and Project Management Tools: A to-do list on steroids.
No matter how good your tools, no matter how big your coding mojo, at the end of the day you can’t achieve much without a task manager (and a good project manager). On the one hand, we use Jira, the complete project management tool for agile teams like ours. Its customizable scrum board helps our project managers control the workflow, create roadmaps, and make sure all of us are working in unison and are not wasting time. For the less technical side of things, Trello is a useful to-do list online platform (only more complex).
Time management tools: Because hard work takes time
On the other hand, we care so much about planning and keeping track of our work and time that we’ve built our own home-made time management tool, UpYourTime. Since we’ve been using it, we noticed an increase in our efficiency as a team. UpYourTime does a great job helping us track exactly how much each of us worked on which projects doing which tasks.
Communication: Shut up and read my messages.
We might work in the same space for most of the time, but sometimes we need to chat online a bit. Or share important work-related stuff that has to be written down. So we use Facebook’s Workplace (after moving away from Slack). It’s just like Facebook, but for businesses. Workplace Chat gives us instant messaging with colleagues and groups so we can share pictures, exchange files and send personal or group messages.
Since we work with clients on five continents, it helps if you have a way to see face to face with them. Literally. Skype is the obvious choice for all the calls we have with our clients, since we make the clients part and parcel of the entire process of building apps.
That’s about it, really. Remember, this is not meant to be an exhaustive or a definitive list. We use these specific tools because we’ve found them to be the best for our needs.
What tools are you using? What new tools should we use or what tools on the list do you think people should stop using? We’re keen to take in all your opinions.
