freetheweb - Tumblr blog

freetheweb · 14 years ago

Text

W3 Total Cache: Better CSS/JS placement

If you're running a self-hosted WordPress blog and you're looking to squeeze out every last bit of performance, there's a good chance you are using the W3 Total Cache plugin. If you are, then this tutorial is right up your alley!

As you likely already know, one of the options W3 Total Cache provides is the automatic/manual combination and minification of self-hosted CSS and JavaScript files. This is great news! However, if you've ever used this option before and browsed your page source, you'll notice that W3 Total Cache, by default, places your minified files directly after the <head> tag. This can and will cause issues if, for instance, your self-hosted CSS stylesheets rely on external stylesheets to be loaded first, as is the case if you are using Yahoo's CSS Reset or Google Web Fonts, for example. More likely than not, you will want your CSS files to be place right before your </head> tag and your JS files to be placed above your </body> tag.

To remedy this, you will need to modify the source of the W3 Total Cache plugin, as there doesn't appear to be any built-in setting available in the the Minify panel that allows you to change where the minifed files are placed. Note: If you're using the manual mode, a setting for specifying where to place JavaScript files is available, but for some reason, is not for CSS files.

Using the Plugin Editor

Luckily for us, WordPress has its own plugin editor, so making changes to certain files is not that big of a problem.

After logging into your admin panel, expand the Plugins sub-menu and click Editor.

Select "W3 Total Cache" as the plugin you wish to edit.

Next, select "w3-total-cache/lib/index.html". Note: It can be a little tricky to find the right file as WordPress only displays a handful of them at a time.

Then, select "w3-total-cache/lib/W3/Plugin.php".

Finally, select "w3-total-cache/lib/W3/Plugin/Minify.php".

The Code Changes

Once you have successfully opened the "w3-total-cache/lib/W3/Plugin/Minify.php" file, press Ctrl+F in your browser to allow you to easily search the contents of the file and begin searching for the following code:

$head_prepend = '';

Add the code below directly after the code above:

$head_append = '';

Next, search for the following code:

$head_prepend .= $style;

Replace it with the code below (there should be two instances of the code above, search for and replace both):

//$head_prepend .= $style; $head_append .= $style;

Then, once again, search for the following code:

$head_prepend .= $script;

Just like last time, you will need to replace it with the code below (this there should be three instances of the code above, however you will need to search for and replace only the very first instance):

//$head_prepend .= $script; $body_append .= $script;

Finally, we will need to define what $head_append should do (it doesn't exist by default). To do this, search for the following code:

if ($head_prepend != '') { $buffer = preg_replace('~<head(\s+[^<>]+)*>~Ui', '\\0' . $head_prepend, $buffer, 1); }

Add the following code directly below the code above:

if ($head_append != '') { $buffer = preg_replace('~<\\/head>~', $head_append . '\\0', $buffer, 1); }

All Done!

Click 'Update File' to save your changes. If everything went well, you should see a big yellow box running across the screen displaying the message, "File edited successfully."

If any fatal errors occurred, WordPress will tell you and automatically disable the plugin. In this case, you should restore Minify.php to its original state and ask for help either in a comment below or on the WordPress support forums, more specifically this thread.

Thank you for reading! If this helped you out, share this with a friend or add a comment below. I'd really appreciate it...

#CSS #JavaScript #Minification #PHP #W3 Total Cache #WordPress

5 notes · View notes

freetheweb · 14 years ago

Text

WordPress: Obtaining timezone accurate ISO 8601 strings

If you're rockin' HTML5 in your WordPress template and want to utilize some of its new tags to push SEO to the max, you will likely be wanting to wrap your published and modified (if applicable) post dates in the new <time> tag, like so:

Posted: <time datetime="2011-10-05T05:16:51-05:00" pubdate>October 5th, 2011 at 5:16 AM</time>.

Great, me too! But how do you obtain the ISO 8601 string to place in the datetime attribute in the first place? And better yet, how do you get the correct timezone as well? Note: The timezone is at the very end of the string (e.g. -05:00).

Two Steps Forward, One Step Back

It's easy enough to obtain an ISO 8601 string in WordPress. The following code is enough to do just that:

<?php echo get_the_time('c'); ?>

However, this will not have the timezone intact (e.g. 2011-10-05T05:16:51-00:00). In order to get the correct timezome, things will need to get a little more complicated than a simple one-liner piece of code.

Show Me the Money!

Let's just get right down to it - add this function to your functions.php template file and you're good to go! Note: Your WordPress blog must be using timezone strings (e.g. "Chicago" rather than "UTC-5").

if (!function_exists('get_iso_8601')): function get_iso_8601() { $format = 'Y-m-d G:i:s'; $timestamp = get_the_time('U'); $timezone = get_option('timezone_string'); $datetime = new DateTime(date_i18n($format, $timestamp), new DateTimeZone($timezone)); return $datetime->format('c'); } endif;

Usage:

<?php echo get_iso_8601(); ?>

Note: Be sure to use this line only when you are in The Loop (e.g. single.php).

Explanation:

This function uses a combination of both PHP and WordPress functions in order to obtain the correct timezone (if you know of an easier/better way, post a comment below).

$format = 'Y-m-d G:i:s'; Describes the format of the DateTime object (e.g. 2011-10-05T05:16:51). It is very important that the format does not include the timezone because, if it does, the DateTimeZone object will be completely ignored.

$timestamp = get_the_time('U'); Gets a Unix timestamp of our post's published date.

$timezone = get_option('timezone_string'); Gets the timezone setting of our blog (in string format) from the database (e.g. "America/Chicago").

Let's break this line up into separate pieces for analyzing: $datetime = new DateTime(date_i18n($format, $timestamp), new DateTimeZone($timezone));

$datetime = new DateTime($time, $timezone); PHP's DateTime constructor takes a date/time string (represented by $time) and a timezone (represented by $timezone). We will need to supply the date/time our post was published and the timezone of our blog in order to obtain a timezone accurate ISO 8601 string. This is done using the date_i18n function and DateTimeZone class as shown below:

date_i18n($format, $timestamp) Gets the date in a localized format, based on the timestamp (i.e. this is what actually creates the "2011-10-05T05:16:51" string). It is very important that the format does not include the timezone because, if it does, the DateTimeZone object will be completely ignored.

new DateTimeZone($timezone) Sets the timezone of a DateTime object. Must be in string format and a valid timezone (e.g. "America/Chicago", "UTC-5" will not work).

return $datetime->format('c'); After it is all said and done, return the date/time string using the ISO 8601 format.

Final Thoughts

Now that wasn't too bad, was it? My only wish would be that the original code <?php echo get_the_time('c'); ?> would take into account the timezone already but, unfortunately, it does not. Good thing it was relatively easy to create our own function in order to add this crucial functionality to our awesome, SEO-compliant blog!

#DateTime #HTML #HTML5 #PHP #SEO #Timezone #WordPress

4 notes · View notes

freetheweb · 14 years ago

Text

The awesomeness that is Haml and Sass

### What is Haml/Sass? Recently, I stumbled upon two wonderful gems: [Haml](http://haml-lang.com "#haml") and [Sass](http://sass-lang.com "Sass - Syntactically Awesome Stylesheets"). Utilizing both not only allows developers to easily write well-structured, human-readable code, but it also allows them to write said code faster, quicker, and with less lines/confusion. ### Writing HTML5 Code, the Haml Way Haml just plain looks beautiful - more so than basic HTML5, in my opinion. It allows developers to write code more efficiently and in less time. For example, in the sample below, the Haml code is 11 lines shorter (31.5%) than the HTML5 equivalent - and that's just for a basic sample. Imagine using Haml across and entire site! If the same 31.5% were to hold up across any major site, you would easily be talking about thousands--if not tens of thousands--of lines of code saved. Not only will Haml make your code easier to maintain, it will also make it easier to upgrade in the future. #### Haml: !!! %html %head %title Haml/Sass example %link{ :href => "assets/application.css", :type => "text/css", :rel => "stylesheet" } %body %header %nav %a{ :href => "index.html" } Home %a{ :href => "articles.html", :id => "selected" } Articles %a{ :href => "about.html" } About %section %article %h1 Dr. Michio Kaku addresses the question, "How will the world look post-singularity?" %p We will become like the Gods we once feared %a{ :href => "http://bigthink.com/ideas/38581" } [Read more] %article %h1 Stephen Hawking's warning: %p Abandon Earth—or face extinction %a{ :href => "http://bigthink.com/ideas/21570" } [Read more] %footer %p Copyright ©2011. All Rights Reserved. #### HTML5 Equivalent { Haml's Output }:

Haml/Sass example

Home Articles About

Dr. Michio Kaku addresses the question, "How will the world look post-singularity?"

We will become like the Gods we once feared [Read more]

Stephen Hawking's warning:

Abandon Earth—or face extinction [Read more]

### Writing CSS Code, the Sass Way Sass turns CSS into the language it *should have* been - one with functions (mixins), variables, and nested syntax. In the sample below, the Sass code is not any shorter than the CSS equivalent (in fact, they are equal in length); however, that is due to the sample being extremely basic. If you were to code an entire site's CSS using Sass, you could potentially see a tremendous difference in length (not to mention having code that's much easier to maintain and update in the future). #### Sass: $PAGE_WIDTH: 243px $PRIMARY_COLOR: #000 $SECONDARY_COLOR: #0000ff $MARGIN: 20px @mixin bold($weight: bold, $color: $PRIMARY_COLOR) color: $color font-weight: $weight @mixin border($side, $width: 1px, $style: solid, $color: $PRIMARY_COLOR) border#{$side}: $width $style $color margin#{$side}: $MARGIN padding#{$side}: 2px body font: 12px Arial, sans-serif width: $PAGE_WIDTH header @include border(-bottom) display: inline-block a color: $SECONDARY_COLOR float: left text-align: center text-decoration: none width: $PAGE_WIDTH / 3 &:hover @include bold(normal) selected @include bold section article p margin-bottom: $MARGIN * 2 &:before @include bold content: 'A:' footer @include border(-top, 3px, dashed, $SECONDARY_COLOR) text-align: center #### CSS Equivalent { Sass's Output }: body { font: 12px Arial, sans-serif; width: 243px; } header { border-bottom: 1px solid black; margin-bottom: 20px; padding-bottom: 2px; display: inline-block; } header a { color: blue; float: left; text-align: center; text-decoration: none; width: 81px; } header a:hover { color: black; font-weight: normal; } header a#selected { color: black; font-weight: bold; } section article p { margin-bottom: 40px; } section article p:before { color: black; font-weight: bold; content: "A:"; } footer { border-top: 3px dashed blue; margin-top: 20px; padding-top: 2px; text-align: center; } ### Final Thoughts I love Haml and Sass! Together, they make a sweet combination for any front-end developer to have. Plus, they are both **extremely** easy to learn. It should only take 30-60 minutes combined to get the hang of them, assuming you're already an experienced HTML5/CSS developer. #### Preview of Sample: ![Preview of Haml/Sass Sample](http://media.tumblr.com/tumblr_lqf0tx0EAU1qmw1md.png "Preview of Haml/Sass Sample") ### Two Side Notes 1. Haml and Sass are **not replacements** to HTML5 and CSS. They are merely a better way for developers to write HTML5/CSS. Haml/Sass code is compiled into valid HTML5/CSS code, which is then used by the browser. 2. For those who love the way CSS syntax is written (using brackets and semi-colons), [Scss](http://sass-lang.com/tutorial.html "Sass - Syntactically Awesome Stylesheets") is available (and is actually the newest version of Sass). The main difference between Sass and Scss is how the syntax is written - Scss is written exactly like CSS, whereas Sass does not use any brackets or semi-colons, but spacing and new lines instead.

#CSS #Haml #HTML #HTML5 #Ruby #Ruby On Rails #Sass #Scss

12 notes · View notes

freetheweb · 14 years ago

Text

Hawk Host: Redirecting your primary domain to a subfolder

Use FileZilla to FTP into your account

Double-click "public_html" to enter the directory

Right-click the file named ".htaccess" and choose "View/Edit"

Add this code to the end of the file (replacing raredreamer.com with your Hawk Host account's primary domain):

RewriteEngine On RewriteCond %{HTTP_HOST} ^(www.)?raredreamer.com$ RewriteCond %{REQUEST_URI} !^/raredreamer.com/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /raredreamer.com/$1 RewriteCond %{HTTP_HOST} ^(www.)?raredreamer.com$ RewriteRule ^(/)?$ raredreamer.com [L]

Note: Be sure to upload your files to a subfolder with an identical name as your primary domain (i.e. "public_html/raredreamer.com").

Press "Ctrl+S" to save the file. Close it.

FileZilla will alert you that the ".htaccess" file has changed. Check the "Finish editing and delete local file" option and click "Yes".

Done! Your primary domain should now be displaying the subfolder as its root instead of "public_html" (this may take a few minutes or hours to take effect).

#Hawk Host #htaccess

1 note · View note

freetheweb · 14 years ago

Text

I chose Hawk Host - and you should too!

Price

Pricing is a very important aspect in choosing a web host - at least, for me it is. I am looking to find the best bang for my buck. If I am researching two different hosts who offer next-to-identical features but one is $1 less per month, I guarantee I choose the cheaper of the two. That's just the way it is.

Fortunately, Hawk Host is as cheap as can be! I just purchased 1-year of shared hosting for $23.69. You would be hard pressed to find a better deal for shared hosting that includes all of the features below and more - I know I couldn't.

Features

Unlimited POP3 Email Accounts/Forwarders

Unlimited Sub/Add-On/Parked Domains

cPanel

SSH

Unlimited MySQL/PostgreSQL Databases

PHP (with PEAR support), Ruby On Rails, Python, Perl, CGI

Server Side Includes, cURL

Cron Jobs

phpMyAdmin

Daily Backups

AW Stats, Webalizer, Analog

Unlimited FTP Accounts

Private SSL

osCommerce, Zen Cart, Cube Cart

24/7 Support

CloudLinux (superior server stability)

LiteSpeed Web Server (up to 9x faster than Apache)

Plans

The best thing about Hawk Host is the shared hosting plans. All features are included in every plan. The only differences between each plan are the amount of disk space and the amount of bandwidth. Disk space and bandwidth are not unlimited for any plan.

{ Why you don't want unlimited disk space and bandwidth }

Think about it. Why would you ever want unlimited disk space and bandwidth?

"Unlimited" is never unlimited. Avoid any shared hosting plan that claims to give "unlimited disk space and bandwidth" because this is simply not true. There is always a limit in terms of disk space and bandwidth. Trouble is, you don't know what that exact limit is unless your hosting plan specifically says so.

You don't need unlimited. Let's face it, most of us will never need unlimited disk space and bandwidth. If you ever find yourself needing more disk space and bandwidth than your current hosting plan offers, upgrade to a plan that fits your needs or switch to a cloud server.

Servers

Hawk Host uses only the best of servers! Each of their servers have at least the following system specs (or better):

Quad Core Xeon E5520 x2

24 GB DDR RAM

300 GB 15K RPM SAS RAID-10 x4

100 Mbps Ports

Bottom Line

I have no complaints and no reason to think I made the wrong choice in choosing Hawk Host as my new hosting company. My first impressions have been very positive:

My account was created instantly and setup within an hour

Received a response on my support ticket within 10 minutes and problem was fixed an hour later (wanted to change my primary domain and username)

Act Now

If you sign-up for Hawk Host before 11:57 a.m. on September 1st, you may use the special promo code, "august2011" (without quotes), to receive 40% OFF your initial order. It worked for me!

#Hawk Host #Hosting #Ruby On Rails

1 note · View note