Some experience of htmlpreview.github.io as a replacement for rawgit.com
Posted by jpluimers on 2022/12/01
With [Wayback/Archive] rawgit.com having sunset years ago, but still having a [Wayback/Archive] few links to it from my blog, it was time to take a closer look at the alternative [Wayback/Archive] htmlpreview.github.io.
First of all, htmlpreview needs more examples. I might submit a pull request for it later, as it is open source at [Archive/Archive] htmlpreview/htmlpreview.github.com: HTML Preview for GitHub Repositories.
Second, some actual example URLs, based on content I previously accessed through rawgit.com.
But first a new example which I created after rawgit.com died, and really required me to look into alternatives like htmlpreview: a gist referenced from a blog post that got live this summer: Some links on PostScript books and online content, back from the days.
It resulted in this html gist: [Wayback/Archive] The rainbow of PostScript related books by Adobe. with link gist.github.com/jpluimers/9a50d0ba14fe975906ea8788a352e269 (the full html is below the signature).
From that, if the gist has just one html file, two htmlpreview links will work exactly the same:
- htmlpreview.github.io/?https://gist.githubusercontent.com/jpluimers/9a50d0ba14fe975906ea8788a352e269/raw/
- htmlpreview.github.io/?https://gist.githubusercontent.com/jpluimers/9a50d0ba14fe975906ea8788a352e269/raw/cde35d4a6b55050206d70daa597d04590585a419/PostScriptBooks.html
If you have multiple html files in your gist, then you need to specify the actual html file, but with one you can omit the cde35d4a6b55050206d70daa597d04590585a419/PostScriptBooks.html part.
A few remarks before trying other URLs:
- The speed seems to have improved since I first mentioned htmlpreview years ago in Hosting an HTML gist containing JavaScript.
- The result cannot be saved in the WayBack machine (see WayBack1 and WayBack2) as the rendering is done client side, and the WayBack machine bot cannot save that.
- Archive Today saving does work, see Archive1 and Archive2.
The other still relevant gist is mentioned in my blog post Decode URLs from The Great Suspender after a browser restart fails to reload them, and is at [Wayback/Archive] Decode URLs from The Great Suspender after a browser restart fails to reload them.
Since this is a single-html-file gist, the raw file is at both these URLs:
- https://gist.githubusercontent.com/jpluimers/5c2093a68a775e1d1f5e743a34735548/raw/
- https://gist.githubusercontent.com/jpluimers/5c2093a68a775e1d1f5e743a34735548/raw/51de8f0bd98e499e345db2fbd346f862a64a0f40/20160826-Resurrect-Great-Suspender-URL.html
The htmlpreview URLs then are these:
- [Archive] htmlpreview.github.io/?https://gist.githubusercontent.com/jpluimers/5c2093a68a775e1d1f5e743a34735548/raw/
- [Archive] htmlpreview.github.io/?https://gist.githubusercontent.com/jpluimers/5c2093a68a775e1d1f5e743a34735548/raw/51de8f0bd98e499e345db2fbd346f862a64a0f40/20160826-Resurrect-Great-Suspender-URL.html
What I really like about htmlpreview is that the original gist URLs are still clearly visible, so it is easier to switch back to the original gists.
The innards of htmlpreview
Another thing I like is that it is a very small code base which is easy to grasp. If you want to learn, then take a look here:
- Repository [Wayback/Archive] htmlpreview/htmlpreview.github.com: HTML Preview for GitHub Repositories
- HTML [Wayback/Archive] htmlpreview.github.com/index.html at master · htmlpreview/htmlpreview.github.com
- JavaScript [Wayback/Archive] htmlpreview.github.com/htmlpreview.js at master · htmlpreview/htmlpreview.github.com
The HTML renders different depending on the URL having a parameter or not: without a parameter you can ender a Bitbucket or GitHub URL. With parameter, it renders that URL.
It either does CORS (Cross-origin resource sharing) proxying itself or makes use of api.codetabs.com as CORS proxy service so I did a quick search for [Wayback/Archive] “https://api.codetabs.com” – Google Search revealing that too is both open source (so you can host it yourself) and easy to use:
- [Wayback/Archive] javascript – How to use Exif library to roate an image? – Stack Overflow
C
Access to XMLHttpRequest has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Not sure what to do with it. – [Wayback/Archive] phamng
C
That happens if the domain from which you’re executing the javascript and the source of the image are different or if both sources are the same but the server does not return the appropriate header. You can try serving the image via a proxy. Append
https://api.codetabs.com/v1/proxy?quest=to the url. – [Wayback/Archive] obscureNote that obscure meant “prepend” in stead of “append”
- [Wayback/Archive] CodeTabs CORS proxy (which is free for low-frequency requests):
CORS ProxyTo bypass same-origin policy related to AJAX requests to third party services allowing access resources from any website.
You can use to prevent mixed content of images and JSON data proxying the resources to serve them under https.API - CORS proxy server documentation: [Wayback/Archive] jolav/codetabs: Free Online Services. Github/GitLab star history. Count Lines of Code. CORS proxy server. IP GeoLocation. Convert Video to Gif. HTTP Headers. Api weather temp. Alexa ranking. – CORS proxy server
- [Wayback/Archive] CORS Proxy
- Free CORS proxy server to bypass same-origin policy related to performing standard AJAX requests to 3rd party services.
You can use to prevent mixed content of images and JSON data proxying the resources to serve them under https. - API URL =>
"https://api.codetabs.com/v1/proxy?quest=<url_to_http_resource>" - Each request is limited to 5mb size download to avoid abuse.
- Only suppports GET request.
- Limit : 5 request per second. Once reached subsequent requests will result in error 429 (too many requests) until your quota is cleared.
…
Endpoint – Do cors proxyhttp Request :
GET https://api.codetabs.com/v1/proxy?quest=<url_to_http_resource>
Examples
Access resources from other website :
https://api.codetabs.com/v1/proxy?quest=<url_to_http_resource>
Serve an http image as https preventing mixed content :
https://api.codetabs.com/v1/proxy?quest=<url_to_http_resource> - Free CORS proxy server to bypass same-origin policy related to performing standard AJAX requests to 3rd party services.
- [Wayback/Archive] CORS Proxy
- Golang CORS proxy server source code: [Wayback/Archive] codetabs/loc at master · jolav/codetabs
References
- [Wayback/Archive] RawGit has reached the end of its useful life October 8, 2018
- [Wayback/Archive] git – View rendered output of a gist? – Stack Overflow has more alternatives
–jeroen
Full HTML of gist.github.com/jpluimers/9a50d0ba14fe975906ea8788a352e269:
https://gist.github.com/jpluimers/9a50d0ba14fe975906ea8788a352e269
The Wiert Corner - irregular stream of stuff 
Leave a Reply