On this site, we used to ban IP’s in the forums all the time (the new forums have been much better in spam prevention). I also sometimes ban IPs from inside WordPress. There is a setting to “blacklist” IP’s in the admin area on the Settings > Discussion page. There are few in there from spammers, and a variety of people I thought just shouldn’t come ’round here no more. In looking at this list now, some of these IP’s have been in here for years. Is that acceptable?

At the time of blockage, and IP address might belong to Danny Doucher, but after sometime, the IP address might be reassigned and now belong to Susie Supercool. I certainly wouldn’t want to punish Susie for Danny’s crimes.

So, how long should we ban IP’s for? Wikipedia, who certainly needs to deal with IP blocking on a regular basis, has a few choice words:

Most IP addresses should not be blocked more than a few hours, since the malicious user will probably move on by the time the block expires.

IP addresses should almost never be indefinitely blocked. Many IP addresses are dynamically assigned and change frequently from one person to the next, and even static IP addresses are periodically re-assigned or have different users. In cases of long-term vandalism from an IP address, consider blocks over a period of months or years instead. Long-term blocks should never be used for isolated incidents, regardless of the nature of their policy violation.

I can get on board with that. IP blocks should only last a limited time, since all IPs eventually change. Most blocks should be short, but if you experience long-term bad activity, make the ban longer. In the case of this site and WordPress, the Discussion Settings also offer a Moderation list, so you don’t actually have straight blacklist IP’s at all if you don’t want, and even if you do, you can move them from the blacklist to the moderation list after a while and be fine.

Anyone else have any theories or research to share?

They make my button maker look dull and flat.

Direct Link to Article — Permalink

I saw that Andy Clarke had added a fluid width YouTube video to a particular page on one of his sites. His code relies upon a wrapping div and then images and video within this wrapper are set to the width of the wrapper:

.img img, .img object, img embed {
   width: 100%;
}

I love the idea. It’s essentially the classic technique for dealing with images in fluid width designs. Andy’s code sets max-width to 100% here too, but since the width is already 100% that doesn’t matter. Max-width works best by itself. So it can scale down images which could be larger than the wrapper, but not scale them up if they are smaller. For video, scaling up is probably fine. I’d suggest this change:

.img img {
   max-width: 100%;
}
.img object, .img embed {
   width: 100%;
}

That will scales images only down if needed, and videos up or down.

Keeping Aspect Ratios

With images, as long as there isn’t an inline “height” setting, the aspect radio will be maintained in a fluid width environment even when you only alter the width. With video (flash or otherwise) this is not the case. If we want to maintain aspect ratio while the video grows and shrinks in width, we’re going to need JavaScript.

Example YouTube Provided Code:

<object width="640" height="385">
	<param name="movie" value="http://www.youtube.com/v/EWsWFjO9MlE?fs=1&amp;hl=en_US"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>

	<embed src="http://www.youtube.com/v/EWsWFjO9MlE?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

This is the plan:

1. Find original aspect ratio by dividing original height by width
2. When window is resized…
3. Measure width of parent
4. Set width of video to width of parent
5. Set height of video to width multiplied by aspect ratio
6. Trigger a fake resize on pageload to ensure video fits right away

Here, we’re using jQuery. Take note that we are target both the class name of .youtube and the embed within that class name. This is presupposing that we are adding a classname of .youtube to the object in the copy-and-paste code YouTube provides. Feel free to adjust the selectors as you wish. You may wish to target all objects themselves, or use a special wrapper. Here we’re using the #page-wrap of all the content to measure width.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script>
	var $origVideo = $(".youtube, .youtube embed");
	var aspectRatio = $origVideo.attr("height") / $origVideo.attr("width");

	$(window).resize(function() {
		var wrapWidth = $("#page-wrap").width();
		$origVideo
			.width(wrapWidth)
			.height(wrapWidth * aspectRatio);
	}).trigger("resize");
</script>

Also of note here is that we are targeting the <object>s and the <embed>s within them with this JavaScript. Targeting the objects alone will work in modern browsers. Including the embed is fine for modern browsers and makes it work with Internet Explorer as well.

Bonus Trick

You can get rounded corners on your YouTube videos! The only luck I’ve had so far is in Google Chrome (7.0.503.0 dev).

1. Add this param to your embed (within the object) <embed wmode="opaque" ...
2. Then you can add border radius to the object

   object {
   	border-radius: 10px;
   }

Credit to ubahnverleih on Forrst for the idea.

Demo & Download

View Demo   Download Files

UR DOIN IT WRG

This worked in all browsers I tried, including Internet Explorer (tested 7 & 8), but not Opera. The best I can tell is that Opera respects in the inline width and height attributes over those set via inline styling. If anyone knows of a way to fix that, or if you think my whole method here is stupid and you have something better, please let me know and I’ll update things here.

Direct Link to Article — Permalink

Today is just such an event. WordPress 3.0 has been out for a while now, and so it’s time for our second major update. This is the biggest one yet. We’ve combed through the entire book updating anything that was out of date or stale. We’ve also added a new Chapter 12, which is specific to the 3.0 update. The book is also sportin a brand new front and back cover!

If you already own our book in any form, this is old news, because we’ve already sent out an update email containing your new download. If you didn’t get it (spam filters happen), email sales@digwp.com with your original receipt and we’ll make sure you get it.

If you are considering it, but want to know more, you should check out the PDF sample of the book.

Regarding print version of the book, yes, they are coming back! It’s going to take us about a month to have them ready. If you’d rather not wait, you can buy the PDF now, and when the print version is ready forward us your receipt. We’ll send you a coupon code for exactly what you paid for the PDF to use in purchasing the print version. I’m sorry I spoke to soon on this issue. We are NOT offering any discounts on the printed version.

Anyway, as I already knew the principals of MVC (Model – View – Controller) architecture, and had fairly good knowledge of object orientated PHP, all I needed was the basic file/folder structure for my custom module.

Just a small notice before I start: there are numerous tutorials / blog posts that explain the contents of those files, and therefore I won’t go into that.

So, without any complications, I give you just that :

\app\code\local\MyNamespace

//If you're new to OOP, take a look here: http://www.php.net/manual/en/language.namespaces.rationale.php

\app\code\local\MyNamespace\Appname

//Name of new custom module - try to keep at least first letter capital, or there WILL BE truble with Magento's understanding

\app\code\local\MyNamespace\Appname\Block

//In classic MVC architecture, this represents View part of MVC

\app\code\local\MyNamespace\Appname\controllers

//This is fairly easy to understand, if not, have fun: http://en.wikipedia.org/wiki/Model%E2%80%93View%E2%80%93Controller

\app\code\local\MyNamespace\Appname \etc

//Contains the most significant part in Magento's MVC architecture - the xml field that will connect all things together

\app\code\local\MyNamespace\Appname\Helper

//Intended for files that contain repeatable routines or simple procedural methods

\app\code\local\MyNamespace\Appname\Model

//Same thing as for controller, take a look at the link above

\app\code\local\MyNamespace\Appname\sql

//This was interesting thing to find out what's it for, it's to define custom database tables and process any upgrades to your extension.

\etc\modules

//Contains all Modules included in Magento - here's where it all really begins for our module

And I just wanted to give you an idea of how things get connected here.

1. Magento takes all xml files from “etc/modules/” to know which modules are there, and where are they located
2. By that location (specified in xml file at “etc/modules/”) Magento includes xml file from “/app/code/local/MyNamespace/Appname/etc” so that it can connect all other things together
3. The IndexController.php is the next one that’s included, and from there, it’s basic MVC (with slight variations)

I will provide 2 great tutorials that helped me a lot: ActiveCodeline tutorial and Magento Commerce tutorial

Well, I really hope this will help someone, because I know it would help me if I found it…

There is no shortage of documentation on WordPress’ famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding “The Loop” than there should be. In this screencast I try and explain what it is, how it works, related parts, and then demonstrate some alterations and various tricks. Things like running multiple loops, writing your own custom queries, and handling pagination with your own custom loops.

View Screencast

The red lines indicate the column as rendered with WebKit. The background shades of gray are accurate placement of those columns in percentage widths.

It’s percentages in general that seem to be the issue. I haven’t been able to dig up a ton of information on it, although I do seem to remember reading something about it quite a while ago. I think it’s related to how subpixel values are calculated. For example, if a container is 657px wide currently, and has four columns at 25% each, they would be 164.25px each wide, and WebKit doesn’t handle that well (rounding issues?) Other browsers handle the “subpixel” value OK.

Firefox, IE, and Opera are fine.

Thanks to Nicolas Gallagher for pointing this out to me. If I’m way behind the times on this, feel free to yell at me, but throw me some links and information so I can update this post with the most accurate information I can. This link seems to indicate the issue has been around a while.

Remember this is only really an issue if you are doing something like shown in these examples with solid color columns. If you didn’t have any visual separators, it might not be a big deal, just a slight cross browser difference very few people would ever notice.

Direct Link to Article — Permalink

You have a website with 100 pages on it. All 100 pages use the same style.css file. You’d like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. You don’t need to edit each of those pages individually. That’s the core benefit behind CSS: abstracting the design away from the markup.

Now you want to make another change to those 100 pages. You’d like to include the publication date underneath the title of each of the pages. That is something you’ll need to edit the HTML to do. If those 100 pages are based on a template, as they would be when using a CMS (Content Management System), you can make one adjustment to the template file and the date adjustment will be reflected across all 100 pages. That’s the core benefit behind a CMS: abstracting the content away from the markup.

The point is that once a website is any more than one page, there are going to be shared resources and it’s time to use a CMS. Just as the zen garden taught us that using CSS is vital to allow design freedom and make redesigns easier, the ultimate freedom comes from also using a CMS where we also aren’t locked to any specific HTML. HTML isn’t for content these days, it’s for describing content. Databases are for content.

I have made this scientific chart to drive home the awesomeness of this all.

<input type=search name=s>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.

A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.

The Styling Limitations

WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit “no matter what”, as in, you can’t even fight against it with !important rules.

input[type=search] {
	padding: 30px;            /* Overridden by padding: 1px; */
	font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
	border: 5px solid black;  /* Overridden by border: 2px inset; */
	background: red;          /* Overridden by background-color: white; */
	line-height: 3;           /* Irrelevant, I guess */
}

In other words, be extremely cautious about using any of those CSS properties on a search input unless you are OK with the search input looking very different in other browsers.

Allowed styling

The following CSS works as expected. The last three, in my opinion, should probably locked in like the properties above as styling those properties almost always looks worse than if you didn’t.

input[type=search] {
	color: red;
	text-align: right;
	cursor: pointer;
	display: block;
	width: 100%;
	letter-spacing: 4px;
	text-shadow: 0 0 2px black;
	word-spacing: 20px;
}

Busted styling

Be careful not to use text-indent on search inputs. The results are quite weird an inconsistent. Here is one example:

Sometimes the text is below like this. Sometimes it’s not visible at all. It appears to be related to elements around it as well as how much indent it has (low values sometimes work fine).

Show Previous Searches

This isn’t documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results. (Thanks to Mike Taylor)

<input type=search results=5 name=s>

The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.

I really like the little magnifying glass. It drive home the searchyness of the field, but I’m calling the functionality itself rather janky. On a page reload recent searches clears, so that dropdown will almost always say “No recent searches”, unless you have implemented some kind of Ajax search (and even that I haven’t really tested).

Size Restrictions

There are only three different “sizes” that WebKit search inputs can be, and it is determined by the font-size you declare on them.

Small, Medium, and Large. That’s all you get!

This small, medium, and large business can be extremely frustrating, as even setting identical font values, at the minimum for a “bump”, you’ll see font size difference across browsers.

Identical font sizings not idential.

Notice the (x) on the right hand side of the search inputs on the WebKit side. That is an additional feature of these search inputs in WebKit. If the input has any value (not a placeholder, a real value) the (x) will be present which is a functional UI control for clearing the input.

Speaking of placeholder text, search inputs are a great candiate for that.

<input type=search results=5 placeholder=Search... name=s>

And in case light gray isn’t your cup of tea, you can style the placeholder text:

::-webkit-input-placeholder {
        color: orangered;
}

View Demo

Direct Link to Article — Permalink

Direct Link to Article — Permalink

Direct Link to Article — Permalink

Direct Link to Article — Permalink

When designing something that you are reasonably certain the user is willing (or forced) to invest time in learning to use proficiently, is it beneficial to intentionally make some tasks just slightly more difficult than they could be?

Not incredibly hard, not convoluted, not outright counter-intuitive. But perhaps making some information a little more buried, or placing an action in a slightly strange place. If the user is really looking, they’ll be able to find it.

Frustrating a user is never good, doubly so when you have competition a few clicks away. But forcing a user to do a little discovery and learn the specifics of this product/application/website might make them feel closer to it or more attached to it because they’ve already learned it.

I’m not advocating this, I’m just throwing it out there because I think it’s interesting. It’s certainly no excuse for bad design.

• 39% – Select a user and then click the Update button.
• 37% – Select a user and then click Update.
• 8% – Select a user and Update.
• 7% – Select a user and then press the Update button.
• 5% – Select a user and then press Update.
• 3% – Select a user and then choose Update.
• 1% – Select a user and then choose the Update button.

Clearly, the action verb of “click” is the most popular. I don’t think that’s much of a surprise as that verb has been around and working for us for a long time. In the opening article, I suggested that “click” might be misleading since links and buttons can be used without having to use a mouse. Several people chimed in that, while that is true, those people still know what “click” means and can apply it to themselves. “Choose” was an device-agnostic alternative, but the least popular in this poll. “Press” only slightly more popular alternative. Surprisingly, the third most popular was to use the action verb from the button itself (since “Update” is already a verb).

New poll soon.

Direct Link to Article — Permalink

And they are back! Might be a bug here and there. Definitely let me know if you see one.

Firefox, Chrome, & Safari

When I say I’m a browser jumper, I really only mean those three. I’d love for Opera to join the party. It’s nice and fast. Its Dragonfly developer tool is fully capable, but it doesn’t support two of my crutch tools: XMarks and 1Password. When that day comes, I’ll switch to it at least for a while. I feel like for obvious reasons I don’t use Internet Explorer. It’s just not as good of a browser and I’m not willing to use it other than for testing. Not to mention, I’m on a Mac. Although I do test on it, using VMWare Fusion and a bunch of “Snapshots” where I keep Windows XP and Vista in different states of having native versions of IE 6/7/8/9.

The Major Enablers

My browser jumping is largely enabled by a couple of tools that keep the browser environments synced up for me.

Xmarks

If I had to export and import bookmarks every time, I’d probably never switch. I don’t use the bookmarks menu itself much, but I do like having my bookmarks bar consistent in all browsers (and across computers). I keep it pretty curated so if I make a switch, I want to see it in all my browsers across all my computers. XMarks makes that easy, for free.

Mmmm, consistency.

1Password

I was a little late to the game on 1Password, but I’m playing hard now. Why do you need a password tool? I used to think. My browser already remembers my passwords. Yes, most of them do, but not nearly as nicely as 1Password. 1Password keeps all your usernames/passwords in its database, and through browser extensions, allows you to submit them into sites. It makes having multiple logins for the same site much easier. It also deals with auto-filling forms. It also stores your credit cards in your “wallet” making online purchasing way easier. Not to mention other things like your Driver’s License. It’s very handy not to have to go around digging for that when the situation comes up you need to have that information.

The real advantage though, is that it keeps this information synced across browsers and across computers (using Dropbox sync). Change a password in Firefox on your laptop, go home and use Safari on your desktop and you won’t have any problems.

Delicious

I like marking things on Delicious for reading later, further reference, just to share, or whatever. It just bugs me when I’m in an environment where I can mark something I’m looking at in Delicious, so I always look for that ability.

	1Password is full powered in Safari, meaning it can fill and submit forms as well as access all your form prefilling data.
	1Password is equally full powered in Firefox.
	1Password is pretty crippled in Chrome (it’s only alpha), allowing only the submission of logins. It’s better than nothing though, as I wouldn’t be able to use Chrome without it and I love me some Chrome.

Development Tools

One of the things that kept me in Firefox for so long was Firebug. OK, the only thing. Firebug is amazing and I believe is still the best developer tool out there. But now the Web Inspector that comes in both Safari and Chrome is nearly as awesome, functionally. It’s actually much prettier, but I debate a few of the UI decisions. Dragonfly in Opera is also very nice, but as I said, I don’t use Opera much. Now that all these browsers have great Developer Tools, it’s not a major determining factor on which I use.

The original king of dev tools, Firebug.

The Web Inspector is much prettier than Firebug (especially in panels like the Resource panel) and just as powerful as Firebug.

My one big gripe with Web Inspector is the folding areas on the right. If you inspect properties a lot, the Metrics is always buried way down. The tabs of Firebug are much easier.

Browser Notes

Firefox

The URL bar handling in Firefox is my favorite of all browsers. When you start typing, it matches what you’ve typed so far by URL and by page titles, which typically yields really smart and useful results. If you type an incomplete web address, the bar will behave like the “Feelin’ lucky” button in Google, where it will take you to the first result for that search term in Google. For example, typing “firebug” will get you to “http://getfirebug.com”. I use this to lazily get to destinations all the time.

The Firefox URL bar is the most helpful

Other quick notes on Firefox:

• Firebug is still the best dev tool in my opinion. Other people swear by it in combination with the Web Developer Toolbar. I just never got into the WDT thing.
• The Open With add-on is nice for browser jumpers. It provides a contextual menu for opening the page you are currently viewing in other browsers.

  

  This would be a good time to mention Choosy as well. Non-Firefox specific, but allows for browser choice in opening links.

• Multifirefox is a great tool for having around multiple version of Firefox (for testing). Simply download old versions of Firefox and rename the Application file (like “Firefox 2.app”). Then launch this application to start any version of Firefox, and you’ll be able to pick a particular profile and particular version. That way you can keep multiple versions open simultaneously which you cannot otherwise.
• Screengrab is a great extension for Firefox that can take a snap shot of the entire length of a webpage. I haven’t found an alternative (other than Paparazzi, which is super old) in other browsers.
• Firefox has an official Delicious add-on.

Safari

The URL bar handling in Safari is my least favorite of the three. It matches what you start typing by both URL and page title, but the dropdown results are more generic and less helpful than Firefox. Also remember how Firefox allows entering a keyword with the “Feelin Lucky” like results, if you try and put a generic search string in Safari you’ll likely just get an error page.

I feel like Safari should step it up in this department. Although it’s likely just because I’m so used to Firefox.

Other notes about Safari:

• Safari has an annoying default where, when it is the default browser and another application tells it to open a link, it will default to opening in a new window. I doubt very many people prefer that behavior, preferring instead to have new links open in tabs. Thankfully there is a fix for that.
• Viewing source in Safari yields non-highlighted, non-linked, non-line-numbered, lifeless code. You can fix that with the BetterSource extension.
• This is what I use for Delicious in Safari, but there is also a native extension now as well.
• You can re-open a closed tab in Safari with Command-Z, but that re-opened tab does not retain it’s history, which is awful.

Chrome

Noteable about Chrome is that it doesn’t have a separate URL bar and search bar, it is combined. This is clever as a space-saving UI feature, but takes a bit of getting used to. For example, in Firefox or Safari typing “getfirebug” will instantly get you to “http://getfirebug.com”, but Chrome, in seeing that as not a full URL, will do a Google search for it, and require you an additional click to get to where you want to get. I feel like if any browser should have “Feelin’ Lucky” type behavior, it’s Chrome, but I can also understand that without a dedicated search field, this is impossible.

Other notes about Chrome:

• Chrome has very nice View Source
• Chrome has a neat search feature where it shows you the scroll positions of the matches it finds.
  
• There is now an official extension for Delicious in Chrome.
• Chrome shows page titles in the tab, but has no dedicated area at the top to show full page titles, which can feel weird.

Results

Even after typing all that up, I couldn’t pick a winner. I quite like them all. Their little positives and negatives cancel each other out as far as I’m concerned. Noticed I didn’t mention speed. You can feel subtle speed difference between them on different sites but nothing to write home about. I also find that all three of them crash from time to time, and that none at any noticeably higher rate.

Is this what they want?

If we could attend secret strategy meetings for these browser vendors, would we discover that this easy interchangeability is what they were going for? Or would we hear planning for future strategies to differentiate themselves more firmly? We web workers are always fighting for the web to behave the same in all browsers, but do we want that fight to be brought to the browsers UI and functionality themselves?

I really don’t know. In some ways I appreciate how easy it has become to switch around, but at the same time have to wonder what is happening in competition and innovation if the final products have become so similar.

I’m sure you all have favorite browsers, favorite tools, and favorite techniques for browser jumping. Feel free to share!

Direct Link to Article — Permalink

The following is a guest post by r0mk1n. I was able to easily follow along and have the demo app up and running on my machine in just a few minutes. It’s pretty cool how easy it has become to quickly build powerful web applications.

CakePHP is a free, open-source, rapid development framework for PHP. It’s a foundational structure for programmers to create web applications and enables you to work in a structured and rapid manner–without loss of flexibility. In this tutorial we are going to be exploring the benefits of using CakePHP and provide an example project, an Event Manager style application, to help get you started.

CakePHP takes the monotony out of web development. We provide you with all the tools you need to get started coding what you really need to get done: the logic specific to your application. Instead of reinventing the wheel every time you sit down to a new project, check out a copy of CakePHP and get started with the real guts of your application. CakePHP has an active developer team and community, bringing great value to the project. In addition to keeping you from wheel-reinventing, using CakePHP means your application’s core is well tested and is being constantly improved.

Here’s a quick list of features you’ll enjoy when using CakePHP:

• Active, friendly community
• Flexible licensing
• Compatible with versions 4 and 5 of PHP
• Integrated CRUD for database interaction
• Application scaffolding
• Code generation
• MVC (Model, View, Controller) architecture
• Request dispatcher with clean, custom URLs and routes
• Built-in validation
• Fast and flexible templating (PHP syntax, with helpers)
• View Helpers for AJAX, JavaScript, HTML Forms and more
• Email, Cookie, Security, Session, and Request Handling Components
• Flexible ACL (Access Control List)
• Data Sanitization
• Flexible Caching
• Localization
• Works from any web site directory, with little to no Apache configuration involved

Idea

The main idea of our tutorial is to create a simple Events Manager using CakePHP. Our project will:

• Create / Update / Deleting events with or without attached location (This is often called a CRUD style application)
• Create / Update / Delete locations
• Show all events in a list view or calendar view
• Provide an RSS feed for all events

Our project also includes these advanced technical concepts:

• Using 3rd party components (Swift Mailer)
• AJAX functionality (jQuery + CakePHP)
• Custom helpers
• Custom Users access control (based on user role)
• Creating Backend

There are the things you will need for this project to run:

1. Apache web server with enabled mod_rewrite
2. PHP version 5 or higher
3. MySQL
4. SVN client

Project installation

If you wish to work locally, using a tool like MAMP/LAMP/WAMP can be a great way to go. You can make a local development domain and work from there.

Where ever you choose to work, create a folder in your server’s root directory. You may be working locally with a tool like MAMP/WAMP/LAMP, or be working on online developent server. You may name it whatever you like. Navigate to this folder with your shell access and run this command:

svn checkout http://cakephp-tricks.googlecode.com/svn/trunk/ cakephp-tricks-read-only

Creating the Database and SQL Structure

Now you need to create a new database in MySQL. Do that however your web host provides, or locally, you can use a tool like Sequel Pro.

You can name it whatever you like and give it whatever password you would like. Then you’ll need to run this SQL to set up the structure:

CREATE DATABASE `tricks_cake`;

USE `tricks_cake`;

/* Table structure for table `events` */
DROP TABLE IF EXISTS `events`;
CREATE TABLE `events` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `user_id` int(10) unsigned default NULL,
  `location_id` int(10) unsigned default NULL,
  `exp_date` datetime default NULL,
  `title` varchar(255) default '',
  `description` text,
  `url` varchar(255) default '',
  `complete` enum('yes','no') default 'no',
  `created` datetime default NULL,
  `modified` datetime default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

/* Table structure for table `locations` */
DROP TABLE IF EXISTS `locations`;
CREATE TABLE `locations` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `user_id` int(10) unsigned default NULL,
  `title` varchar(255) default '',
  `city` varchar(50) default '',
  `state` varchar(2) default '',
  `zip` int(10) unsigned default NULL,
  `address1` varchar(255) default '',
  `address2` varchar(255) default '',
  `created` datetime default NULL,
  `modified` datetime default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

/* Table structure for table `users` */
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `email` varchar(50) default '',
  `pass` varchar(50) default '',
  `enabled` enum('yes','no') default 'yes',
  `activated` enum('yes','no') default 'no',
  `ac_code` varchar(32) default '',
  `role` enum('admin','user') default 'user',
  `created` datetime default NULL,
  `modified` datetime default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

This SQL is also located in the project at /app/config/schema/structure.sql

Setting up the Project Files

Now that we have our CakePHP project installed and set up with our server environment, let’s take a look into the code. We’ll need to make some changes to the configuration files.

core.php

This is the main configuration file. You’ll need rename or copy the default configuration file (located at /app/config/core.php.default) with the name core.php, in same folder. Next, you need to change some custom settings.

The following lines are to be adjusted in the code already in that file, and help us to send email from the application (needed for sending new user confirmation emails)

// SMTP
    Configure::write( 'smtp_type', 'tls' );
    Configure::write( 'smtp_timeout', 60 );
    Configure::write( 'smtp_host', 'smtp.gmail.com' );
    Configure::write( 'smtp_port', 465 );
    Configure::write( 'smtp_user', 'tricks.cake@gmail.com' );
    Configure::write( 'smtp_password', '' );
    Configure::write( 'smtp_encryption', 'ENC_SSL' );
    Configure::write( 'smtp_mail_from_name', 'noreply' );
    Configure::write( 'smtp_mail_from_addr', 'tricks.cake@gmail.com' );

The values above are for a test/junk GMail account we created just for this. If you planning to send emails from your own Google account, you need to change 3 variables: smtp_user, smtp_password and smtp_mail_from_addr

Now change site_name of your project to the URL it resides on:

// globsl
    Configure::write( 'site_name', 'learning-cakephp.dev' );

There are other values you may want to change while extending the project, but you don’t need to do this right now. You can read more about CakePHP core.php configuration variables here.

database.php

This is the database configuration file. You’ll need to rename or copy this file (located at /app/config/database.php.default) to database.php in the same directory. Then fill out the $default connection array. A finished configuration should look something like this:

var $default = array('driver'      => 'mysql',
                    'persistent'  => false,
                    'host'        => 'localhost',
                    'login'       => 'cakephpuser',
                    'password'    => 'c4k3roxx!',
                    'database'    => 'my_cakephp_project',
                    'prefix'      => '');

These are the database connection details from when you created your database for this project. More information about database configuration.

routes.php

Routing is a feature that maps URLs to controller actions. It was added to CakePHP to make pretty URLs more configurable and flexible. Using Apache’s mod_rewrite is not required for using routes, but it will make your address bar look much more tidy. You don’t need to change this file at this time, but you can read about this file (for future use) here.

app_controller.php

This file (located at/app/app_controller.php) is parent class for all controllers in our project. If this file exists, all Controller classes will be inherited from our app_controller. If it doesn’t exist, they will be inherited from the libraries default file at /cake/libs/controller/app_controller.php. This is very useful if we need to extend all controllers. You can read more about the App Control here.

app_model.php

This file (located at /app/app_model.php) is parent class for all models in the project. It works just like app_controller, but for all models. If you look into any model code (/app/models) you can see we using $validationSet property (instead of the original $validate property) for creating the list of validation schemes, this allows for more flexible validation data stored in the database. Also we are using app_model to write custom validation rules for use in all models.

address.php

This file (located at /app/views/helpers/address.php) demonstrates how to create a custom helper for your project. You can read more about helpers here.

3rd Party Libraries

We using 3rd party library SwiftMailer for sending out email instead of built in EmailComponent to demonstrate how CakePHP works with 3rd party libraries. SwiftMailerComponent (located at /app/controllers/components/swift_mailer.php) is using for access to SwiftMailer library from our CakePHP project. You can read more about components here.

Additional Structure

And, finally, few words about code structure. CakePHP features Controller, Model, and View classes, but it also features some additional classes and objects that make development in MVC a little quicker and more enjoyable. Components, Behaviors, and Helpers are classes that provide extensibility and reusability to quickly add functionality to the base MVC classes in your applications. Right now we’ll stay at a higher level, so look for the details on how to use these tools later on. You can read more about classes here and more about CakePHP conventions here.

Onward!

Now you are ready to start investigating our tutorial project! Visiting your development domain in your browser should bring up the app. You’ll be able to register for an account, activate it, then create/update/delete events and locations as well as view them in the two different views.

Writeable error?

If you get an error about cache files not being writeable, make sure the /app/tmp folder is writeable, and then apply those permissions to all subfolders.

Direct Link to Article — Permalink

/*
<aside>
   <div class="widget">
       <h5 class="widget-title">
       <p></p>
   </div>
   <!-- other widgets -->
</aside>
*/

aside { background-color: #ccc; }
aside .widget { background-color: white; padding: 10px; }
aside .widget h5 { border-bottom: 1px solid black; }
/* etc. */

This could be useful for yourself as you would have to do less flipping back and forth between where you are viewing markup and this CSS file. This is even more useful when:

1. The markup is generated by JavaScript and harder to see anywhere else or,
2. The CSS is specific to a plugin or third-party add-on

I got this idea from the CSS file from mediaelements.js, which I think is a perfect use case example.

And now, a note about critiquing: I love critiques! If you want to rip this design to shreds, please do so. I have my bachelors in Art and part of that was getting torn apart in critiques when deserved. It makes us better. I am accepting all criticism, and I am also open to changes if I see a trend in comments or something is said that resonates with me. That said, I’m not open to generically negative comments like “I liked the old design better.” I’ve even already heard nonsense from people who have “lost respect” for me. All that does is hurt my feelings and in turn, make me lose respect for them. Comments like these are often fear-induced who-moved-my-cheese reactions, not careful considerations. Like all comment threads on this site, this one will be moderated. I spend a lot of time with this site and this design reflects what I consider to be improvements across many aspects. Please take the time you need to let the design sink in and consider it, and comment below with your thoughts. Thanks =)

Why?

This isn’t the type of design that ends up in CSS galleries. It has ads on it. It’s very utilitarian. It just delivers the type of content that this site has in a (hopefully) very findable and easily digestible way. The font size of body text in articles in this new design is up to a fairly large 16px. My eyesight is fine and I I haven’t heard any big complaints about readability before, but lately I’ve been finding myself bumping up webpages a few notches because I find large type easier to read quickly with higher comprehension. Or maybe it’s in my head, I dunno.

I also felt the need to rejigger some of the advertising on the site. I dropped some of the zones I felt were awkwardly placed. I added a few new ones and adjusted others. There is about the same amount as there ever was, I just feel like it’s integrated nicer. If anyone is interested, there are zones still open on BuySellAds.

Speed is also a factor. There are less images in this theme which helps speed things up a tad. I tried to sprite things as much as I could of course. I’m rocking about a 2 second page load time on average, which isn’t amazing but I think is decent for a site with this much stuff on it. Some of the slowest stuff is external, so we’ll see what happens there…

History

For longevity’s sake, I’m keeping my archive of old embarrassing designs on a new Design History page.

New Stuff

• Linkage has returned!
• Site is running WordPress 3.0.1
• The site now fluid width for the first time ever. It fits into 1024px screens with no horizontal scroll and spreads up to 1200px. Not a huge spread. One of the things I like the least about fluid width designs is when all that changes is the line length of text. There are line length changes here, but they are fairly reigned in and there are subtle layout adjustments where needed.
• There are the new official twitter buttons on posts. I’ve always been a little sour on social media buttons. For example, if you are a Delicious user, you know the tools added to your browser are 10x better than a link on a website. However, 1) I kind of like how these buttons work 2) Twitter is my favorite social site and 3) I can now feel like I’m not throwing away potential traffic from some ideological stand.

Removed Stuff

• The latest tweet bubble is gone. That was in the last two or three designs and I’m now over it. I feel like many times just seeing my latest tweet was weirdly out of place. More importantly, it was slow to load (I never did any caching). There are still social media links in the footer (including some new ones!)
• A long time ago I used to allow people to “register” for the site through WordPress. It was short lived as it ended up having very little purpose. There were about 1,000 registered users, half or more of them spam. I have always wanted to get rid of those users to clean up the database. The problem is, deleting a user in WordPress means you need to attribute their comments to someone else or delete them. I didn’t want to delete potentially valuable comments. So… there is one generic user left called “Old Registered User” to which those comments are attributed. Kinda sucks, but it’s all stuff that is years old and there isn’t all that much of it.

Technology Notes

What would a redesign be on a site like this without newfangled technology?

CSS3

• There are CSS Triangles in use. The main navigation uses them to help indicate current location and the voting question bubble uses them as well. The voting bubble even uses two of them on top of each other to achieve a sort of triangle-with-border effect.

  

  

• The VOTE section features a question bubble which uses a gradient background as well as rounded corners (as do many other elements).

  

• The various list-of-links in the sidebar for helping explore this site and others have a link nudge effect done with CSS3.

  

• The PROPS section features little cards which perform a 3D flipping effect in WebKit browsers.

  

• The boxes in the right of the footer also have an animation effect where information about that subject will slide up from below when moused over.

  

  If you don’t have access to a WebKit browser, you can see a screencast. Safari 5 users, are you seeing lots of “blinking” and awkward flashing when using some of the interactive things in the footer? Chrome is fine. Weird.

• There is a small use of CSS media queries where the footer rearranges slightly if the design is at it’s widest.

  

  

  The 125×125 ads in the sidebar also do a bit of a shuffle via @media queries. When the design is at it’s widest they are arranged 3×2 and any narrower, 2×3.

• Part of dealing with fluid width meant making multi-column designs utilize percentages. That means the images in those columns need to use img { max-width: 100%; } so they can shrink/grow with the column as needed.

  

  

All of these effects I would consider progressive enhancement in that browsers that don’t support any particular feature fall back to a plainer but acceptable experience. For instance, the 3D flip cards just instantly show their “backs” upon rollover.

HTML5

• New DOCTYPE, use of new elements, etc. Basically it just feels good to be using the simplification that HTML5 offers and the more semantic elements. I probably didn’t do a totally perfect job on using all the new elements. This will likely evolve over time.
• The video pages (example) now use HTML5 <video> tags to display video. They will play natively in WebKit browsers which support H.264. Browsers which don’t will fall back to Silverlight first, then to Flash using mediaelement.js. The UI controls remain consistent no matter which technology is in use. I would have liked to go fluid width with the video but there were many problems with that (which I may post about). Particularly nice is the jump-forward abilities of these new players (without requiring preload) that the old player could never do.
• The search form is now literally just a styled input, meaning there isn’t the weird line-height issues I had with the old designs image based background. HTML5 helps out in WebKit browsers with <input type=search results=5 placeholder=Search... name=s> allowing this look and functionality:

  

  

  

  What’s with that awkward outline highlight? Might be a WebKit bug.

• The comment form features additional HTML5 form features. The fields have placeholder values and also use the “required” attribute meaning modern browsers won’t even attempt to submit the comment without the required values (which can lead to an ugly WordPress error page).

  

  

jQuery

• Anything that jQuery does that it used to do in the old design (organic tabs, toggling the search limiter, etc) it still does, but has been rewritten to be more efficient. For example the code now handles both organic tabs sections with one block of code instead of having it split up like it was before.
• The homepage does “fadeouts” on the recent articles. I hoped it would help remove some repetitive page clutter while adding some visual interest. I had it working by using an :after pseudo element absolutely positioned to the bottom of each post, which would disappear on hover. I wanted the fading effect though, and CSS does not yet allow transitions/animations on pseudo elements. So I went with jQuery.

  

• I’m having jQuery look for buttons on the page that contain the text “View Demo” or “Download Files” and do a little HTML manipulation and styling. Perhaps not an ideal method, but this makes it backwards compatible with my whole backlog of posts while keeping the button markup really simple.

  

• Notice the sidebar has a background color to it that stretches from bottom to top of the white main content area. In early iterations of this design, I made the sidebar of a static width and used faux columns to fake the equal heights. But ultimately I decided that a fluid width sidebar would be cooler, which makes faux columns not possible. So to accomplish the equal heights, I have a simple resizing function which tests the height of the main content and if it’s larger than the height of the sidebar, grow the sidebar to match. It’s a bit janky… it has to run the resizer 2 seconds after the page load to account for third party content in the sidebar which may not be there on DOM ready or window load. It also runs it on window resize in case reflow affects the situation. It doesn’t work perfectly and it warrents a re-think at some point.

To Come

I’m working through some ideas for the forums to make them more awesome than they already are, so watch for that in maybe the next few months.

Direct Link to Article — Permalink

A little bit of OK Auto: Today, over 30 years later, OK Auto can be your main source for all of your automotive and off-road needs. With 22 employees who have worked here an average of 13 years, they have cumulative 267 years worth of industry experience! You can find them at the lovely place called Stewartsville in New Jersey, USA.

With standard features of an online store that fit into Magentos’ in-the-box feature list, they wanted News Article Manager, Image Gallery, Event Calendar, Shop by Vehicle Fit extension, and many more. After some consideration whether it is better to have everything in Magento or go worth WordPress integration, we decided to take the second route. Magento is getting better CMS features with every version, but it is still long way from WordPress. Check the website out at: http://ok4wd.com/

Let me be blunt: Magento development isn’t for the faint of heart. Magento development is extremely involved as its file structure and the way it functions is complex. Not to mention its extremely picky about the way things must be done. It’s very easy to be over your head in problems and confusion. The guys at Surgeworks/Inchoo not only knew what they were doing, but also helped keep the project moving when we dragged our feet. Everyone was professional, knowledgeable, and took great care in not only the website, but also our company as a whole. When we had crazy idea’s, they let us know if it were possible or if were about to build a sand castle in quick sand.

I cannot explain how grateful I am that we had such a group of knowledgeable developers working on our website. Over the past two years (I said we dragged our feet!), it seems like I can now fly out to Croatia, call my friends at Inchoo and grab a bite to eat. They are just that great as developers and as people. To be honest, I couldn’t see anyone else doing what they did. Looking back, we had some crazy request and features we wanted. They went beyond the call of duty as developers and as long as I’m in charge, no matter the company I work for at the time – these guys will be the first that I email.
James Henry, Website Project Leader, OK Auto

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin’, if we made a made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, we could make the iPhone/iPad’s “slide to unlock” screen with no images at all!

