An alternative way to browse LessWrong 2.0

post by clone of saturn · 2018-02-19T01:52:06.462Z · LW · GW · 56 comments

Contents

56 comments

This is something I've been tinkering with for a while, but I think it's now complete enough to be generally useful. It's an alternative frontend for LessWrong 2.0, using the GraphQL API.

Features:

Thanks to Said Achmiz for designing the themes and writing much of the frontend JavaScript.

Give it a try: https://www.greaterwrong.com

56 comments

Comments sorted by top scores.

comment by Kaj_Sotala · 2018-02-19T09:25:58.693Z · LW(p) · GW(p)

I think that this is a great project and I'm happy that people have created it!

However... to be clear, I believe that you're trustworthy and am not suspecting you of anything. But I feel really uncomfortable about the thought of it becoming common practice that people independently make new mirrors of LW where you log in using the same credentials. I assume that you're not capturing our passwords, but will that be the case for every new mirror that someone might make?

Replies from: clone of saturn
comment by clone of saturn · 2018-02-19T09:51:40.901Z · LW(p) · GW(p)

Yes, I have the same concern. In the future I'd like to set up OAuth to avoid any need to trust me with your credentials at all, but for now I decided not to let the perfect be the enemy of the good. I certainly understand anyone who prefers to avoid logging in until then.

Replies from: habryka4
comment by habryka (habryka4) · 2018-02-19T19:26:27.630Z · LW(p) · GW(p)

Yeah, I've been looking into OAuth, and so this should be possible at some point in the next few months. Until then you should certainly be careful.

comment by Raemon · 2018-02-19T03:51:53.273Z · LW(p) · GW(p)

Thanks!

Seems generally good to have friendly competition.

My actual favorite feature of GreaterWrong is the table-of-contents that get autogenerated for posts. That's something we've been planning to do for a while on regular LW but haven't gotten around to it yet.

comment by Error · 2018-02-19T17:02:32.218Z · LW(p) · GW(p)

I've been using this for a while (actually using the rss feed from it), but I don't know where I got the link and I had no idea it was a secret project. May you receive a 50% karma bonus/turn.

How is this engineered under the hood? Something like nginx->greaterwrongapp->LW2 API-> LW2 database? You note elsewhere in the thread that GW uses the same underlying database as LW2. I find it unlikely that the LW2 DB is exposed to the open net (at least it shouldn't be O_O), so something else is going on.

That you could do this at all suggests there's an API stable enough for third parties to use....which suggests a native client might be possible...which is of interest to me, but the last time I asked if there was a documented API I didn't get an answer.

(I see your link to GraphQL, but am unsure how it fits into the picture)

Replies from: clone of saturn, habryka4
comment by clone of saturn · 2018-02-19T19:00:41.087Z · LW(p) · GW(p)

Yes, there's a more-or-less stable API, but it's not exactly documented. You currently have to figure it out by reading the LW 2.0 or GW source code and using Chrome dev tools to observe how it works. But it would certainly be possible to use it to create a native client.

comment by habryka (habryka4) · 2018-02-19T19:29:38.540Z · LW(p) · GW(p)

Yep, there is an API, though it's definitely still changing pretty quickly. You can play around with it at lessestwrong.com/graphiql.

comment by Said Achmiz (SaidAchmiz) · 2018-02-23T22:20:37.123Z · LW(p) · GW(p)

GreaterWrong now has a new feature—the theme tweaker—which lets you customize the appearance of the site in several ways: you can adjust brightness or contrast, rotate the color scheme, or invert any theme (creating a “dark mode” version of any of the themes).

You can open the theme tweaker by clicking the “sliders” button on the top left (just left of the theme selection buttons).

Some settings that I think look good:

  1. Brutalist theme, inverted, brightness set to 70%
  2. Grey theme, inverted, brightness to 70%, saturation to 30%, hue rotated to 205°
  3. Default theme, inverted, brightness to 70%, saturation to 50%, hue rotated to 325°
  4. Simple theme with contrast set to 110%
Replies from: Benito, Elo
comment by Ben Pace (Benito) · 2018-02-23T22:55:06.051Z · LW(p) · GW(p)

omg i've just fallen back in time by a decade. them windows

comment by Elo · 2018-02-23T22:46:16.046Z · LW(p) · GW(p)

oh my god that is amazing but does it have to alter the colour of the pictures on the page too?

Replies from: SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-02-23T23:26:51.982Z · LW(p) · GW(p)

Yeah, that’s a flaw I’d like to correct as well. As it stands, avoiding that side effect would make the implementation considerably more complex. Fixing this is on my to-do list, but is not as high priority as a number of other features / enhancements / etc. So you’re right that this is a flaw, and I’ll correct it when I have a chance.

comment by habryka (habryka4) · 2018-02-19T03:14:34.497Z · LW(p) · GW(p)

Thanks a lot for doing this! I’ve really liked some of the things you’ve been trying out on greaterwrong, and I expect over time the LW2 team can learn a lot from your experiments.

The post itself does go slightly against the frontpage guidelines, but given that this Is probably of interest to almost anyone surfing on LW2 (and I want to encourage competition with our UI), I will leave it on the frontpage for now, though other moderators can chime in and disagree.

Replies from: Benito, clone of saturn
comment by Ben Pace (Benito) · 2018-02-19T11:54:00.067Z · LW(p) · GW(p)

Yeah it's really great. I like how easy it is to get to a parent comment on greaterwrong.

Re: frontpage, I'd probably say that in like a week it should move to Meta. I think long term it will be good for the sections to retain their content integrity (e.g. someone wanting to traceback site design discussions should be able to trust that it's all in Meta) but as we currently don't have good enough notifications about awesome things like this, it's good to stay in frontpage for a while (like with some of our own announcements).

