• Home

Items filtered by date: December 2015

Sunday, 30 November 2014 00:00

Vertical and Horizontal lists

Vertical Lists:

Vertical list with alternative bullet

You can use any image for a list bullet as shown below but they must be small enought to fit otherwise the text will become out of alignment with the icon. If you want to use larger images you need to use a different method.

  • Single room with bed and breakfast £30 per person
  • Double Room with bed and breakfast £35 per person
  • (All Prices shown above are per night)
  • (All rooms are en Suite)

HTML

<ul style="margin-left: 40px; list-style-image: url('/images/kb/2014/498/lists-with-large-custom-icons-that-are-vertically-aligned/tick.png');">
	<li>Single room with bed and breakfast &pound;30 per person</li>
	<li>Double Room with bed and breakfast &pound;35 per person</li>
	<li>(All Prices shown above are per night)</li>
	<li>(All rooms are en Suite)</li>
</ul>

Vertical list with Icons

  • Disable bullet points and then use backgrounds and padding on the <li> to get same effect, however this is then not using bullet images and could possible cause cropping.
  • Use position: relative and then move the text with a top: -10px etc.. This works and still uses bullet points

position: relative method

This method sets a separate icon for each <li> item although you can set a global icon in the <ul>. When you do this the text in the <li> is moved out of horizontal alignment with the icon so it looks messey. To fix this I have surrounded the 'text'/'the whole on the <li> contents' and then I have used a position: relative and top: -10px statement to move the text back into the center of the icons. You now have a nice looking list with large custom icons. The position: relative in the <ul> is important for this to work. You can also put all of the styling into a CSS file if you want.

  • Wi-Fi
  • Tea and Coffee
  • TV
  • Fresh Towels
  • Our stay includes a traditional English breakfast.
  • We also have a variation of cereals and fruits available.

HTML

<ul style="margin-left: 40px; position: relative;">
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/wi_fi_32.png');"><span style="position: relative; top: -10px;">Wi-Fi</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/coffee_maker_32.png');"><span style="position: relative; top: -10px;">Tea and Coffee</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/television_32.png');"><span style="position: relative; top: -10px;">TV</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/towel_32.png');"><span style="position: relative; top: -10px;">Fresh Towels</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/bulls-eye-eggs-with-toast-and-bacon_32.png');"><span style="position: relative; top: -10px;">Our stay includes a traditional English breakfast.</span></li>
	<li style="list-style-image: url('/images/kb/2014/498/small-icons/corn_flakes_32.png');"><span style="position: relative; top: -10px;">We also have a variation of cereals and fruits available.</span></li>
</ul>

 

 

Horizontal Lists:

Joomlashine Version

grid layout works by splitting the width up by % but on 'mobile' devices, grids fallback to 1 vertical column. Thi sis not ideal in all situations but is an option.

HTML

<div class="grid-layout">
	<div>Text in column 1</div>
	<div>Text in column 2</div>
</div>

Centered Horizontal Ordered or UnOrdered List with no bullet points

This is method is really useful for making horizontal menus. You can make all of the items appear on the same line if you make the <ul> wider. I have not tried playing with min-width and max-width but they should work.

  • Electrician in Kent
  • Electrician in Canterbury
  • Electrician in Dover
  • Electrician in Ashford
 

HTML

<ul>
    <li>Electrician in Kent</li>
    <li>Electrician in Canterbury</li>
    <li>Electrician in Dover</li>
    <li>Electrician in Ashford</li>
</ul>

CSS

ul {
	list-style: none;
	margin: 0 auto;
	width: 400px;
	padding: 0;
}

li {
	float: left;
}

DIV Inline List (Joomla Footer Keyword List )

  • Solar Thermal Panels in Lincolnshire
  • Ground Heat Source Pumps in Lincolnshire
  • Wind Turbine Installations in Lincolnshire
  • Renewable Energy Services in Lincolnshire
  • Solar Photovoltaic Panels in Lincolnshire
  • All Ways Green Ltd

HTML

<ul style="list-style: none;">
	<li style="display: inline;">Solar Thermal Panels in Lincolnshire</li>
	<li style="display: inline;">Ground Heat Source Pumps in Lincolnshire</li>
	<li style="display: inline;">Wind Turbine Installations in Lincolnshire</li>
	<li style="display: inline;">Renewable Energy Services in Lincolnshire</li>
	<li style="display: inline;">Solar Photovoltaic Panels in Lincolnshire</li>
	<li style="display: inline;">All Ways Green Ltd</li>
</ul>

or

  • this make a nice horizontal list with no styling.
  • not sure what the outside does and not 100% tested
  • Electrician in Kent
  • Electrician in Canterbury
  • Electrician in Dover
  • Electrician in Ashford
 

CSS

.centered-list li {
	float: left;
	list-style: none outside none;
	padding: 5px;
}

HTML

<ul class="centered-list">
	<li>Electrician in Kent</li>
	<li>Electrician in Canterbury</li>
	<li>Electrician in Dover</li>
	<li>Electrician in Ashford</li>
</ul>
<div style="clear: both;">&nbsp;</div>

you can also use the line below instead of inline CSS

<li style="float: left; list-style: none outside none; padding: 5px;"></li>

