Primer: Core Web Development Tools

In this post I describe the tools I recommend a web development professional install on their machine to get themselves started.  For example, a marketing team member, or a javascript developer, might start out by installing this toolset. It’s accompanied by a few videos demonstrating the concepts.

Videos

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
  • Content aware editor for editing HTML, CSS, and Javascript files that provides at least basic syntax highlighting
  • 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

https://www.google.com/chrome

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

https://atom.io

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.

Prepros

https://prepros.io

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

https://nodejs.org

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.

The Node.Js execution environment, used for executing Javascript based components, comes bundled with NPM.  Many of the tools used for doing WWW development are built using the Javascript language and run on the Node.Js platform.

As mentioned earlier the theme of this development environment is leveraging the NPM eco-system.

GULP

https://gulpjs.com

Gulp is a command-line based task running tool which is used for automating many of the routine tasks that you’re likely to be doing when working on a website.  The tasks are things like launching a web server, preprocessing/optimizing files, and building/deploying your website.  Gulp is packaged and installed using the NPM tool.  It is implemented using the Javascript language and runs on the NodeJs platform.

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

http://yeoman.io

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

http://www.adobe.com

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)

https://affinity.serif.com

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.

2 Replies to “Primer: Core Web Development Tools”

    1. You’re welcome Mark.
      One of the changes I’ve made since creating the video is I’ve started recommending Visual Studio Code instead of Atom as an editor for newbies to start using.

Leave a Reply

Your email address will not be published. Required fields are marked *