comment by clone of saturn · 2018-02-19T06:59:38.296Z · LW(p) · GW(p)

Thank you :)

comment by gjm · 2018-02-19T13:01:14.973Z · LW(p) · GW(p)

This has some very nice features. I have to say I dislike some aspects of it aesthetically (which is not to say they're bad; my preferences are not everyone's preferences). I'll list those, with the hope that a comment consisting almost entirely of negative feedback won't be misunderstood as meaning I disapprove of, or dislike, GW as a whole.

The text on GW is rather large, while the text on LW2 is unusually small. I happen to prefer the latter. [I know this is an eccentricity of mine, and I would not be astonished (though I would be a bit surprised) if it turned out that despite my preference I read faster and take in more with the larger text. Most likely many people will prefer GW's text sizes, and more will benefit from them despite not preferring them.]

The titles in the GW article list are (at least for me on my browser) very very bold in comparison with everything else. To me they look downright silly. [My guess is that unless this is the result of some oddity of my setup, many others will feel the same way.]

The margin between comment text and the borders around the comments on GW is smaller than on LW2, even though the text is much larger. I find it uncomfortably small; doubling it would not be too small an increase. [My guess is that almost everyone would find GW nicer to look at and easier to read with wider margins there.]

The green border on new comments is extremely prominent; I personally find it rather distracting and would prefer something subtler, or maybe applied only to the left border. [I don't have a confident guess about how others will feel about this one.]

Replies from: clone of saturn, SaidAchmiz
comment by clone of saturn · 2018-02-19T19:03:19.048Z · LW(p) · GW(p)

I definitely appreciate this kind of detailed feedback, positive or negative. Thanks for taking the time to write it up.

comment by Said Achmiz (SaidAchmiz) · 2018-02-19T17:39:14.144Z · LW(p) · GW(p)

You know that there are six different themes to choose from, right? :)

(Top left, the six square buttons with ‘A’ in them)

Edit: And let me repeat here what I said over on LW1—I encourage anyone who finds the existing themes not to their liking (and has some CSS skills) to create a user style for GreaterWrong and submit it to userstyles.org. If we really like it, we’ll incorporate it into GW, as a selectable theme; and even if not, it’ll benefit other people, who may share your preferences!

Edit2: Echoing clone of saturn—feedback is definitely appreciated, thank you!

Replies from: gjm, Error
comment by gjm · 2018-02-19T20:50:22.361Z · LW(p) · GW(p)

I had, in fact, not noticed that there were different themes. I've seen them now; thanks. (Super-brief comments, probably not actually useful: White on black, blecccch. Grey, better than default though I have no idea why article titles on the front page are red. Ultramodern, ultra-unreadable. Simple, also better than default in some ways but too simple -- e.g., navigation stuff at top becomes a mess. Brutalist, ha ha very funny.)

If I have correctly understood how to use userstyles.org then some tweaks for the default GW style can be found there under the name "Greater Wrong tweakage"; my username there is gjm. I don't make any claim that the result is Objectively Better than the current GW default; just that I like it better that way. (If I were making an actual GW theme, I would make the horizontal rule between comment meta and body be #eee in white comments and #ddd in grey ones. But I didn't fancy writing the necessary cascades of .comment-item .comment-item .comment-item .comment-item...)

Replies from: SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-02-19T22:20:41.221Z · LW(p) · GW(p)

You’re quite welcome!

(It’s interesting to see the variations in people’s preferences for this sort of thing. For example, I’ve had multiple people tell me that they like the brutalist theme best (it’s certainly not a joke!); the dark theme was made as a response to someone’s specific request for one (and was greeted with enthusiasm); the design of the grey theme came from another user (though I refined it); etc. If ever there was a clear demonstration of why options and customizability are critical to a good user experience, it’s this!)

I’ll take a closer look at your user style in a bit, though let me say immediately that I definitely appreciate you making one (it’s gratifying when users take the effort to improve my work!).

Edit: I’ve tried out the style now. Not bad at all! It’s too small a change for it to make much sense providing it as a whole separate theme, but I definitely recommend it for anyone who agrees with your critique of the default appearance. Thanks again!

P.S. By the way, I think you’re right about the navigation in the simple theme being rather messy. That’s on my to-do list of things to correct.


A note about the .comment-item cascades—those are generated programmatically, via PHP (search for “nested_stuff” in the script for the relevant bit). That script can be run by itself (it does not depend on anything else in the repository), e.g.:

php style.css.php > style.css

You can make the necessary tweaks to style.css.php, then extract the relevant bits of result from style.css. (Or, you know, not. I entirely understand if you don’t want to bother! Just noting the possibility.)

Replies from: cousin_it, gjm
comment by cousin_it · 2018-02-19T22:45:55.275Z · LW(p) · GW(p)

When the brutalist theme appeared, I instantly switched to it and haven't looked back. Really curious to know who made it.

Replies from: SaidAchmiz, Unreal
comment by Said Achmiz (SaidAchmiz) · 2018-02-19T23:36:40.589Z · LW(p) · GW(p)

I made it. (Other than the grey theme—which, of course, is based on the modifications you posted—I made all the themes and did all of the design you currently see on the site.)

comment by Unreal · 2018-02-19T23:17:01.277Z · LW(p) · GW(p)

I didn't think I'd say this, but the brutalist theme is in fact pretty good!

I don't like the font personally (which I imagine is the point for many).

I really just like how clean it looks.

comment by gjm · 2018-02-19T22:37:20.364Z · LW(p) · GW(p)

I am 100% unsurprised that preferences on these things vary :-). I do like light-on-dark in many contexts, but high-contrast light-on-dark using "ordinary" body-text typefaces always looks terrible to me (Bad Things, to my eyes, happen where the strokes are narrow). For e.g. monospaced typewriter-like text in text editors, light-on-dark works just fine for me. I mention all this not in order to try to provoke any changes; just musing, again, on how preferences vary. Incidentally, the green borders on new comments are super-duper-prominent in the light-on-dark theme; you might consider toning them down a bit.

I wasn't expecting my tweaks to become an all-new GW theme (though I guess if there's a sudden clamour from users who try them and love them, anything's possible).

I don't have PHP installed on anything convenient, and don't think I will bother installing it just to make a small optimization to the appearance of my GW style.

Replies from: SaidAchmiz, SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-02-23T22:21:32.903Z · LW(p) · GW(p)

Update: see this comment—there’s a new feature that should address some of your concerns!

comment by Said Achmiz (SaidAchmiz) · 2018-02-19T22:41:23.470Z · LW(p) · GW(p)

I do like light-on-dark in many contexts, but high-contrast light-on-dark using “ordinary” body-text typefaces always looks terrible to me (Bad Things, to my eyes, happen where the strokes are narrow). For e.g. monospaced typewriter-like text in text editors, light-on-dark works just fine for me. I mention all this not in order to try to provoke any changes; just musing, again, on how preferences vary. Incidentally, the green borders on new comments are super-duper-prominent in the light-on-dark theme; you might consider toning them down a bit.

These are, actually, very valid concerns, and you’re not the only person to have mentioned this sort of thing. An upcoming feature will address all of this. Stay tuned! :)

Edit: By the way, I’ve found that differences in how people perceive, and react to, various combinations of font / color / etc., are often largely caused by differences in the device that a site is being viewed on. (I’ve already made several tweaks to the site’s design to account for users on different platforms, which seem to have helped some people, and am always open to doing more in that vein.) Do you mind saying what you’re using to browse GW? (I’m interested in both hardware—what kind of device, what size of screen, what resolution, etc.—and software—OS, browser, version.)

Replies from: gjm
comment by gjm · 2018-02-19T23:31:42.247Z · LW(p) · GW(p)

Yeah, agreed, that can make a big difference.

Right now I'm on a laptop with a wide-gamut 15" 4K screen. So e.g. it generally copes very nicely with fine details in type, and it's possible that colours may appear more saturated than they do on other devices. It's running Windows 10 and I'm using a recent version of Firefox. The zoom factor in Windows, which on my machine defaults to 250%, is set to 200%, so many things will be displayed slightly smaller for me than is standard.

I have also tried GW on two other systems. One is running Windows 8.1 and, again, a recent version of Firefox, but with a lower-resolution monitor (30", 2560x1600). The other is running a Unixy system (FreeBSD, as it happens) and a slightly older version of Firefox, and a 24" 1920x1200 monitor. Neither of these displays has a particularly wide colour gamut and I have made no attempt to calibrate them for colour accuracy.

All the displays are LCDs with a standard RGB stripe layout. I don't think I have any nonstandard configuration to report besides what I mentioned above.

My impressions of GW are essentially the same on all of these. I have tried my tweaked styles only on the first and last (which are also the two most different) and prefer them to the defaults on both.

Replies from: SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-02-19T23:38:43.161Z · LW(p) · GW(p)

Excellent, thanks for the detailed report—it’s much appreciated.

comment by Error · 2018-02-19T17:51:12.367Z · LW(p) · GW(p)

For users that aren't satisfied with those and don't mind speaking CSS, Stylish and similar browser extensions are an option. I picked up css customization mainly to add max-width to body text that does not have it, but it's good for pretty much any case where you think a site designer's choices were unwise.

Replies from: SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-02-19T18:10:22.620Z · LW(p) · GW(p)

Yes, to clarify, this is exactly what I was talking about—styles posted on userstyles.org (and marked appropriately as belonging to GreaterWrong) will become available to anyone who visits GW and has the Stylish browser extension installed.

Replies from: gjm, Error
comment by gjm · 2018-07-04T00:52:07.377Z · LW(p) · GW(p)

Since January 2017, the Stylish browser extension has been spyware that transmits every single URL you visit to its corporate owners' servers. Firefox has just blacklisted it; users of other browsers may want to disable it manually. I think there's a config option that supposedly stops it sending all that information, if you trust its developers to implement that honestly.

Replies from: SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-07-04T06:24:21.422Z · LW(p) · GW(p)

Oh… I didn’t know that. :(

Thank you for the comment; I’ll have to uninstall it from all my browsers. Do you know of any non-malicious alternatives (preferably ones that also work with userstyles.org)?

Replies from: gjm
comment by gjm · 2018-07-04T12:07:39.018Z · LW(p) · GW(p)

Apparently there's a thing called Stylus, forked from an earlier version of Stylish. I expect it works with userstyles.org but haven't checked.

I believe userstyles.org is owned by the same people who own Stylish; I haven't looked into whether they do anything evil with it, or whether they could if they wanted to.

comment by Error · 2018-02-19T18:42:11.441Z · LW(p) · GW(p)

I don't think that edit was present when I composed, but thanks.

comment by Said Achmiz (SaidAchmiz) · 2018-02-19T02:41:53.713Z · LW(p) · GW(p)

Here’s some more features of GreaterWrong.com that weren’t important enough to make it into the OP:

  • Many functions have access keys associated with them, notably the navigation tabs (Home, Featured, etc.) and the first three editor buttons (bold, italic, hyperlink). (Hover over them to see what key is bound to what.)
  • Top-level comment threads can be collapsed by clicking the minus-sign button at the top right (and stay collapsed when you return to that post, but auto-expand if you navigate to a new comment in that thread)
    • The number under the comment thread collapse button indicates the number of comments in that thread
  • New comments are clearly highlighted
  • Click on a person’s username to go to a listing of their comments
  • Automatically generated table of contents (for any post with header elements)

Edit: Added ToC to feature list (Raemon, thanks for pointing it out [LW(p) · GW(p)]!)

Replies from: habryka4
comment by habryka (habryka4) · 2018-02-20T19:05:43.473Z · LW(p) · GW(p)

I am also curious what aspects of the site/what features they would most like to see on the main site. Or what aspects of GW they prefer over LW2.

Replies from: cousin_it
comment by cousin_it · 2018-02-20T20:21:21.805Z · LW(p) · GW(p)

Besides the fact that GW's front page is a list of posts and LW2's isn't (where I strongly prefer the GW way), I think the main difference is that LW2 is for click-happy people while GW is for tab-happy people. I'm the latter kind, and I guess Said is as well. We like cmd-clickable links and instant page loads, we don't care about snappy page updates after load, and we hate loaders/expanders/spinners.

Do you have a tab-happy alternate self who would open twenty HN threads and then slowly read them? Maybe you could just ask it :-)

Replies from: habryka4, SaidAchmiz
comment by habryka (habryka4) · 2018-02-20T22:42:41.015Z · LW(p) · GW(p)

That seems like a reasonable preference. Is there any link on the page that is not cmd-clickable in a way that has been bothering you? Have you noticed any extensive loading times when opening new pages? (In many cases those are quite fixable)

I agree that the general philosophy of the page is designed for single-page browsing instead of tab-explosions, so I expect some natural divergence in preferences, which seems fine and is one of the reasons why I am happy to have alternative platforms like GW. But I am still in favor of making the page marginally better to use for everyone.

comment by Said Achmiz (SaidAchmiz) · 2018-02-20T20:30:05.746Z · LW(p) · GW(p)

This is indeed an accurate description of my preferences :)

comment by sapphire (deluks917) · 2018-02-20T18:32:11.001Z · LW(p) · GW(p)

I love the feel of the site and would personally prefer to swap to reading GW. Two Question:

1) How does the RSS feed work for GW

2) Can anyone I should trust vouch for GW? Its a little dicey to log into this site with my lw password. By 'person I should trust' I mean someone I know or someone suffiently high profile (Ex Scott, Vanier) they have alot of reputation to lose if we get screwed.

Replies from: SaidAchmiz, Elo
comment by Said Achmiz (SaidAchmiz) · 2018-02-20T20:28:51.369Z · LW(p) · GW(p)

Re: #1, I’m not sure what your question is—can you clarify? Are you just asking how to get to the feed, or what feeds are available? There’s actually several (and they are all accessible by clicking the “RSS” link on the top-right of their respective pages, just under the navigation tabs):

  1. The “Frontpage” feed [? · GW], which has all the Frontpage posts
  2. The “Featured” feed [? · GW], which has all the Featured posts
  3. The “All” feed [? · GW], which has all posts
  4. The “Meta” feed [? · GW], which has all the Meta posts
  5. The Recent Comments feed [? · GW]
  6. Feeds for just the comments, just the posts, or both comments and posts, of an individual user (for example, here’s my comments feed [LW · GW]); these are accessible from the user’s page (e.g., here’s my page [LW · GW])

I hope that answers your question. If not, please elaborate!

comment by Elo · 2018-02-20T19:55:50.922Z · LW(p) · GW(p)

It's fine. I'm not one of those but I can verify for Saturn

comment by cousin_it · 2018-02-19T11:43:36.461Z · LW(p) · GW(p)

Thanks for the great work! I'm using it more than the default UI already, and when you guys get the inbox implemented I'll probably switch completely.

comment by Elo · 2018-02-23T03:20:41.475Z · LW(p) · GW(p)

Meta: State your preference.

I have a preference for the "orange on white" theme first over "brutalist" second. I'd like to like the dark bg theme but I prefer the less-bold headings.

Replies from: Raemon, SaidAchmiz
comment by Raemon · 2018-02-23T04:05:29.089Z · LW(p) · GW(p)

The Simple Theme is mostly the one I like most – it's the one that actually feels like LessWrong to me. Except that the gray background is unnecessarily hard to read, and some of the choices seem a bit random.

I think if that had a white background, and some of the other styling choices felt a bit more harmonious (new comments are Bright Red?), it'd be pretty perfect for me. (I thought about creating a variant, but, like, I'm kinda busy making LesserWrong.com better. :P)

Replies from: SaidAchmiz, Elo, Raemon
comment by Said Achmiz (SaidAchmiz) · 2018-02-23T05:17:37.420Z · LW(p) · GW(p)

Can I ask what sort of device you’re viewing the site on? Thanks!

Replies from: Raemon
comment by Raemon · 2018-02-23T05:48:07.674Z · LW(p) · GW(p)

Macbook pro (just prior to the current generation, 2017)

To be clear, the grey didn't seem, like, impossible to read it seemed within the window of reasonable design choices... just... somewhat lower contrast, for AFAICT no particular benefit. (Edit: I tacked on this disclaimer since I thought your question implied my experience was particularly dependent on screen tech, but maybe you were just being thorough)

Replies from: SaidAchmiz
comment by Said Achmiz (SaidAchmiz) · 2018-02-23T08:23:45.881Z · LW(p) · GW(p)

Sorry, yes, should’ve been more clear—I was just being thorough. I make a habit of asking people what they’re viewing my sites on, regardless of whether I think any given aspect of the browsing experience is dependent on any particular variation in hardware/etc. (Helps me get a more complete picture.)

Anyway, thanks for the info!

comment by Elo · 2018-02-23T04:27:47.541Z · LW(p) · GW(p)

looks like that link didn't come out because of the formatting.

Replies from: Raemon
comment by Raemon · 2018-02-23T04:43:06.419Z · LW(p) · GW(p)

do you mean LesserWrong.com? I wasn't actually trying to format that as a link, just using it to refer to the concept (I almost said "this site" since that's where I'm typing from but then realized that didn't actually communicate information)

comment by Raemon · 2018-02-23T04:06:43.565Z · LW(p) · GW(p)

(I think the default style has the best overall feel, just doesn't feel especially like LessWrong to me)

comment by Said Achmiz (SaidAchmiz) · 2018-02-23T03:38:35.947Z · LW(p) · GW(p)

Good idea—I’d love to know which theme people prefer!

I use the default theme, myself (though I regularly do some browsing with each of the themes, to make sure there are no glitches, etc.).

comment by ESRogs · 2018-02-19T03:43:17.297Z · LW(p) · GW(p)

What happens when I log in or create an account on Greater Wrong -- are they accessing the same user database?

Replies from: SaidAchmiz
comment by Gordon Seidoh Worley (gworley) · 2018-02-19T18:54:55.307Z · LW(p) · GW(p)

This is great if for no other reason than that spell check works in the markdown editor when I write comments and posts!

Replies from: habryka4
comment by habryka (habryka4) · 2018-02-21T10:11:27.861Z · LW(p) · GW(p)

Spellcheck now also works on here!

Replies from: gworley
comment by Gordon Seidoh Worley (gworley) · 2018-02-21T19:06:03.684Z · LW(p) · GW(p)

You're my hero!