Programming - willoller.com

Dec 7, 2010 0

Add page slug to class list using wp_list_pages

function menu_css_class($css_class, $page){
    $css_class[] = "page-slug-" . $page->post_name;
    return $css_class;
}
add_filter("page_css_class", "menu_css_class", 10, 2);

Mar 2, 2009 0

Textile ol li count bug

Just hit a bug with the Textile 2.0 library:

# Portland, OR

# Sanford, FL

# Albuquerque, NM

# San Diego, CA

# Bellingham, WA

Was producing:

<ol>

   <li>Portland, OR</li>

   <li>Sanford, FL</li>

   <li>Albuquerque, NM</li>

   <li>San Diego, CA   </li>

</ol>

<ol>

   <li>Bellingham, WA</li>

</ol>

Found the solution here:

You can work around the problem, by replacing these two lines (in the fList function in /textpattern/lib/classTextile.php):

foreach($text as $line) {
$nextline = next($text);

with:

foreach($text as $nr => $line) {
$nextline = isset($text[$nr+1]) ? $text[$nr+1] : false;

Jan 3, 2009 0

“Cascading” in CSS

The “cascading” in “Cascading Style Sheets” has several facets: computed values, inheritance, and specificity. Understanding how these cascades work is an integral part of your css ninja training.

Computed Values

Many of the values assigned have a unit. Some of these are relative (like em and ), and some are absolute (like px and in). Relative values are based on their parents: an element with a width of 50 uses the element’s parent to determine the actual width of the element.

width: 50%

Likewise, if both the parent and child elements’ font-sizes are 1.5em, the child’s actual font size will be larger than the parent’s.

1.5em 1.5em 1.5em

Absolute values do not change based on their parent values. These are often obvious: color: red; for example. Pixel values are absolute, though the actual value displayed by the UA(User Agent) may differ (due to display or text-size settings).

Inheritance

Inheritance is the passing on of attributes from parents to children. It works in CSS like this: An element’s font color is set to red. The color for its child elements will also be red (if left unspecified or set to inherit).

color: red

no color specified

color: inherit

Specificity

This is how CSS decides between competing styles. Take a look at the following code:

p#special_error { color: red; }

.error {         color: orange; }

p {              color: black; }

<p>no class or id</p>

<p id="special_error" class="error">class and id</p>

<p class="error">p class</p>

<div class="error">div class</div>

<div id="special_error">div id</div>

So what color do the elements end up with? To answer that question, we need to know how the competing selectors are chosen.

Each selector has a particular weight outlined in this table:

selector	weight	example
id	100	#special_error
class	10	.error
element	1	p

These weights are all added up and the “heaviest” selector set wins. So using the css above, here are the results:

<p>no class or id</p><!-- #000000 -->

<p id="special_error" class="error">class and id</p><!-- red -->

<p class="error">p class</p><!-- orange -->

<div class="error">div class</div><!-- orange -->

<div id="special_error">div id</div><!-- inherits -->

Links

w3.org
wikipedia
htmlhelp

Dec 3, 2008 0

Counting Characters php vs javascript

On a recent project, an issue cropped up where we were exporting xml reports to a third party, who had rules about line lengths in Description fields.

So, I wrote up a quick-and-dirty character counter for the description field so the client can keep their descriptions under the 1500-word limit.

Here’s how it was done:

if (!$fdata['description']) {

   $errors[] = "You must enter a Description";

} elseif(strlen($fdata['description']) > 1500) {

   $len = strlen($fdata['description']);

   $errors[] = "Descriptions are limited to 1500 characters ($len)";

}

Now the html and javascript:

<li class="description">

   <label for="htmlarea" class="required">Description *</label>

   <textarea name="description" id="htmlarea" cols="80" rows="20" class="textarea">< ?= $ff['description'] ?></textarea>

   <p class="hint" id="desc_char_count">1500 character limit</p>

</li>

$(function(){

   $('#htmlarea').keyup(function(){

      var charLength = $(this).val().length;

      $('#desc_char_count').html(charLength + ' of 1500 characters used');

      if($(this).val().length > 1500) {

         $('#desc_char_count').removeClass('positive').addClass('negative').html('<strong>You have ' + $(this).val().length + ' characters. You may only have up to 1500 characters.</strong>');

      } else {

         $('#desc_char_count').addClass('positive').removeClass('negative');

      }

   });

   $('#htmlarea').keyup();

});

All was working well, except I underestimated the descriptions. The next morning, the thing was broken. The php side was kicking validation errors (“over 1500 characters”), while the javascript was counting a mere 1480. Why?

Turns out the data was full of bullets and other multibyte characters. To make the counts match, I needed multibyte-safe php:

if (!$fdata['description']) {

   $errors[] = "You must enter a Description";

} elseif(mb_strlen($fdata['description'],'UTF-8') > 1500) {

   $len = mb_strlen($fdata['description'],'UTF-8');

   $errors[] = "Descriptions are limited to 1500 characters ($len)";

}

Hooray! Now the counts match!

Aug 17, 2008 0

Tweet:

Can’t wait for Resig’s new book. http://jsninja.com/

May 13, 2008 0

Use Firebug to Update A Huge Form

Had a problem recently where I had to update hundreds of input fields within a shopping cart, setting prices of product variants from $200 to $49.

They were named in sequence:

...

<input name="vs[1667][price]" value="200" />

<input name="vs[1668][price]" value="200" />

<input name="vs[1669][price]" value="200" />

...

So I busted out the command line in Firebug.

for (var i=0; i&lt;10000; i++) {

   if(document.productvariantsform.elements["vs[" + i + "][price]"].value) {

      document.productvariantsform.elements["vs[" + i + "][price]"].value = "49.00";

   }

}

but all I got were “has no properties” errors.

I got in touch with my local Javascript guru who helped me come up with some code that did work:

var frm = document.productvariantsform;

for (var i=0; i < frm.elements.length; i++) {

   if ((frm.elements[i].name.match(/\[price\]$/)) && (frm.elements[i].value)) {

      frm.elements[i].value = "49.00";

   }

}

This saved literally hours of [TAB][TAB][TAB][TAB][Ctrl+V].
Thank you Firebug!

Apr 30, 2008 0

Textile – Humane Text Generator

Blogs, bulletin boards, community sites—the whole web2.0© rely on the same thing: user input. On the web, user input usually means HTML.

Some simple HTML is easy to learn, like bold and italics, but other techniques (like links, lists, and blockquotes) can be a little more daunting. For a site owner, badly written HTML can break a site.

So what are you, the site owner, to do? You shouldn’t have to learn all about HTML yourself (unless you want to), and can’t force your readers to learn HTML just to post feedback.

There are a few apps that can help people “mark up” text, and these work well, in general. The drawbacks are they can be bulky or hard to use, and suffer from technical issues including lack of browser support and buggy performance. These drawbacks make them more suited for intranets and administrators, and less suited for the rest of the World-Wide Web.

Lately, another method has resurfaced: server-side markup generators. They work behind the scenes to change easier markup into HTML. Anyone familiar with bulletin boards will know about BBCode; it generally worked like this:

[b]Bold[/b], [i]italics[/i], [u]underlined[/u]. will produce bold, italics, underlined.

But this is not really enough. Its really just HTML with replaced with [ and ]. BBCode also can’t do some of the the advanced things (lists, blockquotes) HTML still has to offer.

Along came Textile

Here at Black Dog, we use Textile to solve this problem. It is a server-side markup generator, like BBCode, but it has all of the bells and whistles you need to produce good HTML. Instead of using HTML-like syntax, it uses easy-to-remember symbols. The best part is, the symbols make sense before they are turned into HTML.

bold, italics. becomes bold, italics.

Textile also handles lists and sublists, ordered and unordered:

* An item in an unordered list

* Another unordered list item

** Second Level item

** Second Level item

*** Third Level

# An item in a numbered (ordered) list

# Another item

## Second level item

It also helps you out with the little things: double quotes and single quotes are made “curly,” and dashes—I love those helpful little guys—are made into their correct typographical charaters.

The best part: Textile doesn’t ruin good HTML, so you can mix-and-match HTML and Textile if you want to, but it quietly throws out bad or broken HTML so your content stays nice, clean, and readable.

Everybody wins

As a site owner, you have some additional protection against buggy HTML from users or even yourself. As a user, you can make make your text stand out without learning a bunch of HTML tags. As a reader, the web will be a little easier on the eyes.

Further Information

Textile’s entry on Wikipedia
Advanced Textile reference (hobix.com)
Textpattern (CMS built with Textile)
Dean Allen’s home page (Creator of Textile and Textpattern)

Jan 1, 2008 0

Is Vista forcing me to upgrade iTunes?

Okay, maye I’m jsut being paranoid or it’s a big coincidence, but this seems to be a consistent event. I’m updating my iPod with iTunes, and everything is tooling along nicely. Podcasts are updating and downloading, the store is working, and the music is playing. Perfect.

Then, an update becomes available (this time 7.5). Now, before downloading the update, iTunes crashes every five minutes with the Not-Vista’s-Fault error “caused by iTunes”. In addition, the iTunes store and my podcast downloads start timing out.

This same pattern happens when using Firefox and AVG: everything fine then crash city once an update becomes available.

I wouldn’t put it past Vista to say “Fine. If you don’t update your software we’ll make you do it.

Anyone else on Vista having this experience?

Dec 13, 2007 0

Montoya and the DOM sittin’ in a tree

Makes a great point about syntax.
Plus, I’m blogging using Flock. How neat.

I used to hate Javascript’s syntax. I still do, but to a lesser extent. But I know where most of it came from. And I don’t know what your programming experience is, but C, PHP, etc. all use “function,” so it is totally natural to me.But I’ve grown up about syntax, and I’ve realized that while every programmer wants a language with beautiful syntax, arguing/worrying/complaining about syntax is stupid. I don’t care if it’s def or function, class or object, import or include. I care about what I can do with the language, and that’s what this is all about.

How I learned to stop programming and love the DOM | The Montoya Herald

Blogged with Flock

Continue