As a Front end developer I will consider few things in my development environment to increase my productivity. For your reference will list it below.

1. First thing I will include is live reloading. I don't want to refresh my page for all the changes which I make during development. For this thing will use lite-server.
2. Then for compiling sass files into CSS I will use node-sass with nodemon as a server (which will restart automatically).
3. I prefer to use linter which is ESlint.

Still few things are there I have created it as npm scripts boilerplate. You can download using 'npm i npm-build-boilerplate'.

Now I am thought of including precommit git hooks to follow meaningful GIT commit message.

I end up building a lot of my own project-specific and task-specific tools for the work that I do. Here is an example of each from this week:

1) The last 'project-specific' tool I built was a static site generator in 4 lines of shell script:

for file in *.md */*.md
  echo "Converting "(echo "../$file" | sed '$s/\.md$/.html/')
  pandoc $file -f markdown -t html5 -H template/header-prod.html -B template/nav.html -A template/footer-prod.html -o (echo "../$file" | sed '$s/\.md$/.html/') -s
end

I'm writing the content for a website, and I wanted a workflow like this:

• Write content in markdown
• Build HTML pages from those markdown files
• Host static HTML on a custom domain (any web server, or github pages, amazon S3, etc)

I was able to write a shell script that uses pandoc to convert my markdown content into HTML, and then using Transmit I can synchronize that folder on the machine I'm working on with a live web server. Here's a quick 45 second tour of that workflow where I deploy a fresh change to the live hosted website:

2) The last 'task-specific' tool I built was a little code editing overlay for tinkering around with CSS on any site already loaded into your web browser. I needed to style a form that had been generated without CSS, and I wanted to see the changes instantly in the browser as I wrote CSS, and also be able to copy & paste everything I had written from the browser into my editor to save the changes when I was happy with what I saw. Here's what I needed:

// Create <style> tag
var tag = document.createElement('style')
tag.id = 'styler'
document.head.appendChild(tag)

// Create <textarea>
var textarea = document.createElement('textarea')
textarea.id = 'texter'
textarea.addEventListener('input', function() {
  styler.innerHTML = texter.value
})
document.body.appendChild(textarea)

// Style <textarea>
document.head.innerHTML += `
<style>
  #texter {
    box-sizing: border-box;
    position: fixed;
    margin: 0;
    padding: 1em;
    width: 100%;
    height: 100px;
    bottom: 0;
    right: 0;
    font-size: 18pt;
    font-family: 'Fira Code', monospace;
    color: black !important;
    background: white !important;
    opacity: .3;
    z-index: 99999;
    transition:
      height .2s ease-in-out,
      opacity .2s ease-in-out
    ;
  }
  #texter:hover {
    opacity: .8;
    height: 80%;
  }
</style>`

I ended up writing this bit of JavaScript that you can copy & paste into the JS console in your web browser, and it was a big help for styling that form yesterday.

This is a screen capture of me using the overlay, but not the original page I was working on:

So I hope that gives you an idea of the sort of tools I end up making day to day as I work on different things. This sort of tooling never shows up in the end result of what I'm building, but it's a key part of how it all gets put together :D

Prepros (or CodeKit if you use a Mac) and Balsamiq are things I love to use. Those are my base tools since they do A LOT. LiveReload, file watching, linting, minifying, easy setups for Sass, interactive mockups, etc. Those are all covered by the three I mentioned. Codekit also allows hooks... so you can literally have it perform terminal commands when saving certain file types you define - such as rsync, etc.

Then there's Atom - created by the folks that created Github. I have packages for Emmet (seriously use it if you haven't, and are a front-end developer) installed as well as Go Plus, and a ton of others.

Git is also very important, imo. A really nice version control system when you get the hang of the bash CLI, which will allow you to save progress (commits) and retrieve (checkout, reset) any major mistakes you make with files that normally couldn't be recovered. Not only that, but then you can access your projects elsewhere, without a USB backup, and add things to it without fully-integrating those features yet (through branches.)

Learning a bit of Agile/Scrum sprints helps as well. Non-hourly estimates are a wonderful way of focusing more on what needs to get done as opposed to when it needs to get done - as long as it gets done.

Also, taking courses on Treehouse is super effective - and they allow you to launch a workspace as well, so if you need a certain environment to learn something new, it's a browser tab away so you can watch and code at the same time. From Python to the MEAN stack to design and even running a business. Education is more beneficial to your workflow than most tools will be in a couple of years. ;)

My go-to's right now are Visual Studio Code, Pycharm, and google Chrome. Visual Studio Code and Pycharm are great because I like the syntax highlighting options, the error identification is great, the integrated terminals on both are great for experimenting with restarting your server to implement changes that might affect your python program or javascript, and they have a project window that makes it easy to navigate without using the mouse. Their implementation of split screen file editing is also extremely efficient when comparing similar code. I do a lot of comparing between my code and known functional code as an effort to identify good practices and my faults in my code, and Pycharm and Visual studio are awesome.