Those noobs.

@Scuzz that case is HUGE.

@Scuzz Might even be the only person with negative rep on NodeBB ever.

The BB in the favicon seem off-centered.

@Scuzz Also pound.

Came across this, looks interesting: http://pangoly.com/en/

This is about the following file: sockets.js

We need more posts, why not write something about how the shoutbox works? Could be interesting for some people I suppose :P

The fun thing about the recent refactor of the client sockets is that you can call them by simple doing Shoutbox.sockets.<action>(data, callback);. This is possible because we add each message to the global Shoutbox.sockets object. Doing this for every single message would take a lot of time and code, especially with the recent addition of commands. So how do we do this?

As you can see at the beginning of the file there are 2 objects with a bunch of method names as key and socket events as value, these names will later be used as the <action>:

	var Messages = {
		getShouts: 'plugins.shoutbox.get',
		sendShout: 'plugins.shoutbox.send',
		removeShout : 'plugins.shoutbox.remove',
		editShout: 'plugins.shoutbox.edit',
		notifyStartTyping: 'plugins.shoutbox.notifyStartTyping',
		notifyStopTyping: 'plugins.shoutbox.notifyStopTyping',
		getOriginalShout: 'plugins.shoutbox.getOriginalShout',
		saveSettings: 'plugins.shoutbox.saveSetting',
		getSettings: 'plugins.shoutbox.getSettings',
		getUsers: 'user.loadMore',
		getUserStatus: 'user.isOnline'
	};

	var Events = {
		onUserStatusChange: Messages.getUserStatus,
		onReceive: 'event:shoutbox.receive',
		onDelete: 'event:shoutbox.delete',
		onEdit: 'event:shoutbox.edit',
		onStartTyping: 'event:shoutbox.startTyping',
		onStopTyping: 'event:shoutbox.stopTyping'
	};

These are the default messages and events we work with. Extra events or messages required for commands etc are defined by the command itself (we get to this later).

After that we have a Handlers object, which essentially has all the default socket handlers required for the shoutbox to actually work. You can see some basic stuff ilke onReceive, onDelete etc. You can pretty much guess by their name what their function is. Interesting here is the defaultSocketHandler:

	var Handlers = {
		onReceive: ...,
		onDelete: ...,
		onEdit: ...,
		onUserStatusChange: ..,
		onStartTyping: ...,
		onStopTyping: ...,
		defaultSocketHandler: function(message) {
			this.message = message;
			var self = this;

			return function (data, callback) {
				if (typeof data === 'function') {
					callback = data;
					data = null;
				}

				socket.emit(self.message, data, callback);
			};
		}
	};

In the next bit I explain how the defaultSocketHandler works.

At the very end of the file we find what we actually “expose” to the public/global Shoutbox object.

	Shoutbox.sockets = {
		messages: Messages,
		events: Events,
		registerMessage: function(handle, message) {
			if (!Shoutbox.sockets.hasOwnProperty(handle)) {
				Shoutbox.sockets[handle] = new Handlers.defaultSocketHandler(message);
			}
		},
		registerEvent: function(event, handler) {
			if (socket.listeners(event).length === 0) {
				socket.on(event, handler);
			}
		},
		initialize: function() {
			for (var e in Events) {
				if (Events.hasOwnProperty(e)) {
					this.registerEvent(Events[e], Handlers[e]);
				}
			}

			for (var m in Messages) {
				if (Messages.hasOwnProperty(m)) {
					this.registerMessage(m, Messages[m]);
				}
			}
		}
	};

The first two keys, messages and events simply expose the default messages and events that we talked about at the beginning. registerMessage is more interesting. Let’s take a closer look at it.

		registerMessage: function(handle, message) {
			if (!Shoutbox.sockets.hasOwnProperty(handle)) {
				Shoutbox.sockets[handle] = new Handlers.defaultSocketHandler(message);
			}
		},

registerMessage first checks if we don’t already have the requested key in the Shoutbox.sockets object, if we don’t it adds a new key with a new defaultSocketHandler as value. We pass the message from the second argument to the defaultSocketHandler constructor, which, if you scroll up, is stored in the newly created object with this.message = message;. If you look at the return value of defaultSocketHandler you can see that it returns a function that takes 2 arguments. This function essentially just emits a socket message with the data and callback as arguments. Because we store this newly created function as the value of the Shoutbox.sockets[handle] key, this allows us to do the Shoutbox.sockets.<action>(data, callback); from the beginning of this post.

registerEvent just registers a new event with socket.io for the passed in event and handler.

intialize simply loops over all the Events and Messages and calls the appropriate functions to register all the default events and messages.

Because we expose registerMessage and registerEvent commands and actions can easily add their own methods and event handlers to the Shoutbox.sockets object.

Hopefully this post was somewhat interesting to read ;)

Recently became available for Windows as well.
http://blog.atom.io/2014/07/09/hello-windows.html

Still waiting for that new Elementary OS release :P

Germany wins

@Scuzz don’t know how excited Felix will be about another forum though :P if you really want to talk to him you either gotta have Skype or get on the UOFW IRC channel.

Some things I made for a couple companies:

http://i.imgur.com/ygItoQQ.jpg
http://i.imgur.com/mowXCL2.jpg
http://i.imgur.com/J0076M6.jpg

All responsive designs btw.

Edit: All of the above weren’t actually designed by me, just developed. They were all designed by external designers.

@theDaftDev I actually didn’t know this as well :P IIRC you were the one who at one point started making a whole bunch of codes for a couple PSP games, right?

@Almost I see what you did there… ;)

Monitor calibrations.

As the title suggests, you can post some of your (web) designs here, get it rated by people or just for the heck of it. I’ll post some stuff tomorrow.
I guess I can update this first post with some showcases sorted per user.

@Antu yeah that’s a NodeBB bug.

For Javascript stuff, help develop the Shoutbox :P https://github.com/Schamper/nodebb-plugin-shoutbox
We’re also still looking into different platforms/languages we’re going to write fapng in, but it’s probably going to be Node.js, so Javascript knowledge would be useful ;)

For design, I can spot a couple design mistakes on your forumotion theme but it still looks nice! (We should have a thread here with some “showcases” I suppose.)

Edit: http://bitbangers.co.uk/topic/88/web-design-showcases

What I’m also curious about it how well the displays work in direct sunlight.

Schamper, username Mr_Waffle.

Bought Planetary Annihilation.