It has been quite a while since I wrote something here, like I mentioned before, I’m working now, and I try and spend my free time being as productive as I can otherwise. Unfortunately, in this case, this has meant not being able to write very much, and quite honestly, I have missed it.

So after a pretty hectic week of work, I was really looking forward to the long weekend (Bank Holiday Monday was on the 6th!). Really needed to write something down, and it has been quite some time since my last post.

So, what have I been up to? A lot. A fucking lot. (Had to put it in there - expression of self :D)

I actually started writing this post a long time ago, I stupidly started writing it in Tumblr’s website, then in a hurry closed my browser without saving a draft, so I’m just going to try and remember as much as I can.

First off, been working at FusePump for 3 months now (whoo!) and its been pretty cool, met a lot of cool people and getting on really well.

Except for last week *cue horror film sounds*

Nah, not really. It was pretty hectic, though. Had two major issues come in halfway through the day last Wednesday, literally swept everything aside and worked with my teammates heroes on those two solidly till Friday (we stayed late, like men). There were points where all of us were probably quite close to snapping - I know I definitely was losing it a bit towards the end of Friday xD. Anyway, I’m not sure how much about work I can write, so I’m pretty much just gonna skip over it, what I’m pretty sure I can tell you about is my new side-project (yep, couldn’t be arsed with any of the old ones - they’ll just have to wait). It is work-related, but I’m pretty sure it’s all good to talk about it.

In my daily routine, its usually necessary to check on stats and data about our systems, currently we do have some tools but they’re more client-focussed, and aren’t really geared towards us devs. Since we do have access to our central database, and almost all of my teammates have their own collections of SQL queries that we use to get stats out of the database, I thought it would be cool to knock out a dashboard webapp for us to use.

I didn’t want to spend months on this - I wanted to get the idea working rather than worry about the finer stuff. I used the old faves, jQuery, Handlebars and Moment.js, but I thought I’d try some new stuff as well, see if I could improve my workflow.

Front-end

I needed a dashboard design, and I’m not competent enough to start building one on my own just yet. Lucky for me, people already have. I chose Inspiritas, mostly because it was free.

Initially, I copy-pasted the main page, made a couple of different pages with different stuff in them and voila! it was working. But that didn’t satisfy my itch, and the main push to doing something better with the front-end came when it came to the Ajax calls. Since there was at least one for every page, they all had to be called in order, and some of them needed special styling blah blah blah. It was the beginning of a really crappy application. I thought about rolling my own framework, using jQuery, but even that seemed like quite a lot of effort, at least more than I was prepared to put in for this.

I googled around, did some research and came upon Flight, which is a cool new framework from the good folks at Twitter. Couldn’t really grok it since there wasn’t much documentation and looking through the source of examples didn’t really help that much. I started getting somewhere with it, but in the end it seemed like more hassle than it was worth, and so I ended up using Ember.js, and I don’t regret it one bit. It’s a pretty awesome framework, don’t know how it fits in with MVC principles exactly, but to me kind of felt very similar to Zend Framework, which I’m using for the backend anyway. It’s quite convention-based, but once you learn the conventions, its almost configuration-less and setting up projects is easy as cake. I could probably go on for hours about how amazing a framework Ember.js is, but I’ll let you read that for yourself.

The best thing to do to familiarise yourself with Ember.js is to watch the 30-minute screencast by Tom Dale on how to set up a basic Ember app. Once I understood the basics, I mostly managed to get the rest of it up and running by myself.

It wasn’t all fun and games though - first off I did have quite a bit of trouble understanding the basic concepts of the framework, once I got past those I hit some rough patches integrating Ember.js and the Inspiritas Bootstrap theme - one of the CSS rules for content inherited from the ““ element was causing the entire page layout to mess up, this turned out to be because Ember.js was overriding it, and a short while later everything was dandy. This has changed recently,

DevOps

After I’d set up the basic front-end stuff, I gave Grunt and Bower a play-around. Grunt is a task runner, similar to a build system, except for the fact its wildly customisable, and all in Javascript. I can type grunt jshint to lint my Javascript code, grunt ember_handlebars to compile my Handlebars templates etc., saves me from manually having to do repetitive, laborious tasks.

Bower, on the other hand, is simply a Javascript dependency manager. All I need do is simply create a component.json file in my project’s root directory, define my dependencies within it and run bower install. Bower grabs all my dependencies and puts them in a components folder. I simply make all references to the libraries I require point to within the components folder and it works perfectly.

Back-end

After the front-end had all come together, I started work on a RESTful backend for the Ember app to get its data from. Since I’d never used Zend Framework at all before, I thought it would take a serious amount of work before I could do anything. Luckily for me, I had the luxury of consulting with an expert of the subject matter (nice one Andy!) and he walked me through the basics as well as showing me sample code. I pieced together the rest, made the Ember.js app get data from it and now, I have a lovely dashboard app that is populated by a RESTful backend :)

Future

So, what’s left now? Not much, I wanted to make my backend code actually RESTful, in that URLs like www.example.com/api/resource/id/1 returns the resource with id 1. This involves some sort of mucking around with Zend internals, which I’m not completely sure about just yet, but I’m sure can’t be a big deal.

The other thing is to generally improve and enhance it:

• Add Bootstrap Tooltips and Modals
• Integrate with JIRA using JIRA’s RESTful interface
• Work over HTTPS/SSL only

Summary

So, in about a month or two (a month of solid effort, anyway) I managed to knock out some code that makes my job a little easier. Not half bad, eh? :p

I’ve learnt how to use a bunch of new tools, libraries and frameworks, which was what I set out to do. I didn’t realise I’d end enjoying Javascript so much, or that I’d ever use a full-on Javascript MV* framework for a web app.

Not that I could have pulled this off by myself at all, a huge shoutout to EmberWatch for being an excellent Ember.js resource aggregator and all other devs who’ve written about their experiences with it. I’m pretty sure without having seen examples and good explanations of the code, I wouldn’t have had the first clue on how to use Ember. Now, I feel confident enough to hold my own - thinking about going to an Ember meetup!

I obviously can’t put the stuff I’ve done for work online anywhere, but I will make a repo for the Ember-ified Inspiritas theme, just in case anyone else needs a base for their own project.

NB: I’m sorry for the big gap in between posts, I’ve been really busy, and writing this post sort of got on the backburner, it might be a little dated now (by almost about a month), but it’s a fairly extensive summary of my experiences so far :)

After a month or two of actually looking for jobs, answering calls from countless recruiters (and using them for LinkedIn connections) and tailoring my CVs, I finally got a job at FusePump as a PHP Developer, and started working a few weeks ago. I actually wanted to write an article on tips for getting jobs (strictly on-topic), and I will update this article with the link when I have.

In the meanwhile, I’ve had interviews at interesting places with some quite cool companies, and I’d like to write about some of them.

One of the first places that I heard about was PlayFire. The idea behind PlayFire is to scrape gaming services for your account information, like games and their achievements etc., and connect them to a social network (in their case, Facebook). I don’t mean to moan and gripe about it, but about two or three months before, I had been brainstorming with my mate about quite literally, the same thing. I started writing code for it, which actually worked surprisingly well, I could scrape profiles from Xbox Live, PlayStation Network and Steam.

We had more ideas than that, but we wanted to get the core features done first, and we did. A couple of months later, I heard about PlayFire, tried the service, refused to scrape anything but PSN for me, and now they’ve apparently released a poxy app that you install locally for it to work. They cited problems with getting their servers to scrape profiles in bulk, which seems like a really shitty excuse from a bunch of amateurs, considering there is code on the Internet which does exactly what they need, without requiring users to install a stupid app on their computer.

So yeah, just needed to gripe about that. Another place I spoke to was the Daily Mail, didn’t get past their phone interview, I think they got the idea that I was a Wordpress-specific developer somehow, possibly something the recruiter said :s. PromoHT called me back for two interviews, the second one didn’t go too well, I got there pretty late thanks to the tubes, and besides, there were a few reasons why I personally didn’t feel like working there.

GitHub

A huge bunch of commits I made as part of a pull request to Syte got accepted, and I got a little mention on Twitter from the author, Rodrigo Neri. Syte has also seen a bunch of new commits which have added features and fixed bugs. It also got a bunch more commits enhancing features and fixing bugs, which I need to merge into my fork.

Also, emoji-cheat-sheet.com now lists me as a contributor, and lists emojify.js on its own project page.

Development

I haven’t actually written much code for my own projects in the past few weeks, mainly due to being busy with interviews, life, and more recently, work. I’m still looking to make emojify.js a jQuery plugin, will need time to look into that as well.

I’ve been trying to think of new ideas, or something that would be useful in people’s lives, a way of centralising the rush of information we have around us in the form of social services, to-do lists, calendar events and the like, a better connected iGoogle, if you will. I might mock something up using Bootstrap and try using a framework like Backbone.js, since it won’t really be server-based at all. It could link to your to-do services like Wunderlist or Things, possibly even hook up to Google Calendar, there’s a lot of scope, and I really need to sit down and define the limits of this project.

Another idea I had was a simpler version of something I saw online, I wanted to find out if the artists I have in my iTunes library have released new albums. Given that my library is well over 100GB in size, I seriously cannot be arsed Googling for each artist individually. Now I know iTunes can generate a library file in XML format, and it’s pretty damn comprehensive, and I know I can probably check any number of websites for new albums from artists found in my library XML file.

New stuff

