The Web Developer Hydra
This post covers the following sections from my init.
Web Developer Hydra
Emacs is old school. You're either new to it - which means you wouldn't be here unless it was your type of thing - or you know what you're looking for. In either case, go to the side bar of this page and click on the 'Emacs' tag. Then read the posts y date from oldest to newest.
In the last emacs post I covered lines 2563 - 2615. This post covers lines 2555 - 2708. I include the lines for anyone that wants to patch together the entire init from start to finish. The lines won't always match up because I take stuff out when I'm in the init.
Anyway, here is the code for the web-developer hydra and a screenshot. More on this one later.
Just a note: when doing web development the priority is almost always on figuring out the best way to implement or fix a feature, or refactor something. The developer is constantly learning new things. For this process an info capture system is probably the most important feature. As mentioned earlier, I use org-mode for this. As soon as I figure out which sources of info and which processes match my given situation I save them in places I can bring up on the fly without having to remember where they are. The same goes for useful code. As far actually developing, the next most important feature is for me yasnippet, but for any given developer any snippet system should be good to have. Being able to recall and insert your customized code on the fly is hugely useful. Next, jumping around the page, cutting and pasting, and actually getting the pieces you want put where you want them is hugely handy. Emmet mode, your typical shortcuts for cutting and pasting, as well as your folding mechanisms (and don't forget company or autocomplete, if you use those a lot), are huge.
Then your pipeline matters as a lot as well. By that I mean what you are using to combine, compress, and fingerprint your various files. If you're using webpack, grunt, or a vanilla npm scripting system, you will want to have some watchers included (packages to watch and reload files to a server). I use Hugo a lot, which has those features baked into it. When using xampp or eldoc (the emacs server) I'll use the livereload external software, along with its browser plugin, and a plugin called powercache (you can do the same with the developer tools on most typical browsers).
In the hydra above, you can see short cuts for starting up the various servers, using livereload, and getting to the localhost addresses, as well as the actual directories where the files are being coded. Useful stuff!