Fuel Your Coding » Concepts & Training

Jquery, JQuery and Asking for help

Douglas Neiner — Mon, 12 Jul 2010 09:00:15 +0000

A few weeks ago, I tweeted:

General service announcement: it is written “jQuery” not “Jquery” or “JQuery”… even if it comes first in a sentence!!!! ∞

Then Saturday I put out a stronger tweet, and caught some stronger feedback for it:

Test: “If you want jQuery help, which misspelling will greatly hurt your chances: a) Jquery b) JQuery c) jquery d) All of the above. ∞

At the end of the day, does it really matter how someone writes the name “jQuery”? Does it make them a better or worse programmer based on how they type it out?

Let me clarify that I have never failed to answer a question on Stack Overflow (Where I like to hang out and answer jQuery questions) because the asker typed jQuery with incorrect capitalization. I would never fail to respond to an email because the asker wrote it as Jquery or JQuery. I would hate to be that petty an individual, and I think that is the feeling some people were picking up from my tweets.

However, I can say I notice it and it bothers me when people seeking help don’t type out the library name correctly. It really is a small thing, and maybe it shouldn’t bother me, but it does. It got me thinking about things that might negatively affect a request for help, and I came up with a list of six suggestions. I hope these suggestions are helpful when you need to ask for help with open source software.

Asking for Help

If you need help with an open source project, you will often be dealing with people that 1) don’t have a lot of time and 2) must use the time they have wisely. With that in mind, here are few suggestions that might help you get answers easier:

Take the time to make sure your question makes sense. Complete sentences, clear code examples, and links to a page demonstrating the problem all go a long way in ensuring a quality answer.
Run spell-check before sending your question. There are at least two reasons there would be a lot of spelling errors in a question: 1) English is not the native tongue of the person requesting help 2) The person requesting help didn’t take the time ensure a quality question. Most applications have spell check. If they don’t, you can copy and paste your question to an application that does have spell check. Reason #1 is understandable and should be overlooked; reason #2 is what will stand out most to someone reading your question. It may affect that person’s decision to answer you.
Getting back to my original statement regarding Jquery, JQuery and jquery. Some libraries have really weird spelling or capitalizations, some are more straight forward. Write the library/plugin name correctly when asking for help with it! jQuery should be very easy, but so many people get it wrong. It is like the names iPad and iPhone: the first letter is lowercase! For another example, the popular blogging platform is WordPress, not Wordpress or Word Press.
At the very least, run a Google/Yahoo/Bing search (pick one) with some of the words from the question you plan on asking. I almost always take time to run a few searches to answer a question myself before asking on Stack Overflow or emailing someone for help. It is just common courtesy to spend some of your time before asking for the time of someone else.
If you find the answer yourself after asking for help, be sure to let the person know you no longer need their help. Sometimes emails will sit around until there is time to answer them while in the mean time you find the answer somewhere else. It might reduce your chance of getting future emails answered if the person who takes the time to answer your question finds out they wasted their time.
Be respectful and kind. If an open source project is screwing up your project, you have a few choices 1) use a different project 2) pay for help 3) Ask kindly for help from the project. Notice I didn’t put “4) Demand help for free.” On a very positive note, I have to say every request I have gotten for help on the few small projects I maintain have been both respectful and kind. This is really important!

What It All Means

The bottom line is this: If it appears to someone reading your question that you have not put any time into either solving the problem yourself or writing a decent request for help, they will be less likely to put any time into answering it.

Remember, it isn’t always about just getting an answer. Sometimes its about getting the right person to answer your question. For instance, there are tons of programmers answering questions on Stack Overflow, but not all of them have equal qualifications and skill. Put in the effort up front when asking the question. It will be worth it when you get a solid answer!

Do you have any tips to add? If so, please let me know about them in the comments!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Jquery, JQuery and Asking for help

One Sure-Fire Way to Improve Your Coding

Jerod Santo — Thu, 27 May 2010 13:25:35 +0000

The most obvious way to improve your coding is to write more code. Everybody knows that. However, another activity which I guarantee will improve your coding is the complete opposite of writing. I will state this as plainly as I possibly can:

If you want to dramatically increase your programming skills you need to be reading other people’s code.

Maybe you believe that, maybe you don’t. You should. And if you’re willing to give it a shot, I believe you will be rewarded greatly for your time.

In this article I will help you choose what to read and give you practical advice on how to go about reading it. If you’re already a code reader you may find a few ways to get more from your efforts. If you aren’t, you absolutely must read on.

What to Read

This is a big decision, and one that is difficult to advise on. I won’t simply point you toward code I think you should read, because it really comes down to what you’re in to. However, I will provide some guidelines which you can follow to help you choose what to read.

» Read Code That You Rely On

A great place to start is with any plugins or libraries that you are already using.

A WordPress plugin that you really like
A Ruby gem that you’ve found useful
A jQuery plugin that you keep going back to

These are all great candidates for learning. You are already familiar with their public APIs so the barrier to understanding their inner workings is lower. Also, as a user of the code you have an opportunity to add documentation, implement a new feature, or generally give back to the project in some way.

» Read Code That Impresses You

I remember the first time I saw 280 Slides and I thought to myself, “Now that is impressive.” I quickly learned that the code driving that site was the open-source Cappuccino project. I tucked that knowledge into the far recesses of my brain and when I eventually came across another impressive app running on Cappuccino I knew I had a project that I could learn a lot from. What have you been impressed by lately? Is it open-source? If so, it’s a great choice for reading since the code is likely to impress you as much as the resulting application.

» Read Code Written By Somebody You Respect

If you’ve been coding with open-source software for more than a little while, there are probably other programmers who have earned your respect. I can think of a few developers off the top of my head whose code is downright enviable.

If you don’t have a respected developer in mind, it’s easy to find one. He or she has probably authored some code in one of the previous two sections (code you rely upon, or that impresses you).

» Read Code That You Can Actually Grok

If you’re the adventurous type you may be considering diving into a large project like Ruby on Rails, Drupal, or jQuery. I suggest avoiding projects like these for now unless you are an experienced code reader.

Large projects have a lot more moving pieces, and you may end up struggling too much with the concepts to learn anything of immediate value. Confusion leads to discouragement, and larger projects more likely to confuse and discourage you in your reading. The advantage of picking a small project to read is that you can hold the entire program logic in your head at once. This leaves you with just the details to discover and learn from.

How to Read

Now that you’ve chosen some code to read, what is the best way to go about reading it? I’ve read a lot of code in my days, and I can suggest a few ways to maximize your ROI.

» See the Big Picture

I’m going to assume that you at least know at a macro level what the code you’re reading accomplishes. If not, I suggest reading the project’s website, tutorials, documentation, and anything else you can get your hands on except the code.

Okay, with that cleared I suggest your first step is to wrap your head around the project’s structure. This is a variable amount of work depending on the size of the codebase you’ve chosen, but anything larger than one file will require a little bit of time.

First, note the file structure. This step is aided by an editor that has a folder hierarchy view like TextMate. For example, here is a nice overview of the Twitter Ruby gem:

The goal with this step is to just get familiar with the source. Find out which files include/require/load other files, where the bulk of the code is, the namespaces used if any, and things of this nature. Once you’ve got the big picture you’ll be ready to dig into the details.

» Document Your Findings

Reading code should not be a passive activity. I encourage you to add comments as you go, documenting your assumptions and your conclusions as you begin to understand the program flow. When you first get started your comments will probably look something like:

# I think this function is called after 'initialize'

# What does this equation even do?

# Pretty sure this variable loses scope after line 17

As your understanding progresses you can remove the little breadcrumb comments you left yourself and perhaps write more meaningful and authoritative comments that could possibly be committed back to the project.

» Use the Tests, Luke

Hopefully the project you’ve chosen has a test suite. If not, you can skip this section altogether (or find one that does).

Tests are a great place to start whenever you read somebody else’s code because they document what the code is supposed to accomplish. Some tests are more informative than others, but no matter how well written, you’ll often find the programmer’s intent in the tests much more easily than you’ll find it in the implementation. While you’re reading, try to get the test suite to run successfully. This will make sure your development environment is configured properly and will make you more confident when making changes.

» Execute, Change Stuff, Execute

Who said reading code had to be hands off? You’ll really start to understand things once you’ve broken everything and put it back together again. Remember those tests you got passing? Make them fail, add some more, or try changing the implementation without breaking them. Try adding a small feature that you think is cool, or setup project-wide logging so you can print output at various stages of the code. Is this still reading? Absolutely, but at this point its more of a choose your own adventure than a mystery novel. And that’s a good thing!

