pouët.net

I'm sorry if this is offtopic, delete it if you wish obviously.
I want to ask pouet about web programming - not for a demo, but for a project I wish to embark on with some scene values in my approach.
I'm not a professional programmer and my last web development experience was 10 years ago, so maybe I have some wrong ideas, hence a quick thread here to ask for any thoughts you may have. Really high level stuff.
Why ask here, instead of a thousand webdev places out there? Because most web developers from what I can see don't share my values, I want to make an "oldschool" website, which doesn't take 400MB of ram to render, doesn't look like it's trying to be IOS, which doesn't require lightning fast internet access to view, but which still looks decent and has some impressive client side features. There will be no video or flash advertisements.
I want to generate my graphs and graphics procedurally on the client side, and have some interactive, dynamic graphs. I don't want to use HTML5 features in the latest web browsers to make graphs if it causes the browser to chew RAM and CPU... unless I'm mistaken and they are more efficient than my experience indicates?

So, what are your thoughts on tools, platforms, and approach to this? I thought pouet.net might actually be a great place to ask about making a site like this. A site that could run on a PC from 2000 and a dialup connection.

Currently I'm intending to develop the server side on a LAMP platform (mainly because I have a raspberry pi to use as my dev server with all this set up already).
I'm preparing to use javascript/DHTML3 for the dynamic graphs, and procedural graphics, but I don't know, would applets or Flash be better? Am I mistaken in my observation that fancy HTML5 web pages seem to chew resources just as badly as Flash does? But the standardisation across browsers in HTML5 makes life much easier...
Obviously I'm going to do all the optimisation I can to make the page fast, I want it to be usable on a 64kbps connection. SO there'll be as few HTTP requests as possible, any graphics I can't generate will be sent in one image, then cut up with HTML on the client side.
I don't know much about database performance optimisation, but 90% of page views should require the same queries on tables that are updated very rarely, so I don't want those queries to run over and over again. I know MYSQL should be smart enough to cache queries but not sure how that will work. I'm no DBA.

OK, sorry for the vagueness and n00bness but over to anyone for any thoughts if you have some.

Client-side stuff is exactly what causes all this CPU and RAM explosion that you want to avoid, just saying.

I understand, I see in some of the javascript graphs I've played with they can use client side resources, but then I seem to recall plenty of old js and dhtml demo's that ran on my Pentium II 450 in 2000. I assumed it was because they aren't using a lot of the advanced features of HTML5 now... you'd have to reinvent the wheel and write functions that do similar things to what already exists in HTML5, but I guess that's what I was hoping some people here might know, would that be more efficient?

SVG isn't that bad from a resource use perspective.

and a well-compressed png or a gif with limited palette is probably smaller than 30 lines of javascript to generate the same shit out of some SVG data or just code. let alone the tediousness of all the unnecessary work just because you want to support bandwidth from the mid 90s :)

there were js demos in the 2000?!??!

i was so shocked so -the :P

Thanks for the responses. Yes, it's entirely possible I'm being OCD about this, using a bit more bandwidth would save a lot of work.

I'll investigate SVG and do some of the tutorials to get a feel for it.

Yes, there were js demo's a long time ago. I remember looking at them on the Pentium 90's in highschool. There are even a few here on Pouet, but not as many from that era as I was expecting:
http://www.pouet.net/prodlist.php?platform%5B0%5D=JavaScript&order=release&reverse=1

You might have been thinking of browser-based Java demos, there were certainly a good few of those around in 2000ish:

http://www.pouet.net/prodlist.php?platform%5B0%5D=Java&order=release&reverse=1

http://www.pouet.net/prodlist.php?platform%5B0%5D=Java&order=release&reverse=1

BB Code fail..

Those are applets, I do recall them (and wrote some of the server-side equivalents, called "beans" back then), the difference is they need to be in a self contained window and don't interact or rescale with the rest of the page.... which isn't necessarily a bad thing for some of the stuff I have in mind. But also, users need to have java installed, whereas they don't with javascript.
Should be very resource-easy though, I remember a YM2149 emulator bundled with a bunch of ST chip tunes that ran in the browser perfectly on a P133 I was using at the time.

Dear God no.. I wasn't suggesting that Java is a good way to go, just that maybe you were misremembering Java demos as JavaScript.

But I can see that you know the difference so.. er... carry on!

