tag:640kb.corywatilo.com,2013:/posts 640kb 2018-08-22T06:10:54Z Cory Watilo tag:640kb.corywatilo.com,2013:Post/1314099 2018-08-22T05:48:32Z 2018-08-22T06:10:54Z This CSS hack will eliminate those "container" divs from your HTML markup

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!

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477084 2012-05-19T05:21:41Z 2013-10-08T17:03:40Z No wonder my packets are transferring so slowly! ]]> Cory Watilo tag:640kb.corywatilo.com,2013:Post/477103 2012-05-01T00:14:00Z 2013-10-08T17:03:40Z Today in ridiculous password requirements...

Good work, Cox. You're pretty much guaranteeing I will use your reset password utility every time I visit your site.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477139 2012-03-23T22:38:00Z 2014-07-23T13:09:50Z Making gradients work in Internet Explorer as a SASS mixin

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477143 2012-03-23T20:39:00Z 2013-10-08T17:03:41Z This is why you don't fall for upgrade offers offering big discounts

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477145 2012-01-26T22:23:00Z 2013-10-08T17:03:41Z Skype has been lonely

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477168 2012-01-22T19:00:00Z 2013-10-08T17:03:41Z Facebook is making logical conclusions by merging different data points. So cool.

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477209 2012-01-10T00:47:00Z 2016-01-14T10:30:16Z Some computer tasks are still way too difficult
I just went through hell trying to copy two simple videos taken on an iPad to a burned/authored DVD. I didn't think this process would be so hard, but it took me about 2 hours from start to finish, mostly thanks to the fact that Apple no longer ships iDVD for Lion. So without wanting to spend money on any other software, here's the exciting path my afternoon took.

Oh and keep in mind that in the mid 2000's (through high school and some college), I ran a live video production company, so I had all the pro software needed to do the job right (Final Cut Pro, DVD Studio Pro, Premiere Pro, etc.). I bring this up just to say I know how to do this stuff, and it shouldn't be this hard for such a simple task.
  1. Copy video files from iPad to iPhoto on my MacBook Air
  2. Open iMovie, try to import videos from iPhoto. iPhoto wouldn't recognize them.
  3. Copy videos from iPhoto to desktop
  4. Re-open iMovie, add files to project
  5. iMovie imports video files, processing takes 10 minutes
  6. Try to figure out how to get multiple timelines set up in a single project
  7. Got lost in iMovie's mess of projects, timelines, folders (still don't know what they all mean)
  8. Go to export by choosing Export to iDVD, but iDVD is grayed out so I can't click
  9. After much Googling, I discover Apple doesn't provide a version of iDVD that works on OS X Lion
  10. Figured I would use Adobe CS5 on my iMac to burn a DVD instead
  11. Try to copy movie files to iMac. Can't click and drag. Have to set permissions on iMac.
  12. Set permissions, copied movie files to iMac
  13. Go to open Adobe Encore to burn DVD
  14. Discover Adobe doesn't make Mac version of Encore in CS5
  15. Go to copy video files from iMac to Win 7 PC, since I have CS5 on there, too, and assuming Adobe makes a CS5 version of Encore. But iMac can't connect to PC.
  16. Check PC firewall, still can't connect. Try connecting from the PC. Doesn't work. Go back to Mac. Try connecting to PC as server. Fails. Try a few more times from PC. Finally connects. Copy movie files from iMac to PC is successful.
  17. Discover Encore doesn't ship with Adobe CS5 for PC either. (I thought CS5 Master Collection meant you were getting all their production software, not everything but Encore. And Audition.)
  18. Rummage through old email to find what DVD authoring app I bought and used back in the mid 2000's. Find app (DVD-lab), download and install.
  19. Try to import movie files (in .mov) format, but application doesn't support them, since it's a semi-professional DVD authoring app.
  20. Open Adobe Media Encoder, drag files in, choose MPEG2-DVD format. Start encoding.
  21. Drag the exported m2v and wav files into DVD authoring software
  22. Create timelines, drag files to respective timelines
  23. Create simple menu that links to movie tracks
  24. Build DVD files
  25. Burn DVD

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!

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477230 2012-01-01T20:47:00Z 2013-10-08T17:03:42Z Q: When is Find Friends not useful? A: On holiday weekends when they're all out of town.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477234 2011-12-29T02:29:00Z 2013-10-08T17:03:42Z New Godaddy.com account: How did you hear about us? "SOPA."

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477255 2011-12-17T01:07:08Z 2013-10-08T17:03:42Z Hipstamic is a giant spamming machine