DIV Horizontal List

This is a basic horizontal list using <div>

HTML

<div style="text-align: center; valign: top; background-color: white;">

	<div style="width: 150px; display: inline-block;">
		<a title="City and Guilds NPTC" href="http://www.nptc.org.uk/" target="_blank">
			<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" alt="City and Guilds NPTC" />
		</a>
	</div>	
	
	<div style="width: 150px; display: inline-block;">
		<a title="International Society of Arboriculture" href="http://www.isa-arbor.com/" target="_blank">
			<img src="/images/modules/498/medium-icons/international-society-of-arboriculture.jpg" alt="International Society of Arboriculture" />
		</a>
	</div>
	
	<div style="width: 150px; display: inline-block;">
		<a title="Constuction Line" href="http://www.constructionline.co.uk/" target="_blank">
			<img src="/images/modules/498/medium-icons/constuction-line.png" alt="Constuction Line" />
		</a>
	</div>
	
	<div style="width: 150px; display: inline-block;">
		<a title="Acclaim Accreditation" href="http://www.constructionline.co.uk/static/acclaim/" target="_blank">
			<img src="/images/modules/498/medium-icons/acclaim-accreditation.png" alt="Acclaim Accreditation" />
		</a>
	</div>
	
</div>

Horizontal List - position:relative method

 

  • Electrician in Kent
  • Electrician in Canterbury
  • Electrician in Dover
  • Electrician in Ashford

CSS

<style type="text/css">
	.qw-list {	
		overflow: hidden;
	}
	.qw-list ul {
		list-style: none;
		position: relative;
		float: left;
		display: block;
		left: 50%;
	}
	.qw-list ul li {
		position: relative;
		float: left;
		display: block;
		right: 50%;
	}
</style>

HTML

<div class="qw-list">
	<ul>
		<li>Electrician in Kent</li>
		<li>Electrician in Canterbury</li>
		<li>Electrician in Dover</li>
		<li>Electrician in Ashford</li>
	</ul>
</div>

 Horizontal List / Menu (Simple)

  • Electrician in Kent
  • Electrician in Canterbury
  • Electrician in Dover
  • Electrician in Ashford

CSS

<style type="text/css">
	ul.qw-divmenu {
		width: 75%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
	ul.qw-divmenu li {
		display: inline-block;
	}
</style>

HTML

<ul class="qw-divmenu">
	<li>Electrician in Kent</li>
	<li>Electrician in Canterbury</li>
	<li>Electrician in Dover</li>
	<li>Electrician in Ashford</li>
</ul>

Ordered and Un-Ordered List Method <li>

I came across this method at WebFusion where they took a clever method for making list with images by using ordered and unoredered lists and replacing the bullet point wiht an image.

So this method will requires some html code and some CSS code. The CSS code could be inline if you needed.

 

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

CSS

ul.icon_list {
	list-style: none;
}

.icon_list li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
}

.medium .customised {
	/*background-position: 0px -4695px;*/
}

.medium .flexible {
	/*background-position: 0px -4895px;*/
}

