All posts by Dave

About Dave

Designing websites since 1998.

htaccess Features You Need to Know

The following are a list for directives that can be used in htaccess files to adjust file paths, adjust site security, prevent unwanted visitors and more.

In the following samples, you should replace the domain names, and file names to match your site needs. Even more, you need to remember to adjust the rewritebase to reflect the directory you are placing the htaccess file in. If it is the root directory, use “/”, if a subdirectory, use that directory name. The subdirectory should be of the form /dir/ (i.e. start at the root directory and terminate the path with a slash. You may remove the “ifModule” lines if you are certain that your server supports the features and you do not plan to move the htaccess file on another machine that would need verification of available functionality.

For your site security, if a index.html, index.php, index.asp is missing in a directory, you do not want people to list your directory. You can prevent listing of your directories by placing the following in the root directory htaccess file.

  #Preventing Directory Listing
  IndexIgnore *

You would like to set the name of the default home page, other than the typical index.html, default.html, etc. You can set the default name with:

  #Specify a default home page (index page)
  DirectoryIndex home.html

In the event that you forget to include the UTF-8 designation in your web files, set the default to UTF-8.

  # Default to UTF-8
  
    php_value default_charset utf-8
  

To prevent search engines from seeing two different sites, mydomain.com and www.mydomain.com, you should force all requests to the site to use one or the other of these designations and force input to that. The following will remove www from all incoming requests.

  # Never use www in the domain
  # Replace 'mydomain.com' with your domain name
  
    RewriteEngine on
    RewriteBase /dir/
    RewriteCond %{HTTP_HOST} ^www\.(([a-z0-9_]+\.)?mydomain\.com)$ [NC]
    RewriteRule .? http://%1%{REQUEST_URI} [R=301,L]
  

The following will force all input to include www.

  # Always use www in the domain
  # Replace 'mydomain.com' with your domain name
  
    RewriteEngine on
    RewriteBase /dir/
    RewriteCond %{HTTP_HOST} ^([a-z.]+)?mydomain\.com$ [NC]
    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteRule .? http://www.%1mydomain.com%{REQUEST_URI} [R=301,L]
  

The following will force all connections to the site to be a secure access.

  # Always use https for secure connections
  # Replace 'www.mydomain.com' with your domain name
  # (as it appears on your SSL certificate)
  
    RewriteEngine On
    RewriteBase /dir/
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(.*)$ https://www.mydomain.com/$1 [R=301,L]
  

The following will set only selected pages of the site are secure.

  # Always use https for secure connections
  # Replace 'www.mydomain.com' with your domain name
  # (as it appears on your SSL certificate)
  
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTPS} on
    RewriteRule ^(about|contact|products-page|products-page/transaction-results)/$ 
                          http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  

The following will block traffic to multiple sites. Notice the use of OR

  # Block traffic from multiple referrers
  
    RewriteEngine on
    Options +FollowSymlinks
    RewriteBase /
    RewriteCond %{HTTP_REFERER} badsite\.com [NC,OR]
    RewriteCond %{HTTP_REFERER} badforum\.com [NC,OR]
    RewriteCond %{HTTP_REFERER} badsearchengine\.com [NC]
    RewriteRule .* - [F]
  

Redirect away from the root directory to a subfolder where you have placed your website.

  # Set a default home directory, (this subfolder always loads)
  # Replace 'folder' with your subfolder name
  
    RewriteEngine On
    RewriteBase /
    RewriteRule ^$ /folder/ [R=301,L]
  

Redirect your site from a previous location to a new location

  
    # Rename a directory and force visitors to the new name
    # Replace 'old' with your old folder name
    # Replace 'new' with your new folder name
    RewriteEngine on
    RewriteBase /
    RewriteRule ^/?old([a-z/.]*)$ /new$1 [R=301,L]
  

  
  
    RewriteEngine On
    RewriteBase /dir/
    RewriteRule ^index\.html$ welcome.html 
  

Do a permanent redirect (301 redirect) of multiple domain names to one location

  
    # Redirect Multiple Domains to a Single Domain
    RewriteEngine On
    RewriteBase /dir/
    RewriteCond %{HTTP_HOST} ^www.mydomain.net$ [NC,OR]
    RewriteCond %{HTTP_HOST} ^mydomain.net$ [NC,OR]
    RewriteCond %{HTTP_HOST} ^www.mydomain.net$ [NC]
    RewriteRule ^(.*)$ http://mydomain.net/$1 [R=301,L]
  

