Frederik Dietz

Vue.js Component Composition with Scoped Slots

2018-09-13T00:00:00+02:00

In the previous post we looked into slots and named slots to compose our components and content in a very flexible way. There’s one catch though we have not discussed. The content we pass to our slot is in the context of the parent component and not the child component. This sounds quite abstract, let’s build an example component and investigate the problem further!

List of Items Example

Probably the most canonical example for this kind of scenario is a todo list which renders for each todo a checkbox with name.

Example 1

<div id="demo">
  <div class="list">
    <div v-for="item in listItems" key="item.id" class="list-item">
      <input type="checkbox" v-model="item.completed" class="list-item__checkbox" />
      {{item.name}}
    </div>
  </div>
</div>

new Vue({ 
  el: '#demo',
  data: {
    listItems: [
      {id: 1, name: "item 1", completed: false},
      {id: 2, name: "item 2", completed: false},
      {id: 3, name: "item 3", completed: false}
    ]
  }
});

In the next step we refactor this code into a reusable list component and our goal is to leave it up to the client of the component to decide what and how to render the list item.

Refactor to Reusable List component

Let’s start with the implementation of the List component:

Vue.component("List", {
  template: "#template-list",
  props: {
    items: {
      type: Array, 
      default: []
    }
  }
});

<template id="template-list">  
  <div class="list">
    <div v-for="item in items" class="list-item">
      <slot></slot>
    </div>
  </div>
</template>

Following our previous examples we use the default slot to render a list item.

And now make use of our new component:

<div id="demo">
  <List :items="listItems">
    <div class="list-item">
      <input type="checkbox" v-model="item.completed" class="list-item__checkbox" />
      <div class="list-item__title">{{item.name}}</div>
    </div>
  </List>
</div>

But, when trying this example we run into a Javascript error message:

ReferenceError: item is not defined

It seems we cannot access item from our slot content. In fact the content we passed runs in the context of the parent and not the child component List.

Let’s verify this by printing the total number of items in our List component using the listItems data defined in our Vue instance.

<div id="demo">
  <List :items="listItems">
    <div class="list-item">
      {{listItems}}
    </div>
  </List>
</div>

That works because we run in the context of the parent component which is in this example the Vue instance. But, how can we pass the item data from our child <List> to our slot? This is where “scoped slots” come to the rescue!

Our component must pass along item as a prop to the slot itself:

<template id="template-list">  
  <div class="list">
    <div v-for="item in items" class="list-item">
      <slot :item="item"></slot>
    </div>
  </div>
</template>

Note, that it is important to pass this with a binding :item instead of only item!

Okay let’s try this again:

<div id="demo">
  <List :items="listItems">
    <div slot-scope="slotProps" class="list-item">
      <input type="checkbox" v-model="slotProps.item.completed" class="list-item__checkbox" />
      <div class="list-item__title">{{slotProps.item.name}}</div>
    </div>
  </List>
</div>

This time we use the slot-scope attribute and assign the name slotProps to it. Inside this scoped slot we can access all props passed along via this slotProps variable.

In Vue.js 2.5.0+, scope is no longer limited to the <template> element, but can instead be used on any element or component in the slot.

Extending the rendering of the list item

Now that we know how to pass data along we are free to extend the list item with some new functionality without changing the List component. It would be awesome if we could remove a todo item!

First of all we define the Vue app with a method to remove a todo item:

new Vue({ 
  el: '#demo',
  data: {
    listItems: [
      {id: 1, name: "item 1", completed: false},
      {id: 2, name: "item 2", completed: false},
      {id: 3, name: "item 3", completed: false}
    ]
  },
  methods: {
    remove(item) {
      this.listItems.splice(this.listItems.indexOf(item), 1);
    }
  }
});

We use the Javascript splice function to remove the item using it’s index from listItems.

Next, we use this method when rendering the list item:

<template slot-scope="slotProps" class="list-item">
  <input type="checkbox" v-model="slotProps.item.completed" class="list-item__checkbox" />
  <div class="list-item__title">{{slotProps.item.name}}</div>
  <button @click="remove(slotProps.item)" class="list-item__remove">×</button>
</template>

We add a button with a click event which calls our previously defined remove function. That’s it!

Using Destructuring for the `slot-scope`

We can further simplify this template by using a modern Javascript trick on the slot-scope attribute.

Here’s an example of using Javascript “destructuring” to access an attribute of an object:

const item = slotProps.item;
// same as 
const { item } = slotProps;

Instead of using the value slotProps we can now access the item directly.

Let’s use this in our template:

<template slot-scope="{item}" class="list-item">
  <input type="checkbox" v-model="item.completed" class="list-item__checkbox" />
  <div class="list-item__title">{{item.name}}</div>
  <button @click="remove(item)" class="list-item__remove">×</button>
</template>

This is easier to read because we can directly use the item variable instead of always going via slotProps.item.

Summary

In this chapter we used scoped slots to allow the parent to access data from the child. This gives us lots of new possibilities which weren’t possible before. This feature is especially useful in scenarios where you want to leave the rendering of the slot content to the user of the component. In our case the list component is very reusable by decoupling the rendering of the list items.

You can find the complete examples on Github.

If you like this post also check out my new course Vue.js Component Patterns Course.

Stay tuned for my upcoming post about headless components!

Vue.js Component Composition with Slots

2018-09-05T00:00:00+02:00

In the previous post we introduced the Vue.js component model and saw how to pass data to child components via props and how components can emit events up their parents.

In this chapter we focus on slots which give your components even more flexibility by injecting content into child components.

For this chapter we use a modal dialog as an example.

Modal Dialog with close button

Slots as Content Placeholders

We start with the smallest possible modal dialog implementation where the rendering of the modal is done using a v-if directive with the showModal variable.

new Vue({
  el: "#demo",
  data: {
    showModal: false
  }
});

The showModal value is set to true on button click:

<div id="demo">
  <modal v-if="showModal" @close="showModal = false">
    <h2>Modal Header</h2>
    <p>This is a paragraph inside the modal.</p>
  </modal>
  <button @click="showModal = true">Show Modal</button>
</div>

Our modal component children consist of some example HTML heading and paragraph we’d like to show inside the modal dialog.

Additionally, we listen to the @close event in case the user closes the modal dialog by pressing the close button.

Let’s have a look at the component:

<template id="template-modal">
  <div class="modal-background" @click.self="$emit('close')">
    <div class="modal-container">
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button @click="$emit('close')">Close</button>
      </div>
    </div>
  </div>
</template>

The modal-body contains a slot component which acts as a placeholder for our content we passed along above. It will not be visible in the browser DOM and will be replaced with our content.

Screenshot of Chrome Devtools Elements Tab

The modal-background class used to render a darkened overlay underneath the modal dialog. Additionally, it emits a click event to close the dialog. The self event modifier is used to make sure the event is only emitted when clicking the background and not when clicking the modal dialog itself.

Named Slots

In our previous example we used the “default slot” to pass along all content to our modal component. In the next example we improve the modal dialog component further by using “named slots” which enables users of the component to inject content in multiple places.

In order to become more flexible, we introduce named slots for the header, body and footer. Here is the definition of our markup:

<template id="template-modal">
  <div class="modal-background" @click.self="$emit('close')">
    <div class="modal-container">
      <div class="modal-header">
        <slot name="header"></slot>
      </div>
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="$emit('close')">Close</button>
        </slot>
      </div>
    </div>
  </div>
</template>

Note the usage of the name attribute for each slot and how each slot is wrapped in another div element. The component has complete control of the styling by using specific CSS classes modal-header, modal-body and modal-footer. And the user of the component can focus on the content only.

The usage of these named slots is quite similar to the default slot:

<modal v-if="showModal" @close="showModal = false">
  <h2 slot="header">Modal Header</h2>
  <div slot="body">Modal Body</div>
</modal>

We can use whatever HTML element we want for our content and use the slot attribute to select the appropriate slot we want to use. This not only includes HTML elements but also other Vue.js components.

Note, that the footer slot is not used in this example. By default the existing slot content will be used. In our case the footer slot is defined like this:

<slot name="footer">
  <button @click="$emit('close')">Close</button>
</slot>

So, we still have our Close button as is.

Summary

In this chapter we looked into slots and named slots to compose our components and content in a very flexible way. Stay tuned for my upcoming post on scoped slots!

If you like this post also check out my new course Vue.js Component Patterns Course.

Introduction to Components with Vue.js

2018-08-23T00:00:00+02:00

In this article I’d like to introduce you to the Vue.js component model and show the benefits of component reuse and encapsulation.

If you don’t know your way around Vue.js yet, I can highly recommmend the official Vue.js guide. But, please don’t be afraid of diving right into this article with me. I will point you to the relevant official documentation to give you some more background and a chance to read up on some more background material.

We will start with a simple example component and gradually improve its functionality.

Example 1 - Who doesn't like cats?

The HTML for this card component consists of a large image area and body with some text:

<div id="demo">
  <div class="image-card">
    <img class="image-card__image" src="cat.jpg" />
    <div class="image-card__body">
      <h3 class="image-card__title">Striped Tiger Cat</h3>
      <div class="image-card__author">Image by @lemepe</div>
    </div>
  </div>
</div>

We use the root HTML element with the demo id as our element to initiate Vue:

new Vue({ el: '#demo' })

What did we achieve? We used Vue.js to render this image card. But we can’t really reuse this code as is and we don’t want to copy and paste and thereby duplicating code.

The solution to our problem is to turn this into a component.

Components can be reused

So, let’s separate the image card from the remaining Vue.js application.

First we introduce a template element with all the image card content:

<template id="template-image-card">
  <div class="image-card">
    <img class="image-card__image" src="cat.jpg" />
    <div class="image-card__body">
      <h3>Striped Tiger Cat</h3>
      <div class="image-card__author">Image by @lemepe</div>
    </div>
  </div>
</template>

And we define the component with Vue.component and reference our template id template-image-card:

Vue.component('image-card', {
  template: "#template-image-card"
})

This is again wrapped in an HTML root element:

<div id="demo">
  <image-card></image-card>
  <image-card></image-card>
</div>

And then instantiated:

new Vue({ el: '#demo' })

And voila! We have two cats :-)

Example 2 - two cats!

Now, two cats are obviously better than one cat and we showed that we can have several instances of our image-card component on the same page.

We now have the means to reuse this component in our app. And if you think about it, it’s actually quite remarkable that this includes our HTML, CSS and Javascript code all wrapped up in a component.

But still, this component is not very useful, isn’t it? It is just not flexible enough! It would be awesome if we could change the image and text body for each component.

Passing data to child components as props

In order to customize the component’s behaviour, we will use props.

Let’s start with how we want to use our component:

<div id="demo">
  <image-card image-src="cat1.jpg" heading="Striped Tiger Cat" text="Image by @lemepe"></image-card>
  <image-card image-src="cat2.jpg" heading="Alternative Text" text="alternative subtitle"></image-card>
</div>

We introduce three new props image-src, heading, and text. When using the component these will be passed along as HTML attributes.

The prop definition of our component comes next:

Vue.component('image-card', {
  template: "#template-image-card",
  props: {
    heading: String,
    text: String,
    imageSrc: String
  }
});

Note, how the prop imageSrc is written in camelCase whereas the HTML attributes is using a dash image-src. You can read more about props in the official Vue.js Guide.

And the accompanying template uses this props in the camelCase format again:

<template id="template-image-card">
  <div class="image-card">
    <img class="image-card__image" :src="imageSrc" />
    <div class="image-card__body">
      <h3>{{heading}}</h3>
      <div class="image-card__author">{{text}}</div>
    </div>
  </div>
</template>

Let’s have a look at the result:

Example 3 - image cards with props

It worked! We have used two instances of our image-card component with different props.

Isn’t it nice that we can render a component differently using props as inputs?

Components have state

In my typical day job a product manager would most probably note that the image-card by itself looks quite nice with the cats and such. But, it is not really engaging yet. How about we let users like our cat and we could then keep a count of which cat had the most likes?

Components can have state using the data attribute:

Vue.component('image-card', {
    template: "#template-image-card",
    props: {
      heading: String,
      text: String,
      imageSrc: String
    },
    data: function () {
      return {
        count: 0
      }
    }
  });

Note, that data is returning a function instead of only a Javascript object data: { count: 0 }. This is required, so that each component instance can maintain an independent copy of the returned data. Read more about this in the Vue.js Guide.

Our template uses this count:

<template id="template-image-card">
  <div class="image-card">
      <img class="image-card__image" :src="imageSrc" />
    <div class="image-card__body">
        <h3 class="image-card__heading">{{heading}}</h3>
      <div class="image-card__author">{{text}}</div>
      <button class="image-card__heart" @click="count++">
        <svg viewBox="0 0 32 29.6">
          <path d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454 C30,20.335,16,28.261,16,28.261z"/>            
        </svg>
      </button>
      <div class="image-card__count" v-if="count > 0">{{count}}</div>
    </div>
  </div>
</template>

Example 4 - image card with state

We use an SVG element to render a little heart and on the click event we increment the count by 1. A little count is displayed next to the heart with the current count value.

If you are more interested in working with SVG, have a look in the Vue.js Cookbook for more information.

Note, that each component instance has its own local state of count which can be changed independently from the other component’s count.

Whereas in the previous example we only encapsulated the HTML code and made it more flexible with props. We now also encapsulate some business logic to keep count.

Whereas props are the input parameters of our component, the state is something internal to the component and is hidden from a user of our component’s code. We could change the name of our variable from count to clickCount and a user of our component wouldn’t even need to know. This is awesome because we can keep improving our component without breakings our user’s code.

Sending messages to parents with events

Now that we know how to pass data down to children and how to encapsulate state. There one thing missing: How can we get data back from a child?

In Vue.js we can emit a custom event from the component to it’s parent which listens to that specific event. This event can additionally pass along data.

In our example we can use $emit to send an event called change with data to the parent:

Vue.component('image-card', {
  template: "#template-image-card",
  props: {
    heading: String,
    text: String,
    imageSrc: String
  },
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count++;
      // leanpub-start-insert
      this.$emit("change", this.count);
      // leanpub-end-insert
    }
  }
});

We defined the method handleClick which not only increments our count state, but additionally uses $emit to send a message to our parent. The handleClick is called in the on click event of our heart:

<template id="template-image-card">
  <div class="image-card">
    <img class="image-card__image" :src="imageSrc" />
    <div class="image-card__body">
        <h3 class="image-card__heading">{{heading}}</h3>
      <div class="image-card__author">{{text}}</div>
      <button class="image-card__heart" @click="handleClick">
        <svg viewBox="0 0 32 29.6">
          <path d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454 C30,20.335,16,28.261,16,28.261z"/>            
        </svg>
      </button>
      <div class="image-card__count" v-if="count > 0">{{count}}</div>
    </div>
  </div>
</template>

Now the parent template can use this to listen to the change event to increment a totalCount:

<div id="demo">
  <image-card image-src="cat.jpg" heading="Striped Tiger Cat" text="Image by @lemepe" @change="handleChange"></image-card>
  <image-card image-src="cat.jpg" heading="Alternative Text" text="alternative subtitle" @change="handleChange"></image-card>
  <p>Total Count: {{totalCount}}</p>
</div>

Together with the Vue.js instance to keep track of a totalCount:

new Vue({
  el: '#demo',
  data: {
    totalCount: 0
  },
  methods: {
    handleChange(count) {
      console.log("count changed", count);
      this.totalCount++;
    }
  }
});

Note, that the parent doesn’t know about the component’s internals. It just knows that there’s a change event available and that the message sends the component’s count.

The event emitted via this.$emit("event") is only send to the parent component. It will not bubble up the component hierarchy similar to native DOM events.

Summary

In this article we explored the base concepts of a component model. We discussed component reuse and encapsulation, how to use props to pass data to children and how to emit events to pass messages to the parent.

If you like this post also check out my new course Vue.js Component Patterns Course.

Published Vue.js Component Patterns Course

2018-08-16T00:00:00+02:00

I’ve just published my new course 🎉 Vue.js Component Patterns 🎉

The course consists of an ebook (PDF, mobi, epub) and an optional set of exercises with solutions to apply what you learn.

Following the lean publishing style the course is still a work in progress, but can be purchased already. Early buyers get a discount and can help improve the course by joining the spectrum.chat Community. I’m looking forward to get in touch with readers and gather as much feedback as possible!

While we are at it: I’m currently searching for early reviewers to get some more thorough feedback on the current content. Ping me if you are interested! You get the whole thing for free, of course! Many thanks in advance for spreading the message!

Currently, the book consists of 12 chapters with around 30 examples which gradually build on each other in each chapter. Additionally, I’ve created 12 exercises with solutions.

I have currently 3 more chapters in the pipeline and want to work much more on the exercise/solutions part. Additionally, work has been started on a well behaving component checklist for buyers of the complete package.

FAQ

Why are there no videos?

