Posts by Stephen Walcher

One of the sites I manage, Late Night Record Pool, has been having bandwidth issues as of late. They enjoy roughly 8,000 unique visits a month, and with the ability to preview any song or video in their extensive library, the bandwidth adds up fast. We didn’t want to give up this awesome feature to the site, but we had to do something. So, I decided to try and come up with a way to just preview the songs, sending out only a fraction of the bandwidth every time. There are tons of classes and programs that offer up the ability to extract a section from an MP3, but they all require you to save the file before using it. That’s a good method, but with a library of music approaching two terabytes, suddenly adding a preview-version of every song would not be feasible. I had to come up with a way on my own to do it on the fly. $getID3 = new getID3(); $id3_info = $getID3->analyze($filename); list($t_min, $t_sec) = explode(':', $id3_info['length']); $time = ($t_min * 60) + $t_sec; $preview = $time / 30; // Preview time of 30 seconds $handle = fopen($filename, 'r'); $content = fread($handle, filesize($filename)); $length = strlen($content); if (!$session->IsLoggedIn()) { $length = round(strlen($content) / $preview); $content = substr($content, $length * .66 /* Start extraction ~20 seconds in */, $length); } header("Content-Type: {$id3_info['mime_type']}"); header("Content-Length: {$length}"); print $content; Note: the site from which I’m pulling this example also uses the getID3 PHP library to get information like Artist, Title, Mime-Type, etc. Now that you’ve read over the code, let’s go back and look at the important lines. Lines 5 and 6 break down the runtime of the entire song (in minutes:seconds) to give us the total number of seconds. From there, a little math on line 8 to get us the exact proportion 30 seconds would be on this song. Next, we bring the MP3 file into the code; Lines 10 and 11 use the fread method to read the file into the variable $content. We now have a (very large) string representing the MP3. After we pull the file in, and if the user is a logged-in user, we simply output our headers and print this string out. Because of the headers and string we send, the browser will interpret the script as an actual MP3 file and start playing/downloading. The IF block starting at line 15 handles the preview functionality for users who are not logged in. Using the proportion value we found at line 8, we then calculate out how many bytes will equal 30 seconds for this particular song, and we substr...

