I rolled out a new design this weekend! As usual it’s a bit of an aesthetic overhaul (blue!). I’m going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you’ll have to make the jump and look around =).
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…
One of the major bummers about Safari is that the “View Source” view is totally lackluster. No code highlighting, no live links, no line numbers, no refresh. Boooo. The BetterSource extension solves every one of those problems. I do wish there was an option to show only one of the buttons or the other in the header bar though (one is for original source and one is for generated source) I don’t need both. Update: You can just right click…
Papa bear: HTML5 Boilerplate
Mama bear: HTML5 Reset
Baby bear: HTML5 site template
Looks like we are becoming specialist for creation of off-road online stores. OK Auto had s strong online presence for years presenting themselves as a source for all of your automotive and off-road needs. It is always a challenge to decide to abandon existing website backend and move to a new platform, especially when you [...]
There are a couple of WebKit specific properties that make giving text a gradient background possible:
-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…
When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.
…
If you are in the business of developing a mobile application or external web/desktop or some other application/service that needs to communicate with Magento trough its API, then my friend you are out of luck. I am not going to say Magento API is a trash, I’ll simply say it massively lacks certain methods within [...]
We’re giving away a friggin’ Battle Axe (and $3,000) to the winner of the Wufoo API contest. Cash prizes and Wufoo accounts for life to the second and third place winners as well. Developers, you have until the end of this month! Check out the page for ideas and API wrappers.
With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Then just earlier this week I did a post about how you can use the tabindex attribute to basically respond to a click with pure CSS. It got me thinking, can we somehow…
The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID’s, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little while ago, but had no tests to back anything up. So the most interesting part of it all to me was how the tests were being measured. The test idea came from a Jon Sykes article where he…
MediaElement.js is a jQuery-based package for allowing us to:
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…
Way back when I used to do “Links of Interest” style posts. I’m happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I’m going to do it like it’s done currently on Digging Into WordPress, sort of Tumbr/Daring Fireball style. There will be no comments on this site for that style of post (comments should happen on the linked post). The title…
HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class,…
When working with HTML5 today, many of you know that you’ll need to include the “HTML5 shiv” to ensure that CSS will recognize and be able to style those elements in browsers that aren’t yet hip to HTML5.
<!–[if IE]>
…
This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy! 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 [...]
This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which is graciously accepted. 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 [...]
I had the honor of being on the jQuery Podcast #30 with Ralph Whitbeck and Doug Neiner. We talk about some of the different parts of CSS-Tricks, the jQuery conference, and the difference between designer and developers. We also talk about my new job at Wufoo and specifically the Wufoo API jQuery plugin and the [...]
CSS has a value for the display attribute called run-in. It’s like this: h3 { display: run-in; } The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques. Let’s take a closer [...]
Every now or then we need new column on some grid listing in Magento. It is quite simple task, but you will probably want to format values way you want or whatever. This is where writing your own renderer would be usefull and simple. To pull this out, you would overide some grid, add column [...]
The crew from Unmatched Style are the folks that run ConvergeSE which I was lucky enough to attend this year. They are really great folks! While I was down there, I was interviewed by Gene for their podcast. Thanks to Gene for having me! I really recommend to everyone to check out Unmatched Style. A [...]
Dude, you browse with JavaScript on? Uhm, yeah, why wouldn’t I? It’s totally insecure. Hackers could destroy your computer. Hackers? What is this 1995? And, no they can’t. They can definitely steal information about you without you knowing. Like what? Like you’re address book information or your browsing history, depending on your browser and settings. [...]
Here is a little snippet of code that can come in handy if you are like me handling a task of programatically creating an order in Magento. My issue was that I had to disable emails beeing sent out to the customers, while at the same time leave the normal frontend process. Thus I could [...]
The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers. The basic idea The border-image [...]
A little while back there was a guest post about Ajax image previews. It’s a nice technique but it left myself and a few other commenters thinking: wouldn’t it be cool if you didn’t have to upload the image at all to preview it? After all, the image is on the persons computer already why [...]
Oh, <textarea>’s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy. 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 [...]