Episode 2: An unhosted editor

[mic...@michielbdejong.com]

Episode 2 of Unhosted Adventures:

"Welcome to the second episode of Unhosted Adventures! If you log out of all websites, and
close all desktop applications, putting your browser fullscreen, you will not be able to
do many things. In order to get some work done, you will most likely need at least a text
editor. So that is the first thing we will build. We will use CodeMirror as the basis.
This is a client-side text editor component, developed by Marijn Haverbeke, which can
easily be embedded in web apps, whether hosted or unhosted. But since it requires no
hosted code, it is especially useful for use in unhosted web apps. The following code
allows you to edit javascript, html and markdown right inside your browser: [...]"

Read the rest here: https://unhosted.org/adventures/2/An-unhosted-editor.html

Enjoy! And merry Christmas... :)


Cheers,
Michiel

[Benoit Chesneau]

mmm imo the chapters sshould be made more visible on the website. Also i'm a little shared on the new organization of the website. It ddin't look like a project site anymore. Why note keep the old homepage while teasing the adventures' posts on it?

- benoît

--

[Michiel B. de Jong]

Hi Benoit!

> mmm imo the chapters sshould be made more visible on the website.

Done. I moved the 'Episodes' div up so that it's now above the 'Follow' div,
and also switched back to quoting the full titles there instead of 'Intro' and 'Editor'

> Also i'm
> a little shared on the new organization of the website. It ddin't look like
> a project site anymore. Why note keep the old homepage while teasing the
> adventures' posts on it?

That was exactly the goal with switching to a blog-style layout. :) I don't *want* it
to look like a project site anymore. I want it to look like a blog now. A resource for
tips, tricks, snippets, and links to other things.

Remotestorage.io will be the new "project"-style page. We designed it at the last remotestorage
hackathon two months ago, but none of us have had much time for web design, so what you see on
remotestorage.io is still only a holding page. Next week, when the entire remotestorage "project
team", if you may call it that, will be at Hacker Beach, on of the first things we will do is
finally publish the project website. And then unhosted.org will be a "tips and tricks" resource,
pointing to remotestorage.io, but also to the Unhost Unconference, to tosdr.org, and to other
related things and spin-offs.

Put another way, what exactly is the "old content" that you would like to see brought back?

1) people
The description of the people behind "the unhosted movement" is more or less split between seeing
the list of donators (which is mainly a historic record of who supported us in the critical phase),
and the remotestorage.io team, and the Unhost Unconference group photo.

You will notice a big overlap between people listed in the remotestorage.io team and the Unhost
Unconference and also Hacker Beach. :)

2) the concept
We used to have the list of advantages, architecture diagrams, slides and videos of talks where we
were promising to try to save the web in two years, etcetera. We also had a manifesto which went
through several versions. That was the basic "What is this Unhosted thing?" material. Now, that
information is included into the blog posts (mainly the first one). It is a luxury that we can now
say "this is how we use unhosted web apps" in the blog posts, rather than saying "this is our plan
of how we /will/ use unhosted web apps" in a manifesto or project plan.

3) code, demos, providers, apps
All the links to how you can set up your remotestorage server, where to find a provider, which apps
support remotestorage, etcetera, is now on the new remotestorage.io site (which, again, isn't live
yet, but will go live by the end of next week or so).

4) ...
Anything else?

Does that explain it a little bit? Hope this makes sense.


Ciao,
Michiel

[Thad Guidry]

on blog... "Freedom of _the_Press"... rather than "Freedom of Press".  

--

--
-Thad
http://www.freebase.com/view/en/thad_guidry

[Benoit Chesneau]

Michiel,

That's OK for me. I was just afraid that new people coming on unhosted.org don't see all the benefits of the concept/project. 

Maybe something more articulated, with a visible about  and the journal by itself could work. I need to think a little about that.

- benoît

--
 
 
 

[Thad Guidry]

In my professional opinion,

If the "idea" of the Semantic Web can have it's own Wikipedia page to encapsulate the philosophy... then why couldn't the unhosted movement also have one ?

