John Attebury | Web design, programming and administration

March 1, 2013
by John Attebury
0 comments

Displaying two rounded corners in IE<9 using CSS3PIE and SASS

TL;DR Nothing fancy, but this might save you some time if you’re using CSS3PIE and SASS.

Four rounded corners were easy enough to do using CSS3, save for IE, of course.

I already had a SASS mixin:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

A GIS for rounded corners in IE suggested CSS3PIE.

After time wasted trying different configurations, I learned to always use an absolute link for PIE.htc.

I first tried

behavior: url(PIE.htc);

and

behavior: url(css/PIE.htc);

with no success.

Only

behavior: url(/PIE.htc);

worked.

I needed one box to round only two corners, so I copied this CSS from border-radius.com.

-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;

CSS3PIE didn’t support this format, but did support the shorthand code.

border-radius: 0 0 8px 8px;

So I added a mixin to handle specific corners and made CSS3PIE happy.

@mixin border-radius-specific($radius1, $radius2, $radius3, $radius4) {
  -webkit-border-radius: $radius1, $radius2, $radius3, $radius4;
     -moz-border-radius: $radius1, $radius2, $radius3, $radius4;
          border-radius: $radius1, $radius2, $radius3, $radius4;
}

January 25, 2013
by John Attebury
0 comments

Learning JavaScript Design Patterns by Addy Osmani; O’Reilly Media

If you want to take the step from spaghetti code to web application, read this book.

I’ve incorporated two patterns into a recent project. Understanding and coding within the patterns was a much better coding experience and resulted in a much better app.

Read. This. Book.

–

I reviewed this book as an ePub on the iPad for O’Reilly’s Blogger Review Program.

September 4, 2012
by John Attebury
0 comments

Buying a car online: dealer scheme not to deliver vehicle

You got such a good deal that we can’t afford to deliver it to you.

We recently found and purchased a truck online. The deal took until late afternoon to complete, but the dealership (based 110 miles away) agreed to deliver the truck. They went so far as to call me stating that they’d be on the road in an hour.

A short time afterwards, they called to tell me that they couldn’t find a driver and that because I got such a good deal on the truck, that they couldn’t afford to hire one to drive the truck to us.

It sounded like BS to me, but my wife had been in a minor accident earlier that day which rendered our only car undriveable and my brother lived near the dealership and had offered to drive to up to me. He had test driven the truck for me earlier that day and was kind enough to deliver the truck to us that night.

As it turned out, the minor accident actually totalled the car, so the very next week we were shopping for a replacement online.

And we found one in New Mexico from a dealership which claims on their website “We deliver to anywhere in New Mexico for free.”

Great. We’re about 1.5 hours from the New Mexico border. I send directions to a truck stop where we’ll meet the delivery. We get close to finalizing the deal, but as you may guess the salesman says, “You got such a good deal that we can’t afford to deliver it to you.”

Now I get it. I offer to abandon the deal saying that I wouldn’t buy from a dealership I couldn’t trust. Suddenly they can deliver the car. And they did, eventually, deliver the car to (the wrong) truck stop just west of the Texas border.

Fair warning. This appears to be a common scheme dealerships use to get an extra few hundred dollars out of buyers. If you’ve had a similar experience, please share it in the comments.

####

Feature image provided by Lee J. Haywood.

September 4, 2012
by John Attebury
0 comments

Maintainable JavaScript by Nicholas C. Zakas; O’Reilly Media

TL;DR

It’s easy to blaze your own coding trail, perhaps particularly so with Javascript. This book provides a comprehensive glimpse into the workflow and practices of an experienced Javascript developer. It’s a good read whether you’re blazing your own trail or trying to clear one for a group.

####

Maintainable Javascript provides a useful mix of intermediate and advanced Javascript concepts and practices based on widely accepted theory and grounded in the author’s real world experience.

The book is broken into 3 sections.

Style Guidelines
Programming Practices
Automation

Style Guidelines

A nice survey of style guidelines found in several libraries and well-known approaches to coding Javascript including JSLint and JSHint.

Programming Practices

Presents a great deal of information from both the author’s experience and general theory. I learned something even in the areas in which I was already familiar.

Automation

Convincing arguments for automation with some examples, but no mention of Codekit or LiveReload.

Maintainable Javascript reads like a worthy sequel to Douglas Crockford’s Javascript: The Good Parts.