That’s probably the first question which comes up, since nowadays most stuff is offered in some kind of video format. Honestly, this is just a matter of personal taste. Learning by watching videos was never my thing. I learn much faster when I can read my content and the exercises with solutions help applying what I learn.

Why focus on components?

Having build frontends in multiple frameworks, I’m fascinated by how all these frameworks converge on the very same idea of a reusable component. And it really is a repeating pattern. You have a component which encapsulates state, logic and even styling. With props in and events out, you can use these components to compose complex UIs. I am fascinated how this enables to transfer my knowledge from Angular, to React and Vue.js!

If you are a software developer who just moved from jQuery to Vue.js, this should be your next step in my humble opinion!

Get a discount

If you are a student or otherwise the book is too expensive for you, ping me for a discount!

Day 5 - How to build your own team chat in five days - Angular Filters and Directives

2015-04-17T00:00:00+02:00

This is part 5 of an ongoing series of blog posts. Read part 1 first and then come back, please!

Welcome back to day 5 of “How to build your own team chat in five days”! Since yesterday has been quite an extensive Socket.IO day where we switched back and forth between client and server, I figured it would be nice for the final day to work on the client only. I’d like to therefore focus today on adding some final touches to “chitchat”.

Relative date time Angular filter using moment.js

Let’s start with a simple Angular filter to render the message creation timestamp as a user-friendly relative time instead, for example “7 minutes ago”.

From timestamp to user-friendly relative time

The Angular filter relativeDate is used via a | (pipe) character:

<span class="date">{{messageContent.created_at | relativeDate }}</span>

And here’s the code leveraging moment.js for the actual conversion:

import moment from "moment";

export default function relativeDateFilter() {
  return function(dateString) {
    return moment(dateString).fromNow();
  };
}

Now how did I get moment.js installed? I’ve used the jspm install moment command and then it was only a matter of importing the library inside the filter.

Don’t forget that the relativeDate filter needs to be registered using the message-list module:

export default angular.module('MessageList', [])
  .filter('relativeDate', relativeDateFilter);

Rendering an avatar with an Angular directive

Instead of my own avatar image I wanted to use something which always works just based on the name of the user without the user uploading an image. The easiest solution I came up with is using the initials.

Rendering the avatar with its initials

This time I’m using an component directive again, which can be used in the message_list.html template like that:

<avatar user="messageContent.user"/>

The directive’s template itself looks pretty straight-forward:

<div class="avatar" style="background-color: {{color}}">
  <span class="initials">{{initials}}</span>
</div>

We need our directive to provide the initials and a background color to work with.

import template from "./avatar.html!text";

function avatarDirective() {
  let colorMapping = {};

  return {
    restrict: "E",
    replace: true,
    scope: {
      user: "="
    },
    template: template,
    link: function($scope) {

      // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
      function randomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }

      var unwatch = $scope.$watch("user", function(user) {
        if (user) {
          $scope.initials = (user.name[0] || "A");

          if (!colorMapping[user.id]) colorMapping[user.id] = randomColor();
          $scope.color    = colorMapping[user.id];

          unwatch();
        }
      });
    }
  };
}

avatarDirective.$inject = [];

export default avatarDirective;

The directive’s scope configuration is very similar to our other component directives. Let’s focus on the user which is passed as attribute to the directive.

I’ve setup a watcher using $scope.$watch to make sure that the user is set and resolved correctly. Then I use the first character of the name and a pretty random color generator for the color. Note, that I memorize the color for the specific user id in colorMapping, since we want it to stay the same at all times.

Dont’ forgot to register the directive to make it usable for Angular compiled templates! Let’s have another look at the message list next.

Formatting and auto linking the message

If you played around and wrote a couple of messages you notice that it doesn’t handle line breaks correctly. Additionally, it would be awesome if the message would automatically create links out of URLs in the message body.

Autolinking and line breaks

This is again a job for an Angular directive. Let’s have a look how it would be used in the message_list.html template:

<div class="message" formatted-message="messageContent.message"/>

The idea is that you pass in a string and it will set the text of the HTML element for you nicely formatted. Let’s have a look at the directives code:

import FormatMessageService from "./format_message.service";

function formattedMessage() {
  return {
    restrict: "A",
    scope: {
      "formattedMessage" : "="
    },
    link: function($scope, element, attrs) {
      var unwatch = $scope.$watch("formattedMessage", function(str) {
        if (str) {
          str = FormatMessageService.breakNewLine(str);
          str = FormatMessageService.autoLink(str);
          element.html(str);

          unwatch();
        }
      });
    }
  };
}

formattedMessage.$inject = [];

export default formattedMessage;

The directive is a behaviour directive and not a component directive. That’s way it’s usage is restricted to HTML attributes. We pass in the message string in the context and use an Angular watcher again to check if the message is resolved correctly before starting to change it.

Then we use a new service FormatMessageService to do the actual hard work. Before we go into further details, note that I’m calling the unwatch() function - the return value of the $watch call - to stop watching. Otherwise, it would reformat the message on each digest. Since we don’t intend to change the message, we can skip this here.

The FormatMessageService look the following:

import Autolinker from "autolinker";

export default class FormatMessageService {

  static breakNewLine(str) {
    return str.replace(/(\r|\n)/g, '<br>');
  }

  static autoLink(str) {
    return Autolinker.link(str, {
      newWindow: true,
      className: "auto-link",
      twitter: false,
      hashtag: false
    });
  }

}

It uses a simple string replace to replace \r and \n with a <br> element. The auto linking is a bit more complicated and since I didn’t want to make you suffer with a horrible piece of regular expression, I’ve used the library Autolinker.js

I didn't want to make you suffer with a horrible piece of regular expression.

Again the library was just an easy jspm install npm:autolink away and then I was able to import it in my service.

One last directive I’d like to discuss with you is trying to solve the scrolling behaviour.

Making sure the message scrolls to the bottom

You might have noticed that the message list scroll position stays the same even when you create or receive new messages. That’s quite annoying and users expect for their newly written messages to be visible right away.

Let’s look into how this can be achived with a directive. How about we simple extend the existing message list directive:

function messageListDirective() {
  return {
    // omitted directive configuration
    link: function($scope, element) {

      function scrollToBottom() {
        element.scrollTop(element.prop("scrollHeight"));
      }

      var observer = new window.MutationObserver(scrollToBottom);
      observer.observe(element[0], { childList: true });

      $scope.$on("$destroy", () => {
        observer.disconnect();
      });
    }
  };
}

We want to achieve a scroll effect to the bottom of the message list whenever a new message is added to the list. Fortunately, there’s a MutationObserver available in most browsers which let you register a callback in case the children of our list are added or removed.

The observer is initialized with the scrollToBottom function which sets the scroll position to the height of the scrollable view area.

Note, that I unregister the observer using the disconnect function when the scope is destroyed. We dont’ want to have any memory leaks in our app!

Now there’s one problem with the code. We don’t want to always scroll to the bottom of the message list. What if the user scrolled all the way up to some older messages. A new incoming message would scroll him/her down to the bottom of the list again - that would be certainly annoying!

var alreadyAtBottom = true;

function scrollToBottom() {
  if (alreadyAtBottom) {
    element.scrollTop(element.prop("scrollHeight"));
  }
}

function isAtBottom() {
  var scrollTop = element.scrollTop();
  var maxHeight = element.prop("scrollHeight") - element.prop("clientHeight");

  return scrollTop >= maxHeight;
}

// https://developer.mozilla.org/en/docs/Web/API/MutationObserver
var observer = new window.MutationObserver(scrollToBottom);

observer.observe(element[0], { childList: true });

var throttledOnScrollHandler = _.throttle(function() {
  alreadyAtBottom = isAtBottom();
}, 250);

element.on("scroll", throttledOnScrollHandler);

$scope.$on("$destroy", () => {
  element.off("scroll", throttledOnScrollHandler);
  observer.disconnect();
});

The idea how to solve this is pretty simple. I registered an event handler in case the user is scrolling and set the alreadyAtBottom to true if the user is actually at the bottom of the list already. Only then should the MutationObserver behaviour kick in.

The isAtBottom function checks the current scroll position, with the maximum height of the scollable area to check if the user is at the bottom. We can then use this information in the scrollToBottom function to decide if we want to scroll to the bottom.

Again note, that I unbind the scroll event again in order to not create any memory leaks. Additionally, I’ve used underscore.js throttle method for the scroll handler since we don’t want to waste precious CPU cycle when the user starts scrolling quickly.

Since all the code for the scroll to bottom behaviour is not dependend on any properties of the message list directive, it would probably be a good idea to refactor it out into it’s own directive. That way we can reuse it easily elsewhere.

Final words

Look at what we accomplished in only five days!

Final version

That’s already it for the final day. I really hope you enjoyed this series. I certainly had a lot of fun :-) Now it’s your turn to get your hands dirty and start experimenting with your own team chat!

About time you get your hands dirty and start experimenting with your own team chat!

If you want to learn more about structuring your Angular apps, let me know in the comments! Who knows - I might even consider turning this blog series into a little ebook! There are still so many things left to discuss!

The complete sourcecode can be found in the github repository.

Day 4 - How to build your own team chat in five days - ExpressJS, Socket.io and AngularJS component-based design patterns

2015-04-16T00:00:00+02:00

This is part 4 of an ongoing series of blog posts. Read part 1 first and then come back, please!

Welcome back to day 4 of “How to build your own team chat in five days”! I haven’t had the time to introduce you properly to the first “real” iteration of “chitchat”, yesterday.

First of all, the complete sourcecode can be found in the github repository.

And here’s again the directory structure:

├── public
│   ├── app
│   ├── images
│   ├── jspm_packages
│   ├── config.js
│   ├── styles
│   └── index.html
└── styles
    ├── base
    ├── layout
    ├── modules
    └── application.scss
├── node_modules
├── package.json
├── gulpfile.js
├── app.js
└── README.md

Let’s dive into the sourcecode starting with the ExpressJS part.

ExpressJS server side

If you already have experience in ExpressJS the following configuration and setup code in app.js should not surprise you:

var express        = require('express');
var bodyParser     = require('body-parser');
var logger         = require('morgan');
var methodOverride = require('method-override');
var multer         = require('multer');
var path           = require('path');

var app            = express();
var http           = require('http').createServer(app);

app.set('port', process.env.PORT || 3000);

app.use(logger('dev'));
app.use(methodOverride());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
}

// some code omitted here

http.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

This is a default setup for an ExpressJS server which serves static files from public/. Additionally, I’ve required the modules body-parser and method-override in order to handle JSON requests. So, this is a good basis to implement some routes for a JSON REST API or similar.

But, since we are going to look into the real-time part of messaging today, let’s see how to integrate Socket.io here first.

A simple chat using Socket.io

In order to make Socket.io work with ExpressJS we first have to initialize it:

// first the setup of ExpressJS itself
var app            = express();
var http           = require('http').createServer(app);

// now socket.io
var io = require('socket.io').listen(http);

// and then we can start the server
http.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

If you now start your server with node app.js, or npm start since that’s configured in package.json, you are now ready to initiate a websocket connection.

The Socket.io server goes one step further and also delivers the client library to integrate with. You can actually request it via the following URL localhost:3000/socket.io/socket.io.js and you can find me do the same in the public/index.html head via:

<script src="/socket.io/socket.io.js"></script>

After all the setup work is done we can finally initiate a Websocket connection with our client. I’ve put all the Socket.io code into public/app/web_socket.js, let’s have a look together:

export default class WebSocket {

  constructor() {
    this.init();
  }

  init() {
    let host = window.location.origin;
    console.log("WEBSOCKET connecting to", host);

    this.socket = io.connect(host);

    this.socket.on('connect', () => {
      let sessionId = this.socket.io.engine.id;

      console.log("WEBSOCKET connected with session id", sessionId);

      this.socket.emit('new_user', { id: sessionId });
    })
  }
}

WebSocket.$inject = [];

First we need the url to connect to via Websocket and window.location.origin returns http://localhost:3000 for us. Perfect!

Next is the actual connect via io.connect(host) and then we implement our first callback. Socket.io emits a connect event when the connection handshake was successful. And we use it and retrieve our sessionID from it. That is basically as good as it gets for our user in the current prototype.

The WebSocket class calls init() in the constructor in order to connect when initializing the class and I’m making sure there’s only a since instance by using it as an Angular service.

That’s why in main.js it is integrated in the following way:

import WebSocket from './web_socket';

angular.module('mainApp', [
    // dependencies omitted
  ]).service(WebSocket.name, WebSocket);

One last thing here to mention is that I emit a new_user event with the sessionID since I want to notify all interested parties that a new participant joined the chat.

Let’s go back to app.js on the server side to see how the connection handshake and new_user event is handled:

// [
//  { session_id: "5W5f-HSzolBOjMj7AAAC", name: "Peter" },
//  { session_id: "YXlbm_LmHD7oUGwkAAAD", name: "Martin"}
// ]
var participants = [];
var nameCounter  = 1;

io.on("connection", function(socket) {

  socket.on("new_user", function(data) {

    var newName = "Guest " + nameCounter++;
    participants.push({ id: data.id, name: newName });

    io.sockets.emit("new_connection", {
      user: {
        id: data.id,
        name: newName
      },
      sender:"system",
      created_at: new Date().toISOString(),
      participants: participants
    });
  });
});

First of all we have the connection event I’m listening here, which gets triggered whenever a new client is connected to the server. Then the server registered for the new_user event which we saw on the client-side above. And I basically create a dumb Guest <number> user name, add it to the array of participants alongside the user id and then emit another event new_connection which is send to inform all parties that the participants changed.

Wouldn’t it be cool if we would have some kind of currentUser on the client? Note that the new_connection payload also contains the user id and name alongside the participants array. We can use this event on the client side to set our current user including all the information (in our case name only) we gathered on the server.

So, let’s go back to web_socket.js on the client:

import Auth from "./auth";

export default class WebSocket {

  constructor($rootScope) {
    this.$rootScope = $rootScope;
    this.init();
  }

  init() {
    // code omitted

    this.socket.on('connect', () => {
      let sessionId = this.socket.io.engine.id;

      // code ommited

      // this is the new event handler
      this.socket.on('new_connection', (data) => {

        if (data.user.id === sessionId) {
          this.$rootScope.$apply(() => {
            Auth.setCurrentUser(data.user);
          });
        }
      });
    });
  }
}

WebSocket.$inject = ['$rootScope'];

I’ve changed a few things but let’s first focus on the new_connection event handler. It compares the user id which was send from the server with the sessionId and if they match we set the current user using the Auth class.

The Auth class is pretty simple:

export default class Auth {

  static setCurrentUser(user) {
    this.currentUser = user;
  }

  static getCurrentUser() {
    return this.currentUser;
  }
}

It contains a function for setting and getting the current user, but note that the methods are both static so we can access them using Auth.getCurrentUser() instead of creating an instance of Auth. I’ve could have used another Angular service in this case but I’d like to look into native ES6 ways of structuring my code first.

The attentive reader has already spotted one Angular-specific part in our WebSocket class. I’m wrapping the Auth.setCurrentUser call in a $rootScope.$apply to let Angular know that I’ve changed something which it might have access to on the scope. For example when rendering the current user name in our HTML document the change would not get reflected without this $apply call. BTW, this is a problem which will be gone in AngularJS 2.0 and I’m very much looking forward to it!

There’s one more function in our WebSocket class I’d like you to check out:

export default class WebSocket {

  // details omitted here

  on(key, callback) {
    this.socket.on(key, (data) => {
      this.$rootScope.$apply(() => {
        callback(data)
      });
    });
  }
}

This on function let’s other components in my code base register for events emitted by the server. It will come in handy when rendering the list of participants for example. Which brings me to the AngularJS side of the prototype.

AngularJS using a component-oriented approach

Let’s starts with the directory structure of the AngularJS app inside the public/ directory:

├── app
│   ├── message_form
│   ├── message_list
│   ├── participants_list
│   ├── sidebar
│   ├── auth.js
│   ├── bootstrap.js
│   ├── main.js
│   ├── vendor.js
│   └── web_socket.js
├── jspm_packages
├── styles
├── images
├── config.js
├── index.html

You already know main.js, bootstrap.js and most other files from the previous days. And we’ve already talked about auth.js and web_socket.js. So, let’s focus now on the way I’ve structured the AngularJS components in index.html:

<body>
  <sidebar></sidebar>

  <div class="main-content">

    <div class="main-header">
      <div class="left">
        <h2># general</h2>
      </div>
      <div class="right">
        <input class="search" type="search" placeholder="Search...">
      </div>
    </div>

    <message-list></message-list>
    <message-form></message-form>
  </div>
</body>

You can see that I’ve introduced new HTML elements for the sidebar, message-list and message-form using Angular directives. And some of these components contain again child components. This can be easily visualized too:

Components and nested components

That way the structure of my code follows very closely the actual visual structure of the dom elements. Here’s the directory structure of these components:

├── message_form
│   ├── message_form.controller.js
│   ├── message_form.directive.js
│   ├── message_form.html
│   ├── message_form.module.js
│   └── submit_form_on_return.directive.js
├── message_list
│   ├── message_list.controller.js
│   ├── message_list.directive.js
│   ├── message_list.html
│   └── message_list.module.js
├── participants_list
│   ├── participants_list.controller.js
│   ├── participants_list.directive.js
│   ├── participants_list.html
│   └── participants_list.module.js
├── sidebar
│   ├── sidebar.controller.js
│   ├── sidebar.directive.js
│   ├── sidebar.html
│   └── sidebar.module.js
├── auth.js
├── bootstrap.js
├── main.js
├── vendor.js
└── web_socket.js

The all look pretty much the same. I use a directory for each component and each component contains an Angular module and a directive which itself encapsulates the controller and the template.

Let’s have a look at some of these components next, starting with the message-form component.

Message Form Component

The message form component is responsible for rendering a textarea where the user can post new messages. Additionally, it also handles the server communication to create the message on the server.

Message form component

We start again with the visual aspects of the message_form.html:

<div class="message-form">
  <form ng-submit="ctrl.sendMessage(ctrl.message)" submit-form-on-return>
    <textarea ng-model="ctrl.message" placeholder="Press enter to send message" autofocus/>
  </form>
</div>

It contains a form with an ng-submit directive and a textarea with an ng-model. Nothing fancy here, except that I used a what I call a behaviour directive in comparison to the component directives which you have seen visualized above already. The directive submits the form when pressing the enter or return button on your keyboard.

Now you might have noticed that I use ctrl in the ng-submit and ng-model directives, as for example ctrl.message. So, let’s have a look at the directive implementation and more specifically how the scope is set up:

import template from "./message_form.html!text";
import MessageFormController from "./message_form.controller";

function messageFormDirective() {
  return {
    restrict: "E",
    replace: true,
    scope: {},
    template: template,
    bindToController: true,
    controllerAs: "ctrl",
    controller: MessageFormController
  };
}

messageFormDirective.$inject = [];

export default messageFormDirective;

Focusing on the scope specific parts here, I’ve started with creating an isolated scope with scope and the scope is bound to the controller using bindToController as ctrl using the controllerAs property.

Now all these properties are way to complicated and there’s a lot of duplication in my code, but with Angular 1.4 (Angular bindToController git commit) there’s most probably going to be a new syntax bindToController which combines all these properties into a single property - perfect for my component directives! And another nice step towards an easy migration path to Angular 2.0!

Using the ctrl inside the template makes sense but of course in the controller itself we just use the controller’s this syntax:

import Auth from "../auth";

class MessageFormController {

  constructor($http) {
    this.$http = $http;
  }

  sendMessage(message) {
    let params = {
      message:    message,
      created_at: new Date().toISOString(),
      user_id:    Auth.getCurrentUser().id
    };

    this.$http.post("/messages", params).then(
      () => {
        this.message = "";
      },
      (reason) => {
        console.log("error", reason);
      }
    );
  }

}

MessageFormController.$inject = ["$http"];

export default MessageFormController;

The sendMessage function is what’s called in the template and is responsible for doing an AJAX POST request to the /messages route. The JSON payload (default format in Angular’s $http service) contains the actual message, the current user id and the current date.

On the server side in app.js I’ve defined a route for this messages/ endpoint:

app.post("/messages", function(request, response) {
  var message = request.body.message;

  if(message && message.trim().length > 0) {
    var user_id    = request.body.user_id;
    var created_at = request.body.created_at;
    var user       = _.findWhere(participants, { id: user_id });

    // let our chatroom know there was a new message
    io.sockets.emit("incoming_message", { message: message, user: user, created_at: created_at });

    response.json(200, { message: "Message received" });
  } else {
    return response.json(400, { error: "Invalid message" });
  }
})

After checking if the request payload contains a message we extract the user and the created_at and emit an event incoming_message to let all other participants receive this message via Socket.io. Now, the logical next step here would be to add a persistence layer and actually store the message, but not for this current state of the prototype.

We want to focus next on the message list component which listens for this incoming_message event.

Message list component

The message list component renders a list of messages and handles the incoming_message event.

Message list component

Let’s start again with the template:

<div class="message-list">
  <div ng-repeat="messageContent in ctrl.messages" class="message-item {{messageContent.type}}">
    <img src="images/profile.jpg" class="avatar" ng-if="messageContent.type == 'message'">
    <div class="message-container">
      <div class="meta">
        <span class="author">{{messageContent.user.name}}</span> <span class="date">{{messageContent.created_at}}</span>
      </div>
      <div class="message">
        {{messageContent.message}}
      </div>
    </div>
  </div>
</div>

The message list uses the ng-repeat directive to render a list of messaging. Note, that I’ve introduced two types of messages. The type message is used for a user generated message, the type notification for a system generated message, for example: “User Guest 1 joined”, etc. Nothing fancy here, let’s skip the setup of the directive too, because it’s so similar to the other directives and focus instead on the controller:

class MessageListController {

  constructor(WebSocket) {
    this.messages = [];

    this.WebSocket = WebSocket;

    this.register();
  }

  register() {
    this.WebSocket.on('incoming_message', (data) => {
      this.handleIncomingMessage(data);
    });

    this.WebSocket.on('new_connection', (data) => {
      this.handleNewConnection(data);
    });

    this.WebSocket.on('user_disconnected', (data) => {
      this.handleUserDisconnected(data);
    });
  }

  handleIncomingMessage(data) {
    this.messages.push({ message: data.message, user: data.user, created_at: data.created_at, type: "message" });
  }

  handleUserDisconnected(data) {
    this.messages.push({ message: `User ${data.user.name} disconnected`, name: "System", created_at: data.created_at, type: "notification" });
  }

  handleNewConnection(data) {
    this.messages.push({ message: `User ${data.user.name} joined`, name: "System", created_at: data.created_at, type: "notification" });
  }

}

MessageListController.$inject = ["WebSocket"];

export default MessageListController;

The controller is starting with an empty array of messages and registers a whole lot of listeners for various events. The incoming_message event we discussed above already will simply add the user generated message to messages array. The other events new_connection and user_disconned will add system notification to the message list.

Now one could argue why this complexity on the client side and in fact I might decide for a future iteration to move all this to the server which then handles the various events and emits a single new_message. We’ll see how this works out for this week!

There are two more components namely the sidebar and the participants-list, but they are in fact pretty similar to what you’ve seen here already so I’m not going to go into further explaining them here.

That’s it for today! I’m going to get back to coding. So, stay tuned for tomorrow where I hopefully have the time to add some more polish to the frontend!

The complete sourcecode can be found in the github repository.

This is part 4 of an ongoing series of blog posts. Continue reading part 5.

Day 3 - How to build your own team chat in five days - ExpressJS, Socket.io and AngularJS

2015-04-15T00:00:00+02:00

This is part 3 of an ongoing series of blog posts. Read part 1 first and then come back, please!

Welcome back to day 3 of “How to build your own team chat in five days”!

After two days full of thinkering with the design/HTML/CSS frontend part and first steps towards a complete ES6 based AngularJS structure, I’m actually quite excited to present you the first prototype of “chitchat”. There’s the obligatory screenshot:

First prototype with real-time messaging backend

You can see on the left the “Guest 5” user’s browser and on the right the “Guest 6” user’s browser. And they have actually exchanged a couple of messages already and you can also see notifications generated by the system, as for example “User Guest 5 joined”.

Without a screenshot - it doesn't count!

I’ve implemented the backend using NodeJS and specifically ExpressJS and Socket.IO. And I’ve integrated my previous gulp workflow and design files. The whole project can be seen in the github repository.

Here’s the directory structure:

├── public
│   ├── app
│   ├── images
│   ├── jspm_packages
│   ├── config.js
│   ├── styles
│   └── index.html
└── styles
    ├── base
    ├── layout
    ├── modules
    └── application.scss
├── node_modules
├── package.json
├── gulpfile.js
├── app.js
└── README.md

The server backend can be found in app.js and all it’s required npm modules are listed in package.json and installed in node_modules.

The styles directory contains the same structure from my previous days and the same gulpfile.js. But, the configuration is slightly changed since we want the output of the SCSS compilation to be placed in public/styles. The public/ directory is served by the ExpressJS server and contains static files only. Main entry point as always is the index.html, the Javascript code can be found in app/ and we have the usual candidates for JSPM here too.

Let’s have a look at the code more closely tomorrow - sadly I don’t have the time today to finish the article. But stay tuned and see you tomorrow!

The complete sourcecode can be found in the github repository.

This is part 3 of an ongoing series of blog posts. Continue reading part 4.

Day 2 - How to build your own team chat in five days - ES6 Modules, AngularJS, SystemJS and JSPM

2015-04-14T00:00:00+02:00

This is part 2 of an ongoing series of blog posts. Read part 1 first and then come back, please!

Welcome again to Day 2! We have quite a lot to cover today. Since I’m very much into using ES6 syntax, I’ve spend lots of time looking into module loading and workflows today.

First we’ll have a look at module loading, then we develop an AngularJS seed project which can be used as a basis for new projects and finally we discuss how to use ES6 classes and module loading with AngularJS.

CommonJS vs AMD vs AngularJS Modules vs ES6 modules

Before we can get our hands dirty we have to look into how modules are loaded using Javascript. A module can mean various things to different people. For this article, let’s use this definition:

Modules allow code to be logically separated for developers. It additionally prevents namespace conflicts in Javascript.

Probably the most famous module in the Javascript community is jQuery but it also could be some shared code in your team or even a component or feature in your codebase.

Let’s look into a namespace conflict using jQuery as an example of the current state of module loading. If you use jQuery, it will set the global variable $. But, if you have an existing variable $ in your codebase those variables will conflict. jQuery’s solution was to introduce a noConflict mode which basically let’s you define the variable name of the library.

A rather clumsy solution which is why the community created lots of workarounds. The most interesting standards in my opinion are CommonJS due to its popularity in the NodeJS community and AMD (Asynchronous Module Definition) with the most popular implementation being Require.JS.

CommonJS is commonly used with NodeJS where Javascript is executed on the server. In this case all modules are loaded synchronously. This is in contrast to AMD which was designed to be used in browsers on the client side where modules are loaded asynchronously. Somewhere in between lies browserify which uses the CommonJS standard to bundle all Javascript code on the server before running it on the client. If you are interested in all the glory details I can recommend Addy Osmani - Writing modular Javascript with AMD, CommonJS & ES Harmony.

Now when AngularJS appeared it introduced dependency injection. AngularJS modules, controllers, directives etc. can define their dependencies and everything is taken care of for the developer. One can even use dependency injection to mock things like HTTP requests in unit tests. Great! But, it relies on all the Javascript to be available in the browser and is not able to request modules asynchronously.

There are are projects which combined ui-router with ocLazyLoad to lazy load angular modules as defined by the routing configuration. But, this feels more like another workaround and even more specific due to its coupling with Angular’s routing configuration.

Now here come EcmaScript 6 modules to the rescue. The standard tries to make both users of CommonJS and AMD happy and (hopefully) solves all our problems.

Let’s have a look at an example with named exports:

// lib.js
export function sum(x, y) {
  return x + y;
}

export function multiply(x, y) {
  return x * y;
}

// main.js
import {sum, multiply} from "./lib";

console.log(sum(1, 2));
console.log(multiply(1, 2));

Here’s another example with a default export:

// lib.js
export default function sum(x, y) {
  return x + y;
}

// main.js
import sum from "./lib";

console.log(sum(1, 2));

The design goals of the spec are the following:

Default exports are favoured
Static module structure
Support for both synchronous and asynchronous module loading
Support for cyclic dependencies between modules

For even more details read Axel Rauschmayer - ECMAScript 6 modules: the final syntax.

Now, the only problem is that browsers don’t all support the new standard yet, so we have to transpile our code to ES5 in order to work with the new module syntax today.

Gulp Workflow using gulp with SystemJS and JSPM

Let’s have a look into a gulp workflow which uses SystemJS and JSPM.

SystemJS builds on top of the es6-module-loader polyfill and adds the capability to load modules that are defined in a variety of syntaxes:

CommonJS
AMD
ES6 Modules (using either Babel or traceur-compiler)
modules that export a global variable (as for example jQuery) via a shim config

JSPM is a Javascript package manager that sits on top of SystemJS and is able to load modules directory from any registry such as npm, github or bower. In development mode it loads modules as separate files with ES6 and in production it optimizes the modules into a self-executing bundle (without runtime dependency).

This is how our index.html file looks using SystemJS:

<!doctype html>
<html>
  <head>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app/bootstrap');
    </script>
  </head>
  <body>
    // fancy stuff here
  </body>
</html>

First it loads the SystemJS library and then the config.js file which contains the configuration for your modules. Then we can use System.import, the proposed browser loader API for dynamically loading ES6 modules, to import the file app/bootstrap.

Now JSPM is used to install all our dependencies using the jspm install command, for example:

jspm install jquery

JSPM looks up jquery in its registry and installs jQuery in the current file system. Additionally, it adds jQuery to the package.json, so that your jQuery is only a jspm install away in the future.

If we look at config.js, we can see that JSPM has modified it:

System.config({
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js"
  }
});

System.config({
  "map": {
    "jquery": "github:components/jquery@^2.1.3"
  }
});

System.config({
  "versions": {
    "github:components/jquery": "2.1.3"
  }
});

These paths and mappings tell JSPM how to install and resolve your module. Most of the time you wont’ need to change anything but sometimes it can be useful to map a longer package name to a smaller one.

Now, you can load jQuery using ES6 syntax:

import $ from 'jquery';

console.log($.fn.jquery);

JSPM has several advantages over tools like RequireJS or browserify. With RequireJS you have to install via tools like bower, but then manage the mappings and naming of modules manually. Additionally, with SystemJS you don’t need any type of build tool since it’s all run and compiled in the browser.

Angular Seed Project

Let’s now check out the Angular seed project. It contains some Angular example code to request and render a list of Github users and to showcase Angular working together with ES6 features.

Using Angular to render a list of Github users

Let’s have a look into the structure:

├── app
│   ├── bootstrap.js
│   ├── main.js
│   ├── user.controller.js
│   ├── user.service.js
│   ├── user_list
│   │   ├── reverse_name.service.js
│   │   ├── user_list.controller.js
│   │   ├── user_list.directive.js
│   │   ├── user_list.module.js
│   │   └── user_list_directive.html
│   └── vendor.js
├── styles
├── node_modules
├── jspm_packages
├── index.html
├── config.js
├── gulpfile.js
├── package.json
└── README.md

The index.html file contains the SystemJS based bootstrap as describe above and some initial Angular example code:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/application.css">

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app/bootstrap');
    </script>
  </head>
  <body>

    <div ng-controller="UserController as ctrl">

      <h1 ng-hide="!ctrl.loading">Loading list of Github users</h1>

      <div class="medium progress" ng-show="ctrl.loading">
        <div>Loading…</div>
      </div>

      <user-list users="ctrl.users"><user-list>
    </div>

  </body>
</html>

Since we use SystemJS we cannot use the ng-app directive in our index.html. We need to load the main Angular module using SystemJS explicitly. Let’s have a look into app/bootstrap.js which starts our Angular app:

import mainModule from './main';

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainModule.name], { strictDi: true });
});

And here’s our first import statement which contains our actual main module of our shiny new Angular app:

import './vendor';

import UserController from './user.controller';
import UserService from './user.service';

import userListModule from './user_list/user_list.module';

let mainModule = angular.module('mainApp', [userListModule.name])
  .controller(UserController.name, UserController)
  .service(UserService.name, UserService);

export default mainModule;

Note, the last line where the mainModule is exported using the default export mechanism which let’s us import it using: import mainModule from './main';.

Next we are going to look into how to use ES6 classes to define Angular controllers and services.

AngularJS using ES6 classes and modules

Let’s start with the UserController class imported in main.js above since it is the first mentioned in index.html:

class UserController {

  constructor(UserService) {
    this.UserService = UserService;
    this.loading = true;
    this.init();
  }

  init() {
    this.UserService.getUsers().then(users => {
      this.users = users;
      this.loading = false;
    });
  }
}

UserController.$inject = ['UserService'];

export default UserController;

The UserController uses the new ES6 constructor to define it’s dependency to the UserService - it is a best practice to handle all model-specific business logic (as for example loading users from the backend) in services. In the init() function it actually requests the users and assigns them to the users attribute. Note the use of the => (hash rocket) syntax which is a shortcut for a function and additionally binds the this context to the UserController class.

The loading attribute is used in index.html to show a loading indicator while the user list is fetched.

Angular is now able to dependency inject the UserService into the UserController since we imported it and registered it in the main module definition. Here’s the code again from our main.js file:

import UserService from './user.service';

