Unsuccessful ClojureScript Quick-Start

CLOJURESCRIPT HAS BEEN something I’ve been following on the sidelines for quite a while now. Poking a bit around with React at work, let my interest towards Om.Next. Contemplating on creating my own web-app, I wanted to give this lispy thing a go. The Om.Next documentation led me to the ClojureScript quick-start guide.


Tutorial: Create structure and file

  mkdir -p src/hello_world;touch src/hello_world/core.cljs


Me copy-pasta

  mkdir -p src/hello_world;touch src/hello_world/core.cljs



Tutorial: edit the src/hello_world/core.cljs to look like the following:

(ns hello-world.core)
(enable-console-print!)
(println "Hello world!")



Me copy-pasta

ns hello-world.core)
(enable-console-print!)
(println "Hello world!")



Tutorial: Add the following Clojure code to build.clj

(require 'cljs.build.api)
(cljs.build.api/build "src" {:output-to "out/main.js"})


Me copy-pasta

(require 'cljs.build.api)
(cljs.build.api/build "src" {:output-to "out/main.js"})



Tutorial: build it

java -cp cljs.jar:src clojure.main build.clj


Me copy-pasta

java -cp cljs.jar:src clojure.main build.clj



Tutorial: Create a file index.html

<html>
    <body>
        <script type="text/javascript" src="out/main.js"></script>
    </body>
</html>

Me copy-pasta

<html>
    <body>
        <script type="text/javascript" src="out/main.js"></script>
    </body>
</html>



Tutorial: open in browser and see error:

Uncaught ReferenceError: goog is not defined


Me

Check



Tutorial: modify index.html

<html>
    <body>
        <script type="text/javascript" src="out/goog/base.js"></script>
        <script type="text/javascript" src="out/main.js"></script>
        <script type="text/javascript">
            goog.require("hello_world.core");
            // Note the underscore "_"!
        </script>
    </body>
</html>

Me copy-pasta

<html>
    <body>
        <script type="text/javascript" src="out/goog/base.js"></script>
        <script type="text/javascript" src="out/main.js"></script>
        <script type="text/javascript">
            goog.require("hello_world.core");
            // Note the underscore "_"!
        </script>
    </body>
</html>



Tutorial: Refresh your index.html and you should finally see “Hello world!”

Me

base.js:677 goog.require could not find: hello_world.core
    goog.logToConsole_ @ base.js:677
    goog.require @ base.js:709
    (anonymous) @ index.html:6
base.js:711 Uncaught Error: goog.require could not find: hello_world.core
    at Object.goog.require (base.js:711)
    at index.html:6
goog.require @ base.js:711
(anonymous) @ index.html:6

Wut???
Being a first attempter hello-world implementer surely doesn’t make one familiar with the error messages of a new compiler. So I was somewhat perplexed on what was wrong, what to do, how to debug and generally where to look

Did a list of files, although I had no idea what to look for

hello-world» find
.
./build.clj
./out
./out/main.js
./out/goog
./out/goog/math
./out/goog/math/integer.js
./out/goog/math/long.js
./out/goog/debug
./out/goog/debug/error.js
./out/goog/reflect
./out/goog/reflect/reflect.js
./out/goog/dom
./out/goog/dom/nodetype.js
./out/goog/deps.js
./out/goog/asserts
./out/goog/asserts/asserts.js
./out/goog/base.js
./out/goog/string
./out/goog/string/stringbuffer.js
./out/goog/string/string.js
./out/goog/array
./out/goog/array/array.js
./out/goog/object
./out/goog/object/object.js
./out/cljs
./out/cljs/core.cljs
./out/cljs/core.js.map
./out/cljs/core.js
./out/process
./out/process/env.js
./out/process/env.js.map
./out/process/env.cljs
./out/process/env.cljs.cache.json
./cljs.jar
./index.html
./src
./src/hello_world
./src/hello_world/core.cljs

Look okay I guess. If anything, only the file I’ve could have messed up would besrc/hello_world/core.cljs, but it seemed correct. I then began cat’ing files and found abvious nothing wrong. A bit frustrated, I followed the next steps in the tutorial which refactored some of the build and dependency stuff. The same error however still appeared.

For reasons unbeknownst to my self, I then opened the file in VSCode – the colorcoding immediately revealed something was wrong. The top line of the clojurescript file was not colored like the others

ns hello-world.core)
(enable-console-print!)
(println "Hello world!")

Great Scott! I’ve made a copy-pasta error and missed a begin-parens :-O

Wrong
ns hello-world.core)

Right

(ns hello-world.core)

Here I was cursing and swearing at the quick-guide. I was definit sure that I’d done it right, but alas a syntax violation was committed

I do wonder though, why the compiler did not error out on this!??

Upgraded From WordPress 2.2.2 to WordPress 2.7

WORDPRESS 2.7 UPGRADE from WordPress 2.2.2 done with no problems.
I was somewhat worried that my old theme would break on the upgrade, but It appears to be working. Well, I got at little issue with the Wp-Syntax plugin. I upgraded the plugin and now my GeShi style overrides do not work anymore – guess that is things one discover when doing infrequent upgrading.

I’m looking forward to working with this new WordPress version and exploring its added features.

WP-Syntax and GeShi Color Tweaking

SOURCE CODE COLORING in WordPress is thankfully a pretty simple task, thanks to the WordPress plugin system. This allows for installing filters to do the coloring and formatting automatic. Several plugins exists for WordPress to do source code coloring, but (for now?) I’ve settled on the Wp-Syntax plugin. Not that its necessary better that the other options, but it does a pretty fine job, and I like the layout it presents.

However the default coloring scheme in Wp-Syntax is not to my taste, so I had to do some tweaking. Wp-Syntax uses the popular GeShi Highlighter as backend, and GeShi is highly customizable.

Wp-Syntax splits the source area on two columns with one optional column for line numbering and one for the source code. The formatting of the line numbering column and the boxes surrounding both columns are both configured separate from GeShi. The only thing required to style the non-GeShi things is to apply the desired formatting in the main css file (note that the Wp-Syntax css may override the GeShi css, e.g. color). All classes are documented on the Wp-Syntax notes page. Below is a snippet from this site configuration.

.wp_syntax {
  color: #404040;
  background-color: #F9F9F9;
  border: 1px solid silver;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
 
.wp_syntax .line_numbers {
  text-align: right;
  background-color: #46555D;
  color: orange;
  overflow: visible;
}

The GeShi part that formats the actual source code, requires a few more simple steps. The Wp-Syntax notes page, explains how to modify changes to the default GeShi color settings. I don’t find the method descriped that optimal. I would rather configure the coloring in sites css file. The steps required for this is described in the GeShi documentation. First step is to enable the use of css classes. The documentation states that this should be enabled right after instantiation of the GeShi object. This can be done by adding lines 2 and 3 in the Wp-Syntax file wp-syntax.php.

1
2
3
4
    $geshi = new GeSHi($code, $language);
    $geshi->enable_classes();
    $geshi->get_stylesheet();
    $geshi->enable_keyword_links(false);

Remaining is the actual css contents for defining the colors. Here the team behind GeShi excell by supplying a php script for generating the css code. If downloading the GeShi source the script is available as /geshi/contrib/cssgen.php. Following the three easy steps in the script generates the css ready to paste in the main css file.

Thats it! Colors tweaked.

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress