Phantom: a publishing tool enabling users of the SAFE Network to easily manage websites

Yes it’s a joy to watch. I always hoped @Shane would return because he brought so much in a short time. Great to have you back man.

18 Likes

File uploading

I’ve spent the last day working on making the uploading of files as easy as possible. At the moment, a lot of the tooling built for the SAFE network is “by developers, for developers” and I want to move away from that and build tools which every-day-normal-people will be able to use intuitively. Intuition is so important when you’re trying to convince people to make a huge change.

Here you can see the theme config page, with a file input for a logo in the header:

When you click on the Choose file button you see the standard Explorer window:

When you select a file it is instantly uploaded and an XorURL is displayed (worth mentioning the XorURL you see here was generated by my local mocking library and it as such won’t work if you put it in to a SAFE browser):

I need to complete the work of pulling the theme config in to the compiled websites, but that won’t take me very long now I’ve got this all working (It’s basically just spitting out a JSON string). We’re at a point now where the theme system is complete.

When you upload a file, the theme authors will have access to two values, the XorURL of the uploaded file and the inferred mime type:

screen4

As always with inferred mime types, the user lies, the computer lies, the implementation is incorrect and as such it’s not worth trusting except for deciding on how to display the content.

Left to do:

  • Pull the theme config in to the compiled websites this is now done
  • Get the image uploader working on posts and pages
  • Get arbitrary pages working
  • We’re still waiting for a response from Maidsafe on RFC0060

At that point the core of Phantom will be considered complete and I’ll push a 0.0.1 release while I begin public work on the plugins / modules code.

27 Likes

Fantastic work, Shane. I hope the devs can soon be able to incorporate RFC0060 so we can all enjoy working with (and hopefully extending) this tool.

12 Likes

Shouldn’t the title of this thread be for a tool to manage “safesites” instead of websites? Is there a better name for sites on SAFE?

2 Likes

Maybe, but I’m trying to keep the amount of jargon to a minimum. Ultimately, I want it to be as easy for a newcomer to understand as possible. The more domain specific terms we force in there, the harder it all is to grok.

8 Likes

Time for another update…

Pages and posts

I’ve finally bit the bullet and reworked the posts system to incorporate a concept of “Pages” (for anyone familiar with wordpress, it’s the same as how wordpress delineates “posts” and “pages”). This feature was a real pain, not only because it was basically redoing work I had already done in posts, but because by editing this core functionality I risked creating new bugs in a stable system. You can see here the “Pages” in action:

In the end, I decided to entirely rip out the posts code and begin from scratch with a concept of generic Documents, a post is a Document, and a page is a Document, but they have different rules governing how they work.

I ended up with a totally generic and re-usable system which only takes around 30 lines of boilerplate code to spin up a new document type. You can see here the code which runs the Pages page:

And the code which runs the Page edit page:

screen3

This is a really powerful system which I may consider exposing to theme authors in the future (so your theme could include a new Document type, for instance, an e-commerce plugin / theme which included a new Product document), so you can kind of see how the ridiculous amount of work it took to make all this functionality generic could pay off in the future as the greater ecosystem around Phantom expands.

Exposing theme config to the compiled websites

I’ve gone with the simplest method of exposing theme configuration to the frontend compiled websites: just spitting out a JSON object which theme authors can ingest.

Here you can see a partial output from a compiled website, with the vue / vue-router code, but if you look to the right of the script tag, you can see the theme configuration is exposed via a window.themeConfig object. There’s not much more to say about this except that the feature is now complete.

Image uploader

The only real task I have left is exposing the image uploader I created yesterday to the posts / pages so that users can upload and manage images directly within documents. I expect this will actually take me a couple of days, so I probably won’t have an update for you tomorrow.

Personal

I’ve been trying to make at least one commit per day since I started working on this project. I harbour a lot of internal guilt about how the SafeCMS project ended, and I’ve been using those negative feelings as fuel to keep this project burning. Sometimes it can be hard to find the motivation to get out of bed, sometimes I’ll procrastinate for hours before forcing myself to open my IDE. Strangely, I get a lot of joy from seeing a new box turn from grey to green everyday in Github:

I always appreciate the compliments I get in this thread, but I rarely hit like unless there’s something in the reply which I want to action later. I think that’s a systemic issue that a lot of developers have: we seem unable to experience praise. We know the truth: the projects we’re working on aren’t that difficult, it’s just throwing some code at the screen and seeing what works. For the most part, we are our own worse critics - that’s a real issue and one we’re going to need to collectively overcome. Anyway, I was just throwing some thoughts out there on a cold and wet Sunday.

33 Likes

You’re doing great work Shane but there’s no need to do anything because of what happened to you.

I’m sure you are not alone with struggles like these, and not just with other developers although I suspect there are reasons why certain of us like this kind of work.

I at least recognise and share those kinds of emotions and behaviours. The good part is that you are able to see this in yourself, and I have seen that you know the healthy response is self-care and kindness.

You feel guilt, but that guilt is not justified given what happened, and that has been reflected in the response from the community since you explained. Feelings don’t bother with facts though, so they are real and have to be accepted. We all need to learn to respond to them in healthy ways, me as much as anyone. I urge you to feel free to do what you enjoy because you enjoy it rather than for other reasons. Take care and do recognise the thanks are genuine. What you do is not easy, not just throwing code. It takes a lot of work and skill to get the ability you have. The folks here recognise that because not many can do what you do, and certainly not with the speed and quality of the work you produce.

