Demo | Download

What does it do?

Replaceholder simply scans your file for input elements with the placeholder attribute and replaces it with a value attribute for cross-browser feng shui. It mimics the basic placeholder functionality by saving the placeholder value of each field and on focus removes the value from the input. As the user interacts with the field it removes and replaces the value of the field unless the user has added content. From this:

<input type="text" class="search" placeholder="Search" />

To this:

<input type="text" class="search" value="Search" />

How it works

1. Download the plugin
2. Unzip the file and grab either the development version (jquery.replaceholder.js) or the production version (jquery.replaceholder-min.js)
3. Add the <script> tag

   <script type="text/javascript" src="path/to/file/jquery.replaceholder.min.js"></script>

4. Run plugin

   $.fn.replaceholder();

5. ???
6. Profit!

That’s all you need to do.

Copypasta?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="path/to/file/jquery.replaceholder.min.js"></script>
<script type="text/javascript">
$(function() {
	$.fn.replaceholder();
});
</script>

Using the above code you should only have to update “path/to/file/” with the location to your saved file!

Customizing the Plugin

You can change the focus text color and the blur text color by passing these two properties:

$.fn.replaceholder({
	focusColor:'#000',
	blurColor:'#aaa'
});

You can also specify the elements you want to apply replaceholder to:

$('.search').replaceholder();

Feel free to use and abuse this code. If you end up using it let me know! Enjoy!

As I’ve experimented with CSS3 the one thing I’ve really struggled with is the crazy amount of extra code you end up writing in order to achieve cross-browser chi. Then it hit me, what if prototyping was extended to CSS. The idea isn’t that complex, but it’s all in my head at this point. Here is the basic idea:

I first start by defining a class that has a drop shadow property, and it’s set for all browsers, then reference that class using a prototype attribute:

.shadow-class {
	-moz-box-shadow:0 1px #000;
	-webkit-box-shadow:0 1px #000;
	box-shadow:0 1px #000;
}

#my_div { prototype:".shadow-class"; }

The basic idea is to add the attribute “prototype” and it accepts an existing Class or ID and then adds those styles to the element.  This is along the lines of variables in CSS, but it’s a little more complex. If any browser vendors would like to play around with the idea I would love to see it.

What do you guys think? Do you think it would be worth while and does it make sense to you?

The Markup

<ul id="nav">
	<li><a href="#" class="apple"><span>Apple</span></a></li>
	<li><a href="#">Store</a></li>
	<li><a href="#">Mac</a></li>
	<li><a href="#">iPod</a></li>
	<li><a href="#">iPhone</a></li>
	<li><a href="#">iPad</a></li>
	<li><a href="#">iTunes</a></li>
	<li><a href="#">Support</a></li>
	<li class="search_container">
		<form class="search" method="get" action="#">
			<label for="search">
				<input type="text" id="search" placeholder="Search" />
			</label>
		</form>
	</li>
</ul>

I wanted to keep it very light weight and semantic. Using an unordered list is fairly standard for a navigation system and I’m not really breaking new ground here.

I built this with an additional class named “current” which will set when you are viewing a specific page.

The CSS

#nav {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#848484));
	background:-moz-linear-gradient(top, #cacaca, #848484);
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
	display:inline-block;
	list-style:none;
	margin:0 0 20px;
	overflow:hidden;
	padding:0;
}
#nav li { border-right:1px solid #808080; -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); float:left; }
#nav li a { color:#262626; display:block; font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; height:36px; line-height:34px; padding:0 30px; text-decoration:none; text-shadow:0 1px #cecece; }
#nav li a:hover { background:-webkit-gradient(linear, 0 0, 0 100%, from(#929292), to(#535353)); background:-moz-linear-gradient(top, #929292, #535353); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 -1px #414141; }
#nav li a:active { -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); }
#nav li .apple { padding:0; }
#nav li .apple:hover { -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; }
#nav li .apple span { background:url(images/apple.png) center 6px no-repeat; display:block; padding:0; text-indent:-99999em; width:102px; }
#nav li .current,
#nav li .current:hover { background:-webkit-gradient(linear, 0 0, 0 100%, from(#373737), to(#525051)); background:-moz-linear-gradient(top, #373737, #525051); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 1px #242323; }
#nav .search_container { border-right:none; padding-right:5px; }
#nav .search { background:url(images/site-search-sprite.png) right -53px no-repeat; padding:7px 20px 8px 5px; }
#nav .search label { background:url(images/site-search-sprite.png) 0 0 no-repeat; display:block; height:20px; }
#nav .search input { border:none; color:#a9a9a9; height:12px; margin-left:25px; -webkit-appearance:none; }
#nav .search input:focus { border:none; outline:none; }

