entropia

Here are a couple of ideas that I won’t follow through will but would like to see.

First, a Digg-effectiveness calculator.  It would randomly pick stories from the last two weeks or so and let the users vote in the style of The Funniest.  Then it would compare the voter rating to the number of diggs received.  Of course, the results would be more or less completely irrelevant, but I think it would be interresting to see which stories don’t fare so well even after getting thousands of diggs.

My other idea is a cliche detecting browser extension.  Over at the Cliche Finder you can type in some text and it will highlight cliches.  This extension would just be a right-click menu addition that does that same thing as the site.

I got my new theme up and running.  It probably has some bugs and glitches but it looks to be mostly working.

I always try to go with a multi-chromatic design when I start on a new layout.  Maybe with blue around the posts and green by the comments.  Or with different hues for the links and the background and design decorations.  It never works out though, and I always end up with just blue or grey.

Maybe it’s because I’m Not A Designer.  Maybe it’s because I haven’t quite finished CSS Colorizer.  I think it’s because blue and grey are good Coder Colors.  Whatever the case, it’s a nice, simple layout that doesn’t burn the retinas, and that’s fine by me.

Here’s another simple demo: Spoiler.  It hides and toggles spoilers and other content you might not want the reader to see right away.  Useful for movie reviews, joke punchlines, or anything else that would otherwise be prefaces with 80 lines of “!!!SPOILER!!!”.

Just follow the link, look at the source and feel free to use it yourself.

Partly because I haven’t posted anything in a few days (I’ve got some stuff brewing), here are some nice links you might now know about. 

CodeGolf:  write programs to solve challenges like converting Roman numerals to decimal, or calculating the first 1000 digits of pi, in as few bytes as possible.

The Cutest:  vote on pictures of baby animals to decide which is the cutest.  Top images guaranteed to make you say “Ahhww” or you don’t have a soul.  Also check out The Funniest and The Fairest.

StrategyWiki:  like GameFAQs, wikified.

Ajaxian: even though ajax is misused more often than not, there’s a lot a good stuff here.

Voting stars are a popular topic for javascript tutorials.  Probably because they’re nice and easy, but still flashy.  But every tutorial I’ve seen does it in the same, over-complicated way.

The common way of doing it is to put five imgs next to each other and add some onmouseover and onclick events.

The better way of doing it is to use five nested links.  This way, we only need to use javascript for the actual voting, not the highlighting.

Here’s what is usually done:

Some people like to clean it up with unobtrusive javascript, but it generally works the same way.

Here’s how I do it.

First the HTML:

Then the CSS:

That’s it.  No javascript unless you want to do something special with voting (like Ajax).

The crux of this method is that the five-star link is actually five stars, not just a single star.  It uses class stars, which gives it the hover property, and star5, which makes it 150px (or five stars) wide.  The other links are then overlayed on top of each other; that’s what position: absolute is for.  It’s a little counter-intuitive to put the five-star link first in the HTML, but it ensures that the lower votes show up on top.  All the links are actually transparent until you hover over them, them the highlighted star image is applied.

Take a look at the demo here.

Development is going well.  All of the basic functionality is working.  You can paste in CSS, replace the color values, design the colors, relate the colors with a few basic functions, generate “smart” CSS, and preview with custom HTML.

In the preview you can see how everything works.  In the color pane, the third color is selected.  It’s named ‘color2′ and it’s a simple function of the other colors:  rgb takes three integer values and returns the color.  The function shown, rgb(green(1),red(0),0) probably isn’t very useful, but you could do something like rgb(red(0)/2,green(0)/2,blue(0)/2) to get a darker version of the first color.  When you’re working with the colors, all the swatches are updated in realtime.

The CSS pane is showing the “Smart CSS”, which is the style sheet with the color values replaced with variables.  Clicking on “Raw CSS” brings you to the output, which has a actual values inserted.  It also has a comment header so it can be reloaded and parsed.