I’ve recently started using Xmarks to sync my bookmarks, for two main reasons. The first is I have so many goddamn bookmarks, trying to wade my way through them is becoming a nightmare. I’ve always had a folder structure I’ve adhered to, but I don’t necessarily want to have to specifically go out of my way looking for a website that does something that I don’t remember the name of. The second is because I have a lot of useful web tools (at least, that’s what I call them), I’d like them on my work PC too, but I don’t want all my other personal ones floating around on there. Xmarks, like LastPass, has an Identities feature which allows me to specify which bookmarks an identity can use.

Speaking of LastPass, I may be bidding you farewell :’(. I saw 1Password on a sale, as I mentioned the other day, and I’ve recently begun the painful process of exporting all my LastPass information to 1Password. That’s mostly gone well, I think, LastPass and 1Password just don’t see eye-to-eye when it comes to secure notes, credit cards, passports etc. The CSV that LastPass exports is less than satisfactory, in my honest opinion, but then again, so is LastPass’ mobile client, which is now my biggest reason for leaving them. I really hope that they get their iOS client fixed, that alone would be awesome. Meanwhile, I’ve also nabbed 1Password on iOS during their MacWorld Expo sale to round everything off.

I’ve also acquired new kit - it was my birthday recently, so I treated myself to the new iPad Mini.

The timing was perfect because the jailbreak had come out earlier the same day, so all I did was buy it, go home, update both my iPhone and the new iPad, then jailbreak both of them thanks to evasi0n. I attached my AirPort Extreme to my network and disabled the router I received from O2. I found a 1TB hard drive on sale for £50 and nabbed that, and I’ve also bought a Raspberry Pi, installed RaspBMC on it and hooked it up to my TV. I moved all my media (mainly movies and TV shows) to the new external HDD and connected it to the AirPort Extreme. I then installed Plex on my PC and pointed it to the media files, so now, all my devices (laptops, desktops, phones, tablets, whatever) can connect to my Plex Server and happily stream all my movies and TV shows. I also got Tekken Tag Tournament 2 and decided I really wanted an arcade stick to properly play it with, so I went and procured this little beauty.

Work

I’ve been having a ton of fun the past few weeks at work, loving my new job, love the people, love the place. Its developer-friendly, we have snacks, everyone’s chilled out and its a huge open office, can literally go up and chat to anyone. I’m going through training, but I’ve been enjoying every second of it. I’ve learnt so many things about Javascript and PHP, and getting used to frameworks like ExtJS and Zend. Actual work-wise, I’m part of a team and team members help each other. Everyone I’ve asked anything for has tried to give me a good answer or pointed me to someone who could, and I think I’ve learnt quite a bit about how our system works.

I get to help develop our own internal tools, as well as being a maintainer of a nice chunk of the codebase. Over the coming few months, there should be some more exciting changes code-wise, not sure about how much I can write about it, but I’ll try to get my point across as best I can.

Anyway, there’s more stuff I have to write about, and that’s as much as I can think of without another severe delay ;)

If you didn’t already know, 1Password is having a sale, which brings the price of the Windows + OSX bundle down to $34.99(~£22) from $69.99(~£44). What you might not now is there’s also a discount code you can apply to knock the price down to $27.99(~17).

Just go to your cart, and click ‘Enter coupon code’ and type in ‘MacPowerUsers’. Hope you enjoy using it as much as I am.

If you’ve been following my blog, then you’ll have seen I showed off a Javascript library called emojify.js on Christmas Day. I got close to 700 pageviews that day, a bit of Twitter attention and currently the project’s repo on GitHub has 31 stars and 2 forks, and might even get a link from the website which inspired me to do all this: emoji-cheat-sheet.com.

Website Woes

Since then, I’ve been doing quite a few things. I added ShareThis instead of AddThis for social sharing, mainly because ShareThis was far easier to customise, CSS-wise, and I think it looks a lot nicer, anyway.

I changed the website’s look too, which you may have noticed. I replaced the image on the sidebar and removed the separator lines between the list items. I thought it added a nice contrast, black and white. Anyway, I also changed the font, too. I am now using Source Sans Pro everywhere. This in itself was no easy task; initially, I used Google’s Javascript snippet to load the fonts in, but I hate the flash of unformatted text before the page loads, so I downloaded the fonts and hosted them on the server. I picked the specific files I wanted and changed the relevant .LESS files, and hey presto, as far as I could tell, on my own laptop and on all the browsers I have (Chrome, Firefox, Opera, Safari), it rendered fine.

Later on that day, I just happened to show it to someone on a Windows machine and the fonts were all squished vertically. It was surprising, since it worked fine on my laptop and my phone, even when I checked it right there. A round of Googling why revealed that Windows is just crap at rendering fonts in general. It also turned out that it’s just better to use .OTF and .SVG files rather than Google’s own various file formats, and to do this, I used the awesome service FontSquirrel provides. After uploading the newly-created files, I tested on Windows again. This time, Firefox and Internet Explorer sorted themselves out, but Chrome was rendering the fonts horribly. Another round of Googling showed that the reason was Chrome hates the .SVG file being last. A quick change to the .LESS file and it was done, the font was applied and actually looked nice across all Windows and OSX platforms (that I know of, feel free to let me know in the comments if it looks crappy for you - I’m looking at you, Linux users).

Firefox Rendering

So if you read that wall of text above, you may have read that I found Windows renders text like shit, which caused me a fair amount of grief when I changed this site’s font too. Anyway, here’s something interesting I noticed - the rendering crappiness also affects images, but on Aurora, it’s not too bad. Have a look at the images below:

Firefox 17:

Firefox 19 (Aurora):

Side-by-side, zoomed in 500%:

As you can see in Aurora (on the right), the images are nice and antialiased. I’m guessing they’re making under-the-hood improvements in Firefox itself, which is always good. I’ve yet to test emojify.js in a Google Chrome development release, I will probably do that next.

UPDATE: Checked Firefox 18’s changelog and found that they have improved image rendering after all.

Pocket Integration

In a nutshell, it won’t be happening. I emailed them when I was having problems with OAuth, never got a response back and found a better way to do it anyway. Check out reading.am. The community posts articles and you can read them all. It also gives you an RSS feed of all your posted articles, which is what I will now be doing, instead of a section of new and noteworthy articles. If you want to subscribe to my reading list’s RSS feed, then click here.

Miscellanea

So it’s the new year, and I’m sure a hell of a lot of people have made New Years resolutions. I, haven’t personally even set myself any in years - I think any time is a reasonable time for a resolution, why make it specifically on New Years? People should constantly work to improve themselves, myself included.

Also, got my first silver medal on StackOverflow the other day, even though I didn’t really do anything to achieve it. Still quite chuffed about the attention I got for emojify.js, and I hope I can write more useful tools in the future.

What do I plan to do now? I think I’ll actually try to put a ‘Back to Top’ button in the post headers in the main blog view, it can get pretty boring scrolling all the way back up again. I’ve already nicked Tumblr’s one to use, it should be pretty simple to do. I also found that the <meta name='description'> tag for the individual posts is the same for each post, so there’s another fun bug to work on. Then maybe add LinkedIn integration finally. Maybe.

I’ve been working on my site, and I decided I wanted it to show simple emoticons like :) or :( as actual images, not the text representation of it.

So, last weekend (or two), I decided to hack together something that automated it for me and I present to you the results: emojify.js. It’s pretty simple, just a single module that scans the <body> tag of HTML pages for Emoji keywords, as described by emoji-cheat-sheet.com. I’d like to think its similar to Google’s Code Prettifier, but for Emojis.

How does it work? Why, that’s simple. You write your keywords in your markup as you would, then put emojify.run() in your page’s Javascript somewhere and it converts all keywords to icons. And now for a visual demonstration of my work:

Smile: :) :-) Scream: :o :-o :O :-O Smirk: :] :-] ;] ;-] Smiley: :D :-D ;D ;-D Laughing: xd xD Xd XD Cheeky: :P :-P :p :-p Rage: :[ :-[ :@ :-@ Sad: :( :-( Cry: :’( :’-( Kiss: :* :-* Wink: ;) ;-) Annoyed: :/ :-/ Confused: :s :-s :S :-S Straight face: :| :-| Blush: :$ :-$ Mask: :x :-x :X :-X Heart: <3 Broken Heart: </3

This is only a small subset of the entire emoji icons available - there are five others plus the barebones emoticons one I created above. I’ve stripped it down to only match and load the above emoticons on my website, but if you want to use all (or some) of the icons, then you can comment out the ones you don’t want in emojify.less. You can also remove the regex for those sets from emojify.js to reduce file size.

I’ve tested it to work on Safari, Chrome, Firefox and Opera. It doesn’t work on IE9, which I’ll fix soon. The icons are 64px, and emojify.js scales icon sizes automatically based on the line-height attribute of its parent node.

It’s been a fun little project to work on, and a couple of things that I liked about doing it. First of, its pure Javascript, no jQuery at all. The other thing is I got to learn a lot more about front-end stuff than I have before, for example, in the initial version, emojify.js was using innerHTML() methods to insert elements, which isn’t ideal, as far as I can tell. The correct way, apparently, is to traverse and manipulate the DOM, which I managed, all without jQuery.

The next thing is to make this a jQuery plugin, and use jQuery functions to reduce some of the code. I also need to finish encoding the images to data URIs and put them all into their respective LESS files. Your help is always appreciated by forking the repo - I would actually appreciate it because I’m not brilliant at some of this, and some of it is a bit time-consuming.

Also, happy Christmas to anyone reading this!