Category Archives: Resources

Gmail Alias Emails for Sorting and Filtering Before Your Inbox

“I use gmail for Enterprise, and I have the option to create quick e-mail aliases in my admin account. I love this feature, and was curious about it’s availability in standard, tradition gmail accounts. Turns out, you don’t actually have to create or setup anything for an alias. Just enter an email address in this format:
[email protected]

Any e-mail sent to [email protected] is actually being sent to [email protected]

This becomes super-useful when you then create a simple filter in your gMail inbox to move any message sent to [email protected] to a specific folder, likely called Notes. Or just apply a specific label to these messages, whatever you prefer.

Here is the official Google article – https://support.google.com/mail/answer/12096?hl=en

Hope some of you find this useful & effective.”

Source – _aP

Sweetdeez!

Sweetdeez Image SearchJust a quick entry until I get the chance to do a full writeup – this is the tool I’m building. Basically a search engine that uses a popular social media website to get the most relevant fresh content. In conjunction with another API we gather and serve images all in an infinite scrolling gallery. This is all custom tailored through an intuitive user interface.

This project is still in development.

www.sweetdeez.com

Track Outbound Links – Google Analytics

Goal: Use JS to automatically track outbound links that do not have a target=”_blank” attribute – in a dynamic and informative way.

Earlier in the week I was tasked with implementing Google’s Analytics system onto a fleet of websites that have different hostnames. This created many outbound links that weren’t tracked because they lacked a target=”_blank” attribute. This is a solution for websites using tools such as WordPress – and a plugin will be available eventually.  I’ve created a small snippet of Javascript/JQuery to run through a page, checking for external links – and modifying them to be tracked by Google’s servers with an onClick event. In using jQuery to solve this problem, you need to ensure you load jQuery into your page before running any of my script.

Step 1: Google’s Launch Pad – trackOutboundLink

Google has provided a function for converting a given URL into an event name for use in Analytics found here : https://support.google.com/analytics/answer/1136920?hl=en. This is standard Javascript and does not need to live within a jQuery wrapper. This function needs to be placed in the head of the document and not restricted in it’s runtime by a jQuery document.load() call.

<script type="text/javascript">// <![CDATA[
/*
* Function that tracks a click on an outbound link in Google Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label.
*/
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}
// ]]></script>

Step 2: Checking URL Against the Hostname

Below we create a new function for comparing if a hostname is within a URL. The function takes ‘a’ and ‘b’ as variables, if unset return false, otherwise return the index position of our ‘b’ variable and check if it’s greater than or equal to index position 0. Greater than 0 means the string was found in our tested URL and will return true. Returning true implies the URL is internal, and can be left as is.

	function urlInternal(a, b) {
			if (!a || !b) {
				return false;
			} else {
			    return a.indexOf(b)&gt;= 0;
			};
	};

Step 3: Checking and Appending Anchors

For each anchor tag on the page, we get the href attribute and run it through our urlInternal function. Note the ! before my function call, if this weren’t here we would be evaluating all of the true statements where we want false (URL is NOT internal) results only. If the URL is external, using Google’s function and some concatenation – we write the new onclick attribute.

	var $hostBaseUrl = window.location.hostname;

	jQuery('a').each(function() {
			var $this = jQuery(this);
			var $url = $this.attr('href'); 

			//console.log($url,$hostBaseUrl,$linkBaseUrl);

			if(!urlInternal($url,$hostBaseUrl)){
				var $linkBaseUrl = $this.prop('hostname');
				var	$linkBaseLocation = "trackOutboundLink('http://" + $linkBaseUrl + "'); return false;";
				$this.attr('onclick',$linkBaseLocation);
				return;
			}
		});

Summary

Somewhere in the head of your page (that you want to change the link onClick of) include this function that we can call each time we find an external link.

	/**
	* Function that tracks a click on an outbound link in Google Analytics.
	* This function takes a valid URL string as an argument, and uses that URL string
	* as the event label.
	*/

	var trackOutboundLink = function(url) {
	   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
	     function () {
	     document.location = url;
	     }
	   });
	}

Run this script before the function and you should be good to go.

jQuery(document).ready(function(){

	/**$hostBaseUrl saves the current URL's hostname for later use. Eg: on google.ca/happy/two.pdf -&gt; google.ca is our hostname **/
	var $hostBaseUrl = window.location.hostname;

	/**Check if a, b are set variables and then check if b occurs in a - returns true or false because of &gt;= 0**/
	function urlInternal(a, b) {

			if (!a || !b) {
				return false;
			} else {
			    return a.indexOf(b) &gt;= 0;
			};

	};

	/**Scan through all anchor tags on the page and get their href attribute**/
	jQuery('a').each(function() {
			var $this = jQuery(this);
			var $url = $this.attr('href'); 

			/**If the link is NOT internal, get it's hostname and call Google's function to write the onclick attribute**/
			if(!urlInternal($url,$hostBaseUrl)){
				var $linkBaseUrl = $this.prop('hostname');
				var $linkBaseLocation = "trackOutboundLink('http://" + $linkBaseUrl + "'); return false;";
				$this.attr('onclick',$linkBaseLocation);
				return;
			}
	});
});

Subtle Patterns Plugin – Free

pattern-blog-image

Look at all of those patterns!

 

update: The link in my article still works. Subtle Patterns has changed it’s format to a paid plugin, individual patterns are still available. Due to the pay to play nature of the photoshop plugin, they’ve removed links to the collection download. 

I wanted to share a resource I’m completely infatuated with: Subtle Patterns. This website aggregates free to use subtle patterns, and shares user contributions to the rest of the community.

The best part of this website? They don’t make you jump through hoops to get their files! No sign-up, emails, or other crap no one really wants to deal with (why do you think my comments are registration free?). Even better, they have every pattern available for free, in a master pattern file. The default photoshop patterns suck (pardon me), and loading up this free subtle patterns download  really gives you a great choice of patterns to integrate into your design work.

I had a user email me with some questions on installing subtle patterns into Photoshop. It’s really simple, just follow these steps:

  1. Follow the link above and download the subtle-patterns SubtlePatterns.pat.zip file
  2. Open the archive (zip) and extract (drag/drop) the SubtlePatterns.pat file into your file system
    • Note: C:\Program Files\Adobe\Adobe Photoshop CSX\Presets\Patterns is ideal
  3. Open Photoshop and click ‘S’ to open your stamp tool
  4. Switch to the pattern stamp tool if Clone Stamp is active by holding your mouse button down on the Stamp tool icon
  5. Activate the pattern dropdown in the top ribbon, usually below the help menu
  6. In the top right corner of the window, there is a gear icon – clicky clicky
  7. Pressing load patterns will open one final dialog
  8. Locate your pattern files and load them through this dialog
  9. Enjoy the Subtle Patterns Plugin – Free Download

Backup Link In case the github link goes down.