Why remove jQuery Migrate?

• If you care about performance, there is no reason to serve an extra JS file.
• It’s better to keep your code, themes and plugins updated than it is to patch in support with an extra file.
• If you are running plugins that use older jQuery code, it’s probably better to update them or switch to an alternative that is kept updated.

How to remove jQuery migrate from WordPress 3.6

Just add the following snippet to your theme’s function.php file.

add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate' );

function dequeue_jquery_migrate( &$scripts){
	if(!is_admin()){
		$scripts->remove( 'jquery');
		$scripts->add( 'jquery', false, array( 'jquery-core' ), '1.10.2' );
	}
}

Notes / Warnings

If you are unsure if your website requires jQuery Migrate, you can set define('SCRIPT_DEBUG', true); in your wp-config.php on a dev server and watch the console as you browser your site for any logs. However, don’t enable this on a development site unless you absolutely need to.

Make sure any external scripts don’t require the functions.

Installation is simple: edit the keybind files and save the python script below to the ~/.config/sublime-text-3/Packages/User/ folder. If you are using sublime-text-2 or a different Linux distro, you may need to change your config folder url.

Obviously, you can change Nautilus to be another file manager such as Dolphin or Thunar if you prefer.

In your keybindings file:

You can change the key combination to anything you want.

[
    { "keys": ["ctrl+shift+e"], "command": "open_folder_in_nautilus" }
]

Save the following Sublime Text 3 script in a .py file

import sublime, sublime_plugin, os, subprocess

class OpenFolderInNautilusCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        if self.view.file_name():
            folder_name, file_name = os.path.split(self.view.file_name())
            self.view.window().run_command('exec', {'cmd': ['nautilus ' + folder_name], 'shell':True}

And the embedded gist:

This script is based entirely on this one for Windows.

So, letting the code be my guide, I present an add-on to Prism.js less than 10 hours after it was released into the wild publicly.

Update: Instead of using the below code-blocks, you can just grab it from my forked repository. The repository has a few other updates and fixes.

The following code snippets can be added into an external .js file or the main prism.js file. The modifications are mainly for testing (read: kinda buggy) and released under the same license Prism itself is.

Add PHP Syntax Highlighting

Prism.languages.php = {
	'comment': {
		pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
		lookbehind: true
	},
	'deliminator': /(\?>|\?&gt;|&lt;\?php|<\?php)/ig,
	'variable': /(\$\w+)\b/ig,
	'string': /("|')(\\?.)*?\1/g,
	'regex': {
		pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
		lookbehind: true
	},
	'keyword': /\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|extends|private|protected|throw)\b/g,
	'function': /\b(abs|acos|acosh|addcslashes|addslashes|array_change_key_case|array_chunk|array_combine|array_count_values|array_diff|array_diff_assoc|array_diff_key|array_diff_uassoc|array_diff_ukey|array_fill|array_filter|array_flip|array_intersect|array_intersect_assoc|array_intersect_key|array_intersect_uassoc|array_intersect_ukey|array_key_exists|array_keys|array_map|array_merge|array_merge_recursive|array_multisort|array_pad|array_pop|array_product|array_push|array_rand|array_reduce|array_reverse|array_search|array_shift|array_slice|array_splice|array_sum|array_udiff|array_udiff_assoc|array_udiff_uassoc|array_uintersect|array_uintersect_assoc|array_uintersect_uassoc|array_unique|array_unshift|array_values|array_walk|array_walk_recursive|atan|atan2|atanh|base64_decode|base64_encode|base_convert|basename|bcadd|bccomp|bcdiv|bcmod|bcmul|bindec|bindtextdomain|bzclose|bzcompress|bzdecompress|bzerrno|bzerror|bzerrstr|bzflush|bzopen|bzread|bzwrite|ceil|chdir|checkdate|checkdnsrr|chgrp|chmod|chop|chown|chr|chroot|chunk_split|class_exists|closedir|closelog|copy|cos|cosh|count|count_chars|date|decbin|dechex|decoct|deg2rad|delete|ebcdic2ascii|echo|empty|end|ereg|ereg_replace|eregi|eregi_replace|error_log|error_reporting|escapeshellarg|escapeshellcmd|eval|exec|exit|exp|explode|extension_loaded|feof|fflush|fgetc|fgetcsv|fgets|fgetss|file_exists|file_get_contents|file_put_contents|fileatime|filectime|filegroup|fileinode|filemtime|fileowner|fileperms|filesize|filetype|floatval|flock|floor|flush|fmod|fnmatch|fopen|fpassthru|fprintf|fputcsv|fputs|fread|fscanf|fseek|fsockopen|fstat|ftell|ftok|getallheaders|getcwd|getdate|getenv|gethostbyaddr|gethostbyname|gethostbynamel|getimagesize|getlastmod|getmxrr|getmygid|getmyinode|getmypid|getmyuid|getopt|getprotobyname|getprotobynumber|getrandmax|getrusage|getservbyname|getservbyport|gettext|gettimeofday|gettype|glob|gmdate|gmmktime|ini_alter|ini_get|ini_get_all|ini_restore|ini_set|interface_exists|intval|ip2long|is_a|is_array|is_bool|is_callable|is_dir|is_double|is_executable|is_file|is_finite|is_float|is_infinite|is_int|is_integer|is_link|is_long|is_nan|is_null|is_numeric|is_object|is_readable|is_real|is_resource|is_scalar|is_soap_fault|is_string|is_subclass_of|is_uploaded_file|is_writable|is_writeable|mkdir|mktime|nl2br|parse_ini_file|parse_str|parse_url|passthru|pathinfo|readlink|realpath|rewind|rewinddir|rmdir|round|str_ireplace|str_pad|str_repeat|str_replace|str_rot13|str_shuffle|str_split|str_word_count|strcasecmp|strchr|strcmp|strcoll|strcspn|strftime|strip_tags|stripcslashes|stripos|stripslashes|stristr|strlen|strnatcasecmp|strnatcmp|strncasecmp|strncmp|strpbrk|strpos|strptime|strrchr|strrev|strripos|strrpos|strspn|strstr|strtok|strtolower|strtotime|strtoupper|strtr|strval|substr|substr_compare)\b/g,
	'constant': /\b(__FILE__|__LINE__|__METHOD__|__FUNCTION__|__CLASS__)\b/g,
	'boolean': /\b(true|false)\b/g,
	'number': /\b-?(0x)?\d*\.?\d+\b/g,
	'operator': /[-+]{1,2}|!|=?\<|=?\>;|={1,2}(?!>)|(\&){1,2}|\|?\||\?|\*|\//g,
	'punctuation': /[{}[\];(),.:]/g
};

Allow embedded HTML in PHP

if (Prism.languages.markup) {
	Prism.languages.insertBefore('php', 'comment', {
		'markup': {
			pattern: /(\?>|\?&gt;)[\w\W]*?(?=(&lt;\?php|<\?php))/ig,
			lookbehind : true,
			inside: {
				'markup': {
					pattern: /&lt;\/?[\w:-]+\s*[\w\W]*?&gt;/gi,
					inside: Prism.languages.markup.tag.inside
				},
				rest: Prism.languages.php
			}
		}
	});
}

NOTES / Warnings

This code adds several new language elements named: function, keyword, variable and constant that have no CSS attributed to them, so use this CSS somewhere.

.token.function, .token.constant {
	color: #07a;
}
.token.variable {
	color: #e90;
}

.token.deliminator {
	font-weight:bold;
}

This code has NOT been heavily tested, but has been run successfully against the following block of code:

/**
			Sample Block. 
			Author: Aaron Harun
			URL: http://aaron.md, http://aahacreative.com
		**/
    if(__FILE__){
        $explicitive = ($happyandyouknowit == false) ? ':(' : '! =D';
        // Stick in some HTML. 
        ?>
        	&ltstrong>Why,&lt/strong>
        &lt?php
        echo 'hello ' . "world" . addslashes($explicitive);
    }

It doesn’t cover PHP embedded in HTML yet, but it seems very easy to do. The Repository version has it.

And finally, Prism.js is not running on this site, yet. I’ll have to integrate it into WP before that’s possible. Integrated with WP. Booyah.

To add EXT4 (etc) partitions to Picasa under windows:

1) Mount your EXT2, EXT3 or Ext 4 partition under windows.

2) Network share the partition.

3) Browse your network shares and Map a drive letter to the shared partition.

4) Add the Network Share to Picasa.

See the Demo

The demo is made of three snippets:

The HTML:

<div id="demo">
<p>All of these lines will have different font sizes.</p>
<p>This is because we have set the white-space property of the p tags to "pre."</p>
<p>This means that these lines won't wrap, and because they won't ever wrap, when the page loads,</p>
<p>The JS will attempt to fit the spans inside the p tags. Of course, this could be done with p tags inside of divs.</p>
</div>

The CSS:

#demo p{
white-space:pre;
}
#demo {
width:600px;
}

And the JS magic that fits a span into every p tag and then scales the font by percents.

<script type="text/javascript">
jQuery("#demo p")
    .contents()
    .filter(
        function(){
            return this.nodeType != 1; 
        })
    .wrap("<span/>").parent().each(
	function(){
		var size = 100;
		while(jQuery(this).parent().width() < jQuery(this).width() && size > 5){
			size -= 1;
			jQuery(this).css({'font-size' : size+'%'});
		}
	}
);

</script>

Even more importantly, inline JS is never run when embedded <script> tags are used with the innerHTML command. The following JavaScript function fixes both problems by eval’ing the content of the <script> tags and replacing the default document.write with a new function that replaces the inline JS with the output of the document.write function.

The Code

function executeJS(i){ // Pass an element ID to the function.

	var e = document.getElementById(i); 
	var Reg = '(?:<script.*?>)((\n|.)*?)(?:</script>)'; //Regex for all content between <script> tags.
	var match    = new RegExp(Reg, 'img');
	var scripts  = e.innerHTML.match(match);

	var doc = document.write; // Store the functionality of document.write temporarily.
	//Overwrite document.write with a new function that takes the innerHTML of the passed element
	//then replaces the <script> tag with the output of the passed content.
	document.write = function(p){ e.innerHTML = e.innerHTML.replace(scripts[s],p)};

	if(scripts) { //if matches
		for(var s = 0; s < scripts.length; s++) { //loop through matches
			var js = '';
			var match = new RegExp(Reg, 'im'); //find first match
			js = scripts[s].match(match)[1]; //inner content of the first match
			eval('try{'+js+'}catch(e){}'); //evaluate the inline JS.
		}

	}

	document.write = doc; //Reset document.write back to its original functionality

}

This example function only outputs the first document.write in a script block, so if you require more than one in your embedded JS, it is trivial to store the output content as a variable.

The Code

function unstrip_array($array){
	foreach($array as &$val){
		if(is_array($val)){
			$val = unstrip_array($val);
		}else{
			$val = stripslashes($val);
		}
	}
return $array;
}

Why would I need to unstrip an entire array?

It’s useful for WordPress Plugin developers or anyone whose scripts might be run on a server with magic quotes enabled. It is also excellent to strip any slashes from $_POST inputs that might confuse your attempts to escape the strings later. Running an array of post data through this will make it easier to ensure that you don’t have hacking attempts.

Why shouldn’t you define the element type?

So even though popular opinion says yes, the real answer is an emphatic no. You should never supply parent elements or element types when defining the ID of an element. Why? The ID of an element is supposed to be unique. While sometimes bad programing styles or unfriendly widgets can cause problems, the ID should always be unique, so there is only one #content_box and it is always going to be a textarea.

What’s the difference?

If you have read the longer post on profiling jQuery, you’ll notice that the fastest method to find any element is to call the #ID of the element directly. Any other call requires jQuery calling Sizzle and parsing the string.

If you use just the ID of an element, it won’t need to load sizzle and can grab it immediately using the built in JS function getElementById('content_box');. The difference of these two expressions is staggering and as my post on profiling JavaScript demonstrated, the difference is an order of magnitude.

I answered this basic question on StackOverflow just from my experience without reading the jQuery source or performing benchmarks. I was actually surprised that not only was my order correct, but also that jQuery functioned much as I expected it to under the hood. The images and explanations are directly from my answer on StackOverflow. All of the benchmark tests can be run from jsFiddle, but wait a bit before you try it out.

All Descendant Selectors in jQuery

Our methods:

1. $(".child", $("#parent")); (by using a scope)
2. $("#parent").find(".child"); (the find() method)
3. $("#parent").children(".child"); (For immediate children, I use this a lot)
4. $("#parent > .child"); (via CSS selector)
5. $("#parent .child");

Ranking the jQuery Selectors

Using a Scope and Find

$(".child", $("#parent")) and $("#parent").find(".child") are identical with the only difference is that method 1 needs to parse the scope passed and translate it to a call to $parent.find(".child").show();.

