CONTEST: design loyce.club home page

[bitmover]

Sorry it took me a bit, but I found a few bugs:
topicID: 10 gives https://loyce.club/archive/topics/10/10.html instead of https://loyce.club/archive/topics/0/10.html

fixed!  I forgot to add the rule for low values.

msgID: 200 gives https://loyce.club/archive/oldposts/0/0xx.html#msg200 instead of https://loyce.club/archive/oldposts/0/2xx.html#msg200]

Looking at this rule, shouldn't it be 0xx?

Replace the last 2 digits of the msgID by xx, and add .html (if there are 5 or less digits, use 0xx): 282xx.html

I got confused now. Is the rule "(if there are 5 or less digits, use 0xx)"  2 digits or less?



Edit: posting in the wrong topic by mistake  

[1715378394]

1715378394

[1715378394]

1715378394

[LoyceV]

fixed!  I forgot to add the rule for low values.

Fix confirmed, thanks!

msgID: 200 gives https://loyce.club/archive/oldposts/0/0xx.html#msg200 instead of https://loyce.club/archive/oldposts/0/2xx.html#msg200]

Looking at this rule, shouldn't it be 0xx?

Replace the last 2 digits of the msgID by xx, and add .html (if there are 2 or less digits, use 0xx): 282xx.html

I got confused now. Is the rule "(if there are 5 or less digits, use 0xx)"  2 digits or less?

You're right, I made another mistake in my description. It once again shows how much your search tool for this is needed!

I can fix this on my own:

Code:

	if (msg.length >= 3)

I also added a </div> to get rid of the red on </body> in Firefox.

Testing link: https://loyce.club/archive/members/

[bitmover]

You're right, I made another mistake in my description. It once again shows how much your search tool for this is needed!
I can fix this on my own:

Code:

	if (msg.length >= 3)

I also added a </div> to get rid of the red on </body> in Firefox.

Testing link: https://loyce.club/archive/members/

Very nice to see it working! And I saw that you already made the 404 page!

I see you prefer red colors. I changed button colors to red.

You can see the result here:
https://bitcoindata.science/LoyceV/searchtool.html

I also changed the font tag to style css, as font tag is obsolete.

[bitmover]

LoyceV,

I know you already received many fancy designs from different people and you didn't use.

I made a very simple design, based on your own website. I focused in readability and low file size. Only 22kb.

Please take a look
https://bitcoindata.science/LoyceV/loyce.club.html

[LoyceV]

I also changed the font tag to style css, as font tag is obsolete.

Nothing on the internet will ever be obsolete

I know you already received many fancy designs from different people and you didn't use.

I just checked what's left earlier, and some of the designs are no longer online. That leaves this:

https://github.com/blankcodes/loycev.club

And this:

Here some idea what it might look like https://landofcrypto.com/Loyce.Club/ also check "TEST table" menu or: https://landofcrypto.com/Loyce.Club/page1.html

I like both a bit, but not the animations. It gave me more of an idea what I want: a menu (CSS?) on top would fit nicely in all (few million) pages I have, so I can add it above for instance https://loyce.club/trust/2020-10-03_Sat_05.09h/1554927.html too. I think that would largely improve usability.
I have to go soon, so I'll continue later.

[tranthidung]

Interesting. So would you mind giving me some tutorials from which I can start with

• language/ software to scrape data and to keep it realtime update
• How to build up a simple website

I am not an IT coder so I am sorry if my questions look like from a noob.  I love stats. Thanks for your help in advance

[LoyceV]

Here some idea what it might look like https://landofcrypto.com/Loyce.Club/ also check "TEST table" menu or: https://landofcrypto.com/Loyce.Club/page1.html
you will need to change the structure of your results pages then you can have well-sorted data table.
I uploaded this to my hosting and everyone can check it. If you want to use them, I will send you all the files. I didn't link everything, but it's not a big deal to do if you want to use it.
Also, I can comment code, if necessary for easier handling.

Bumping this topic with questions:
I see it uses this:

Code:

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&subset=latin">

And it uses a whole list of stylesheets:

Code:

