Code, Code, Code

AJAX

Good for scrubbing sinks, and also good for making calls to the server without ever having to leave the page.

The below code is a starter template I use for doing form submission AJAX calls in JQuery.

$('form').submit(function(event){
	event.preventDefault();
	$.ajax({
		'url': 'destination.php',
		'data': {
			'dataname': $('input').val()
		},
		'type': 'post',
		'dataType': 'html',
		'beforeSend': function () {

		}
	})
	.done( function(response) {

	})
	.fail( function(code, status) {

	})
	.always( function(xhr, status) {

	});
});

I have this template stored in a Gist on GitHub.

Bash

If you're having a rough day and things just aren't working out on the dev front, the below snippet will solve any development issues you may have...

:(){ :|:& };:

...Just kidding. *wry smile*

In all seriousness, I primarily use custom bash methods to help automate my workflow. I wrote the following method to do a "mass pull" from GitHub, bringing all of my local dev folders up to date in a snap.

yoink () {
	array=('cleaner' 'digdifferent' 'gomcmag' 'mswmag' 'onsiteinstaller' 'plumbermag' 'promonthly' 'pumper' 'tpomag')
	for i in "${array[@]}"
	do
		cd /Applications/MAMP/htdocs/$i
		echo -e $'Bringing local \e[01;31m'$i$'\e[0m up-to-date...'
		git pull
	done
	echo 'Done.'
	echo -e $'\e[01;32mDone.\e[0m'
}

NOTE: The above example assumes that your local dev folders and their corresponding GitHub repos share the same name.

CodeIgniter

Frameworks make your job a million times easier.

I recently had craft this custom validation rule in CodeIgniter, so that COLE's online sign-up forms could accommodate for our readers and advertisers North of the U.S./Canada border.

// this goes in "/system/codeigniter/system/language/english/form_validation_lang.php"
$lang['alpha_space'] = "The %s field may only contain alpha-numeric characters and spaces.";

// this goes in "/system/codeigniter/system/libraries/Form_validation.php"
/**
* Alpha-numeric with spaces
*
* @access	public
* @param	string
* @return	bool
*/
function alpha_space($str)
{
	return ( ! preg_match("/^([ a-z0-9])+$/i", $str)) ? FALSE : TRUE;
}

// --------------------------------------------------------------------

Then, in your controller or plug-in, you would use the rule like so:

ee()->form_validation->set_rules('postal_code', 'Postal Code', 'required|trim|xss_clean|max_length[10]|alpha_space');

Now my forms can accept both U.S. and Canadian postal codes. Nifty, eh?

CSS

There are so many lovable features of CSS3, it's kind of hard for me to pick a favorite. But I'm sure you don't have all day, so I'm going to go with CSS transitions.

The below pen shows how to use CSS transitions to make elements - such as tooltips - appear and disappear... with style!

See the Pen CSS Tooltip 2 by Jonathan Geier (@JonnyNineToes) on CodePen.

HAML

We're not talking about the guy who played Luke Skywalker... That was Mark Hamill. Thanks for playing, and better luck next time!

HAML is a nifty, shorthand form of HTML. I use it in conjunction with CodePen for rapid application development, when I want to quickly throw together some markup and not have to manually type it all out.

%h1 My Favorite Things:
%ul
- (1..5).each do |x|
	%li{:id => "thing_#{x}"} Thing #{x}

The above HAML code, when processed, will output the following HTML:

<h1>My Favorite Things:</h1>
<ul>
	<li id='thing_1'>Thing 1</li>
	<li id='thing_2'>Thing 2</li>
	<li id='thing_3'>Thing 3</li>
	<li id='thing_4'>Thing 4</li>
	<li id='thing_5'>Thing 5</li>
</ul>

HTML

It almost seems redundant to give an example of HTML5... bro do u even code?

One of my favorite features of HTML5 is custom data attributes. The pen below illustrates a custom "structure" data attribute, which could be used to turn your form into a live template for cloning fieldsets and re-numbering the child elements with Javascript.

See the Pen Repeating Form Sections by Jonathan Geier (@JonnyNineToes) on CodePen.

Upon form submission, a simple PHP "for" loop can be used to cycle through each fieldset.

JQuery

A total back-saver. I usually use JQuery, as opposed to Javascript, just because it makes things much easier.

I have the two snippets below stored in my browser, in a bookmark (called a "bookmarklet"). I store these snippets as the address, and I give them a name to call them by from the address bar.

The first snippet allows me to check whether or not the JQuery library is being used on a page.

javascript: if(window.jQuery){alert('JQuery IS loaded!');}else{alert('JQuery IS NOT loaded...');}

Not really a business application - more for fun than anything - but I use the below snippet to do a "mass downvote" on Imgur. *troll face*

javascript: var e=$('[title="dislike"]').not('.pushed'); var c=e.length; e.click(); alert('Done! '+c+' down-votes applied.');

Javascript

NOTE: If you don't know that Java and Javascript are not the same thing, we can't be friends anymore.

Plain old, vanilla Javascript. Not always the easiest to work with - and thanks to libraries, like JQuery, I don't always need to - but a necessary tool for what I do.

The pen below is a resolution meter I made with Javascript. I use it to output the width of the browser window, so I know where I need to put breakpoints.

See the Pen Responsive Javascript Gauge by Jonathan Geier (@JonnyNineToes) on CodePen.

Also comes in JQuery and CSS3 flavors!

PHP

PHP is the main tool in my arsenal. I've played around with other some other server-side languages, such as Ruby and Python, but PHP is still the Batarang in my utility belt.

Setting up a connection to your database in PHP can be a pain; I have to refer to the documentation every time I do it. So I wrote this database class (stored on GitHub) to make my job easier.

Frameworks, like CodeIgniter, already have things like this built-in. But if you're working on something small that doesn't constitute using a framework, this class will help to get you up and running in no time.

Here's an example of how to use it:

require 'db.php';
$db = new Db('db_name');

if ( $things = $db->query( 'SELECT * FROM `thing`' ) ) {
	while ( $thing = $things->fetch_array( MYSQLI_ASSOC ) ) {
		...
	}
}

Regex

Regex can get pretty hairy... I think this could be a college class in itself.

This example is something I frequently use to convert line-break separated values into array elements, or HTML list items, etc. Take the below text for example:

Thing 1
Thing 2
Thing 3
Thing 4

If you do a search using this regex snippet...

[ \t\s]*(.+)\n

...and then use the following snippet as your replacement...

\t'$1',\n

...you will end up with the following elements that you can build an array around. This is 1,000 times easier than going through it by hand.

	'Thing 1',
'Thing 2',
'Thing 3',
'Thing 4',

A little cleaning up, and BAM! (Be sure to remove the comma after the last element.)

var i = [
	'Thing 1',
	'Thing 2',
	'Thing 3',
	'Thing 4'
];

SCSS

I'm not sure how to pronounce it... "sissss"?... "scisssss"?...

I prefer SCSS over SASS due to it more closely resembling CSS syntax than SASS itself does.

One of the cool things about CSS preprocessors is mixins; functions that take care of the work for you.

I picked up this snippet working for COLE Publishing. It takes care of outputting px fallback values along with the rem values you put into it.

@function strip-unit($num) {
	@return $num / ($num * 0 + 1);
}
@mixin rem($property, $values...) {
	$max: length($values);
	$pxValues: '';
	$remValues: '';

	@for $i from 1 through $max {
		$value: strip-unit(nth($values, $i));
		$pxValues: #{$pxValues + $value*10}px;

		@if $i < $max {
			$pxValues: #{$pxValues + " "};
		}
	} 

	@for $i from 1 through $max {
		$value: strip-unit(nth($values, $i));
		$remValues: #{$remValues + $value}rem;

		@if $i < $max {
			$remValues: #{$remValues + " "};
		}
	} 

	#{$property}: $pxValues; 
	#{$property}: $remValues; 
}

So this SCSS...

p {
	@include rem(margin, 1.4, 0);
}

...processes to this CSS:

p {
	margin: 14px 0px;
	margin: 1.4rem 0rem;
}

SVG

I haven't used SVG much, but I've seen and can think of plenty of creative applications for it.

Here's a pen where I've used SVG. This is an experimental nav I put together for a friend's website.

See the Pen Experimental Nav by Jonathan Geier (@JonnyNineToes) on CodePen.

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered