Rick Markus | Web Developer, Chicago http://www.rickmarkus.com Freelance web developer based in the Windy City. Mon, 04 Feb 2013 18:23:11 +0000 en-US hourly 1 http://wordpress.org/?v=3.5 rickmarkushttp://feedburner.google.com Introducing htmOWL LLC http://www.rickmarkus.com/blog/introducing-htmowl-llc/ http://www.rickmarkus.com/blog/introducing-htmowl-llc/#comments Mon, 04 Feb 2013 18:20:12 +0000 Rick http://www.rickmarkus.com/?p=337 I am pleased to announce a reorganization under htmOWL LLC. You can now find the same quality and value in Web development you found here over at my new web home. Thanks to all my clients and associates who have supported my freelance efforts. Please take the time to update your bookmarks and I hope to talk to you soon. This site will be auto-forwarded to the new domain in the coming weeks.]]> htmOWL logo

I am pleased to announce a reorganization under htmOWL LLC.

You can now find the same quality and value in Web development you found here over at my new web home.

Thanks to all my clients and associates who have supported my freelance efforts.

Please take the time to update your bookmarks and I hope to talk to you soon.

This site will be auto-forwarded to the new domain in the coming weeks.

]]> http://www.rickmarkus.com/blog/introducing-htmowl-llc/feed/ 0 Facebook like button hates popping up http://www.rickmarkus.com/blog/facebook-like-button-hates-popping-up/ http://www.rickmarkus.com/blog/facebook-like-button-hates-popping-up/#comments Thu, 27 Dec 2012 20:29:25 +0000 Rick http://www.rickmarkus.com/?p=316 Facebook's like button. I wrapped the like button in a div and set the div to display:none. Using jQuery's show() or fadeIn() functions worked fine on the box itself, but the like button was behaving inconsistently across browsers. In Firefox I believe it disappeared completely. The solution, which is actually more of a workaround, is to keep the wrapping div visible, but set it's margin outside the view of the window. I ended up absolutely positioning the div so that it's right CSS property was -500 pixels and then using jQuery's animate() function, I slid the box in so that it rested with a right property of 20 pixels or so. The Facebook button liked that setup. Hopefully somebody finds this and saves themselves a few minutes of troubleshooting.]]> A recent client asked me to intall a popup box on his site that contained Facebook’s like button.

I wrapped the like button in a div and set the div to display:none. Using jQuery’s show() or fadeIn() functions worked fine on the box itself, but the like button was behaving inconsistently across browsers. In Firefox I believe it disappeared completely.

The solution, which is actually more of a workaround, is to keep the wrapping div visible, but set it’s margin outside the view of the window. I ended up absolutely positioning the div so that it’s right CSS property was -500 pixels and then using jQuery’s animate() function, I slid the box in so that it rested with a right property of 20 pixels or so.

The Facebook button liked that setup.

Hopefully somebody finds this and saves themselves a few minutes of troubleshooting.

]]> http://www.rickmarkus.com/blog/facebook-like-button-hates-popping-up/feed/ 0 Sync email messages across apple devices with IMAP http://www.rickmarkus.com/blog/sync-email-messages-across-apple-devices-with-imap/ http://www.rickmarkus.com/blog/sync-email-messages-across-apple-devices-with-imap/#comments Mon, 12 Nov 2012 22:53:48 +0000 Rick http://www.rickmarkus.com/?p=288 was documented on MacWorld five years ago). Today, IMAP is likely offered by a greater number of hosting providers and should be well documented in your host's e-mail setup instructions. Be sure to use it over the more common POP alternative.]]> It is possible to sync email messages from unique domains across your Mac, iPhone and iPad, without relying on a third party mail server like Gmail. Apple’s me.com or icloud.com addresses are also unnecessary.

For the last year I have been using my Gmail account to fetch messages from my rickmarkus.com e-mail address via POP. It was adequate. My biggest complaint was the incoming message delay in communications that had a more immediate need — Gmail can default to up to 60 minutes to fetch new messages from outside e-mail addresses.

An alternative? Accessing mail via the IMAP protocol.

IMAP, unlike the POP protocol, acts as a server that can update the status of messages (read, deleted, etc.) in multiple locations, making Gmail an unnecessary middle man.

Using IMAP to sync across devices is certainly not a new strategy (it was documented on MacWorld five years ago).

Today, IMAP is likely offered by a greater number of hosting providers and should be well documented in your host’s e-mail setup instructions. Be sure to use it over the more common POP alternative.

]]> http://www.rickmarkus.com/blog/sync-email-messages-across-apple-devices-with-imap/feed/ 0 Common culprit for a sluggish WordPress site http://www.rickmarkus.com/blog/common-culprit-for-a-sluggish-wordpress-site/ http://www.rickmarkus.com/blog/common-culprit-for-a-sluggish-wordpress-site/#comments Tue, 30 Oct 2012 16:29:42 +0000 Rick http://www.rickmarkus.com/?p=273 say yes. Others say no. I tend to think that if a plugin is installed but deactivated, it can likely be deleted. Make it a best practice. If you want to run some plugin load testing, developer Dave Clements suggests the P3 Plugin Performance Profiler and details its usage.]]> Many factors can affect the loading speed of a WordPress site, but in my experience it usually boils down to plugins.

WordPress is an excellent CMS in no small part due to its ease of customization. As users explore the full spectrum of possibilities, it’s easy to find oneself with a host of plugins that were added after the installation of the WordPress core files.

Simply put: less is more.

Most plugins will slow your site’s load time. Only install and activate plugins that are absolutely necessary.

Can plugins slow down your site even if they are deactivated? Some say yes. Others say no.

I tend to think that if a plugin is installed but deactivated, it can likely be deleted. Make it a best practice.

If you want to run some plugin load testing, developer Dave Clements suggests the P3 Plugin Performance Profiler and details its usage.

]]> http://www.rickmarkus.com/blog/common-culprit-for-a-sluggish-wordpress-site/feed/ 0 JavaScript ‘Click Me’ prank for beginners http://www.rickmarkus.com/blog/javascript-click-me-prank-beginners/ http://www.rickmarkus.com/blog/javascript-click-me-prank-beginners/#comments Fri, 22 Jun 2012 19:58:22 +0000 Rick http://www.rickmarkus.com/?p=231 here. Feel free to download the file and use it as you wish. Let's start with the markup and styling: ...]]> Those new to javaScript can start to get a feel for grabbing page elements and adding events by building a simple application.

The “Click Me” prank is a single button which displays on the page. When the user tries to click the button, the button moves away from the cursor.

You can view the prank here. Feel free to download the file and use it as you wish.

Let’s start with the markup and styling:

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">

	<style>

	#button {
		width:100px;
		height:50px;
		position:absolute;
		top:100px;
		left:100px;
	}

	</style>
</head>
<body>

	<button id="button">Click Me!</button>

<script></script>
</body>
</html>

The above code creates a basic HTML page, ads a Click Me! button and applies some CSS styling.

Now on to the javaScript. You will put the following code between the <script> tags.

var button = document.getElementById("button");

First, grab the button by its ID using document.getElementByID. Then assign the button element to a variable named button.

var buttonWidth = button.offsetWidth;
var buttonHeight = button.offsetHeight;

Next, grab the width and height of the button element using offsetWidth and offsetHeight. Set those to new variables.

var browserWidth = window.innerWidth || document.documentElement.clientWidth;
var browserHeight = window.innerHeight || document.documentElement.clientHeight;

Next you need to determine the width and height of the user’s browser window. You will use the information later to randomly position the button around the page.

You start by creating a variable for both the height and width. Then grab the width of the browser window by using window.innerWidth. Because older “legacy” browsers such as IE8 do not support innerWidth, you also have to add an OR operator and use document.documentElement.clientWidth. Repeat the steps for height.

The width and height variables will be set to a number.

function move() {
		button.style.left = Math.floor(Math.random()*(browserWidth-buttonWidth)) + "px";
		button.style.top = Math.floor(Math.random()*(browserHeight-buttonHeight)) + "px";
	}

Next, create the function that will move the button around the page.

Using Math.random(), generate a random number between 0 and 1. Then multiply that number by the width of the window (stored in the browserWidth variable). For example, if the width of the browser was 800, Math.random() may generate a value of .04328 which would multiply to 34.624. Subtract the width and height of the button from the browser measurements to be sure it never get’s positioned off the right or bottom sides of the browser window.

Math.floor is used to remove the decimals from our product, which would result in 34. Concat “px” to the end to convert the number into a string (“34px”) and set it equal to the button’s left or top properties.

if(typeof addEventListener !== "undefined") {
		button.addEventListener("mouseover", move, false);
	} else if (typeof attachEvent !== "undefined") {
		button.attachEvent("onmouseover", move);
	} else {
		button.onmousover = move;
	}

Finally, add an event to the page which will trigger when the user’s mouse moves over the button.

Start by checking if the user’s browser is modern (standards compliant) by checking if it supports the addEventListener method. If addEventListener does not return undefined, call that method on the button element.

Use “mouseover” as the event type for the first property, followed by our move function as the listener, followed by false for useCapture.

If addEventListener returns undefined, use the attachEvent method which is supported by older browsers. For the type property, change “mouseover” to “onmouseover”. Also, you may remove the useCapture property.

Finally, as a safety guard for browsers that don’t support attachEvent, we use a DOM level 0 event handler. Set button.onmouseover equal to the move function. This last step is likely overkill for this project, but promotes best practices.

Here is the final code:

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">

	<style>

	#button {
		width:100px;
		height:50px;
		position:absolute;
		top:100px;
		left:100px;
	}

	</style>
</head>
<body>

	<button id="button">Click Me!</button>

<script>
	var button = document.getElementById("button");
	var browserWidth = window.innerWidth || document.documentElement.clientWidth;
	var browserHeight = window.innerHeight || document.documentElement.clientHeight;
	var buttonWidth = button.offsetWidth;
	var buttonHeight = button.offsetHeight;

	function move() {
		button.style.left = Math.floor(Math.random()*(browserWidth-buttonWidth)) + "px";
		button.style.top = Math.floor(Math.random()*(browserHeight-buttonHeight)) + "px";
	}

	if(typeof addEventListener !== "undefined") {
		button.addEventListener("mouseover", move, false);
	} else if (typeof attachEvent !== "undefined") {
		button.attachEvent("onmouseover", move);
	} else {
		button.onmousover = move;
	}

</script>
</body>
</html>
]]> http://www.rickmarkus.com/blog/javascript-click-me-prank-beginners/feed/ 0 Best resources for aspiring Web developers http://www.rickmarkus.com/blog/best-resources-for-aspiring-web-developers/ http://www.rickmarkus.com/blog/best-resources-for-aspiring-web-developers/#comments Fri, 11 May 2012 21:33:55 +0000 Rick http://www.rickmarkus.com/?p=209 Over the past year I have explored a variety of web development education media from traditional classes to books. Each has strengths and weaknesses -- effectiveness will likely boil down to individual preference.

I thought I'd share two particular resources that I have found highly useful.

Nettuts+

Part of a larger collection of educational resources from Envato, Nettus+ offers online tutorials on HTML, CSS, Javascript and PHP, along with a large number of popular libraries like jQuery.

Additionally, they have full "courses" -- usually a lengthy series of video tutorials -- they offer via a subscription fee.

When Nettuts+ launched their premium service last year they offered a course titled "30 Days to Learn HTML and CSS" for free. That course is still available as a no-cost example.

Tutorials are usually instructed by Editor Jeffrey Way, who I find to be an astonishingly knowledgeable and effective educator.

]]> Over the past year I have explored a variety of web development education media from traditional classes to books. Each has strengths and weaknesses — effectiveness will likely boil down to individual preference.

I thought I’d share two particular resources that I have found highly useful.

Nettuts+

Part of a larger collection of educational resources from Envato, Nettus+ offers online tutorials on HTML, CSS, Javascript and PHP, along with a large number of popular libraries like jQuery.

Additionally, they have full “courses” — usually a lengthy series of video tutorials — they offer via a subscription fee.

When Nettuts+ launched their premium service last year they offered a course titled “30 Days to Learn HTML and CSS” for free. That course is still available as a no-cost example.

Tutorials are usually instructed by Editor Jeffrey Way, who I find to be an astonishingly knowledgeable and effective educator.

Envato also offers Wptuts+ for WordPress developers and Webdesigntuts+ for those on the design side. Many more tutorial collections are available at the Tuts+ Hub.

CodeCademy

Those that prefer hands-on coding should be sure to check out Codecademy.

The resource focused solely on javascript at launch, but has since expanded into HTML and CSS.

Instead of articles or video tutorials, Codecademy offers live problems the user must correctly solve to advance. The site is careful to introduce users slowly as to not scare away those brand new to coding languages. Those who begin the javascript track, for example, receive the following as their first question:

Hey! Let’s get to know each other. What’s your name?

Type it with quotes around it like this “Ryan” and then press enter on your keyboard.

Users of the site are rewarded for correct answers with points and badges. There are more than 500 excercises in the javascript track alone.

]]> http://www.rickmarkus.com/blog/best-resources-for-aspiring-web-developers/feed/ 0 Tumblr approves new Hipster theme http://www.rickmarkus.com/blog/tumblr-approves-new-hipster-theme/ http://www.rickmarkus.com/blog/tumblr-approves-new-hipster-theme/#comments Mon, 02 Apr 2012 16:07:40 +0000 Rick http://www.rickmarkus.com/?p=197 Hipster Theme

Tumblr has added a second theme I designed and coded to their template offerings.

The Hipster theme can be installed by following this link.

]]> Hipster Theme

Tumblr has added a second theme I designed and coded to their template offerings.

The Hipster theme can be installed by following this link.

]]> http://www.rickmarkus.com/blog/tumblr-approves-new-hipster-theme/feed/ 0 Tumblr theme approval: My experience http://www.rickmarkus.com/blog/tumblr-theme-approval-my-experience/ http://www.rickmarkus.com/blog/tumblr-theme-approval-my-experience/#comments Tue, 28 Feb 2012 22:33:15 +0000 Rick http://www.rickmarkus.com/?p=135 Upon submitting my first design to the Tumblr Theme Garden, I was unfamiliar with the approval process. I had questions.

  • How long will it take before I know if it is approved?
  • Did I submit everything correctly?
  • How do I delete my duplicate theme submission?

Unfortunately, there are no quick answers.

After submitting your theme, you will be given access to a theme management page. The link appears at the top of the Theme Garden upon login.

Tumblr Manage Your Themes

Inside will be listed your theme name and a link you may use to manually share your theme with others while it's under the review process.

And that's all that is provided. You may click on your theme name to make changes to what you have submitted, but otherwise ... crickets. >>

]]> Upon submitting my first design to the Tumblr Theme Garden, I was unfamiliar with the approval process. I had questions.

  • How long will it take before I know if the theme is approved?
  • Did I submit everything correctly?
  • How do I delete my duplicate theme submission?

Unfortunately, there are no quick answers.

After submitting your theme, you will be given access to a theme management page. The link appears at the top of the Theme Garden upon login.

Tumblr Manage Your Themes

Inside will be listed your theme name and a link you may use to manually share your theme with others while it’s under the review process.

And that’s all that is provided. You may click on your theme name to make changes to what you have submitted, but otherwise … crickets.

I checked on the status of my theme almost daily for the first week after its submission. No change. I checked on it a couple times the second week. Nothing. I checked in maybe once the third week. Still nothing. At the end of that third week, I had discovered it had been approved.

You can probably expect a similar time frame.

If you are worried about submitting everything correctly, be sure to review the submission checklist thoroughly. They provide it in the sidebar directly on the submission page as seen below. Since you enjoy coding enough to build your own theme, you probably are skilled at paying attention to detail, so hopefully this won’t be a problem.

Tumblr Edit Theme

Be careful when you submit your theme. Tumblr hiccuped when I submitted mine and I resubmitted, which gave me two entries of the same theme. I don’t know if it is a consistent problem. If you DO accidently double submit your theme and figure out how to delete the duplicate, please let me know. I’m still trying to solve that issue myself.

Tumblr Duplicate

]]> http://www.rickmarkus.com/blog/tumblr-theme-approval-my-experience/feed/ 3 Markus template added to Tumblr Theme Garden http://www.rickmarkus.com/blog/markus-template-added-to-tumblr-theme-garden/ http://www.rickmarkus.com/blog/markus-template-added-to-tumblr-theme-garden/#comments Mon, 13 Feb 2012 14:47:00 +0000 Rick http://www.rickmarkus.com/?p=124 Tumblr approved my theme to their official theme depot.

Here's a live demo that better represents the working theme than the site's default preview option. That demo is also where you can find more information on theme features.

]]> Tumblr approved my theme to their official theme depot.

Here’s a detailed list of features:

Color Selection:

  • Background Begin Gradient
  • Background End Gradient
  • Blog Title
  • Post Titles
  • Links

Font Selection:

  • Title font (includes blog title, post titles and side navigation)
  • Body font

Toggle on or off:

  • Header image box shadow (when a header image is uploaded)
  • Show post author
  • Show Tumblr portrait
  • Show blog description
  • Show following

Upload:

  • A header image

Quickly enter:

  • Disqus shortname
  • Flickr ID (what’s my ID?)
  • Google Analytics
  • Twitter account (Be sure you connect your Tumblr & Twitter accounts under settings).

Feel free to leave questions and comments below.

UPDATE: 1.01 released on 2/22. Streamlined Twitter integration. Updated theme options. Added link to this blog for questions.

]]> http://www.rickmarkus.com/blog/markus-template-added-to-tumblr-theme-garden/feed/ 0 Introducing the Markus theme for Tumblr http://www.rickmarkus.com/blog/introducing-the-markus-theme-for-tumblr/ http://www.rickmarkus.com/blog/introducing-the-markus-theme-for-tumblr/#comments Mon, 30 Jan 2012 22:38:36 +0000 Rick http://www.rickmarkus.com/?p=113 Markus Theme

If you are a fan of simple, clean, easily customizable templates, you will enjoy the Markus theme.

The free theme allows users to quickly change colors, headlines and fonts.

The theme is also optimized for Disqus comments, Twitter, Flickr and Google Analytics.

The best way to get the full experience is to install it yourself.

UPDATE: The theme has been added to the Tumblr Theme Garden. Users can find information on updates and support by following this link.

]]> http://www.rickmarkus.com/blog/introducing-the-markus-theme-for-tumblr/feed/ 0