[Gargoyle UI/UX] Requesting upgrade from dark ages

[Lantis]

Cool. Well thanks for looking into it

[StopSpazzing]

Cool. Well thanks for looking into it

I take back what I said, found this thanks to helpful people on #io.js : https://github.com/imyller/meta-nodejs

Specifically designed for embedded devices. However, this is also important: https://github.com/nodejs/node/issues/2948

[Eric]

Node.js is not going to work. One of the comments in that second link in the post above indicates a binary size of 9.6M. Gargoyle needs to work on routers that have an entire flash disk size of 4M , so... no. It's just too big. The primary reason things are the way they are is to maximize load speed while still keeping the amount of disk space and memory required as low as possible.

That said.. you were complaining about iframes. I realize you're looking at the code with a screen reader, so you may have missed it, but all of the iframes have the property style="display:none" which means they are never displayed to the user. They are there so I can submit a form to the iframe and the browser won't redirect off the page, not to actually display any information.

Also, I absolutely will accept pull requests if they improve accessibility and don't break existing functionality or expand the the size of the build too much (It still needs to fit on 4M routers).

[tapper]

Node.js is not going to work. One of the comments in that second link in the post above indicates a binary size of 9.6M. Gargoyle needs to work on routers that have an entire flash disk size of 4M , so... no. It's just too big. The primary reason things are the way they are is to maximize load speed while still keeping the amount of disk space and memory required as low as possible.

That said.. you were complaining about iframes. I realize you're looking at the code with a screen reader, so you may have missed it, but all of the iframes have the property style="display:none" which means they are never displayed to the user. They are there so I can submit a form to the iframe and the browser won't redirect off the page, not to actually display any information.

Also, I absolutely will accept pull requests if they improve accessibility and don't break existing functionality or expand the the size of the build too much (It still needs to fit on 4M routers).

Hi there Eric it's me that was talking about a screen reader mate not the op. I dont think the op was on about node.js in his op. i think he wanted to no about html5 and node.js came up as a after thought! All though i was shocked to read about that9 meg blob.lol

Nice work on the latest code btw!

[StopSpazzing]

Node.js is not going to work. One of the comments in that second link in the post above indicates a binary size of 9.6M. Gargoyle needs to work on routers that have an entire flash disk size of 4M , so... no. It's just too big. The primary reason things are the way they are is to maximize load speed while still keeping the amount of disk space and memory required as low as possible.

That said.. you were complaining about iframes. I realize you're looking at the code with a screen reader, so you may have missed it, but all of the iframes have the property style="display:none" which means they are never displayed to the user. They are there so I can submit a form to the iframe and the browser won't redirect off the page, not to actually display any information.

Also, I absolutely will accept pull requests if they improve accessibility and don't break existing functionality or expand the the size of the build too much (It still needs to fit on 4M routers).

Thank you for taking the time to post here, Eric

Node.js was just an idea, main post was about changing responsive design for default web theme. While I am aware of the size contraints, the poster who said they tried and get it to 9.6MB never tried all the optimizations possible. As a side project I'm going to see how small I can get node.js. Some of the original builds were less than 2MB, that being said, personally would like to know.

I have compiled custom versions of bootstrap etc and have gotten the size of the new theme within same size it already is by removing all the images excluding main logo and some other improvements.

If you would like to see the very very alpha version of framework im working with: https://github.com/stopspazzing/Gargoyl ... e-Redesign
Please note, the colors aren't matching and your original code hasnt been added yet. Also missing the logo.

[StopSpazzing]

Beta page for both index and login page examples up.

I'm testing 2 designs, bootstrap and material design lite. Both do pretty much the same thing. More of a looks thing, but tried getting them to look close, not finished, layout is up. Still need to shrink the sizes so...

Is there a way of going about replacing pages so I can test them on my device?


Also, since html5, you don't need to label script type's, default assume's it's javascript:

Code: Select all

<script src="./js/common.js?1.8.X--Built-20150922-0340-git-04e6ec1-"></script>

[ispyisail]

@StopSpazzing

+1

[StopSpazzing]

I think MDL is done. Check the login.html page in MDL framework. Still working on the bootstrap version. Colors are easily changeable.

On side note:
http://www.html5rocks.com/en/tutorials/ ... webstorage
http://www.html5rocks.com/en/tutorials/ ... -databases
http://www.html5rocks.com/en/tutorials/ ... #toc-forms
http://www.html5rocks.com/en/tutorials/ ... websockets
Possibly:
http://www.html5rocks.com/en/tutorials/ ... oc-workers

I went through much of the code, figured I would paste this here so can suggest some huge improvements in the code. The above links suggests changes that impact speed of loading the pages and how many requests are done...Thereby speeding up browser and since less and smaller requests are made from the router, less resources are used.

I would like to suggest Eric take a look when he has time. Websockets over XHR for instance is a huge one.

Testing this in a moment(instead of cookies, use localstorage):

Code: Select all

function setBrowserTimeCookie()
{
	var browserSecondsUtc = Math.floor( ( new Date() ).getTime() / 1000 );
	// if localStorage is present, use that
	if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.browser_time = browserSecondsUtc;
//sessionStorage is also available

	} else {
		document.cookie="browser_time=" +browserSecondsUtc + "; path=/"; //don't bother with expiration -- who cares when the cookie was set? It just contains the current time, which the browser already knows
}

Think about this... what if all variables which aren't sensitive are saved to localStorage, otherwise sessionStorage used. Then, after login, have web workers constantly update all information from the device to localStorage, so all information is there and consistent. Since they are running in background browser is responsive and quick. Then just pull the variables from localStorage; Meaning practically instant pages since info doesn't need to be "fetched" from device. Just an idea.


Tip 8: HTML5 Form attributes and input types
"Adding the required attribute means the browser won't let the form submit until that field is filled in. Also the pattern attribute lets you specify a custom regular expression for the input to be tested against; with invalid values blocking form submission. This declarative syntax is a big upgrade not only in source readability but also a significant reduction of JavaScript necessary. Again, you can use feature detection to serve a fallback solution if there isn't native support for these present."

[ispyisail]

+1

[StopSpazzing]

I am still working on this, to every one interested.

Currently using current code layout and adding bootstrap to it so can be included in releases for everyone to benefit.


However, there are 2 things I want to point out,
1. I have to strip 90% of the current css to adjust for bootstrap.
2. There is a super easy way to customize bootstrap for anyone who wants to if decided to go 100% modern design layout, which would alienate current themes, https://getbootstrap.com/customize/ Anyone could customize their colors and even add MORE features to their current version if moved to this design idea making this idea modular. Could start with a simple small base, then allow people to add to. Ex. if the current theme was moved to 100% bootstrap and modern design, anyone could drop the generated file(s) in the current theme folder and get immediate color changes without having to do anything complicated. Could even make it plugin where people can customize their theme scheme from the system.

Currently there is 2 main projects I have.
1. Complete redesign of the pages which I have already linked to.
2. An unlisted, unstable, recent project I started to modify the current theme to be responsive.

For 2, there is a small increase in size, about ~14KB, which is within reason. Images excluding the logo and favicon, have been removed and css only is being used in their place.

Currently, I have an issue, however, where I need some guidance. I have moved the code in gargoyle_header_footer.c so the menu "nav" code is first, compiles fine, however, menu is empty. See image:
http://oi67.tinypic.com/a9x1l2.jpg

I could list the code, but it honestly is just a swap of the location of the nav and the content. I need to get it off my compiling vm.