New Prev/Next/PrevNext macros, with main menu links

[Chris Mills]

Hi all,

I’ve created new versions of the Prev/Next/PrevNext macros, which allow you to include a “Main menu” links that will take you back to the main menu/index page of the article series you are currently in. I wanted this to provide a navigation aid for the modules in the learning area.

They are as follows:

https://developer.mozilla.org/en-US/docs/Template:PreviousMenuNext
https://developer.mozilla.org/en-US/docs/Template:PreviousMenu
https://developer.mozilla.org/en-US/docs/Template:NextMenu

You can see an example of them in action at

https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works

Any comments/queries welcome.

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

[Sebastian Zartner]

That's a great idea.

I just wonder why you created new macros instead of extending the existing
ones. Also, the name somewhat doesn't fit. I suggest to rename it to 'Main
page'.

Sebastian

> _______________________________________________
> dev-mdc mailing list
> dev...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-mdc
> MDN contributor guide: http://bit.ly/ContributorGuide
> Doc project Trello board: https://trello.com/b/HAhl54zz/status

[Chris Mills]

> On 30 Jun 2016, at 19:15, Sebastian Zartner <sebastia...@gmail.com> wrote:
>
> That's a great idea.
>
> I just wonder why you created new macros instead of extending the existing ones.

I created them as new macros just for now, in case people didn’t like the idea.

> Also, the name somewhat doesn't fit. I suggest to rename it to 'Main page’.

It’s a hard one to name; the text I’ve chosen reflects the purpose of the link rather than the exact identity of the linked page. “Index page” would probably be even better, but that sounds stuffy and academic to me. We should discuss this a bit.

[Janet Swisher]

On 6/30/16 13:20, Chris Mills wrote:
>> On 30 Jun 2016, at 19:15, Sebastian Zartner <sebastia...@gmail.com> wrote:
>>
>> That's a great idea.
>>
>> I just wonder why you created new macros instead of extending the existing ones.
> I created them as new macros just for now, in case people didn’t like the idea.
>
>> Also, the name somewhat doesn't fit. I suggest to rename it to 'Main page’.
> It’s a hard one to name; the text I’ve chosen reflects the purpose of the link rather than the exact identity of the linked page. “Index page” would probably be even better, but that sounds stuffy and academic to me. We should discuss this a bit.
>

I suggest "Overview".

Ideally, I'd like to see link labels that include the title of the
linked page, to give context for readers who land in the middle of a
tutorial without starting at the beginning. This is in keeping with
general usability principles.

For example, the Selectors page could have links like this:

<<CSS Syntax Overview: Introduction to CSS Values and units>>

But maybe that's version 2.0 of the macro.


--

Janet Swisher <mailto:jREMOVE...@mozilla.com>
Mozilla Developer Network <https://developer.mozilla.org>
Community Strategist

[Chris Mills]

> On 30 Jun 2016, at 20:06, Janet Swisher <jswi...@mozilla.com> wrote:
>
>
>
> On 6/30/16 13:20, Chris Mills wrote:
>>> On 30 Jun 2016, at 19:15, Sebastian Zartner <sebastia...@gmail.com>
>>> wrote:
>>>
>>> That's a great idea.
>>>
>>> I just wonder why you created new macros instead of extending the existing ones.
>>>
>> I created them as new macros just for now, in case people didn’t like the idea.
>>
>>
>>> Also, the name somewhat doesn't fit. I suggest to rename it to 'Main page’.
>>>
>> It’s a hard one to name; the text I’ve chosen reflects the purpose of the link rather than the exact identity of the linked page. “Index page” would probably be even better, but that sounds stuffy and academic to me. We should discuss this a bit.
>>
>>
> I suggest "Overview".
>
> Ideally, I'd like to see link labels that include the title of the linked page, to give context for readers who land in the middle of a tutorial without starting at the beginning. This is in keeping with general usability principles.
>
> For example, the Selectors page could have links like this:
>
> <<CSS Syntax Overview: Introduction to CSS Values and units>>
>
> But maybe that's version 2.0 of the macro.

Check it out now:

https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Selectors

This was pretty easy to do; I also added a little up arrow symbol to try to indicate further that this is linking to a level above this one in the docs.

[Eric Shepherd]

I wonder if it would be worth doing something more with this, like
putting some sort of shading on the links, or something, to make them
not disappear into the background like they currently do (this is a
problem I perceive in the existing PrevNext macros, too).

Also, perhaps use a Font Awesome up-arrow icon instead of a caret character?

> https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Selectors
>
> This was pretty easy to do; I also added a little up arrow symbol to try to indicate further that this is linking to a level above this one in the docs.

--

Eric Shepherd
Senior Technical Writer
Mozilla Developer Network <https://developer.mozilla.org/>
Blog: https://www.bitstampede.com/
Twitter: http://twitter.com/sheppy
Doodle: http://doodle.com/the.sheppy

[Chris Mills]

Is this what you had in mind?

