piddmedia » Tutorials

New Rails 3 app, routes.rb is good, database.yml is good. Still get 500 error.

C. Scott Asbach — Mon, 28 Nov 2011 19:38:58 +0000

I have found there are A LOT of things that can go wrong with a Rails deployment, even if your ‘Developer Friendly RoR Host’ offers ‘Fast Rails Deployment’ and ‘Incredible Ruby Hosting’ and you are merely trying to deploy a simple ‘Hello World’ app.

As a result the internet is full of different suggestions for tweaks to make in various configuration files all throughout your Rails application directory tree. There are far too many of them to list here. I am going to provide the solution that worked for me because it was not nearly as common as the other suggested solutions so I think it needs little more representation.

If your database.yml is configured correctly (this is YAML, even bad white space can be a culprit here), and your routes.rb is configured correctly (if you are using rails generate commands this shouldn’t be an issue), and your are not trying to run your app from a sub directory (there can be quite a few tricky configuration hiccups associated with this), and you are running Rails v >= 3 (so much of the advice and tutorials floating around out there are for older versions, be careful!); like me. Then you might want to check /log/production.log and see if there’s an error like this: Template::Error (application.css isn't precompiled):. If there is then you need to run the following command in the command line from your applications root:

rake assets:precompile

you can open up /config/environments/production.rb and set config.assets.compile to true. This method is not recommended for use in production environments.

Substitute Click for Hover on Touch Devices

C. Scott Asbach — Sun, 13 Mar 2011 20:45:19 +0000

Fact:

Hovering doesn’t work out so well on devices with a touch interface.

Prediction:

A substantial portion, if not the majority of web browsing will be done with touch devices.

Conclusion:

We need to create alternatives to hover events when we design our user experience.

A Solution

In this tutorial I will show you a brief example of just such an alternative. In the example we have an with a tooltip. I use the tag for two important reasons. First, in modern browsers, tags will produce a browser tooltip by default anyway so we will have graceful degradation. Second, we leverage this by putting the text of the tooltip in the ‘s title attribute and this allows us to use jQuery to grab this text and use it for the content of our custom tooltip.

The Code:

The HTML

Just a simple document with an abbreviation that has a tooltip.

For a tooltip hover or click here.

The CSS

Styles for the abbreviation and the tooltip.

abbr
{
        border-bottom: 1px dotted #666;
        cursor: help;
}

.tooltip
{
	position:absolute;
	background-color:#eeeefe;
	border: 1px solid #aaaaca;
	font-size: smaller;
	padding:4px;
	width: 160px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

The JS

Here’s what the example is all about. We get rid of the browsers tooltip and make our own. Then we make a clickable tooltip that fades out after a short delay.

/**
 * touchHover.js
 *
 * Create tooltips on mouseover or on click (for supporting touch interfaces).
 *
 * @author C. Scott Asbach
 */

$(document).ready(function() {	

	/**
	 * store the value of and then remove the title attributes from the
	 * abbreviations (thus removing the default tooltip functionality of
     * the abbreviations)
	 */
	$('abbr').each(function(){		

		$(this).data('title',$(this).attr('title'));
		$(this).removeAttr('title');

	});

    /**
	 * when abbreviations are mouseover-ed show a tooltip with the data from the title attribute
	 */
	$('abbr').mouseover(function() {		

		// first remove all existing abbreviation tooltips
		$('abbr').next('.tooltip').remove();

		// create the tooltip
		$(this).after('' + $(this).data('title') + '');

		// position the tooltip 4 pixels above and 4 pixels to the left of the abbreviation
		var left = $(this).position().left + $(this).width() + 4;
		var top = $(this).position().top - 4;
		$(this).next().css('left',left);
		$(this).next().css('top',top);				

	});

    /**
	 * when abbreviations are clicked trigger their mouseover event then fade the tooltip
	 * (this is friendly to touch interfaces)
	 */
	$('abbr').click(function(){

		$(this).mouseover();

		// after a slight 2 second fade, fade out the tooltip for 1 second
		$(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
			$(this).fadeOut(1000);
		}});

	});

	/**
	 * Remove the tooltip on abbreviation mouseout
	 */
	$('abbr').mouseout(function(){

		$(this).next('.tooltip').remove();				

	});	

});

Happy Clicking!

There you have it. While this is a basic example, with a little imagination you could apply similar techniques to all of your essential interactions that are currently dependent on hovers.

Got the Gist?

CodeProject

ShareThis Social Bookmarking Counters on your WordPress Blog

C. Scott Asbach — Fri, 13 Aug 2010 16:05:41 +0000

So I was really impressed with the new buttons that ShareThis is offering now ~~but was disappointed to find out that they don’t currently support them for WordPress (If you use their WordPress plug-in you get the old version of the ShareThis button).~~The new ShareThis WordPress plug-in has been released and you can find it here. But, they did provide some copy & paste code, so I figured where there’s a will there’s a way (As you can see from the counters below this post there’s a happy ending to this story!).

NOTE: This tutorial involves making edits to the functions.php file in your WordPress theme.

So here’s the copy & paste code provided by ShareThis:

This code goes in the loop with the post:

This code goes in the footer of your page:

This particular code is for the vertical counters if you pick a different button type you will get different results. Note however, that if you aren’t going to use the counters then you may have issues outside of the scope of this tutorial. I’ve provided the above as an example of what the code looks like when we start out, you should really go to the ShareThis site yourself (sign up if you haven’t already) and copy and paste the button code from them because it will already have your publisher key embedded in it.

How to add the URL and title of your post:

ShareThis provides some attributes to control your counters. You need to add the st_url and st_title attributes to each one of the spans in the loop code shown above. If you don’t add these attributes then by default the counters will share and track the URL and title of the current page. Which is fine if we are viewing a single post, but on the home page for example, the buttons will be tracking and sharing the home page and not the individual posts with which they are associated.

How do we fix this?

You will need to use the get_permalink() and get_the_title() functions to return the URL and title of the current post in the loop. Then insert these values into all of your spans. This brings us to our first function which we will add to functions.php found in your themes directory.

sharethis_button()

function sharethis_button() {
$st_url = 'st_url="'.get_permalink().'" ';
$st_title = 'st_title="'.get_the_title().'" ';
	return '
		
		
		
		
		
		
		';
}

First we write our post’s URL and title to variables including the rest of the attribute definitions as well. So the value of these variables would be something like: st_url="http://www.piddmedia.com/tutorials/sharethis-social-bookmarking-counters-on-your-wordpress-blog" and st_title="ShareThis Social Bookmarking Counters on your WordPress Blog" Then we return our original spans but with the new attributes inserted into each one. I also wrapped the spans in p tags so the counters don’t misbehave with the layout. You might add some other styling depending on your needs.

NEXT:How to insert the counters into your posts: