GithubHelp home page GithubHelp logo

catamphetamine / anychan Goto Github PK

View Code? Open in Web Editor NEW
63.0 63.0 7.0 151.56 MB

A universal web client for online discussion services like "forums" or "imageboards".

Home Page: https://anychans.github.io

JavaScript 78.63% CSS 15.56% HTML 5.78% Shell 0.04%

anychan's People

Contributors

catamphetamine avatar cvyl avatar purecatamphetamine avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

anychan's Issues

Scroll position "jumps" when clicking "Show Previous Comments"

When clicking "Show Previous Comments", those previous comments get rendered, their height gets measured, and the scroll position gets adjusted so that there's no percievable "jump" of content on the page.

But, if some of those previous comments contain YouTube video links, those YouTube video links get loaded via YouTube API, and then YouTube video players are rendered in place of the links. The whole process is very fast, sometimes nearly instantaneous. But, when a link to a video gets replaced with a video player, the comment height changes, resulting in all other comments below it shifting down by that height difference, creating the "glitch" that is percieved as a "jump" of page content.

The issue appears with any type of "loadable" content (YouTube video links, Twitter links, etc).

There seems to be no solution for the issue.

The issue wouldn't exist if messaging service providers (like imageboards) did parse and load all links to "loadable" resources (like YouTube videos, Tweets, etc) right when the message is posted, so that the client application wouldn't have to do that kind of stuff in "post-processing".

Enhancement: Using lightweight CSS

Considerations of the webring imagboards

Adding these imageboards (pick only some and not all) would be a fine addition since the quality of endchan and 8kun might be going down. Would like to ask for your opinion.



Code syntax highlighting

As discussed in the arisuchan and lainchan issue, those two chans have code syntax highlighting.

The markup is already generated as a standard one:

<pre>
  <code class="language-...">
    ...
  </code>
</pre>

A code highlighter could be included on a page.
For example, Prism.

There's an Autoloader plugin that loads syntaxes dynamically.

<!DOCTYPE html>
<html>
<head>
	...
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
	<script>Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/[email protected]/components/'</script>
</body>
</html>

That would be Prism, but by default it only highlights code (and loads syntaxes) on page load.
React is different โ€” it renders stuff after page load, so there should be a way to re-run Prism highlighter after the code component has rendered.

There seems to be a React wrapper for Prism that does the dynamic re-running thing:
https://github.com/FormidableLabs/prism-react-renderer

Repackaging this application for PWA/Native

Google has made this feauter in https://developer.chrome.com/blog/new-in-chrome-73/

Progressive Web Apps provide an installable, app-like experience, built and delivered directly via the web. In Chrome 73, we've added support for macOS, bringing support for Progressive Web Apps to all desktop platforms - Mac, Windows, Chrome OS and Linux, as well as mobile, simplifying web app development.

A Progressive Web App is fast, and reliably so; always loading and performing at the same speed, regardless of network connection. They provide rich, engaging experiences via modern web features that take full advantage of the device capabilities.

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.