Page 1 of 2

New theme; Any interest?

Posted: Thu Apr 19, 2012 8:16 am
by godsyn
I've started working on removing the nested tables (yuck) and pointless back-ground images (eg: gradient) and converting everything to CSS. The theme's name is HTML5Clean, and short of some issues with embedded images (eg: DIVs/tables not defined by the theme), I've removed all background images, cleaned up the css, and ensured it is cross browser compatible. Would someone be willing to clean it up some more? The player is looking a little rough due to base (non-theme-able) code not being html5 compliant.
Image

Re: New theme; Any interest?

Posted: Fri Apr 20, 2012 7:45 am
by godsyn
Config page. Aside from the icons and the top right "netjukebox" image, 100% css.
Image
I'll zip everything up (seeing as I can't find a github/svn page to request a pull from the author) when I'm done.

Re: New theme; Any interest?

Posted: Sun Apr 22, 2012 7:45 am
by godsyn
Index, all tables gone, pure CSS goodness. 100% themeable.
[JS DISABLED TO SHOW WARNING]
Image
[SEARCH]
Image

Re: New theme; Any interest?

Posted: Sun Apr 29, 2012 4:59 am
by godsyn
Progress report: about 50% done converting everything. Page size is about 50% less, and load times are 50% to 75% faster.

Re: New theme; Any interest?

Posted: Sun Apr 29, 2012 5:13 pm
by wbartels
Hello Godsyn,

Thanks for the work you have done so far.
To see if the new CSS/HTML is rendering properly I would suggest checking on: http://browsershots.org/
To validate the HTML code there is a nice Firefox plugin: http://users.skynet.be/mgueury/mozilla/

Are you only working on the new skin or do you also replace all the tables in the whole netjukebox project?
If you are also willing to replace all the tables I can temporarily freeze the project with netjukebox 5.36.
Please let me know what your plans are.

Re: New theme; Any interest?

Posted: Mon Apr 30, 2012 12:05 am
by godsyn
wbartels wrote:Hello Godsyn,

Thanks for the work you have done so far.
To see if the new CSS/HTML is rendering properly I would suggest checking on: http://browsershots.org/
Currently testing on mac/win with chrome/firefox. Will use browsershots when near completion.
wbartels wrote: To validate the HTML code there is a nice Firefox plugin: http://users.skynet.be/mgueury/mozilla/
Using w3c's validator, currently. Will look in to this plugin.
wbartels wrote: Are you only working on the new skin or do you also replace all the tables in the whole netjukebox project?
I started just making a new skin, but after seeing all the nested tables and fixed variables (eg: the progress bar), I ended up editing the php to clean things up
wbartels wrote: If you are also willing to replace all the tables I can temporarily freeze the project with netjukebox 5.36.
Please let me know what your plans are.
I'll upload a (working version) of my current progress tomorrow to this forum.

Re: New theme; Any interest?

Posted: Mon Apr 30, 2012 1:23 pm
by godsyn
Consider this a rough draft. Most is working in "real" browsers, but I've yet to start tackling IE.
If you find any blatant issues, let me know.

Removal of most of the imgs and replacing them with css means less requests to the web server, and faster load times.
Removal of nested tables means faster client rendering times, and less to download.
Replacement of counting in php for table rows for "even/odd" and replacing with css means faster execution times (marginal).
Ran images though PNG gauntlet ( http://pnggauntlet.com/ ) compressing the images a lot with no loss in quality.

There are a few other speed improvements sprinkled in.

As for the progress, I've been converting the portions I actually use. I'll start converting the rest.
Update.php is where I left off (and will look a bit wonky browser side).

I plan on sorting styles.css by page when done.

http://www.sendspace.com/file/gcfebr (file too large to send through forums)

Re: New theme; Any interest?

Posted: Mon Apr 30, 2012 7:13 pm
by wbartels
Because of my study I will take a break with the netjukebox project until September/Oktober 2012.

I really like the idea to get ride of all the tables, but still I would like the possibility for images (menu & button).
Maybe it is a little bit early to say, but the way the website is rendered now doesn’t look nice.
The screenshots look much better than on my computer with Firefox 10 and Safari 5 (graduate looks much different).

Thanks again for the hard work, and I will follow your development.

Willem

Re: New theme; Any interest?

Posted: Tue May 01, 2012 8:34 am
by wbartels
I’m impressed with the fewer requests the script has to make,
Also very clever to combine all the JavaScript’s automatically.

I don’t like the way you compressed for example the initialize.inc.php script.
This will make it less readable. When concert with PHP load times it is better to use a cache system like APC or eAccelerator.

I hope you can leave the program layout the way I use it:

Code: Select all

function someFunction(var) {
	if (...) {
		...
		...
	}
	else if (...) {
		...
	...
}
To still use images in the menu and reduce the number of requests, can be done with something like:
http://www.w3schools.com/css/css_image_sprites.asp
This can also be used for all the small icons.

Re: New theme; Any interest?

Posted: Wed May 02, 2012 3:11 am
by godsyn
Best of both worlds, I'll start work on defining text via css for menus/icons/etc. For example:
Instead of: <a href="favorite.php">favorites</a>
use
<a id="mainmenu-favorites" href="favorite.php"></a>
and in css use:
#mainmenu-favorites{
background-image:url('/path/tp/favorites.png');
}
OR
#mainmenu-favorites:before{
content:'Music I like';
}
Allowing for text, an image, or translations.

