Author Topic: Web  (Read 6806 times)

hubol

  • Cutesterest
  • ******
  • Posts: 1135
  • Cutes: 630
    • View Profile
    • hubolhubolhubol
Web
« on: July 15, 2018, 03:13:53 AM »
http://hubolhubolhubol.com/

i remade my website after a perilous accident

cook, i remember forever ago u said to use spritesheets to make your images load all at once. is that still the approach in 2018?

wilde32

  • Cuter
  • ***
  • Posts: 237
  • Cutes: 24
    • View Profile
  • Pronouns: Consider replacing your battery.
Re: Web
« Reply #1 on: July 15, 2018, 03:19:26 AM »
remember to ctrl f5 to clear cache!!!!

i visit it a lot so it initially didnt work for me

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #2 on: July 15, 2018, 06:29:23 AM »
cook, i remember forever ago u said to use spritesheets to make your images load all at once. is that still the approach in 2018?

It depends!  If your server supports HTTP/2 then you can have simultaneous downloads (multiplexing).  That really mitigates the need for spritesheets.  However HTTP/2 requires an SSL certificate, which you don't currently have installed.

Here's how your site looks in a waterfall view now: https://www.webpagetest.org/result/180715_FB_deffd74b829b4410dbee74dd4d3447b5/1/details/#waterfall_view_step1

A spritesheet would help reduce all those network lookups, but multiplexing is a better solution.  It also means there's no overhead from having to maintain a spritesheet (either by automated build process or manually).

So I'd suggest setting up some Let's Encrypt if possible with your host, then focus on other areas if you're looking to speed things up.

Also go ahead and run your images through tinypng.com or another image quantization tool.  It's a lossy compression but just barely.  2.png dropped from 38.5KB to 13.2KB (66% smaller).  Images are 99% of your page size so that's where you'll see the largest wins in performance.

hubol

  • Cutesterest
  • ******
  • Posts: 1135
  • Cutes: 630
    • View Profile
    • hubolhubolhubol
Re: Web
« Reply #3 on: July 15, 2018, 11:51:34 AM »
interesting. i can try optimizing the images for sure. however the ssl certificate seems to cost money no matter what (lol)

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #4 on: July 15, 2018, 01:06:42 PM »
Depends on your host.  Not all hosts offer HTTP/2 either.  I'd suggest using Github Pages but it looks like you have some PHP on the backend, so that's a no-go.

hubol

  • Cutesterest
  • ******
  • Posts: 1135
  • Cutes: 630
    • View Profile
    • hubolhubolhubol
Re: Web
« Reply #5 on: July 15, 2018, 02:44:30 PM »
the php on the index is pretty minimal actually

a couple of calls to readfile to dump the generated header and footer. the $GET id isnt even retrieved using php lol
Code: [Select]
<!-- php get -->
<script>
// find the php get parameter by name
function find_get_parameter(parameterName) {
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}
// if id was supplied, then open that detail
var id = find_get_parameter("id");
if (id){
detail(id);
}
</script>

there is already a script in index.php that embeds html files from the server into the document (currently used for the game detail). i could probably replace the calls to readfile with that

all of the game details are generated and saved to html files using a hot templating system i made that uses php, which means i would have to manually copy the generated results to github pages

html partial: http://www.hubolhubolhubol.com/assets/partials/jiggly.html
-> hot templater
result: http://www.hubolhubolhubol.com/generated/details/jiggly.html (displays correctly when on hubolhubolhubol root level + stylesheet)

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #6 on: July 15, 2018, 03:41:31 PM »
there is already a script in index.php that embeds html files from the server into the document (currently used for the game detail). i could probably replace the calls to readfile with that
Yeah, looks like you've got all the pieces there already with AJAX and pushstate.

all of the game details are generated and saved to html files using a hot templating system i made that uses php, which means i would have to manually copy the generated results to github pages
Would that be necessary?  As long as your JS runs, you'd only need the index, script, and fragment pages.

Another option is actually using Github Pages for its static site generator, Jekyll.  I really like static sites but you'd basically just be replicating your existing templating system by doing so.  You might want to avoid tying yourself to another platform (though the git integration is nice).

