Hosh's blog

Setting a focus and blur event for TinyMCE

2012-06-28T17:09:00.001-07:00

I've been very busy because of work, working out and other things, and have therefore not really been able to update this blog, but I'll be sure to try and update the blog more often. I'll probably end up importing the contents into a WordPress installation on my server.

Outside the usual life stuff, I've been working on a new project with a friend, and should hopefully be on line in about a week. With this project we needed some sort of input of course, one of those (the biggest one) was an text area, however, I wanted to allow users some basic mark up, name, bold, italic and underline. While there were many ways of implementing this, I thought the best way was to implement a WYSIWYG that would allow only those mark ups, and TinyMCE is one of the best.

I’ve never really worked with any WYSIWYG editors, and I needed to customise this to only allow the HTML tags strong, b, em, i, and u. All this should not have any attributes. The editor would not have any toolbars and whatnot, which meant creating a custom theme. This was fairly easy by stripping apart the simple theme. None of this was the real challenge though.

It seemed that there was no “proper” way of doing an event handler for focus and blur that would work in a cross browser environment. There wasn’t much online to help this, bits and pieces everywhere, but no definitive answer. So I am here to share with you the definitive answer!

You need to add an onInit function and add a blur/focus event properly; however, the element needs some checking. The element and the whole setup function are as follows:

Highlighted using GeSHi

setup : function(ed) {
ed.onInit.add(function(ed) {
var dom = ed.dom,
doc = ed.getDoc(),
el = doc.content_editable ? ed.getBody() : (tinymce.isGecko ? doc : ed.getWin());
tinymce.dom.Event.add(el, 'blur', function(e) {
console.log('blur');
})
tinymce.dom.Event.add(el, 'focus', function(e) {
console.log('focus');
})
});
}

The trick, as most of you JS heads will have seen, is the variable el. Where it checks if TinyMCE used content_editable, in which case it gets the TinyMCE body, otherwise it checks if it’s a Gecko engine, in which case it gets the document, and finally if none of those, it gets the document window.

Hope that helps you out! :)

As work starts, the world still turns

2011-07-06T12:42:00.000-07:00

So I started work on Monday, that is 2 days ago, and I am on my way home from the third day of work.

It has been an interesting few days, as I started work, straight away was given a task and (what I think is) a new client to deal with. While the task for the first day wasn't all too hard, it just was very lengthy. The client wanted us to fix their site and make sure that 4 pages look the same in multiple browsers, that they are still working on. So the hunt began to search for the errors in on those pages, and report back to the boss as well the client. What we ended up doing, is going through all the required browsers (and operating systems) and take a screenshot of all the four pages, and while this was an easy task, it was a lengthy one.

Anyway, so after identifying the errors, it was just a few simple fixes on the CSS, or so we thought. The problems? Well, not too much, aside from, of course you guessed it, IE6 in Windows XP, but next to that, the main problem was that the client didn't want to give us access to the development server, and while this normally wouldn't be a problem, it is when the client requires cross browser compatibility on mobile phones (such as Android and iPhone).

Second day was a bit boring, as I was supposed find a way around this whole problem, but the resources that were provided by the client just weren't enough to fix these, what otherwise would be simple, CSS errors. Anyway, aside from that, the same client wanted to know about making a welcome page on their Facebook page that has their own colour theme and design. This wasn't too hard, and it's as simple as adding the app TabPress to your page. Of course, the custom design can be hard coded, however, that would take more time and more money to implement.

Finally today, I worked more on the same problem, however, I had a work through. What I did was install Glype proxy script locally, and if the file "style.css" was requested (of course, through the Glype proxy), it would, instead of running it through Glype, it would just return the contents of a local copy of the CSS file. This seemed to do the trick, and hopefully will work till the CSS has been fixed.

Will keep you updated on tips and tricks when working for customers.

Hosh

Switching Operating Systems

2011-05-30T11:42:00.000-07:00

Yes I am still alive. I know I haven't updated the Blog since after my exam, but I was, erm, too busy "celebrating" the end of my exams :).

Anyway, so I was trying to reinstall Windows 7 yesterday, but I found out that my DVD Reader didn't work. This was the second DVD Reader, in fact, the first one was a BD reader as well. Anyway, it didn't read the DVDs so I had to improvise. This meant trying to run the installer from a USB, however, I didn't have a USB that was big enough to hold Windows 7. So tried to run it from an external hard disk, which ultimately lead to the demise of my master boot record. I wasn't really too fussed because I had already backed up everything :).

So then I decided to just switch to Ubuntu straight away, which means running some of my favourite applications on Linux using Wine, and oh what an amazing job the talented developers of the Wine project have done.

I remember about two years ago, I tried to install the old version of Steam (way before the UI revamp and the Mac version), and in all fairness, I gave up on using it within 10 minutes. It was too sluggish, and had to install loads of random stuff before it could work. It was a lengthy process.
Now though, I just downloaded the installer, marked it as executable, and double clicked it. A few clicks later, it was updating and straight away after the update I could login. No fuss, no problem. After I logged in, Steam guard came up as expected, and after verifying everything worked fine. I can use the chat normally, currently installing Portal 2 (not sure how that's going to go), and after being impressed this much, I think it will run fine.

I also installed my favourite PHP IDE on Wine, phpDesigner, I haven't really tested it too much, however, I noticed that the original php.exe included didn't work properly, had to manually download the VC6 version and use that instead. I haven't tested Xdebug yet, but I will soon.

I'll keep you updated on Portal 2 and phpDesigner.

Hosh

Last exam tomorrow.

2011-05-27T10:45:00.000-07:00

Finally getting to the final exam tomorrow, software engineering! This time tomorrow I will be free from free from the exams! More updates on random stuff soon! :)

