Project update: noGallery 0.2
noGallery has gotten a face lift. The latest versions comes with many new styling classes (including presets!), an additional column width and a rewritten base. Full details can be found in the change log, and 0.2 is now available for download.
3D Level Prep-work
A collection of pencil and watercolour prep-work for a 3D level, and some early UDK implementation:
New Game: Blender Bedlam
I’ve added a new game to the Experiments section: Blender Bedlam–my take on an 80s-style arcade game. As should be taken as a given by its placement in the “experiments” section, it’s not without its flaws. Enjoy
Atonement for Interstellar Fiction
Delighted to announce that my sci-fi short, “Atonement” will be making an appearance in Interstellar Fiction this coming June. It’s my first acceptance in a while–I’d almost forgotten how good it feels. I will, of course, post a link to the issue once it’s out.
From the Archive: Bluefish (2.0.0)
As part of the ongoing revamp here at nodehead.com, I’ve been digging into the archives for old blog and site incarnations which went for a walk somewhere along the way. While much of what I’m coming across is very dated and / or uninteresting, there are some pieces I would like to resurrect for the sake of posterity. One such piece is a review of Bluefish 2.0.0 (Stable!) written shortly after its release.
I remember being quite taken with Bluefish 2, as I had been with the previous 1.x branch, but I’m not all that sure I used it for more than a few months. When I found this review earlier in the week, I downloaded the latest version (2.2.4) and had a quick gander ’round. It’s still a fantastic piece of software, and very stable from what I saw over a few hours of use. If you spend most of your time working with mark-up, HTML in particular, Bluefish could be a very powerful tool to add to your belt. That said, I don’t spend most of my time working with mark up (any more) and I think it will be quite a while before anything pries me away from Sublime Text.
I’ve taken the text of this review from a word file, not a site backup, so it may not be exactly as originally published, but it should be close. Anyway, three years ago…
Bluefish (2.0.0–Stable)
A plain-text editor–the name doesn’t suggest for a moment that applications would have much to offer or enough features to compete against each other. After all, one PTE is the same as another, isn’t it? Well, talk to anyone who has to use one of these “simplistic” applications on a day-to-day basis and they’ll quickly tell you that simplicity is most definitely not key. In fact, simplicity can quite often be detrimental to a PTE’s success. It’s with this need for a rich feature-set in mind that I’m going to take a look at Bluefish–the PTE with the funky fish logo.
Bluefish is a WYSIWYN, or What You See is What You Need, editor that is primarily geared towards website development static and dynamic in nature. The WYSIWYN initialism is a play on the WYSIWYG (What You See is What You Get) interfaces for mark-up editors that were popularised by Adobe’s Dreamweaver. With What You See is What You Get interfaces you “point and click” elements into place to achieve your goals and the editor, behind the scenes, creates the necessary code. While these editors make many tasks, such as creating a web page, simplistic, they are notorious for producing inefficient and usually unnecessary code–often referred to as Junk Code. Bluefish, however, is aimed at those who can actually mark-up or write code as code and simply require a method of stream-lining that process.
Before we get to specific features, let start at the beginning: Bluefish is free software and is platform-compatible with Microsoft Windows, most Linux Distributions and Mac OS X (the older, 1.0 branch of Bluefish can also be found in Solaris package managers). Full details on obtaining and installing Bluefish for your specific Operating System can be found at the project’s wiki:
http://bfwiki.tellefsen.net/index.php/Installing_Bluefish.
HTML
Although touting itself as a kind of pre-IDE all-round web development environment, Bluefish puts a lot of focus on HTML with a prominent and feature-rich HTML Toolbar being one of its main time-saving features (if you don’t see the HTML Toolbar (located above the main editor pane), you can turn it on fromView -> HTML Toolbar). The HTML Toolbar is divided up into 8 tabs (Quick Bar, Standard Bar, Fonts, Tables, Frames, Forms, List and CSS) and each tab contains a number of functions for auto-inserting HTML tags, such as heading tags, anchors, bold and emphasis tags, ordered and unordered lists, forms values, frames, table rows, table data, break tags and much more.
While the ability to wrap text in some of these standard tags is fantastic, it’s with attribute-heavy tags (such as img tags) that Bluefish really streamlines the mark-up process. If you want to insert an image into your HTML you can simply go to the “Standard Bar” tab and select the “Insert Image” function (you’ll have to hover over the icons to see the function names, but it’ll be one of the last options). A new pop-up window is presented that contains a “browse” field where you can locate the image you wish to insert into your mark-up. You can also enter additional attribute values such as an id or class. Once you have selected the desired image, click “OK” and Bluefish will auto-generate an img tag with the src, width, height and alt (if entered) attributes automatically filled.
In the standard bar, you’ll also find the “Quick Start” function which acts as a wizard to auto-generate a basic HTML skeleton for your web pages by selecting your required DTD, entering your page title and selecting the meta, relational and script tags which you would like included in the document head. This function makes starting projects a breeze.
By default, Bluefish uses HTML 4.01-style, non-self-closing tags. You can change this behaviour in Edit -> Preferences by selecting the HTML section and ticking “Use xHTML Style Tags (<br />)”. Please note that Bluefish does not auto-change this option if you select an xHTML DTD in the “Quick Start” function, so you’ll have to change it manually to have the auto-insert tags in the HTML Toolbar use self-closing structures.
The “Quick Bar” tab in the HTML Toolbar can be customised by adding items from any of the other tabs. To add an item, right click on it and select “Add to quick bar”.
An integrated character map (see the “side pane”, View -> Side Pane) allows you to insert every conceivable internationalised character or its HTML Entity equivalent.
Programming and Scripting
For a wide variety of programming and scripting languages, Bluefish features advanced syntax highlighting, code folding, bracket matching, a tabbed multi-document interface and a whole range of other features you would expect from a PTE devoted to web development. Supported languages include PHP, Perl, Javascript, Java, Python, Ruby and SQL (among many others).
For many of the supported languages, Bluefish also features an Auto-Complete function that makes suggestions of language constructs, keywords and structures as you type. You can turn Auto-Complete on in Document -> Auto Complete Popup.
A powerful Find / Find and Replace function is also included which is capable of performing searches through plain-text and POSIX- or PERL-style regular expressions. The replace function is also capable of making replacements in “All Open Documents” – something that’s lacking from other popular editors, such as gEdit.
Truly Special
One of Bluefish’s best features is it’s spell-checker. Firstly, the 2.0 branch contains in-line spell-checking, but what makes Bluefish’s spell-check truly special is its filter support which weeds out, for example, mark-up and code, resulting in a spell-checking function which only checks the parts of a document you want it to–no longer do you have to click “ignore” for every img or href.
Then there’s the speed, Bluefish opens in a split second–and once open it leaves almost no footprint.
Handy Hints
- Bluefish’s syntax highlighting seems to, on the very, very odd occasion, hiccup and sometimes the in-line spell-check doesn’t update quite as fast as it should–if this annoys you then you can periodically hit the F5 key on your keyboard to update the on-screen display.
- Just in case it isn’t obvious: to get alternative spelling suggestions for words that Bluefish has underlined red, hover over the underlined word and right-click. Simple as!
(K)Ubuntu and Mint Installation Instructions
These instruction should work for any Ubuntu (or Ubuntu derivative) release above 9.04.
The Ubuntu repositories contain an out-dated version of Bluefish (the 1.X branch). If you’re happy to use this, older, version of the software then you can install Bluefish directly from the Software Manager, or you can fire up a terminal and run sudo apt-get install bluefish
If you want the more up-to-date version (which I’d recommend) then you’ve no choice but to fire up a terminal. In all, you’ll need to perform 4 operations. Firstly, you need to add a snippet to /etc/apt/sources.list.d/. The command:
sudo wget http://debian.wgdd.de/stuff/debian.wgdd.de_ubuntu.list -N -P /etc/apt/sources.list.d
Next you need to update your apt package list:
sudo apt-get update
Next you need to install the repository cryptographic key:
sudo apt-get install wgdd-archive-keyring
Lastly, install Bluefish:
sudo apt-get install bluefish
Bluefish will now be added to the “Programming” category of your main menu.
New Project: noGallery
New project up:
noGallery is a customisable and flexible, pre-gallery CSS image grid. It’s a little rough around the edges at this point (quite literally, in some cases), but mostly works. As it’s a pure CSS solution, some of the functionality is unavailable to IE versions 9 and below, but the grid will degrade gracefully. For all other relatively-modern browsers, including IE 10, all functionality will be present. The grid, in various configurations, can be seen in action on the project page.
I’ll be adding new grid sizes and functionality, and doing some general tidy-up in the next month or so.
Concept Art / Poster
Yesterday’s whiled-away evening. Part of a concept art pack for a game design document (which will never be made into a game–it’s a procedure piece):
That ‘Reptile Stuff
As promised, I’ve dug deep into the hard drive for all things Partial Reptile. All tracks from the two releases, and some demos, have been uploaded to Sound Cloud, and I’ve collected everything together, along with a little background, in a new main menu item, “Music“.
- Partial Reptile–The Who, When, Why, What and Where
- A Pseudomusic EP (EP)
- Industrial Lullabies (Album)
- This is not My Name (Demos)
I won’t lie, I’ve been feeling a little erm “Music-broody” recently. I don’t have time at the moment, but the year’s early yet. You never know.
Anyway, enjoy the tracks.
Summing Number Ranges
This one will be nothing new to the Math (or trivia) boffin. Let’s call it mathematics 101 for the programmer.
I once sat in a mathematics class where the tutor asked a straight-forward question: what do all the numbers from 1 to 100 [inclusive, for clarity] add up to? Before we unwashed masses could even think about it, the smart cookie in the class had answered: 5050, of course. I was in awe, how-oh-how had someone added all those numbers together in an eye-blink. Very easily, actually.
You see, in any unbroken sequential range of numbers the sum of the first and last number will equal that of the second and second-last, and that of the third and third-last, and so on. In the case of 1 to 100:
1 + 100 = 101 2 + 99 = 101 ... 49 + 52 = 101 50 + 51 = 101
If you expand the above list, what you’ll end up with is 50 sets of 101, and that’s basic multiplication:
(50)101 = 5050
To generalise this to any sequential range of numbers: You can find the sum of all included numbers by adding the first and last number together, then multiplying this by the result of dividing the number of numbers by two:
(1 + 100)(100/2)
Roll on some years and join me in a beginners programming practical. Our task at the time: add all the numbers in a given range. The required answer, of course, was a loop, and I took a few seconds to construct one, just so it couldn’t be said that I hadn’t. Then I thought back to the above ninja-arithmetic and took a few minutes to abstract it into something useful. The principles are simple: the first and last number are needed (in order), and the number of numbers are needed.
Turning to code, this requires a function which will accept two parameters (the lower and the higher end of the range, in order).
To calculate the number of numbers, you can subtract the low end from the high end and add 1 to the answer (100 - 1 + 1 might seem odd at first glance, but consider the range 50 to 100: 100 - 50 + 1 = 51 numbers (which there are)). Divide this answer by two, and multiply that answer by the addition of the low and high end of the range:
(low + high)([high - low + 1]/2)
Keep in mind that while you are dealing with a range of integers, and your answer will be an integer, you are not performing integer arithmetic (your number of numbers may be odd), as you’ll see if you do a step-by-step evaluation of the 50 to 100 range example:
(low + high)([high - low + 1]/2)
(50 + 100) ([100 - 50 + 1]/2)
(150) (51/2)
(150) (25.5)
3825
Pulling these few simple concepts together, this is what your function might look like in Java:
public static int sumRange(int low, int high)
{
/*
flip parameters in the wrong order--the range is
still valid, but the function needs the numbers
in order.
*/
if(low > high)
{
int temp = low;
low = high;
high = temp;
}
// Be a ninja!
return (int)((low + high) * ((high - low + 1) / 2.0));
}
And once you have the function, you might as well throw some test data at it. You can use the good-old-loop method for validation of the formula output:
public class Test
{
public static void main(String[] args)
{
int testData[][] = new int[20][2];
testData[ 0][0] = 50; testData[ 0][1] = 100;
testData[ 1][0] = 1; testData[ 1][1] = 100;
testData[ 2][0] = 100; testData[ 2][1] = 1;
testData[ 3][0] = 100; testData[ 3][1] = 100;
testData[ 4][0] = 22; testData[ 4][1] = 22;
testData[ 5][0] = 50; testData[ 5][1] = 51;
testData[ 6][0] = 0; testData[ 6][1] = 1;
testData[ 7][0] = -2; testData[ 7][1] = 1;
testData[ 8][0] = 56; testData[ 8][1] = 1024;
testData[ 9][0] = 0; testData[ 9][1] = 0;
testData[10][0] = -2; testData[10][1] = -1;
testData[11][0] = 1; testData[11][1] = -2;
testData[12][0] = -1; testData[12][1] = -1;
testData[13][0] = -1; testData[13][1] = 0;
testData[14][0] = 0; testData[14][1] = -1;
testData[15][0] = -1; testData[15][1] = 1;
testData[16][0] = -2; testData[16][1] = 2;
testData[17][0] = -2; testData[17][1] = 4;
testData[18][0] = -361; testData[18][1] = -552;
testData[19][0] = -101; testData[19][1] = 354;
System.out.println("+--------------+--------------+-----------+");
System.out.println("| Range | Formula Says | Loop Says |");
System.out.println("+--------------+--------------+-----------+");
for (int[] dataSet : testData)
{
System.out.format("| %4d to %-4d | %12d | %9d |\n",
dataSet[0],
dataSet[1],
sumRange(dataSet[0],dataSet[1]),
sumRangeWithLoop(dataSet[0],dataSet[1])
);
System.out.println("+--------------+--------------+-----------+");
}
}
// The formula method
public static int sumRange(int low, int high)
{
/*
flip parameters in the wrong order--the range is
still valid, but the function needs the numbers
in order.
*/
if(low > high)
{
int temp = low;
low = high;
high = temp;
}
// Be a ninja!
return (int)((low + high) * ((high - low + 1) / 2.0));
}
// The loop method (for testing)
public static int sumRangeWithLoop(int low, int high)
{
/*
flip parameters in the wrong order--the range is
still valid, but the function needs the numbers
in order.
*/
if(low > high)
{
int temp = low;
low = high;
high = temp;
}
// Be...whatever the opposite of a ninja is
int count = 0;
for (int i = low; i <= high; i++)
{
count += i;
}
return count;
}
}
Test output:
+--------------+--------------+-----------+
| Range | Formula Says | Loop Says |
+--------------+--------------+-----------+
| 50 to 100 | 3825 | 3825 |
+--------------+--------------+-----------+
| 1 to 100 | 5050 | 5050 |
+--------------+--------------+-----------+
| 100 to 1 | 5050 | 5050 |
+--------------+--------------+-----------+
| 100 to 100 | 100 | 100 |
+--------------+--------------+-----------+
| 22 to 22 | 22 | 22 |
+--------------+--------------+-----------+
| 50 to 51 | 101 | 101 |
+--------------+--------------+-----------+
| 0 to 1 | 1 | 1 |
+--------------+--------------+-----------+
| -2 to 1 | -2 | -2 |
+--------------+--------------+-----------+
| 56 to 1024 | 523260 | 523260 |
+--------------+--------------+-----------+
| 0 to 0 | 0 | 0 |
+--------------+--------------+-----------+
| -2 to -1 | -3 | -3 |
+--------------+--------------+-----------+
| 1 to -2 | -2 | -2 |
+--------------+--------------+-----------+
| -1 to -1 | -1 | -1 |
+--------------+--------------+-----------+
| -1 to 0 | -1 | -1 |
+--------------+--------------+-----------+
| 0 to -1 | -1 | -1 |
+--------------+--------------+-----------+
| -1 to 1 | 0 | 0 |
+--------------+--------------+-----------+
| -2 to 2 | 0 | 0 |
+--------------+--------------+-----------+
| -2 to 4 | 7 | 7 |
+--------------+--------------+-----------+
| -361 to -552 | -87648 | -87648 |
+--------------+--------------+-----------+
| -101 to 354 | 57684 | 57684 |
+--------------+--------------+-----------+
Admittedly, this kind of thing is micro-optimisation, but optimisation is not why you do it. You do it because you can. At least, that's why I did it.
Experiments
I’ve added a “Projects” link to the main menu. Here, I will be documenting various development projects I’ve worked on over the past few years, and new projects as the come along…but that’s for future days. To kick things off, I’ve added an “Experiments” sub-category where I plan to post my one-point-zero excursions into new technologies. There are already two (playable) browser-based games in there, and an attempt at pure CSS animation. This is a section which wont see updates all that often, but those which do happen should be substantial.
Onward (pointy finger here)!