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*
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@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Thanks Sage. Keep your eye out for it in the Wikipedia Beta app! :-)
Dan
On 28 August 2014 16:43, Sage Ross sage@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@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
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@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@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@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Mobile-l mailing list Mobile-l@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Woot! Maybe I'll take a peek at iOS app version over the weekend. :)
-- Brion
On Friday, August 29, 2014, florian.schmidt.welzow@t-online.de < florian.schmidt.welzow@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@gmail.com javascript:_e(%7B%7D,'cvml','jdlrobson@gmail.com');>
An: Dan Garry <dgarry@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@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@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@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@lists.wikimedia.org
http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D
Mobile-l mailing list
Mobile-l@lists.wikimedia.org
http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D
--
Dan Garry
Associate Product Manager, Mobile Apps
Wikimedia Foundation
Mobile-l mailing list
Mobile-l@lists.wikimedia.org
http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D
--
Jon Robson
http://?ctl=dereferer&to=aHR0cDovL2pvbnJvYnNvbi5tZS51aw%3D%3D
http://?ctl=dereferer&to=aHR0cHM6Ly93d3cuZmFjZWJvb2suY29tL2pvbnJvYnNvbg%3D%3D
- @rakugojon
Mobile-l mailing list
Mobile-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mobile-l http://?ctl=dereferer&to=aHR0cHM6Ly9saXN0cy53aWtpbWVkaWEub3JnL21haWxtYW4vbGlzdGluZm8vbW9iaWxlLWw%3D
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@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@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@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
Mobile-l mailing list Mobile-l@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
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@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@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@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@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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
_______________________________________________ Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l