Open source localStorage based mockup tool

[Melvin Carvalho]

A nice little open source app for designing web page mockups and saving them to an image.

Perhaps could be adapted to use write standards to save your mockups to a remote data store....

Demo:

http://fatiherikli.github.com/mockup-designer/

Source Code:

https://github.com/fatiherikli/mockup-designer/

PS I wonder is there a directory of apps that work with localStorage, or maybe an idea to start a wiki page?

[☮ elf Pavlik ☮]

Excerpts from Melvin Carvalho's message of 2012-11-20 13:53:02 +0000:

great find!
so now we can't simply sync local storage to our remote storage? :(...

[Melvin Carvalho]

localStorage is just a set of key value pairs, per origin

general perspective, so you need

1. Step one -- find a location to put it

Somewhere to put it.  Generally this is some place you can PUT.  You may want to put all of our local storage for that app in one place, or you may want to do it like the browser does it, and have one URL for each origin.  So you need to decide a location, or let the software help you.

2. Serialize the data

You'll need to iterate though some or all of the keys in local storage.  The thing is local storage is a shared space used by apps, bookmarklets, etc.  So in most cases you want all fields, but you can imagine some cases that you dont.  Linked data is what I like to use most here, because of the network effect, but there's many options.  I think as long as you know how to parse it you are OK.

3. A transport layer

One to save, one to load.  This is normally just XHR over CORS with the correct content type.

That's the minimal requirements.

Other Considerations:

4. Auth

Many ways to do this, you may not need to, or use OAuth as per remotestorage.js

5. Discovery

Again many methods.  This is where the software can help you.

6. Data freedom

e.g. As set out in http://userdatamanifesto.org/ (notice all unhosted apps must follow this).  The main thing I can see here is that the server must be FLOSS.

So I think a heavyweight solution could be remotestorage.js tho you could imagine a simple bookmarklet to be a lite solution ...
 

--

[Nick Jennings]

On Tue, Nov 20, 2012 at 8:16 PM, ☮ elf Pavlik ☮ <perpetua...@wwelves.org> wrote:

Excerpts from Melvin Carvalho's message of 2012-11-20 13:53:02 +0000:

> PS I wonder is there a directory of apps that work with localStorage, or
> maybe an idea to start a wiki page?
>

great find!
so now we can't simply sync local storage to our remote storage? :(...

If I understand correctly, we never could just take whatever was already in localStorage and sync it. You would need to use the API no matter what if you want to sync your data. So whether we use IndexedDB or localStorage (which is still a fallback, I believe) doesn't matter so much to existing apps, because they'd need to rewrite their storage methods to use our library.

Or am I misunderstanding?

[shybyte]

I really like the idea to just sync the localStorage in order to unhost existing localStorage apps!

And I wonder why it should be difficult using remoteStorage.js ?

Just imagine if we would only need to add something like

<script src="http://remotestorage.io/localStorage-remoteStorage-sync.js"></script>

<script>

addRemoteStorageForThisApp('appname');

</script>

to an app and the app will get automatically the remoteStorage widget and the localstorage is sync automatically to the 'appname' directory in the users remoteStorage when the user is connected.

Clearly an app that gets unhosted in this way will not work as smooth as it could be. For example it might be necessary for the sync lib to reload the whole page in order to get the data reloaded in the app.

But it is better than waiting forever until an app gets unhosted. 

Using this library it would be easy to write e.g. a browser extension which adds remoteStorage to selected web apps without the need for the developer to change anything in their code.

I will propose such a extension in https://github.com/RemoteStorage/remotestorage.io/issues

Cheers, Marco

[Melvin Carvalho]

On 22 November 2012 07:20, shybyte <shy...@gmail.com> wrote:

I really like the idea to just sync the localStorage in order to unhost existing localStorage apps!

And I wonder why it should be difficult using remoteStorage.js ?

Just imagine if we would only need to add something like

<script src="http://remotestorage.io/localStorage-remoteStorage-sync.js"></script>

<script>

addRemoteStorageForThisApp('appname');

</script>

I would suggest perhaps an easier way.

Instead of having to add 'appname' to every app (how do you choose an appname anyway?)

Just use the 'origin' ... this is what you might think of as the domain.  e.g. (http://fatiherikli.github.com/) in this case.  That's exactly how localStorage works.

So you could have, for example, a /localStorage/ directory with many different domains in there .. or better yet let that be a parameter, so that you could store stuff, say, on your own device, or dropbox or wherever ...

If I get a day or so free, I can do a bookmarklet proof of concept.
 

to an app and the app will get automatically the remoteStorage widget and the localstorage is sync automatically to the 'appname' directory in the users remoteStorage when the user is connected.

Clearly an app that gets unhosted in this way will not work as smooth as it could be. For example it might be necessary for the sync lib to reload the whole page in order to get the data reloaded in the app.

But it is better than waiting forever until an app gets unhosted. 

Using this library it would be easy to write e.g. a browser extension which adds remoteStorage to selected web apps without the need for the developer to change anything in their code.

I will propose such a extension in https://github.com/RemoteStorage/remotestorage.io/issues

Cheers, Marco

On Tuesday, November 20, 2012 8:17:05 PM UTC+1, Pavlik elf wrote:

Excerpts from Melvin Carvalho's message of 2012-11-20 13:53:02 +0000:
> A nice little open source app for designing web page mockups and saving
> them to an image.
>
> Perhaps could be adapted to use write standards to save your mockups to a
> remote data store....
>
> Demo:
>
> http://fatiherikli.github.com/mockup-designer/
>
> Source Code:
>
> https://github.com/fatiherikli/mockup-designer/
>
> PS I wonder is there a directory of apps that work with localStorage, or
> maybe an idea to start a wiki page?
>
great find!
so now we can't simply sync local storage to our remote storage? :(...

--