Minify Textpattern CSS for speed

admin-ajax

Textpattern CSS typically uses cascading stylesheets to style its text output to the browser. These styles should ideally be located in files rather than inline as this ensures the browser render runs smoothly. In an ideal world, styles should be in as few external files as possible to reduce http requests. Textpattern CSS is stored in one file by default, and the styles are presented for relatively easy modification by way of the Admin → Presentation → Styles tab in the admin-side.

When you’re happy with your styles as they are, you can further speed up the loading of your page(s) by minifying the CSS; that is to say, the comment and white space will be trimmed back, the size of the CSS ruleset will be smaller and as a result your pages will load in a shorter time. The default CSS for Textpattern 4.5.7 runs to around 35KB, plus a further 1.5KB for the Internet Explorer fallback CSS. Both of these files include helpful comments and advisories if you’re modifying and learning, but they can be trimmed back to save space. In my experience, the most straightforward way of changing nicely-formatted CSS into something a browser can process more quickly is to minify it. If you want a web-based minify tool, check out CSS Compressor (http://csscompressor.com). There are many compressors around on the web, find one that works for you because they all do pretty much the same thing.

Standard issue Textpattern CMS looks like this:

/* ==========================================================================
Styling and layout for all media
 ========================================================================== */
/* HTML5 display definitions
 ========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
/* 1 */
display: inline-block;
/* 2 */
vertical-align: baseline;
}

Lots of comments, lots of line breaks – it’s easy to interpret and read, but can be shrunk down considerably with a compressor. Copy and paste the CSS rules from your Textpattern site into your CSS compressor of choice and note the difference in the output:

article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}

No comments, no line breaks, and it’s much neater overall. You might think it’s uglier, but your browser doesn’t care. Copy and paste the compressed code into Admin → Presentation → Styles and click or tap Save. If I do this on the standard issue Textpattern 4.5.7 styles, it reduces the CSS payload size from 35KB to 15KB. That’s less than half its original size.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

Tags: , , , , , , , , , | Posted under Textpattern | Leave a comment

Prestashop 101 (1.6) Day 8: Taxes, Currencies, Payments

It’s time to deal with Prestashop Taxes and currencies, and see how to target different taxation areas with the use of tax rules

Learn More

Tags: , , , | Posted under PrestaShop | Leave a comment

Opencart – PHP Coding (Constants)

This is the first part of what will be many articles on PHP coding as it involves Opencart. I was hoping to share some of my own knowledge on the subject as well as others along the way. This can be for the beginner coder that is just starting out in the world of PHP , or for the more seasoned coder. Some folks don’t really care to know about the inner workings of PHP but for those that are say for example “going to design their own theme” , it’s good to at least have a basic knowledge of PHP. It would definitely help you understand the magic of Opencart and expedite your development as a whole.

PHP Constants

A constant is an identifier (name) for a simple value. As the name suggests, that value cannot change during the execution of the script (except for magic constants, which aren’t actually constants). A constant is case-sensitive by default. By convention, constant identifiers are always uppercase.

The name of a constant follows the same rules as any label in PHP. A valid constant name starts with a letter or underscore, followed by any number of letters, numbers, or underscores. As a regular expression, it would be expressed thusly: [a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*

Example:

<?php

// Valid constant names
define("FOO",     "something");
define("FOO2",    "something else");
define("FOO_BAR", "something more");

// Invalid constant names
define("2FOO",    "something");

// This is valid, but should be avoided:
// PHP may one day provide a magical constant
// that will break your script
define("__FOO__", "something");

Now let’s look at an example of where Constants can be found defined in Opencart. In your Opencart store directory open /config.php after you run the install and you will see quite a few constants. Here is an example:

<?php

// HTTP

define('HTTP_SERVER', '*******************');

define('HTTP_IMAGE', '*******************');

define('HTTP_ADMIN', '********************');



// HTTPS

define('HTTPS_SERVER', '*******************');

define('HTTPS_IMAGE', '********************');



// DIR

define('DIR_APPLICATION', '*******************');

define('DIR_SYSTEM', '*******************');

define('DIR_DATABASE', '*******************');

define('DIR_LANGUAGE', '*******************');

define('DIR_TEMPLATE', '*******************');

define('DIR_CONFIG', '*******************');

define('DIR_IMAGE', '*******************');

define('DIR_CACHE', '*******************');

define('DIR_DOWNLOAD', '*******************');

define('DIR_LOGS', '*******************');



// DB

define('DB_DRIVER', 'mysql');

define('DB_HOSTNAME', 'localhost');

define('DB_USERNAME', '*******************');

define('DB_PASSWORD', '*******************');

define('DB_DATABASE', '*******************');

define('DB_PREFIX', '');

?>

The **************** is hiding my own details for security reasons. Since this config.php file is included at the top of each and every single Opencart page on the front end then you can use the constants at will. Here is an example of how you could use the constant DIR_IMAGE:

		} elseif (!empty($category_info) && is_file(DIR_IMAGE . $category_info['image'])) {

This is taken from category.php

When using a constant you don’t have to use a $ like you would in a variable. The important thing is that the way the constant is spelled matches across the board. Remember that a constant is case sensitive too.

Using CONST

You can also just use

<code><span class="kwd">const</span><span class="pln"> FOO </span><span class="pun">=</span> <span class="str">'BAR'</span><span class="pun">;</span></code>

However, remember that CONST cannot be used to conditionally define constants. It has to be used in the outermost scope.

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under OpenCart | Leave a comment