clojure blog 3: quick hiccup run-through

This is the part of this where I talk about some really boring stuff, but there are some features worth highlighting. Hiccup is the library I use for Lisp forms to HTML. The basics are super simple, and the forms look something like this:

(html5 [:div.class#id {:attribute "code" :style "color: black;"} [:p "something"]])

Here are some of my favorite conveniences offered by Hiccup: forms, links, and lists.

(ns blah.blah
    (:require [hiccup.page :refer [html5]]
              [hiccup.core :refer :all]
              [hiccup.form :as :form]
              [hiccup.elem :as :elem]))

(def form-example
"nice simple form example, much prettier than HTML (in a lisper's opinion)"
    (form/form-to {:enctype "multipart/form-data"}
     [:post "/blah"]
     "username: " (form/text-field "username")
     [:br]
     "password: " (form/password-field "password")
     (form/submit-button "submit button")))

(def elements-example
    (html5 [:html [:body [:div.main
        (elem/link-to "https://solb.io" "this is a link to my website")
        (elem/ordered-list '(1 2 3))))

Now I'm not quite as dumb as I look, and I realize these are only saving a few keystrokes compared to their equivalent <a> or <ol>, but the real strength of this is composability. Hiccup's Clojure forms equal HTML means that you can build templating quite easily. Every page on the site is built with a macro that formats it to fit the style:

(defmacro page-template
[options & forms]
(if-not (map? options)
`(page-template {} ~options [email protected])
`(html5 (include-css "/styles/style.css")
(if (contains? ~options :js)
(if (string? (~options :js))
(include-js (~options :js))
(map include-js (~options :js))))
[:html ~head
[:body
[:div.main
[:header ~navbar]
footer]])))

As you can see I have also written a navbar and head that are loaded into the resulting functions on macro-expand. This type of HTML was pretty nice. Another super important note is that you can evaluate any expressions inside the (html5) call. This means you can do helpful stuff like build lists from thing in a database (such as what I do for listing my blog posts).

(defn list-things-in-div
    [coll]
    (html5 [:html [:body [:div.main
        (for [i coll]
            [:div.each i])]]))

These features are the basics of Hiccup, and all in all makes a nice web writing experience. Most of these features are no doubt included in most of the HTML libraries in JS or other languages, but they still deserve to be highlighted in the context of Clojure.

Next up - databasing. JDBC connection to PostgreSQL. Stay tuned ~