<link rel="stylesheet" href="assets/tether/tether.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/dataTables/data-tables.bootstrap4.min.css">
  <link rel="stylesheet" href="assets/animatecss/animate.min.css">
  <link rel="stylesheet" href="assets/dropdown/css/style.css">
  <link rel="stylesheet" href="assets/theme/css/style.css">
  <link rel="stylesheet" href="assets/mobirise3-blocks-plugin/css/style.css">
  <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

I don't want any Google (tracking) on any page, and I prefer to have as light a page as possible. Ideally, I want to copy this above all HTML pages I have, which means copying it millions of times.
I don't think I should use tables, it will probably make loading such a page a lot slower than it is already.

Made a simple responsive layout for the website. Thanks to bootstrap 4, fontAwesome, jquery. Made a very simple logo btw

Here's how it looks


Sauce:
https://github.com/blankcodes/loycev.club

I think this is the best looking one so far But: it also uses Google:

Code:

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

I see BPIP uses several external scripts too:

Code:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/css/bootstrap-select.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/js/bootstrap-select.min.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-155135847-1"></script>

I'm not familiar with this, is this the standard accepted thing nowdadays? Do users not care about external tracking? Or am I just too concerned?

I like the top-menu and the simple design to add some more pages. It'll take me a while to figure out all details how everything works to adjust things.
I'd like to add a submenu under the top-menu though, like examplens made here. under "MERIT", but it might make it a lot larger and more complicated to make changes (to so many pages) later.
How would I start editing this? Just manual with an editor, or is there a better GUI method to do so? Again: total n00b here when it comes to designing things.

I made a very simple design, based on your own website. I focused in readability and low file size. Only 22kb.

Please take a look
https://bitcoindata.science/LoyceV/loyce.club.html

I like the simplicity, but I'm really looking for something I can add to all my pages. So a top-menu to add everywhere.
Tables can for sure improve Trust list pages, but that'll also complicate a lot of the things where I use the same HTML. So maybe I'll add this much later, but it's too much work to do that now too.

I see you prefer red colors. I changed button colors to red.

You can see the result here:
https://bitcoindata.science/LoyceV/searchtool.html

I'll change colors when the rest of loyce.club has some design.

language/ software to scrape data and to keep it realtime update

Anything you want should work. Sorry for giving a generic answer, but what works for me probably won't work for you. One thing though, if you start the right way, you'll save a lot of time later. I clearly didn't think it through doing this without database.

How to build up a simple website

Didn't this topic make it very obvious I know nothing about designing a website? Putting it online is as simple as getting hosting and uploading it. Other than that, this isn't the right topic to get into details.

[examplens]

I don't want any Google (tracking) on any page, and I prefer to have as light a page as possible. Ideally, I want to copy this above all HTML pages I have, which means copying it millions of times.
I don't think I should use tables, it will probably make loading such a

You need not to worry about these Google links. there is no tracking there. It is just a link to specific fonts, just in case if the client has no this font installed in his device. So, when someone visits your page, these lines of code picking proper font from external server for proper display of content.
.CSS files usually have little of an impact on page speed, as long as we do not use pictures like part of design.

Give me some time, probably tonight I will make something new here. Just to finish some offline things.
I will exclude additional scripts as much as possible, even if they do not slow down page loading.
You need to tell us which colours you prefer there.
I can comment each block separately, then it would be easier for you to add/remove some code on different pages.
My first design is more suggestion, like block with donations or the block with ad space.

[bitmover]

I have been reading about web development since the beginning of the pandemia, so I will give my opinion based in my very little experience and knowledge.

Since I started, i tried to follow this open-web philosophy (privacy, openness, no tracking etc).

I don't want any Google (tracking) on any page, and I prefer to have as light a page as possible.

You need not to worry about these Google links. there is no tracking there. It is just a link to specific fonts, just in case if the client has no this font installed in his device. So, when someone visits your page, these lines of code picking proper font from external server for proper display of content.

You are sending request to their servers, they will save at least your IP request there.
There is no need to do that. You can just download the font and use it in your own server.
Check it out here
https://google-webfonts-helper.herokuapp.com/fonts

Ideally, I want to copy this above all HTML pages I have, which means copying it millions of times.

The problem with that approach is that Ctrl C CtrlV one million times is not effective. Additionally, you will have to update your navigation bar one day. Will you Ctrl C and V again?

