Conceptual Design - Solid better User Experience

Build a Solid App Ideas for Solid Apps
81

Ok so I’m calling this stuff solid-legos… declarative legos for Solid. In html because that’s the only declarative language I know (and I don’t really know html that well either). I know that’s presumptuous to call it that since it doesn’t exist yet but who knows maybe someday it will exist.

So here’s my example again. I added to the example that a channel can be created with a non existing resource by using keys like ‘turtle’ and giving the ttl text. Also added an acl tag to create or reuse acl’s.

This example will create a file on someOtherPod with my bowling scores, then display it in a graph along with other data from agoraPod and someOtherPod.

<solid-lego-web-id data=“https://sideshowtom.solid.community/profile/card#me” id=“myWebId”></solid-lego-web-id>

<solid-lego-pod root=“https://agora.solid.community” webId=“myWebId” id=“agoraPod”></solid-lego-pod>

<solid-lego-pod root=“https://someotherpod.solid.community” webId=“myWebId” id=“someOtherPod”></solid-lego-pod>

<solid-lego-acl agents=’[“HomersWebId”,“MoesWebid”,“BarneysWebId”]’ modes=’[“read”,“write”]’ id=“myBowlingLeagueGroupAcl”></solid-lego-acl>

<solid-lego-channel data=’[{pod:“someOtherPod”, resource: “/myBowlingLeagueContainer/myBowlingScores.ttl”, acl: “myBowlingLeagueGroupAcl”, turtle: “me scored 99”}]’ type=“rdf-resource” id=“createBowlingScoresChannel”></solid-lego-channel>

<solid-lego-channel data=’[{pod:“agoraPod”, resource: “/public/someFile.ttl”}, {pod:“someOtherPod”, resource: “/public/someOtherFile”},{pod:“someOtherPod”, resource:"/myBowlingLeagueContainer/myBowlingScores.ttl"}] type=“rdf-resource” id=“someFileChannel”></solid-lego-channel>

<solid-lego-graph-display data=“someFileChannel” type=“forceField” id=“forceFieldDisplay”></solid-lego-graph-display>

<solid-lego-resource-browser data=“someFileChannel” id=“fileBrowser”>
<solid-lego-form>
<textarea rows=“10” cols=“60” name=“data”>
Enter turtle here for rdf resources
</textarea>
<input type=“submit” value=“submit”/>
</solid-lego-form>
</solid-lego-resource-browser>

82

This just further specifies my crazy idea for ‘solid legos’. It doesn’t exist yet, but with web components in the latest javascript, and the updated Solid-File-Client, it should sometime be possible to create it. The idea is to make solid apps with html, declaratively and without much if any javascript.

See http://forum.solidproject.org/t/conceptual-design-solid-better-user-experience/422/81 for an example.

Some further notes/requirements:

Channel components:

The ‘data’ attribute of a channel takes an array. The array consists of objects. Each object represents a resource to create or copy to. The objects can have the following keys:

pod: the pod to create the resource on or copy the resource to

resource: the path where the resource will be created or copied

acl: the acl resource to be used to specify access to the resource

turtle: if the resource is rdf and it is being created, it can be initialized with a string

src: the resource can be copied from another channel. In this case a string which is either a channel id or a json object is given with the following: the id of the channel to copy from, optionally the id of the resource in that channel, and optionally a sparql query string given with the key name ‘query’. If no id of the resource in the channel is given then the first resource in the channel is used. The subtrees of resources that are containers will be copied as well. Resources that are containers are indicated with a trailing slash. If a query string is given, the result of the query is gathered from the source and put in the target.

Query Components:

A <solid-lego-query> component will take a sparql query in a string as the ‘query’ attribute, and a channel id as the ‘src’ attribute. The query will be applied to every resource in the channel and the result returned as a string which can be used in other html components. The exact mechanics of returning the result as a string is not yet clear to me as I don’t know html (or sparql) that well but I assume something like this is possible.

BTW, here is a picture of my breakfast:

IMG_20200107_042035976
IMG_20200107_0420359763120×4160 2.46 MB

1 Like
83

Hi @anon36056958,
Here is my basic setup to work with web-components on Solid https://github.com/scenaristeur/socialid-template

For example, I use it to start a new project of mailbox
https://scenaristeur.github.io/socialid/
Don’t be afraid of the design. It’s just for the functionality now.
You can add me to your friend if you want to test
https://spoggy.solid.community/profile/card#me

I build the two (template tuto & mailbox in one day, yesterday) but now it will be easier for me, writing less code & reusing this components.
By the way the example of how login-component send the webId to the messages-components is an example of how it can be made with really independent components. The components communicate with the multi-agents system concepts. Not only ‘two-ways data-binding’ (parent to child &child to parent) so it’s easier to move a component from one parent to another…
And not using the Polymer/redux or React way to store a centralized state of the app…
In login-component you use the agent.send method or agent.broadcast, and in the recipient you got an ‘on receive’ that switch on different ‘action’.