I've got 4 exams in a row, don't expect too many posts till after Saturday

2011-05-23T13:20:00.000-07:00

Title says it all, I won't be posting much till after Saturday. I have 4 exams in a row so I am going to need every second of revision I can get.
For the curious ones, I have exams on

Wednesday - Functional Programming
Learning Haskell using Heath (a program created at our University) and Hugs
Thursday - Cognitive Neural Networks
About how the human brain sees stuff and how we can simulate this on a computer.
Friday - Algorithms, Data Structures and Complexity
About how all sorts of algorithms work such as sorting algorithms etc.
Saturday - Software Engineering Practice
Best practices to develop software.

Not much to it hopefully, plus I've already passed Functional Programming and only need 51% to get a first! Sounds doable :).

Anyway, see you after the exams.

Hosh

Downloading a file from a remote server using cURL

2011-05-21T16:48:00.000-07:00

I am currently implementing a new way for themes to be submitted on PS3 Themes. Allowing users to select a remote P3T file and it will be downloaded. There is multiple ways of doing this, but the simplest method is using cURL. The cURL options you will need are CURLOPT_TIMEOUT, CURLOPT_FILE and CURLOPT_FOLLOWLOCATION and you will need the function fopen(). So here goes.

Highlighted using GeSHi

<?php
set_time_limit(0);
$f = fopen('theme_name.p3t', 'w+'); // Initiate a file writer for the downloaded file to be written to.
$d = curl_init('http://www.example.com/theme_name.p3t'); // initiate cURL on the file to download
// set the appropriate options
curl_setopt($d, CURLOPT_TIMEOUT, 60); // set the time out time for the cURL operation, the bigger the file, the bigger this number should be
curl_setopt($d, CURLOPT_FILE, $f); // this is where you need the file handle, it will put everything straight handle
curl_setopt($d, CURLOPT_FOLLOWLOCATION, true); // this is just so all redirects are actually, otherwise might get the wrong page.
// Execute cURL, this will set it
curl_exec($d);
// close both the file handle and the cURL
curl_close($d);
fclose($f);
?>

The code is fairly straight forward, and if not, the comments should help.

Hosh

The art of reinstalling Operating Systems

2011-05-21T13:28:00.000-07:00

Well, there is no art to to much of an art to it, but it has to be done every now and then.
My current Windows 7 installation would be turning 1 year soon. Yes it does happen, Windows can run great without having to reinstall every week. Anyway, there is too much junk on it, so it requires a new installation, plus I was thinking of installing Ubuntu 11.04 after seeing how much it has been improved since 10.04. The new Unity looks just too awesome to miss out on.
I am currently backing up everything and should soon be reinstalling it.

Hosh

Portfolio done

2011-05-20T06:12:00.000-07:00

For those interested in looking at it, it is available at http://hosh.me.uk/. There are some other sites on there, including my PS3 Themes website, they are all written by me from scratch. If anyone wants to code of the websites (except for PS3 Themes) drop me an email, and I'll be more than happy to provide you with the code.

Hosh

I got a Job interview.

2011-05-18T16:01:00.000-07:00

I got a job interview soon for my placement year. I am looking forward to this interview and will hopefully do well in it. I am currently developing a quick portfolio website in the hopes of impressing them even more :), and you never know, maybe the portfolio will be the decider. Every little helps, no?

Anyway, the portfolio should be only before Monday, as that is when my interview is. Till then, I got another exam tomorrow, about Database Systems, so it's going to be fun... Not. Either way, I will need to revise till tomorrow. After the exam, I got 1 hour and 30 minutes to kill, perfect opportunity to finish the design at the very least. Then some sort of talk the University is having. Sounds like a fun day, maybe I'll fall asleep during the lecture, that would give me a good buzz :).

Anyway, I'm getting back to revision and/or finishing my portfolio site.

Hosh

Exam tomorrow, let's talk about reading raw pixels to use with GD

2011-05-17T14:54:00.000-07:00

I have an exam tomorrow about Distributed Systems and Networks. So what is the best way to spend our time right now? That's right, don't revise and talk about an old problem I had while implementing a script.

So while creating the P3T extractor for PS3 Themes in PHP, I was using PHP's GD functionality to read extracted .gim images, which are basically images that contain raw pixel data, in RGBA format, each 8bits.
Now, RGB was all fine, but the Alpha channel was not so much. Any GD user, who has created images with alpha transparency knows that PHP's imagecolorallocatealpha() function requires a alpha channel of up to 127. this means 7 bits.

But that is not all. Imagecolorallocatealpha() alpha argument sees the alpha argument as 0 being completely opaque, and 127 completely transparent, however, this was exactly the opposite as to a .gim file, where 0 was completely transparent, and 255 was completely opaque.

How do we solve this?
Well, any mathematician would probably see the problem straight away, however, it is a bit more trickier when you would have to figure out how the data is saved. Anyway, after figuring that out, I decided to tackle this problem by taking the extracted data, removing 255 from that, and removing the minus sign (abs(), substr($negative_int, 1) or *-1), and then bit shifting this to the right once.

I settled on the substr() method in the beginning, but later decided to go with the abs() function as this made the code more presentable.

I posted the substr() method on PHP's website (found here), but the abs() function makes this much neater.
This is the code:

Highlighted using GeSHi

<?php
$alpha = abs($alpha - 255) >> 1;
?>

Of course in this case, $alpha is an int between 0 and 255 (as it is saved like that in .gim files).
Results, if $alpha = 255, $alpha will be 0.

Hosh

Hellow World

2011-05-16T15:12:00.000-07:00

So this is my first post on this Blog, I will hopefully post random stuff about me, and mainly my developing skills. Give you quick tips about programming etc.

Hope you guys will enjoy your stay!

PS: no the title is not a typo :)