improve design of webchat IRC

[paulirish]

I know jQuery, Google, and other groups all use qwebirc, which is the default webchat of the freenode network.

for example: http://webchat.freenode.net/?channels=html5

project hosted here: http://www.qwebirc.org/ and repo here http://hg.qwebirc.org/qwebirc/src

The client desperately needs UX and IxD and visual design work. Anyone with design or javascript skills would be a tremendous help.

I'd love to facilitate the work here, working with the project lead and you.

Comment if you'd be into this.

[retlehs]

i'm into this.

[paulirish]

yahhh i think we need this.. https://irccloud.com/ is sexy but they are monetizing it heavily which doesnt make it practical for most people's purposes, unfortunately

[larryfox]

is anyone actively working on this? would be into this as well.

[paulirish]

larry i think you should go it. start hacking on qwebirc.. i'd love to see what you can do to it with css. :)

[retlehs]

@larrythefox you wanna get a github clone of qwebirc up? i'd be happy to help with whatever

[larryfox]

great, i'll get a repo up on github tonight

[larryfox]

...and clone is up here: https://github.com/larrythefox/qwebirc

[retlehs]

nice :) do you happen to be on freenode or gchat or anything?

[larryfox]

yup I'm larrywfox at gmail

[paulirish]

Awesome! Thx for jumping in larry.. this is gonna be rad. :)

So I just had a good chat with Slug, the lead dev of qwebirc.. transcript here: http://pastie.org/private/8rr9r5j2xmhxtlj19yla

• basically he's down with whatever. is happy to see improvements and feels they are overdue.
• hey and some other qwerbirc folks hang in #dev on quakenet if you need to ask questions or want to say wassup.
• I said you'd iterate here on github and they could pull over to bitbucket at some point. a nice git->hg challenge. :)
• slug did point out that whats on bitbucket may not be 100% up to date. he's going to tackle that tomorrow evening (and also merge in any outstanding freenode edits)

But things look good and they're receptive and everyone is excited. Most of all me. :)

[akavlie]

I may be able to pitch in on this.

Not so much the visual design, but front end dev, and maybe backend if that's needed too.

[retlehs]

@akavlie from your profile it looks like you know python so i'm sure you'd be very helpful :) from paul's transcript:

[17:04] <@slug> the UI code is.... crufty
[17:04] <@slug> the entire thing needs a rewrite
[17:04] <@slug> notionally it was designed to have multiple UIs

i haven't dug into it yet but that really isn't a surprise

[larryfox]

Yeah, I dug into the code a bit last night. It at least needs some reorganizing. Need to look into the compiler tonight, but I don't have much python experience.

[akavlie]

compiler?
This is Python... we don't need compilers ;-)

[larryfox]

Heh, it's not a compiler per-say, but there is a compile.py file that must be run before the run.py file. As far as I can tell it concatenates some of the js and css. Maybe you can have a look at those files? I think some optimization could be done, a lot of the css actually still gets in-lined in <style> tags, not sure if there's a reason for that.

Anyways, going to start cracking at the design this weekend, and branching the repo.
Noticed a few people on bitbucket filed issues to allow users to change their text color/weight. Is this something you guys think is necessary? I personally don't, but if it is, we should consider how to make that happen.

Also this is getting lengthy, maybe we can move this discussion to an issue on the repo, email, irc, etc? Unless paul doesn't mind ;)

[paulirish]

i dont mind. :)

i think general usability and visual design triumph customization here.

[akavlie]

@larrythefox, just took a look at compile.py. You're right, it's for JS minification and combining CSS files.
This is far more informative than the README btw: http://qwebirc.org/faq
That page has info about compile.py mentioning what we've already discovered, and additionally that it "generate[s] the html". Almost thought that was outdated info, but check pagegen.py.

Strikes me as odd that it's generating the page from an inline string like that, but I guess this is pretty light on the static html.

As for inline CSS, as far as I'm concerned there is no good reason for that. All of it should be moved into .css files.
Or .less, if you guys are into that.

Agreed that customization should be pretty low on the priority list right now. Not saying it should never happen, but sensible defaults come first.

[akavlie]

I improved the readme and sent a pull request to @larrythefox.
The content in the original readme about development setup is a little unclear. I tried http://instance/quidebug.html after making the symlinks, but it just gives me a blank page.

I ventured into the dev channel to ask, but no replies. Of course, it's Friday night...
if anyone figures it out or has a chance to find out from the devs, let me know.

[akavlie]

Figured out the symlinks, corrected the readme, and updated my pull request.
Thanks to Bazerka in Quakenet #dev for sorting things out for me.

Standing by for merge, @larrythefox :-)

[larryfox]

Thanks @akavlie

As for .less (and others), I think we should stick to plain CSS, to keep it as accessible to anyone hacking on it in the future.

[akavlie]

The front-end is pretty heavy on the JS, even for stuff that you wouldn't expect -- for example, the login box is created by adding elements to the DOM in JS, rather than using a static html template.

