Category Archives: Uncategorized

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);
}

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

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!

Why You Shouldn’t Have all Your Friends Follow Your New Fan Page

Naturally, when starting a page for a new project, your first instinct is to tell your friends and family and get them following/supporting you. This makes sense because your beloved should be able to network and attract some leads for you. You know, word of mouth and all that. Depending on your business, these new devoted fans could be the best thing to give your social media a jump-start, but in most cases, this will be a failing strategy.

On Facebook, if your fans are not engaged by your content, Facebook’s not gonna share it with everyone. And why on earth would your friend Fran, a hairdresser in Minnesota, be interested in any content related to your surfing website (or whatever your niche might be)? If she and others don’t like or follow your page and don’t respond to your content, Facebook will algorithmically mark your posts as lame. No one will see the groundbreaking photo sesh you did of famous surfer Damien Hobgood.

On the other hand, a small list of very interested followers will likely click, comment on, and share your content. Facebook will promote these social “likes” and comments in the newsfeed of their connections who may be interested as well. If your 600 high school friends see your posts first and don’t “like” them, the five people out there who care will never hear the news.

Wassup WordPress Analytics Plugin

WordPress plugin: Wassup.

I feel super dumb saying the title of this plugin, because it sounds so silly, but it’s definitely worth a recommendation and something you should have in your WordPress dashboard. The main reason you’ll be saying “Wassup” to any of your WordPress buddies (har har) is that this plugin gives you great data about how you’re coming up in search engines.

wassup wordpress plugin screen shot
The plugin gives a very close look at the individuals who visit your site, vs Google Analytics which gives a much broader look at trends and demographic information. I’m sure that some way or another you could get this information from Google Analytics, but its really nice to have such a close look at how your SEO work is coming along right from the heart of your WordPress site.

Just some of the Wassup features you should know about:

  • Allows you to filter by or exclude traffic from search engine spiders in your data
  • Allows you to filter spam traffic from the results
  • Graphs data for various time measurements, from one hour to all time
  • Gives a top ten list of your incoming traffic’s top search query, top referrer, top request, top browser, and top OS
  • Enables a graph of recent traffic directly on your dashboard
  • Has a widget which allows you to post traffic information in any widgetized area of your site (sidebar, footer, etc.)
  • It’s free! (download it here)

Have questions about this plugin or WordPress? Feel free to contact me or follow me on twitter: @nickolusweb.