6.02.20195 min


How to improve Web Development process

Check how to improve your Web Development environment with Gulp, Browserstack or Sentry to increase productivity.

How to improve Web Development process

Our web development adventure started in 2009, and since then we try to constantly improve our working process. There are several ways to achieve this. For us, this means learning from our mistakes, educating ourselves about the most recent technology and trends in web development automation, and, of course, implementing those ideas in life.

In this post, we’ll share our go-to methods to boost productivity and improve your development environment.

Widescreen Monitor Setup

Workspaces equipped with several displays increase productivity by 35.5%, according to research commissioned by Fujitsu Siemens Computers. We’ve been testing this theory in a real working environment for years. Although we didn’t calculate a benchmark performance score as the researchers did, we believe that having more than one monitor can be not only convenient but also productive. For this reason, every developer in our office is using a widescreen monitor setup and you should try it too.

Front-End Automation: Gulp + AutoReload

Imagine you don’t have to refresh your browser every time you need to save your source code file. This is exactly what AutoReload extension was made for. After installing this piece of software on your PC, you won't need to reload your browser manually to see the changes again ever.

There are a few other automation tools out there that make the development process significantly faster. You might like to check out these plugins BrowserSync, gulp-auto-reload, and gulp-livereload.  

Front-End Testing: Browserstack

When it comes to testing, Browserstack is our last resort. Being able to test the front-end of our websites and web applications across all browsers, operating systems, and mobile devices, without installing or maintaining an internal lab of virtual machines, devices or emulators is a must in the modern development process.

This is the only testing infrastructure you need, claims Browserstack’s website, and we could not agree more.

Selenium Tests + Ghost Inspector

Selenium is a nice open-source browser automation toolset. We use it for automating the testing of web applications as well as boring web-based administration tasks.

For creating and managing UI tests to check specific functionality in our website or web app, we use Ghost Inspector. These automated browser tests are running continuously, and if anything goes wrong we get a notification.

The cool thing is that Ghost Inspector has a Selenium import feature. There are two main benefits of that explained in Ghost Inspector’s blog:

“One, Ghost Inspector users now have a complete mechanism for exporting copies of their tests and importing them back into the system at a later time. And two, apart from importing Ghost Inspector tests back in, users now have the ability to import tests they've created with Selenium IDE, Selenium Builder, and other external tools”.

MacOS Shell and Advanced Commercial Software

There are many reasons Mac OS might be the best operating system to use for programmers. We use it mostly because of its Unix shell, which allows you to run programs in almost any language without using a specialized IDE.

Another advantage of using MacOS is the availability of commercial software for Mac. While Adobe Creative Suite or Sketch works perfectly on Mac OS, front-end developers could have a hard time using those same tools on Linux.

We did try to work on Windows, but there was so much cross-platform compatibility and maintenance pain that we gave up and switched to Mac.  

Cloud9 Cloud IDE

Cloud9 is a browser-based IDE with a slick and polished UI. It’s our favorite online development environment for JavaScript development. Here is what makes it so special: it is extensible and customizable as it has a very simple yet powerful plugin system. So when you extend IDE through the plugin system, you’ll be able to customize your workspace. You might want to change the syntax theme, install packages, customize key bindings, adjust project or user settings, and much more.  

Cloud9 is integrated with Github. We like how simple it is to edit and update our repos from within the IDE. We also use its collaborations feature, which works very much like Google Docs but for writing code. Developers are able to share the screen with someone else and write code simultaneously.

Sentry for Error Tracking

This awesome real-time bug reporting tool allows us to track production errors not only locally – on personal computers but also centralized in one system. So instead of waiting when users find and report our mistakes, we are able to notice the problems and deal with them in a timely manner. Find out more about Sentry features.

Zapier for Workflow Automation

Project management tools, time management tools, BitbucketZapier, notify us about important issues, so we don’t have to switch between millions of programs. We set up trigger-action rules for the majority of apps we use and it worked out amazing. For instance, we use Gmail-Slack integration to send all resumes sent to our email to our ‘HR’ channel in Slack. So all people involved in the HR process can see a new resume and take further actions.

Top Slack Integrations

Our automated workflow wouldn’t be complete without numerous Slack integrations. We’ve managed to integrate all development, bug-tracking and project management tools we use on a daily basis. Among our most important Slack integrations are such tools as Ghost Inspector, Breeze, and Bitbucket.

Productivity Bash Scripts

Another field that constantly needs improvement is command line productivity. Knowing some command line tricks makes our life so much easier. Join the gang of more productive developers by learning these 50 useful command line tools.  

We hope that you've found our write-up interesting and might gain some ideas on how to make your development process more productive.