We all wrap our webpages in a wrapper, or containing div so we can set a max-width for the entire page, and to be able to center it. You know, with something like this:
.container {
max-width: 1200px;
margin: 0 auto;
}
Well, I got tired of constantly adding a <div class="container"> to everything, so I decided to get creative.
Why would you want to do this, you ask? A background color that extends to the edge of your screen, but not the content contained within, is the perfect example. You'd need that containing div to sit around the content.
My thought: Could a page's max-width be set in CSS within each full-width block of content, rather than via a containing div?
Sure enough, it is! I have never seen this example used in the wild, so I figured it was worth sharing to see if I'm missing something obvious, or if this is actually a pretty cool hack.
The concept: Allow padding to fill up all the available horizontal space, EXCEPT the maximum width of your content.
To better visualize, split your page vertically in half so we can measure padding for each side. So if your content should be max-width: 1200px, then half the width of content is 600px. Now that we have half the page, we know how much space to subtract from each side. Now we want the padding on both sides to provide half of 100% of the page, EXCEPT the width of the content. It's better described in CSS:
padding-left: calc(50% - 600px)
padding-right: calc(50% - 600px)
The code above allows 1200px of content and splits the rest of available page space for even padding. Since padding only shows up if there's space, the padding takes advantage of said space and disappears when it isn't there.
But now there's a problem: Our text butts up to the edge of the screen up until our max content width. No prob! Set an invisible border for the width of "outer padding" (we'd use margin but it doesn't let background colors outside of its bounding box), and as long as your box-sizing is set to border-box, you'll now effectively have padding "around" your padding. So:
box-sizing: border-box
border-left: solid transparent 2rem
border-right: solid transparent 2rem
So long, annoying extra markup!
]]>
Good work, Cox. You're pretty much guaranteeing I will use your reset password utility every time I visit your site.
I tend to design with a lot of subtle gradients and use the Ultimate CSS Gradient Generator to create them. It spits out CSS that works in every single browser, and it's awesome.
But when working in SASS, I had a slight problem.
@mixin background($top,$bottom)
background: $top
background: -moz-linear-gradient(top, $top 0%, $bottom 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom))
background: -webkit-linear-gradient(top, $top 0%,$bottom 100%)
background: -o-linear-gradient(top, $top 0%,$bottom 100%)
background: -ms-linear-gradient(top, $top 0%,$bottom 100%)
background: linear-gradient(top, $top 0%,$bottom 100%)
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='$top', endColorstr='$bottom')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='$top', endColorstr='#$bottom')"
IE8 wouldn't parse my $top and $bottom values in the filter and -ms-filter properties, leaving them as $top and $bottom in the rendered code. The trick is to escape the variables with #{$value}. Thus:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$top}', endColorstr='#{$bottom}')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}')"
I had found this post which came to this conclusion in a more verbose way but thought I'd share my solution as it seems to be easier and quicker.
]]>I received this promo offering 20% to upgrade to CS5.5. Offer valid until March 15th, just days before the Photoshop CS6 beta was released.
Nice try, Adobe.
This is a perfect example of how web applications should work: by gathering data from different places and making logical conclusions.
Last night I attended a friend's surprise party where I met a new friend. We became friends on Facebook during the party. Because we both RSVP'd to the Facebook invitation, Facebook was able to gather that we met at the party and became friends shortly afterwards as a result.
This is how all web applications should be: much more human-like and logical. Kudos to Facebook for building in this kind of logic.
]]>
So there you have it. After 2 hours, 25 steps, and 3 computers, I finally got these two little videos from an iPad onto a DVD. All thanks to the fact that Apple is trying to kill the DVD format, and thus decided killing their iDVD authoring software would be a good idea. Thanks, Apple!
]]>
Hipstamatic drives me nuts because they use push notifications for
promotions. This has got to be against some iOS policy, yeah?
I hate relational timestamping. And I don't know if I just made the phrase or if there's a better term for it (maybe fuzzy timestamps), but I think we all know what I mean:
Posted 2 days ago, Posted 16 hours ago, Posted about 2 hours ago, etc.
There are several reasons I hate this format.
For example, I was reviewing some transactions in a system that uses relational timestamps. In order to figure out exactly what time "22 hours ago" was, I have to do several things:
That's a vastly complicated process for a user instead of just saying 6:45 PM.
Next, I wanted to figure out the frequency of transactions. So how do I figure out the difference between "3 days ago" and "10 Nov 2011"?
That's three steps when an actual date would have eliminated this whole process.
The nay-sayers will say it doesn't require that much brainpower. I'd have to disagree. As a UX/UI guy, I'm always looking for the easiest, simplest solution for the user. I just don't find relational timestamps to be beneficial. They might come in handy for a developer who doesn't want to deal with timezones, but is it worth making a more complex user experience? I don't think so.
If we're going to continue using relational timestamps, we need to find a way to bridge the gap between relational timestamps and real timestamps. This will help reduce friction for users, and for a guy like me, creating a better user experience is the ultimate goal.
]]>
Cell phone carriers make it a pain to provision a short code because
they're worried that people will spam their customers. But I don't see
why they're too worried about that when they go and send unsolicited
messages like...
I've been going through a variety of 4G cards in the past couple weeks, trying to find the absolute best device and service. I started with Verizon but had some trouble (turns out I had a defective Samsung device). The replacement worked okay, but I wanted to make sure I had the best. So despite getting 8mibs speeds both download AND upload, I switched to Sprint.
Well Sprint is a total joke. Not only is their 4G coverage terrible in my area (I only got 10% signal strength in a decently populated area in Tustin, CA), but it was horrible in L.A. I had dinner in Beverly Hills and the coverage there was underwhelming. My tethered Verizon iPhone had better service. And that's a bummer, because I was rooting for Sprint.
Less than 24 hours after acquiring the Sprint device, I replaced it with an AT&T hotspot. The coverage looks promising. However, I ran a speed test and got these results:
There are a couple other carriers like T-Mobile and Clear, but without even trying them, I doubt they'd do much better than AT&T, the 2nd place winner in my books.
So it looks like Verizon's 4G network is the best in Orange County. The coverage is acceptable and the speeds are just outstanding.
]]>
An Apple developer takes a stab at designing and this monstrosity is born.
Please, no wisecracks about which is which.
Spotted at the Microsoft Store today.
No Winblows comments, please.]]>I thought they were largely eradicated back in the early 2000's. Apparently not.
The above is a screenshot of the installation process of Cygwin bundled with E Text Editor.
]]>
MailChimp is a fun email campaign manager, and I just tried to import a sizeable list into their system. Unfortunately, they don't allow the importing of "role-based" email addresses. They define role-based addresses as addresses who are not people, like "billing@... or info@..." This is an obvious decision to cut down on spam from people who try to enter a bunch of fake addresses just to try to get a message through. Unfortuntely, I think this rule causes more harm than good.
When I went to import my list, a bunch of addresses were blocked because of their role-based restriction. The only way around this is to manually enter each address.
I'm sure this was a tough decision inside MailChimp to restrict people from adding role-based addresses automatically, but I still think the decision is pretty ridiculous, the reason being, not everyone conforms to MailChimp's definition of "role-based." While large companies might submit to the hierarchy of sales@ submitting to a lead tracking system or info@ being distributed to several people, in small businesses or in personal email management, many people use the same types of addresses in much different ways.
MailChimp really shouldn't decide for everybody that certain addresses should or shouldn't be considered role-based because they don't know how everybody uses email.
Here are some of the addresses from my import that were rejected as role-based:
I even tried contacting support who refused to help. It looks like, unless I know someone, I'm out of luck.
Because of this restriction, I'm looking into other email marketing providers who doesn't have this restriction. There's no way I'm wasting time manually importing addresses one by one.
MailChimp could have easily had my business (ya know, where I actually pay them for services), but because of this one restriction and no way around it for legitimate purposes, they lost me.
]]>It's called Printerous and it's going to be awesome.
Posterous hack day is coming up next weekened and Posterous published a list of the top requested apps that can be built through the API.
As a benefit to developers who might be getting a head start on their app(s) this week, I've come up with some wireframes for some of the apps on the list to aid any developers who might want some help on the UI side of things.
Desktop Post Editor (#10 on hack day request list)
iPad Reader (#9 on hack day request list)
View Posts by Media Type (Account View) (#3 on hack day request list)
Batch Tag Rename Tool (#2 on hack day request list)
Export Tool (#1 on hack day request list)
Their video player supports HTML5 video, but it's disabled. Makes total sense.