Help me with my new website!

[FlatAssembler]

I've tried VIM... didn't like it *shrug*.

I also don't like it too much. Though it does have some advantages. Unlike XED or NetBeans, it actually highlights PHP mixed with HTML correctly. EMACS seems easier to use than VIM at first, but after a while you see it isn't. And EMACS is no more useful than Notepad when editing CSS and it always incorrectly highlights JavaScript as if it were Java. One quirky problem with VIM is that, while it highlights short pieces of JavaScript and CSS embedded in HTML correctly, it fails to correctly highlight longer ones, such as in the source-code of my web-app. I realize that it's done for speed (one can't attempt to parse the whole file to see which programming language is used where on slower computers), but it can be quite annoying. Honestly, of all the text editors I've tried to edit HTML5 with, I like the features of NetBeans the most. However, there is an annoying bug preventing it from being called from Finder with "Open With..." or similarly from Terminal on MacOS, which is why I mostly use XED.

Regarding your password algorithm, I'd simply do it all in the backend.

If I do it in the back-end, I'd either need to do a large number of AJAX-es (each of which takes seconds to finish, and it's almost impossible to make them work in older browsers), or refresh the page each time (which would, because of the free web-host that I use, quite often cause the "connection timed out" error). And how is it easy to turn off JavaScript? It's easy to turn off JavaScript in Android Stock, Internet Explorer 6 or NetSurf (in NetSurf, it's disabled by default to not cause the servers to send it something Duktape, its terrible JavaScript engine, can't take). It takes you more than half an hour to find out how to disable JavaScript in some particular modern browser, even if you have some experience with the developer tools. That's not something that can be done by accident. Even in the case it's done, I've included some "noscript" that will cover the page with a message about it.

Something like bcrypt. 

I am not sure that would help. Even if somebody manages to get to the hash hard-coded into the PHP on the server and the hashing algorithm I've used (which is, for all practical purposes, impossible), all he can do is a brute-force attack trying tens of thousands of possibilities (Because almost none of the "passwords" that would satisfy the hash are made of characters you can actually type in the web-app using the standard keyboard). The problem is that my algorithm uses the same key for both encrypting and decrypting. So, if somebody intercepts the connection on both AJAX-es (I wouldn't know how to do it, but I'd imagine it's possible), he knows both the cyphered password and the key to decipher it.

Keep getting "server not found."

Ah, what can I do. The back-end of 000webhost is obviously very buggy (the control panel stops working every now and then, file manager even more often, the FTP more often refuses to connect than not...). Now they are allegedly also getting denial-of-service attacks, which is why nearly all the websites created in the last few months are down. I am quite sure it's not my fault, because the Arithmetic Expression Compiler is an HTML file, not a PHP file, so the web-server should deliver it no matter what I programmed to it. Anyway, the link works for me right now.

By the way, I believe I've managed to tweak the mobile-theme-related JavaScript on my homepage to work in Safari on iPhone, not just in Mobile Chrome. The layout doesn't break any longer in Safari on Mac when I set the user-agent to iPhone. Unfortunately, I don't have an actual iPhone to test it on it.

[T0 Th3 M4X]

I do my own web development, and I didn't read through the whole thread, but here are my initial recommendations. I can help you with some of it if you like.

