pne: A picture of a plush toy, halfway between a duck and a platypus, with a green body and a yellow bill and feet. (Default)
Philip Newton ([personal profile] pne) wrote2002-11-21 05:45 pm

Playing around with my LJ style

I've been trying to have a go at making a LiveJournal style that'll look kind of like a Unix-style command-line interface[1]. You can have a look at my latest attempt by specifying the style number.

What do you think? What would you improve?

I know next to nothing about CSS and I pretty much just took one of the LJ basic styles and fiddled around with it. There are probably a bunch more CSS styles I should add and/or change; for example, I think the command-line should have a style of their own to differentiate them from the "output" of the commands called. Not sure what to do.

[1] I'm sure that I'm not the first to come up with this kind of idea. If someone else knows of an existing style number that's similar, I'd appreciate it if you'd point me to the number and/or the journal of someone who has something like this.

[identity profile] shashin.livejournal.com 2002-11-21 10:18 am (UTC)(link)
Cool! Like the usage of cat and ls. Though, in an extemely nitpicky-sense (aside from the the image, which might just be a wierd case of being in the framebuffer, the disturbing feeling of being in windows-telnet, and you'll get the emacs nut asking for their editor... haha) "cat next-entry" seems a little odd.

The CSS looks fine, you may even have too much in there. It's just shell after all 0;)

You may find this link handy. Though MS based, and though some stuff like filters are only for IE, if you're willing to drop support for 4.7 (which is hell to work with for just 2-4% of the population IMHO) Mozilla will support most of the attributes and things will be fine. Object placement often varies slightly though. http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
ext_78: A picture of a plush animal. It looks a bit like a cross between a duck and a platypus. (Default)

[identity profile] pne.livejournal.com 2002-11-21 11:30 am (UTC)(link)
Hm... I think I'd rather have a go with the W3 CSS spec. And most of the CSS is there from the original style; I was too unsure about what I could throw away so I kept it.

I imagine it'll evolve a bit over time as I tinker with it now and then.

I'll have to think what to do with the userpic. Perhaps have a command line like xv userpic.png & and the userpic floating in border at the top right, or something.

Oh, and the emacs nut asking for their editor can go jump in a lake :)

[identity profile] bride.livejournal.com 2002-11-21 12:28 pm (UTC)(link)
I like that! =D A few thoughts:

========
You could put in a little more info by adding a .profile or a .project to the finger information. Sample finger output:

$ finger pne
[fingerd.livejournal.com]
Login name: pne In real life: Anurag Kumar
Directory: /users/pne Shell: /usr/bin/ljsh
On since Oct 2 2002 04:20:48 on ttyp9 from www.livejournal.com.
1 hour 34 minutes Idle Time
New mail received Mon Jun 12 16:01:58 1995; [CHANGE THIS, OBVIOUSLY =)]
unread since Mon Jun 12 14:51:00 1995
No Plan.


If you have a .plan, stick it in where it says "No Plan".

========
$ ls -l ~pne
drwxrwxr-x pne lj recent-entries
drwxrwxr-x pne lj friends
drwxrwxr-x pne lj history
drwxrwxr-x pne lj info
drwxrwxr-x webmaster lj public_html
drwxrwxr-x root lj previous-25


The directory listing is "$ ls -d".

========
The user icon really doesn't fit... I'd just take it out altogether, but if you want to leave it in, I would put:

$ xv user_icon.gif [or whatever graphics app is used on UNIX nowadays...] =)
<img src="%%usericon%%">

========
It's kinda odd that you're cat'ing next-entry over and over again... it's the same file, so it gives the impression that it's static. And yet, every time you cat, it's different...

Instead, I would do "$ tail -f entries.txt"

But that would mean your latest entries are at the bottom of the page. You could put in a fictitious "-d" switch for "reverse order" or "descending order". But you're going to get questioned on it =D

Or you could make it look like a server log and make one day per file (or one entry per file) with a time- and datestamp naming convention. "20021121_1635.log" for November 21, 2002 4:35pm. cat each one of those individually.

========
It's the same deal with the "$ vi comments.txt". vi'ing it is a really cute idea, but you're vi'ing the same file each time...