https://developer.mozilla.org/en-US/Learn/JavaScript/Introduction_to_JavaScript_1/Variables

I now need to go and shower, after adding all that filthy inline CSS to the template ;-)

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

> On 7 Jul 2016, at 14:33, Eric Shepherd <eshe...@mozilla.com> wrote:
>
> I wonder if it would be worth doing something more with this, like putting some sort of shading on the links, or something, to make them not disappear into the background like they currently do (this is a problem I perceive in the existing PrevNext macros, too).
>
> Also, perhaps use a Font Awesome up-arrow icon instead of a caret character?
>
>
>> https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Selectors
>>
>>
>> This was pretty easy to do; I also added a little up arrow symbol to try to indicate further that this is linking to a level above this one in the docs.
>>
>
> --
>
> Eric Shepherd
> Senior Technical Writer
> Mozilla Developer Network

[Eric Shepherd]

That's freakin' awesome. I love it. Might could do with another pixel or
two of padding on the left and right though. That one nitpick aside, I
<3 this!

> Is this what you had in mind?
>
> https://developer.mozilla.org/en-US/Learn/JavaScript/Introduction_to_JavaScript_1/Variables
>
> I now need to go and shower, after adding all that filthy inline CSS to the template ;-)

--

Eric Shepherd
Senior Technical Writer

Mozilla Developer Network <https://developer.mozilla.org/>

[Eric Shepherd]

Also, if we decide to keep that look, we should move that CSS into the
right place so it doesn't have to be inline.

[Eric Shepherd]

Hah! I thought that was something I did by accident when I loaded the
page. Yeah. That'd have to go :)


> Disregarding the adjusted design of the links, which looks very great,
> there is obviously some JavaScript, which scrolls the page down to the
> middle of the article. Can that please be removed?

[Sebastian Zartner]

Disregarding the adjusted design of the links, which looks very great,
there is obviously some JavaScript, which scrolls the page down to the
middle of the article. Can that please be removed?

Sebastian

On 8 July 2016 at 14:34, Eric Shepherd <eshe...@mozilla.com> wrote:
> Also, if we decide to keep that look, we should move that CSS into the right
> place so it doesn't have to be inline.
>
>
> I now need to go and shower, after adding all that filthy inline CSS to the
> template ;-)
>
>

> --
>
> Eric Shepherd
> Senior Technical Writer
> Mozilla Developer Network

[Chris Mills]

Ack, I have no idea what on earth is causing that… ;-|

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

> On 8 Jul 2016, at 15:14, Eric Shepherd <eshe...@mozilla.com> wrote:
>
> Hah! I thought that was something I did by accident when I loaded the page. Yeah. That'd have to go :)
>
>

>> Disregarding the adjusted design of the links, which looks very great,
>> there is obviously some JavaScript, which scrolls the page down to the
>> middle of the article. Can that please be removed?
>>
>

[Eric Shepherd]

I made a few improvements to the macro this evening, but I don't see
where the scrolling is coming from. Tried to find it but boy, it's sneaky.

I moved the style for the buttons into a variable to be easier to fiddle
with, and tweaked the padding a bit to make the buttons a little nicer
(IMO).


> Ack, I have no idea what on earth is causing that... ;-|

--

Eric Shepherd
Senior Technical Writer

Mozilla Developer Network <https://developer.mozilla.org/>

[Chris Mills]

Nice work dude, looks even better.

I’ve worked out what the problem is — some of my live examples have elem.focus() in them, which is of course making the page jump to the position of the focused element. If I remove them, it should fix it.

> On 11 Jul 2016, at 05:39, Eric Shepherd <eshe...@mozilla.com> wrote:
>
> I made a few improvements to the macro this evening, but I don't see where the scrolling is coming from. Tried to find it but boy, it's sneaky.
>
> I moved the style for the buttons into a variable to be easier to fiddle with, and tweaked the padding a bit to make the buttons a little nicer (IMO).
>
>

>> Ack, I have no idea what on earth is causing that… ;-|

>
> --
>
> Eric Shepherd
> Senior Technical Writer
> Mozilla Developer Network

[Eric Shepherd]

I was starting to think it was something about the live samples. Cool,
glad you got that figured (I hope that does it, anyway). :)

> I’ve worked out what the problem is — some of my live examples have elem.focus() in them, which is of course making the page jump to the position of the focused element. If I remove them, it should fix it.

--

Eric Shepherd
Senior Technical Writer

Mozilla Developer Network <https://developer.mozilla.org/>

[Chris Mills]

Yup, it was that - problem solved ;-)

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

> On 11 Jul 2016, at 15:42, Eric Shepherd <eshe...@mozilla.com> wrote:
>
> I was starting to think it was something about the live samples. Cool, glad you got that figured (I hope that does it, anyway). :)
>
>
>> I’ve worked out what the problem is — some of my live examples have elem.focus() in them, which is of course making the page jump to the position of the focused element. If I remove them, it should fix it.
>
> --
>
> Eric Shepherd
> Senior Technical Writer
> Mozilla Developer Network