1. If you're starting a new page, simplify it. It looks like you're trying to do too much too quick. Just get the basics down, then add gradually.
2. Pick one font, one size for that font that's easy to read, and try to use it as much as possible through your site. This is known as "font agreement". When you can do this well, it will help keep people using your site since it's easy on the eyes.
3. Make better use of the sidebars. I would suggest using only one.
4. Pick one primary color, and no more than 1 or 2 additional color for things like borders and to identify clickable links.
5. Add a photo to break up the text a bit. Something that is expressive of the site and the message you want to share.
6. Move the bit about you to an "about" page.
7. Display your favorite song by moving it to a sidebar, then have it so visitors can listen to the track by clicking a play button or even if it in video form through YouTube (Don't have it play automatically)
8. Also, if it's not currently responsive so that it automatically adjusts to mobile, swap out to a theme that does this.
9. Once all that is done, then you can start expanding on things like the headers, footers, content for your sidebars, and maybe linking social media if you have it.

Most importantly don't try to do too much. The best websites are simple. What makes them optimal is that anybody can jump on them, figure out the pupose quickly, and easily navigate them.

[FlatAssembler]

I didn't read through the whole thread

There is not too much to read here. Basically, I've spent years and years trying to learn how to program, diving into as many different areas as I could, and when I finally decided to share some of my work, most of the responses I got were the likes of "Everything you've made sucks and it can't be easily fixed.".
Granted, most of the things I've been studying for all those years aren't applicable in creating a website. This web-app will give you a clue what I've been studying: algorithms, data structures, compiler theory and low-level programming languages.

It looks like you're trying to do too much too quick.

Well, yes, I often work on the web-site while the school is pressing me.

This is known as "font agreement".

Never heard of it.

I would suggest using only one.

I am not so sure how. Where should I put the navigation?

Add a photo to break up the text a bit.

I've done that many times on other web-pages, just not on the homepage. Though I am not sure if that makes them better, see this page, for example. It seems to me it's harder to read because the photos break the layout.

Move the bit about you to an "about" page.

It's not quite convenient to change the navigation bar on every web-page separately, is it?

Display your favorite song by moving it to a sidebar, then have it so visitors can listen to the track by clicking a play button

I am not sure how to do that.

Don't have it play automatically

As far as I know, no browser plays it automatically this way.

Also, if it's not currently responsive so that it automatically adjusts to mobile, swap out to a theme that does this.

Which mobile browser are you using? I've made a mobile theme using JavaScript (that sets up the viewport and changes the layout) and, right now, it works in Mobile Chrome and Mobile Safari. In browsers detected as the Android Stock Browser or the Mobile Firefox, it simply increases the text-size, since attempting to run the Chrome-specific code or the Safari-specific code breaks the layout in them. And there is no easy way to debug JavaScript on mobile devices, you need to use the search-bar JavaScript snippets (like in Internet Explorer 6) and you don't even have a proper keyboard to do that.

The best websites are simple.

Perhaps. But if you come from languages like C++ or Objective-C, JavaScript is a dream in that it finally makes it easy for you to make something flashy. The temptation is almost irresistible.

[T0 Th3 M4X]

I didn't read through the whole thread

There is not too much to read here. Basically, I've spent years and years trying to learn how to program, diving into as many different areas as I could, and when I finally decided to share some of my work, most of the responses I got were the likes of "Everything you've made sucks and it can't be easily fixed.".
Granted, most of the things I've been studying for all those years aren't applicable in creating a website. This web-app will give you a clue what I've been studying: algorithms, data structures, compiler theory and low-level programming languages.

It looks like you're trying to do too much too quick.

Well, yes, I often work on the web-site while the school is pressing me.

This is known as "font agreement".

Never heard of it.

I would suggest using only one.

I am not so sure how. Where should I put the navigation?

Add a photo to break up the text a bit.

I've done that many times on other web-pages, just not on the homepage. Though I am not sure if that makes them better, see this page, for example. It seems to me it's harder to read because the photos break the layout.

Move the bit about you to an "about" page.

It's not quite convenient to change the navigation bar on every web-page separately, is it?

Display your favorite song by moving it to a sidebar, then have it so visitors can listen to the track by clicking a play button

I am not sure how to do that.

Don't have it play automatically

As far as I know, no browser plays it automatically this way.

Also, if it's not currently responsive so that it automatically adjusts to mobile, swap out to a theme that does this.

Which mobile browser are you using? I've made a mobile theme using JavaScript (that sets up the viewport and changes the layout) and, right now, it works in Mobile Chrome and Mobile Safari. In browsers detected as the Android Stock Browser or the Mobile Firefox, it simply increases the text-size, since attempting to run the Chrome-specific code or the Safari-specific code breaks the layout in them. And there is no easy way to debug JavaScript on mobile devices, you need to use the search-bar JavaScript snippets (like in Internet Explorer 6) and you don't even have a proper keyboard to do that.

The best websites are simple.

Perhaps. But if you come from languages like C++ or Objective-C, JavaScript is a dream in that it finally makes it easy for you to make something flashy. The temptation is almost irresistible.

I can help you format it with these changes, and based on what needs to be done, it wouldn't even take that long.  That would probably be easiest, then if you wanted to learn and tweak things from there, I could show you so you know what's happening and what to do.  As far as your theories, algorithms, data structures, and such, just do them in a blog.  That is unless you want them linked to your home page as static pages, but I would suggest just blogging them.  If you have social media, you can auto post previews with excerpts, then you can use something like FB to boost your website. Another advantage to simplifying your home page is load times.  When you simplify it, it should load faster, which means you can direct people faster from the time they attempt to join their page, to where they want to visit to view content on your site.  If you have really long pages, you can do what's called "lazy loading", which just means that anything below the screen will load as a person scrolls your page.  That way they can start viewing your page before the whole thing is loaded.

Last thing, simple is king when it comes to websites. The top website is Google, yet the homepage is one of the most simple pages you can access on the Internet.  Just a box and a few menu options.  You click on a link or type in their search and "BOOM", you've got utility.  It's optimized to perform, not impress everybody with fancy design when they go there.

[bennyboy]

This is a good example of why MVC is a thing, by the way. Here, you have some really cool programmed stuff, tied in to some really bad internet views. There are now (so far as I can tell) 3 people here right now who could design your website, including all navigation, in less than an hour.

What we couldn't do (or at least not easily) is design something that will spit out the assembly language for a given formula. That is a spectacularly cool thing.

[KevinM1]

This is a good example of why MVC is a thing, by the way.  Here, you have some really cool programmed stuff, tied in to some really bad internet views.  There are now (so far as I can tell) 3 people here right now who could design your website, including all navigation, in less than an hour.

What we couldn't do (or at least not easily) is design something that will spit out the assembly language for a given formula.  That is a spectacularly cool thing.

Yeah, separation of concerns is key, not just with web programming, but programming in general.

The compiler page does look a hell of a lot better than the rest of his site.  While a Windows 95 inspired look isn't all that fetching in 2018 (it's literally a 23 year old design aesthetic), at least it looks like something I recognize and I have a somewhat intuitive idea of how to engage with it.