Prevent the hijacking/hotlinking of your images by producing a FORBIDDEN message

  # Give Hotlinkers a 403 Forbidden warning.
  
    RewriteEngine on 
    RewriteBase /dir/
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://mydomain\.net/?.*$ [NC] 
    RewriteCond %{HTTP_REFERER} !^http://mydomain\.com/?.*$ [NC] 
    RewriteRule \.(gif|jpe?g|png|bmp|js|css)$ – [F,NC] 
  

Prevent the hijacking/hotlinking of your images by substituting an alternate image

  # Redirect Hotlinkers to "warning.png"
   
    RewriteEngine on 
    RewriteBase /dir/
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://mydomain\.net/?.*$ 
    RewriteCond %{HTTP_REFERER} !^http://mydomain\.com/?.*$ [NC] 
    RewriteRule \.(gif|jpe?g|png|bmp|js|css)$ http://mydomain.com/warning.png [NC,R,L] 
  

Prevent the access to selected types of file by anyone on your site

  #Do not allow these file types to be called
  
    RewriteEngine on
    RewriteBase /dir/
    RewriteRule .*\.(jpg|jpe?g|gif|png|bmp|exe|swf)$ - [F,NC]
  

Set a Default image to be returned for all missing images

  # Set up a Default Image
  
    RewriteEngine On
    RewriteBase /dir/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^images/.*\.jpg$ /images/default.jpg [L]
  

The following code can be used to turn files in a specific directory into files that can only be downloaded, not read from their current location. This can be used in a download store, where you would need a directory to hold the downloadable files. This creates a directory that is not listable by visitors and no file in the directory can be executed.

