SnapForks Official (Part 1)

Advanced Topics Mods & Extensions
21

Building a new website that was inspired by the snapwiki's website

View the beta website for snapforks: https://snapforks-website.glitch.me/
That was a lot of css i had to recreate, Phew! Im proud of it :partying_face:.

22

Snap! is licensed under the terms of GNU General Public License v3.0.

Minor quibble: It's the GNU Affero General Public License, which is the special version for web-based software services.

23

I need some help with the responsive navbar for mobile; when I resize the window to the required amount to trigger the menu button, the menu button shows, I click it nothing happens..

View the code on glitch
Live Preview

as shown here:

24

Wait she? I'm a he

25

The way the pages is made is weird, in that index.html calls a function template that makes the page but the template code is

image
image1547×318 19.2 KB

Not sure how to explain it in words... Anyway, I'm guessing that it would probably be because myFunction is out of the scope.

26


The new website has been uploaded to https://snapforks.github.io/

27

I know, it is a buggy method and annoying, I will soon find a new way

28

Oh,I learned template strings after I stopped telling you to make templates.
Use backticks `.
It can be multiline but the nl chars don't count.
"+st+"
can be replaced by ${st}.

29

An example in code please?

30 
	user:null,
	_userData:null,
	xhr:function(z){
		let x=new XMLHttpRequest();
		x.open("GET",z,false);
		x.send();
		return x.responseText;
	},
	get:function(v){
		return this.xhr(`https://JS-Cloud-Vars.18001767679.repl.co/get/qwarr/${v}/`);
	},
	set:function(v,c){
		return this.xhr(`https://JS-Cloud-Vars.18001767679.repl.co/set/qwarr/${v}/${c}/`);
	},
	getUserData:function(){
		return this.get("user_"+(this.user||alert("not logged in")));
	},
	syncUserData:function(){
		return this.set("user_"+(this.user||alert("not logged in")),JSON.stringify(this.userData));
	},
	cInj:function(code){
		code(this,window);
	}
};```
This code snippet was found in one of my cloud games.
http://js-cloud-vars.18001767679.repl.co/ also.
31

:partying_face:Howz that! We have a discussion tab for snapforks now! :tada:https://github.com/SnapForks/SnapForks/discussions

Screen Shot 2020-12-02 at 8.16.02 pm
Screen Shot 2020-12-02 at 8.16.02 pm1349×599 60.7 KB

32

Discussion Tab is now full operational

33

I'm not trying to be negative, but isn't this just iframing a project's embed link?

And as for the offline version of this, you have a few options:

  1. Package your app with a browser
    This is what Electron and NW.js do, and what they basically do is package your app with a browser such as Chromium. The problem with this is that the whole browser comes with the app (which is usually just html/css/js) and they use the browser to render it. This is probably the simplest way to do it, but it feels kind of like faking it. It's like putting a wild animal in a simulated environment in the zoo, and claiming that it was a wild animal living in the city.

  2. Rewriting Snap!
    This optoin involves porting Snap! to a native GUI/graphics framework such as Qt (or PyQt or NodeQt if you're not familiar with C++) and rewriting Snap! from scratch. I do not recommend you do this as you would have to rewrite all of Snap! and possible some Browser APIs , which is a project more suited for the Snap! team and collaborators and at the end of the day the app would be more of a native port of Snap! than SnapForks.

Note that the app will never truly be offline since you would still need to make HTTP requests to Snap!'s servers. The only way that it would be truly offline is if you downloaded all projects from Snap! and synchronized frequently.

If you want to go the Electron way, I can help you with that:

  1. Download the Node.js installer from https://nodejs.org/en/download/ and run it.
  2. Once you've finished installing, open up a terminal and type node -v and npm -v to make sure node and npm are working.
  3. Next, run this script to setup a project:
cd ~
mkdir snapforks-offline
cd snapforks-offline
npm init -y
npm install --save-dev electron # this just means that packages that might depend on the current package won't have to install electron since they don't need it
touch index.js

Now, go through the Electron docs to learn how to get a webpage into the app.
When you want to run the app, use:

npx electron . # or you can add electron . to a script in package.json
34

And re-rewrite it every time we release a new version.

35

@danielthebanana4

36

Maybe......

Maybe we can translate/compile it not rewrite it.
function foo(bar,baz){ this.garply=bar+baz; }ES5
will be
class foo{ constructor(bar,baz){ this.garply=bar+baz; } }ES6
will be
class foo: def __init__(this,bar,baz): this.garply=bar+baz Python
oh well,but my compiler is just using python to open a local webpage on the browser (really cheating)

37

Yes it is, I get heaps of people saying that. I was going to originally make SnapForks convert snap projects into python and run it. I could get help to still to it but I will have to like rewrite the whole snap block library 2 times in different languages.

I would go with number 1.

Yes, thanks I don't even know how to program electron.

38

@danielthebanana4

Could you build the app for OS X? Only Mac users can build for Mac because of some restrictions that Apple has put in place.

(Also if the above link doesn't work click on es/tag/1.0.0 instead of Release v1.0.0.

39

I’ll help build the OS X app, I know the process of mac’s security. Note to lie but apple is very strict with apps these days.

Also do you want to move the repo the SnapForks org?

40

Sure.
Also windows defender is acting very strange saying that the installer is Trojan:Script/Wacatac.B!ml . I've run this through VirusTotal so it's probably safe