How to request shipping address in a custom cart checkout to Paypal

OK, this is so simple, yet it's not a simple option you can just set in your account settings.

So say you are a business selling online and you have a simple button to check out for one item, then yes, you can create these buttons in Paypal and get the shipping address.

But if you have a custom cart...

<input type="hidden" name="cmd" value="_cart">

... and you want to make sure the user enters a shipping address, you need to request it. All you need to add is this line:

<input type="hidden" name="no_shipping" value="2">

The user will see a checkbox next to billing address, that says "Same as Billing Address".
If they want to send a different postal address, they can untick and fill in form.

By not asking for it on your website, you save registered Paypal users from having to unecessarily fill it out. It will be saved in your Paypal account transactions, and you can print packing slips from there too.


Enjoy!

Mac Tip #28: How to get some quick disk space back on your Mac...

Don't know what it is about Mac's but I just feel I have less ability to "get under the hood".  Like when you look at the engine bay of a new car and it's all covered up by a plastic branded cover....

Anyhow, you need some more space on your hard drive?  If you have been doing updates for a while, you can get some space back by deleting these update downloads.

(OSX 10.6)
1. Goto "Macintosh HD"
2. Select "Library"
3. Select "Updates" folder...

(OSX 10.7/8 that folder is hidden... see what I mean?)
1. In Finder, select "Go"
2. Select "Go to Folder"
3. Type in "~/Library" to temporarily access the Library directory in the Finder.

Now DELETE everything EXCEPT any ".plist" files.

That should give you back some space.... once you empty your trash of course!

Enjoy!

TIP #44 - When copy and pasting text from Photoshop for HTML... Beware!

If you have ever copy and pasted text from Photoshop for use in a website or EDM, you need to be aware of a potential problem.

Dreamweaver or WYSIWYG editors are not going to show up this problem either, you'll need to use a code editor such as Sublime Text.

Pasting the copy into Sublime Text you may see an "EXT" character if a soft return has been used in a Photoshop text element. (SHIFT and ENTER). Hard returns will paste correctly as a <br />.

The reason this is an issue is that it will cause the space to close up when rendered in a browser or email client. So instead of a space or a new line, you will see no space or return!

Pasting this copy into a text editor like note pad would normally save you from unwanted code from Microsoft Word... but not from this sucker!

There are also other characters that can throw HTML rendering related to languages.

So my tip for any designers who are starting to code more HTML, while Dreamweaver gives you the visual display, it's editing is not the best. Move to something more powerful and don't rely on the visual cues. This will speed up your coding skills as well!

More on Sublime Text and other editors later...

MAC TIP #17: How to move program toolbars to the top of a second monitor

OK, so if you use a laptop and plugin a second monitor as your main monitor, what you really want is the program toolbars (or menu bar) at the top of the larger montior, not on the laptop monitor.

So how do you do that?

Simple... just go into "System Preferences" and select "Displays".

OR, if you have "Show displays in menu bar" already turned on, you can access this option from the top tool bar and go to "Display Preferences". (Highly recommended).

 Once in "Displays" menu, now select the "Arrangement" tab.

This is where you set whether your monitor is on the left or right of laptop and if it's higher or lower. But you can also move the menu bar. Simply drag the white menu bar to the larger second monitor. (cursor added)

The monitor screens will then refresh and then you will note all program tool bars now on your larger monitor! Browser, Photoshop etc.

Happy days.  :-)

Linking to a Calendar Event on your website

A lot of companies still use email clients like Outlook and many want to promote events on their website so people can easily add the event to their calendar.  But how can you do this from Outlook so that it's compatible for other mail clients as well?

Well, there is the good old iCalendar - .ics files...

Thanks to the peeps at Microsoft, check out this tutorial (Outlook 2010)

Happy "Calendaring"!

Positional Images for website dev - Placehold.it

This is a great little website / service... when coding a site and you want to use positional graphic and show the pixel dimensions, check out Placehold.it

You can use the source in URL or download image and use...

EG: < img src="http://placehold.it/350x150" >

> http://placehold.it/

Form buttons, where should they go?

I am writing this post, because again today while "topping up" our account with Instra, I accidentially "reset" the form instead of submitting it - after entering credit card info and top up amount. Why? Because the reset button was on the right and I instinctively clicked it.

Humans are creatures of habit and we expect things to be in certain places for common activities like using an online form.  IMHO, a confirmation or submit button should be the right aligned button of two in a form. Don't mess with this, it works well, leave it alone please.

Why they felt the need for a reset button on such a small form is another matter.

Now, I wonder who else is experimenting with this?

Want to hide file extensions like .php on your website?

One of (yes, there are a few ways to do this) is to use a mod rewrite.  If you host on Linux, this should work for you.  No index on site, so you can't browse files in folders and MultiViews helps with any calls in code that need extension etc.

