content icon indicating copy to clipboard operation
content copied to clipboard

Published 20 hours ago • verified publisher icon mdn

Web API titles: some sample interfaces

Open wbamberg opened this issue 2 years ago • 3 comments

This draft PR is to show what page titles based on https://github.com/orgs/mdn/discussions/248#discussioncomment-3797416 would look like. It updates the title and adds short-title for three interfaces:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement https://developer.mozilla.org/en-US/docs/Web/API/Response https://developer.mozilla.org/en-US/docs/Web/API/XRWebGLBinding

I chose Response because it's very commonly referenced and has some statics, the other two because they contain some quite long titles.

Note that the sidebars will look a bit silly unless you run this with the Yari from https://github.com/wbamberg/yari/tree/apiref-short-title, which contains the update to make APIRef use short-title if it's available.

wbamberg avatar Oct 25 '22 04:10 wbamberg

Preview URLs (50 pages)
Flaws (12)

Note! 44 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/HTMLVideoElement/videoHeight Title: HTMLVideoElement: videoHeight property Flaw count: 2

  • macros:
    • /en-US/docs/Web/API/HTMLMediaElement/resize does not exist
    • /en-US/docs/Web/API/HTMLVideoElement/resize does not exist

URL: /en-US/docs/Web/API/XRWebGLBinding/createCylinderLayer Title: XRWebGLBinding: createCylinderLayer() method Flaw count: 2

  • macros:
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types

URL: /en-US/docs/Web/API/XRWebGLBinding/createEquirectLayer Title: XRWebGLBinding: createEquirectLayer() method Flaw count: 2

  • macros:
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types

URL: /en-US/docs/Web/API/XRWebGLBinding/createProjectionLayer Title: XRWebGLBinding: createProjectionLayer() method Flaw count: 2

  • macros:
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types

URL: /en-US/docs/Web/API/XRWebGLBinding/createCubeLayer Title: XRWebGLBinding: createCubeLayer() method Flaw count: 2

  • macros:
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types

URL: /en-US/docs/Web/API/XRWebGLBinding/createQuadLayer Title: XRWebGLBinding: createQuadLayer() method Flaw count: 2

  • macros:
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types
    • /en-US/docs/Web/API/GLenum redirects to /en-US/docs/Web/API/WebGL_API/Types

github-actions[bot] avatar Oct 25 '22 04:10 github-actions[bot]

With the sidebar, i prefer a shorter title. The header says the API and that the are instance properties, so I think we can leave the API and the word property off.

My favorite: only the instance property name

With the word property: Instance + propertyword

As is: API name + instance + property word

We do need to align the icon. With the short version, it would look better after the term.

estelle avatar Nov 02 '22 19:11 estelle

Thanks for looking!

With the sidebar, i prefer a shorter title. The header says the API and that the are instance properties, so I think we can leave the API and the word property off.

Yes. This PR also adds a short-title key that can be used in contexts where things like "property" are clear. This needs an update in the sidebar code, to make use of the short-title. I've made a separate Yari PR that contains this update, at https://github.com/wbamberg/yari/tree/apiref-short-title. So if you want to see what titles will look like you'll need to run this PR with that Yari PR:

  • clone wbamberg/yari and check out https://github.com/wbamberg/yari/tree/apiref-short-title
  • clone wbamberg/content and check out the branch in this PR
  • point wbamberg/yari's CONTENT_ROOT at your local copy of wbamberg/content
  • run yarn dev from the wbamberg/yari clone

We do need to align the icon. With the short version, it would look better after the term.

Yes, I agree about this. But I think it is a different issue.

wbamberg avatar Nov 02 '22 20:11 wbamberg

This pull request has merge conflicts that must be resolved before it can be merged.

github-actions[bot] avatar Dec 11 '22 06:12 github-actions[bot]

Some other issues caused by long titles on mobile screens are:

  • Featured articles on the homepage expand beyond the viewport: image
  • Breadcrumbs with long names overflow the page and make it horizontally scrollable: Screenshot from 2022-12-27 13-39-12 After scrolling right: image

tomasz13nocon avatar Dec 27 '22 12:12 tomasz13nocon

Some other issues caused by long titles on mobile screens are:

Thanks for highlighting these!

I think the "Featured articles" should be improved by this change, because it will give more line breaking opportunities, and as for breadcrumbs, the PR to use short titles in sidebars will also use them in breadcrumbs, so that should help there.

wbamberg avatar Dec 27 '22 19:12 wbamberg

This pull request has merge conflicts that must be resolved before it can be merged.

github-actions[bot] avatar Mar 03 '23 11:03 github-actions[bot]