James' Dev Blog

Been rather a busy bee over the weekend. Having initially updated my Photo Gallery to be easier to navigate, and most importantly less pink it hit me just what a pain in the arse bending code written with rudimentary knowledge for one purpose and one purpose only is around your new ideas. Not only did it take ages to transfer the mocked up style over it also proved what I had been worrying about for a while now – the ever expanding single drop down menu which would no doubt have ended up shooting in a very graceful jQuery like manner off the bottom of the screen.

So I’ve spent the past 2 days rewriting it – further customising the base script that generates my thumbnails and reads the directories. The functions now output arrays which in a simple for-each loop does all the work the big nasty block of echo statements. The old:

 buildThumbs($gF, $tF, $tW, $tH);
 // call to another function to generate the thumbs

if (file_exists($gF."description.txt")) {
	$file = $gF."description.txt";
	$open = fopen($file, "r");
	$contents = fread($open, filesize($file));
	fclose($open);
	$header = str_replace("_", " ", $_GET['a']);
	$header = ucwords($header);
	echo "
";
 	echo "
".$header."

";
	echo "
".$contents."


";
}
elseif ($_GET["a"] != "") {
echo "
Jamesy, please stop being a lazy twat and make a description.txt for here, thanks.

";
}

And the new:

buildThumbs($gF, $aF, $tF, $tW, $tH);
		// call to another function to generate the thumbs
		$rawheader = $_GET['a'];
		$header = str_replace("_", " ", $_GET['a']);
		$header = ucwords($header);

		if (file_exists($gF.$aF."description.txt"))
		{
			$file = $gF.$aF."description.txt";
			$open = fopen($file, "r");
			$desc = fread($open, filesize($file));
			fclose($open);
		}
		else
		{
			$desc =  "James can you please make a description.txt like... now?";
		}

Which in my mind is both easier to read and means that on the front end I no longer have to go through each function to update style elements – so win win for future proofing!

The biggest change though is the way that it handles the image structure. Before it was only capable of reading one folder full of albums and ouputting like that. I’ve written a new portion that scans a folder of Galleries and then gathers the albums from inside each one. This is best show on the gallery page, for example:  http://photos.shizzlenizzle.biz/the_coast when you refresh it will read each album and select a random thumbnail.

So yup, Photo wise I am sorted now with efficient code and proper organisation .

Else where I have finally got round to fixing Sendmail on this server. I’d been wondering why it was so quiet until I realised the mail server virtualmin had installed for itself just plain wasn’t working. Uninstall, put in Sendmail and everything works lovely – too well infact, my mailbox hasn’t know whats hit it.

Hopefully next weekend can be a bit more weekend-like!

Yes, my cheverato installation is gone and I finally have something to show for myself instead of a filler page.

Currently it’s at version 0.5 which means use at your own risk – the account part at least since I know the uploading part works… or should.

So, lets run through the features!

1. Index: of course this is where all the front end interface is. Simple upload box, slider of the last 25 images you’ve uploaded bish bash bosh.
2. Gallery: this displays every image in a nice thumbnail view. You can search the gallery and if you are an admin flagged images will be highlighted red.
3. Detailed View: this gives you the various links, and some information about the image as well as a larger preview which links directly to the image.
4. Flag Image: you can report images that are not so innocent using the [!] button on the blue header bar. You’ll be given this form and simple pick one of the options.
5. Admin Index: this is where various statistics are displayed, such as how much space you are taking up and how many users etc etc.
6. Reported Images: this is a list of all the images that have been reported. Not so elegant as the gallery but it’s just their as a tool so not that important.
7. Reported Detail: same as before just with two big buttons “Delete” and “Clear”
8. Cleared: looks like this image wasn’t too bad after all

So yeah, trying to keep a unified theme as well as a light footprint other than the bandwidth of the images themselves.

Link:  http://uploads.shizzlenizzle.biz/

Edit:

Just spotted on my bandwidth statistics the impact of my day of mindlessly browsing through the gallery. Dear lord…

A quiet few days on here means I’ve been very busy… or lazy but with the current pressure of 6 forum skins, daily server watching and actually sleeping on the odd occasion I highly doubt the latter.

One thing that we lost during the upgrade to vBulletin 4.0 was a range of plugins and products for vB that were very useful to playstuff. We don’t tend to install things willy nilly just because we feel like it, only those that provide a specific purpose or suit our ethos which meant losing one, meant losing a significant proportion of our site’s functionality.

The biggest casualty being our game server status page, which displayed the current map, players, online/offline and other intricacies which made it clear what we were about. Take this post in the feedback sectionI like the look of your site playstuff.

I read many interesting posts.
I would however comment that it is ironic how hard it is to actually play stuff there – i couldn’t even find out if you had servers….

So this raised an important point, the previous addon we used was a phgstats/ vBulletin bridge: http://www.vbulletin.org/forum/showthread.php?t=118347 but this is for 3.5 and so we were very fortunate it survived right up to the very end, vB 3.8.4.

Being the pragmatic chap I am, I took it upon myself to take a crash course in vBulletin plugin making and ended up with a successful merge of GAMEQ and vBulletin which gives exactly the same functions as the old one.

When it’s in a usable state it will of course be freely released, here, maybe at vbulletin.org but the big boys there scare me somewhat. For now, here are some screenshots:

Admin view of Playstuff servers from an early build.

Here is a normal view:

Pretty view of playstuff servers page. What the end user will see

And you can see it live here:

http://playstuff.net/servers.php

There’s a lot still to do, but while it works and looks good as it does now – I’m fine to leave it as is until I can catch up on the rest of the work I need to do… like schoolwork.

I’ve got quite a few subdomains I haven’t finished yet. One is my old image uploader running a modified Cheverato. When I reinstalled my server OS (as Gentoo and I don’t get along) I decided to recode it from scratch myself and thus, it has been left with a php error for about 4 months now.

I also figured it was time to get organised in the way I store files. My haphazard method of just making any random directory and uploading to it is just plain silly, so I made a new sub-server. Which brings me to the splash pages, I just wanted something simple but with more than just a plain background. Ended up writing this little function which takes a total value which I know to be 1024MB per virtualhost on here, and outputting the free space, the total and a percentage in an array which can be plugged into very simple CSS in order to create a graph.

function free_space_graph() {
	$path = getcwd();
	$free = exec("du -c -a $path");
	$total = 1048576;
	$percentage = $free * 100 / $total;
	$details = array("free" => $free, "total" => $total, "percentage" => $percentage);
		return $details;
}

The CSS is simply

#graph {
width:400px;
margin: 10px auto;
height:25px;
position:absolute;
bottom:6px;
left:56px;
background:url(/graph-bg.png);
overflow:hidden;
}

#percentage {
height:25px;
background:url(/progress-bar.png);
}

#graph-text {
color:#fff;
width:400px;
height:25px;

line-height:25px;
text-align:center;
position:absolute;
bottom:17px;
left:56px;
z-index:2;
}

Easily plugged into:

$percentage = free_space_graph();
$width = round($percentage['percentage'], 0);
$total = $percentage['total'] / 1024;


    	Using: % out of MB
    

So yeah, you can see it in action at: http://uploads.shizzlenizzle.biz/ and http://files.shizzlenizzle.biz/

*Note, the CSS is a bit specific to my pages but should be simple enough to work out. All you need is the main #graph div to be around the inner #percentage div.

Ooer, it would appear that the site has changed from the spaced out regions of some far flung nebulae, to a more sedate blindingly blue colour that’s simpler than the grey matter between this fella’s ears.

I think it’s a good new direction, I took quite a large deal of inspiration from the simplicity of a friend’s site: http://blog.artlukm.com/ and it’s always been an area I struggle with. Particularly when designing a website for myself, I am not sure what it is but it’s always easier to do it for someone else.

Another thing I was keen on was some fancy javascript tit-bits I’d seen elsewhere. Particularly for the movable sidebar boxes which I feel give a little bit of user interaction, the calendar style date also gives it a bit of flair while sticking to K.I.S.S. (Keep It Simple Stupid) as it doesn’t use any images, just pure CSS/ XHTML.

Finally, a solution I thought was neat was the drop down panel for the social links. It’s always difficult to keep the amount of sub-information around the post as little as possible while retaining the same level of functionality. I am a big fan of icons in this scenario but sticking loads of icons everywhere wouldn’t have suited this style at all.

So that’s pretty much it, all thats left is the image uploading website, a few bits and pieces for Playstuff and as per the norm a mountain of homework stacked neatly* to my right.

* all over the floor

My mind seldom stops working, occasionally coming to the point where I struggle to focus on even one thought at a time (by which point I normally get a headache, feel sick and have to go make a cup of tea or something). I currently have a rather large work load that is set by myself. Alongside a rather large workload set by college – if only you could get qualified doing what you loved the way you love, but I digress.

One of my pet projects taking up my time is improving my rudimentary knowledge of PHP by re-writing my image host from scratch, rather than adding database functionality to Cheverato. I suppose it would have been easier if the comments and variable names were not all in Spanish.

So far I’d put it at about version 0.0.1, seeing as it has basic user -> database functionality and most of the front-end functions are working (image flagging, paginated gallery, registration and search with paginated results) but they are not implemented in an interface that is usable by the public. I’ve not formatted the data past just spewing out the raw Mysql data, nor have I implemented user access levels. But it’s getting there, chipping away at it piece at a time.

One thing I found interesting about when I started is that I approached it in much the same way as I would designing a wordpress theme, forum layout or any other stylistic work I do. Scribbling down a rough sketch and then plowing through it. Strangely this haphazard manner of planning didn’t cut it for a project that requires more than images and code, but a structure. Once I’d scribbled down a plan it became much easier to see what to script into it, and where it should go.

Another job which is important is the preparation of vB4 skins. At present playstuff has the Orange skin set up and collecting a lovely group of bug threads and issues – quite a few being something inherited from the stock theme which means us Administrators ending up having to fix a product that was paid for – thus my scathing review below this post. But it has, since its creation, had a blue skin in tandem with it (because mainly I like blue, and it’s nice to have a bit of choice). I’m holding that off until the maintenance updates later on this month.

I also have various finishing touches to another forum I had to convert its skins to vBulletin 4. Mainly profile fields on postbits and the like, less than exciting but needed.

My final task will be to redesign this website. Glassy is a theme that’s sat on my desktop for about 6 months and like anything you code six months ago, it looks awful when compared to what you know now. It’s pretty incomplete but it was the best thing at the time to put on here.

Will no doubt take me months.

Well, what do I do? Do I go with one side of my divided opinion and go down the purely administrative point of view that it seems to have lost functionality from 3.X, it’s riddled with more bugs than it can justify being GOLD and the fact that on the face of it there is almost nothing new admin-wise that makes the job easier or do I go with my creative side and praise the new templates in CSS that allow you to customise truly to your heart’s content, the new CMS which allows you to customise widgets to your own needs and a better layout for social groups, blogs and various other aspects.

I’ll do both, starting with the former.

Why did they opt for the strictest of deadlines to get it finished. There was a month or so between Beta 4 and the near final product. It could be down to a very rapid development team, but then that doesn’t explain the volume of bugs that are being reported over at vBulletin.com in regards to trivial things that should have been spotted, or dealt with sooner.

Why did they not adopt the Valve stance and release it when it was ready. I, and I’m sure the many other vBulletin users out there would have been more than happy to sit on it for a few more months and get a highly polished product. Instead we have what is essentially a rehashed front end with nothing done to the back. It’s the same old control panel with its unintuitive open/close boxes and endless lists. Sure, it works but why is there no additions to it – it’s essentially unchanged since 3.x. Take a look at Mybb’s control panel, a free software might I add:

Just look at how much less clutter there is. The main admin menu at the top neatly divides the sections into exactly what you need followed by a sidebar with just the options from that section and if need be a tabular interface to switch between the various smaller functions.

It’s such a nicer experience going into it to change a setting than fishing around. Granted I know what I am doing now and can navigate with relative ease, but when I was new it was a constant foray of googling and searching on vBulletin.com to find the option I knew must exist, but was hidden in a torrent of lists and check boxes.

Another issue with the vB4 ACP is the random necessity of keeping functions from the old Style Manager (primarily Main CSS) when everything has been converted to the new Stylevars. I was quite confused upon first viewing why the styles would not change despite my constant changing until I found the newly updated stylevars section.

If the old themes no longer work then there is no point keeping the places in the ACP that they were used for. It’s confusing, needless and you haven’t a hope in hell of converting an old style to a new one with expending more effort than it would be to recreate it in vB4 form.

To summarise my rant there, it would seem that the main issues are that they have given 3.x a facelift while doing very little back-end to aid in administration, moderation and user interaction. Playstuff requires very little of these things on a day to day basis, but another forum I work on does and I do not envy the stream of bugs and complaints that will no doubt come in.

However, I’m not entirely upset about vBulletin 4.0. I always found the previous version to be pretty inflexible due to the tabular setup. You can change everything around it but if you removed the tables it got messy. The furthest I went in customisation was a new header and changing various style elements of the tables which gave Playstuff a very nice clean skin, perfect for our needs.

With 4.0 I am free to completely change the style of any particular template I wish and infact I had to when commissioned to recreate a 3.x skin on 4. Although it is impossible to completely re-create the original in Semantic XHTML it is possible to mimic such.

VB3.8:

4.0:

It’s this freer creative aspect that I enjoy. It’s just a shame that it is marred by the onslaught of niggles and issues that arise – even with the default theme. This isn’t always the Developer’s fault. Getting something as complicated as this to look near enough identical on all browsers (by that I don’t mean IE6) is no mean feat, and no doubt that will be a new post somewhere in the near future about the troubles had in different browsers.

I am also particularly interested in the new Content Management System (CMS) developed for the Suite. Playstuff in it’s nature is creative, and that is something that drives me and the other senior administrators to continually push forward out of our own free time and wallets. The CMS seems to fit into this creative trend by allowing us to showcase the best and brightest of our content to the visiting ‘masses’ – something that is hard to do on a forum as most of the content is locked away at least 3 clicks minimum away. When you’re a member these 3 clicks are nothing but to someone new enticing those clicks is a milestone each respectively. We’ve adopted, rare given our perspective on communities, a team defined as the Content Writers. We could give writing permission to everyone but this is not ideal. No matter how good the intention, a CMS clogged full of the little things defeats the point of a clearly defined showcase.

Back end it suffers from a clear case of ‘fit it into what we already have’ which isn’t going to fly considering what already exists was not designed for this. The CMS is squeezed into one of those awful flip-like boxes the rest of the options are hidden in and it’s very apparent that it has been shoved in there. The ACP style seems ill-fitting to the elements of the CMS and compared to the in-line editor it is down right awful. Fair enough it is the first version but it relays back to my point that the Admin CP should have been of a higher priority than it was at the cost of a couple of months.

To conclude this, front end vBulletin 4 is revamped and I dare say slightly improved – and certainly will be in the future given that all 4.0 seems to be is getting the new templates to act as the old tabular form did. However back end is a far greater disapointment, it seems useful functionality has taken a back seat over the design – form over function as it were – and it really shows.

The CMS shows promise and is already proving useful to our community. But like everything front-end it looks good, back end appears to be half finished and for a selling point advertised and now even further in competition with Invision Powered it will be interesting to see the improvements in the coming months.

I look forward to vB 4.1 in the sense that it might bring a host of new features and bug fixes, but also with a sense of dread that the templates in every skin I maintain will no doubt be changed again and require another 3 weeks of my time to salvage. Along with every other designer, and addon developer who will need to continually adjust to the changing code and design.

Here begins another forray into this crazy blog idea. With the exception of me not rabbiting on about how school was rather tedious today or what I’ve just had for lunch. I’m going to keep track of my development work, in the fields of  web application skinning and web design.

Since it’s taken me over a month to notice my DNS servers were pointing locally and then getting right up the arse about why my DNS wasn’t updating this should be fun…