Just pop this code in and you’re good to go!

Thanks to Simon Willison who blogged about it first!

I have a personal server that I use to store various files that generally range in size from 150 MB to 14 GB. Now if we lived in a perfect world the download would take up as much bandwidth as it can which would have me downloading at around 1.8 MB/s. Unfortunately through forces that I understand to be outside my control I only get about 200 Kb/s.

Interestingly, I can download several files from the same sever concurrently at that speed. This is great when downloading several smaller files at the same time, but rather useless when you’ve got one big one. It doesn’t seem fair.

This is where split and cat come in! These are two commands you can use via command line (though there are many GUI alternatives, but that’s lame). Split, of course, will take in a file and split it into smaller pieces. Cat (short for concatenate) will take all those pieces and reassemble them on the other side. Don’t be afraid, it’s super easy.

First, on the server, split your large file into a bunch of lil’ pieces.

This will split ‘totally.legit.file.mkv’ into 500 Mb pieces. The last piece will be less than 500 Mb. Your split up files will be named ‘my_split_file_aa’, ‘my_split_file_ab’, ‘my_split_file_ac’ and so on.

Download these files to your local computer.

Now we’ll concatenate the files back together!

Depending on how big the file is this could take a little while. When it’s done the split files will still be there and you’ll have a shiny new ‘totally.legit.file.mkv’ ready to go!

Don’t forget to delete the split file pieces that are still laying around on your server and local computers.

Some people have trouble wrapping their head around the max-device-width query which is commonly used to differentiate between a desktop and mobile browser. To target CSS for the iPhone you would use (max-device-width:480px) since the iPhone’s screen size is 320px by 480px. Then comes the question “But if the phone is in the portrait orientation wouldn’t the maximum width be 320px?”

Yes and no. In portrait orientation the maximum width is 320px BUT that is different from the maximum device width which is unchanging. I think the bit where people get confused is the word “width” which generally translates to left and right.

In the case of max-device-width it would be more appropriate to think of it as max-device-dimension. Even if you are able to change the width of the browser on your phone, your phone will always have fixed dimensions and therefore a maximum width.

Is that more clear?

More on the device-width media query at w3.org

I had searched around the internet a few times but never really found anything like this, but that doesn’t mean it doesn’t look. Maybe I’m just a bad internet searcher. Script after the jump.

Download a zip’d version of the script.
You can download the (2.5MB) text file I’ve been using.

Let me know what you think! Any improvements or suggestions would be greatly appreciated.

There’s also a larger version for your creation pleasure.

Don’t forget to hit “s” to save out a jpeg of what you made!

Firstly, props to Dylan O’Donnell, who wrote the original script. I was personally unsatisfied with FTP because it’s insecure and I always run into technical troubles with it. Probably because I never took the time to learn what I was doing with FTP via command line… But I favor SCP for my file transferring needs.

I also added a screen cap functionality because there’s all kinds of cool things you can do with that down the line. Time-lapse animation, security, you name it!

If you want the iSight captures to work you must download and install isightcapture! I’ve installed it to /usr/sbin/ and hardcoded the script to look there. If you don’t know what you’re doing, I suggest you do the same.

“Installing” isightcapture (assuming it’s unzipped and on your desktop):

Quick rundown of what’s happening here:
- Grab the date and time info and prepare the filenames (YearMonthDayHourMinuteSecond)
- Take a picture with the iSight, save it to a folder (~/Documents/pics/)
- Take a screencap, save it to the same folder (~/Documents/pics/)
- Resize all of the jpgs in the pics folder so they’re no more than 800px in any dimention
- Check to see if the computer has a network connection, if it does upload the files to a remote server (via scp) and delete the local images. If there’s no connection, do nothing (images will try to upload next time the script is run)

In order for this to work you must have SSH Keys setup with the server you are connecting to. If you don’t it will not work. If you google “ssh keys” there are a million ways to do it but this is the site that actually got it working on my modern mac: http://www.webficient.com/2007/11/16/mac-and-ssh-keys

Here’s a quick and dirty run down of how to do that, but I’m just copying from Phil’s post so don’t blame me if it doesn’t work for you :)

