How To Web Dev

Cloudflare, site protection and free CDN support

Recently I came across a new free service called Cloudflare.  It is a pretty cool service that handles protecting your site from known malicious entities as well as helping to deliver your site through CDN services.  Now I just found these guys and don’t know in detail how all of this is accomplished, but here is what I know so far from their video description on their homepage.  Basically the more sites that use Cloudflare the better cloudflare gets at protecting all the sites, by setting up your sites nameservers to point to cloudflare it gets to see traffic that it trying to get to your site, and when it recognizes a security threat it goes aheads and blocks that request from your server.  While this isn’t 100% for sure that nothing bad is ever going to get to your site, it does help to weed out the many low level attacks that can come to a web server.

January 23, 2012 at 1:24 pm | Hosting | No comment

WordPress, google page speed and gzip or deflate

Recently I was trying to improve the speed of a site that I was maintaining. So I decided to go checkout it’s score with google page speed. It was doing decent, 81 of 100, but I was getting a single high priority item:

Enable Compression: Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Hmm, easy enough.  The site that I was working on was a wordpress site, not that it matters much as this should work for any site running on apache.  The short line of code that I added to satisfy this requirement was

    AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon

This checks to make sure mod_deflate is first enable on your apache installation, and if it is then it goes ahead and tells the server to compress any html, css, javascript, plain text, xml or images. Nothiing super complicated but it should be a hand tools for improving your sites speed.

January 11, 2012 at 3:28 pm | Apache, Wordpress | No comment

Kohana 3 loop through many to many ORM

Recently made the decision to start learning how to use Kohana 3. Been putting it off because 2.4 has done pretty much everything I need. But I have a project where I was getting frustrated by the limitations of ORM in 2.4 so I decided I needed to take the plunge into 3. Anyways, one of the first things I noticed is that I could not loop through one-to-many or many-to-many ORM objects like in 2.x.

Kohana 2.4 ORM loops didn’t work

foreach ($school->classes as $class) 
{
     echo $class->name;
}

ANd maybe i just wasn’t looking in the right place but I couldn’t find anywhere that showed how to loop, so here it is this is what I finally figured out.

Kohana 3 ORM Loop one-to-many or many-to-many

foreach ($school->classes->find_all() as $class)
{
     echo $class->name;
}

Now that wasn’t so hard. Hope this helps someone else out.

August 30, 2011 at 1:35 pm | Kohana, MySQL, PHP | No comment

CSS word-wrap

Was working on a project the other day and ran into an issue with users submitting links that were painfully long, so long in fact that they would extend past their container and spill over on top of other things. Quite frustrating because there isn’t a whole lot a developer can do about this, or so I thought. Introducing (it was new to me at least) the word-wrap property in css.  What it does is forces a line to text that has no spaces or breaks in it to wrap as though it did.  Here is an example of it happening

<div style="width: 200px; border: 1px solid black;">
  here is some text that is going to break the layout of this div. 
  This div is only 200px wide.  Not wide enough to contain this text
  this_is_some_really_really_way_to_long_text_this_is_some_really_really_way_to_long_text_
  So now you see the problem we are running into, lets look at the solution
</div>

The Solution

This is where word-wrap comes into play. The word-wrap property can be set to two different values, first is normal, which is default, and secondly there is break-word which forces text to break even if there is no space.  So lets try is out and see what happens.

.wrap {
     word-wrap: break-word;
}

<div style="width: 200px; border: 1px solid black;" class="wrap">
  here is some text that is going to break the layout of this div.  
  This div is only 200px wide.  Not wide enough to contain this text
  this_is_some_really_really_way_to_long_text_this_is_some_really_really_way_to_long_text_
  So now you see the problem we are running into, lets look at the solution
</div>

February 17, 2011 at 8:00 am | CSS, Design | No comment

jQuery Tools

Just a short post here, I have recently come across jQuery tools, there is the link: http://flowplayer.org/tools/index.html which is in my opinion a great set of tools that get used all the time and are well done.  I can’t think of many sites that i have done that have not had some element of either tabs, tooltips, overlays or form validations, if not multiple of those.  And the great thing is is that jQuery tools handles all of those things, and quite well if I might add.  The fully featured version of it is 46.32Kb, but the cool thing is that you can pick and choose which features you want, so if you only want form validation, you can thin it down to a slim 6.32Kb.

They also provide several pre-packaged versions of it that are hosted through them via a cdn, so again, not a bad option.  As with just about all frameworks documentation is a little lacking of examples and what not, but if you are too lazy to dig around google for answers then you just need to hire someone to write code for you.

September 8, 2010 at 7:39 pm | Javascript, jQuery | No comment

Contact Form 7 Lightbox integration

For all those out there who use wordpress, and have a contact form of some sort, which is not a small number, might I make a recommendation.  I have recently installed and started using wordpress contact form 7,  it is pretty good system to easily integrate a contact form into your blog/site wordpress installation.  Lets you add custom form elements, html formating, and all the stuff you would like to be able to do to any website.

