This post covers the following sections from my init.
Web Developer Hydra
Preamble
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.
I skipped a miscellaneous hydra, as the stuff is rarely used. Also, this post is short - though the hydra is one of my most used hydras. Most of the functions/modes/and jumps it calls need to be more thoroughly explained. For example, web-mode in emacs is super comprehensive, and there can be a lot to the various set-ups, like javascript mode, or php mode. Moreover, much of this is still being refined on an as needed basis.
Anyway, here is the code for the web-developer hydra and a screenshot. More on this one later.
;define a title function
(defvar web-dev-title (with-octicon "globe" "Web Development"))
;generate hydra
(pretty-hydra-define Web-Development (:title web-dev-title :quit-key "q" :color blue )
("Mode"
(
("p" php-mode "PHP Mode")
("w" web-mode "WEB Mode")
("g" html-mode "HTML Mode")
("3" js2-mode "Javascript Mode")
("e" emmet-mode "Emmet Mode" )
("M" emmet-cheat-sheet "Emmet Cheat Sheet")
("P" php-cheat-sheet "PHP Cheat Sheet")
("J" js-cheat-sheet "Javascript Cheat Sheet")
("B" bootstrap-cheat-sheet "Bootstrap Cheat Sheet")
("W" wordpress-cheat-u "Wordpress Cheat Sheet")
("4" css-grid-cheat-sheet "CSS-GRID Cheat Sheet" )
( "r" refresh-chrome "Refresh Chrome")
);end mode
"Action"
(
(";" comment-out-region "Comment Out Region" )
("." smart-comment-line "Smart Comment Line" )
("i" insert-yasnippet "Insert Yasnippet" )
("H" helm-emmet "Helm Select Emmet" )
("m" company-web-html "HTML Complete" )
("t" company-complete "Company Complete")
("I" highlight-indent-guides-mode "Show Indent Guides" :toggle t )
("E" elnode-make-webserver "Make Elnode Server (choose 8028)")
("7" list-elnode-servers "List Elnode Servers")
("6" elnode-stop "Stop Elnode Servers")
("1" elnode-start "Start Elnode Server")
("0" visit-localhost-elnode "Elnode-8028 Local Host")
("8" jump-to-elnode-public "Jump ELNODE PUBLIC (in /emacs)")
);end action
"Other"
(
("x" launch-xampp "Launch Xampp")
("!" launch-live-reload "Launch Live Reload")
("n" launch-notepad++ "Launch Notepad++")
("j" jump-to-htdocs "Jump To HTDOCS")
("c" change-inner "Change Inner")
("s" web-mode-element-content-select "Select Content" )
("l" company-try-harder "Cycle Backends" )
; ("V" code-validator "Code Validator")
("L" visit-localhost-xampp "HTDOCS Local Host")
("N" Javascripts/body "GoTo JS-mode Interface")
("v" Web-Mode/body "GoTo Web-Mode Interface")
("h" hydra-helm/body "Return To Helm" :color blue )
("<SPC>" nil "Quit" :color blue)
);end other
);end hydra body
);end pretty-hydra-web-development
(bind-key "<C-m> w" 'Web-Development/body)
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!
