Giter Club home page Giter Club logo

api-reference's People

Contributors

kpal81xd avatar marklundin avatar willeastcott avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

api-reference's Issues

New API docs - list of arguments

Current docs show list of arguments as a table:

image

It is implemented using 3 columns, which is not ideal as it leaves very little space horizontally, while suffering with a large empty space due to description is most of the time multiple lines height.

The new API docs, uses lists, with indent, and a lot of similar coloring in various places that makes it extremely hard to identify actual arguments that can be provided into constructor:
image

Especially for nested properties when passing more complex objects:
image

Table with a two rows would make it much better:
image

Switch from horizontal to vertical sort order

The new API docs has nice block with properties, methods, etc.

But the sorting order is from left to right, and with large gaps between items it is hard to read.
So the alternative is to use vertical sorting, but it requires a bit of trickery in CSS, specifically to know exact height of an element in order to guarantee number of columns.

Horizontal sorting:
image

Vertical sorting:
image

To implement vertical sorting, element should have the right height based on number of elements (in this example 32 elements, 3 columns, 28px height of an element) and generic CSS.
Height formula: height = ceil(count / 3) * 28px (308px).

<div class='list' style='height:308px'>
    ...
</div>
.list {
    display: grid;
    column-gap: 1rem;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, [col-start] 28px [col-end]);
}

New API docs - search sorting

Search is an important tool for docs, and it is a powerful exploration tool.

New API docs provide very nice searching capabilities, but the order of results is not optimal:

image

In most cases class should be the first.

New API docs - too verbose in many cases.

When the eyes are searching through content, it is best to reduce repetition or information duplication.
Currently all properties, methods, etc are duplicated in docs:

image

It also suffers in some places from non-distinct separation.

Remove duplication and provide more accent to meaningful information:

image

New API docs - link colors and consistency

It would be great to have a very consistent color and style for links within docs. Color coding of different things - is great, but without consistency it is harder to get quickly familiar with things.

Code syntax highlight should match the color schema of the docs or vice-versa.

Use color only for meaningful color coding, and reserve a distinct color per type of element we want to highlight. E.g. Class should use the color that others don't use. And class should be everywhere highlighted with such color (lists, links, code examples, syntax highlight, etc).

Links

If anything is clickable, it should look as clickable, and other elements should not use same way of highlighting to avoid confusion.
Obvious navigation lists, e.g. list of properties, accessors, methods - do not require underlines.

Subtle underline can help with that:

Currently:
image

With underline:
image

Classes

For example, all classes are colored cyan:
image

But clickable links are all different colors:
image

Functions

Functions are purple:
image

But in docs it shows methods as Pink:
image

And then goes back to purple below for these methods:
image

But in syntax highlight we switch to yellow:
image

Properties and Accessors

In engine they are very close, in some rare cases it is worth to know distinction, but generally engine uses them interchangeably, without providing any meaningful difference to the user. End of the day accessors do behave like properties.
Biggest thing, is that list of properties and accessors - is a public API, and the splits into two separate blocks does not provide meaning, but makes it harder to overview.
Also they don't need to look different as they behave by the end user the same.
Obvious examples would be: Entity.path and Entity.name. But even everything else. It is confusing distinction in general for API overview:

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.