Other cool features are that it allows you to set specific messages that can be triggered, there is a error message, a success message and all the things that go in between.  This is where I would like to say I found a little problem.  You see Contact Form 7 even has a cool ajax submission so you don’t have to reload the page, and not only that, but it displays the message once you are done, which most of the time is pretty cool.  However, I needed to put that nifty little message into a lightbox, hmmmm…… nope no built in functionality for that, but that is okay, I don’t hold it against the fine developers who created it, so it is time to whip out a little jQuery action.

For this site I was going to use the jQuery tools library Overlay.  Which if you have never used it it is pretty awesome in my opinion, not the end all be all, but a lot of good features for jQuery.   So the problem is that we need to tie in a trigger to open up a overlay into the Contact Forms Javascript, not difficult, but you have to know where to look.  So first here is our Overlay code

$("#thank-you").overlay({
    	top: 260,
    	mask: {
    		color: '#ebecff',
    		loadSpeed:200,
    		opacity:0.9
    	},
    	closeOnClick: false,
    	load: true
    });

Okay, a quick rundown on jQuery tools overlay, if you are familiar with jQuery just jump down a bit to the rest, you probably already know this.
First we are selecting the content from a div with the id “thank-you” to use as content for the box.

$("#thank-you).overlay();

Next we are just adding some behavior and styling to it, positioning it, setting opacity, what happens when you click outside the box.

{
    	top: 260,
    	mask: {
    		color: '#ebecff',
    		loadSpeed:200,
    		opacity:0.9
    	},
    	closeOnClick: false,

And finally, the most important part, is we set it to open up the overlay whenever this code gets run.

{
     load:true
}

so that is all you need for the overlay, and there is a ton of other stuff you could do to it, but that is your job. next we need to put this code somewhere, but where. This gets a little on the hackish side I admit, and you will run into issues if you update the contact form, but this is what I have so far. Go run over to your wordpress installation and dig into your plugins folder. Should be something like “/wp-content/plugins/contact-form-7/” and open up the the file called “scripts.js”. Just so you know my version of Contact Form 7 is version 2.

now head down to line 129 or so, and you should see something like this:

wpcf7ResponseOutput.append(data.message).slideDown('fast');

what that line of code does is it takes the results of submitting the form and sends them to a div to be displayed, just not our div. So go ahead and delete/comment out that line, and replace it with our code:

$("#thank-you").overlay({
    	top: 260,
    	mask: {
    		color: '#ebecff',
    		loadSpeed:200,
    		opacity:0.9
    	},
    	closeOnClick: false,
    	load: true
    });
 
//wpcf7ResponseOutput.append(data.message).slideDown('fast');

and there you have it. Now when the form submits our lightbox will be displayed. Now if you wanted to get fancy you would send the message into the lightbox as well so that you could take advantage of Contact form 7′s messaging system, I just haven’t gotten that far, that will be my next post.

September 6, 2010 at 7:39 pm | CMS, CSS, Javascript, jQuery, Wordpress | No comment

Assembla and Freshbooks, Web Developers organizational friends

As with anyone who runs their own business finds out, I found out that much of my time as a web developer gets spent doing administrative tasks like Accounting, task management and making sure the people I have are doing what they are supposed to, and not nearly as much time as I would like developing. This is just a fact of life, but you can do things to mitigate how much time those things take. That is why I have assembled a list of different tools that I like to use to help my business to humm along. So here it goes:

Assembla

Anyone who has ever worked on anything but a small project usually keeps some sort of task list.  This can range from the back of your hand all the way to Microsoft project!  With the advent of the internet and more and more people focusing their businesses around it, and especially for developers, it was inevitable that web based project management tools would show up.  This is exactly what Assembla is, great for keeping track of small to quite large size projects, allows for as many team members as you want.  Because it is geared towards developers it supports GIT and SVN as well as SVN hosting, which is great because you can hook into Assemblas ticket system and update tickets as to commit changes.  Also is supports time tracking and gives you multiple ways of viewing and organizing your project.  Ultimately it is a pretty sophisticated system that you can sign up for free, anyone can access your project however, or pay a few bucks and get some privacy.

This is a great option for those that don’t like writing on the back of their hand but get a headache just looking at something like Microsoft Project.

Freshbooks

One of the other tools I use on a daily basis is Freshbooks, like Assembla above you can sign up for free and have some limited functionality, but enough to really get a feel for if it is going to work for you.  Freshbooks can take care of most of your accounting needs, like invoicing, quotes, expense tracking etc.  It even has a pretty decent array of reports that it can generate for you.  Now don’t forget that the reports are only as good as the data you feed them, so don’t expect it to solve all of your accounting woes.

The feature that I use on a daily basis is its project and task tracking.  Freshbooks allows you to create projects, assign them to a client and then add tasks to that project.  You can then keep track of how many hours you have worked on a task with it’s built in timer, which is simple and easy to use.  There are even apps you can get for your droid or iPhone that allows you to track your time when you are away from your computer.  This is a great feature because if you work mostly on an hourly basis it makes generating invoices for your time a snap.  All you have to do is pick a time period, tell it which client you want to invoice and it calculates everything else for you.  Much better then breaking out an Excel spreadsheet.

June 30, 2010 at 2:17 pm | Billing, Project Management | No comment

Droid os, HTC aria and WordPress

This post is being written using a WordPress app and my brand new phone. Now I would consider it pretty silly to be posting large blog posts from ones phone, especially when I am right next to my computer. In a pinch it would be handy and with the larger keyboard of the Droid I think it could be quite useful. That is all for now, my thumbs hurt.

June 28, 2010 at 4:49 pm | Droid, Google, User Interface | No comment

How to: static methods for creating a factory in php

Static functions in php if used appropriately can be really handy tools for development. One such thing is the use of factory methods. Now for all you high level thinkers out there, yes I realize that this is not true to the use of the factory design pattern, this is simply used to show how one uses static methods to implement a factory pattern. This is not meant to educate on what the factory pattern is, just how to implement a part of it.

class Product {
 
	public static function factory()
	{
		return new Product();
	}
 
	public function __construct()
	{
               echo "Hello";
	}
 
}
 
$product = Product::factory();

And now you have access to any method in the product object. This may seem like a complicated way to to create a new instance of a object, and you would be right if all we were doing was trying to echo “Hello”. However combining this with method chaining can make for some pretty simple and powerful code. Take this as an example:

class Product {
 
	protected $id;
 
	public static function factory($id = null)
	{
		return new Product($id);
	}
 
	public function __construct($id = null)
	{
		$this->id = $id;
	}
 
	public function get()
	{
		$this->product = db::query('SELECT * FROM products WHERE id = '.$this->id);
		foreach ($product as $field => $value(
		{
			$this->$field = $value;
		}
 
		return $this;
	}
 
}
 
$product = Product::factory(224)->get();
echo $product->title;
echo $product->price;

And now we can access any field of the product simple by using “$product->{field}”. Lets walk through what I did:

class Product {
 
	protected $id;
 
}

We add the call variable of “$id” so that when the class is initiated we can store what product we are trying to look up.

class Product {
 
	public static function factory($id = null)
	{
		return new Product($id);
	}
 
	public function __construct($id = null)
	{
		$this->id = $id;
	}
}

Here we are setting up the class to allow the id to be passed to it. Since the factory method just creates a new instance we pass the id right along. If this were production code we would want to do some checks and make sure the id was not null, it was integer.

class Product {
 
	public function get()
	{
		$this->product = db::query('SELECT * FROM products WHERE id = '.$this->id);
		foreach ($product as $field => $value(
		{
			$this->$field = $value;
		}
 
		return $this;
	}
 
}

And finally we pull the product from the database, assign the table fields and their values to class variables and then return the instance of the class. This allows us to access any field in the table simply by doing:

$product->field

This is still a rather simple use of the factory method, there are many more things you can do, but that is your job to be creative!

June 9, 2010 at 12:48 pm | PHP | No comment

Kohanut, new CMS on the block.

In a world where there are many many options on building website, it is often difficult to say which is best, to which I say it depends. There is usually a best tool for the job and no two jobs are identical. However in the world of Content Management Systems (CMS) they have the difficult task of making it so that almost anyone can make a site, without limiting the abilities of the site, a difficult venture to say the least. Each CMS has its own following of people who it seems would argue that their CMS is the answer to all the webs problems. There are good CMS systems out there, WordPress, Drupal, Joomla and many more, and if people were following my blog I am sure I would get comments about how their CMS was left out and that these are horrible for xyz reason. Now most of my experience is with WordPress and Drupal, both of which are very successful and have a ton of community to back them up, which is very important. However I have always felt limited by these systems because they try to do everything for you, does not float well with a guy who hates it I get in a car that locks the door automatically! I do understand the need to automate many things, and I have used WordPress and Drupal on projects, so this is not a bash WordPress or Drupal post.

However I would like to introduce if I may Kohanut to the scene.  Based off of the Kohana V3 framework it is a very simple straight forward and limited CMS system.  It doesn’t try and and do everything for you!  As a developer I want to be able to quickly setup the basics of a website add any custom functionality, usually easier to hand write then find module(usually), and then deliver to the client.  however often times it requires a short training session and many phone calls to get them up to snuff on how to use the system, and often  they are overwhelmed by what is available to them.  That is why I think Kohanut shines, because it is very easy to implement custom hand written features suing their request feature, but the scope of Kohanut is limited pretty much to creating pages/basic theme management/and editing content on the pages, the rest is left up to the designer, I like that.  This is not nearly a comprehensive review of kohanut, but take a look find out more about it drop the creates a note once you find out how much you think it rocks.

May 14, 2010 at 11:09 am | CMS, Kohana, PHP | No comment

Next Page »