Category Archives: JavaScript

Django and htmx

Leave a reply
The 'Django' and the 'htmx' logo beside each other.

I gave a talk last night at the Auckland chapter meetup of Python New Zealand. The subject was the use of htmx with Django .

The JavaScript library htmx allows ‘native app like’ user experience for a Django project. Instead of refreshing the entire page, only the parts of the screen that actually need updating are refreshed. This eliminates those pesky flashes and reloads you get with conventional page refreshes. The result? A much smoother interface..

Now, normally, achieving this level of interactivity would require a full-fledged JavaScript-based frontend, along with the corresponding deep dive into React, Vue, or whichever framework is trending this month. But with htmx, you can get similar results by making relatively minor changes to your existing Django templates and views. No new framework, no need to sell your soul to JavaScript (at least not entirely) and you do away with large amounts of code serializing and de-serializing data.

In a Django context this is all made easier with the help of the django-htmx add-on (written by Adam Johnson). It provides the tools you need to integrate htmx into your Django project. In my presentation, I shared an overview of htmx and how combining it with django-htmx can deliver a smooth, engaging user experience—without the need to build a full-on JavaScript frontend or expose a mountain of API endpoints to service it.

That said, I’m not suggesting htmx is a silver bullet. There are plenty of scenarios where a “proper” JavaScript framework—be it React/Next.js, Vue, or Svelte—makes more sense. But I’m excited to explore more about where htmx fits into the Django ecosystem and how it can simplify things in the right contexts

Here are my slides from last night.

The evolution of an arrow function

Leave a reply

Summary

As a reminder to me, and I hope, a help to others here are the various ways in which JavaScript arrow functions can be used to reduce the amount of code you write.

Less is more ?

Here I start with an old fashioned JavaScript function being used as an argument to the map function and then step by step reduce the amount of the code to take full advantage of the possibilities of JavaScript arrow functions. Not all of these steps would be possible in all circumstances.

//Test data is an array of integers
const nums = [1,2,3,4,5,6,7,8,9,10]

//We start by using a 'traditional' 
//function definition as our argument 
//to 'map'
const first_approach = nums.map(
  function(n){
    return num * 2
  }
)

//Convert the 'traditional' function 
//definition to an arrow function
const second_approach = nums.map((n) => {
    return n * 2
})

//When there's only one argument to the 
//function we can remove the brackets 
//around the argument, so 'n' is no 
//longer bracketed
const third_approach = nums.map(n => {
    return n * 2
})

//Because only one thing is being 
//returned the processing can all be 
//placed on one line ...
const fourth_approach = nums.map(n => { return n * 2 })

//Take advantage of the implicit return 
//within an arrow function so we no longer 
//need to use 'return' and, in the process, 
//do away with the curly brackets.
const fifth_approach = nums.map(n => n * 2 )


Summary

So just to summarise, in the right circumstances it’s possible to go from this …

//Longest version
const first_approach = nums.map(
  function(n){
    return num * 2
  }
)

… to this .

//Shortest version
const fifth_approach = nums.map(n => n * 2 )

Full Details

Fuller details about when all of these optimisations are possible are available on the excellent MDN Arrow Function page.

Opening Nodes in jsTree with Ember.js

Californian Coast Redwoods. Photo by Jeff Balland on Flickr

Who should read this ?

This is going to be of interest if you’re using the ember-cli-jstree addon and you want to programmatically open a node in the tree. It’s niche, but if you want it … here it is.

Overview

If you want a tree widget as part of your interface then the jsTree jquery plugin is a good option. I’ve used it on a number of projects and while it’s not perfect it’s really very good.

Two examples of the output from the the jsTree jquery plugin are shown.
Examples of jsTree usage from the jsTree documentation

If you’re working with Ember.js then an ember addon, ember-cli-jstree, exists to allow you to use the jsTree plugin in a more “emberish” manner.

Opening a node programmatically

So for our current purposes I’m going to assume you’ve

  • got your Ember.js project setup and running
  • you’ve got a template that’s making use of the ember-cli-jstree component
  • the resulting tree is populated with some data and
  • you want to allow some processing to open the tree at a given node without selecting it

Looking at the documentation, here and here , it seems that all that’s needed is to specify the node you want to open but I’ve found that’s not so.