Generate the ssh key (obviously replace the CAPS stuff with your info). When asked for a passphrase just hit enter, this will make an empty passphrase which, I admit, is very insecure but it’s better than nothing and the script won’t work with a passphrase :( :

If you’ve never used SSH to make an outgoing connect on the machine you are connecting to you will also need to create the ssh folder on that machine and make it so only your user can read it:

Now copy your public key (id_rsa.pub) to the server you’re connecting to (I always name the copy on the server “temp_pub_key” so I know exactly what file I need):

Now connect to the remote server and navigate to ~/.ssh/

On the server, check to see if the file “authorized_keys” exists, if it doesn’t rename your “temp_pub_key” to “authorized_keys:

If “authorized_keys” already exists then you want to add your public key to the end of the file:

If “authorized_keys” didn’t already exists, you’ll also have to set the permissions of the authorized_keys file:

Here is the automation script originally written by Dylan O’Donnell with my tweaks and editing for SSH and screencaps.

SVN can be learned!
 
You too can learn to love it!
 

Some technical information first, I’m writing on a mac and I use SVN on a mac. If you ALSO are on a mac, you’ll need to have the latest Developer Tools installed. They’re not installed by default so if you haven’t done this already you should do that now. If you’ve lost the install CD that came with your computer you can grab it here for free (it’s a big HUGE download). You probably won’t use 90% of the stuff that it installs, but there’s some background stuff going on that you’ll need (SVN for example).
 

Check to see if SVN is installed, open Terminal (Applications > Utilities) and type “svn”.

If you see something similar, it worked! If not, sorry, try Google.

OKAY, install done. There are several graphical interfaces for SVN but I’ve found that none of them can really compare to the command line interface (someone will hate me for saying that). Even if you use a GUI for SVN, sometimes something will break and the program won’t be able to fix it.
 

First I’ll cover some Terminal basics to help you get around.
 

How to change directories (folders):

cd, which probably stands for “change directory” is how you’re going to get around. If you’re in the terminal, you’re using cd all the time.

This following commands will take you to the root (Macintosh HD), your home folder (/Users/yourname/), and up one folder, respectively.

Want to see what other folders/files are in the directory you’re in?

If you get lost you can use “pwd” which will return the current directory that you are in. (Print Working Directory)

Cluttered screen? Try this:

Okay, that should be enough to get you scooting around nicely. Let’s get into some SVN goodness! So first you’re probably going to want to “checkout” a copy of the repository (or repo as I will call it from now on). First cd into the directory where you’d like your local copy to be. I usually checkout to ~/myUserName/Sites/ because I’m usually working with websites, but you can put yours wherever you like. Then get the URL to the repo. You’ll probably get this from the IT guys or from someone sitting next to you. The following will checkout the repo “superImportantProject” which will put a folder called “superImportantProject” in whatever directory you’re currently in.

At this point, assuming you typed the url in correctly, you’ll see a bunch of text start to appear on your screen. If it’s going slow enough you can see each file that it’s downloading to your computer. Magic! You’ll know it’s done when you’ve been returned to the prompt. So you just downloaded a bunch of files to your computer, la-dee-dah. Now’s when you do your thing and jump into the folder, edit a bunch of copy, add some new images, delete some redundant files.

Great! All done for now, finished what you needed? Cool, now it’s time to CHECK IN YOUR CHANGES! First, before checking in your changes you want to see if anyone else has made changes to the repo while you’ve been working.

Hold your breath while it checks – with any luck no one has made any changes, or at least no changes that have to do with your files. If no changes have been made you’ll see something like this:

If changes have been made you’ll see something like:

The letters before each file tell you what is happening to that file. A for added, D for deleted, U for updated. If you, god forbid, see a C, that means conflict. If you see that, you’re fucked. Well…at least you are until you read the part where I talk about that. But that’s later!

Okay, so you didn’t see the dreaded C of conflict. On to the next step. Double check to see what files you’ve changed/added:

Now a list of all the files you changed, added and deleted will be displayed. Mine looks like this:

Woah, what’s all that crap mean? M means that you modified a file (most common). A ? means that file isn’t under version control (it’s not in entered into svn yet). The ! means that a file is missing.

Well let’s add those ? files into svn first because those are pretty important for my project.

Or you can string the files together (separated by a space) and add a bunch of files at the same time:

Now run ‘svn status’ again:

Cool, we’ve got the A of added so those files are ready to go. Now about that missing file (!). Did you really mean to delete it? Does it need to be deleted? Is anyone going to miss this file? Think about that for a bit because if you delete that file out of the repository you’re deleting it for everyone else, too. Still want to get it out of there? Okay, but be careful with this one.

Almost too easy, right? ‘svn status’ one more time before we commit just to make doubly sure.

Awesome, all the files we changed know what they’re doing now. It should be said at this time that it’s okay to leave files unadded and missing (? and !) but they will be ignored when you commit to the repository.

Time to commit:

The -m in there is an “option”. You’re telling the command ‘svn commit’ to look for a message with your commit. The commit command won’t work without a message so you’ll always need to do that. The actual message can be as explicit or as vague as you like, just know that the message is logged and can be helpful later if you need to go back and find changes you had made in the past.

Hey, congrats! You know all the basics of svn to get you through the day!
 

This next bit holds some basic tricks to clear up any problems you might have as you flounder your way around svn.
 

Crap. I deleted a file that I didn’t mean to, how can I get it back?!
Well if you deleted the file locally and didn’t delete it with ‘svn remove’ that’s easy! Just run ‘svn update’ and you’ll grab any new files along with any you might be missing. If you deleted it with ‘svn remove’ then WHAT THE HELL?! What were you thinking?! Fuck, just keep reading for now.

Crap. I’m getting the dreaded C of conflict.
Oh no! When this happens svn makes a bunch of crazy-ass files. Let’s just say your file was called “example.html” because I’m not feeling very creative right now. Now you’ve got:

If you were to take a look in the example.html file right now you’d potentially see a bunch of weird code that isn’t yours. The file that has all of your changes in it is now called “example.html.mine”. The other two files (r767 and r768) are the revision you were editing from (r767) and the latest revision that’s in the repository (r768). The easiest way out of this is to decide what version is the right one.

• Your co-worker has been working there for years and is way smarter than you, so just assume what they did it is right. Turn to page 768. Er, go with revision r768.
• Your co-worker is worthless which is why you were hired, your changes are right. Go with your copy (.mine).
• Both of you are idiots so let’s just start over and let the senior devs deal with it. Go with the old revision (.r767).

Whatever you decide, you’ve got to copy the file you want to go with over the original file then tell svn you’ve resolved the problem. My co-worker’s changes are usually right so I’ll just go with his:

The ‘cp’ command is used to copy file A to file B.

That should cover you for awhile… Once you get the hang of this stuff you shouldn’t have too much of a problem learning the rest yourself. If not, I’m still here!

Unfortunately the function doesn’t exist in Flash, so I rewrote it. Why is this function useful? Lets say your mouse can move within the bounds of your stage from 0 to 550 pixels along its x-axis. You want a box to move back and forth from 100 to 200 pixels according to the position of the mouse. So when your mouse is halfway across the stage your box should be halfway between 100 and 200 pixels. You would simply use:

Easy as that!

Usage:
map(value, low1, high1, low2, high2);
low2 and high2 default to 0 and 1, respectively so you don’t have to put them in if you just want to normalize your value.

And super compressed (less readable, less space, works the same):

AS3 Code:

Download the source.

Original font by Sam Derrick.

Displacement mapping is an alternative computer graphics technique in contrast to bump mapping, normal mapping, and parallax mapping, using a (procedural-) texture- or height map to cause an effect where the actual geometric position of points over the textured surface are displaced, often along the local surface normal, according to the value the texture function evaluates to at each point on the surface. It gives surfaces a great sense of depth and detail, permitting in particular self-occlusion, self-shadowing and silhouettes; on the other hand, it is the most costly of this class of techniques owing to the large amount of additional geometry.

Displacement maps are commonly used in 3D programs to make complicated geometry using simple 2D images. In those programs it actually morphs objects in a 3D-space (along a z-axis). But in our (so far) 2D flash world, it’s easier to think of the displacement maps as distortion. In plain English, you distort an image using a separate gray scale image.

I’m a visual thinker so I drew it out in my sketch book first:

This is the distortion I wanted to achieve. If you can’t read my chicken scratch it says, “x: -30 to 0 to +30″. Meaning that if every square were for 5 pixels, at the grid’s most distorted point the bottom-left point would be offset by -30 pixels along it’s ‘x’ axis while the bottom-right point is offset by +30 pixels. The bottom-middle is not offset along the ‘x’ axis.

After drawing out and writing down what would happen to each pixel, translating it into a gradient was pretty easy. A gray scale image consists of 255 levels, 0 being black and 255 being white. If you’re reading this you probably already know that. You also know that any digital image is made up of three channels: Red, green and blue. In Photoshop, you can see these channels individually by opening the channels window. This will be important, or at least handy to know later. SO, converting those levels into hex you get 00 (black, -30px offset), 80 (middle gray, 0 offset) and FF (white, +30 offset).

I didn’t want the whole image to be distorted, so part of the image needed to remain unchanged. This is where the middle-gray comes in. The gray fades in from the bottom to about a third of the way up the image and from there it is the same even color all the way up.

If you break it out into channels you get this:

For this example I am only using the RED and BLUE channels (though since the BLUE and GREEN are the same in this case, they are interchangeable). The BLUE channel goes from black to gray meaning that pixels will be moved in a negative direction, this is the first part of the skewed illusion. The second, and most important part, comes from the RED channel. Starting with the most extreme black (00) and fading to the most extreme red (FF), we get our most extreme distortion. Cowabunga!
From there, as we move up, the image fades more and more to middle-gray creating less and less distortion until there is no distortion at all.

At first I used a picture of some pretty flowers to test the distortion, but I realized that with a real photo, it wasn’t very obvious what had actually been morphed. I ditched it for a good ol’ grid. The grid makes it ridiculously easy to tell what’s been morphed, plus it looks like a cool Tron-esque world.

Check out the working demo. (click to turn the distortion on and off)

Download the source. All code is EXPLICITLY commented.

A few sites that I found helpful:

• Getting the Displacement Your Need
• AS3 Bitmap Displacement
• Understanding Flash Displacement Map Filter

After all of that the one thing that I still don’t get is why when the image is distorted why it looks so crappy. I’ve tried using different image formats (jpeg vs png) and I’ve even dynamically drawn in a vector grid, but it still give me that pixelly crap. Anyone have an answer? (Philipp does!)

So it’s cleaner looking now, but there’s still some monster pixelation going on. Anyone know how to .smoothing=true for a displacement map? Displacement maps need bitmapData and I don’t think you can do too much to that in the way of smoothing…