The RobLeeper.com Blog

A responsive layout for robleeper.com

2011-12-11T18:34:29+00:00

If you're visiting the site on an iPhone or other mobile phone, you're already seeing the modified version of robleeper.com. In which case, the picture of the site should feel a little like looking at your reflection in a mirror pointed at another mirror. If you aren't on a mobile device... you won't—or at least shouldn't—notice anything different.

I started working on making the entire site responsive as I was coming up with the latest design, but time was tight and it was more important to me to get the site live than to give it all the bells and whistles. As a result, I've been tinkering with the site and its layout since it went live, trying to get things "just so". Well, I've finally pushed the new styles online and I'm pretty pleased with things so far.

Needless to say, my obsessive tweaking tendencies will crop up from time to time to make things better.

Things I read this week, Nov. 28 - Dec. 4, 2011

2011-12-05T02:39:44+00:00

Apparently the Swiss have decided that downloading copyrighted materials for personal use is legal. While the media industry finds the internet to be a terrifying beast that must be put down, or at least slowed down, the Swiss gov't. believes they should *gasp* adapt. Torrent Freak, "Swiss Govt: Downloading Movies and Music Will Stay Legal"

Want to sell more in the iOS app store? Before you go lowering your price, maybe you should try to make a better and/or more innovative product? Oliver Richenstein, "The best way to climb in the App Store charts? No, it's not lowering the price."

Wait, that wasn't real? An amazing thread on Quorra with clips and reels of work showing the before and after of movies and TV shows. Think they were standing in the street during a snow storm? Think again. Quora, "What are things in movies you don't expect to be CGI, but that typically are?"

Photo credit: "Newspapers B&W (4) by NS Newsflash.

Fight the PROTECT IP bill

2011-11-16T17:08:19+00:00

Visit http://americancensorship.org/ to find out how you can fight this ridiculous bill.

Steve Jobs has died

2011-10-06T01:00:13+00:00

Here's to the crazy ones...

Textured CSS3 Buttons

2011-10-01T18:24:21+00:00

Updated Oct 9, 2011: Added video tutorial obout how to make the tiled grain textures.

I don't remember how I came across the website, but I read the article, Noise and Textures, on the Bjango blog. It's about designing textured buttons in Photoshop that scale and continue to be textured regardless of the size of the button.

It was cool, but then I started thinking of how to do the same basic thing with buttons using HTML and CSS3 and minimal images. I found a few sites online that use gradients, or have buttons that are transparent on a textured background, but I didn't see any where the buttons were, themselves, textured.

View the Textured CSS3 buttons demo

The textures

The first thing I needed to do was make some textures for the three buttons I planned to build: grain/noise, cloth, and diamond plating. I decided immediately to try building the textures from scratch, so I dropped into Photoshop and got to work. The first of the step-by-step instructions for creating the textures ~~will have to come some other time; they're way too involved for right now~~ can be seen below.

Some minor details of note: I saved the textures as PNG8 files, so that even IE6 won't choke on them, but I had to do the final file saving in Fireworks instead of Photoshop, otherwise the more delicate transparencies would have been destroyed. (Photoshop's "Save for Web" is not very good at all. Skip it and use Fireworks... it's infinitely better at giving lower file sizes and better image quality for the web.)

HTML

I wanted to keep the markup for the buttons as simple as I could, so I ended up with a span nested inside a link with a class to decide the styling.

<a href="link" class="bluegrain"><span>Link text</span></a>

CSS3

For the CSS, I used LESS CSS, though you could just as easily use SASS or go all-out on your own.

As with the Photoshop step-by-step, I'll save the uber-detailed descriptions for another time. Check out the demo's source code for the CSS that makes it all happen. If you have any questions, just leave a comment below and I'll see what I can do to help.

CSS3 Textured Buttons in the wild

The CSS and textures I made totally free to use. No restrictions, obligations, donations, or any other "tion"-ending words required. If you do decide to do something with these buttons, or it inspires you to go off on a tangent of your own, I'm interested in seeing it. Leave a comment below or drop a line to me on Twitter.

Facebook’s new ticker

2011-09-22T03:58:25+00:00

Facebook updated their site (again). Some people are flipping out like it's the end of the world. Others are flipping out about the people that are flipping out. It's a vicious cycle. Overall, my opinion of Facebook's update is something of a mixed bag.

A Facebook inside Facebook

Let's get to the core issue that everyone seems to be losing their minds over: the updates ticker. The feature reminds me of the old days of Facebook when you could see everyone's activity without having to jump through any hoops. The big difference, however, is that the ticker refreshes in real time, rather than upon request. Depending on how much is going on, you'd better be a quick reader.

It's actually not a bad idea. In fact, it's the quasi-roll-back that many users, myself included, have been wanting for a while now. Unfortunately, rather than putting this list front and center, it's been shoved to the side and refreshes at a sometimes alarming rate.

Also unfortunate is the ticker's inconsistent appearance on the page. The thing jumps to a fourth column that shows only when the browser window is wide enough (along with the fully expanded chat list), and snaps to the top of the third column when the window is narrower than 1240px. When in four column layout, the updates and chat list are the same width and fixed together, but once you kick into the three column layout, the updates size to fit the third column and the chat is collapsed (not to mention the magical appearance of an avatar grid in the left column as a double temptation to use chat). Once expanded in the three-column layout, the buddy list is narrower than the ticker/column and looks generally awkward. While I am very supportive of responsive design, the lack of consistency between the elements on the page is jarring.

Overall, the new updates/chat integration feels rushed and sloppy. There's obviously been thought that has gone into the ticker, but I'm curious as to what those thoughts were.

What are your thoughts are on the ticker? Leave a comment below and tell me what your thoughts are.

Hanging on to creativity

2011-08-03T20:58:05+00:00

I have a Pinterest account, and I absolutely love it. Being able to save and share my favorite pictures from around the web without taking up my own hard drive space is great. Sites like Pinterest, Tumblr, ffffound, and others provide an incredible wealth of inspiration, but I also find myself having to fight off some bad habits.

It's easy to get stuck in a bubble, repining images that are already on the site, rather than finding new content to bring in. Nobody wants to see the same set of ten pictures over and over, so I sometimes have to remind myself to make the effort and browse around to find new things and actually contribute to the community.

The biggest thing I fight is not actually acting on all the great inspiration these sites provide. I love to pin/repin things I've found, but it's important that these sites aren't used to replace my own creativity. It's great to admire others’ great work and be inspired by it, but that inspiration means nothing if it doesn't inspire action.

To that end, I recently finished a project with my great friends at Red Circle Letterpress. It was my one year anniversary to my wife recently, (the “paper” anniversary) so I took the design of an old oak tree I had made and we made a limited-run poster for her. I am really pleased with how it came out - and thankfully, so was the wife.

Mom’s lessons on web development

2011-06-01T03:33:17+00:00

Mom: bless her, the wonderful lady who spent years of her life fretting over every little detail so you might grow up to be a doctor or the President. The lady that fought so hard to get you outside, instead of cooped up in front of the TV, playing video games. Who would have thought that she would end up teaching you valuable lessons in web development? I mean... come on! She only learned to copy/paste a few months ago!

Still, the lessons are there, and they are important... even if you'd never admit it to her face.

Get outside and play!

I know, it doesn't seem to relate at all, but it does. Web developers aren't a bunch of hermits, but we can get over-focussed at times. It's important to take a break, blow off steam, and let the mind wander.

The value of taking breaks has been known for years, but it seems that we are still ignoring the facts and pressing to work harder instead. Mom wouldn't be happy about this: go play.

Clean your room!

It pains me to admit Mom had a point here, but she did. Whether your workspace is clean or not is personal preference, but keeping your code clean is serious business. Here's why:

Legibility. When you are working on a site, the last thing you want to do is waste time hunting down sections of code. Keeping it clean and tidy will help a great deal.
Future editability. Yes, you may remember where an item is right now but in six months, you likely won't remember what it's called, let alone where it is.
Delegateability. (I'm not sure that's a word.) Having clean, readable code ensures that other developers will be able to look at your files and make sense of them. This is important whether you are a single developer or working in a large team.

Play nice with others!

You never know who your next business contact will be, or where you will meet them. Whether they are a potential client, employer, employee, or partner, being nice and open with others will help keep you from burning bridges before you've crossed them.

Share!

Share of yourself. Share what you know, who you know, and what you do. Whether it be snippets of code, an open source project or just a blog with web development tips, put yourself out there; don't close yourself off and try to hog all the toys.

So go tell your mom thanks for the lessons that enabled you to be a better person... and a better web developer. It's a surprise, but in the end, it's paid off nicely... even though you probably still don't make your bed very often.

Photo credit: Head Web Cool Wall by James Kirkup

Does Hollywood want audiences in the dark?

2011-05-23T17:00:35+00:00

I just read "A movie lover's plea: Let there be light" on boston.com and it baffled me—not from a technical standpoint, but as a movie-lover and as someone who takes pride in what they do.

It's a relatively simple matter: a large number of cinemas aren't changing out the lens between showing 2D and 3D films. While it doesn't sound like a big deal, it can result in as much as an 85% reduction in the brightness of the image when you show a 2D film through the 3D lens.

Unfortunately, it seems that most studios, cinemas, and suppliers of the projectors are not responding to the allegations, or responding in an evasive manner. The spokesperson for Regal, the largest multiplex operator in the nation, was quoted in the article as saying "Patron response has been overwhelmingly positive toward digital cinema and all of the associated entertainment options provided by this technology." Sure the response to digital projectors has been positive; the picture with digital projectors is incredibly bright and sharp. That wasn't the question, though.

A (conspiracy) theory

Audiences have been screaming complaints that 3D movies are muddy, ugly, dim, and inferior to the experience of 2D movies. Yes, the 3D can be fun, but the quality isn't there. So, what if both 2D and 3D are shown with the same lens that messes up the quality? Both versions are muddy, dark, and ugly... but one is in 3D! Thus, the gimmick stands alone as a selling point, with no better looking alternatives.

Is it just laziness? Looking out for the bottom line? What do you think?

Photo credit: Cinema, by jimmymac333

Leather Desktop Wallpaper

2011-05-20T13:51:15+00:00

The demand for the leather wallpapers has been more than a little surprising, but I'm not complaining! The iPhone 4 Aired Leather Wallpaper has been one of the most popular posts on my site since it was first posted almost a year ago. Since that time, I've also posted a version of the wallpaper for the iPad that has gained traction very quickly as well. It seems leather wallpapers for iOS devices are pretty popular... who knew?

Anyway, I've since tweaked the leather background a bit and come up with a Aired Leather Desktop Wallpaper. I've been using it for a while on my dual monitor setup for a while now to make sure the holes aren't overwhelming and tweaking it a bit here and there... I'm pretty happy with the results, so here you go!

Download the Aired Leather Desktop Wallpaper.