Git based code libraries / snippets

[mattbrailsford]

Something I've seen in other software, but I think could be really cool for the Web IDE is to create a git repo of code libraries that can be accessed from the web IDE.

I think in the old UI you had a way to load some code snippets from the web, but I think this was just a repo on your server. If we can use a git repo instead (which all the API's are there, I've done it in a node-webkit project) it'll make it much easier to distribute updates and let other people contribute "Want a code snippet / library in the IDE, just send a pull request".

This could even be what is used when you do require(''), where the name could relate to a branch / folder in the repo.

[mattbrailsford]

You could even make the repo location configurable so that people can use their own (private) repositories if they like.

[mattbrailsford]

If each library had a minifest file, we could also do things like link to a youtube videos, so in the "library" popup, you could have a link "see it in action".

[gfwilliams]

Yes... Well, there's code in the unused folder that'll handle GitHub repos (the code snippets were pulled out of EspruinoDocs and Espruino repositories). I was considering creating a new $.get-style function that knew about GitHub - it'd make things like the module loader way more flexible too.

However I always found this to be a bit of a mess - it's really hard for me to keep track of all the code snippets and to keep them up to date, and it's hard for the user to find them... I don't know what you think but I'd much prefer that on the Espruino site, each code block had a 'Load into Web IDE' link under it.

That way, users get all the images, links, and tables of pin connections - not to mention the ability to actually Google what they want.

It should be very possible to do (I think you can have the Web IDE register a URL handler) but I haven't got around to it yet.

[mattbrailsford]

Well, that would be the idea of using github really as it would make it easier for others to help keep it up to date, and then all the code libraries are also in one place.

With the load into web IDE, do you mean to physically show the web page within the IDE as a reference? If so, I'd need to think about how this could work.

What could be better is if you did use a git repo, have both the website and the IDE use the repo as it's data source, then both can reference the same information, and the "Load into Web IDE" could open the IDE, with the "library" window open at that reference where they can click a button to copy it to the editor window (think app store "click to launch in app store", then "click to install").

[gfwilliams]

Well, that would be the idea of using github really as it would make it easier for others to help keep it up to date

That already happens - the website is created from GitHub. For instance on www.espruino.com/PCD8544 down the bottom there's a link to the page on GitHub, where you can send pull requests if you find a problem.

With the load into web IDE, do you mean to physically show the web page within the IDE as a reference?

No, you'd just view the page from a normal Chrome web browser, and at the bottom of every code block there'd be a little Espruino icon that let you send it to the Web IDE. The nice thing about it would be that espruino:// links from any website could load code into the Code Editor pane of the Web IDE.

I strongly think that having a separate 'library' window in the Web IDE is a really bad idea. There's already a library of code online, with search and automatic hyperlinking between related pages (the 'Projects using this library' headings), and a normal Web Browser is great at viewing it (and also lets you bookmark/tweet/share/etc).

If people are having problems with the site, I need to fix it - not make another one that's only viewable from one application :)

[gfwilliams]

So use this feature:

https://github.com/GoogleChrome/chrome-app-samples/tree/master/url-handler

But instead of loading a webview, just grab the data out of the URL and put it in the code editor.

[mattbrailsford]

Ahh, that does sound better. Like the idea of letting others create links aswell ("Click here to install on your Espruino").

I guess adding a link in the help dropdown should do the trick to launch the library section of the site in the browser (to be honest, I'd be tempted to suggest doing the same for the tutorials).

[gfwilliams]

It's just so much easier to build and maintain as well. It should only be 20-odd lines of code.

Yes... A link to the docs would be handy. You mean a link to the tutorials on the site too?

There are two things that I thought could be quick and helpful though:

• An implementation of www.espruino.com/Search that would open a browser at the specified page. I wonder how many people would use it though.
• Something that pulled tooltips off of http://www.espruino.com/Reference (it's all automatically generated from Espruino's code so I could push out JSON pretty easily).

[mattbrailsford]

Yea, so rather than inline tutorials in the IDE, just launch the tutorials section on the site so they can just follow along (saves maintaining the tutorials code and keeps the espruino site as the main resource of information).

RE Search, nice idea, but like you say, not sure how many people would use
RE tooltips, why not use that as the source for the terminal auto complete? How do you envisage the tooltips working? poping up in the terminal / code editor when you roll over a command it knows? or do you mean an autocomplete feature?

[gfwilliams]

Hmm... well that was easy. I'll commit something in a few minutes

[gfwilliams]

Yes, I was considering just popping up a tooltip when you roll over something it knows - but yes, it could be used for autocomplete. There's a rough and ready JS lexer (used for the tutorial) so it could be knocked up pretty quickly.

Only thing with autocomplete in the terminal is that Espruino itself could autocomplete var foo = {abc:1}; foo.a [tab] but the Web IDE couldn't.

[mattbrailsford]

ahhh, yea, good point. But I guess a minimal "known" auto complete, is better than none. We are never going to please everyone, but if we can make basic stuff nicer, it's still a win.

Looking forward to see the linking update :)

[gfwilliams]

Tada!

Git pull and reload the app, then Click Me!

[gfwilliams]

All I need to do now is create a nice handler page on the Espruino site that says 'you don't have the Web IDE - get it here'.

[mattbrailsford]

Hmm, doesn't seem to be launching for me

[mattbrailsford]

Ahhh, had to restart chrome aswell.

[mattbrailsford]

Doesn't quite work if you have the IDE closed to start with (I guess it's loading from local storage and instantly overwriting it), and it might be worth having a prompt to check they want to overwrite what is there (incase they click a link by accident, and it would be good to have them confirm the code first incase someone is trying to be malicious) .

But otherwise, sweeeeet :)

[mattbrailsford]

PS Your click me link above is missing a semi-colon ;)

[gfwilliams]

PS Your click me link above is missing a semi-colon ;)

dammit.

Aha. thanks - yes, that overwriting is probably the issue.

And all I have to put on the espruino site is:

  $("code").each(function() {
    $(this).append("<a href=\"http://www.espruino.com/webide?code="+encodeURIComponent($(this).html())+"\" class=\"codelink\"/>");
  });

Well, that was worth a few minutes then :)

[mattbrailsford]

Pure awesome!

[mattbrailsford]

Also, make sure the IDE switches to code view (just incase they are in blockly mode)

[mattbrailsford]

Quick test link Click Me Gist!

[gfwilliams]

Closing this as it seems to work well - and we have #60 for improvements