Uploading images with a firefox extension

May 6, 2009 at 10:34 am | In FireFox Extension, Website Development | Leave a Comment
Tags: , , , , , , , , ,

I’ve blogged before about some of the technology behind the free DirtMind image gallery so here’s some more…

For a long time I’ve wanted to make uploading and using images on forums simpler. FireFox gives us the capabilities to do this since when writing a firefox extension you’ve got access to a bit more functionality than you normally do from javascript as it’s trusted code.

The mission, upload an image by right clicking on it, generating all necessary BBCode.

The solution:

1) Write a nice XUL user interface for adding right click options to the firefox browser, selecting a local picture, establishing selection of a remote picture and providing nice upload feedback

2) Using the firefox extension encode the local image, or download a remote image and encode it (without saving a local file – that would be cheating)

3) Upload to the image host, decode the image data back into a picture.

After that it’s easy  because we’re just into the normal serverside image processing stuff that the image host does.

Here’s some screenshots of it in action:

Selecting an image to upload

Selecting an image to upload

The image uploaded

The image uploaded

Because of the other stuff I’ve blogged about before in terms of image captioning and deep site integration with phpBB you can now upload an image, caption it and post it extremely easily. Check out this HQ video of the whole process!

Or watch in in lower quality on youtubte:

How to get reviews for FireFox extensions

February 20, 2009 at 2:06 am | In Blog, FireFox Extension | Leave a Comment
Tags: , , , , , , , , , , , , , , ,

I posted this guidance recently based on the response I got from a comment on an AMO (addons.mozilla.org) editor’s blog. Basically it’s instructions on how to leave a review but not how to get a review. I’ve released several firefox addons/extensions under various different IDs so here’s my advice on actually getting reviews…

Reviews are all important for firefox extension developers as without a number (minumum 3 decent) reviews you can’t get an extension out of the sandbox and into the public site. That’s important because in the sandbox you have to have a log in to get at an extension on the main public area anyone can download and use anonymously, so clearly there’s a barrier to normal users for sandbox extensions. This is for a good reason of course, good reviews mean that an extension isn’t just spam or complete shit, it’s actually useful.

So, 3 things:

1) If you have a log in to AMO then please leave reviews for the extensions you like, even if they’re already public

2) Please leave a review for my extensions :D

3) If you’re just sponging off the way extension developers make cool stuff for free help them out by leaving a review, it’s not like it costs anything more than 5 mins of your time!

If you’re an extension developer, then you already know all this. So the critical question is how do you get reviews for your extension?

The obvious answer is to get your users to do leave reviews. The problem is it can be hard to get users if you don’t have reviews. I’ve gone about this by examining the target user base for my addon, and then telling them about it. My latest extension is about generating bbcode for forum users so naturally forum users are my target audience, I started off with my own forum and then let other forums know about it. If an extension is properly labelled then interested people will find it, of course many of them use google rather than AMO so you need to think about getting a website or page up that shows off your extension that people will find by search engines. Be careful with forums though, they are notoriously twitchy about percieved spam!

Do you personally know people/internet peeps that would be interested in using your addon? Then invite them to leave a review and make sure you explain how to!

List it on AMO. People do naturally find extensions by searching AMO, I know because they’ve found mine!

Blog it! Blogs are a great way to direct search engine traffic to something of interest.

Tweet it! If you have a twitter following then let your tweeps know about your new found extension awesomeness.  It’s bound to be relevant to some of them, or at least as relevant as knowing that you’ve woken up.

Get external links! If your target audience has a community or reference website then ask the webmasters if they’d be interested in linking to your extension in their resources section. Remember, everyone hates a spammer but people like contributors so you’ll often find that if you word your communication properly you’ll get a positive response. This will drive users to your extension, and in turn will drive up the number of reviews.

Pimp it out! Whatever mediums/networks you’re a part of should know about your extension. Post it to Facebook, twitter, yammer, bebo, blinko, linkedin, hi5, plaxo, friendfeed, plurj, rejaw, meemi etc. But only let them know once, otherwise you’ll be just another spammer and ignored as such.

Finally, get an AMO account and leave review for other people. If I see reviews for one of my extensions I’ll lookup the username and leave a review for their extension. A bit of quid quo pro works well. So leave me a review and I’ll leave you one, there are many others that have the same philosophy, if you’re one of them then why not leave a comment here gently spamming your firefox extension.

Do you have any other tips?

Integrating a website with twitter

February 9, 2009 at 11:51 am | In Blog, Website Development | 2 Comments
Tags: , , , , , , , , , , , , , , , ,

As part of the continuing campaign to take over the internet I’ve been looking at twitter integration for DirtMind.com. I’m a big fan of twitter (follow me @dirtmind) so I’ve been wanting to do something with it for a while.

There are a number of natural touchpoints with twitter that I looked at:

  1. Tweeting DirtMind top stories
  2. Allowing registered members to list their twitter account in their profile
  3. DirtyThoughts – anonymous, uncencensored tweeting to the @dirtythoughts account

I’ve now achieved all of these. Tweeting top stories wa the easiest and is done using twitterfeed which lets you tweet from an RSS feed. Using twitter feed I can send out both new entries on this blog (or at least those tagged with the “blog” tag like this one) and also the top stories from the DirtMind RSS feed (a custom feed I built on my top stories database entries).

Allowing registered members to list their twitter account was on the surface quite easy. I wanted to let people enter their twitter username in their profile info and then show up a little blue “t” next to their posts and in their public profile view that links to their twitter feed. Just the way the site already does for msn, icq etc. Once I started looking into this though it quickly became apparent that it was quite a bit of work, so in normal style I thought that someone else must have already done this fairly obvious site modification. The advantage of using a popular system as your base architecture is that you can make use of the cool modifications everyone else has done. I found and implemented RMcGirr83’s phpbb3 twitter mod with no modifications (other than changing the icon) which is a first for me as I normally modify modifications and then modify those until I’m recursing into a black hole. Anyway, it’s excellent and does exactly what I wanted. You can see an example on my public profile listing at DirtMind.

Finally, DirtyThoughts… I liked the idea of anonymous tweeting as a way of people getting something off their chest, expressing themselves or saying something they wouldn’t normally say, and the ability to comment on these dirty thoughts and discuss them. Well forum software is built for commenting and discussing so a cool thing to do would be to have a setup whereby people could enter in a comment and it would get sent to both the forum and twitter. Using the twitter API was simple enough, so I designed a twitter page for @dirtythoughts, then created a DirtyThoughts user on the DirtMind site. Now I just needed a way to show the latest thoughts. To do this I butchered the standard viewtopic page (sorted by latest first) and customised it to have the dirtythoughts posting form at the top. It works really well :D I also edited the forum and thread navigation pages to automatically redirect to this special viewing and posting page rather than the normal phpbb3 pages. You can see the result here. It works really well and is already attracting some interesting and disgusting anonymous tweets! Please stop by and add one yourself :D

The hardest part of all of this was getting the visual confirmation stuff to work on my new page as I’d not gone anywhere near that stuff before. Some of the interesting bits I came accross were:

How to sent a message to twitter using php

How to submit a post to phpbb3 by a different user

Blogger writes sensationalist nonsense about phpBB3

February 3, 2009 at 2:00 am | In Blog, Website Development | Leave a Comment
Tags: , , , , ,

I was searching for help on a specific issue and came across a blog entry called phpBB3 IP issue where the fella is saying that there’s a problem with phpBB broadcasting users IP addresses to all and sundry. He then says you should delete a line of code from your forum to stop it happening.

I thought I should point out that Anthony is a dimwit who can’t understand what he’s posting about. The line of code he quotes specifically only shows IP addresses to admins:

'USER_IP'         => ($auth->acl_get('a_')) ? (($mode == 'lookup' && $session_id == $row['session_id']) ? gethostbyaddr($row['session_ip']) : $row['session_ip']) : '',

I realise that this is a complex(ish) nested shortcut if statement but even so the dude is just wrong, he’s more web 0.2 than web 2.0. Let me break it down:

IP Display         => User Is an Admin ? (Is Lookup Mode ? Show Hostname : Show IP) : ShowNothing,

So that’s what the code means, now if we explode the shortcut syntax into pseudo-code that even the dimwitted Anthony could understand we get:

If User is an Admin
{
      If in host lookup mode
      {
          Show HostName
      }
      ELSE
      {
          Show IP Address
      } 

}
ELSE
{
    Show Nothing

}

Not really anything to worry about other than a bloke that can’t understand simple code scaremongering from an ignorant position.

Can we have a test before people are allowed to blog about stuff?

BBCode FireFox Extension v1.1

January 28, 2009 at 4:07 pm | In Blog, FireFox Extension | 1 Comment
Tags: , , , , , , , ,

As a user of forums I find I quickly get tired of messing around with all those BBCodes. It’s annoying when trying to post an image or link that I have to right click something, copy to clipboard, then paste, then put tags around, then type something etc. etc.

So I set out to simplify all this, I had a look at some other BBCode extensions, notably Jed Brown’s original. However I found it to be a little unweildy and complex for my needs so I decided to write my own, extremely simple, BBCode extension. So easy, yer mother could use it :)

Here’s how it works, when you right click on something it has a look at what you’ve right clicked on and offers you some useful menu entries. For example:

Image

Right clicking on a image that's also a link

Image

Right clicking somewhere on a page

Image

Right clicking in a text area

Also when you’re in a textarea (such as when posting on a forum) the extension adds new right click menu that applies BBCode such as quote, url, img tags etc. to the current selection. Thanks to unfocused for this suggestion! I wanted to avoid loads of nested menus and just make something that’s simple and easy to use that would make my life easier. As a result it’s going to make anyone else’s life easier if they’re a forum user. BBCode is used on most forum software like vBulletin and phpBB. As always with DirtMind stuff it’s free and there’s no ads so check it out:

Add to FireFox

Please leave a review/rating on the FireFox website :)

RSS Aggregation and Post to Forum links

January 28, 2009 at 12:43 pm | In Blog, Website Development | Leave a Comment
Tags: , , , , , , , ,

Since I dumped Drupal I didn’t have an RSS aggregator anymore. Drupal has some good RSS aggegation features which I wanted to duplicate – I needed:

  • Getting and aggregating feeds by arbitrary tags (defined by me)
  • Consistent display on the DirtMind site
  • The ability to feed DirtMind feeds into the system
  • RSS caching so that the homepage would still show something relevant if a feed was down
  • A way to auto-post to the forum for discussion on a story

I knew I didn’t want to write an RSS parser myself. It would be possible but surely someone else, in fact several someone esles, must have wanted to do this and make their super solution open source. Enter MagpieRSS which is an excellent open source RSS parser in PHP. Then it’s just a matter of tagging and sticking the stuff in a database for display on the homepage. Each “RSS Box” on the hompage is generated as simply as 

$tag = "news";
$num_stories = "15";
$rss_box = dm_generateRSS($tag, $num_stories);

Which is then fed through into a phpbb3 HTML template in the normal way. Finally I wanted a “comment now” button or similar so that people could quickly post rss stories into the forum, for this I wanted a generic approach that could also be used from a Bookmarklet so I hacked away at the forum software a bit more to add a way of making posts through a specially formed URL (no details here to avoid the spam!).

In the future I’m thinking about maybe having which RSS feeds are shown as preferences in a user’s profile. That way people can choose the boxes most appropriate for them – and maybe also have them able to add RSS feeds into the aggregator system (although maybe with admin approval!)

Creating an image gallery for phpBB

January 27, 2009 at 3:37 pm | In Blog, Website Development | 6 Comments
Tags: , , , , , , , , , , , , , , , , , , ,

As part of the dirtmind site I wanted to provide a gallery for users to uploads pics, emoticons etc. for posting in the dirtmind forum and so we could start building some content. With the general philosophy of don’t pay for things when there’s so much great open source about I looked at the Coppermine image gallery. Ok, so there’s some not so great open source about too. All of the galleries I looked at were ok, but didn’t integrate deeply into my site (which was now based on the phpBB architecture) so I set about (armed with no php skill but a bit of general programming skills) to write my own.

Key Features

  • Users can upload images into their sfw or nsfw galleries
  • Users can delete images they’ve uploaded
  • Site admins can delete other people’s images
  • Very large images are automatically scaled down
  • Images are tagged intelligently (large image get a big tag, medium images get a smaller less obtrusive tag, tiny images get no tag at all so that thinks like emoticons or avatars can be uploaded)
  • Images should be exposed as RSS so that latest uploads can be shown
  • JPG, GIF  and PNG (static, transparent and animated) to be supported
  • Thumbnails are automatically created
  • Multiple files can be uploaded at once
  • BBCode is automatically generated for both single images and multiple selection

The Gallery

Should be fairly easy right? Actually, it was fairly easy – there’s a lot out there on how to upload files, watermark and resize images so it was quite straightforward to manage the uploading into user directories. At first I thought “I don’t need a database” since I was using a user and gallery based directory structure to store the files. This was mind numbingly stupid as it caused performance issues once the image number got large and made things like images RSS very hard to do.

So I bit the bullet and refactored the gallery into using a database to record images. This was actually pretty simple and didn’t affect my code much, I do a DB insert when an image is uploaded, a DB delete when it’s removed and then there’s just a bunch of selects instead of directory scanning.

I’m really happy with the multiple file upload capability, this was based on the stick man’s idea of making multiple file uploads look like they’re using a single file input element. Once uploaded the files are presented back to the user as a grid of thumbnails which can then be selected/unselected and with each change in selection the BBCode is automatically generated using javascript. Good stuff :)

Of course since all the pages on my site are in the phpBB architecture I’ve got things like login, user rights etc. done for me but even so the result is I think an extremely clean and elegant image host – it’s got none of the complexity that the old Coppermine System used to have galleries are automatically created for users when they upload their first image. Due to the tight integration into the forum software it’s incredibly simple to post uploaded images (single or multiple) into the forum, in fact it’s a single click!

You can checkout the gallery here including the bbcode generation features but you can’t upload images unless you’ve registered an account (this is to prevent abuses and spam) but registering is free like everything else at DirtMind so feel free to register and upload some images if you want to try it out.

Related to this I’ve also launched a FireFox Extension for BBCode to make BBCode as simple as right clicking on images and links 8)

Extending phpBB3

January 27, 2009 at 2:36 pm | In Blog, Website Development | 4 Comments
Tags: , , , , , , , , ,

Introduction

Following my dumping of drupal I had to go back to the drawing board in terms of managing the content for my homepage. I wanted to have my own stories and aggregated RSS feeds displayed, integrated into the phpBB forum on the site.

Armed with no knowledge of php but some of html, sql and general programming skills (I was a professional developer about 10 years ago) I decided to look into extending phpBB to be the architecture of my entire site! This idea was further encouraged by my analysis of the available image galleries that were available off the shelf (for free obviously I didn’t want to actually pay for anything).

Extending phpBB

It is possible to create a blank phpBB page very simply and because of phpBB’s templating system it’s really easy to setup pages with the same header, look and feel as the main site. And you get to take advantage of loads of cool phpBB features like user and session management, security, caching etc. In fact I soon came to realise that I could use it for Content Management as well…

To make a new page on your website that extends phpBB you do the following:

Create a new php file with the following content, the first bit sets it up as part of phpBB and so needs to know where the forum is. On my site the custom page as at the root of www.dirtmind.com and the forum lives in www.dirtmind.com/forum if you have a different structure you’ll have to edit the second proper line of code to tell if your PHPBB_ROOT_PATH.

<?php
/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ?
  PHPBB_ROOT_PATH : './forum/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);

// Start session
$user->session_begin();
$auth->acl($user->data);
$user->setup();  

page_header($user->lang['PAGE_TITLE']); 

//Custom code goes here

//Tell phpBB which template to use for the output:
$template->set_filenames(array(
 'body'    => 'output_template.html'
 ));  

page_footer();
?>

One of what I soon came to realise was one of the most common mistakes with doing this (and was my most common mistake) was to accidentally include blank lines before or after the tags this leads an error similar to:

[phpBB Debug] PHP Notice: in file /includes/session.php on line 990:
Cannot modify header information - headers already sent by (output
started at /includes/auth.php:1040)

So this php page doesn’t actually have any output or display stuff in it, it’s just doing functional things so here I could do my RSS processing or whatever. To link up the page to an ouput template you can see a line that maps “body” to “output_template.html” and this file lives in your forum templates directory which in my case would be “./forum/styles/mystyle/template/output_template.html“. Here’s what a very simple output template could look like:

<!-- INCLUDE overall_header.html -->
<p>Your HTML goes here</p>
<!-- INCLUDE overall_footer.html -->

That’s it! So now you’ve got a new page on your website that’s hooked into the phpBB system.

To see this in action just look at any page on DirtMind that isn’t part of the forum like the homepage

Conclusion

Even with no php knowledge it’s really easy to make pages of your website have the same look and feel as your forum, and the amount of functionality that phpBB provides  means that it’s an excellent architecture for making a web app.

Looking at Drupal

January 27, 2009 at 1:46 pm | In Blog, Website Development | 3 Comments
Tags: , , , , , , , ,

Vision

I set out with the vision to create  a site that had content feeds from all over the place with the ability to comment and discuss, I also wanted to build in image hosting.

Fairly obviously the content feeds should come from RSS and so I’d want to aggregate and display nicely. I had a search and most RSS display stuff seems to be client side using AJAX which I didn’t like very much. But I was sure RSS was the way. For discussion I wanted to use phpBB because I’ve been a member on phpBB boards and like the clean style and readability of it.

Drupal

I don’t know php so I set about looking for some sort of portal software to run everything and do the RSS aggregation for me. I came accross Drupal which was recommended as being simple to use.

It is, but it’s very limited – I had a specific look in mind for my site using multiple columns of RSS info (as is currently shown on the homepage) and that seemed almost impossible to do. I had a look at some plugins like “panels” and “tabs” and even got a bridge working between Drupal and phpBB that meant I could get private message notifications and user sessions working across the two bits of software. This didn’t work out though for a number of reasons:

  1. The look and feel of the site was inconsistent between the homepage and forum which made it feel like two separate sites
  2. The homepage, using drupal plugins for columns was a nightmare to configure – massively overcomplicated! Drupal is simple, but these plugins aren’t!
  3. Drupal is too restrictive on styling and based on the complexity of the multi column plugins the idea of customising it filled be with a horror akin to being told I would have to listen to a Steps album!

Conclusion

Drupal is good to get a simple content management system up and running quickly, it’s also pretty simple to do something like RSS aggregation in it. I’m sure that with the patience of some saints you can customise it to do pretty much whatever you want as well.

For me it was just too restrictive and clunky. It’s great if you want a simple website up and running and have little to no knowledge. However if you’ve got specific design and functionality goals in mind and a bit of knowledge there are better options!

What is DirtMind?

January 27, 2009 at 11:58 am | In Blog, Website Development | Leave a Comment
Tags: , , , , , , ,

DirtMind is my hobby, a free (not even any ads) website that provides:

  • An entertainment and news portal (UK focussed but including some international content)
  • A free image host supporting static images, animations that applies intelligent tagging (small images don’t get a tag)
  • A chat forum to provide a place to comment on whatever you want in a very loosely moderated environment
  • A selection of extremely good and addictive online games

This blog is about the experiences behind creating and maintaining DirtMind. You may well ask why the DirtMind blog isn’t hosted on DirtMind.com? The answer is because wordpress.com is awesome and everything is done for me here :)

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.