[ANNOUNCEMENT] wenyan Snippet Site

[LingDong-]

As mentioned in #459, I'm building a website where people can create, edit, browse, share, fork, run, embed, like, dislike, etc., user-created snippets in wenyan language.

https://wenyan-snippets.glitch.me/

Currently I have a proof-of-concept that is running on free server from gltich.com. It uses sqlite to store user snippets. It is rough and susceptible to hacks, but is usable. If people are liking it we can build a bigger better, more secure version.

Please check it out and give feedback! If you have experience building sites like this, your help will be very much appreciated!

Creating Snippets

• Click + button
• There is a token field on the top bar, this is like a secret password. Leave it as public to allow anyone to edit the code. Press the shuffle icon to generate a random token. You'll need to remember the token so you can edit the snippet later.

Editing/Forking Snippets

• On upper right corner of each snippet, there is an edit button (the pencil icon) and a fork button (no it's not USB icon).
• If the lower right corner says "PUBLIC" instead of showing a lock, you can edit the snippet without a token. But be nice and don't vandalize.
• Most of the time you would want to use the Fork button to duplicate the snippet and work on your own copy.

Compiling/Running

• Anywhere you see a right-pointing triangle, you can click it to run the code. A sub-window should pop up displaying the results (or errors).
• Use the console to see intermediate results such as the compiled javascript code.

Submit/Publishing

• When you're happy with your snippet, you can submit it for everybody to see. Click the submit button upper right corner of the editor (it looks like an arrow pointing into a ceiling)
• Again, be nice and don't submit trash :P

Upvoting

• You can click +1 button on the lower left corner of a snippet to upvote it (or -1 to downvote it)
• Currently the site doesn't prevent you from refreshing the page and vote again, so be nice and don't do that.
• Snippets will be sorted by popularity

Searching

• Type any phrase to search title/author/code
• Use by:AuthorNameHere to search code by a particular author
• Use #id to find snippet by its unique ID. (ID is shown on upper left corner of every snippet)

Embedding

• Click the link button on upper right corner of each snippet to get a link for embedding the code
• It works with the new Runtime.
• You can GET a snippet with this url: https://wenyan-snippets.glitch.me/api?id=666.

Implementation Details

• Code editor is now powered by industry standard CodeMirror with robust highligting and editing support. Yay!
• SQLite is used to store user programs. But I'm considering (ab)using Github Gists to manage the database instead, so I don't need to worry about many nuances.

You can view the source code of the site with this URL:

https://glitch.com/edit/#!/wenyan-snippets

Caution

The site is still in its early stage, I'm sure there's a million ways to break it. Before you do that, please report it intead. Also, don't rely on the storage just yet, I'll try my best not to lose the programs, but can't guarentee that someday I won't accidentally nuke the SQL, so save your work elsewhere too :)

Again, feedback and help are most welcome! Thanks!

[antfu]

You are on fire! Very cool!

[antfu]

For the storage, I think we can consider Firebase

Pros:

• Free for a huge amount of quotas (1GB). (it's totally enough for this use case I suppose)
• Client-side only, no server needed.
• More secure and stable
• Easy to manipulate data
• Update realtime
• Anonymous sign-in / OAuth sign in and permission control

Cons:

• When the quota is exceeded....
• Need to have some knowledge about it to integrate
• It's not open source

I have some experience with Firebase. If you find it useful, I can help to integrate it.

---

Can gltich linked to Github repo? If so, it allows people to better improve it by making PRs.

[LingDong-]

• I'm happy to try out Firebase, people recommended it to me couple times, it sounds great but I haven't got the chance to use it. If you could help it would be very much appreciated!

• Glitch can be hooked to Github repo, but I've only used it to merge from Glitch->Github. I don't know what happens if we do it other way around. Will be simple enough to find out.

• Since you mentioned using Firebase does not require backend, does that mean we can simply host it on Github pages? That would save a lot of trouble :) I think 1GB is quite enough for text files

Thanks!

[antfu]

Since you mentioned using Firebase does not require backend, does that mean we can simply host it on Github pages?

Yes. Definitely. And for the static site hosting, I would recommend Netlify. It's basic works the same as Github pages but with CI/CD toolings. It can build and publish sites along with commits. You don't need to build them manually anymore.

Glitch can be hooked to Github repo, but I've only used it to merge from Glitch->Github. I don't know what happens if we do it other way around. Will be simple enough to find out.