Then Michiel's Blog could be THE blog for the "ideas" of the unhosted web philosophy.

It's not a company that's being represented but an organization that embraces the "ideas" and philosophy of the unhosted web. (and that org is just an org primarily for tax and funding purposes).

I think the project's "idea" and philosophy could be equally explained for new people, like the Semantic Web is on Wikipedia, where a lot of explaining happens everyday for us all.  http://en.wikipedia.org/wiki/Semantic_Web

Someone just needs to create and maintain the Wikipedia page about the "idea" of the unhosted web and point to Michiel's Blog that expresses more "ideas".

--
-Thad
http://www.freebase.com/view/en/thad_guidry

[Nick Jennings]

I do kind of miss the landing page for unhosted.org, it had a very, to
the point, overview of what the concept of unhosted is and what key
projects are facilitating the movement.

By landing on a blog, to a new person it can be very disorienting,
they've got to go searching around to try to find out whats going on,
what's this all about, and even then they are piecing together
information just to get an overview. it's kind of throwing people in
the deep end IMO.

I do like the blog, I just assumed it was going to be "the unhosted
blog" (unhosted.org/blog) not the actual unhosted.org page in it's
entirety.

That's my 1CZK :)
-Nick

> --
>
>
>

[Jonas S Karlsson (☯大鱼)]

Hi All!

I initially liked the unhosted idea and was for a moment very excited.

But then when I wanted to see the concrete solutions and potential eco-system built and the vision implemented with applications sharing data hosted on my terms, In essence one could say a core idea is that my data isn't hold hostage and being "owned" by the one who wrote the application. A separation between service and data.

I found no applications, not even one example application, no concete way which it would work, or how to set it up to host a simple webpage "unhosted" style, or even how to write an app, or to run a remotestorage instance myself.

Previously I've made my own bootstrapping of an online cloud programming language very much starting out in a similar way creating first an edit.cgi that edits a file on the host from the cloud using to first implement a wiki then an embryo to lambda based online programming language. Sadly enough it got lost when I travelled in china for an extended period and my credit card info expired and   the hosting provider just deleted all the work! As it was cloudbased I didn't back it up. Time to re-create it. But if it was "unhosted" how would this make it more probable that I wouldn't loose my data?

Here are my suggestions of what I would be glad to see, don't see it as much as criticism as in things one could do to make this more real...

1) make unhosted.org a webpage with resources, point to actual applications, and let people get started.

2) as proposed above, yet have a /blog page that's fine, but also syndicate other people's entries. At the moment it seems the "unhosted.org" movement got shanghaied by a person who made it "his blog" ;-) No offence intended.

2b) the blog is fine and nice read, but it more seems to be one mans journey to bootstrap his own unhosted adventure than a 2 year project of a community.

3) I see you're maybe using nodejs, show how to install your own remoteStorage server and how to run it, that's the purpose of the whole idea, right? This requires the remotestorage server code to be shared.

4) it's becoming clearer to me now that it seems the application is being seen as different from data, I'm wondering why the applications aren't stored as my data in the remoteStorage? If I get to a new computer, how do I bootstrap my universe to interact with my data and my apps? Is the idea to only run them from the browser url/cache, or local filesystem, or your own running webserver? (or I guess  github which btw,then is hosted...,ahum)

5) have some actual apps that shows the concepts, and running example codes instead of code snippets that does nothing.

6) some kind of "app directory" is needed.

7) in the remoteStorage it talks about that your data is copied, replicated etc, but I don't see this really being part of the protocol?

Happy new year!

/Jonas

--

--
.sigh

[Sebastian Kippe]

Hi,

1) make unhosted.org a webpage with resources, point to actual applications, and let people get started.

2) as proposed above, yet have a /blog page that's fine, but also syndicate other people's entries. At the moment it seems the "unhosted.org" movement got shanghaied by a person who made it "his blog" ;-) No offence intended.

2b) the blog is fine and nice read, but it more seems to be one mans journey to bootstrap his own unhosted adventure than a 2 year project of a community.

