LearnHandy Tips from Tipster

Treehouse
writes on May 1, 2009

There have been a ton of helpful and interesting tips posted to Tipster recently, so I thought we’d pull a few out for you all (and give the submitters a bit of well-deserved publicity).

Topics that we’re covering are: MySQL, CSS, JavaScript, PHP, JQuery, life hacks and server admin.

MySQL Geo Search

Here’s a MySQL statement to search for nearest objects to you in a database, ‘lat’ & ‘lng’ are fields in the ‘items’ table with the location of object and $latitude & $longitude are the users location. The distance field will be the calculated distance in Km between the user and the object:

SELECT *,(((acos(sin((".$latitude."*pi()/180)) * sin((`lat`*pi()/180))+cos((".$latitude."*pi()/180)) * cos((`lat`*pi()/180)) * cos(((".$longitude."- `lng`)*pi()/180))))*180/pi())*60*1.1515*1.609344) as distance FROM `items` ORDER BY distance;

By: Sam Machin
Vote on this tip

Transparent background images – PNG fix for IE6 – a few reminders

When using the MS filter (via The AlphaImageLoader) to fix PNG transparency for IE6 — in your CSS, remember to:

  1. Set width and height for the element/s containing the transparent background image.
  2. First set background to none — then apply filter for background image.
  3. Apply ‘position: relative;’ to any contained links to ensure functionality

(Also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’).

By: Prisca
Vote on this tip

Address Longitude and Latitude in Google Maps

Google maps does not show the Longitude and Latitude of an address you search. To get this information, enter this piece of JavaScript into you browsers address bar and hit enter:

javascript:void(prompt('',gApplication.getMap().getCenter()));

A little window will then pop-up displaying the Longitude and Latitude for you. Bingo!

[Editor’s note: If you add this to your bookmarks toolbar, it’s even easier to use. Just click it whenever you’re on Google Maps. Hat tip to Phil Balchin.]

By: Pete Roome
Vote on this tip

Custom Details in Code Hints – Zend Studio for Eclipse

Zend Studio is a brilliant platform for PHP development. In my view, well worth the cost. One of the best things about it now being built on Eclipse is the project-wide code hinting.

When you see the built-in code hints and highlight an option, you get loads of lovely details regarding the functions and classes that you are about to use… as you would expect from most modern IDEs. However, Zend Studio for Eclipse takes this further for your own classes and functions!

When you have written your classes and functions, start placing a multi-line comment just above the opening line, i.e. /**, hit Return and Studio will prompt you for data types and descriptions for your method variables.

This is invaluable in understanding those classes you wrote at 3:47am, 3.5 years ago and haven’t used since!

By: Simon Hamp
Vote on this tip

Use a Print Stylesheet

Print stylesheets allow you to change the style of your page when printing, without having to provide a separate “print version” of the markup.

You specify a print CSS by adding “media=’print'” as an attribute to the link tag.

<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

In the print CSS you should remove unnecessary elements such as sidebars, menus, background colours, presentational images, etc so as not to waste ink and paper on parts which don’t need to be printed. You can also change the font and size to make sure the text is clear on the printed page.

You can even add some CSS to show the URLs of links on the page, which wouldn’t normally be seen when printing.

a[href]:after { content: " (" attr(href) ") "; }

By: Rich Adams
Vote on this tip

Make your links easier to read

Instead of using { text-decoration: underline; } on your links (as browsers do by default) use:

{ border-bottom: 1px solid; }.

This makes your links easier to read, as there will be more space between the text and the line underneath, so the line will no longer cross through your ‘y’s and ‘g’s.

You can also then style your underline with all the usual border stylings, much more exciting than a plain underline 🙂

By: Laura Kalbag
Vote on this tip

Manual filmstrips in jQuery

Really simple manual photo film-strip in jQuery. Used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.


$(document).ready(function(){
imageSwapper(".thumbnails a");
});


function imageSwapper(link) {
$(link).click(function(){
$(&#039;#largeimage&#039;).attr(&#039;src&#039;, this.href);
return false;
});
};

Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

By: Michael Peacock
Vote on this tip

Store user passwords as salted hashes

Just using a hash of the user password is not strong enough. If two users have the same password, they’ll have the same hash. Dictionary attacks are also still possible as the attacker can have a list of dictionary word hashes. Using a salted hash involves generating a random string of characters, which you then concatenate with the password before hashing. Two users with the same password will then have different hashes, and the stored hash will never just be a hash of a common word if the user chose a weak password. You then store the salt, and the hashed value in your database.

hash_to_store = sha1(salt + real_pass)

There are many different methods you could use too, such as concatenating the salt with a hash of the password and then hashing that, etc.

hash_to_store = sha1(sha1(real_pass) + ...

By: Rich Adams
Vote on this tip

CD/DVD stuck in Macbook

Having gotten a DVD stuck inside my Macbook the other day, i found the only way to force eject it was to hold down the trackpad button on reboot. DVD popped right out.

By: Pete Roome
Vote on this tip

Photo credit: flickr.com/photos/mance

0 Responses to “Handy Tips from Tipster”

  1. Thanks for the advise. Especially the MySQL topic was new to me

  2. Found your site searching Google. Thanks for the handy Tripster tips. I will try some of them.

  3. Very nice collection of tips. I tried the google maps javascript thing – but it didn’t work. I do have latest version Firefox. Maybe the firewall or pop up blocker is preventing it.

  4. Thanks. I was having issues with PNG pics. Now I know what I did wrong

  5. thanks admin good post

  6. thanks. this is such a helpful tips. i can understand this more than the HELP OPTIONS. thanks a lot.

  7. Nice tip, thanks for sharing it.

  8. Ryan, you might want to check out this wordpress plugin for multiple authors. I do wordpress coding full-time, but haven't yet used this particular plugin yet. But it seems right up your ally.

  9. Thanks man. That's some advise I can use!

  10. The article was so nice, really its a good tip

  11. Yes, There are some people still using these web browsers. And they are using this service from last few months.

  12. Wow, Cool tips here !

  13. Looks interesting and helpful tips, thanks for sharing.

  14. Looks interesting and helpful tips, thanks for sharing.

  15. Looks interesting and helpful tips, thanks for sharing.

  16. I don't like the geolocation, as it only gives the distance in a straight line between 2 points in the map. It doesn't take into account the roads and their distances.

    If I only want to go 50 miles and it turns out the the walking distance is double that, while the direct line is only 40, then I feel cheated.

  17. Do these tips all work on ie 5 and lower? There are some people still using these web browsers.

  18. Ryan, you might want to check out this wordpress plugin for multiple authors. I do wordpress coding full-time, but haven't yet used this particular plugin yet. But it seems right up your ally.

    http://wordpress.org/extend/plugins/co-authors-pl

  19. Ryan, you might want to check out this wordpress plugin for multiple authors. I do wordpress coding full-time, but haven't yet used this particular plugin yet. But it seems right up your ally.

    http://wordpress.org/extend/plugins/co-authors-pl

  20. I've gotta say, I'm not a fan of using borders to style links. { text-decoration: underline; } draws the line at the typeface's baseline, which IMO looks more natural and vertically balanced.

    I'm not convinced that the underline crossing descenders has any affect on readability — and underlines are certainly more aesthetically pleasing to me. Links with borders simple look broken.

  21. No problem. I think people over look the usefulness of custom fields in WP which is a shame. I have used them for custom copyright licenses, per post as well as highlighting other authors, etc.

    Not much they can't do really.

  22. No problem. I think people over look the usefulness of custom fields in WP which is a shame. I have used them for custom copyright licenses, per post as well as highlighting other authors, etc.Not much they can't do really.

  23. Thanks Chris – might try that out.

  24. Right, just set up custom fields for your other authors. I used to do this all the time with WordPress before I moved on to greener pastures. Its not Rocket Surgery, might be brain science though.

    Thanks for the tips, although I think the CSS text underlining tip would destroy meticulously laid out designs, since pushing the underline below the descenders would break vertical rhythm and some line height settings.

  25. Right, just set up custom fields for your other authors. I used to do this all the time with WordPress before I moved on to greener pastures. Its not Rocket Surgery, might be brain science though.Thanks for the tips, although I think the CSS text underlining tip would destroy meticulously laid out designs, since pushing the underline below the descenders would break vertical rhythm and some line height settings.

  26. Pretty good list of tips, looks like Tipster is useful after all, eh?

    On that note, have you thought of adding a search to Tipster? That would be very cool.

  27. Pretty good list of tips, looks like Tipster is useful after all, eh?On that note, have you thought of adding a search to Tipster? That would be very cool.

  28. Great tip – thanks Paul!

  29. WordPress doesn't allow you to have multiple authors. I've also named and linked to each tip author.

  30. WordPress doesn't allow you to have multiple authors. I've also named and linked to each tip author.

  31. Quality Control on May 1, 2009 at 7:53 am said:

    This post was written by: Ryan Carson

    Really now, was it? Looks like you wrote the first 30 words and compiled the rest.

    Phoning it in again, how about another “top X Y's you must follow on twitter”?

  32. Try this for the Google Maps hack (also works as a bookmarklet):

    javascript:void(alert(gApplication.getMap().getCenter()));

  33. Quality Control on May 1, 2009 at 12:53 pm said:

    This post was written by: Ryan CarsonReally now, was it? Looks like you wrote the first 30 words and compiled the rest.Phoning it in again, how about another “top X Y's you must follow on twitter”?

  34. Try this for the Google Maps hack (also works as a bookmarklet):javascript:void(alert(gApplication.getMap().getCenter()));

Leave a Reply

You must be logged in to post a comment.

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more