Archive | December, 2009

POSTing JSON to a Sinatra-MongoDB service

30 Dec

I’m using Sinatra and MongoDB, a sensational combo, to build a web
service and wanted to post JSON from the browser. It was easy in the
end, but docs were a little lacking in a couple of places, leading to
confusion.

From the browser, just post the JSON – I’m using the JollyToad library
for $.toJSON (http://jollytoad.googlepages.com/json.js):

$.post(“/sessions”, $.toJSON({
user: $(“#user”).val(),
….
})

In the server, I get the JSON payload using request.body.read.to_s
inside a Sinatra rule, and convert it with JSON.

post ‘/sessions’ do
session = JSON.parse(request.body.read.to_s)

end

(The hard part was working out how to get the raw data, i.e.
request.body.read, and then realising it’s not actually a string.
There are a few variants such as request.POST – see also
http://www.gittr.com/index.php/archive/getting-data-into-a-sinatra-application/)

silly video portal – an experiment using tiddlywiki to make a generic web app (no TW look’n’feel)

19 Dec

http://tiddlywiki.mahemoff.com/video.html

(tested in FF 3.6)

The tiddlywiki above is a lame video portal that looks like a generic
web app (only uglier). However, behind the scenes, it’s a tiddlywiki.
Actually, that’s not such a big secret as you probably saw a FOUT –
Flash Of Unwanted TiddlyWiki (cf
http://en.wikipedia.org/wiki/Flash_of_unstyled_content) – before the
page loaded. I’m not sure how easy it is to get rid of that – perhaps
a plugin that writes to the MarkupPeHead shadow or something.

But anyway, the point is to show how such a page can be styled.

There is actually a bit of a secret here. If you hover up to the
top-right, you’ll find a secret Backstage button. It gives you power
access to the rest of the tiddlywiki. I have in mind to replace that
with a “flip” button that would flip the UI into a regular TiddlyWiki.
(Would be awesome to do a 3D flip effect a la
http://lab.smashup.it/flip/ .)

It uses the TiddlyWiki theme concept. You make a tiddler with any of
three sections (blocks with headings): StyleSheet, ColorPalette, and
PageTemplate. Then switchTheme(“nameOfTiddler”) will switch the theme.
There are various plugins to peform this action on behalf of users.

However, the standard theme mechanism has a couple of catches –
there’s no CSS reset (I think there should be an option to attempt to
blank out any CSS before applying the theme); somewhere in the code,
there’s an assumption the PageTemplate contains a div called
“tiddlerDisplay” (I guess that’s a bug; thanks to @FND for helping me
on this point). Taking those into account, here’s how I made this
custom UI:

* Make a new tiddler called fancyTheme. It looks like this:

|StyleSheet|##StyleSheet|
|PageTemplate|##PageTemplate|

!StyleSheet
/* CSS RESET */
// a big ol’ CSS reset stylesheet, using Eric Meyer’s scheme. see my
recent post on those.

/* HACK TO ALLOW a “tiddlyDisplay” element */
#tiddlerDisplay { display: none; }

/* TIDDLYWIKI INTEGRATION */
#backstageButton a { height: 20px; opacity: 0.01; }
#backstageButton a:hover { opacity: 1; }
// in the future, there will be more stuff to switch back and forth
between regular tiddlywiki and the custom UI

/* CUSTOM STYLES */
// the custom style, in this case the style for a video portal

!PageTemplate

Not Another Video Freakin’ Portal

…etc….

——-

All this is related to the TiddlyWiki MU vision I described in
http://softwareas.com/multi-user-tiddlywiki . If users can spin off
new instances, TiddlyWiki could be used as a general engine for making
generic web app, not just TiddlyWiki++ UIs, but UIs that look
radically different. The nice thing about the Flip concept is that
vanilla TiddlyWiki is a handy interface for performing basic admin, a
little like the Rails scaffold concept, or the earlier Naked Objects.
You build a web app centered around a tiddler-based data store; anyone
permissioned can edit those tiddlers.

This is the plan for Scrumptious Trails (http://trail.scrumptious.tv).
I’ll be porting over the generic web interface to a TiddlyWiki one
using the techniques described above.

responses to @jaremfan’s “to all designers – how do you feel about your clients making design suggestions? good or bad?”

17 Dec
  • @jaremfan What @Cennydd said. Thu Dec 17 14:39:07 +0000 2009 from DarciD
  • @jaremfan Depends if it’s a good idea or not! If not find out what the real goal behind it is and explain how we can find a better solution. Thu Dec 17 13:53:48 +0000 2009 from PeteWilliams
  • @jaremfan Sometimes the act of demanding is just a (misguided) way of asking for your expert opinion. Thu Dec 17 13:43:26 +0000 2009 from logorrhoea
  • @jaremfan If they’re sensible, do them. If they’re not, discuss options and ways to progress. Refusal can sometimes be a viable option. Thu Dec 17 13:27:53 +0000 2009 from Cennydd
  • @jaremfan Listen to suggestions. Demands are a must have that is not always possibble in web design. Thu Dec 17 13:22:10 +0000 2009 from microedge
  • @jaremfan Suggestions are always welcomed. Managing the suggestions is where the skill of consulting comes in. Thu Dec 17 12:47:20 +0000 2009 from DarciD
  • @jaremfan i would feel bad about any designer that would feel bad about design suggestions from clients Thu Dec 17 12:18:02 +0000 2009 from mahemoff
  • @jaremfan Welcomed. The skill comes in looking at suggestions with objectivity and successfully managing them. Thu Dec 17 12:12:19 +0000 2009 from Cennydd
  • @jaremfan Depends if they’re suggestions or demands! Thu Dec 17 12:08:45 +0000 2009 from PeteWilliams

(via http://ListOfTweets.com)

fixed nasty tiddlywiki bug involving defaultCustomFields

15 Dec

This was a nasty bug mostly for the diagnosis part than the solving of
it, as it came up in a weird way. In brief:
– I was looking at a tiddlywiki, inside tiddlyweb, and getting
weirdness in the way tiddlers were being persisted.
– @FND on irc was a big help and pointed out “server.title” field was
being erroneously set.
– Turned out config.defaultCustomFields included server.title for some reason.
– I thought it was something the comments plugin was doing. But it was
a new thing I’d done…I’d created a tiddler using
store.saveTiddler(……) and for the fields parameter, I’d set it to
config.defaultCustomFields. Bad news as it was causing the underlying
value to be changed.

Ideally, creating a new tiddler would be as simple as
store.createTiddler(). Given the current API, though, I learned my
lesson.

http://bit.ly/izBr a cautionary tale reminding us to ship with sensible defaults /src @ajpiano

14 Dec

We’re having a problem sending email out of the department.””What’s the problem?” I asked.”We can’t send mail more than 500 miles,” the chairman explained.I choked on my latte. “Come again?

Seeking CSS *hard* reset

14 Dec

Here is a good summary of CSS resets:
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css…
CSS resets typically aim to neutralise styles for each browser (e.g.
setting body padding and margin to zero), force you to “opt in” to
certain features (e.g. setting headings to non-bold), and sometimes
sprinkle in a dash of opionated opionionship (e.g. making HR elements
invisible).

These stylesheets are generally minimal; they assume a lot about
browser defaults. For example, you won’t see “body { background:
white; color: black; }” because every modern browser already defaults
to that.

This usually works fine, but sometimes you want to keep re-applying
different stylesheets dynamically (using a library such as
http://jquery.tiddlywiki.org/twStylesheet.html) and not have each
stylesheet contaminated by any previously applied stylesheet. For
this, you need a hard reset, and I’m not sure any exist. Eric Meyer’s
reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
is the closest thing, as it does define black-on-white colours, but it
doesn’t define lots of other things, like font family.

I’m currently looking at them because we (Osmosoft) have been thinking
about how to deploy TiddlyWeb apps, and focusing more on delivering
apps to run as plugins inside a TiddlyWeb-backed TiddlyWiki; as
opposed to running as standalone, plain-old-HTML, REST clients.
Running inside a TiddlyWiki will make deployment easier – we only have
to think about deploying one product: a solid TiddlyWeb-backed
TiddlyWiki which supports some mechanism for the admin to configure
plugins. There’s no “Scrumptious” distro as such; it’s just “install
TiddlyWeb-backed TiddlyWiki (a “one-click” operation); visit the
TiddlyWiki in your browser; and choose “Scrumptious” from the plugin
catalogue”.

The alternative (as I mentioned the other day) is to run these things
inside an iframe, where they will be sandboxed, but I’d rather not as
it would be nicer to have a normal communication channel between the
plugin UI and the rest of TiddlyWiki.

5 hours of IE6 fudging on Scrumptious trails

12 Dec

I’ve just made a bunch of changes to bring Scrumptious trails
(http://trail.scrumptious.tv) UI up to speed. I’d done the same work a
while back (http://mini.softwareas.com/making-scrumptious-trails-ie6-ready),
but the UI’s changed a lot lately, mainly thanks to some excellent
design direction from @juggernautdave
(http://www.flickr.com/photos/juggernautdave/4132581298/) on the top
bar design.

Key fixes:

* The iframe wasn’t being shown. Kind of a problem when that’s the
point of the player – to let the user walk through several websites,
each of which appears in the iframe. Took some experimenting before I
realised the iframe had a height of zero in IE. It’s set to 100% of
body height (absolute positioned) and body height is apparently zero
in IE. Not having the time to look into this properly, I have opted
for a hack, and set the iframe’s height using $(window).height() –
$(“topBar”).height().

* Transparent PNGs: I put @davem’s supersleight jQuery plugin
(http://allinthehead.com/retro/338/supersleight-jquery-plugin) to good
use. It’s great to make PNGs transparent in one go. (We were unable to
get decent-quality images in GIF, which is why we used PNGs; I think
it would actually be possible to get decent quality GIFs with the
right conversion techniques though?) supersleight doesn’t solve the
problem of background-position being ignored, so I also had to add
some IE-specific “margin” styles. I did look at one of the alternative
techniques involving behavior, which does suport background-position,
but I had various trouble with it, and I also found its use of URLs
relative to the HTML would cause me some deployment grief, given the
unusual deployment model. (At present, I am building a standalone
trails player and one served from tiddlyweb; very soon, I’ll be trying
to get the trails player running inside of tiddlywiki.)

* A few other layout tweaks.

* I was using ev.which at one point to find the mouse button.
Unfortunately jQuery.Event doesn’t (yet?) neutralise the mouse button
when an event fires, so I just manually checked it (good summary of
issues here – http://unixpapa.com/js/mouse.html). Basically, I use
“firstButton = (ev.which==1 || ev.button==0).

And that’s it. Once it’s checked in and uploaded, I’ll be turning my
attention to fitting into TiddlyWiki. Instead of trying to deploy
scrumptious as a standalone app built on TiddlyWeb, we are opting for
a model where Scrumptious is a TiddlyWiki/TiddlyWeb plugin, and this
will coincide with TiddlyWiki/TiddlyWeb providing support for easily
pulling in such plugins from its standard UI. (Actually, I’m really
talking about TiddlyWebWiki, which is basically the main initial
purpose of TiddlyWeb; to provide a simple RESTful server store for
TiddlyWikis.)