I was thinking too that 'cat' doesn't allow interactivity. 'less' lets you go up and down in the standard output of the file you're showing, it allows you to invoke the editor (vi) and other stuff. Maybe less'ing the files would be a better idea... I dunno =)

[identity profile] bride.livejournal.com 2002-11-21 12:36 pm (UTC)(link)
In real life: Anurag Kumar

Oops, ripped that off of ol' Anurag there, that should be "Philip Newton" =D

You could also make your background black with green letters!!! And only use bold for any formatting, disable the link underlining with the CSS =D You could make an animated blinking green cursor .gif too.

That'll bring back memories! =)

[identity profile] bride.livejournal.com 2002-11-21 12:38 pm (UTC)(link)
And you can only use ASCII emoticons =)
ext_78: A picture of a plush animal. It looks a bit like a cross between a duck and a platypus. (Default)

[identity profile] pne.livejournal.com 2002-11-21 09:58 pm (UTC)(link)
Yes, the little icons look a little out-of-place.

Maybe I should just go through the work of creating an ASCII emoticon set (or do you know of an existing one?) and then using those.

Pity that you can't tie an emotican set to a style so I can use regular pictures with a normal style and ASCII ones with this style. I don't think I'm going to be using the shell style as my default style ;)

Re:

[identity profile] bride.livejournal.com 2002-11-21 10:00 pm (UTC)(link)
do you know of an existing one?

There is one, but it's red and it's right-side-up, not sideways.
ext_78: A picture of a plush animal. It looks a bit like a cross between a duck and a platypus. (Default)

[identity profile] pne.livejournal.com 2002-11-21 09:58 pm (UTC)(link)
Yay for green-on-black! :)

Well, I haven't specified any fixed colour codes at all, so anyone who uses the template should be able to use any colour combination they want.

I didn't want to change my own colour theme to test it because it'd also change the look of my regular journal and friends pages ;)

I'm not sure whether disabling underlining is a good idea since I think it'd not be very obvious which bits let you click and which don't (especially the "add comments" bit), since the interface'd be so different from standard LJ fare.

But the blinking green cursor might be an idea... hm... that gives me an idea: maybe I should have the "add comments" feature be something like
$ cat >>comments.txt
[]

with "[]" being the blinking cursor gif. Then the user can "type something in" at that point. cat -- the editor of Kings! :P

(Not sure which bit of that text should be clickable, though.) (Also, if I use a GIF, the style wouldn't be colour-neutral any more. Not sure whether anyone else'd ever use my style, so it's probably not a problem.)

Re:

[identity profile] bride.livejournal.com 2002-11-21 10:05 pm (UTC)(link)
I didn't want to change my own colour theme to test it because it'd also change the look of my regular journal and friends pages ;)

Put your CSS colours right in LASTN_PAGE, that way, it will get the colours from that and not your Modify Journal colours.

$ cat >>comments.txt
[]


Could do... or, you could use msg pne...
ext_78: A picture of a plush animal. It looks a bit like a cross between a duck and a platypus. (Default)

[identity profile] pne.livejournal.com 2002-11-21 10:10 pm (UTC)(link)
or, you could use msg pne...

Then I'd have to give up my goal of being reusable for other users :)

OTOH, that's not very likely, so I should probably just go ahead and customise it for myself anyway.

Oh, and thanks for your comments so far!

Re:

[identity profile] bride.livejournal.com 2002-11-21 10:11 pm (UTC)(link)
being reusable for other users

Oh... =)
ext_78: A picture of a plush animal. It looks a bit like a cross between a duck and a platypus. (Default)

[identity profile] pne.livejournal.com 2002-11-21 09:51 pm (UTC)(link)
You could put in a little more info by adding a .profile or a .project to the finger information.

I thought about that, but I can't autogenerate that information, and I didn't want to have to edit my style all the time to change, for example, mail read info. Same with "On since"... I'd have to pick a static date. I might think about the plan, though.

The directory listing is "$ ls -d".

On the Unices I'm familiar with, ls -d foo means "display information about the directory entry 'foo', rather than displaying the contents of directory 'foo'". But here I do want to display the contents of ~pne, and in long format (-l).

