obleDesignWe create clean, easily maintainable, standards compliant websites that communicate a clear targeted message.http://obledesign.com/blog2009-11-09T01:00:00-07:00Adam CrownoblePrint CSShttp://obledesign.com/blog/print-css/2009-11-09T01:00:00-07:002019-10-02T21:43:59-07:00Adam Crownoble<h1>Print CSS</h1>
<h3>The Problem</h3>
<p>
<strong>Printer-friendly links must die!</strong>
</p>
<p>Really, they should. The next time you see a printer-friendly link on a website I encourage you to give the makers of that site a disapproving shake of the head and ponder all of the ways that...</p><h1>Print CSS</h1>
<h3>The Problem</h3>
<p>
<strong>Printer-friendly links must die!</strong>
</p>
<p>Really, they should. The next time you see a printer-friendly link on a website I encourage you to give the makers of that site a disapproving shake of the head and ponder all of the ways that you are more enlightened than them.</p>
<p>
Why are printer-friendly links so evil? Because there is a better way. A much better way. It's called
<acronym title='Cascading Style Sheets'>CSS</acronym>
.
Maybe you've heard of it.
</p>
<h3>The Solution</h3>
<p>
One of the most powerful features of CSS is
<a href='http://www.w3.org/TR/CSS2/media.html'>media types</a>
.
Media types allow CSS to be automagically customized based on what device is viewing the page. Media types range from the oh-so-common
<em>screen</em>
to the never-really-used
<em>speech</em>
and
<em>braille</em>
.
That's right, you can write CSS specifically for screen readers with properties like
<em>
<a href='http://www.w3.org/TR/css3-speech/#voice-volume'>voice-volume</a>
</em>
,
<em>
<a href='http://www.w3.org/TR/css3-speech/#voice-stress'>voice-stress</a>
</em>
and
<em>
<a href='http://www.w3.org/TR/css3-speech/#voice-family'>voice-family</a>
</em>
.
But that's a whole other blog post.
</p>
<p>
The
<em>print</em>
media type may not be as obscure as
<em>braille</em>
but it's definitely not as popular as it should be. Once you see how easy writing a print stylesheet is, I think you'll agree that almost every website should have a print stylesheet.
</p>
<h3>The How-To</h3>
<p>Adding a print stylesheet to this site literally took less than 5 minutes. Here's what I did.</p>
<ol>
<li>
Created a
<a href='http://obledesign.com/assets/templates/obleDesign/css/print.css'>print.css</a>
file on the web server.
</li>
<li>
Addd
<code>#menu a, #footer a { display:none; }</code>
to the file.
</li>
<li>
Add
<code><link type="text/css" rel="sytlesheet" media="print" href="print.css" /></code>
to the
<code><head></code>
tag of the site.
</li>
</ol>
<p>
And that's all it takes to get a basic print stylesheet up and running on a website. Now if you want to really do things right, you should also go back and rethink your existing
<acronym title='Cascading Style Sheet'>CSS</acronym>
files which probably don't have any defined media type. If you don't set the media attribute then the default
<em>all</em>
is assumed. If that's the case with your site you probably want to go back and divide it up into two files: all.css and screen.css, with matching media type attributes in their corresponding <link> tags.
<em>All</em>
will apply to every media type. This is a good place to put text styling and a few other things.
<em>Screen</em>
will (or at least should) only apply to normal screens like desktops, laptops, etc. And is a good place to put layout styles.
</p>
<p>
Well I hope this quick overview opened you eyes to the possibilities of print stylesheets. In case you haven't figured it out yet, the
<em>Print Preview</em>
feature in your browser works just fine for viewing print stylesheets. No need to waste stacks of paper.
</p>
<h3>Coming Soon</h3>
<p>
One of the media types I didn't cover at all is
<em>handheld</em>
.
That's because the
<em>handheld</em>
media type has been so abused/ignored by mobile browsers that what should have been a cornerstone of modern website design has become almost completely useless. I'll probably be posting a
<del>rant</del>
article on the
<em>handheld</em>
media type in the near future. Check back soon.
</p>
New App for SimplyFast.infohttp://obledesign.com/blog/simplyfast-headers/2009-09-23T00:00:00-07:002019-10-02T21:43:59-07:00Adam Crownoble<h1>New App for SimplyFast.info</h1>
<p>
Today, while troubleshooting some proxy issues, I found myself needing to take a peek at a webpage's HTTP headers. Normally the
<a href="http://chrispederick.com/work/web-developer/">Web Developer</a>
<a href="http://firefox.com">Firefox</a>
<a href="https://addons.mozilla.org/en-US/firefox/">extension</a>
comes to my rescue, but because I was behind a proxy I wanted...</p><h1>New App for SimplyFast.info</h1>
<p>
Today, while troubleshooting some proxy issues, I found myself needing to take a peek at a webpage's HTTP headers. Normally the
<a href='http://chrispederick.com/work/web-developer/'>Web Developer</a>
<a href='http://firefox.com'>Firefox</a>
<a href='https://addons.mozilla.org/en-US/firefox/'>extension</a>
comes to my rescue, but because I was behind a proxy I wanted a second opinion.
</p>
<p>
A quick
<a href='http://www.google.com/search?hl=en&amp;q=get+http+headers&amp;aq=f'>Google search</a>
didn't turn up anything too wonderful so I decided it would be a good addition to
<a href='http://simplyfast.info'>SimplyFast.info</a>
and whipped up a
<a href='http://simplyfast.info/headers'>quick little app</a>.
</p>
<p>
By the way,
<kbd>
<a href='http://www.gnu.org/software/wget/manual/html_node/Download-Options.html#index-server-response_002c-print-35'>wget -S</a>
</kbd>
also does a good job of retrieving headers
</p>
Site Redesignhttp://obledesign.com/blog/redesign/2009-09-20T00:00:00-07:002019-10-02T21:43:59-07:00Adam Crownoble<h1>Site Redesign</h1>
<p>
If you're reading this, there's a good chance you've already noticed that
<a href="http://obledesign.com">obleDesign.com</a>
has been completely redesigned from the ground up.
</p>
<p>
The old site had been neglected for quite a while and was hosted on a run-of-the-mill web host...</p><h1>Site Redesign</h1>
<p>
If you're reading this, there's a good chance you've already noticed that
<a href='http://obledesign.com'>obleDesign.com</a>
has been completely redesigned from the ground up.
</p>
<p>
The old site had been neglected for quite a while and was hosted on a run-of-the-mill web host. Now that I've got a shiny new
<a href='http://linode.com'>Linode</a>
I decided it was time for a new site to go with it.
</p>
<p>
The site is still a work in progress but it's coming along. Expect to see more
<a href='projects'>projects</a>
and
<a href='blog'>blog posts</a>
coming in the near future. One of the features that still isn't quite working is the comments. I hope to have them up and running very soon.
</p>
SSH Upgrades in WordPresshttp://obledesign.com/blog/wordpress-ssh-upgrade/2009-09-10T00:00:00-07:002019-10-02T21:43:59-07:00Adam Crownoble<h1>SSH Upgrades in WordPress</h1>
<p>
Upgrading
<a href="http://wordpress.org/extend/plugins/">WordPress plugins</a>
or even
<a href="http://wordpress.org">WordPress</a>
itself can be get old real quick. Especially since some popular plugins get updated fairly frequently. Fortunately WordPress has an Upgrade Automatically feature that makes the...</p><h1>SSH Upgrades in WordPress</h1>
<p>
Upgrading
<a href='http://wordpress.org/extend/plugins/'>WordPress plugins</a>
or even
<a href='http://wordpress.org'>WordPress</a>
itself can be get old real quick. Especially since some popular plugins get updated fairly frequently. Fortunately WordPress has an Upgrade Automatically feature that makes the process not so painful. Unfortunately the Upgrade Automatically feature only allows you to upgrade over
<a href='http://en.wikipedia.org/wiki/File_Transfer_Protocol'>
<acronym title='File Transfer Protocol'>FTP</acronym>
</a>
or
<a href=''>
<acronym title='File Transfer Protocol Secure'>FTPS</acronym>
</a>
at first glance. However, WordPress does support upgrading over
<a href='http://en.wikipedia.org/wiki/Secure_Sockets_Layer'>
<acronym title='Secure Sockets Layer'>SSH</acronym>
</a>
if the right
<a href='http://www.php.net'>
<acronym title='PHP Hpyertext Preprocessor'>PHP</acronym>
</a>
extensions are installed.
</p>
<p>
<em>
These instructions are for
<a href='http://www.ubuntu.com'>Ubuntu 8.04</a>
but will probably work fine on any
<a href='http://www.debian.org'>Debian</a>-based
distribution and possible even others.
</em>
</p>
<ol>
<li>
Open a terminal and
<acronym title='Secure Sockets Layer'>SSH</acronym>
into your webserver.
</li>
<li>
Run
<kbd>sudo aptitude install libssh2-1 libssh2-1-dev</kbd>.
</li>
<li>
Then run
<kbd>sudo pecl install -f ssh2</kbd>.
</li>
<li>
Next run
<kbd>sudo nano /etc/php5/apache2/conf.d/ssh2.ini</kbd>,
add
<kbd>extension=ssh2.so</kbd>
to the file, exit and save.
</li>
<li>
Reboot Apache by running
<kbd>sudo /etc/init.d/apache2 restart</kbd>.
</li>
</ol>
<p>
You should now see an
<acronym title='Secure Sockets Layer'>SSH</acronym>
option when upgrade WordPress or its plugins.
</p>