Hipstamatic drives me nuts because they use push notifications for
promotions. This has got to be against some iOS policy, yeah?

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477258 2011-12-12T21:18:22Z 2013-10-08T17:03:42Z Hi Google! ]]> Cory Watilo tag:640kb.corywatilo.com,2013:Post/477276 2011-11-18T19:17:00Z 2013-10-08T17:03:42Z Why I hate relational timestamping in web apps

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.

  • We use relational timestamps and real timestamps in tandem, requiring a mental "currency conversion" between posts. Example between two items: 3 days ago and Nov 10, 2011
  • It's not as precise as an real timestamp.
  • It takes the user longer to calculate the exact time of a post.
  • In some cases, it eliminates the ability altogether to find an exact timestamp, and that's an important use case that shouldn't be overlooked.

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:

  1. Look at the clock for the current time
  2. Figure out the quickest way to subtract the number of hours from a 24 hour day
  3. Add or subtract (depending on which is quickest) that number from the nearest day

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

  1. First, I have to figure out today's date (probably by looking at a calendar): Nov 18
  2. Now I subtract 3 days from today: Nov 15
  3. Then I have to calculate the difference between Nov 15 and Nov 10: 5 days

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477279 2011-11-14T00:38:50Z 2013-10-08T17:03:42Z Are you kidding me, Verizon??

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

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477283 2011-11-10T20:42:00Z 2013-10-08T17:03:42Z In Orange County, Verizon's 4G wins

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:

While these speeds might be good for 2008, I just ran a speed test in the same location on Verizon's 4G network with speeds of 8mibs down/up. That's a ridiculous disparity.

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477296 2011-11-05T17:30:00Z 2013-10-08T17:03:42Z This weekend, @thegooley and I are working on a fun, new project. Stay tuned. Can't wait to share the details!

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477313 2011-10-21T22:00:00Z 2013-10-08T17:03:43Z Here's what happens when Apple's designers are tied up on other projects.

An Apple developer takes a stab at designing and this monstrosity is born.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477330 2011-10-19T02:39:55Z 2013-10-08T17:03:43Z Hey Apple, might I suggest you hire a QA department? ]]> Cory Watilo tag:640kb.corywatilo.com,2013:Post/477346 2011-10-14T05:35:00Z 2013-10-08T17:03:43Z Aw how cute, a workhorse and a child's play thing together in harmony.

Please, no wisecracks about which is which.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477348 2011-09-29T02:10:01Z 2013-10-08T17:03:43Z Doh!

Spotted at the Microsoft Store today.

No Winblows comments, please.]]>
Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477363 2011-09-22T21:00:00Z 2013-10-08T17:03:43Z Remember when app installers used to have multiple progress bars?

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477054 2011-08-15T14:55:00Z 2013-10-08T17:03:39Z With 185 tabs open, here's what Chrome does when it quits and restarts

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477070 2011-07-22T21:35:00Z 2013-10-08T17:03:40Z A rant about MailChimp's list import restrictions and why I can't use MailChimp

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:

  • mail@
  • me@
  • hello@
  • office@
  • info@
  • sales@
  • billing@
  • editor@
  • webmaster@
  • support@

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.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477091 2011-07-16T21:53:00Z 2013-10-08T17:03:40Z Working on something really cool with @vincentchu at Posterous Hack Day

It's called Printerous and it's going to be awesome.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477107 2011-07-12T02:46:00Z 2013-10-08T17:03:40Z So #homerunderby is trending but #HRDerby isn't. Apparently nobody saw the giant sign behind home plate... ]]> Cory Watilo tag:640kb.corywatilo.com,2013:Post/477129 2011-07-10T01:49:00Z 2013-10-08T17:03:40Z Wireframes for Posterous hack day requested apps

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)

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477148 2011-07-06T06:09:52Z 2013-10-08T17:03:41Z In case my level of nerdiness were ever in question... ]]> Cory Watilo tag:640kb.corywatilo.com,2013:Post/477170 2011-06-27T00:45:05Z 2013-10-08T17:03:41Z Heat sink much? ]]> Cory Watilo tag:640kb.corywatilo.com,2013:Post/477191 2011-06-07T16:14:00Z 2013-10-08T17:03:41Z FX hates the iPad.

Their video player supports HTML5 video, but it's disabled. Makes total sense.

Cory Watilo
tag:640kb.corywatilo.com,2013:Post/477215 2011-06-02T22:12:00Z 2013-10-08T17:03:42Z Digital Legos

Cory Watilo