Though I considered using -F instead (which puts a slash after directory names) and maybe -1 (one-column output) so I don't have to type in the drwxr-xr-x bits and so people don't wonder over the lack of timestamps (and sizes).

$ xv user_icon.gif [or whatever graphics app is used on UNIX nowadays...] =)
<img src="%%usericon%%">


Yes, I was thinking about that, too. I wanted to have the icon floating, perhaps on the top right (which is fairly empty at the moment), but I don't have enough CSS yet for that, so I parked that idea until later.

It's kinda odd that you're cat'ing next-entry over and over again

Yes, I didn't have a good answer for that. However,

you could make it look like a server log and make one day per file (or one entry per file) with a time- and datestamp naming convention. "20021121_1635.log" for November 21, 2002 4:35pm.

This sounds like a promising idea. Or maybe have one directory for each entry which will contain entry.txt, current-mood.txt, subject.txt and so on.

It's the same deal with the "$ vi comments.txt". vi'ing it is a really cute idea, but you're vi'ing the same file each time...

I agree. Unfortunately, I think I don't have the information about the date available in the section on comments. A pity that the variables aren't global but rather local to one section in LJ customising :(. (I did try putting another section's variable in at one point but got an empty string as replacement. That was %%username%% for the website, which is why that directory now belongs to "webmaster" rather than the username, which is not available at that point.)

I'm not sure I have enough information available to pull off a really good shell emulation.

Oh, and another thing which kind of bugs me is that some commands display output -- such as cat current-mood.txt -- while other commands are hyperlinks and do not display any output -- such as vi comments.txt. Maybe I should change the "add comments" feature to a fake mailto: link?

Re:

[identity profile] bride.livejournal.com 2002-11-21 09:58 pm (UTC)(link)
for example, mail read info. Same with "On since"...I'd have to pick a static date.

I picked your journal creation date for the "On since" date. The mail info, you can just make up and leave it.

I might think about the plan, though.

The .plan and .project were just text files that got cat'ed into the finger info. Those can just be tacked onto the end.

[identity profile] shashin.livejournal.com 2002-11-22 08:50 am (UTC)(link)
Too bad javascript is no longer allowed, you could added lots to the interactivity level and making the display technically correct.

Just some silly suggestions:

Maybe try to mimic the behaviour of nn or perl-lj. That way, instead of cat'ing or less'ing the next entry you can just do something like: (N)ext (P)revious (Q)uit.

I really do like the vi metaphor though, maybe include a :

export EDITOR=vi

then you can insinuate a shell escape.

Can another font be used? Courier is a somewhat difficult font to read. Something san-serif like xterm's font.

Maybe at the end of your HTML also include something like... oh my gosh someone picked up the phonkjasd!@#121
NO CARRIER

Re:

[identity profile] bride.livejournal.com 2002-11-22 09:24 am (UTC)(link)
Can another font be used? Courier is a somewhat difficult font to read. Something san-serif like xterm's font.

You could use FixedSys, but there's no guarantee that people will see it correctly.

oh my gosh someone picked up the phonkjasd!@#121
NO CARRIER


Heeheehee, I remember that =P =)
ext_78: A picture of a plush animal. It looks a bit like a cross between a duck and a platypus. (Default)

[identity profile] pne.livejournal.com 2002-11-22 09:29 am (UTC)(link)
Maybe I should just change it to "font-family: monospace". If I understand correctly, this should (in theory) use whichever monospace font the user likes (i.e. whichever he told his browser he prefers).

Then if one person has Courier there and another has, say, Lucida Console, then both can be happy.

Re:

[identity profile] bride.livejournal.com 2002-11-22 09:33 am (UTC)(link)
Yeah, that would work =)

[identity profile] shashin.livejournal.com 2002-11-22 10:06 am (UTC)(link)
Hmm... seems like my browser already does that. My bad.

Just one other thing which is that the templates are based in BML and it seems that it's a templating language in itself. I'm not sure if you can provide yourself some new tags or set template variables for later usage, which would provide yet another way to help you get around the scope problems.