Things to note in the CSS would be multiple box-shadow properties.

-webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1);

The above code is used for the active state. This is triggered when you click one of the buttons. You can see I have chained three different styles to one property using a comma separated list. I tend to use box-shadow a lot to add a lot of detail to the end result. The great thing about using CSS rather than slicing images is the amount of time I saved.  I was able to put this example together in a few hours.  In fact it has taken me longer to write about what I’ve done that it actually took to create it. I think that says more about me as a writer than it says about my programming skills, but that’s not the point!

Making it work on Mobile Safari was something I wanted to get right this time. I did some low level Googling and found the -webkit-appearance property.

-webkit-appearance:none;

By setting it to ‘none’ I am able to remove the rounded corners and inner shadow from the element.

The JavaScript

I was able to use some code from my last posting and tweak it a little bit to give it some extra functionality.

$(function() {

	var $placeholder = $('input[placeholder]');

	if ($placeholder.length > 0) {

		var attrPh = $placeholder.attr('placeholder');

		$placeholder.attr('value', attrPh)
		  .bind('focus', function() {

			var $this = $(this),
				$form = $this.parents('.search');

			if($this.val() === attrPh)
				$this.val('').css('color','#333');

			$form.addClass('focus');

		}).bind('blur', function() {

			var $this = $(this),
				$form = $this.parents('.search');

			if($this.val() === '')
				$this.val(attrPh).css('color','#a9a9a9');

			$form.removeClass('focus');
		});
	}
});

What does this script do? Well to start I define my variables, which is a great practice to get into. I use $ in front of my variables to let me know I’m dealing with a jQuery object. I think check to see if any of those objects exist on the page. From there it’s pretty simple.  I grab the placeholder value and duplicate it as a value attribute.  On focus, or when you click into the text field, I’m checking to see if the text in the field matches the text that was in the placeholder attribute.  If they are the same then I remove the text. Then I find the parent form and set it’s class to “focus” which toggles the style of the blue outline around the search box.

It’s important to note that since this is a demo I grabbed the sprite image from Apple’s website for the search box, saving a local copy to not burn their bandwidth. So while you are, as always, free to copy all my code please note that I do not own the image used for the search box.

I wanted to thank everyone for the great feedback I’ve been receiving lately. It’s so much fun writing these examples and I really enjoy see what everyone has to say about them.  If you have anything that you want to see please let me know in the comments. Please feel free to grab this code or the code from the demo and play with it.  Enjoy!

The Grooveshark Search Box

The above image is my final attempt.  You can also checkout a working demo.

The Structure

I wanted to keep the front-end code really light and still make it easy to theme and have a flexible width.

<form action="#" id="search_box">
	<div class="wrapper">
		<input type="text" id="search" name="search" placeholder="Search for Music" />
		<button type="submit" class="search_btn"><img src="search_icon.png" title="Search" /></button>
	</div>
</form>

I start with a simple form tag and give it an id of “search_box”. Then I have a div that acts as a wrapper.  This creates the full white background behind the input field.  For the input field I’m using the new HTML5 placeholder attribute which is currently only supported in Google Chrome. I’m using a button element because they are easier to style and give you more control cross browser. The button has an image inside with the title tag set for accessibility.  I kept it pretty light and as you’ll see CSS3 offers you a ton of options.

The Sexy

I love the new properties that are coming out in CSS3. I hate managing them. Let me stand on my soap box quickly and ask the developers who create browsers for a living to please talk to other developers.  If you all implement box-shadow with the same formatting please also support using the proper attribute name.  It’s just ugly.

…and now back to the sexy.

I started with styling the form tag by referencing its id of “search_box”.  For those who don’t know the id is represented in CSS by the # or hash/pound symbol.