A screen shot of part of the jstree documentation. The argument list to be used when you call the function 'open_node' is shown. The key point being that the first argument is described as "the node to open"
The ‘open_node’ function signature from the jsTree documentation

In fact if you want to open a node other than the topmost node it’s necessary to make a series of calls to open_node starting at the topmost node and ‘walking’ down to the node you wish to open.

An Example

So imagine you have a tree which shows areas of the United States and that you wish to open a node that corresponds to the street in New York City called Broadway.

On first reading it would seem that all that was necessary was to execute the following, but that’s not so.

  this.myActionReceiver.send('openNode', 'Broadway');

In fact to do that it would be necessary to execute the following processing

  this.myActionReceiver.send('openNode', 'NY');
  this.myActionReceiver.send('openNode', 'NewYorkCity');
  this.myActionReceiver.send('openNode', 'Manhattan');
  this.myActionReceiver.send('openNode', 'Broadway');

One last thing

If you find yourself having do this then it’s worth remembering that the parameters passed to a number of events include a action object and within the action object there is an array of parents which in the above example would look like this. 

# action.node.parents
["Manhattan", "NewYorkCity", "NY", "#"]

Hope it was helpful.

Backbone and Handlebars : “Backbone is not defined”

Leave a reply

It’s ages since I’ve used Backbone but I’ve needed to in the past few days. I also needed to use Handlebars templates with it.

I’ve spent far too long today trying to understand why when I tried to do that I kept getting an error message “Backbone is not defined”.

You see my previous ‘old-style’ use of Backbone was a plain old ‘HTML with script tags’ page which did it’s templates the Underscore way and  which included the relevant scripts something like this :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

So when I wanted to switch from Underscore templates to Handlebar templates I just dropped the reference to Underscore and include a reference to Handlebars like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

And that’s when I got the error message “Backbone is not defined”  … for a painfully long time.

Well long story short it seems that in order to use Handlebars in that way you have to include Underscore as well like this :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

I still have yet to see it written down that you need to do this but it works ! I was put on the right path by this gist https://gist.github.com/kyleondata/3440492 .

Of course if I’d done something contemporary like use browserify in the first place I suspect I wouldn’t have has this problem but if you’re doing it old school then this is what I suggest you do.

Hope it helps.

Datejs – Date.isAfter – no such function ?

Leave a reply

date.js – missing methods

Summary

Save yourself a lot of pain and ensure you’re using the right version of  Datejs.

Datejs – It’s great !

Let me start by saying that Datejs, an open-source JavaScript Date Library, is great ! It provides a lot of much needed functionality to the area of dates in Javascript.

Weirdly missing methods

Having said that what I want to highlight is that if you use the standard download links offered by the website (as shown below) you’ll get a version of Datejs which is not the most current one.

What’s more it seems that the version you will get contains a number of defects.

I can vouch for this as I’ve spent a couple of hours today wondering why the ‘.isAfter’ and the ‘.compare’ methods didn’t seem to exist in the form they are documented ! Very frustrating !

What You Should Do

Instead of using the download link on the first page to get the date.js file go here instead : http://www.datejs.com/build/date.js. The version number is the same, “1.0 Alpha-1”, but the build date is “2008-05-13”.

At least at the time of writing – it’s the “2008-05-13” build you want.

Credit Where Credits Due

I’m grateful to Ben McIntyre whose post on the Datejs forums alerted me to this problem, I only wish I’d seen it earlier !

Ace ‘Editor in the Browser’ – Documentation

Leave a reply

Ace ‘Editor in the Browser’ – Documentation

The documentation for Ace – where is it ?

Summary

The Ace documentation isn’t that hard to find but you do need to know where to look

Ace in the hole

The Ace project provides a customizable, embeddable code editor for web applications. It’s written solely in JavaScript and is really very impressive.

You can see it in action at their demo page (which frankly is a bit bare bones) or at the Cloud9 project for which Ace is the starting point.

Documentation is where ?

You can download the Ace distribution from https://github.com/ajaxorg/ace – you need the ‘Downloads’ button at the top right.

Once you’ve done that you’ll find there’s nothing worth reading in the docs folder within the distribution.

Instead what you need to do is go visit the Ace wiki at Github. It took me a while to work this out (with the help of the Ace user group forum) so I hope it will save some others the trouble.