07 May

10 Years

So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to what how we would build it these days. If you see an area that needs help, consider sending a patch.

Hello CSS Zen Garden, it’s been awhile.

07 May

Line Clampin’ | CSS-Tricks

You want X lines of text. Anything after that, gracefully cut off. That’s “line clamping” and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.

There are a couple of ways to get it done, none of them spectacular.

If you are doing Web Design/Development as a full-time and aren’t reading CSS-Tricks, you really should be. Awesome little tricks like this one..

16 Feb

Frankie Roberto – Responsive Text

Some websites now contain ‘responsive images’. These scale (or crop) depending upon your screen’s viewing area, so the image sizes remain appropriate whether you’re looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the current screen width.

via Frankie Roberto – Responsive Text. In agreement, nifty idea, but defiantly unsure of the practical application.

26 Jan

whatwg – Requests for new elements for comments

We already have an element for comments and other self-contained document modules, namely, <article>. The spec in fact specifically calls out an <article> nested in another <article> as being, by definition, a comment <article> on the outer <article>

via whatwg – Requests for new elements for comments. Want to do comments on your new spiffy HTML5 site, use an article element inside your main article element.

23 Aug

CSS-Tricks – Functional CSS Tabs Revisited

The idea of "CSS Tabs" has been around for a long time. If you Google it, a lot of what you get is styled CSS tabs, but less stuff on the building an actually functional tabbed area. At least, functional in the sense as we think of tabbed areas today: click a tab, see a new content area with no page refresh.

Tackling functional CSS tabs has less of a deep history. Brad Kemper was messing around with it in 2008 trying to utilize the :checked pseudo selector with radio buttons and adjacent sibling combinators. This is a really cool technique that can be utilized to do things like an expand/contract tree style menu or visually replace form elements with graphics (pioneered by Ryan Seddon).

I personally tried messing with functional tabs a while back, and came up with seven different ways to do it. Most of them centered around the use of the :target pseudo class selector and most of those techniques sucked. One was OK. They all had one major flaw and that was that URL hashes needed to be used, which "jumps" the page down to the element with the matching ID, and that is totally unexpected, jerky, and just a bad overall experience.

Working with the radio-button/:checked technique is way better, but there was a long-standing WebKit bug that prevented pseudo class selectors and adjacent sibling combinators from working together. Good news! That’s fixed as of stable browser releases Safari 5.1 and Chrome 13.

So let’s get this thing done the :checked way, which I think is the cleanest way to do it for now and for the next few years.

via CSS-Tricks – Functional CSS Tabs Revisited. Very nice, pretty decent support if you don’t need to worry much about IE.

18 Aug

Neal Poole – Cross-Site Scripting via Error Reporting Notices in PHP

A PHP application that displays error reporting notices and contains specific code patterns may be vulnerable to a cross-site scripting attack. I’ve confirmed this issue on PHP 5.2.17 and a snapshot of PHP 5.4 (I assume it affects other versions of PHP as well). This issue was filed as Sec Bug #55139 back in July, but it was recently closed as “bogus” by a member of the PHP team, making the report public.

When display_errors is enabled and a PHP notice is generated, none of the text of the notice is HTML-encoded. That means if an attacker can control part of the notice text, they can inject arbitrary HTML and JavaScript into the page. Certain specific coding patterns make such an attack possible.

via Neal Poole – Cross-Site Scripting via Error Reporting Notices in PHP. Though to be fair you probably shouldn’t be using display_errors in a production site.

18 Jul

The Watchmaker Project – How to fix the broken iPad form label click issue

Mobile Safari, the browser found on iPhones, iPod Touches and the iPad, does not (currently) implement the same label behaviour as other browsers. Clicking on labels doesn’t do anything—possibly, as Ben Darlow suggests, it is because it would interfere with the tap-to-select-text functionality, although personally I think that usability trumps obscure text-selection use cases.

What’s even weirder is that, in over an hour of googling, I couldn’t find a single reference to this issue. Surely someone, somewhere must have noticed that clicking or tapping on labels in forms on iPad doesn’t select the input? I resolved that when I published a fix for the issue, it would include a couple of clunky sentences stuffed with as many keywords related to the tap click form label input select checkbox radio button problem as possible…

via The Watchmaker Project – How to fix the broken iPad form label click issue. Nice and simple fix, defiantly not quite as common a problem on the iPhone (rarely do I find myself wanting to hit the label vs. the input field).

16 Jul

Hacker News – Self Extracting PNG

I’ve been working on this for a couple weeks, attempting to get it looking perfect and get it to 1kb. It’s going to be going on stage at http://solskogen.no/ shortly, so I figured now is the perfect time to post.

As far as I know, this is the first ever case of a self-extracting PNG — the file is a PNG that first is interpreted as HTML, which then unpacks the compressed code within the PNG to start the second stage. I plan to write a blog post about how I got the size down as far as it is, but feel free to ask any questions you may have, as I’d love to see this technique spread!

Edit: Requires Chrome and Firefox — has been tested heavily on Windows and OS X, but this will eat your CPU and GPU alive.

via Hacker News – Self Extracting PNG. Wow that is some impressive work.