<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/atom10full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:thr="http://purl.org/syndication/thread/1.0" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" xml:lang="en" xml:base="http://opensourcehacker.com/wp-atom.php">
	<title type="text">Open Source Hacker</title>
	<subtitle type="text">Pushing the boundaries of free technology</subtitle>

	<updated>2012-05-16T06:36:48Z</updated>

	<link rel="alternate" type="text/html" href="http://opensourcehacker.com" />
	<id>http://opensourcehacker.com/feed/atom/</id>
	

	<generator uri="http://wordpress.org/" version="3.3.1">WordPress</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/atom+xml" href="http://feeds.feedburner.com/OpenSourceHacker" /><feedburner:info uri="opensourcehacker" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:browserFriendly></feedburner:browserFriendly><entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Never use hard tabs]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/05/13/never-use-hard-tabs/" />
		<id>http://opensourcehacker.com/?p=1951</id>
		<updated>2012-05-13T12:42:44Z</updated>
		<published>2012-05-13T12:16:00Z</published>
		<category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="python" /><category scheme="http://opensourcehacker.com" term="coffeescript" /><category scheme="http://opensourcehacker.com" term="css" /><category scheme="http://opensourcehacker.com" term="hard tabs" /><category scheme="http://opensourcehacker.com" term="java" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="linux" /><category scheme="http://opensourcehacker.com" term="osx" /><category scheme="http://opensourcehacker.com" term="soft tabs" /><category scheme="http://opensourcehacker.com" term="text editor" /><category scheme="http://opensourcehacker.com" term="windows" />		<summary type="html"><![CDATA[As there seems to be some confusion when hard tab characters (ASCII code 9) are appropriate in source code files here is a rule: 1) Never use hard tabs 1. 1) Unless your source code is hard tab sensitive (only &#8230; <a href="http://opensourcehacker.com/2012/05/13/never-use-hard-tabs/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/05/13/never-use-hard-tabs/"><![CDATA[<p>As there seems to be some confusion when <a href="https://en.wikipedia.org/wiki/Tab_key#Tab_characters">hard tab characters (ASCII code 9)</a> are appropriate in source code files here is a rule:</p>
<p><strong>1) Never use hard tabs</strong></p>
<p><strong>1. 1) Unless your source code is hard tab sensitive </strong>(only such format I know is Makefile)</p>
<h2><strong>Reasons not to use hard tabs</strong></h2>
<ul>
<li>Due to legacy, different text editors treat hard tabs different. UNIX text editors prefer hard tab is 8 spaces, Windows text editors and IDEs (Eclipse) prefer that a hard tab is 4 spaces.</li>
<li>The hard tab length agreement between different text editors cannot be reached</li>
<li>The hard tab length agreement between people cannot be reached</li>
<li>Thus, hard tabs may break source code readability and editability if there is more than a single person editing the file. They will open the file in an editor with different tab settings, edit it and next time you open the file it is ruined and all indentations are wrong.</li>
<li>This is even worse on white space sensitive languages (Python, CoffeeScript) as this might actually cause syntax errors or programming logic errors</li>
</ul>
<p>However, you can avoid this problem in the first place if you do indentation using soft tabs (spaces) instead.</p>
<p>Even if you were the single person in the world editing the text file, even you might switch the text editor in some point and accidentally shoot yourself in the leg.</p>
<h2>Using soft tabs for indentation and having no hard tabs should not be a problem because</h2>
<ul>
<li>All text editors can convert tabs to spaces in fly, when editing the file. Please note me if there are commonly used editors, besides Windows Notepad, which doesn&#8217;t do it yet.</li>
<li>Text editors usually have different settings to tab key length and indentation settings. The latter is what you really want to adjust.</li>
</ul>
<h2>Pseudo-arguments for using hard tabs</h2>
<ul>
<li>It makes the file size smaller: you really care about those twenty bytes on our terabyte hard disks?</li>
<li>This one I made up: spaces count toward the file size in web stuff, because visitors download the files. However if those bytes really matter you that much you should be using a minimizer in the first place.</li>
<li>I like them arguments&#8230;: rationale not involved</li>
<li><a href="http://changingminds.org/disciplines/change_management/resistance_change/resistance_change.htm">The change resistance in human nature</a></li>
</ul>
<p>You might have a legacy software project having its legacy style guides. If the project big, e.g. Linux kernel, the switching cost may be very high and not affordable. However, even with this kind of codebase, you can gradually replace hard tabs away.</p>
<h2>Style guides</h2>
<ul>
<li><a href="http://www.python.org/dev/peps/pep-0008/#tabs-or-spaces">Python style guide recommends no hard tabs</a></li>
<li><a href="http://svn.apache.org/repos/asf/shindig/trunk/php/docs/style-guide.html">PHP style guide recommends no hard tabs</a></li>
<li><a href="http://www.javaranch.com/styleLong.jsp">Java style guide recommends no hard tabs</a></li>
<li><a href="http://zoompf.com/blog/2012/04/performance-aspects-of-googles-html-css-style-guide">CSS style guide recommends no hard tabs</a></li>
<li>etc.</li>
</ul>
<h2>Text editors</h2>
<p>If you are a text editor author, make sure your text editor ships with hard tabs turned off by default, especially for whitespace sensitive languages if you vary tab policy by file type.</p>
<p>Note that this blog post, and the situation, could have been avoided if</p>
<ul>
<li>All text editors would have sticked to soft tabs by default</li>
<li>All text editors would have sticked to a hard tab is 8 spaces by default</li>
</ul>
<p>But in some point (when?) someone (who?) decided to make our life little more complex.</p>
<h2>Tools for managing hard tab policy in your software project</h2>
<ul>
<li><a href="http://miohtama.github.com/vvv/tools/expandtabs.html">Catch hard tabs in a git pre-commit hook</a></li>
<li><a href="http://miohtama.github.com/vvv/tools/expandtabs.html">Convert existing source code tree to use soft tabs (spaces) instead of hard tabs</a></li>
</ul>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/05/13/never-use-hard-tabs/#comments" thr:count="16" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/05/13/never-use-hard-tabs/feed/atom/" thr:count="16" />
		<thr:total>16</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Sublime Text 2 tips for Python and web developers]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python-and-web-developers/" />
		<id>http://opensourcehacker.com/?p=1935</id>
		<updated>2012-05-10T23:31:26Z</updated>
		<published>2012-05-10T23:31:26Z</published>
		<category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="python" /><category scheme="http://opensourcehacker.com" term="aptana" /><category scheme="http://opensourcehacker.com" term="codeintel" /><category scheme="http://opensourcehacker.com" term="css" /><category scheme="http://opensourcehacker.com" term="eclipse" /><category scheme="http://opensourcehacker.com" term="git" /><category scheme="http://opensourcehacker.com" term="jshint" /><category scheme="http://opensourcehacker.com" term="linux" /><category scheme="http://opensourcehacker.com" term="osx" /><category scheme="http://opensourcehacker.com" term="package control" /><category scheme="http://opensourcehacker.com" term="pylint" /><category scheme="http://opensourcehacker.com" term="sublime" /><category scheme="http://opensourcehacker.com" term="xml" /><category scheme="http://opensourcehacker.com" term="zope" />		<summary type="html"><![CDATA[Sublime Text 2 is a very powerful text editor which has gained popularity recently &#8211; for good reasons. It is commercial (59 USD). Plenty of power comes from the fact that Sublime has a plug-in framework built in Python. Even &#8230; <a href="http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python-and-web-developers/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python-and-web-developers/"><![CDATA[<p>Sublime Text 2 is a very powerful text editor which has gained popularity recently &#8211; for good reasons. It is commercial (59 USD). Plenty of power comes from the fact that Sublime has a plug-in framework built in Python. Even though the core app remains closed there exist <a href="http://www.sublimetext.com/forum/viewforum.php?f=6">a vibrant plug-in ecosystem around the editor</a>.</p>
<p><em>Note: You can try Sublime for free. It simply gives nagging dialog &#8220;Please buy&#8221; now and then.</em></p>
<p>Here is my collection of tips how I squeezed more power out of the editor. The tips are written from OSX perspective, but should work fine on Linux and Windows too.</p>
<p>I used to be Aptana Studio (Eclipse) junkie. Even though Sublime does not have all the GUI power of Aptana (<a href="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/">e.g. see the end of post here</a>) I have found the current versions of Sublime serving my needs better. The biggest reason for the switch is that Aptana / Eclipse forces folders and files to be encapsulated inside &#8220;Eclipse space&#8221; to work well.</p>
<p>Sublime is more suitable for work where you work with various open source components which do not follow such rigid order you might find in in-house corporate software. When you need to integrate different tools and projects, Sublime scripting opportunities are more straightforward versus building thousands of lines Java code what could be need with Eclipse.</p>
<address><em>Note: Don&#8217;t write anything about Vim or Eclipse in this paragraph.</em></address>
<h2>Add-on manager</h2>
<p><a href="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/">Install Sublime Package Control</a>. You need run this in order to install any Sublime Text plug-ins. It magically pulls plug-ins from thin air (or GitHub).</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.04.05-AM.png"><img class="alignnone size-full wp-image-1944" title="Screen shot 2012-05-11 at 2.04.05 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.04.05-AM.png" alt="" width="586" height="287" /></a></p>
<p>After Package Control has been installed you can add new packages with <em>CMD + SHIFT + P</em>, search Package Install. It has context sensitive search and you can find all packages by name.</p>
<h2>Open files from command-line</h2>
<p>I have the following in my shell .rc file, so I can open files directly from the terminal:</p>
<pre>alias subl="'/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl'"
alias nano="subl"
export EDITOR="subl"</pre>
<p><em>Note: nice fallback for nano command which comes from the muscle memory sometimes.</em></p>
<h2>Open folders as projects from command-line</h2>
<p>You can also open folders in Sublime Text.</p>
<p>Just type e.g.</p>
<pre>subl src</pre>
<p>&#8230; and the whole src/ folder is opened in the Sublime Text project explorer (right hand).</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.03.02-AM.png"><img class="alignnone size-full wp-image-1943" title="Screen shot 2012-05-11 at 2.03.02 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.03.02-AM.png" alt="" width="620" height="595" /></a></p>
<p><em>Note: One folder = one project = one window? I am not sure if there are ways to have multiple projects in the same window.</em></p>
<h2>Configure sane tab policy</h2>
<p>Never save your files with hard tabs characters in them.</p>
<p>Do <em>View &gt; Indentation &gt; Convert Indentation to Spaces </em>and make sure <em>Indent using spaces</em> is turned on in the same menu. The new versions of Sublime should remember this setting on file type basis.</p>
<p>Note that <a href="http://www.sublimetext.com/docs/indentation">Sublime tries to autodetect tab settings settings for every opened file</a> and may fail, so keep your eye on this when working with uncleaned files. <a>Use git pre-commit to prevent committing files with tabs in them</a>.</p>
<p><a href="http://www.sublimetext.com/docs/2/indentation.html">There are also config files which you can access from Preferences menu</a>, but after many failed attempts and hacking several config files it did me no good. Maybe autodetect was overriding my simply attempt of <strong>never use tab</strong>.</p>
<h2>Map file formats to syntax highlighting</h2>
<p>If you a have a file format you want to recognize under a certain highlighter e.g. map ZCML files to XML highlighter.</p>
<p>Open any file of the format.</p>
<p>Then: <em>View &gt; Syntax &gt; Open all with current extension as&#8230;</em> -&gt;[your syntax choice].</p>
<p><div id="attachment_1942" class="wp-caption alignnone" style="width: 591px"><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.01.03-AM.png"><img class="size-full wp-image-1942" title="Screen shot 2012-05-11 at 2.01.03 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.01.03-AM.png" alt="" width="581" height="372" /></a><p class="wp-caption-text">ZCML, now with full color</p></div></p>
<p><a href="http://stackoverflow.com/a/8014142/315168">More info</a>.</p>
<h2>Lint and validate your files while typing</h2>
<p><a href="https://github.com/Kronuz/SublimeLinter/">SublimeLinter</a> scans your files on the background when typing using validators and linters for various errors. Please see Configuration section in README as you might need to <a href="file:///Users/moo/code/vvv/docs/build/html/prerequisites.html#node">install additional software, like Node.js, </a>to run some of the linters.</p>
<p><div id="attachment_1938" class="wp-caption alignnone" style="width: 534px"><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-1.48.41-AM.png"><img class="size-full wp-image-1938" title="Screen shot 2012-05-11 at 1.48.41 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-1.48.41-AM.png" alt="" width="524" height="121" /></a><p class="wp-caption-text">Detect mistypes CSS, yay!</p></div></p>
<p>SublimeLinter comes with built-in pylint and has Node&#8217;s jshint and csslint packages includes</p>
<h2>Add CodeIntel autocompletion support</h2>
<p>Install <em>CodeIntel</em> from Package Control.</p>
<p>If you are working with Python projects, using buildout, <a href="http://stackoverflow.com/a/10542562/315168">this recipe comes to handy</a>.</p>
<pre>[codeintel]
recipe = corneti.recipes.codeintel
eggs = ${instance:eggs}
extra-paths =
    ${omelette:location}</pre>
<p>This will generate <em>.codeintel</em> file inside your buildout folder.</p>
<p>CodeIntel plug-in assumes .codeintel file is in your project root. Simply type</p>
<pre>subl .</pre>
<p>to open your buildout folder as Sublime project folder.</p>
<p>Now Sublime should support auto-completion. E.g. start typing</p>
<pre>from zope.interface import &lt;--- Auto completion pops up here</pre>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-1.57.41-AM1.png"><img class="alignnone size-full wp-image-1941" title="Screen shot 2012-05-11 at 1.57.41 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-1.57.41-AM1.png" alt="" width="572" height="236" /></a></p>
<p>Also, with CodeIntel,<em> ALT + mouse click</em> takes you the source code of import, or the declaration of any function you click.</p>
<p>CodeIntel also supports PHP, Ruby and Javascript, to name few.</p>
<p><em>Note: If you are not using buildout, or Python, you can always <a href="https://github.com/Kronuz/SublimeCodeIntel">create CodeIntel configuration file in old-fashioned way</a>.</em></p>
<h2>Go to anywhere shortcut</h2>
<p>CMD + P. Type in a part of a filename and a part of a function / rule name. You are there. Very powerful, yet so simple feature.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.08.51-AM.png"><img class="alignnone size-full wp-image-1945" title="Screen shot 2012-05-11 at 2.08.51 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.08.51-AM.png" alt="" width="637" height="484" /></a></p>
<h2>Go to line shortcut</h2>
<p>Use Go To Line functionality CTRL+G for more traditional jumps.</p>
<h2>Context sensitive in-file search shortcut</h2>
<p>Handy for Javascript, CSS, Python, etc. <em>CMD + R</em>. Type your method or rule name and Sublime automatically jumps into its declaration.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.12.41-AM.png"><img class="alignnone size-full wp-image-1946" title="Screen shot 2012-05-11 at 2.12.41 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.12.41-AM.png" alt="" width="666" height="662" /></a></p>
<p>&#8230; or in Python &#8230;</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.29.11-AM.png"><img class="alignnone size-full wp-image-1949" title="Screen shot 2012-05-11 at 2.29.11 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.29.11-AM.png" alt="" width="566" height="413" /></a></p>
<h2>HTML / XML tag tools</h2>
<p>No one loves XML sit-ups. XML&#8217;ish languages where not intended to be written by hand. Sublime Text provides some pain killers on the matter.</p>
<p>Install <em>Tag</em> from Package Control. It comes handy when you are cleaning up those hard tabs&#8230;.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.13.31-AM.png"><img class="alignnone size-full wp-image-1947" title="Screen shot 2012-05-11 at 2.13.31 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.13.31-AM.png" alt="" width="705" height="825" /></a></p>
<p>Select text and then search from Command Palette (CMD + SHIFT + P): <em>Tag: Auto Format Tags on Selection</em>. Your HTML indent and other weirdness will be cleaned up. You can also configure it for different tag writing style preferences.</p>
<p>There is also built-in <em>HTML: Wrap selection with tag</em> command to insert parent or middle level tags in your HTML source.</p>
<h2>Git</h2>
<p>Though Sublime&#8217;s file explorer doesn&#8217;t support fiel state coloring or context sensitive menu  shortcuts like in Eclipse, you still get some Git commands thru <a href="https://github.com/kemayo/sublime-text-2-git/wiki">kemayo&#8217;s git plug-in</a> (from Package Control, again).</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.18.06-AM.png"><img class="alignnone size-full wp-image-1948" title="Screen shot 2012-05-11 at 2.18.06 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.18.06-AM.png" alt="" width="506" height="426" /></a></p>
<h2>Still unresolved</h2>
<ul>
<li><a href="http://www.sublimetext.com/forum/viewtopic.php?f=2&amp;t=7137">How to edit comments and add newlines so that comments stay closed</a></li>
<li><a href="http://www.sublimetext.com/forum/viewtopic.php?f=2&amp;t=7153">Better restructured text / markdown syntax highlighting</a></li>
<li>Running Plone or unit tests inside Sublime window and mouse click tracebacks to open relevant error lines?</li>
</ul>
<h2>More tips</h2>
<ul>
<li><a href="http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/">Sublime Text 2 tips and tricks</a></li>
<li><a href="http://www.martinaspeli.net/articles/sublime-text-2-for-zope-and-plone">Martin Aspeli&#8217;s Sublime Text 2 for Zope and Plone </a></li>
</ul>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python-and-web-developers/#comments" thr:count="12" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python-and-web-developers/feed/atom/" thr:count="12" />
		<thr:total>12</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Continuous integration server, ghetto style]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/05/05/continuous-integration-server-ghetto-style/" />
		<id>http://opensourcehacker.com/?p=1926</id>
		<updated>2012-05-08T09:24:49Z</updated>
		<published>2012-05-04T22:24:36Z</published>
		<category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="python" /><category scheme="http://opensourcehacker.com" term="continuous integration" /><category scheme="http://opensourcehacker.com" term="cron" /><category scheme="http://opensourcehacker.com" term="github" /><category scheme="http://opensourcehacker.com" term="linux" /><category scheme="http://opensourcehacker.com" term="osx" /><category scheme="http://opensourcehacker.com" term="shell script" /><category scheme="http://opensourcehacker.com" term="subversion" /><category scheme="http://opensourcehacker.com" term="ubuntu" /><category scheme="http://opensourcehacker.com" term="virtualenv" />		<summary type="html"><![CDATA[What it is Ghetto-CI is a Python script in 145 statements fulfilling your dirty continuous integration needs. Source code (one file, only 145 statements) is hosted on Github and for your convenience the script is bundled in VVV linting and &#8230; <a href="http://opensourcehacker.com/2012/05/05/continuous-integration-server-ghetto-style/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/05/05/continuous-integration-server-ghetto-style/"><![CDATA[<div>
<div id="what-it-is">
<h1>What it is</h1>
<p>Ghetto-CI is a Python script in 145 statements fulfilling your dirty <a href="https://en.wikipedia.org/wiki/Continuous_integration">continuous integration</a> needs.</p>
<p><a href="https://github.com/miohtama/vvv/blob/master/ghettoci/main.py">Source code (one file, only 145 statements) is hosted on Github</a> and for your convenience the script is bundled in <a href="http://pypi.python.org/pypi/vvv">VVV linting and validation tool package on PyPi</a>. I&#8217;d love to see if any other programming language can go more compact from this and still maintain code readability.</p>
</div>
<div id="what-it-does">
<h1>What it does</h1>
<ol start="0">
<li>The script must be run on your server periodically</li>
<li>Runs svn update on a source folder (VCS backend easy to customize)</li>
<li>Checks if there are new commits since the last run</li>
<li>Run tests if the source code in fact was changed</li>
<li>See if the tests status since the last run has changed from success to failure or vice versa</li>
<li>Send email notifications to the team that now fecal matter impacts the rotary ventlidation device</li>
</ol>
</div>
<div id="why-to-use">
<h1>Why to use</h1>
<p>To improve the quality and cost effectiveness of your little software project, you want to detect code changes breaking your project [automated tests].</p>
<p>You might want to do this <a href="http://jenkins-ci.org/">without installing 48 MB of Java software</a> on your server. On the other hand, <a>very good SaaS oriented alternatives are tied to public Github repositories</a>. Homebrew shell scripts for tasks like this are nice, but no one wants to read or touch shell scripts written by others.</p>
<p><em>Ghetto-CI</em> script is mostly self-contained, easy to understand, easy to hack into pieces, for your very own need. It is a solution that <em>scales down</em>. Just toss it on a corner of a server and it will churn happily and keep its owners proud. Ghetto-CI does not you give fancy web interface, statistics, bling bling or even a pony. However, it tells when someone breaks something and it is time for team building via <a href="http://en.wikipedia.org/wiki/Blanket_party">blanket party</a>.</p>
</div>
<div id="installation">
<h1>Installation</h1>
<div>
<p><em>As a prerequisitement you need a working Python 3 command installed on your operating system with virtualenv package. For more detailed instructions see <a href="http://miohtama.github.com/vvv/installation.html#installing-locally-using-virtualenv">VVV installation manual.</a></em> <em>Read these instructions especially if you get &#8220;SyntaxError: invalid syntax&#8221; when running virtualenv command &#8211; older Ubuntus ship with virtualenv which is not compatible with Python 3.</em></p>
</div>
<div>
<p><em>If you don&#8217;t feel eggy you can just <a href="https://github.com/miohtama/vvv/blob/master/ghettoci/main.py">grab the self-contained source file</a> as long as you have plac package also installed for your Python.</em></p>
</div>
<p>Create Python 3 virtualenv and run Ghetto-CI script using Python interpreter configured under this virtualenv:</p>
<pre># We install GhettoCI directly under our UNIX user home folder
cd ~
virtualenv -p python3 vvv-venv
source vvv-venv/bin/activate
pip install vvv

# ghetto-ci now lives in vvv-venv/bin/ghetto-ci

# Running the script, using the Python environment prepared
# to see that everything works (source command above
# has added this to PATH)
ghetto-ci -h</pre>
</div>
<div id="usage">
<h1>Usage</h1>
<p>You need to prepare</p>
<ul>
<li>A software repository folder. This must be pre-checked out Subversion repository where ghetto-ci can run <tt>svn up</tt> command.</li>
<li>A command to execute unit tests and such. This command must return process exit code 0 on success. If you don&#8217;t bother writing tests, low end alternative is just <a href="http://pypi.python.org/pypi/vvv">lint and validate your source code</a>.</li>
<li>A file storing the test status. Ghetto-CI status file keeps track whether the last round or tests succeeded or failed. You&#8217;ll get email reports only when the test status changed &#8211; there is little need to get &#8220;tests succeeded&#8221; email for every commit.</li>
<li>Email server details to send out notifications. Gmail works perfectly if you are in short of SMTP servers.</li>
</ul>
<p>Example of a command for running continuous integration against <tt>/my/svn/repo</tt> checkout where <tt>bin/test</tt> command is used to run the unit tests:</p>
<pre># Will print output to console because email notification details are not given
ghetto-ci /my/svn/repo /tmp/status-file.ci "cd /my/svn/repo &amp;&amp; bin/test"</pre>
<p>If the tests status have changed since the last run, or the running fails due to internal error, the command outputs the result. The status file keeps log of the last run.  Exit code 0 indicates that test succeeded.</p>
<p>After Ghetto-CI has been succefully run once by hand you want make it poll the repository regularly. This is can be easily achieved using UNIX <em>cron</em> clock daemon. Create a dummy UNIX user which can checkout and pull updates on the source code. Then create a file <em><tt>/etc/cron.hourly/continuous-integration-tests</tt></em> which will hourly run the tests (Ubuntu example):</p>
<pre>#/bin/sh
sudo -i -u yourunixuser "source vvv-venv/bin/activate &amp;&amp; \
  ghetto-ci /my/svn/repo /tmp/status-file.ci 'cd /my/svn/repo &amp;&amp; bin/test'"</pre>
<p>Naturally the command to launch the tests is specific to your software project.</p>
<p>On Windows you can accomplish this using any automator provided by your operating system vendor.</p>
</div>
<div id="tips">
<h1>Tips</h1>
<p>You might to use <em><tt>-force -alwaysoutput</tt></em> arguments when doing test runs to see what tests do regardless of software repository timestamp.</p>
<p>You can also evaluate against UNIX command <cite>true</cite> and <cite>false</cite> to e.g. test email output:</p>
<pre>ghetto-ci -force -alwaysoutput ...email settings here... /repo /tmp/status-file.ci true</pre>
</div>
<div id="complex-usage-example">
<h1>Complex usage example</h1>
<p>Below is a real life example , again triggered by Cron job, to poll several SVN repositories which have different test sets to run. We use GMail user to send out the email notifications. This is convenient, as we do not need to care about SMTP environment and we can easily drop this code on any server.</p>
<p><em><tt>continuous-integration.sh</tt>:</em></p>
<pre>#!/bin/sh
#
# Example ghetto-ci integration for Plone buildout and custom add-ons.
# Using dummy gmail account for outgoing messages.
#
# Install VVV under buildout
#
# Run this file in buildout main folder:
#
# cd ~/mybuildoutfolder
# src/my-repo/continuos-integration.sh
#
#

# The list of persons who will receive resports of test status changes
RECEIVERS="person@asdf.com, person2@asdf.com, person3@example.com"

# Ghetto-CI template command which is run against multiple repos / multiple test commands
# We use localhost 25 as the SMTP server -&gt; assume your UNIX server has postfix
# or something configured... could be gmail.com servers also here
GHETTOCI="vvv-venv/bin/ghetto-ci \
    -smtpserver smtp.gmail.com \
    -smtpport 465 \
    -smtpuser mailer@gmail.com \
    -smtppassword OMGITISFULLofKITT3NS \
    -receivers \"$RECEIVERS\" \
    -envelopefrom \"Continuous integration service &lt;mailer@gmail.com&gt;\" \
    -smtpfrom mailer@gmail.com"

# Note that SVN revision info is folding down in the folders
# so you can target tests to a specific SVN repo subfolder

# Note: eval needs to be used due to shell script quotation mark fuzz

# See that buildout completes (no changes in the external environment, like someone accidentally
# publishing broken packages on PyPI). We actually place buildout.cfg under this SVN repo
# and then just symlink it
eval $GHETTOCI src/my-repo buildout.ci 'bin/buildout'

# Run tests against hospital product
eval $GHETTOCI src/my-repo/Products.Hospital hospital.ci \"bin/test -s Products.Hospital\"

# Run tests against patient product
eval $GHETTOCI src/my-repo/Products.Patient patient.ci \"bin/test -s Products.Patient\"</pre>
</div>
<div id="internals">
<h1>Internals</h1>
<p><a href="http://plac.googlecode.com/hg/doc/plac.html">plac rocks for command line parsing</a>, especially with Python 3.</p>
<p>The code is pylint valid &#8211; and beautiful, Pythonic.</p>
</div>
<div id="future-tasks">
<h1>Future tasks</h1>
<p>To make this script even more awesome, the following can be considered</p>
<ul>
<li>Using some Python library as the abstraction layer over different version control systems</li>
<li>Using more intelligent Python library for the notifications: have email, IRC and Skype notifications (How Skype bots are built nowadays?)</li>
<li>Use a proper emailing library. I still believe it is easier to configure one GMail account for SMTP purposes instead of Postfix or Exim. Also GMail nicely collects outgoing messages to log even if email delivery has temporary problems.</li>
<li>I would be happy if someone told how to change <em>-smtpport</em> styles options to <em>&#8211;smtp-port</em> with plac</li>
<li>I would be also happy if someone shows how to tame shell script quotation marks properly</li>
<li>All tips to make Python source even more beautiful welcome</li>
</ul>
</div>
<div id="source-and-credits">
<h1>The code</h1>
</div>
<div id="source-and-credits">For your weekend reading. <a href="http://opensourcehacker.com">Syntax highlighted version available on the blog itself</a>.</div>
</div>
<div></div>
<pre class="prettyprint lang-py">__author__ = "Mikko Ohtamaa &lt;mikko@opensourcehacker.com&gt;"
__license__ = "WTFPL"

# pylint complains about abstract Python 3 members and ABCMeta, this will be fixed in the future
# pylint: disable=R0201, W0611

# Python imports
from abc import ABCMeta, abstractmethod
from email.mime.text import MIMEText
import pickle
import os
import sys
import subprocess
from smtplib import SMTP_SSL, SMTP 

#: Template used in email notifications
NOTIFICATION_BODY_TEMPLATE = """
Last commit %(commit)s by %(author)s:

%(commit_message)s

Test output:

%(test_output)s
"""

def split_first(line, separator):
    """
    Split a string to (first part, remainder)
    """
    parts = line.split(separator)
    return parts[0], separator.join(parts[1:])

def shell(cmdline):
    """
    Execute a shell command.

    :returns: (exitcode, stdout / stderr output as string) tuple
    """

    process = subprocess.Popen(cmdline, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)

    # XXX: Support stderr interleaving
    out, err = process.communicate()

    # :E1103: *%s %r has no %r member (but some types could not be inferred)*
    # pylint: disable=E1103
    out = out.decode("utf-8")
    err = err.decode("utf-8")

    return (process.returncode, out + err)    

class Status:
    """
    Stored pickled CI status of a test run.

    Use Python pickling serialization for making status info persistent.
    """

    def __init__(self):

        #: Set to True of False by automation,
        # but we have a special value for the first run
        # to get output always
        self.test_success = "xxx"
        self.last_commit_id = None

    @classmethod
    def read(cls, path):
        """
        Read status file.

        Return fresh status if file does not exist.
        """    

        if not os.path.exists(path):
            # Status file do not exist, get default status
            return Status()

        f = open(path, "rb")

        try:
            return pickle.load(f)
        finally:
            f.close()

    @classmethod
    def write(cls, path, status):
        """
        Write status file
        """        
        f = open(path, "wb")
        pickle.dump(status, f)
        f.close()

class Repo(metaclass=ABCMeta):
    """
    Define interface for presenting one monitored software repository in ghetto-ci.
    """
    def __init__(self, path):
        """
        :param path: Abs FS path to monitored repository
        """
        self.path = path

    @abstractmethod
    def update(self):
        """ Update repo from version control """
        pass

    @abstractmethod
    def get_last_commit_info(self):
        """
        Get the last commit status.

        :return tuple(commit id, commiter, message, raw_output) or (None, None, None, raw_output) on error
        """
        return (None, None, None)

class SVNRepo(Repo):
    """ Handle Subversion repository update and last commit info extraction """

    def update(self):
        """
        Run repo update in a source folder
        """
        exitcode, output = shell("svn up %s" % self.path)
        return exitcode == 0, output

    def get_last_commit_info(self):
        """
        Get the last commit status.
        """

        # Get output from svn info
        info, output = self.get_svn_info()

        if not info:
            return (None, None, None, output)

        # Get output from svn log
        log_success, author, log = self.get_svn_log()
        if not log_success:
            return (None, None, None, log)

        return (info["Last Changed Rev"], author, log, output)

    def get_svn_log(self):
        """
        Extract the last commit author and message.

        :return: tuple (success, last commiter, output / last commit message)
        """
        exit_code, output = shell("svn log -l 1 %s" % self.path)

        if exit_code != 0:
            return (False, None, output)

        # ------------------------------------------------------------------------
        # r6101 | xxx | 2012-04-28 15:57:14 +0300 (Sat, 28 Apr 2012) | 1 line

        lines = output.split("\n")
        author_line = lines[1]
        author = author_line.split("|")[1].strip()

        return  (True, author, output)

    def get_svn_info(self):
        """
        Get svn info output parsed to dict
        """
        exit_code, output = shell("svn info %s" % self.path)
        if exit_code != 0:
            return None, output

        data = {}
        for line in output.split("\n"):
            key, value = split_first(line, ":")
            data[key] = value

        return data, output

class Notifier:
    """
    Intelligent spam being. Print messages to stdout and send emai if
    SMTP server details are available.
    """

    def __init__(self, server, port, username, password, receivers, from_address, envelope_from):
        """
        :param server: SMTP server

        :param port: SMTP port, autodetects SSL

        :param username: SMTP credentials 

        :param password: SMTP password

        :param receivers: String, comma separated list of receivers

        :param from_email: Sender's email address
        """

        self.server = server
        self.port = port
        self.username = username
        self.password = password
        self.receivers = receivers
        self.from_address = from_address
        self.envelope_from = envelope_from

    def send_email_notification(self, subject, output):
        """

        Further info:

        * http://docs.python.org/py3k/library/email-examples.html

        :param receivers: list of email addresses

        :param subject: Email subject

        :param output: Email payload
        """

        if not self.receivers:
            raise RuntimeError("Cannot send email - no receivers given")

        if self.port == 465:
            # SSL encryption from the start
            smtp = SMTP_SSL(self.server, self.port)
        else:
            # Plain-text SMTP, or opt-in to SSL using starttls() command
            smtp = SMTP(self.server, self.port)

        msg = MIMEText(output, "text/plain")
        msg['Subject'] = subject

        if self.envelope_from:
            msg['From'] = self.envelope_from
        else:
            msg['From'] = self.from_address

        # Add visible receivers header
        msg["To"] = self.receivers

        # SMTP never works on the first attempt...
        smtp.set_debuglevel(False)

        # SMTP authentication is optional
        if self.username and self.password:
            smtp.login(self.username, self.password)

        # Convert comma-separated sl
        receivers = [email.strip() for email in self.receivers.split(",")]

        try:
            smtp.sendmail(self.from_address, receivers, msg.as_string())
        finally:
            smtp.close()

    def print_notification(self, subject, output):
        """
        Dump the notification to stdout
        """
        print(subject)
        print("-" * len(subject))
        print(output) 

    def notify(self, subject, output):
        """
        Notify about the tests status.
        """
        if self.server:
            self.send_email_notification(subject, output)

        self.print_notification(subject, output)

def run_tests(test_command):
    """
    Run testing command.

    Assume exit code = 0 -&gt; test success
    """
    exitcode, output = shell(test_command)
    return (exitcode == 0, output)

# Parsing command line with plac rocks
# http://plac.googlecode.com/hg/doc/plac.html
def main(smtpserver : ("SMTP server address for mail out. Required if you indent to use email notifications.", "option"),
         smtpport : ("SMTP server port for mail out", "option", None, int),
         smtpuser : ("SMTP server username", "option"),
         smtppassword : ("SMTP server password", "option"),
         smtpfrom : ("Notification email From address", "option"),
         envelopefrom : ("Verbose Name &lt;from@site.com&gt; sender address in outgoing email", "option"),
         receivers : ("Notification email receives as comma separated string", "option"),
         force : ("Run tests regardless if there have been any repository updates", "flag"),
         alwaysoutput : ("Print test run output regardless whether test status has changed since the last run", "flag"),

         repository : ("Monitored source control repository (SVN)", "positional"),
         statusfile : ("Status file to hold CI history of tests", "positional"),
         testcommand : ("Command to run tests. Exit code 0 indicates test success", "positional"),
         ):
    """
    Ghetto-CI

    A simple continuous integration server.

    Ghetto-CI will monitor the software repository.
    Give a (Subversion) software repository and a test command run test against it.
    Make this command run regularly e.g. using UNIX cron service.    
    You will get email notification when test command status changes from exit code 0.

    For more information see http://pypi.python.org/pypi/vvv
    """

    notifier = Notifier(server=smtpserver, port=smtpport,
                      username=smtpuser, password=smtppassword, from_address=smtpfrom,
                      receivers=receivers, envelope_from=envelopefrom)

    repo = SVNRepo(repository)    
    status = Status.read(statusfile)

    success, output = repo.update()

    # Handle repo update failure
    if not success:
        notifier.notify("Could not update repository: %s. Probably not valid SVN repo?\n" % repository, output)
        return 1

    commit_id, commit_author, commit_message, output = repo.get_last_commit_info()

    # Handle repo info failure
    if not commit_id:
        notifier.notify("Could not get commit info: %s\n%s" % (repository, output), "Check svn info by hand")
        return 1

    # See if repository status has changed
    if commit_id  != status.last_commit_id or force:
        test_success, output = run_tests(testcommand)
    else:
        # No new commits, nothing to do
        print("No changes in repo %s" % repository)
        return 0

    # Test run status have changed since last run
    if (test_success != status.test_success) or alwaysoutput:

        notification_body = NOTIFICATION_BODY_TEMPLATE % dict(commit = commit_id, author=commit_author,
            commit_message=commit_message, test_output=output)

        if test_success:
            subject = "Test now succeed for %s" % testcommand
        else:
            subject = "Test now fail for %s" % testcommand

        notifier.notify(subject, notification_body)

    # Update persistent test status
    new_status = Status()
    new_status.last_commit_id = commit_id
    new_status.test_success = test_success
    Status.write(statusfile, new_status)

    if test_success:
        return 0
    else:
        return 1

def entry_point():
    """
    Enter the via setup.py entry_point declaration.

    Handle UNIX style application exit values
    """
    import plac
    exitcode = plac.call(main)
    sys.exit(exitcode)

if __name__ == "__main__":
    entry_point()</pre>
<div></div>
<div>Happy weekend! <img src='http://opensourcehacker.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </div>
<div></div>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/05/05/continuous-integration-server-ghetto-style/#comments" thr:count="2" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/05/05/continuous-integration-server-ghetto-style/feed/atom/" thr:count="2" />
		<thr:total>2</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Python and Javascript developer setup hints for OSX Lion]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/04/27/python-and-javascript-developer-setup-hints-for-osx-lion/" />
		<id>http://opensourcehacker.com/?p=1917</id>
		<updated>2012-04-27T15:31:20Z</updated>
		<published>2012-04-27T15:19:05Z</published>
		<category scheme="http://opensourcehacker.com" term="osx" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="git" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="macports" /><category scheme="http://opensourcehacker.com" term="python" /><category scheme="http://opensourcehacker.com" term="shell" /><category scheme="http://opensourcehacker.com" term="skype" /><category scheme="http://opensourcehacker.com" term="ssh" /><category scheme="http://opensourcehacker.com" term="terminal" /><category scheme="http://opensourcehacker.com" term="zsh" />		<summary type="html"><![CDATA[Free (wannabe-pro) tips of the week for those who develop Javascript and Python on OSX. Macports install poem After fresh OSX Lion install,  install Macports to bring all the goodies of open source software to your computer. This will help &#8230; <a href="http://opensourcehacker.com/2012/04/27/python-and-javascript-developer-setup-hints-for-osx-lion/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/04/27/python-and-javascript-developer-setup-hints-for-osx-lion/"><![CDATA[<p>Free (wannabe-pro) tips of the week for those who develop Javascript and Python on OSX.</p>
<h2>Macports install poem</h2>
<p>After fresh OSX Lion install,  install <a href="http://www.macports.org/">Macports</a> to bring all the goodies of open source software to your computer. This will help get things running in shell and set up smooth Python development environment</p>
<pre>sudo port install python32 python27 subversion nodejs npm \
  rsync sqlite3 wget curl py32-virtualenv py27-virtualenv \
  wget unrar zsh bzr bzip2 openssl jpeg libpng libxml2 libxslt \
  git-core git-extras coreutils lesspipe highlight +with_default_names</pre>
<p>(Macports 2.0.4. <a href="https://trac.macports.org/wiki/Migration">If you are upgrading Macports or OSX or XCode please see these migration notes</a> and <a href="https://trac.macports.org/wiki/LionProblems">Lion / XCode 4.3 specific issues</a>.)</p>
<h2>GNU Userland</h2>
<p>Then enable Macports GNU userland commads put the following into your shell .rc file:</p>
<pre>export PATH=/opt/local/libexec/gnubin:/opt/local/bin:/opt/local/sbin:$PATH
export CLICOLOR=1
export LESSOPEN='| /opt/local/bin/lesspipe.sh %s'</pre>
<p>This will give you nice colours in <em>ls</em>, etc. improvements over barebone BSD userland commands.</p>
<h2>Sane text editor</h2>
<p>Use your favorite non-terminal text editor from command line. Here is an example for <a href="www.sublimetext.com/">Sublime Text 2</a> which is one of software developer text editors seeing active development under OSX</p>
<pre># Use Sublime Edit 2 as text editor inst
export EDITOR="'/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl'"
alias subl="$EDITOR"
# Open file in a real text editor,
# if you happen to type nano from your muscle memory
alias nano="subl"</pre>
<h2>zsh</h2>
<p><a href="https://github.com/robbyrussell/oh-my-zsh/">ZSH is a popular shell among power users with all kinds of plug-ins available</a>. They will help you to deal with Git repositories, virtualenvs, and so on&#8230;</p>
<p>To change your shell to Macports<em>&#8216; /opt/local/bin/zsh</em> in System Preferences &gt; User &amp; Groups: right click on your user after unlockingthe dialog window.</p>
<h2>Terminal</h2>
<p><a href="http://www.iterm2.com/">iTerm 2</a> is a better replacement for the default Terminal. (<a href="http://superuser.com/questions/317479/missing-the-first-character-of-a-line-on-full-screen-apps-on-linux-server-sshed">Terminal has some serious problems</a>).</p>
<h2>Performance</h2>
<p><a href="http://www.mikesel.info/disable-spotlight/">Disable Spotlight indexing for better performance</a>. Who uses Spotlight search anyway when you have <em>grep</em>?</p>
<h2>Sync your configuration files</h2>
<p>Some files you might want to save to your Dropbox etc. cloud storing service to share between your computers</p>
<ul>
<li>.ssh/ folder</li>
<li>.gitconfig (<a href="https://gist.github.com/1240533">sane .gitconfig example making git a bit less pain</a>)</li>
<li><a href="http://raanan.com/2009/06/22/sync-skype-on-multiple-machines-with-dropbox/">Store Skype chat history in Dropbox</a></li>
<li><a href="http://plone.org/documentation/kb/how-to-upload-your-package-to-plone.org/distuttils-commands-and-.pypirc">.pypirc</a></li>
<li><a href="http://nedbatchelder.com/blog/200704/my_pdbrc.html">.pdbrc</a></li>
</ul>
<h2>Kill alt + spacebar character</h2>
<p>Pressing alt+spacebar accidentally creates an invisible character which causes most source code go hayware. <a href="http://apple.stackexchange.com/questions/34672/whats-altspacebar-character-and-how-to-disable-it">Disable this behavior</a>.</p>
<h2>All Python versions</h2>
<p>They can be built with <a href="https://github.com/collective/buildout.python">collective.buildout.python</a> recipe. In the case you need to deal with ancient codebases (*cough* Plone 3 *cough*).</p>
<h2>Still some open questions&#8230;.</h2>
<p>All hints and pointers welcome for the following</p>
<ul>
<li><a href="http://www.saintsjd.com/2012/01/a-better-ui-for-git/">Sane command-line interface for git needed</a></li>
<li><a href="http://superuser.com/questions/392317/firefox-add-on-for-searching-private-google-apps-and-email">Firefox add-on for searching private Google Apps and email</a></li>
<li><a href="http://superuser.com/questions/340297/edit-text-files-over-ssh-using-a-local-text-editor">Edit-text-files-over-SSH using a local text editor</a></li>
</ul>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/04/27/python-and-javascript-developer-setup-hints-for-osx-lion/#comments" thr:count="2" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/04/27/python-and-javascript-developer-setup-hints-for-osx-lion/feed/atom/" thr:count="2" />
		<thr:total>2</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[JSLint integration for Sublime Text 2]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/" />
		<id>http://opensourcehacker.com/?p=1875</id>
		<updated>2012-04-12T11:52:05Z</updated>
		<published>2012-04-12T11:52:05Z</published>
		<category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="aptana studio" /><category scheme="http://opensourcehacker.com" term="jshint" /><category scheme="http://opensourcehacker.com" term="jslint" /><category scheme="http://opensourcehacker.com" term="jslint4java" />		<summary type="html"><![CDATA[Web developers are editing more and more Javascript. Because Javascript is very flexible language and has some bad parts from the past, you want to enforce linting software to validate your Javascript code against the good known best practices and &#8230; <a href="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/"><![CDATA[<p>Web developers are editing more and more Javascript. Because Javascript is very flexible language and has some bad parts from the past, you want to enforce <a href="http://en.wikipedia.org/wiki/Lint_%28software%29">linting</a> software to validate your Javascript code against the good known best practices and avoid bad parts like global variables. One of such tools to enforce good practices is Douglas Crockford&#8217;s <a href="http://www.jslint.com/">jslint</a>.</p>
<p>Also note that Crockford&#8217;s best practices and style is not what everyone want and there is more flexible community maintained replacement called <a href="http://www.jshint.com/">jshint</a> available.</p>
<p>Sublime Text is a popular source code text editor among the web programmers. Below are instructions how to integrate jslint with Sublime Text.</p>
<p><a href="https://github.com/fbzhong/sublime-jslint">sublime-jslint is available on GitHub</a>.</p>
<h2>Steps to install (OSX)</h2>
<p>Install <a href="http://wbond.net/sublime_packages/package_control">Sublime Package Control</a> using console magic paste. You can open Console from <em>View -&gt; Show Console</em>. (Wow it&#8217;s Python inside!)</p>
<p>Restart Subclipse.</p>
<p>CMD-Shift-P opens Package Control dialog (OSX).</p>
<p>Choose command <em>Install package</em> by start typing it.</p>
<p>In package list, type in <em>jslint</em> and it&#8217;s there.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/02/Screen-shot-2012-02-17-at-1.20.07-AM.png"><img class="alignnone size-full wp-image-1876" title="Screen shot 2012-02-17 at 1.20.07 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/02/Screen-shot-2012-02-17-at-1.20.07-AM.png" alt="" width="737" height="280" /></a></p>
<p>In status bar you now see indicator <em>Installing package&#8230;</em></p>
<p>Now turn on Run JSLint on Save. Go to <em>Preferences &gt; Package Settings &gt; JSLint &gt; Settings &gt; User.</em> This is the most convenient way to lint through your Javascript code piles.</p>
<p>Paste in:</p>
<pre>{

    // Don't agree with Crockford about whitespace usage
    "jslint_options": "--white",

    // run jslint on save.
    "run_on_save": true,

    // debug flag.
    "debug": true
}</pre>
<p>Save.</p>
<p>Restart Sublime.</p>
<p>Now when you save a .js file you see some output at the bottom of the screen:</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/02/Screen-shot-2012-02-17-at-1.44.04-AM.png"><img class="alignnone size-full wp-image-1877" title="Screen shot 2012-02-17 at 1.44.04 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/02/Screen-shot-2012-02-17-at-1.44.04-AM.png" alt="" width="840" height="524" /></a></p>
<h2>Options</h2>
<p>To see <em>jslint4java</em> options run</p>
<pre>java -jar "/Users/moo/Library/Application Support/Sublime Text 2/Packages/sublime-jslint/jslint4java-2.0.1.jar</pre>
<p>There is some room to configure it for your taste.</p>
<p>At least <em>&#8211;white</em> for sloppy whitespace usage is preferred, as one might not agree how Crockford wants to put his spaces.</p>
<h2>Troubleshooting</h2>
<p>Enable Sublime console to see what&#8217;s happening on the background. JSLint is being run with this kind of command:</p>
<pre>java -jar "/Users/moo/Library/Application Support/Sublime Text 2/Packages/sublime-jslint/jslint4java-2.0.1.jar"  "/Users/moo/code/xxx/src/eric.cartman/eric/cartman/static/cartman.js"</pre>
<p><strong>Warning:</strong> For some reason Sublime execution or manual execution of this command didn&#8217;t give any output on my OSX first. Then it started magically working. I don&#8217;t know what happened.</p>
<h2>Aptana Studio vs. Sublime Text</h2>
<p>I did not find Sublime Text 2 productive Javascript editor for large scale projects as  Aptana Studio 3.0 I have been using before. Naturally Aptana Studio is much more heavy weight tool, but here are some highlights it does really well</p>
<ul>
<li>The lack of smart comment new line behavior was a show stopper for a person like me who actually wants to comment his code &#8211; typing in every * is cumbersome and there is no support in copy-pasting text into comments</li>
<li>JSLint is run on background all the time in Aptana Studio (no need to save files)</li>
<li>JSLint warnings are highlighted in the code view and scrollbar</li>
<li>Aptana has Outline class browser</li>
<li><a href="http://stackoverflow.com/questions/9039764/automatic-bookmarking-of-recently-edited-parts-of-a-file">Aptana can highlight recently edited parts of file</a> (though not specific to JSLint integration)</li>
</ul>
<p>You can survive without the above features, but after used to them they will boost your productivity. I did not yet check jshint integration options for Sublime Text and if someone knows it can address some of the issues above please let me know.</p>
<p>&nbsp;
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/#comments" thr:count="5" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/04/12/jslint-integration-for-sublime-text-2/feed/atom/" thr:count="5" />
		<thr:total>5</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Testing mobile sites on Nokia Series 60, Series 40 and Meego (Mobilizing websites with responsive design and HTML5 part 13)]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/02/23/testing-mobile-sites-on-nokia-series-60-and-meego-mobilizing-websites-with-responsive-design-and-html5-part-13/" />
		<id>http://opensourcehacker.com/?p=1806</id>
		<updated>2012-02-24T08:56:46Z</updated>
		<published>2012-02-22T23:23:12Z</published>
		<category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="android" /><category scheme="http://opensourcehacker.com" term="meego" /><category scheme="http://opensourcehacker.com" term="n8" /><category scheme="http://opensourcehacker.com" term="n9" /><category scheme="http://opensourcehacker.com" term="nokia" /><category scheme="http://opensourcehacker.com" term="opera mini" /><category scheme="http://opensourcehacker.com" term="remote device access" /><category scheme="http://opensourcehacker.com" term="series 40" /><category scheme="http://opensourcehacker.com" term="series 60" /><category scheme="http://opensourcehacker.com" term="web run-time" />		<summary type="html"><![CDATA[This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post. This blog post gives you intro how to test mobile sites in Nokia phones, with one exception. &#8230; <a href="http://opensourcehacker.com/2012/02/23/testing-mobile-sites-on-nokia-series-60-and-meego-mobilizing-websites-with-responsive-design-and-html5-part-13/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/02/23/testing-mobile-sites-on-nokia-series-60-and-meego-mobilizing-websites-with-responsive-design-and-html5-part-13/"><![CDATA[<p><em>This blog post is a part of <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">Mobilizing websites with responsive design and HTML5 tutorial</a>. For all posts please see <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">the Introduction post</a>.</em></p>
<p>This blog post gives you intro how to test mobile sites in Nokia phones, with one exception. Windows Phone phones will have their own blog post following soon after this post.</p>
<h2>Series 60 and Meego</h2>
<p>N8 is the most notable Series 60 phone. Though Series 60 is at the end of its life, it still represents around 30% of world smartphones. Series 60 was the first OS to use WebKit, but unfortunately Nokia decided to develop its own <a href="https://en.wikipedia.org/wiki/Web_Runtime_%28WRT%29#Application_development">Web Run-time Javascript based development environment</a> instead of focusing delivering good HTML5 experience on the browser. Sadly, HTML5 experience is not that good, but acceptable, somewhere little bit behind Android Browser.</p>
<p>N9, the best phone in the world, is the first and the last Meego phone ever produced. It&#8217;s market share is unknown. Most developers prefer this phone due to its Debian/X11 based operating system. You can apt-get install software into your phone.</p>
<h2>Remote Device Access</h2>
<p>Nokia has remote service to access Meego- and Series 60 (Symbian) phones in a publicly accessible &#8220;phone cloud&#8221;. This is the recommended option for testing your mobile site on these phones unless you have a device yourself. This service seriously kicks ass and I hope other vendors would provide such free service for developers.</p>
<p>Remote Device Access cloud accessible phones are real devices, not emulated ones.</p>
<ul class="simple">
<li><a class="reference external" href="http://www.developer.nokia.com/Devices/Remote_device_access/">http://www.developer.nokia.com/Devices/Remote_device_access/</a></li>
</ul>
<p>The service requires</p>
<ul class="simple">
<li>Sign Up</li>
<li>A web browser</li>
<li>Java run-time, with Web Start bootstrap. Note that the service uses Java Web Start, not Java applet, though it does not make any difference.</li>
</ul>
<p>Remote Device Access does not have Windows or Series 40 phones as writing of this.</p>
<p>When you open the service you can request ~30 minutes usage time for a device and remotely access it over Java application. The phone is fully yours, there really aren&#8217;t any limitations (beside making calls and such).</p>
<p style="text-align: center;"><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-24-at-10.43.21-AM.png"><img class="wp-image-1895" title="Screen shot 2012-02-24 at 10.43.21 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-24-at-10.43.21-AM.png" alt="" width="1009" height="820" /></a></p>
<p style="text-align: center;"><em>N9 running in a window from Nokia Remote Device Access service</em></p>
<p>There is some lag when using the service, but you can can withstand it to get the mobile site testing done.</p>
<h2>Series 60 simulator and SDK</h2>
<p>Series 60 simulator is based on recompilation of Series 60 components for Windows and emulating some Symbian OS features.</p>
<p>Some features of SDK</p>
<ul>
<li>Windows only</li>
<li>Pain to set up</li>
<li>Awful to use</li>
</ul>
<p>Skip it.</p>
<h2>Series 40</h2>
<p><a href="http://en.wikipedia.org/wiki/Series_40">Nokia Series 40 phones</a> are wide-spread in developing world due to their cheap price, physical durability and long battery life.</p>
<p>Nokia low end Series 40 operating system is closed, proprietary and not very portable. There does not exist much testing tools for this OS, outside the phones themselves.</p>
<p>Newer Series 40 phones have a WebKit based browser, older phones some proprietary browsing engines which really can&#8217;t do even the basic CSS.</p>
<p><a>Opera Mini, based on Java ME, is popular third party aftermarket browser available for Series 40 devices and making the web surfing actually pleasurable</a>. You can recommend using Opera Mini for your Series 40 users.</p>
<p>These phones are cheap, so just buy the most popular Series 40 of your target market.
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/02/23/testing-mobile-sites-on-nokia-series-60-and-meego-mobilizing-websites-with-responsive-design-and-html5-part-13/#comments" thr:count="2" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/02/23/testing-mobile-sites-on-nokia-series-60-and-meego-mobilizing-websites-with-responsive-design-and-html5-part-13/feed/atom/" thr:count="2" />
		<thr:total>2</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Testing mobile sites on Firefox Mobile, Opera Mini and other aftermarket browsers  (Mobilizing websites with responsive design and HTML5 part 12)]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/02/22/testing-mobile-sites-on-firefox-mobile-opera-mini-and-other-aftermarket-browsers-mobilizing-websites-with-responsive-design-and-html5-part-11/" />
		<id>http://opensourcehacker.com/?p=1803</id>
		<updated>2012-02-22T22:34:57Z</updated>
		<published>2012-02-21T23:21:17Z</published>
		<category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="mobile" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="android" /><category scheme="http://opensourcehacker.com" term="fennec" /><category scheme="http://opensourcehacker.com" term="firefox" /><category scheme="http://opensourcehacker.com" term="ios" /><category scheme="http://opensourcehacker.com" term="java" /><category scheme="http://opensourcehacker.com" term="linux" /><category scheme="http://opensourcehacker.com" term="meego" /><category scheme="http://opensourcehacker.com" term="microsoft windows" /><category scheme="http://opensourcehacker.com" term="opera mini" /><category scheme="http://opensourcehacker.com" term="osx" /><category scheme="http://opensourcehacker.com" term="webgl" /><category scheme="http://opensourcehacker.com" term="webos" />		<summary type="html"><![CDATA[This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post. Firefox Mobile and Opera Mini are popular after market browsers the user can install on their device. &#8230; <a href="http://opensourcehacker.com/2012/02/22/testing-mobile-sites-on-firefox-mobile-opera-mini-and-other-aftermarket-browsers-mobilizing-websites-with-responsive-design-and-html5-part-11/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/02/22/testing-mobile-sites-on-firefox-mobile-opera-mini-and-other-aftermarket-browsers-mobilizing-websites-with-responsive-design-and-html5-part-11/"><![CDATA[<p><em>This blog post is a part of <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">Mobilizing websites with responsive design and HTML5 tutorial</a>. For all posts please see <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">the Introduction post</a>.</em></p>
<p>Firefox Mobile and Opera Mini are popular after market browsers
the user can install on their device. They offer
additional functionality and speed over the stock browsers.
You should also test your mobile sites with these browsers.</p>
<p>There also exist plethora of other after market browsers,
especially for Android platform. I am not sure how popular they are, but they all are based on the same WebKit engine shipped with the Android platform, so they generally yield the same rendering output as the Android Browser stock browser does and separate testing is not needed.</p>
<h2><span class="toc-backref">Opera Mini</span></h2>
<p>Opera Mini has over 100 millions users and it is the most popular
mobile web browser.</p>
<p>Opera Mini is not a full web browser &#8211; it&#8217;s a thin client.
The pages are rendered in a server-farm in a Norway where Opera comes from.
The servers send a compact subset of the webpage page to the handset instead or raw HTML, CSS and Javascript. This allows
even the most low powered devices render complex web pages.</p>
<p>The thin client strategy in web page rendering is also used by Kindle Fire.</p>
<h2>Opera Mini simulator</h2>
<p>Opera Mini Simulator is a Java applet which you can run in your web browser.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-23-at-12.01.07-AM.png"><img class="alignnone size-full wp-image-1889" title="Screen shot 2012-02-23 at 12.01.07 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-23-at-12.01.07-AM.png" alt="" width="348" height="513" /></a></p>
<ul class="simple">
<li><a class="reference external" href="http://www.opera.com/developer/tools/mini/">http://www.opera.com/developer/tools/mini/</a></li>
<li><a class="reference external" href="http://opensourcehacker.com/2011/06/03/testing-localhost-site-in-opera-mini-ssh-tunnel-trick/">http://opensourcehacker.com/2011/06/03/testing-localhost-site-in-opera-mini-ssh-tunnel-trick/</a></li>
</ul>
<div id="opera-not-mini" class="section">
<h2>Opera Mini on devices</h2>
<p>You can install Opera Mini on any device, including low-end phones and iOS devices.</p>
<p>Sadly, Opera Mini offers little debugging tools because the pages are rendered on remote servers. Your best shot is use Opera Mobile to render the pages, as the underlying Presto rendering engine is the same.</p>
<p>Opera Mini, even if being thin client, can execute Javascript on page load and click handlers on the server side, but the execution time is limited (around one second).</p>
<h2><span class="toc-backref">Opera Mobile (not mini)</span></h2>
<p>Opera Mobile (not mini) is a full browser which you can install various handsets,
including Android, Nokia and Windows Mobile.</p>
<p>Opera Dragonfly debugging tools support remote debugging on the mobile devices.
You can use desktop debugging tools to inspect a page running in a mobile phone. A very handy feature for all mobile web developers.</p>
</div>
<div id="firefox-mobile-a-k-a-fennec" class="section">
<h2><span class="toc-backref">Firefox Mobile (a.k.a. Fennec)</span></h2>
<p><a href="https://market.android.com/details?id=org.mozilla.firefox&amp;hl=fi">You can install Firefox Mobile on Android devices</a>. There also exists community maintained port for Meego mobile platform and unofficial builds for iOS and webOS. The current builds use native Android UI and mobile optimized version of Gecko rendering engine. For more complex (web)  pages the speed of the browser beats Android Browser stock browser. Firefox Mobile is also the only currently shipped mobile browser supporting WebGL.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-23-at-12.28.57-AM.png"><img class="alignnone size-full wp-image-1890" title="Screen shot 2012-02-23 at 12.28.57 AM" src="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-23-at-12.28.57-AM.png" alt="" width="502" height="694" /></a></p>
<p>A Firefox Mobile PC built exists for Microsoft Windows, OSX and Linux and is suitable for testing purposes. Note that some effort might be needed to make it run,  as these builds are not officially supported.</p>
<p>Download instructions for PC/Mac:</p>
<ul class="simple">
<li><a class="reference external" href="http://opensourcehacker.com/2011/07/08/testing-mobile-websites-with-firefox-mobile-for-pc-fennec-desktop/">http://opensourcehacker.com/2011/07/08/testing-mobile-websites-with-firefox-mobile-for-pc-fennec-desktop/</a></li>
</ul>
</div>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/02/22/testing-mobile-sites-on-firefox-mobile-opera-mini-and-other-aftermarket-browsers-mobilizing-websites-with-responsive-design-and-html5-part-11/#comments" thr:count="0" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/02/22/testing-mobile-sites-on-firefox-mobile-opera-mini-and-other-aftermarket-browsers-mobilizing-websites-with-responsive-design-and-html5-part-11/feed/atom/" thr:count="0" />
		<thr:total>0</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Testing mobile sites on Android and its emulator (Mobilizing websites with responsive design and HTML5 part 11)]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/02/14/testing-mobile-sites-on-android-and-its-emulator-mobilizing-websites-with-responsive-design-and-html5-part-10/" />
		<id>http://opensourcehacker.com/?p=1801</id>
		<updated>2012-02-15T12:35:37Z</updated>
		<published>2012-02-13T23:18:46Z</published>
		<category scheme="http://opensourcehacker.com" term="android" /><category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="mobile" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="css3" /><category scheme="http://opensourcehacker.com" term="debugging" /><category scheme="http://opensourcehacker.com" term="emulator" /><category scheme="http://opensourcehacker.com" term="logcat" /><category scheme="http://opensourcehacker.com" term="screenshot" /><category scheme="http://opensourcehacker.com" term="sdk" /><category scheme="http://opensourcehacker.com" term="simulator" /><category scheme="http://opensourcehacker.com" term="usb" /><category scheme="http://opensourcehacker.com" term="webkit" /><category scheme="http://opensourcehacker.com" term="x86" />		<summary type="html"><![CDATA[This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post. This blog post deals testing mobile sites for Android devices. Android comes with a browser called Android &#8230; <a href="http://opensourcehacker.com/2012/02/14/testing-mobile-sites-on-android-and-its-emulator-mobilizing-websites-with-responsive-design-and-html5-part-10/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/02/14/testing-mobile-sites-on-android-and-its-emulator-mobilizing-websites-with-responsive-design-and-html5-part-10/"><![CDATA[<p><em>This blog post is a part of <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">Mobilizing websites with responsive design and HTML5 tutorial</a>. For all posts please see <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">the Introduction post</a>.</em></p>
<p>This blog post deals testing mobile sites for Android devices. Android comes with a browser called Android Browser (very Germanic naming habits they have&#8230;). It is developed separate from Google Chrome which <a href="http://www.pcworld.com/article/249455/chrome_comes_to_android_but_only_for_the_1_percent.html">saw its first mobile release recently</a>. Android also features many after market browsers which will be dealt separately in an upcoming blog post.</p>
<p>Android Browser&#8217;s WebKit based rendering engines is a moving target and support for
HTML5 and CSS3 vary greatly between Android releases. For example, <a href="For example, &lt;video&gt; support is known to be broken.">HTML5 &lt;video&gt; support is known to be broken</a> to the point you cannot really use it. It also <a href="http://stackoverflow.com/questions/6632140/android-pixel-quality-reduction-in-images-loaded-in-webview/6640766#6640766">does other funny stuff</a>. JIT Javascripting support was introduced in Android 2.3.</p>
<p>Because there are no forced firmware updates and carries and OEMs are being more evil than Google, Android version market share is very fragmented. Currently the most popular Android versions are 2.2 and 2.3. Android 4.0 (Ice Cream Sandwitch) is generally under on 1% depending on the markets.</p>
<p>Luckily, unlike with IE, Android mobile devices broke down quite fast and we don&#8217;t need to bear with old buggy browser releases for unforeseeable future, only for the next few years.</p>
<h2>Android Emulator</h2>
<p>Android SDK and emulator run on all Microsoft Windows, Linux and OSX, the SDK being most versatile of all mobile vendor SDKs. Android SDK is free &#8211; no registration needed.</p>
<p>Download Android SDK</p>
<ul>
<li><a href="http://developer.android.com/sdk/index.html">http://developer.android.com/sdk/index.html</a></li>
</ul>
<div>
<p><em>Note: </em>Android emulator is an actual <a href="http://en.wikipedia.org/wiki/Emulator">emulator</a>, not simulator. It emulates the full device, including executing ARM processor code on your CPU. It is 1:1 emulation. However, the price for this accuracy is that the emulation speed is sluggish as a brown bear waking up on Finnish winter morning. Testing sites on the emulator is painful &#8211; testing on the actual device with proper logging support (see below) is recommended.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-15-at-2.17.38-PM.png"><img class="alignnone size-full wp-image-1868" title="Screen shot 2012-02-15 at 2.17.38 PM" src="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-15-at-2.17.38-PM.png" alt="" width="796" height="561" /></a></p>
<p><em>Note:</em> There is x86 Android port coming up and if someone has more information
if x86 emulators already exist and if you could run Android Browser on then I&#8217;d like to know. Running native processor code should greatly speed up the emulation experience.</p>
<p>For Android SDK, get the Eclipse IDE plug-in. It features nice logging options and quick start for different emulator versions.</p>
<p>Android emulator allows you to experience with different screen sizes and DPI ratios.</p>
<p><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-15-at-2.16.22-PM.png"><img class="alignnone size-full wp-image-1867" title="Screen shot 2012-02-15 at 2.16.22 PM" src="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-15-at-2.16.22-PM.png" alt="" width="402" height="561" /></a></p>
</div>
<h2>Android Devices</h2>
<p>Android devices are cheap and for testing you should easily get low end Android smartphone under 150 USD. SIM card is not necessary, you can test mobile sites over WLAN connection.</p>
<p>The device speed is an also an issue &#8211; many Android devices are equipped withß underpowered CPU and GPU. When you test for Android, get the cheapest possible device (ZTE) to make sure you&#8217;ll get the crappiest user experience out of it &#8211; this is what the most of Android users will get. Don&#8217;t get expensive phone like Samsung Galaxy or Nexus.</p>
<h2>Logging and debug console output</h2>
<p>Android emulators and devices have a logging capability called <a href="http://developer.android.com/guide/developing/tools/logcat.html">LogCat</a>. <em>console.log()</em> output is directed to LogCat log stream.</p>
<ul>
<li>You can view LogCat logs on the device itself using a free app (e.g. <a href="https://market.android.com/details?id=org.jtb.alogcat">aLogCat</a>, donationware)</li>
<li>You can view both emulator and simulator log output using command line LogCat tools on your computer</li>
<li>You can view both emulator and simulator log output in Eclipse LogCat view</li>
<li>You can view the device logs over USB connection in Eclipse LogCat view (<a href="http://opensourcehacker.com/2010/12/01/android-on-device-debugging-launch-fails-cant-bind-to-local-8600-for-debugger/">maybe with some issues</a> when connecting to device)</li>
<li><a href="http://developer.android.com/guide/developing/device.html">Depending on your OS, you might need to install a device specific special drivers to make your OS to communicate over Android USB debug protocol</a></li>
<li><a href="http://opensourcehacker.com/2010/09/04/samsung-galaxy-s-i9000-and-android-2-1-enable-file-copy-over-usb-as-mass-storage-mode-on-osx-and-linux/">Android USB debug must be enabled in the device settings. This menu item also enables mounting Android device as USB disk and file copy operations</a>.</li>
</ul>
<h2>Screenshots</h2>
<p>Taking screenshots on the Android device itself is pain &#8211; special debugger commands are needed. Samsung <a href="http://opensourcehacker.com/2011/02/27/taking-a-screenshot-on-samsung-galaxy-s-and-other-samsung-android-devices/">has made its own screenshot shortcut for Android devices</a>.</p>
<p>&nbsp;
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/02/14/testing-mobile-sites-on-android-and-its-emulator-mobilizing-websites-with-responsive-design-and-html5-part-10/#comments" thr:count="3" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/02/14/testing-mobile-sites-on-android-and-its-emulator-mobilizing-websites-with-responsive-design-and-html5-part-10/feed/atom/" thr:count="3" />
		<thr:total>3</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Testing mobile sites on iPhone, iPad and the simulator (Mobilizing websites with responsive design and HTML5 part 10)]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/02/09/testing-mobile-sites-on-iphone-ipad-and-their-simulator-mobilizing-websites-with-responsive-design-and-html5-part-10/" />
		<id>http://opensourcehacker.com/?p=1798</id>
		<updated>2012-02-11T09:53:33Z</updated>
		<published>2012-02-08T23:15:30Z</published>
		<category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="mobile" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="css3" /><category scheme="http://opensourcehacker.com" term="debugging" /><category scheme="http://opensourcehacker.com" term="hackintosh" /><category scheme="http://opensourcehacker.com" term="ios" /><category scheme="http://opensourcehacker.com" term="ipad" /><category scheme="http://opensourcehacker.com" term="iphone" /><category scheme="http://opensourcehacker.com" term="ipod touch" /><category scheme="http://opensourcehacker.com" term="javascript" /><category scheme="http://opensourcehacker.com" term="logging" /><category scheme="http://opensourcehacker.com" term="osx" /><category scheme="http://opensourcehacker.com" term="screenshots" /><category scheme="http://opensourcehacker.com" term="sdk" /><category scheme="http://opensourcehacker.com" term="testing" />		<summary type="html"><![CDATA[This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post. iPhone might not be the market leader, but its users are known to be the most picky &#8230; <a href="http://opensourcehacker.com/2012/02/09/testing-mobile-sites-on-iphone-ipad-and-their-simulator-mobilizing-websites-with-responsive-design-and-html5-part-10/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/02/09/testing-mobile-sites-on-iphone-ipad-and-their-simulator-mobilizing-websites-with-responsive-design-and-html5-part-10/"><![CDATA[<p><em>This blog post is a part of <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">Mobilizing websites with responsive design and HTML5 tutorial</a>. For all posts please see <a href="../2012/01/09/2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">the Introduction post</a>.</em></p>
<p>iPhone might not be the market leader, but its users are known to be the most picky of phone folk. Thus, always make sure your mobile site works in iPhone. Here are tips for testing your site for iPhone.</p>
<h2>iPhone / iPad Simulator</h2>
<p>iPhone/iPad/iOS emulator comes with iOS SDK. The SDK access costs 100 USD per year and the SDK only available on OSX platforms only.</p>
<p>You basically
must have a Mac to do any  iOS development, there is no way around it.
There exist &#8220;Hackintosh&#8221; attempts for running OSX in a virtual machine or non-Apple
hardware, but these methods tend to be slow and cumbersome or have various software issues. Mac Mini is the cheapest Mac you can get for this work and is perfectly sufficient.</p>
<p>The simulator is good for testing basic mobile sites. If you are relying on animations and Javascript then you need to test on actual device(s) too, because these two are subsystems which seem to differ between the simulator and the actual device mainly because of timing and racing conditions.</p>
<p>To get iOS SDK access register yourself at</p>
<p><a href="http://developer.apple.com">http://developer.apple.com</a></p>
<div>
<p><em>Pro tip: </em>Alt+mouse press does the pinch and zoom gesture in the simulator, so you can
test your web page zooming features. There is no fully simulated support for touch gestures, though.<em></em></p>
<p style="text-align: center;"><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-10-at-4.52.16-PM.png"><img class="alignnone size-full wp-image-1857" title="Screen shot 2012-02-10 at 4.52.16 PM" src="http://opensourcehacker.com/wp-content/uploads/2012/01/Screen-shot-2012-02-10-at-4.52.16-PM.png" alt="" width="519" height="770" /></a></p>
</div>
<p style="text-align: center;"><em>iPhone Simulator in action</em></p>
<p>Though Apple assumes you run iPhone simulator through XCode you can also run it separately. Just keep the simulator icon in Dock.</p>
<h2>iOS devices</h2>
<p>If you cannot afford iPhone you can always buy iPod Touch which comes
with the same Mobile Safari software as iPhone. There practically exist no differences between iPhone and iPod Touch browser experience &#8211; only the lack of GPS might cause some issue if you are developing location based services.</p>
<p>iPad also has the same WebKit browser engine, but it has different screen resolution and some other slightly differential behavior, so it is not suitable for your mobile site testing needs. But remember that most &#8220;mobile&#8221; tricks like<a href="http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-media-queries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-and-html5-part-5/"> CSS3 media queries</a> or <a href="http://opensourcehacker.com/2012/01/09/setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-and-html5-part-4/">viewport &lt;meta&gt; tag</a> apply on iPads too, so you might accidentally break your site on tables when building mobile version.</p>
<p style="text-align: center;"><a href="http://opensourcehacker.com/wp-content/uploads/2012/01/DSCF0024.jpg"><img class="size-full wp-image-1858 aligncenter" title="DSCF0024" src="http://opensourcehacker.com/wp-content/uploads/2012/01/DSCF0024.jpg" alt="" width="1200" height="981" /></a><em>On the right 2nd gen iPod Touch. It is no longer valid for testing as it did not receive iOS 5 update. If you are buying an used iPod Touch for testing make sure its the latest model.</em></p>
<h2>Console</h2>
<p>Mobile Safari has a simple console for reading log messages on the simulator and iOS devices. You can enable it from the device <em>Settings</em>.</p>
<h2>Easy screenshots from iOS simulator</h2>
<p>Below is a link to a screenshot application to take cropped screenshots from iOS simulator. The screenshots in this tutorial where taken using this application.</p>
<ul class="simple">
<li><a class="reference external" href="http://www.curioustimes.de/iphonesimulatorcropper/">http://www.curioustimes.de/iphonesimulatorcropper/</a></li>
</ul>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/02/09/testing-mobile-sites-on-iphone-ipad-and-their-simulator-mobilizing-websites-with-responsive-design-and-html5-part-10/#comments" thr:count="0" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/02/09/testing-mobile-sites-on-iphone-ipad-and-their-simulator-mobilizing-websites-with-responsive-design-and-html5-part-10/feed/atom/" thr:count="0" />
		<thr:total>0</thr:total>
	</entry>
		<entry>
		<author>
			<name>Mikko Ohtamaa</name>
						<uri>http://opensourcehacker.com</uri>
					</author>
		<title type="html"><![CDATA[Mobile site testing overview (Mobilizing websites with responsive design and HTML5 part 9)]]></title>
		<link rel="alternate" type="text/html" href="http://opensourcehacker.com/2012/01/25/mobile-web-browser-testing-simulator-and-device-combos-mobilizing-websites-with-responsive-design-and-html5-part-9/" />
		<id>http://opensourcehacker.com/?p=1795</id>
		<updated>2012-02-11T09:54:02Z</updated>
		<published>2012-01-24T23:13:08Z</published>
		<category scheme="http://opensourcehacker.com" term="html5" /><category scheme="http://opensourcehacker.com" term="plone" /><category scheme="http://opensourcehacker.com" term="android" /><category scheme="http://opensourcehacker.com" term="apple" /><category scheme="http://opensourcehacker.com" term="bit.ly" /><category scheme="http://opensourcehacker.com" term="css3" /><category scheme="http://opensourcehacker.com" term="firefox" /><category scheme="http://opensourcehacker.com" term="gecko" /><category scheme="http://opensourcehacker.com" term="iframe" /><category scheme="http://opensourcehacker.com" term="ios" /><category scheme="http://opensourcehacker.com" term="ipad" /><category scheme="http://opensourcehacker.com" term="iphone" /><category scheme="http://opensourcehacker.com" term="jquery mobile" /><category scheme="http://opensourcehacker.com" term="mac" /><category scheme="http://opensourcehacker.com" term="opera mini" /><category scheme="http://opensourcehacker.com" term="webkit" /><category scheme="http://opensourcehacker.com" term="windows mobile" />		<summary type="html"><![CDATA[This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post. After your mobile site starts look complete in a development browser (e.g. desktop Firefox+Firebug combo) then it &#8230; <a href="http://opensourcehacker.com/2012/01/25/mobile-web-browser-testing-simulator-and-device-combos-mobilizing-websites-with-responsive-design-and-html5-part-9/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></summary>
		<content type="html" xml:base="http://opensourcehacker.com/2012/01/25/mobile-web-browser-testing-simulator-and-device-combos-mobilizing-websites-with-responsive-design-and-html5-part-9/"><![CDATA[<p><em>This blog post is a part of <a href="../2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">Mobilizing websites with responsive design and HTML5 tutorial</a>. For all posts please see <a href="../2012/01/09/2012/01/09/2012/01/09/mobilizing-websites-with-responsive-design-and-html5-tutorial/">the Introduction post</a>.</em></p>
<p>After your mobile site starts look complete in a development browser (e.g. desktop Firefox+Firebug combo) then it is
time to begin testing it in actual mobile browsers. This blog post gives you introduction and some general tips for mobile browser testing. Each platform (iOS, Android, others) are dealt separately in the future blog posts, <a href="http://opensourcehacker.com">so don&#8217;t forget to follow</a>.</p>
<h2>The micro battle field of browser vendors</h2>
<p>Like with desktop where you test your site across browsers you need to test the mobile site in different mobile
browsers. The testing is important because mobile browsers use different browser engines
and different engine versions. Thus, sometimes output differences are expected and you need to iron
out the ugliest issues.</p>
<p>The major mobile browser engines are <a href="http://www.webkit.org/">WebKit</a> on Safari/Android, <a href="http://en.wikipedia.org/wiki/Presto_%28layout_engine%29">Opera (Presto)</a> and <a href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29">Firefox (Gecko)</a>. You luckily could say that mobile Internet Explorer&#8217;s market share is so minor that you might want to bother for it currently. Microsoft is constantly improving its mobile browser, but currently it is not in a state to match the competition in feature wise and we&#8217;ll look forward to see what Windows Phone 8 will give us.</p>
<p>There exist two popular after market browser (<a href="http://www.opera.com/mobile/">Opera Min</a>i, <a href="http://www.mozilla.org/fi/m/">Firefox Mobile</a>) with their own engines. <a href="http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/">Opera Mini is a thin client browser</a> and special considerations with e.g. Javascript interaction must be followed to make the sites behave well. Firefox Mobile can be installed on Android devices. There exist several &#8220;browsers&#8221; in app stores for iOS and Android, but they are simply wrappers around the native operating system WebKit component and do not contribute significantly to HTML rendering bits.
Opera Mini, being the most popular mobile browser
in the world by &#8220;shipped devices&#8221; count is preferred in developing countries due to capability to run low end phones, or anything having CPU and battery power. Don&#8217;t forget to test on these also.</p>
<p>The good news are that if the mobile browser support CSS3 media queries,
as used in the mobilization strategy of this tutorial, then they are likely to have very good support for HTML5, CSS3 and other modern
goodies. The fixing and workaround work found during the testing
is usually less than what it takes to make the site run
older Internet Explorer.</p>
<p>If you need to define compatibility list of browsers e.g. for an offer I recommend use this <a href="http://jquerymobile.com/gbs/">jQuery Mobile mobile browser grading table</a>. It gives you an overview how &#8220;good&#8221; mobile browsers are.</p>
<div id="accessing-different-mobile-browsers-on-devices-and-simulators" class="section">
<h2><span class="toc-backref">Accessing different mobile browsers on devices and simulators</span></h2>
<p>If you aren&#8217;t a mobile developer you might not have access to a real test device repository.
Luckily, the simulators by the mobile vendor themselves
are pretty good nowadays and you don&#8217;t need to be physically able to access the every device
out there.</p>
<p>It is desirable to minimally have one iOS and/or one Android device for testing. If you are targeting popular iOS devices (iPhone, iPad) it&#8217;s pretty hard to get around the fact that you need to get a Mac. Apple tools are only for Apple computers, like Microsoft mobile tools are only for the latest Windows 7.</p>
<p>There exist generic remote testing services for mobile phones, but they often are costly and not a substitute for the real thing.</p>
<h2>No shortcuts to testing happiness</h2>
<div class="warning">
<p class="last"><strong>Warning: Do not use browser+&lt;iframe&gt;-based &#8220;mobile simulator&#8221; or whatever crap web search</strong><strong> throws on you. </strong></p>
<p class="last">These so called simulators are usually pitiful attempts to grab web traffic for ad money
without actually adding any value to testing. Running<em> &lt;iframe&gt;</em> based simulator in your web browser is simply the same
as opening the page in your desktop web browser directly, with the window size shrink.</p>
</div>
<div class="note">
<h2 class="last">Shortening URLs</h2>
<p class="last">Typing on the mobile devices is cumbersome. Use URL shortening services like <a href="http://bit.ly">bit.ly </a>to shorten your test page URLs, so you can type them in faster on touch screen or keypad.</p>
</div>
</div>
<div id="desktop-web-browser-testing" class="section">
<h2><span class="toc-backref">Desktop web browser testing</span></h2>
<p>If you need to alter HTML code
or main CSS when mobilizing a legacy website you still want to see that
your HTML changes did not introduce issues on the desktop browsers, especially
older and problematic Internet Explorers. Here are some desktop testing resources, but I&#8217;d hope to hear of more pointers and services so please comment.</p>
<h2>Internet Explorer virtual machines</h2>
<p><a class="reference external" href="http://opensourcehacker.com/2011/12/15/install-internet-explorer-6-ie9-virtual-machines-on-any-os-using-one-liner-script-and-virtual-box/">How to automatize the installation all Internet Explorers on OSX and Linux using VirtualBox and one liner shell script. </a></p>
<h2>Remote page rendering services</h2>
<p><a href="http://www.smashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing-tools/">Please refer to this Smashing Magazine article for list of cross browsing testing tools</a>.</p>
</div>
<p class="signature">
 <a href="http://feeds.feedburner.com/mFabrikWebAndMobileDevelopment" rel="alternate" type="application/rss+xml"><img valign="middle" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="border:0"/></a> <a href="http://feeds.feedburner.com/OpenSourceHacker" rel="alternate" type="application/rss+xml">Subscribe to this blog in a reader</a> <a href="http://twitter.com/moo9000"> <img valign="middle"  style="border:0" src="http://opensourcehacker.com/wp-content/uploads/twitter-24.png"></a> <a href="http://twitter.com/moo9000">Follow me on Twitter</a> </p>
]]></content>
		<link rel="replies" type="text/html" href="http://opensourcehacker.com/2012/01/25/mobile-web-browser-testing-simulator-and-device-combos-mobilizing-websites-with-responsive-design-and-html5-part-9/#comments" thr:count="4" />
		<link rel="replies" type="application/atom+xml" href="http://opensourcehacker.com/2012/01/25/mobile-web-browser-testing-simulator-and-device-combos-mobilizing-websites-with-responsive-design-and-html5-part-9/feed/atom/" thr:count="4" />
		<thr:total>4</thr:total>
	</entry>
	</feed>

