I wrote about this a while back, but I thought I’d make it official since I’ve used it on the last few projects I’ve worked on. I’ve named my mini CSS framework for creating columns and put it in a Mercurial repository. It’s very small (412 kb minified), semantic and aims to stay out of the way. It also needs some thorough browser testing. Have at it folks.
New Theme
I did a soft launch of my new WordPress theme last week. There are a few things I’d like to point out. First is the decision to go to HTML5. HTML5 (combined with the HTML5 Shiv) actually made writing the styles quite a bit simpler. It’s a bit of adjustment after writing XHTML for so long, but when it came time to write the styles the new tags meant fewer ids and classes. I found that very handy.
Also I’m using less JavaScript than I was before. Instead the hover effects are accomplished using CSS3 transitions. Continue reading
Post Info
CSS Scaffolding
Last week I gave a talk at MinneWebCon along with Ken Loomis and Ethan Poole. My section of the talk dealt with the CSS we use at work. One of the main problems I’ve come to have with using CSS frameworks is that they put presentation back into the markup. Every CSS framework I’ve seen has classes like these:
- ez-50 (ez-css)
- container_12 (960GS)
- grid_1 (960GS)
- span-4 (Blueprint)
After years of adopting standards that keep presentation separate from the markup, frameworks like these (and others) put it right back into the code. Not only is that a bad practice, but it removes one of the chief benefits of CSS: the ability to change your presentation without touching the markup.
The most common problem these frameworks solve is laying out columns. So I came up with a handful of CSS classes that solve the same problem, but do so in a way that will allow you to alter the appearance of the pages without altering the markup.
These classes are applicable in a general way (i.e., within the content), so it’s useful to keep them named as they are for that purpose. You can also copy these same styles to your ids to get the desired widths and column layout. I encourage you to write these styles into page ids whenever possible as that will make your page markup more semantic. You should think of these classes more like scaffolding than a framework. You can get started quickly, then modify them to meet your needs. The minified file is only 412 bytes. Continue reading
Post Info
HTML5 Document Structure
Since I’ve started working with HTML5 a bit, I’ve had to adjust my thinking about page structure. HTML 5 page structure differs from HTML 4 or XHTML significantly. (X)HTML document structure should look like this: Continue reading
Post Info
Simple RSS Parsing and Caching Using PHP
I feel like I should begin by stating that my college degree is in English Literature. In other words, I am not formally trained to be a programmer. Still I’ve spent many years working in PHP. It can be liberating to find out that something you thought would be complicated, is actually not that hard when broken down into discrete steps.
This whole adventure started for me when I went looking for a way to parse an RSS feed. Contrary to those who proclaim that RSS is dead, at it’s heart, RSS is XML. As such it’s a useful method to access content. In my case, I wanted to parse my blog RSS feed as well as my most recent Tweets. That was revelation number one.
RSS is XML > XML has a structure that can be put into objects in PHP
To many of my friends and colleagues, this may seem incredibly simple. To me it was a revelation that opened up a new door. I’ve never tried to create an RSS parser before. Suddenly it was less daunting. (Aside: For me, simple truths often come as revelations. To know me is to know this.)
Continue reading
Post Info
When to Use CSS content Property
CSS offers a tempting attribute in the content property. The syntax is as follows:
content: 'Add this.';
The code above will append “Add this.” to the element, id or class of our CSS declaration. The problem with this is that we’re putting content into our presentation code. Also, this content is not accessible by screen readers or search engine crawlers. A good rule of thumb is to use this property as a means of progressive enhancement. Generally speaking, I like to use it for presentation that enhances the site, but contributes nothing semantically.
Here’s an example:
Let’s say we want to use this icon to denote links that are external to our site:
Use the content property:
a.external:after {
content: url(path/to/external.png);
}
The image itself provides no semantic value to the document. It’s merely an enhancement and would be ignored by screen readers anyway. We can safely use content in this case. Another good use is this tutorial for creating CSS-only arrows.
Post Info
Baseline Theme Version 1.1
It had been a while since I’d done any WordPress development, but I recently dusted off my Baseline theme to start a new project only to find that the jQuery libraries weren’t loading properly. A quick bit of research revealed that new versions of WordPress require a slightly different syntax when using jQuery, so I made a few changes.
- jQuery UI is now loaded using
wp_enqueue_script("jquery-ui");instead of linking to Google’s hosted copy. - The code for loading Superfish uses this syntax:
jQuery(document).ready(function() { jQuery('ul.sf-menu').superfish(); }); - Lists will now obey margins of neighboring floating elements by default because I declared this in style.css:
div#content ul, div#content ol { list-style-position: inside; }
Later versions of WordPress don’t support the ‘$’ syntax normally used with jQuery. Wherever you would normally use ‘$’ (such as $(document).ready ();), you have to use ‘jQuery’ instead (jQuery.document.ready();). There were a couple of other housekeeping items like reformatting style.css and creating a table of contents for it. Baseline should be all set to work with the latest versions of WordPress again. Download it here.
Post Info
An Unexpected Problem with CakePHP and Email Elements
For several months now I’ve been triggering functions in my CakePHP controllers using crontabs. It’s especially handy for summarizing data and sending out reports via email. I’m about to change jobs and I’m trying to set up as many systems as I can to help staff manage our data after I leave. Part of that means writing a few more crons to send out more emails. Today while trying to do just that, I ran into something unexpected that held me up for an hour or so until I had an epiphany on my way home. For the purposes of this post, I’m assuming you’ve already set up a cron dispatcher and know how to trigger cron jobs.
For one more week I’m working in a research clinic. One of the things we need to keep track of is who is late in getting us a sample. We need to check for blood and throat samples (which come from swishing some saline around in the mouth). This can be done by hand, but soon the study will grow and the number of participants will make that hard to manage. So I just want to check to see who is late and send out an email to staff to let them know.
This function exists in my Patient controller: Continue reading
Post Info
Baseline WordPress Theme Version 1.0.2
I’ve uploaded a new version of the Baseline theme for WordPress development. The only change this time around is that I’m using wp_enqueue_script() to include WordPress’ existing copy of JQuery. (Hat tip to Chris Coyier.) This seems like a significant enough change to merit a small version bump.
I used the Baseline theme as a launching pad for this website. At least for me, it serves as a good starting point when you begin developing a brand new theme.
If you find this useful, you might be interested in checking out Jeff Star’s functions.php template.
Post Info
No Flash Required
UPDATE II
I just updated the theme of this site so:
- It uses even less JavaScript (all animations and transformations are done w/ CSS3 tranforms)
- It’s HTML5
More on both those points in a post soon. The upshot is that this post refers to a past theme and may be confusing.
I just added a pretty sweet bit of eye candy to my nav menu using strictly CSS & JQuery. The method is here. The code is here.
You do need to have a either a webKit or Mozilla browser for it to work properly. The point is that there are fewer and fewer things that Flash can do that can’t be done with HTML, JavaScript and CSS. In fact, just about every single bit of animation I’ve had done in Flash over the last couple of years could be recreated with JQuery & CSS3.
UPDATE
Since I couldn’t get the z-index to function properly in Internet Explorer, I used JQuery’s .browser property so the function only runs in supported browsers–namely, Mozilla or WebKit. The function actually degraded fairly well, except for Internet Explorer’s buggy handling of z-index. For reference, I’ve included my version of the plug-in because it has this and other subtle variations. Continue reading