hubol

  • Cutesterest
  • ******
  • Posts: 1135
  • Cutes: 630
    • View Profile
    • hubolhubolhubol
Re: Web
« Reply #7 on: July 15, 2018, 04:06:00 PM »
As long as your JS runs, you'd only need the index, script, and fragment pages.

hmmm what does this mean?

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #8 on: July 15, 2018, 04:30:26 PM »
I'm describing a SPA.  The idea is that you have a single page which just loads in content when the user interacts with the site.  It's essentially what you have now already, except entirely client-side.

So the user loads simple HTML page, JS runs, determines if it should display the index or load a fragment page.  You can read or modify the URL from JS, which looks to be what you're doing already anyway.

Usually SPAs use routing logic on the server to point all pages to the index so that prettier URLs are possible (eg. hubolhubolhubol.com/love/), but that isn't doable on a server like Github Pages.  You're already using query strings for pages anyway though so it would be no problem.

If you did want pretty URLs like above I'd just use a straight static site rather than a SPA.  Either by generating them like you mentioned above, or porting to Jekyll.

Sorry if I'm overwhelming you with info.  There's a few options and any of them would work, really.

hubol

  • Cutesterest
  • ******
  • Posts: 1135
  • Cutes: 630
    • View Profile
    • hubolhubolhubol
Re: Web
« Reply #9 on: July 15, 2018, 04:44:22 PM »
donut worry! i like to know about web best practices since it seems like everything is constantly being deprecated and no one agrees on anything anywhere. i was gonna try some .htaccess nonsense for what you were describing but it seemed like it would make adding additional pages to my server (not on the index) more annoying than necessary. like i'd have to exclude certain paths or whatever which just seems extra

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #10 on: July 15, 2018, 06:09:22 PM »
.htaccess nonsense would allow you to set up pretty URLs without doing the ?id=game stuff.  This is how big CMSes like Wordpress work too.  They just redirect all traffic to the index and let their big bootstrapped webapp handle it.  You generally exclude existing files/directories though, so it still lets you upload files regularly too.

Here's a copy of Wordpress' .htaccess script.  This is where the real black magic begins.

Code: [Select]
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

So let's step through it:

- Checks that mod_rewrite (Apache module) is installed.  Code is ignored otherwise.
- Tells Rewrite module to begin revving its engines.
- Sets the base directory to the index.  Not sure this line is even necessary.
- If it's the index page, stop following directives after this (L flag means Last)
- Okay creating a new redirect rule.  Set condition to ignore files.
- Also ignore directories
- Now redirect any remaining traffic to the index.

Then in your index.php, you'd read in the path (eg. /love/) and serve the appropriate page.

This is how you'd handle routing using server-side code, rather than client-side approach I mentioned above.  Edit: Some server-side routing logic is necessary for pretty URLs -- or the pages need to actually exist.

The server-side approach means you need a proper web server with Apache.  The Client-side approach runs in just a browser (and thus can run on Github), but may upset the 0.00001% of people that disable Javascript.  Or the third approach is to do neither and just build a static site on Jekyll like me.

Feel free to ask if you have any questions.
« Last Edit: July 15, 2018, 06:16:45 PM by SquareWheel »

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #11 on: July 15, 2018, 06:35:12 PM »
Also I want to clarify when I say "redirect to the index", I mean the internal page logic.  The URL will remain at /love/ or whatever.  It's just that index.php is handling all the logic.

hubol

  • Cutesterest
  • ******
  • Posts: 1135
  • Cutes: 630
    • View Profile
    • hubolhubolhubol
Re: Web
« Reply #12 on: July 16, 2018, 01:18:46 AM »
interesting... that htaccess file is almost identical to the one i was using for a bit when my dad helped me remake my site in angular a couple weeks ago. my reasoning for still using the index.php?id= crap is that there are existing links to my site on the web with that sort of address but i can probably treat it like i would treat /id_here/

SquareWheel

  • Administrator
  • Cutester
  • *****
  • Posts: 802
  • Cutes: 139
    • View Profile
Re: Web
« Reply #13 on: July 16, 2018, 08:59:05 AM »
Always possible to set up (actual) redirects to point to where you want to go.  I'd agree it's best not to break old links.