the work and personal site of Jared Alessandroni

Archive for March, 2010

A WYSIWYG Editor

Wednesday, March 31st, 2010

As a small follow-up on an earlier post, I wanted to describe a simple methodology for building a rich-ish editor for your favorite web application. Let’s start, though, with the basic idea.

Why is this a big deal? Well, for most of us, it isn’t. When we use websites, we generally assume that the gnomes who edit and manage them use proprietary software solutions to update their content. Those more initiated folk will spit out names like Dreamweaver or and I won’t even link to it something far more disgusting like Frontpage. More involved users, however, know that most web publishing is done on things like this – blog software or CMSs. As it is often my business to build such beasties, I happen to know a lot about the latter. These are built by people like me, but almost never actually managed or edited by us. Instead, most websites you visit – from the New York Times to the Daily Kos are editing and managed by the content producers. These are the guys with BAs in English who wouldn’t know a tag from a dragonfly. A WYSIWYG editor is what makes that possible.

Old School

Websites from the 90s ROCKED

There are a few major options out there for these kinds of editors, and while most of them are decent, they’re all heavy. The most common, and the one I’ve generally used is MoxieCode’s Tiny MCE. Tiny MCE is neither tiny or Moxie. In fact, it’s brontasaurian by web-standards at close to 1MB, and it’s kind of ugly to implement. And while there are others both larger and smaller, they all suffer from the same grand problem – they’re too much or too little for my average client, and they seldom support the kind of custom solution I’m looking to implement.

Truly Custom What could be more custom than a few bold and italic links? Well, most of the time it’s a design issue. For example, my friend Bill edits a site I built called Dartmouth Undying whose purpose is to keep the “Dartmouth should never have gone Co-Ed” crowd from having too much power on the Alumni Council. Well, I designed a site for them that I thought was clean, elegant, green – everything Dartmouth is short of those fries over at the Hop. So, I used Moxie on the site and shortly ended up with crazy ugly… well.. bright colors and stars and dancing Yodas… well, practically. Why? Because he didn’t have, within his WSYWIG the design that I, in my infinite designerly wisdom, the styles that were meant for the site. And even if he had, he also had the myriad other things that that silly program did have – for instance, a stupid color picker. But now, I am happy to announce that I have one. Next post – the actual code and simple directions for those of you who might wish to implement the same.

A few lines of code…

Monday, March 29th, 2010

This has been messing with me for a long time, so I’m posting here:


seltext = (document.all)? document.selection.createRange() : document.getSelection();
if(seltext!="")
{
alert(seltext);
}

Basically, in my quest to create a WYSIWYG editor that wasn’t huge and unsavory (and worked well on Safari), I have been doing some major hackery. Well, the hackery ends – I can finally just fix it. Thank you Google and months of ignoring the problem!

(and, I finally get ternary operators!)

The Frenzy Begins

Friday, March 19th, 2010

The saddest part is that though I initiated this blog almost entirely to get myself writing, now is the first time I’m actually going to commit to it. Perhaps it’s the long and deep scars from from red marks on my papers in high school, but more likely, pure, unadulterated laziness. If you’re game, sign up! Buddy jareda.

Easter Racism – Early

Monday, March 15th, 2010

Now, Everyone’s a little bit racist (isn’t that true-u, Kate Monster?)

But everyone’s just about as racist as you-u!

But you just can’t beat central subtle, ridiculous racism for letting everyone – especially our children – in on the magical world of thinking people are different because of their color or flavor. In this case, literally. Witness:

I took this yesterday on the trusty iPhone in a Hannafords in central Maine. What was most striking? Was it the “Bling bling” candy? Perhaps it was the bejeweled “D” sported by the Dude Bunny cum Arthur character. Now, as you know I am not the king of the Jesus-lovers, but let’s think this through – if you were to celebrate the resurrection of your God through, say, fertility symbols and chocolate, is this the first thing that comes to mind?

Thanks, Diva and Dude, for reminding us all what Easter is about.

PS: I’m not the only one with an appreciation!

Mafia Wars I: Pong

Saturday, March 13th, 2010

Mafia

So, I’m working on a potential job for an unnamed part who might or might not have a penchant for biting off small animal heads, and so I’ve been spending a lot of time doing research.

But I thought it was rubber!

The research in this case is for what are apparently called spreadsheet games. These are games like Mafia Wars and Farmville. A spreadsheet game is simply one where the whole logic of the game could be easily plotted in a spreadsheet.


I only use Open Office