» Rinse and Repeat

Once you finish reading one codebase, pick another one and start the process over again. The more code you read, the better you get at reading it and the more you get out of it in less time. I think you’ll find that the ROI increases quite quickly and that it’s actually a very enjoyable way to learn.

Where To Start

The single most influential factor in my code reading is GitHub. The site makes it so easy to find new projects and great coders that you’re doing yourself a disservice if you’re not leveraging it. I suggest starting on GitHub and reading code right on the site until you find a project you know you can learn from. Then git clone that baby and get to reading!

How about you? Do you read code as a learning tool? Which projects would you recommend to others? Read any good code lately?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

One Sure-Fire Way to Improve Your Coding

Create a simple “shop” page in Textpattern

Marie Poulin — Thu, 20 May 2010 12:32:19 +0000

This tutorial assumes that you have a fairly strong understanding of HTML and CSS, as well as a basic understanding of Textpattern and its tags. (I won’t be going into detail about the css) We will be building a very simple “shop” type page in Textpattern. There are plugins which allow Textpattern to integrate paypal support, but this is a fairly simple alternative. This allows you to feature products which you may sell through paypal, e-junkie, Amazon (or whatever else you may be using) The structure of this page is built with the client in mind – they don’t need to format the page with any html or div’s in order to get the products laid out nicely.

Two example links of this simple functionality in action are:

1. http://www.meghantelpner.com/shop/?c=books

2. http://www.elmwoodspa.com/shop/

In the first example, you can click on one of Meghan’s books to see more information before deciding to purchase. If you click on “buy now”, you will be taken to her e-junkie store. Additionally, if you click on a specific book to see more information, you get a small navigation block at the top of the article that allows you to quickly browse the next and previous products. You may notice that if you click on one of the other submenus within her store, such as the Books/DVDs/Audio, that you will be taken directly to the Amazon affiliate link for that product. The client has the capacity to choose whether or not to link the product to an external link (Amazon, e-junkie, paypal) or whether or not to link to the full product page itself first, with a “buy now” button.

In the second example, you can click to see details/shop online which takes you immediately to Elmwood Spa’s online store.

I will be using the first example as a basis for the tutorial.

Plugins used: cbs_category_list, zem_nth (both optional) and upm_image

First you’ll want to set up some custom fields, depending on how you want your shop to function. For Meghan’s shop, there are instances where she links to external products via a buy now button. Other times, she’ll want to link to an external site without the buy now button. So I have created 2 custom fields, “link to this site” and “buynow.” If you link exclusively to Paypal links, you could name it paypal, or whatever is easy for you to remember. (As long as you adjust it accordingly in the article forms)

Now let’s take a look at one of the product pages inside textpattern:

1. The title that will appear on the shop landing page

2. The description that will appear only one the item is clicked on

3. This is the link that the thumbnail and title will link to if you put a link (full url) here, otherwise:

4. A buy now button will appear and will link to the full url pasted here (if a link is not placed in either field, the title and thumbnail will merely link to the full article page automatically)

5. Place the image id number here that you want to associate with the article (the thumbnail version of this image will appear on the shop landing page, while the full image size will show on the individual article page.)

6. Choose the appropriate section for your article, in this instance, “shop.”

7. Select the appropriate categoryfor the article (if applicable. You may not have a need for categories)

8. IF USING THE BUY NOW FIELD you must use the override form named shop_listing2 (I’ll explain below)

SAVE your article!

shop subnav

In the actual page template for the shop, the code that calls the shop submenu (books and guides, etc) looks like this:

Using the plugin cbs_category_list, this pulls a list of all of the categories with a parent category of “shop”, wraps each category in a list tag, wraps the whole thing in an unordered list with a class of subnav, and assigns a class of active on list items when they are active. Handy dandy! You don’t necessarily need to use this plugin if your shop does not need this type of subnav.

Ok, so how do we pull all of our shop items into the page? The article tag in our shop page template looks like this:

So this tag basically says: on the landing page (or listform version of the page), display the articles using the form of “shop_listing”. If you’re looking at an individual article page, (i.e. an individual product page) display the article using the form “shop”. Limit the amount of articles shown to 99, and sort them by date of Posted Ascending.

The “shop_listing” form looks like this:

    
  ">BUY NOW

Translation: the thumbnail version of the article’s image is being pulled from the “Article image” field in the article, and assigned the class of “shopimg” for styling purposes. Both the title and thumbnail are linked to the permanent link to the article (which will show the body/description of the product. The Buy Now button links to whatever gets put into the custom field named “buynow.” The shop-item css looks something like: .shop-item {float:left; margin:20px 25px 10px 0; width:175px; }

Alternately, if you want to get really nerdy, you could use the plugin zem_nth to tell every third (or whatever number) post to display with different class. I use it to apply “shop-item-last” (which has a margin-right of zero) to every third item , so the last item in every row doesn’t have any extra margin space on the right. You can choose to do your layouts with or without zem_nth. This is what my shop_listing article form really looks like:


">BUY NOW

”>

”>BUY NOW

The “shop_listing2″ form (for products without a buy now button, linking externally) looks like this:


 "  rel="external">
 ">

This tells the title and thumbnail on the listing page to link directly (in a new window/tab) to the link that is found in the “link to this site” field shown in the image above, #3. You could also include the tag if you wanted to include an excerpt. If you want the article to appear this way (without the buy now button), you need to ensure that you are using the override_form in the article named “shop_listing2″.

Now that we have set up what the listing page looks like for product pages, let’s look at how the individual product pages look. If you will recall the article form we used:

We need to create a form called “shop” that will determine how the individual pages look once you click on the thumbnail/title.

The “shop” article form looks like this:

Back to Shop |  Previous Product |  Next Product
 
BUY NOW

Translation: The tags inside the paragraphs set up a small subnav which allows the user to click through to the next/previous products. Then it puts the full version of the article image in a div labelled “right” (which I float right in my css), below that place a Buy Now button which links to the url provided in the “buynow” custom field. Then display the body of the article. You could of course format the tags however you want. (image on top with text below, etc). Individual product page pictured below:

individual product page

Using custom fields is a great way to allow the client (who doesn’t know how to code) to be able to add new items to the shop easily without having to see any textpattern or html tags, and avoid them forgetting to close link tags and add things like rel=”external”. Yay!

This tutorial assumes that you have textpattern installed and ready to go, and have a good grasp of the tags.

( Download the latest version of Textpattern here: http://textpattern.com/download )

Did I miss anything? If you need any more clarity or have any questions, please feel free to put them in the comments, and I will do my best to help.

Happy Coding!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Create a simple “shop” page in Textpattern

Simple Debugging with WordPress

Douglas Neiner — Tue, 16 Mar 2010 19:13:36 +0000

For simple WordPress theme development, what is the first thing most PHP developers do to troubleshoot problems?

print_r( $post );
die();

One the statements are in place, the programmer refreshes the page and looks at the source to view a nicely indented array or object. Next they comment out the print_r and die statements, change some lines, and try the code again. If it fails, they are back to square one and in go the print_r,echo and die statements so the brutal cycle can begin again.

We know these methods partially work (who hasn’t done the above during a PHP project!), but we also know they are less than optimal. Is there a better way?

WordPress Debug Mode

WordPress offers quite a few ways to enable and customize a debug mode while developing. To enable debug mode, you want to define WP_DEBUG as true in your wp-config.php. Here is the complete code block I suggest you use. We will look at the individual parts shortly. Place this in your wp-config.php file after the lines that define the database variables. Be sure to change development_user to be your development database user name:

@ini_set('display_errors',0);
if( 'development_user' === DB_USER ){
  define('WP_DEBUG',         true);  // Turn debugging ON
  define('WP_DEBUG_DISPLAY', false); // Turn forced display OFF
  define('WP_DEBUG_LOG',     true);  // Turn logging to wp-content/debug.log ON
}

display_errors

The first line in our code block turns off the display of errors, regardless of php.ini or .htaccess settings to the contrary. This is important because though WordPress can force the display of errors to be on, it won’t force them to be off if display_errors is already turned on.

Testing for local vs. production

There are probably fifty ways of doing this part, so use a method that works for you. In my environments, my local development database rarely if ever has the same user name as the production database. Simply checking what I expect the local user name to be against what is defined in DB_USER is a simple way of knowing if the files are on the development or production servers.

WP_DEBUG

This is the most important constant as it determines if WordPress will use any of the other debugging constants. Thankfully it is quite simple. If set to true, debug mode is turned on. If undefined or set to false, debug mode is kept off.

WP_DEBUG_DISPLAY

This constant confused me at first, but it is actually quite simple. If set to true, it will override the current display_errors configuration setting and turn it on. However, if set to false it will not turn off display_errors. This setting is simply an override. This is the reason we turn display_errors off before setting any of these constants.

Set this constant to true if you want to see errors displayed in your browser when they occur. Keep in mind this will sometimes complicate errors because once at least one error has been written to the page, all redirect requests will fail. This is because the header information can no longer be modified once content is sent, and a displayed error counts as content.

WP_DEBUG_LOG

This constant is the whole reason I found the WordPress debug methods so helpful. Set this constant to true and WordPress will set up PHP to write to an error log in wp-content/debug.log. Sadly you can’t specify a different file location that is not in the content folder, but at least you know where it is!

Note: because this is written to a public directly, be extremely careful not to upload the log by mistake. Additionally, if you run WP_DEBUG on a production server, do so only for immediate troubleshooting then turn it off and remove wp-content/debug.log.

Leveraging WP_DEBUG

In addition to PHP errors being sent to debug.log we can also send our own output using the error_log PHP function. The only problem with this, is even in production mode your errors will still most likely be written to a PHP log; it just won’t be debug.log. Because of this, its a good idea to provide a wrapper function to handle the logging for your theme or plugin.

Place the following code in your functions.php in your theme, or in the plugin file for your WordPress plugin:

if(!function_exists('_log')){
  function _log( $message ) {
    if( WP_DEBUG === true ){
      if( is_array( $message ) || is_object( $message ) ){
        error_log( print_r( $message, true ) );
      } else {
        error_log( $message );
      }
    }
  }
}

Feel free to expand on this function if it doesn’t exactly meet your needs, but the concept is simple: Centralize all your log calls to use your custom function. Then, in that _log function, only output the message if WP_DEBUG is set to true. There is no reason to test if WP_DEBUG has been defined because as soon as wp-settings.php is processed, WP_DEBUG will be defined, even if it wasn’t already defined in wp-config.php.

This particular _log snippet will call a print_r on arrays and objects passed to the function for simple debugging.

Trying it Out

If you have followed these steps, you can run a quick test by adding these lines into your header.php file in your theme folder:

_log('Testing the error message logging');
_log(array('it' => 'works'));

After refreshing your page once, you should see a newly created debug.php file with a few lines of output. Use any log viewing utility that supports tailing the file for maximum productivity. On Mac, Unix and Linux systems, you can use this command from the main directory of your site:

tail -f wp-content/debug.log

Unconventional: CSS3 Link Checking

Douglas Neiner — Mon, 11 Jan 2010 19:50:24 +0000

One of our regular writers Wess Cope lives by the principle that you should seek to push technology past its intended uses and beyond even its own limitations. From time to time we will be featuring unconventional uses of technology. Today, we look at unconventional CSS3:

The Problem

As a developer, you are rapidly building your newest web creation. You start with the HTML, knowing full well you don’t have the hyperlinks you will need to complete the design. Nonetheless you put in:


   Home
   About
   Contact
   ...

What seems like a long time later, you get to the point where you finish up your site for demoing or production. How do you quickly find all those empty links? Well, you could use a link checker… or, just use CSS3!

CSS3 Solution

Just paste this line to the end of your last included CSS file for a quick visual display:

/* Find all links where an href is not provided */
html body a:not([href]), html body a[href='']  { background: red !important;}

Then open your site in modern browser that supports CSS3, and any empty link now has a background of red. Edit your HTML, and check the page again. When all the links are fixed, none will have a red background!

You can see for yourself by checking a quick demo:
Standard Page | Page With CSS3 Link Checking

Bonus: Testing Progressive Enhancement

For mission critical functionality it is generally good practice to have a fallback for non JavaScript users. To test if your page has any JavaScript only code, add this rule to your CSS file after the rule we just added:

/* Find all links where the href = # */
html body a[href='#'] { background: yellow !important;}

Next, disable JavaScript in your browser (In Firefox and Safari it is an option in your preferences.).

Now, any of those links you cleverly enhanced with JavaScript, but forgot to add a valid fallback URL, will show up with a yellow background. If an item truly has application only when JavaScript is enable, you should consider adding it dynamically with JavaScript.

Variations

As a leftover vestige from IE6 days, many developers use href='#' so signify an empty url (So the :hover pseudo selector will still work). If this is your case, you have two options: 1) Change your style going forward and use href='' to signify an empty URL and href='#' for JavaScript enhanced links. or 2) Use only the second CSS3 rule and change the color to Red.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Unconventional: CSS3 Link Checking

JavaScript Can Learn: Now Teach It Tricks!

Douglas Neiner — Fri, 30 Oct 2009 07:00:34 +0000

When you do a lot of development with backend technologies, it can be frustrating to then move to the front end and feel like you are using a completely different syntax. One thing I really miss is the helper methods, especially when using Ruby on Rails on the server. Little helpers like titleize() or downcase() get replaced in javascript by a custom function and toLowerCase() respectively. You don’t have to feel lost anymore! There is a way you can extend the native objects found in JavaScript to make your environment feel a little more like “home.”

This is accomplished by using the prototype object. Each native object in JavaScript includes a prototype object. Don’t get this confused with the PrototypeJS framework… the prototype object is a way to extend all objects that have inherited from the base object you extended. You can easily extend the prototype object by adding functions to it like this:

Object.prototype.functionName = function(){

}

You can then call them directly:

var obj = new Object();
obj.functionName();

There are a number of advanced uses of the prototype object, but this is the important thing to remember: any function added to the prototype of an object is available on any object that inherits from it. So if you extend the prototype on the Number object, all numbers will have access to the new function; if you extend the Array object, all arrays can access your custom function. You only use the prototype.functionName syntax when declaring the new function, not when calling it.

Enough theory, lets see some (somewhat) practical uses:

Do you find yourself capitalizing a lot of words in a particular JavaScript app? Just add a capitalize method to the String object.

String.prototype.capitalize = function(){
  if(this.length == 0) return this;
  return this[0].toUpperCase() + this.substr(1);
}

Now you can capitalize any string in your application by calling "lower".capitalize() and get "Lower" in return. Since it returns a string, you could chain it with any other function you can execute on a string.

Do you always find yourself forgetting you can call Number(”25″) to turn a string into a number? Just add a toNumber() function to the String prototype:

String.prototype.toNumber = function(){
  return Number(this);
}

If you need to split large JSON arrays into groups of two or three each, you could extend the Array object like this:

[js]
Array.prototype.inGroupsOf = function(num){
	var ret = [],
		length = this.length,
		groups = Math.ceil(length / num);

	for(var i = 0; i < groups; i++){
		var start = i * num,
			end   = start + num;

		ret.push(this.slice(start, end))
	}
	return ret;
}

Now calling inGroupsOf(3) on any Array would return that same array split into as many parts as needed to ensure no group has more than three items in it.

There are a number of objects you can extend, but the ones you will use the most are String, Array, Object, Number, Date. One trouble area you might face is calling methods on numbers. The following example will fail:

Number.prototype.to_s = function(){
  return this + "";
}

25.to_s();

The prototype function is correct, but the way we called it is wrong. There are two ways to call our custom functions on numbers:

var n = 25;
n.to_s(); // Returns "25"

(25).to_s(); // Also returns "25"

Think Start, Not End

Its important when deciding what object to extend that you focus on what object type you are starting with, not so much which type you plan on ending with. For instance, if you wanted to extend an object to easily parse Twitter date strings you would not extend the Date object. You would extend the String object, and your function would return a Date object.

Load Your Extensions First

It is normally a good idea to load these extensions prior to any other library, including jQuery. Anytime you extend the prototype object, the new method is instantly available to all objects of the same type or any object that has inherited from that type. However, since you want to be sure your methods are always available, you guarantee their availability by loading them first.

How to Group The Extensions

