WebCunningham

Personal Blog of Nick Cunningham, Web Developer

How to Make a Retina Sprite with LESS

1. add the following snippet to your LESS file:

.retina-sprite(@positionX,@positionY,@width,@height,@background1x,@background2x,@retinaImageWidth) {
  background-image: url(@background1x);
  background-position-x: @positionX/2px;
  background-position-y: @positionY/2px;
  background-repeat: no-repeat;
  width: @width/2px;
  height: @height/2px;

  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
    background-size: @retinaImageWidth/2px;
    background-image: url(@background2x);
  }
}

2. make the sprite at http://spritepad.wearekiss.com/ using retina sized icons
– to avoid issues with the non-retina dimensions, make sure the width and height are both even numbers so they can be split in half with no remainder

3. Use photoshop or your preferred image editing software to make a non-retina copy of your retina sprite
for example, in photoshop:
– open the retina sprite image
– push cmd + option + I (or go to Image > Image Size)
– set the size of the image to half the current size
– save as a new file

4. Using the background position, width, and height from the css generated by spritepad, do the following for each icon element in your LESS file:

.my-icon {
    // .retina-sprite(background-position-x, background-position-y, width, height, '/path/to/non-retina.png', '/path/to/retina.png',retina-image-width);

    .retina-sprite(-51,0,100,51,'/src/main/image/myimage-1x.png','/src/main/images',544);
}

notice that you never use ‘px’ for any of the values

6. To simplify your work, create a helper for the above task. Since you’ll probably only have one sprite for the whole less file, you don’t need to keep defining the path to the images or the image width:

.my-retina-helper(@background-x,@background-y,@width,@height) {
    .retina-sprite(@background-x, @background-y, @width, @height, '/src/main/image/myimage-1x.png', '/src/main/images',544);
}

.my-icon {
    .my-retina-helper(-51,0,100,51);
}

Introducing San Diego Code Jam!

San Diego Code Jam Logo

San Diego Code Jam is a local event in San Diego where developers get together to help one another and collaborate. Its a very informal and unstructured sort of “hangout” where San Diego Developers can meet and work on their projects.

For me, its a time to dedicate to working on all those projects I have left hanging around as well as a time I can help some newbie developer friends of mine.

It will be every wednesday at 7pm at Cheba Hut in San Diego. Visit the facebook page for all official details. Hope to see you there!

Ping multiple websites and output results to a file (mac OSX – BASH/terminal)

If you’re savvy with BASH commands in the mac terminal, download my script files here. If you need a little extra help, read on! Look at the end of this post for a short description of each file in the script to see if it meets your needs.

If you manage multiple websites in your job or freelance work, at times you may need to check whether those websites are live and what IP address they’re pointing to. As a recent example, I had to move about 50 websites to a new server and check daily whether their DNS has propagated to the new IP address. This can be time-taking and tedious!

To check a single site, I usually just use the “ping” command in my terminal (using mac OSX… sorry windows users, if you’re reading this, just take it as a cue to move to a unix based operating system). Okay, so running the ping command can take a long time and be quite tedious if you have to check multiple domains, and as for checking the sites one by one in your browser… Forget about it!

So to solve my problem, I made this nifty pinging script, which you can feel free to use to check your own sites.