For this to work:

  • you must include either ‘All’ or at least: ‘Limit’ and ‘Indexes’ parameters to the AllowOverride configuration in your apache/conf/httpd.conf file.
  • OPTIONALLY: if “All” is not specified and you want the added protection offered by the OPTIONS directive below, you’ll need to add ‘Options’ to the AllowOverride list:
    • Example:
    •     AllowOverride Limit Options Indexes
  •   # For security reasons, Option followsymlinks cannot be overridden.
      #  Options +FollowSymLinks
      Options +SymLinksIfOwnerMatch
      # deny *everything*
      
        Order Allow,Deny
        Deny from all
      
      # but now allow just *certain* necessary files:
      
        Order Allow,Deny
        Allow from all
      
      
        
          # Force all downloads to automatically be treated as "save as" instead of launching in an application directly
          ForceType application/octet-stream
          Header set Content-Disposition attachment
        
      
      IndexIgnore */*
    

    Given the state of the internet, you may decide to block access to your website from selected locations. The following offers you a variety of ways to block traffic to your site.

    Block traffic from specific websites

      # Block traffic from multiple referrers
      
        RewriteEngine on
        # Options +FollowSymlinks
        RewriteBase /dir/
        RewriteCond %{HTTP_REFERER} badsite\.com [NC,OR]
        RewriteCond %{HTTP_REFERER} anotherbadsite\.com
        RewriteRule .* - [F]
      
    

    Deny site from specific IP address with message

      # Block a Specific IP Address
      # Replace the IP address you want to block 
      # leave the "\" before each dot, which escapes the character).
      
        RewriteEngine On
        RewriteBase /dir/
        RewriteCond %{REMOTE_ADDR} ^(123\.196\.8\.48)$
        RewriteRule ^/* http://www.mydomain.com/sorry.html [L]
      
    

    Deny site access to specific IP addresses with no comment

      order allow,deny
      deny from 123.45.6.7
      deny from 012.34.5.
      allow from all
    

    Hide specific file.

      # hide .htaccess
      
        order allow,deny
        deny from all
      
    

    Re-assign .html, .htm, and .shtml pages to be processed by the php processing.

      # Force html through php processing
      AddType application/x-httpd-php .php .html .htm .shtml
      AddHandler application/x-httpd-php .html .htm .shtml 
    

    Add SSI preprocessing to your .shtml files

      # Add SSI
      AddType text/html .shtml
      AddHandler server-parsed .shtml
      XBitHack on
    

    Define the files to be used as the result of a document error.

      # ERROR Documents
      ErrorDocument 400 /errors/badrequest.html
      ErrorDocument 401 /errors/authreqd.html
      ErrorDocument 403 /errors/forbid.html
      ErrorDocument 404 /errors/notfound.html
      ErrorDocument 500 /errors/serverr.html
    

      # You can create your menu with its flags or whatever you like, and add the country code to end 
      # of the links... <a href="page.html-fr" id="..."></a>
      <IfModule mod_rewrite.c>
        RewriteRule ^(.*)-fr$ 
            http://www.google.com/translate_c?hl=fr&sl=en&u=http://corz.org/$1 [R,NC]
        RewriteRule ^(.*)-de$ 
            http://www.google.com/translate_c?hl=de&sl=en&u=http://corz.org/$1 [R,NC]
        RewriteRule ^(.*)-es$ 
            http://www.google.com/translate_c?hl=es&sl=en&u=http://corz.org/$1 [R,NC]
        RewriteRule ^(.*)-it$ 
            http://www.google.com/translate_c?hl=it&sl=en&u=http://corz.org/$1 [R,NC]
        RewriteRule ^(.*)-pt$ 
            http://www.google.com/translate_c?hl=pt&sl=en&u=http://corz.org/$1 [R,NC]
      <IfModule>
    

How can I use CSS:before to add new line

CSS logoHow can I use CSS:before to add newline before an element???

That is the question that I researched today. My answer was semi-satisfying. I found that you can, and can’t do it … kinda.

What does that mean? Well, the intuitively obvious ways don’t work. The CSS method I did find will work on all browsers except the wonderful IE browser. What else in new! Love you IE …

In my situation, I wanted to customize where a link (<a>) was sitting. It was embedded in generated text I couldn’t touch. I wanted the link on the next line to highlight its existence.

I tried several things that didn’t work and wasn’t surprised by the results:

  • does not work, not a surprise.
  • doesn’t work, the content is processed as text, not as a tag.
  • failed as badly as the others … not a surprise.

What surprised me was the following works, on browsers other than IE:

There is no CSS solution, but, there is a jQuery solution. Try jQuery:

  • $(“<br/>”).insertbefore(“a”)

10 HTML5 Development Links You Should Know

HTML5 logoGet a jumpstart in your HTML5 development. You can reinvent the wheel, or check out these great sites.

  • – html5shiv.js will help make your code be backward compatible with older IE browser. Older browsers don’t recognize all html5 tags. html5shiv.js creates these tags and improves backwards compatibility.
  • – a javascript library that detects HTML 5 and CSS3 features that are available in a browser. Using this library, you can tailor your site to adapt to browsers that do not support all HTML 5 and CSS3 features you would like to use, allowing your site to degrade smoothly.
  • – HTML5boilerplate offers a framework for development with HTML5. No, it does not give you a massive infrastructure to block out areas of the page. html5boilerplate gives you the framework file structure, normalized css, modernizr,jquery, google analytics, remind the visitor to upgrade browser, and more. Remember to look at the preconfigured options that are available at Initializr.com … classic, responsive and bootstrap, they may even give you a bigger edge. Continue reading

jQuery Ready() Initialization

Using jQuery initialization

jQuery logojQuery offers a very convenient method to do JavaScript initialization. Many JavaScript and jQuery statements require existence of site elements and tags, and can not be run until after the elements and tags exist. Some use the onload attribute of the tag. To some, this implies moving the running of the JavaScript or jQuery initialization to the end of the page. However. JavaScript and jQuery offer other methods that solve this problem. They provide methods to run initialization after the DOM hierarchy has been initialized.

jQuery’s ready() works great to permit the defining of initialization functions and then executing these functions when the DOM is ready.

A reason to use the jQuery ready() initialization rather than javascript.onload() or placing the onload in the body tag … jQuery allows you to create initialization tasks wherever it is best encapsulated with the code it supports, yet it is gathered together with all other identified initialization activities and executed as a group when the DOM is ready.

To use jQuery ready(), wrap your initialization activities in the ready wrapper as follows:

 

Shortcut for jQuery Ready() Notation

Alternately, you may use a shorthand notation to run an initialization by invoking initialization handling as follows:

9 Must Have WordPress Plugins

WordPress LogoIf you use WordPress, you should know about plugins. Plugins help expand and customize your WordPress site. Plugins add new functionality to your site.

Here is a list of widgets to get you started with your SEO, security and site function. You should really consider these tools to help you with your WordPress site.

  • Wordfence Security
  • Contact Form 7
  • Hashcash for Contact Form 7
  • redirection
  • wp-complete-backup
  • tinymce-advanced
  • Custom Meta Widget
  • Google Sitemap Generator
  • Google Analytics

Here is a quick summary of why you should consider these plugins:

  1. Wordfence Security

    This plugin will enhance your security and surprise you. This plugin includes a firewall, anti-virus scanning, malicious URL scanning and live traffic monitoring. You will feel more comfortable knowing that you have virus checking, and be fascinated by who is crawling and attacking your site. The tool includes malicious IP and Network blocking, scans for backdoors, locks out brute force hacks and much more. I think you will love it.

  2. Contact Form 7

    If you would like a contact form, try Contact Form 7. This is a great contact form. Never expose your direct email address on your website, use a web-form. Showing your direct email address may result in spammers identifying your email address and make your email the target for tons of trash. Contact forms provide a method for people to find you, yet, helps protect you from spammers.

  3. Hashcash for Contact Form 7

    I know, you’re saying to yourself that you have to worry hackers will use an automated submission routine to submit tons of forms to your email address. Some people add a captcha field to their forms to help minimize that problem.

    Captcha fields are those wondrous add-on fields you have seen on forms that requires you to read a sequence of characters or numbers and copy the stuff to a special input on the form. The logic, only humans read, so we eliminate automated submission — what a pain for the filer of the form. Well, try Hashcash for Contact Form 7 with Contact Form 7. This is a plugin that appears to do a great job of filtering out automated form submissions without having to add a captcha field to your form, and without causing the form filer from taking any extra actions.

    Your visitor will thank you for not using a captcha and you will thank this plugin for thinning out your trash mail.

  4. Redirection

    This plugin is essential as your site changes. As your site ages, you may delete or move pages around. You may change page names. Search engines may have search results of your pages by the old name. Search results may return you page at the old address. When someone clicks, they could miss seeing you. Rather than losing the linkage from the search engines, use the redirection plugin to let WordPress know that requests for one page path should now be redirected to the new pages. Using this plugin, when you redirect a path, and a visitor accesses an old path to your page, this plugin redirect to the correct location and sends a message to the search engine that the page has been permanently redirected (301 redirect) to the new address. The permanent redirect will let the search engines to update their search results statistics, and permit people to find the moved page/post.

  5. WP-Complete-Backup

    Guess what, backups are good. If you haven’t noticed, your computer is not the only thing that should be backed up. Using this widget, you can backup you site and database with little effort. Then, you can feel safe that you can restore your website if some hacker does damage and you need to do repairs.

  6. Tinymce-Advanced

    Customize and enhance your WordPress editor. This plugin lets you add new features to the text editor. It’s great what you can add and make your editing easier. Try it.

  7. Custom Meta Widget

    Your website comes with some strange content sitting around on your page. The strange content is on a box labelled “Meta.” This includes links to WordPress.org, has login to your admin and lots of other strange things you may not want. You may want some of the Meta area, content, but, not all. Using the Custom Meta Widget, you can remove any or content you don’t want included in the Meta area. It is nice to clean up your page, getting rid of unwanted links.

  8. Google Sitemap Generator

    If you are not using All-In-On-SEO, or WordPress SEO applications, you should be using Google Sitemap Generator. This will generate a site map and make the Search Engine world happy. Your website should have a sitemap. Sitemaps are important. (Future posts will discuss the top-end SEO tools All-In-One-SEO and WordPress SEO, which both offer sitemap generation (plus much more) and are worthy of your time to consider.

  9. Google Analytics

    You should be using Google Analytics to track the visits to your site and the number of people searching for the types of information you provide. The Google Analytics plugin provides a quick and simple way to add Google Analytics to your site. Set up a Google Analytics account, let Google know your site address and get an account ID. Let this plugin know your account ID and it will automatically set up your WordPress site to work with Google Analytics.

Hope you learned about a plugin or two that you didn’t know about before, and please look back later and see suggestions of other great plugins that will make your life easier.