Fugue is a free icon set created by Yusuke Kamiyamane–free for personal and commercial projects.

Let’s look at Fugue and how you can quickly add icons from the set to your site via the Fugue CSS Sprite Framework.

Fugue – A Huge Icon Set

This icon set currently has over 2000 16×16 pixel icons (in PNG format and PSD) and more are constantly being added. With this many icons, there’s usually at least 1 or 2 suitable icons for whatever you’re wanting to represent. Each icon is available with or without a shadow.

This set would be great for any web app–it contains many interface and UI icons among others. For example, I used Fugue for my OpenX Admin Icon Set v2.0.

Customize Fugue Icons With the Devkit

Yusuke has also graciously included Photoshop files (PSD’s) for every icon in the set; letting you tweak and combine icons if what’s there is not exactly what you want.

License

Fugue is available under a Creative Commons Attribution 3.0 license.

If you prefer not to provide attribution (or can’t), you can also buy a royalty-free license for $49.

Fugue Sprite CSS Framework

If you’re planning on using several icons from Fugue on your website, you might consider using Fugue Sprite CSS from Alison at AlisoTheGeek.com.

The Fugue Sprite CSS framework works on the same principle as any other CSS sprite technique–only easier and faster. Way easier, because you don’t have to do anything by hand.

How To Use It

To use it, just place the single sprite image in the same directory as the Sprite CSS file. To display an icon, use the icon key that’s provided, find the name of the icon, and use that name as the class for your styled element.

Example: You want to display the leaf icon. Find the leaf icon in the list of icons in the key and copy the name of it (fugue-leaf). Include it in your CSS by adding a ‘.‘ in front of the icon name (.fugue-leaf). Fugue Sprite CSS takes care of the rest.

Considerations

Since the sprite framework contains all the icons from the Fugue set, the framework’s a bit large (684 KB total). But if you’re planning on using quite a few icons from the Fugue set, it’d be worth it.

Give Fugue a Try

Give Fugue a try if you haven’t.

If you’ve downloaded it in the past, chances are there are tons more icons added since.

And if you like the set, consider buying the royalty-free license.

Lately, I’ve been using Thematic–a framework for building WordPress themes faster.

Thematic gives you a solid, bare-bones theme with reset CSS styles, a very basic layout, no color and limited typography. A clean slate.

Don’t Touch That Theme!

To create your theme, you don’t actually edit any of Thematic’s theme files. Instead, you make changes using a separate child theme.

It’s really powerful since you’re not actually touching any part of Thematic. You just get a nice starting place, without worries about future Thematic updates overwriting your code edits.

You don’t have to rewrite a bunch of code all over again–you’re just adding the bits that you want to be different. This works very much like the custom styles on WordPress.com hosted blogs.

I’ve collected together 40+ Thematic resources, tutorials and links to help you get up and running faster.

Thematic and WordPress Child Theme Basics

• Official Thematic Website
• WordPress Child Theme Basics
• Modular CSS
• Theme Template Directory Structure

Theme Hooks

• Thematic 0.9.6.1 Is Live (Updated 2/10/2010)
  Details about newest version. Contains new hooks and filters for even more control.
• Using Action Hooks in WordPress Child Themes
• Theme Hooks
• Adding Custom WordPress Hooks
• Using Filter Hooks in WordPress Child Themes
• Theme Filters
• Frameworks, Child Themes, Filters and Hooks?
• Overriding Parent Theme Functions in Child Themes

Thematic Tutorials

• 10 Design Tips For Your Custom WordPress Theme Built With Thematic
• Edit Your Theme With Functions.php
  Tons of fun by adding functions to edit your theme.
• How I Used a Custom Page Template to Redesign My Blog the Smart Way
  Step-by-step creating a new child theme.
• Replacing WordPress Content With an Excerpt in a Thematic Child Theme
  How to replace the_content() with the_excerpt()–without touching your theme files.
• Add “Featured Posts” to Your Thematic Child Theme
• Use WordPress as a CMS With Thematic: Part 1
• Add a Header Image to Thematic the Easy Way
• Add a Search Box to the Thematic Menu
• Adding Theme Options to WordPress Themes
  Creating theme option pages to your WordPress theme.
• ThemeShaper Forums
  If you get stuck, the Thematic Forums is the place to go for help.

Editing Parts of Your Theme With Thematic

There is a whole series of tutorials on the Thematic website for edit particular parts of your WordPress theme:

• Thematic 0.9.6.1 Is Live (Updated 2/10/2010)
  Details about newest Thematic version. Contains new hooks and filters for even more control.
• WordPress Themes Template Tutorial Series
• Working With the Index Template
• Editing Your Thematic CSS
• Editing the Header Template
• Editing the Sidebar Template
• Editing the Single Post, Post Attachment and 404 Templates

Thematic Cheat Sheets

• Thematic Structure Cheat Sheet
  A visual look at all of Thematic’s main elements–div’s, theme actions, hooks and widget areas. Very, very useful.
• Widget-Ready Areas
  Images of widget-ready areas for each major template and section of Thematic.

Thematic Child Themes

There are already some nicely-designed Thematic child themes.

Acamas

SimpleCart (js) – E-commerce theme

Audry

Gallery

Aether

Sugar Cane

Update: 3HoursTheme (by Matteo Stagi. Also includes tutorials to help you to use the theme)

Cosmos Labs

I can’t include Thematic themes without mentioning Cosmos Labs. They have released several nice child themes. Here are a few.

Byty

Street

Early Morning

Commune

Crystalline

Element Templates

These are not full child themes, but themes for specific parts of a WordPress site that can be used along with another child theme.

• Login and User Registration Page Templates For Thematic
• Replacing the Thematic Menu With a DropDown List of Categories

Hopefully these links will give you a good place to start using Thematic.

What Do You Use?

Do you use Thematic? Do you use some other WordPress framework? Tell us in the comments.

The only problem I have is that it’s only viewable to registered WordPress users with an admin role. Editors, Authors and Contributors can access the WordPress backend, but can’t view the stats.

You could always install a bloated role manager plugin just so you can allow others to view CyStats. But this is overkill unless you need to adjust roles for some other reason.

Here’s a quick way to allow non-admin users to view your CyStats stats:

1. In WordPress, go to Plugins > Editor
2. Select CyStats from the upper right dropdown list
3. Choose cystats/includes/admin.php from the list of plugin files on the right.
   Alternatively, FTP to the wp-content/plugins/cystats/includes/ dir and edit the admin.php file.
4. Notice there are several ‘8’s (or possibly ‘9’s or ‘10’s). These are the numbers for the WordPress user levels/roles. 8-10 are admins, 7-5 are editors, etc.:

   /**
    * Builds admin panem menu for Plugin
    */
   if(!function_exists('cystats_create_admin_menu')){
   	function cystats_create_admin_menu() {
   		if (function_exists('add_options_page')) {
   			add_options_page('CyStats Options Page', 'CyStats ', 8, 'cystats-options', 'cystats_admin_options');
   		}
   		if (function_exists('add_menu_page')) {
   			add_menu_page('CyStats Statistics Plugin', 'CyStats', 8, __FILE__, 'cystats_admin_index');
   		}
   		if (function_exists('add_submenu_page')) {
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Index','cystats')), htmlspecialchars(__('Index','cystats')), 8, __FILE__, 'cystats_admin_index');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Blog','cystats')), htmlspecialchars(__('Blog','cystats')), 8, 'cystats-blog', 'cystats_admin_blog');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Clients','cystats')), htmlspecialchars(__('Clients','cystats')), 8, 'cystats-clients', 'cystats_admin_clients');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Referer','cystats')), htmlspecialchars(__('Referer','cystats')), 8, 'cystats-referer', 'cystats_admin_referer');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Robots & Tools','cystats')), htmlspecialchars(__('Robots/Tools','cystats')), 8, 'cystats-robots', 'cystats_admin_robots');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Pages','cystats')), htmlspecialchars(__('Pages','cystats')), 8, 'cystats-pages', 'cystats_admin_pages');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Time','cystats')), htmlspecialchars(__('Time','cystats')), 8, 'cystats-time', 'cystats_admin_time');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Options','cystats')),htmlspecialchars(__('Options','cystats')), 8, 'cystats-options', 'cystats_admin_options');
   		}
   	}
   }

5. If you want editors (as well as admins) to be able to view the stats, change the 8, 9 or 10 throughout the includes/admin.php file to the number of the user level your want (ie 7, 6 or 5 for editors).
6. If you only want the admin to be able to edit the CyStats options/settings (recommended), don’t change the final 8 (or 9 or 10). It looks like this:

   add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Options','cystats')),htmlspecialchars(__('Options','cystats')), 8, 'cystats-options', 'cystats_admin_options');

That’s it! No editing the database.

Note: You’ll probably need to make these changes again when you update the CyStats plugin, so this isn’t a perfect solution, but the CyStats plugin isn’t updated too often.

Enjoy.

Remember the mottoes you learned when you were a kid: “Winners don’t do drugs”, and “Cheaters never win”?

Well, a little cheating never hurt anyone… when it comes to using cheat sheets, that is.

TechPosters has a colossal collection of cheat sheets for just about every program, coding language or OS that uses code or keyboard shortcuts.

Since there’s such a huge list of cheat sheets, let’s look at some of the useful cheat sheets for web designers.

HTML

• HTML 5 Quick Reference Guide
• HTML 5 Cheat Sheet
• XHTML Cheat Sheet v 1.03
• XHTML 1.1 and HTML 4.01 Extensible Hypertext Markup Language
• HTML Help Sheet (HTML 4 and XHTML)
• Form Tags
• Character Entity References in XHTML 1.0 and HTML 4
• HTML – Special Entity Codes
• HTML Common Tags

Note: If you’re looking for more resources for UTF-8 special entities, check out my earlier post, Most Used XHTML Character Entities.

CSS

• CSS3 Quick Reference Guide
• Core CSS Part 1 (by Molly E Holzschlag and published by DZone), Part 2, and Part 3
• CSS Properties
• CSS2 Cascading Style Sheets
• CSS Shorthand Guide
• CSS Shorthand Cheat Sheet by Example
• CSS Property Index
• CSS Cheat Sheet v2
• CSS2 Quick Reference Guide
• RGB Colour Codes

jQuery

• jQuery Selectors (DZone)
• jTouch – jQuery Cheat Sheets For iPods and iPhones
• jQuery 1.2 Cheat Sheet 2
• jQuery 1.2

There are a ton of other cheat sheets for javascript in general, as well as other frameworks like EXT JS, Prototype and an entire category for Mootools.

These can be found in the general Javascript Cheat Sheet category.

PHP

• PHP Cheat Sheet (DZone)
• Symfony PHP5 Framework – Admin Generator Cheat Sheet

Plus Many, Many More

There are also tons of other web design cheat sheets for MySQL, ASP.NET, Flash, Silverlight, XML and more.

Another nice thing about the TechPosters site is that you can subscribe to RSS feeds for each category and know when new cheat sheets are added.

Share

Do you use any great cheat sheets for web design that are not included here? Where do you get your cheat sheets from?

Share your thoughts in the comments.

When you’re building a website in WordPress and using it as a CMS, you’re going to have pages that you don’t want showing in your main site navigation/menu.

How do you keep those pages from showing up in your navigation?

Include and Exclude Specific Pages

There are several methods, but most of them require hard coding the menu to either exclude specific pages from the navigation…

Or including only certain pages like so:

<?php wp_list_pages('include=1,2,3,6,19' ); ?>

These methods work, but are impractical (at least for client work) because they’re not flexible enough.

What happens when you add more pages to the site, or want to add/remove pages in the nav?

Also, could you explain how to make the needed code edits to your clients? I don’t think so.

Use a Plugin

The fastest, most flexible and easiest to use method is to just use a plugin.

My choice is the Exclude Pages plugin from Simon Wheatley.

After you activate it, Exclude Pages gives you a new option on the write panel for each page—’Include this page in user menus‘.

The option is checked by default on all the new pages you create, so if you don’t want the page to show up in the navigation, simply uncheck the box before publishing, and it never shows.

It also removes pages that have already been published.

The Exclude Pages plugin is great because clients (and you) can easily choose which pages to include in the site’s navigation. Unticking a box is a whole lot easier to explain than editing code.

Use Bookmarks For Your Navigation

Another option is to use WordPress’ built-in links to create site navigation.

Justin Tadlock offers an interesting take on using links (blogroll/bookmarks) to create navigation.

This is a pretty creative approach, and it makes logical use of your blogroll.

The only downside I see is that, you’ll have to rework your theme to incorporation this technique—it’s not a quick, drop-in solution.

Do you have any other suggestions for removing pages from your WordPress navigation? Share with us in the comments.

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 2355395 bytes) in /public_html/wp-includes/http.php on line xxx

If you look at the file mentioned in the error message, you won’t find anything worthy of changing. I believe the line number mentioned is simply the line where WordPress ran out of memory.

Fortunately, I found the answer in a thread on the WordPress Forums (which should be one of the 1st places you go when looking for WP-related answers).

The error is memory related, so increase your available memory (after backing your site up, of course). Edit your wp-config.php file and add the following line right after the opening php statement:

define('WP_MEMORY_LIMIT', '64M');

Save the file and try the upgrade again. Unless you have something else wrong with your site/WP setup, the upgrade should now work perfectly.

<my2cents>

Personally, I’m glad. Not glad that XHTML 2 is going to go the way of the dodo, but I think that having 2 standards would have been a bit defeating.

BlueRay vs HD DVD vs XHTML 2 vs HTML 5

Remember the BlueRay vs HD-DVD fiasco? There were 2 specs being developed and disc manufacturers were having to either choose to support one or the other, or add extra expense and support both. Then disc manufacturers have to choose either or both techs. Madness.

So, I am not saying that I think HTML 5 is better than XHTML 2, but that I’m glad a decision has been made and one spec has been chosen.

With the additional resources that HTML 5 will be getting, its future looks much brighter. Not to mention browser makers and web designers have one less thing to worry about.

</my2cents>

Start Using HTML 5 Now

There are some web apps (okay, Google Wave) that are beginning to use HTML 5 already.

Now, roll up your sleeves and start using HTML 5 now (an interesting article with code examples from SitePoint). This article even explains how to make it work with Internet Explorer — yes, IE.

More info on the future of XHTML 2 (W3C).

eeSiteKit is a framework to help you build ExpressionEngine-based CMS websites faster.

You’re provided a set of commonly used pre-coded functions, folders, and preset templating system (for categories, navigation, etc) for use with ExpressionEngine.

No EE Hacking

eeSiteKit however doesn’t use any custom PHP custom queries or hacks that break EE core functionality, so future versions of EE shouldn’t break your site. eeSiteKit is actively maintained, so if something does conflict a bit in future versions of EE, there will be updates and fixes provided quickly.

Style Your Site As Normal

Besides this, eeSiteKit also offers a light XHTML/CSS framework for laying out and customing page structure and styling quickly.

SEO Options For Your EE Site

eeSiteKit also includes many SEO-friendly options for page and category URLs and structure.

eeSiteKit Features

Here are just some of eeSiteKit’s features:

• Compatible with ExpressionEngine 1.6.7 (Commercial, Personal and Core versions) as well as EE Multiple Site Manager
• No add-ons required
• Clean, logical, text-only, nested-page URLs (SEO friendly, works with the optional index.php or renamed index.php)
• SEO friendly dynamic page titles
• Landing pages are optional with each weblog (site sections)
• Dynamic page navigation (including sub navigation, dropdown menus, breadcrumbs, etc)
• Categories friendly (use EE’s category system but mask EE’s default category numbers, for example)
• Dynamic category headings
• Simple “keyword” search form code
• Dynamically configured search results page
• Simple blog-style comments and “tell-a-friend” forms
• Well-organized template structure make editing and maintenance easy
• Printer-friendly HTML template for easy printing of any page
• Dynamically generated site map
• 404 page templates with configurable alerts
• EE Pages module integration for easy control over pages and page URLs
• Renders valid and standards-compliant code (W3C XHTML 1.0 Transitional, CSS 2.1, and Accessibility: 508-A and WCAG-1)

Full list of features

More Info

For a full overview of all eeSiteKit, check out the Overview section.

You can also take a look at the FAQ if you have other questions.

It seems that eeSiteKit will add a bit more loading and more queries than an EE site built the traditional way, but this may be worth it for all the functionality you gain.

I haven’t gotten a chance to look at eeSiteKit yet, but it looks like a great EE framework that will definitely speed up site development and easy website maintenance as well.

Due to the popularity of last week’s list of programs and services for freelancers, we’re bringing you 24 must-have online tools specifically for web designers.

Testing

Xenocode Browser Sandbox

Run and test your sites in IE6, IE7, IE8, Firefox 2 and 3, Safari, Google Chrome and Opera without having to actually install the browsers on your system.

This unfortunately seems to only work on Windows.

BrowserShots

View screenshots of your render webpages in multiple browsers and operating systems. You can even test different screen resolutions.

Favelets

Validate and test your sites using this collection of favelets. Validate microformats, HTML and CSS. Test your pages at different screen sizes (iPhone, Blackberry, etc) and lots more.

Are My Sites Up? (Website Monitoring)

Get alerts when you or your clients’ sites go down or experience hiccups. Alerts can even be sent to your mobile phone.

Page Code Generation

gridr buildrrr

Create CSS grid-based layouts easily with gridr buildrrr.

Project Deploy

Project Deploy makes it faster to get a site up and running by letting you select the type of information you want. Deploy then generates common folders, standard HTML and CSS files and even jQuery–all in a zip file for easy download.

Web Form Generators

Icebrrg

Icebrrg lets you easily create all kinds of forms and embed them on your site. There are paid plans, but the free version still allows 3 forms and up to 100 per month.

WuFoo

WuFoo makes creating forms a piece of cake. Adding forms to your site is simple as well with a great web-based user interface.

Web Form Factory

Another great web form tool. You can create forms linked to a database or to generate emails.

Typography

Typechart (CSS Typography)

Browse, compare and grab the CSS code.

PXtoEm.com

Convert pixels to ems quickly. The generator even creates the CSS all for you.

sIFR Generator

Even if you don’t have Adobe Flash installed on your system, you can convert font files (TTF) and create your own Flash files (SWF) for use with sIFR.

Web Code

XHTML Character Entity Reference

Find UTF-8 character entities for XHTML.

View other XHTML character entities resources.

ecoder (Web-Based Code Editor)

Ecoder makes it easier to write and edit code. All your coding can be done right in your browser.

Ecoder sports a beautiful UI, plus real-time code syntax highlighting and line numbering. You can also edit multiple documents at once.

As far as I’m concerned, this one beats out Mozilla Bespin (especially as far as ease of use goes).

BuiltWith

Check websites and see what technologies are being used. See what your favorite websites are running on–databases, CMS, hosting, etc.

Other Online Tools

Unix Permissions Calculator

No more trying to remember Unix permissions codes when updating file permissions.

SlimTimmer

Keep track of the time you spend on projects.

The interface is extremely simple and easy to use. You can also manually add time and filter by date, client and other options.

Media Convert

Convert just about any type of file into just about any format that exists. Just upload and Media Convert takes care of the rest.

Privacy Policy Generator

Easily create privacy policies for sites by just filling out and simple, quick form.

Hohli (Online Charts Builder)

We wrote about Hohli earlier. This is a great tool for generating embeddable charts and graphs. Choose the type of chart, size, data and colors–Hohli does the rest.

Validifier (Flash Embed Code Generator)

A lot of the code generated by sites for embedding Flash content is not valid markup. Validifier turns Flash embed code into valid XHTML (using the object tag).

Genfavicon

Generate favicons from GIF, JPG or PNG files in just 3 easy steps.

Favicon Generator

Create favicons (ICO) for Internet Explorer from images (GIF, JPG, PNG).

CSS Sprite Generator

Improve your site’s performance. Upload images and the CSS Sprite Generator will create the code for your CSS sprites.

What Online Tools Do You Use?

Be sure to check out our 15 Must-Have Programs and Services For Freelancers for other great tools.

There are tons of online tools for web designers out there. Which ones do you use? Tell us in the comments.

Some common mistakes are using … (3 periods) instead of the … entity. Or using an x (letter x) instead of × (multiplication symbol).

While WordPress users can use the Insert custom character tool when writing posts, having a nice resource of all the character entities when coding a site can be a big help. It can also help cut down on validation errors (ampersand woes, anyone?).

Here are 4 nice resources listing most/all the XHTML character entities.

XHTML Character Entity Reference (Digital Media Minute)

Contains all 252 allowed HTML 4 / XHTML 1.0 character entities. Entities can be filtered to show only characters in specific categories such as shapes and arrows, mathematical symbols, international entities, etc.

The list can also be printed out easily for use as a cheat sheet.

Entity Code

Entity Code shows the most common / most used entities and can be filters also to show only certain types (math, currency, etc) of character enties. This makes browsing and finding the right entity easy.

Character Entities in HTML and XHTML (Web Standards Project)

The Web Standards Project has a set of very accurate and complete resources for character entities.

HTML XHTML Entities (Cookwood)

Very detailed list of XHTML 1.0 and HTML 4 characters. Includes descriptions of each symbol.

Now you can search all the web and graphic design posts on the Es Developed Blog right from your search bar in Firefox and Internet Explorer 7+.

We’re going to learn how to create your own custom OpenSearch search engine plugin for your site.

The search plugin will work in both Firefox 2+ (including Firefox 3) and Internet Explorer 7+ (including IE8).

OpenSearch and Your Site or Blog

OpenSearch is a collection of simple formats for the sharing of search results, created by A9.com.

In the context of your browser’s search bar you can use OpenSearch to help visitors find information on your site or blog even when they’re not currently at your website.

An OpenSearch plugin will work in both Firefox and Internet Explorer 7+.

Online Search Plugin Generator

One of the simplest and fastest ways to create your own search plugin is to use MozDev.org’s Mycroft Project Search Plugin Generation Tool.

The tool is a relatively short form you fill out and it does all the heavy lifting for you.

You supply:

• Icon for use in the search bar of the browser (can be your site’s favicon)
• Your details (used to register the plugin to you in the Mycroft database)
• Plugin name and description
• Search URL
• Category (where to place your generated plugin on the Mycroft database), plugin language, etc

It’s a good idea to tick the ‘Show full instructions?‘ box at the top of the form. This explains the type information to place into each field. Most of what you need is explained.

If you need more information about what to put in each field, take a look at Creating OpenSearch Plugins in Firefox.

The code for the search plugin is generated. You can either copy and paste the code into a blank XML file on your computer (recommended), or you can just install it in Firefox and test it first.

Once you’re sure it works, you can submit it to the Mozilla/Mycroft search plugin database using the same form.

Linking the Search Plugin

Now that you have the search plugin generated, you will want to provide a link to it in your website.

The easiest way is to copy the generated code from the Mycroft Search Plugin Generator and paste it into an XML file on your harddrive. Then upload the file to your site and link to it in your <head>:

<link type="application/opensearchdescription+xml" rel="search" title="searchTitle" href="pluginURL/fileName.xml" />

This line of code allows your custom search plugin to be autodiscovered by browsers that support OpenSearch. Be sure to change ’searchTitle’ and ‘pluginURL/fileName.xml’ to the actual values you want for your plugin.

Automatic Updates in Firefox 3.1+

Beginning with Firefox 3.1, OpenSearch plugins can be automatically updated. To support this, you need to add another line to the <head> section of your site as well:

<Url type="application/opensearchdescription+xml" rel="self" template="pluginURL/fileName.xml" />

Notice also the ‘rel=”self”‘. Be sure to change ‘pluginURL/fileName.xml’ to the actual URL of your plugin.

More info about automatic search plugin updates can be found here:

Mozilla Developer Center (Creating OpenSearch Plugins For Firefox)

Works in Firefox and IE

Even though you’re going through all the steps here using Mozilla’s site, the resulting search bar plugin is in OpenSearch format, so Internet Explorer 7 and 8 can use it as well.

See the Plugin in Action

If you’re using Firefox or IE 7+, you can see the search plugin that I made for this site in action.

Click on the dropdown on your browser’s search bar and select Add “Es Developed Blog”.

Add the Es Developed Blog Search plugin and give it a try.

You can search through our collection of web and graphic design:

• Tutorials
• Articles
• Online tool and services recommendations, and
• Design inspiration and resources

Here are 2 quick tips for Firefox and Google Chrome users that let you view the processed source code generated by a javascript snippet. Neither tip requires any plugins.

Situation

You need to insert a link to a video, form, etc into your site using embed code provided by another website and the embed code is only javascript.

Problem

While many sites and online services are getting better at providing standards-compliant code to paste into your site, sometimes you have to make adjustments to their code so that your pages validate.

This is easy to fix if it’s plain, viewable source code. However, if the code is just javascript that writes the (X)HTML code to the page when run (or the javascript is encrypting the code), you can’t see what to fix.

If you add the javascript code to your page, open the page in your browser and View Source, you still only see the javascript as it appears before it’s processed. That doesn’t help at all.

Firefox Solution

The fastest way to view the code created by the javascript is to use Firefox’s View Selection Source instead:

1. Paste the provided javascript into an XHTML page
2. Open the page in Firefox
3. Select the portion of the webpage in the general area that contains the javascript with your mouse
4. Right-click and choose View Selection Source

You should now see the source code that the javascript code rendered.

Then, you can copy and paste the actual code from View Selection Source and make your changes.

Google Chrome Solution

I haven’t forgotten about Google Chrome Users. The above solution doesn’t work for Chrome because it doesn’t have a View Selection Source option. We have to go about it another way.

Depending on what the javascript is designed to do and how it goes about that, you may be able to simply save the page as a file on your drive and open it in your editor.

In my test, the original javascript appeared, but below it was the code the javascript generated. You’ll probably have to do more digging around in your code, but if you copied your javascript into an otherwise blank webpage, it won’t a big deal.

No Plugins Required

The beauty of the above tips is that you don’t have to have any plugins or extensions installed in your browser to make them work.

Other Browsers

Safari and Internet Explorer don’t seem to be able to view processed javascript code without the use of plugins. At least not that I know about.

Today, I’ll share 10 secrets basic steps I take when coding a site in CSS—steps that will hopefully get you thinking about your coding process.

The following assumes that you already know how to code valid XHTML and CSS.

This is in no way the only way—this is just how I generally go about it.

10 basic steps I follow when creating a CSS-based site:

1. Finalize your design
2. Finish your XHTML before touching your CSS
3. Validate your code
4. Start with typography
5. Structure the main page elements
6. Start big and work your way down
7. “Finish” work
8. Test in IE
9. Fix inevitable IE bugs
10. Optimize your code and do final testing

1. finalize your design

This is probably the most important step in order to be productive. If you’re working with a client, make sure you get them to sign off on the project before you start coding the site.

Even seemingly small changes (from your client’s point of view) to the  layout may impact your code in a big way.

I keep a copy of the approved PSD design open in Photoshop. This serves as my reference and lets me grab dimensions and colors.

I also draw out a rough sketch of the layout on paper so I can jot down element dimensions, hex colors, etc. It also helps me visualize the different div’s I’ll need for my layout when I’m writing my HTML.

2. Finish your HTML before touching your CSS

Don't put this before your horse.

Make sure you have all the sections and major (X)HTML code in place before even touching (or thinking about touching) your stylesheet.

Just like building a house, you have to have a solid foundation laid first. Make sure all your major page sections are accounted for, along with appropriate headings, paragraphs, etc.

It’s generally a good idea to keep the HTML structure as simple as possible—avoiding unnecessary div’s, for example.

3. Validate your code

If you’re building a house, you not only have to have a foundation first–it has to be level. Lots of problems later on can be avoided if you take the time to ensure your foundation is good.

Take the time to make sure your (X)HTML is valid and there are no mistakes. This can save you unnecessary aggro when you start styling.

I use the Web Developer add-on for Firefox to quickly validate local HTML files.

Only after I’ve completed this, do I start on my CSS layout and styling.

4. Start with typography

Now it’s time to dig into the CSS.

I find it useful to first focus on a site’s typography: fonts, colors, line height, link styles, list styles, etc when the page is nearly a blank slate. Instead of having a bunch of page layout and sections with background colors, I like to start with the typography before moving on to the page structure.

A CSS reset (Eric Meyer’s Reset CSS, YUI Reset CSS) can be very useful in these situations. They save lots of time writing code to undo default browser settings.

I prefer to use a slightly modified version of the one that comes with Deploy. Save a copy somewhere of your modified version so you can work from it on future projects.

5. Structure the main page elements

There are certain main elements most pages have:

• Header
• Main content
• Sidebar(s)
• Footer

I like to take care of these sections first; centering the whole page, giving main elements dimensions, floating sidebars, and the like.

Important: As you work on your CSS styles and especially layout, test in Firefox, Safari or Opera and adjust accordingly to make sure things look right in one of those browsers.

It’s also good to check your progress as you go in IE6, but always remember that IE6 will almost always be wrong. You can avoid huge issues in IE6 by fixing those bugs as you go.

6. Start big and work your way down

Once the major parts of the page are laid out and positioned properly, I work my way down; working on the layout and styling of sub-elements and sections.

For instance, your header may contain other elements such as a logo, navigation or search field. With the header already sorted, you can start styling the layout of these other elements.

7. “Finish” work

“Finish” work, in the construction trade, are the fine details and finishing touches that are done toward the end of the project; like trim and molding, paint and so on.

In web design, I consider finish work to be the finishing touches like: image-replacement (for headings, etc), hover effects for links or navigation, and fine-tuning margins, padding and the like.

It’s also a good time to re-validate your code; including your CSS.

8. Test in IE

Testing your site in Safari and/or Firefox will make sure your site looks good in 99% of the major browsers—except Internet Explorer. So you will need to test in IE 6/7.

Again, it can often save you some headaches by checking your page in IE6 every once in a while as you go along. However, in this step, I go back through and check all the IE-related bugs and issues.

Personally, I test in Firefox and IE6 all through the process; from layout on.

9. Fix inevitable IE bugs

The more you work with IE 6 and 7, the more you will start being able to foresee issues and know how to correct layout bugs more easily. However, let me tell you, there will always be something you will have to fix in IE 6 or 7. So fix the bugs and you can move on.

Now, I fix IE6 bugs (dropped floats, wonky margins, etc) with some special rules in a separate stylesheet.

10. Optimize your code and do final testing

There are many ways to optimize your CSS code in order the cut down on size–now’s a good time to do that.

Occasionally, when optimizing though, you may get carried away and accidentally remove an important bit or place a rule where another cancels it out. Make sure your pages still display correctly and then re-validate everything.

Use what works for you

Whether you use the above steps or not, take the time and think about how you code.

• Do I have a set routine that keeps me organized and focused?
• Is the way I code efficient, or could it do with some streamlining?
• Am I needlessly rewriting code that I could (re)use as a starting point on other projects?

If there’s something you can change, great. If what you’re doing works great as is, that’s great too.

• Can you setup or modify an existing CSS reset of your own and use it to cut down time?
• Can you use standard names for elements and consistently use them in every project?
• Can you create your own list of steps and follow it on your next project?

Bottom line: Use what works for you and the way you work. If what you currently do doesn’t work, think about what you can do to improve it.

Conclusion

Again, this is not the only way to code a CSS design—just the way I do it. There are lots of web designers who code differently and many who probably do a better job of it than me.

What do you think?:

• What steps do you take when coding a CSS-layout?
• How would you order the above steps so it works best for you?

You do not have sufficient permissions to access this page

Now this was a puzzle. The kind of puzzle you don’t enjoy getting when you know everything should be working fine.

The following is my unfortunate tale and, while the 1st part may not specifically apply to the above error, it has a bearing on the solution, so bear with me.

The Setup

Here are the steps I took up to the point of getting this error:

1. Using the tutorials found here and here, I exported my local MySQL database, created a new database on the server (using Plesk)
2. Replaced all mentions of localhost in my exported SQL file with the actual address of the live site
3. Imported the local database into the newly created one
4. Made some adjustments to the wp_options table and others to make sure the URLs and paths were correct
5. Then I uploaded my WordPress files and edited my wp-config.php file and added the correct database info

At that point, it should’ve worked. But it didn’t. I couldn’t even get a single page to load.

Case Matters (Apparently)

When setting up WordPress on my local install via XAMPPlite, I used wp311guP_ (obviously not exactly what I had, for obvious reasons) as the table prefix for WordPress instead of the standard prefix, for security reasons.

Come to find out, the table prefix had gotten changed ever so slightly when the database was created and setup with WordPress.

Example (again, not the actual values I used, obviously ;) ):

The original table prefix I had set: wp311guP_

Table prefix as it was recorded by MySQL: wp311gup_

Notice: For some reason the last letter was changed from a capital P to a lowercase p. I haven’t been able to find any WordPress or MySQL documentation that mentions this, though I haven’t searched too deeply.

Tables? We Don’t Need No Stinking Tables

WordPress couldn’t get connected correctly to the database because it was looking for tables with a prefix that didn’t exist. I changed the table prefix to the lowercase version in wp-config.php because this was easier and faster that going through and replacing all the capital letters in my WordPress database.

Once I made my changes I could view the front page. Huzzah!

But sadly when I entered my login info, I got:

“You do not have sufficient permissions to access this page”

A Solution

After searching on Google for an answer, I found a post on beconfused.com.

The jist of the post is that he ran into similar problems. His problems were a result of manually changing the table prefix for security reasons. To fix things, he had to go into his database and change some of the values to fix the permissions error he was getting when logging in.

This wasn’t exactly what had happened to me, and yet it was the same basic issue.

Looking through his post though, I checked my own database for:

• wp_user_level
• wp_capabilities

I noticed that even though everywhere else the table prefix had been changed to wp311gup_ (lowercase p), in those sections it was still my original wp311guP_ (uppercase P).

Anyhow, I searched and changed all the  uppercase versions of the table prefix to the lowercase version and it fixed my WordPress login permissions error.

other Possibilities

My above issue might not be why you’re getting the WordPress permissions error. If you’re getting that error, here are some other possibilities.

No .htaccess File?

If you’re receiving an permissions error, you may also want to check that you have .htaccess in your main WordPress directory. This can also sometimes cause you problems.

Upgrading Problems?

If you’re upgrading from a previous version of WordPress and you get the permissions error, you might look at this solution.

The Conclusion

If you’re going to use a different table prefix than the default (which you should for security reasons), you might want to steer clear of using capital letters in it. They may well be converted to lowercase in the majority of MySQL tables, yet the login tables may leave the capital letter(s) in tact and cause you grief.

Also, the lowercase/uppercase issue may only rear its ugly head once you go to put the site live—I never had a noticeable problem when testing using XAMPPlite.

I’m curious: Has anyone else run into this issue with table prefix characters changing?

Anyone else use uppercase characters in their WordPress tables?

Has anyone found mention of issues with uppercase characters in MySQL table prefixes?

The solution I (finally) found involves sorting the posts in the Events category based on the value of a certain custom field.

Before finding the solution though, I tried several different ways to get events to show up, ordered from newest to oldest., but nothing I came across worked completely.

Skip ahead to the solution…

What Didn’t Work

In order to save some people who are looking into doing something similar, I’ll tell you what didn’t work for me. Some of the things mentioned here might work for your project, but it didn’t work for me.

WordPress Plugins

I started out trying not to reinvent the wheel and just go with a WordPress plugin. However, I couldn’t find anything that fully met my needs.

Calendar Plugins

I tried using several calendar and event plugins to get the job done. These might work for you, but I needed to have each event have its own post page. This was because each event had a registration form for the individual events.

Most of the WordPress plugins I found, either didn’t allow linking to actual posts—they only showed a summary. Many of them used a non-WordPress system to store the details about the event. Some just didn’t work at all and gave errors.

Event Plugins

I had similar issues with WordPress event plugins as I did with the calendar plugins. They had their own system of storing events (not as posts) and many of them where too rigid as far as options.

Future Post Plugins

I also tried using a future post plugin to make it appear that posts that were scheduled for a future date (say the date of the event) were actually published.

All the plugins I found apply this to all posts in all categories with no way to control it. So if you ever scheduled any post in any category to publish later, it would be published immediately—not just your future events.

Other WordPress code

In the meantime, I tried different code offered on sites to help with this and some would work partially, while others would not.

One “solution” was to schedule the post to be published on the date of the event and then use some PHP/WordPress code to show all the posts tagged as future posts in a certain category.

I was excited about this and it looked like it was exactly what I wanted.

The flaw with this plan is that while it will show the future scheduled posts and they will be all in the correct chronological order on a page pulling in posts, you can’t actually view individual post unless you’re logged in as administrator. People not logged in will get a 404 File Not Found message when trying to view the full post. This is just the way WordPress is designed and I couldn’t find any workaround for this.

The Solution, Already

I know, a lot of build up for the solution. Well, here it is.

Part 1: Flutter Plugin and Custom Fields

I was already using a great plugin called Flutter, which lets you create custom write panels and work with custom fields and all in a much more user-friendly way.

I created an Events write panel in Flutter and made an event_date custom field. I used this to display the date of each event instead of the published date of the post on my main Events page.

Flutter’s documentation is pretty sparse, and I could not get the sort by custom field to work using the code examples on their site, so…

Part 2: Order Using a Custom Function

Since the custom fields made by Flutter are just regular WordPress custom fields, we don’t have to use Flutter’s code to order them.

I found a great post and bit of code on Think Press‘ site:

Order Posts by Custom Key Revisited

Take a look at the above bit of PHP code and make these adjustments:

1. Wrap the code provided in PHP tags (see comments if you’re unsure how to do this)
2. Copy and paste that code into your functions.php file in your WordPress theme.
3. Adjust the if statement to match your page or category to your needs
4. Change to the custom field you want  to sort by on this line (change ‘Price’ to your custom field):

   $where.= "AND $wpdb->postmeta.meta_key = 'Price' ";

This worked like a charm. All the events are ordered from newest to oldest—based on the event date, not the publish date. This also works on any custom field; not just those used in Flutter.

Recap

Here’s a recap of my basic process:

• Created an Events category in WordPress
• Used Flutter to set up custom fields for the event date, time, etc
• Set a custom single post template for posts in the Events category (to show event registration code)
• Set up my Events page to pull in those posts
• Added the code found at Think Press‘ site to my theme’s functions.php file
• Replaced the post publish date with the custom field for the event’s date in my templates

Some of the above steps may not apply to your project, but hopefully this will save you some time when needing to sort by custom field in WordPress and when working with creating events.

The good folks at EllisLab have just reported some good news about the progress of ExpressionEngine 2.0. It seems that ExpressionEngine 2.0 has just achieved feature freeze. This means no new features are likely to be added to EE 2.0 before its final release.

More interesting news is that a new addition that will be included in all versions of ExpressionEngine 2.0—built-in jQuery support.

Built-In jQuery Support

These questions get asked a lot: “How do you link to javascript in ExpressionEngine?” and “What is the best way to link to javascript in ExpressionEngine?”

Many wonder which way is best to link to external javascript files: link as an EE template file or link as an external, javascript file (.js) outside of a template?

With this latest news it looks like these questions won’t be much of an issue anymore (at least for those who use the jQuery library).

The ExpressionEngine jQuery module will be available in both Core and Licensed versions.

Leslie Camacho states in a recent post on the ExpressionEngine blog:

“The jQuery module will allow people to use jQuery and its plugins in their templates without worrying about the location of the jQuery files. This way developers have access to jQuery in a secure way from just about anywhere in EE’s template engine.”

CodeIgniter and jQuery

There was a previous post about the new jQuery abilities in EE 2.0. Since ExpressionEngine 2.0 is built on CodeIgniter, this is going to be great for creating javascript functions.

Example:

// Effect: fade a div into view
$this->javascript->fade_in("div");

// Event: set up a click to show a submenu
$this->javascript->click("#button",
    $this->javascript->hide(".submenu");
);

// Plugin: using a jQuery plugin
$this->jquery->tablesorter();

Code example from ExpressionEngine 2.0: fully CodeIgnited!

Personally, I’m excited to see the new EE, and the news of the addition of the built-in jQuery module just whets my appetite even more. I can’t wait to see how this is actually implemented.

Do you use jQuery as your javascript library of choice when working with ExpressionEngine? How do you think the added jQuery support will affect the way you code in ExpressionEngine and CodeIgniter? Tell us about it in our comments.

In our previous Quick and Dirty posts, we looked at speeding up and optimizing various aspects of webpage code, whether this is CSS, PHP or just shortening the amount of time it takes to generate XHTML code.

Now in this final installment, we’re going to look at a way to optimize page load times in general.

Speeding Up Page Load Time

There are many ways to improve the amount of time it takes for webpages to load. We’ve looked at using CSS shorthand to reduce the file size of stylesheets and how to write more efficient PHP code. Combining these tips will help, but there’s a lot more that can be done to speed up your page loads.

Yahoo’s Best Practices for Speeding Up Your Web Site

Yahoo’s list of 34 best practices (broken into 7 categories) to make your website lightning fast:

• Minimizing HTTP requests
• Use a content delivery network
• Add cache control
• Gzip components
• Put stylesheets near the top of your code
• Put scripts at the bottom
• Avoid CSS expressions
• Make javascript and CSS external
• and more…

Optimzing Page Load Time

Contains an in-depth look at how to speed up not only the time your website takes to load, but also tips to speed up your browser so it can load pages you view quicker.

Speed Up Your Pages With YSlow

YSlow is a Firefox extention that works with Firebug to analyze your webpages and show why they are running slow.

Did I Miss Any?

Did I miss any great tips for speeding up your page loads? Tell us about it in our comments.

The Quick and Dirty Series

• CSS Shorthand Tips
• Lightning Fast Page Setup
• Optimizing PHP Code (For Fun and Profit)
• Speeding Up Page Load Time

Subscribe to our RSS feed and keep up-to-date on all of our great web and graphic design articles.

In the previous 2 weeks, we’ve looked at how to use CSS shorthand to reduce the size of your stylesheets, and how to speed up the development of HTML pages.

In this week’s quick and dirty set of tips, we’re going to look briefly at optimizing PHP code.

Increasing Site Performance In PHP

Unlike optimizing your CSS code, usually your main goal in optimizing PHP code is not to cut down on file size, but rather speed up the loading and performance of your pages.

Knowing the most efficient ways to get what you want accomplished in PHP can give your pages a boost as far as processing and loading speed.

Here are 3 tips to help you optimize your PHP code and make your pages load faster:

1. If a method can be static, declare it static. Speed improvement is by a factor of 4.
2. echo is faster than print.
3. Use echo’s multiple parameters instead of string concatenation.

Source: Reinhold Weber

Read all 40 PHP optimization tips

Is It Worth Optimizing My Code?

If you follow the above optimizations, just how much will these speed up your site?

When optimizing any type of code, it’s important to keep in mind that the time spent optimizing your code may be better spent if it’s only going to improve performance slightly.

Some of the tips listed above may not improve performance or speed enough to be worth the time invested in optimizing you PHP.

Devolio has a great post (with graphs and charts and statistics) showing which PHP optimization tips work, and how much impact these have on loading and performance speed.

Practical (and Impractical) PHP Optimizations

As with optimizing in general, moderation is important. I don’t believe all the 40 optimization tips should be used, but there are several that can greatly improve your pages performance.

More Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup
• Optimizing PHP Code (For Fun and Profit)

Subscribe to our RSS feed and look for new installments of Quick and Dirty Tips.

Last week we learned how to save time and file size by using CSS shorthand in our CSS code. This week we’re looking at a tool to speed up creating your XHTML pages and files.

Each time you get ready to begin a site, you have to add certain things to each page:

• Document Type Declaration (DTD – XHTML Strict, Transitional, etc)
• Page encoding (UTF-8, etc)
• Link your stylesheets (CSS)
• Import/link your javascript library or choice

You may also add folders in your work directory for:

• PHP includes
• Images
• Flash
• etc

All of these things are pretty standard. Even those these things are pretty straightforward, making a new file, or copying and pasting from a previous project can take up valuable time better spent on the meat of the site code.

Generate Code With Deploy

I’ve been using an online tool called Deploy. This gives you a dead-easy way of choosing your DOCTYPE, linking CSS, importing the jQuery library (and common plugins) and creating common file folders.

It then generates the code in a nice ZIP for easy download. You can also bookmark the page and regenerate the code again without having to choose the options all over again.

Project Deploy is a great time-saving tool for any web designer.

Other Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup

Subscribe to our RSS feed and look for a new installment of Quick and Dirty Tips.

I’ve decided to provide some quick and dirty tips and code snippets over the next few weeks that are useful for beginners and good reminders for us that have been building websites for a while.

This first set of quick and dirty tips involves 4 CSS shorthand tips for shortening the amount of code you have to use, thus reducing the file size of your stylesheets:

1. CSS colors
2. Remove units for zero values
3. Background colors and properties
4. Margins and padding

CSS Colors

The most accurate way to define colors in CSS is to use the hexadecimal values. For example:

• #FFFFFF = white
• #000000 = black
• #CCFFFF = light blue

We could just leave it at that, but if you use these values over and over again, it gets monotonous and adds extra bloat to your code that you don’t need.

Instead of using the 6 characters that make up a color in hex, we can shorten it to only 3 characters like so:

• #FFF = white
• #000 = black
• #CFF = light blue

As you see, the hex values change, but the colors stay the same. To shorten the hex values, think of the color values as 3 pairs of characters (which is what they really are).

If both letters/numbers in each pair are the same, you only need to use 1 of them. Do this for each pair and you will get a hex color that’s only 3 characters long (plus the #).

Note: This only works when both values in every hex pair are the same. The following examples can not be shortened:

• #3C3C3C
• #3F3A2C
• #CCFFF1

Zero = Zero

This is one that’s overlooked by a lot of beginners. Zero is zero—no matter if you’re talking pixels, ems or percentages (0px, 0em, 0% = 0). There’s no need to include anything after a 0 (zero) value.

It’s all the same, so there’s no need to add the type of measure you’re using to zero values. This is a tiny thing maybe, but over a stylesheet, it can really reduce the file size.

Defining Background Colors and Properties

In CSS, you can define a rule for the background color of an element or class like this:

#some-element { background-color: #FFF; }

This works, but you can shorten this to simply:

#some-element { background: #FFF; }

You can also define other background properties such as a background image (and associated properties) all at once like so:

#some-element { background: #FFF url(../images/go.png) 100% 100% no-repeat; }

This sets the background color to white (#FFF), assigns a background image (go.png), anchors it to the bottom right of the element (100% and 100%) and makes sure the background image doesn’t repeat.

Margins and Padding

The code to set margins and padding can be shortened in CSS as well.

Imagine we have an element that needs a margin on the right and bottom of 10px, while the top and left sides have no margin applied to them. We could setup a rule like this:

#callout {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	}

This gets the job done, but it’s terribly long-winded. We can shorten this dramatically by entering the values of each side as 1 set of 4 numbers:

#callout { margin: 0 10px 10px 0; }

Much shorter, eh? We removed all the separate definitions for each side and combined them into one string.

This works by thinking of each side like a clock. The order of numbers is clockwise: top, right, bottom, left. Each side’s value is separated by a space.

We can also shorten margins and padding in other ways in some situations. If all the sides have the same amount of margin, you can use just one value:

#callout { margin: 10px; }

In this example, all sides will get a 10px margin applied.

If the top and bottom margins are the same and the right and left sides are the same, you only need 2 values:

#callout { margin: 10px 5px; }

Here, the top and bottom get 10px margins and the right and left sides get 5px.

Finally:

#callout { margin: 10px 5px 20px; }

Here, the top gets 10px, the right and left get 5px and the bottom gets 20px. In this example, the final (4th) value doesn’t need to be defined as long as it’s the same as the right side – in this case 5px.

These shorthand tips apply to defining padding as well.

I hope you enjoyed these quick CSS shorthand tips. There are more ways to shorten your code, but this will get you started.

Look next week for more quick and dirty tips. Subscribe to our RSS feed to keep updated.

Other Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup