Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CS2] Fix CS2 docs mobile issues, improve performance #4688

Merged
merged 13 commits into from
Sep 7, 2017

Conversation

GeoffreyBooth
Copy link
Collaborator

The CS2 docs are currently borderline unusable on a phone. This PR aims to fix that. In particular:

  • The code examples don’t become editable until you hover over (or tap/click) them. This lets us avoid initializing a few dozen copies of CodeMirror on startup. The non-editable code still has syntax highlighting generated by CodeMirror, but it’s generated at compile time and baked into the HTML. The initialization of CodeMirror should be almost unnoticeable.
  • “Try CoffeeScript” is now available on mobile.
  • On smaller breakpoints, the sidebar now slides over the main text rather than pushing the main column out of the way. This is much faster for browsers to render.
  • The code for the docs themselves is now compiled into JavaScript during docs compilation, not via the browser compiler when the docs load. (Previously, Safari 9 was throwing an error on some syntax we use in the docs code; and that’s too new of a browser to not support.) Having the docs code already in JavaScript (and minified) beforehand is faster anyway.
  • Various fixes for mobile styling and Bootstrap 4 Beta.
  • Improved handling of hashes, including avoiding /#.

Take a look: http://rawgit.com/GeoffreyBooth/coffeescript/docs-perf/docs/v2/

…t and that’s too new a browser not to support; but this should also speed things up
…rendering) before CodeMirror loads; match Highlight.js styles to CodeMirror styles as best we can
…ting, so that on CodeMirror initialization there’s no flash from mismatched highlighting
… play button; make the code editor text 16px size explicit, to avoid unwanted mobile zoom; make the ‘code play’ buttons work even if the code examples are in placeholder (non-editable) mode, in case a user hasn’t moused over/tapped them
Copy link
Collaborator

@lydell lydell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!

@GeoffreyBooth GeoffreyBooth merged commit 63d3b69 into jashkenas:2 Sep 7, 2017
@GeoffreyBooth GeoffreyBooth deleted the docs-perf branch September 7, 2017 15:01
GeoffreyBooth added a commit that referenced this pull request Sep 7, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants