New theme; Any interest?

General discussion about netjukebox
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

New theme; Any interest?

Post 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
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post 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.
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post by godsyn »

Index, all tables gone, pure CSS goodness. 100% themeable.
[JS DISABLED TO SHOW WARNING]
Image
[SEARCH]
Image
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post by godsyn »

Progress report: about 50% done converting everything. Page size is about 50% less, and load times are 50% to 75% faster.
User avatar
wbartels
netjukebox developer
Posts: 872
Joined: Thu Nov 04, 2004 3:12 pm
Location: Netherlands
Contact:

Re: New theme; Any interest?

Post 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.
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post 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.
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post 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)
User avatar
wbartels
netjukebox developer
Posts: 872
Joined: Thu Nov 04, 2004 3:12 pm
Location: Netherlands
Contact:

Re: New theme; Any interest?

Post 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
User avatar
wbartels
netjukebox developer
Posts: 872
Joined: Thu Nov 04, 2004 3:12 pm
Location: Netherlands
Contact:

Re: New theme; Any interest?

Post 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.
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post 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?
User avatar
wbartels
netjukebox developer
Posts: 872
Joined: Thu Nov 04, 2004 3:12 pm
Location: Netherlands
Contact:

Re: New theme; Any interest?

Post 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!
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post 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.
User avatar
wbartels
netjukebox developer
Posts: 872
Joined: Thu Nov 04, 2004 3:12 pm
Location: Netherlands
Contact:

Re: New theme; Any interest?

Post 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);
}
godsyn
User
Posts: 11
Joined: Thu Apr 19, 2012 8:10 am

Re: New theme; Any interest?

Post by godsyn »

Awesome, implemented.
User avatar
wbartels
netjukebox developer
Posts: 872
Joined: Thu Nov 04, 2004 3:12 pm
Location: Netherlands
Contact:

Re: New theme; Any interest?

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