Kategorie: Javascript

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"
      "\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 ] )