Thoughts?

Re: New theme; Any interest?

Posted: Wed May 02, 2012 8:22 am
by wbartels
godsyn wrote:Best of both worlds, I'll start work on defining text via css for menus/icons/etc. For example:
Instead of: <a href="favorite.php">favorites</a>
use
<a id="mainmenu-favorites" href="favorite.php"></a>
and in css use:
#mainmenu-favorites{
background-image:url('/path/tp/favorites.png');
}
OR
#mainmenu-favorites:before{
content:'Music I like';
}
Allowing for text, an image, or translations.

Thoughts?
Yes, a great and flexible solution!

Re: New theme; Any interest?

Posted: Thu May 03, 2012 3:03 am
by godsyn
While this is a css faux pas (separation of content and style), I believe it to be.. better than requiring a translation for each theme.

I'll start on IDing all the elements.

Re: New theme; Any interest?

Posted: Fri May 04, 2012 8:00 pm
by wbartels
I only have looked further in the merge script.
I have made some changes:

Code: Select all

// Merge javascripts with JSMinPlus
$merged = 'javascript-njb/merged.js';
$source = array('javascript-njb/source/initialize.js',
				'javascript-njb/source/overlib.js',
				'javascript-njb/source/overlib_cssstyle.js',
				'javascript-njb/source/sha1.js');

$filemtime = (file_exists($merged)) ? filemtime($merged) : 0;

$modified = false;
foreach ($source as $file)
	if (filemtime($file) > $filemtime) {
		$modified = true;
		break;
	}

if ($modified) {
	require_once(NJB_HOME_DIR . 'include/jsminplus.php');
	$content = '';
	foreach ($source as $file) {
		$script = @file_get_contents($file) or message(__FILE__, __LINE__, 'error', '[b]Failed to open file:[/b][br]' . $file . '[list][*]Check file permission[/list]');
		$content .= JSMinPlus::minify($script);
	}
	if (file_put_contents($merged, $content) === false)
		message(__FILE__, __LINE__, 'error', '[b]Failed to write file:[/b][br]' . $merged);
}

Re: New theme; Any interest?

Posted: Sat May 12, 2012 9:30 pm
by godsyn
Awesome, implemented.

Re: New theme; Any interest?

Posted: Sun May 13, 2012 7:31 pm
by wbartels
Thanks, but here is complete new approach.
This will cache the css and javascripts for a year; because the request urls are unique it will never get an old css or javascript.
I will implement something similar for all the cover art.

config.inc.php

Code: Select all

$cfg['minify']						= true;

header.inc.php

Code: Select all

<?php
//  +------------------------------------------------------------------------+
//  | netjukebox, Copyright © 2001-2012 Willem Bartels                       |
//  |                                                                        |
//  | http://www.netjukebox.nl                                               |
//  | http://forum.netjukebox.nl                                             |
//  |                                                                        |
//  | This program is free software: you can redistribute it and/or modify   |
//  | it under the terms of the GNU General Public License as published by   |
//  | the Free Software Foundation, either version 3 of the License, or      |
//  | (at your option) any later version.                                    |
//  |                                                                        |
//  | This program is distributed in the hope that it will be useful,        |
//  | but WITHOUT ANY WARRANTY; without even the implied warranty of         |
//  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          |
//  | GNU General Public License for more details.                           |
//  |                                                                        |
//  | You should have received a copy of the GNU General Public License      |
//  | along with this program.  If not, see <http://www.gnu.org/licenses/>.  |
//  +------------------------------------------------------------------------+




//  +------------------------------------------------------------------------+
//  | css hash                                                               |
//  +------------------------------------------------------------------------+
function css_hash() {
	global $cfg;
	
	$hash_data = ($cfg['minify']) ? 'CssMin3.0.1' : 'source';
	$hash_data .= $cfg['skin'];
	$hash_data .= filemtime('skin/' . $cfg['skin'] . '/styles.css');
	
	return md5($hash_data);
}




//  +------------------------------------------------------------------------+
//  | javascript hash                                                        |
//  +------------------------------------------------------------------------+
function javascript_hash() {
	global $cfg;
	
	$source = array('javascript-src/initialize.js',
					'javascript-src/overlib.js',
					'javascript-src/overlib_cssstyle.js',
					'javascript-src/sha1.js');
	
	$hash_data = ($cfg['minify']) ? 'JSMinPlus1.4' : 'source';
	foreach ($source as $file)
		$hash_data .= filemtime($file);
	
	return md5($hash_data);
}
...

header.inc.php

Code: Select all

$header['head'] .= "\t" . '<link rel="stylesheet" type="text/css" href="minify.php?action=css&hash=' . css_hash() . '">' . "\n";
$header['head'] .= "\t" . '<script src="minify.php?action=javascript&hash=' . javascript_hash() . '" type="text/javascript"></script>' . "\n";
minify.php

Code: Select all

<?php
//  +------------------------------------------------------------------------+
//  | netjukebox, Copyright © 2001-2012 Willem Bartels                       |
//  |                                                                        |
//  | http://www.netjukebox.nl                                               |
//  | http://forum.netjukebox.nl                                             |
//  |                                                                        |
//  | This program is free software: you can redistribute it and/or modify   |
//  | it under the terms of the GNU General Public License as published by   |
//  | the Free Software Foundation, either version 3 of the License, or      |
//  | (at your option) any later version.                                    |
//  |                                                                        |
//  | This program is distributed in the hope that it will be useful,        |
//  | but WITHOUT ANY WARRANTY; without even the implied warranty of         |
//  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          |
//  | GNU General Public License for more details.                           |
//  |                                                                        |
//  | You should have received a copy of the GNU General Public License      |
//  | along with this program.  If not, see <http://www.gnu.org/licenses/>.  |
//  +------------------------------------------------------------------------+




//  +------------------------------------------------------------------------+
//  | minify.php                                                             |
//  +------------------------------------------------------------------------+
require_once('include/initialize.inc.php');
require_once('include/stream.inc.php');

$action = get('action');

if		($action == 'css')			css();
elseif	($action == 'javascript')	javascript();

exit();



//  +------------------------------------------------------------------------+
//  | css (CssMin)                                                           |
//  +------------------------------------------------------------------------+
function css() {
	global $cfg;
	require_once('include/cssmin.php');
			
	$content = @file_get_contents('skin/' . $cfg['skin'] . '/styles.css');
	$content = str_replace('img/', 'skin/' . $cfg['skin'] . '/img/', $content);
	$content = str_replace('flag/', 'skin/' . $cfg['skin'] . '/flag/', $content);
		
	if ($cfg['minify'])
		$content = CssMin::minify($content);

	header("Cache-Control: max-age=31536000");
	$etag = '"never_expire"';
	streamData($content, 'text/css', false, false, $etag);
}




//  +------------------------------------------------------------------------+
//  | javascript (JSMinPlus)                                                 |
//  +------------------------------------------------------------------------+
function javascript() {
	global $cfg;
	require_once('include/jsminplus.php');
	
	$source = array('javascript-src/initialize.js',
					'javascript-src/overlib.js',
					'javascript-src/overlib_cssstyle.js',
					'javascript-src/sha1.js');
	
	$content = '';
	foreach ($source as $file)
		$content .= @file_get_contents($file);
	
	if ($cfg['minify'])	
		$content = JSMinPlus::minify($content);
	
	header("Cache-Control: max-age=31536000");
	$etag = '"never_expire"';
	streamData($content, 'application/javascript', false, false, $etag);
}
?>