If you download the script and related files, then unpack them, here’s how to use them:

  1. Add the websites you’d like to ping in the file called websites.txt
  2. Open your mac terminal and run the pingall.sh (in terminal, navigate to the location of the script (“cd /users/yourusername/desktop/ping_script/” and type “sh pingall.sh” and hit enter to run the script, its just that easy)
  3. wait a for the script to run, it might take a while depending on how many sites you need to ping
  4. the results will be saved in the file “results.txt” – this file will not get overridden, so if it already exists before running the script, the ping results will be appended to the end of the file.

One note: The default timeout is set to 1 second. In many cases this is not enough time to get a successful response, so the result may show 100% packet loss even if the site is up. At this point you can check the sites with errors individually, or increase the timeout length (which will greatly increase the amount of time the script takes to execute). To increase the timeout length, change the line “timeOut=1” to indicate the number of seconds you want to wait to timeout. (timeout=10 would wait 10 seconds before timing out and moving to the next line of the script).

Also, you can ping just the ip addresses of the sites by executing the pingip.sh instead of the pingall.sh.

Now, here is a brief description of each file:

  • pingip.sh – executing this script will ping every website in the file websites.txt and output only the website domain being pinged and IP address
  • pingall.sh – executing this script will give you the full ping response of each site listed in websites.txt
  • websites.txt – add the sites here you want to ping, each site on a separate line
  • results.txt – the output of the ping will be sent to this file. Make sure to clear it out or delete it before a new ping, as the script will not overwrite this file

Good luck! I posted this in a hurry so please comment with any questions. And please let me know if this works for you and saves you time!

Download the script

Mophie Powerstation Pro Review

I’m a web guy and reviewing products is not really what I do, but I was able to get my hands on a mophie Powerstation Pro before its release, so I’ve had some time to get acquainted with the device and thought I should share my opinion. Here are a few reasons why I own two of these and always keep them in my bag:

Lots of Extra Power

One of these batteries has enough juice to charge my iPad once, or my iPhone multiple times. On a couple of road trips I was in a car that didn’t have a stereo, so I brought this along with some portable USB speakers. The speakers played for six hours powered by the Powerstation and only used a tiny fraction of their juice.

By keeping one of these charged at home, I never have to worry about finding an outlet or tethering any mobile device on a short cord to a wall. I can always charge wherever I want to be. I know that sounds trivial but once you have the ability to sit on your couch and charge your iPhone while you play Samurai vs Zombies you really how great portability really is.

Stays Charged

A really nice quality of these batteries is that once they are charged, they stay full for weeks without losing power. I had another similar battery in the past would dramatically lose power after a day or two. It’s great to be able to charge one battery and keep it in a drawer or bag until its really needed.

Looks/Feels Cool

The Powerstation Pro is a gadget I love to show off just for the coolness factor. It looks sleek and modern. It’s rubbery grip feels nice to hold, and the metal rivets around the edge give it a very tough look. I might be bold in saying this is a guy product, but it certainly has a masculine toughness to its design.

Very Durable

Aside from looking tough, this battery holds up to its image. I’ve dropped this thing in the dirt and treated it with zero care, and it seems completely unaffected. I’m not brave enough to test its limit, but if you go to mophie’s website I think they have some durability examples.

Easy to Use

If you have any other mophie products or anything that uses micro-USB to charge, this is a great match up simply for the cable they share. The older Powerstation used an odd female USB cable to charge, but this has a simple micro USB input. That means you can charge the battery wit the same cable you charge your mophie juice pace or other micro USB device with.

Portable

This battery is not the slimmest. Mophie has some very slim batteries in its line up, and this is not one of them. That said, with the amount of power this thing carries, it feels very small. It’s more than worth keeping this thing in my back for the amount of power it can supply.

Value

At $129, this is not the cheapest battery. However, this price is well worth the quality of the mophie Powerstation Pro, as cheaper options on the market may not be able to hold a charge as long or might break easily, which for me is worth the extra couple bucks.

Add a Lightbox 2 Slideshow to Your Tumblr Posts

Here’s how to add a really cool lightbox slideshow to your tumblr. The end result will be that when a user clicks an image on your blog, a stylish slideshow will pop up allowing the user to navigate through all the photos on your page. This is a great effect for photo blogs. Try it out on my tumblr to see the effect.

Here’s how to do it:

1. Download lightbox files & unzip

Get lightbox here: http://lokeshdhakar.com/projects/lightbox2/#download

2. Upload the image files

Tumblr allows you to upload static files to your theme. There is a 15mb limit per day, so be careful to do it right the first time! For this step you will only upload the IMAGE files from the lightbox package. You’ll need to edit some of the other files before you upload them.

  • Upload files here: http://www.tumblr.com/themes/upload_static_file
    You only need to upload these images:
    close.gif, closelabel.gif, nextlabel.gif, prevlabel.gif
  • Copy URLS into notepad as you add them (they should look something like this):
    http://static.tumblr.com/ubwkmto/Nvrweyu/loading.gif
    http://static.tumblr.com/ubwkmto/LXZwerwf5b/close.gif
    http://static.tumblr.com/ubwkmto/5nfasf00f5t/closelabel.gif
    http://static.tumblr.com/ubwkmto/xxawerwef6r/nextlabel.gif
    http://static.tumblr.com/ubwkmto/iN5werw73/prevlabel.gif

3. Edit lightbox.js

find the closelabel.gif, close.gif, and loading.gif referenced in the lightbox.js file and replace them with the absolute image paths from tumblr:

change this (lines 48 – 50):

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

to this (using the URLs you copied from tumblr):

LightboxOptions = Object.extend({
fileLoadingImage: 'http://static.tumblr.com/ubwkmto/N5651/loading.gif',
fileBottomNavCloseImage: 'http://static.tumblr.com/ubwkmto/5sdf159/closelabel.gif',

also change this (on line 122):

<img src="images/close.gif" alt="" />

to something like this (use the URL you copied from tumblr):

<img src="http://static.tumblr.com/ubwkmto/LSDFasdfas651/close.gif" alt="" />

Now you can save and close

4. Edit lightbox.css

change this (line 16 & 17):

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

to this (using the URLS you copied from tumblr)

#prevLink:hover, #prevLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/iN55354f73/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/xx2353456r/nextlabel.gif) right 15% no-repeat; }

Now you can save and close

Note:
DON’T USE THE EXACT VALUES I PASTED ABOVE! They won’t work. I just made dummy URLs. Make sure to do the upload step (step two) and replace the relative paths (../images/whatever.gif) with the absolute paths tumblr gave you when you uploaded your files (http://static.tumblr.com/somegarbled/nonsense/yourimage.gif).

If you need more info about paths, go here: absolute vs relative paths

5. Upload the css and js files

Upload them here: http://www.tumblr.com/themes/upload_static_file
(you will need to upload lightbox.css, lightbox.js, prototype.js, builder.js, effects.js and scriptaculous.js)

Copy the URLs into notepad as you upload them:
http://static.tumblr.com/ubwkmto/fBxm00gtt/lightbox.css
http://static.tumblr.com/ubwkmto/6y3m00gua/lightbox.js
http://static.tumblr.com/ubwkmto/nsLm00fbl/prototype.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/builder.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/effects.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/scriptaculous.js

6. Reference the js and css files in your theme header:

In your Tumblr dash, go to Customize Theme > Edit HTML
Just before the </head> add these:

(these need to be in this order, make sure to replace the URLs with the ones you got from tumblr)

<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/nsLmasdfbl/prototype.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/Ag0asfdfcp/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/RUasdf2/effects.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/5adf0f7r/builder.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/6asfgua/lightbox.js"></script>

7. Activate the script in your theme images

Go to Customize Theme > Edit HTML
Just after the {block:Photo}, find the {LinkOpenTag} and change it to this:

<a href="{PhotoURL-HighRes}" rel="lightbox[image]" title="{PhotoAlt}">

Note:
the title=”{PhotoAlt}” part is optional
the title will give a caption to your lightbox images when viewed

If you did this correctly, now when someone clicks an image that has been posted as a photo-type post, it will bring up a cool slide show of all the images currently loaded on the page. This is a great feature for any photo blog!

See an example on my tumblr

Comment on this post or contact me on tumblr if you have any questions about this! Good luck!

Shoutout: I was having some trouble with this at first, but a little trick I got from Greg Riley’s Blog helped me figure this out. If this helps you out, show Greg a little appreciation by following his tumblr. Thanks Greg! 

 

Free space on your Windows hard drive by finding your largest files and folders

Any Windows user with a small hard drive or large demand for file space is going to face this problem at some point. If your C drive is starting to look full, here is a great tool for finding those godzilla files and backing them up.

The way to manage this problem is with a free utility called Treesize Free by Jam Software.

This awesome little application will scan your disc drives and give you a hierarchical view of which directories consume the most hard drive space. This way you can get a visual look at where you need to reduce space, and will help you locate any ballooning config files, remaining files from old programs, music directories you forgot about, or any other large files/folders on your windows computer.

Treesize Free:

most of my disc space is consumed by program files

looks like I need to delete some Steam games!

So that’s it really. Now it’s really easy to see how I can make the largest impact on my disc space in the least amount of time. This certainly beats checking file sizes by digging through every file and folder.

If you need any more information about this, feel free to contact me!

Some Helpful Links:

 

 

Give your Tumblr Posts their own Class or ID for unique style

Here’s a really neat trick I just learned with Tumblr. In a recent comment someone asked me how to remove a pinterest button from single posts, and have them only display with each post in her main index feed.

The easiest way to do it is to add a class that only appears on single posts, its actually pretty simple and really makes me love tumblr for having this kind of flexiblity. Here’s how:

  1. In the Edit HTML view of your Tumblr (in customize appearance), find this tag: {block:Posts} and paste this code immediately AFTER it:
    {block:PermalinkPage}<div class="single-post"> {/block:PermalinkPage}

  2. Find this tag: {/block:Posts} and paste this code immediately BEFORE it:
    {block:PermalinkPage}</div> {/block:PermalinkPage}

So what you’ve just done is added a containing div that only appears around content on a single page/post. This gives you a lot of flexibility in what you can do with the CSS, so if you want to remove your pinterest button from single posts, just add this to your custom CSS:

.single-post .pinterest {display: none;}

(this is assuming your pinterest button has a containing element with class=”pinterest”)

With a little CSS knowledge you could really use this information to completely redesign single pages and have them look entirely different from your index page if you want. Imagine the power!

Feel free to contact me on tumblr or comment below if you have questions about how to do this!

 

How to Add a Facebook Like Button to your Tumblr Posts

Here’s how to add a facebook like/send button to your tumblr in three simple steps. This will create a unique “like” button for every post on your tumblr. It’s really cool to do this because you’ll be able to share your own posts on your facebook wall really easily.

  1. Log in to tumblr, go to Customize Appearance > Edit HTML
  2. Paste this code immediately before the </head> tag:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=271140516272162";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  3. Paste this code just before the end of the post content. This is not the same for all themes, but usually it is between the tags {/block:PostNotes} and {/block:Posts}. Just try pasting it in different places within the code and hitting “update preview” until it looks right.
    <div class="facebook-button"><div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div></div>

Make sure to click “update preview” before saving to make sure you don’t break your theme. If you did something wrong or this doesn’t work with your theme you should just refresh the page or close your browser so you don’t save the changes (otherwise you’ll have to install a new theme/reinstall your theme).


Good luck!

Fast CSS Commenting with this Notepad++ Macro

Whenever I’m editing CSS and need to comment out sections, I always find myself fumbling over the / and * keys, making commenting out a time-taking and frustrating procedure.

To make life easier, I created a simple macro which turns [ctrl + 8] and [ctrl + shift + 8] into opening and closing comments. This dramatically reduces time and frustration in CSS. See the animation below for a quick example of how to do it:

Like this? Please contact me with any questions! Or leave a comment below.

 

Add a Pinterest “Pin It” Button to Your Tumblr Posts

Disclaimer: I don’t really recommend this anymore. I haven’t had the time to try and make this work better, but it’s kind of buggy and won’t work all the time. I say go ahead and try to follow the steps below. It will probably work but like I said, kind of buggy. If you have a found a better way to do it or realize errors in my approach, please feel free to comment or talk to me on tumblr.

pin it

Before reading: there are a couple problems with this Pinterest and Tumblr integration. It only works on image post types (as opposed to link, quote, video, etc.) on tumbrl. The Pinterest button will show on every post you make, but it will only work if there is a single image associated with the post in order for the {PostURL-500} shortcode to work.

Nonetheless, here is a way to make it work:

  1. Get the “Pin-it” button code from Pinterest. It’s pretty far down the page.
    • For the first URL field just enter your website URL, like http://yoursite.tumblr.com
    • For the second URL field just enter something like xxxx (we’ll replace this in a minute)
    • Leave the description blank
    • Set to advanced mode
    • Copy the code
  2. Find where to paste the code from your dashboard
    • From your tumblr dashboard go to: Preferences > Customize Your Blog > Edit HTML
    • Paste the <script> portion of the code wherever you keep your scripts
    • Paste the rest of the code code just before this line:

      </div><div class=”META” …

    • You may need to try placing this in other areas depending on your theme
  3. Replace the media URL (xxxx) with the tumblr shortcode
    • Make it look like this:

      …&media={PhotoURL-500}” count-layout=”horizontal”>Pin It</a>

    • {PhotoURL-500} is the key part you’ll need to make this work dynamically for every different image.
  4. Use CSS to place your link correctly.
    • Unfortunately this post is not a lesson in CSS, but you’ll need to use CSS to move the link where you want it to be.

Some notes:
This method will make a “Pin It” button on every post you make on your tumblr. Unfortunately, if someone tries to pin a post that is not an image type, Pinterest will not grab an image. If someone knows a fix for this please comment below.

Check it out at my tumblr!