I had the honor of being on the jQuery Podcast #30 with Ralph Whitbeck and Doug Neiner. We talk about some of the different parts of CSS-Tricks, the jQuery conference, and the difference between designer and developers. We also talk about my new job at Wufoo and specifically the Wufoo API jQuery plugin and the interesting issues that came up with that.
CSS has a value for the display attribute called run-in. It’s like this:
h3 {
display: run-in;
}The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques.
Let’s take a closer look.
But why not float it to the left? Well headers are often of larger font-size than body type. So if you float the header to the left, you might catch more than one line.
But why not make it an inline element? Because the following text might be (actually, is likely to be) inside of a paragraph tag. Paragraph tags are block-level, and thus the will break to a new line if they follow an inline element and the effect will not be achieved. You could insert the <h3> tag within the <p> tag, but that has semantic concerns, and more importantly, long term maintenance concerns. What if this effect goes out of vogue?
But why not use inline-block? Same problem as above. The effect will not be achieved unless you tuck the header into the following paragraph which is problematic.
If a run-in element precedes a block level element, the run in element will behave structurally as if it has become the block level elements first inline child element.
Haven’t heard much about this? Well it might be because browser support is a bit weird.
Rumor has it that Mozilla isn’t happy with the spec. Firefox doesn’t support it at all, including the version 4 betas.
The WebKit family (Safari and Chrome) are supporting it, as well as Opera and IE 8. There are some differences in how these browsers handle things though. Reports have it that older versions of WebKit and Konqueror allowed run-in elements to run into succeeding inline elements which is incorrect.
In my own reading of the spec, I find it a bit unclear.
If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box.
That makes sense and appears to be how it works, but does “becomes the first inline box” mean that the run-in box should become a descendant of the block box? In WebKit, the run-in element retains its solidarity.
A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
Does that mean that there can’t be two headers, both run-ins, that run into a paragraph below? That’s how I would read it, but I think the WebKit implementation where they both fall inside makes more sense. Opera and IE 8 follow the spec in that the first run-in becomes block and the second goes inline.
Then it says:
Otherwise, the run-in box becomes a block box.
Otherwise is a big word, but implementations have been pretty good here. Three run-in’s in a row inside a parent with no other siblings? They all go block. A run-in sandwiched between two inline elements? It goes block. Run-in > absolute-position > block, the run-in goes block. Mind-bending, I know, but current modern browsers are doing good here.
If the run-in element contains anything block-level, it becomes block-level. All browsers seem to agree on that one.
Here is my own simple demo page. There is also a super hardcore demo (which is over 10 years old).
Every now or then we need new column on some grid listing in Magento. It is quite simple task, but you will probably want to format values way you want or whatever.
This is where writing your own renderer would be usefull and simple.
To pull this out, you would overide some grid, add column to it and write custom renderer.
How it works in real life situations.?!
Let’s take a look at product listing admin grid.
Overide block class called Mage_Adminhtml_Block_Catalog_Product_Grid located in /app/code/core/Mage/Adminhtml/Block/Catalog/Product/Grid.php file.
We won’t rewrite this block in this post, but this post assumes you know how to do it yourself.
Modify _prepareCollection() method with new data, for example let’s add short description of a product:
protected function _prepareCollection()
{
$store = $this->_getStore();
$collection = Mage::getModel('catalog/product')->getCollection()
->addAttributeToSelect('sku')
->addAttributeToSelect('name')
->addAttributeToSelect('short_description') // THIS IS WHAT WE HAVE ADDED
->addAttributeToSelect('attribute_set_id')
->addAttributeToSelect('type_id')
->joinField('qty',
'cataloginventory/stock_item',
'qty',
'product_id=entity_id',
'{{table}}.stock_id=1',
'left');
if ($store->getId()) {
//$collection->setStoreId($store->getId());
$collection->addStoreFilter($store);
$collection->joinAttribute('custom_name', 'catalog_product/name', 'entity_id', null, 'inner', $store->getId());
$collection->joinAttribute('status', 'catalog_product/status', 'entity_id', null, 'inner', $store->getId());
$collection->joinAttribute('visibility', 'catalog_product/visibility', 'entity_id', null, 'inner', $store->getId());
$collection->joinAttribute('price', 'catalog_product/price', 'entity_id', null, 'left', $store->getId());
}
else {
$collection->addAttributeToSelect('price');
$collection->addAttributeToSelect('status');
$collection->addAttributeToSelect('visibility');
}
$this->setCollection($collection);
parent::_prepareCollection();
$this->getCollection()->addWebsiteNamesToResult();
return $this;
}
Now let’s add this to a new column:
/*You will find some more code inside this method, but for readability purposes, I'll just say you need to add code you find here at beginning of this method...*/
protected function _prepareColumns()
{
$this->addColumn('Short description',
array(
'header'=> Mage::helper('catalog')->__('Short description'),
'index' => 'short_description',
'renderer' => 'Mage_Adminhtml_Block_Catalog_Product_Renderer_Red',// THIS IS WHAT THIS POST IS ALL ABOUT
));
}
Make directory called Renderer inside directory where your Grid.php is located and make file Red.php
Make class
Mage_Adminhtml_Block_Catalog_Product_Renderer_Red extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
Notice “Mage_”, this is because I’m not rewriting anything in this post…
Here is code:
< ?php
class Mage_Adminhtml_Block_Catalog_Product_Renderer_Red extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
public function render(Varien_Object $row)
{
$value = $row->getData($this->getColumn()->getIndex());
return '<span style="color:red;">'.$value.'</span>';
}
}
?>
Now you should have one additional column at product grid containing short description writen in red.
The crew from Unmatched Style are the folks that run ConvergeSE which I was lucky enough to attend this year. They are really great folks! While I was down there, I was interviewed by Gene for their podcast.
Thanks to Gene for having me! I really recommend to everyone to check out Unmatched Style. A web design gallery is also part of what they do. I always tell people it’s my favorite web design gallery because they don’t just post a screenshot and call it a wrap, they write about why they like the design, and even parts they don’t like. Not to mention these are folks who build websites for a living, so there is nobody more qualified to critique and promote others work.
Dude, you browse with JavaScript on?
Uhm, yeah, why wouldn’t I?
It’s totally insecure. Hackers could destroy your computer.
Hackers? What is this 1995? And, no they can’t.
They can definitely steal information about you without you knowing.
Like what?
Like you’re address book information or your browsing history, depending on your browser and settings.
So if I were to visit some dark corner of the internet where people ran malicious scripts like this, people might be able to capture that my name is Bob and I live at 123 Maple Drive Mayberry, NC? And that sometimes I look at boobs at The Daily Niner?
Yes.
But I don’t use autofill on my forms at the browser level, they can’t. What about you? Isn’t like every single website you visit seemingly broken?
Well good websites are coded to work fine without JavaScript, and I can selectively enable sites I trust to allow it.
That sounds like a lot of work to maintain a whitelist manually. And it’s not like you do a security audit of each site before whitelisting it right? You just decide to trust it, basically because you want to look at and use that website right now and JavaScript is the only way.
Yes but I’m much more likely to enable it on a big businesses website than some random blog. Look, I’m not alone here, millions of people have downloaded the NoScript plugin for Firefox alone.
I see that. Here’s some empirical evidence for you though. I’ve never once blocked JavaScript on any of the browsers I’ve used. I browse around all day with little regard to my trust level of the current website. In general my trust level is actually fairly low. I know a lot of sites I visit are hosted on shared hosting by folks like me who aren’t security gurus. I’ve had my websites hacked before on the server-level (nothing to do with JavaScript), which then inserted malicious JavaScript into my pages. I’m sure this has happened to many of those other sites I visit. Sometimes that JavaScript stores weird cookie data or redirects the website. Totally sucky and undesirable, but nothing that serious has ever happened to the point where I even consider just turning off JavaScript. I’ve never lost sensitive data or gotten spyware or anything like that.
Are you sure? Have you ever had weird charges on a credit card you’ve had to refute?
Well yeah.
Do you know exactly how that information was stolen from you?
No I don’t, but I doubt it was JavaScript.
Doubt… Trust… two sides of the same coin.
Here’s another reason I browse with JavaScript on. I like JavaScript. I write JavaScript. It does cool stuff and I like to see how other people use it. So I’m biased in that regard. As a web designer and developer, I don’t like hearing how many people browse with JavaScript off. I want that to go away. I don’t want to create gracefully degrading websites because it’s often twice the work and only for accommodating people with outdated concerns about this technology. And don’t tell me all about accessibility, I hear that most screen readers handle JavaScript just fine.
A site that works well without JavaScript also means it also likely has good architecture. It works great alone, and JavaScript adds to the user experience as needed. Relying on JavaScript entirely is just lazy.
You see it as lazy I see it as the future. So what about Flash, do you block that too?
No, I love Flash.
I knew I didn’t like you. You’re probably a PC guy too huh?
Dude, we’re not going there.
Here is a little snippet of code that can come in handy if you are like me handling a task of programatically creating an order in Magento. My issue was that I had to disable emails beeing sent out to the customers, while at the same time leave the normal frontend process. Thus I could not just go under Magento admin System > Congifuration and disable email sending from there.
Here is the sample line code you just need to place above final $order->save() or possibly $checkout->saveOrder():
Mage::app()->getStore()->setConfig(Mage_Sales_Model_Order::XML_PATH_EMAIL_ENABLED, "0");
The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.
The border-image shorthand property has 3 parts:
border-image: url(border-image.png) 25% repeat;
Essentially, these allow you to specify:
Let’s look at each part of the process in a little more detail. The first part is easy, and is familiar from the background-image property. For demonstration purposes I’ll use this image, which is 100px x 100px:
The second part can have from one to four values, much like the border-width property, and they are specified in the same order: top, right, bottom, left. You can use percentages or pixels. Strangely, the percentages require the “%”, while pixels should be listed without the “px”:
border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;In this case, since my image is 100px x 100px, the two rules above are equivalent – they slice the image in the same places. I’ve added some dimensions on my image to demonstrate:
border-image will always place the corner sections of your image into the corresponding corners of your element box, but the third part of the shorthand rule tells the browser how to treat the middle sections of your image — the ones that will go along the edges of your element. Repeat (repeat, or tile, the image) and stretch (stretch, or scale, the image) are pretty self-explanatory. Round means tile the image but only so that a whole number of tiles fit, and otherwise scale the image. Right now, Safari and Chrome interpret round as repeat. There can be up to two values: one for the top and bottom edges of the element, and one for the left and right. Here’s an example with the top/bottom value set to repeat, and the left/right value set to stretch:
#example-one {
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat stretch;
border-image:url("border-image.png") 25 30 10 20 repeat stretch;
}
LIVE DEMO, RSS READERS CLICK OVER TO SEE. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu arcu non dui consequat vestibulum non vitae eros. Donec imperdiet lorem at mi rhoncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. In ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
border-image won’t do anything if you don’t specify a width for your border. For browsers that understand border-image, your image slices will be scaled to the specified width. If you use the border shorthand property, it provides a nice fallback for browsers that don’t:
#example-two {
border:50px double orange;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}
Or you can specify each width individually (in this example I’ve specified widths such that the image slices aren’t scaled at all):
#example-three {
border-color:orange;
border-style:double;
border-width:25px 30px 10px 20px;
-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;
}
Using a plain border at the same widths as your border-image won’t always be ideal, however, so you may want to use conditional stylesheets to give IE some different border styles altogether.
Predictably, IE doesn’t understand anything of border-image. Browsers that do support border-image only support the shorthand property, not all the individual properties that are described in the spec. Some potentially useful properties aren’t supported at all, especially border-image-outset, which would solve this problem.
Also, the default behavior is supposed to be to discard the center section of the image, and use the ‘fill’ keyword on the border-image-slice property to preserve it:
The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.) (Read the spec)
But the current browser behavior is to preserve the middle, and there is no way to turn it off. Thus, if you don’t want your element’s content area to have a background, the center section of your image must be empty. However, you can use this filling behavior to your advantage, to create a box with a fancy border and background, with only one image.
I built a border-image demo page to help me get my head around this complicated new set of CSS3 properties. You can pick an image, specify repeat, round, or stretch, and adjust the border-width and slicing. Enjoy!
If you have other examples on live sites, I’d love to see them. Leave a link in the comments!
Nora Brown is a freelance web and graphic designer based in Boston. Her pet project at the moment is the Web Designers’ Review of Books, where she reviews books on everything from Blue Note album covers to HTML5. Have a look!
A little while back there was a guest post about Ajax image previews. It’s a nice technique but it left myself and a few other commenters thinking: wouldn’t it be cool if you didn’t have to upload the image at all to preview it? After all, the image is on the persons computer already why can’t we just snag the local file path and use that as the src of an image.
Well, it’s that snagging of the file path that is the problem. I did some research and testing in different browsers and I thought I’d document the results.
The idea comes from the fact that you can see see the file path in the file input after you select it.
In all my naivety, I just though “Hey we’ll just get the value of the input and use that as the src of an image element next to the input!” As I quickly learned, there are some security concerns with allowing the browser to see a local file path like that. A malicious script could learn a good deal about your local file system if a file input was willing to cough up data like that.
Both these browsers will return a value like this when trying to access the value of the file input:
C:\fakepath\image.pngThis article has a bit more information on the subject. Apparently if you add the site in question to the “Trusted sites” list in Internet Explorer it will return the file path. But of course you can’t expect users to do that.
Return no value whatsoever for the file input value.
Firefox is unique in that it returns only the filename for the file inputs value. While clearly that won’t work to get a local image preview working, this thread on StackOverflow lead to an interesting solution.
While it won’t give you the file path, Firefox will let you use a function called ‘getAsDataURL()’ on the files attribute of the DOM on that input.
// Browser supports `files` as part of DOM
if (this.files) {
// This works in Firefox, #image-preview is an <img src="" />
$("#image-preview").attr("src", this.files[0].getAsDataURL());
}View Demo (only Firefox does anything)
Oh, <textarea>’s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.
You can add a background-image to a textarea like you can any other element. In this case, the image is a friendly reminder to be nice =). If you add a background image, for whatever reason, it can break the browser default styling of the textarea. The default 1px solid bolder is replaced with a thicker beveled border. To restore the browser default, you can just force the border back to normal.
textarea {
background: url(images/benice.png) center center no-repeat; /* This ruins default border */
border: 1px solid #888;
}That background image might interfere with the readability of the text once the text reaches that far. Here is some jQuery that will remove the background when the textarea is in focus, and put it back if the textarea is left without any text inside.
$('textarea')
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });
There is a new attribute as part of HTML5 forms called placeholder. It shows faded gray text in the textarea (also works for text-style inputs) which disappears when the textarea is in focus or has any value.
<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>HTML5 placeholder text works in Safari 5, Mobile Safari, Chrome 6, and the Firefox 4 alpha.
We can easily test if a particular element supports a particular attribute by testing with JavaScript:
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
};Then we can write code so that if the browser does support the placeholder attribute, we’ll use that, if not, we’ll mimic the behavior with jQuery:
if (!elementSupportsAttribute('textarea', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
$("#example-three")
.data("originalText", $("#example-three").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
// Browser does support HTML5 placeholder attribute, so use it.
$("#example-three")
.attr("placeholder", $("#example-three").text())
.text("");
}
All WebKit browsers, Firefox 3.6, and Opera 10 all put a glowing blue border around textareas when they are in focus. You can remove it from the WebKit browsers like this:
textarea {
outline: none;
}You could apply it to the :focus style as well, but it works either way. I have not yet found a way to remove it from either Firefox or Opera, but -moz-outline-style was about as far as I tested.
REMINDER: The blue glow is becoming a strong standard and breaking that standard is typically a bad thing for your users. If you do it, you should have a darn compelling reason to as well as a similarly strong :focus style.
WebKit browsers attached a little UI element to the bottom right of text areas that users can use to click-and-drag to resize a textarea. If for whatever reason you want to remove that, CSS is all it takes:
textarea {
resize: none;
}
jQuery UI has a resizeable interaction that can be used on textareas. It works in all browsers and overrides the WebKit native version, because this version has all kinds of fancy stuff (like callbacks and animation).
To use it, load jQuery and jQuery UI on your page and at its most basic level you call it like this:
$("textarea").resizable();
James Padolsey has a super nice jQuery script for auto resizing textareas. It works just how you likely hope it does. The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default.
The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:
$('textarea').autoResize();
To prevent text from wrapping normally in CSS, you use #whatever { white-space: nowrap; }. But for whatever reason, that doesn’t work with textareas. If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you’ll have to use the wrap="off" attribute.
<textarea wrap="off" cols="30" rows="5"></textarea>
IE puts a vertical scrollbar by default on all textareas. You can hid it with overflow: hidden, but then you don’t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.
textarea {
overflow: auto;
}
All the above examples can be seen here.
The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible ‘world-wide’. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process.
This is perhaps the most obvious but also the most important tip. English is arguably the most commonly used language internationally, but it still serves as a native tongue for only about 20% of the world’s population. Clearly, an English-only website will be inaccessible to a huge percentage of your potential online audience of 1.8 billion people.
There are various ways to translate your content and the method you choose may reflect budget and time constraints. The easiest way is to add a translation widget such as Google Translate or Babelfish to your site, allowing visitors to translate text to the language of their choice. Remember that any text embedded in Flash files won’t be translated – which is (yet another) a good argument against using too much Flash.
If you’re confident in using inline functions, you can build inline translation code into the site using Ajax, in connection with geolocation, to facilitate a smooth immersive translation process that directs the visitor to the correct language version, as determined by where their ISP is hosted.
If you do use machine translation, try to make your original content as simple and direct as possible and avoid specific cultural references, as these will invariably not translate well.
If budget allows, having your copy professionally translated is the optimum choice. Using a native speaker from the target market will ensure that meaning and nuances will carry over to your translated site and any linguistic or cultural mistakes can be avoided.
Not all languages read from left to right like English. Scripts such as Arabic and Hebrew read from right to left. While CSS makes it easy to flip a vertical navigation bar (which would normally be located on the left-hand side for a left-to-right language) and script direction from one side to the other, using a horizontal bar located across the top of the page will add a sense of continuity and cohesive design to localized versions of your site.
Unicode UTF-8 is the ideal character encoding tool. Compatible with over 90 different written languages or scripts, it’s also supported by all the major browsers. Even if you see no need for a localized site in Arabic or Simplified Chinese right now, using UTF-8 will give you the flexibility to create one in the future and it also incorporates all the additional characters from extended Latin alphabets (such as the German Ä, Ö, Ü and ß).
Bear in mind that some scripts and languages will take up more space than others to convey the same information and this may affect your page design.
The use of colours can enhance a site’s visual appeal and help convey a theme or emotion, but some colours have different connotations in different cultures. White, for example, can signify marriage in the west but is associated with death and mourning in much of the east.
Some cultures (such as Japan and China) can be defined as ‘high context’ cultures. These cultures have a tendency to draw information from context and situation. ‘Low context’ cultures (including Germany, Scandinavia and North America) tend to look for explicitly worded and expressed information. In terms of website design, this means that sites with a more visual and immersive feel may be better received in high context cultures and sites with concise, clear layouts and text will appeal more to low context cultures. As an example, take a look at Nokia’s clearly structured and information-heavy German site, with prices and products listed on the front page, and compare it to the more visually oriented Chinese version.
There’s little point having a beautifully designed series of websites which are accessible to a range of different cultures if nobody can find them. SEO keywords can vary tremendously from location to location so don’t just translate your keywords directly. A little research may reveal that colloquialisms, alternative terms or even misspellings are more commonly used in your new target market. Research keywords not only on the local versions of search giants like Google but also on any major local competitors such as Baidu (the leading search engine in China).
Christian Arno is the founder and Managing Director of global translations company Lingo24. Launched in 2001, Lingo24 employs some 4,000 professional freelance translators covering a hundred different language combinations. Follow Christian on Twitter: @Lingo24.
Christian has written for a number of other blogs on this same subject, so if are very interested in this, check out his other articles:
Google Maps has a JavaScript API now in it’s third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires applying for an API key which is nice.
I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.
Not only is it evented for dealing with things inside the map, but the objects you used to create the map and stuff inside it are full of methods for controlling them. This makes it easy to control the map with events that happen elsewhere on your page.
I decided to play with it a little and try to build something.
I used jQuery to help out, but that’s definitely not required.
I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.
<li data-geo-lat="41.9786" data-geo-long="-87.9047">
<h3>O'Hare Airport</h3>
<p>Flights n' stuff</p>
<p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine's 2009 "America's Favorite Cities" ranked Chicago's Airport System (O'Hare and Midway) the second-worst for delays, New York City's airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p>
</li>When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.
It’s all fairly straight forward and further commented to clarify. Adding/editing points is as simple as changing coordinates and text right in the HTML part.
The idea came from this website which I found in a tweet by ilovetypography.
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:
$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}So what’s the difference?
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let’s say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:
So in other words:
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}It’s all probably a lot more complicated than this and articles like this probably explain it all a lot better.
Whether your web-shop is already generating revenue or it’s at it’s very beginning, it’s always good to enhance it where it’s needed especially if it’s for free.
These 10 extensions for magento are here for their value and usefulness. Also, almost all of them exist for quite some time so they have been tested and more importantly supported by their authors with the exception of the Easy Lightbox but it works with Magento 1.4.
One of them is our own product by Domagoj Potkoc.
Give the possibility to resize images without distorting them. You can specify a Width and a Height value as well as a ratio. Everyone dealing with images in Magento will appreciate this one for sure.http://www.magentocommerce.com/extension/153/direct-resize 
This small extension will help to install Lightbox widget. Installation and configuration will take approximately 5 minutes.http://www.magentocommerce.com/extension/1487/magento-easy-lightbox 
Replaces the standard single column drop down with a multi-column dropdown featuring 2nd and 3rd level menu items.http://www.magentocommerce.com/magento-connect/Raptor+Commerce+%28toby%29/extension/1345/raptor_explodedmenu
This small extension will help to add informational tabs on product page. No files are replaced and no codding experience needed to install.http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/1725/magento-easytabs
This extension adds the new canonical links to the head of your Magento pages.http://www.magentocommerce.com/magento-connect/Yoast/extension/906/canonical-url-s-for-magentoAdditional features for the default GoogleAnalytics module. Track every individual page – including sections retrieved via AJAX during one-page-checkouthttp://www.magentocommerce.com/magento-connect/FOOMAN/extension/171/fooman-google-analytics-plus
Allows you to delete testing orders from the drop-down menu in the Admin panel.http://www.magentocommerce.com/magento-connect/Boutik+Circus/extension/873/delete-orders
Allow your customers to purchase and use Gift Certificates. http://www.magentocommerce.com/magento-connect/Unirgy/extension/751/unirgy_giftcert
This extension gives your Magento ability for easy management of featured products. Frontend features include separate interface for listing of all featured products and a block usage for easy placement to the interfaces of your choice.http://www.magentocommerce.com/magento-connect/Inchoo/extension/2513/featured-products
Adds some exciting customizable features to the products grid like: Full Product Search, Grid Row Highlighter,Catalog Grid Thumbnails/Images,Mass Product Refresh etc.http://www.magentocommerce.com/magento-connect/WDCA/extension/748/enhanced-product-gridWhether your web-shop is already generating revenue or it’s at it’s very beginning, it’s always good to enhance it where it’s needed especially if it’s for free.
These 10 extensions for magento are here for their value and usefulness. Also, almost all of them exist for quite some time so they have been tested and more importantly supported by their authors with the exception of the Easy Lightbox but it works with Magento 1.4.
One of them is our own product by Domagoj Potkoc.
Give the possibility to resize images without distorting them. You can specify a Width and a Height value as well as a ratio. Everyone dealing with images in Magento will appreciate this one for sure.http://www.magentocommerce.com/extension/153/direct-resize This small extension will help to install Lightbox widget. Installation and configuration will take approximately 5 minutes.http://www.magentocommerce.com/extension/1487/magento-easy-lightbox Replaces the standard single column drop down with a multi-column dropdown featuring 2nd and 3rd level menu items.http://www.magentocommerce.com/magento-connect/Raptor+Commerce+%28toby%29/extension/1345/raptor_explodedmenuThis small extension will help to add informational tabs on product page. No files are replaced and no codding experience needed to install.http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/1725/magento-easytabsThis extension adds the new canonical links to the head of your Magento pages.http://www.magentocommerce.com/magento-connect/Yoast/extension/906/canonical-url-s-for-magentoAdditional features for the default GoogleAnalytics module. Track every individual page – including sections retrieved via AJAX during one-page-checkouthttp://www.magentocommerce.com/magento-connect/FOOMAN/extension/171/fooman-google-analytics-plus
Allows you to delete testing orders from the drop-down menu in the Admin panel.http://www.magentocommerce.com/magento-connect/Boutik+Circus/extension/873/delete-ordersAllow your customers to purchase and use Gift Certificates. http://www.magentocommerce.com/magento-connect/Unirgy/extension/751/unirgy_giftcertThis extension gives your Magento ability for easy management of featured products. Frontend features include separate interface for listing of all featured products and a block usage for easy placement to the interfaces of your choice.http://www.magentocommerce.com/magento-connect/Inchoo/extension/2513/featured-productsAdds some exciting customizable features to the products grid like: Full Product Search, Grid Row Highlighter,Catalog Grid Thumbnails/Images,Mass Product Refresh etc.http://www.magentocommerce.com/magento-connect/WDCA/extension/748/enhanced-product-gridInchoo has officially become a Magento Professional Partner. With this step, Inchoo joins an international roster of Magento Solution Partners as the first partner in Southeastern Europe.
After two years of dedicating ourselves to a great ecommerce platform that is Magento, it was about time we formalized the relationship.
For those of you who have been following us, this shouldn’t come as a surprise – we’ve passionately worked with all the strengths and weaknesses of Magento from its very beginning, contributing to the community of developers and Magento itself by often sharing some tips and tricks, code snippets and free extensions adding some features to the Community Edition.
When Magento launched the Professional Edition in May, we saw it as a great opportunity to expand our services to small business owners looking for a bespoke ecommerce solution.
The Professional Edition comes with some new features that are not included out of the box with the Community Edition:
You can check the Professional Edition demo store here or go behind the scenes in the admin section.
We look forward to embarking on new adventures with Magento.
We’ve covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn’t required that we make such drastic changes with this technique though, so in this tutorial we’ll go over a design tweak with a smaller scope. We’ll also cover the syntax for using media queries within a single stylesheet and more examples of that.
The CSS media query syntax for calling an external stylesheet is like this:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
You may be familiar with the media attribute, normally being “screen” or “print” or even a comma separated list, like “screen, projection”. The media attribute can be brought directly inside a CSS file, like this:
@media screen {
body {
width: 75%;
}
}
@media print {
body {
width: 100%;
}
}Likewise, you can use more advanced CSS media queries like:
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
Let’s say we have a fluid width design where the sidebar is 35% of the width of the page. That means depending on the width of the browser window, that sidebar could be quite narrow or quite wide, that’s just the nature of fluid width designs. With CSS media queries, we can say “if the browser is really narrow, do this, if it’s wider, do this, if it’s really wide, do this.” Note that measuring width isn’t the only thing media queries can do, it’s just a particularly practical example.
In our example sidebar, we are going have a list of names of the Super Team which function as email links. The HTML is fairly simple:
<ul id="nav">
<li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
<li><a data-email="isuredo@likeher.com" href="mailto:isuredo@likeher.com">Elisabeth Moss</a></li>
<li><a data-email="marry@me.com" href="mailto:marry@me.com">Amanda Righetti</a></li>
</ul>It’s just a list of links. The href attribute is a mailto: link. The only thing you might find unusual is the data-email attribute. In HTML5, you can use attributes prefixed with data- to store information, and it’s perfectly valid. We are going to want to use that data later, but the href value isn’t quite what we need having that mailto: link, hence the data attribute.
The default styling for the list will be this:
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
At narrow browser window widths, the default styling applies. Just a list of links.
When the browser gets a bit wider, in our example between 520 and 699px, we’re going to use that extra space that opens up in the sidebar to apply an email icon to each list item.
@media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Icons are applied to the list items as we know that we have room for them now.
As we get wider, from 700 to 1000px, we’ll use the extra space again to preface the links with the text “Email: ” (using CSS Content) instead of just the icon.
@media all and (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
Using CSS content / psuedo element, we can preface the link with descriptive text without altering the content in the HTML
Wider still, at browser window widths above 1001px, we’ll literally append the email address to the links. This is where that HTML5 data attribute comes in.
@media all and (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
Again the content is adjusted, the email is added as a pseduo element purely with CSS.
At really wide widths, above 1151px, we will again add the icon as we used before. The cool part here is that we don’t have to write an additional media query segment, we can just append an additional media query to our already existing one using a comma (behaves like OR operator) on the medium-width one we already wrote.
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
At the widest, we can use all the flair we have available.
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
@media all and (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
@media all and (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
The browser support for media queries is surprisingly decent. For the queries in this particular demo (utilizing min and max widths), current version of Firefox, Safari (including Mobile), Chrome, and Opera are all supporting it. Internet Explorer 9 will be supporting it, but 8 and below do not. If I wanted to deliver the best possible experience in IE 8 and below, I’d either fake it with JavaScript like I did in this article, or use an IE specific stylesheet and style it in the same style as the most common browser width according to analytics.
Note that milage may vary on individual types of queries. For example, the iPhone supports the width queries but does not support the orientation queries. The iPad supports both.
Measuring width is a nice practical example of media queries, but it isn’t the only thing available. Below are some more of them (not a comprehensive list). The spec lists lots more.
HTML4 had these media types, which are all still valid: aural, braille, handheld, print, projection, screen, tty, and tv. HTML5 may include more as it needs them. The spec includes ‘3d-glasses’, which is awesome. The all keyword will target all types.
@media screen, projection { ... }You get height and width, which query against the current browser window height and width. You could use them as-is, but that would probably be rare. Both of them accept min/max prefixes, so more commonly you’d used them as min-width, max-width, min-height, max-height.
There is also device-width and device-height, which also provide min-device-width, max-device-width, min-device-height, and max-device-height.
@media (min-device-width: 640px) { ... }You can query against the aspect ratio of the screen as well with device-aspect-ratio.
@media screen and (device-aspect-ratio: 16/9) { ... }Or if the screen is in portrait (height larger than width) or landscape (width larger than height) mode.
@media (orientation:portrait) { ... }You can query on if the screen is in color or not and details about that.
@media (color) { /* Screen is in color */ }
@media (min-color-index: 256) { /* Screen has at least 256 colors */ }
@media (monochrome) { /* Screen is monochrome */ }This has been a hot topic lately. You can hear some smart people talk about it on The Big Web Show. Here are some other cool uses of it going around recently:
Here is small example which will explain how to create a simple Magento payment module.
I hope that you know how to create magento module and I will skip this step.
First of all, you have to create in etc folder config.xml file with next content:
< ?xml version="1.0" encoding="UTF-8"?> <config> <modules> <inchoo_mycheckout> <version>1.0.0</version> </inchoo_mycheckout> </modules> <global> <models> <mycheckout> <class>Inchoo_Mycheckout_Model</class> </mycheckout> </models> <helpers> <mycheckout> <class>Inchoo_Mycheckout_Helper</class> </mycheckout> </helpers> <blocks> <mycheckout> <class>Inchoo_Mycheckout_Block</class> </mycheckout> </blocks> </global> <default> <payment> <mycheckout> <model>mycheckout/standard</model>// very important thing, here you select the model for your payment method <active>1</active> <order_status>pending</order_status> <title>CUSTOM CARD</title> <payment_action>sale</payment_action> <submit_url>https://someurl.com</submit_url> <merchant_id>Insert merchant id</merchant_id> <allowspecific>0</allowspecific> <sort_order>1</sort_order> </mycheckout> </payment> </default> <frontend> <routers> <mycheckout> <use>standard</use> <args> <module>Inchoo_Mycheckout</module> <frontname>customcard</frontname> </args> </mycheckout> </routers> </frontend> </config>
Next step: you have to create system.xml file also in etc folder with next content:
< ?xml version="1.0"?> <config> <sections> <payment> <groups> <mycheckout translate="label comment" module="paypal"> <label>Custom CARD MyCheckOut</label> <frontend_type>text</frontend_type> <sort_order>0</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <fields> <active translate="label"> <label>Enabled</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_yesno</source_model> <sort_order>10</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </active> <title translate="label"> <label>Title</label> <frontend_type>text</frontend_type> <sort_order>20</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </title> <order_status translate="label"> <label>New Order Status</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_order_status</source_model> <sort_order>50</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </order_status> <submit_url> <label>Gateway URL</label> <frontend_type>text</frontend_type> <sort_order>58</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </submit_url> <merchant_id> <label>Merchant ID</label> <frontend_type>text</frontend_type> <sort_order>59</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </merchant_id> <allowspecific translate="label"> <label>Payment Applicable From</label> <frontend_type>select</frontend_type> <sort_order>60</sort_order> <source_model>adminhtml/system_config_source_payment_allspecificcountries</source_model> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </allowspecific> <specificcountry translate="label"> <label>Countries Payment Applicable From</label> <frontend_type>multiselect</frontend_type> <sort_order>70</sort_order> <source_model>adminhtml/system_config_source_country</source_model> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> <depends><allowspecific>1</allowspecific></depends> </specificcountry> <sort_order translate="label"> <label>Sort Order</label> <frontend_type>text</frontend_type> </sort_order><sort_order>100</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>0</show_in_store> </fields> </mycheckout> </groups> </payment> </sections> </config>
In this system.xml file we create options for this payment method. These options you will see in admin section under payment method, also if you need additional options you can add them.
Last step: is creating model in folder model with file-name standard.php. This model is defined in config.xml file. Here is example:
< ?php
class Inchoo_Mycheckout_Model_Standard extends Mage_Payment_Model_Method_Abstract
{
protected $_code = 'mycheckout';
protected $_isInitializeNeeded = true;
protected $_canUseInternal = false;
protected $_canUseForMultishipping = false;
/**
* Return Order place redirect url
*
* @return string
*/
public function getOrderPlaceRedirectUrl()
{
//when you click on place order you will be redirected on this url, if you don't want this action remove this method
return Mage::getUrl('customcard/standard/redirect', array('_secure' => true));
}
}
If your method redirect when customer click on checkout button place order you have to create (customcard/standard/redirect) standard controller with method redirectAction and etc. This page will create html form which will send POST data to payment gateway. All data which you need for creating this form you can get from Magento model $session = Mage::getSingleton(‘checkout/session’); and etc.
When you finish everything you will get next option in admin section:
I hope that will be helpful 
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like:
.email-address:before {
content: "Email address: ";
}With this CSS in place, we could have this HTML:
<ul>
<li class="email-address">chriscoyier@gmail.com</li>
</ul>And the output would be like:
• Email address: chriscoyier@gmail.com
Maybe that example doesn’t get you drooling, but pseduo element content can be quite useful and do cool things. Let’s go through some ideas and considerations.
The first concern might be that of a separation-between-content-and-design purist. You are literally adding text content to the page with CSS content, and that breaks that barrier. The spec is done and the idea implemented, but that doesn’t mean it’s not worth discussing. If you have an opinion about CSS content and its use, please share in the comments.
I think it’s awesome and perfectly suited for CSS. Consider the example above where we preface all elements with a class of email-address with the text “Email address: “. That is a design decision, where for the clarity of content, it was decided that having that text before email addresses made the content more clear. Perhaps in a redesign of the site, there was less room where those email addresses are being displayed and it was decided that instead of prefacing them with text, a small icon would be used instead. This fits with the idea of CSS, in that the HTML content doesn’t need to change at all, this change could be solely accomplished with CSS.
I’m going to publish an article tomorrow with this kind of idea.
If you need to use a special character in the CSS content, it’s kinda weird. How I do it is I figure out what the ASCII number is for the symbol. This chart of glyphs is handy. So on that chart the copyright © symbol is © – so the ASCII number is 169. Then I drop that number in the Entity Conversion Calculator which will convert it into what you need for CSS.
Not pretty, but it works.
Here’s some random useful ones:
\2018 – Left Single Smart Quote
\2019 – Right Single Smart Quote
\00A9 – Copyright
\2713 – Checkmark
\2192 – Right arrow
\2190 – Left arrow
Mark your visited links with checkmarks:
#main-content a:visited:before {
content: "\2713 ";
}You are able to insert attributes of the elements you are targeting as content. For example, an anchor link might have a title attribute:
<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>You can access that title attribute from the content property like:
a:before {
content: attr(title) ": ";
}Any attribute can be targeted as such, in the format attr(name-of-attribute). If you’d like to insert something into the HTML to use for a CSS content purpose (but nothing else), you could use the new data- attribute prefix in HTML5.
Tooltips for links based on the title attribute:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}
Now this example uses the title attribute, and other examples like this that you find around the web also use the title attribute. It’s probably the correct one to use. However, do note that browsers have their own tooltip popups that they do. When that comes up, it will cover this, and look weird. I tried to take a screenshot of the issue but there it wasn’t letting me for some reason. There is no way to suppress this, other than just not using the title attribute. HTML5 data- attributes, again, could be useful here.
I had an idea I wanted to try where you would have a vertical list of names, and as you moused over them, their email addresses would slide out from underneath them. To have the HTML be as clean as possible, I thought it would be cool to use the an :after pseudo element and a -webkit-transition to make it happen. But, alas, you cannot animate or transition a pseudo element.
Using the :after/content method, I got an example working it just doesn’t slide out like I thought would be cool. Using <span>s I got the idea working, also in the demo page.
@media print {
#main-content a[href]:after { " (" attr(href) ") "; }
}All the major browsers (Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and Internet Explorer 8+) support CSS content with the :after/:before pseudo elements and the spec is in it’s full candidate recommendation status.
Regarding accessibility, I’m just not 100% sure what the situation was. I was trying to use VoiceOver with Safari on my Mac with the email popout links demo. For best accessibility, I would think the goal would be to get it to read the whole text, including the CSS content being added. I had trouble getting it to do that, but I thought I did get it to do it once somehow. I was really bad at using VoiceOver and found it frustrating to get it to do what I was trying to do even at the most basic levels. If someone knows more about accessibility as it relates to CSS content, I’m sure we’d all love to know more.
Today is America’s birthday and also (more importantly) the birthday of CSS-Tricks, which turns 3 today. If it was a human being, that means it would be starting to string together sentences of five words or more, socializing well with others, and not wetting himself most nights. I guess it still has some work to do.
Last year I did a giveaway. Sorry to disappoint but this kinda sneaked up on me and I didn’t prepare anything. Besides, I think comment-to-win style giveaways are a little hokey. I have some things in the early stages of planning that will be far more interesting opportunities to win stuff.
I’d like to share some milestones with you. RSS feed subscribers are at a solid WTF.
What?
I’m sure there are a lot though, so thanks to everyone for caring enough about this site to subscribe. The screencasts have been still trending downwards. I think I’m still going to try and make 100 though, just because that is a cool round number.
I’d share some other analytic data with you, but honestly, there isn’t all that much interesting to share. People come from all over the world. India is second behind the U.S. More than half the visitors use Firefox. Chrome is bigger than Safari. I serve about 2 million pageviews a month. I kinda don’t care that much about analytics. If you have a web app, you should care deeply about it. If you have a blog, you should close your Google Analytics tab and write.
I’m fairly happy with the page load speed (caching and the CDN help) but I gotta do something about the method I use to grab my latest Twitter update as that’s usually the slowest thing which is dumb for something so trivial.
We’re now in full swing of Summer, and I’m basically as busy as I’ve ever been. Fair warning, things might slow down a little around here for a little bit. Never fear though, this site is a part of me, and will be alive and kicking as long as I am. The current design of this site has lasted quite a while and I’m starting to get the re-align bug a little bit again. I wouldn’t mess with the design just to mess with it, I actually have some new ideas, so I wouldn’t be surprised if that dropped maybe in early Fall or so.
For this lovely long weekend some of us have, you should go see The Last Airbender despite the terrible reviews. My uncle made the stone weaponry for the film. Being a fan of the Nickelodean kid’s show really helped me like the movie I think, it might be confusing otherwise.
Lastly and most importantly, THANK YOU for being a part of this “web design community.”
I first knew of Jeff through his website Perishable Press, which has long been a fantastic web design resource blog focusing on CSS, WordPress, and a lot of hard-to-find-elsewhere .htaccess stuff along with a good amount of Jeff’s personality (which I consider to be a prerequisite of any good blog) . As you may know, Jeff and I co-author Digging Into WordPress together, both the book and the blog. Jeff is really a get-things-done kinda guy and I’ve always admired that about him. I thought I’d get him to do an interview where I could ask him some things I’d never asked him before.
Jeff: That particular post was one of my lazy “note-dumps” with a quick intro and closing slapped on. Typically, I will take a post from that point and continue to flesh it out with as much relevant information as possible. This usually results in longer articles that cover more ground and/or go into greater depth. It’s always a matter of addressing the target audience where they’re at, which is generally an educated guess. How much do you assume your readers already know? Do you begin with how to turn on the computer and work your way to the point, or just assume they’re exactly where you’re at and deliver the goods? I think a lot of my articles try too hard at catering to the least common denominator when they would probably be just as useful if I had cut directly to the point. I think finding the balance is key to writing good tutorials.
I do get obsessive about web-design stuff and writing about it. It’s a rush to see work come to fruition, and I like to make sure that I’m not missing anything along the way. All the details need to be accounted for. All the nuances need explained. I think maybe years in school have warped my writing style to sort of echo that academic textbook voice. I personally find that style easier to digest when dealing with lots of material, but for anything else it’s probably overkill. When I first got into writing web-design tutorials/articles five years ago, I was literally writing for myself, entirely for the sake of learning. The more information I could lookup and include in an article the better. These days, I enjoy this sort of “encyclopedic” approach when it’s useful, but continue to try to “tone it down” and “loosen up” as much as possible. I still associate the idea of “quality” with well-produced, well-researched content, but don’t worry as much about being so comprehensive with everything. There’s just not enough time to keep up when you’re working on that level.
Jeff: I think it depends on the topic. When I write about “blogging” or “social media” for example, I don’t mess around explaining and defining everything – I just jump right in. Writing about specific code examples or techniques is the same way — you just have to assume that, if someone is checking things out on that level, they’re probably savvy with the basics. On the other hand, when you’re exploring broader topics, such as how to secure a website, readers of all levels may be reading, so it’s more important to explain everything. Also important when writing is the idea of “breadth” vs “depth.” Stuff can be very broad in scope and deep in explanation and nobody will read it because it just looks scary, or it can be so pointed and shallow that people will dismiss it outright as spam. Personally I enjoy writing from the other two perspectives: “broad and shallow” or “focused and deep.” Either of these approaches tend to make for great articles. For example, I recently did a post that covers 76 WordPress techniques that is extremely popular. Nothing too deep there, but it sure covers a lot of stuff. You see amazing content like this from Smashing Magazine, Six Revisions, and Nettuts all the time. Likewise, there are posts that fall into the “focused and deep” category. For me, that’s where the quality is — a well-focused article that deeply explores its topic. That’s the kinda stuff that I like to read, so that’s the kinda stuff I try to write.
As for tech books, I love ‘em and think they’re useful, but they all seem to follow the same general format: boring intro, cover the basics, slog through some theory and then spit out some examples. And it’s always written in that stiff “academic-textbook” voice that puts so many readers to sleep. These books can be awesome learning tools, but there’s no reason they all need to be so plain, boring and predictable. I think this is one of the reasons why we chose to self-publish and go the DIY route for Digging into WordPress. If you look at the difference between what we’ve created and how it would’ve been with a major publisher, you totally get why we made that decision. Whether or not taking risks, being creative, and changing things is right for other tech books depends on too many factors to even think about.
Jeff: Haha, yes compared to your single-line style of writing CSS, I can see how organizing by line-length would seem tedious. But for me, writing my CSS that way makes it easier on the eye and easier to maintain. Everything is so neat and organized that if something — even the smallest little thing — is out of place, it really stands out. A quick scan through one of my stylesheets and you know immediately whether or not it’s complete or needs work in certain places. But not just for CSS, I get obsessive about any code that I’m working with, whether it’s HTML, PHP, JavaScript, or even HTAccess. I’m just an extremely organized person, both online and off. It isn’t always beneficial in the “real” world, but when it comes to working with code, pixels, and writing, strong organizational skills make it possible to get more done in less time. I think organization is fundamental to how the digital world operates. Essentially, the Web is nothing more than a complex organization of binary data. I think that the more organized you are, the closer you get to the true “essence” of the Web.
I have to admit though, working with you on the DiW site has given me a new appreciation for writing out CSS declaration blocks in single line format. It does seem a little quicker when scrolling through longer files, and so I have been integrating single-line declarations into my own, line-length-organized stylesheets. Good examples for when a single-line declaration is going to work better than the separate-line approach include simply styled elements such as strong, em, code, a and so on. I think punctuating stylesheets with different coding styles improves readability and maintainability. Instead of just miles of similarly formatted code, you get these nice breaks that help to divide the document into readable/scannable sections.
Jeff: Ah yes, the “day job.” When I first jumped into web development around six years ago, I did it sort of “on the side” on a part-time basis. Back then, I needed a day job to pay the bills while I learned the ropes and got things up and running. Since then, I have established a small design company called Monzilla Media, where I do web development, graphic design, and other creative work. Fortunately, things are at the point now where I could probably survive without my day job, but I guess I’ve just been too lazy or paranoid to let it go. Having that regular, full-time job provides health insurance for my family and provides a little extra “cushion” each month. But when the time is right, I’m looking forward to moving on and focusing entirely on web design, writing, and other creative pursuits.
Future plans include anything and everything. For now, I am just going with the flow and working as much as possible. Eventually I would like to focus more on writing, and maybe even teach a few classes and try to help some folks here in the local community. But that’s far-future thinking. Until then, it’s all about doing my best online and enjoying life along the way.
Jeff: Great question. I Mostly just take it day by day, but I do some planning as well. With the dynamic nature of the Web and working online, most of what I do is either spontaneous or reactionary, depending on the situation. I just sort of know what to do intuitively without too much explicit planning. I know what I want to accomplish, and just sort of direct my daily activities toward my long-term goals. The book is a great example. I don’t recall sitting down and saying anything like, “okay, now let’s figure out a plan for getting this done.” Instead, the goal of completing a WordPress book was there, and everything else — writing, editing, design, printing, etc. — just got done during the course of things. If one of us had wanted to try to schedule and plan everything, much time would have been wasted. By keeping things fluid and flexible, we made a better book in half the time.
For me, the flexibility of flying on “auto-pilot” enables a much greater degree of multitasking and scheduling flexibility. I hate planners. I have never used any calendar or scheduling program. It would just take too much time to try and figure everything out and fit everything in. Rather, I get things done by keeping everything as wide open as possible. Along the way, if I have an appointment or deadline, I will add it to a sticky note and then work everything else around those static things that cannot be changed. This enables me to flow everything else on the fly, as needed, according to opportunity, and as desired. Beyond staying fluid and flexible with my time, I also like to take care of all the “little things” and miscellaneous tasks and errands before doing anything serious. I find that it is much easier to concentrate on design, writing and coding when I know that all the little stuff is taken care of. A good day is when I get up early, take care of all the daily tasks by 9:00am and then spend the rest of the day doing what I truly enjoy: well-focused web design and content creation.
I guess if you are doing what you love, you just do it. When I get to the point where I am constantly scheduling stuff and trying to figure out how to get everything done, it’s time to switch gears and pursue a different passion.
Thank you for the interview! :)
Big thanks to Jeff for taking the time for the interview. He’s also on Twitter @perishable.