I wanted to see if I could recreate this pattern using code, and to learn more about the underlying algorithm(s).

In my mind, there were two problems that I had to solve. First, I needed to figure out how to create the cells in a square canvas then fill the cells with varying diagonals.

My initial thought was to divide the edges of the inner frame into equally spaced points. Then, starting from a random point along this edge (call this A), find another random point within the inner square B, and connect this back to a point adjacent to A. Then, A would have been removed from the list of "active points".

Running this algorithm on paper, I realised it would create a few triangles and not necessarily pack the canvas with it. There was something I was missing. For some reason I had a hunch that "creating random triangles" was a solved problem and after some research I found about Delaunay triangulation.

Given a set of points, Delaunay triangulation helps you draw triangles between these points that follow these rules;

1. No point is inside the circle that goes through the three corners of any triangle.
2. You use as few triangles as possible.

In simple terms, Delaunay triangulation is a way to create triangles from a given set of points while making sure that no point is in the center of the circle, that passes through all three points of the traingle.

With this knowledge in mind I was to find this library

delaunay-triangulate

Delaunay triangulations in any dimension. Latest version: 1.1.6, last published: 9 years ago. Start using delaunay-triangulate in your project by running npm i delaunay-triangulate. There are 31 other projects in the npm registry using delaunay-triangulate.

With this library I was able to solve the first part by creating random points within a square, ensuring that the corner points of this square was added and then passing these to the delaunay-triangulate library which returns an array of triangles vertices.

Afterwards, I moved onto drawing the lines within each triangle. My first few ideas was drawing horizontal and vertical lines from the longest side of the triangle to the shortest side. Using the area of each cell as value to then map into the amount of lines to draw.

I spent quite a few hours watching videos on trigonometry to re-remember how to calculate area of triangle and how to finding angles within to then classify a cell as a "skinny triangle".

Unfortunately my ideas at that time never worked in replicating the design I on the t-shirt. You can see a live example below

The code is available here

GitHub - bulkan/zigzag

Contribute to bulkan/zigzag development by creating an account on GitHub.

Yet again, I was missing something that I couldn't quite put my finger on.

👶 Fast forward to September 2023

During the second half of my parental leave, I was finding time in between our baby's naps and I was getting bored with Fifa 23. This is when I started watching videos on Flow Fields, Particles and how to implement them using p5.js.

At the same time I had started solving some LeetCode problems (I was bored 🤷‍♂️) but that got boring after a while.

Coding Challenge #24: Perlin Noise Flow Field

In this coding challenge, I use Perlin noise to create a two-dimensional flow field with the p5.js library. Code: https://thecodingtrain.com/challenges/24-pe…

With the flow fields I had idea of updating this implementation of Mira-Gumowski fractal that I had created to use flow fields but that idea is a different topic for another day.

As I was going through my notes on generative sketch ideas to see if there was something else I can work on, I ended up reading my notes on replicating the design on this t-shirt.

It was a problem that I wanted to solve. I also noticed that, not each cell was a triangle rather a polygon !

In my initial explanation of Delaunay triangulation I intentionally omitted the relationship to Voronoi diagrams, which I was aware when I had initially come across Delaunay triangulation.

With that in mind I found the following d3 implementation that also had a way of creating a Voronoi diagram.

GitHub - d3/d3-delaunay: Compute the Voronoi diagram of a set of two-dimensional points.

Compute the Voronoi diagram of a set of two-dimensional points. - GitHub - d3/d3-delaunay: Compute the Voronoi diagram of a set of two-dimensional points.

Here is a an example Voronoi diagram.

https://en.wikipedia.org/wiki/Voronoi_diagram#/media/File:Euclidean_Voronoi_diagram.svg

A Voronoi diagram can be created by having random points, then dividing these points into polygons, one polygon for each point that is nearest to the centre of this cell compared to any other point.