let mainModule = angular.module('mainApp', [userListModule.name])
  .controller(UserController.name, UserController)
  .service(UserService.name, UserService);

Note that our service was registered using the service function instead of the factory function. The service function expects a constructor function (an ES6 class) - similar to the controller function - whereas the factory function is syntactic sugar in case you are not using classes.

Now since we use strictDi (strict dependency injection) we must declare our injected class explicitly for UserController. This is also required for production builds which minify the Javascript code.

UserController.$inject = ['UserService'];

Okay, so we have an initial Angular Controller and Service running. Let’s have a look into the user list directive:

<div ng-controller="UserController as ctrl">
  <user-list users="ctrl.users"><user-list>
</user-list>

The user list directive is defined very traditionally and not as an ES6 class:

import template from "./user_list_directive.html!text";
import UserListController from "./user_list.controller";

function userListDirective(ReverseNameService) {
  return {
    restrict: "E",
    scope: {
      users: "="
    },
    template: template,
    bindToController: true,
    controllerAs: "ctrl",
    controller: UserListController,
    link: function($scope, element) {
      element.on("mouseover", "li", function(event) {
        let name = $(event.currentTarget).find(".primary").text();
        let reverseName = ReverseNameService.reverse(name);

        console.log("hover... ", name, "reverse", reverseName);
      });
    }
  };
}

userListDirective.$inject = ["ReverseNameService"];

export default userListDirective;

Here I export the function as is, since this is the only straight-forward way to support dependency injection.

The user list is a “component” in the sense that it contains a controller and a template with the responsibility to render the user list and handle various events. I’m therefore using the bindToController syntax and an externally defined UserListController for the business logic and use the isolated scope to define the users attribute as the external interface for passing data from index.html to the directive. I’m already looking forward to use Angular 1.4 since it supports a much cleaner syntax for bindToController. There’s currently a lot of code required to setup such a component.

Have you spotted the strange import statement for the template?

import template from "./user_list_directive.html!text";

I’m using here the SystemJS text plugin to load the HTML template and then assign this template as a string to the directive. Note, the !text expression at the end of the import statement.

This must be the most horrible example of a service usage inside a directive ever! Don't try this at home.

Never mind my weird link function where I tried hard to come up with an example to use the injected ReverseNameService, just to prove my point that you can use dependency injection in this context.

Now if you followed me closely you found that I’m using the Angular module syntax and the ES6 module syntax side by side. Why is that?

All controllers, directives or services which are dependency injected are required to be registered via Angular’s controller, service and directive functions. So, I’ve used ES6 modules wherever possible and only used Angular modules where required by Angular. As we are heading towards Angular 2.0 all these Angular modules will be replaced with ES6 modules anyways and I tried to structure the code in a way which makes a migration as simple as possible.

Now, in my case I created a user list Angular module which contains everything required for the user list directive. It is therefore completely self contained and could be easily copy and pasted into another project. It does not have any dependencies to it’s parent module.

To finish off for today I will show you the UserListController quickly:

class UserListController {

  constructor() {
  }

  onClick(user) {
    console.log("on user clicked", user)
  }
}

UserListController.$inject = [];

export default UserListController;

Nothing new here really. The onClick function is referenced in the template of the directive here:

<ul class="user-list">
  <li ng-repeat="user in ctrl.users" ng-click="ctrl.onClick(user)">
    <img ng-src="" width="36px" height="36px" alt="">
    <div class="meta">
      <span class="primary"></span>
      <span class="secondary"></span>
    </div>
  </li>
</ul>

If you want to use the Angular seed project for your own projects you can directly access and git clone it from github.com/fdietz/angular_es6_seed.

That’s it for today! Hope I haven’t lost you in the confusing world of Javascript modules. See you tomorrow but this time I’m really starting with “chitchat” ;-)

This is part 2 of an ongoing series of blog posts. Continue reading part 3.

Day 1 - How to build your own team chat in five days

2015-04-13T00:00:00+02:00

Hi and welcome to my little experiment! I’d like to built my own team chat in five days and invite you to join me along the way.

You probably know Slack, Hipchat, Campfire and the like. All these are without a doubt excellent services but they are not as open as I’d like them to be. This starts with the fact that there are all data silos and use proprietary protocols and obviously the source code is not open to contribution.

In the next 5 days I’d like to show you how to build your own chat service and will give you a basis you can work with to add your own unique ideas. So, the emphasize here will be learning how to build your own system in comparison to all these hipster startups out there who focus on saving the world ;-)

Obligatory hipster workspace pic

Since I haven’t really done any upfront planing or detailed product definition we both won’t really know how this is going to work out or how the final product is going to look like. But, I promise this will not be just another polished blog serious about how to use Socket.IO to implement a chat room :) Instead I’m going to write my progress in this blog on a daily basis and you can join me along for the ride. It’ll be hopefully much more personal and give you more insights how I approach such a task.

I will focus much more on the design and implementation challenges on the frontend instead of the backend. So, this will be especially interesting for AngularJS developers who want to learn how to structure more complex projects. For some more AngularJS background knowledge I recommend Recipes with AngularJS from your truly! Since I’d like to challenge myself, I’m going to use ES6 which is currently not really well documented. But, it is certainly the future of Javascript development and I’m eager to get to know it better in these upcoming days.

As a prerequisite I assume you have basic knowledge of HTML, CSS, Javascript and AngularJS - bonus points for NodeJS and things like gulp.

So, take a deep breath and a cup of tea and let’s get started!

Usually when I start working on a “new” idea, I first search on Google what’s out there already. Resources as for example dribbble or behance are a great source of inspiration for me - especially since I’m not a designer! So without further gequassel I proudly present you “chitchat”.

HTML mockup of chitchat

I know - it’s not pixel perfect. But, it’s a first iteration done in HTML, SCSS and is therefore a nice basis for adding interaction using AngularJS later on.

You can already see where this is heading from the mockup. The sidebar shows some public channels and some private one-to-one conversations. So, we will definitely need some user management and a way to join a public channel. The little red badge shows two recent messages and I should probably come up with a distinction for important messages as for example a person being mentioned vs an ongoing conversation in a public channel.

Then there’s the main view showing the ongoing conversation and of course it would be awesome if we can get this to work real time using a server push mechanism. I’m not sure yet if adding support for file sharing should be part of this five days sprint.

In the right hand corner there’s a search field, but we’ll have to see if there’s enough time for that at the end of the week.

You can find the complete sourcecode on the accompanying Github repo. You can either download the repository as a zip file or use git to clone the repository.

Let’s have a look at the content using the tree command:

└── day_1
    ├── fonts
    ├── images
    ├── styles
    ├── gulpfile.js
    ├── index.html
    ├── package.json
    └── README.md

I’ve started with a simple index.html and created directories for fonts, images and css files. The package.json and gulpfile.js are used for my CSS workflow. I’m a fan of Sass and the SMACSS style guide, hence the directory structure:

└── styles
    ├── application.css
    ├── application.scss
    ├── base
    │   ├── _fonts.scss
    │   ├── _globals.scss
    │   ├── _normalize.scss
    │   └── _variables.scss
    ├── layout
    │   └── _scaffold.scss
    ├── modules
    │   ├── _badge.scss
    │   ├── _input.scss
    │   ├── _main_header.scss
    │   ├── _message_form.scss
    │   ├── _message_list.scss
    │   └── _sidebar.scss
    └── pages

I’ve used a gulp task to compile my scss files to css for me.

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
  gulp.src('styles/*.scss')
    .pipe(sourcemaps.init())
      .pipe(sass({ style: 'expanded' }))
      .pipe(autoprefixer('last 2 version'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('styles'))
});

gulp.task('watch', function(){
  gulp.watch('./styles/**/*.scss', ['styles']);
});

gulp.task('build', ['styles']);

gulp.task('default', ['build', 'watch']);

You can run it by executing gulp on the commandline. This will trigger the default task which will in turn call the build task. A file watcher is used to rebuild the CSS on file changes using the watch task. The output will be place in styles/application.css.

You can find the complete sourcecode on the accompanying Github repo.

Okidoki. This is it for day 1 - hope you liked it! Tomorrow we will look into using AngularJS to structure our team chat and get some initial interaction going. See you tomorrow!

This is part 1 of an ongoing series of blog posts. Continue reading part 2.

Recipes with Angular.js is free

2014-01-12T00:00:00+01:00

I’m very pleased to announce that my ebook “Recipes with Angular.js” is now free under Creative Commons License.

That means you are free to copy, distribute, adapt and even make commercial use of it! The examples repository was always free, but now you can also use the manuscript. Note, that you can still support me and buy the book on leanpub or Amazon.

Last but not least, I’ve created a new website Recipes with Angular.js which contains all the original book’s content nicely formatted, with full-text search and direct edit support using JSFiddle. From now on this will be the place to look for new recipes or fine-tune existing ones. Everyone can contribute via github!

Many thanks again for all my readers who initially bought the book and supported the ongoing work!

Team Dashboard v2.0.0 released

2013-05-05T00:00:00+02:00

I’ve just tagged the v2.0.0 release of Team Dashboard!

The changelog has all the gory details. For a more user friendly read visit:

Recipes with Angular.js: Update available

2013-05-05T00:00:00+02:00

I’ve just published a new version of Recipes with Angular.js!

Many changes were made to improve the overall quality, some chapters were completely rewritten. You will be delighted to find improved formatting of the sourcecode examples to fit nicely on the PDF version and each recipe has a direct link to the complete sourcecode on Github.

Additionally, it features a new chapter on deferred and promise usage in Angular.js, which was requested by some readers.

The is the second to the last and final update to the book. The last update will only include fixes by my english editor.

Hope you like it!

Team Dashboard 2 Release Candidate 2

2013-04-14T00:00:00+02:00

This is the second release candidate of Team Dashboard and hopefully the last one before the final version 2 release. There are some really exciting new features in this release candidate. So, please give it a try and report issues!

Changelog:

Number widget optionally displays a metric suffix.
Number widget supports datapoints data source (number widget now completely replaced the counter widget which was already removed in RC1) as for example graphite (choose datapoints as source to view all options)
New meter widget (using jQuery knob) which uses the number data source.
New alert widget with its own data source. Initially supports sensu (thanks to DraganMileski). Should be useful for future plugins as for example nagios alerts or similar.
Graph widget supports max y-axis value. Useful if your data has lots of outliers which makes the automatic scaling work nicely again.
The graph widget has a max y axis value option which is useful if the autoscaling is confused by very large outliers
Unicorn is the new default rack server. This makes deployment on a free Heroku plan a viable option (#68 - thanks to deathowl)
Dashboards can be shown in fullscreen mode using bigscreen.js (Thanks to ngbroadbent)
Bugfix: Broken Number::NewRelic source #78
Bugfix: CI widget loses the light indicator #76
Bugfix: Sensu bugfixes #72 (thanks to DraganMileski)
Bugfix: Changing targets length #71 (thanks to hamann)
Bugfix: Exception Tracker Widget does not work #77

Team Dashboard 2 Release Candidate

2013-03-16T00:00:00+01:00

May I present you the all new Team Dashboard version 2.

It is a release candidate to get things stable again, so give it a try and report bugs!

The migration guide should help you getting started.

Changelog:

I’ve replaced Backbone.js and now use Angular.js. Some of you may already know that I’m working on a leanpub book Recipes with Angular.js. So, this shouldn’t be really surprising. I don’t want to start an emotional discussion about what’s the better Javascript MVC Framework, but for me using Angular.js leads to less code which is much easier to maintain and understand.
Moving to Angular.js I was finally able to make it super straight forward to add new widgets. Read more in the Widgets Developer Guide
Data source plugin implementations are now simplified too in order to make adding new sources even easier. All data source plugins use a single controller to expose the JSON API to the rails app. Additionally, I’ve deprecated the plugin repository since there wasn’t much going on anyways. Instead I will focus to have good quality plugins shipped with Team Dashboard out of the box. There’s a Data Source Plugin Developer Guide available as well.
The counter and number widgets were combined into the number widget. This was a source of confusion for beginners anyways.
The dashboard uses gridster.js instead of jQuery UI Sortable which finally makes it possible to have different widget sizes in both dimensions. This also means that all widgets support only a single data source - leading to much simpler configuration and API usage.
New data source plugins: Pingdom, Shell script, Hockey App, Errbit and New Relic
A more fine tuned look and feel for the widgets

Last but not least. I’d like to make it as easy as possible to contribute to Team Dashboard. Learning a new framework always takes time. That’s why every contributor will receive a free copy of my book!

Recipes with Angular.js: New Chapters Added

2013-02-26T00:00:00+01:00

I’ve just published a new version of Recipes with Angular.js! with the next chapters.

Chapter 8 Common User Interface Patterns:

Filtering and Sorting a List
Paginating Through Client-Side Data
Paginating Through Server-Side Data
Paginating Using Infinite Results
Displaying a Flash Notice/Failure Message
Editing Text In-Place using HTML5 ContentEditable
Displaying a Modal Dialog
Displaying a Loading Spinner

Chapter 9 Backend Integration with Ruby on Rails:

Consuming REST APIs
Implementing Client-Side Routing
Validating Forms Server-Side

Chapter 10 Backend Integration with Node Express:

Consuming REST APIs
Implementing Client-Side Routing

Hope you like the new content! Please let me know if you have any suggestions or find mistakes!

I’ve got now all the planned content in the book and like to focus next on the quality before adding new recipes. Additionally, I found a professional copy writer who is correcting my English writing.

Angular.js Controllers: Changing a Model Value with a Controller Function

2013-02-19T00:00:00+01:00

This is a post of a series about Angular.js, the Superheroic Javascript MVW Framework. It is extracted from my ebook Recipes with Angular.js. If you like this post please support me and buy it!

Problem

You want to increment a model value by 1.

Solution

Implement an increment function which changes the scope.

We use the ng-init Directive to call the incrementValue function in the template.

<div ng-controller="MyCtrl">
  <p ng-init="incrementValue(5)">{{value}}</p>
</div>

The controller defines the default value and the incrementValue function.

function MyCtrl($scope) {
  $scope.value = 1;

  $scope.incrementValue = function(value) {
    $scope.value += 1;
  };
}

Discussion

The ng-init directive is executed on page load and calls the function defined in MyCtrl.

You can find the complete example on Github.

Recipes with Angular.js: Updated With New Content

2013-02-16T00:00:00+01:00

I’ve just published a new version of Recipes with Angular.js! It contains numerous small fixes and improvements but also a lot of new content for you!

Chapter 2 Controllers has new recipes:

Sharing Models Between Nested Controllers
Sharing Code Between Controllers using Services

The new chapter: URLs, Routing and Partials:

Client-Side Routing with Hashbang URLs
Using Regular URLs with the HTML5 History API
Using Route Location to Implement a Navigation Menu
Listening on Route Changes to Implement a Login Mechanism

And another new chapter: Using Forms:

Implementing a Basic Form
Validating a Form Model Client-Side
Displaying Form Validation Errors
Displaying Form Validation Errors with the Twitter Bootstrap Framework
Only Enabling the Submit Button if the Form is Valid
Implementing Custom Validations

Please, let me know if you are interested in more recipes in these particular chapters.

Next, I’m going to work on the Common User Interface Patterns chapter, which will be a lot of fun. You are going to learn about severals types of Pagination, Sorting, Filtering, Flash Messages, Modal Dialogs, Loading Spinners, etc.

I hope you enjoy the new content.

Angular.js Controllers - Assigning a Default Value to a Model

2013-02-15T00:00:00+01:00

This is the first of a series of posts about Angular.js, the Superheroic Javascript MVW Framework. It is extracted from my ebook Recipes with Angular.js. If you like this post please support me and buy it!

Problem

You want to assign a default value to the scope in the controllers context.

Solution

Use the ng-controller directive in your template:

<div ng-controller="MyCtrl">
  <p>{{value}}</p>
</div>

And define the scope variable in your controller function:

var MyCtrl = function($scope) {
  $scope.value = "some value";
};

Discussion

Depending on where you use the ng-controller directive, you define its assigned scope. The scope is hierachical and follows the DOM nodes hierarchy. In our example the value expression is correctly evaluated to some value, since value is set in the MyCtrl controller.

Note, that this would not work if the value expression is moved outside the controllers scope:

<p>{{value}}</p>

<div ng-controller="MyCtrl">
</div>

In this case {{value}} will simply be not rendered at all.

You can find the complete example on Github.

Team Dashboard v0.4 released

2012-09-06T00:00:00+02:00

This was a busy week, lots of new stuff to check out!

Most notable changes are:

Graphite Function Editing made easy with a built-in function browser (including reference documentation) and improved error reporting.
HTTP Proxy Sources also got a preview mode where you can see the JSON response and can easily select a specific attribute from it.
All source plugins can easily specify their own configuration params. These will automatically appear in the widget editor dialog and are persisted as part of the widget configuration. The existing internal sources are already using it. Documentation can be found in the README.

Apart from that we fixed a nasty bug in the Ganglia source (Issue), another one in the Graphite source (you can now again fetch multiple targets Issue), updated to the latest Twitter Bootstrap version and documented Team Dashboard’s own REST API.

Warning: This release might break some widget configuration due to the changes in the source plugin configuration. Sorry for any inconveniences!

So, go ahead and git pull to the latest version!

Milestone v0.4 Issues

More information on how to get started on github.

Thanks go to XING for sponsoring this weeks development on Team Dashboard

Team Dashboard v0.3 released

2012-08-25T00:00:00+02:00

This release includes 69 commits of shiny new features, bug fixes and polishing.

Most notable changes are:

Improved targets/metrics selection UI element #7
Do not always re-fetch metrics/targets collection #6
Use faraday gem and provide single place for all HTTP requests #8
Improved error handling with helpful errors messages #9
Travis CI build

So, go ahead and git pull to the latest version!

More information on how to get started on github.

Team Dashboard supports Ganglia

2012-08-09T00:00:00+02:00

Team Dashboard adds a Ganglia data source to show your system metrics as graph or counter widgets.

In order to get started you have to configure the URL to your Ganglia installation. The easiest way is to use the environment variable GANGLIA_URL.

For example:

GANGLIA_URL=http://ganglia-host rails server

More information on how to get started on github.

Team Dashboard introduces Data Source Plugin Repository

2012-08-09T00:00:00+02:00

Team Dashboard supports all kinds of data sources. But, there’s always something missing.

I’d like to use the team_dashboard_plugins Github repository as the central place to browse, download and request plugins.

More information on how to get started on github.

Team Dashboard supports Jenkins and Travis with a new widget

2012-08-05T00:00:00+02:00

Team Dashboard adds a new widget for all kinds of Continous Integration Server Build Status Information. Jenkins and Travis CI data sources are included out of the box and its easy to add even more.

Team Dashboard HTTP Proxy support much cooler now

2012-08-05T00:00:00+02:00

Team Dashboard Number and Boolean Widgets support a HTTP Proxy data source already. Idea is to give it a URL of an existing JSON service which follows the format as specified in the documentation. It will then extract the current value from the JSON structure for you.

But what if you have an existing service with a different structure? With the new version you can additionally set a value path using a dot notation to select a specific value in your JSON structure.

Example JSON:

{ “parent” : { “child” : { “child2” : “myValue” } } }

A value path of “parent.child.child2” would resolve “myValue”.

Team Dashboard cloc stats

2012-07-29T00:00:00+02:00

These are the cloc (Count Lines of Code) stats for Team Dashboard:

> cloc . --exclude-dir=vendor
     201 text files.
     198 unique files.
      92 files ignored.

http://cloc.sourceforge.net v 1.53  T=0.5 s (278.0 files/s, 10878.0 lines/s)
--------------------------------------------------------------------------------
Language                      files          blank        comment           code
--------------------------------------------------------------------------------
Javascript                       56            562             65           2587
Ruby                             66            236            170           1074
Bourne Shell                      8             54            137            249
HTML                              3              3              3             71
YAML                              4             10             77             36
CSS                               1             11              8             34
Bourne Again Shell                1              5             29             18
--------------------------------------------------------------------------------
SUM:                            139            881            489           4069
--------------------------------------------------------------------------------

Team Dashboard released to the public

2012-07-28T00:00:00+02:00

I’ve finally released my weekend project Team Dashboard to the public.

Website: http://fdietz.github.com/team_dashboard/

Heroku hosted Demo: http://team-dashboard.herokuapp.com

An Introduction to JavaScript this

2009-09-27T00:00:00+02:00

Caffeinated Simpleton » Blog Archive » An Introduction to JavaScript’s “this”.Nice summary of using apply() and bind() to make functions work in the right context.

Adding Columns to large MySQL Tables Quickly

2009-09-19T00:00:00+02:00

Onehub • Adding Columns to large MySQL Tables Quickly.Simple Example Rails migration creates a copy of the original table and then deletes the old table while renaming the new table. Performance impact is frustratingly high - oh MySQL, sigh

State of the Couch

2009-09-08T00:00:00+02:00

http://jan.prima.de/plok/archives/180-The-State-of-the-Couch-The-Invited-Talk-at-the-Erlang-Workshop-at-ICFP-in-Edinburgh-in-2009.htmlNice summary of CouchDB’s status from Jan Lenhardt speaking at the Erlang Workshop at ICFP in Edinburgh. Especially interesting to me are his concerns for Erlang’s “Open Source-ness”. Remember how many problems the Java community had with similar problems? Or the benevolent dictatorship problems other projects have? It seems to help initially to get things rollin’ but in later stages it becomes more and more of a problem. Let’s see what’s going to happen next!

Why should I use ruby-config instead of ...

2009-09-07T00:00:00+02:00

Why should I use ruby-config instead of rvm? From what I can tell after examining their website is that rvm works very similar to ruby-config.

It has the same basic feature set and works quite similar by changing symlinks and environment settings. It definitely looks more polished to me and has most probably seen more usage lately due to its recent popularity. BTW, I love their website design.

So, what speaks for ruby-config? It is written in Ruby and has complete test coverage. It will probably attract the more ruby-oriented developer, since it has a low entry barrier for contributing back. Personally, I refrain from maintaining large bash scripts, having them replaced several years ago with Perl scripts, which I replaced later on happily with Ruby. No pun intended ;-) And I simply enjoy working with Ruby!

