<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jorge Pedret &#187; Web Development</title>
	<atom:link href="http://jorgepedret.com/topics/web-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://jorgepedret.com</link>
	<description>Freelance Web Developer + Front End Designer</description>
	<lastBuildDate>Wed, 25 Jan 2012 16:43:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Placeholder text for Gravity Form input elements</title>
		<link>http://jorgepedret.com/web-development/placeholder-text-for-gravity-form-input-elements/</link>
		<comments>http://jorgepedret.com/web-development/placeholder-text-for-gravity-form-input-elements/#comments</comments>
		<pubDate>Wed, 22 Jun 2011 01:55:28 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[gravity forms]]></category>
		<category><![CDATA[placeholder]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[snippet]]></category>
		<category><![CDATA[text]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[wp]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=537</guid>
		<description><![CDATA[Surprisingly GravityForms hasn't implemented the placeholder feature yet. I know they have plans on doing so soon, but we need a solution while we wait for that. I came up with this quick solution using only GF filters and jQuery. Check it out!]]></description>
			<content:encoded><![CDATA[<p>Surprisingly GravityForms hasn&#8217;t implemented the placeholder feature yet. I know they have plans on doing so soon, but we need a solution while we wait for that.</p>
<p>I came up with this quick solution using only GF filters and jQuery.</p>
<div class="woo-sc-box info   ">Get the final code here <a href="https://gist.github.com/65dd05e3efb0fdafa6be">https://gist.github.com/65dd05e3efb0fdafa6be</a> (It&#8217;s easier to read)</div>
<h2>What the editor will look like</h2>
<p><img class="size-full wp-image-538" title="form-editor-screenshot" src="http://jorgepedret.com/wp-content/uploads/2011/06/form-editor-screenshot.png" alt="" width="528" height="718" /></p>
<h2>What the form will look like</h2>
<p><img class="alignnone size-full wp-image-539" title="form-preview-screenshot" src="http://jorgepedret.com/wp-content/uploads/2011/06/form-preview-screenshot.png" alt="" width="613" height="350" /></p>
<h2>The code</h2>
<div class="woo-sc-box info   ">Get the final code here <a href="https://gist.github.com/65dd05e3efb0fdafa6be">https://gist.github.com/65dd05e3efb0fdafa6be</a> (It&#8217;s easier to read)</div>
<h3>Add the placeholder option to the editor</h3>
<pre class="brush: php; title: ; notranslate">
/* In the functions.php file */
/* Add a custom field to the field editor (See editor screenshot) */
add_action(&quot;gform_field_standard_settings&quot;, &quot;my_standard_settings&quot;, 10, 2);
function my_standard_settings($position, $form_id){
	// Create settings on position 25 (right after Field Label)
	if($position == 25){
		?&gt;
		&lt;li class=&quot;admin_label_setting field_setting&quot; style=&quot;display: list-item; &quot;&gt;
			&lt;label for=&quot;field_placeholder&quot;&gt;Placeholder Text
				&lt;!-- Tooltip to help users understand what this field does --&gt;
				&lt;a href=&quot;javascript:void(0);&quot; class=&quot;tooltip tooltip_form_field_placeholder&quot; tooltip=&quot;&amp;lt;h6&amp;gt;Placeholder&amp;lt;/h6&amp;gt;Enter the placeholder/default text for this field.&quot;&gt;(?)&lt;/a&gt;
			&lt;/label&gt;
			&lt;input type=&quot;text&quot; id=&quot;field_placeholder&quot; class=&quot;fieldwidth-3&quot; size=&quot;35&quot; onkeyup=&quot;SetFieldProperty('placeholder', this.value);&quot;&gt;
		&lt;/li&gt;
		&lt;?php
	}
}

/* Now we execute some javascript technicalitites for the field to load correctly */
add_action(&quot;gform_editor_js&quot;, &quot;my_gform_editor_js&quot;);
function my_gform_editor_js(){
	?&gt;
	&lt;script&gt;
		//binding to the load field settings event to initialize the checkbox
		jQuery(document).bind(&quot;gform_load_field_settings&quot;, function(event, field, form){
			jQuery(&quot;#field_placeholder&quot;).val(field[&quot;placeholder&quot;]);
		});
	&lt;/script&gt;
	&lt;?php
}
</pre>
<h3>Use jQuery to inject the placeholder value to the fields</h3>
<pre class="brush: php; title: ; notranslate">
/* In the functions.php file */
/* We use jQuery to read the placeholder value and inject it to its field */
add_action('gform_enqueue_scripts',&quot;my_gform_enqueue_scripts&quot;, 10, 2);
function my_gform_enqueue_scripts($form, $is_ajax=false){
	?&gt;
	&lt;script&gt;
	jQuery(function(){
		&lt;?php
		/* Go through each one of the form fields */
		foreach($form['fields'] as $i=&gt;$field){
			/* Check if the field has an assigned placeholder */
			if(isset($field['placeholder']) &amp;&amp; !empty($field['placeholder'])){
				/* If a placeholder text exists, inject it as a new property to the field using jQuery */
				?&gt;
				jQuery('#input_&lt;?php echo $form['id']?&gt;_&lt;?php echo $field['id']?&gt;').attr('placeholder','&lt;?php echo $field['placeholder']?&gt;');
				&lt;?php
			}
		}
		?&gt;
	});
	&lt;/script&gt;
	&lt;?php
}
</pre>
<p>That&#8217;s it! take it for a spin and let me know how it goes.</p>
<div class="woo-sc-box info   ">Get the final code here <a href="https://gist.github.com/65dd05e3efb0fdafa6be">https://gist.github.com/65dd05e3efb0fdafa6be</a> (It&#8217;s easier to read)</div>
<h2>Issues</h2>
<p>Right now it only works with single lines, textareas and the other simple fields. But that&#8217;s usually the only places where you will ever need them.</p>
<h2>Internet Explorer support update</h2>
<p><a href="http://askwpgirl.com/">Angela Bowma</a> wrote a post with a <a href="http://askwpgirl.com/gravity-forms-placeholder-text-works-with-ie/">solution that works in Internet Explorer</a> or browsers that don&#8217;t support the placeholder property.</p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/placeholder-text-for-gravity-form-input-elements/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Get pages by template name in WordPress</title>
		<link>http://jorgepedret.com/web-development/get-pages-by-template-name-in-wordpress/</link>
		<comments>http://jorgepedret.com/web-development/get-pages-by-template-name-in-wordpress/#comments</comments>
		<pubDate>Tue, 21 Jun 2011 21:01:37 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[pages]]></category>
		<category><![CDATA[template name]]></category>
		<category><![CDATA[tricks]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[wp]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=535</guid>
		<description><![CDATA[Quick post to show how to retrieve pages by certain custom template. Example of use List all the published pages that use the template &#8220;page-quote.php&#8221;: How does it work? The template assigned to the page is stored as a meta data by the key &#8216;_wp_page_template&#8217;. Using the get_pages() WordPress function, we can ask for the [...]]]></description>
			<content:encoded><![CDATA[<p>Quick post to show how to retrieve pages by certain custom template. </p>
<pre class="brush: php; title: ; notranslate">
$pages = get_pages(array(
	'meta_key' =&gt; '_wp_page_template',
	'meta_value' =&gt; '&lt;Insert your template file name here&gt;'
));
</pre>
<h2>Example of use</h2>
<p>List all the published pages that use the template &#8220;page-quote.php&#8221;:</p>
<pre class="brush: php; title: ; notranslate">
$pages = get_pages(array(
	'meta_key' =&gt; '_wp_page_template',
	'meta_value' =&gt; 'page-quote.php'
));
foreach($pages as $page){
	echo $page-&gt;post_title.'&lt;br /&gt;';
}
</pre>
<h2>How does it work?</h2>
<p>The template assigned to the page is stored as a meta data by the key &#8216;_wp_page_template&#8217;. Using the get_pages() WordPress function, we can ask for the page where &#8216;_wp_page_template&#8217; equals our template name.</p>
<h2>More Info</h2>
<p><a href="http://codex.wordpress.org/Function_Reference/get_pages">get_pages() documentation</a></p>
<p>Hope this helps, post a comment if you have any questions.</p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/get-pages-by-template-name-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Accessing the URL hash and parameters using Javascript</title>
		<link>http://jorgepedret.com/web-development/accessing-the-url-hash-and-parameters-using-javascript/</link>
		<comments>http://jorgepedret.com/web-development/accessing-the-url-hash-and-parameters-using-javascript/#comments</comments>
		<pubDate>Mon, 20 Jun 2011 21:27:24 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[access]]></category>
		<category><![CDATA[hash]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[parameter]]></category>
		<category><![CDATA[url]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=526</guid>
		<description><![CDATA[You can access the URL of your page using simple Javascript by using the following code: document.location;]]></description>
			<content:encoded><![CDATA[<p>You can access the URL of your page using simple Javascript by using the following code:</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script&gt;
my_url_object = document.location;
&lt;/script&gt;
</pre>
<p>That code yields out something like this in Chrome&#8217;s Javascript console:</p>
<p><a href="http://jorgepedret.com/wp-content/uploads/2011/06/Screen-shot-2011-06-20-at-2.10.39-PM.png"><img class="size-full wp-image-527 alignnone" title="document.location in Chrome's JS Console" src="http://jorgepedret.com/wp-content/uploads/2011/06/Screen-shot-2011-06-20-at-2.10.39-PM.png" alt="document.location in Chrome's JS Console" width="526" height="235" /></a></p>
<h2>Example of use:</h2>
<p>You can show certain section of your code depending on a hash tag in the URL:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;div id=&quot;section-1&quot; class=&quot;section&quot;&gt;Section 1&lt;/div&gt;
&lt;div id=&quot;section-2&quot; class=&quot;section&quot;&gt;Section 2&lt;/div&gt;
&lt;script&gt;
$(function(){
	// Get the hash parameter from the URL.
	active_section = document.location.hash;
	// Hide ALL the sections
	$('.section').css('display','none');
	// Show the section specified in the URL
	// The URL can be:
	// - http://localhost/example/index.html#section-1 , or
	// - http://localhost/example/index.html#section-2
	$(active_section).css('display','block');
});
&lt;/script&gt;
</pre>
<p>Post a comment if you need help! <img src='http://jorgepedret.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/accessing-the-url-hash-and-parameters-using-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Resizing WordPress Images with AJAX Thumbnail Rebuild</title>
		<link>http://jorgepedret.com/web-development/resizing-wordpress-images-with-ajax-thumbnail-rebuild/</link>
		<comments>http://jorgepedret.com/web-development/resizing-wordpress-images-with-ajax-thumbnail-rebuild/#comments</comments>
		<pubDate>Sun, 29 May 2011 21:32:39 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[add_image_size]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[howto]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[pictures]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[resizing]]></category>
		<category><![CDATA[the_post_thumbnail]]></category>
		<category><![CDATA[thumbnail]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=436</guid>
		<description><![CDATA[This is a quick post on how to resize images from WordPress media library after they&#8217;ve been uploaded. What&#8217;s the current problem? Once you&#8217;ve uploaded images to the media library, it&#8217;s impossible to resize them to the new sizes that you&#8217;ve added using add_image_size() function. How does AJAX Thumbnail Rebuild solves the problem? Although the [...]]]></description>
			<content:encoded><![CDATA[<p>This is a quick post on how to resize images from WordPress media library after they&#8217;ve been uploaded.</p>
<div class="woo-sc-box note   ">
<h3>In a rush?</h3>
<ol>
<li>Download and install the <a href="http://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/">AJAX Thumbnail Rebuild</a> plugin on your WordPress site</li>
<li>Go to &#8220;Tools &gt; Rebuild Thumbnails&#8221; and follow the steps</li>
</ol>
</div>
<h3>What&#8217;s the current problem?</h3>
<p>Once you&#8217;ve uploaded images to the media library, it&#8217;s impossible to resize them to the new sizes that you&#8217;ve added using <a href="http://codex.wordpress.org/Function_Reference/add_image_size">add_image_size()</a> function.</p>
<h3>How does AJAX Thumbnail Rebuild solves the problem?</h3>
<p>Although the name is a little bit misleading, ATR (AJAX Thumbnail Rebuild) goes through all the images that you have uploaded before and creates the new image sizes that you&#8217;ve added using the add_image_size() function.</p>
<p><small>Other similar plugins used to do all this process in the backend, which often timed out for large image libraries. That&#8217;s where ATR came up with a way to do it using AJAX and that&#8217;s why the plugin name is AJAX Thumbnail Rebuild.</small></p>
<h3>How to use it?</h3>
<p><a href="http://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/"><img class="alignnone size-medium wp-image-447" title="AJAX Thumbnail Rebuild Screenshot" src="http://jorgepedret.com/wp-content/uploads/2011/05/screenshot-1-562x294.jpg" alt="AJAX Thumbnail Rebuild Screenshot" width="562" height="294" /></a></p>
<ol>
<li>Add the image sizes that you&#8217;re going to use across your site using <a href="http://codex.wordpress.org/Function_Reference/add_image_size">add_image_sizes()</a> WordPress function</li>
<li>Download and install the <a href="http://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/">AJAX Thumbnail Rebuild</a> plugin on your WordPress site</li>
<li>Go to &#8220;Tools &gt; Rebuild Thumbnails&#8221;</li>
<li>Select the thumbnail sizes that you want to re-generate and click &#8220;Regenerate all Thumbnails&#8221;</li>
</ol>
<p>This is a great plugin and its functionality should really be considered to be included in WordPress.</p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/resizing-wordpress-images-with-ajax-thumbnail-rebuild/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Communicating the UX Value Proposition</title>
		<link>http://jorgepedret.com/web-development/communicating-the-ux-value-proposition/</link>
		<comments>http://jorgepedret.com/web-development/communicating-the-ux-value-proposition/#comments</comments>
		<pubDate>Fri, 06 May 2011 21:35:00 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[clients]]></category>
		<category><![CDATA[communicate]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[project]]></category>
		<category><![CDATA[resources]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[uxmag]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/web-development/communicating-the-ux-value-proposition/</guid>
		<description><![CDATA[UX Mag article that shows you how to calculate and communicate the value of your next UX project]]></description>
			<content:encoded><![CDATA[<p>UX Mag article that shows you how to calculate and communicate the value of your next UX project</p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/communicating-the-ux-value-proposition/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Slides from Ray Villalobos for &#8220;HTML5 &amp; CSS3 WordPress Integration&#8221;</title>
		<link>http://jorgepedret.com/web-development/slides-from-ray-villalobos-for-html5-css3-wordpress-integration/</link>
		<comments>http://jorgepedret.com/web-development/slides-from-ray-villalobos-for-html5-css3-wordpress-integration/#comments</comments>
		<pubDate>Fri, 06 May 2011 16:52:58 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[integration]]></category>
		<category><![CDATA[wcdev html5]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=388</guid>
		<description><![CDATA[Slides from Ray Villalobos for "HTML5 &#038; CSS3 Wordpress Integration", presented in "WordCamp: Developers" on May 5th, 2011. Contact Ray Villalobos: @planetoftheweb, http://planetoftheweb.com/]]></description>
			<content:encoded><![CDATA[<p>Slides from Ray Villalobos for &#8220;HTML5 &amp; CSS3 WordPress Integration&#8221;, presented in &#8220;WordCamp: Developers&#8221; on May 5th, 2011.</p>
<h2>Contact Ray Villalobos</h2>
<p><a href="https://twitter.com/planetoftheweb">@planetoftheweb</a><br />
<a href="http://planetoftheweb.com/">http://planetoftheweb.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/slides-from-ray-villalobos-for-html5-css3-wordpress-integration/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>My Notes for &#8220;Strangest WordPress Project&#8221;</title>
		<link>http://jorgepedret.com/web-development/my-notes-for-strangest-wordpress-project/</link>
		<comments>http://jorgepedret.com/web-development/my-notes-for-strangest-wordpress-project/#comments</comments>
		<pubDate>Fri, 06 May 2011 04:02:37 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[6q]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[project management]]></category>
		<category><![CDATA[wcdev]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=378</guid>
		<description><![CDATA[Mark Reale &#38; John Oswald gave a very creative and funny presentation, describing a very interesting cutting-edge project they worked on. Although, I wasn&#8217;t a big fan of the website, I admire the work and thought that was put into it and its development. It was also an excellent learning experience to see the workflow [...]]]></description>
			<content:encoded><![CDATA[<p>Mark Reale &amp; John Oswald gave a very creative and funny presentation, describing a very interesting cutting-edge project they worked on.</p>
<p>Although, I wasn&#8217;t a big fan of the website, I admire the work and thought that was put into it and its development. It was also an excellent learning experience to see the workflow of the project</p>
<p>Check out their site here: <a href="http://6q.com/">http://6q.com/</a></p>
<h2>Quotes</h2>
<div class="woo-sc-quote"><p>I introduce you to Mark Reale who is going to introduce me — John Oswald</p></div>
<div class="woo-sc-quote"><p>It doesn&#8217;t want to stay up! — John Oswald</p></div>
<div class="woo-sc-quote"><p>It only has to work on the best browser available — Mark Reale</p></div>
<h2>Links</h2>
<p><a href="http://6q.com/">6q</a> — The site that they developed</p>
<p><a href="http://popplet.com/">Popplet</a> — The application with the big diagram that Mark was using the explain the project process</p>
<p><a href="http://wwwwwwwww.jodi.org/">wwwwwwwww.jodi.org/</a> — Just check out that page source code <img src='http://jorgepedret.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p><del>I can&#8217;t remember what was the other link that they showed with the funky flash animations. If you remember it, please post it in the comments <img src='http://jorgepedret.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </del></p>
<p><a rel="nofollow" href="http://daxo.de/">http://daxo.de</a> — Creative flash site with funky animations (Thanks to Priscille for sending the URL)</p>
<h2>Contact Mark Reale</h2>
<p><a href="http://twitter.com/markreale">@markreale</a><br />
<a href="http://markreale.net/">http://markreale.net/</a> — Haha, love his website picture</p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/my-notes-for-strangest-wordpress-project/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>My Notes for &#8220;Javascript &amp; WordPress&#8221;</title>
		<link>http://jorgepedret.com/web-development/my-notes-for-javascript-wordpress/</link>
		<comments>http://jorgepedret.com/web-development/my-notes-for-javascript-wordpress/#comments</comments>
		<pubDate>Thu, 05 May 2011 21:26:04 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[libraries]]></category>
		<category><![CDATA[wcdev]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=368</guid>
		<description><![CDATA[Allen Pike packed JavaScript in a 20 minute talk, describing the similarities and differences with other programming languages. Javascript is the most widely deployed language ion the world. People are creating more apps in JavaScript than before because: Computers are faster All the raising JavaScript libraries that standardize and make JS a lot cooler JavaScript and [...]]]></description>
			<content:encoded><![CDATA[<p>Allen Pike packed JavaScript in a 20 minute talk, describing the similarities and differences with other programming languages.</p>
<div class="woo-sc-box normal   ">Download the presentation slides: <a href="http://www.antipode.ca/slides/tackling_js.pdf" class="woo-sc-button  custom medium" style="background:;border-color:"><span class="woo-download">Download</span></a></div>
<p>Javascript is the most widely deployed language ion the world. People are creating more apps in JavaScript than before because:</p>
<ul>
<li>Computers are faster</li>
<li>All the raising JavaScript libraries that standardize and make JS a lot cooler</li>
</ul>
<h3>JavaScript and PHP similarities</h3>
<ul>
<li>Dynamic and loose</li>
<li>C-like syntax</li>
<li>Curly braces</li>
<li>if, else, for, etc.</li>
<li>Garbage collection</li>
<li>Post-web</li>
</ul>
<h3>JavaScript and PHP differences</h3>
<ul>
<li>Everything is an object</li>
<li>Objects and inheritance</li>
<li>Scope and this</li>
</ul>
<h3>Lint</h3>
<ul>
<li>Bad parts are simple mistakes</li>
<li>JSLint, JavaScript Lint, JSHint</li>
<li>Auto lint</li>
</ul>
<h3>WordPress</h3>
<h3><span style="font-size: 13px; font-weight: normal;">The function wp_enque script helps you load common libraries like </span><span style="font-size: 13px; font-weight: normal;">jQuery, Scriptaculous, jQUI, TinyMCE, and it lets let load your own js files. You can also specify if you want your files to load in the footer to optimize loading speed <img src='http://jorgepedret.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> . Thanks <a href="http://twitter.com/apike">@apike</a> for answering my question.</span></h3>
<h3>JavaScript Libaries</h3>
<ul>
<li>DOM (jQuery, Prototype) — Most popular libraries for manipulating the DOM</li>
<li>MVC (Backbone, JSMBC, Spine) — Libraries that helps you write JavaScript in a more organized and MVC way</li>
<li>Everything (ExtJS, YUI, SproutCore)  — They do everything</li>
<li>microjs.com — Recently launched library where you can chose what you want</li>
</ul>
<h3>Debugging JavaScript</h3>
<ul>
<li>console.log(), and console.trace()</li>
<li>stack traces, step debugging</li>
</ul>
<h3>Other resources for learning JavaScript</h3>
<ul>
<li>Learning Advanced JavaScript — <a href="http://ejohn.org/apps/learn/">http://ejohn.org/apps/learn/</a></li>
<li>Douglas Crockford — <a href="http://javascript.crockford.com/">javascript.crockford.com</a></li>
<li>VanJS: — <a href="http://www.meetup.com/vancouver-javascript-developers/">vanjs.com</a></li>
</ul>
<h2>Get in touch with Allen Pike</h2>
<p><a href="http://www.antipode.ca">www.antipode.ca</a><br />
<a href="http://www.steamclocksw.com">www.steamclocksw.com</a><br />
<a href="http://twitter.com/apike">@apike</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/my-notes-for-javascript-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Notes for &#8220;WordPress &amp; E-commerce&#8221;</title>
		<link>http://jorgepedret.com/web-development/notes-for-wordpress-e-commerce/</link>
		<comments>http://jorgepedret.com/web-development/notes-for-wordpress-e-commerce/#comments</comments>
		<pubDate>Thu, 05 May 2011 19:56:19 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[cart66]]></category>
		<category><![CDATA[comparison]]></category>
		<category><![CDATA[ecommerce]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[shopp]]></category>
		<category><![CDATA[wcdev]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[wpec]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=364</guid>
		<description><![CDATA[Justin talked about the main three plugins for WordPress e-commerce: Cart66 Shopp WordPress Ecommerce Shopp http://shopplugin.net/ Pros Very solid plugin, backed up by strong businesses 7 cool widgets Payment gateways integration, you can download additional ones for a small fee Good support for inventory &#38; stock alert Complete shipping modules Supports product variations Promotions Shortcodes for products, categories, etc. [...]]]></description>
			<content:encoded><![CDATA[<p>Justin talked about the main three plugins for WordPress e-commerce:</p>
<ul>
<li>Cart66</li>
<li>Shopp</li>
<li>WordPress Ecommerce</li>
</ul>
<h2>Shopp</h2>
<p><a href="http://shopplugin.net/">http://shopplugin.net/</a></p>
<h3>Pros</h3>
<ul>
<li>Very solid plugin, backed up by strong businesses</li>
<li>7 cool widgets</li>
<li>Payment gateways integration, you can download additional ones for a small fee</li>
<li>Good support for inventory &amp; stock alert</li>
<li>Complete shipping modules</li>
<li>Supports product variations</li>
<li>Promotions</li>
<li>Shortcodes for products, categories, etc.</li>
</ul>
<h3>Cons</h3>
<ul>
<li>Doesn&#8217;t follow coding conventions, they have they&#8217;re own conventions.</li>
<li>Doesn&#8217;t use WordPress features for functionality.</li>
</ul>
<h2>Cart66</h2>
<p><a href="http://cart66.com/">http://cart66.com/</a></p>
<h3>Pros</h3>
<ul>
<li>Support most payment gateways, only pluggin that supports Authorize.net natively</li>
<li>Good inventory management</li>
<li>Complete shipping module</li>
<li>Promotions support</li>
<li>Shortcodes for shopping cart, products, category, etc.</li>
<li>SEO — Automatically integrated with mayor SEO plugins like All-in-one SEO</li>
<li>Very solid documentation and customer service</li>
<li>Great support for digital products</li>
<li>GPL</li>
</ul>
<h3>Cons</h3>
<ul>
<li>Poor implementation for product variations, hard to follow syntax and feels incomplete</li>
<li>They fall behind on the widgets, only comes with one.</li>
<li>Doesn&#8217;t use WordPress features for functionality, has its own code convenctions.</li>
<li>Only 4 filters, so it doesn&#8217;t allow for much customization</li>
<li>Poor Internationalization</li>
<li>Not too many widgets</li>
</ul>
<h2>WPEC (WordPress eCommerce)</h2>
<p><a href="http://wordpress.org/extend/plugins/wp-e-commerce/">http://wordpress.org/extend/plugins/wp-e-commerce/</a></p>
<h3>Pros</h3>
<ul>
<li>Lots of widgets — best seller, recent purchases, categories, child categories, etc.</li>
<li>Payment Gateways — Supports most payment gateways</li>
<li>Good inventory management</li>
<li>Very complete shipping modules</li>
<li>Supports Product Variations</li>
<li>Support Shortcodes</li>
<li>SEO</li>
<li>Used to suck before, but now it&#8217;s getting awesome after 3.8 was launched</li>
<li>Tons of actions and filter (+180) (+200 counting WordPress natives)</li>
<li>Internationalization support, compatible with WordPress native functionality</li>
<li>8 widgets</li>
<li>Great Community</li>
</ul>
<h3>Cons</h3>
<ul>
<li><span style="font-size: 13px; font-weight: normal;">Lots of legacy bloat for backward compatibility</span></li>
</ul>
<h2></h2>
<h2>Contact Justin Sainton</h2>
<p><a href="http://twitter.com/#!/JS_Zao">@JS_Zao</a><br />
<a href="http://zaowebdesign.com/">http://zaowebdesign.com/</a><br />
<a href="office@zaowebdesign.com">office@zaowebdesign.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/notes-for-wordpress-e-commerce/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Notes From &#8220;Extending WordPress Themes Without Plugins&#8221;</title>
		<link>http://jorgepedret.com/web-development/notes-from-extending-wordpress-themes-without-plugins/</link>
		<comments>http://jorgepedret.com/web-development/notes-from-extending-wordpress-themes-without-plugins/#comments</comments>
		<pubDate>Thu, 05 May 2011 18:21:25 +0000</pubDate>
		<dc:creator>Jorge Pedret</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[maps]]></category>
		<category><![CDATA[pluggins]]></category>
		<category><![CDATA[unplugged]]></category>
		<category><![CDATA[wcdev]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://jorgepedret.com/?p=361</guid>
		<description><![CDATA[Cameron advises agains adding pluggins for everything, why? Take ownership of your code, know what your site is really doing Build your own library of code and techniques for future projects &#8220;Make WordPress fo crazy things nobody else has thought of yet&#8221; — Sometimes there isn&#8217;t a plugin that does exactly what you want. Makes [...]]]></description>
			<content:encoded><![CDATA[<p>Cameron advises agains adding pluggins for everything, why?</p>
<ul>
<li>Take ownership of your code, know what your site is really doing</li>
<li>Build your own library of code and techniques for future projects</li>
<li>&#8220;Make WordPress fo crazy things nobody else has thought of yet&#8221; — Sometimes there isn&#8217;t a plugin that does exactly what you want.</li>
<li>Makes a great topic for a WordCamp talk (haha)</li>
</ul>
<h3>Benefits of taking control of your code</h3>
<ul>
<li>Less bloat better performance</li>
<li>Cleaner and simpler HTML/CSS/JS</li>
<li>Plugins can confuse your visitors</li>
</ul>
<h3>Some benefits of using plugins</h3>
<ul>
<li>Not always worth custom coding one-offs</li>
<li>Some pluggins fo offer great functionality out-of-the-box</li>
<li>Budget / Time constraints</li>
<li>Standardization</li>
<li>Upgrade compatibility — Some plugins are ver well maintained and are compatible with newer versions of WP</li>
</ul>
<h3>Examples &amp; Interesting Ideas</h3>
<ul>
<li>Extend WordPress&#8217;s image handling, galleries — This section can be improved a lot. It&#8217;s not intuitive.</li>
<li>AJAX-ify parts of your theme and functions — Using AJAX to load sections of your site, instead of loading everything at the same time.</li>
<li>Integrate a WP site with web services APIs — Integrating WordPress with external services, i.e.: Interacting with a CRM API</li>
</ul>
<h3>The (Image) Slider</h3>
<p>Cameron showed a sample of a slider that he created for one of his clients. Not sure what was his point in showing all his code and the examples. It&#8217;s simple to</p>
<h3>The map</h3>
<p>He showed a 3 cool examples of custom made map applications that he&#8217;d developed in the past. He promised to post links to the examples. (Will update when he does)</p>
<h3>The AJAX</h3>
<p>He ran out of time to talk about AJAX-ify, but he showed some cool examples of posts that load on-the-fly with a modal window.</p>
<p><a href="http://twitter.com/#!/camcavers">Follow Cameron Cavers on Twitter</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jorgepedret.com/web-development/notes-from-extending-wordpress-themes-without-plugins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