WebKit only demo:

View Demo   Download Files

Gradient Structure

The text “slide to unlock” is an h2 tag. We’ll be giving it the gradient background, which is structured like this, with 5 “color-stops”:

background:
   -webkit-gradient(linear,left top,right top,
        color-stop(0, #4d4d4d),
        color-stop(0.4, #4d4d4d),
        color-stop(0.5, white),
        color-stop(0.6, #4d4d4d),
        color-stop(1, #4d4d4d)); 

With the two properties from the beginning of this article, the text gets a highlight like this:

Notice that the width of the background is twice as wide as area. This gives us some gray to work with on either side of the highlight, so the white highlight part can slide by and the text can stay gray before and after. If we were to animate the background further left or right than what is available, the text goes black (bad).

The next step is to animate the position of that background from left to right.

The h2 tag sits within a “well” which takes care of getting us the black background behind the text (since we’ve stolen the background from the h2 itself). This controls the width of the h2 as well, since it defaults to 100% wide as a block-level element. The well has a fixed width. Then the h2 is double that width (200%). So our animation can start at negative the width of the well and end at positive the width of the well.

#well {
   width: 720px;
}

h2 {
   width: 200%;
  -webkit-animation: slidetounlock 5s infinite;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100%{
    background-position: 720px 0;
  }
}

Yay! Animated highlight on the text! Here it all is together:

#well {
  padding: 14px 20px 20px 20px;
  -webkit-border-radius: 30px;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
  border: 2px solid #454545;
  overflow: hidden;
}

h2 {
  font-size: 80px;
  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  padding: 0;
  width: 200%;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100% {
    background-position: 720px 0;
  }
}

Bonus: The unlocky thing in jQuery

To me, this was mostly about replicating the cool text effect without any images. Done and done. But hey we might as well tackle the sliding unlock part too eh? The little slider button with the arrow on it probably could be accomplished with pure CSS (using triangles, among other things. But, let’s not go there today. The slider will remain an image, and go right inside the h2 itself.

<h2><img src="images/arrow.png" alt="slider" /> slide to unlock</h2>

We’ll load up jQuery, jQuery UI, and our own custom script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src='js/slidetounlock.js'></script>

We’ll use the jQuery UI draggable function on the image. We’ll restrict it’s movement to the X-axis (horizontal). Like all good jQuery UI functions, this has callbacks. We’ll attach one to the drag event which fires repeatedly as the element is dragged. With that, we’ll test if it has made it far enough to be considered “unlocked.” If it has, we’ll fire off an action. In this case, fading out the well. For the “stop” callback, fired when the mouse button is released, we’ll test if the element is under the our completion distance and snap it back to the left if not.

$(function() {
	$("h2 img").draggable({
		axis: 'x',
		containment: 'parent',
		drag: function(event, ui) {
			if (ui.position.left > 550) {
				$("#well").fadeOut();
			}
		},
		stop: function(event, ui) {
			if (ui.position.left < 551) {
				$(this).animate({
					left: 0
				})
			}
		}
	});
});

I tried to make the drag event also dim the opacity of the text as you slide it, like the iPhone/iPad, but it’s seeming to me like WebKit isn’t allowing partial opacity on text with background clip. Didn’t do a ton of research, but I do know that wrapping the text in a span and trying to adjust the opacity of that span just wouldn’t take (until it was zero).

Notes

• Marco Kuiper has tackled this before as well, but with a different approach (animated GIF).
• The code above is for desktop web browsers only, and won’t work on mobile browsers. Evan Black took this example and added JavaScript touch events to it, making it work in Mobile Safari. I snagged his code and dropped in in the live example on this site, the only alternations being a little jQuerification

.

1. Ignore sprites entirely. Make every background image its own separate image and reference them as such in the CSS.
2. When you are reasonably sure the design is “done,” use the SpriteMe bookmarklet to create the sprite.
3. Comment out (not delete) the old background properties in the CSS and add in the new Sprites-based version:

   #logo {
     /* background: url(images/logo.png) no-repeat; */
     background: url(images/sprite.png) -10px -579px no-repeat;
   }

4. Don’t worry about the comments bloating your CSS, you should compress your CSS before serving it on live sites anyway which will remove those.

Now if you find yourself needing to update the images inside the sprite, the process can be:

1. Update individual images.
2. Comment out Sprited CSS background images and uncomment regular background images
3. Remake sprite with SpriteMe, replace
4. Swap comments again

One of the complaints of working with sprites is that it makes updating images harder. I think this process makes it much easier. I guess an even easier process would be to have a PSD of your sprite so you can update that directly without touching CSS. If you can pull that off, great. I personally feel more organized having individual graphics. SpriteMe also gives you CSS with the locations of all the sprites, so if you needed to change the size of images or add/delete them, you’ll get those new numbers automatically.

If you have your own workflow for working with sprites, please share!

Related: Setting up sprites diagonally is rather clever. The idea is then you can use the sprite as a background image of a larger box without fear of other graphics in the sprite showing up. This is at the cost of a larger sprite file size because of the extra white space.

Its all about simple things, right? Well, here is one bottom line simple thing I would like to do with my Magento API. I would like to get a list of all available websites, stores and store views. Can I do that with the latest (as of this writing, 1.4.1.1) Magento? No I cannot! Can I get a list of … etc. For any serious scenario you will most likely be out of luck. What’s interesting is that rarely even a combination of several method calls will give you what you might need. Trust me on this one, I am writing Android application for Magento and its killing me.

So, how do we improve Magento API? That’s easy, I say lets override it enabling the further use all existing method calls while adding new methods to the same classes plus we can throw in some new classes to the API.

We will do so in the form of new extension, lets say that the extension name is “Ajzele_Mapy”.

First we will place the Ajzele_Mapy.xml file under the app/etc/modules/Ajzele_Mapy.xml with the content like shown below.

< ?xml version="1.0"?>

<config>
<modules>
<ajzele_mapy>
<active>false</active>
<codepool>community</codepool>
<depends>
<mage_api />
</depends>
</ajzele_mapy>
</modules>
</config>

Then we need to create appropriate file/directory structure inside the app/code/community/Ajzele/ folder.

First lets create the app/code/community/Ajzele/Mapy/etc/config.xml file with the content like shown below.

< ?xml version="1.0"?>

<config>
<modules>
<ajzele_mapy>
<version>1.0.0.0.0</version>
</ajzele_mapy>
</modules>
<global>
<models>
<customer>
<rewrite>
<customer_api>Ajzele_Mapy_Model_Customer_Customer_Api
</customer_api>
<group_api>Ajzele_Mapy_Model_Customer_Group_Api</group_api>
<address_api>Ajzele_Mapy_Model_Customer_Address_Api</address_api>
</rewrite>
</customer>
<directory>
<rewrite>
<country_api>Ajzele_Mapy_Model_Directory_Country_Api</country_api>
<region_api>Ajzele_Mapy_Model_Directory_Region_Api</region_api>
</rewrite>
</directory>
<catalog>
<rewrite>
<category_api>Ajzele_Mapy_Model_Catalog_Category_Api</category_api>
<product_api>Ajzele_Mapy_Model_Catalog_Product_Api</product_api>
<product_attribute_api>Ajzele_Mapy_Model_Catalog_Product_Attribute_Api
</product_attribute_api>
<product_attribute_media_api>Ajzele_Mapy_Model_Catalog_Product_Attribute_Media_Api
</product_attribute_media_api>
<product_attribute_set_api>Ajzele_Mapy_Model_Catalog_Product_Attribute_Set_Api
</product_attribute_set_api>
<product_attribute_tierprice_api>Ajzele_Mapy_Model_Catalog_Product_Attribute_Tierprice_Api
</product_attribute_tierprice_api>
<product_link_api>Ajzele_Mapy_Model_Catalog_Product_Link_Api
</product_link_api>
<product_type_api>Ajzele_Mapy_Model_Catalog_Product_Type_Api
</product_type_api>
</rewrite>
</catalog>
<cataloginventory>
<rewrite>
<stock_item_api>Ajzele_Mapy_Model_CatalogInventory_Stock_Item_Api
</stock_item_api>
</rewrite>
</cataloginventory>
<directory>
<rewrite>
<country_api>Ajzele_Mapy_Model_Directory_Country_Api</country_api>
<region_api>Ajzele_Mapy_Model_Directory_Region_Api</region_api>
</rewrite>
</directory>
<sales>
<rewrite>
<order_api>Ajzele_Mapy_Model_Sales_Order_Api</order_api>
<order_invoice_api>Ajzele_Mapy_Model_Sales_Order_Invoice_Api
</order_invoice_api>
<order_shipment_api>Ajzele_Mapy_Model_Sales_Order_Shipment_Api
</order_shipment_api>
</rewrite>
</sales>
</models>
</global>
</config>

In the above app/code/community/Ajzele/Mapy/etc/config.xml file you will notice I overridden all (if I did not miss any) of the exposed Magento API classes. For example, definition Ajzele_Mapy_Model_Directory_Country_Api tells the Magento to use Ajzele_Mapy_Model_Directory_Country_Api each time it wishes to use the Mage_Directory_Model_Country_Api class which is exposed to the API.

My appropriate Ajzele_Mapy_Model_Directory_Country_Api class would then have a content like shown below.

< ?php

class Ajzele_Mapy_Model_Directory_Country_Api extends Mage_Directory_Model_Country_Api
{

}

This example merely overrides the Mage_Directory_Model_Country_Api class, not doing anything more at the moment. Now if I would like to add new public method (one that does not exist in the Mage_Directory_Model_Country_Api), then I would (with one extra configuration entry shown below) call that method trough API like “directory_country.myNewMethod”.

In order to do so, I would need to add one more config info to another file called app/code/community/Ajzele/Mapy/etc/api.xml.

<?xml version="1.0"?>

<config>
<api>
<resources>
<customer translate="title" module="customer">
<model>customer/customer_api</model>
<title>Customer Api</title>
<acl>customer</acl>
<methods>
<!-- Mapy methods here... -->
</methods>
</customer>
<customer_group>
<model>customer/group_api</model>
<title>Customer's Groups Api</title>
<acl>customer</acl>
<methods>
<!-- Mapy methods here... -->
</methods>
</customer_group>
<customer_address>
<model>customer/address_api</model>
<title>Customer Address Api</title>
<acl>customer/address</acl>
<methods>
<!-- Mapy methods here... -->
</methods>
</customer_address>
<directory_country translate="title" module="directory">
<model>directory/country_api</model>
<title>Country Api</title>
<acl>directory/country</acl>
<methods>
<!-- Mapy methods here... -->
</methods>
</directory_country>
<directory_region translate="title" module="directory">
<model>directory/region_api</model>
<title>Region Api</title>
<acl>directory/region</acl>
<methods>
<!-- Mapy methods here... -->
</methods>
</directory_region>
<catalog_category translate="title" module="catalog">
<model>catalog/category_api</model>
<title>Category API</title>
<acl>catalog/category</acl>
<methods></methods>
</catalog_category>

<catalog_category_attribute translate="title" module="catalog">
<title>Category attributes API</title>
<model>catalog/category_attribute_api</model>
<acl>catalog/category</acl>
<methods></methods>
</catalog_category_attribute>

<catalog_product translate="title" module="catalog">
<title>Product API</title>
<model>catalog/product_api</model>
<acl>catalog/product</acl>
<methods></methods>
</catalog_product>

<catalog_product_attribute translate="title" module="catalog">
<title>Product attributes API</title>
<model>catalog/product_attribute_api</model>
<acl>catalog/product</acl>
<methods></methods>
</catalog_product_attribute>

<catalog_product_attribute_set translate="title" module="catalog">
<title>Product attribute sets API</title>
<model>catalog/product_attribute_set_api</model>
<acl>catalog/product</acl>
<methods></methods>
</catalog_product_attribute_set>

<catalog_product_type translate="title" module="catalog">
<title>Product types API</title>
<model>catalog/product_type_api</model>
<acl>catalog/product</acl>
<methods></methods>
</catalog_product_type>

<catalog_product_attribute_media translate="title" module="catalog">
<title>Product Images API</title>
<model>catalog/product_attribute_media_api</model>
<acl>catalog/product/media</acl>
<methods></methods>
</catalog_product_attribute_media>

<catalog_product_attribute_tier_price translate="title" module="catalog">
<title>Product Tier Price API</title>
<model>catalog/product_attribute_tierprice_api</model>
<acl>catalog/product</acl>
<methods></methods>
</catalog_product_attribute_tier_price>

<catalog_product_link translate="title" module="catalog">
<title>Product links API (related, cross sells, up sells)</title>
<model>catalog/product_link_api</model>
<acl>catalog/product/link</acl>
<methods></methods>
</catalog_product_link>
</resources>
<acl>
<resources>
<customer translate="title" module="customer">
<title>Customers</title>
<sort_order>3</sort_order>

<!-- Mapy method acl's here... -->
</customer>
<directory translate="title" module="directory">
<title>Directory</title>
<sort_order>5</sort_order>

<!-- Mapy method acl's here... -->
</directory>
<catalog translate="title" module="catalog">
<title>Catalog</title>
<sort_order>1</sort_order>
</catalog>
</resources>
</acl>
</api>
</config>

Careful study of the above file shows how Magento exposes its class and methods to the API. For example, is you open the app\code\core\Mage\Directory\etc\api.xml file you will see how it exposes methods for the Directory module.

So, in short, my module merely overrides all the available/exposed API classes enabling you to add new methods or overwrite existing ones in the API. Entire code provided above does not contain any custom methods or does it overwrite any. Its merely an “empty” and “ready” project for writing your own stuff.

I have taken this “extending the Magento API” concept very serious as I will most likely need it for my future Android – Magento apps. With that in mind I have created a repository on the http://github.com/ajzele/mapy (which is empty for now, planning on submitting my first code in a week or so). As you guessed it, the project name is Mapy, short from Magento + API + y to spice up the things .

Hope this article was helpful for you.

Cheers.

Direct Link to Article — Permalink

Rabble rabble rabble!

These newfangled touch devices all support JavaScript anyway! You can just use JavaScript to make double click events! Rabble rabble rabble!

Yes, you can. For anyone interested, “dblclick” is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn’t about that, it’s about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

The Results

I really wanted to boil it down to one technique and declare it the best possible way to accomplish CSS double clicking. But as it turns out, there are just too many issues and considerations to do that. Instead, I made up a page showing all the most interesting techniques tried.

Most of the techniques involve some kind of covering element which is hidden, kicked off the page, or buried when the first click happens. That first click can come in the form of :active or :focus. :active is nice because it doesn’t require HTML5. :focus does, because it needs the element to have a tabindex or contenteditable attribute to be able get focus. One way around that was to use an input element to do the covering, but that has it’s own quirks.

All in all, it was a nerdy good time poking around with this idea. There are probably dozens more ideas, but for something this ultimately trivial I had to nip it in the bud and call it a wrap.

View Demo

Credits

There was probably more than twenty different things tried between me and others. Special thanks to Darcy Bross and this comment on Forrst for the first lead into working examples and to Mattias Buelens and Topher Wilson for playing with it and working on variations.

More

If you want to play around with the idea, I suggest tinking around on JSBin and saving your best examples. I’ll link em up here if you guys figure out some awesome ones. Here are some interesting ones that happened in playing with all this:

http://jsbin.com/uqana4/2/
http://jsbin.com/owuso/6/

At the very top of the a HTML I would use Javascript to create a timestamp, this is the starting timer for everything. I would then have a function on a setInterval so it loops, the function checks a dom element using getElementById, it checks to see if that node is there, if it is it checks to see if the node has the style applied to it, if it does it fires a new timestamp marks the difference between the start and the end and then writes that out.

The results concluded that OOCSS is way fast compared to declaring each selector with property and values separately. Even to the point being noticeably slower. Also, Opera is the fastest and Firefox is the slowest (IE not tested). But is this the perfect test? Doesn’t having all the repetitive property and values increase the size of the CSS and maybe that’s why it’s slower? It’s hard to test only the speed of the selector, as far as I know.

Direct Link to Article — Permalink

1. Use the HTML5 elements <video> and <audio> and have them work cross-browser (including mobile WebKit)
2. Deliver a consistent UI for controls
3. Using only a single format

I’ll be using it in the redesign of this site. I was all prepared to just say I’m using HTML5 video and if your browser doesn’t support that then just download directly and use VLC or something. But then I realized I’d have to re-encode to at least include OGG and that really didn’t appeal to me with 90 videos. Plus then I was messing with trying to make the video fluid width and that wasn’t going well (another story) so I scrapped it. Now that we have this, it’s a done deal! Firefox/Opera/IE<8 will fall back to a Silverlight player and WebKit browsers (and ultimately IE 9) will use native HTML5.

One issue I’ve heard is that even when visiting a site using this with Chrome/Safari (natively supporting HTML5 with H.264), you can be prompted to install or update Silverlight, which kinda sucks. Apparently I have the lastest version installed so could not confirm this.

Direct Link to Article — Permalink

There will not be a fast barrage of links coming in this way. I’ll only be linking to things that I find particularly interesting and that I actually have something to say about. These will be rolling out before the redesign is here, so there is data there for the new design to use when it is here.

We’ll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content.

HTML5 Markup

HTML5 has nice elements for including captioned images.

<section class="image-gallery">

   <figure>
      <img src="images/img-1.jpg" alt="jump, matey" />
      <figcaption">Jump!</figcaption>
   </figure>

</section>

We just give the figure element tabindex, so that it can be in focus.

<figure tabindex=1>

Give each subsequent figure a tabindex value one higher and the images will be able to be tabbed through nicely from the keyboard!

The Images

The images will be “full size”.

This means they will be scaled down for regular display on the page, and scaled up when we do our magical CSS expanding. Potentially a waste of bandwidth for the browsers that don’t support this. The tradeoff is your call.

The CSS

Normal display:

figure {
  width: 120px;
  float: left;
  margin: 0 20px 0 0;
  background: white;
  border: 10px solid white;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  position: relative;
}

figcaption {
  text-align: center;
  display: block;
  font-size: 12px;
  font-style: italic;
}

figure img {
  width: 100%; /* Scale down */
}

The :focus part of this isn’t CSS3, the but shadows, transforms, and transitions are. The hover state will rotate the image a bit, and the :focus style (when the image is clicked on), will expand it, rotate it again, and make sure it’s on top with z-index.

figure:hover {
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
  -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus {
  outline: none;
  -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
   -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}

Browser Compatibility

The HTML5 contenteditable attribute is supported in Firefox 3.6+, Safari 4+, Chrome, and Opera (10.6 only tested). Note that the attribute will cascade down to all child elements. In our demo, having the image and figure caption be editable doesn’t make much sense, so we can turn it off individually on them.

<figure contenteditable="true">
  <img src="images/img-1.jpg" alt="jump, matey" contenteditable="false" />
  <figcaption contenteditable="false">Jump!</figcaption>
</figure>

If you forget to turn off the editablity of the images, Firefox can look a bit funky giving you resize handles for images. Update: another reason to use tabindex instead.

Opera respects the child elements not being editable, but still runs the spellchecker on them and will red-underline words it finds misspelled which can be a bit weird.

Our demo also relies upon transforms to “work” though, which are only supported in current WebKit browsers and Firefox 4+. Firefox 3.6 supports the transform but not the transition.

The fallback is that the images just don’t expand though, which is of course no big deal.

Demo & Download

View Demo   Download Files

Related

• If you are looking for a pure CSS lightbox, including the overlay, check out Stu Nicholls version.
• If you need your lightbox to be fully cross browser compatible, use JavaScript like the Colorbox plugin for jQuery.

Credits

Big thanks to Adrian Sinclair who contacted me about this idea and helped with everything.

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea. Also for the benefit of those non-hip browsers, it’s best to reset many of the HTML5 elements to block-level as they should be:

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

Now we’re all set to use and style HTML5 elements. But wait! What happens if we dynamically add HTML5 to the page via JavaScript.

var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);

Or in jQuery:

$("body").append("<section>Hi!</section>");

Hip browsers do fine, but Internet Explorer will once again not recognize the new element and not apply CSS to it.

Joe Bartlett has written a great work-around to the problem called HTML5 innerShiv and I thought more people should be aware of it.

Using it

Please note that this script does not require jQuery. It’s just vanilla JavaScript and will work with any library or library at all.

1. Download

Download the script and insert it onto your page. Or copy and paste the script into other JavaScript you are already loading if you want to avoid an extra HTTP Request.

2. Wrap all HTML content in innerShiv function before inserting

Here is the same jQuery example as above, made to work using innerShiv:

$("body").append(innerShiv("<section>Hi!</section>"));

Quick demo.

Remember to check out Joe’s page, which does a better job of explaining things.

I was browsing through a few Flash templates on ActiveDen when I came across an effect I see very often on Flash website galleries. It’s a very simple but neat effect. The images have a border, but unlike CSS borders, it covers up part of the image. I wanted to use this effect in one of my galleries so I went ahead and experimented a bit and came up with the following jQuery plugin. It basically wraps the images in a <div> with the same dimension as the image and sets the overflow to hidden. Then it appends another <div> after the image, which the actual border gets assigned to. All the border properties can be altered by the user. It will work with almost any lightbox (tested with colorbox).

By combining the effects, new effects can be achieved and I noticed, that when used with a higher “inset” value, it gives you a really nice effect on the iPhone’s web browser. Feel free to do whatever you like with this plugin.

View Demo   Download Files

How it works!

A huge thanks to Chris for editing and optimizing the plug-in and especially for posting this article!

Over the past several years, I have taken an interest in usability and web design. One of the areas that seems to be often overlooked when it comes to design of a site is the design of the URIs on that site. Modern CMS systems allow for varying degrees of URI customization, but the defaults are often not as usable as they could be, and URIs are often placed last in the design process.

Clean URIs are one component of a clean website, and it is an important one. The majority of end-user access to the Internet involves a URI, and whether or not the user actually enters the URI, they are working with one nonetheless.

First, I would like to talk about the guiding principles behind URI design, then talk about the practical implementation of the principles.

Note: Originally, I wrote this article draft using the term “URL,” but since “URL” has been mostly deprecated by “URI,” I’ve updated to use the term URI. More information from W3C.

Principles

First, let’s take a look at some of the general principles of URI design.

A URI must represent an object, uniquely and permanently

One of the most fundamental philosophies behind a URI is that it represents a data object on the Internet. The URI must be unique so that it is a one-to-one match – one URI per one data object.

While this is always the goal, there are times at which it is very difficult or impossible to accomplish. Canonical URL tags were invented to help reduce the amount of duplicate content seen by a search engine. While not a final solution, canonical URLs are strongly recommended as large search engines like Google are now paying attention to them. For more information about canonical URLs, check out this article by SEOmoz.

URIs should also be permanent (i.e. choose the URI once and leave it at that). This speaks to good URI design before a site is launched, with the URIs being carefully planned. There will come a time when you do want to make improvements to your choices or otherwise must change URI structure. When this becomes a necessity, be sure to set up HTTP 301 moved permanently redirects on your server. This tells browsers and search engines the new location of the content and will also preserve any PageRank that the old URI has accumulated.

Be as human-friendly as possible

This is the most fundamental driving factor behind URI design (or it should be). URIs should be designed with the end user in mind. Search Engine Optimization (SEO) and ease of development should come second.

One way to keep a URI user-friendly is to keep it short and to the point. This means using as few characters as possible while still maintaining usability. So, /about is better than /about-acme-corp-page. While striving to be as short as possible, it should not sacrifice that user-friendliness by using URIs like /13d2 as this holds no meaning for the end users.

Conversely, using a shortlink whenever sharing a URI is encouraged. This is great for tweeting links on Twitter, or otherwise sharing on social sites like Facebook or Google Buzz. It is great if you can control your own URI shortener for SEO reasons, although a site like Bit.ly is good too. I personally use PrettyLink Pro (a WordPress plugin) to create my short URIs. An alternative is the Short URL plugin.

WordPress provides a button to get a shortlink to a post based on WordPress’ own /?p=XXX format which is likely to be shorter than your chosen permalink structure. The advantage being that will work as long as your site is around. The disadvantage is the shortness of the link is dependent on the length of your domain name.

The URI should not rely on information that is not important to the content or the user. A common example of this is using the database ID as the URI, as in /products/23. The end user does not care that the product is database record number 23, so a URI like /products/ballpoint-pen is much better. It can be tempting to resort to such poor URI structure as it is often easier on the backend to query the database with an ID rather than have to do a lookup on an alias to find the object.

One good test to see if a URI is a user-friendly URI is the “speech-friendly” test. You should be able to mention a URI in a conversation with a friend, and it should make sense. For example:

My bio’s at domain dot com slash jim

instead of

My bio’s at domain dot com slash page slash g g 2 3

Consistency

URIs across a site must be consistent in format. Once you pick your URI structure, be consistent and follow it! Having good URI structure for part of the site means that you still have poor structure overall. In order for a user to trust that URIs work a certain way on a site, the format must be consistent. If you must switch structure (maybe you’re updating a poorly-designed site), use 301 redirects as previously mentioned.

“Hackable” URIs

Related to consistency, URIs should be structured so that they are intelligibly “hackable” or changeable. For example, if /events/2010/01 shows a monthly calendar with events from January 2010, then:

• /events/2009/01 should show an events calendar for January 2009
• /events/2010 should show events for the entire year of 2010
• /events/2010/01/21 should show the events for January 21st, 2010

Keywords

The URI should be composed of keywords that are important to the content of the page. So, if the URI is for a blog post that has a long title, only the words important to the content of the page should be in the URI. For example, if the blog post is “My Trip to Best Buy for Memory Cards,” then the URI might be /posts/2010/07/02/trip-best-buy-memory-cards or something similar.

As a side benefit, using important keywords in the URI will improve SEO. My personal SEO philosophy is that, rather that optimize for search engines, optimize for good content. Search engines have made it their goal to find the best content on the web, so doing everything possible to create an easy-to-use site with great content and opportunities for further information (links) will, in my opinion, yield the best long-term results for search engine visibility.

Technical Details

We have covered some of the guiding principles behind URI design. Now, let’s look at some technical implementations of those guidelines.

No evidence of the underlying technology

The URI should not have .html, .htm, .aspx (a big annoyance), or anything else attached to it that is only designed to show the underlying technology. No end user cares that your site was written in ASP.NET (.aspx), ColdFusion (.cfm), or uses Server Side Includes (.shtml) – or at least most end users don’t. The extra info is just extra typing and extra room for error and frustration.

The one exception to this rule is appending a URI with a postfix like .atom, .rss, or .json to request that the certain format be returned. Alternatively, the format could be requested with the Accept HTTP header.

No WWW

The www. should be dropped from the website URI, as it is unnecessary typing and violates the rules of being as human-friendly as possible and not including unnecessary information in the URI.

Many users, however, will still type in the www. prefix, so www.domain.com should 301 redirect to domain.com. The same goes for 301 redirecting www.subdomain.domain.com to subdomain.domain.com.

Format

URIs should be in the format:

domain.com/[key information]/[name]/?[modifiers]

Key information is information that is not the object identifier (like the post title), but is still key to the object being accessed. This may include:

• the type of thing (i.e. posts)
• the overall parent category (i.e. technology)
• key data members (i.e. the date posted)

Modifiers modify the view, not the data model being represented, and thus they are part of the query string and not the URI itself.

The amount of “key information” should be kept to a minimum, as URIs should not be overly nested. Each item placed in the key information section must really be key to addressing the page.

In the end, the URI should represent a descending hierarchy. For example

• domain
• type
• category
• title

Example: http://domain.com/posts/servers/nginx-ubuntu-10.04. In the case of items with dates, the format should follow the descending hierarchy:

• year
• month
• day

Example: http://domain.com/news/tech/2007/11/05/google-announces-android.

Google News has some interesting requirements for webpages that want to be listed in the Google News results – Google requires at least a 3-digit unique number. Due to the fact that they will ignore numbers that look like years, a 5 or more digit number is preferred. Also recommended is a Google News sitemap. This is one of those cases where if you absolutely must target Google News, you must conform to this inferior URI structure. But, if you must, make sure that you are consistent and that it is still hackable (for example, use the format yyyymmdd like 20100701).

All lowercase

All characters must be lowercase. Attempting to describe a URI to someone when mixed case is involved is next to impossible.

If someone types the URI in mixed-case, they should be 301 redirected to the lowercase page. That sounds really nice, but in practice, I’m not exactly sure if that is possible… using a CMS that rewrites all requests to a single file would be the easiest way to accomplish it as the script could issue the 301 to lowercase, but I’m not sure if there’s an easier way (.htaccess rules or something).

Actions appended to the URI

Actions may be appended to the URI, like show, delete, edit, etc. Non-destructive actions (those that do not change the object) should be requested with a HTTP GET, while destructive actions should be POSTed to the URI. Run a Google search for REST URI Design for more information.

URI identifiers should be made URI friendly

A URI might contain the title of a post, and that title might contain characters that are not URI-friendly. That post title must therefore be made URI friendly. For example

• All uppercase characters are made lowercase
• Characters like é should be converted to e (etc.)
• Spaces should be replaced with hyphens
• Unknown characters (!, @, #, $, %, ^, &, *, etc.) should be replaced with a hyphen
• Double hyphens (–) should be replaces with a single hyphen
• Probably more rules I’m forgetting

Characters can be URI escaped (like %20 for the space character), but this is generally a bad idea for many of the above reasons (shows technology, unnecessary typing, etc.)

Fun idea

Use a sentence like structure:

chriscoyier.net/authored/digging-into-wordpress/
chriscoyier.net/has-worked-for/chatman-design/
chriscoyier.net/likes/trailer-park-boys

jacobwg.com/thinks/this-post/is/basically-done

If you know of any more URI guidelines that I missed or have any comments about those I did remember, I’d love to hear them!

Credits

Many thanks to the Forrst community who saw the initial (very) rough drafts of this post and contributed many insightful comments. Special thanks to @chriscoyier, @caludio, @steerpike, and @mattthehoople for directly contributing to the guideline list and to all the other Forrst commenters for providing helpful discussion.

Thank you to my dad for proofreading and review! Thank you also to Chris for being kind enough to offer to post this on CSS Tricks!

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 __________?

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.

How does it work then?

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.

Browser Support

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.

Issues in the spec?

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.

Demos

Here is my own simple demo page. There is also a super hardcore demo (which is over 10 years old).

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.

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.

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 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 basic idea

The border-image shorthand property has 3 parts:

border-image: url(border-image.png) 25% repeat;

Essentially, these allow you to specify:

1. An image to use as the border
2. Where to slice that image, dividing the image into 9 sections
3. How the browser should apply those sections to the edges of your element

The pertinent details

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:

Slicing your image

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:

Repeat, Round, Stretch

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;
}

Screenshot for Example One

Border-width

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;
}

Screenshot of Example Two

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;
}

Screenshot of Example Three

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.

Browser quirks

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.

Interactive demo

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!

Examples in the wild

• Chris Spooner uses it to nice effect to give his images a custom border.
• On the travel blog Go Pink Boots I built recently, I used it to add a torn-paper background to images.
• I use it on my site The Web Designers’ Review of Books to highlight blockquotes.

If you have other examples on live sites, I’d love to see them. Leave a link in the comments!

About the Author

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!

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.

Genesis

The idea comes from the fact that you can see see the file path in the file input after you select it.

Your eyeballs can see it, but JavaScript cannot.

Security issue

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.

What browsers actually do

Internet Explorer & Opera

Both these browsers will return a value like this when trying to access the value of the file input:

C:\fakepath\image.png

This 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.

WebKit (Safari / Chrome)

Return no value whatsoever for the file input value.

Firefox

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)

1. Image as textarea background, disappears when text is entered.

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") } });

2. HTML5 placeholder text

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.

3. Placeholder text, HTML5 with jQuery fallback

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("");
}

4. Remove the blue glow

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.

5. Remove resize handle

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;
}

6. Add resize handle

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();

7. Auto-resize to fit content

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();

8. Nowrap

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>

9. Remove default scrollbars in Internet Explorer

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.

Translate your content

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.

Use horizontal navigation bars

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.

Use Unicode UTF-8

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.

Use appropriate colours

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.

Tailor your design to the market

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.

Nokia’s Chinese site

Nokia’s German site

Localize your SEO

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).

Note from the editor

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:

• Design for the World: Cross Cultural Web Design
• Tips and Thoughts on Cross-Cultural Global Web Design
• Building A Cross-Cultural Web Design For A Wider Audience

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.

View Demo Download Files

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.

Idea

The idea came from this website which I found in a tweet by ilovetypography.

$("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:

This demo.

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.

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.

• 1. Direct ResizeGive 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
• 2. Magento Easy lightboxThis 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
• 3. Exploded MenuReplaces 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
• 4. Magento Easy TabsThis 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
• 5. Canonical URLThis 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-magento
• 6. Fooman Google Analytics PlusAdditional features for the default GoogleAnalytics module. Track every individual page – including sections retrieved via AJAX during one-page-checkout
  Enter DomainName to track via the Magento back-end / check here if you should use it. Track the actual typed in keywords for adwords instead of only the term you bid on (this might not yet work due to a bug in Magento itself). Optionally track Adwords conversions for purchases

  http://www.magentocommerce.com/magento-connect/FOOMAN/extension/171/fooman-google-analytics-plus

• 7. Delete ordersAllows 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
• 8. uGiftCertAllow your customers to purchase and use Gift Certificates. http://www.magentocommerce.com/magento-connect/Unirgy/extension/751/unirgy_giftcert
• 9.Featured productsThis 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
• 10. Enhanced Admin Products GridAdds 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-grid

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.

• 1. Direct ResizeGive 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
• 2. Magento Easy lightboxThis 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
• 3. Exploded MenuReplaces 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
• 4. Magento Easy TabsThis 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
• 5. Canonical URLThis 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-magento
• 6. Fooman Google Analytics PlusAdditional features for the default GoogleAnalytics module. Track every individual page – including sections retrieved via AJAX during one-page-checkout
  Enter DomainName to track via the Magento back-end / check here if you should use it. Track the actual typed in keywords for adwords instead of only the term you bid on (this might not yet work due to a bug in Magento itself). Optionally track Adwords conversions for purchases

  http://www.magentocommerce.com/magento-connect/FOOMAN/extension/171/fooman-google-analytics-plus

• 7. Delete ordersAllows 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
• 8. uGiftCertAllow your customers to purchase and use Gift Certificates. http://www.magentocommerce.com/magento-connect/Unirgy/extension/751/unirgy_giftcert
• 9.Featured productsThis 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
• 10. Enhanced Admin Products GridAdds 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-grid

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:

• Gift Certificates/Cards (both virtual and physical)
• Reward Points System
• Customer Store Credits
• Strong Data Encryption

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.

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.

Example

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.

All together now

#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;
  }
}

Video demo

Live demo / download

View Demo   Download Files

Browser support

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.

More on media queries

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.

Types

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 { ... }

Dimensions

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) { ... }

Orientation / Aspect Ratio

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) { ... }

Color

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 */ }

Elsewhere

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:

• Andy Clarke shows how the the longer the line length the more readable text can be with taller line height.
• Jon Hick’s site rearranges itself to have double sidebars, single sidebar, or no sidebar according to available space. It even scales down to mobile sizes nicely.
• Ethan Marcotte’s demo for A List Apart doesn’t use media queries, but shows other ways a design can be effectively flexible.
• Simon Collison’s site rearranges it’s grid to fit different browser sizes.
• Panic uses @media in their HTML emails to make them look awesome in desktop or mobile email clients.

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

.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.

Hey! That’s content not design!

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.

Using Special Characters

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 &#169; – 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

Example Trick: Checkmark visited links

Mark your visited links with checkmarks:

#main-content a:visited:before {
   content:  "\2713 ";
}

Using Attributes

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.

Example Trick: CSS3 tooltips

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.

Points to consider

• Firebug can’t yet target pseduo elements yet. The web inspector in WebKit browsers can target them, but don’t show their property/values. I heard the IE dev tools could target them too, but not sure about the property/values.
• In WebKit, they have to be block level to be rotated. Firefox can rotate inline elements/pseudo-elements.
• In Firefox 3.0, pseudo elements can’t be absolutely positioned.
• They cannot be transitioned or animated.

Example Trick: Fancy email link popouts

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.

View Demo

Example trick: display full links in print stylesheets

@media print {
     #main-content a[href]:after { " (" attr(href) ") "; }
}

Browser support / Accessibility

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.”

*Chris: Your writing style is extremely comprehensive. For example, you recently wrote an article about CSS border rules. It’s not an overview or tutorial, but more of an encyclopedic approach documenting these properties. Is this a conscious choice? Or just “your style”?

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.

*Chris: The “target audience” issue I find interesting in our field of tech writing. It was a question we got asked a lot while writing our book: “what level audience level is it for?”, to which I typically responded, “well, uhm, sort of intermediate but there is value in it for all levels.” Then on this blog, I tend to waver around quite a bit in terms of what skill level any particular article is best suited to.

What is your approach on Perishable Press? Do you try and keep it targeted the same level reader all the time? And perhaps more interestingly, do you think tech publications in general would be more successful if they remained consistent in their skill level targeting?

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.

*Chris: Organization is another attribute I associate with you. For example there is a classic series on Perishable Press about obsessive CSS formatting. In one of them you claim to order your CSS rules by their line length, which I have to admit I find borderline insane, mostly from a maintenance perspective. Although I do also find it visually appealing. Do you still do it like that? Anything new? Where does that obsessive organization come from?

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.

*Chris:So what’s the “day job”? I know you work in some kind of lab. Does that involve any web work or is that relegated to freelance and side projects? Any future plans?

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.

*Chris: As we both know, and most people in our community know, managing your time is no trivial skill. Responsibilities and commitments can pile up to the point of being overwhelming very quickly. You are juggling our book, your online business and blog, your day job, your family, and I’m sure much more. Do you just take it day by day and react as needed? Or do you have a master plan for keeping things in check?

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.

Branko is the most experienced Magento developer on our team (the first one to join Tomislav after he founded Inchoo two years ago) and he has been involved in training and mentoring activities with most of the current team members. With Magento learning curve being somewhat steeper than with other platforms, he’s had his share of very interesting experiences while spreading his Magento skills and knowledge throughout the company.

When we were approached by Kara Heinrichs, GM for Education, training and certification at Magento, with the invitation to have a speaker at Magento Developers Paradise, Branko was the obvious choice. The fact the conference is taking place in Mallorca only helped him make the decision.

Magento Developers Paradise is an international conference for Magento developers that will be packed with keynotes, sessions, sneak peeks into the future development of the platform and, of course, fun in the sun.

Keynote speakers will include Yoav Kutner, CTO of Magento and John Lunn, Head Wizard of PayPal X. You can find out more about the confirmed speakers here.

Tomislav Bilic, our CEO, will also participate in the conference, so if you’re keen on finally meeting some Inchooers in person (and in Mallorca, for that matter), check out the conference schedule (still in the works) and register – we hope to see you there!

I also find that Illustrators tend to take good care of their websites. Perhaps it is because the web is just another canvas, and just as they wouldn’t allow ugly, out-of-place marks on their illustrations they don’t allow ugly out-of-place elements on their websites.

Here are just a few illustrators that I like, that I include here just because I follow them on Twitter and interact with them a bit.

Apparently the Niener family is made up of some seriously talented people. I’ve known Doug for a while and he consistently blows my mind with his coding and design skills. John does the same with his illustration. Interestingly, John doesn’t seem to have one particular style. The only common thread I see is unbelievably good. John will be heading up Pixel Graphic Design Studio refocused on print and illustration work. He is @johnneiner on Twitter, johnneiner on Dribbble, and has an eBook on vector graphics.

Good timing with this post, as Joe just redesigned his website and it’s kick ass. You get a great sense of his style, his humor, and plenty of examples of his work. Definitely spend some time there if you haven’t seen it yet. I knew I liked Joe after I read this part of an interview: What, or who are your influences for your illustration style? “The band logos 15 year olds draw on their Biology notebook covers.” Joe is on Twitter @hugsformonsters.

Luc’s style reminds me a bit of the style of Samurai Jack which is definitely one of my favorite cartoons of all time. His illustrations are typically people-based and are playful, energetic and just plain fun to look at. Luc has a portfolio site, is @luclatulippe on Twitter, and Tumbles (is that what we are calling it?)

Jonathan says “I enjoy the puzzles of design and creating cool and engaging solutions to visual problems.” I think that comes across strongly in his work, especially in the covers and posters which are always well put together, thought out concepts. Jonathan is @jtwilcox on Twitter, tumbles, and has a portfolio site.

I love how prolific Ricardo is. You can see his work on his Behind the Websites site as well Smashing Magazine. I first heard of him as he did the custom illustratons for the Front End Design Conference last year, as he did this year. His style is full of simple satire. Some of it works better than others, but hey, that’s life right? There is no mistaking a Ricardo illustration with anybody else and there is something to be said about owning a style like that.

Marc work is just as much about the writing as it is about the drawing. Think of what a drawing with the text “Three hairy legs belonging to aristocrats” looks like and you will probably be right. I think there is an addicting quality to his drawings where I just want to see more and more and more of them. That quality makes the book super great, amusingly named “Serious Drawings.” Marc has a personal site, is @marcjohns on Twitter (sweet background), and keeps a log of his drawings on Flickr. I really like how Marc stopped selling prints of work because he thinks people should own original artwork.

If you have some favorite illustrators of your own, please link them up!

• Select a user and then click the Update button.
• Select a user and then press the Update button.
• Select a user and then choose the Update button
• Select a user and then click Update.
• Select a user and then press Update.
• Select a user and then choose Update.
• Select a user and Update.

In my opinion, “click” is a ubiquitous enough term that most people would understand, but technically, keyboard navigation also works fine and doesn’t use “clicking.” The word “press” or “choose” might solve that, but also feel slightly strange to me.

The design is also an important consideration. We’ve already said this is a “button”. People know what buttons look like, so does it help to indicate that with text, or is simply the text inside the button good enough? Since our text is “Update”, which is an action verb already, do we even need to use click/press/choose? Perhaps just “Update” is good enough…which is also the shortest option.

The poll doesn’t include include this, but it is a worthy talking point, what about emphasis (e.g. bold/italic)? If you were going to emphasize a word (or words) in the choice that you pick, which would they be?

Thanks to Brent Traut for the idea.

I’m probably in the 2-4 camp myself, which is the winning choice. I don’t freelance, but I do do sites for family and friends once in a while. Even when I was at Chatman Design the vast majority of work we did was on sites that already were launched. This data would be more interesting if it was cross referenced with what kind of job you have. I would theorize that freelancers launch a ton of sites where web workers that work for specific organizations launch far fewer.

Here is the fun part about this poll:

How do you feel about your number? (Does it feel like too many or too few?)

What would happen if you worked on half as many websites per year?

What would happen if you worked on twice as many websites per year?

Did you just read those questions and scoff, like that would be impossible? Why?

Since I’m working with key accounts recently, I was using part of sentence “Varien, company behind Magento” quite often. The fact that Magento is open source and yet, there is a company who developed it, was confusing for some people. Especially for those who came from the osCommerce world.

Uniting the name will definitely bring more clarity to the story and corporate branding will be smoother and effective for Magento Inc. Good luck guys, to you and your 115+ employees.

In more podcast news, I got to be on Boagworld as well! I was interviewed by Paul Boag himself in the final interview ever on Boagworld. Bittersweet, isn’t it? We talk about CSS-Tricks, CSS3, Flash, and you know, just some general back and forth about stuff.

We had fun talking about Digging into WordPress, WordPress 3.0, CSS-Tricks, and more. My voice is a little booming and heavy on bass (my bad) but I just turned the bass way down to listen to this track and it sounds fine.

Floppy Moose userContent.css

This is some pretty old stuff here, but hey, CSS doesn’t move that fast. The idea is that some browsers allow you to add additional default CSS to all pages (Firefox and Safari). This is some CSS that will block a bunch of links, iframes, and miscellaneous elements based mostly on their src or href attribute, and some on class/ID.

To use it in Firefox, you put it in a special place:

To use it in Safari, it’s a preference:

Opera supports UserCSS as well, there are instructions here.

The best I could find for Google Chrome was the Advanced Page Injector extension, which should do the trick for applying your own CSS (or JS) or all viewed pages.

View CSS

Gozer.org Ad Blocking CSS

This is similar in spirit to the Floppy Moose CSS, but looks as if it’s been updated more recently and is far more ambitious with the domains it covers and types of elements it looks for. Usage would be the same as above.

View CSS

Steven Frank’s shutup.css

The idea here is to block the comment section on blogs. Sites like YouTube and Digg are notorious for having soul-crushingly bad comments, so perhaps for the thin-skinned amongst us, you’ll have an easier time getting through the day if you just don’t see them. The CSS has some specific ID’s/classnames it hides for specific sites, but also some very generic ones like #comments and .comments, which would block the comments area on most WordPress sites.

Installation again would be just like the screenshots above.

View CSS

Using Multiple

You’ll need to copy these CSS files locally to use them. That’s good anyway, as it means you can tweak things to your own preferences. It also means you could just copy one into the other to use both at the same time.

Flash Blocking

If it’s specifically flash that you want to prevent from seeing (or at least loading) there are browser extensions/add-ons you can use for that:

• Firefox: Flashblock
• Safari: ClickToFlash
• Opera 10: Enter opera:config#UserPrefs|EnableOnDemandPlugin
• IE 8: Tools > Manage add-ons > Flash player add-on > More information > Remove all sites (then when visiting a site with flash, you’ll get a notification where you can opt-in on a per-site basis)

If you have any other ideas or favorite techniques for using the userContent.css idea, let’s have um!

Here’s my knockoff:

View Demo   Download Files

The Markup

Here is the abreiveated HTML:

<table id="feature-table">
  <colgroup class="basic"></colgroup>
  <colgroup class="plus"></colgroup>
  <colgroup class="premium" id="featured"></colgroup>
  <colgroup class="pro"></colgroup>
	<thead>
		<tr>
			<th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
			<th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>50 pages</td>
			<td>75 pages</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
    <!-- More rows here -->
	</tbody>
</table>

Pretty clean. The only thing that isn’t perfectly clean is the <span> in the header. There is all that fancy gradient fancy font stuff going on. Theoretically, it could be done with a boatload of CSS3, but you know, sometimes an image is just fine dang nabbit, especially when it’s perfectly accessible CSS image replacement.

Of note is the <colgroup> element which I feel is underutilized. Colgroups allow you to target an entire column of table cells and apply styling, even though those table cells aren’t actually descendants of the <colgroup>. Kind of a weird concept, but it works, and it’s easier than applying a class name to every single table cell signifying what column it’s in.

If you need some quick markup, I have some you can copy and paste on HTML-Ipsum.

The CSS

Each header cell (<th>) has an ID. We’ll set a static height on those and set background images for them. Vertically aligning to the bottom with a bit of bottom padding allows us to place the link button evenly. The span in those headers is kicked off the page via absolute positioning (i.e. accessible hiding).

#feature-table th { height: 120px; padding-bottom: 14px; vertical-align: bottom; }
#header-basic { background: url(../images/header-15.png) no-repeat; }
#header-plus { background: url(../images/header-35.png) no-repeat; }
#header-premium { background: url(../images/header-99.png) no-repeat; }
#header-pro { background: url(../images/header-150.png) no-repeat; }
#feature-table th span { position: absolute; top: -9999px; left: -9999px; }

Speaking of those buttons. I just used the CSS Button Maker to quickly design a button I thought looked nice and fit with the color scheme, and copy and pasted the CSS into this demo.

To color the cells, I set a fallback hex code color and then an HSLa color value. These class names are targeting the colgroup elements.