#search_box {
	background:-moz-linear-gradient(top, #ffd73a, #ffa500);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffd73a), to(#ffa500));
	border:1px solid #d28703;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);
	-webkit-box-shadow:inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);
	padding:9px;
	width:570px;
}

I am personally not a fan of writing css stacked like this, however, with all the -vendor- declarations it can get really messy. The cool part in the above section is the use of gradient backgrounds and box shadows.  For my gradients I usually set a fairly basic color-a to color-b style.  I then create accent colors with box-shadow.  This allows you to achieve the 1px glows by using the inset property. On the form tag alone I’m using 3 different box shadow styles…I love box-shadow

Next I styled the .wrapper class.

#search_box .wrapper {
	background:#fff;
	border:1px solid #d28703;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;
	padding:13px 0 10px 8px;
	position:relative;
}

The wrapper creates the white box surrounding the input field and the button. I’m setting the input field’s border to none so the backgrounds will blend together creating a seamless effect.

#search_box input { border:none; color:#333; font:bold 24px Helvetica, Arial, sans-serif; width:510px; }
#search_box button {
	background:-moz-linear-gradient(top, #453e26, #000);
	border:1px solid #000;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-moz-box-shadow:inset 0 -2px 3px #193544, inset 0 1px #907817, 0 1px 1px rgba(0,0,0,4);
	-webkit-box-shadow:inset 0 -2px 3px #193544, inset 0 1px #907817, 0 1px 1px rgba(0,0,0,.4);
	cursor:pointer;
	height:45px;
	position:absolute;
	right:2px;
	top:2px;
	width:45px;
}

The button tag allows you to customize everything about it.  I absolutely positioned it to the bottom right by 2px to make it stay in the same place regardless of the size of the containing element.

Taking It A Step Further

As I mentioned above I was using the placeholder attribute in the input field. Since this is only currently supported in Google Chrome I have to replace that value in all other browsers.  I wrote a quick jQuery function to mimic the placeholder functionality. This way as browsers start to implement the placeholder attribute I can simply remove a JavaScript function.

$(function() {

	var $placeholder = $('input[placeholder]');

	if ($placeholder.length > 0) {

		var attrPh = $placeholder.attr('placeholder');

		$placeholder.attr('value', attrPh)
		  .bind('focus', function() {

			var $this = $(this);

			if($this.val() === attrPh)
				$this.val('').css('color','#171207');

		}).bind('blur', function() {

			var $this = $(this);

			if($this.val() === '')
				$this.val(attrPh).css('color','#333');

		});

	}

});

The first thing I always do is declare my variables. In this case I grab all the input fields with the placeholder attribute set. I then run a quick check to see if any elements exist and if so set a few variables and bind a few events.  Again always start by defining your variables. I first grab the value of the placeholder attribute and then create a value attribute on the input element with the value of the placeholder.  This allows me to use a new HTML5 property and provide a fall back until full support is provided.

Next I bind my focus event. This fires every time a user clicks or tabs into the form element. What am I doing first? That’s right…declaring my variables. I have gotten into the habit of using the $ to signify a jQuery object.  This quickly lets me know if I’m dealing with a value such as a number or string, or if I’m am dealing with an object. I then run a quick check to see if the values match. If so, I clear the value attribute. Then when the user blurs or clicks off the field the logic simply is reversed. By checking to see if the value is the same or completely blank I avoid overwriting user input.

Let me know if the comments what you think and feel free to use and manipulate the code. Enjoy!

If you have worked with absolutely positioned elements then you should be familiar with z-index. Z-index is a CSS property that allows you to stack elements much like layers in Photoshop. This can quickly get confusing if you have no structural base to work from. Deciding what elements supersede other elements and how your website displays important information can be a cumbersome task and one that if not handled properly can cost you a lot of time and money in bug fixes later on.

Z-index blocking is a simple way to help you quickly organize and debug site issues that are related to improper stacking.

Lets use primary navigation as an example. If you have a hover menu then you want that menu to display overtop your main content. If you randomly set that to 500 and then later need a modal window that has an error message display and you set that to 450 the modal will display below the primary navigation and will look like a visual glitch.

With z-index blocking you assign spectrums with a range of 100 blocks in each range. You then assign labels to each spectrum and that will help you quickly understand where to place elements.