i did a talk on assembly at some point about the history of webdemos... let me find the link to the slides: https://webuser.scene.org/~ps/history_of_web_browser_demos/
i believe it was captured on assemblytv but i'm too lazy to go search for it now.
includes some links and references on a chronological list and such.

back on topic: i like the keep it simple approach on websites, save bandwidth whenever you can. don't think you need any plugins these days, html5, svg and canvas works fine. even the audio API is pretty decent to fiddle with on most modern browsers. there are always some limits on mobile. but there are good sites listing what is supported where, and also very nice mobile layout debugging tools for desktop development (in chrome and firefox for example).

imo its just lazy devs with the mindset of "just doing some javascript", dropping in jQuery, binding event listeners to scroll and mousemove events in which they then redundantly traverse and mutate the DOM several times, construct a whole bunch of stuff, leaking memory, reconstructing functions, using "implicit" global variables and the list goes on and on and on.

As psenough said, no need for any plugins, imho also no need for any libraries.

As your question is very broad just two things:
1. "use strict"
2. Chrome and Firefox have very good profiling tools for pretty much anything of interest(cpu, ram, network, resource caching etc.).

PS: table layouts are dead

- Use modern browser features.
- If you're aiming for the lightest possible pages don't use (big) libraries. You might need to drop old browser support for this.
- For animations use <canvas>, CSS3 (and perhaps SVG).
- Use requestAnimationFrame when animating with JS.
- Only animate CSS properties that don't change DOM layout. Think of creative ways to use transform / opacity instead.
- Chrome at least has a profiler for CPU usage as well as support for bandwidth throttling.

Apart from what the other people already said, you have to keep in mind that browsers also evolved since then and apply "clever" techniques to make sites render faster, at the expense of using more RAM or CPU. Yes there is a lot of bad web programming out there, but not all of the increased resource usage is to the website developers but also due to the browser developers.

Thanks for the responses, I know it's not really the forum to have asked but I'm glad that I did.

Thanks for that, interesting presentation, I followed up some of the links and there's good info there


OK, well I hope it's just that. I'm using a pretty old PC, but still, I thought the slowdown and CPU usage were ridiculous even when just doing some of the tutorials, especially when I can see older DHTML doing much more impressive stuff, and using much less resources.
Of course the good thing about just being conventional is it will be easier to get support on stackoverflow, reddit etc ;-)


That's what they said 10 years ago, but still I see them used everywhere! I have to say tables are more natural to me than div tags etc, but the latter isn't that hard either

at least my java demos with Scali from 2004 at least run smooth on MODERN hardware, CPUs have come a long way! :)

found link of the history of web demos, apparently it's on youtube: https://www.youtube.com/watch?v=KxJ0RzR6zEM

damn i talk fast when doing presentations O_O guess had too many slides to go through

@dodke, thanks very much for those tips. I will note all of that as I try to progress with this (on a steep learning curve I fear)


I do appreciate that, it takes 400MB of RAM just to load the browser now with no pages. A PC of the early 2000's would suffer! But I have also noticed in Chrome, that when I load an old, lite page, js demo etc that the new tab causes hardly any increase in resources... which is what makes me believe/hope I can still write nice web pages with some advanced content that are at least relatively lite



I had a look, I assume these are the ones you're talking about!
Artnouveau
Croissant 9
Runs ok on my circa 2006 Core 2 Duo (E6400)! Very nice



Just to be a little more specific about what I want to do, I want all 4 of these running on one page without chewing too much CPU, if I can :(
Each of these would be in pretty small windows, 300 * 200 pixels or less.

• Scatter chart with a fair few dynamic elements, mouseover events would be nice but could cut it down to onclick. (Dynamic part is to make one series disappear, then "shoot" it back onto the graph like a shotgun, and cycle its colour to highlight that series amongst the others.... this is because there will be a LOT of series on the chart, even when they are different colours they may be hard to distinguish)
  
• A 2-d, animated physics model showing some springs and levers in action. This would be constantly looping. Doesn't need to be super accurate physics, just indicative of how it behaves. Perhaps this would be better to precalc on the server and just send across as an animated GIF... but would be nice to let user dynamically change forces.
  
• A pie chart that allows each "piece of pie" / series to be clicked on and broken down into a further chart
  
• A single rotating 3d model of ~500 polygons in a small window of 300 x 200 pixels. No need for advanced stuff like trilinear filtering, mipmapping, antialiasing etc Perhaps not even texture mapping, could just be naked polygons with some Blinn–Phong shading
  

Thanks a lot, will take a look!