These projects come along fairly rarely for now, but I have good intentions and ideas for a few projects to complete, though I need lots of spare time for those, so we’ll see when that time comes.

Adding Video Content

I’ve previously shared this video on Facebook, but I uploaded it to Vimeo for the heck of it. This was taken in Mayrhofen, Austria in March 2011 during Snowbombing, an excellent event of skiing, music and drinking.

The camera used was a first gen GoPro HD, and it does some pretty nice shots. However I’m so totally getting one of the new GoPro HD 3′s, they look like an amazing piece of awesome. If I do, I’ll be sure to post more videos from it!

The Project

The first project is going to be a chat app. Here’s a list of features I’m looking to incorporate in this first app:

• Uses Websockets
  • Node.js and Socket.IO
• Stores sessions and a chat log
  • MongoDB / Mongoose
• Responsive design, and a full window app
  • Will work for phones, tablets and desktops
  • Uses css flexbox, this will limit support in browsers

While it’s a simple project on the surface, there’s quite a bit to pick up on, especially when it comes to the database side. Also while i’m not listing it here yet, I have a bunch of actual chat features in mind that can be added in later, but of course first you need to get things started and have the basics down.

The project files for this learning exercise will be hosted on github, here: https://github.com/pinkkis/Flex-chat - I’m also learning how to work with git, having only used svn before. Here’s the link to the commit of where I’m at approximately at the time of this post: Commit 3.

The Client

Flex chat prototype

So I’ve been working ont he client side of the project a bit here and there, and i’ve gotten to a point where the very basic design is in place. There’s a scrollable chat window, channel tabs and a user list.

It’s also nicely fullscreen and responsive on all platforms through the use of flexbox, I’ve tested in win/mac FF and Chrome as well as iphone5/ipad. Using media queries, certain elements like timestamps and the user list are hidden when the screen gets too narrow to fit a comfortable level of chat on these displays.

I’ve also started adding some client side code, and added some events and code that displays chat lines, makes sure the chat area stays scrolled to the bottom when new chat messages appear and so on, but half way through, I completely changed the approach and this has left weird doubles of code everywhere. Obviously I’ll clean that up.

I’m looking into creating the channels as an object and when you join new channels, you create a new instance of it. I will have logic in the socket.io onMessage event that sends the appropriate data to the correct channel object, but it would then keep track of users, messages, notifications and so on. I’ll probably end up doing this bit a few times over to get it right, or at least once I’ve finally made up my mind on what’s going to be there.

Additionally, I changed from having a single combined message window, I decided that upon an incoming whisper, a new faux-channel will be created, however this will not have anything saved on client or server side other than what’s in the DOM at the moment. Once you close that message window it’s data is all lost.

One thing I’m still trying to figure out is how to create some sort of settings menu that would work in all sizes, from desktop to iphone. What I think I’ll do, actually, is split off half of the system messages window and add a configuration panel there. These settings would then be saved in localStorage. The settings would be something like:

• preferred user name (only saved once we know it’s available)
• channels joined in addition to lobby

The Server

I haven’t really started on the server side yet, some random scrapings from checking out a few projects on github, but nothing has been done yet to actually run this, i just added files in place in the repo.

The server side coding is where I have everything to learn and why I’m doing this. More on this on future updates to this project!

CSS Flexbox

The flexbox seems to come as a godsend to designing app-like interfaces. Being able to create proportionally and automatically scaling interface elements makes everything so much easier. While it’s fairly straightforward to use, one must be careful to use the correct version of the draft, as it’s still very young and in flux. Also, it’s still prefixed in all browsers, so that’s a lot of fluff in the stylesheet.

Below are the code snippets for getting both tweets and blog posts displayed on the site, minus the actual html templates.

Twitter feed

The Twitter API is fairly simple to use in javascript using jQuery’s ajax calls. The below example is very simplistic, and probably breaks easily should something go wrong. But when everything works, it’s simple and I use this with Hogan templates to display them on the screen.