.basic   { background-color: #d5e4bc; background-color: hsla(85,  30%, 80%, 1); }
.plus    { background-color: #c1dcb7; background-color: hsla(110, 30%, 80%, 1); }
.premium { background-color: #bad6c8; background-color: hsla(150, 30%, 80%, 1); }
.pro     { background-color: #bbd3dc; background-color: hsla(190, 30%, 80%, 1); }

The final product is zebra striped and has that “featured column” thing going on. but we can approach that with JavaScript…

The JavaScript

jQuery, obviously. We can apply the “odd” class to odd table rows, as well as a “final-row” class with jQuery super easily:

$("tr:odd").addClass("odd");  // Zebra action
$("tr:last").addClass("final-row");  // For extra padding

The final row has extra padding

To handle the “featured” column, and keep things semantic, we just apply an ID to the colgroup:

<colgroup class="premium" id="featured"></colgroup>

Now the JavaScript needs to figure out which number column that is.

// Figure out which column # is featured.
var featuredCol;
$("colgroup").each(function(i) {
    if (this.id == "featured") featuredCol = i+1;
});

Now we’re going to loop through all the table cells and figure out if the cell is in the column right before the featured column (if it is, apply a “leftOfFeatured” class) or in the column right after the featured column (if it is, apply a “rightOfFeatured” class).

While we are at it, we might as well apply class names to all table cells indicating their column. Colgroups were supposed to eliminate that need, but it turns out they have a fairly significant weakness. You can’t do something like:

.basic .odd {
   /*
      .basic is the colgroup, .odd is the row
      the row really isn't a descendant of the colgroup
      in other words, this doen't work
   */
}

This design calls for different color alterations depending on the column. So while we are running that loop, we’ll just apply class names to the table cells and use those class names to do our bidding.

// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column

var numCols = $("colgroup").length;

$("td, th").each(function(i) {
    $(this).addClass("table-col-" + ((i % numCols) + 1));
    if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
    if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});

The variable i in this function is the index. It basically tells us what iteration of the loop we are on. So the 50th table cell it finds, the index will be 49 (index is zero-indexed). So if we take the index modulus the number of columns (determined by testing the length of the jQuery set) and add one, we’ll have what number column the cell is in. Example: 4 columns, 10th cell found. 9 % 4 = 1, plus 1 is 2, so the 10th cell is in the 2nd column. And thus, that cell gets the class “table-col-2″.

With the row .odd classes and the new table-col-x classes, we can now truly zebra stripe as the design demands:

.odd .table-col-1 { background-color: #edf3e2; background-color: hsla(85,  30%, 94%, 1); }
.odd .table-col-2 { background-color: #edf3e2; background-color: hsla(110, 30%, 94%, 1); }
.odd .table-col-3 { background-color: #edf3e2; background-color: hsla(150, 30%, 94%, 1); }
.odd .table-col-4 { background-color: #e2ecf0; background-color: hsla(190, 30%, 94%, 1); }

Zebra action complete.

Notice it’s hex code fallbacks and HSLa again. The fun of using HSLa here was that the values are exactly the same except for the third value (the “lightness”). We increase that value 14% and that is the noticeable difference in tone.

The “leftOfFeatured” and “rightOfFeatured” classes apply a background image, just an alpha-transparent PNG shadow aligned and repeating to the left or right respectively.

.leftOfFeatured  { background-image: url(../images/shadow-left.png);  background-repeat: repeat-y; background-position: right center; }
.rightOfFeatured { background-image: url(../images/shadow-right.png); background-repeat: repeat-y; background-position: left  center; }

Conclusion

So that’s it folks. It was fun for me to try and recreate something I thought was awesome, but just in a “this is how I would do it” kinda way rather than peaking at any of their code. I highly recommend this kind of exercise, if your schedule allows.

View Demo   Download Files

Careful what you wish for… this is what you often hear, right? Well, thanks to our inbound marketing efforts, we are getting many inquiries daily with potential clients asking for some Magento work ranging from small fixes and modifications on their existing sites to full projects from scratch. To be very clear, we find ourselves in a situation where many of our fellow developers would like to be in. It is then the question of filtering out these inquiries, delving deeper into project requirements details and, hopefully, landing a project or two.

However, working with a large number of incoming inquiries can at times lead to reducing oneself to a typewriter, and getting a feeling like you’re stuck in an infinite loop, much like this one (anyone here still remembers the good ol’ Basic?)

10 PRINT: “Thank you for you inquiry. We can definitely help you with your project. Could you please share some more details together with your expected timeframe so we can prepare a more informed estimate for our work?”
20 GOTO 10

And while this is all part of the job, sometimes a thing happens like it did today when you simply have to stop for a while and enjoy the moment.

An inquiry came in saying: “I would like to build a Magento shop selling all Vuvuzelas from the 2010 World Cup to aliens so that those lovely sounds inspire their hearts for a while.” In case you don’t know what Vuvuzelas are, you’re probably not that big on football/soccer. If you want to learn more, just listen to this…

Then all hell broke loose – the team members started brainstorming on the best ways of setting up intergalactic shipments, whether there’s an UPS API available that would easily handle the shipping rates for “lower 48″ group of stars of the Ursa Major constellation, and how the payment gateway of the Ferengi bank on Uranus doesn’t support “authorize before capture” option. It was really a great way to finish off Friday on a high note.

So, if you’re looking to expand your business overstars, we’ve already started preparing…

Once Magento installation is complete, you will find the code at /app/etc/local.xml folder.

<crypt>
<key>< ![CDATA[-encryption-key-]]></key>
</crypt>

You would have thought that it is important for some process when Magento saves customers or admin user password in the database and encrypts it. However, this is not the case. When you upgrade the site to a new Magento installation, you will be able to log in with the usernames and passwords that you used, even if the encryption key is different.

But, if you forgot to remember and resave encryption key from the old installation, you will encounter a problem where some payment or shipping gateways will not work. Access data will not work although you have them in the database. This is where Encryption Key is in the story. PayPal, Authorize.net and similar transaction keys and passwords are additionally secured with this key via hash & salt method. With this in mind, if you forgot old transaction key, there is no other way to solve this issue than re-saving those access data from Magento administration interfaces.

So, golden rule is: When upgrading the site to new installation, be sure to use the same Encryption Key.

Cheers!

• Tweaking = learning. Templates need to be changed/altered/tweaked. That’s the whole idea of a template. When a beginner designer does those things, they are learning how code works. Tweaking WordPress themes is exactly how I got into web design.
• Quality. When the site is “done”, a beginner will have something they are likely very proud of. Probably more proud than if they started from absolute scratch and ended up with something very basic (or downright ugly). That will provide good momentum for sticking with it.
• “Real world.” Assuming the template is well-coded, the beginner will be looking at a good amount of quality markup and well organized efficient CSS. That is nice head-first dive into real world front end design, as opposed to starting with the kind of markup an intro to HTML book might start you off with.

But what if you aren’t a beginner?

If you are a professional designer (as in, a client came to you with web needs and you are going to build a custom site for them, and you are going to charge them more than a few hundred dollars) then using a template is, pardon me, bullshit.

The job of a designer is to carefully consider the needs of the client and the constraints at hand and create a solution. In my opinion, that includes every pixel on that site. If some of those pixels were recycled from somewhere else, then they weren’t created with the intention of solving that clients needs. I’m not saying you can’t use find/reuse/recycle things you find elsewhere, I’m saying that when you do, you ought to be manipulating them and heavily considering how they integrate into the vision for the site.

What do you think? Am I full of crap?

For you developers out there, do you feel similarly? I think the opposite might be true for developers, where recycling code that has the exact same functionality is probably the right way to go.

In recent related news, I have placed an item on the newly released CodeCanyon CSS category: CSS3 Tabs. I’ve had some interesting conversations with folks recently about the idea of selling code and designs. The interesting part is how the sale of design templates is largely given the thumbs up while selling code is largely given the thumbs down. I can totally relate to those feelings, but I’ve decided that if it’s cool for designers to get paid to sell their craft, then it should be cool for developers to get paid to sell theirs (licensing issues notwithstanding).

It sure seems like a heck of a lot of web designers are also photographers, doesn’t it? And by “photographer”, I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to have the equipment we need to take decent pictures for websites and it grows from there. Maybe it’s because photography is a lot like design. You have a canvas of sorts and you need to take into account the principals of design: color, balance, line, shape, contrast… the gestalt.

I think maybe the connection runs a little deeper though, in that it appeals to our inner nerd in the same type of way.

CSS isn’t a particularly difficult language to understand. You select things, and change the values of different properties. There is no logic, no math, no object oriented concepts, no security concerns… It largely reads like plain English. Yet, understanding it and being really good at it are pretty far apart. The old adage applies nicely:

It takes a day to learn and a lifetime to master.

CSS might seem a little mystifying at first, until you dig in a little and then you might think “this is all there is?” I found photography to be similar. At first, a DSLR can seem like a maze of settings and details to know about. It seems like learning how to change everything according to the circumstances and your desired outcome is going to be incredibly complicated. Then the further you dig in, you realize it basically boils down to your ISO, shutter speed, and aperture. Then it happens again, “this is all there is?”

It goes deeper in both directions. Yes, CSS can get more complicated with stuff like CSS3 transitions, cross-browser quirks, and trying to style form elements to look decent. Yes, photography can get more complicated with things like different lenses, dealing with white balance, and processing RAW. But those things are somewhat minor compared to the core concepts. Master those fundamentals, and the rest comes along with it over time.

#some-element {
   background-color: hsla(170, 50%, 45%, 1);
}

It is similar to RGBa in that you declare three values determining the color and then a fourth value for its transparency level. You can read more about browser support below, but it’s basically any browser that supports rgba supports hsla too.

• Hue – Think of a color wheel. Around 0^o and 360^o are reds 120^o are greens, 240^o are blues. Use anything in between 0-360. Values above and below will be modulus 360.
• Saturation – 0% is completely denatured (grayscale). 100% is fully saturated (full color).
• Lightness – 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
• alpha – Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.

Let’s dig in.

Why is it cool?

The real appeal of HSLa is that it makes more intuitive sense what changing the values will do to the color. Increasing the second value will increase the saturation of that color. Decreasing the third value will decrease the lightness of that color. That makes creating your own color variations on the fly way easier. I would wager that most of us can’t create nice and consistent color variations like this using the RGBa model.

The HSLa model also makes changing color values programatically much easier. Check out the demo tool emphasizing that.

Why is it less utilized?

This is me making a big assumption, but from what I can tell, HSLa is much less utilized in the wild than RGBa is. If you have any ideas of why that is, please share in the comments. My theory is that HSL values are harder to get your hands on, as far as sampling from the screen or a Photoshop document.

I guess Photoshop uses Hue/Saturation/Brightness model instead. I honestly don’t quite understand the difference, but when I was first attempting this, this is the situation I got in.

Getting HSLa values

There is a little app for Mac called Colors from Matt Patenaude.

You just click the magnifying glass and then anywhere on the screen. It will fill in the color in the box. Then you can select the hsla option and copy it to your clipboard. There are preferences for tweaking the formatting just how you want it to. Works pretty well. My one gripe being that if you close the little floating window, it won’t reopen unless you quit and restart the app. Might be a Snow Leopard thing and the app hasn’t been updated in a while? I dunno.

If anyone has a favorite Windows or Linux tool for capturing color that has HSLa as a feature, let me know in the comments and I’ll update it here.

Browser Support

Firefox 3.0+, Safari 3+, Chrome 6+ (maybe older too?), Opera 10+ (maybe older too?)

As usual IE is left out of the party. Even version 8. I have a feeling version 9 will be supporting it but don’t have any proof yet. Anyone have it installed and can test? For IE, you can just declare a fallback color. IE 8 doesn’t support RGBa either, so just using a hex code is the best bet.

#some-element {
    background-color: #e2ecf0; /* Fallback */
    background-color: hsla(190, 30%, 94%, 1);
}

Tool

As a demo of how easy it is to create color variations programatically, I created the HSLa Explorer. There are two slides on the page. The top one controls the hue value and the second one controls the opacity level. It takes those values and builds a grid of 100 color variations, where the saturation and lightness are varied in a matrix.

IE doesn’t like something in JavaScript (in the demo) for some reason, but no matter, IE doesn’t like HSLa anyway. Thanks to Matthieu Sieben for helping improve the demo.

Note: This post is dedicated to the store owners in general, mainly without any technical knowledge in terms of web development. Thanks.

1. 404 – page

Magento has a 404 page that looks like this:

It’s a nice start but if you don’t change it it will look like every other Magento 404 page and secondly you loose the opportunity to turn that awkward moment into a win/win situation. I won’t even mention that those demo banners need to go too

Tip 1: Go to the Admin panel to the CMS – > Pages and from the list of the pages click on the 404 page. Change the text to better suit your needs and yes please remove the dog and the shirt images or replace them with your own special banners.

Tip 2: While you’re there you could really help the visitor and yourself by adding some relevant choices. For example:

Show a particular catalog listing:

{{block type="catalog/product_list" category_id="10" name="product_listing" template="catalog/product/list.phtml}}

2. Replacing or removing the sidebar callouts

This one is a classic for everyone involved with the Magento store since it can slip thru unnoticed even days after the site is launched. These topics are as old as Magento so there is a nice thread on their forum explaining how to remove all of those unwanted features easily. (http://www.magentocommerce.com/boards/viewthread/2755/)

Here’s the rundown:

Removing callout blocks – Go to the Manage pages -> Choose the landing page you want to have it removed from and add the following code in the custom design:

<reference  name="left">

<action  method="unsetChild"><name>left.permanent.callout</name></action>

</reference>

for the left callout and

<reference  name="right">

<action  method="unsetChild"><name>right.permanent.callout</name></action>

</reference>

for the right callout. You’re done. BTW you can to all of these steps directly from the page.xml file but this is I believe easier for everyone to understand.

If you don’t need the poll simply disable it from the Admin panel:

System -> Advanced -> Modules output -> Mage_Poll

Tip: While you’re there you can disable any of the functionalities you won’t be using. It will definitely keep things simpler and the house clean.

3. Store’s favicon

Having Magento’s favicon for your store is not an option when you’re keeping up with your brand’s image so replace favicon.ico with your store’s favicon at path/to/magento/favicon.ico and

path/to/magento/skin/frontend/default/[theme name]/favicon.ico

Tip: Here’s a nice service for creating the store’s favicon in no time

Check it out:  http://tools.dynamicdrive.com/favicon/

4. Transactional e-mails setup

This one is so important that it has it’s own post on how to set those emails properly. We’ve explained in detail how to set them up and how to apply them to different stores and store-views.

Check it out:  http://inchoo.net/ecommerce/magento/custom-transactional-emails/

5. Setting up the newsletter

If you’re gonna be contacting your customers via the Magento’s biult-in newsletter system be sure to check Toni’s post on setting it up.

Check it out:  http://inchoo.net/ecommerce/magento/magento-newsletter/

6. SEO – Default title and keywords

Oh boy, this one definitely falls in the category of major oversights when launching the store or, ehm, even after the store is launched.

Tomislav wrote very informative article about it including other three popular oversights like the store favicon and the infamous missing “Google Analytics”.

Check it out:  http://inchoo.net/ecommerce/magento/most-popular-magento-oversights/

7. Store logos and e-mail addresses

Store email address definitely deserve your attention since you’ll need to change the default @EXAMPLE.COM addresses from the Magento admin. This reflects the sales emails as well so this one is a must have before any sales take place.

Tip: Go to System -> Store Email addresses and change both the names and emails to start selling.

Oh, don’ forget the PDF print-outs under the Invoice and “Packing Slip Design” section since you’ll need a logo image with at least a 150 dpi resolution to print out nicely on those invoices

Tip: Go to the System -> Sales -> Invoice and Packing Slip Design

and upload your logo (200×50) for print and print view (for HTML documents only)

8. Privacy policy and Terms of use

These to pages mean a lot to your new customers in terms of establishing a relationship of trust since you’ll be providing the answers that deserve to be answered before any shopping is done.

9. Payment and Shipping options

Clearly stating which payment options are available before the customer is already at the checkout is of great importance since it will save time for you and your customer. one example is when the customers reaches the payment part in the checkout and realizes that he/she can’t pay ’cause none of the options suit them. Having  a footer banner with accepted payments logos will remedy that situation and provide a win/win situation for all.

The same applies to shipping options and one thing to do about it would be to make a separate CMS page where you’ll be stating the payment options and/or shipping options.

Tip: Payment methods: Payment Methods -> Saved CC – Change the “Enabled” option to no if you want to avoid the liability of storing credit card numbers even if they are encrypted. It’s optional but for obvious reasons strongly recommended.

That’s it. No, of course not. With store owning and maintaing a reputable business there is always one more thing that you can do for you and your customers. It’s often those little things that make a difference so don’t put them aside. Do those last things first. Cheers!

When I decided to leave my last job, I decided I was going to leave at the beginning of the Summer. I was going to bum around the Summer not doing much, maybe even extend that for a whole year. It sounded pretty appealing. There was very little that could have strayed me from my awesome plan. I even got to turn down some pretty swell job offers.

Then one thing came along that turned that whole idea around. Something I’d way rather do than some hippie summer. I am now working for Wufoo!

I bet a lot of you know that I’ve been a big fan of Wufoo. Wufoo is a form building web service. It’s a big part of my belief in instant productivity. Designing forms and giving them a high degree of functionality is a ton of work. Wufoo makes that job so trivially easy, it is actually fun.

I am going to be doing a variety of things with them, including design work (yay!) and blogging (yay!) and more. In fact you can already see my first blog post on the Wufoo blog: a tutorial on creating a poll with instant public results. Check it out and let me know what you think.

If you do the social media thing, I’d encourage you to follow Wufoo on Twitter / fan Wufoo on Facebook. We intend to keep people updated on new Wufoo stuff (there is lots of cool stuff in the pipeline) but just as importantly, share interesting resources and research through those outlets. Most importantly, if you’ve never tried Wufoo, you ought to sign up and give it a whirl. I’m not just towing the company line here, it’ll change how you feel about building forms.

However, keep in mind that upgrade will not be painless. On contrary, I expect lot of issues with lot of custom extensions coded around the “Sales” functionality. Reason for this is the “Sales module database structure changed from EAV into flat tables”. Hopefully you, the site owner, can spare several hundred of dollars for the upgrade. So please, as I developer all I can say is be gentle on us if your site snaps during the upgrade process .

Besides the obvious (read usual) bug fixes, there were several other under the hood changes and improvements such as updated version of TinyMCE, ability to exclude a category from navigation menu, ability to use static URLs for media in WYSIWYG or image browser and other neat stuff.

My favorite change is the one related to the PayPal section. Seems like finally someone decided to organize this stuff under one menu item, you know the one under System > Configuration > Sales > PayPal. Not much but it makes people like me happy.

My apologize if I left a bit sarcastic impression. Thats just me , and my sincere need to express my self from time to time. Besides, speed aside is there any serious shop alternative when it comes to features for Magento?

Anyhow, thats about it. Please read the official Rlease Notes – Magento 1.4.1.0 stable (June 10, 2010) for full info.

And happy upgrade to all you trying to stay up to date

How do you upload images now?

You select a file and click upload. Simple right? Except once you select your image you can no longer see what was selected. The name of the file is at the end of the input, and if the input is short, or the file path is deep, you’re not going to see anything useful. You forget what you selected and have not idea what you’re about to upload. “Wait, did I upload a picture of my face or something less professional?”

Let’s make it better.

The key is having an image preview that gets shown before the user needs to commit to saving it. So we ditch the upload button in favor of a save button. Now when a file is selected via the file section input, some AJAX kicks in. The image is processed server side and a thumbnail is loaded onto the existing page.

Doesn’t that feel so much better? We now have a visual representation (imagine that) of the image we selected.

This is particularly useful in larger forms when many fields will be submitted with a single action. It allows the user to review the form before pressing save and see what image (or images) they selected.

How it’s done

Curious how this is done? Here’s the code.

We can use a standard HTML form. We’ll include that as well as an image preview area.

<div id="upload-area">
	<div id="preview">
		<img width="100px" height="100px" src="/images/icons/128px/zurb.png" id="thumb">
	</div>

	<form action="/playground/ajax_upload" id="newHotnessForm">
		<label>Upload a Picture of Yourself</label>
		<input type="file" size="20" id="imageUpload" class=" ">
		<button class="button" type="submit">Save</button>
	</form>
</div>

The action of the form should point somewhere the process the uploading of the image, regardless of the presence of JavaScript. You may also want to consider only appending the preview markup via JavaScript, as that won’t work without JS.

You’re going to need jQuery and the AJAX Upload jQuery plugin by Andrew Valums. Link them up, making sure jQuery is loaded first. Note that the AJAX Upload plugin does require some configuration and server side stuff to work. Check out that link for details.

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

Here is the JavaScript we’re going to add in its entirety.

$(document).ready(function(){

	var thumb = $('#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('#preview).addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('#preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

Here’s that in plain English:

1. Attach plugin behavior to the file input
2. Specify the action URL, appropriately pulling it from the action URL in the markup
3. When a file is selected, immediately add a class of “loading” to the preview area. This class name, through CSS, hides the image (e.g. .loading img { display: none; } and applies a background image (a spinner)
4. Upon AJAX success, remove the loading class and set the src of the image to the response URL that the plugin returns.

Preview Only

Note that the above code deals with the preview functionality only. The file section input still contains the proper file path. So when the user clicks the “Save” button, the form will still need to be processed and handled by whatever server side technology you have ready for that. So yes, you will be essentially uploading the image once (for the preview) and then uploading it again (to save it in a more permanent way).

When you are setting up/configuring the plugin, you’ll set up a directory for a server side script to save uploaded images to. You might want to have that live at somewhere like /images/temp/. That way you know that anything uploaded to that directory is transient and can be cleaned out temporarily to keep the server clean. A empty-that-directory CRON job might be a good idea.

Demo

A working demo is available on ZURB’s site, which also includes more written information. Because of the server side stuff needing to happen, a download unfortunately isn’t practical.

View Demo

Put hardhat on
Start jackhammer
Bust up a bunch of cement

Here is another way she could have gone about it:

Scout out area
Determine weather conditions
Make labor assessment
Evaluate different jackhammer models
Stretching and breathing exercises
Get third party opinion
Coffee break
Put hardhat on
Start jackhammer
Bust up a bunch of cement

Which way is more efficient? The go-getters amongst you might say the former — just get after it! The more management types among you might argue the latter — having a full evaluation of the task means the job will be done with more efficiency once it’s started.

The answer, in my opinion, as most things in life, is somewhere in between. But a lot more former than latter, especially when it comes to web work.

Let’s bring it back to the web. Now the job at hand is designing a specialized landing page for a product. Here is one way she could do it:

Open up Photoshop
Start playing around with ideas
Land on something decent, or go back to the top

Here is another way:

Conduct interviews with potential customers
Analyze past analytic data of website
Browse web design galleries
Go on urban walking tour for color inspiration
Evaluate latest web technologies for animation
Poll twitter followers for opinions
Attempt to use Fireworks instead of Photoshop
Coffee break
Catch up on email and RSS feeds
Open up Photoshop
Start playing around with ideas
Land on something decent, or go back to the top

Clearly there is value in the latter group. That group is filled with activities that will help us grow as designers and dig into our current task at a deeper and perhaps more insightful level. It is also filled with glorified thumb twiddling.

Choice of Tools

I use WordPress. It just so happened that back as a fledgling wanna-be web designer I came across it, installed it, and starting using it to make sites. Years later, I’m still using it to make sites because I know it really well and I don’t feel limited in its abilities. I don’t feel particularly compelled to even try Joomla, because with WordPress I can be instantly productive, rather than enter a new learning curve. Call me crazy.

I’m also aware that that is dangerous territory. The web moves fast and it’s easy to get left behind. I’m sure we all know some old curmudgeons that are convinced some crazily outdated technology is superior. We might laugh and point. We might be right. Or they might be right. Maybe they are the ones being instantly productive.

Bob Staake uses Photoshop 3.0 and nobody is calling him unproductive.

So what?

My point is that if you have a job to do, just get after it. Roll up your sleeves, get the tools ready that you already know you can be productive with, and start dishing out some instant productivity.

Then maybe after you get some work done you can read you feeds and do some scholarly thumb twiddling =)

So, what was on the plate? In order to do anything mobile with Magento you need to connect to its API, whether it is SOAP or XMLRPC API interface.

Personally I am a bigger fan of XMLRPC (can’t say why actually). In regards to that, my first task was to connect my Android to Magento XMLRPC API. Surprisingly, Android framework (SDK) does not have feature rich and ready classes for doin XMLRPC calls like lets say Zend Framework has.

Luckily for me, there was already someone who had to deal with this issue before me. If you open the Android-XMLRPC page you will find a nice little library for handling the XMLRPC in Android. This was all I needed to get me started. Here is an example of how to connect to Magento trough this library.

// ...

String sessionId = "";

//HashMap<string , String> params = new HashMap</string><string , String>();
//params.put("apiUser", "developer");
//params.put("apiKey", "magento123");

XMLRPCClient client = new XMLRPCClient("http://some-site.com/index.php/api/xmlrpc/");

try {
	/*
		sessionId = (String)client.callEx("login", new Object[]{params});
		will cause
		DEBUG/MY_XMLRPCException_MSG(196): XMLRPC Fault: Calling parameters do not match signature [code 623]
	*/
	sessionId = (String)client.call("login", "developer", "magento123");

	Log.d("MY_XMLRPC_SUCCESS_SESSION_ID", sessionId);
}
catch (XMLRPCException e) {

	Log.d("MY_XMLRPCException_MSG", e.getMessage());
}

// ...

By executing above you will most likely trigger the exception and get the following error.

/*
06-09 09:33:53.313: DEBUG/MY_XMLRPCException_MSG(226): java.net.SocketException: Permission denied (maybe missing INTERNET permission).
*/

As you can see, error is pretty self-descriptive. You need to open your AndroidManifest.xml file and add the following inside the "manifest" attribute.

/*
<uses -permission android:name="android.permission.INTERNET"></uses>
*/

After successfully executed XMLRPC request, you should see the log message like shown below.

/*
06-09 09:49:27.163: DEBUG/MY_XMLRPC_SUCCESS_SESSION_ID(223): 9273ad9a5a52a959fec32439944bc84b
*/

Meaning you now have session id and can do the rest of the Magento XMLRPC method calls by passing this session id.

Also, you can see in the code, that I commented some stuff. For those ambitions this is a little tip on how to do more complex API calls to the rest of the Magento XMLRPC API methods exposed. This one you need to figure on your own.

Hope it comes in handy to the Magento-Android newcomers.

From Croatia with love, cheers.

The web interface for Google Reader is pretty good. They have mobile web versions as well that also aren’t bad. But there is one little thing that kills me about the web version of Google Reader. Let’s say you come down to an article you want to read…

Step 1: Keypress: J-J-J-J, Oh cool, this article looks interesting, I think I’ll read it.

Step 2: Oh crap, where did the article go all the sudden? OH YEAH IT WAS PUSHED DOWN OUT OF SITE BECAUSE AN IN AN ARTICLE I ALREADY SKIPPED HAS NOW LOADED ABOVE IT.

Yeah, there are ways around it. I could switch to collapsed view. But it’s the principal of the thing. I specifically skipped the article above and gave a new article focus. Focus should not be ripped away from me for any reason at that point. It happened to me so many times I just had to give up on the web Google Reader.

On the iPhone I use dedicated apps for RSS reading (I like both Byline and Reeder). I figure why not use a dedicated app on the desktop too. I have a friend who swears by NetNewsWire, so I’ve been using that. It’s pretty great. It has a really simple and easy interface. Not much to get in your way, but just about everything that you need. My favorite part is how it has a built in web browser, so switching over to read the article on the site is really quick and painless. It uses WebKit internally to do that.

NetNewsWire also supports themes. Here is one that ships with it:

C’mon, really?

The themes that come with the app aren’t particularly impressive. For one thing, they are literally all fluid width. One of my biggest gripes about fluid width on digital screens is how typically the only thing that happens when a screen is adjusted in the line length of text changes. Ironic, in that in my opinion the only thing that shouldn’t change in a fluid width layout is line length.

If you open up the applications package, you can drill down and find where the themes are kept. They are files with the .nnwstyle extension. If you then show the package contents of those, you can see the how they are built. They are literally just HTML and CSS files. Awesome.

Right click > Show Package Contents

Fixed

So I set about trying to build my own theme. I probably went through 5 different ideas and I’m still not entirely satisfied with this, but I’m just gonna stop fiddling with it for a while and let it sink in. I’m also going to share it here in case anybody else is a NetNewsWire user and wants to try it, or have a base to play with their own.

I’m calling it “Fixed” because:

• It’s fixed width.
• It has a fixed header.
• It fixes a bunch of stuff I found annoying about feeds.

It looks like this:

Hey, it ain’t much, but that’s kind of the point. The idea is to get out of the way and just make articles as readable and cruft-free as possible.

Features

• Title is big and fixed so you can’t forget what you are reading and are always close to a link to it’s real URL on the web.
• Source and other meta information are fixed above the title for similar reasons.
• jQuery is loaded into the theme, which is utilized a number of ways.
• Line length is fixed at a comfortable length.
• Images are forced to be block level and spaced out (some sites leave images inline with text and it causes weird layout issues over RSS)

Widows in post titles are prevented by inserting a non-breaking space between the last two words like this.

• Embedded videos (or any embedded content from any source) is forced to be the same width as the line length.
• iframes are removed. Google ads in feeds come across in iframes, so those are gone. I can’t think of any real legitimate use for an iframe being in RSS.
• Tweetmeme/ReTweet buttons are removed.
• Any images that are really small (under 30px in both height and width) or specifically related to FeedBurner are removed. This removed a lot of junk from the end of a lot of feeds, including seeing a zillion “sharing” buttons or FeedBurner cruft.

Download Files

I think you can just double-click it from the desktop, and assuming you have NetNewsWire installed it will install it as a theme.

Only gripe about NetNewsWire: it says “flagged” instead of “starred”, can’t we just use “starred” and keep it consistent? But worse, you can’t “share” things, which I like to do. It does have Delicious and Instapaper support though, which rocks.

Totally Friggin Fake It

From the Spectrum Theme website

The end result of any web design is basically an illusion anyway. You can always create your transparent effects in Photoshop or whatever other graphics editor and export flat graphics. In Photoshop, transparent effects can be created by changing a layers opacity level, fill level, or blending mode, just to name a few.

Opacity

This entire button has opacity applied to it, to emphasize that it is currently “disabled”.

You can make any element transparent by using the opacity parameter of CSS.

#anything {
  opacity: 0.5;  /* 50% transparent */
}

If you need to support older browsers, see here.

Do note that all descendants of the element with opacity also become transparent. There is no way to “force” any descendant to be come any less transparent as the parent is.

RGBa / HSLa

From the Like Architects site

Using RGBa for a color value in CSS, you can set a transparency level on any color. This has the distinct advantage over opacity in that it doesn’t have any affect on descendants. It is also nice in that creating faded out variations of a color is as easy as changing the final alpha value. Speaking of color variations, that is even easier to do with HSLa, and is still able to handle transparency.

#anything {
  background: rgba(0,0,0,0.5);  /* 50% transparent */
}

#anything {
  background: hsla(0,0,0,0.5);  /* 50% transparent */
}

PNG

From a Dribbble

When “Saving for web” from Photoshop, you have two choices for PNG’s: PNG-8 and PNG-24. PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between. PNG-24’s, while far bigger in file size, support full alpha-transparency.

In the example above, the shadows from the content areas are from PNG-24s so that the texture in the background can change and the shadows will still be the same.

We had a pleasure to work with two great individuals Dan Stuart and his co-founder Sohrab Jahanbani. They already have 22 deals scheduled over the next month, with daily e-mails going out to more than 2,500 people in Dubai and to a significant following on Facebook and Twitter.

Every day GoNabit features one or two huge deals. Once there is a minimum number of buyers, deal ‘tips’ and the credit card gets charged. At this time GoNabit sends voucher to the buyer. Buyer can then print his voucher and take it to the local merchant for redemption. If the minimum number of purchases is not reached before the deal ends, no one gets charged and no one gets the deal. This is how social component and the community work together on boosting sales.

GoNabit became a popular topic in Dubai where people are chit-chatting about current deals on their coffee-breaks.

View the site at: www.gonabit.com

We’ve recently worked with Michael Yoong and Monica Zhu to help them freshen up their Magento online storefront. They have prepared the new design files, and our developers Branko Ajzele and Filip Svetlicic did a great job guiding the clients in the process and implementing their ideas in line with the best Magento practice. Much of the credit for successful implementation of this project is due to our clients as well who were well prepared, had clear set of requirements, new exactly what they wanted to achieve, and were very receptive to our developers’ advice.

Working with Fresh Purple was a great experience and we can wholeheartedly recommend doing business with them to anyone. Make sure to check the new site at http://freshpurple.com

“Having set up a basic Magento store with a local developer in order to get a feel for the system, we were looking for someone to help us produce a professional redesign of our website. We were very impressed by the wealth of Magento knowledge and expertise that Surgeworks/Inchoo had published on their blog and so contacted them for a quote. From then on, it was smooth sailing all the way.

Communication with the developers was great and they were a real pleasure to work with, implementing everything from our design without complaints or any seeming difficulty. They were ready with advice to improve our initial design and very helpful with providing suggestions, tips and tricks to make running the store as smooth and trouble-free as possible after their work was done.

We couldn’t have found a better group of Magento professionals to work with and we will certainly use them again for any further work we need. ”

Michael Yoong, Director, Fresh Purple Jewellery

Boy, that’s a nice button right there.

I’m saying “CSS3″, because these make use of gradients, shadows, and rounded corners which contribute greatly to their button-ness. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners. Not a big deal.

I hope this is painfully obvious, but to use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons. The CSS isn’t formatted real pretty. If someone has an idea on how to make that better, please do let me know.

The super-awesome empowering concept…

…in regards to how the Button Maker preview works.

It’s easy to change the CSS of an element on-the-fly with JavaScript. But how can we change the :hover state? The answer is that we can’t really, at least not really easily. We could attach a mouseenter event that would apply some new CSS that would override the old, and a mouseleave event that would put it back. That’s a lot of overhead for something so relatively small. It gets even more complicated if we wanted to control the :active state as well.

This Button Maker shows you a live working version of the button you create, complete with :hover and :active states. It is done without attaching any JavaScript events to the button itself. So how is it done? I did it with a technique I ripped off from Doug Neiner who presented it (as small part of a totally different application) at jQConf.

OK OK I’ll get on with it. The idea is to append a <style> element into the <head> which overrides the existing CSS (in-document CSS automatically overrides linked CSS for selectors with the same specificity value). Then when something changes, you literally rip the whole style tag out, and replace it.

Appending a new style:

$("head").append("<style type='text/css'></style>");

Text variable where the CSS will be kept. Keep this text up to date when options change.

var cssText = "";

Use the replaceWith() function to rip out existing style element and apply a new one:

$("style").replaceWith("<style type='text/css'>" + cssText + "</style>");

The ripping-out part is important. Originally I tried putting an ID on the style element and replacing the content within it on the fly. It did replace the content, but those changes were not reflected on the page. Apparently in order to force the browser to re-render with the new CSS, you have to literally remove it and put it back.

Take it, shake it

I’ll provide the source for the thing in case you want to run it locally for whatever reason. Or even better, because you want to make it cooler. If you do, please share.

View Demo   Download Files

How many websites do you launch per year?

The idea is to gauge how many different projects you all are involved with that actually launch in a year. I’m sure some of you work on sites that we launched long ago and you just work on maintaining and growing them. So if that’s the only web work you did this year, your answer would be zero. I’m sure also some of you work at churn-and-burn design agencies that are spitting out sites very quickly for clients.

Include sites that you worked on in any significant capacity. If you did a some backend coding for the site, that counts. If you just did the markup part for a good chunk of it, that counts. If you designed the header, that counts. If you spent one hour consulting on the project, that doesn’t count. Just count the sites that you played a vital and significant part in its construction.

Feel free to vote based on an average or quick appraisal, but if you want exact dates, let’s say June 1 2009 to June 10 2010.

What is your server-side language of choice?

Now I’m definitely a front end guy writing about mostly front end stuff. Because of that I kind of a assume most of you folks are too. That doesn’t mean we don’t care about or have an opinion on server side languages too, just know that these poll results are probably indicative more of designers than developers. I essentially got started hacking up WordPress themes and I haven’t moved to far from that, developmentally. So my affinity is for PHP. My favorite part is how it kinda “just works” on just about any server out there out of the box. I also like how at the basic levels I use it at, the app doesn’t really need to be “running,” it just is a series of scripts that do their thing when they are hit with a request. But anyway, on with the results:

Looking at these results it looks like PHP’s domination of the server side language market is just about as complete as jQuery’s over the JavaScript library market =)

I’ve moved this over to the polls archive. Any last words, leave them here! New poll in a few days.

There is some debate if these fancy transitions and animations that CSS3 bring us belong in CSS. It might be argued that things moving around like that is “behavior” and not “design” and thus belong in JavaScript. I disagree with that sentiment, and that animations are definitely “design” and if we can keep that stuff in CSS, we should. Thus, I’m updating this idea (see original links above) to utilize CSS3 keyframe animations.

The stars fly by WebKit browsers. In all others, resizing the browser window still yield a cool parallax effect.

View Demo   Download Files

Declaring keyframe Animation

This is how you declare a keyframe animation. We’ll name our “STAR-MOVE”:

@-webkit-keyframes STAR-MOVE {
	from {
		left: 0;
		top: 0;
	}
	to {
		left: -10000px;
		top: -2000px;
	}
}

UPDATE: This is about twice as efficient (from my rough CPU monitoring test). Because here were are just shifting position whereas the old way we were expanding the size of the area the browser needed to render/keep track of.

@-webkit-keyframes STAR-MOVE {
	from {
		background-position: 5% 5%
	}
	to {
		background-position: 1300% 600%
	}
}

You aren’t limited to “from” and “to”, You can stick more of them in there, based on percentages. Like 40% { } which will animate to those properties/values when the animation is 40% complete.

Our animation is very simple, we will animate position of the background-image, basically pulling the elements toward the upper left. Not every single property is able to be animated, but generally anything with a numeric value (including colors) can be. But you can’t, for example, animate a font from Helvetica to Georgia.

These properties will override any previous settings for the properties specified. So for example, since IE doesn’t support these, you might want to set the properties with regular CSS in a way that makes sense if there is no animation. Then know that those properties will be overridden with the from/0% properties of the animation.

Using the keyframe animation

We have three “layers” of stars, each that cover the entire screen with a repeating alpha-transparent layer of background graphic stars. We can call the same animation on all three divs, only with different durations.

#background {
	background: black url(../images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#midground {
	background: url(../images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 150s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#foreground {
	background: url(../images/foreground.png) repeat 35% 35%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 300;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

The larger stars move faster (they are “closer” in the illusion and thus should go by faster). They appear to move faster because the duration of the animation is shorter, and thus they need to move a further distance in a shorter amount of time.

Animations use “easing” functions. That is, a mathematical formula is applied to control how quickly the animation “gets up to speed” and back down. Without easing, animations could look jerky and awkward. The default in webkit is “ease”, which slowly brings an animation up to speed then slowly back down. In this particular example, that didn’t make sense, because at the end of the 100s the largest stars use, the animation speed is so slow the stars behind it go faster (weird). So notice in the above code we reset the easing to “linear”. For a complete list, see here.

Browser Support

WebKit browsers only (Safari, Mobile Safari, Chrome) at the moment. I know Firefox 3.7 is going to have support for transitions but I’m unclear on if it will have it’s on prefix for keyframe animations or not. If you know, let me know.

This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.

Right to Left

One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a[title="home"] the first thing thing interpreted is a[title="home"]. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.

ID’s are the most efficient, Universal are the least

There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:

#main-nav > li {   }  /* Slower than it might seem */

Even though that feels weirdly counter-intuitive… Since ID’s are so efficient we would think the browser could just find that ID quickly and then find the li children quickly. But in reality, the relatively slow li tag selector is run first.

Don’t tag-qualify

Never do this:

ul#main-navigation {  }

ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient.

Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t.

Descendant selectors are the worst

David Hyatt:

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive — especially if the selector is in the Tag or Universal Category.

In other words, a selector like this is an efficiency disaster:

html body ul li a {  }

A selector that fails is more efficient than that same selector matching

I’m not sure if there is much we can learn from this, because if you have a bunch of selectors in your CSS that don’t match anything, that’s, uhm, pretty weird. But it’s interesting to note, that in the right-to-left interpretation of a selector, as soon as it fails a match, it stops trying, and thus expends less energy than if it needed to keep interpreting.

Consider why you are writing the selector

Consider this:

#main-navigation li a { font-family: Georgia, Serif; }

Font-family cascades, so you may not need a selector that is that specific to begin with (if all you are doing is changing the font). This may be just as effective, and far more efficient:

#main-navigation { font-family: Georgia, Serif; }

CSS3 and Efficiency

Kind of sad news from David Hyatt:

The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance.

The whole comment is worth reading.

CSS3 selectors (e.g. :nth-child) are incredibly awesome in helping us target the elements we want while keeping our markup clean and semantic. But the fact is these fancy selectors are more browser resource intensive to use.

So what’s the deal, should we actually not use them? Let’s think about practicalities a bit…

Practicalities

That Mozilla article I linked to at the top? Literally 10 years old. Fact: computers were way slower 10 years ago. I have a feeling this stuff was more important back then. Ten years ago I was about to turn 21 and I don’t think I even knew what CSS was, so I’m not going to get all old school on you… but I have a feeling we don’t talk about this rendering efficiency stuff very much is because it’s not that big of a problem anymore.

This is how I’m feeling about it: the best practices we covered above make sense no matter what. You might as well follow them, because they don’t limit your abilities with CSS anyway. But you don’t have to be all dogmatic about it. If you happen to be in the position where you need to eek out every last drop of performance out of a site and you have never considered this stuff before, it may be worth revisiting your stylesheets to see where you can do better. If you aren’t seeing much rendering slowness in your site, then don’t worry about it, just be aware for the future.

Super-speed, Zero-practicality

So we know that ID’s are the most efficient selectors. If you wanted to make the most efficiently rendering page possible, you would literally give every single element on the page a unique ID, then apply styling with single ID selectors. That would be super fast, and also super ridiculous. It would probably be extremely non-semantic and extremely difficult to maintain. You don’t see this approach even on hardcore performance based sites. I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.

Thanks to Jason Beaudoin for emailing me about the idea. If anyone knows more about this stuff, or if you have additional tips that you use in this same vein, let’s hear it!

Just as a quick note, I’d also like to mention that since CSS style selectors are also used in many JavaScript libraries, these same concepts also apply. ID selectors are going to be the fastest while complicated qualified descendant selectors and such will be slower.

NBS System is a managed hosting company working mainly on Magento so they have a lot of Magento hosted to put it short (~200 sites). They also maintain a blog regarding Magento optimization and this is a translated post from it (Wikigento):

Here is a small contribution of the support and commercial best phones call, along with other « real life » experiences. The worst questions, the silliest ideas, the best wills hybridized with the worst technical solutions, just see by yourselves.

PS : We always laugh with no bad intentions. Every jobs has it stakes, constraints and problems, one’s difficulty is not to be laughed at but our day-to-day life can be rejoiced by some juicy results ! We also make mistakes, who don’t

Here are the best contribution to the “Magento Darwin Awards contest”:

Oscar of the most brilliant idea : The S.O.D (“The Slider O’ Death”)

Brillant, simple and efficient concept. Just imagine a homepage of a fashion brand website.
At the bottom of it, 5 cursors you can move in order to position them on the product, size, color, type you want. IE : shoes, blue, suede model, 8”5, adult male, etc.
Okay, now just imagine, 15 product types, 6 sizes, 6 product model on average, 12 colors, 6 types (Adult M/F – Kids M/F – Teenager M/F) : 38 800 possibilities… You move one cursor, this cause 38 800 SQL requests… Actually a bit less because you can move only one category at a time.

In order to make it a *real* server killer, the developer had a good intention: Ajaxify all of this to make the Database server die in background silently while trying to send back the results. You move the size slider from left to right, 6 positions, you take the 38 800 SQL requests. Of course, one could have put a temporization or a cache system to make the thing a bit lighter but, guess what…

Now just image 100 people connected at the same time playing with the awesome feature. Or just Kevin, 12 years old, taking daddy’s mouse and moving a cursor quickly from left to right…

Back office talks: Oops, the database server died, any idea of what happened ? Logs shows he died after trying to answer 1 million requests per second…? Are we hosting Amazon and nobody told me ???

You liked S.O.D concept ? Okay, here is a real player : The O.M.O.D (“On Mouse O’ Death “)

They only rank second since someone had the original concept first but they deserved to have a place in the pantheon since this method is far more efficient to create a D.O.S situation. No more need to clic !!!

Take the same concept almost but with a On Mouse Over to send the SQL requests… You move around a bloc of products with your mouse and “dynamically” (or is it “dramatically”), this loads the products in the category to populate the main page space…

10 categories, 200 products per cat. Make a full move, this loads 2000 products from the database, now move quite fast. YESSSS ! this works, no cache mechanism, we can D.O.S it without any clics !

Back office talks: Did anyone understand why the database server, usually asleep with Magento, is trying to suicide itself !? I told you guy before, never breed a database server with +1/4 spin electrons, this make them sick !

The Big Bad Cron : 2 Go should be enough for everybody, almost…

Crons, our friends, our worst nightmares. The only word is enough to make a Level 1 support guy to pull the plug.
Usually, they make automatic imports of flat CSV files or batch processing of any needed files. Theses scripts are consuming more and more RAM and CPU until exhaustion because they never meet an efficient exit condition or just loop insanely on the same lines.

One or two Gigs later, the servers launch an automated alarm saying something like :

“Dear Admin,
please, can you disable this stupid bunch of code before I trigger
some friendly self defense mechanism like kill -9 ?
Truly your, the server.”

Of course, later on, you proposed to limit the memory a PHP process can consume to a far more reasonable value because this limit is set to all PHP process and this can get very very dirty. As the developer feels it is a unnecessary precaution, he code the killer cron another way, including some tricky optimization that consume CPU instead of RAM…

RAM to CPU to Trade Off. I mean when you see the function name, you already feel this is going to be fun… Well the server was about to reach a load of 80 (100% load = 8 on this 8 core server).

Back office talks: Guyz, I’m trying to get a shell to the server but he doesn’t answer… Any ideas ? Is he gone for lunch ?

We also make mistakes!

As we are not more perfect than the others, we sometimes do mistakes.
We decided to use some self defense mechanism against those « Killer crons ». Sysfence was chosen to watch the resources consumption and if a process is going to kill a server by consuming too much, he tries to stop it, if not possible the process gets a “friendly” kill and if it tries to stay, a quite virile “kill -9” (far less friendly).
The catch was, when the swap space becomes to be filled, the Sysfence consider it like a problem (which is the case) and tried to restart apache. Actually, Apache understood that resistance is futile (and sanctioned by a kill -9) and restarted. But the Swap doesn’t instantly free the allocated space and Sysfence saw the result was not good and… Restarted apache again… and again… and again… …

Back office talk: Is it normal the website of our customer is… blinking? I’m there, oops, I’m there, oops…
(of course, the fix is to let a bit of time, like 10 seconds, before starting the process again)

My Java is beautiful

This is not directly related to Magento but one of our customer uses a very user friendly catalog presentation. You know the kind of “like if you had a real paper catalog in your hand” thing. This beautiful piece of software is provided with a lot of “must_have” features like the possibility to make a 3° counter clockwise rotation. So handy…
The neat feature is that the catalog is able to “auto scale” to the browser heigh & width, providing an always perfectly scaled catalog. Once again, intention was good, implementation was, how to say, not that clever.

Each time someone come with their parameters (my browser isn’t full screen, so my usual resolution is 1211*940, which is not yours I bet), the server had to calculate all the images displayed to make them fit the browser. Just had to this a beautiful Java bug which never trigger the garbage collector, put 10 000 people per day looking at the “paper like catalog” and you have a server allocating ~200 Mo per minutes…

Theses servers are a braves one and have only died after 80 Go of swap were allocated, after 6 hours and a half… No solutions here, product editor has disappeared (which is not really a surprise up to Darwin laws) and we still have to kill the JVM on an hourly basis.

I’m the supervisor!

This is the story of a programmer who’s regular process (don’t say the name Cron please) are consuming too much resources. Sounds familiar no ? Well this one is a bit different. As we don’t want to raise the php_memory_limit, even at night, above a reasonable value (and yes reasonable is not the same value to programmers and to sysadmin), the guy found a way.

He tests the server load with a PHP daemon (yes this starts to be fun), on a regular basis, and when the load is getting low, he launch its batch processing. If the processing gets too resources angry, he stops it, nicely.

When we say regular basis, we wouldn’t have thought he was planning on testing the load every 35 ms… So every 35 ms, this process awakes and launch a dramatically “not optimized” free resource check, consuming a lot of CPU and RAM, like 10 times what is needed by a C process to do the same. As the PHP daemon needs more than 35 ms to fully process the task…

This way of proceeding, with this frequency is quite CPU intensive itself to say the least.

Back office talk: WHAT IS THAT ®#¤! “batch_supervisor” which is triggering … oops. Connection reset by peer. 100% packet loss.

My slave is beautiful

Hello. I Mme Doe from (a major) company.
Hello, I’m Philippe, what can I do for you ?
[...] I’d like when you can come to our office to setup our servers? [...]
Oh, I’m very sorry, we don’t do that kind of things. We only optimize our customers architectures, not the one of your actual managed hosting company, which is a competitor of us. (this would be like shooting a nuke in our foot no?)
But wait, you will be paid for it. *450 € per day !* (emphasis). But you have to be there tomorow and for the next 5 days in a row.
Oh, my mistake, I think I didn’t made it clear. We don’t do this kind of work madam.
Even if we did, (and we don’t), a Magento Expert, no matter if he is a developer of Admin, will never charge such a price. More, you can’t call anyone one day and ask them to be there on the next morning, we’re an expert companies, people have schedules.
Listen, I can see you make no efforts, haven’t listened to our generous proposal and I think we won’t work together!
Damn, I’ll get fired to have refused such amazing offer…

May I post you my site ?

This is the story of a guy willing to put its customer site online. After trying for 4 hours unsuccessfully, he calls the L1 support and announce:
You system is buggy, it stops the transfert after only 5 Mo and I just can’t put this site online.
Okay, can you please provide some detail, like what kind of protocol have you tried to put this site online ? FTP, SFTP, SCP ou SVN ?
Listen, I just tell you this stops transferring avec 5 Mo, this is not a about the protocol.
Sorry, this could help us to find where the problem is, would you just please tell me the used protocol ? I swear after I won’t bother you anymore with this question.
I’m using OTRS.
Our Level 1 ticket submission tools ???
Yes.
But it’s not made to publish a website. The upload field is made to optionally send us a screenshot of the problems but you have to use the provided credentials along with a protocol dedicated to file transfer like SFTP or SVN.
You swear about the protocol!

Grand Jury special price of the tricky-to-find-glitch : I SVN, you SVN, I killed the servers.

This time we talk about a quite famous brand doing a special incentive and mailing campaign. 20 days before the campaign, the project leader call the web agency and say: “Can you please prepare a special home and make 2 or 3 modifications ?”. “No problem madam”.
Special sales starts :

• 500 connected people, good but slow to load… ?
• 1 000 connected, oops, load is rising fast on all 3 servers
• 1 500 mayday mayday, server down, I repeat server down !

We look for the problem, « have you changed anything today or recently ?”. “No, nothing, all is nominal”.
2 hours after, we found the problem. The Web Agency had overwritten a file named /var/www/eu/app/etc/use_cache.ser with its own local version. Guess what, this file is controlling the cache behavior and guess what, developers usually cut them to instantly see the changes when the modify a site (which definitely make sense). But when you upload this file to the server and disable all Magento cache mechanism, this is a very bad situation for the servers…

Back office talk: chmod 500 /var/www/eu/app/etc/use_cache.ser. Won’t happen again, believe me.

My home is slow…

« In the developer mind » : Okay, I take my 6 000 products, I make a loop, for each product on my home, I launch my amazing loop to find among the 6000 the one I have to load and I fill the 200 slots on my home.

Damn, it’s slow, am I hosted on a Pentium 3 ???

Back office talk: Multiplication is quite tricky concept. I’ll make it slow for you. 6000*200*[nb of users] means that …………

Published by Inchoo with the authorization of Wikigento, NBS system and the author.

All we need to do it edit 3 lines.

Open: index.php in root and above line 57 add (remembering to edit the ‘allowed’ array to contain the IP’s you want to be able to access the site);

$ip = $_SERVER['REMOTE_ADDR'];
$allowed = array('1.1.1.1','2.2.2.2'); // these are the IP's that are allowed to view the site.

then change the line
if (file_exists($maintenanceFile)) {
to
if (file_exists($maintenanceFile) && !in_array($ip, $allowed)) {

Simple. Now you can access the site, while others see its maintenance mode.

This is my guest article at Inchoo website. My name is Alan Cole. Feel free to meet me at my website.

Google announced their new Font API yesterday, including a font directory and preview tool. They teamed up with TypeKit, to build and open source the WebFont Loader.

I quite like how they have done it. You just hotlink the CSS right from Google and then reference the font names in the CSS. It’s really easy — view source on this demo.

Why do this? Isn’t this just @font-face? Yep it is just @font-face, which you can do yourself without Google’s help. But there are advantages:

1. Bandwidth savings (weight is on Google)
2. Caching speed (same font used on multiple sites, browser cache kicks in)
3. Speed in general (Google’s CDN is faster than your site)

Loading the extra CSS file is an extra HTTP Request though, but you could hotlink the font file instead. You may also want to download the font and create your own SVG version, because the Google stylesheets aren’t serving that up, and hence no support for iPhone/iPad.

So what is this WebFont Loader then? It’s a bit of JavaScript which handles the loading of fonts. It’s use is totally optional, but offers some advantages. For example, Firefox will display a font further down the font stack until an @font-face font is loaded, and then flip to the @font-face font when it is ready, causing reflow and general weirdness. It’s called FOUT (Flash of unstyled text). The WebFont Loader can help fight this — see Paul’s article on it.

Raph Levien is a type designer, and creator of the Inconsolata font. Raph also works on the Google Font API team. I caught up with him to ask him a few questions about all this…

*Chris: Google does a lot of cool stuff for people building websites, including some seriously bandwidth intensive things. For example, we can hotlink to JavaScript libraries hosted on Google’s CDN. The last thing I want to do is look a gift horse in the mouth, but I know it makes people wonder sometimes, what is in this for Google? Guaranteed this is going to make web fonts faster, so is it as simple as a faster web is good for Google? Or is there going to be analytic data captured that is useful to Google?

Raph: It’s all about making the web faster and richer for everybody. We’re not collecting any personal information for web font requests, and only aggregating the logs at a coarse level so we can keep track of performance and overall popularity of fonts.

One of the great things about this service, just like the AJAX libraries (such as our WebFont Loader), is that many different sites can link the fonts, and they’ll all share the browser cache – it’ll only trigger a network download for the first one.

*Chris: Should the worst happen, and the font API were to have a bit of downtime, what happens to sites using these fonts? Will the browser follow the font stack down and pick a fallback, or does something else happen?

Raph: Yes, it’ll use fallback fonts. It’s just CSS, so the designer gets full control over the font stack, and if you want more fine-grained control, you can use the WebFont Loader library as well – for example, you can trigger JavaScript code to make CSS changes when the font fails to load. We’re also going to be collaborating with all major browser vendors to improve the web font experience for users.

*Chris: It is pretty interesting to see a collaboration between your team and TypeKit. How that that come about?

Raph: TypeKit has been been blazing the trail to make web fonts available to a wide audience. We’ve known the team for a while (Jeff Veen used to work at Google, in fact), so it was natural to talk to them about what we’re doing. We think our collection of open source fonts is pretty good, but for a broader range of professionally designed fonts, we want to make it easy for people to upgrade. We’ve also been working with other major font vendors, including Ascender.

*Chris: A lot of free / open source fonts serve their creators as an advertisement for a more robust set of fonts that isn’t free. Do you see that as a hurdle for the Google Font Directory, in that could become a repository of intentionally limited fonts? Or will that kind of thing be curated out?

Raph: We’ve been getting a great response so far. People have all kinds of reasons for contributing open source fonts, and one is definitely to create more visibility and traffic for selling proprietary fonts. A lot of people just love creating fonts. Whatever the reasons, I’m confident we’ll see a nice, steady stream of high quality fonts. But there’ll always be more choice of top-quality fonts from professional foundries.

Thanks to Raph for the quick interview! Let me know what ya’ll think of this. I’m thinking it’s a pretty big win for web fonts, although I think (and hope, really) that all the best fonts will remain on paid services like TypeKit. Web fonts still have a way to come. Clearly there are still some problems on Windows, and if it’s not one thing, it’s another.

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:

div {
   background: rgba(200, 54, 54, 0.5);
}

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.

With RGBa, we can make a box transparent and leave its descendants alone:

Declaring a fallback color

Not all browsers support RGBa, so if the design permits, you should declare a “fallback” color. This color will be most likely be solid (fully opaque). Not declaring a fallback means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

Do be aware of this bug though, related to not using shorthand in IE 6 and 7.

Browser Support for RGBa

Last updated: 05/14/2010

Data gathered from this demo, which includes more complete browser compatibility list.

A better fallback for IE

Since IE supports conditional stylesheets, we can bust out those and a proprietary Microsoft CSS filter to accomplish the same result:

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

More Information

• Hedger Wang: Implement RGBa colors for Modern Web Browsers. The IE hack from this article is directly credited to Hedger. This article also contains a technique for using <canvas> to support Opera.
• Hedger also has a new technique implementing Kevin Linsey’s JavaScript PNG Generator.
• Tim Kadlec: Not As Clear As It Seems: CSS3 Opacity and RGBA
• Andy Clarke: Is CSS3 RGBa Ready To Rock?

Other Examples

Background image visible through dark content areas

Border of the facebox plugin uses RGBa borders

RGBa galore on 24 ways

Color variations

Instead of having to remember or look up a bunch of different hex values for shades of gray, you can just use RGBa to adjust pure black to a shade that works e.g. rgba(0,0,0,0.3); That is, assuming transparency is cool for whatever the application is (great for shadows, not great for text). Don’t have to be black either obviously, you could make a whole monochromatic color scheme with any color this way.

Tech

Richard wrote the backend in Ruby on Rails. Every few minutes it uses Twitter’s search API looking for the text “welovelost”. Any new tweets it finds are saved to a database. This is an gross simplification of course. There is a blog post about the Rails stuff on the Made with Sense blog. Made with Sense is Richard’s new venture and the makers of Dispatch.

The Rails app also has a JSON API. Basically, a URL you can hit which serves up a random tweet record from the database. That gave me all I needed to write some jQuery that will pull from that URL and drop a new tweet onto the page. WebKit animations make the tweet fly around a bit before the jQuery removes it from the page.

Download

The entire project is downloadable from this post. If you are interested in how anything from the back end or the front end works, it’s all there for your perusal.

Contest

One random person will be chosen to win the complete series DVD set when it comes out. Just tweet with #welovelost to enter. I know… I kinda hate “tweet to win” contests too, but this isn’t some blatant promotional thing. The whole point is sharing the love of LOST and sharing this cool little tweet aggregation app.

This is a screenshot of my browser when I get Magento error:

I don’t need to search for report file and open it in a text editor.
It’s clear and readable.

All you need to do is to little modify error reporting file which is in your:
“/report/skin/default/index.phtml” file.
And you can style it as you wish.

Here is how my “/report/skin/default/index.phtml” file looks like:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Error Submission Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body class=" customer-account-create">
    <div class="middle-container">
        <div class="middle col-1-layout">
            <div id="main" class="col-main">
                <div class="page-head">
                    <h3>There has been an error processing your request.</h3>
                </div>
                < ?php if ($action == 'print'): ?>
                <div style="padding:10px; border:1px solid #666; background:#EFEFEF;">
                <div style="width:100%; overflow:auto;">
                <pre>
< ?php echo $reportData[0] ?>

<b>Trace:</b>
< ?php echo $reportData[1] ?>
                </pre>
                </div>
                </div>
                < ?php endif; ?>
            </div>
        </div>
    </div>
</body>
</html>

That’s it.
Enjoy tracing and handling Magento errors.

But here is another good design standard: don’t have links to the same page you are on, on that page.

The idea here is twofold:

1. When you see a link, it looks like a link, it behaves like a link, that says “click this and be taken elsewhere.” If the link takes you back to the same page you are on, that’s kinda weird.
2. It is a waste of server resources to reload a page for no reason.

How can you accomplish this without a bunch of development work and changing markup? CSS of course!

“Disabled” navigation from a quick demo.

The big idea here is that you can tell a link not to behave like a link (do nothing when clicked) using the pointer-events CSS property.

Body has a unique ID at the homepage:

<body id="home">

Navigation has a matching class name:

<nav>
    <ul>
       <li class="home"><a href="#">Home</a></li>
       <li class="about"><a href="#">About</a></li>
       <li class="clients"><a href="#">Clients</a></li>
       <li class="contact"><a href="#">Contact Us</a></li>
    </ul>
</nav>

Navigation for home is deactivated only on homepage:

#home nav .home > a {
       pointer-events: none;
       cursor: default;
}

Wow that was easy, eh? This works in Firefox 3.6+, Safari 3+, and the latest Chrome versions (v5+?). Nothing from Opera or IE yet. But hey, that’s pretty sweet for such a little development investment.

Part of the trick to getting this to work is getting an ID or a class on the body you can work with. If that is a new idea to you, check out this article and this screencast for the basic idea. Also know that a CMS like WordPress has a body_class(); function which does a great job of providing all the class names you could ever want on the body.

Thanks to Ant Gray for the idea!

Are you sick of Magento XML layouts? If so, then do it all via the code, from the controller .

Here is how.

public function mycoolAction()
{

	/* ... Some code ...*/

	$update = $this->getLayout()->getUpdate();

	/* ... Some code ...*/

	$this->addActionLayoutHandles();

	/* ... Some code ...*/

	$this->loadLayoutUpdates();

	/* ... Some code ...*/

	/* My stuff, add pure XML like you do from XML layout files   */
	$update->addUpdate('
		<reference name="head">
			<action method="addJs"><script>varien/product.js</script></action>
			<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params /><!--<if/><condition>can_load_calendar_js</condition>--></action>
			<action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if /><condition>can_load_calendar_js</condition>--></action>
			<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if /><condition>can_load_calendar_js</condition>--></action>
			<action method="addItem"><type>skin_js</type><name>js/bundle.js</name></action>
		</reference>
	');

	/* ... Some code ...*/

	$this->generateLayoutXml()->generateLayoutBlocks();

	/* ... Some code ...*/

	$this->renderLayout();

}

Why this in place of the “proper way” trough XML layout files? If you are to lazy to create layout file or you wish to reduce the number of your module files (possibly to keep all your module files in one directory).

Cheers.

This unicorn can fly friggin backwards with this plugin.

The Empowering Concepts

This is a jQuery plugin, so obviously it relies upon the jQuery library. Specifically, jQuery 1.4 or later, because we are using the .animate() functions new ability to have per property easing. This means we can animate the “top” value with one easing function while animating the “left” value with a different easing function. All this talk of easing… I should say that not only does this require jQuery 1.4+, it also requires the easing plugin. Here is the idea:

So if we do that four different times, flipping around the easing functions and adding/subtracting as necessary, we can get a circle. And not just a circle really, but any ellipse defined by height and width.

Features

You can declare speed, height, and width. Those are pretty obvious / standard / expected parameters for a plugin like this. There are three others though:

• sizeAdjustment: a percentage adjustment. Default is 100 (stays the same). Lower than 100 = shrinks to that percentage at the half-way point and then back up. Higher than 100 = grows to that percentage at the half-way point and then back down.
• loop: Default is false. True means the loop will run recursively. You can stop a current loop by calling the plugin on that element with just a single string parameter: $(“#thing”).circulate(“stop”);
• zIndexValue: accepts an array of four numeric values. These values set the z-index CSS property at each of the four points of the animation.

Here is the full set:

$("#anything).circulate({

    speed: 400,                  // Speed of each quarter segment of animation, 1000 = 1 second
    height: 200,                 // Distance vertically to travel
    width: 200,                  // Distance horizontally to travel
    sizeAdjustment: 100,         // Percentage to grow or shrink
    loop: false,                 // Circulate continuously
    zIndexValues: [1, 1, 1, 1],  // Sets z-index value at each stop of animation

});

BETA

As-is, I’m going to call this a Beta release. Mostly because it doesn’t work very well in Opera. If anyone is a big Opera fan and cares to figure out what is wrong with it, I’m all ears.

It’s also Beta because I haven’t gotten a ton of feedback on it, so I’d like to react to any of that that comes in and make changes as necessary. For example I’m thinking a callback function parameter might be a good idea. Also, I’m sure there are some parts that could be written a bit more efficiently.

• Find out it was a mistake you made, help you isolate it, and fix it (or have a great test page for asking for help)
• Discover a true bug, and arm you with the perfect demo to present to the people responsible.

So what is a reduced test case, anyway? A reduced test case is a demo/example page you create which reproduces the problem you are having with the least amount of code possible. Only the HTML needed to show the problem content. Only CSS that is related to that reduced HTML. Only the JavaScript related to the problem functionality at hand.

Reduced test cases are the absolute, no doubt about it, number one way to troubleshoot bugs. In fact, some people contribute to open source projects simply by turning bug reports into reduced test cases for more experienced developers to explore. Here is how you might get started creating one from your problems…

1. Make it static

If it’s a front-end issue, make the page static instead of dynamically built from the server (like if you are using a CMS of some kind). That is, view the source on the problem page, copy and paste it into a new document, and start there with your reduced test case. Put that document into a new directory just for your test case.

2. Make it isolated

Then take all the resource files that HTML needs (CSS, images, JavaScript, etc) and put them in that directory too. Now you have a contained little environment just for this purpose. Now you can edit these resource files and markup without worrying about affecting anything live. This also makes your test case portable should you need to hand it off to someone.

3. Reduce, reduce, reduce!

Now start stripping stuff away, periodically testing to make sure your problem is still present. Start by removing HTML so what is visible on the page is reduced down to as little as needed. Then remove any CSS that is now un-needed. Then remove any JavaScript that isn’t related to the problem. If it’s not a JavaScript problem, remove all of it (unless you think it may be JavaScript interfering with whatever the problem really is).

4. Document it

If there are bits in the code that you suspect may be the problem, put comments in the code there. Every single web language has some way to insert comments that don’t affect the code.

5. Put it online

If you are working locally, put up your reduced test case online somewhere. I’ve seen people use the free Dropbox to host a quick example. This will make it easier for you to share the problem with others who may be able to help out.

But I don’t know what the problem is! They need to see everything!

You do know what the problem is. It is whatever the problem is. Showing someone “everything” is often overwhelming to them and makes it harder for them to get their heads around. That’s how I feel, anyway. If someone is asking for help and they paste 1000 lines of CSS code in the forums, my eyes usually glaze over and I just skip it. A reduced test case however, is often intriguing and begs to be looked at.

Other Resources

WebKit on Test Case Reduction
Know of any other good discussions on this topic? Let me know I’ll link them up.