Let’s take a look into the source to see why this is,

jQuery.fn = jQuery.prototype = {
	init: function( selector, context ) {
	// Handle HTML strings
		if ( typeof selector === "string" ) {
			if ( match && (match[1] || !context) ) {
			[...]
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return jQuery( context ).find( selector );
			}

The jQuery source tells us two things:

1) method 1 and method 2 are exactly equivalent. If anything, method 2 will be slightly faster.

2) Any other method will be slower because of the large block of if...else statements I removed. Parts of the code will show up later, but basically, if the passed element isn’t an ID and there is no context passed, jQuery has to use regex to try and understand it.

Why you should never use CSS text selectors

$("#parent > .child"); and $("#parent .child"); both need to parse the selector and then just call: $('#parent').children().filter('.child') and $('#parent').filter('.child') respectively.

I never researched it, so didn’t know exactly why this was, but I recently saw this video by Paul Irish where he explains why it takes longer to process this. The answer is long and technical, but the lines I clipped from the jQuery source above basically just look to see if an #id is passed and then grabs that element directly.

When you have a longer CSS selector like $("#parent > .child") jQuery has to load “Sizzle” which is a large and fairly slow CSS-based selectors library. A separate download of Sizzle is only 4KB, but it starts with this beautiful REGEX:

var chunker = 
/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g

Yipes! Chunker is a bit more like clunker if you ask me.

A Quick Note on Using .children() versus .find()

Finally, method 3 will always be the fastest because it uses .children() to do the least amount of work and uses the most direct method to get first-level children.

Profiling the Selectors, Speed test

The difference in perforamnce in the different browsers is staggering. The calculations are in computations per second, so the higher the number, the faster the selector is.

On Chrome, Method 3 is the best then method 1/2 and then 4/5

On Firefox, Method 3 is still best then method 1/2 and then 4/5

On Opera, Method 3 is still best then method 4/5 and then 1/2

On IE 8, while slower overall than other browsers, it still follows the Method 3, 1,2,4,5 ordering.

Overall, method 3 is the overall best method to use as it is called directly and it doesn’t need to traverse more than one level of child elements unlike method 1/2 and it doesn’t need to be parsed like method 4/5

Though, keep in mind that in some of these we are comparing apples to oranges as Method 5 looks at all children instead of first-level ones.

Finally, if you want to read all about profiling and perfomance in jQuery check out this slideshow by Paul Irish. It’s a very useful read if you are just starting to learn how to optimize your jQuery.

The Code

$escapes = array('.','$','^','[',']','?','+','(',')','*','|','\\');

foreach($escapes as $s){
	$r = "\\\\$s";
	$myregexbase = str_replace($s, stripslashes($r), $myregexbase);
}

It’s usage

So what sort of time would you need this script you ask? Suppose, for example, you have a dynamic list of words that need to be replaced in a block of text. Now, you don’t want to replace partial matches (“cat” should not be replaced in the word “catch”), so you need to merge the list of $words with the compete regex.

$escapes = array('.','$','^','[',']','?','+','(',')','*','|','\\');

foreach($escapes as $s){
	$r = stripslashes("\\\\$s");
	$name = str_replace($s, $r, $name);
} 
$needle = '@([^a-zA-Z0-9])('.$name.')([^&a-zA-Z0-9])@';

Why can’t you use a single slash?

The problem is that if you use a single slash it will escape the quote is it wrapped in the problem is with the line $r = "\\\\$s";. If you try to use single quotes around the string, $s is not parsed correctly. If you use $r = '\\\\'.$s; it works fine, but there is no real benefit.

Why the stripslashes? Why not just use $r = '\\'.$s;? Again, it’s a problem with a collision between the generated regular expression and PHP. When you replace the character, the \\ will be taken as a literal \\ rather than an escaped \, so the outputs in the regular expression will interpret the backslash escaped rather than the character that was supposed to be escaped.

Why not use a different hack?

Sure you could use $r = trim('\ ').$s;, but it still just a hack, and it is even less understandable. The one benefit of using \\\\ with stripslashes is that it is easy to understand what is happening. Extra backslashes have been added. They are going to be stripped away. While the actual output might not be entirely clear, the solution is understandable in that the extra slashes are being removed. Overall, the problem is kinda crazy, and the solution is even crazier and makes no sense but it works.