If we do use Netlify or Github Pages, then the problem won't bother anymore 😄

I'm happy to try out Firebase, people recommended it to me couple times, it sounds great but I haven't got the chance to use it.

Maybe I could start a repo for this and made a POC. If it works perfect, then we can merge into this repo. What do you think?

[LingDong-]

Sounds good, Firebase+Netlify it is!

Many I could start a repo for this and made a POC. If it works perfect, then we can merge into this repo.

👍, Thanks so much!

[lymslive]

I want to say MogoDB , as document based database, seems also suitable for saving code snippet. And the document is just appeared as JSON, so familiar...

[antfu]

@LingDong- Ah, I just realize that Firebase is not accessible in China. Maybe we should reconsider that. (although I think I made some good progress) 😢

[LingDong-]

This is very unfortunate. I was going to suggest Heroku as an alternative, but apparently that is blocked too according to http://www.chinafirewalltest.com/.

Apparently we might get around with proxy or doing some trick with DNS record. If we want to do that, I already own a couple of domains that we can use, (including wy-lang.org btw, which I'm thinking about migrating to when we have more pages).

Otherwise I think DigitalOcean or AWS might be alternatives, though I'm not sure if they're as convenient or if we have to manage our own database.

[antfu]

The firebase proxy looks promising! Will be back in China next week, and I gonna try it out if I got some time.

Otherwise I think DigitalOcean or AWS might be alternatives, though I'm not sure if they're as convenient or if we have to manage our own database.

For me, I would not recommend this approach. Managing a VPS brings too much complexity for this use case and a paid service won't be a good choice as an open-source project in the long term.

Hope the hacks work.

[cuixiping]

I prefer to use github to make a snippet site.

[ghost]

I can’t see the snippets (but not the searching bar) when I view on my iPad.

[antfu]

I can’t see the snippets (but not the searching bar) when I view on my iPad.

Just test out, glitch.me seems to be blocked for some reason. Can you try it out thought VPN?

[LingDong-]

Just for reference, greatfire.org and viewdns.info seem to think glitch.me is accessible in China. Not sure how accurate they are though.

[antfu]

@LingDong- Yes, it's accessible. But somehow /all return 200 with empty data in my region. With VPN everything works fine. 🤯

[LingDong-]

In order to track down the problem, I added a couple of lines give api to download the sqlite database directly:

http://wenyan-snippets.glitch.me/db

Wonder if this works?

Code:

app.get("/db", (request, response) => {
  response.sendFile(`${__dirname}/data/wy-snippets.db`)
})

[antfu]

Not sure if it's due to my poor network. It takes forever to download. But with VPN it takes about 45s.

[LingDong-]

Hmm.. then perhaps /all is timing out, because of the amount of data that needs to be transferred (at slow speed). Perhaps we first ask for 0-5, after we get it, ask for 5-10, then 10-15, etc. When there are more snippets this is probably a better way in general too.

[antfu]

Indeed. And maybe paginations?

[LingDong-]

Or perhaps when you scroll down, more loads? So internally there is some kind of pagination, but for users it feels like a continuous scroll?

Also, I'm wondering, if /all is timing out, shouldn't we get a different response header/status code or whatever? Getting empty data is indeed strange.

[antfu]

Or perhaps when you scroll down, more loads? So internally there is some kind of pagination, but for users it feels like a continuous scroll?

Sounds good to me

shouldn't we get a different response header/status code or whatever? Getting empty data is indeed strange.

Yes that's the wired part. And technically requesting thought VPN will be a little bit slower than bare request, but not in this case. So I assumed there was something blocked. Wonder if this is only me. Would like to see more feedbacks from other users.

[ghost]

I mean, I can’t see any snippets.------------------ 原始邮件 ------------------ 发件人: "Anthony Fu"<[email protected]> 发送时间: 2020年2月8日(星期六) 晚上11:06 收件人: "wenyan-lang/wenyan"<[email protected]>; 抄送: "XingZiLong"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [wenyan-lang/wenyan] [ANNOUNCEMENT] wenyan Snippet Site (#472) I can’t see the snippets (but not the searching bar) when I view on my iPad. Just test out, glitch.me seems to be blocked for some reason. Can you try it out thought VPN? &mdash; You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[GLanguage]

@xingzilong Just refresh the page (for several times). It works for me.