I made a small .html file for the navigation bar in my website, and I just load it with JS in my every page. Then i can just update my nav.html file . It is still problematic to ctrl c ctrl v the code in those pages.. I don't know what is the best way to deal with this in this case.

And it uses a whole list of stylesheets:

Code:

<link rel="stylesheet" href="assets/tether/tether.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/dataTables/data-tables.bootstrap4.min.css">
  <link rel="stylesheet" href="assets/animatecss/animate.min.css">
  <link rel="stylesheet" href="assets/dropdown/css/style.css">
  <link rel="stylesheet" href="assets/theme/css/style.css">
  <link rel="stylesheet" href="assets/mobirise3-blocks-plugin/css/style.css">
  <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

...
I see BPIP uses several external scripts too:

Code:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/css/bootstrap-select.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/js/bootstrap-select.min.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-155135847-1"></script>

I'm not familiar with this, is this the standard accepted thing nowdadays? Do users not care about external tracking? Or am I just too concerned?

It is bad for privacy and for page loading times. But it is good to keep your libraries updated. Personally, I download everything and I run it in my own server. I don't care about updates.

I'd like to add a submenu under the top-menu though, like examplens made here. under "MERIT", but it might make it a lot larger and more complicated to make changes (to so many pages) later.
How would I start editing this? Just manual with an editor, or is there a better GUI method to do so? Again: total n00b here when it comes to designing things.

This is called a dropdown.

Bootstrap is a very nice design language, which you will probably like.

You can just copy this code here and start using and editing it:
https://getbootstrap.com/docs/4.5/components/dropdowns/#single-button

You just have to load the dependencies libraries (jquery, bootstrap css and bootstrapbundle.js, then download them to your /css or /js directories).

See a working example, which you can edit. Examplens just used a different css style:
https://jsfiddle.net/jaqkznyo/1/

You just need this code:

Code:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Merit
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Sent Merit</a>
    <a class="dropdown-item" href="#">Received Merit</a>
    <a class="dropdown-item" href="#">More Merit</a>
        <a class="dropdown-item" href="#">deMerit</a>
            <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Merit History</a>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous">

[examplens]

You are sending request to their servers, they will save at least your IP request there.
There is no need to do that. You can just download the font and use it in your own server.

No offence, but to me, this sounds a little paranoid, doesn’t it? I mean, we talking here about font style. I am not sure is it possible to be 100% safe over the internet if you use all of his resources.
It can easily change an IP address, restarting router. Maybe I am naive, but I really don't see a serious problem here.

..
You just need this code:

Code:

<div class="dropdown">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous">

Now you here linking to bootstrapcdn.com jquery.com and getbootstrap.com. here is also a problem, because this way they can find out your IP address and whatever they were doing with this information. Especially when it comes to dynamic address, by the way, who knows who had that address before us and where he was.

[cabalism13]

@Loyce, can anyone else join your contest, I mean if they're notbhere on the forum? I would like to share this thread to my classmate if possible, and let him test his knowledge (we're still students) 

[bitmover]

You are sending request to their servers, they will save at least your IP request there.
There is no need to do that. You can just download the font and use it in your own server.

No offence, but to me, this sounds a little paranoid, doesn’t it? I mean, we talking here about font style. I am not sure is it possible to be 100% safe over the internet if you use all of his resources.
It can easily change an IP address, restarting router. Maybe I am naive, but I really don't see a serious problem here.

But in this case there is no reason to get the fonts from their servers, and it is like 1kb file, why don't you host it?
It may be paranoid, but it is more a matter of philosophy about the web imo.

..
You just need this code:

Code:

<div class="dropdown">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous">

Now you here linking to bootstrapcdn.com jquery.com and getbootstrap.com. here is also a problem

But this is just to make the fiddle work, as he asked for a testing environment.

How would I start editing this? Just manual with an editor, or is there a better GUI method to do so? Again: total n00b here when it comes to designing things.

Than I said that he should download the files and run in his server, but he could test in that environment.

You just have to load the dependencies libraries (jquery, bootstrap css and bootstrapbundle.js, then download them to your /css or /js directories).

See a working example, which you can edit.
-snip-

[TwitchySeal]

I really think you should leave the basic design (or lack of) as is. I like it.

[bitmover]

I really think you should leave the basic design (or lack of) as is. I like it.

I like it too.
Take a look at this 
http://bettermotherfuckingwebsite.com/

[LoyceV]

This was quite easy to do, I can help you with similar demands if you need.

I found a bug If I search for topicID 178336 on https://loyce.club/archive/topics/, it gives https://loyce.club/archive/topics/178/178336.html instead of https://loyce.club/archive/topics/17/178336.html. It works fine for longer topicIDs.

[bitmover]

I found a bug If I search for topicID 178336 on https://loyce.club/archive/topics/, it gives https://loyce.club/archive/topics/178/178336.html instead of https://loyce.club/archive/topics/17/178336.html. It works fine for longer topicIDs.

The rule is a bit different than I thought. I wasn't able to find it now in this topic, can you help me?

It would also be nice to have a tiny bit of PHP (or whatever) that allows for an input field, and converts a number into an URL.
Examples

• input msgID 54720568 > link to http://loyce.club/archive/posts/5472/54720568.html
• input topicID 5210425 > link to http://loyce.club/archive/topics/521/5210425.html
• input userID 465017 > link to http://loyce.club/archive/members/46/465017.html
• and older posts:
  input oldmsgID 112 > link to http://loyce.club/archive/oldposts/0/1xx.html#msg112

I made a rule that if the length is <= than 4, the folder would be 0. And if the length is > 4 the folder is the first 3 digits.

As 178336 has 6 digits, the script is redirecting it to a 3 digits folder.

When should the folder have only the first 2 digits?

[LoyceV]

if the length is > 4 the folder is the first 3 digits.

I checked what I wrote:

How to use it

• Find the msgID, userID or topicID you need. Let's use msgID 51902990.
• Remove the last 4 digits from the msgID to get the directory name (if there are 4 or less digits, use 0): 5190.
• Put everything together behind the (above) URL and add ".html": https://loyce.club/archive/posts/5190/51902990.html.

So for topicID 178336, remove the last 4 digits to get the directory name. That gives directory 17. Add a slash, the topicID and .html to get https://loyce.club/archive/topics/17/178336.html.

So you don't need to take the first 3 digits, you need to remove the last 4 digits. The logic behind this is that I create directories with at most 10,000 files.
I checked for a few userIDs too, those seem to work fine.

[bitmover]

So you don't need to take the first 3 digits, you need to remove the last 4 digits. The logic behind this is that I create directories with at most 10,000 files.
I checked for a few userIDs too, those seem to work fine.

You did almost everything for me
Made a small code change, now it is working.

delete this

Code:

var topfolder = top.slice(0, 3);

and add this:

Code:

var topfolder = top.substring(0, top.length-4);

Or just download it here:
https://bitcoindata.science/LoyceV/LOYCE.html

I made about 10 tests, looks fine.


EDit:
Found a possible bug:
topic 3064698.
https://loyce.club/archive/topics/306/3064698.html
Not archieved or something wrong?

[LoyceV]

delete this

Code:

var topfolder = top.slice(0, 3);

and add this:

Code:

var topfolder = top.substring(0, top.length-4);

Thanks, it works again! I had to edit 4 files (the 404's have a slightly different description).

Found a possible bug:
topic 3064698.
https://loyce.club/archive/topics/306/3064698.html
Not archieved or something wrong?

I didn't archive posts yet when that topic was created. I scraped the posts later, the first post for instance is archived as oldposts #31577013. I have those posts only sorted by msgID, not by topicID. I'm currenly processing all data, but at the rate it's going, it's going to take a few weeks to complete. It's not very efficient, and therefore takes a lot of processing power.
I only now realize I should also process these posts per userID, and I should have done that from the start, so I'll have to restart this. It'll takes a bit longer again
Stuff like this would be so much easier from a database, but luckily I'll only have to do this once (more).

[suchmoon]

~

I think integer math works better for folder splits:

Code:

var thread_link = "http://loyce.club/archive/topics/" + (thread_id / 10000 >> 0) + "/" + thread_id + ".html";

No need to check for length.