Sharpening the Blades: Custom WordPress Dashboard, Wireframing and Communication

02.05.2010   |   0comment

Tim, 10 WordPress Dashboard Hackscatswhocode
This is a nice article that shows you how to get a customized WordPress dashboard. The article calls them hacks, but I would call them customizations. One that I have tried and loved is adding your logo on the dashboard page next your blog title in the top left hand corner of the dashboard. It’s a nice little touch that goes a long way.

Mike, How Wireframing Makes Your Website Designs Betterbriancray
The value of wireframing comes down to a simple idea: Wireframing forces you to think about your user interface design decisions in terms of user needs first, instead of in terms of what looks good.” While wireframing requires a little extra effort in the initial planning stages, it pays huge returns in the long run. We redesign less frequently, hit deadlines sooner, and best of all, greatly mitigate scope creep. So take your foot off the pedal, assess your client’s business objectives and user needs, and translate concepts into a tangible wireframe. You’ll be glad you did.

Luke, For Better Productivity, Communicate Lesscommunicateless
I agree with Joel Spolsky in one of Lifehackers latest posts when he says that adding more people to a project will only slow it down. I think this is especially true in web development. Once deep into a big project a web developer knows where things are and how they are related. If you throw five of them at the same project at some point they would end up stepping on each others toes. There is a chance that if things are planned out right each developer could tackle a specific task and then they could put all their pieces together to make the final piece. To do that though a lot of planning and meeting together would have to happen. This will probably lead to more disagreements and toe stepping. For those reasons I think getting the few people needed on the project and keep them there is the best way to accomplish a web dev project.


Sharpening the Blades: Document Ready, Admins and Automagic in CakePHP

01.19.2010   |   0comment

This edition of Sharpening the Blades features articles about creating admin sections with CakePHP,  how $(document).ready( ) can slow down your site, and the wonderful things CakePHP can do “automagically.” Hopefully these articles will help you sharpen your coding blades.

Chad, Creating an Admin Section with CakePHPcakephp-admin
I have come across James blog just recently (about 2 months). The guys blog is great. He does so much with CakePHP that it is great to see what he is doing and what he can do. But the reason I suggest this specific post is because it seems to be the first stumbling block that every developer comes across while using CakePHP. This article specifically will explain how to get an Admin section set up and working. I consider this one of the must needed to know things to develop correctly in CakePHP.

Benjam, Don’t let Document Ready slow you downdocument-ready
Everybody wants to have a faster loading website, and I am certainly guilty of putting every DOM related jQuery snippet into the $(document).ready( ) function.  This post showed me that this wasn’t absolutely necessary and gives good examples of when and how to break out of the document ready mentality.

Mac, The Dark Side of CakePHP’s Automagicautomagic-cakephp
I’m not sure I like the title of this article so much as I like the article itself, but it does point out some useful information about the “automagic” things that CakePHP does for you. Some of the things they discuss are definitely features that were designed very wisely, even though the article seems to disagree with me on that. There are definitely some automagic things in Cake that they mention that drive me crazy too though, and I don’t really see the necessity for the seemingly poor decision made by Cake’s developers. My biggest peeve they mention are the behavior it has (or had, this may have been fixed/changed now) for many-to-many relationships (a.k.a. HABTM). It is really a pain in the neck when your relationship table has other data in it, like the date/time when the relationship was added, or by whom, or a quantity, etc.


Redirecting to parent or child pages in WordPress

Benjam,on the topic of  Usability, WordPress
01.12.2010   |   4comment

A few of our projects here at Code Greene required the use of WordPress, and those projects had situations that I have since encountered in a site I built in WordPress for someone in my family. That situation was trying to redirect to a parent or child page when a certain page was clicked on.

I know that may seem a bit confusing, but let me give an example. Say I have an “About” page, and that “About” page has three child pages; “Who I Am”, “What I Do”, and “Why I Do It”. Now let’s also say that my “About” page doesn’t have any actual content, it’s just a container for the other three pages, and I just want to redirect my visitors to the “About | Who I Am” page without ever hitting the “About” page. Well, here’s how I do that.

First we need a page template that we can use for the “About” page that will do all the magic for us:

In a new file in your theme folder called redirect_down.php (you can really call it anything you want, this is what I used), put the following:


<?php

/*
Template Name: Redirect Down
*/

// grab the direct children pages of this page
// (both child_of and parent are needed)
$sub_pages = get_pages(array('child_of' => $post->ID, 'parent' => $post->ID, 'sort_column' => 'menu_order', 'number' => 1));

$URI = get_permalink($sub_pages[0]->ID);

// redirect the user down one level in the tree
header('Location: '.$URI);

How this works is it finds the first child of the page you are on, grabs the URI for it, and redirects you to that page.

Now when I create my “About” page (the one with no content), I set my page template to “Redirect Down” in the template drop down, and voilà, when a visitor clicks on the “About” link, they automatically get redirected to the “About | Who I Am” page, no questions asked. If I had pages under the “Who I Am” page, and it was just a container for those, I could also set my template for the “Who I Am” page to “Redirect Down”, and when my visitor clicked the “About” link, it would redirect to the “Who I Am” page, which would then redirect to the first child page.

To complete the collection… in one of the projects I worked on recently, we had a situation where if a child page link was clicked, we needed to redirect up the tree to the parent page. This is basically the same thing, just the other direction, but also a bit easier to code. Here is how it is achieved:

In a new file in your theme folder called redirect_up.php (again, you can call it anything you want, this is just what I used), put the following:


<?php

/*
Template Name: Redirect Up
*/

// redirect the user up one level in the tree
$URI = rtrim($_SERVER['REQUEST_URI'], ' /');

$URI = substr($URI, 0, strrpos($URI, '/') + 1);

if ( ! in_array($URI, array('', '/'))) {
	header('Location: '.$URI);
}

The way this works, is it grabs the URI given, and simply removes the last directory from the URI. (You could also find the parent ID from the $post data and use that to find the permalink, much like the previous template, but this works for what I needed it to do.) If you have your permalinks set up properly, this should work beautifully. And again, with this one, you can set it on as many pages as you want, redirecting all the way up the tree if you wish.

Hope this helps someone. Let me know if it helped you in the comments below.


Kaizen in 2010: Stock Cliches, HTML5 Forms, & Web Advertising

Tim,on the topic of  Fun, Web Development
01.05.2010   |   3comment

One of the main focuses of our philosophy at Code Greene centers around the Japanese philosophy of continuous improvement known as “kaizen”. The web offers tremendous opportunities to learn from our peers, and sharing articles with each other has really helped us keep our blades sharp. Here are a few of the best articles we’ve read recently, submitted by members of our team:

Luke, Stop Using Stock Photography Clichés

stockI liked this article because I could really relate to the author. I am super sick of stupid stock photography. This type of stock photography has become meaningless to the user. Especially if the user has seen the same photo in other places before. As users, we are so used to seeing two business people shaking hands that we overlook it immediately, without giving it a second thought. Useless.

Mike, A Form of Madness

formForm design is awesomeness, but coding them? Not always the case. Luckily, there’s good news for form coders the world over with HTML5 on the brink of greater support. This article comes from an up-and-coming book all about HTML5. The author introduces some cool new tags and attributes that we can start using right now, including: placeholder text, autofocus fields, spinboxes, sliders, date pickers, and more! Exciting stuff.

Tim, On Web Advertising

adThis is something I have been very curious about lately, so to find this was a refreshing way to start out the week. It was nice to get Chris’s perspective about online advertising and I know he knows about it because all his work uses it.

What have you been reading recently?


Updated GeekTool Weather Images

Luke,on the topic of  Uncategorized
12.22.2009   |   0comment

The code in an older post that talks about GeekTool calls the weather images to your desktop through Yahoo. They recently changed the location of these images so the GeekTool code no longer works. If you take the url at the beginning of your GeekTool script and paste it into a browser it will redirect you to the new url. Take that one and paste it back into GeekTool and it will be working again.

http://weather.yahoo.com/forecast/USUT0078.html
changes to
http://weather.yahoo.com/united-states/utah/farmington-2402466/

Sorry took so long to get this posted.


Thanksgiving Recipies, Part 1

Mac,on the topic of  Food, Fun
11.30.2009   |   0comment

On Friday, November 20th, we had our annual Thanksgiving Feast with our neighbors, WhiteLabel SEO, and decided we needed to share a few recipes.  This will hopefully be the first post of several along this theme over the next month or two.

Raspberry Cheesecake

This first recipe comes from Susan Ehlers, spouse of Chad Ehlers who works here at Code Greene, who was willing to share her awesome Raspberry Cheesecake recipe with us.

  • 8 oz. cream cheese
  • 1 cup powdered sugar
  • 8-12 oz. Cool Whip / whipped topping
  • Graham cracker crust (homemade or purchased)
  • Raspberry Pie Filling (or other pie filling or pudding)

Mix cream cheese and powdered sugar together until smooth. Add Cool Whip (8 oz for a pie tin, 12 oz for 9×13 pan) over graham cracker crust. Top with Raspberry Pie Filling, or substitute another topping of your choice. Any pie filling works well, also pudding is a great alternative! Chill until ready to serve.

Ham Loaf

The name might not sound that appetizing, but I can assure you it is a family favorite and people at the party trying it for the first time said they liked it a lot and wanted the recipe. My wife, Susan Newbold, brought this from her side of the family and I’ve loved it ever since.

  • 3 lbs. ground ham (Keep it a simple - no fancy smoked ones, just plain. Bone in works fine, or boneless, but preferably one without added water.)
  • 2 lbs. ground pork (Almost any cut works great here, we usually use boneless pork chops)
  • 2 cups soft bread (you can break it up by hand, or I often use the food processor)
  • 4 eggs
  • 1/2 cup milk
  • 1/2 tsp pepper
  • The Special Sauce:
    • 1/2 cup pineapple juice
    • 1/2 cup vinegar
    • 1 tsp dry mustard
    • 2 cups brown sugar
  • 2-6 rings of sliced pineapple (optional)
  • Maraschino cherries (optional)

Mix meat, bread, eggs, milk, and pepper, and knead it by hand until it is well mixed. Form into two loaves as you would meatloaf. Mix sauce ingredients in a saucepan on medium heat until brown sugar is dissolved. Pour sauce mixture over the loaves. If desired, garnish with pineapple and cherries. Bake at 350 degrees for 75-90 minutes. Because we live in Utah, I actually bake mine at 375 degrees because of the high altitude. Check with a meat thermometer to make sure it’s cooked all the way through, probably 170 degrees internal temperature should do. (It is pretty hard to overcook, and you can baste it with the sauce if you’re worried about it drying out.)

Grinding the meat: you can do it yourself with a meat grinder (we use our Kitchenaid mixer with the grinder attachment) or you can order it from your local grocery stores. Some stores won’t do it, but others are willing and usually don’t charge anything extra. We’ve found locally that Harmons will, and Albertson’s used to, but some locations won’t do it for me any more. They usually prefer to do it first thing in the morning in their grinder, so that they can clean the grinder once instead of twice. (They have to prevent cross-contamination, so if they’ve been grinding beef, they’d have to clean the grinder before and after the pork, but if they do the pork first thing on a clean grinder, they don’t have to clean twice.) Because it involves a little extra work, some butcher counter employees get huffy and refuse to do it. You can also usually find ground pork - not out with the other meat, but at the butcher’s counter. Hope this helps!


Whirly Bin

Luke,on the topic of  CakePHP, Web Development
10.29.2009   |   0comment

We recently launched a small ecommerce site for Whirly Bin. They sell all sorts of stationary. They needed a super simple shopping cart. Instead of hooking in our custom cart in CakePHP we hooked it up to PayPal. Whirly Bin can add new products and upload photos and descriptions for those products through a simple admin section we created with CakePHP. Whilry Bin was great to work with and we got the site designed, built, and up really quick. Check out their site.


GeekTool Scripts

Luke,on the topic of  Apple, Fun, Tools
10.13.2009   |   3comment

In my previous post I talked about what I have been doing to my desktop the last little while. I had quite a few email or IM me asking about how the GeekTool scripts I used. Just take these scripts and copy the lines you want into the command area of a Geeklet. Most of these were written by Mac Newbold. Enjoy!

CPU Usage

top -n1 -l1 | grep "Load Avg" | sed 's/.*usage: //; s/ user.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*user, //; s/ sys.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*sys, //; s/ idle.*//;'

Memory

top -n 1 -l 1 | grep PhysMem | sed 's/.* inactive, //; s/ used.*//;'
top -n 1 -l 1 | grep PhysMem | sed 's/.* used, //; s/ free.*//;'

Month

date +%B

Date

date +%d

Day

date +%A

Time

date +%I:%M

AM / PM

date +%p

Weather

curl --silent "http://xml.weather.yahoo.com/forecastrss?p=USUT0078&u=f" | grep -E '(Current Conditions:|F<BR)' | sed -e 's/Current Conditions://' -e 's/<br \/>//' -e 's/<b>//' -e 's/<\/b>//' -e 's/<BR \/>//' -e 's/<description>//' -e 's/<\/description>//'

Look for the ‘UT0078′ here and replace it with the city code you want to display. Get the city code by going to Yahoo Weather and searching for your city. Once found look in the url and you will see your city code at the end of the url.

Weather Image

Create a new Shell Geeklet and use this as the command:

curl --silent "http://weather.yahoo.com/forecast/USUT0078.html" | grep "forecast-icon" | sed "s/.*background\:url(\'\(.*\)\')\;\ _background.*/\1/" | xargs curl --silent -o /tmp/weather1.png\

Replace the city code with your city code. ( same steps to get city code as above )

Then create a new Image Geeklet and use this as the url:

file:///tmp/weather1.png


Dockless Desktop

Luke,on the topic of  Apple, Fun, Tools
10.13.2009   |   1comment

So for a few weeks now I have been playing around with a themed desktop for my mac. I have always wanted to try something like this out just never had the guts or time. I have found that it isn’t scary at all and rather quick to get going. There are some free tools I have used and some nice things I have learned along the way.desktop1

Not having a dock at all has taken some getting used to. I use Quicksilver for just about everything now. I do have a pull down docklike thing at the top middle in case I ever need it. Here is a list of tools I have used to create my new desktop.

CandyBar - Change all the folders icons and HD icons.
Magnifique - Change the folder and App nav areas to black
GeekTool - Add time, weather, and computer status to the desktop.

GeekTool was by far the most fun. You can do much more with it than what I have done here. If you come up with something good for you I’d love to see it.


Easton Baseball & Softball

Tim,on the topic of  News, Web Development, WordPress
09.29.2009   |   0comment

We partnered with Omelet to create the new site for Easton Baseball & Softball. Omelet did the design and we built the site. Easton wanted a WordPress site, so that is what we gave them. This theme is extremely custom but at the same time it is really easy to use when adding new products or pages.

Easton Baseball
eastonbaseball

Easton Softball
eastonsoftball1