Web Development Environment: What Tools Do We Use?
Every developer has their own set of applications, known as their web development environment, that they like to use. We would like to give you an insight into the tools that we use to build our client’s websites. We will also list some alternatives that other web developers use for you to try.
Web Developer Environment
Although we use every browser for testing our client’s websites, we do the majority of our work on Google Chrome. As we operate on windows based machines we need to use a mac to test our website’s on Safari. If you use a Mac, however, you should be able to use a virtual machine to view your websites on other browsers.
Google Chrome has hundreds of extensions that you can add to the browser to assist you. Our web development environment wouldn’t be complete without these additions.
ColorZilla: This tool allows you to highlight any element on a web page and view its colour code.
PageRuler: You can use this tool to check measurements between elements on a website.
FlowTime: FlowTime allows us to be more productive by working a set amount of time before taking a break.
EmmetReview: This extension allows us to view the website’s we build at different breakpoints. Removing the need to test on every
WhatFont: Occasionally while browsing the internet we’ll come across a font we really like. Using WhatFont we can tell what that font is.
Baseliner for Chrome: This tool is great for both designers and developers. It allows you to apply horizontal rules on top of your website to check the vertical rhythm of your design.
Wappalyzer: This awesome tool allows you to see which web development languages websites are using.
Most of these extensions will be available in other browsers. If they don’t have the exact extensions listed here it is likely that there will be something similar.
Web Developer IDE
When I first started to learn web development I used windows notepad to code my websites. Although I’ve moved on since then, I’d still recommend it to aspiring developers. These days, we use Brackets by Adobe. It’s not the most popular IDE on the market but after playing around with a few others, it is the one we feel most comfortable with.
Extensions for Brackets:
Brackets is great on it own but there are a few extensions that make it even greater.
AutoPrefixer: This tool automatically adds browser prefixes to your code saving you time.
Emmet: The same people that make Emmet Review also make this brackets extension. It allows you to rapidly write HTML and CSS using shortcuts.
Indent Guides: This tool simply adds indent guides to your IDE. This makes it easier to keep track of opening and closing tags.
MonoKai Dark Soda: This is a theme for brackets that we feel is easier on the eye than the standard brackets theme.
Brackets Tree Icons: This tool adds the language icons to the file tree. This allows us to change between different file types more quickly.
Again these extensions or similar will be available for other IDEs
CSS Preprocessor & Compiler
Although CSS is catching up and in my view will eventually make preprocessors redundant, it’s not quite there yet. At Digital Punks, we use SCSS to speed up our process. It is very easy to use and understand.
Prepros is a preprocessor compiler. It is free to use indefinitely but you will receive a pop-up message every time you start that program if you don’t pay. There are other free preprocessors available such as Compass.
When building websites for a client that has a CMS system we need to use a local server to allow us to run PHP. For this task, we use XXAMP as part of our web development environment. It allows us to render PHP, set up databases and run a local server.
Bitnami for XXAMP
Bitnami for XXAMP allows us to install a local version of WordPress so that we can build websites for our clients using the WordPress CMS.
If you have any questions or would like help setting up your web development environment get in touch. We will be happy to assist you in any way we can.