timmcelwee
Tim McElwee's ramblings and interesting finds.
28 posts
Latest Posts by timmcelwee
View more Tim McElwee on WhoSay
Gum-paste peony and cake by the lovely Heather Bill.
View more Tim McElwee on WhoSay
The kids watching Tom & Jerry
View more Tim McElwee on WhoSay
Our weekend projects: a snow slide for Peyton and a snow block wall for snow ball fights.
View more Tim McElwee on WhoSay
A view of the yard and street. Around a foot, I'd guess.
View more Tim McElwee on WhoSay
Just ran out to pick up some groceries, wind and sleet stinging my face. The roads are starting to get a little slushy. Not too slick yet.
View more on WhoSay »
We're visible from the street now!
View more Tim McElwee on WhoSay
Abstract Commute (Taken with Instagram)
Almond toffee cake with chocolate ganache filling (Taken with Instagram)
Just above the trees (Taken with Instagram)
Directly overhead (Taken with Instagram)
Self-portrait (Taken with Instagram)
Goose pond (Taken with Instagram)
Apparently it's National Donut Day and you should celebrate with giant donuts.
O & P watching cartoons together (Taken with instagram)
What's this giant phone doing outside? (Taken with instagram)
Tall Ship Challenge in Greenport (Unicorn & Bounty) (Taken with instagram)
Now a plastic prison for lonely banana tootsie pops (Taken with instagram)
Checking the prescription (Taken with instagram)
A $5 walking taco, with steak and fixin's (Taken with instagram)
activeminds 1000/suicide backpack awareness (Taken with instagram)
Unsexy CSS3: Getting Work Done Faster
Unsexy? I'm talking about new options in CSS3 that aren't discussed as often as their flashier brethren, like border-radius, border-image, animations, and 3d transforms. The properties below are just those kinds of items. Unsung additions that will help you get work done faster.
Granted, many of these properties aren't available in every browser. But for those who have a high percentage of the latest browsers, are developing for advanced mobile phones, or another advanced browser monoculture, these items are available now. For those with a broader support matrix, these might serve as an excellent starting point for progressive enhancement as your browser stats improve.
These are all items that I was able to test while developing an Adobe Air 1.5 front-end for Comcast.net's internal CMS project. I've also been able to use some of these features on the comcast.net iPhone and Android targeted mobile web site. A few of these saved me a couple hours of refactoring while others saved a lot of time by not having to create a traditional work-around.
OK. Let's actually look at some code.
Box Sizing
box-sizing:(content-box | border-box);
Taking the options in order, content-box is an explicit statement that maps to the W3C box model and it's use of width. For an element with box-sizing:content-box;, width values will refer to the width of the content. Padding and borders will add to the width value. border-box, however, is the game changer. This specifies that width will be the maximum width of the total visual element: borders, padding, and content. Content width will adjust to accommodate borders and padding. For you old timers and kids who tread in dangerous waters it's the table cell box model. I have a feeling this one could become divisive if abused, but used sparingly, it can be very handy.
Dan Cederholm recently tweeted about using it in conjunction with floating primary grid elements.
@simplebits Man. box-sizing: border-box; + fluid layout = a match made in lean markup heaven. Ladies. 6:04 PM Apr 5th via Twitter for Mac
My example comes from a dilemma about adding a new input width to our CMS front-end. I'd already established a few primary sizes and a new smaller size was required along with error states for empty or incorrect field values that required alternate padding. I'd have to add the new size and refactor all of the existing sizes. I was not looking forward to it. Using box-sizing meant that I added box-sizing:border-box; to the base styling of all inputs, removed padding and border declarations from individual input instances and moved them to the base input, and created the error state class with alternate padding that would clear text past the inline icon.
http://www.redmelon.net/tstme/box_model/
http://css-tricks.com/box-sizing/
http://www.quirksmode.org/css/box.html
Flex Box/Flexible Box
display:box;* box-orient:(horizontal | vertical | inline-axis | block-axis | inherit);* box-flex:(integer);* box-pack:(start | end | center | justify); box-align:(start | end | center | baseline | stretch);* box-ordinal-group:(integer); box-flex-group:(integer); box-lines:(single | multiple);
Instead of worrying about the box model, wouldn't it be great to have a way to say, "these elements should sit next to each other?" That's what flex gives you.
Set display:box; and box-orient:val; on the parent element. Then in each stacked item add box-flex:integer; to specify the proportion of the total width each box should occupy. If all boxes should be equal width, use box-flex:1. If one box should be twice as large as the others, set equal elements to box-flex:1; and the wider element to box-flex:2. You can also enter specific widths for one box-flex value and let the other remain proportional. This is similar to how frames would allow you to specify a width and allow the remainder to expand (possibly the only thing worth saving from frames).
There are some quirks depending upon the browser implementation, so definitely check out the articles below. One thing I've seen in only a single article title is that you get equal height columns for free with display:box; and box-orient:horizontal.
In our CMS, I used this to create tabs to switch between direct input and selecting feed content. It was a pretty simple use, but even then I didn't have to calculate width, padding, and borders to setup a float.
http://www.css3.info/introducing-the-flexible-box-layout-module/
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Multiple Backgrounds
Multiple backgrounds have gotten a little love since I first thought of this article. It's still time to use it in more places, as it's pretty well supported in more recent browsers. This one is pretty straightforward in that you can simply add another background declaration separated by a comma.
background:url(../images/icons/error.png) no-repeat 4px 4px, url(../images/icons/selectArrow.gif) no-repeat 2px right;
I found this one through the error states that I mentioned in the section on box-sizing. I'd restyled the native appearance of select menus and I was already using a background image for the arrow indicator. I thought I was stuck until a coworker said, "haven't multiple backgrounds been supported for a while?" I found a syntax example online and the image was in and working within 10 minutes.
http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
Selectors
Nth-Child and Nth-of-type
:nth-child() :nth-of-type()
nth-child and nth-of-type are great selector tools for accessing specific elements or to set up repeating patterns without having to add extra markup. For instance, you can specify div p:nth-child(2) to get the paragraph that is the second child of a div. To get the every other paragraph, you could enter p:nth-child(2n). The formulas can get a little tricky, so I recommend reading SitePoint's article, Understanding Nth-child Expressions.
Also, Chris Coyier at CSS Tricks has an excellent read on nth-child's less tricky and potentially more useful cousin, nth-of-type. Nth-of-type gives you the numbered instance of an element, much like nth-child, but without taking all of an element's siblings into account. div p:nth-child(2) will match only if the second child of the div is a paragraph. div p:nth-of-type(2) will give you the second paragraph if there are two paragraphs. Go read his article for more in depth coverage.
In our CMS front-end, we wanted to have horizontally stacked fieldsets to input lists of links. All the fields aligned horizontally, so we could save room by having left aligned labels only for the first fieldset in a row. We were able to specify special styling for every nth-child(3n+2) or nth-child(4n+2) items. This was an instance where the child nodes weren't exactly as expected. Nth-of-type, probably would have been a cleaner way of accessing the same element.
http://css-tricks.com/how-nth-child-works/
http://reference.sitepoint.com/css/understandingnthchildexpressions
http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
Attributes
button[disabled], input[type='text'], #contentEditor fieldset[visible='false']
Semantic attributes are now available to apply appropriate styling. You can set an alternate, grayed-out style for disabled buttons. You can apply styling to text inputs without having to worry about spilling over into other input types. You can even use custom attributes, like data-val, to add additional semantic meaning and display utility.
The CMS took advantage of attribute selectors, especially with a variety of custom attributes. For saving content, buttons were grayed out (opacity changed) to visually represent that the buttons were inactive. We used it to hide elements we didn't need on that page.
Direct Child
#contentEditor > fieldset > legend
Yup. In a monoculture, whole sections of CSS2 are also on the table. Direct child selectors are great in very clean HTML. As in the example above, you can add a custom styling to the top level legend without needing an ID or class to prevent bleed through into lower level legends. In our CMS, that's exactly what we did. The top level legend displayed directly below the page title and made the first legend redundant. Looking back, legend :nth-of-type(1) also would have worked and probably would have been less code.
The Irish people and their country are like lovers whose passion is heightened by their suspicion that they will probably wind up leaving each other. Their loud patriotism is a cargo ship for their doubt.
When Irish Eyes Are Crying in Vanity Fair
Reading up on WebSockets
I've been reading more about the new APIs that are part of HTML5, or are at least lumped into the HTML5 buzz. Today's reading is from Google's HTML5Rocks site, Introducing WebSockets: Bringing Sockets to the Web. I can see that this has a lot of potential. I think there are a couple of products I've worked on recently that do a lot of low-level asynchronous polling. Sadly, WebSockets will be disabled in Firefox 4 starting with beta 8. Let's hope that spec can be amended quickly to solve the proxy server issue that seems to be at the heart of this issue.
More clutter isn't free. In fact, more clutter is a permanent shift, a desensitization to all the information, not just the last bit.
Seth Godin
Modernizr: code for success or failure? - part 1
I'm getting my feet wet with the Modernizr feature detection library . This has led to a new dilemma in implementing the design: should you test for success or failure?
In other words, what are you assuming about your users? Are you assuming that most of your users have advanced browsers that are capable of immediately rendering advanced features and you need to provide alternatives only to the older browsers? Or, do most of your users have older browsers that will need a more traditional default state with overrides in place for a smaller percentage of advanced users?
For this project, the user base is split almost 50/50 between different versions of IE and a combination of Safari and Chrome (and almost no Firefox, which I find odd). So one half of users are capable of seeing almost any of Webkit's bleeding edge advances. The other half of users has the worst support for emerging standards amongst the major browsers. It was definitely new ground for me.
In the end, I opted to progressively enhance the user experience and tested for success. I assumed that most users will not have bleeding edge support for CSS gradients, RGBa, border radius, or multiple backgrounds. Modernizr's success-state classes on the html element provide hooks to add these features. Let me know if you've found compelling reasons to offer fallbacks for older user agents.
I'm thinking of creating a part 2 that plays devil's advocate for the opposite point of view. I need to do some tests, but I can definitely see potential performance by cutting backwards compatible images and their additional requests.