Performance & Reliability Updates for "Github Code Screenshot"

in utopian-io •  8 months ago

Repository

https://github.com/adasq/github-code-screenshot

PR: https://github.com/adasq/github-code-screenshot/pull/2

New Features

Introduction

Github Code Screenshot ( or screenshot service ) is a ease way of creating screenshot based on github hosted source code. The screenshot service is hosted here. More about how does it work in the previous post.

What features did I add?

  • The contribution describes how I have decreased a total time of generating screenshots from ~5 sec to ~2 sec.
  • A new home page has been created with the ability to create embeded code with your screenshot to be used instantly in your editor (i.e. steemit.com)

How did I implement them?

In the very beginning I would like to remind you within a list of steps how does the service used to work as it will be easier to understand:

  1. You navigate https://github-shot.herokuapp.com/ and paste your github snippet url.
  2. Based on passed github snippet url we do retrive source code using Github API.
  3. An internal browser (run on the server) opens https://carbon.now.sh page with your source code passed within custom query params.
  4. We are waiting for full page load.
  5. The browser simulates click events: "Save Image" , then "PNG " in order to download a image.

  1. The image is downloaded and saved into a local file.
  2. File is sent to a user browser.

There are a few drawbacks of such approach.

First of all, production server has to wait until a https://carbon.now.sh page is fully loaded each time you want to create a screenshot (see 4.). I decided to fork carbon service and run it on the production server, so we do not make external HTTP calls to remote service (carbon.now.sh). So, instead of carbon.now.sh we do use our own copy of the service build from a master branch (yep, it is open-sourced!).

Secondly, (as mentioned in 5.) each time you want to prepare a screenshot, we do wait until the internal browser loads new page, then clicks button: "Save Image" and "PNG" respectivity. We can we optimize this step. How? Well, as you already know, the screenshot service relays on local instance of carbon service. But it is not 1:1 similar to carbon.now.sh. I extended it by adding custom code to it. Here is what the carbon service has been extended with:

Lines 109 to 114 of 'components/Editor.js' file

Display on github.com

As you can see a global api property has been added. It includes a set of actions: updateCode, updateLanguage and getCarbonImage. So, according to step 4 and 5, we do not have to wait until a page with a code is loaded each time (as we have passed source code snippte via query params, see step 3.). We are reusing a carbon local instance page which is loaded once, while a service is started and then update both code and its language using this javascript functions rather thab waiting a page is loaded, and manual clicks are performed within UI controls in order to download image. Here is script which replaces highly time-consuming steps 4 and 5:

Lines 160 to 177 of 'src/screen-producer.js' file

Display on github.com

page.evaluate allows us to call custom script on the internal browser side. We already know code and lang properties after calling github API, so we can fill a editor with such information. It has a huge impact of a performance of the screenshot service. But there is more. We can also skip step 6. A function api.getCarbonImage returns us a image blob we can instantly pass to a user browser instead of writing, without a need to writing it as a file (and then loading from file in order to send it to a clinet).

And finally - as a side effect of my changes - a new feature has been introduced. I am thinking about function api.updateLanguage. In the recent version we were able to use only javascript code highlighting logic. Step 2 retrieves meta info about source code we want to create screenshot from. It does include a file extension as well. A custom object has been prepared in order to map file extension to a meta information carbon is using to change a language:

Lines 3 to 16 of 'src/highlight-service.js' file

Display on github.com

All of those fixes improves overall performance as well as reliability (due the fact, we are not depending of external carbon.now.sh server).

Finally, a homepage view has been updated. You can now generate an embedded code and use it i.e. in steemit.com editor, while composing new Utopian contribution post. Example usecase below.

Aug 25 2018 7_02 PM (2).gif

Try it on your own here.
Bye.

(Contribution crafted with @jakipatryk's steeditor.app)

GitHub Account

https://github.com/adasq

PR: https://github.com/adasq/github-code-screenshot/pull/2

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Hi there,

I am a user of carbon.now.sh, good to see I don't need to create Github gists for that anymore. :)

At Utopian, we value projects with a clean git history and descriptive commit messages. This is a part of our review process.

I saw a commit with message ".". This is not a good practice on open source world.

Have a look at this to get better scores in the future.


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @emrebeyler!

So far this week you've reviewed 8 contributions. Keep up the good work!

Congratulations @adasq! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 5 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 10 SBD worth and should receive 96 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hey, @adasq!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Astounding GitHub expansion, Helps a considerable measure overseeing issues between various reports.

Congratulations @adasq! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the total payout received

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard - Witness Update
SteemFest³ - SteemitBoard support the Travel Reimbursement Fund.

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @adasq! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard - Witness Update

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @adasq! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - Steem Power, Followers and Following added

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @adasq! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of comments

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - Resteem and Resteemed added

Support SteemitBoard's project! Vote for its witness and get one more award!

·

Stop

Posted using Partiko iOS