While designing my portfolio page, I wanted to bring in a simple desaturate effect to my images. After a little searching, I found that this seemed to be a very easy task, so long as I was using some kind of Javascript framework. This seemed to be a bit overkill for my purposes so I set to trying to find a pure (no script) way to accomplish this task. After some research, I found my method: CSS Transitions. Over the last year or so, the capabilities of web browsers have risen to accommodate the basic use of CSS Transitions in every up-to-date browser. These include size, position, and for the purposes of this tutorial style. For this tutorial, you need 4 things: some markup, a little CSS, and two images, one a de-saturated version of the other. To see a demonstration, check out my portfolio. Images: Markup: CSS: div.image { position: relative; width: auto; height: 100px; float: left; border: solid 2px #333; } div.image img { position: absolute; display: block; top: 0; left: 0; } div.image:hover img.bw { opacity: 0; -webkit-transition: opacity .1s linear .1s; -moz-transition: opacity .1s linear .1s; -o-transition: opacity .1s linear .1s; transition: opacity .1s linear .1s; visibility : hidden; } div.image img.bw { z-index: 21; -webkit-transition: opacity .1s linear .1s; -moz-transition: opacity .1s linear .1s; -o-transition: opacity .1s linear .1s; transition: opacity .1s linear .1s; visibility : visible; } div.image img.color { z-index: 20; } One thing I should explain at this point is that the code in this tutorial does not really transition “between” the two images, but rather creates the illusion of a between transition. We accomplish this by positioning the two given images on top of one another and then adjusting the opacity property of the “top” black-and-white image, revealing the “bottom” colored image. In order to better explain this, let’s break everything down to two separate problems: we need to position the images on top of one another, and we need to be able to transition between the two. First, you can position two items on top of each other using a little-known CSS trick. Normally, when using the code position: absolute in CSS, it causes the element to jump out of the flow of a website and set its positioning based on the origin point (0,0) of the browser. This usually is the top-left of a browser, causing all kinds of problems for center-oriented or fluid-width websites. Now, with this trick, you can fool the browser and change the origin point for any object. Starting with the container (Line 1, markup and css), set your CSS to position: relative, then...

This is a new one hot off the press. I’m excited because this is the first actual product I’ve come up with that I can immediately put on my blog. Right now, I’m working on a site that will eventually use brand-based templates. The client hopes to eventually sell to other people, who can then color up the site to match their particular branding and colors. For the most part, this is easy. CSS covers most of the items that would be colored but images cannot…. The images on this site need to not only have a changing color, but there are shadows and other elements to the images that need to be branded as well. This is the original image: Here’s an example of what I’m talking about: The process for this is pretty easy. To start, you need to break your source image into separate, one-color (black) layers; one for each different color grade you plan to use. From there, the code will work to overwrite your one-color channel with the desired color and grade. Take our source image; when you break it apart, you get the following layer images: Another thing to note: over time experimenting with this code, I’ve found it best to start with a image larger than you intend to use. For the most part, this seems to help with pixelation in merging the layers. Our source image cleanly breaks into three layers: the border, the background, and the quotes. Now, we want the original color to be assigned to the border layer, a solid white to the quotes, and somewhere in between for the background. Use whatever method you would like to measure out the differences in your original source image. For ours, I found the color to be about 35% lighter than the border. So, for any new image, we know that the background will be that same grade lighter, whatever the color. After a little Google searching I found the below function (originally here) to help translate colors for me. Simply provide it a six-character hex code (eg. #FF0000) and a factor, and the code will return you a new six-character hex that represents a color that is that much closer to white. function hexLighter($hex, $factor = 30) { $new_hex = ''; $base['R'] = hexdec($hex{0}.$hex{1}); $base['G'] = hexdec($hex{2}.$hex{3}); $base['B'] = hexdec($hex{4}.$hex{5}); foreach ($base as $k => $v) { $amount = 255 - $v; $amount = $amount / 100; $amount = round($amount * $factor); $new_decimal = $v + $amount; $new_hex_component = dechex($new_decimal); $new_hex .= sprintf('%02.2s', $new_hex_component); } return $new_hex; } Next, we set up our images to work with. Using the...

I’m a big fan of content over images in a website. That’s not to say that all images or graphic-based content is bad; I just believe much of what a designer wants for a website, and what is actually required to make that happen, are two completely different things. Many years ago, I was a child of the “table-based” design principals championed by slicing-capable programs like Fireworks and (unfortunately) GoLive. Graphic-based “table websites” load slowly, have the sliced-up feel to them, and frankly just look ugly. It’s taken a long time to break myself of the bad habits perpetuated by programs like these, and to see that I could build sites from a rendering using only a fraction of the images I would have used to. Over time, I will add more and more of the techniques I’ve learned to this, and today I want to focus on one of the most important: gradients. Gradients are everywhere, in every design you’ve probably ever seen. Because of these, it is sometimes harder to not use images, but not impossible. Recent advances in browsers capabilities have allowed for CSS gradients to become prominent features in a site’s design. Of course, not everybody has upgraded to state-of-the-art browsers, so we will have to use a variation of “Fallback Declarations” again in order to tastefully degrade your site to the capabilities of older browsers. Here’s the code: Markup: CSS: #gradient_box { /* Simple visual properties */ height: 100px; width: 100px; border: solid 2px black; /* Gradient code */ background: #FF0000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); background: -webkit-linear-gradient(top, #FF0000, #00FF00); background: -moz-linear-gradient(top, #FF0000, #00FF00); background: -o-linear-gradient(top, #FF0000, #00FF00); } Here’s an example of how it will look. The code here is simple. First, you set the background color, establishing a base-level color for the element. After that, you add the IE-specific declaration filter. For this tutorial, I chose the “gradient” filter, but a full list of the different available filters for IE can be found here. Then, you add the vendor-specific prefixes (webkit, mozilla, and opera) and you’re done. Very simple! One quick note, while these features are not fully supported (waiting on you IE), you can add more colors to your gradient by adding more color codes to the end of the list. linear-gradient(top, #FF0000, #00FF00) becomes linear-gradient(top, #FF0000, #00FF00, #0000FF) and so on. You can also use transparency by using rgba values, assuming your browser is in the 21st century, of...

Definitely one of the higher-obtainables in my field, the loftiest of lofty goals, is the ability to embed fonts on a website. As it stands now, there are only about 15 different fonts (and their respective variations) available to every user on every computer. Even a first-year designer can tell you that will get pretty boring pretty fast. Enter @font-face. A CSS specification that came about in 1998 (with the rest of CSS2), this specific declaration allows you to specify any font you can name to be used in your website. Unfortunately, this isn’t a perfect world, and just simply saying you want to use a font, doesn’t at all mean that the font will actually show up when the user visits your site. Any time a font is called in a website, the browser will check for it in the user’s computer and, if they do not have it, the browser will change your fonts to something the computer does have. Whatever it changes to, you can pretty much guarantee that you won’t like it. So, how do we get our fonts down to their computers? Very simple: we embed them. An embedded font is a file (or files) placed on the websever with the site. When the CSS code calls for a font, the browser runs like normal, checking the user’s computer for the font. But, when it doesn’t find it, instead of defaulting to some lesser font, the browser now has another place to look: your embedded file. The browser proceeds to download and cache the font file, and you now have beautiful, custom fonts attached to any element on the site you want. Of course, no browser really is alike in how they handle these embedded files, so you have to make multiple different types of embedded fonts to cover the different possibilities. There are at least 18 different types of embedded fonts. They include .woff (Mozilla), .dfont (Mac OSX), .suit (Mac Classic), .eot (IE), .otf (also IE), .svg (iOS, new HTML5 standard), and .ttf (Windows). Most people will not have anything besides a TrueType (.ttf) or an OpenType (.otf) font file, so you will have to convert what you have into what you need. There are many different methods, online and off, to do this. After many trials and some errors, I’ve found the best to be the online convertor at the aptly-titled http://onlinefontconverter.com/. I’d like to credit the post at Paul Irish’s blog and the great guys over at Six Revisions for helping me learn about this subject. @font-face { font-family: 'Sketchy'; src: url('fonts/sketchy-webfont.eot'); src: local('☺'), url('fonts/sketchy-webfont.woff') format('woff'), url('fonts/sketchy-webfont.ttf') format('truetype'), url('fonts/sketchy-webfont.svg#Sketchy') format('svg'); font-weight:...