We've recently separated "Unhosted", the movement, and "remoteStorage", a specific project for one of the main building blocks of the movement. The website doesn't reflect that yet, and I just started working on an extensive new remoteStorage website, which we'll hopefully finish and launch sometime during Hacker Beach, where most of the core team will meet in a few days for some weeks.

The handling of the unhosted.org site is a bit unfortunate at the moment. I completely agree that it should clearly communicate what's research and what's the big thing Michiel and others worked so hard on making a finished protocol and almost-launch-ready library until today. (Sorry for being so mean/direct at lunch about that, Michiel ;) )

3) I see you're maybe using nodejs, show how to install your own remoteStorage server and how to run it, that's the purpose of the whole idea, right? This requires the remotestorage server code to be shared.

You can find a node.js example server at https://github.com/jcoglan/restore – All the various solutions will be presented on the new RS website.

4) it's becoming clearer to me now that it seems the application is being seen as different from data, I'm wondering why the applications aren't stored as my data in the remoteStorage? If I get to a new computer, how do I bootstrap my universe to interact with my data and my apps? Is the idea to only run them from the browser url/cache, or local filesystem, or your own running webserver? (or I guess  github which btw,then is hosted...,ahum)

The apps can live anywhere you want. Either hosted somewhere, purchased from a store like Firefox Marketplace, run on localhost, etc. We'll have a standardized app list, stored in your RS, soon, and I already started creating a ncie dashboard app, which you can then use to access your apps, wherever they may live.

5) have some actual apps that shows the concepts, and running example codes instead of code snippets that does nothing.

Yes, unfortunately there aren't very good examples right now. I have a few apps of my own, that I will share as soon as the latest rs.js lib is fixed. I ran into too many issues, so I'm waiting for Niklas to arrive at Hacker Beach first now.

6) some kind of "app directory" is needed.

We (5apps.com) are working on app stores for client-side web apps, and we'll have an extra filter for remoteStorage-compatible apps, as well as first-class support for open-source apps in general. We're confident that'll solve this need initially, until more developers jump on the bandwagon. Production-ready apps should also be submitted to the Chrome web store and/or Firefox marketplace, and basically any other web app store there is or will be.

7) in the remoteStorage it talks about that your data is copied, replicated etc, but I don't see this really being part of the protocol?

Not sure I understand the question, but our 5apps remoteStorage is replicated across a cluster of nodes, so that we can't lose your data. Other than that anyone can implement remoteStorage apps with access to all or some of a user's data, that do backups, migration, transfers, imports, etc. No need on the protocol or server-side to implement these features.

I hope these comments can help a little bit with understanding the situation. We definitely have to get our act together in regards to developer marketing and general communication. But I'm confident the situation will improve incredibly during the course of Hacker Beach, so that we can start marketing remoteStorage to developers, providers and users in a more effective and sustainable fashion from February on.

Happy new year!

And happy new year to all of you!

[Stephen L]

Hey I have pretty much close to zero programming or html experience, but I've decided to start following through your blogposts as a tutorial to teach myself. I had a few questions on entry 2 I was hoping to get some help with.

1. In Firefox I can open the console and enter the second code snippet to get example.com to show a blank page, but I wasn't able to figure out how to use the console to enter html. I tried searching about this on the web, but it still wasn't very clear to me. Perhaps I am missing something obvious here? If there is an obvious tutorial on this on
   
2. With the data url you provided, what is the expected behavior of the browser? I got a static window with three buttons (js, html, markdown), but no ability to enter text. Per your description I am thinking I should be seeing something like a text editor below the buttons?

Thanks,

Stephen

[Michiel B. de Jong]

On 2013-04-17 08:49, Stephen L wrote:
> Hey I have pretty much close to zero programming or html experience,
> but I've decided to start following through your blogposts as a
> tutorial to teach myself. I had a few questions on entry 2 I was
> hoping to get some help with.

hi Steven, welcome to the list!


> * In Firefox I can open the console and enter the second code

