Let’s face it, the current CoolBasic website is pretty horrible. In addition to the fact that it’s completely outdated, it’s also ugly!

To be honest, the (current) website was supposed to be a short-time placeholder. Well, CoolBasic was supposed to be released years ago, too. But not all things end up turning out as planned in life. For CoolBasic, there was a long lull with the project, and everything kind of grew out of trend in the meanwhile. Tech evolved. World changed. Game industry changed. Game tooling changed. And now we’re in a situation where once great products such as BlitzBasic and Dark Basic have been unable to change and improve with the world. New, more modern tools entered the market and took over (such as Unity that’s got a lot of traction recently), thanks to their more competitive, technological advantage. Ironically, this is also true for CoolBasic. So when we come back, we’ll have to offer modern solutions! The Story of BlitzBasic has taught me a lot.

Along with the entirety of CoolBasic, the website needs a complete overhaul and better design. However, as the development of the new CoolBasic is still on-going (and not quite ready for public alpha just yet,) I don’t really want to waste time on a temporary website facelift. So let’s launch it with the actual CoolBasic alpha and go all-out with it!

CoolBasic is an interesting software project because it involves so many different sub-projects: We have some tech-heavy stuff like the compiler and runtime virtual machine. Then we have some UI coding for the IDE and additional tools. Then there’s the game engine. And also the whole set of services on the web, like the website or the future coming online documentation system. If I should temporarily grow tired on one aspect, I can switch to something else. And recently, I’ve been active with the new website.

Although not planned for immediate launch, I thought that now would be a good time to make some preparations in terms of establishing the design and foundation for the future site. How should it look and feel? What kind of pages and structure it should have so that I can deliver the intended message as effectively as possible? What is its purpose? What information should it contain and what topics are better handled on the forums and just provide a link for? And then there’s the technical topics to consider: Should I embrace HTML5 and CSS3 exclusively or still retain compatibility with other browsers?

Developer as I am, I decided to go with full HTML5/CSS3/responsive design (mainly because it’s new and fun, but also because I believe that by the time we go full public the majority of our target audience do have these things covered.)

Responsive design makes the website’s layout adjust accordingly to the available viewport dimensions. For desktop use, this is the size of the browser window. For mobile devices, it’s the size of the screen. Responsive design has some branches of interest: The common design principle complies to all devices and treats them evenhanded; the content is being laid out in such a way that from the browser’s view it’s like: “When the viewport is shrinking, where should I arrange all this content to.”

Then there’s the mobile-first approach that assumes that the site is mainly viewed on a phone or tablet. Mobile-first content is designed to appear in specific order most of the time. From the browser’s view it’s like “When the viewport is growing, I should scale everything up and larger.” For CoolBasic website, I’m going with the generic model.

With these goals in mind, off I went and came up with the basic content structure and a strategy how I would split the information across the pages. The main purpose of the new website is to introduce the CoolBasic alpha release and make all necessary information available to those who want to test it. The site’s lifespan is designed to last through alpha, beta, and perhaps even carry on at the final release.

Having working with it for a few days now, it’s starting to shape up. I’m happy with how the responsive layout re-arranges content blocks as the viewport size changes. I’m happy with the color scheme too, as it now gives out a more “professional” impression, but still has the CoolBasic ish vibe to it. Coherent design: single theme color; accent color; clear typography; image arrangement; symbol icons; CSS3 transitions; proper HTML5 markup.

Wasn’t easy, though. Not having done much web design for a couple of years, I definitely felt a bit out of touch with how fast web technologies have gone forward. Especially all that responsiveness – not an easy task to implement for pages with multiple columns, images and more complex widgets. CSS media queries are rather simple as a concept, but in practise can prove to be difficult to pull off when you have, say, site logo and site menu occupying the same “row.” I’m using the Twitter bootstrap as the basis of the layout and Font Awesome for glyphs.

At the moment, I consider the layout if not then close to final. I have all headers in place and know what I’m going to be writing about in each planned paragraph within the website. Currently I’m using placeholder images and the paragraphs only contain lorem ipsum, though.

In short, yes a new website will be coming, but not until we’re publishing the alpha. I’m not going to reveal it just yet, but maybe a bit closer to the release 😉

As Pass#2 is still progressing nicely (I think I’ve solved some recent problems rather well), a few other non-compiler related issues have risen – and why not, it’s refreshing to do something else for a change. These issues concern about the website of current coolbasic.com, and I also made some improvements to the blog. For reference, both rely on PHP technology of which I have moderate experience as a developer. But first, let’s prelude the article:

So what’s wrong with current coolbasic.com? If you remember the original website, you’d agreed with me that it was quite outdated from both design and technical points of view. General designing trends (these include the look and feel of the page, as well as way of navigation) tend to go together hand by hand with standards set by the current generation of Operating Systems. They show the road, they define the brands, and they set the rules what is “cool”. This phenomenom is best illustrated by studying the average color saturation and spectrum of hues of webpages, and then comparing them to color scheme of, say, the latest Windows. By no means, I’m not drawing too genral point here – of course websites vary a lot! But reasons for these often origin from how business works… It’s all about money, and therefore webpages (especially large, enterprise level ones) do not update as frequently as they’d like to. Of course Operating Systems want to make as positive a first impression as possible, and that’s by defining the new design so that the consumers would get a concrete evidence of change. Not many people are interested in a listing of improvements. But if the Internet gets filled with good looking images of what the new version would look like, it’ll hook people’s interest. Today’s market absolutely require competitive esthetics of a new product. The proof is there: remember the looks of Windows 3.1 compared to DOS? Remember how Windows 95 revolutionated the usage? Remember the graphical innovation of a Windows XP? And now we have the cutting-edge candy – Windows Vista. And that’s only the Windows’ part, Mac OS is quite good-looking too!

Enough stuttering
The original coolbasic.com website had the (now considered narrow-minded) trend of a Windows 2000 -style square layout, and medium saturated color scheme. Graphics didn’t play as outstanding a role as for what we’d have seen for the XP trend. In other words, text was the dominating element of the first glance. The page consisted of a “title bar” (featuring CoolBasic logo), a typical top-level side-by-side menu, the actual content of the page, and the footer (which essentially only had a copyright notice and a bottom margin). And since the “defining logo” of CoolBasic is the “Ice Cube”, the color scheme was “cool as lightish blue”. I also have to admit that the text contents of the website followed a poor design, too. Not in a complicated sense, but more like it lacked everything that makes navigation “good” and “nice to use”. Not really phenomenal web design… and it was a pain to maintain too, because of no dynamic content generation PHP would normally be perfectly capable of. All this happened a few years ago. Back then I also lacked the skill and perfection of CSS styling. I should have redesigned the website before I took the famous few years off from the CoolBasic project. And that crappy site page remained there for.. what.. is it like 3 or so years!

So when I did come back (and started designing the concepts of CoolBasic V3) in summer 2008, I wanted to get rid of that awful website that was by no means not by the trends of today at all. The original plan was to quickly construct a simple place holder webpage (the current one) which would give me enough time to compose a proper one. I had a cool vision on how the CoolBasic V3 brand would look like. But why ruin the element of surprise (the brand) by introducing the new website beforehand? Also, it’s good to keep the design somewhat close to the current product (Beta 10 of the old CoolBasic generation) until CoolBasic V3 is really knocking on the door. So I decided to refrain from releasing anything related to the new brand until I make it all official some nice day where the CoolBasic community will wake into the wonderful morning of new cool era.

Sooo… no new website brand until CoolBasic V3 alpha. Well, I’m not really happy with the current place holder either. Since the intention was to quickly construct a temporary webpage just to dump the old one, I must say that I could have done a better job at it. It doesn’t pass XHTML 1.1 validation, and all in all it has some elements that are now considered “obsolete” or “outdated”. I already heard some nagging about it, so during the next weekend I intend to build yet another place holder webpage, but in better quality this time. It will be designed to last until introduction of CoolBasic V3. Soon after it’ll be replaced with the the final website (of which I already have templates made).

Improving the blog
Since we’re on the business of software development tools, namely game making IDEs, and because CoolBasic is our only product as it stands, and because CoolBasic just happens to be a programming environment, I will be pasting a lot of code snippets to future-coming blog entries. WordPress sure has the “code box” feature, but text inside those elements will just render fixed width, and easy-to-read “coding” characters. There is no further styling, and it can’t handle text indentations properly. On top of that, long lines will wrap annoyingly, and long code makes it irritating to read other blog entries. Fortunately there are lots of syntax highlighting plug-ins available for WordPress. I found one rather popular and seemingly working highlighter called “Google Syntax Highlighter” by Alex Gorbatchev and Peter Ryan. This awesome plug-in enables me to paste CoolBasic V3 code snippets, and they get fully syntax highlighted and text indentated within the blog. I created a custom language brush specialized in CoolBasic V3 syntax, and according to my tests it’s currently working like a charm.

However, there are some limitations with the highlighter. When I wish to paste a code snippet, the code must be written like this:

<pre name="code" class="cb:nogutter:nocontrols">
// Insert code snippet here...
</pre>

Otherwise the component would render an annoying line numbered left margin (the “gutter”) to the code, and a stupid “tool box” that has quick links for printing and stuff like that. In order to remove those, I had to write some overriding code to the java script engine of the highlighter. The new presentation is now:

<pre name="code" class="cb">
// Insert code snippet here...
</pre>

Also, all code boxes now appear inside a scrollable box (with its max height limited). No more gigantic and hard-to-read blog pages ruined by long code snippets. After these modifications only one thing needed to be fixed: Most browsers break lines with a hyphen, into several lines. Other characters with similar behaviour include common coding separators such as opening parentheses and commas. Scrolled area also appeared ill-colored with the default styling. I solved both problems with customized CSS. You’ll see the code box control in action in future-coming blog entries.

This news has nothing to do with the development of Coolbasic V3, but I decided to share it anyways since the issue appears to be rather interesting. I’d like to start by telling I always enjoy seeing the community living vivid on the forums. It creates this feeling you’ve affected people’s lives by offering them means to showcase their creativity through game making. And that the community has grown and roaming. That said, I’m also very happy that the community features game making competitions in a regular basis and having fun with it.

However, while competitions tend to be healthy for any community (as long as it goes along the rules), there is always somebody who likes to manipulate the results given it’s possible in some way. It has come to the attention of the moderators and administrators (and me) that there exists some evidence of mischief within the results of voting. It appears to be that some users have created fake accounts which they use to cast extra votes for an entry of their choise. This, of course, distorts the votes and may result in declaration of false winner.

CoolBasic forums do require a unique email address for activation of new forum accounts. The main purpose of this is to discourage multiple users from the same person to be created. Even if someone wanted to activate more than one forum account for some purpose, he/she would need several working email addresses to get them running. That’s a nuisance I couldn’t be arsed to do, at least. But then again, I wouldn’t want to skew the votes either :/

What we’re seeing here, is someone motivated enough to carry over the pain and doing an annoying deed just so that he/she could cast some extra votes. The results must be very important to that user 🙂 Maybe we’re looking right into the face of the guilty when we’re declaring the winner. I don’t have the details of these cases (I haven’t consulted the moderation team in such detail), but I agreed that something has to be done to prevent this abuse.

We had a conversation on IRC what would be the best solution to solve this issue, and the common concept seemed to be that we’d simply move majority of the users into a different group and then allowing polls only for that group. The major factor was agreed upon to be the post count because, let’s face it, would someone really go through all this and, in addition, bother to increase all of those fake accounts’ post count above the treshold? A 3rd party MOD was suggested to be installed on the board. It was to be a new tool for administrators to mass-move users from a group to another based on some customisable conditions such as post count.

I did consider it, but I wasn’t quite happy with what would have been the outcome of that. Firstly, the administrators would regularly need to make this “pass”, say, in every week, where queried users would be moved to the poll-enabled user group. Secondly, it’d have been be just another user group with extra management and set-up every now and then.

Another option would have been to write a simple PHP-script that would perform this task automatically on page load (of which only certain people have access to). Umm.. naaah!

So what did I do? Without a word with the moderating team, one morning at work, I took the forum source, poked it a little bit, and uploaded a “tweak”. Just like that without any approval or discussion. I hope I don’t get blamed for this, and I hope the “fix” works and doesn’t cause any bugs or problems for the forums. I added a treshold value that a user must have exceeded in terms of post count in order to be allowed for voting. It’s a change in one certain place and easily modifiable should we come across the need to increase or decrease this treshold.

No error message is shown when a user with less than TEN posts tries to cast a vote. The forum simply reloads the page after pressing the “Submit vote”-button. It doesn’t completely eliminate the problem, but atleast it discourages more strongly the deceit. I look forward to see how this phenomenom evolves.

Due to the incident with coolbasic.com webhotel I decided to change hosts and move the domain and the entire website to a new provider. After being absent for almost 3 years, I also feel that the current CoolBasic website is simply put, quite awful; Its look is outdated beyond all hope, and in fact its inner stucture collects dust in all essence – something that is completely left out of the current trends and CSS-based styling standards.

Also, CoolBasic V3 has its very own theme now (of which I will not elaborate just yet), so I decided to create a new website that is a little more appealing to a certain degree. The new website framework is already complete and looking good, but until CoolBasic V3 launch I don’t want to release the site since it would ruin the surprise (by its theme). Although the visio I’m having right now is just brilliant (*cough*) I really think that CoolBasic V3 should be released not until its Beta stage, and as a whole. Meaning that the Beta, website, manual and all other related things will just pop up during one night, and the users would wake to a beautiful morning 🙂

That being said, a placeholder website is needed. The current one really sucks (what have I been thinking while doing that?!), so I also took the effort and conjured up a little website for the current CoolBasic (2.x -generation). It’ll remain in effect until the massive Beta-launch takes place and the actual website will be introduced. Both websites, the placeholder and the final site, will be bilingual i.e. available in both english and finnish.

So far, the final website passes the strict HTML 4.01 validation.