By logic, of course, I mean the way that the game defines user interactions.  A computer game is generally understood primarily as a one to one interaction, you being the one and the other one being the computer.  This is in contrast to, for example, a board game , where the interaction is shared evenly between you and the other players evenly, or a team-based interaction like a soccer match.  Now, some of you are thinking, wait – these are social games – you play with teams – you recruit your friends, you work together to shared goals!  This is, however, akin to saying your dakimajura love is as real as anyone else’s. Here’s why: The basis of a one-to-many or a team game is temporal – you can’t have a soccer game an hour after the rest of your team has gone home. You can’t play Pictionary after everyone’s gone to sleep. Sure, you could set up a web-cam and play Pictionary, or a multisensory-motor extender system (with cleats) to join the soccer game over in Japan, but you can’t call it playing with the rest of the crew if the crew is still feeding their many, many cats. No, in fact, most computer games, and pertinent to this conversation, all spreadsheet games are one to one. Forget Capture the Flag, Trouble, and chess. Think about them as a game of Pong.

Yeah,  1K of RAM!

Even when you win, you lose.

Pong as in, you make your move, the computer responds. You respond. The computer responds. Pong.

This is an important paradigm understanding. Because you have to start by thinking about how advanced and how complex a system like Farmville is – the kind of programming and artwork and even text that’s put into it. You then have to think about the millions (yes) of people who play these games and ask yourself – wait – these people can’t all be mindless idiots. (Most, sure. But not all.) You have to take all the intelligence and money and creativity that went into this situation and scrap all of it. It’s Pong.

But you have to make strategic decisions! Like, which property should I buy with all these points I made? Which jop should I take? How should I feed my animals? I’m not just hitting a paddle to stop a virtual ping-pong ball! In order to truly appreciate the way a spreadsheet game works, you have to think about what happens if you choose a different property, feed your animals differently. Now, just like in Pong, you have to do something, or else the ball gets past you. And while hitting it just right one way will return it in another – and you might increase or decrease your chances of getting past your virtual foe – at the end of the day, you generally just do your best to not get it past you. Isn’t that why you feed your little farm animals? You can pretend you have made a meaningful decision, but have you really understood the consequences? Do you really have access to all the variables? In truth, your decisions have just about as much behind them as you response in Pong takes into account Euclidian Geometry.

But there’s a story! This is a point I will somewhat concede. Whether it’s a time of transition for the Mafia underworld, or a great opportunity to build a new life in Farmville, these are in no way similar to the story that you’ve stumbled upon a rigid, magical two-dimensional ping-pong table with paddles that work hands-free. Right? I mean, it’s not like you could have just gone OUT and planted a garden, or chased away thugs… or picked up a paddle? See, what’s important to imagine is stretching out time. If Pong were meant to last for days, months, even years – wouldn’t you have eventually added a little more to it? What if every 10 points your paddle got a little bigger, but the computer’s side got a little faster? What if randomly, another ball could find its way onto the board just to keep you guessing?

What if this guy showed up at 1,000 points?

But I never know what’s going to happen next! Oh really? In pong, you’ve figured out that the 42 degree angle at which you’ve hit the left side of the table determines exactly where the… well, I guess you’re all that and a bag of loser-chips, Professor Nürdlame. And, since an object bouncing off at one angle will always bounce off at the complementary… you know what, shut up anyway. Well, that’s where we started back in the beginning with the whole spreadsheet thing. While it’s a lot more complex, you really do know exactly what happens if you upgrade the Pawn Shop in Mafia Wars. And while you can’t guess exactly what will happen when you face Don Dangerous (whose picture is actually her three-year-old daughter, thanks, Facebook) in a street brawl, you can figure it out. You have this much attack, they have this much defense – roll your little 8-sided die and… who’s the Dungeon-Master tonight again? Oh, the kid who lives in Mom’s basement? Sorry, where were we?

So what’s your point? This is all I’m trying to get here as I start to slowly dissect these spreadsheet games – the interaction is actually deceptively simple. If you take away the story, it goes like this: Hit button, wait for semi-random response, hit next button. Feed your animal. Buy your gun. And… oh, you found a secret treasure – lucky you and what a funny coincidence that it happened just as you were getting bored. And this basic interaction is easy to understand on a very visceral level – ping… pong… ping… pong. And what we can do with this – this is the beauty of it – we can with very simple tools make it a ping-pong that you will do instead of checking your work or resuscitating that man’s heart over in the ICU.

Coming up next: The Elements

Fun with Grammar

Saturday, March 6th, 2010

Recently, my peeps over at HuffPo posted this fun slideshow of awful grammatical and spelling and otherwise logical errors found in public. I submitted my own, but they didn’t take any user submissions – so here they are!

This was taken last year around the Mott Haven section of the South Bronx.

This was taken at my very un-gentile building on the Upper East Side.