This should be your .htaccess file in the root:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Options -Indexes
Options +FollowSymLinks -MultiViews
# Turn mod_rewrite on
RewriteEngine On
# To internally redirect /dir/foo to /dir/foo.php
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^ %{REQUEST_URI}.php [L]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

This will make: http://www.mywebsite.com/mypage.php  appear as: http://www.mywebsite.com/mypage

Enjoy!

Date codes in PHP

OK... so you are coding a dynamic date field in PHP, well these codes will come in handy when working out how to show say 01 Jan '13... or Mon 01 January 2013 for example.

d = "01" to "31"
j = "1" to "31" (no leading zero)
l = "Monday" through "Sunday"
D = "Mon" through "Sun"
F = "January" through "December"
M = "Jan" through "Dec"
Y = "2013"
y = "13"

To view the full date functions, click here.


Enjoy!

Word Press Types plugin "Missing argument" error fix

If you have used the Types plugin in your Word Press site, you may come across this error:

"Warning: Missing argument 2 for types_render_field(), called in xxx.php on line xx and defined in..."

This is because the types_render_field now needs a second parameter which should be an array.
The parameters for field types:http://wp-types.com/documentation/functions/

The simple fix is:


Change this: "...types_render_field("xxx");"

To this: "...types_render_field("xxx", array('raw' => 'true'));"

Where "xxx" is your field name.

Happy coding!

Dev on your Mac? How to edit host file for testing!

OK so, you are working on your Mac and want to test a website in your browser... but the domain is not yet delegated - so you only have IP address for your dev server or new web hosting.

What you need to do is edit your host file, so that your browser checks this first before the domain DNS.

1. Open a terminal window. (Applications/Utilities/Terminal)
2. Type this line in:


   
   sudo nano /private/etc/hosts
   
3. You will be requested to type your password in.
4. The terminal window will then show any current host settings. Now add the line you want. Use arrows keys to position flashing cursor where you want.


   
   EG: 127.0.0.1  mydomain.com.au
   
5. Once done, hit Control+O to save. Then press Enter.
6. Now exit Terminal - Control+X.

You can also download a "Hosts" application that will install and be available from System Preferences. However this will not work for all OSX versions. Terminal is a better way to go.

For more advanced users, you can use "sudo vim".

To flsuh DNS in OSX 10.5 + use "dscacheutil -flushcache" - for OSX 10.4 and below, use "lookupd -flushcache".

NOTE: Had a few questions on this, if you add domain without "www" - you need to check in browser without the www as well.

How to remove file extension via .htaccess

If you want to "tidy up" you site, this is a nifty little tip.
BUT - it should really be done for new sites, else you will have to add 301 redirects.


Further, if you don't know what htaccess is, you probably shouldn't be doing anything like this.

EG for PHP

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

The .htaccess file needs to go in the same directory as the file as it works from the top down. If you have the .htaccess in a certain directory, it will affect any other sub files/folders within it.

To add / at the end

Replace the last line of code:
RewriteRule ^(.*)$ $1.php

With these lines:
RewriteRule ^([^/]+)/$ $1.php
# Forces a trailing slash to be added
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

NOTE: You should use absolute paths, rather than a relative ones for images, CSS etc.
Also, avoid creating an edge case from using folder names the same as file names within it... else you will need to add an exception.

Design Assets: you can never have enough arrows!

So you are working on an interface design and you need an arrow style for the gallery slider buttons... well this site is just what you need, Shapes4Free - in particular this page with 850 arrow shapes!

Knock yourself out!

Word Press White Screen of Death... Fixed!

Word Press... I have mixed emotions about Word Press. It's free, so it's hard to get upset with Word Press, and there about a gazillion plugins. However, the admin side can be a bit complicated for clients - and for developers, Word Press cans sometimes cause you great pain, like when you get the dreaded "W-SOD" (White Screen Of Death).

Well, this is how I fixed the problem on one site recently. I'm telling you this to save you the day I wasted on the problem.

BEFORE YOU STUFF AROUND WITH UPGRADING WORD PRESS, SWITCHING THEMES OR DISABLING PLUGINS - DO THIS:

If you, like me had not recently made a code change, it's highly likely to be hosting related. Now, you may not be able to get the hosting company to agree with you at first, you need proof.

1. Check server logs, review errors and warnings.
   You should be able to get to these from Control Panel.
   Here you will see indication of the error below.
2. Turn on error checking in your config file.
   Edit wp-config.php and change "false" to "true"
   define('WP_DEBUG', false);
3. Now try to edit the post that shows a white screen, what do you see?
   If you see something like:
   Fatal error: Out of memory (allocated 26476544) (tried to allocate 122880 bytes)
   Then you need to:
4. Send error to your hosting company and ask them to increase PHP memory allocation
5. Then edit your config file again... and increase the size limit. (I made mine max of 512).
   define('WP_MEMORY_LIMIT', '16M');
6. MAKE SURE THEY REBOOT SERVER!

Now, this fixed my issue - but it took me a day to get there, because first up I was sure it was a plugin issue after reading heaps of forum posts. I disabled plugin and it seemed to mostly work again - but as I was using Types I could not check Posts because they were not showing. With the error - I could not even check Custom Types settings. I also switched themes back and forth, changed permalinks, upgraded Word Press..... but turned out to be a simple hosting issue. DEBUG is your friend in a white out!

While you have the log files and debug turned on, check warnings and fix some of the small issues that may be kicking around too like deprecated features - will post about a few of these too.

I hope you can be lucky with a fix this simple too!

How do Google "Site Links" work?

As most of us do, we search for things in Google... some results show expanding related links from a site referenced. These are called "Site Links".

So as a business owner or web developer, you may wonder, how can you set this and control it?

Well, there is good news and bad news... The bad news is that it's automated by Google. "We only show sitelinks for results when we think they'll be useful to the user." "G" does suggest if your site structure is good, you will see these site links when relevant.

The good news is that you can remove (demote) links you don't want to show.

Google does say they are working on this tool - so maybe in future there will be more you can do with Site Links.  Read more about it here: Google Site Links.

Free Fonts, Web Fonts & Font Smoothing

OK, I have seen quite a few free font websites in my time, but this one is quite good:
http://www.font-db.com/

If you are planning on using web fonts in your site, this is a good Google reference site:
http://www.google.com/webfonts

This site has a great layout of some of the best of Google webfonts:
http://hellohappy.org/beautiful-web-type/

Now, how do you use web fonts?
It's actually super easy... but there are a few things to consider.
This is a good place to start:
https://developers.google.com/webfonts/docs/getting_started

For the more advanced front end coders out there... this is a great discussion on font smoothing or not... http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/


Happy fontlicating!

Nifty IE CSS3 Transforms Translator...

Exactly as per the title, this is a great little tool for getting around CSS3 IE transform issues!
http://www.useragentman.com/IETransformsTranslator/

Setting up a Facebook "feed" on your website

OK, so our team regularly adds Twitter and Blog feeds to websites.  Often we get aksed to add a Facebook feed... thing is, Facebook is not really a "feed" as it's made up of posts and info from you and other users.  So to add the Facebook "stream" to your site, what you need to do is add a customised view of the "Like Box" social plugin.

To do this, follow the instructions on this page:
http://developers.facebook.com/docs/reference/plugins/like-box/

Happy coding!

You Tube Poster Frames & Thumbnails

If you have ever uploaded a video to You Tube, you'll know that You Tube gives you three choices for a poster frame which is also used as the search thumbnail.  Google just calls them "video thumbnails" to make it easy I guess.  However if you embed your You Tube video on a website, the initial frame before video plays (Poster Frame) is also the thumbnail.

The thumbnail image can have a big impact on whether people actually click on your video in search results and also the look of your web page if embedded.  So how do these thumbnails work and can you modify them?

If you are a You Tube partner - you can now upload custom thumbnails... cool!  To become a partner, you need to enable monetization on your account... not so cool.  If you don't want to do that, then read on.

How to edit your video thumbnail:
1. Visit your account page
2. Click the Uploaded Videos
3. Select Video
4. Click on Edit
5. Click the thumbnail you want, and Update

How does You Tube select the thumbnail?
Well according to one website, it goes by a simple time formula:
X = Video length (in sec.)
Y = X divided by 4 or X/4 (in sec.)

Y is the 1st thumbnail.
2 times Y or 2xY (in sec.) is the 2nd thumbnail (poster frame).
3 times Y or 3xY (in sec.) is the 3rd thumbnail.

So it is possible to create your video with these time codes in mind and actually get a thumbnail and poster frame that is exactly what you want!

I will post an entry soon on You Tube Vs Vimeo!

Kill Deep Linking...

If you are using Word Press you not doubt are using plugins too... many of which have little foibles such as jQuery from prettyPhoto displaying extra info at end of your URL when you use a popover gallery or after closing it. To disable this, open your prettyPhoto.js file and set deep linking to false.

Also do this:

Replace: clearHashtag(){url=location.href;hashtag=(url.indexOf('#!prettyPhoto'))?true:false;if(hashtag)location.hash="!prettyPhoto";}

With: clearHashtag(){url=location.href;hashtag=(url.indexOf('#!'))?true:false;if(hashtag)location.hash="";}

No more "#!prettyPhoto" or other nonsense...

Enjoy!