This way components are really indépendant & interchangeable : build your own login-component and just use the agent.send or duplicate the messages-component to build everything you want : a ‘browser’ , grapher, ttl editor, acleditor. Split them in components, so you could reuse them in other more complex components…
I’m now ready to build the app of your dream with a minimal of js.
So first. Can you summurise what you want in each of the component of your app?!

PS : you can not use just html without js. A is nothing without a onclick event :blush:
Bon appétit !

15786404825213570881569359504413|666x500

2 Likes
84

Hi @Smag0 ,
Thanks for your reply.
I’m trying to specify the components without coding them yet for two reasons.
One reason is that I don’t have as much time as I’d like to devote to this and I don’t want to get bogged down with actually making things work on top of what is still a shaky stack of new software. It’s not shaky because the developers, both client and server side, and the spec writers are not talented. It’s just that it’s a big ambitious project and will take some time.
The other reason is that I think doing it that way helps to find the boundaries of a small set of very general components. Ideally the set should be as small as possible but still simple and useful to make a lot of different apps. JavaScript should not be necessary so those who don’t like to code can make apps quickly and easily. This also means that the apps need to be made declaratively in an intuitive way, which is tricky but I think to a large if not complete extent is possible. Also the components should be specified in a way to allow apps to take advantage of the full power of html, which has had a lot of time to evolve. To find the right boundaries and the mix of functionality needed so that the set of components is as small and as simple to use as possible is not easy, but it’s worth doing, especially while the stack of software it will be built on becomes less shaky.
Right now I’m thinking about how to apply this to the shopping list app that kjetlk spoke of as an example. It’s not finished (being specified, much less coded). I’ve given a couple of examples before too. The main idea are these channels. All of this specifying still needs a lot of work. Then hopefully the coding of it and especially the use of it will be easier.

This is all of an interim nature, before apps can be made out of pure rdf, which will happen but those apps will depend on the ui ontology, which at this point is not nearly as evolved as or as capable as html.

I realize the ratio of my posting to my code production is too high. I will try to post less, but I’ll work on this when I have time.

85

What is 15786404825213570881569359504413|666x500 ? I cannot see it. Not sure if I want to…

86

It was a pic of my breakfast but disappear when I edit the post. But if you want a pic, here is a snapshot of a proto of a mailbox Socialid

Screenshot_20200110-210925_Chrome
Screenshot_20200110-210925_Chrome720×1280 302 KB

Add me ( https://spoggy.solid.community/profile/card#me)

to your friends & let’s use solid inbox

87

Sorry, but I guess I’m kind of skittish about using umoderated pods. I think that will be an issue for a lot of people, not just me. It’s one of the social aspects of Solid that I think about and sometimes trouble me. Some might say that that I worry too much for saying that, but if we don’t worry about these things, then who will be concerned?

1 Like
88

FYI: IBM are using Svelte to build a component framework:

2 Likes
89

What do you mean by

?
My english-french translator doesn’t give me something comprehensive to me.

90

No (supposedly) neutral person(s) who can step in if something inappropriate happens. This forum I think is moderated by Inrupt and I’m not sure about the gitter chat channels, maybe the w3c there.
Unmoderated pods are definitely needed for private groups, for families, for political organizers, for journalists, for all kinds of reasons. They’re not a bad thing. But public spaces are needed too.

91

Somebody is not happy about the shadow DOM which from this I understand is to do with Web Components:

I started a topic on the SAFE Dev forum:

92

I need to read up on this. My knowledge of this topic is limited to my experience a couple of years ago with the polymer polyfill and as I recall vaguely you had to run your code through a gizmo to generate a static web page so that it could work on github pages. But I assumed back then that the polyfill and extra gizmo would eventually not be necessary. Guess not yet (?), but I still have hope for web components :slight_smile: . Is this a show stopper for web components? Long term, I doubt it.

1 Like
93

It won’t be a show stopper, but I it may mean they compromise the web.

94

Why ‘compromise the web’? That would be a bad thing.

95

I’m referring to the Shadow DOM issue raised in my post about Web Components.

96

Yes, but could you say more about why it would compromise the web? Or link to more info on why would be great, for maybe the less technical (me, at this point :grin:) Thanks!

97

I’m referring to the comment made there. That it makes it impossible to save HTML from a page.

1 Like
98

Ok thank you. I guess this is why nobody seems to like them.

99

I am no export on Web components, but is this really true? Why not? If it’s about JS generated DOM, yes you cannot just save the html file (same as in any React app for example), but you still can copy the whole generated DOM from browser dev tools

100

I don’t know, I’m sharing the chatter I’m picking up but don’t understand the details at this point.