CODING

An ominous title, for yet another, but this time rather technical, guest post by EER.

Today I'll talk a bit about some crazy stuff I have been developing for work lately. As you may or may not know, I primarily work with .Net. Our government in the Netherlands is slowly moving to 'alternative' software platforms such as Linux or Macintosh.

Now Linux is not much of a problem, it is a developers' platform, and being a developer, I feel right at home using Debian or Ubuntu. But a macintosh is a whole different story. Luckily, I found the terminal after about two hours fiddling and everything is semi-normal if you just use the terminal ;)

Armed with a terminal and the latest version of the Mono framework I went about and tried to run my app. Of course, this failed horribly and I considered various options to get it all running. My first experiments with Windows Forms interfaces on the mac weren't very successful (to say the least). After inquiring on the mono-winforms mailing list, I was told to use the native Mac OS X driver by exporting the following variables from the terminal:

export MONO_MWF_USE_QUARTZ_BACKEND=1
export MONO_MWF_USE_CARBON_BACKEND=1

That looked a bit better than the X11 version, but still the stability was crap. So I moved on to check out the native Mac OS X interface programming framework "Cocoa". There are bindings available for Mono: cocoa#. These bindings are distributed with mono on mac by default.

So I tried to use them, which did not work as I came to expect from .Net when programming Windows Forms. So finally I'm coming to a point: Mac programming is different. How different you ask? I'll give you some hints to get started more easily:

• You must create the user interface with "Interface Builder" which comes with Mac OS X.
• Save the interface as a .NIB file, then use Application.LoadNib() in the cocoa framework to connect your code with the UI.
• In the Interface builder, you can create an object with predefined properties and actions. Your .Net class should be registered using attributes on your class.
• The message loop (Cocoa.Application.Run) does NOT return after when quitting. This is the last statement that is executed in your main method.

Code samples can be found in the Cocoa# source code, but I'll explain some of the attributes you can use:
  [Register("ControllerClass")] // You can use the Register attribute on a class to register it with the Object you have defined in the Interface Builder.
    [Connect] // Use the Connect attribute to link the public class variable to one of the outlets defined on the registered object in the Interface builder. These outlets can also be linked in the Interface Builder to various components in your NIB. For this to work, your object needs to be delegate for the component you want to access here.
    public Cocoa.Panel aboutPanel;
    [Export("show_about:")] // You can use the Export attribute to link class functions to the functions defined on the registered object. These functions will then execute managed code when they are called from the UI.
    public void show_about(Cocoa.Object sender)
    [Export("applicationWillTerminate:")] // The last one, still an Export, but this is the one you will need for cleanup code. As the Messageloop does not return, this is the event handler if the application is terminated by pressing Quit in the dock. For this to work, the registered object should be delegate for the application.
    public void ApplicationWillTerminate(Cocoa.Notification not)

 

I'd heard about Search Engine Optimization (SEO) before, but I'd never really thought about applying it to this blog. SEO aids search engine crawlers in indexing the content on your site by offering up more information into URL's than you'd normally get using integers to call up certain posts. Before today, when you clicked on a link to comment on a post, you'd be taken to a url that looked like this:

http://unleashedcreativity.net/comments.php?post=140

To a search engine, this post reveals nothing about the contents of post #140. If someone tried to look for this post by its title, they'd have to know the exact title and hope that it was the first result that popped up when they performed a search. SEO works for bloggers by making it easier for viewers to find content.

Case in point: Now, when you want to see post #140, you'll see a link that looks like this:

http://unleashedcreativity.net/comment/140/Build_a_site_in_24_hours_Yes_says_the_
man_in_the_blogosphere.html

As a viewer, you're more likely to remember the fact that I used "blogosphere" in the title of that post than you would the fact that you were reading post #140. In the future, you'll be able to search for "Unleashed Creativity blogosphere" and find that post at the top of the list instead of whatever post featured the most occurrences of that word!

I feel bad waiting until now to mention his name, but I wouldn't have been able to get the blog up to SEO standards without some gentle prodding and help from EER. We just finished spending two and a half hours working mod_rewrite into the system, making sure that any link to a comment page was in SEO-format, devising a means for me to link to previous posts through FCKEditor, and optimizing the search-by-tags functionality. It went off very well, all things considered; we ran into a fair share of problems, but between the two of us we were able to make everything play nicely.

I'd get a bit more technical in this post, but my brain is fried and I'm about two and a half hours behind on my reading for the week. EER is waiting on the wings and will post about an as-of-yet-unknown topic in the next day or two, so stay tuned for that; provided he doesn't talk about all the work we did today, I'll be back after him to explain some of the techniques we used to revitalize UC!

During my travails around the interwebs, I came across an interesting Digg article. It turns out someone managed to get a website up and online, from scratch, in 24 hours. The 24 hours were spread out over 4 days, but it was still an impressive feat to go from mock-up to development to production in such a short amount of time.

To get the site up and running as quickly as he did, he relied on Ruby on Rails for the site's framework, as well as some free SVN to keep track of changes to the site files (a technique I plan on looking into implementing in the next day or two).

Graphically, the site isn't too complicated, but he admitted himself he's not much of a CSS buff; he basically took a template he designed in Photoshop and sliced it up into easy-to-manage template images. It's an admirable approach, but I know I can do better since I'm quite good at CSS!

I also have to give props to the guy for developing a fairly robust API within the 24-hour time slot. It appears to be fairly painless to use and offers a degree of interactivity that you wouldn't expect from a quickly-launched website.

Needless to say, Dominiek's endeavor got me thinking. I've been sitting on a novel website idea for the last four months or so, and I've decided that it's time I brushed the dust off and resumed work. I have a lot of ground to cover if I plan on launching any time soon, but I think if I tackle it in small chunks, it'll all come together relatively quickly. I'll start to reveal details of my mystery project as they're fleshed out, so stay tuned!

And I need more readers! Perhaps when I get my new project off the ground I'll develop some readers. I've only had a few "tech-related" postings, and I've done squat for SEO or marketing, so I can understand why my blog has basically tanked. I suppose there's always a chance my new project will take off and I'll gain a loyal following, but I'm sure that's something time will have to determine!

Until next time, folks!

I finally figured out a round-about way of disabling FKCEditor plugins based on the page the editor is being used on. As I mentioned earlier, I installed an autosave function that will preserve my new posts until I post them onto the front page; the problem I was having was that if I wanted to edit an existing post, the AutoSave would save that post's content over the saved new-post's content. What I needed to do was disable the auto-save script on the Edit Post page.

It turned out to be a fairly easy solution. Basically, I grab a GET variable related to the current page's function from the page's URL and load the AutoSave only when that variable is set to a specific value. On any other page (i.e. the Edit Post page), the auto-saver is not loaded. In the case of this blog, it was a rather small bit of code:

var windowCode = parent.window.location.href.split('specific_GET_variable=')[1]
                 .split("&")[0]; //(multi-lined because it broke the layout)

if(windowCode == 1)
    {
    //Load Plugin
    }

I have to call parent.window because FCKEditor is loaded into a frame. I also learned that if I want to grab the current page's URL as a string, I need to call window.location.href as opposed to simply calling window.location; window.location is an object, and it contains much more information than just the URL. After grabbing the URL, I split the string into an array using the GET variable I want to read as the point where I want the string divided into separate array elements. Then, I perform another split on the second element of the first array. The second split is performed to single out any other GET variables that may appear in the page's URL. I can then grab the value of the desired GET variable, which is stored in the first array element of the second split.

It's a simple yet elegant solution, if I do say so myself :P

I have to laugh hysterically to myself every time I even think about writing something new on UC. I laugh not because I've lost my sanity, but because I realize that I have very little information to benefit others. I wrack my brain trying to think up a decent, interesting topic and pull up nothing; after all, how interesting is an 8am-5pm job, Mondays through Fridays, and a weekend spent playing games or browsing the internet? I don't even like reading about it, and I live it!

Today's a little different, though. I managed to find a bit of code from my most recent project that I thought might help others should they come across the same problem as me.

What problem am I talking about? Why, the problem of finding a decent way to convert RGB color strings to Hexadecimal color strings!

I needed a function that could read color strings given by a browser and return those colors as Hex if the browser returned RGB. It took a bit of searching and piece-mealing, but I managed to come up with a function that gets the job done, and here it is:

function RGBtoHex(rgb)
	{
	if(rgb.search(/#/) > -1)
		{
		return rgb;
		}
	else
		{
		rgb = rgb.substr(4, rgb.length - 5);
		rgb = rgb.split(", ");
		
		r = parseInt(rgb[0]).toString(16).toUpperCase();
		g = parseInt(rgb[1]).toString(16).toUpperCase();
		b = parseInt(rgb[2]).toString(16).toUpperCase();
		
		if(r.length == 1) { r = "0"+r; }
		if(g.length == 1) { g = "0"+g; }
		if(b.length == 1) { b = "0"+b; }
		
		return "#"+r+g+b;
		}
	}

The function itself is pretty simple to use; send a color string (either "rgb(r, g, b)" or "#XXXXXX") to the function RGBtoHex and you will get back a hex string. Hex strings are automatically detected and returned; the true magic happens when you send an RGB string through.

First, the function removes the "rgb()" from the string. Then, an array is created that houses the Red, Green, and Blue values.

From there, each number is parsed into its appropriate Hex value via toString(16), then uppercased to match Hexadecimal formatting. If only one character is returned during this process (for example, if Red equals 0 before being converted to Hex, it will return "0"), then the string requires a zero (0) in front of it.

Finally, the function takes the three parts of the RGB string, lines them up in order, and places a pound sign in front of it, and voila! A Hexadecimal string from an RGB string!

This is the cleanest I could make the code (sans taking out all the line breaks), and in fact this is the second version of the original function; I find that over time, all my functions get refined, and this one was no exception!

I've got a large web-based project that I'm working on in my free time, and though it still has a while before it is ready to be released, stay tuned; I'll be sure to drop a link here when everything is ready to go!

Until next time, ladies and gents!

This week is one of "those" weeks, the kind where everything is going right. What happened that has me in such an upbeat mood?

First, payday was yesterday. Can you say cha-ching? Not only has my new job as a student programmer for my university's IT department provided me with some interesting "job site" training, its proven to be quite lucrative as well; I've made 150% more money in two weeks of work than I did in a month at my old job. I also received a check from a friend who screwed up her webhosting six ways to Sunday.

Second, I kicked ass on two midterms this week. On Monday, I had a Statistics midterm, and on Tuesday I had a Japanese midterm. I earned a 96% on my Stats midterm, and a 94% on my Japanese midterm! I'm so jazzed about the Japanese midterm because I bombed my first chapter test (78%) and was worried that I might not do as hot this quarter grade-wise as I did last quarter.

Third, I got a lot done on my PocketPadlet application. PocketPadlet (for those who don't know) is a set of applications I created that allow owners of PocketPC's to use their devices as touchpads for their PC's. Before today, functionality was limited to moving the mouse cursor around using the stylus. After a bit of inspiration, though, I was able to program in left and right clicks as well, inching the program closer to being a viable alternative to a computer mouse. There's still a lot of work to be done, as the program has quite a few rough spots when it comes to clicking; namely, whenever I tap the screen to signify a left-click, if I don't tap the EXACT same spot as the first tap, the mouse jumps around and the double-click isn't registered by Windows (liken this to jiggling the mouse around when you're trying to open up a document; too much movement and Windows doesn't register the double-click as operating on the intended file). Other than that, though, I'm very pleased with the results.

The last thing that will make this week all the sweeter will be when I finally get my new bike this weekend. My previous bicycle was stolen from a locked on-campus storage area on the 31st of December, during my winter break. Needless to say, I was devastated and have had to endure an entire quarter a half of walking...it may sound insane, but I love biking and the independence that comes with owning a bicycle. When that bike was stolen, a big part of my self-sufficiency was destroyed; I'm brutally reminded of that day every time I see someone riding a bike back to their dorm after class or chaining it up to a rack.

And that's a wrap. I'm off to study some more Japanese and hopefully get to bed at a decent time...only time will tell if I'm successful at both endeavors. Cheers, mates!

I've not had the amount of time needed to get that program review up here, but I have something just as good. About a month ago, I decided to finally get around to creating a PHP image gallery...with a twist!

I'd created a photo gallery about a year and a half ago for someone else's site, but the site never took off and the gallery remained in a partially-usable state. What I did recently was take the existing code for the gallery and added in dynamic thumbnail generation using PHP's GD2 library. Part of my motivation for this was wanting some kind of image gallery to go along with this blog system, linked above in the still-inactive 'Gallery' link under the logo, that would allow you, the readers, to peruse through the images I use in my posts, as well as any other random pictures I might upload to it.

For now, though, I've set it up for testing purposes, viewable here. I don't know when I'll pick the code back up and finish it, but I just might find time after I finish up a couple of other paying projects!

Every once in a while, I'll see some article on Digg about programming font alternatives and I'll find myself thinking, "is that really necessary?" I've been around programming for the last four or five years, and in all that time I've never once moved away from the default Windows IDE font.

For those of you who've never touched programming in a computer language, most programming integrated development environments (IDE) are set to use the monospaced Courier New font. Created in 1955 for typewriters, this font eventually found its way into Windows operating systems as far back as Windows 95. The strength in this font and many of the other monospaced fonts is that the characters all line up vertically. Here's an example of what I'm talking about:

I've compared Courier New to Times New Roman because TNR is widely known as a popular font for word processors. As you can see from the guide lines in the image, all the characters typed in Courier New (the monospaced font) line up, while the characters typed in Times New Roman do not. A benefit to monospacing characters in code is that its possible to easily compare the content of various lines of code. If I want to compare a MySQL database connection string from one file to a similar string in another file, I can just copy-paste the two strings and compare their string length to check for any inconsistencies or differences between the two. With a font like Courier New you'll notices character differences between strings almost immediately.

Since I started coding, I've tried to switch fonts once or twice. I stayed away from TrueType fonts because I liked the look of monospaced characters, but finding a monospaced font I like was difficult. Every time I tried a different font, I thought the text was too small or the characters were too blocky. SOME monospaced fonts even boasted a special tiny size, as though I liked coding at size five font. No matter which font I tried, though, I ALWAYS moved back to Courier New. Call it stubborness, call it security, but I had found my favorite programming font a long time ago.

I suppose the perfect programming font is determined solely by personal preference. Personal experience tells me that, for a word document, non-monotype-fonts such as TNR are perfect because they set up words that look more naturally-spaced, similar to how someone would write. When it comes down to programming, monospace fonts are the way to go because of how neat the code looks easy it is to compare various bits of code. Just my two cents.

I've really dropped the ball recently. Its been, what, a week since the "Possible Downtime"? Well, I have a couple boring things to mention and a bit of a product review, so brace yourself! Excitement abounds in the land of the web designers and techies.

First off, let it be known that I hate LA and its impatient drivers. The only thing that keeps me coming back is getting paid $15/hour for easy work AND the time I spent on the road travelling there (2 hours each way). That is all.

In regards to the title, I've upgraded my blog's backend a bit. For the most part, I believe the front end, the bits of the blogging system that involve input from you the readers is complete. I've addressed spamming from bots, the numerous date problems have all been figured out, and the format of the posts are, I think, organized and easy to read.

The backend, on the other hand, the part that I get to see and use, has been in a state of disarray for a while, with half of the functionality actually implemented. Well, last week I decided to finish the missing components and make it that much easier for me to manage my blog when I'm away from home. I've decided to treat you all with a picture of the admin page, just so you can see what kind of management features I've stuck into my site:

[center]

The Matt's Blog Admin page
[/center]

To be honest, there's not much to look at. The categories are self-explanatory, dividing up various tools into their appropriate groups. At the moment, everything with a link works EXCEPT for the "Categories" section. I'm still trying to figure out how to tag my articles to allow for easy searching, so I jumped the gun a bit and made that a working link. The "Comment Control" category will be removed because I've worked in comment deletion into the same page that you edit news posts from. I've found that lot easier to keep track of and delete only the comments I want to delete.

The "Database Connection Settings" link does indeed work, and through that I can...well, I'm sure you can figure out what that's for!

Last but not least, I have the option to "Edit Side Panels", the various link buttons you see to the right of the posts. That's no more than a <textarea> with some HTML in it, and in the future I'll have to flesh that out a bit more to make it more user-friendly.

I would have included pictures of each of the subpages, but I'd rather keep that to myself until I'm ready to release this as software for people to try out and perhaps buy...but that's a ways down the road.

Moving on...

If you've been reading my blog for the past few months, you'll remember this post I made about various freeware programs I use that replace commonly used commercial applications. One of the points I brought to light in that article was that I had yet to find a suitable free replacement for Dreamweaver. I have a bit of an update to that article.

About two weeks ago, I came across Webuilder 2006 by Blumentals Software in another one of my efforts to find a program that was as powerful as Dreamweaver without the cost. At first, I had disregarded this program because it cost money and thus would not have been a suitable FREE replacement for Dreamweaver.

Well, four months after that post, I decided to give Webuilder a try, drunk on the fact that I had just finished up with a client's website and I now had money to spend on such a program. Lets just say that I ended up purchasing the program (for a paltry $50) 5 days after downloading the demo. I was very impressed with what I had seen and experienced, and I am very comfortable in saying that this program could give Dreamweaver a run for its money.

The interface is very customizable. All of the toolbars under the menu items can be added or removed and moved around to suit one's preferences. I prefer a rather spartan coding environment, so alot of the available tools are hidden away. In the screenshot below, you'll notice that the buttons just about mimic the style of toolbars in Microsoft Office applications, and I think this helps the programmer feel more comfortable with his coding environment. The color scheme, fortunately, is customizable, too. Before I got my hands on it, the code used a lot of blues and purple and greys, and it made it difficult to tell where one block of code ended and the other began. I went in and modified the color scheme to use PHP's colors, making it incredibly easier to keep my PHP seperated from my HTML code.

You'll see two other panes to the left and to the right of the code. The Code Explorer to sealed the deal once I saw what it did. In PHP mode, this panel will show you EVERY CUSTOM-CREATED FUNCTION ON THE PAGE! Simply put, I can see all of the functions I've made and reference them without having to find out where they're located on the page. Dreamweaver never had this feature, and looking back I'm surprised that it went this long without it.

The File Explorer to the right is a pretty standard feature in coding environments, and Webuilder goes two steps forward by including FTP connectivity and "Projects" that you can set up to organize all the websites you're working on. Its very nice that all three functions are included in one pane because it keeps most of the program open for the code window.
[center]

Webuilder's IDE, customized to my liking
[/center]

Like many other IDE's, Webuilder has a split-screen setup that lets you make changes on top and see the code rendered within Webuilder. The nice thing about the in-program renderer is that you can see the page you're working on in both IE and Firefox without having to have those programs open. I find this feature indispensible because I can see code changes without having to wait for a browser window to open up.
[center]

Split-screen IDE
[/center]

Here's some miscellaneous pictures I took of the various features in Webuilder:
[center]

Function hints for custom-created functions
[/center]

[center]

Publish files to the internet based on when you edited them
[/center]

[center]

Code hints and completion for CSS!
[/center]

So I hope this makes up for the week without a post. I'm going back out to LA with a friend tomorrow to do some more computer work, so I have four more hours of work to look forward to. AND, before I forget, look for tomorrow's big announcement! What could possibly be so amazing that I create this much suspense a day in advance? You'll just have to tune back in tomorrow to find out. For my fellow Americans, I hope you had a pleasant Labor Day, and for my international friends, I hope you had a very nice September 4th!