The HTML pane is just raw HTML that will use the custom style sheet.

And the Preview pane shows what the HTML looks like.  It isn’t updated in realtime like the colors; you need to click the Update button.  Getting the preview working was a real hassle and what I ended up with is pretty hacky.  I’ll go into detail in a few days after I take care of a few issues and put out a working version.

In this feature, I will introduce a new product or project I am designing.  Here, I will introduce CSS Colorizer (name pending), a webapp to ease the process of selecting color schemes.  I know there are plenty of other programs out there with similar intentions, but I think this one has a few differences.

The problem with selecting colors for CSS is that there’s no way to keep color values consistant.  Any color scheme change requires multiple changes throughout the style sheet.  And they’re not always straight-forward find-and-replace changes.

If you change a link color, for example, you’ll have to change the hover color, the visited color, and any matching colors.

This program will fix that by replacing color values with variables and establishing relations between them.  So you can create a color, background, and assign it a value.  Then, create another color, headerbackground, and define it as a brighter version of background.  Then, whenever you change background, headerbackground is automatically changed and propagated throughout the style sheet.

The interface will consist of a color pane, a CSS pane, and a preview pane.  Start by loading a style sheet into the CSS pane, then replace the color values with variables, like $$background.  Once you’ve done that, start creating the colors.

Colors can be either base colors or derived colors.  Base colors are given an actual RGB value, just like tradition.  There will be sliders, input boxes, and a color wheel for selection.  Derived colors are a function of base colors and other derived colors.  There will be methods like hueshift(), green(), and complement() to give a variety of ways to define colors.

Each color will have a preview swatch which is automatically updated whenever any color changes.  So, if you modify a base color, all derived color changes will be reflected.

For the preview pane, I’m considering two options:  an actual HTML file using the style sheet or a set of selectable matching patterns.

Saving will inject the actual color values back into the CSS file and write all color information into a comment header so it can be reloaded.  Since all loading and saving will be client-side, this will be purely HTML and javascript.

Update:  I forgot that javascript give you any way to read files (huge security hole).  So, I have two other options of getting CSS into the app:  Ajax and manual insertion.  I would like the option of a pure client-side app so I’ll give the option of manual loading (paste into the textarea).  Adding Ajax would not be a large task, but it’s not a priority either so I am making no plans to use it.

First, some background info.  I’ve been a programmer most of my life, but now I’m a software developer.  Not by choice, of course - I don’t think there’s a programmer out there who would prefer to be a software developer.  It’s just that there’s no way to make a living as a programmer, outside of a university.
I’ve focused most of my attention on graphics programming - OpenGL, raytracing, shaders, photorealistic rendering, procedural texturing, etc. - but lately, I’ve done more with developing webapps.  The difference between programming and developing is that when programming you ask “how can it be done”, and when developing you ask “how should it be done”.
As for this blog - it’s running on WordPress.  I thought about using my blog software, which I’ve done in the past.  Writing a basic blog is so simple, it’s been said to be modern-day equivalent of the “Hello world” program, but there’s a level of quality and stability that would just take too long to match.
I choose WordPress because of its popularity and ease of installation.  I used MovableType before, but I’ve had issues getting it set up right.  Plus, MovableType download requires registration, which is just silly.

So, I decided to start a blog.  Again.  But this time will be different.  Again.
I usually start blogging because I think I have something to say.  Conveniently, by the time I would finish writing I would have nothing to say, so I would cancel the post.  But this time I have nothing to say.
I have something to do.
I’ve decided to start doing things - making things.  And I’ve learned that, in software development, community is important.  It’s one thing to write programs on your own, with no users and no feedback.  But to make it, to becoming successful, to get my name out there, I need to need to actually stick my name out there.
So, here’s my plan.  I will actually try to get people to read my blog this time.  I will write about and showcase what I’m doing.  I will actively encourage and seek out feedback.