Embed HTML Code in JavaScript File

Problem

You would like to include HTML code as a String in a JavaScript file.

Solution

Firstly, load the HTML code into a JavaScript variable (e.g. by using jQuery.ajax()).

$.ajax({url: 'http://mydomain.com/htmlfile.html'})

.done(function(html) {

Then apply the following two simple regular expressions on the html code to generate valid JavaScript code.

var safeHtml = html

.replace(/\n/g, "\\n")

.replace(/\"/g, "\\\"")

You can use this String now to build a JavaScript file:

var myScript = 'var html="'+safeHtml+'";';

 

The Dangers of the OK Plateau and How to Overcome Them

I found the following wonderful quote in Daniel Goleman’s Focus: The Hidden Driver of Excellence via Brain Pickings:

Amateurs are content at some point to let their efforts become bottom-up operations. After about fifty hours of training — whether in skiing or driving — people get to that “good-enough” performance level, where they can go through the motions more or less effortlessly. They no longer feel the need for concentrated practice, but are content to coast on what they’ve learned. No matter how much more they practice in this bottom-up mode, their improvement will be negligible.

The experts, in contrast, keep paying attention top-down, intentionally counteracting the brain’s urge to automatize routines. They concentrate actively on those moves they have yet to perfect, on correcting what’s not working in their game, and on refining their mental models of how to play the game, or focusing on the particulars of feedback from a seasoned coach. Those at the top never stop learning: if at any point they start coasting and stop such smart practice, too much of their game becomes bottom-up and their skills plateau.

While this excerpt is centred on sports, it of course applies to many areas in which we might want to develop expertise.

I read another book some time ago, The Little Book of Talent by Daniel Coyle, in which there were some similar ideas. However, in The Little Book of Talent it was added that there are two types of skills: hard skills and soft skills. The former being skills that can easily be advanced through deliberate practice, such as hitting a perfect forehand in tennis, and the latter being skills which are more difficult to practice deliberately, such as developing a strategy to win a tennis match. I think this is a distinction worthy of consideration in the context of the above quote.

 

GWT Exclude Package From Source Path

Problem

The Google Web Toolkit Java to JavaScript transpiler is a powerful tool to convert Java source code into JavaScript files. Unfortunately, not all Java code can be transpiled into JavaScript code by GWT.

Sometimes, a project contains a mix of Java code that can be converted into JavaScript and Java code that doesn’t. In that case, the GWT compiler issues errors such as ‘No source code is available for type …‘.

Solution

GWT module definitions (.gwt.xml) files allow to specify fine-grained rules which files in a project are to be converted and which files should not. The rules are based on Ant patterns, which can be difficult to wrap one’s head around. Below are a few handy examples.

Exclude all files in packages with the name ‘/jre/’

<source path='' >

    <exclude name="**/jre/**" />
</source>

Exclude the file ‘ForJre.java’:

<source path='' >
   <exclude name="**/ForJre.java" />
</source>

JavaScript and JSON Essentials (Packt) Review

JavaScript and JSON Essentials‘ by Packt publishing is a hands-on guide to developing JavaScript/PHP based web applications while using the JSON data format. This review of the book contains a quick summary of the contents as well as points to consider if you think of purchasing the book.

Overall, this as an easy to read book suited for novices in web development, packed with examples and easy to follow step-by-step instructions. However, advanced JavaScript developers will be familiar with most of the concepts covered in the book.

Contents

Chapter 1: JavaScript Basics

Explains the very basics of JavaScript, such as how to embed a script in a webpage, simple expressions (3+4), arrays and objects.

Chapter 2: Getting Started with JSON

Goes through the fundamental rules of JSON documents and how to access the data they contain in JavaScript applications.

Chapter 3: Working with Real-time JSON

Goes through an example of processing a complex JSON document, a collection of employees with their personal and employment details. Specifically, to query data from the document such as retrieving the positions of employees and to modify data.

Chapter 4: AJAX Calls with JSON Data

Shows how to set up a simple web server under a Linux (LAMP) and Windows (ASP.NET) environment. Then, how to host a simple PHP script dynamically rendering JSON data and using XMLHttpRequest to access the data from this script from a JavaScript application.

Chapter 5: Cross-domain Asynchronous Requests

This chapter firstly expands the PHP script and JavaScript application developed in the previous chapter. Specifically, by allowing to pass query parameters to the PHP script. Then, an example is shown how to load a JSON document through JSONP from the site reddit.

Chapter 6: Building the Carousel Application

Shows how to develop a small example application in which student records are retrieved from a server and displayed in a web browser.

Chapter 7: Alternate Implementations of JSON

Portrays numerous ways in which JSON data is used such as in PHP Composer and for Node.js package manager NPM. Briefly compares JSON with the data definition format YAML.

Chapter 8: Debugging JSON

Introduces numerous tools that can aid in developing JavaScript applications such as Firebug and tools to validate (only syntax) and format JSON documents.

The Good

  • Provides a good introduction to developing simple applications with JavaScript and PHP which utilize JSON data.
  • The book is overall well organized and it is easily understandable what is covered in the chapters.
  • There are plenty of examples and step-by-step instructions
  • The PDF version of the book is easy to navigate, with helpful bookmarks, which allow to browse the table of contents and hyperlinks throughout the document.

Caveat Emptor

  • Don’t expect to become a grandmaster of JavaScript after reading the JavaScript intro of the book. It’s around 14 pages and only meant to give a brief idea of JavaScript. If you are new to JavaScript, consider a complementary book such as Object-Oriented JavaScript or JavaScript The Good Parts.
  • This book, as its title specifies covers the ‘Essentials’ of JavaScript and JSON. Thus it’s a good starting point to become familiar with these technologies but does not contain more advanced or nuanced discussions, such as good design practices for JSON documents, performance issues or tradeoffs in using JSON.

Disclaimer: Thanks to Packt Publishing for providing a free review copy of this book!

Render HTML from Object with CoffeeKup

CoffeeKup allows to render HTML from multiple sources:

  • A String containing valid CoffeeScript code
  • A JavaScript/CoffeeScript object arranged according to CoffeeKup rules

To render HTML from a String is quite straightforward and documented on the CoffeeeScript reference: you can use the methods .compile and .render as documented there.

However, to render HTML from a JavaScript/CoffeeScript object can also come in handy, to create a tight link between your logic and markup. The .render method is not only able to process a String but is also able to process a certain kind of Object as well.

Here find two examples of how to render JavaScript and CoffeeScript objects into HTML:

JavaScript Object

CoffeeKup.render(function() {

  return div({ class: 'mydiv' }, 'Hello World');

});

which results in:

"<div class='mydiv'>Hello World</div>"

CoffeeScript Object

CoffeeKup.render(div 'mydiv', ->'Hello World'<span style="line-height: 1.5em;">);

resulting in the same HTML as above.

Copy EntrySet of a HashMap in Java

All the key-value pairs of a Map in Java can be accessed through the method .entrySet() on the Map interface. Sometimes it might be required to create a copy of the resulting list.

A straightforward approach would be to utilize the constructor of the ArrayList class, which accepts a list as parameter, such as

List<Entry<…> copy = new ArrayList<Entry<…>>(map.entrySet());

Unfortunately, this approach does not work in all cases, for instance when using GWT. The problem is that the individual Entries in the entrySet are not guaranteed to contain the keys and value of the map. Thus, in order to create a safe copy of an entry set, the following steps are required:

  • Add the class MyEntry to your application.
  • Create a new ArrayList with the size of your entrySet: copy = new ArrayList(map.entrySet().size());
  • Loop through the entry set of the map and create individual copies of all entries:

for (Entry<…> e : map.entrySet()) {

copy.add(new MyEntry<…>(e.getKey(), e.getValue()));

}

Not too easy but worth the effort; since if you don’t create a copy of an entrySet like this, your application becomes dependend on the internals of the map implementation of your choice. You might also want to consider to create a copy of the whole map and then use the entrySet of the copied map. This can be accomplished in less lines of code but will be less performant, since the internal index for the map would have to be recreated.

CoffeeKup: Add Class to Elements

CoffeeKup is a very succinct and flexible templating engine to define HTML documents in a less verbose manner. It is based on CoffeeScript.

Unfortunately, the documentation of CoffeeKup I could find was not very clear on how to perform one of the most basic tasks in creating HTML documents:

How do I assign a class to an element?

And here is the answer:

div class: 'myclass', ->

  div class: 'nested'

Which will result in the HTML document:

<div class='myclass'>

  <div class='nested'></div>

</div>

Or in more succinct form:

div 'myclass', ->

  div 'nested', ->

Please note the ‘->’ after the declaration of the class for the second div. Without it, CoffeeKup would render ‘nested’ as text and not as element.

Resources

CoffeeKup Reference

CoffeeKup Login Example