How to use it

I have built a basic example using 0-1000 as my global spectrum that I them break down into 10 sub-spectrums.

901-1000 – Error Message Windows (if modal)
801-900 – Modal Windows
701-800 – Primary Navigation
601-700 – Page Based Error Messaging
501-600 – Open
401-500 – Open
301-400 – Open
201-300 – Open
101-200 – Promotional/Advertising
1-100 – General Content

Conclusion

This is still a new concept but one that I think will help in the long run. It’s always important to plan early and test often.

The Javascript

In the example provided in the jQuery documentation they use a case where you would have multiple table cells nested within a table element.  The beauty of this is you apply the event one time rather than once for each child node.

$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

If you look at my CSS3 Chessboard example this would be a great way to add the drag/drop support and also save me from looping through all my elements.  I’m still working with the function and trying to do some speed tests to see how much this can save on performance.  If you have any tips post them in the comments.

The Characters:

♔ = ♔
♕ = ♕
♖ = ♖
♗ = ♗
♘ = ♘
♙ = ♙
♚ = ♚
♛ = ♛
♜ = ♜
♝ = ♝
♞ = ♞
♟ = ♟

I always get excited when I find cool characters to play with and these are no different.  Now that I had all the pieces I needed I started to build out the chess board.

The HTML:

First I created a quick table to hold all the chess cells and then added my chess pieces as anchors so I could add some fun drag/drop support.

<table id="chess_board" cellpadding="0" cellspacing="0">
	<tr>
		<td id="A8"><a href="#" class="rook black">&#9820;</a></td>
		<td id="B8"><a href="#" class="night black">&#9822;</a></td>
		<td id="C8"><a href="#" class="bishop black">&#9821;</a></td>
		<td id="D8"><a href="#" class="king black">&#9819;</a></td>
		<td id="E8"><a href="#" class="queen black">&#9818;</a></td>
		<td id="F8"><a href="#" class="bishop black">&#9821;</a></td>
		<td id="G8"><a href="#" class="night black">&#9822;</a></td>
		<td id="H8"><a href="#" class="rook black">&#9820;</a></td>
	</tr>
	<tr>
		<td id="A7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="B7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="C7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="D7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="E7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="F7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="G7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="H7"><a href="#" class="pawn black">&#9823;</a></td>
	</tr>
	<tr>
		<td id="A6"></td>
		<td id="B6"></td>
		<td id="C6"></td>
		<td id="D6"></td>
		<td id="E6"></td>
		<td id="F6"></td>
		<td id="G6"></td>
		<td id="H6"></td>
	</tr>
	<tr>
		<td id="A5"></td>
		<td id="B5"></td>
		<td id="C5"></td>
		<td id="D5"></td>
		<td id="E5"></td>
		<td id="F5"></td>
		<td id="G5"></td>
		<td id="H5"></td>
	</tr>
	<tr>
		<td id="A4"></td>
		<td id="B4"></td>
		<td id="C4"></td>
		<td id="D4"></td>
		<td id="E4"></td>
		<td id="F4"></td>
		<td id="G4"></td>
		<td id="H4"></td>
	</tr>
	<tr>
		<td id="A3"></td>
		<td id="B3"></td>
		<td id="C3"></td>
		<td id="D3"></td>
		<td id="E3"></td>
		<td id="F3"></td>
		<td id="G3"></td>
		<td id="H3"></td>
	</tr>
	<tr>
		<td id="A2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="B2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="C2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="D2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="E2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="F2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="G2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="H2"><a href="#" class="pawn white">&#9817;</a></td>
	</tr>
	<tr>
		<td id="A1"><a href="#" class="rook white">&#9814;</a></td>
		<td id="B1"><a href="#" class="night white">&#9816;</a></td>
		<td id="C1"><a href="#" class="bishop white">&#9815;</a></td>
		<td id="D1"><a href="#" class="king white">&#9813;</a></td>
		<td id="E1"><a href="#" class="wife white">&#9812;</a></td>
		<td id="F1"><a href="#" class="bishop white">&#9815;</a></td>
		<td id="G1"><a href="#" class="night white">&#9816;</a></td>
		<td id="H1"><a href="#" class="rook white">&#9814;</a></td>
	</tr>
</table>

The CSS:

a {
	color:#000;
	display:block;
	font-size:60px;
	height:80px;
	position:relative;
	text-decoration:none;
	text-shadow:0 1px #fff;
	width:80px;
}
#chess_board { border:5px solid #333; }
#chess_board td {
	background:#fff;
	background:-moz-linear-gradient(top, #fff, #eee);
	background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
	box-shadow:inset 0 0 0 1px #fff;
	-moz-box-shadow:inset 0 0 0 1px #fff;
	-webkit-box-shadow:inset 0 0 0 1px #fff;
	height:80px;
	text-align:center;
	vertical-align:middle;
	width:80px;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
	background:#ccc;
	background:-moz-linear-gradient(top, #ccc, #eee);
	background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
	box-shadow:inset 0 0 10px rgba(0,0,0,.4);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}

I started by using some CSS3 gradients, which I recently posted about, but the exciting thing here is the really cool use of the :nth-child pseudo selector. At first I just used the :nth-child(odd) on the table cell, but that created an evenly distributed zebra stripe effect. I was able to flip it and reverse it nth-child style by applying the reverse on the table row.

#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd)

What this gives me is the staggered tiling of the rows.  From there I added some box-shadow properties to make the darker tiles seem depressed and the white tiles I added a 1px inset white shadow to act as a highlight.

I can not say enough about box-shadow, text-shadow and gradients.

If you are also going to the conference hit me up and we’ll grab a beer!

@sethaldridge on twitter.

The more I work with them the more I like them. Today I’m going to focus on the basics and how you can quickly start working with CSS3 Gradients.

Cross browser support

The first and most important thing to think about when delving into the new world of CSS3 is making sure you provide a consistent user experience from browser to browser. I’ve argued that the majority of your users will never notice, meaning a user who uses IE7 probably doesn’t often use Firefox or Chrome, but to me cross browser support is like a puzzle and one that I love to work on.

On a side note if you use IE at your office and run Windows feel free to install Firefox because it doesn’t write to your registry and therefor will more than likely pass your companies IT securities. Do this at your own risk. It’s always good to check with your corporate IT policy before installing anything, but as they say it’s easier to ask for forgiveness than permission.

The CSS

To start we will create a basic gradient that will fill the body and act as our background.

body {
	/* IE and none awesome browser support */
	background:url(path/to/image.jpg) 0 0 repeat-x;
	/* Firefox support */
	background:-moz-linear-gradient(top, #ccc, #eee);
	/* Chrome/Safari support */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));
}

In the above example I specify background 3 times. The first is a standard CSS2.1 use where we display an image. This will be displayed to anyone using a legacy browser.

Mozilla (Firefox)

The second example is for Mozilla Firefox and is by far the easiest to use:

background:-moz-linear-gradient(top, #ccc, #eee);

The first thing to note is how you reference the gradient.

-moz-linear-gradient();

With Firefox you specify that the gradient will be linear, meaning from one point to another in a straight line.  If you are familiar with javascript then this surprisingly starts to look like a function — which only occurred to me recently as I’ve learned more about Javascript and PHP style languages, but I’m slower than most people.

The next part specifies the “top” property meaning we are starting our first color from the top and moving downward.  From there we specify our starting color and ending color.  In our example our starting color is “#ccc” and our ending color is “#eee”.

Webkit (Chrome/Safari)

The third example is for Webkit based browsers.  This typically covers Google Chrome, Safari, and Mobile Safari.

background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));

The Webkit version is a little more complex, but arguably gives you more fine control over the gradient position.

-webkit-gradient();

You should notice that calling the style is different than the Firefox version in that you specify “linear” as a parameter rather than in the name.  After specifying which type of gradient you want you then list out the points “Left Top” and “Right Bottom”. Similar to the firefox version you next specify the “from()” color and “to()” color.

In Closing

I have really enjoyed playing with gradients on the web, and while they aren’t supported in earlier version of modern browsers or IE, it’s always a good idea to get familiar with these new concepts. If there is one thing I’ve learned it is always important to get ahead of new information and not be struggling to pick it up when it’s in demand.

I’ll make sure to go deeper into this topic in the future so keep checking back for updates.  Also, if there is something specific you are interested in learning let me know in the comments.