> snippet
> to get example.com to show a blank page, but I wasn't able to figure
> out how to use the console to enter html. I tried searching about
> this
> on the web, but it still wasn't very clear to me. Perhaps I am
> missing
> something obvious here? If there is an obvious tutorial on this on

yes, just like you can do:

document.body.innerHTML = ''

you can do:

document.body.innerHTML = '<h1>Hello World</h1>'

there are many tutorials for learning html and javascript, you could
for instance try out codecademy.com (or maybe other people have other
suggestions and favorites?)

> * With the data url you provided, what is the expected behavior of

> the browser? I got a static window with three buttons (js, html,
> markdown), but no ability to enter text. Per your description I am
> thinking I should be seeing something like a text editor below the
> buttons?

right, that's broken! it worked at the time, but probably something
changed in the files it is including. i'll fix that, thanks for noting!

the 'unhosted editor' link a bit further down should work, though.


cheers,
Michiel

[Michiel B. de Jong]

On 2013-04-17 10:06, Michiel B. de Jong wrote:
> right, that's broken! it worked at the time, but probably something
> changed in the files it is including. i'll fix that, thanks for
> noting!

ok, turns out in Firefox you may have to click the small "shield" icon
to unblock the mixed content. Obviously data URLs that include scripts
are not your safest type of URL. :) But if you unblock it, then it
should work.

I added a note about this in the article.

[Stephen L]

Michiel, thanks for the response - your instructions about how to use the console totally make sense. I would also note that I tried to use the other link you provided to the more final editor, but that one didn't work for me either. I don't see the shield, but since I am running a variety of browser security enhancement add-ons (noscript, ghostery, etc), I am wondering if those are affecting the code performance. Once I get some time later today, I'll try running firefox without those to see if I get a more expected result.

Thanks,
Stephen

[Jan-Christoph Borchardt]

Hey Stephen, most likely NoScript blocks the Javascript. Try it again with the extension disabled, and if that doesn’t work, try disabling all extensions.

--
 
---
You received this message because you are subscribed to the Google Groups "Unhosted Web Apps" group.
To unsubscribe from this group and stop receiving emails from it, send an email to unhosted+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Stephen Laux]

Thanks Jan - I was able to successfully use the editor link in Chromium (where I don't have any add ons), so it's definitely something with one of the addons I have in Firefox. If I do more testing, I'll report back.

Thanks

Stephen

[Michiel B. de Jong]

On 2013-04-18 20:23, Stephen Laux wrote:
> Thanks Jan - I was able to successfully use the editor link in

> Chromium (where I dont have any add ons), so its definitely something
> with one of the addons I have in Firefox. If I do more testing, Ill
> report back.
>
> Thanks

>
> Stephen
>
> On Thu, Apr 18, 2013 at 1:26 AM, Jan-Christoph Borchardt
> <h...@jancborchardt.net [4]> wrote:
>
>> Hey Stephen, most likely NoScript blocks the Javascript. Try it
>> again with the extension disabled, and if that doesn’t work, try
>> disabling all extensions.

actually, it's the mixed content blocker which was switched on by
default in FF23

https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/

the article doesn't mention how it treats data URIs, but apparently a
data URI connecting to a http resource is considered 'mixed'. the same
happens when you open an app on https, but have your data on a (local)
http URL.


Cheers!
Michiel

[Felix Rabe]

Hi Michiel

I enjoyed the editor bootstrapping a lot.

Concerning the "Save" button, you might want to check out the new <a download="...'> HTML5 attribute. It pretty much gives you that one-click-save experience (if you use a link instead of the button):

http://davidwalsh.name/download-attribute

- Felix

[Michiel de Jong]

right, thanks! i vaguely remember at the time of writing, the download attribute was still Chrome-specific, but i see it's now also in FF and Opera.
http://caniuse.com/#feat=download
i'll update it! thanks for the feedback.

later this week i'll start writing new Unhosted Adventures episodes again by the way, after the summer break in which we worked on lots of other stuff. so stay tuned! :)


Cheers,
Michiel