New theme; Any interest?

[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.

[godsyn]

Config page. Aside from the icons and the top right "netjukebox" image, 100% css.

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.

[godsyn]

Index, all tables gone, pure CSS goodness. 100% themeable.
[JS DISABLED TO SHOW WARNING]

[SEARCH]

[godsyn]

Progress report: about 50% done converting everything. Page size is about 50% less, and load times are 50% to 75% faster.

[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.

[godsyn]

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.

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.

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

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.

[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)

[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

[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.

[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?

[wbartels]

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!

[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.

[wbartels]

I only have looked further in the merge script.
I have made some changes:

• I removed the touch() functions witch is not really needed and gave an error message on my system.
• And I have added error handling to the script.
• I also found an alternative to jsmin.php; witch is more actively developed: http://crisp.tweakblogs.net/blog/cat/716
  JSMinPlus is part of Minify and can be downloaded from here: http://code.google.com/p/minify/downloads/list

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);
}

[godsyn]

Awesome, implemented.

[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);
}
?>