.icon_list.medium li {
	padding-left: 60px;
	background-color: transparent;
	background-image: url("images/modules/498/small-icons/television_32.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	/*background-position: 0px 5px;*/
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
}

This CSS code utilises image sprites but can easily be adapted to use normal images

HTML

<ul class="icon_list medium green">
	<li class="customised">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</li>
	<li class="flexible">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
	</li>
</ul>

Using Icons as bullet points

  • Address: 198 Example street, Suite 7s new York, NY 10013

  • Phone: 112 345 6798

  • Email: example@email.com

 

CSS

.fu-list li {
	clear: both;
	margin: 15px 0 0;	
	padding-bottom: 0;
	list-style-type: none;
	list-style-position: outside;
}

.fu-list .fu-icon-wrapper {
	width: 20px;
	height: auto;
	line-height: 24px;	
	margin: 1px 10px 0 0;	
	z-index: 9;
	text-align: center; /* evens all the icons up */
	float: left;
}

.fu-list .fu-icon-wrapper i[class*="fa"] {
	font-size: 18px;
	display: block !important;
	color: #000;
}

.fu-list .fu-content {
	overflow: hidden; /* this prevents the text flowing under the icon */
}

.fu-list .fu-content p {
	padding: 0;
	margin: 0;
}

HTML

<ul class="fu-list">			
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i></div>			
		<div class="fu-content"><p>Address: 198 Example street, Suite 7s new York, NY 10013</p></div>			
	</li>				
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-mobile"></i></div>			
		<div class="fu-content"><p>Phone: 112 345 6798</p></div>			
	</li>				
	<li>		
		<div class="fu-icon-wrapper"><i class="fa fa-envelope"></i></div>			
		<div class="fu-content"><p>Email:&nbsp;<a href="mailto:example@email.com">example@email.com</a></p></div>			
	</li>				
</ul>

<div style="clear: both;">&nbsp;</div>

Notes

  • This requires that you have FontAwesome installed
  • This also employs a different method for making a list

Product List with Manual Icons

This is a really nice solution to having icons in a list.

CSS

.product-list {
	font-family: wf_segoe-ui_normal, 'Segoe UI', Segoe, 'Segoe WP', Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
}

.product-list ul {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.product-list li {
	margin: 0;
	padding: 0;
	line-height: 1.25;
	display: block;
	margin: 0 0 0.75em;
	font-size: 1em;	
}

.product-list li.heading {
	font-size: 1em;
	font-weight: normal;
	margin-bottom: 0.65em;
}

.product-list .product-link {
}

.product-list li a {
	color: #1A1A1A;
	font-size: 0.9em;    
	font-size: 1em;
	cursor: pointer;
	text-decoration: none;
	height: 10px;
	vertical-align: top;
}

.product-list li img {
	display: inline-block;
	height: 26px;
	width: 26px;
	margin-bottom: -0.45em;
	margin-right: 10px;
	max-width: 100%;
	border: none;
}

.product-list li img.product-left {
   float: left;
}

@screen and (min-width: 540px;) {
	.product-list ul:first-child {
		margin-top: 0em;
	}
}

HTML

<div class="product-list">
	<ul>
		<li class="heading">Product List Title</li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 1<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 2<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 3<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 4<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
		<li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 5<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li>
	</ul>
</div>

 

Published in Styled Elements
Read more...
Sunday, 30 November 2014 00:00

Increase PHP and phpMyAdmin Execution Time

Just like PHP (ie php.ini), phpMyAdmin also has its own execution time limit. Why? I dont know.

You are most likely to see an error like the one below:

Fatal error: Maximum execution time of 60 seconds exceeded in C:\xampp\phpmyadmin\libraries\dbi\mysql.dbi.lib.php on line 140

To increase the phpMyAmin execution time, you need to edit the file

Add this line to xampp\phpmyadmin\config.inc.php

$cfg['ExecTimeLimit']=6000;

You might also want to change the settings below in the normal php.ini file if you still are getting timeout errors.

And Change xampp\php\php.ini to

post_max_size =750M 
upload_max_filesize =750M   
max_execution_time =5000
max_input_time =5000
memory_limit =1000M

And change xampp\mysql\bin\my.ini

max_allowed_packet =200M
Published in PHP
Read more...
Sunday, 30 November 2014 00:00

CSS Processing Priority and Direction Rules

  • I always believed that css when parsed was processed from the top down with no exceptions. Although it does read from top to bottom and process in that direction there is a prior level to that.
  • It appears that the css is parsed in element levels first. it scans each element level and then goes down the page for each level ie. each deeper level has the ability to overide its parent. see examples below:

Example 1

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact fieldset p {padding-left: 60px;} /* correct drop down placement */

Even thought the padding-left is after, the first line take presidence because it is further down the element chain. so line 1 will apply.

Example 2

#contact #center_column p {margin:0; padding:0 0 10px 0;}
#contact #center_column fieldset p {padding-left: 60px;} /* correct drop down placement */

In this example line 2 will be applied because the are at the same element level, but then line 2 is after line 1 so is applied as you normally expect css to work.

Published in CSS
Read more...
Sunday, 30 November 2014 00:00

Nice PayPal Button Examples and Syntax

Full Syntax

{nicepaypal:button type|amount|item name|item number|shipping|shipping2|tax|item quantity|weight|option1|option2}

Real World Examples

{nicepaypal:cart|79.99|Custom Teeth Whitening Trays|||||field;Enter Quantity;1;3||}

<p>{nicepaypal:cart|79.99|Custom Teeth Whitening Trays|||||field;<strong>Enter Quantity</strong>;1;}</p>
Published in PayPal
Read more...
Friday, 28 November 2014 00:00

My Joomla Security Notes

Fingerprinting

To prevent version of Joomla being identified. A way to check if you're running a Joomla site and what version by what files and directories are present. Also will prevent Blind Elephant working. One of the easiest ways for an attacker to decide if your site is a potential Joomla! target is to perform a rudimentary visual fingerprinting.

Template Issues, Deny these links via htaccess

Delete These

* You should also remove (if not needed) the default joomla images. Presence of Certain default files and folders can ID the Joomla Version. Delete the following:

Directories:

  • ../images/stories/food
  • ../images/stories/fruit

Files:

  • articles.jpg, clock.jpg, ext_com.png, ext_lang.png, ext_mod.png, ext_plugin.png, joomla-dev_cycle.png,
  • key.jpg, pastarchives.jpg, powered_by.png, taking_notes.jpg, web_links.jpg
  • * deny access to xml and language.ini files (via htaccess in ## This also blocks fingerprinting attacks browsing for XML and INI file (or <Files ~ "\.xml$">))

Other Fingerprinting

  • Disable PHP easter eggs (Visual Fingerprinting)(via htaccess)

 Other Security

  • disable anonymous ftp in your cPanel
  • your site should have only a handful of entry points, namely the index.php and index2.php files inside your site's root and the administrator and xmlrpc subdirectories.
    (via htaccess / Joomla Backend Protection Section, this restricts Joomlas administrator, components, modules and plugins folders)
  • SQLi protection / prevent SQLi Attacks (via htaccess)
  • SQLi protection / prevent SQLi Attacks (via joomla extensions), JHackgurad from siteground, possibly sh404SEF
  • remove or replace - x-powered-by header, usually says something like PHP version X-Powered-By: PHP/5.3.2 , use clean Response plugin, possibly use htaccess
  • remove meta tag generator joomla, sh404SEF does this, if not available use ByeBye Generator
  • Turn off and uninstall what you don't use. There's a security benefit to this practice also since unused code can still be the source of a vulnerability that gets you cracked.
  • disallow images in robots.txt
  • it is suggested super admin user should be in the 1-61 range when you change it
  • remove the X-Powered-By header, edit the php.ini, find expose_php=Off and change to expose_php=on
  • joomla when using gzip apparently adds a X-Powered-By Header, remove with plugin
  • remove joomla id in responses when gzip is used (clean response)
  • turn php errors off in php.ini
  • make sure jos_ or jos151_ prefix are not used (see note below for instructions to change)
  • Upload and configure custom .htaccess file
  • use strong passwords (ie cPanel)
  • htaccess password for all non joomla directories (via htaccess)
  • stop hotlink (cpanel or htaccess)
  • remove unused XML-RPC Server (if not needed)
  • admin to SSL (only if cert is installed)
  • enable SSL
  • Remove (if not needed) the standard images from the images folder. The stories/fruit and stories/food are another way to check if you're running a Joomla site
  • Turn Joomla Error Reporting off, Global Configuration page (see notes)
  • Turn PHP Error Reporting off (if not needed)
  • Remove the XML-RPC server if you don't need it.
  • remove joomla generator (might be done sh404sef)
  • add reCaptcha boxes where needed ie user registration
  • Restrict Access to the Administrator Section
  • hidden URL for administrator access via jsecure
  • username and password for admin directory via htaccess
  • Consider proper ACL for backend when there are multiple administrators etc.. dont have everyone as Super Admins
  • restrict access to the installer - when using mulitple admins
  • make sure host has suPHP running and that all file permission are directories have 0755 permissions and all regular files 0644 permissions

  • Error Reporting to None

    Prevents any minor glitch to reveal sensitive server configuration information to a potential hacker). If this doesn't work, disabling PHP's error output to the browser in the php.ini. Leaving Error Reporting set to anything else except NONE will slow down your website and give hackers a security hole that they can use to peer into your server settings and PHP environment. Turn it off (NONE) unless you are debugging at the moment. Only use Error Reporting while testing or debugging. Otherwise keep it turned off.

  • robots.txt is a security nightmare.

    - create deny lists for certain folders. better than identifying them in robots.txt
    - Think twice about what you put in your robots.txt, since this is a common source for attackers to find interesting URLs
    - ideally - make everything dissallowed and then add exceptions. this will not show what folders are there

  • if suhosin patch is installed this can cause unxplained issues where stuff will not run. it cannot be disabled by users but can be put in simulation mode (same thing)

    find extension="suhosin.so" and add the following line below to give
    extension="suhosin.so"
    suhosin.simulation="On"

Published in Joomla
Read more...
Friday, 28 November 2014 00:00

URL Anatomy with PHP Server Environment Variables

This useful article shows you what parts of a URL you can build with .htaccess server environmental variables.

URL Anatomy

Below I have named the various parts of a URL and given the corresponding global PHP variable. This is not an exahstive list as you can get usrrname passwords from a URL

https://user123:password1@video.quantumwarp.com:8080/subfolder/subfolder2/index.php?turnip=51&alien=54#myniceheading
1       2      3          4     5              6    7                              8                  9             10

## PHP Variables ##
$_SERVER['SERVER_PROTOCOL'] 1-2   (:// is not included)
$_SERVER['HTTPS'];                (This is a Boolean)
$_SERVER['PHP_AUTH_USER']   2-3
$_SERVER['PHP_AUTH_PW']     3-4   (: and @ are not included)
$_SERVER['SCRIPT_NAME'];    4-8
$_SERVER['PHP_SELF'];       4-8
$_SERVER['HTTP_HOST'];      4-6
$_SERVER['SERVER_NAME'];    4-6
$_SERVER['SERVER_PORT'];    6-7   (: is not included)
$_SERVER['REQUEST_URI'];    7-10  (fragment might not be included)
$_SERVER['QUERY_STRING'];   8-9   (? is not included)

## Part Names ##
Protocol                    1-2
Username                    2-3
Password                    3-4
Sub Domain                  4-5
Domain                      5-6
Port                        6-7
Path                        7-8
Query                       8-9
Fragment                    9-10   (some might refer to this as an Anchor)

Links

Published in htaccess
Read more...
Friday, 28 November 2014 00:00

Change the Joomla database prefix

To change the database prefix to prevent SQL Injection Attack (if not done during install)

Backup your database and site first.

Method 1 - PHPMyAdmin (inbuilt)

Newer version of PHPMyAdmin have a table prefix changer inbuilt and is now the prefered method.

  • Open up your Joomla database in PHPMyAdmin
  • Check All tables. If you can see them all exand the number of tables you can see on the page.
  • At the bottom, With Selected: , choose Replace table prefix
  • It will now ask you for the From prefix which is your current one jos_ , you should fill this in the box. You can also usually see the database prefix in the column on the left. The To prefix should be a random 5 characters using upper case, lower case and numbers (ie TrFgH_).
  • Click submit
  • Done

Method 2 - Old Text File method

Taken from here

  • Make a note of you database prefix either from joomla itself or the configuration.php file. For this example we will assume jos_
  • Go to PHPMyAdmin and export your database as a SQL file
  • Open database SQL file in a text editor (Notepad++).
    • Search and replace (Ctrl+h in Notepad++)  jos_ with your new database prefix, it should be a random 5 characters using upper case, lower case and numbers (ie TrFgH_).
    • Save the file
  • Go in phpMyAdmin
    • select your Joomla database and empty it of tables and data (i.e. Truncate)
    • import the new SQL database file from above in to your Joomla database
  • Via ftp edit your configuration.php to refelct the new table prefix. No other details will need to be changed.
  • Done

 

Published in Joomla
Read more...
Friday, 28 November 2014 00:00

Time Cheat Sheet

This table quickly converts times into seconds for the use in htaccess rules.

#-------------------------------------------
# TIME CHEAT SHEET 2
#-------------------------------------------
# 300 5 MIN
# 600 10 MIN
# 900 15 MIN
# 1800 30 MIN
# 2700 45 MIN
#
# 3600 1 HR
# 7200 2 HR
# 10800 3 HR
# 14400 4 HR
# 18000 5 HR
# 36000 10 HR
# 39600 11 HR
# 43200 12 HR
# 46800 13 HR
# 50400 14 HR
# 54000 15 HR
# 86400 24 HR
#
# 86400 1 DAY
# 172800 2 DAY
# 259200 3 DAY
# 345600 4 DAY
# 432000 5 DAY
# 518400 6 DAY
# 604800 7 DAY
#
# 604800 1 WEEK
# 1209600 2 WEEK
# 1814400 3 WEEK
# 2419200 4 WEEK
#
# 2419200 1 MONTH
# 4838400 2 MONTH
# 7257600 3 MONTH
# 9676800 4 MONTH
# 12096000 5 MONTH
# 14515200 6 MONTH
# 16934400 7 MONTH
# 19353600 8 MONTH
# 21772800 9 MONTH
# 24192000 10 MONTH
# 26611200 11 MONTH
# 29030400 12 MONTH

Published in htaccess
Read more...
Thursday, 27 November 2014 00:00

My Joomla Performance Notes

Increased performance for all websites

  • gzip compress files, use either htaccess (quicker) or php (compatable) nb delate is modern gzip
    compressing some file types will cause the file to be larger ie PNG as it is already compress
  • optimize images using Smush IT, makes a big diffference. removes useless data and decreases file size
  • gzip output from dynamic sites, using php headers
  • minify html by removing white spaces
  • aggregate and minify CSS files, gzip output
  • aggregate and minify JAVA files, gzip output (not inline as they might be placed there for a reason)
  • move Javascript(s) to the bottom of the page, usually just above </body>
  • use CSS sprites instead of multiple images, a CSS sprite is where all the images are made in to one and called different
  • optimize database via phpmyadmin when nessasary, recommended once a week, select all the joomla tables in the joomla database and then select optimize.
  • keep images to a minimum
  • dont gzip items more than once in a chain
  • have a suitable htaccess, to large and it could slow things down
  • disable Etags, unless you actually need them they are a waste of time especially in shared server environments
  • make sure google analytics is latest version for speed, use asynchronous version
  • make sure all you have the latest version of JAVA and scripts

  • google prefers expires and set to 1 month

  • look at apache redirect and double slash section and make run quicker ie expressions ?*+

    (.*) is really hungry

  • joomla recommends output buffering is disabled. this most likely creates a performance increase.

caching will increase a users experience but not increase raw speed for intial visits such as google

  • set far future expires headers for files, this will tell the browser until the file expires it does not need to re-download, PHP or htaccess. htaccess is quicker
  • set far future expires headers for dynamic content, this has to be done by PHP
  • recommend lenght for far future is 7 days minimum, this allows you to change in a short time if you need. when set unless the clients browser is purged or runs out of room this header will be obeyed

performance items applied to a joomla setup

see - http://www.joomlaperformance.com/articles/performance/so_you_want_to_speed_up_joomla_3_14.html

  • joomla global cache on, 60 mins, set in global config, i am currently trying JOT Caching instead
    (this a joomla content cache to hold created content)
  • page cache on, 60 mins (this a joomla content cache to hold created content)
  • all modules should have caching turned on, use global settings (easier to manage later) (this a joomla content cache to hold created content)
  • content gzip on, set in global config
  • use JFinalizer or JCH Optimizer (currently prefered) for compressing, minimizing and aggregating js and css
  • optimize image files with Smush IT, using firebug and YSlow,
  • turn on compression of files via htaccess that are not dynamic
  • optimize database via phpmyadmin (see notes in above section)
  • setup plugin order, can be important, each layer passes process content to the next plugin in the list
  • Process all images with Smush IT,
  • make sure google analytics is latest version for speed, use asynchronous version
  • gzip joomla content see above worth 0.2 - 0.4 on a commercial template and little content, uses PHP
  • disable legacy plugin, worth 50ms on code generation with cache on
  • optimize database - via phpmyadmin, select all the joomla tables in the joomla database and then select optimize. do this on a regular basis

  • - joomla and jot cache do not store headers

Notes

when stuff doesnt work try this

  • JCH optimize can break ajax and javascript stuff
  • disabled mootools in template settings (doesnt disable joomlas own mootools, must be standard now)
  • excluded mootools.js in jch optimizer and shit works. wonder why it worked before, when you swapp pages ssearch box goes gay, and sh404sef 404 errors happen
  • dont minify html when using code snippets

caching

  • joomla Far Future Expires Headers plugin, this adds the correct expires headers to
    dynamic content (not etags currently), default settings with 1 hour interval, possible 1 week when happy
  • configure Far Future Expires in htaccess for files, all media files usually. 1 week when happy, longer is better but has issues

NB:

  • google only downloads the html part not images etc..#
  • large ip block list is worth about 2 seconds
  • large ip list can add 1 - 1.5s per page load
  • cache + jcoptimiser worth at least 2 secs
  • install cache cleaner, not performance related but when you have made the changes this is iunvaluable to save time
  • seems best. yoo phoneix with compress and gzip on. no compression on in htaccess. no gzip on in JCH optimiser, cache header plugin on.
  • trying to gzip png files increases load time. optimise images instead
  • dont gzip content more than once and ir could cause excessive use

To Do - investigate

  • yoo login, search css.php needs adding and aggregating
  • htaccess slimming down maybe
  • yoo search .JS needs aggregating
  • somehow make images sprites
  • is sh404sef the quickest
  • xmap cache ? set to 15 mins for now
  • if i turn on main cache yoosearch css goes mental, disbled module cache no will turn on jch minimise css and js
  • if i turn main cache on, the 2 x yoo modules search and login ccc.php references dissapear
  • mess with the global cache option and the 2 x yoo modules (currently yoo search cache turned off yoologin cached 15 mins)
  • add to tickets for jch optimize option of a htaccess compression similiar to jfinalizer. htaccess is quicker. no compression/gzip compatible compression/htaccess compression which also uses real files which is better.
  • install the google toolbar with page rank i think deliver page speed information
  • turn on global cache set to 60 mins miniumm
  • far future headers should be set to 1 week minimum from what i read. will test

These are the headers that are set for the aggregated file:

  • Content-type: text/css or text/javascript
  • Expires: set in admin
  • Last-Modified: set based on the time file was created in cache
  • Cache-Control: Public This enables proxy caching
  • Vary: Accept-Encoding This allows both gzipped and normal version of the file to be cached
  • Content-Encoding: gzip if that option is selected

Performance Page (other notes)

  • benchmark site before optimising (YSlow, WebWait.com, JoomlaPerformance.com, WebsiteOptimization.com)

Cache

  • read caching tutorial (on wiki)
  • enable and configure joomla cache (possibly jot cache) - http://www.theartofjoomla.com/joomla-caching-explained.html
    (turned on, either from Global Configuration or enable the "System Cache" Plugin from Plugin Manager. Sometimes enabling Cache does not go well with cyrillics or special characters used)
  • Turn on page and module caching.
  • set HTTP Cache Headers for joomla dynamic content, use "set max-age= , public , must-revalidate" (check the actual function of this as confilcting reslts)(possibly use private on shop sites)
  • configure server/file cache via htaccess - http://www.mnot.net/cache_docs/

HTML Output

  • CSS, combine, minify and gzip
  • Java Script, combine, minify and gzip
  • move/defer all Java Script to bottom of the page
  • Minify HTML
  • Combine background images in to a css sprite
  • Make sure there aren't any Javascript issues like duplicate scripts, or clashing javascript frameworks. can cause slow performance
  • Enable joomla gzip for HTML output (Site->Global Configuration->Sever->Enable GZip Compression) to test http://www.gidnetwork.com/tools/gzip-test.php

Other

  • configure plugin order
  • optimize image files using smusit (reduces size)
  • remove unused extensions. possibly better to uninstall extension
  • Check for leftover database tables of old components or plugins and drop those tables.
  • Optimize and repair the database tables. Use PhpMyAdmin for this. Or 'Admin Tools from Akeeba, Databse Optimise Plugin
  • Remove/solve 'Not Founds' or '404' errors they have bad effect on speed. The server/ browser is left thinking about how to deal with this missing item
  • use optimised template
  • Turn off Joomla error reporting off.
  • htaccess performance options:
    Enable HTTP Cache Headers
    Enable gzip options
    Disable ETags (for better performance on clustered servers), unless you need them turn them off

  • dont gzip jpg and png because it makes them bigger ? (check this)

Which Parameters are Important?

  1. HTTP requests
  2. Total size
  3. Number of HTML / CSS images
  4. Number of CSS / JS (scripts) files.
  5. Size of CSS / JS / HTML images.
  6. Check for duplicate JS files.
  7. Check for NOT FOUND items.

PHP Compression

compressing a websites output makes the delivery of the content to the browser quicker.

Caching

  • The fact is that proxy and browser caches will be used whether you like it or not. If you don’t configure your site to be cached correctly, it will be cached using whatever defaults the cache’s administrator decides upon.
  • Validators are very important; if one isn’t present, and there isn’t any freshness information (Expires or Cache-Control) available, caches will not store a representation at all.
  • HTTP 1.1 introduced a new class of headers, Cache-Control response headers, to give Web publishers more control over their content, and to address the limitations of Expires.
  • ETags are made out of three components: the INode, MTime, and Size.
  • Removing ETags & Adding Far Future Expires headers is better. ETags require server responses
  • Expires Header - Set a particular time and date when the content will expire, header HTTP date is Greenwich Mean Time (GMT), not local time
    - reponse to this is last accessed or lasst modified
    - ie server rule 2 weks from last modified, 2 weeks from last acssessed, date this sets the expires header

  • Basically most images, css, javascript, and other files can be optimized for faster download by telling your site visitors to cache them for a certain period of time. The default behaviour is to check the last-modified and/or the Etag headers of the file EVERY time it is requested.

  • So a user goes to /home/index.html, and the browser caches all the images and files. Then the user leaves the site and comes back later, and the browser has to send If-Modified-Since conditional GET requests for every cached item, basically to see if the file has been changed and if they should update their cache.

  • Dynamic content cannot be cached via htaccess, ie joomla unless you add the headers to the output via php

  • When files are then cached by your site visitors they do not send the If-Modified-Since until the set cache time has completed.

  • Once an item is cached it will remain cached until it expires or gets revalidated

  • The Expires and cache-control headers can’t be circumvented; unless the cache (either browser or proxy) runs out of room and has to delete the representations

  • the cached copy will be used until then which means less http requests

  • Expires/max-age are superior as they mean there's no need for a request. However, ETag/Last-Modified is still better than nothing.

  • less http requests

  • ETag and Last-Modified headers are on by default

  • BE WARNED. Do not set to long a expire time

  • YSlow has a minimum far future date - to be added here soon i think it is 1 week google is 1 month and wants expires

The Relevant Cache-Control Headers are:

Cache-Control : max-age = [delta-seconds]
Modifies the expiration mechanism, overriding the Expires header. Max-age implies Cache-Control : public.

Cache-Control : public
Indicates that the object may be stored in a cache. This is the default.

Cache-Control : private
Cache-Control : private = [field-name]
Indicates that the object (or specified field) must not be stored in a shared cache and is intended for a single user. It may be stored in a private cache (ie browser cache).

Cache-Control : no-cache
Cache-Control : no-cache = [field-name]
Indicates that the object (or specified field) may be cached, but may not be served to a client unless revalidated with the origin server.

Cache-Control : no-store
Indicates that the item must not be stored in nonvolatile storage, and should be removed as soon as possible from volatile storage.

Cache-Control : no-transform
Proxies may convert data from one storage system to another. This directive indicates that (most of) the response must not be transformed. (The RFC allows for transformation of some fields, even with this header present.)

Cache-Control : must-revalidate
Cache-Control : proxy-revalidate
Forces the proxy to revalidate the page even if the client will accept a stale response. Read the RFC before using these headers, there are restrictions on their use.

Caveats

  • HTTP/1.0 has minimal cache control and only understands the Pragma: no-cache header. Caches using HTTP/1.0 will ignore the Expires and Cache-Control headers.
  • None of the Cache-Control directives ensure privacy or security of data. The directives "private" and "no-store" assist in privacy and security, but they are not intended to substitute for authentication and encryption.

Notes

  • "max-age" value indicates the time difference (in seconds) after which the content will be expired and reloaded from the server

  • "public" keyword presence indicates that any system along the route may cache the response

  • "must-revalidate" indicates caching systems to obey other header information you may provide at a later time about the cache. This should help preventing stale caching (that is, caching that delivers content that is outdated).

  • by eliminating the Last-Modified and ETags headers, you are eliminating validation requests, leading to a decreased response time. This should work fine in most cases when dealing with static, rarely updated content.

    Example 1

    http://tutorialpedia.org/tutorials/Apache+enable+file+caching+with+htaccess.html

    Example 2

    http://linuxdevcenter.com/pub/a/linux/2002/02/28/cachefriendly.html?page=2

  • The reason I remove and disable the ETag is because supposedly some browsers will ignore your Expires header when it’s present:

  • The reason I remove the Last-Modified header is for the same reason:

  • The reason I set the Cache-Control header to ‘public’ is so the browser will cache media over HTTPS (see tip #3):

  • The reason I set the Cache-Control header to ‘no-transform’ is to prevent proxies from modifying my content.

  • Vary: Accept-Encoding response header. This instructs the proxies to cache two versions of the resource: one compressed, and one uncompressed.

Headers

Example

Header unset Server
Header unset Last-Modified
Header unset Date
Header unset Accept-Ranges
Header unset Content-Length
Header unset Keep-Alive
Header unset Connection
Header unset Content-Type
Header unset Cache-Control
Header unset Expires
Header unset Pragma:

When I uncomment my changes, then I get the full header:

HTTP/1.x 200 OK
Date: Wed, 17 Sep 2008 19:37:42 GMT
Server: Apache
Last-Modified: Wed, 17 Sep 2008 15:30:07 GMT
Accept-Ranges: bytes
Content-Length: 58
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html

Last-Modified Header

  • The Last-Modified header allows validation based on the component's timestamp

  • Removing this reduces HTTP requests and disables this type of cache header

  • The most common validator is the time that the document last changed, as communicated in

  • Last-Modified header. When a cache has an representation stored that includes a Last-Modified header,

  • it can use it to ask the server if the representation has changed since the last time it was seen, with an If-Modified-Since request.

  • if this header is present the browser checks back to the server that is has not been changed and then it uses the cached version

Last-Modified and Cache Control (No Expires set, i think)

  • Server sends Last-Modified header with datetime value that means the time when content was changed last time.

    Cache-Control: must-revalidate
    Last-Modified: 15 Sep 2008 17:43:00 GMT

  • The first header Cache-Control: must-revalidate means that browser must send validation request every time even if there is already cache entry exists for this object. (because no Expires set)
  • Browser receives the content and stores it in the cache along with the last modified value. Next time browser will send additional header:

    If-Modified-Since: 15 Sep 2008 17:43:00 GMT

  • This header means that browser has cache entry that was last changed 17:43.
  • Then server will compare the time with last modified time of actual content and if it was changed the server will send the whole updated object along with new Last-Modified value.
  • If there were no changes since the previous request then there will be short empty-body answer:

    HTTP/1.x 304 Not Modified

  • And browser will use the cached content.
  • What if server doesn’t send Cache-Control: must-revalidate? Then modern browsers look at profile setting or decide on their own whether to send conditional request. So we better to send Cache-Control to make sure that browser sends conditional request.
  • If we still want Last-Modified header (On its own) for static files and the user presses Refresh button, then the browser will send conditional request and the server will respond

    “304 Not Modified”.

  • If you disable both Last-Modified and ETag browser will have to download the whole content again when user presses Refresh.

Etags

  • The problem with ETags is that they typically are constructed using attributes that make them unique to
  • a specific server hosting a site (maybe a specific inode). ETags won't match when a browser gets the original component from one
  • server and later tries to validate that component on a different server, a situation that is all too common
  • on Web sites that use a cluster of servers to handle requests. ie SHARED HOSTS (or load balanced servers where they do not sync etag data)
  • If you're not taking advantage of the flexible validation model that ETags provide, it's better to just remove the ETag altogether
  • Remove Etag headers for better performance on clustered servers, and if using joomla because of dynamic content
  • Removing the ETag reduces the size of the HTTP headers in both the response and subsequent requests
  • By removing the ETag header, you disable caches and browsers from being able to validate files, so they are forced to rely on your Cache-Control and Expires header.
Published in Joomla
Read more...
Thursday, 27 November 2014 00:00

My Joomla Notes

SEO section

Aet in menu

  • page title = <h1>
  • show title = <h2>

Article options

  • show title = <h2>
  • but menu item overrules it
  • you can set this option in the article aswell for the times it is not used as a menu itme but present in a blog layout

Other notes

  • 1024 screensize = 960px visible in browers (because of the browser window size and scroll bars etc...)
  • if you use a weired url modified like jsecure lite the module hover links will not work becasuse they point to the admin directory
  • disable forgot your password and forgot your username options via menu item (not possible)

  • Standalone Applications must have their own folder, use all lowercase.

    Via ftp, create a folder ../sp/
    All standalone applications must have their own nested folder ../sp/othercms/
    Add a .htaccess folder to ../sp/ to deny access to the folder and sub folders (or appropiate - check)

Editing

JCE Suggestions to send

  • no ability to easily do margin: 0px auto; as you can either set all margins or individually

Joomlashine suggestions to send

  • send to joomla shine
  • add tick to unicons

Gallery Notes

  • simple image gallery = basic plugin, no captions, responsive
  • simple image gallery pro = plugin based gallery + captions - quite good
  • joomgallery = complex gallery but not 100% responsive (use 2 column to get around this. this gallery is all editable by the client

how to rip a website page courtesy of customers

  • copy and paste whole thing into a word document
  • then copy and paste that in to JCE editor and it will strip the junk out
  • edit images as needed
  • done

Front end editing related

  • create article front end
    http://www.cloudaccess.net/joomla-3-0/98-menu-manager/548-create-an-article-menu-item-joomla-3-0.html
  • front end only editing is ideal for those who will never change the layout (ie blog style)
  • backend editing is requied for those who have a blog layout list page because joomla does not allow deleting from front end except via trashed option. joomla also does not allow media manager access from front end
  • need to add a frontend file amanger or add a better file amanger than the inbuilt one. (ie JCE editor or those other ones I found)
  • image only sites only require jce which can delete and upload images. sites that need to use other things like pdfs or change the sliders thing can use the in built media manager (orone of the following media managers). front end media managing seems to be a problem
  • delete article http://stackoverflow.com/questions/17918784/joomla-3-1-front-end-editing-deleting-and-article
  • cannot really delete an article from front end but only change its status to trashed

Joomla Module ACL suggestions

Send this to that guy who did the module acl

  • bug/feature - you cannot edit a module from font end unless that permmision is on, iheritance does not work to custom group
  • in admin make editable.non edtable modules more contrasted
  • allow editing of modules in thefrontrend properely like artilce, at the leat once you finbish editin a module you should be returned to the page you were editing
  • in acl allow.disallow sort ordering
  • ability to hide non editable module (possibly in acl) resaon is customers can still magle module orders
  • possibkly acl allow module posistion change

Other

Published in Joomla
Read more...
Page 52 of 96