Healthy competition is good in my opinion. I’ll get in touch with rvm’s maintainer to see where both projects strengths are and how we can both improve our projects by learning from each other.

Very nice vector drawing using javascrip...

2009-09-07T00:00:00+02:00

Very nice vector drawing using javascript and DOM. Meaning you can actually attach javascript events to DOM elements. And on top of that it works with all existing browsers, unlike Canvas. http://ajaxian.com/archives/raphael-10-rc-get-your-graphics-on

THE Apple Snow Leopard Review: http://ar...

2009-09-06T00:00:00+02:00

THE Apple Snow Leopard Review: http://arstechnica.com/apple/reviews/2009/08/mac-os-x-10-6.ars. This is 24 pages!

Nice summary on the reasoning of Desktop...

2009-09-06T00:00:00+02:00

Nice summary on the reasoning of Desktop vs Web Apps: http://www.kalzumeus.com/2009/09/05/desktop-aps-versus-web-apps/

How to use Perforce's Merge Tool http:/...

2009-09-06T00:00:00+02:00

How to use Perforce’s Merge Tool http://onestepback.org/index.cgi/Tech/Git/UsingP4MergeWithGit.red

Gem Packaging Best Practices: http://web...

2009-09-06T00:00:00+02:00

Gem Packaging Best Practices: http://weblog.rubyonrails.org/2009/9/1/gem-packaging-best-practices.

Just released ruby-config 0.7. Most inte...

2009-09-05T00:00:00+02:00

Just released ruby-config 0.7. Most interestingly I changed the user interface to be command based instead of using option switches. So, instead of:ruby-config --list-installed you can do a simple:ruby-config listIn case you missed the 0.6 release. Most noteworthy I fixed the chicken-egg problem where a newly installed Ruby runtime doesn’t have the ruby-config gem installed yet. I’ve started maintaining Release Notes to make it more convenient to follow changes in the future.

Using jeweler for ruby-config

2009-08-29T00:00:00+02:00

I’ve been using jeweler for ruby-config and am very surprised how smooth everything went. What I especially like about jeweler is that its absolutely a no-brainer to create gems and post them via github. And with the versioning support its a joy to push out new releases! Am probably going to move over my hoe based projects to jeweler now.So, in order to get started with jeweler you have to install the jeweler gem first:gem install technicalpickles-jewelerNext to bootstrap a new project you do:jeweler --create-repo --summary "Ruby-Config" ruby-configThis will create a project skeleton with all the usual candidates. What’s left to do now is edit the Rakefile to setup the gem configuration and adding some sourcecode. Don’t forget the tests!Now, you simply create an initial version with:rake version:write MAJOR=0 MINOR=1 PATCH=0which update the VERSION file in your project for you.When you do a “rake release”, jeweler will create a new gemspec file for you, commit and push the update, create a version tag and push it, too.When simply updating a minor feature, I do a “rake version:bump:minor” and afterwards a “rake release” and I’m done. Great stuff!

Have been doing some more work on ruby-c...

2009-08-29T00:00:00+02:00

Have been doing some more work on ruby-config again. First of all there’s finally some documentation available in the Readme file.

Also one can now use “ruby-config –setup” which helps configuring bash’s profile to set the ruby and gem paths correctly. Again, this is done really unobtrusive.

First, the task shows you what changes it wants to do, then it prompts you for a yes or no. You can always cancel and apply the changes manually.I’ve generated a new gem spec with version 0.5. So, please upgrade!

Initial commit of ruby-config now availa...

2009-08-24T00:00:00+02:00

Initial commit of ruby-config now available on http://github.com/fdietz/ruby-config/tree/master.

jwz threading on GitHub

2008-08-31T00:00:00+02:00

Just posted a preliminary version of my jwz threading library on GitHub.

Took me the whole day to get a first project including complete set of Rake tests up and running. Since I’m still not sure if posting gems via GitHub is sufficient, I’ve registered a new project on RubyForge. They now support Git too, which makes it super easy to push my changes to both “hubs”.

So, you will most probably be able to download some ruby gems soon! Now, that the setup phase is done I can concentrate on cleaning up my specs and getting the API design right.

ActiveRecord Dynamic Finder - behind the scenes

2008-08-26T00:00:00+02:00

Wanted to finally post more about the dynamic finders, but then found Jamis Buck’s blog entries which seems to be much better anyways than anything I would have been able to scribble down in my blog.

http://weblog.jamisbuck.org/2006/11/20/under-the-hood-activerecord-base-find-part-2 http://weblog.jamisbuck.org/2006/12/1/under-the-hood-activerecord-base-find-part-3

Enjoy!

Symbol#to_proc and Ruby's Open Classes

2008-08-21T00:00:00+02:00

Just saw an article related to my last post about Symbol#to_proc. Very interesting read!

And even more fun is this article which explains the same mechanism and currying on top:proc {|x, y, z| x + y + z }.curry returns the equivalent of: proc {|x| proc {|y| proc {|z| x + y + z } } }

Here’s the example: plus_five = proc { |x,y,z| x + y + z }.curry.call(2).call(3)plus_five[10] #=> 15 I’ve seen something similar in Scala.

A good explanation of Scala function currying can be found in Daniel Spiewak’s blog. BTW, Scala finally got a new website!

And even better: Just got an E-Mail from Artima.com that the 4th edition of “Programming in Scala” arrived. Something to read for the weekend!

Symbol#to_proc - what?

2008-08-12T00:00:00+02:00

While reading Advanced Rails by Brad Ediger, I’ve stumbled upon this little helper in ActiveSupport.

The to_proc method is an extension to Symbol. Let me shamelessly copy Brad’s example here:

(1..5).map { |i| i.to_s } # => ["1", "2", "3", "4", "5"]

This is already pretty nice, but now look what happens when using Symbol#to_proc:

(1..5).map(&:to_s) # => ["1", "2", "3", "4", "5"]

This is even shorter and does produce exactly the same output. So what happened here? The “&” character tells Ruby that you want to call map with “to_s” as a block argument. It will force Ruby to call the Symbol’s to_proc method. The method will create a Proc and send the symbol to the object calling the to_proc method. And this leads to iterating over the numbers specified by the range and then calling the block, passing in the numbers and converting them to strings. Okay…

This is a typical example of me not being able to figure out what some code actually means and then by accident finding the explanation somewhere else. How the heck am I supposed to know where to find the documentation to such a cool extensions? I will let you know when I’m finally able to solve this mystery…

Migrations and Foreign Key Handling

2008-08-03T00:00:00+02:00

A question which came up real quick was how to add a foreign key to your migrations. In my example rails app I’m using a project with a has_many association to tasks, like this:

class Project < ActiveRecord::Base  
  has_many :tasks
end

class Task < ActiveRecord::Base  
  belongs_to :project
end

Now I want my task database to look like the following:

mysql> describe tasks;

+------------+--------------+------+-----+---------+
| Field      | Type         | Null | Key | Default |
+------------+--------------+------+-----+---------+
| id         | int(11)      | NO   | PRI | NULL    |
| title      | varchar(255) | YES  |     | NULL    |
| body       | text         | YES  |     | NULL    |
| status     | tinyint(1)   | YES  |     | NULL    |
| created_at | datetime     | YES  |     | NULL    |
| updated_at | datetime     | YES  |     | NULL    |
| project_id | int(11)      | NO   | MUL | NULL    |
+------------+--------------+------+-----+---------+

7 rows in set (0.00 sec)

Note, that I’ve removed the last “extra” column which is usually shown by the MySQL describe command. It only shows the auto_increment for the primary key but it would have overlapped my fixed-width wordpress theme.

First we have to create a new migration for adding a new column using:

script/generate migration add_project_column

This will generate an initial ruby file where I only added the two lines to add and delete a column.

class AddProjectColumn < ActiveRecord::Migration
  def self.up
    add_column :tasks, :project_id, :integer, :null => false
  end

  def self.down
    delete_column :tasks, :project_id
  end
end

Next step is the foreign key which we can put directly in the migration, like this:

class AddProjectColumn < ActiveRecord::Migration
  def self.up
    add_column :tasks, :project_id, :integer, :null => false

    execute 'ALTER TABLE tasks ADD CONSTRAINT fk_tasks_projects FOREIGN KEY ( project_id ) references projects( id )'
  end

  def self.down
    delete_column :tasks, :project_id
    execute 'ALTER TABLE tasks DROP FOREIGN KEY fk_tasks_projects'
  end
end

Note, that I’m actually executing a MySQL command to add a foreign key. So, this code most probably won’t work when used with different databases.

For now this is good enough, but I should probably look into refactoring these two lines by extracting them into a migration helper class. This way it will be easier to modify in a single central place in case the database will be changed.

I’m still searching for database independent foreign key management handled in migrations. So, please let me know if you find a better way to do this!

Until then some more readings…

ActiveRecord dynamic attribute-based finders

2008-08-03T00:00:00+02:00

I’m more used to Java ORM frameworks as for example JPA and Hibernate but started to play around with ActiveRecord lately. Probably all has been said already and I will spare you the introduction and point you to some documentation instead. It took me some time to realize that there is much more than what is shown mostly in online articles, blog postings and books.

Let’s start with the typical example of a book model containing articles defined with a simple has_many relation.

class Book < ActiveRecord::Base  
  has_many :chapters
end

class Chapter < ActiveRecord::Base  
  belongs_to :book
end

A typical query for all books would then look like this:

Book.find(:all)

and a query for all published books would be something similar to:

Book.find(:all, :conditions => [ 'status = ?', false])

Now to simplify this we can instead use the dynamic finder:

Book.find_all_by_status(false)

Until now this is pretty straightforward, but now comes the interesting part. Imagine now that you have got a book and you want to retrieve a list of chapters:

@book = Book.find(params[:id])
@chapters = @book.chapters.find_all_by_title(title)

Notice how one can use the same dynamic finders directly on the child association? Much easier than making a query using the book_id foreign key in the chapters table!

In fact, ActiveRecord automatically makes the class-level methods of the Chapter model available directly for the associations. This also works in case you have added your own finder methods in the model.

class Chapter < ActiveRecord::Base  
  belongs_to :book  

  def self.find_finished  
    Chapter.find_all_by_status(false)  
  end
end

Note, the “self” since we are adding a class-level method to Chapter. ActiveRecord will automatically make this now available in the association:

@chapters = @book.chapters.find_finished

Hope you got the idea. It simply is beautiful. Next time we should probably look into what’s behind the dynamic finder method.

Apple Leopard Tech Talk in DÃ¼sseldorf, Germany

2007-12-02T00:00:00+01:00

I’ve attended the Leopard Tech Talk last week in Düsseldorf. The tech talks are a great opportunity to meet other Mac developers face-to-face. Apple experts gave presentations about the latest Leopard development. I’m not really counting me in as a Mac developer, as I was always more of a Java Swing guy. But the Mac OS X as a development platform and especially its aesthetics are quite appealing to me and were always and inspiration. The latest “official “support for Ruby, specifically the RubyOSA and Ruby Cocoa, make things even more interesting.But, lets come to more interesting things. You’ve probably all read about those 300+ new Leopard features ;-) So, I’m not going to list them all here for you again. I only sum up the little niceties which you probably won’t have read that often…
Resolution Independence was the first topic. This gets more and more important as people’s displays become bigger. I run a 20” wide screen, so no problem here yet. You can actually play around with the DPI numbers with the Quartz Debug tool, located in “Developer Applications-> Graphics Tools”. Most application look pretty good already, expect funnily the Finder which is still pretty much thinking in pixels here.
Next cameSpotlight, which not only lets you search for menu items out-of-the-box, but also lets you index your whole user interfaces. Think of a completed configuration dialog where it might help to search for a specific option. If you are a Java Developer for yourself, you most probably used the search box in the Eclipse Preferences Dialog… Only thing you have to do to activate this is to tell xcode to index your user interface. Oh and by the way - it seems that Spotlight might be able to also search os servers in the future and not only on your local hard drive. Something else I didn’t know is that Spotlight is most importantly an API which can be used inside your application, too. Nice!
Then we have of course the 64 bit support in Leopard now in much more places, even in Java 6 which is hopefully shipping soon. Nobody knows when and why it takes that long, but we’ll see. No reason yet to panic and sell my Macbook Pro hehe
The Core Animation Library was next and this one is actually funny as it wasn’t development for Leopard specifically, but first appeared somewhere else. Rumor’s tell it was the iPhone. That reminds me that I should look into Chet Haase’s Animation and Transition Library, after reading Filthy Rich Clients…
Next was Time Machine. I didn’t know that one can actually restore a complete system by using the Migration Assistant which comes with the Leopard Installer. Still, haven’t got the time yet to buy me a new external hard drive. Also very cool is that Spotlight is Time Machine aware and can actually show several older revisions as search result.
Automator has gotten some new flow controls and rules. Additionally, a cool virtual user recording lets you basically record macros. Lets see if this works as good as in Photoshop. Did I mention the AppleScript bridges for Python and Ruby yet?
Then comes of course Objective-C 2.0, which now supports Garbage Collection which the Apple engineers have been tinkering about for a dozen years but now seem to have found a way to make this work really well. Appearantly, they managed the generational (incremental) Garbage Collector to run faster then the manual retain and release. Then also very nice is the properties support, which has been discussed in length for Java, too. They use an easy dot notation as almost everyone else. Exceptions have been optimized, now the throwing is expense but the try is cheap. In older versions it was the other way around.
Last thing I found very interesting was the Image related libraries including Image I/O for reading and writing various file formats and metadata including RAW formats and high dynamic range support. Then ImageKit which offers some nice of the self components to find, browse, display and edit images. And last but not least the Core Image, which is actually using the GPU for all its image processing - thing OpenGL. It offers more than 100 common image processing filters, basically the usual candidates you wouldn’t want to miss in Photoshop.
That’s it for today. On a last note, the food was excellent ;-) and the Mac crowd quite friendly with more than 200 visitors. I’m off for today, heading to Frankfurt, Germany tomorrow for the Java Tech Days! Meet you there.

EasyMock IllegalStateException

2007-10-05T00:00:00+02:00

I’ve started using EasyMock last year and since then it has become an integral part of my development toolset. I especially love the Java 5 syntax and how self-explaining tests with mock objects are.But today I stumpled over my first EasyMock exception which kept me pondering for an hour until I found the solution in another blog. The problem was that I was calling a method with an Array of Objects as input parameters.This caused problems because equals of the array failed as expected, but a solution was nicely explained in the docs. Simply use aryEq() method, which does the equality check for the objects in the array. Very nice! But, then the **IllegalStateException **caught me. It complained that two matchers were found, but only one recorded. The solution is simple but not really intuitive. Once you starting using matchers you have to use matchers for all arguments of a method call.

So Long, and Thanks for All the Fish

2007-08-12T00:00:00+02:00

I’ve been working or better playing around with Columba the better half of my student years. Especially the latest release was quite difficult to manage. RL (aka real life) kept me quite busy and is also the reason why I now finally decided to stop developing on Columba. I had so much fun meeting and working with all different kinds of people from throughout the world. Thank you all for your support!It was not quite the ride we planned. Thinking about it - we never really planned anything ;-) But, that’s probably the reason why it was so much fun!As Timo and me are now both not able to contribute any more, I hope that someone is interested in taking over from here. Java and especially Desktop Java is becoming more and more interesting. If so drop me an email, please!Whoever wants to stay in touch - I’ve got some good news. I’ve reactivated my blog again! So, cu at http://fdietz.wordpress.com !

Columba Webserver Hard Drive Crash

2007-02-17T00:00:00+01:00

Columba’s server at http://columbamail.org is currently shutdown due to a hardware failure. The hard drive needs to be replaced. We have backups of nearly everything, so its just a matter of setting up the system again.For the time being we will keep you posted about the status here.Funnily we were planning to release a major new version this weekend. So, stay tuned!

Happy New Year!

2007-01-01T00:00:00+01:00

Hope everyone out there had a “Guten Rutsch” which is a German term describing the transition from the old into the new year - need something for my headache before I can go on!Its been awhile since I wrote in my blog. First of all you might have noticed the changes in my address. Yes, its not “.de” anymore - its now “.name”. My old domain was hijacked! You might ask how this can happen, but its pretty simple actually. I had my nice blog, website and email server running hosted by some company and wanted to move all my stuff to a new host. Thing is you have to change the domain to point to the new address. Usually the old host sends you a note that the domain is free again and with that note you can go to the new host. Very simple process! But, in my case something went wrong in the middle, I did receive the note too late, someone else already took it :-( I refuse to pay a whole lot of my money for a domain, which was only bought by that individual to make me buy it back!In case you send me emails to my mail@frederikdietz.de account, you didn’t even get any notifications or bounce messages. I guess, I lost quite a few messages from people who have most probably know idea about my problems. So, in case you send me an email and have not received an answer yet, try mail@frederikdietz.name, please.The Columba Development Blog is still on the main website. I will try to reference back and forth to not confuse people, if there’s something relevant.A lot of things happenend in the Java Realm. We have a very nice Java6 Release out of the door, Java is going to be Open Source… Who would have thought that 5 years ago! So, there will be still quite a lot of Java related topics here, also Enterprise Java as this is my daily job, but still Swing will not be forgotten ;-)Happy New Year!

Columba development blog on main Columba website now

2005-08-09T00:00:00+02:00

I’ve created a blog on the main Columba website. This way you guys have a single place in order to follow development.Visit at:http://columbamail.org/drupal/?q=blog

Update your Eclipse .project file

2005-07-28T00:00:00+02:00

I’ve just commited an updated Eclipse .project file to CVS. Every plugin and necessary libraries are now added to the project build settings. This way, doing refactoring in core, the changes will automatically propagate. Or at least, they are marked as bugs ;-) This was way to much work in the past.Nevertheless, Columba will not use the class files compiled by Eclipse to load the plugins. Instead it will always use the plugin.jar. So, you have to run “ant plugins” and compile all of them to see the changes.I really like this behaviour, but we could also change it. For example, always trying to load the class files from Columba’s classpath first would be an option.

Plugins must specify src/ directory

2005-07-28T00:00:00+02:00

Plugins now have to additionally specify all directories containing sourcecode. Same goes for resource files.As always all changes have to be made in build.properties.Building of all plugins can now be started by simply calling “ant plugins”.

Plugin resource loader issue fixed

2005-07-28T00:00:00+02:00

I’ve just fixed the plugin resource loading bug. Loading of images or xml-files or whatsoever didn’t work.Again, you have to specify your plugin resource folder in build.properties. Then to load the resource simply do a “this.getClass().getResourceAsStream(String resource)“.I’ve had to change a couple of methods in core to make this work. All these methods didn’t use **InputStream **as the parameter to pass resource file content. Instead they used the path to the resource as String. This is wrong from an API user’s point of view, because the internal loader doesn’t know where these resources come from. You might even want to load resources from a webserver. So, simply using **InputStream **makes the API much more decoupled from the internal implementation.

Checking multiple IMAP folders for new messages

2005-07-28T00:00:00+02:00

Enough people complained about this missing functionality! I’ve added it to our after 1.0 roadmap.We will add a new dialog similar to the IMAP Subscribe Dialog to select the folders which should be checked automatically.Still, we didn’t decide if this is going into core, or will be provided as optional plugin.

Being platform independent or what?

2005-07-28T00:00:00+02:00

Just read a user’s complain about Columba following Gnome User Interface Guidelines. These guidelines also dictact how to layout the menus. For example: the Preferences **menuitem should always be the last item in the **Edit **menu. At least in Gnome. On Windows it should be better placed in **Utilities.I actually just saw that in Firefox. They change their menu based on the platform. So, they are more strictly following the platform they are just running on. Whereas we aim to provide the same experience for user’s on all platforms.And my feeling is that we do right so. Many of our users choose Columba, because its written in Java, and because you can use it on every operating system and even reuse one single configuration folder. These users would be really upset, if the menu layout would change everytime they switch the platform.

ClientJava.com Columba interview

2005-07-06T00:00:00+02:00

Read the news item.

Free Indian Language Software is hot

2005-06-26T00:00:00+02:00

The IT ministry of India is giving away free CDs of Hindi versions of OpenOffice, Firefox, Gaim and Columba among others.Read more…

Scripting Java with Beanshell

2005-06-16T00:00:00+02:00

Another article written by Frank Sommers about Scripting Java: The BeanShell JSR.

Columba 1.0 RC3 Released

2005-06-13T00:00:00+02:00

Hi everyone,we finally released 1.0 RC3!I’d like to thank especially, Mark for tracking down sooo many bugs and Timo for not getting tired to fix all of them…Personally for me and I know for Timo, too, this was a very hard release. Timo just moved to Saarbrücken and is doing his Ph.D. in Computer Science, I started work at SAP Germany. We both had almost no spare time to work on Columba. Nevertheless, I’m really proud of this new release. It has a couple of very interesting new features, lots of code/design cleanups and dozens of bugfixes.Last month alone, we had almost 300.000 web hits on our new website. Columba’s is a great success in India where it is shipped alongside OpenOffice and Mozilla Firefox. And still, my feeling is that its going to become even more exciting.As you might have heard already, this is our last release candidate before the final 1.0 release, which is about to happen in 4-6 weeks. So, stay tuned, help us tracking down the remaining problems and download the new versionRelease NotesHave fun,-Frederik

No - Columba is not sponsored by a company

2005-06-12T00:00:00+02:00

Timo and me are currently preparing some answers for an interview on ClientJava.com. This first question is “Who sponsors Columba?”.Hmmm… Nobody does. We are a group of open source developers, who like to play with new technologies, most notably Java. And we are convinced that the time is right for Java-based desktop software. We are not a company, selling some product!To circumvent such confusion in the future, I’ve added a prominent PayPal donation button on the front page and also a page dedicated to this matter. Additionally, checkout Timo’s and my Amazon wishlist on the page bottom :-)

Java Content Repository API

2005-06-12T00:00:00+02:00

There’s an interesting article from Frank Sommers on artima.com_Relational and object databases lack many data management features required by modern applications, such as versioning, rich data references, inheritence, or fine-grained security. Content repositories extend databases with such additional capabilities. The Java Content Repository API (JSR 170) defines a standard to access content repositories from Java code, and promises to greatly simplify Java database programming. This article reviews the Java Content Repository API and its open-source implementation, Apache Jackrabbit, from a developer’s perspective.

Addicted to Questionable Content web comic

2005-06-12T00:00:00+02:00

My name is Frederik, I am 27 years old, working as a software engineer and I am an addict for 3 months now:-)A must read:http://www.questionablecontent.net/You have been warned!Thanks Jeph for saving my Monday mornings…

JNLP 1.5 and Desktop Integration

2005-06-08T00:00:00+02:00

Java Webstart has a couple of very interesting new features.Especially the improved desktop integration is very nice, featuring shortcuts creation, file extensions and MIME association and related content integration in the Start Menu.Additionally, on Windows Java Webstart Applications integrate in the Control Panel’s Add/Remove Programs Panel.

Font subpixel antialiasing in JDK 6.0

2005-06-08T00:00:00+02:00

Its finally there. Take a look at some screenshots.And download the JDK 6.0 Binary Snapshot Releases.

Another JGoodies Binding Tutorial

2005-06-08T00:00:00+02:00

Rob Smith has written an interesting article Introduction to JGoodies Binding.Currently, the Binding framework is not used in Columba, instead we use a simpler approach which works nicely for easy dialogs. Usually, we have a simply model for the data and use updateComponents(boolean), method to pass the data from the model to the view and back.I definitly will take the time to evaluate the further application of Karsten’s Binding Framework. Additionally, I’d like to suggest the Validation Framework. There a demo available.

Scripting support is in development

2005-06-06T00:00:00+02:00

Celso proposed this actually and already started work on a separate branch.Guess, this feature is going to be the first new thing right after the 1.0 release.You can read the draft here:Scripting Engine DraftFeel free to join our discussion in our mailinglist.

RC3 release scheduled for 12th June

2005-06-06T00:00:00+02:00

Leaving asside divine intervention, the next stable Columba release is about to happen this weekend.Until then you can always play with our latest Webstart-enabled development snapshot:http://columba.sf.net/webstarttest/columba.jnlpStay tuned!

Swing swinging

2005-05-31T00:00:00+02:00

Santhosh Kumar has collected a couple of very neat things you can do with Swing.http://jroller.com/page/santhosh/Weblog

Columba mentioned on CNet

2005-05-31T00:00:00+02:00

Just a little motivation for getting the RC3 release out of the door :-)Read this:news.com.comand this:news.zdnet.co.ukand this:http://linuxtoday.com/infrastructure/2005052601626OSDPPB

Apple released Java 5

2005-05-02T00:00:00+02:00

Unique features to this release for Mac OS X include: * A new Cocoa Java Plugin API. The release notes say that this API can be used to embed Java into your Cocoa application. * Support for the javax.print package * and changes to the Java versioning mechanism * Resolutions to a number of other issues in Hotspot, AWT, and other areas.For Columba, this means that we can finally start developing using some Java5 features!

Columba will have 3 millon Indian users

2005-04-26T00:00:00+02:00

Just got a message from Raman from India. His group is working on localizing OpenOffice, Columba and other important standard software to the Indian language. They got the IT Minister of the coutnry to put Columba on a CD amoung other tools. This CD will be distributed for free with all major Tamil magazines and newspapers and targets 3 million people.See the following links:http://www.hindu.com/2005/04/16/stories/2005041600292200.htm http://www.tamilnation.org/digital/chennai.htm http://www.cdac.in/html/press/2q05/prs_rl164.asp http://www.ildc.in/GIST/htm/email.htm

Development starting again at April

2005-03-24T00:00:00+01:00

Hi developers,I just wanted to let you know that Timo and me are going to work onColumba again in April.Almost all important tasks on our roadmap are finished. Build/Releaseprocess is much easier now. So, hopefully we can do the RC3 release soon.http://columba.sourceforge.net/phpwiki/index.php/RoadmapAdditionally, I’m tinkering around with some CMS, so that the core teamcan help us keeping our website up-to-date easily. This was way to complexin the past.

Feature Overview Wiki Page

2005-01-14T00:00:00+01:00

I’ve started writing a feature overview page. This is meant for first-time user’s who want to check quickly if Columba supports a certain functionality. Of course, this is going to be placed on our website, including some nice screenshots.Additionally, this is going to be merged with Why use Columba.Contributions are welcome!

Bug day results

2005-01-08T00:00:00+01:00

Our bug day didn’t went out as good as expected. Sadly, we didn’t get a great number of testers. Nevertheless, we were able to solve a couple of very critical problems and finished many features.Most notably Timo integrated JDIC (https://jdic.dev.java.net/) for the trayicon support and opening attachments with the system’s default applications. Also, the cleaned up message viewer component is now capable of viewing attachment’s contents inline.So, all in all we are really satisfied with the work done and are much closer now to a RC3 release. We are probably doing another test release next weekend.

Fri 7th, Bug-hunting day - Everyone is invited to join us

2005-01-04T00:00:00+01:00

Next Friday, the 7th Jan we are going to have a bug-hunting day. And we need your help to find all those bugs, annoyances and ui inconsistencies.Timo and me are going to be present in IRC, QuakeNet, in the channel #columba. Additionally, also of course in the mailinglist and the forum here (http://columba.sourceforge.net/index.php?page=support).We are going to release another Webstart testing release and will do so several times on Friday. This way users can easily test if their reported bugs are fixed correctly without the hassle of a new installation or repetitive updates of Columba.Hope you join us!

Screenshots!!!

2005-01-03T00:00:00+01:00

First of all there’s the new filter toolbar. Note, that we now offer complete search functionality inclusive full body search, etc. This is possible because we don’t rely on the Table Model anymore. Instead we use the vFolder search functionality. This way your search is automatically saved as a child vFolder of the “Search Results” folder.And then the “view attachment’s contents inline” message preview component. This is of course an optional feature. What you actually see here is a message which contains another message as attachment. This is a pretty common case, when forward a message as attachment, which is the default in most email clients today. This also works when using text or image attachments, which looks really sexy :-)

No BerkleyDB header-cache for email component

2005-01-03T00:00:00+01:00

I did some prototyping on the weekend and integrated BerkleyDB in Columba as general core service. Additionally, I’ve added a header-cache implementation which makes use of it.Sadly there are still a couple of smaller issues/annoyances left. I therefore dropped this RoadMap item for now.Nevertheless, I’m finished with code cleanups and optimization of loading/saving speed.

CVS didnât compile cleanly

2005-01-03T00:00:00+01:00

I’ve just commited a fix for current CVS. It didn’t compile cleanly when using ant.Now, everything should compile cleanly again.

Cleanup of message preview panel finished

2005-01-03T00:00:00+01:00

I’ve spend a whole day cleaning up the message preview component. The code is now much easier to read. Additionally, its now possible to use a composition-like approach when handling different views. So, you can view messages in messages recursively.Additionally, I’m almost finished with the “show attachments inline” viewer, which directly shows attachment contents if an appropriate viewer is available.Screenshots coming real soon!

Groovy language plugin support

2004-12-31T00:00:00+01:00

I’m currently commiting the Groovy language support. A Groovy Interpreter plugin contains all the necessary libraries. It therefore has to be installed first, on order to start writing Groovy plugins. I’ve also added a simply Hello World Groovy action plugin to demonstrate how to write plugins with Groovy.Note, that have to use the current CVS version, the plugins won’t work with RC2.Following the Groovy code which opens a swing dialog:public class HelloWorldAction extends AbstractColumbaAction {public HelloWorldAction(FrameMediator controller) {super(controller, "Hello, World!")putValue(AbstractColumbaAction.SHORT_DESCRIPTION, "Show me this tooltip, please")}public void actionPerformed(ActionEvent evt) {JOptionPane.showMessageDialog(null, "Hello World!")}}

Development after RC2 started

2004-12-23T00:00:00+01:00

I’ve started collecting bugs in our bug-tracker specific to RC2.Our roadmap contains the planned features which will be implemented by Timo (tstich) and me.I’ve already finished the cleanup of the message list model. Additionally, the new filter toolbar for the mail component is in CVS.

Columba 1.0 RC2 Released

2004-12-20T00:00:00+01:00

A new stable version of Columba is now available.Release Notes:http://columba.sourceforge.net/index.php?page=releaseDownload:http://columba.sourceforge.net/index.php?page=download_stableHave fun,!

Mozilla compatible commandline options

2004-12-04T00:00:00+01:00

The RC2 release contains the new Mozilla Mail compatible commandline options which makes integration with third-party software much easier. Most notably OpenOffice, which is the main reason why we changed this. See the screenshot on how to configure your OpenOffice to directly send messages with attached documents. Note, that you can either choose Option1 or Option2.

Message list discussion

2004-12-03T00:00:00+01:00

Timo and me currently investigate possibilities to improve the threaded-view usability. One idea by ibm research came to our mind. Timo already implemented an arc-viewer control, so we would be able to play around with this thing after the RC2 release.Maybe, this way we could get rid of the current JTreeTable message-list and replace it with something more generic. The threaded-view capabilities make this old control a pain in the ass.

What happens after the RC2 release

2004-12-02T00:00:00+01:00

I’m currently discussing things with Timo as we come closer to a final 1.0 release of Columba. First of all there will be another release candidate RC3. This is necessary in our opinion to fix a couple of micro design issues in Columba. Note, that we focus on stuff which could further lead to more work in the future. We fix stuff for the 1.0 release, so that we can add new features afterwards easily. We will get much more attention and users after the stable 1.0 release. So, we don’t want to stop contributors adding new stuff, because of problems in our code.Our current planning includes a cleanup of the message viewer component and the message list. Both should be much more generic in our opinion. For example the message list knows about the fact that it displays email message headers, this way we can’t reuse big parts of this swing component. Also on our list is a more generic approach of using the Filters and Filter Actions including the Filter Toolbar and Search Dialog. We would like to move some of the code in the core framework. It currently is a mail-component specific feature. But we want to reuse this code in the addressbook component, too.I’m going to kickstart further discussions in the developer mailinglist. We should really try hard to stay focused on our goals of a quick final 1.0 release.

JDIC integration for RC2 release

2004-12-02T00:00:00+01:00

Timo already started work on integrating the JDIC project. This currently includes trayicon support with a popup menu and lookup for an appropriate application for the specific mimetype. We also consider to use a better html-viewer instead of the built-in swing JTextPane. But we have to discuss this problem more thoroughly.We will therefore remove the jniwrapper based trayicon support. Nevertheless, jniwrapper will be useful for us. Most probably for Message and Contact import filters and mime contents viewers using win32 applications integrated in the message viewer.

Indian Language Package contribution

2004-12-01T00:00:00+01:00

Just got a message from the BharateeyaOO team, which are currently translating Columba for 6 Indian languages! The BharateeyaOO.o project is an initiative to bring OpenOffice.org to India in Indian languages and somehow Columba seems to be of interest for them.

Interesting new stuff in upcoming RC2

2004-11-29T00:00:00+01:00

New Features:- international IMAP mailbox naming using UTF-7 encoding/decoding (tstich)

added show next/previous message and unread message actions (fdietz)
#999257, show/hide message preview panel (fdietz)
offer three choices for viewing email headers: default, custom, all (fdietz)
#999871, “subject or sender contains” should do filtering on typing (fdietz)
show recent message count in folder tree using blue font (fdietz)
#999748, in preview panel,full emailadress should be displayed beside (fdietz)
added complete sorting and filtering support for contact JTable (fdietz)
speedup of IMAP mailbox selection and auto-checking (tstich)
set Columba to default-email client on win32 using jniwrapper (tstich)
added jpim library for vCard import/export, not complete yet (fdietz) The #numbers are actually Feature Requests which can be found in our tracker. We try hard to start using this tool as an official feature plan for developers. New developers should also look into our wiki.What’s most notably for developers is a much cleaner separation of mail and addressbook code, introducing an interface-only API. This way components can use each others functionality but can be compiled against the API safely.Another bigger change is the removal of all interfaces like MainInterface, MailInterface and AddressbookInterface. We now use singleton classes instead which are instanciated lazy on demand. This makes things a lot easier because you don’t have to manually assure that classes are instanciated in the correct order. This further simplifies writing testcases.Also, we introduced a clean concept of a container which embeeds a component. This way you can switch between mail and addressbook components in the same JFrame.

RC2 test release is coming (really) real soon

2004-11-27T00:00:00+01:00

I didn’t post anything for a while now. So, to just let everyone know, Timo and me are finally finished with our planned changes for RC2. We are going to upload a testing version next week and if everything works correctly the official RC2 is coming a few days afterwards…So, stay tuned!

TaskManager Dialog added

2004-06-14T00:00:00+02:00

Ok, its finally there! Beautiful isn’t it?I’m also planning to add filters to view only certain types of tasks. This could be useful, if we would like to provide a pop3 download dialog, showing the progress of all pop3 at once. This is comparable to Outlooks dialog or Evolutions progress dialog.

RC1-test3 released

2004-06-13T00:00:00+02:00

Ok, its finally available.Forum announcement:http://columba.sourceforge.net/phpBB2/viewtopic.php?t=399Download at:http://columba.sourceforge.net/index.php?page=download_unstable

better win32 mimetype handling, plugin fixes

2004-06-11T00:00:00+02:00

Hana commited a patch which uses the win32 registry to determine mimetypes based on file extensions. New code can be found in package org.columba.nativ.mimetype.I’ve gone through the plugins and fixed compile errors. The python plugins were updated, too.The About Dialog, now also features an Acknowledgement page, listing all third-party libraries we use in Columba.

online/offline support, more bugfixes

2004-06-07T00:00:00+02:00

I’ve started making use of the new online/offline connection status.When downloading or sending messages, Columba automatically switches to online state. If in offline status, Columba won’t automatically check for new messages.Fixed bugs:- #966413: mimetype viewer doesn’t remember apps- fixed classcast exception, actions are enabled/disabled correctly again in addressbook- group dialog didn’t show up in addressbook- #968740, can’t choose folder in filter dialog, if treemodel is not sorted

profile management in CVS

2004-06-06T00:00:00+02:00

The new profile management code is now in CVS. A sort overview can be found in our wiki.Hope you like it!

better error handling

2004-06-06T00:00:00+02:00

I’ve added a new error dialog, called ErrorDialog. It contains a “show details” button. This is already used as general error dialog for all bugs happening in Commands, if not already catched in commands.Additionally, you can see better error messages, for things like HostNotFoundException.

Profile Management in Columba

2004-06-04T00:00:00+02:00

Many users ask how to start Columba using a different configuration folder.Why not add a profile selection Dialog?This can be achieved pretty easily:- add a “profiles.xml” to the default configuration directory- if Columba is started an no profiles are specified in this file, it will just use the default location- if profiles are specified, a dialog prompts the user for a profile- if Columba is started with the –path option, the user can do this selection automatically, without the need of the dialog.Example of the profiles.xml:The Profile Management Dialog is simply a list showing all available profiles and buttons to manage them.This way people can easily start Columba with their different configurations including usbsticks, etc.

bugfixes and better handling of header-cache files

2004-06-04T00:00:00+02:00

I never get bored of fixing bugs. Also, the header-cache should be more failsafe now.- fixed incoming spam filter bug, using less threads leads to increased performance- #964416 and #964415: both selection handling bugs- replace filter/filteractions combobox with menu, showing the user all available items without the need to scroll- fixed tablemodel update notification in updateGUI() from MarkFolderAsRead command

RC1-test3 expected new week

2004-06-03T00:00:00+02:00

I’m currently planning on releasing a new development snapshot next week. Still working on a couple of bugs, ui issues.This will hopefully be the last development snapshot. This version is currently much more stable than Milestone M2 for me and I’m eager to make users upgrade. People still report the same M2 bugs over and over again, which is a waste of time for both sides.

Columba is preselected for cât magazin cd

2004-06-03T00:00:00+02:00

Columba has been preselected by the german c’t magazin (www.heise.de). If it gets finally selected, we’ll end up on their shareware cdrom shipped with the magazin, which includes an article about Columba.I have been trying to get their attention for one year now, but they refused to write about Columba or post news. Always made me feel silly, because we even got articles from Brasilian magazins, so why not german magazins - at last, both Timo and me are from Germany!As a c’t magazin reader/subscriber for almost 12 years, I’d love to read about my own stuff ;-)

A more-failsafe approach of handling configuration and headercache loading/saving

2004-06-03T00:00:00+02:00

We’ve had some interesting problems with corrupt configuration or headercache files, which is always annoying for users.Following the proposal to fix this particular issue. The proposed behaviour can be found in other applications pretty often, too.Saving files:- save the configuration/headercache file to “blabla.new”- if success: - rename the old file to “blabla.old” - rename “blabla.new” to “blabla”Loading files:- try to load “blabla”- if the file is corrupt: - delete “blabla” - open “blabla.old” instead (fall-back to the last working configuration)

Finally - new features

2004-06-02T00:00:00+02:00

I’ve finally added a new feature;-)The guys from MIIK Ltd. provided us with a free version of their jniwrapper library. This library makes it very easy for Java programs to access win32 functionality.I’ve started with adding trayicon support. So, you can see Columba’s program icon in the traybar on Windows. A context-menu giving you some options. I’m planning to add message notification and all this useful stuff later.Hopefully, we will see more use of this library. Things on my mind are for example, better usage of the windows mimetypes (Giat Hana showed interest here), access to the windows registry to automatically detect external tools, import for Outlook messages and contacts, etc.

I hate those bugs!

2004-06-01T00:00:00+02:00

fixed dialog parent frame reference
#952176, Folder tree should be sorted in the same way everywher
#956286, Date/time is not displayed correctly for my date settings
#926690, Foreward Message with Attachement failes
moved independent classes to core, deleted independent directory

Again Bugfixing

2004-05-27T00:00:00+02:00

#956288, recent mailfolderinfo wasn’t updated when deleting message
#958066 character encoding when editing mails is lost
#956280 Create filter based on subject throws an NPE
#958078 POP3 header-cache is saved too often
#933636 make message visible after changin sorting order

Columba 1.0 RC1-test2 released

2004-05-18T00:00:00+02:00

A new development snapshot of the upcoming 1.0 Release Candidate RC1 is now available.Forum announcement:http://columba.sourceforge.net/phpBB2/viewtopic.php?t=380Download at:http://columba.sourceforge.net/index.php?page=download_unstable

bugfixes

2004-05-15T00:00:00+02:00

Erik did post a couple of interesting bugs or ui issues. Following have been fixed until now:- #952189, added dialog to prompt user to save his work in composer, using windowClosing event here

#952173 changed default column width.
#951531, added decoding of headerfield
#951518, use dialog data, instead of config data to checkout supported authentication mechanism
#951522 fixed initial selection of folder selection dialog
#951528, newly created folders are now selected as expected
#952164 signature file defaults to signature.txt which should be more familiar for windows users
#952184, creating virtual folder sets parent correctly now. additionally the search dialog is opened immediately
#953239 fixed nullpointer exception when searching IMAP folders Nevertheless, there are still a couple of more critical bugs open. So, I guess the next testing release will be a few days later than expected.

Columba 1.0 RC1-test1 released

2004-05-08T00:00:00+02:00

As promised here’s the new development snapshot. Read all the details here.

JUnit tests, minor bugfixes and improved docs

2004-05-07T00:00:00+02:00

I’ve gone through all JUnit tests making sure that they compile cleanly. Also, changed the ant <pre>build.xml</pre> script, to stop creating release packages if any tests fail. So, this is the first hurdle for releasing Columba.I’ve got Timo to fix an annoying SMTP open connection bug, caused by to strict assumptions of Ristretto. Should now work much better with servers which aren’t strictly RFC-compliant.Forwarding messages works correctly again, too. An inputstream was accidently closed too early.Also gone through the README, COMPILE and CHANGES docs and brought them up-to-date.

Still alive and happy hacking on Columba again

2004-05-06T00:00:00+02:00

I’ve finally finished my exams and thesis paper. So, starting with todayI’m back developing on Columba againFirst of all the roadmap at http://columba.sourceforge.net/phpwiki/index.php/Roadmapis slightly outdated. I’m going to update the items list this week. The M3 releaseis going to happen at Mai the 30th. Furthermore, I’m planning to dotesting releases on Mai the 8th and Mai the 16th.This is the last Milestone release, which should be much more stable andpolished as compared to M2, which sadly contained a couple of veryannoying bugs. The testing releases, the new testcases and a soon to beupdated Smoketest (http://columba.sourceforge.net/phpwiki/index.php/Smoketest)will ensure this.Last Milestone also means, last version with new major features. This isthe reason why I would like to call it v1.0 Release Candidate 1 (RC1), insteadof Milestone M3. Afterwards only RC will be released until Columba is stableenough for a final 1.0 version. This also includes user/developer documentation.My feeling is that this will happen around 2 months later.I know that many people would like to see much more new features in Columba,including changing it into a complete Groupware solution comparable to MS Outlookand other apps.Timo and me concluded a while ago that the best for Columba will be to get astable release out of the door as fast as possible. With such a stable version,it will be very easy to add additional features or even concentrate more ona complete collaboration tool. Users will most likely do without a missing feature,but they won’t use beta software.Considering the latest discussions (http://www.catb.org/~esr/writings/cups-horror.html))about creating open-source software with good user interfaces, robustness andcomplete documentation my feeling is that this is a very reasonable plan.So, stay tuned.

Starting smallâ¦

2004-05-06T00:00:00+02:00

Its raining outside, a good day to fix some smaller issues in Columba.First of all I externalized all pending strings in the Account Dialog most notably the Spam Filter Options Panel, where I also fixed the layout.Afterwards I’ve assigned every modal JDialog a correct parent JFrame, instead of just passing null. I hope this fixes the focus/window handling users noticed, as reported in the bugtracker.Additionally, all plugins now compile cleanly. Use and the buid.xml script in the plugins directory to build all plugins. This script stops execution if a build fails. The buildall.sh shell script skips compile errors, so you can make sure that all working plugins compile.

Spam fine tuning

2004-03-19T00:00:00+01:00

Waking up this morning I recognized that I’ve forgotten something really important for the token database.I’m using MD5 sums to detect already learned messages. These shouldn’t be added to the token database twice or more times - just once. When marking messages as spam, which are non spam, Columba should use this MD5 sum to correct the value, if the user marks the message as non spam.You can imagine that this MD5 message list is getting hugh over time. So, I’ve added a timestamp for every MD5 sum. This way, cleaning up the token database is very easy because I can just remove old messages.Sadly, this means that the spam.db file format has changed a bit.Another new thing are handcrafted rules. This is pretty new, I’ve got it from a paper “A bayesian approach to filtering junk email” from Sahami et. al.In Columba I’ve basically eliminated the need for something like a training mode with these rules. The idea is pretty easy. The bayesian classifier enables us to add handcrafted rules, which are handled equally to other tokens. So, a rule just adds another probability additionally to the word probabilities.When starting from scratch you don’t have any words in your token database. The spam engine can’t detect spam messages until you trained it for some time. But the handcrafted rules are in place, giving you a good start to determine spam messages, until you have collected enough tokens using the message contents.One such rule would be for example checking if the Subject is of capital letters only, or if the Subject contains many whitespaces. You can think if many more rules. Spamassassin has a very big list of rules which can be found here. Adding new rules is very easy. Just subclass AbstractRule in org.columba.mail.spam.rules.

