SAFE Website Tutorial (my first SAFE website experience)

Development
,
1

Hello,

Well, that was interesting and heavily addictive, what do you think: safe://website.tutorial2/ EDIT: ran out of store and modify operations so this is the new website.

I’ve messed around a little with websites before but never really cared to commit to anything serious. I really like the idea of the SAFE network and am very interested in generating content on the network. Unfortunately, I assume that it will be some time before the real deal. In the meantime, I’ll be honing my skills. I’ll list some issues that I’m having and comments would be appreciated, I’ve been at this for hours now and it’s time for bed!

Problem 1

I noticed that every time I load my page, that my regular internet browser opens up the following page: https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i

Is this because I used fonts that the SAFE browser doesn’t handle well?

Problem 2

Is there a way to include a contact page where the user would fill out a form and I would receive it under my SAFE Email ID?

Problem 3 (more like a critique)

I wanted to include the ability to leave comments on the page. There is a disconnect between what is located here: https://tutorials.safedev.org/website-with-comments/ versus what is located in the README file once the GitHub repository is cloned.

I’ve decided to ignore the website instructions since they point to a folder which doesn’t even exist within the repository.

That brings me to the README file within the safe_examples repository. I followed it and managed to get comments working!

Problem 4
What happens when my account status reaches 1000/1000? :disappointed_relieved:

Any and all comments are appreciated,
Cheers.

15 Likes
2

That’s a great site, looks really professional. :+1: Thanks for the tip about https://mobirise.com. I hadn’t come across that before, looks ideal.

Just one small thing. This (happily) isn’t correct:

NO VPN - pretty sure your IP needs to remain static, you may verify this yourself but better to be safe than sorry.

If your IP changes just reset it on invite.maidsafe.net.

1 Like
3

I’m not sure why this page opens up in your regular browser, but it’s probably related to the fact that the SAFE Browser automatically blocks all clearnet links (http:// and https://) by default.

Sorry for the confusion here, tutorials.safedev.org is an outdated website (it was used for Alpha 1). I just configured a redirect from tutorials.safedev.org to https://forum.safedev.org/c/tutorials, so anyone trying to access the SAFE Dev Tutorials website will be redirected to the Tutorials category of the SAFE Dev Forum.

8 Likes
4

This is probably because you are fetching from some clearnet CDN. Check all lines in your code for references to clearnet (fetching js, css, fonts etc.).

6 Likes
5

Great website!

I’ve been looking for a good free app to build a simple site :smile:

Some pics I took - safe://photos.bittog9/

3 Likes
6

EDIT: Another concern first… if I wanted to replace a file using the Web Hosting Manager, I must delete that file first which means that the website is momentarily down if it’s an important file! It would be nice to have functionality that overwrites the file I want to replace. Not sure who to include in this “wish list”.

You and @frabrunelle were correct! I found the culprit regarding the fonts.

I was using the Mobirise to create my website and the following line was the culprit:

@import url(https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i);

and it was located in:

~./assets/mibirise/css/mbr-additional.css

So thank you for your help! I’m really only replying to keep a record of this process for myself and anyone else who chooses to maybe follow my guide. I’ve had a request to add the procedure for adding comments at the bottom of the page so I’ll add that to the site in a few days. I’ve burned too many hours of this stuff already! Pretty addictive.

@JPL Great! I’ll remove the VPN part. Also, do you know if the account status resets every few months? Years? Ever? I wish I would have noticed that before and used that “mock routing” technique earlier. I am assuming that if I do request another invite code that I’ll have to create a new account? So I’ll have two accounts to manage?

Cheers.

1 Like
7

Nice! I like the pictures! I see that you followed my guide :wink: glad it helped.

I’ve noticed that your website, just sort of like mine used to do, opens two https websites upon visit:

https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i

and

https://www.youtube.com/iframe_api

See my previous reply on how to get rid of the first one, you’ll have to find the @import line in one of the *.css files. I assume that the youtube link is something similar (I didn’t have that issue).

I would download Notepad++ and then go through all the folders and open all the *.css files if you are like me and don’t know much about web design. Notepad++ then allows you to search ALL open documents. That is how I found the culprit @import line. I assume yours will be:

@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i);

Cheers!

1 Like
8

When I find the line do I just delete it?

I am also very close to 1000 puts :frowning: anything I can do to get more?

9

When I find the line do I just delete it?

That’s right. I haven’t ran into the YouTube issue yet so you’re on your own for that one :wink:

To avoid wasting your “puts”, get the mock SAFE Browser and only upload to the Network when your site is perfected. I haven’t set this up yet, I just had the same issue with the puts and @JPL gave me the mock browser information. Private message them and maybe they can do something for you when you run out of puts. I’m sure the devs would prefer to see more and more people creating websites than not!

Anyway, good job with the site! Looks great.

1 Like
10

Since the SAFE browser doesn’t allow you to open clearnet sites on it but open them on your default clearnet browser, you will need to make sure you host the fonts as part of your safesite and reference them from there. This must be because you are using a framework which makes use of google fonts and they are pulled from google server. I have to admit that I spent some time to solve this with my own safesites but it’s not really complicated, but it all depends on the framework you are using and how you are packaging it. So research on how to host the fonts yourself as if you were gonna host them in a clearnet webserver as part of your website.

EDIT: doing a very quick google search I found this: Own fonts in Mobirise Builder - Mobirise Forums, which might be some help for this since I get you are using mobirise, I haven’t read it though, so I’m not fully sure.

5 Likes
11

When I go to my site: safe://photos.bittog9/

I get this error in by default browser:

if (!window[‘YT’]) {var YT = {loading: 0,loaded: 0};}if (!window[‘YTConfig’]) {var YTConfig = {‘host’: ‘http://www.youtube.com’};}if (!YT.loading) {YT.loading = 1;(function(){var l = ;YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {li;} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement(‘script’);a.type = ‘text/javascript’;a.id = ‘www-widgetapi-script’;a.src = ‘https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWFWphv/www-widgetapi.js’;a.async = true;var b = document.getElementsByTagName(‘script’)[0];b.parentNode.insertBefore(a, b);})();}

I no nothing about code. How can I fix this?

Thanks :slight_smile:

12

I just manage to decode my first website for safenet.

safe://rebel4ever.r43/

I’ve come to several conclusions:

  • When using web hosting manager and doing several successive uploads and deleting of file it freezes and entire application (web hosting manager) stay blank in this freeze mode - using Windows 10 x64.
  • Javascript doesn’t work with separate files in folder so I had to implement it to index.html
  • Of course external css, js, fonts and other stuff it is not working as http protocol is not supported here
1 Like
13

You mean you had to put your JavaScript into index.html? You can have separate .js files

1 Like
14

Yeah, I will give it a try. Thanks.

15

Whatever I try, I get a
Error: -103 Core error: Routing client error → Requested data not found
The SAFE Browser (0.7.0) is running, I’m authenticated … What’s the first thing to check ?

Thanks

> T 17-11-11 15:49:55.212913 [safe_core::client mod.rs:145] Creating unregistered client.
> T 17-11-11 15:49:55.215689 [safe_core::client mod.rs:1393] Waiting to get connected to the Network...
> T 17-11-11 15:49:55.216032 [safe_core::client mod.rs:1411] Connected to the Network.
> T 17-11-11 15:49:55.224614 [safe_core::client mod.rs:706] GetMDataValue for ec9a7e..
> T 17-11-11 15:49:55.224886 [safe_core::client::mock::vault vault.rs:50] Mock vault: using file store
> T 17-11-11 15:49:55.229864 [safe_core::client::routing_event_loop routing_event_loop.rs:30] Received Routing Event: Event::Response { response: GetMDataValue { res: Err(NoSuchData), msg_id: MessageId(4b3500..) }, src: NaeManager(name: ec9a7e..), dst: Client { client_name: f5ec8a.., proxy_node_name: 2f67a9.. } }
> D 17-11-11 15:49:55.230515 [safe_app::ffi::mutable_data mod.rs:210] **ERRNO: -103** CoreError(No such data - CoreError::RoutingClientError -&gt; NoSuchData)
> T 17-11-11 15:50:13.984371 [safe_core::client mod.rs:468] Attempting to log into an acc using client keys.
> T 17-11-11 15:50:13.986385 [safe_core::client mod.rs:1393] Waiting to get connected to the Network...
> T 17-11-11 15:50:13.986681 [safe_core::client mod.rs:1411] Connected to the Network.
> T 17-11-11 15:50:18.990700 [safe_core::client mod.rs:706] GetMDataValue for 7cc4e2..
> T 17-11-11 15:50:18.992633 [safe_core::client::routing_event_loop routing_event_loop.rs:30] Received Routing Event: Event::Response { response: GetMDataValue { res: Ok(Value { content: [21, 15 [....]
> T 17-11-11 15:50:18.995252 [safe_core::client mod.rs:706] GetMDataValue for 1e134c..
> T 17-11-11 15:50:18.995533 [safe_core::client::routing_event_loop routing_event_loop.rs:30] Received Routing Event: Event::Response { response: GetMDataValue { res: Err(NoSuchEntry), msg_id: MessageId(0f1fea..) }, src: NaeManager(name: 1e134c..), dst: Client { client_name: 1705a4.., proxy_node_name: 1f991a.. } }
> D 17-11-11 15:50:18.995770 [safe_app::ffi::mutable_data mod.rs:210] **ERRNO: -106** CoreError(No such entry - CoreError::RoutingClientError -&gt; NoSuchEntry)
> T 17-11-11 15:50:21.717313 [safe_core::client mod.rs:706] GetMDataValue for ec9a7e..
> T 17-11-11 15:50:21.717994 [safe_core::client::routing_event_loop routing_event_loop.rs:30] Received Routing Event: Event::Response { response: GetMDataValue { res: Err(NoSuchData), msg_id: MessageId(464650..) }, src: NaeManager(name: ec9a7e..), dst: Client { client_name: f5ec8a.., proxy_node_name: 2f67a9.. } }
> D 17-11-11 15:50:21.718512 [safe_app::ffi::mutable_data mod.rs:210] **ERRNO: -103** CoreError(No such data - CoreError::RoutingClientError -&gt; NoSuchData)
> T 17-11-11 15:50:52.769964 [safe_core::client mod.rs:706] GetMDataValue for 8281ad..
> T 17-11-11 15:50:52.770216 [safe_core::client::routing_event_loop routing_event_loop.rs:30] Received Routing Event: Event::Response { response: GetMDataValue { res: Err(NoSuchData), msg_id: MessageId(355ed4..) }, src: NaeManager(name: 8281ad..), dst: Client { client_name: f5ec8a.., proxy_node_name: 2f67a9.. } }
> D 17-11-11 15:50:52.770516 [safe_app::ffi::mutable_data mod.rs:210] **ERRNO: -103** CoreError(No such data - CoreError::RoutingClientError -&gt; NoSuchData)
16

Maybe you need to set your IP address again - visit invite.maidsafe.net and make sure it is set correctly.

This needs to be done any time your IP changes - so whenever there’s a problem, worth checking this first! :slight_smile:

1 Like
17

Rats… I’ve ran out of allowable writes (1000) and so the website looks rough now. Anyway, for those who want to add comments to your page:

EDIT: recreated the website under a new account, see safe://website.tutorial2/addcomments.html for details.

2 Likes
18

I think something may have got lost there - probably something in angle brackets? Discourse removes them for some reason.

1 Like
19

Yeah, I noticed that too! It’s because these forums use html and so if I have < head > and < /head > but no spaced between the < and > and text, then one can’t see it.

Anyway, I updated my original post to include the new location of the website and updated the previous post to include the link to the page which describes how to include user comments :wink:

Cheers

PS. I’m super excited for this project officially launch. I’ve seen the roadmap at maidsafe.net but have not seen any date estimates. Does anyone have an idea when we’ll get to Alpha 4 and possibly beyond?

20

If you want to include code quote it with back ticks (reverse single quotes) if it is included in the line, like this <tag> or with three back ticks before and after a multi - line section as in :slight_smile:

<tag>
<tag>

Tada!

4 Likes