I reviewed this book as an ePub on the iPad for O’Reilly’s Blogger Review Program.

August 30, 2012
by John Attebury
1 Comment

A quick workflow tip using SASS, Sprite Right and Codekit

TL;DR

Export your spritesheets as a SASS partial
Import the partial into your SASS document
That’s it. Everytime you save your spritesheet, CodeKit automatically processes your stylesheet with your new spritesheet classes.

I use Sprite Right to manage sprites and CodeKit to speed development. Using SASS partials, you can combine these two Mac apps to save a lot of time.

First, using SpriteRight, export your spritesheet as a SASS partial.

I use _sprites.scss. (Note the ‘s’ before ‘css’. The underscore prevents SASS from directly compiling a file, thereby producing an unneeded CSS file.)

Click ‘Settings’ in SpriteRight to manage your export settings.
Choose your file output path.
Select ‘Export example CSS’
Set your output path
Prefix your filename with an underscore and use the .scss extension.

After saving and exporting, you’ll be asked if you really want to use the .scss extension. (Yup.)

Second, import the partial into your main SASS file.

@import "sprites";

Third, there is no third. On save, CodeKit will

Compile your SASS document importing all of your spritesheet classes.
Refresh your test site in Chrome or Safari
Allow you to admire your work

August 23, 2012
by John Attebury
0 comments

Upgrading to Mountain Lion: Forbidden 403, You don’t have permission to access /~username/ on this server

One of these days I’m going to research OS X upgrades before the fact. One of these days.

After upgrading to Mountain Lion my local websites did not run anymore. I received a nice little “403 Forbidden Error”.

A quick GIS revealed that this was common knowledge, but the same GIS quickly found a fix.

Neil Gee’s Forbidden 403, You don’t have permission to access /~username/ on this server pointed me in the right direction, but my websites still didn’t work.

Changing Neil’s settings for my username.conf from

<Directory "/Users/username/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

<Directory "/Users/username/Sites/">
Options Indexes MultiViews FollowSymLinks
AllowOverride None
Order deny,allow
Allow from all
</Directory>

worked for me. (I use a lot of symlinks and Dropbox in my workflow.)

July 18, 2012
by John Attebury
0 comments

A modest proposal for campaign finance reform

I’ve got a great new idea for campaign finance reform.

It would be more honest to just let people (cough, cough, corporations) purchase votes.

Let’s say 1 vote is worth 1000 dollars. Then anyone can buy enough votes to select the candidate they want.

This will remove any doubts about corruption and the money raised can be used to pay down the national debt.

Who’s with me?

May 22, 2012
by John Attebury
0 comments

JavaScript Pocket Reference, 3rd Edition, by David Flanagan; O’Reilly Media

TL;DR A useful and cheaper substitution for the 6^th edition of JavaScript: The Definitive Guide, especially if you travel. This is not a javascript reference. It’s an excerpt.

From the preface:

This book is an excerpt from the more comprehensive JavaScript: The Definitive Guide… I’m hopeful that some readers will find this shorter and denser book more useful than the larger and more intimidating volume from which it came.

Deciding to purchase JavaScript Pocket Reference comes down to whether or not you own JavaScript: The Definitive Guide.

If you do own JavaScript: The Definitive Guide there are only two reasons to purchase the pocket reference:

You travel
You’d rather flip through 288 pages rather than 1000 pages

If you don’t own the definitive guide, buy this and save yourself $25.

I reviewed this book as an ePub on the iPad for O’Reilly’s Blogger Review Program.

May 20, 2012
by John Attebury
0 comments

Remember automatic settings

I rushed home after the annular eclipse and imported photos into Adobe Lightroom. I was certain I’d gotten a few good shots despite a late start and intermittent cloud cover.

The first images appeared. They were disgusting. Noisy. I mean, really noisy. Noisy to the point of being pixelated. Colors were banded. Disaster.

The slow import process gave me a lot of time to think about what I’d done wrong. ISO? f-stop? Had I screwed up the camera sensor?

I hoped to salvage a shot or two and to maybe figure out where I’d gone so terribly wrong.

It didn’t take long to realize that I had done anything wrong during the shoot, but had during the import process.

My Lightroom is configured to auto-tone images upon import. The high contrast of the eclipse images made for bad auto toned images.

Lesson learned. Don’t forget about automatic settings after the shoot.