Silently added more filters

2004-03-19T00:00:00+01:00

I’ve added two more filters. The first one is a “match all” filter, which just matches all messages. Very handy if you want to apply filters on all messages to cleanup your inbox or doing other repeating stuff.This will become even more useful, when the “automatically apply filter on new messages” option is added on a per-folder basis. This way, you can apply filters on newly added messages. This is something many people want. Just drop a message into a folder, execute the filter and process the message data.The other filter checks if the sender already exists in your addressbook. This is currently used in the spam filter anyway, to achieve an automatic whitelisting.

Spam filter integrated in Columba

2004-03-16T00:00:00+01:00

Checking the latest CVS sources from Columba you will notice the new integrated spam solution. This work is based on my bachelor dissertation. An introduction can be read at http://frederikdietz.de. The thesis paper can be downloaded as pdf file.The spam filter can be enabled in the account configuration. Note, that it takes some time to train this filter. This is done in marking messages as spam or not spam.In the first few days its recommended to just mark the messages as spam. Do not make them move to trash automatically, as its high likely that you will get some false-positives. Also, use the addressbook checking option, which prevents marking messages as spam from people which are already in your addressbook.Its recommended to delete:<pre>[your-config-folder]/mail/main_toolbar.xml</pre>This will create a new toolbar for you, with a mark message as spam button added.In my personal experience, learning around 1000 messages should be enough to make it perform well.There’s going to be some more fine-tuning needed, especially to make it perform better in the beginning - you have been warned!So, please help me test this beast ;-)

IM Project Codename âAlturaâ

2004-03-08T00:00:00+01:00

I’ve silently starting on hacking together a prototype for a jabber-based IM client. This is a pretty interesting technology I would love to see integrated in Columba in the future - meaning right after the 1.0 release this summer.Think about receiving a message by your friend. An icon would immediately show his current online/offline/busy state and you can chat right away with him.I’m still thinking about releasing this client as open-source in the future as stand-alone, but this dependents on user requests.

Folder and Filter TestSuite complete

2004-03-08T00:00:00+01:00

My exams currently keep me pretty busy until next week. Right now, I’m totally into DB2 - the second lecture on database, not IBM’s database - focusing on Object-Oriented and XML databases. Not very exciting, though…So, finally some news on Columba development. After starting a bigger refactoring of the folder packages in the mail module, I’ve finished with a testsuite for all types of folders. You can add every foldertype you want and the testcases run over it showing you problems. This should become pretty handy when adding new folders, including new local mailbox formats or even database backed folder implementations.The Filter testsuite covers all plugin-based filters which are shipped by default with Columba. This is more important than you would actually think because these are also the default fallbacks, used in case a search-engine doesn’t implement all operations. So, implementors of search-engines can just start hacking on their search-engine adding more optimized operations, and falling back to the default engine in case.

css Zen Garden: The Beauty in CSS Design

2004-03-08T00:00:00+01:00

css Zen Garden: The Beauty in CSS DesignIf you are interested in web design you should definitly see this page. Its a very simple page, using just CSS to totally change its look. Great. I wish more people would start using CSS more creativly.

The Luxury of Ignorance: An Open-Source Horror Story

2004-02-27T00:00:00+01:00

The Luxury of Ignorance: An Open-Source Horror StoryThis is dedicated to everyone who tried to get cups running… and failed ;-)

NewsForge | IBM, Sun meeting to discuss open source Java

2004-02-27T00:00:00+01:00

[NewsForge

IBM, Sun meeting to discuss open source Java](http://www.newsforge.com/programming/04/02/26/2253251.shtml)Meeting time.

IBM urges Sun to make Java open source | CNET News.com

2004-02-26T00:00:00+01:00

[IBM urges Sun to make Java open source

CNET News.com](http://news.com.com/2100-1007_3-5165427.html?tag=nefd_top)IBM is now in it, too.

Linux Today - Community: Beyond an Open Source Java

2004-02-25T00:00:00+01:00

Linux Today - Community: Beyond an Open Source JavaThis is another very interesting opinion about Java and Sun.

Columba 1.0 M2 available

2004-02-24T00:00:00+01:00

Human-readable summary:New and noteworthy features in Milestone M2Download at:http://columba.sourceforge.net/downloads_stable.php

Let Java Go (ESR)

2004-02-17T00:00:00+01:00

Let Java GoYes, please!

J2SE 1.5 in a Nutshell

2004-02-15T00:00:00+01:00

J2SE 1.5 in a NutshellVery nice summary of new language features.Did you know that Columba is used by Sun’s swing team to create real-life benchmarks of JDK1.5 performance?

Fatten Up Your Java UIs with JGoodies

2004-02-15T00:00:00+01:00

Fatten Up Your Java UIs with JGoodiesFirst article I’ve seen covering JGoodies, a layout package. Karsten Lenz, author of JGoodies actually called me and asked to look into it a while ago, suggesting to use it in Columba.Seems like its getting some more attention now. As for me, I can’t live without it anymore.

RDF and OWL Are W3C Recommendations

2004-02-12T00:00:00+01:00

The World Wide Web Consortium released the Resource Description Framework (RDF) and the OWL Web Ontology Language (OWL) as W3C Recommendations. RDF is used to represent information and to exchange knowledge in the Web. OWL is used to publish and share sets of terms called ontologies, supporting advanced Web search, software agents and knowledge management.

You think Gnome is ugly?

2004-02-09T00:00:00+01:00

After testing KDE3.2 for some days now, I’ve to admit that its getting better with every release. But, there are still too many options spreaded everywhere. KDE insists on destroying my font settings when used with Gnome apps. The overall thing looks nice, but the details really need some polishing. Anyway, heads up for a nice release. Hope they concentrate more on usability and user interface polishing.Regarding ui polishing:http://actsofvolition.com/archives/2004/february/gettingtoknow/#replies http://www.actsofvolition.com/archives/2001/december/windowsxprough

Mozilla Firefox 0.8 released

2004-02-09T00:00:00+01:00

The standalone Mozilla Firebird browser has been renamed to Firefox and received an upgrade to version 0.8. This latest release features a new download manager, bookmarks enhancements, better support for extensions and several thousand other improvements.Release notes:http://www.mozilla.org/products/firefox/releases/

Why Sun should join Eclipse

2004-02-05T00:00:00+01:00

Read a javalobby’s guest’s opinion:http://www.javalobby.org/nl/archive/jlnews_20040203o.html

JDK1.5 Tiger beta released

2004-02-05T00:00:00+01:00

You didn’t start downloading tiger, yet?http://java.sun.com/j2se/1.5.0/download.jspRead what’s new here:http://java.sun.com/j2se/1.5.0/docs/relnotes/features.htmlHmm… Did I mention that Columba is assisting Sun’s swing team in performance benchmarking?http://columba.sourceforge.net/phpBB2/viewtopic.php?t=183

Geek Code

2004-02-05T00:00:00+01:00

Felix send me the complete guide to “The Code of the Geeks v3.12”:http://www.geekcode.com/geek.htmlFrom their site:So you think you are a geek, eh? The first step is to admit to yourself your geekiness. No matter what anyone says, geeks are people too; geeks have rights. So take a deep breath and announce to the world that you are a geek. Your courage will give you strength that will last you forever.How to tell the world you are a geek, you ask? Use the universal Geek code! Using this special code will allow you to let other un-closeted geeks know who you are in a simple, codified statement.

Columba M2 Release Candidate available

2004-02-05T00:00:00+01:00

Please, read the full announcement here:http://columba.sourceforge.net/phpBB2/viewtopic.php?t=296This is the release candidate, before the final M2 release scheduled for next week.

Sun urges Eclipse to unify Java world

2004-01-31T00:00:00+01:00

http://news.com.com/2100-7344_3-5150868.htmlSounds like Eclipse is already ahead of Sun in this context and SUN is loosing ground here. Why did Sun regret to join the Eclipse Consortium? This way they could start to influence this Consortium, instead of just blaming Eclipse to divide the Java tools world. Or they could probably think about making Netbeans use the Eclipse plugins and vice versa.Update:Did you know that they have James Gosling again as head of their development tools divison?http://news.com.com/2008-7345-5148588.html?tag=nefd_gutspro

MikeRoweSoft settles for an Xbox

2004-01-31T00:00:00+01:00

[MikeRoweSoft settles for an Xbox

CNET News.com](http://news.com.com/2100-1014_3-5147374.html?tag=st_pop)I’m currently searching through german domains, which sound like microsoft. Maybe, I can get my hands on a XBox, too!

BitlBee: IRC vs. Instant Messengers

2004-01-31T00:00:00+01:00

freshmeat.net: Project Reviews - BitlBee: IRC vs. Instant MessengersBitlBee apparently lets you talk with all your ICQ, Yahoo, etc. friends using you favourite IRC client. This is made possible by emulating an IRC server.Very cool idea, although it seems a bit complex to start with. Now, I’m probably able to use Jabber only for IM and IRC for all the people who still use some old proprietary IM protocol.Do you yahoo?

Mute - third generation anonymous filesharing tool

2004-01-30T00:00:00+01:00

Found this on freshmeat:http://mute-net.sourceforge.net/MUTE File Sharing is an anonymous, decentralized search-and-download file sharing system. Several people have described MUTE as the “third generation file sharing network” (From Napster to Gnutella to MUTE, with each generation getting less centralized and more anonymous). MUTE uses algorithms inspired by ant behavior to route all messages, include file transfers, through a mesh network of neighbor connections.Does anyone actually use this? Sounds interesting though…

Microsoft is on it again

2004-01-30T00:00:00+01:00

Seems like Microsoft is finally doing something against the latest URL spoofing bugs in its IE browser: http://support.microsoft.com/default.aspx?scid=kb;%5Bln%5D;833786.Ok, I have to admit that typing in every URL in the addressbar, instead of clicking links, firing up JScript commands to identify website spoofing and always using SSL/TLS doesn’t sound very user friendly. But hey, Microsoft was always very good in making things easy and transparent for users. So, my feeling is that we just have to trust them here…Of course, instead you can also just stop using IE and download Mozilla instead. In fact, I’m writing this entry in Mozilla Firebird. It just took me too long to fire up my JScript to check if my blog is not spoofing me in any way.Don’t forget to send Microsoft a message making them switch their website to a secure SSL/TLS thingy. This would at least provide us with a secure connection to their knowledge-base ;-)

Madonna wannabe

2004-01-30T00:00:00+01:00

Got this from sharereactor Madonna wannabe.If this is not enough look at this girl:http://http.dvlabs.com/adcritic/t/o/y/toyota-tacoma-girlfriend.movOr the new britney, pink, beyonce pepsi commercial? Can’t get any more stupidStill some time left to kill with stupid movies?http://www.strenge.be/cartoons/movies/movies.htm

IBM reinventing email

2004-01-30T00:00:00+01:00

http://domino.research.ibm.com/cambridge/research.nsf/pages/projects.htmlSounds like a great project. Now I only need to convince them to offer me an internship as part of this group…

Spamming techniques

2004-01-29T00:00:00+01:00

As I’m currently working on finishing my dissertation, I stumpled upon some very interesting spam message recently.I’m writing about macchiato, a spam filter library, written in Java, where I’m using a naive bayesian filter to detect spam. Its an adaptive filter which gets trained by the user’s messages. As I’m close to finish this thing, I had to draw a line where I won’t go further optimizing the library - at least as part of my dissertation. Development will of course continue - Milestone M3 of Columba will have this integrated.Now to my recent discoveries in the faszinating world of penis enlargements, horny women and nigerian millionars…Most spam message tend to be written using HTML. Now take a look at the word Free in html:Fr<font size=0>&#38nbsp;</font>eeDid you see the trick? &#38nbsp; is actually just a space, but it has a zero font size, so it looks correct to the user, but my text tokenizer won’t recognize this word. It will recognize Fr and ee as independent tokens, though. Which makes no sense :-(I’ll have to further improve the message tokenizer to be more aware of html than it is currently.

Please SF, remove my stale locks!

2004-01-28T00:00:00+01:00

Ok, development on Columba is non-functional for more than 2 weeks now. This is due ongoing problems with Sourceforge’s CVS servers. I surely see that they had to do some updating and I don’t want to complain about a free service, either. But they should at least try to do better on communication. I’m really starting to feel kind a dump, getting asked for a dozen times now, what OS, what CVS client, which SSH version, etc. I’m running. I really tried to help them track down the problem but they just seem to be too busy fixing their problems.I’ve proposed a move to another host, most probably to java.net. Note, that I’m talking about CVS only. Everything else will stay on sourceforge. We’ll see what others have to say.My feeling is that sf is just not scaling anymore that easily, given that they host about 70.000 projects - an incredible number. So, maybe its about time to change our host. Many people rely on our sources including business people. This downtime is just not acceptable for me.

Hit the penguin game

2004-01-28T00:00:00+01:00

Salvatore pointed me to this flash game at http://smallbrainer.de/media/pingbase.swf

Dragân'drop of a JTree

2004-01-28T00:00:00+01:00

Did you ever read this article at JavaWorld?Its an insanely complex thing it seems to implement drag and drop with Swing. Note, that the behaviour used in this article is the default one used in almost all Windows apps. This article is actually using the old-school DND code, using the awt package.The new jdk1.4 DND code, guess what, doesn’t support dropping of folders between other folders. It just supports dropping folders into other folders.Any suggestions here?

Hello world!

2004-01-26T00:00:00+01:00

Welcome to WordPress. This is the first post. Edit or delete it, then start blogging!

Frederik Dietz

Vue.js Component Composition with Scoped Slots

List of Items Example

Refactor to Reusable List component

Extending the rendering of the list item

Using Destructuring for the slot-scope

Summary

Vue.js Component Composition with Slots

Slots as Content Placeholders

Named Slots

Summary

Introduction to Components with Vue.js

Components can be reused

Passing data to child components as props

Components have state

Sending messages to parents with events

Summary

Published Vue.js Component Patterns Course

FAQ

Why are there no videos?

Why focus on components?

Get a discount

Day 5 - How to build your own team chat in five days - Angular Filters and Directives

Relative date time Angular filter using moment.js

Rendering an avatar with an Angular directive

Formatting and auto linking the message

Making sure the message scrolls to the bottom

Final words

Day 4 - How to build your own team chat in five days - ExpressJS, Socket.io and AngularJS component-based design patterns

ExpressJS server side

A simple chat using Socket.io

AngularJS using a component-oriented approach

Message Form Component

Message list component

Day 3 - How to build your own team chat in five days - ExpressJS, Socket.io and AngularJS

Day 2 - How to build your own team chat in five days - ES6 Modules, AngularJS, SystemJS and JSPM

CommonJS vs AMD vs AngularJS Modules vs ES6 modules

Gulp Workflow using gulp with SystemJS and JSPM

Angular Seed Project

AngularJS using ES6 classes and modules

Day 1 - How to build your own team chat in five days

Recipes with Angular.js is free

Team Dashboard v2.0.0 released

Recipes with Angular.js: Update available

Team Dashboard 2 Release Candidate 2

Team Dashboard 2 Release Candidate

Recipes with Angular.js: New Chapters Added

Angular.js Controllers: Changing a Model Value with a Controller Function

Problem

Solution

Discussion

Recipes with Angular.js: Updated With New Content

Angular.js Controllers - Assigning a Default Value to a Model

Problem

Solution

Discussion

Team Dashboard v0.4 released

Team Dashboard v0.3 released

Team Dashboard supports Ganglia

Team Dashboard introduces Data Source Plugin Repository

Team Dashboard supports Jenkins and Travis with a new widget

Team Dashboard HTTP Proxy support much cooler now

Team Dashboard cloc stats

Team Dashboard released to the public

An Introduction to JavaScript this

Adding Columns to large MySQL Tables Quickly

State of the Couch

Why should I use ruby-config instead of ...

Very nice vector drawing using javascrip...

THE Apple Snow Leopard Review: http://ar...

Nice summary on the reasoning of Desktop...

How to use Perforce's Merge Tool http:/...

Gem Packaging Best Practices: http://web...

Just released ruby-config 0.7. Most inte...

Using jeweler for ruby-config

Have been doing some more work on ruby-c...

Initial commit of ruby-config now availa...

jwz threading on GitHub

ActiveRecord Dynamic Finder - behind the scenes

Symbol#to_proc and Ruby's Open Classes

Using Destructuring for the `slot-scope`

CVS didnât compile cleanly

Columba is preselected for cât magazin cd

Starting smallâ¦