$.getJSON('https://api.twitter.com/1/statuses/user_timeline.json?screen_name=pinkkis&include_entities=true&count=3&callback=?'
	, function(returnData){
	if ( returnData.length > 0) {
		$.each(returnData, function(idx, val){
			var tempDate = new Date(this.created_at),
				tweet = {
					tweet : this.text,
					image: '<img src="'+this.user.profile_image_url+'" />',
					date : tempDate.toLocaleDateString(),
					link : '<a href="'+this.id_str+'"><i class="icon-external-link"></i></a>'
				};
			$("#twitter-container").append( tweetTemplate.render(tweet) );
		});
	} else {
		$("#twitter-container").append( '<p><i>Something went wrong loading tweets...</i></p>' );
	}
	$("#twitter-loader").slideUp(300);
});

Blog posts

To load blog posts from this blog to the main pinkkis.com site, I use a plugin for WordPress called Feed JSON which adds a json/jsonp type to WordPress feeds.

This function will get a specified amount of latest posts from the given url (or defaults to the current host). You will have to specify a callback for what to do with the retrieved data, an array of post objects. On the page itself, there’s a Hogan template to display the posts.

function getBlogPosts(url, count, callback) {
	if (!count || count <= 0) { count=1; }
	if (!url) { url = window.location.protocol + '//' + window.location.host; } 
	else if (url.charAt(url.length-1) === '/') { url = url.substr(0, url.length-1); }
	if (!callback || typeof callback !== 'function') { callback = function(data){console.dir(data);} }

	$.getJSON(url + "/feed/json/?callback=?", function(data){
		if (data.length === 0) { throw "No recognized data returned!"; }
		var posts = [];

		for (var i=0; i&lt; count; i++) {
			posts.push({
				title : 		data[i].title,
				id : 			data[i].id,
				permalink : 	data[i].permalink,
				date : 			new Date(data[i].date),
				author : 		data[i].author,
				content : 		parseContent(data[i].content)
			});
		}
		//console.dir(data);console.dir(posts);
		callback(posts);
	});

	function parseContent(string){
		var parsedString = '';
		// remove image captions (and code higlighter 'crayon') from post when using raw get_the_content() in the json plugin
		parsedString = string.replace(/[(?:(/)?caption|crayon).*?]/gi, '');

		return parsedString;
	}

}

When I want to work on something, but I don’t answer to anyone, it’s very difficult to motivate myself to do the things I want – or need – to get done. My brain barely lets me sleep from all the ideas storming around in it, yet when it comes down to doing something, it’s so much easier to play a few rounds of Blops2 than to do sit down and produce something.

It’s because at the end of the day, no one but me cares if I made something. At work a lot of people depend on what I do and it’s easy to be motivated and produce great things. The pressure is good. Being afraid of letting someone down is good. Deadlines are good. All these things make you want to get things done and improve yourself.

I know what I need to get done, but since no one depends on it, I’m going to try and create artificial pressure to help motivate me. I’m going to promise to write in this blog and share my experiences in web development and hopefully I’ll get to a point where I’ll feel like should I not post or do something, I’m letting someone down. That should motivate me. One can only hope…

What I want to do

I do web design and development, among other things, for a living. I’ve been lucky at my job so far and I’ve come to this almost by chance, even though this is something that I’ve had as a hobby for a long time. I want to be better, a lot better and diverse.

So what I’m concentrating at the moment is going to be programming, both client side javascript and Node.js servers, databases, UI and UX, version control, HTML 5 games in canvas and overall web server technologies, services and software.

I have planned out some basic projects for myself that should include one or more of the above and I’ll try to document them as much as i can here. Starting with the basics, I want to create a small chat app that will work on both desktop and mobile. I might limit it to tablets on mobile, but who knows.

Additionally, I’m looking at options to host my projects online. I have my own test server for now, an old netbook running Ubuntu, but once I have some actual projects, something that I cannot run on the hardware or my home connection, I’m going to be looking at either Amazon EC2 or other VPS services. Configuring servers, installing Node, Nginx and so on, configuring and securing everything… I’m sure a lot has been written on it, but I’ll be learning all that and just writing about my experiences.

In conclusion, I hope this is going to be the motivation I need. I’ve so many things I want to get done. And if what I share here helps someone, even better.