I have another toy project that i use to develop in my free time (No, I do not have too much free time. I just have started a couple of minor projects in the past and have not yet written about it). It’s a javascript based graph drawing tool. It turned out that i had introduced a couple of bugs and only then wanted to have Unittests. So I looked around for unittesting frameworks for Javascript and found QUnit.

QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework.“ says the official homepage (link). It actually is easy to get used to and offers what one can expect from a unit testing framework (which I consider to be a nice test runner and a couple of asserts). The framework is quickly set up and first tests are written soon. The question I asked myself was „If I do this again tomorrow, the day after tomorrow and every day for the next 2 years – how can I simplify my usage of this powerful framework.

And this is where Emacs jumps in!

Emacs

So currently the situation is like this: I am editing some javascript file and realize „Time for Unittests“. This is what i came up with:

(defun indent-buffer ()
  (interactive)
  (indent-region (point-min) (point-max)) )
 
(defun mp/html-post-processing ()
  "This method looks for a couple of key-strings and replaces them with some meaningful values."
  (save-excursion
    (goto-char (point-min))
    (when (re-search-forward "%TITLE%" nil t)
      (replace-match (replace-regexp-in-string (regexp-quote ".html") "" (buffer-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) 'fixedcase))
    (when (re-search-forward "%TESTEE%" nil t)
      (replace-match (replace-regexp-in-string (regexp-quote "-test.html") ".js" (buffer-name) 'fixedcase) 'fixedcase))
    (when (re-search-forward "%UNITTESTS%" nil t)
      (replace-match (replace-regexp-in-string (regexp-quote "-test.html") "-test.js" (buffer-name) 'fixedcase) 'fixedcase))))
 
(define-auto-insert '("\\.html\\'" . "HTML5 Skeleton for QUnit-Unittests")
  [ '(nil
      "<!DOCTYPE html>\n"
      "<html>\n"
      "<head>\n"
      "<meta charset=\"UTF-8\" />\n"
      "<title>%TITLE%</title>\n"
      "<script src=\"jquery-3.1.0.js\"></script>\n"
      "<script src=\"jquery-ui-1.12.0.js\"></script>\n"
      "<script src=\"subrx.js\"></script>\n"
      "<link rel=\"stylesheet\" href=\"%CSSFILE%\" />\n"
      "</head>\n"
      "<body>\n"
      "</body>\n"
      "</html>\n" )
    indent-buffer 
    mp/html-post-processing ] )
 
;; with the nifty auto-insert defined above opening a buffer for the unit test is actually as
;; simple as a call to find-file!
(defun mp/qunit-test-for-current-buffer ()
  (interactive)
  (let ((test-file-name (replace-regexp-in-string (regexp-quote ".js") "-test.html" (buffer-name))))
      (find-file test-file-name)))

I found this very convincing and currently do it exatcly this way! I hope everybody who shares this snippet enjoys it, too!

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:

Buffer Layout For Web Projects

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, 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, 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
      "<!DOCTYPE html>\n"
      "<html>\n"
      "<head>\n"
      "<meta charset=\"UTF-8\">\n"
      "<title>%TITLE%</title>\n"
      "<script src=\"jquery-3.0.0.js\"></script>\n"
      "<script src=\"subrx.js\"></script>\n"
      "<script src=\"%NAME%.js\"></script>\n"
      "<link rel=\"stylesheet\" type=\"text.css\" href=\"%CSSFILE%\">\n"
      "</head>\n"
      "<body>\n"
      "</body>\n"
      "</html>\n"
      ) indent-buffer ] )

The indent-buffer function is used to indent the whole buffer, 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 ] )

Beeing busy with a lot of things it’s hard to find time to cultivate the essential programming skills. I managed to find some time and did some Javascript coding (once again…). The result is here: click. This site helps you train basic arithmetic (numbers between 0 and 100). Good for primary school 2nd grade. Exercises are picked on the vertical right sidebar. Exercises populate a table and can then be solved in any order. Have fun.

HTML5 canvas is a nice toy to do 2d graphics in the browser. My first attempt to walk can be found here and features object oriented javascript (!) There is also a corresponding projct page on github here.
To test the script open this link and start clicking somewhere in the browser. Kids like it (at least mine 🙂 ).