But the rest of the site is still Geocities, using old (I mean, late 90s/early 2000s) techniques to render content.  No separation of concerns (external CSS or JavaScript), repeated calls to getElementsByTagName and getElementById on the same elements which is incredibly inefficient and should be a code smell to any student, a bouncing ball and a fade-in effect for the entire site for no real reason, random colors with no sense of theme (plus gradients), etc.

Suggestions, for like the 5th time:

No gradients
Pick 2-3 colors that aren't black and white for your overall theme (black and white is for the main body text)
Pick colors that don't clash (look at a freaking color wheel)
No gradients
Pick a maximum of two fonts
Your primary font should be very readable... since your site is mostly technical, sans-serif, with a good looking monospace (I like Adobe's Source Code Pro) for any code examples
No frivolous bullshit - no random cloud background, no fade-in, no bouncing ball
Consolidate and separate your code - external CSS and JavaScript where possible, adhere to DRY (don't repeat yourself) principles, save any element you obtain by one of the getElement(s)By... functions in a variable, etc.

[T0 Th3 M4X]

This is a good example of why MVC is a thing, by the way.  Here, you have some really cool programmed stuff, tied in to some really bad internet views.  There are now (so far as I can tell) 3 people here right now who could design your website, including all navigation, in less than an hour.

What we couldn't do (or at least not easily) is design something that will spit out the assembly language for a given formula.  That is a spectacularly cool thing.

Yeah, separation of concerns is key, not just with web programming, but programming in general.

The compiler page does look a hell of a lot better than the rest of his site.  While a Windows 95 inspired look isn't all that fetching in 2018 (it's literally a 23 year old design aesthetic), at least it looks like something I recognize and I have a somewhat intuitive idea of how to engage with it.

But the rest of the site is still Geocities, using old (I mean, late 90s/early 2000s) techniques to render content.  No separation of concerns (external CSS or JavaScript), repeated calls to getElementsByTagName and getElementById on the same elements which is incredibly inefficient and should be a code smell to any student, a bouncing ball and a fade-in effect for the entire site for no real reason, random colors with no sense of theme (plus gradients), etc.

Suggestions, for like the 5th time:

No gradients
Pick 2-3 colors that aren't black and white for your overall theme (black and white is for the main body text)
Pick colors that don't clash (look at a freaking color wheel)
No gradients
Pick a maximum of two fonts
Your primary font should be very readable... since your site is mostly technical, sans-serif, with a good looking monospace (I like Adobe's Source Code Pro) for any code examples
No frivolous bullshit - no random cloud background, no fade-in, no bouncing ball
Consolidate and separate your code - external CSS and JavaScript where possible, adhere to DRY (don't repeat yourself) principles, save any element you obtain by one of the getElement(s)By... functions in a variable, etc.

100 percent agree with what he said.  Simple is optimal.  Once you reformat it, you can expand a bit from there, but you can't to keep things as uniform as possible.

[FlatAssembler]

OK, I'll apply those suggestions when I find some time. First things first, you know.
By the way, what do you think about this web-page about me selling my house?
http://flatassembler.000webhostapp.com/K...ica30.html
It looks pretty nice to me, and it is only about 250 lines of code.
Bing Developer Tools report there are no SEO violations and that it is mobile friendly. Nevertheless, it doesn't appear neither on Bing nor on Google when you search for houses in Donji Miholjac (even though I've resubmited the sitemap to both). That's quite unfortunate, if I don't sell that house, I won't have the money to finish the university.
The weirdest thing I've noticed about the search engines is that my webpage about the Croatian Toponyms is the first result you get if you type "Croatian Toponyms" into Ask.com, even though I haven't even submited my sitemap to it.

It's unbelievable to me that such a webpage as one I've made about me selling my house is only 3MB. Since I have a bandwidth of 1000MB/month, I can therefore sustain 300 visitors a month (which I certainly won't get).

[bennyboy]

That looks MUCH more like a modern browsing experience, and the script looks really nice and clean. It scales nicely with browser size, as well.

You've used almost the exact same system as I use for my slideshow app-- preload all images in hidden divs, then use js to choose which to show.

If you really want to minimize bandwidth, then you could consider the following:
1) Make special downsized thumbnail images (I noticed you used fullsized images for them).
2) Have a single div for your main image window, and just change the src when a thumbnail is clicked, i.e. load each full-sized image only on demand.

For overall smoothness and coolness, the way you've done already is perfect. But for absolute maximum bandwidth saving, you could probably reduce it down to just a couple hundred kilobytes / visit unless someone chooses to click on all the slides.

I'm curious though: why do you build your slideshow divs directly in javascript, rather than in server-side markup? Are you using some kind of client-side programming tool that does that automatically?

But anyway. . . good job.


PS your home looks very nice. I'm sorry you have to sell it, but I'm glad you are trying to follow your dream!

[LastPoet]

OK, I'll apply those suggestions when I find some time. First things first, you know.
By the way, what do you think about this web-page about me selling my house?
http://flatassembler.000webhostapp.com/K...ica30.html
It looks pretty nice to me, and it is only about 250 lines of code.
Bing Developer Tools report there are no SEO violations and that it is mobile friendly. Nevertheless, it doesn't appear neither on Bing nor on Google when you search for houses in Donji Miholjac (even though I've resubmited the sitemap to both). That's quite unfortunate, if I don't sell that house, I won't have the money to finish the university.
The weirdest thing I've noticed about the search engines is that my webpage about the Croatian Toponyms is the first result you get if you type "Croatian Toponyms" into Ask.com, even though I haven't even submited my sitemap to it.

It's unbelievable to me that such a webpage as one I've made about me selling my house is only 3MB. Since I have a bandwidth of 1000MB/month, I can therefore sustain 300 visitors a month (which I certainly won't get).

That site is better layed out. It seems some of the advice given is rubbing on you. I don't understand most of the language but it's clear to me, the message you are trying to convey. Good job on that.

Never forget that advice even if ego hurting, it's an opportunity of learning.