Naming your files Prototype.Date.js and Prototype.Array.js is an easy way to keep all your extensions in one part of your JS folder, and easy to access during development. If you follow this method, you would simply put Date.prototype methods in the Prototype.Date.js file, etc. This starts to break down when you have parallel functions. You might have a toDateFromTwitter() method on the String object and a toTwitterFromDate() method on the Date object. Putting these in separate files might not make sense. At that point, you should put both these extensions in a file named TwitterHelpers.js or something similar. Obviously use what makes sense to you and works with your flow.

Don’t Bloat

Just because you write 500+ awesome Array extensions in the next 2 years, does not mean you need to include them on every project. Be sure to only use this technique when it makes sense for the project and when it helps clean up your code.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

JavaScript Can Learn: Now Teach It Tricks!

Roll Your Own PHP Framework: Part III

Wess Cope — Thu, 22 Oct 2009 16:10:33 +0000

In Part I and Part II we looked at how to set up our file structure, how to get URL routing working and how to set up templating for our little framework. In this final part to the series, we are going to briefly look at database access.

Mini-series Overview

You can download all the files put together during this three part series here:

I’m not going into detail about how to create an ORM or ActiveRecord clone. We are just going to write a simple helper class to setup our connection and query. Also I’m going to assume you know how to create a database and table in the database.

I have created a database called “peanut” and created table:

users:
+----------+--------------+------+-----+---------+----------------+
| Field    | Type         | Null | Key | Default | Extra          |
+----------+--------------+------+-----+---------+----------------+
| id       | int(11)      | NO   | PRI | NULL    | auto_increment |
| username | varchar(255) | NO   |     | NULL    |                |
| password | varchar(255) | NO   |     | NULL    |                |
+----------+--------------+------+-----+---------+----------------+

In this example we are going to use Mysql and the php mysql_ methods. So break open system/database.php and drop the following in:

connection = mysql_pconnect("localhost", "root", "somepassword") or die("MySQL Error: " . mysql_error());

		// And let's tell mysql which db we are going to use.
		mysql_select_db( "peanut", $this->connection );
	}

	// This is just a helper function to help out against
	// possible sql injection attacks.
	public function escapeString($string)
	{
		// we call mysql's 'cleaning' function on strings
		// just to make sure we get a little safer item to query
		// with.
		return mysql_real_escape_string($string);
	}

	// Here we will query the database with the passed query string,
	// build up an array of objects and return them, simple enough.
	public function query($qry)
	{
		// Here we make our query and set the result to a $result variable
		$result = mysql_query($qry) or die("MySQL Error: " . mysql_error());

		// Create a container array variable to hold all of our result objects.
		$resultObjects = array();

		// This might look weird, but all we are doing is saying,
		// While you are still getting results, please put the next
		// result into the next spot on my array.
		while($resultObjects[] = mysql_fetch_object($result));

		// Now we just return our array that has all our result objects in it
		return $resultObjects;
	}

	// Here we add a simplier method for handling INSERTs and UPDATEs since
	// they do not return a result set.
	public function execute($qry)
	{
		$exec = mysql_query($qry) or die("MySQL Error: " . mysql_error());
		return $exec;
	}
}
?>

So we have our database class in place and ready to use, now we just need to require it in the index.php like we did the others, so pop that bad boy open and after the template require, do one just like it but for the database.php

Now let’s crack open actions/helloworld/models.php and let’s write a simple addUser and getAllUsers method to it. We are going to make our model a class as well so that it can extend our Database class that we wrote.

Here are the guts:

escapeString($username);
		$password = $this->escapeString($password);

		// We execute our insert and if it worked $success
		// will be true else it will be false.
		$success = $this->execute("INSERT INTO users (username, password) VALUES ('{$username}','{$password}')");

		// We return $success to inform our page action that it has or hasn't worked.
		return $success;
	}

	// This method does just what you think it would.
	// We are going to use the query function because
	// we are expecting data back, then we are just
	// going to return the array of user objects.
	public function getAllUsers()
	{
		// Populate the $users variable with the results of our query
		$users = $this->query("SELECT * FROM users");

		// Now we return our results
		return $users;
	}
}
?>

Now we need to change our actions/helloworld/actions.php mypage page action to:

addUser("wess", "password");

	// Now let's fetch all of our users and put them in our users
	// variable.
	$users = $model->getAllUsers();

	// Let's create a new template object and pass it the path to our template
	$template = new Template("helloworld/templates/helloworld.php");

	// I bet you want to display a table in your template with all your newly
	// created users. So let's do it

	// That's write we use the same set command, and it will set our array of users
	// to our template variable $users, and since php is our template language
	// it's real easy to print them to the screen.
	$template->set('users', $users);

	// Set our page variable "title" with the value "Hello World"
	$template->set('title', 'Hello World');

	// Set our page variable "message" with our little message
	$template->set('message','This is my first message for my template');

	// Now we can call render and return it to dispatch to
	// display in our browser
	return $template->render();
}
?>

So now you are handing all your users from your database to the template, so let’s display them. Change your actions/helloworld/templates/helloworld.php file to:

My PEANUT Page

Users:

ID	Username	Password
id ?>	username ?>	password ?>

Now if all went well, you should save all your files and open up: http://mywebapp.local/helloworld/mypage and see all the users that you added in a table.

So you have created a template class, url basic url routing, simplified database access, and a page action. You have all the core basics of a PHP Framework at your hands now. This is just for a starting point or foundation of understanding, please do not use this in a production environment.

I have really enjoyed writing this and I hope you learned something from my rambling! The source code is available for download at the top of this article.

Take care,
Wess “Wattz”

Updated October 26, 2009: Thanks to Alex and Ian for spotting some errors in the code and supplying the fixes. The code examples have been updated to reflect the changes as has the ZIP file.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Roll Your Own PHP Framework: Part III

Easy to update thumbnail gallery using Textpattern and Galleriffic

Marie Poulin — Thu, 08 Oct 2009 16:22:10 +0000

This tutorial assumes that you have a fairly strong understanding of HTML and CSS. I have provided a basic style sheet with all necessary styles to achieve the look of gallery demo, but please feel free to edit the css. We will be building a very simple updateable thumbnail gallery using Textpattern and Galleriffic. There are a few tutorials out there of a similar nature, but I have found this to be the simplest way to integrate Galleriffic with Textpattern.

Below is a screen capture of the final gallery. To see the gallery in action, click here

This tutorial assumes that you have textpattern installed and ready to go.
( Download the latest version of Textpattern here: http://textpattern.com/download)

Galleriffic

This gallery is based on Galleriffic, a jQuery plugin for rendering fast-performing photo galleries. This is adapted from http://www.twospy.com/galleriffic/ to work with textpattern so you (and your clients!) can easily update the gallery. In a nutshell, the gallery works by associating image id #s with a specific article. The article form gallery and article_image_form work together to render the article in the form of all of the associated images (in their thumbnail format) to appear as an unordered list on the left, while the full version of the current image appears on the right. All that is necessary to add or change images, is to change the numbered list appearing in the advanced options on the left of the article containing the images. So easy once implemented, even a client that doesn’t speak nerd can add, subtract or change their own images.

Upload the files

Upload both of the galleriffic files included in the files folder of the download, by uploading them through the Content > Files tab. I modified the jquery.galleriffic.js file so that the pagination does not appear above the thumbnails. Should you wish to further customize the gallery, I do suggest checking out the original Galleriffic demo.

Install the relevant plugins

Install the following plugins (these are included in the Plugins folder in the download):

upm_image by Mary Fredbord – more powerful image display
ebl-image-edit by Eric Limegrover – introduces advanced image editing functionality

(I have had technical issues with v.2 of this plugin, so I continue to use v1. Both are included in the plugin folder.)

ebl-image-edit is great for sizing/creating thumbnails on the fly, without having Textpattern automatically centre the thumbnail. It is not essential to this tutorial, but it’s very very handy!

Set up your forms

You can find these forms in the forms folder in the download.

gallery

Create a new form called “gallery” and choose “article” for the type:

article_image_form

Create a new form called “article_image_form” and choose “misc” for the type:


" alt="" />

If you don’t want captions, delete the whole caption div.

Basically we have taken this code from galleriffic:


      (Any html can go here) 
 
 ... (repeat for every image in the gallery)

and modified it so the article forms generate this code from the image numbers that we will associate with the gallery article. We’re basically saying, “take the images associated with this article, put the thumbnail versions of those images on the left with these classes and this formatting, and put the full version of the selected image on the right.” Huh? Just follow along, I promise it will all make sense soon…

Set up your page

In the pages folder I have included a template for this gallery page (gallery.html). Create a new page template in textpattern: Presentation > Pages. At the bottom, “copy page as”, name it gallery, and click “copy.” Make sure whatever section you are using for the gallery is in fact using the gallery page as its template. At the bottom of the page you will notice the galleriffic script. This is where you can make adjustments to sizes, number of thumbnails, etc. In this example I have set a limit of 9 to the thumbnails. At the bottom of the page, near the top of the script, it looks like:


numThumbs: 9,

Set up your style

I have created a master style sheet that incorporates some of the Textpattern defaults as well as galleriffic specific css. Copy the content from the screen.css file provided in the Styles folder and paste it into your default styles tab under Presentation > Style.

Add your images

Go ahead and start uploading some images, and create some thumbnails. Make sure your images are all using the same size of thumbnail. Take note of the image ID numbers, as that is what you will use to call your images into the article. Make sure to add the Alt text and Caption when you upload, as this is what will appear to the left of the main image (unless you opted to delete the captions).

Create a new article called gallery. On the left hand side, click advanced options, and enter the ID numbers of the images you want to appear in the gallery, separated by commas. Make sure you post the article to the gallery section, or whichever section you have set up to display the gallery, and click publish. Your article should look something like this:

View Site. You should notice that the images have been automatically formatted into thumbnails on the left, with the first one appearing in full on the right. That’s it! You have a galleriffic gallery integrated with Textpattern. Play around with the html, settings, scripts and CSS to customize it to suit your own needs.

If you have any questions, suggestions, or requests for future articles, please do not hesitate to leave a comment.

Thanks, and happy coding!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Easy to update thumbnail gallery using Textpattern and Galleriffic

Roll Your Own PHP Framework: Part II

Wess Cope — Mon, 21 Sep 2009 13:03:35 +0000

A little over a week ago, we looked at how to set up our file structure and how to get URL routing working in our little framework. So we now have something to handle urls and display a page, but we want to make the page a little more attractive. Since there is nothing fun about making php print html, let’s add a template piece to the puzzle. We won’t have to do too much since php is a great template language by itself.

Mini-series Overview

Part 1: URL Routing and Directory Setup
Part 2: Templating
Part 3: Database Interaction

Note: I’m assuming you have a little OOP (Object Oriented Programming) experience. There are a ton of tutorials out there, so just a heads up: I won’t be teaching/explaining OOP here.

We are going to create a class Template and add a little code to it so it will return our pretty new page to our browser.

Wipe out system/template.php and add the following code to it:

template = $actionsDirectory . '/' . $template;
	}

	// Now we create out set method to allow use to set variables that
	// we want in the template.
	// So in our page action we would do:
	// $template->set("title", "hello world");
	// and in our template:
	// 
	public function set($var, $val)
	{
		// This may look weird, but it's not to bad;
		// what we are doing is setting the index name
		// of our associative array pageVars
		// (we setup earlier at the top of the class)
		// to the value that we pass. so $pageVars["yourVar"] = "yourValue"
		// is basically what it's doing.
		$this->pageVars[$var] = $val;
	}

	// To render we will need to do a couple of things.
	// First we will need to extract those pageVars then
	// include the template, populate the values in the template
	// and return a rendered page to the browser
	//
	// This is far more easy than you think it is
	// trust me!
	public function render()
	{
		// The extract function is a weird bird
		// when you call it on an associative array
		// it creates regular vars.
		// For instance:
		// 		$this->pageVars["yourVar"]
		// becomes:
		// 		$yourVar
		// so basically we are converting all the
		// index keys (with their values), in pageVars to
		// their own respected variables
		extract($this->pageVars);

		// Now that we have all the variables extracted, the vars we set
		// in the template will be replaced by the value of the pageVars variables.
		// Now we start up our output buffer, grab our template and return the
		// buffer with it's "rendered" template
		ob_start();
			require($this->template);
		return ob_get_clean();
	}
}

Well hello templating! Now let’s do a couple of things to hook it up to our framework. First, let’s open up our www/index.php one more time and add the following line:

require(PEANUT_ROOT_DIR . ’system/template.php’);

Right underneath the dispatch.php require statement. Now let’s change our actions/helloworld/actions.php mypage function to look like:

// We simply define the function (the second item in our request url)
// making sure it is the same name as the one in the url.
function mypage()
{
	// Let's create a new template object and pass it the path to our template
	$template = new Template("helloworld/templates/helloworld.php");

	// Set our page variable "title" with the value "Hello World"
	$template->set('title', 'Hello World');

	// Set our page variable "message" with our little message
	$template->set('message','This is my first message for my template');

	// Now we can call render and return it to dispatch to
	// display in our browser
	return $template->render();
}

Ok, so now our page action is setup to use our new found template class, now we need to setup our template

So inside actions/helloworld/templates/helloworld.php template put the following:

My PEANUT Page

Ok, so let’s see where we are at. We have basic url routing, templating, and page actions. We are only missing one thing, a way to talk to the database! That will be the next and final article in our mini-series on rolling your own PHP Framework.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Roll Your Own PHP Framework: Part II

PHP Frameworks? Just roll your own! – PART 1

Wess Cope — Thu, 10 Sep 2009 12:13:01 +0000

There are quite a few php frameworks out there. Some huge, some small; Some useful, some not. I often hear developers, even myself, complain about frameworks in php not having or not doing something the way they/we want it too. So my solution? Roll your own framework! This series of articles is going to give you a brief and quick intro on how to do just that. We are going to cover url routing, basic database connection, basic templating and basic rewrite rules for Apache. What we will not cover is ORM development, advanced routing and installation of LAMP (Linux, Apache, MySQL, PHP). Also error checking will be next to none as this is just an example.

Mini-series Overview

Week 1: URL Routing and Directory Setup
Week 2: Templating
Week 3: Database Interaction

To get started let’s setup our directory structure. We are going to call our framework “Peanut” (first thing that popped in my head).
So for our structure let’s make it really basic:

MyWebApp/
  '---actions/
    '---helloworld/
      '--- actions.php
      '--- models.php
      '--- templates/
        '--- yourTemplateHere.php
'---system/
  '--- template.php
  '--- database.php
  '--- dispatch.php
'---www/
  '--- js/
  '--- css/
  '--- images/
  '--- index.php

Let’s break this structure down, it’s simple.

MyWebApp: the root of your web app that will be using our “Peanut” framework

actions: this will contain all the pages our web app will use.
- helloworld: is the name of our page action or ’section’ of our site
  - actions.php: is where we will code our page actions
  - models.php: where we will write all our database interaction
  - templates: this is the folder we will store all our views/templates
system: this is where we will store all our framework specific classes/source/libraries
- template.php: This will handle all of our template rendering.
- database.php: This is for our database connection and access
- dispatch.php: This will parse our url and call the correct page action.
www: this is our root web directory, it is also where we will pull everything together.
- js: the directory where you store your javascript
- css: put your style sheets in here
- images: guess!
- index.php: This is the file that will initiate and pull together the pieces of Peanut.

Now that we have a directory structure, let’s setup a virtual host in Apache to accommodate for Peanut. Here is an example of a virtual host you can use (here is what I do on my Mac):

NameVirtualHost *:80


        ServerName      mywebapp.local
        DocumentRoot    /Users/wcope/Sites/mywebapp/www

        AcceptPathInfo On

        RewriteEngine On
        RewriteRule     /*\.(css|js|gif|png|jpe?g)$ - [NC,L]
        RewriteRule "^(.*)$"    "/index.php?_url=$1" [QSA,L]

        
                AllowOverride All
                Order allow,deny
                Allow from all

And In my /etc/hosts file I add this line:

127.0.0.1	mywebapp.local

That will allow ‘mywebapp.local’ to resolve to my localhost where Apache will pick it up and kick it off to the virtual host we created. Inside that virtual host we have some rewrite rules that will redirect all request made (except css, js, gif, png, jpeg/jpg) to index.php?_url=$1. To break that down in the simplest way, basically Apache takes: mywebapp.local/some/page and redirects it to index.php?_url=/some/page (but you never see the latter). Also notice that we made the root directory of our virtual host to our www folder where index.php is.

Ok, so now we have our directory structure, virtual host and rewrite rules all setup. If you have any detailed questions about Apache, mod_rewrite, virtual hosts, host files, etc. Sorry they will not be covered here due to the fact that there is tons on it out there… so hit up your local google.com :).

So now let’s get to some code.

So first lets write our dispatch code since that will be what is responsible for routing all our request to the proper pages.

Open up index.php in your favorite text editor and let’s slap some code in it:

In this file is a good place to put constant variables, include any files and call our dispatch (once we write it). But for right now let’s do a little test, and also write a little helper function I’m going to use to print stuff to the screen that can help us see what’s going on.

' . print_r($item, true) . '

'; if($die) die($printString); else echo $printString; } // Now let's just dump our URL to make sure that all paths lead here dump($_GET); ?>

Now if we bring up our url: http://mywebapp.local/some/url/ we should see something like:

Array
(
    [_url] => /some/url/
)

So now we can see that our rewrite is working and we are ready to start writing our dispatch function, so let’s change our index.php code a little.

' . print_r($item, true) . '

'; if($die) die($printString); else echo $printString; } // Let's comment this out // dump($_GET); // and add this: // first we are going to drop our dispatch file in here require(PEANUT_ROOT_DIR . 'system/dispatch.php'); // then call our dispatch function to handle the url // Notice Im not passing in $_GET or $_GET['_url'], being that // $_GET is a global system variable, I don't have to worry about it // here. dispatch(); ?>

So now let’s save that and crack open our system/dispatch.php file and and add some code to it to handle our new found url pattern. As I said before, this will only be a simple router with no config or predefined url pattern to page action mapping.

So, inside dispatch.php, let’s add:

Now if you refresh your browser at our current url (http://mywebapp.local/some/url/) you should see:

Array
(
    [0] => some
    [1] => url
)

Great, now we have 2 clean items to work with. So let’s tell dispatch that the item at index 0 will be our folder and item at 1 will be the page action inside our actions.php file. Since our directory structure is setup to use actions/helloworld/actions.php, let’s setup dispatch to include the file with our action in it in the directory that was requested in the url. So change dispatch.php to look like:

// Let's handle that url
function dispatch()
{
	// First we are going to grab the url path and trim the / off
	// the left and the right.
	$url = trim($_GET['_url'], '/');

	// We changed this from before to make it easier to read and also so we can
	// work with easier variables.  using the list (http://php.net/list) function
	// will map the array indexes to the respected order of the var names inside
	// the list function call (better explanation at php.net/lists).
	list($directory, $action) = explode('/', $url);

	// Now we drop in our respected actions file from the directory in the url
	require(PEANUT_ROOT_DIR . 'actions/' . $directory . '/actions.php');

	// And call the action from inside our actions.php file
	// and since we want to end our request with the return value of our requested method
	// let's just die on the return.
	die($action());
}

Now we need to add our action inside our actions.php file, so open it up and drop the following
in it:

So let’s give this a shot. Open up your web browser and point it to: http://mywebapp.local/helloworld/mypage.You should see a pretty little “Hello World” in the browser. If you do, congrats! You now have routing in your new Peanut framework.

Next week we will see how to add templating into our framework.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

PHP Frameworks? Just roll your own! – PART 1

Getting Started with Chyrp

Ethan Turkeltaub — Fri, 07 Aug 2009 20:38:21 +0000

Introduction

In the world of web development, when building a blog, you don’t always want to refer to a slow, over-featured blogging engine like Wordpress. Thankfully, there is a solution, and its name is Chyrp. Chyrp is a blogging engine that is designed to be extremely lightweight, while still retaining functionality. Alex Suraci, the developer behind Chyrp, codes it in Twig, a language specifically created for this project. The Twig is then put through a compiler and its output is solid PHP.

Before we start, it is important to know how Chyrp is extended: Feathers extend post formats, Modules add functionality, such as a commenting system, and Themes change the look and feel. Keep this in mind.

Interested? Well then, let’s get started!

Installation

Download Chyrp, and open up the folder Chyrp v2.0, which should be in the same directory as the archive. Select all the contents and copy and paste it to a directory on your web server (for the purposes of this article, we’ll be using the /chyrp/ directory). Now would be the time to read the COPYING file, so you don’t break any copyright laws. You can delete it or keep it, along with the README.markdown file. If your server isn’t already started, start it. Go to http://localhost/chyrp/ (Or whatever address you use to access your testing server) in your web browser and you should have two errors at the top of the browser window: one for the .htaccess file, and the other for permissions.

Go ahead and create the .htaccess file with the contents it shows, and save it in the /chyrp/ directory. You also need to CHMOD the /chyrp/includes/ directory to 777. This means changing the permissions to all read and write. Once you’ve done that, refresh the web browser page. Now, go ahead and fill in your database information. In this article, we’ll be using MySQL.

Back at the installation screen, insert your database information. The host is usually localhost. As for a table prefix, we can leave that blank, unless we’re installing multiple instances of Chyrp on the same database.

Once you filled out the form, hit Install. It fills the database with the information and configures the files within the instance. When it is complete, this page will show:

So, delete install.php within /chyrp/, as it poses a security risk if you keep it. If you speak German, you’re in lucky, because that is the only language pack available at the moment. So now, click Take me to my site! and you’ll be taken to the home page.

As you can see, there are no posts. Go to the sidebar and click Login, and use your credentials from before. Once that is done, a toolbar will appear in the top. Click the Admin link and you’ll be taken to the backend.

Writing in Chyrp

When you open the backend (it is located at /chyrp/admin/), the Write section is automatically visible. And because Chyrp is a blogging engine, you can make posts and pages. Posts can come in many different forms, such as photos, videos, and plain old text. These different forms come in extensions called Feathers. If you add a photo, you’ll need the photo Feather in order to do that. The text Feather already comes with Chyrp, and is already activated. The photo, video, link, audio, quote, and chat Feathers already come with the installation, but are not yet activated. We’ll go through activating them later.

To create a post or page, just select the type on the tabs and type up what you’d like to say. If you click More Options you can choose a permission status, slug, trackback, timestamp, and pinned status (whether or not you’d like it as first post, no matter what). Once you’re done, you can save it, or Publish it. Once you hit Publish, Chyrp will take you to the home page, where you can view your post. It’s just that easy!

Manage your Install

Head back to the backend and click on the Manage tab, near the top. This will bring you to this page:

From here you can manage everything about your install. If you click one of the tabs near the middle of the page, you can select what you want to manage. As you add Modules, more tabs will appear.

Modules are ways to extend your install. For example, one Module creates a commenting system, and another allows you to cache pages. We’ll get into this later.

What you need to focus on in the Manage section is the Groups tab. This allows you to change permissions for groups. Currently, you are part of the Admin group. Click on the edit link (it’s on the right side) and you’ll be taken to the page for editing group permissions, as well as the name of the group. Click Save when you’re done.

Change the Settings

The next navigation option is Settings. Under General, you can change your blogs’ name, description, and other settings. Under Content, you can edit posts per page, uploads path, and allowing XML-RPC support. Then, in Users, you can allow r disallow users registering themselves, the default user group, and what group Guests are in (you can even allow all un-registered guests to have Admin permissions, though it is not suggested). Finally, under Routes, you can allow clean URL’s, which will make the URL’s formatted as stated in the form below (I highly recommend it—who wants a URL with a question mark in it?).

Extending your Install

The Extend section is very important. Extensions are what make Chyrp so very powerful and functional. Modules are very powerful, and the ones that are made by the head developer come with Chyrp. Those are:

Textilize
SWFUpload
Paging
Aggregator
Tagginator
Read More
Comment System
Markdown
SmartyPants
Cacher

All these do exactly what they’re named for. To activate them, just drag it from the red zone into the green zone. When you do that, a dialog pops up, reminding you to change the permissions. Once you’ve added all the Modules you want, go back into Manage > Groups and change the permissions so you can manage the Modules.

Now, go ahead and go into the Feathers section. As you can see, the following Feathers come with Chyrp:

Photo
Video
Link
Audio
Quote
Chat

Plus, the Text Feather, but it is already activated. To activate them, it is the same action as before. If you enable the Photo, Video, or Audio Feather, then you need to create a uploads directory in /chyrp/ and CHMOD it to 777 so you can upload media.

And finally, Themes. The theme that comes with Chyrp is called Stardust. It may be fine for a casual blogger, but for a designer, like me, you need to design your own. That will be in a follow-up article.

Downloading Extensions

There are some more extensions on the Chyrp site. There are not many, but the user base is growing rapidly, and so is the development base. To add Feathers, Modules, Themes, etc, just download it and extract the archive to /themes/, /modules/, or /feathers/, respectively. Then, just go into the backend and activate it. It’s just that simple.

Chyrp vs. Wordpress

You may be questioning, “Why Chyrp? Why not just go with the popular solution: Wordpress?” Well, why Wordpress? There are a lot of functions in Wordpress that you’ll never need or use, so why have them. A fresh Chyrp install is bare bones, and you’re free to install what you need. Plus, Chyrp is a lot faster than Wordpress, on the front and backend.

As well as speed, Chyrp has better code than Wordpress—Alex (founder and sole core-developer) uses Ruby on Rails and Python helpers to have perfect code that is easy to edit.

While retaining functionality, Chyrp is more flexible than Wordpress. It can do a lot of different functions, and is easy to mod to your hearts content.

So why use Wordpress?

The Chyrp Community and Support

Chyrp has a strong community and support group. In the Discuss section of the Chyrp site, you can ask for help or just discuss… whatever. Or, to get instant help, log on to good ol’ IRC on irc://freenode.org/chyrp (that would be irc.freenode.org as the server, then #chyrp as the channel).

In the next article, we’ll be building a custom theme!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Getting Started with Chyrp

A Few Strategies for Using JavaScript

Douglas Neiner — Fri, 03 Jul 2009 20:42:51 +0000

The primary use for JavaScript in web pages is to enhance or add functionality not present in a static web page. If used correctly, this can be a great asset to a skilled developer. Used incorrectly, you (and your users) will be in for all sorts of nightmares.

Before we get to the good strategies, here are three things NOT to do.

Don’t Use JavaScript…

To add information that needs to be indexed by search engines.
This is a no brainer, but still easy to overlook. We try so hard to have lean and mean HTML that we can be tempted to move indexable information into javascript vs. keeping in the HTML. If the search engines need to see it, leave it in the HTML.

To fix things you are too lazy to fix in the source.
If you have the opportunity to apply a fix, move the elements around, or otherwise achieve your end result without using JavaScript, do it. There is a performance hit realized with editing the DOM with JavaScript. Only use it if it makes sense.

Primarily to make a site “cool”
I could reverse the statement to read “Only use JavaScript to enhance the user experience, provide appropriate indicators to the user, and improve the overall usability of the site.” Or, in more cliched terms, “JavaScript Responsibly”. There are tons of things you can do, but be sure only tackle the things you should do.

Good Strategies

Choosing a Good Framework (or Not)

Should Beginner JavaScript Programmers Use a Framework?
There are currently many strong Frameworks and Libraries for JavaScript. Prototype, MooTools, and jQuery are just a few. The question then is asked, “Should you learn straight JavaScript first, or start with one of these frameworks?” Though JavaScript syntax and best practices are super important, I would argue that you should start with a Framework if all you plan to do is enhance your web pages. This is often the simplest to learn, and you won’t have to waste time on browser differences in how they handle common functions (Think XMLHTTPRequest). If you plan on developing advanced AJAX/DHTML front-ends, then learning how to manipulate the DOM, make AJAX requests, etc using only JavaScript would be a good idea. If you want to build plugins for your Framework of choice, then it is also a good idea to understand what is happening behind the scenes.

A Framework May Make Maintenance Easier
Its pretty short-sighted to assume you will be the only one maintaining or editing your code down the road. Your business may grow, your clients may move to another developer, etc. Its due to the idea of group editing that I suggest the use of a solid Framework. If you use a framework, and use it correctly (Doing it the “right way”), other people picking up your code should have an easier time finding out what is going on.

Know When To Avoid Using a Framework
There are many situations where using a Framework becomes impractical. If all you need to do is show or hide a single element on a page, use straight JS. Its not worth the 50k+ overhead to load the Framework. If you are building a widget for inclusion on another site, don’t use a Framework. As an example, FoxyCart is a super easy to use cart system that uses JavaScript to power their cart. A problem you will run into when using FoxyCart, however, is that they include their own copy of jQuery. As a widget/library that is embedded on someone else’s site, they should have coded their library by hand to avoid conflicts with other libraries. (For you jQuery people out there, using $.noConflict doesn’t fix problems with two copies of jQuery running on the same site).

Fixing Element Jumps

If there are a lot of elements on the page that apply specifically to a JavaScript context, you may see elements jump around, or appear then disappear when the JavaScript finally loads. There are many different situations where this could be a problem, but here are some strategies for avoiding it. This is often more of a problem if you put your JavaScript files at the bottom of the page (As you should).

Use Special CSS Classes
I like to add a no_js class to elements I intend to enhance with javascript. Style the elements in your javascript file using the .no_js class for how they should appear when either JavaScript is disabled, or it hasn’t loaded yet. Have the last step of your JavaScript setup be to remove that class from the elements.

Start Editing Earlier
If you use a JavaScript Framework (like MooTools or jQuery) be sure to utilize their DOM Ready functions instead of onLoad. The DOM will often be ready far before everything has fully loaded and may afford you the extra time you need.

Add JavaScript Specific Elements with JavaScript
If an HTML element’s only value is realized when JavaScript is in use, then add it dynamically with Javascript. For example, you don’t want an empty div#overlay just sitting at the end of your HTML. Just add it with JavaScript.

Debugging

Use Firebug and console.log
In a tiny script, dropping in alert('Here!') might work OK. However, when doing anything larger, you will want to utilize the Firebug console for testing and debugging. Use it to output values and objects, and even DOM objects. It will often provide quick insight and let you solve problems faster.

Don’t forget to remove console.log Statements
If you use Firebug, be sure to remove console.log statements, or provide another way to avoid missing method errors. This one has caught me so many times: It works on my computer, but not on the client’s computer. We are both using Firefox. To add to the confusion, the site functions fine in Safari too. What is wrong !!? Ah! It’s the remaining console.log statements I used for debugging! Safari will often just skip the statements without complaining much, so BE SURE to search for “console.log” and remove the statements before deploying (or showing a comp to the client).

Conclusion

I have just touched on a few strategies and tips for using JavaScript on your pages. Feel free to share your own in the comments! As I come across other useful tips in the future, I will be sure to post them to the site as well.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

A Few Strategies for Using JavaScript

10 Rules of Front End Coding

Douglas Neiner — Tue, 16 Jun 2009 20:45:00 +0000

What follows here is a series of 10 things to remember and practice on each web development project. I have listed them here in order of importance as many of the steps build on each other. If you take nothing else away from the reading, please take Rules #1 and #2 to heart and practice them. I think solving those two problems will lead to better design and better implementation in websites across the Internet.

1. Charge Enough, and Then Some

Especially in hard economic times, business and individuals alike are trying to cut costs and keep projects down to a minimum. Due to this knowledge, we as web developers try to move through each phase as quickly as possible. Front end development, however, take a substantial amount of time if done properly. Not adequately charging for that time leads us as developers to skip over things we know are important just to keep the project within the budget. The rule is simple… you normally won’t take the time to do it right if you don’t have the time to take. The only way to get more “time” as a developer, is to guarantee the time we DO spend is properly compensated. At that point alone can our hearts and minds be fully plugged into our projects… and only then can we take the time to follow the remaining 9 rules.

2. Educate The Designer

For those who are a designer/developer all-in-one machine, this one should be easy. However, coders who work with or for a designer have a unique responsibility. As many designers come from a print background, it is up to you, the developer, to educate them on the possibilities available to their designs. No… I didn’t say let them know about the 150+ jQuery plugins you use, or your thoughts on using a UL/LI combo vs a series of A tags. I said educate them to the possibilities. Help them understand how their design might display on different devices. Help them understand how to leverage repeating backgrounds and tiled patterns to achieve great designs with minimum file size.

Don’t leave the creativity solely to the designer either! This is your chance to prove you are creative as well by finding the perfect technology solutions to meet the needs of the designer. Telling them “it just isn’t done that way” for every request is a sure-fire way to cause frustrations on both sides. Put your mind to work finding ways around hurdles.

Note: Rules 3 through 10 build off these first two rules. Some of the following rules require additional graphics from the designer, and all the rules take time to follow. Make a commitment to rules 1 and 2, and the remaining rules will both make sense and make your finished product that much better.

3. Think in Layers, Not in Slices

Even today, we still use the phrase “cut up the design” to describe the process of moving a design from Illustrator or Photoshop into the finished HTML/CSS layout. While this is still largely accurate, its name belies the former concept of slicing a design into pieces and reassembling it (usually in a table) back on the HTML page.

That was the old web. The new web uses the concept of layering, stacking, and z-index to achieve designs with depth. As a coder, be sure to get layered PSD files or layered AI files from the designer vs. a flat design. This will allow you to have much more flexibility in how you put together a web site. Remember, when working in layers, consider the HTML elements that are essential to the structure before resorting to adding additional divs and spans. You can use a repeating vertical pattern on the html element, and a repeating horizontal background on the body element without bringing the dreaded div#wrapper in to solve your background woes.

4. Use the Best Image Format

What is the “Best Image Format” you ask? It’s the one that is best suited to the task at hand. PNG, GIF, and JPEG files all have different advantages. When there is no transparency in an image, test out which file size/image quality is best between PNG, GIF and JPEG. For large images, JPEG will almost always win for quality vs size. For small images without transparency, see which has a better file size PNG or GIF. If you decide on a GIF, be sure to play with the dither options and the lossy options (Did you even know Photoshop has a “lossy” option for GIF?). Often you can squeeze even smaller files out of Photoshop through adjusting the output settings even further.

For images that need to have transparency, make educated decisions on how they will be used. If they will be layered over a complex background, you may need to consider using a PNG file. If the background is consistent enough that the color matte of a GIF won’t stand out poorly, see if the GIF file is smaller. GIF has the advantage of not needing additional programming to make it work in IE6.

Regarding JPEG use: If you use JPEG as part of your user interface (and not just to display a photo, etc) be sure to leave off the ICC profiles when saving for web. Certain browsers will honor the profile and produce a color difference between GIF/PNG and JPEG files of the same color. This is a simple problem to avoid by just turning off the ICC profiles.

What if it is a lose-lose situation? There have been times where I need the full transparency of a PNG with the image complexity better suited for a JPEG. In these cases I often stack (remember, think in layers) two images: a PNG for the transparency, and a GIF for the complex image aspect. It is creative problem solving like this that will ensure your pages load quickly, and that the design retains its integrity.

5. Know When to Use Classes vs. Ids

I thought this was just common sense, but apparently it isn’t as I see many coders using class names where they should use ids. It may not seem like a big problem, but it will when you try to target an element using Javascript.

The concept is simple, if there will only be one element on a given page, use an id. If there will be multiple instances on a given page, use class names. Anytime an element is one-of-a-kind, use an id. Its that simple! Things like ul.navigation for the main navigation bar or div.site-logo make no sense. Each of those elements are distinct and should have and id.

Instead of adding another rule to our list, let me lump something else in here: don’t use too many classes! Take the following code for an extreme example (Notice that classes appear six times):



Home
Contact

All that could be replaced with the following (A single id and a single class):


 Home
 Contact

For those who code frequently, you realize this is a ludicrous example, but it shows the fallacy of over-using classes. Use only what you need to correctly style and enhance (via Javascript) the HTML, nothing more.

6. Make Your Pages Responsive

Its important that the page responds correctly as the end user navigates through it. Using conventions like image rollover effects as well as :hover, :active and :focus states cannot be stressed enough. You don’t want to assault the user with too many interactions or styles but most people respond well to visual feedback. Here is an easy one for you: links should change state when the mouse hovers over them… period! It is not enough that the browser displays a little hand indicating a link. I can’t tell you how frustrating it is to search through a page with black text looking for the dark gray links and hoping and praying that the hand appears letting me know I found one!

Using conventions such as the “You are here” indicators or descriptive tool-tips all fall under this category. The more interaction and feedback that appears to the user while they navigate through a site, the better.

7. Always Use CSS Sprites for Rollovers

If you don’t know what CSS Sprites are, check out this article at Smashing Magazine or this one at A List Apart for details. For those who DO know what they are, why don’t you use them!!? If you tell me its due to a lack of time, I want to refer you to Rule #1 in this list. Past the time argument, I can’t really think of any benefit more important than using CSS Sprites for image rollovers. Check out the Starter for jQuery site. Almost all the user interface pieces are built using a single PNG file (pictured below). The interface loads all at once, and all the hover/active states are immediately available. No delay for a :hover image to load; One request to the server, not 10+. This a fantastic tool in the Front End Coding Toolkbox that developers need to use more frequently.

8. Understand the Difference Between Flash and Javascript

I think Javascript can do amazing things. I also love pushing the limits of what it can do. I love making widgets and plugins just as much as the next guy… but Javascript cannot solve all the problems in dynamic web development. Instead of spending 10 hours emulating a Flash feature that would take 1 hour to make in Flash, make the right choice and choose Flash. On the other hand, if you just need an image rotator… don’t you dare open Flash!

9. Test Your Site in Many Browsers (including IE6)

This one takes time, there is no doubt about it. I develop on a Mac, and have a PC (and multiple Virtual PC environments) that let me test is most of the normal browsers people use today. Unless you have Google Analytics reports that say no one uses IE or everyone uses Firefox, don’t make an assumption on how people will browse your site. I am not saying make the sites look identical, but make them work, function, and look nice (And certainly similar!) in most browsers.

Note: I mention IE6 specifically because my largest client is a corporation that still uses IE6. I have developed a coding style that allows me to build rapidly for modern browsers, and implement only a few style sheet and javascript fixes so the site looks right in IE6. I am sure I lose some edge by doing it this way, but it saves me from many embarrassing moments.

10. Always Keep Maintenance In Mind

As you are “cutting up” a Photoshop design, or preparing your CSS and Javascript, keep maintenance in mind. Some crazy-cool CSS hack you use today may come back to haunt you later. Dumping CSS rules wherever you please in a CSS file may seem fast at the moment (Guilty!), but will make changing and updating them later a nightmare.

An important step to remember occurs after you have prepped a designer’s file for export from Photoshop or Illustrator: Remember to save a version of the file just before export. That way if you need to re-export it later, add another button, change a line of text, etc., you will be able to export it again quickly. Photoshop normally saves Image Format choices, compression settings, and matte colors to make your job even easier.

Conclusion

There are a number of other things that are important for Front End Coders to keep in mind, but I think these are some of the most important. Many could argue that these aren’t rules, but I challenge you to think of them as such. Perhaps you will be less likely to break them in the interest of time or money on your next project.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

10 Rules of Front End Coding

Fuel Your Coding » Concepts & Training

Jquery, JQuery and Asking for help

Asking for Help

What It All Means

One Sure-Fire Way to Improve Your Coding

What to Read

» Read Code That You Rely On

» Read Code That Impresses You

» Read Code Written By Somebody You Respect

» Read Code That You Can Actually Grok

How to Read

» See the Big Picture

» Document Your Findings

» Use the Tests, Luke

» Execute, Change Stuff, Execute

» Rinse and Repeat

Where To Start

Create a simple “shop” page in Textpattern

">

Simple Debugging with WordPress

WordPress Debug Mode

display_errors

Testing for local vs. production

WP_DEBUG

WP_DEBUG_DISPLAY

WP_DEBUG_LOG

Leveraging WP_DEBUG

Trying it Out

More Solutions

Unconventional: CSS3 Link Checking

The Problem

CSS3 Solution

Bonus: Testing Progressive Enhancement

Variations

JavaScript Can Learn: Now Teach It Tricks!

Think Start, Not End

Load Your Extensions First

How to Group The Extensions

Don’t Bloat

Roll Your Own PHP Framework: Part III

Users:

Easy to update thumbnail gallery using Textpattern and Galleriffic

Galleriffic

Upload the files

Install the relevant plugins

Set up your forms

gallery

article_image_form

Set up your page

Set up your style

Add your images

Roll Your Own PHP Framework: Part II

PHP Frameworks? Just roll your own! – PART 1

Getting Started with Chyrp

Introduction

Installation

Writing in Chyrp

Manage your Install

Change the Settings

Extending your Install

Downloading Extensions

Chyrp vs. Wordpress

The Chyrp Community and Support

A Few Strategies for Using JavaScript

Don’t Use JavaScript…

Good Strategies

Choosing a Good Framework (or Not)

Fixing Element Jumps

Debugging

Conclusion

10 Rules of Front End Coding

1. Charge Enough, and Then Some

2. Educate The Designer

3. Think in Layers, Not in Slices

4. Use the Best Image Format

5. Know When to Use Classes vs. Ids

6. Make Your Pages Responsive

7. Always Use CSS Sprites for Rollovers

8. Understand the Difference Between Flash and Javascript

9. Test Your Site in Many Browsers (including IE6)