Take care man!

17 Likes

You are not only a very talanted developer but a great person. Just take care of yourself. I wish I could give you a hug.

9 Likes

@happybeing puts it more eloquently than I could.
There is no need to feel ANY guilt.
What happened, happened, it was no fault of yours AT ALL. I am very sorry for your loss and its a tiny consolation that returning to the concept/project you started has been of value - FIRSTLY to yourself, then if the community get something out of it - and we most certainly do - then that’s a bonus - a pretty massive bonus.

I’d love to just be able to “throw code at the screen” as you do. I bet I’m not the only one. You have a massive talent, thank you for sharing it so selflessly and constructively with us.
I hope you can get to Glasgow soon or there is a MeetUp in Manchester area so we can say these things to your face and buy you a beer at least.

8 Likes

@shane throws code at the screen the way Picasso throws paint at a canvas. Really looking forward to seeing this masterpiece in action.

16 Likes

Pre Phantom Dev Update :stuck_out_tongue_winking_eye:

10 Likes

Firstly, thanks for the kind words over the last day. :slight_smile:

Image uploader

I’ve been doing some work on how image uploading works. Now, all document kinds (posts and pages, in this instance) have an Image Gallery button at the top right of the page:

Clicking on this button reveals a full-screen Image Gallery window:

I input some content, in this case a picture of my dog, Tifa, from my Phone, and I hit the Upload button:

screen3

Rather than have it edit the content of the document you’re editing directly, I decided to have each image simply spit out the markdown for the image (and the description you entered):

There’s a few reasons I went with this method, rather than writing code to directly edit the document:

  1. Editing input fields is hard. Really hard. It’s only of those “unsolved problems” of modern web development. Trying to figure out where the caret is, whether any content is currently selected, whether that content spans multiple lines, whether we need to reformat any Markdown after the edit, etc. It gets complicated really fast and I would spend a lot of time juggling bugs.
  2. This allows users to place the image anywhere they want, once, or multiple times.
  3. This allows users to edit the description if they want to while they’re placing it.

I took the lazy route out of this problem, and it’s the only part of the app where I’ve compromised on the user experience in any way, but it was for a good reason. :star2:

… Perhaps I should have gone with a landscape image instead of a portrait for my testing. :stuck_out_tongue:

Bonus picture of Tifa

I realise I can’t leave you all hanging for a picture of my pooch and then not include a proper photo, so here you go:

Left to do

  1. I need to churn out a bunch of simple themes for the blogs at launch
  2. I need to add media-query directives to the CSS to make Phantom responsive (I’ve been putting this off because I wanted to test against the network directly on my phone incase there are any edge cases I need to be aware of but I dropped it last week and it’s been away for replacement - I have it back now)
  3. RFC0060 has now been merged! As soon as that’s implemented I’ll be able to test everything I’ve built against the shared network’s code, rather than the mock libraries. (Technically I’ll have to change one line of code first to be in line with the new changes in the RFCs, but who’s counting?)

A huge thank you to @dirvine for pushing this internally, @joshuef and Ian Coleman for working through the kinks with me and @bochaco for highlighting some internal issues which would cause issues.

After those three tasks are completed, I’ll going to be in hiding for a few days while I have a serious think about how I want to integrate dynamic network features (like comments systems, ecommerce, etc) in to Phantom. I’m likely going to build on the theme code I’ve wrote to have a more generic modules feature which allows modules to control new document types (for instance, a public document type named products and a private document type named sales which maps to a private network map of sales), but I need to really spend some time experimenting before I can commit to anything concrete.

30 Likes

Superb work Shane. I took a little break from my current project (teach myself Vue by rewriting an existing e-commerce site) to have a play with the latest code.
It’s all looking positive and I can’t wait for RFC0060 to get merged.

Thanks again :slight_smile:

6 Likes

Just downloaded the new mobile browser v3.1. Sadly Phantom does not look too good in either landscape or portrait.
Not that I tink that trying to do this kind of work on a phone is a particularly good idea but others obviously do…

1 Like

Why use a phone for publishing websites when you can use a toaster!? Kids these days…

3 Likes

Yep, I covered that in point 2:

Need to add media-query directives to the CSS to make Phantom responsive (I’ve been putting this off because I wanted to test against the network directly on my phone incase there are any edge cases I need to be aware of but I dropped it last week and it’s been away for replacement - I have it back now)

There’s a 50% chance I’ll get to this tonight, but it’s likely to be committed tomorrow. :slight_smile:

8 Likes

oops sorry -

Don’t rush on my account…
Like I say, I think editing sites on a phone is a very niche activity…

1 Like

No rush at all. :slight_smile: Work which needs doing, needs doing.

The first commits have started to roll in adding responsive media queries to the app: https://github.com/SAFEPublishing/Phantom/commit/6b576c4034eaf25f09dc4281baaf748de4f010a7 Expect the rest through tomorrow. :slight_smile:

Although it’s worth mentioning the app won’t actually work until the changes from RFC0060 are implemented and hit the browser, so there will be some extra waiting. :stuck_out_tongue:

12 Likes

Hey Shane. As an investor and not so much a tech guy like yourself. I just have to say I’m so thrilled you’re back working on this project. You’re going to help draw a lot more attention once baby and adult Fleming pop! Keep up the amazing work!

13 Likes