A Voronoi diagram can be generated after a Delaunay triangulation is done as the centre point of the circles that passes through all three points (vertices) of the triangle form the edges of the Voronoi diagram.

The diagrams on Wikipedia illustrate this much better than I can articulate

Delaunay triangulation with all the circumcircles and their centers (in red).

Connecting the centers of the circumcircles produces the Voronoi diagram (in red).

Coming back to the t-shirt design, as I've mentioned the cells aren't just triangle but polygons and Voronoi diagrams was what I should've used instead of triangles.

After a three year hiatus I restarted this project again using d3-delaunay. Creating a Voronoi diagram and using it with p5.js is simple, here is an example using the p5.js editor which you might need to open in a new tab.

In the above example, all that is happening is;

• Creating an array of random points within the width and height of the canvas plus some arbitrary MARGIN
• Using Delaunay triangulation for these vertices
• Then creating a Voronoi diagram from the triangulation with a specific bounds.

Next step was to fill in the lines within each cell. I initially tried drawing equally spaced lines from the longest edge to shortest edge but that ended up drawing horizontal lines.

I was stuck yet again. I started researching when I by chance came across something called the Scan Line Algorithm.

It is an algorithm that is used in (low-level) graphics programming to fill in triangles and polygons, by finding lines that intersect with the polygon. Once you find a line that intersects, you have access to all pixel co-ordinates to be able to fill it.

Here are two videos that helped me a lot in understanding.

Polygon filling

• Start by casting an imaginary line from the minimum y position of the polygons vertices to its maximum y position
• Check if this line intersects with any of the edges of the polygon
• If they do, add the (x, y) coordinates of the intersection points to a list

Using this I was able to fill the cells with lines.

Voronoi diagram with horizontal equally spaced lines

But they all ended up being horizontal lines and I can't believe I didn't notice this before hand 🤦‍♂️.

I was close ! All I had to was just find the intersection points with the polygon using a diagonal line instead of a horizontal line.

I spent hours trying to get the maths right but something wasn't clicking and still hasn't. If my wife who, is a graphic designer hadn't said that I should just draw the lines in another layer and layer it into the polygons, I would've parked this yet again.

Instead, I remembered the existence of the p5.Graphics class which allows you to create a new offscreen graphics buffer. I wasn't certain at this stage if it supported masking and clipping which I looked up and found the following video.

p5.js clipping masks

It shows how to draw a polygon into a Graphics buffer, then use that shape as a clipping mask to an image. Using this as an example I was able to update my sketch and draw the Voronoi cells into a seperate graphics buffer that then was copied into the main canvas.

Next I used a seperate graphics buffer with the same width and height of the polygon buffer to draw lines starting from x=0 until width * 2 this ensures that there are enough lines even after rotating it.

Then all I had to was use the copy the lines from this new graphics instance into the graphics instance with the polygon and then clip polygon.

Et voilà!

You can see a live version embedded down below. If you're on mobile, sorry it's best viewed on a desktop at https://polylines.bulkan.dev

If you're interested the code is here

GitHub - bulkan/polylines: Polylines

Polylines. Contribute to bulkan/polylines development by creating an account on GitHub.

After three years from initial idea I was able to finally implement this sketch. There are still a few things in this implementation that I would like to work.

• If the angle to rotate the graphics instance with the lines is more than 90 degrees then for some cells the lines start from the middle
• Creating a new graphics instance for each polygon isn't ideal but it seems necessary because of clip
• Lastly, need to go back and work out the maths when using a diagonal scan line. Going back to principals of the equation for a straight line y = mx + c and finding an intersection point of two lines when we only know the vertices (I believe m was missing in my calculations).

I will continue playing around with this sketch and see if I can come up with different ideas for more interesting artwork.

💡

If you read this far thank you.

In other posts I've shown how to use parcel, typescript and p5js but these required other dependencies to be installed.

I want to try Bun, as you don't need to install anything else other Bun itself.

Bun is a fast, all-in-one toolkit for running, building, testing, and debugging JavaScript and TypeScript, from a single file to a full-stack application.

After installing I scaffolded a new project

mkdir p5-project
cd p5-project
bun create .

As Bun is also a package manager I was able install p5.

bun install p5 @types/p5

As Bun has support for TypeScript I also installed @types/p5 as I want to still use TS.

Now I created a index.ts file and import p5 and created a simple sketch.

import p5 from "p5";

const sketch = function (p: p5) {
  p.setup = function () {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.background("black");
    p.noLoop();
  };

  p.draw = function () {
    p.strokeWeight(5);
    p.fill("red");
    p.rect(p.width / 2, p.height / 2, 100, 100);
  };
};

new p5(sketch);

To start building I ran the following

bun build --watch index.ts --outdir ./public

As of writing this article I'm not able to find a way to start a development server like webpack-dev-server and it seems this will arrive in "next couple of months" with something described as Bun.App.

The Bun Bundler | Bun Blog

The Bun toolkit gets a new addition. Bun’s fast native bundler is now in beta.

In the meantime we can use Bun itself to create a small webserver to serve the bundled JavaScript, but first I created a index.html file

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      margin: 0;
      height: 100vh;
    }
  </style>
  <title>Bun & p5js</title>
</head>

<body>
  <script type="module" src="./src/index.ts"></script>
</body>

</html>

index.html

Notice that ./src/index.ts won't work as is so I created a devServer.ts that  combines Bun.build with Bun.serve into a single module. It bundles the above code in index.ts and then creates a HTTP server to serve the files.

As Bun uses hash in the naming of the output assests, I had to dynamically replace the src/index.js value in index.html with what Bun generates.

This was possible as Bun.build returns a result object with all assets.

const build = await Bun.build({
  entrypoints: ["./src/index.ts"],
  outdir: "./dist",
  naming: "[dir]/[name]-[hash].[ext]",
  sourcemap: "inline",
});

build.outputs.forEach((i) => console.log(i.path));

const hash = build.outputs.find((i) => i.kind == "entry-point")?.hash;

const inputHtml = Bun.file("index.html");
const outputHtml = Bun.file("dist/index.html");
let indexHtmlContent = await inputHtml.text();
indexHtmlContent = indexHtmlContent.replace("src/index.ts", `index-${hash}.js`);
await Bun.write(outputHtml, indexHtmlContent);

Bun.serve({
  development: true,
  port: 3000, // This is the default
  fetch(req) {
    const path = new URL(req.url).pathname;
    if (path === "/") {
      return new Response(Bun.file("./dist/index.html"));
    }

    const file = Bun.file(`dist${path}`);
    return new Response(file);
  },
});

devServer.ts

Then visiting http://localhost:3000 I can see the p5 canvas with a single red rectangle in the center.

Unfortunately every time I update index.ts I have to restart the devServer.ts as the --watch option only watches for changes in devServer.ts.

There doesn't seem to a config option for Bun.build to watch for changes in files configured in entrypoints to then retrigger build.

I could split Bun.build into a seperate file an run it via bun run --watch build.ts but then I won't have access to the BuildOutput in devServer.ts 🤷

Bun has me excited with the future of the JavaScript ecosystem.

Interdependent states refer to situations where updating one variable necessitates the update of another. For example, in a Todo app with undo support, deleting a todo requires tracking the deleted todo in another state variable

In such scenarios, using useReducer to centralise the management of interdependent state logic into a single reducer function makes code more predictable, readable and above all easier to test, as it eliminates the need for DOM interactions typically required when dealing with multiple useState variables. It's worth noting that even with useReducer, you can still test components using DOM interactions when necessary.l.

useState

To demonstrate lets visit a Todo app that supports adding, deleting and undoing the deletion of the todos. To implement this the code will need three states like so.

import { useState } from "react";

const App = () => {
  const [inputText, setUserInput] = useState("");
  const [todoList, setTodoList] = useState([]);
  const [undoHistory, setUndoHistory] = useState([]);
}

useState

• [inputText, setUserInput] will be used to keep track of the todo text from the <input> field. When the user clicks add (or hits enter) this field will be cleared.
• [todoList, setTodoList] is used to track the todos as an array.
• [undoHistory, setUndoHistory] is used to support undo history so when a todo is deleted, the deleted todo will be added here.

Let me start by describing the operations needed for adding a new todo;

• Update the todoList by calling setTodoList([...todoList, {id, text: input}]) in which id is unique
• Reset input text by calling setUserInput("")

To add a new todo the code has to interact with two state variables to achieve this.

Here is the operations needed when deleting a todo;

• Find the todo to be deleted from todoList
• Add this todo to undoHistory by calling setUndoHistory([...undoHistory, todoToBeDeleted])
• Remove the todo from todoList by calling setTodoList((currentTodos) => currentTodos.filter((todo) => todo.id !== id));

In the complete implementation below, it's evident that every state change operation necessitates updates to two state variables simultaneously. This tight interdependence between state variables underscores the disadvance of using useState as there is higher mental load on the developer to keep track of state.

To write tests for this implementation, we can utilise React Testing Library to simulate user interactions with the DOM. This includes actions like adding text and submitting the form or clicking the delete and undo buttons, mirroring real user behavior for comprehensive testing.

useReducer

In the updated Todo application further down, state management is handled through useReducer with the help of a todoReducer.ts file that has the reducer function. The default state for todoReducer comprises three key variables:

1. inputText: This variable tracks the todo text entered in the <input> field.
2. todos: An array that maintains a record of all the todos.
3. undoHistory: Another array dedicated to tracking deleted todos.

This version provides a clear and concise overview of the state variables managed by todoReducer.

Instead of describing the order of operations for adding a new todo I will describe what the next state is when adding todo.

• inputText is reset to an empty string
• todos is now updated to include all the current todos and the new one from the action.payload
• undoHistory is the current one from state

When deleting a todo;

• find the todo that is to be deleted
• todos is now all the current todos except the todo to be deleted
• undoHistory is now the current undoHistory and todo to be deleted.
• inputText is still the current one from state

With useReducer, each state update is a single operation, in contrast to the two operations required when using useState. This not only simplifies state management but also streamlines the testing process for todoReducer.

It's a straightforward function that takes the current state and an action as input, returning the next state, making testing in todoReducer.test.ts a straightforward and efficient task

Conclusion

When dealing with uncontrolled components that involve multiple interdependent states, useReducer offers a significantly more manageable approach to state management. Furthermore, it enables the adoption of a Test-Driven Development (TDD) approach, making the development process more structured and efficient.

Now we’re going to integrate p5.js within a Vue component. Using a framework like Vue will help you create more complex works with p5.js. You can handle application state in vue.js and do routing. I’ve used this in creating a site with multiple p5.js works in which the random seed & the selected palette id is updated in the URL so you can permalink to it.

First we start off with the same two files as before index.html and a index.ts but we need to make some changes. First add a new div to the index.html;

<html>
<body>
  <div id=“app”></div>
  <script src="./index.ts"></script>
</body>
</html>

Then rename index.ts to art.ts and update it like so;

import p5 from "p5";

const sketch = function(p: p5) {
  const CELL_COUNT = 20;

  const rect = (x: number, y: number, width: number, color: p5.Color) => {
    const cellWidth = width / CELL_COUNT; 

    for (let col=0; col<CELL_COUNT; col++) {
      for (let row=0; row<CELL_COUNT; row++) {
        const alpha = p.noise(row, col) * 255;
        color.setAlpha(alpha);
        p.fill(color);
        p.rect(x + cellWidth * row, y + cellWidth * col, cellWidth, cellWidth);
      }
    }
  }

  p.setup = function() {
    p.createCanvas(420, 420);
    p.noLoop();
    p.noStroke();
  };

  p.draw = function() {
    p.background(0);
    const color = p.color('red');
    rect(0, 0, 420, color);
  };
};

export const makeArt = (node: HTMLElement) => {
  new p5(sketch, node);
}

We’re exporting a new function makeArt that receives a DOM node (HTMLElement) which we pass to p5 along with the sketch function when instantiating. We will call makeArt in the Vue layer.

We have to recreate the index.ts.

import Vue from 'vue';

new Vue({
  render: createElement => createElement('h1', 'hello world')
}).$mount('#app');

You might need to restart the parcel development server via yarn run parcel index.html and you should notice that it will install Vue.

If you navigate to the URL that parcel prints out which is usually http://localhost:1234 you will see the page with the text hello world. Nothing fancy but it means things are working.

Now letscreate a component to help us wrap the p5.js code. Create a file named Art.vue next to index.ts;

<template>
  <div ref=“canvasOutlet”></div>
</template>

<script>
import Vue from "vue";
import { makeArt } from "./art.ts";

export default Vue.extend({
  mounted() {
    setTimeout(() => makeArt(this.$refs.canvasOutlet));
  }
});
</script>

This is creating a Vue component that just renders a div to be used as the DOM node to render the canvas into. We pass a reference to this all the way down to the p5 instantiation. This is done in the mounted lifecycle to make sure the DOM is completely rendered.

We’re not using this component just yet, so lets update index.ts and register the component. The updated file should look like this;

import Vue from 'vue';
import Art from './Art.vue';

new Vue({
  render: createElement => createElement(Art)
}).$mount('#app');

Finally should see the following;

Thats all for this post. Hope this inspires you to experiment.

Thank you for reading.

p5.js is already great at being able to be used immediately either with the official editor or loading it in via a <script> tag from a cdn.

For more complex projects I find that using a bundler like Parcel with TypeScript helps with code organisation. Not to mention all the benefits of having types and modern JavaScript features.

So lets start by installing Parcel .

yarn init -y # This just creates a package.json with some defaults.
yarn add parcel-bundler

I’ve used yarn here but you can also use npm.

With parcel we will first need to create an index.html file as a entry point when we run it.

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

The above also references an index.js so create one next to the index.html. Parcel uses the <script> tag within the html file to find the entry point into the JavaScript.

document.body.innerHTML = '<b>test</b>';

Don’t worry about the contents in the above snippet, we’re going to change it soon.

To run parcel use the following and then open up the url that parcel will output.

yarn run parcel index.html

You should see something like the following which means we have parcel working.

Now onto p5js. If you’ve ever used p5 or Processing before you will highly likely be familiar with the global API in which all the functions are available globally. In the case of p5 that means it’s on the window object.

With the following approach we will be using what is called the Instance Mode.

Update your index.js file like so;

import p5 from 'p5';

let sketch = function(p) {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

let myp5 = new p5(sketch);

Once you save this file you should notice the parcel development server fetch the required dependencies, in this case it should’ve installed p5js and updated package.json.

In addition to the that the page you loaded before should’ve have reloaded and it should look like the following screenshot.

Lastly to convert this into TypeScript first we need to rename the index.js to index.ts making sure to update the <script> tag in the index.html file.

Afterwards restart the development server. Notice again how parcel installed typescript? There shouldn’t be any visual changes to what is drawn.

Lets create a typed function that redraws the square by dividing it a grid and use noise to update the alpha value of each “cell”.

import p5 from 'p5';

const sketch = function(p) {
  const CELL_COUNT = 4;

  const rect = (x: number, y: number, width: number, color: p5.Color) => {
    const cellWidth = width / CELL_COUNT; 

    for (let col=0; col<CELL_COUNT; col++) {
      for (let row=0; row<CELL_COUNT; row++) {
        const alpha = p.noise(row, col) * 255;
        color.setAlpha(alpha);
        p.fill(color);
        p.rect(x + cellWidth * row, y + cellWidth * col, cellWidth, cellWidth);
      }
    }
  }

  p.setup = function() {
    p.createCanvas(700, 410);
    p.noLoop();
    p.noStroke();
  };

  p.draw = function() {
    p.background(0);
    const color = p.color('red');
    rect(100, 100, 240, color);
  };
};

const myp5 = new p5(sketch);

Notice the new rect function? It’s a simple way of dividing a square into rows and columns and then drawing a smaller square.

You should see the squares look like the following now.

With this setup you can get fast feedback. For example changing the CELL_COUNT to a bigger number like 50 and updating the canvas size and positioning you can results like this.

That is all for now. You can download a zip file of this here.

You can also read part two here.

When I had attempted this challenge last year with my X100T, I struggled during the autumn and winter periods because Melbourne is in two states; bone dry cold with gale force winds or pouring down rain. My excuse for not going out was that my X100T wasn’t weather sealed.

Well this year I have two secret weapons; a weather sealed X-T2 and the PhotoBlog365 calendar.

So far, I have enjoyed capturing a nice summer with blue skies. I’m glad to say that the first two months has been a very productive and creative in my photography.

The theme calendar has been very helpful for those days in which I’ve gone out during my lunch break with no idea on what to shoot. The daily themes have become that tiny spark in triggering my the creative thinking.

For example the following photo was taken on day 18 in which the theme was C is for... and in Melbourne C is for Coffee;

[

View this post on Instagram

](https://www.instagram.com/p/BPbmvS6BaYg/?utm_source=ig_embed&utm_campaign=loading)

A post shared by bulks (@bulks.e)

On the other hand I’ve struggled to find the time to get out of the office. As a full time worker, the only free time I have is during my lunch breaks. This means that I can’t venture out too far away, as I need to get back in time. Thus I keep walking the same places/streets and finding interesting compositions has been really difficult.

Some days I feel like I’ve cheated by taking shots with low depth of field at f1.4 on my XF-16mm. Does this show that, technically I’ve learnt what will make an interesting picture ?

[

View this post on Instagram

](https://www.instagram.com/p/BP1Wr83lKit/?utm_source=ig_embed&utm_campaign=loading)

A post shared by bulks (@bulks.e)

Challenge yourself

There is a reason why its called the 365 day challenge. It’s hard to take an interesting photo everyday to share with the world. To challenge myself further I’m not using the ACROS film simulation on the X-T2 or converting my photos to black and white.

[

View this post on Instagram

](https://www.instagram.com/p/BPJlQG6BjQW/?utm_source=ig_embed&utm_campaign=loading)

A post shared by bulks (@bulks.e)

Also, as a night owl, I find it hard to wake up early and to keep the ‘challenge yourself’ going I made it one of my goals to wake up before sunrise to catch the golden hour.

That being said I’m not a morning person yet and I need to do more of this.

[

View this post on Instagram

](https://www.instagram.com/p/BPAN0N3B9hN/?utm_source=ig_embed&utm_campaign=loading)

A post shared by bulks (@bulks.e)

Don’t do too many things

I need to just go out to take a photo and try not to hit two birds with one stone. Some days I will have errands to run during my lunch break, which eats into my photo time giving less time to look around for amazing compositions.

Street photography

I find that taking pictures of people walking along the street and making them interesting is hard. The resulting images feel like they’re not telling any story. There are already plenty of photos out there of people looking angry because someone is taking their photo.

The way I’ve used people in my pictures has been as a secondary element using them as motion.

[

View this post on Instagram

](https://www.instagram.com/p/BPB2zgcBUqS/?utm_source=ig_embed&utm_campaign=loading)

A post shared by bulks (@bulks.e)

Forcing creativity

There has been a few days in which I’ve left the whole taking a photo a day challenge to the very end of the day.

Creativity takes time ! I need to stop doing this.

[

View this post on Instagram

](https://www.instagram.com/p/BRF5S1oDRxo/?utm_source=ig_embed&utm_campaign=loading)

A post shared by bulks (@bulks.e)

63 days down only 302 days to go.

This post was initially written on 2014-05-28 and not published. Things will have changed.

Broccoli is a relatively new asset builder. It is based on doing operations on a trees of files.

Here is how I used it to concatenate front end dependencies installed via bower and an angular.js app.

Bower

First, let me show you the two files you need for bower.

bower.json

Here is an example bower.json that lists the frontend dependencies. Note the resolutions property.

{
  "dependencies": {
    "angular-ui-router": "0.2.11",
  },
  "resolutions": {
    "angular": "~1.3.0"
  }
}

.bowerrc

This is relative to your project and tells bower where to put the dependencies.

{
    "directory": "public/vendor"
}

Broccoli

Now we need to install broccoli. I’ve installed the broccoli-cli globally and as per the installation guide.

npm install --save-dev broccoli
npm install --global broccoli-cli

We also need to install plugins for broccoli;

npm install --saveDev broccoli-concat

Brocfile.js

Like all task runners broccoli has its own file format to define its operations, though its not really a task runner but rather a build tool.

Here is the brocfile.js to concatenate all of the above bower dependencies

var broccoli = require('broccoli');
var concat = require('broccoli-concat');

var concatenated = concat('public/',  {
  inputFiles: [
    'vendor/jquery/jquery.min.js',
    'vendor/angular/angular.js',
    'vendor/angular-ui-router/release/angular-ui-router.min.js',
    'js/**/*.js',
  ],
  outputFile: '/assets/app.js',
  separator: '\n', // (optional, defaults to \n)
  wrapInEval: false // (optional, defaults to false)
});

module.exports = concatenated;

We explicitly define the order of concatenation to the concat function. This way we have jQuery loading before angular, and angular loading before ui-router and our app code (which is assumed to exist in public/js).

Now running broccoli serve will start a http server on port 4200 and the concatenated Javascript will be available at https://localhost:4200/assets/app.js.

Hope that helps.

There are few places where you would want to use a promise. Protractor supports Promises in the onPrepare function but the example uses Q.

That example onPrepare written using Bluebird looks like this;

var Promise = require('bluebird');

onPrepare: function(){
  return Promise.delay(2000);
    .then(function(){
      browser.params.password = '12345';
    });
}

A better example is that the onPrepare function can be used to perform some async setup task like creating a fake User in your database to be able to login.

var User = require('./models/User');

onPrepare: function() {
  // returns a Promise
  return User.create({
    username: 'bulkan',
    password': 'igotdis'
  });
}

Test structure

Protractor uses Jasmine 1.3 and has updated it to automatically resolve Promises.

describe('Home page', function(){
  it('should have username input', function(){
    var username = element(by.css('#username'));
    expect(username.getText()).not.toBeNull();
  });
});

expect automatically resolves the Promise so there is no need to do the following

username.getText().then(function(text){
    expect(text).toEqual('bulkan');
});

Here is another example test that will verify that the home page is rendering Post titles. This time we have to chain onto the .then of the Promises.

var Promise = require('bluebird');
var Posts = require('./models/Posts');

describe('Home Page', function(){
  it('should have a list of posts', function(done){
    browser.get('/');

    var posts = element(by.repeater('post in posts').column('post.title'));

    Promise.cast(posts.map(function(elm){
        return elm.getInnerHtml();
    }))
    .then(function(titles){
        return titles.sort();
    })
    .then(function(titles){
        return Posts.findAll({attributes: 'title', order: 'title'})
          .tap(function(_titles){
            expect(titles).toEqual(_titles);
          })
    })
    .nodeify(done);
  });
});

We need to Promise.cast the posts.map as we call .nodeify which is a bluebird function. nodeify helps simplify tests by not needing to explicitly call done in the last then and in a catch

Jasmine supports asynchronous tests by passing in a callback function to an it, just like in Mocha. In the test above we find elements by the repeater. The template used might look like;

<div ng-repeat="post in posts">
    <h1> {{::post.title}} </h1>
</div>

There might be an easier/simpler way to do this so please do let me know by commenting below.

express-namespace hasnt been updated in nearly two years and it can now be replaced with the Router that comes with express 4.

Also I’ve found that the middleware mounting on namespace roots would mount it at the the application level. This is else that the router solves as it allows you to seperate out routes into different modules with its own middleware.

Here is the example from express-namespace written using the Router in express 4.0.

var express = require('express'),
    forumRouter = express.Router(),
    threadRouter = express.Router(),
    app = express();

forumRouter.get('/:id/((view)?)', function(req, res){
  res.send('GET forum ' + req.params.id);
});

forumRouter.get('/:id/edit', function(req, res){
  res.send('GET forum ' + req.params.id + ' edit page');
});


forumRouter.delete('/:id', function(req, res){
  res.send('DELETE forum ' + req.params.id);
});

app.use('/forum', forumRouter);

threadRouter.get('/:id/thread/:tid', function(req, res){
  res.send('GET forum ' + req.params.id + ' thread ' + req.params.tid);
});

forumRouter.use('/', threadRouter);

app.listen(3333);

A little bit more typing but easier to explain to others and no monkey patching weirdness of express-namespace.

The routes are more little more explicitly defined.

Hope this helps.

Also, Go already has a linked list implemented so better use that in your production code.

Lets begin with a quick refresher on linked lists and for a more detailed analysis read this PDF by Stanford University.

That being said have a look at the following diagram.

A linked list is a simple data structure that is used as the basis for other complex data structures. They are comprised of nodes each containing some data field and a reference field to the next node in the list. In the diagram above our nodes contain an integer field as the data. With this information let us write out the code for a node.

If we were using an Object Oriented language like Python then we could just create a class to represent the node. But Go is a procedural language and it does not have classes. That being said it does have a something similar called struct type which we can use to encapsulate the fields of a node.

type node struct {
    data int
    next *node
}

Here we define a new struct with a data field of type int. The next field has a type of a pointer to a node. Remember pointers store the memory address of the type it is pointing too.

Next up we, need to write the functions to insert and remove nodes into the list. Like I wrote previously Go does not have classes hence you would assume that there wont be methods, but you would be surprisingly wrong. Go has a feature of being able to associate functions with structs methods.

Here is what I mean.

EDIT

Ive simplified the AddToHead method

type LinkedList struct {
    head *node
}

func (ll *LinkedList) AddToHead(data int) {
    ll.head = &node{data: data, next: ll.head}
}

We first create a new struct with a field that is the pointer to the beginning of the linked list. All linked lists need this first reference to able to do any operations on it.

Then we create a method called AddToHead and associate it with the LinkedList struct. This method will create a node with the data that is passed in and then add this node to head of the list. What happens;

• when the list is empty ?
• when there is at least one node in the list (its not a empty list) ?

We handle the first case by checking if the head of the list ll.head is nil which is the zeroed value for a pointer in Go. If ll.head is nil we can just assign ll.head to our tmp node.

If ll.head is not nil we have at least one node in the linked list so we cant just just assign tmp to ll.head as we would lose the references to the rest of the linked list and all of the data. First we have to set the tmp nodes next reference to ll.head to not lose this reference, then reassign ll.head to tmp.

I hope this makes sense. Ive pushed this code onto a repository on GitHub called goll. Once you clone the repository run the following command to checkout the branch containing the code in this article.

git checkout -b part_one

Once this is branch is checked out look at the tests in ll_test.go

In the next post we will look at removing nodes from our linked list and possibly adding another method to insert in sort order.