Part 1 – Primer: Simple Prepros GUI Based Toolbox
Part 2 – Primer: NPM Based Toolbox
Part 3 – Demonstration: NPM Based Toolbox and Visual Studio
Core Capabilities Provided by Environment
This toolset is for people who want to:
- collaborate with other team members
- author/edit web artifacts
- build/deploy optimized versions of those artifacts
- leverage popular web components and frameworks
The environment is composed of the following types of tools:
- Web browser
- Version control tool for versioning and sharing work with your fellow team members
- Graphics editing and authoring tools
- Package management tool for acquiring/installing components built and created by the WWW development community
- Task runner tool for performing some of the routine tasks needed for preprocessing, optimizing and deploying your website artifacts
- Scaffolding tool for kickstarting projects baed upon a library of project setup recipes
The Quick Toolset
If you are looking for a quick start, and a less command-line oriented toolset, then you could start with a decent text editor, with version control facilities (i.e. something like ATOM or Sublime), a GUI driven tool like Prepros to handle your package management, and task running. Lastly, of course you will need a web browser to view your website.
Chrome is the free web browser built by Google. There are of course many web browsers you can use. I use chrome the most because it runs on several operating systems and has a good set of developer tools built into for debugging your website.
ATOM is a free editor built by the people at Github. In addition to being free, and offering lots of features for working with most of the types of artifacts you are likely to want to edit, it also comes with the Git version control software already integrated into it.
ATOM is built using the same technologies as described by this article. Therefore you can in theory extend it yourself using your website development skills. Many developers have done exactly that and so there is a extensive ecosystem of plugins available to extend it.
Prepos is a package management and task runner packaged into a GUI based tool. It’s not free, but it’s very reasonably priced (less than $30 USD) even for the individual developer. You can’t do everything with it that you can with the command line tools I’ll describe below, but it’s a good alternative for relatively simple projects. It’s available on both Windows and Mac platforms.
The Professional Toolset (Built on NPM)
This section lists the tools I’d recommend as a starting point for a professional website developer in addition to the ones listed in the previous section. The theme of this section is leveraging the NPM eco-system. It’s demonstrated in the “Primer: NPM Based Toolkit” at the top of this article. It’s followed by a demonstration video of using NPM tools along with a Visual Studio project.
NPM is a command-line based package management tool. Many of the developers who build components for the web use NPM to package and share their components. Installing NPM enables you to easily download and manage most of the components you’re likely to be using to build a website.
As mentioned earlier the theme of this development environment is leveraging the NPM eco-system.
Grunt and Webpack are two other popular tools in this space. Grunt is a popular alternative to Gulp and the functionality of the two tools is very similar. Webpack’s functionality overlaps significantly with that of Gulp, but it can also be integrated with Gulp to simplify certain types of tasks.
Yoeman is a command-line based scaffolding tool which is used to kickstart web application projects. With one command it can be used to quickly setup a project directory structure and gulp file configuration for building/deploying the project.
It’s not an essential tool, but I recommend using it to quickly setup a simple web application project and to test/demonstrate that your development environment is functioning properly. It can also be an interesting source of recipes to see how other teams setup their web development projects.
Adobe Photoshop and Adobe Illustrator
Adobe Photoshop and Adobe Illustrator are certainly the most popular tools used for graphics creation and editing by professionals.
Affinity Photo and Affinity Designer (alternative)
I personally use Affinity Photo and Affinity Designer for my graphical creation and editing work. They’re less expensive than the Adobe tools and I found the learning curve less intimidating. Although they offer a lot of functionality, and there are lots of video tutorials for how to use them, there is no doubt that the Adobe tools are the standard.