[Apps] Syntax highlighting - next step is "everything grey!" :-) - Mobile-l

List overview All Threads
Download

newer

[Apps] Syntax highlighting - next step is "everything grey!" :-)

older

[Mobile web] Important: putting...

Re: [WikimediaMobile] [Design]...

Dan Garry

28 Aug 2014 28 Aug '14

11:38 p.m.

Hi everyone, Dmitry, Monte, James, Vibha and I just met to discuss where to go with syntax highlighting in the apps. For a variety of technical reasons, implementing VisualEditor in the apps is a gigantic undertaking. The Mobile Apps team left wondering whether there are lower-hanging fruit that we can run with in the meantime. So we're looking at syntax highlighting for wikitext to make it easier for users to understand. Dmitry has a working prototype (example screenshot <https://trello-attachments.s3.amazonaws.com/52607de6737250777a000201/538f522e15bb3bb63eb07214/360x640/56829abb8041a8d412970b1c59d24004/device-2014-06-04-085320.png>). On discussing this prototype, we were wary that while multi-coloured highlighting makes a lot of sense for programmers it may not make sense for newer users who aren't programmers, and may actually have the opposite of intended effect of making wikitext *more *scary. Oops! The way we're going to proceed is by changing the colour of all the highlighting to grey. That way, the actual content in the wikitext is brought to the foreground. The exception will be wikilinks; the text will be black, but the brackets will be grey. Hopefully this will help users make the association between the wikitext and the reader experience more apparent. We need to choose the right colour such that the text doesn't look disabled and disincline people from touching it if they want to, but we can do that! Since this is a side-project and potentially could make the experience a lot worse if we do it wrong, this is just going to be pushed to the Wikipedia Beta app on Android, and we'll analyse the data. We are *only* going to push this to production if the data strongly supports our hypothesis (i.e. the bounce rate on the edit screen is significantly reduced). If the data does not support this, or is inconclusive, we'll look at other ways to test this hypothesis. Special thanks to James for offering his editing domain knowledge to us for this meeting. :-) Let me know if there any questions! Thanks, Dan *tl;dr: EVERYTHING GREY* -- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation

Attachments:

attachment.htm (text/html — 2.5 KB)

Show replies by date

Sage Ross

28 Aug 28 Aug

11:43 p.m.

New subject: [Apps] Syntax highlighting - next step is "everything grey!" :-)

Grey all the things! This sounds like an excellent project. I don't use syntax highlighting, because it's complicated and ends up generally *highlighting* the markup rather than making the content stand out. But something simple like this, intended to separate markup from content but keeping the content in the foreground... that's potentially very appealing. Looking forward to seeing how it turns out! -Sage On Thu, Aug 28, 2014 at 4:38 PM, Dan Garry <dgarry(a)wikimedia.org> wrote:

...

Hi everyone, Dmitry, Monte, James, Vibha and I just met to discuss where to go with syntax highlighting in the apps. For a variety of technical reasons, implementing VisualEditor in the apps is a gigantic undertaking. The Mobile Apps team left wondering whether there are lower-hanging fruit that we can run with in the meantime. So we're looking at syntax highlighting for wikitext to make it easier for users to understand. Dmitry has a working prototype (example screenshot). On discussing this prototype, we were wary that while multi-coloured highlighting makes a lot of sense for programmers it may not make sense for newer users who aren't programmers, and may actually have the opposite of intended effect of making wikitext more scary. Oops! The way we're going to proceed is by changing the colour of all the highlighting to grey. That way, the actual content in the wikitext is brought to the foreground. The exception will be wikilinks; the text will be black, but the brackets will be grey. Hopefully this will help users make the association between the wikitext and the reader experience more apparent. We need to choose the right colour such that the text doesn't look disabled and disincline people from touching it if they want to, but we can do that! Since this is a side-project and potentially could make the experience a lot worse if we do it wrong, this is just going to be pushed to the Wikipedia Beta app on Android, and we'll analyse the data. We are only going to push this to production if the data strongly supports our hypothesis (i.e. the bounce rate on the edit screen is significantly reduced). If the data does not support this, or is inconclusive, we'll look at other ways to test this hypothesis. Special thanks to James for offering his editing domain knowledge to us for this meeting. :-) Let me know if there any questions! Thanks, Dan tl;dr: EVERYTHING GREY -- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Dan Garry

29 Aug 29 Aug

4:01 a.m.

New subject: [Apps] Syntax highlighting - next step is "everything grey!" :-)

Thanks Sage. Keep your eye out for it in the Wikipedia Beta app! :-) Dan On 28 August 2014 16:43, Sage Ross <sage(a)ragesoss.com> wrote:

...

Hi everyone, Dmitry, Monte, James, Vibha and I just met to discuss where to go with syntax highlighting in the apps. For a variety of technical reasons, implementing VisualEditor in the

apps is

a gigantic undertaking. The Mobile Apps team left wondering whether there are lower-hanging fruit that we can run with in the meantime. So we're looking at syntax highlighting for wikitext to make it easier for users

understand. Dmitry has a working prototype (example screenshot). On discussing this prototype, we were wary that while multi-coloured highlighting makes a

lot

of sense for programmers it may not make sense for newer users who aren't programmers, and may actually have the opposite of intended effect of

making

wikitext more scary. Oops! The way we're going to proceed is by changing the colour of all the highlighting to grey. That way, the actual content in the wikitext is brought to the foreground. The exception will be wikilinks; the text

will be

black, but the brackets will be grey. Hopefully this will help users make the association between the wikitext and the reader experience more apparent. We need to choose the right colour such that the text doesn't

look

disabled and disincline people from touching it if they want to, but we

can

do that! Since this is a side-project and potentially could make the experience a

lot

worse if we do it wrong, this is just going to be pushed to the Wikipedia Beta app on Android, and we'll analyse the data. We are only going to

push

this to production if the data strongly supports our hypothesis (i.e. the bounce rate on the edit screen is significantly reduced). If the data

does

not support this, or is inconclusive, we'll look at other ways to test

this

hypothesis. Special thanks to James for offering his editing domain knowledge to us

for

this meeting. :-) Let me know if there any questions! Thanks, Dan tl;dr: EVERYTHING GREY -- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation

Jon Robson

12:01 p.m.

New subject: [Apps] Syntax highlighting - next step is "everything grey!" :-)

And this is why we do things on public mailing lists :-D I wanted to steal this for mobile web... so on the flight over to England I knocked up a first version [1] (currently for beta). It doesn't auto-update highlighting as you edit, but it does apply the syntax highlighting on existing content, which makes things look less scary in that initial load (it would be good to run an A/B test at some point if I can get this fully working to see if more people get to the preview screen when we do this). Links, html comments and headings were pretty easy to wrap,but it's going to need some kind of JavaScript parser (maybe PEG [3] or acorn [4]) to be able to successfully match templates, html. So for instance things like "{{hello {{nested template}} template madness}}" will only be somewhat matched. I've got failing test cases for all those [2]. That said it's enough to give you a feel for how this would work on web. I'm about to jump on a plane and am running on little sleep, so if anyone feels like picking up my code and running with it over the finish line go for it. Go on.. it will be fun! :) [1] https://gerrit.wikimedia.org/r/157106 [2] https://gerrit.wikimedia.org/r/157107 [3] http://pegjs.majda.cz/development [4] http://marijnhaverbeke.nl/acorn/ On Thu, Aug 28, 2014 at 9:01 PM, Dan Garry <dgarry(a)wikimedia.org> wrote:

...

Thanks Sage. Keep your eye out for it in the Wikipedia Beta app! :-) Dan On 28 August 2014 16:43, Sage Ross <sage(a)ragesoss.com> wrote:

Hi everyone, Dmitry, Monte, James, Vibha and I just met to discuss where to go with syntax highlighting in the apps. For a variety of technical reasons, implementing VisualEditor in the apps is a gigantic undertaking. The Mobile Apps team left wondering whether there are lower-hanging fruit that we can run with in the meantime. So we're looking at syntax highlighting for wikitext to make it easier for users to understand. Dmitry has a working prototype (example screenshot). On discussing this prototype, we were wary that while multi-coloured highlighting makes a lot of sense for programmers it may not make sense for newer users who aren't programmers, and may actually have the opposite of intended effect of making wikitext more scary. Oops! The way we're going to proceed is by changing the colour of all the highlighting to grey. That way, the actual content in the wikitext is brought to the foreground. The exception will be wikilinks; the text will be black, but the brackets will be grey. Hopefully this will help users make the association between the wikitext and the reader experience more apparent. We need to choose the right colour such that the text doesn't look disabled and disincline people from touching it if they want to, but we can do that! Since this is a side-project and potentially could make the experience a lot worse if we do it wrong, this is just going to be pushed to the Wikipedia Beta app on Android, and we'll analyse the data. We are only going to push this to production if the data strongly supports our hypothesis (i.e. the bounce rate on the edit screen is significantly reduced). If the data does not support this, or is inconclusive, we'll look at other ways to test this hypothesis. Special thanks to James for offering his editing domain knowledge to us for this meeting. :-) Let me know if there any questions! Thanks, Dan tl;dr: EVERYTHING GREY -- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Jon Robson * http://jonrobson.me.uk * https://www.facebook.com/jonrobson * @rakugojon

florian.schmidt.welzow＠t-online.de

1:37 p.m.

New subject: [Apps] Syntax highlighting - next step is "everything grey!" :-)

Brion Vibber

4:52 p.m.

New subject: [Apps] Syntax highlighting - next step is "everything grey!" :-)

Woot! Maybe I'll take a peek at iOS app version over the weekend. :) -- Brion On Friday, August 29, 2014, florian.schmidt.welzow(a)t-online.de < florian.schmidt.welzow(a)t-online.de> wrote:

...

That looks awesome! @Jon: Did i understand you right, that you're ok that someone amend your change(s)? Just to be clear in that (don't want to "steal" your changes" :-) P.S.: Good flight! Freundliche Grüße / kind regards Florian Schmidt -----Original-Nachricht----- Betreff: Re: [WikimediaMobile] [Apps] Syntax highlighting - next step is "everything grey!" :-) Datum: Fri, 29 Aug 2014 14:02:42 +0200 Von: Jon Robson <jdlrobson(a)gmail.com <javascript:_e(%7B%7D,'cvml','jdlrobson@gmail.com');>> An: Dan Garry <dgarry(a)wikimedia.org <javascript:_e(%7B%7D,'cvml','dgarry@wikimedia.org');>> And this is why we do things on public mailing lists :-D I wanted to steal this for mobile web... so on the flight over to England I knocked up a first version [1] (currently for beta). It doesn't auto-update highlighting as you edit, but it does apply the syntax highlighting on existing content, which makes things look less scary in that initial load (it would be good to run an A/B test at some point if I can get this fully working to see if more people get to the preview screen when we do this). Links, html comments and headings were pretty easy to wrap,but it's going to need some kind of JavaScript parser (maybe PEG [3] or acorn [4]) to be able to successfully match templates, html. So for instance things like "{{hello {{nested template}} template madness}}" will only be somewhat matched. I've got failing test cases for all those [2]. That said it's enough to give you a feel for how this would work on web. I'm about to jump on a plane and am running on little sleep, so if anyone feels like picking up my code and running with it over the finish line go for it. Go on.. it will be fun! :) [1] https://gerrit.wikimedia.org/r/157106 <http://?ctl=dereferer&to=aHR0cHM6Ly9nZXJyaXQud2lraW1lZGlhLm9yZy9yLzE1NzEwNg%3D%3D> [2] https://gerrit.wikimedia.org/r/157107 <http://?ctl=dereferer&to=aHR0cHM6Ly9nZXJyaXQud2lraW1lZGlhLm9yZy9yLzE1NzEwNw%3D%3D> [3] http://pegjs.majda.cz/development <http://?ctl=dereferer&to=aHR0cDovL3BlZ2pzLm1hamRhLmN6L2RldmVsb3BtZW50> [4] http://marijnhaverbeke.nl/acorn/ <http://?ctl=dereferer&to=aHR0cDovL21hcmlqbmhhdmVyYmVrZS5ubC9hY29ybi8%3D> On Thu, Aug 28, 2014 at 9:01 PM, Dan Garry <dgarry(a)wikimedia.org> wrote:

Thanks Sage. Keep your eye out for it in the Wikipedia Beta app! :-)

Dan

On 28 August 2014 16:43, Sage Ross <sage(a)ragesoss.com> wrote:

> Grey all the things!

> This sounds like an excellent project. I don't use syntax

> highlighting, because it's complicated and ends up generally

> *highlighting* the markup rather than making the content stand out.

> But something simple like this, intended to separate markup from

> content but keeping the content in the foreground... that's

> potentially very appealing.

> Looking forward to seeing how it turns out!

> -Sage

> On Thu, Aug 28, 2014 at 4:38 PM, Dan Garry <dgarry(a)wikimedia.org>

wrote:

> > Hi everyone,

> > Dmitry, Monte, James, Vibha and I just met to discuss where to go with

> > syntax highlighting in the apps.

> > For a variety of technical reasons, implementing VisualEditor in the

> > apps is

> > a gigantic undertaking. The Mobile Apps team left wondering whether

> > there

> > are lower-hanging fruit that we can run with in the meantime. So we're

> > looking at syntax highlighting for wikitext to make it easier for

users

> > to

> > understand.

> > Dmitry has a working prototype (example screenshot). On discussing

this

> > prototype, we were wary that while multi-coloured highlighting makes a

> > lot

> > of sense for programmers it may not make sense for newer users who

> > aren't

> > programmers, and may actually have the opposite of intended effect of

> > making

> > wikitext more scary. Oops!

> > The way we're going to proceed is by changing the colour of all the

> > highlighting to grey. That way, the actual content in the wikitext is

> > brought to the foreground. The exception will be wikilinks; the text

> > will be

> > black, but the brackets will be grey. Hopefully this will help users

> > make

> > the association between the wikitext and the reader experience more

> > apparent. We need to choose the right colour such that the text

doesn't

> > look

> > disabled and disincline people from touching it if they want to, but

> > can

> > do that!

> > Since this is a side-project and potentially could make the

experience a

> > lot

> > worse if we do it wrong, this is just going to be pushed to the

> > Wikipedia

> > Beta app on Android, and we'll analyse the data. We are only going to

> > push

> > this to production if the data strongly supports our hypothesis (i.e.

> > the

> > bounce rate on the edit screen is significantly reduced). If the data

> > does

> > not support this, or is inconclusive, we'll look at other ways to test

> > this

> > hypothesis.

> > Special thanks to James for offering his editing domain knowledge to

> > for

> > this meeting. :-)

> > Let me know if there any questions!

> > Thanks,

Dan

> > tl;dr: EVERYTHING GREY

> > --

> > Dan Garry

> > Associate Product Manager, Mobile Apps

> > Wikimedia Foundation

> > _______________________________________________

> > Mobile-l mailing list

> > Mobile-l(a)lists.wikimedia.org

> > https://lists.wikimedia.org/mailman/listinfo/mobile-l

<http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D> >>

> _______________________________________________

> Mobile-l mailing list

> Mobile-l(a)lists.wikimedia.org

> https://lists.wikimedia.org/mailman/listinfo/mobile-l

<http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D>

Dan Garry

Associate Product Manager, Mobile Apps

Wikimedia Foundation

_______________________________________________

Mobile-l mailing list

Mobile-l(a)lists.wikimedia.org

https://lists.wikimedia.org/mailman/listinfo/mobile-l

<http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D>

-- Jon Robson * http://jonrobson.me.uk <http://?ctl=dereferer&to=aHR0cDovL2pvbnJvYnNvbi5tZS51aw%3D%3D> * https://www.facebook.com/jonrobson <http://?ctl=dereferer&to=aHR0cHM6Ly93d3cuZmFjZWJvb2suY29tL2pvbnJvYnNvbg%3D%3D> * @rakugojon _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l <http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D>

Jon Robson

11:02 p.m.

New subject: [Apps] Syntax highlighting - next step is "everything grey!" :-)

Go for it Florian! Just remove the change id so we don't confuse each others patches. (I've been poking around at it a little more but I'm not sure how best to implement it yet :) On 29 Aug 2014 05:01, "Dan Garry" <dgarry(a)wikimedia.org> wrote:

...

Thanks Sage. Keep your eye out for it in the Wikipedia Beta app! :-) Dan On 28 August 2014 16:43, Sage Ross <sage(a)ragesoss.com> wrote:

Hi everyone, Dmitry, Monte, James, Vibha and I just met to discuss where to go with syntax highlighting in the apps. For a variety of technical reasons, implementing VisualEditor in the

apps is

a gigantic undertaking. The Mobile Apps team left wondering whether

there

are lower-hanging fruit that we can run with in the meantime. So we're looking at syntax highlighting for wikitext to make it easier for users

understand. Dmitry has a working prototype (example screenshot). On discussing this prototype, we were wary that while multi-coloured highlighting makes a

lot

of sense for programmers it may not make sense for newer users who

aren't

programmers, and may actually have the opposite of intended effect of

making

will be

black, but the brackets will be grey. Hopefully this will help users

make

the association between the wikitext and the reader experience more apparent. We need to choose the right colour such that the text doesn't

look

disabled and disincline people from touching it if they want to, but we

can

do that! Since this is a side-project and potentially could make the experience

a lot

worse if we do it wrong, this is just going to be pushed to the

Wikipedia

Beta app on Android, and we'll analyse the data. We are only going to

push

this to production if the data strongly supports our hypothesis (i.e.

the

bounce rate on the edit screen is significantly reduced). If the data

does

not support this, or is inconclusive, we'll look at other ways to test

this

hypothesis. Special thanks to James for offering his editing domain knowledge to us

for

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Florian Schmidt

30 Aug 30 Aug

12:30 a.m.

...

Just remove the change id so we don't confuse each others patches.

-> https://gerrit.wikimedia.org/r/#/c/157307

...

I've been poking around at it a little more but I'm not sure how best to implement it yet

The patch above will show the line breaks, like i want to reach, but in Chrome and Android mobile (HTC Stock browser) the cursor changes the position to somewhere in the div everytime you enter something, that's not good :/ If i replace the line breaks to br's, they will be visible again, but after you enter something they disappear and the content is written down without paragraphs :/ Maybe it's too late :) And then there is the fact, that firefox desktop adds <br> as a line break (when the user hits return), chrome desktop adds a new div container containing the text (or a div hirarchy if you hit more then one time return). Anyway: Have a nice weekend! Freundliche Grüße / Kind regards Florian Von: mobile-l-bounces(a)lists.wikimedia.org [mailto:mobile-l-bounces@lists.wikimedia.org] Im Auftrag von Jon Robson Gesendet: Samstag, 30. August 2014 01:02 An: Dan Garry Cc: mobile-l; Sage Ross Betreff: Re: [WikimediaMobile] [Apps] Syntax highlighting - next step is "everything grey!" :-) Go for it Florian! Just remove the change id so we don't confuse each others patches. (I've been poking around at it a little more but I'm not sure how best to implement it yet :) On 29 Aug 2014 05:01, "Dan Garry" <dgarry(a)wikimedia.org> wrote: Thanks Sage. Keep your eye out for it in the Wikipedia Beta app! :-) Dan On 28 August 2014 16:43, Sage Ross <sage(a)ragesoss.com> wrote: Grey all the things! This sounds like an excellent project. I don't use syntax highlighting, because it's complicated and ends up generally *highlighting* the markup rather than making the content stand out. But something simple like this, intended to separate markup from content but keeping the content in the foreground... that's potentially very appealing. Looking forward to seeing how it turns out! -Sage On Thu, Aug 28, 2014 at 4:38 PM, Dan Garry <dgarry(a)wikimedia.org> wrote:

...

Hi everyone, Dmitry, Monte, James, Vibha and I just met to discuss where to go with syntax highlighting in the apps. For a variety of technical reasons, implementing VisualEditor in the apps is a gigantic undertaking. The Mobile Apps team left wondering whether there are lower-hanging fruit that we can run with in the meantime. So we're looking at syntax highlighting for wikitext to make it easier for users to understand. Dmitry has a working prototype (example screenshot). On discussing this prototype, we were wary that while multi-coloured highlighting makes a lot of sense for programmers it may not make sense for newer users who aren't programmers, and may actually have the opposite of intended effect of making wikitext more scary. Oops! The way we're going to proceed is by changing the colour of all the highlighting to grey. That way, the actual content in the wikitext is brought to the foreground. The exception will be wikilinks; the text will be black, but the brackets will be grey. Hopefully this will help users make the association between the wikitext and the reader experience more apparent. We need to choose the right colour such that the text doesn't look disabled and disincline people from touching it if they want to, but we can do that! Since this is a side-project and potentially could make the experience a lot worse if we do it wrong, this is just going to be pushed to the Wikipedia Beta app on Android, and we'll analyse the data. We are only going to push this to production if the data strongly supports our hypothesis (i.e. the bounce rate on the edit screen is significantly reduced). If the data does not support this, or is inconclusive, we'll look at other ways to test this hypothesis. Special thanks to James for offering his editing domain knowledge to us for this meeting. :-) Let me know if there any questions! Thanks, Dan tl;dr: EVERYTHING GREY -- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l -- Dan Garry Associate Product Manager, Mobile Apps Wikimedia Foundation _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

3538

days inactive

3540

days old

mobile-l@lists.wikimedia.org

Manage subscription

7 comments

6 participants

tags (0)

participants (6)

Brion Vibber
Dan Garry
Florian Schmidt
florian.schmidt.welzow＠t-online.de
Jon Robson
Sage Ross