January 17, 2012
by Joe
0 comments
I don’t agree with SOPA and would be shocked if it actually passed, considering Wikipedia, Reddit, Google, and everyone else is blacking out their sites in protest. I made the foreboding-yet-snazzy banner above for my own site. If Congress muscles this bad bill through, then they have completely lost touch with us. It’ll be interesting to see who votes for this in Congress in the end. I recommend making a list…
Learn more about why SOPA/PIPA is bad, and then contact your Congress reps.
December 6, 2011
by Joe
0 comments
I never, ever use this element, but HR has been bequeathed new life in HTML5 and I may start using it for providing more thematic break awesomeness to my already blindingly-awesome prose and poetry.
Anyway, someone asked me this question: Is color supported in all browsers by the HR element? To which I replied: “I have no clue. Let me investigate.”
Here’s an initial test:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HR colors I have known...</title>
<style type="text/css" media="screen">
.blue {
color:blue;
}
.red {
border-color:red;
}
</style>
</head>
<body>
blue:
<hr class="blue">
red:
<hr class="red">
green:
<hr color="green">
</body>
</html>
Well hambone. Using the text rule for color on WebKit browsers yields no color change. Works fine in all cases in Firefox. IE gives no quarter to the border-color CSS property, but works fine with the text color value. Every browser supports HTML color attributes, but you know that using presentational markup is as wrong as Michelle Bachmann’s views on evolution and vaccination, so you just say no.
So what’s a poor web dev to do? Define a border width:
.red {
border:none;
border-bottom:thin solid red;
}
Replacing the original border-color rule with the shorthand listed here, or just providing an explicit border-width property, will render a consistent 2 pixel line in all browsers. If we just wrote something like border:thin solid red; we’d get a 2-pixel border – see you’d think the HR element is just a line, but in fact the browsers all treat it like a box it seems. So we have to clear it out with border:none; and then add a border-bottom or border-top rule to set a 1 pixel line. If you want different widths, you have arguably more accurate control by only having to argue with one border instead of two.
What… you want to replace that HR with a background image? Good idea. Check out this post at Neatly Sliced for the answer, and gird your loins for the usual IE kludgeries.
November 14, 2011
by Joe
0 comments
Just finished reading an excellent book: “Responsive Web Design” by Ethan Marcotte. If you build web pages, I want you to read this book. Here’s a few of my thoughts on what I just learned, and why you should read this one too.
The book begins with an overview of the evolution of page layout in web design, starting with it’s roots in printed page design and moving on to today’s reality that there is a multitude of screens and devices out there, with more on the way. We cannot predict what type of device our readers will show up with, and must adjust our belief system (if we have one) to accommodate the new realities that the various screen widths and mobile device sizes present us with.
The second chapter discusses the idea of designing within the constraints of a flexible typographic grid. Grid systems are somewhat of an artificial constraint that designers place on themselves to provide balance and symmetry to page layout, and on screen a new challenge is presented in that the page size is no longer fixed. The main takeaway here is to design content in flexible porportions to the variable screen widths that might be used to access your web pages. Mr. Marcotte puts forth some simple, accessible ideas for developers to leverage, making text more readable on unknown devices by putting forth a formula that I’ll repeat here mostly for the purposes of getting my own head wrapped around it:
target ÷ context = result
To decode Mr. Marcotte’s example, he begins with an assumption of a base font size of 16px. The headline in the comp is defined to be 24px. So to make it flexible, divide:
24 ÷ 16 = 1.5
And so the headline should be defined as 1.5em. Simple and elegant rule of thumb. Now we just need to remember to do it.
Chapter 3 applies this principle to flexible images, and expands upon it. There is the inevitable Questionable Functionality Challenge™ presented to us by Internet Explorer, which is quickly defused. That’s a lot of ink to dedicate to an obsolete web browser and the example demonstrates where the real problem lies by showing how awful text looks in resized images. But you aren’t locking up text in your images, right? I know, I know, it’s an academic example and clearly illustrates the failings of IE’s image resize capabilities. Let’s move on.
Chapter 4 introduces media queries. We’re finally at what I consider to be the coolest and most important part of the book – how to progressively enhance your web page layouts through the media query construct. Mr. Marcotte makes the argument in favor of using the min-width property instead of things like max-width (which tends to yield excessive code) and min-device-width (which only pertains to devices and doesn’t take into account variable web browser windows.) The max-width property is introduced for those that want to stop the insanity. (I do know people that expand their web browser to the full width of their 27″ high resolution monitors.)
Chapter 5 pulls it all together with strategies to integrate responsive design into your team’s workflow; how to make your design process itself a responsive one. He builds the case for Luke Wroblewski‘s “Mobile First” philosophy (a case that was already built up a bit in chapter 1) and finishes it all of with how to incorporate progressive enhancement using JavaScript to selectively pull in a slideshow component only when JavaScript is available and all the stars are in the proper alignment.
Overall, my belief has always been somewhat of the philosophy that there should be just “one web”; no “mobile web” or any other sort of alternate web reality that we should somehow slip into. Today’s mobile devices that are in fact being used to access the web are billed as fully capable web browsing devices, and indeed they are. Why deliver a shrunken-down version of your website just because they have a 3″ wide screen these days? It no longer makes sense in most cases; just reposition your content to accommodate their view. Every chapter includes simple, usable techniques that work, and I feel that these gems of advice should be a core part your future projects.
Lastly, I am very thankful for the appearance of the A Book Apart series. Each one of these volumes is, I believe, how a tech book should be: concise, full of valuable, practical, actionable information. I have read several of these so far, and each one has been a hit. I look forward to more.
November 11, 2011
by Joe
0 comments
I just discovered this handy little gem called annotate. Run it and it’ll insert a comment in all of your model files at once, outlining the schema. This is incredibly convenient when working with your Rails models to be able to see the data and types right there in the top of the file.
Here’s what my Noober (/app/models/noober.rb) model looks like by default:
class Noober < ActiveRecord::Base end
Spartan as always. Let's give ourselves something to look at with the annotate command. First, include annotate in your Rails 3 project in the Gemfile:
group :development do ... gem 'annotate' end
Run the install command to update your gems:
$ bundle install
Run it from within your project directory:
$ bundle exec annotate --position before Annotated (1): Noober
And the result should look something like this in your models:
# == Schema Information # # Table name: noobers # # id :integer not null, primary key # firstname :string(255) # lastname :string(255) # email :string(255) # nooblevel :integer # created_at :datetime # updated_at :datetime # class Noober < ActiveRecord::Base end
Awesome! Now I can see quickly which parts of the model I need to work with and add my code without having to peek at the database:
# == Schema Information
#
# Table name: noobers
#
# id :integer not null, primary key
# firstname :string(255)
# lastname :string(255)
# email :string(255)
# nooblevel :integer
# created_at :datetime
# updated_at :datetime
#
class Noober < ActiveRecord::Base
attr_accessible :firstname, :lastname, :email
validates :firstname, :presence => true
validates :lastname, :presence => true
validates :email, :presence => true
end
Works well for me!
October 5, 2011
by Joe
0 comments
I encountered my first Apple product in high school. I had come across a set of Apple IIs and remember trying out programs that taught typing, biology, and a few other areas of the school curriculum. I remember my grandmother going on about Steve Jobs for some reason – I think it was about a stock transaction and some press happening at the time. She seemed to try and point him out to me whenever she could; I suppose to exert some positive influence on me. He certainly dressed better than I: he wore bow ties and all I had on was a Grateful Dead t-shirt and a pair of worn-out jeans.
I had a series of Atari machines at home, and was even writing BASIC programs myself to handle my daily concerns – a personal phone book, a thing to program in bass lines and then set a tempo to whatever jazz tune I was trying to learn to improvise with, and a few other little experiments.
I remember coming across Atari and Commodore machines long before I first saw an Apple computer. But when I saw the Apple and worked with it a bit, I realized where the inspiration for those Atari and Commodore machines came from.
Then my teacher showed me his new Macintosh. He got only one for the school that year. It was amazing. It looked and worked like nothing any of us had seen before – fonts, graphics, the mouse, everything polished.
It had a modem. I had never heard of a modem. It connected to Bank of America. And some message boards. CompuServe, if I recall correctly.
Dark Castle. My cousin and I played Dark Castle until we dropped. When I worked the computer lab at NEC, we had Spaceward Ho LAN parties. I know what you’re thinking – whee that is the slowest game on earth. Hey this was 1991 on an AppleTalk network with a bunch of music majors…
At NEC I encountered Finale which did music engraving and arranging. I built myself a tidy little side business helping other students typeset their music theory and composition work, not to mention all the word processing, concert flyers, and copyediting I did. Having computer skills came in quite handy back then. It was Finale that taught me about typography and page layout, in that interesting and roundabout way that music engraving can only provide. It was working in Finale that led to my interest in computer-based graphic design, and ultimately in web development.
When I started weaning myself away from my music career, I took various daytime temp office gigs. I wound up commuting in to San Francisco from the opposite coast on a long BART ride every morning. I wound up on the road quite a bit as a computer systems trainer. I wanted something to do with all that down time commuting and traveling, and so I bought my first PowerBook, a 1400cs.
I taught myself a massive amount of graphic design and web development on that machine. (In-between a little WarCraft here and there, I’ll admit.) I always had a programming book with me on the train or in the airport, and I’d spend my time learning new skills. I haven’t stopped. I still do this today – study a new technology every chance I get, on my MacBook or maybe more recently in conjunction with an e-book on my iPad.
I have always loved to develop for these machines, and for the web, and now for all these little handheld devices that have way more power than those original Ataris and Apple IIs. And I love to spread that enthusiasm to others. How to build awesome websites. How to develop with joy. I love teaching, presenting ideas, getting others excited about it all.
Steve Jobs was the ultimate presenter. I would always look to him for inspiration on how to deliver an idea. He was also the ultimate visionary – I would always look to him to try and think ahead. Not so much to think what he was thinking, but to think in a similar methodology that would help me get to where I needed to go. He also had a passion for detail that I looked up to constantly.
Most importantly, underneath all that corporate and marketing glitz, underneath all the crazy stories and keynotes, there was a regular human being. A human being that had warm, humble, personal, and profound ideas, words of wisdom. Just another person trying to figure out what to do with his life. Basically, this person:
I saw Steve Jobs speak many times and studied his presentation style for my own stage technique. But in that speech above, everything hits home like a spike in the railroad tracks of my life. Everything. Every word of it. But mostly this:
When I was 17, I read a quote that went something like: “If you live each day as if it was your last, someday you’ll most certainly be right.” It made an impression on me, and since then, for the past 33 years, I have looked in the mirror every morning and asked myself: “If today were the last day of my life, would I want to do what I am about to do today?” And whenever the answer has been “No” for too many days in a row, I know I need to change something.
Remembering that I’ll be dead soon is the most important tool I’ve ever encountered to help me make the big choices in life. Because almost everything — all external expectations, all pride, all fear of embarrassment or failure – these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.
About a year ago I was diagnosed with cancer. I had a scan at 7:30 in the morning, and it clearly showed a tumor on my pancreas. I didn’t even know what a pancreas was. The doctors told me this was almost certainly a type of cancer that is incurable, and that I should expect to live no longer than three to six months. My doctor advised me to go home and get my affairs in order, which is doctor’s code for prepare to die. It means to try to tell your kids everything you thought you’d have the next 10 years to tell them in just a few months. It means to make sure everything is buttoned up so that it will be as easy as possible for your family. It means to say your goodbyes.
I lived with that diagnosis all day. Later that evening I had a biopsy, where they stuck an endoscope down my throat, through my stomach and into my intestines, put a needle into my pancreas and got a few cells from the tumor. I was sedated, but my wife, who was there, told me that when they viewed the cells under a microscope the doctors started crying because it turned out to be a very rare form of pancreatic cancer that is curable with surgery. I had the surgery and I’m fine now.
This was the closest I’ve been to facing death, and I hope it’s the closest I get for a few more decades. Having lived through it, I can now say this to you with a bit more certainty than when death was a useful but purely intellectual concept:
No one wants to die. Even people who want to go to heaven don’t want to die to get there. And yet death is the destination we all share. No one has ever escaped it. And that is as it should be, because Death is very likely the single best invention of Life. It is Life’s change agent. It clears out the old to make way for the new. Right now the new is you, but someday not too long from now, you will gradually become the old and be cleared away. Sorry to be so dramatic, but it is quite true.
Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma — which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.
My emphasis added from the transcript. I’m sorry to point out the gloomy part, especially on a day like this. But that is the part that, when I first read it in transcript, made me remember what all this is all about. I can remember talking with my grandmother, bedridden for years before she passed away, and thinking to myself – reminding myself constantly – that I had to do something with myself, and something great. Or to at least die trying. It’s the meaning behind that part that has fueled all of my passion in what I do today. It is exactly why I push forward, no matter what. It’s the knowledge that I am mortal, and that there are generations that will follow me that will be influenced upon the things I do and say. I want that to be positive influence, as much as I can muster in my flawed and tragic human way, in what little time I have on this Earth.
And in a way, this isn’t gloomy after all; this is just life moving forward. I am sad today for losing a great inspiration, and I am sad for all the people far closer to him than I that are truly at a loss. But as for the notion of our own mortality, I am hopeful for the future. I am hopeful that future generations will be better off, will have learned from our experiences, and will continue to improve us all and move us forward. I am grateful for having been influenced, in a positive way, and I hope to continue to pay it all forward.
But still, right now, I just feel sad.