<?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>Frugle</title>
	<atom:link href="http://frugle.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://frugle.com</link>
	<description>Where development happens</description>
	<lastBuildDate>Sat, 14 Apr 2012 22:17:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Setting up GitHub with PHP and PhpStorm</title>
		<link>http://frugle.com/2012/04/setting-up-github-with-php-and-phpstorm/</link>
		<comments>http://frugle.com/2012/04/setting-up-github-with-php-and-phpstorm/#comments</comments>
		<pubDate>Sat, 14 Apr 2012 22:08:39 +0000</pubDate>
		<dc:creator>Richard</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[ide]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php-storm]]></category>

		<guid isPermaLink="false">http://frugle.com/?p=61</guid>
		<description><![CDATA[&#160; Let&#8217;s begin where every developer starts, getting something to work locally. Instead of the typical install and and phpinfo check, let&#8217;s setup a actual production style environment. PHP Locally It&#8217;s trivial how setting up a PHP install has become these days. While there are a number of choices from BitNami stacks to MAMP. For [...]]]></description>
			<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="LessonContent">
<div class="LessonSummary">
<p>Let&#8217;s begin where every developer starts, getting something to work locally. Instead of the typical install and and phpinfo check, let&#8217;s setup a actual production style environment.</p>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">PHP Locally</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334117460900.png" alt="media_1334117460900.png" width="540" height="397" /></div>
<div class="StepInstructions">
<p>It&#8217;s trivial how setting up a PHP install has become these days. While there are a number of choices from <a href="http://bitnami.org/" target="_blank">BitNami</a> stacks to <a href="http://www.mamp.info/en/index.html" target="_blank">MAMP</a>. For Windows or Linux users looking for a one step setup, there is <a href="http://www.apachefriends.org/en/index.html" target="_blank">XAMPP</a>. Since I work off OSX, I&#8217;m going to download and setup <a href="http://www.mamp.info/en/index.html" target="_blank">MAMP</a>.</p>
<p><span id="more-61"></span></p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Setting Up MAMP Ports</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334121702253.png" alt="media_1334121702253.png" width="424" height="351" /></div>
<div class="StepInstructions">
<p>There are a few simple configuration options that you will want to do to make your development environment closer to your production environment. Let&#8217;s <strong>first change the port to 80</strong>. This will let us use http://localhost/ without adding :8888 to the end of our urls.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Setting Up Apache Root</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334122008061.png" alt="media_1334122008061.png" width="425" height="349" /></div>
<div class="StepInstructions">
<p>Also, to ease up navigating to your site root, switch to Apache and set the Document Root to ~/Sites/. On Lion and Mountain Lion fresh installs, you will need to create this folder. Click ok and Apache and MySQL will restart.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Download your IDE</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334123423352.png" alt="media_1334123423352.png" width="540" height="211" /></div>
<div class="StepInstructions">
<p>I don&#8217;t want to bore you here with a long speal about why I choose to use <a href="http://www.jetbrains.com/phpstorm/" target="_blank">PhpStorm</a>. Heck, just a few months ago I was a die hard <a href="http://www.panic.com/coda/" target="_blank">Coda</a> fan. For a quick PHP editor, it&#8217;s really great. However, there were a few times working on a production machine where it failed during a upload and overwrote my file with a blank file to the server before crashing. After this happens a few times it&#8217;s time to reconsider your IDE. So for quick and dirty edits, I turn to <a href="http://www.sublimetext.com/2" target="_blank">Sublime Text</a>, but for larger projects I like the features found in <a href="http://confluence.jetbrains.net/display/WI/Web+IDE+EAP" target="_blank">PhpStorm</a>.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Setting up GitHub</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334124077168.png" alt="media_1334124077168.png" width="540" height="322" /></div>
<div class="StepInstructions">
<p>GitHub for development is really amazing. It sure beats using svn and really incrases workflow across multiple people. Even if you are a single developer, you can get some great benefits from using <a href="https://github.com/plans" target="_blank">GitHub</a>. It&#8217;s free if you want your repos public, which for most code branches works fine, but if you&#8217;re working for a client or comapny, you will probably want to fork over the few bucks for the private ones.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Create a Repository</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334124280564.png" alt="media_1334124280564.png" width="540" height="413" /></div>
<div class="StepInstructions">
<p>Just enter your text here to create your project.</p>
</div>
</div>
<div class="LessonStep top">
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334124386508.png" alt="media_1334124386508.png" width="540" height="279" /></div>
<div class="StepInstructions">
<p>You can now follow these steps or download a GIT GUI. One I found recently was <a href="http://itunes.apple.com/us/app/sourcetree-git-hg/id411678673?mt=12" target="_blank">SourceTree</a> for Mac, which is free on the AppStore.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Setting Up Our Project</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334440733850.png" alt="media_1334440733850.png" width="540" height="76" /></div>
<div class="StepInstructions">
<p>Now let&#8217;s add our repository from github to our local machine. Click Hosted Projects.</p>
</div>
</div>
<div class="LessonStep top">
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334440842832.png" alt="media_1334440842832.png" width="540" height="131" /></div>
<div class="StepInstructions">
<p>Next select the project we just created and simply double click it. Thene select the specified path we setup earlier.</p>
</div>
</div>
<div class="LessonStep top">
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334440925624.png" alt="media_1334440925624.png" width="540" height="58" /></div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">GitHub Status</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334441192369.png" alt="media_1334441192369.png" width="540" height="380" /></div>
<div class="StepInstructions">
<p>Now we are ready to start working on our project. Let&#8217;s start with a simple &#8220;Hello World&#8221; in PHP. This will update our GUI to show that we have edited this file. Now save your PHP file and click Commit.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Commit</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334441301320.png" alt="media_1334441301320.png" width="540" height="423" /></div>
<div class="StepInstructions">
<p>Now you will see all of your changes in the &#8220;Files in the working tree&#8221;. We can either select to Commit changes staged in the index. This requries us to click each file that we&#8217;ve modified and select &#8220;Stage File&#8221; or we can change the Commit mode to &#8220;Commit all changes from selected files in the working tree.</p>
</div>
</div>
<div class="LessonStep top">
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334441452452.png" alt="media_1334441452452.png" width="540" height="421" /></div>
<div class="StepInstructions">
<p>Now we are ready to commit our changes to the files.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Pushing to GitHub</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334441544809.png" alt="media_1334441544809.png" width="540" height="146" /></div>
<div class="StepInstructions">
<p>Now let&#8217;s push our commit to GitHub. Click master under branches and the you will see your latest commit. Select it and click Push.</p>
</div>
</div>
<div class="LessonStep top">
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334441589971.png" alt="media_1334441589971.png" width="540" height="221" /></div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Verify the push</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334441669570.png" alt="media_1334441669570.png" width="540" height="62" /></div>
<div class="StepInstructions">
<p>Now lets goto GitHub and check the status of our repository. You should see the message gone and now it should be showing you the index.php file that we pushed.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">PhpStorm&#8217;s git integration</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334442006975.png" alt="media_1334442006975.png" width="540" height="216" /></div>
<div class="StepInstructions">
<p>While we can do all of the features above in PHP Storm itself, it&#8217;s GUI for doing so is a bit confusing and not all that friendly. However, it is great to be able to monitor changes to our files and it uses color coding to show files which have yet to be committed.</p>
</div>
</div>
<div class="LessonStep top">
<h3 class="StepTitle">Wrapping Up</h3>
<div class="StepImage"><img src="http://frugle.com/wp-content/uploads/2012/04/media_1334442125945.png" alt="media_1334442125945.png" width="540" height="573" /></div>
<div class="StepInstructions">
<p>This is part one of a three part tutorial. Stay tuned for the next part where we look at setting up our live server to automatically pull down changes from GitHub when we do a push from our localhost.</p>
</div>
</div>
<div class="LessonStep top"></div>
</div>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://frugle.com/2012/04/setting-up-github-with-php-and-phpstorm/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Theme Twitter Bootstrap</title>
		<link>http://frugle.com/2012/04/theme-twitter-bootstrap/</link>
		<comments>http://frugle.com/2012/04/theme-twitter-bootstrap/#comments</comments>
		<pubDate>Sat, 14 Apr 2012 05:05:04 +0000</pubDate>
		<dc:creator>Richard</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Twitter Bootstrap]]></category>

		<guid isPermaLink="false">http://frugle.com/?p=41</guid>
		<description><![CDATA[Introduced in Twitter Bootstrap 2.0 is a custom download of the CSS framework. This is a big help for developers. In case you haven&#8217;t checked out Bootstrap, you&#8217;re missing out. It&#8217;s a great little framework.  Here&#8217;s the link to the customizer.]]></description>
			<content:encoded><![CDATA[<p>Introduced in <a href="http://twitter.github.com/bootstrap/index.html">Twitter Bootstrap 2.0</a> is a custom download of the CSS framework. This is a big help for developers. In case you haven&#8217;t checked out Bootstrap, you&#8217;re missing out. It&#8217;s a great little framework.  Here&#8217;s the <a href="http://twitter.github.com/bootstrap/download.html#variables">link</a> to the customizer.</p>
]]></content:encoded>
			<wfw:commentRss>http://frugle.com/2012/04/theme-twitter-bootstrap/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Light Table IDE</title>
		<link>http://frugle.com/2012/04/light-table-ide/</link>
		<comments>http://frugle.com/2012/04/light-table-ide/#comments</comments>
		<pubDate>Sat, 14 Apr 2012 04:43:52 +0000</pubDate>
		<dc:creator>Richard</dc:creator>
				<category><![CDATA[IDEs and Code Editors]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[ide]]></category>
		<category><![CDATA[light table]]></category>

		<guid isPermaLink="false">http://frugle.com/?p=35</guid>
		<description><![CDATA[Interesting take on the IDE. It&#8217;s been a while since there was a new take on the IDE, so you gotta hand it to these guys for trying something a bit different. Take a look at the video below. Light Table &#8211; a new IDE from Chris Granger on Vimeo.]]></description>
			<content:encoded><![CDATA[<p>Interesting take on the IDE.  It&#8217;s been a while since there was a new take on the IDE, so you gotta hand it to these guys for trying something a bit different.  Take a look at the video below.</p>
<p><iframe src="http://player.vimeo.com/video/40281991?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p><a href="http://vimeo.com/40281991">Light Table &#8211; a new IDE</a> from <a href="http://vimeo.com/user11261775">Chris Granger</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://frugle.com/2012/04/light-table-ide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Getting Started &#8211; Why Another Web Development Blog</title>
		<link>http://frugle.com/2012/04/getting-started-why-another-web-development-blog/</link>
		<comments>http://frugle.com/2012/04/getting-started-why-another-web-development-blog/#comments</comments>
		<pubDate>Wed, 11 Apr 2012 03:48:27 +0000</pubDate>
		<dc:creator>Richard</dc:creator>
				<category><![CDATA[Thoughts]]></category>

		<guid isPermaLink="false">http://frugle.com/?p=31</guid>
		<description><![CDATA[Being a tech junky, I come across a lot of cool web developer tools, ideas, practices and solutions from a wide variety of sources.  However, in my search, there are very few good blogs that are dedicated to aggregating these sources and providing up-to-date trends on web development.  Most are biased for a certain language, [...]]]></description>
			<content:encoded><![CDATA[<p>Being a tech junky, I come across a lot of cool web developer tools, ideas, practices and solutions from a wide variety of sources.  However, in my search, there are very few good blogs that are dedicated to aggregating these sources and providing up-to-date trends on web development.  Most are biased for a certain language, technology or community.  This blog sets out to try to bring you the unbiased collection of what&#8217;s new with web development, and hopefully show examples of how to use these new tools to help you become a better developer.   Obviously, this is a open-ended conversation, and I hope to find people discussing, and adding new points of view to each topic.</p>
]]></content:encoded>
			<wfw:commentRss>http://frugle.com/2012/04/getting-started-why-another-web-development-blog/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
