Introduction
I actually do Web-development in my private life. Smaller projects for myself like a „homepage“ (Is this term still used?) or for „the kids“ – to bring them in contact with the web, web technologies and all that. My work-flow is „overlookable“ and projects normally involve
- a HTML file
- a CSS file
- a Javascript file
I have done this for quiet some time and normally used barebone emacs to open a new file, fill in some content, arrange window/buffer layout, open a new file and fill in some more content. Escpecially with those smaller „projects“ I normally ended up with a layout like this:
At some point in time I realized that emacs can support me here and I did:
(defcustom web-project-root "~/public_html/" "New web projects are stored in this directory." :group 'web)
(defun mp/start-web-project (name)
"Create a new web project with NAME. Create initial html http://lindner-dresden.de/buchstabe-g/index.html , js, css file."
(interactive "MProjectname? ")
(let ((projectroot (concat web-project-root name)))
(unless (file-exists-p projectroot)
(mkdir projectroot))
(select-frame (make-frame))
(split-window-vertically)
(find-file (concat projectroot "/" name ".html"))
(save-buffer)
(other-window 1)
(find-file (concat projectroot "/" name ".js"))
(save-buffer)
(split-window-horizontally)
(find-file (concat projectroot "/" name ".css"))
(other-window -1)
(copy-file "~/.emacs.d/templates/jquery-3.0.0.js" (concat projectroot "/"))
(switch-to-buffer (concat name ".html"))
(mp/html-project-post-processing name)))
(mp/html-project-post-processing name) fills in page title and css template filename:
(defun mp/html-project-post-processing (name)
"This method looks for strings %CSSFILE% and %TITLE% and replaces them with some meaningful values."
(save-excursion
(goto-char (point-min))
(when (re-search-forward "%TITLE%" nil t)
(replace-match name 'fixedcase))
(goto-char (point-min))
(when (re-search-forward "%NAME%" nil t)
replace-match name 'fixedcase))
(goto-char (point-min))
(when (re-search-forward "%CSSFILE%" nil t)
(replace-match (replace-regexp-in-string (regexp-quote ".html") ".css" (buffer-name) 'fixedcase 'literal) 'fixedcase))))
To start a new project I can now (mp/start-web-project) and have my preferred buffer/window layout and templates filled into the empty buffers! Also emacs creates a directory in web-project-root Cell Phone Number Trace
, which is ~/public_html/ for me so that apache finds the newly created project. It saves me a lot of time and I am really happy with it!
Templates
I do have a template for Javascript and Html. There’s not much in it but I do feel more comfortable when I do not look at empty buffers 🙂
HTML Template
My html template fills in some bare-bone html5 content and takes care for indentation. There are also a couple of javascript files included.
(define-auto-insert '("\\.html\\'" . "HTML5 Skeleton")
[ '(nil
"\n"
"\n"
"\n"
"\n"
"%TITLE% \n"
"\n"
"\n"
"\n"
"\n"
"\n"
"\n"
"\n"
"\n"
) indent-buffer ] )
The indent-buffer function is used to indent the whole buffer https://italoptik.com/yelnac/index.html https://puttygen.in , once the skelton is inserted into the buffer:
(defun indent-buffer ()
(interactive)
(indent-region (point-min) (point-max)) )
Javascript Template
(define-auto-insert '("\\.js\\'" . "Javscript Skeleton")
[ '(nil
"/*\n * "
(file-name-nondirectory (buffer-file-name)) "\n"
" * Started on " (format-time-string "%A, %e %B %Y.") \n
" */" \n \n \n ) indent-buffer ] )
Neueste Kommentare