And it's all in Mootools, which I've never worked with :-(

[taitems]

I'd be up for this, but slightly discouraged by comments above discussing it's JS-heavy nature and reliance upon MooTools.

[akavlie]

@taitems,

I found the codebase itself pretty discouraging, for anything beyond pure CSS changes. So I actually have a whole new web IRC project underway, based on node-irc (https://github.com/martynsmith/node-irc), with a Backbone.js & jQuery frontend.

I hadn't said anything (or put it up on github) quite yet, as I'm trying to get it to a good minimal level of functionality first.

I hope that I can rally some support from those who have expressed interest here; the toolchain should be more familiar and appealing to most of you. It'll take a while to fill in some of the functionality, but it's a good chance to rethink some of the assumptions of how an IRC client should work, and take some ideas from modern web apps.

[larryfox]

Yeah the back-end code is a bit unfamiliar unfortunately, still up for doing css changes on qwebirc (been busy with midterms). Calling any mootools people for additional help.

@akavlie I'd also be interested in doing the same on your project if you need a hand in the future.

[akavlie]

Just put my IRC client-in-progress up on github:
https://github.com/akavlie/web-irc

I think most of you will find it more approachable than qwebirc -- the core app is just a couple hundred lines of JS at this point, all in a single file, with a small index.html skeleton and some CSS. The backend is pretty straightforward as well (all JS there too).

Contributions welcome.

[akavlie]

Just got web-irc live, hosted on nodester:

http://web-irc.nodester.com/

It's still very much a work in progress, but a lot of the basic IRC functionality is there.
Feedback & contributions welcome.

[retropc]

(slug here)
thought I'd just clear a few things up:

• The page generation stuff is an anachronism from when there were multiple user interfaces ('qui' was supposed to be temporary... the design I was promised three years ago still hasn't appeared).
• mootools and jquery were both neck and neck in 2008 when I started, clearly jquery is now more prevalent
• I absolutely detest writing Javascript, CSS and HTML (I'm a backend developer by trade, and for QuakeNet I work on the ircd and services); I only ended writing qwebirc's frontend, and UI as the QuakeNet web developers are completely bone idle, and back in 2008 (after serious issues with mibbit) we desperately needed our own scalable web IRC client.
• qwebirc's JS is a proper, complete IRC client: the plan was to retrofit our ircd to directly support serving to web browsers, with no silly proxy required; this is still the plan.
• the javascript frontend is the "easy" part of the project, the hard bit is making the backend scale well, and hard to attack -- the ircd has 25 years of hardening here (another reason to not have the proxy)
• large IRC networks are the target of many kiddies, so the backend is very very carefully designed (e.g. very minimal fixed buffer sizes, maximum rates that buffers are flushed at, randomisation inserted to prevent client stampedes for large channels, etc)
• a comet IRC client's bandwidth consumption is huge -- about 100x the consumption of a standard IRC client. quakenet's instance uses about a terabyte a day, the dynamic part of the backend serves 10,000 requests/second at peak, so resource conservation is critical.
• the client is designed such that it must never hurt the underlying IRC network, so things like "autoconnect" are not permitted without user interaction, and obvious attacks such as spamming /LIST are blocked
• operationally it's quite nice to run, combined with a few other open source quakenet tools it supports hot migration of users from backends/ircds to other backends/ircds, dynamic rebalancing of user load, and multiple versions running concurrently.

so... in summary, my design priorities, in order were:

1. not hurting the IRC network
2. minimising resource consumption (we're non-profit)
3. getting-something-out-there-fast-before-mibbit-took-over-the-world
4. minimalism

so you can see why it's kinda crufty!

I do have a mostly-finished, must prettier version 2 on my workstation built with coffeescript and jquery ... I should push it somewhere...

(note I'm likely to pinch any decent frontend designs that I prefer to my own, rather plain one -- adding new frontends is mostly trivial!)

[paulirish]

I do have a mostly-finished, must prettier version 2 on my workstation built with coffeescript and jquery ... I should push it somewhere...

do it do it.

[akavlie]

qncporter, when you speak of the backend being the hard part, and being very carefully designed... that's all related to the server-side ircd that quakenet is running right? That isn't a concern for the client (whether it be qwebirc, Colloquy, web-irc, or anything else).

[retropc]

when I refer to client I'm referring to qwebirc's Javascript IRC client. i.e. the bit running in the user's browser.
backend refers to the python webserver which proxies the newline delimited IRC protocol, and serves it over HTTP.

frontend (user's browser) <- JSON -> backend (http://w.qnetet.org/dyn/subscribe/?session=1234567...) <- raw irc -> ircd

ideally the python bit would be redundant, and the ircd would speak HTTP...

[retropc]

client? that specifically says backend (covered in my first reply).

if a network's ircd doesn't do http, the network in question can use the inefficient proxy, as they do at the moment.

[akavlie]

I'm including backend when I say "client" -- i.e. the software used to access an IRC server.
I realize a web-based client has a backend (talks to the irc server) and a frontend (JS/CSS/html).

[thedjpetersen]

So I have started a little project like this. I am trying to build a persistent client with an interface similar to the Grove.io interface.

[thedjpetersen]

Here are the relevant links:

https://github.com/thedjpetersen/subway-server
https://github.com/thedjpetersen/subway-web

Note I am still just pretty stage working on these projects. I would really love any input.

[akavlie]

David,

Do you have Subway deployed someplace where I can take a look?

It appears that you're using a very similar technology stack to my own project, web-irc -- Node.js, socket.io, node-irc, Backbone.js:
https://github.com/akavlie/web-irc

maybe we should join forces?

[thedjpetersen]

akavlie, I would like that, I don't have it deployed, I wasn't planning on creating something for multiple clients but maybe that is a good idea. My original idea was just to have a backend which is persistant and logs and then have a frontend that connects to the backend.

If you are interested I would be glad in working with you in refactoring the backend.

To check it out, just grab the server code, run node 'bin/server' in the server directory, and then open the client 'index.html' it is not a fully functioning client yet, but some of my ideas are implemented.

I hope we can work together

-David

[thedjpetersen]

Do you have a nick from which you idle on IRC?

[thedjpetersen]

sorry I mean freenode

[akavlie]

I don't usually, but I just logged onto Freenode with nick akavlie if you want to ping me.

[thedjpetersen]

@akavlie :

So I couldn't message you on github so I thought this might be the best way to connect with you. I do think its a good idea that we merge, it should cut the work in half, as well as be easier in organizing what needs to be done. The only thing I think is that we make sure we have similar goals at the outset. I originally was thinking of a single client connecting to a single server with the main purpose being persistence, logging, and search with an attractive frontend. From what I gather you would like to make a direct replacement of qwebirc, which would essentially be a relay for IRC messages. I think we can accomplish both goals, by creating a server where logging and search are optional things to enable.

Let me know what you think, I think we could create something really cool.

[akavlie]

@thedjpetersen Odd that you couldn't message me...

email is good: akavlie -at- gmail....
discussion via IRC again would be good too. I want to talk a bit more about your goals for Subway so I'm completely clear on things.

[thedjpetersen]

So @akavlie and me have been working pretty hard on a client. It has made some nice progress. It is quiet different from the work @qncporter was doing. I am learning quiet a bit, but I think we could use quiet a lot of help with the markup if anyone was willing to help us.

Here is the link to the project: https://github.com/thedjpetersen/subway

And a screenshot of what it looks like follows....

Feel free to message me if anyone is interested.

[cornet]

Looking great @thedjpetersen :)

Not sure how much help I can be on the dev side but definitely up for doing some testing. Have been looking for something like this for work for a while.

[akavlie]

@cornet We'd be happy to have you testing out the app and submitting issues.
Are you comfortable with setting up a Node.js environment and pulling down/running the code from github? Go ahead and message me or @thedjpetersen if you need help with that.

[cornet]

@akavile Not being able to help with dev was mostly due to time (However I've not really touched node.js ... yet)

Getting it up and running was straight forward and only took a few minutes. Looking great so far, will report any issues I find.

[niftylettuce]

🆒

I'd love to give feedback and help out with this (active IRCCloud user).

[sneakyness]

Subway is sexy

[Fauntleroy]

Hey everyone,

@thedjpetersen pointed me to this thread. I've been working on my own flavor of node.js IRC client: Relay.js. A short list of features include:

• Simple, user-experience focused interface
• Dynamically embedded content ( links, images, YouTube, Gist, more coming later )
• Support for multiple connections
• Emoji ( just like GitHub, Campfire, etc )
• Refined, clear codebase ( based on node.js, Backbone.js, Handlebars.js )

If any of this piques your interest, feel free to try it out here: https://relayjs-7136.onmodulus.net/

Here's a quick screenshot of the current interface:

[julianduque]

@Fauntleroy Impressive work! +1 on this

[Fauntleroy]

@paulirish I've pulled some levers since you last saw relay.js. Would you mind giving the demo another try? http://relayjs.jit.su

Also, here's a newer, more descriptive screenshot:

[paulirish]

thanks! i imagine a few presets (incl freenode) would be appreciated by
more than just me.
works very nicely.
fine work, sir!

On Sun, Feb 24, 2013 at 10:47 PM, Timothy Kempf [email protected]:

@paulirish https://github.com/paulirish I've pulled some levers since
you last saw relay.js https://github.com/Fauntleroy/relay.js. Would you
mind giving the demo another try? http://relayjs.jit.su

Also, here's a newer, more descriptive screenshot:

[image: Relay.js 2-24-13]https://s3-us-west-2.amazonaws.com/relayjs/relayjs_2-24-13.png

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/31#issuecomment-14027962.

[thedjpetersen]

This project is pretty great too https://github.com/erming/shout

[mestaritonttu]

The lead developer of this client is now being paid to work on it full-time and it shows: https://github.com/kiwiirc/kiwiirc

You can try the next gen version here: https://kiwiirc.com/nextclient/

In the near future it will have file sharing and all the bells and whistles of a modern chat platform.

[thedjpetersen]

Shout was forked and actively being developed here: https://github.com/thelounge/lounge

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has not had recent activity. Thank you for your contributions.