Adnane Belmadiaf's Blog - R&D engineerAdnane Belmadiaf's blog.2024-03-13T00:00:00Zhttps://daker.me/Adnane BelmadiafHow to Fix Static Files Being Served with the Wrong text/plain Mimetype2024-03-13T00:00:00Zhttps://daker.me/2024/03/fix-static-files-served-wrong-text-plain-mimetype.html<p>I was performing some Python migrations of a Django web app that used to work, and since I switched to Windows 11 on my work machine, the static files were not being served with the correct mimetype <code>application/javascript</code> but rather <code>text/plain</code>.</p>
<p>After some digging into the web app code, I found that the assets were being served using the <code>serve</code> function from <code>django.views.static</code>. Upon checking the Django code, it turns out it does use the <code>mimetypes</code> module to guess the mimetype of the file.</p>
<pre class="language-sh"><code class="language-sh">C:<span class="token punctuation">\</span><span class="token operator">></span>python<br />Python <span class="token number">3.12</span>.2 <span class="token punctuation">(</span>tags/v3.12.2:6abddd9, Feb <span class="token number">6</span> <span class="token number">2024</span>, <span class="token number">21</span>:26:36<span class="token punctuation">)</span> <span class="token punctuation">[</span>MSC v.1937 <span class="token number">64</span> bit <span class="token punctuation">(</span>AMD64<span class="token punctuation">)</span><span class="token punctuation">]</span> on win32<br />Type <span class="token string">"help"</span>, <span class="token string">"copyright"</span>, <span class="token string">"credits"</span> or <span class="token string">"license"</span> <span class="token keyword">for</span> <span class="token function">more</span> information.<br /><span class="token operator">>></span><span class="token operator">></span> <span class="token function">import</span> mimetypes<br /><span class="token operator">>></span><span class="token operator">></span> content_type, encoding <span class="token operator">=</span> mimetypes.guess_type<span class="token punctuation">(</span><span class="token string">"C:\script.js"</span><span class="token punctuation">)</span><br /><span class="token operator">>></span><span class="token operator">></span> print<span class="token punctuation">(</span>content_type<span class="token punctuation">)</span><br />text/plain</code></pre>
<p>On Gnu/Linux machines, mimetypes uses a list of <code>mime.types</code> files</p>
<pre class="language-sh"><code class="language-sh"><span class="token operator">>></span><span class="token operator">></span> mimetypes.knownfiles<br /><span class="token punctuation">[</span><span class="token string">'/etc/mime.types'</span>, <span class="token string">'/etc/httpd/mime.types'</span>, <span class="token string">'/etc/httpd/conf/mime.types'</span>, <span class="token string">'/etc/apache/mime.types'</span>, <span class="token string">'/etc/apache2/mime.types'</span>, <span class="token string">'/usr/local/etc/httpd/conf/mime.types'</span>, <span class="token string">'/usr/local/lib/netscape/mime.types'</span>, <span class="token string">'/usr/local/etc/httpd/conf/mime.types'</span>, <span class="token string">'/usr/local/etc/mime.types'</span><span class="token punctuation">]</span></code></pre>
<p>However, on Windows (as of Python 3.2), it uses the Windows registry settings.</p>
<pre class="language-sh"><code class="language-sh">C:<span class="token punctuation">\</span><span class="token operator">></span>reg query HKCR<span class="token punctuation">\</span>.js /v <span class="token string">"Content Type"</span><br /><br />HKEY_CLASSES_ROOT<span class="token punctuation">\</span>.js<br /> Content Type REG_SZ text/plain</code></pre>
<p>So, we need to update the key with the correct mimetype.</p>
<pre class="language-sh"><code class="language-sh">C:<span class="token punctuation">\</span><span class="token operator">></span>reg <span class="token function">add</span> HKCR<span class="token punctuation">\</span>.js /v <span class="token string">"Content Type"</span> /t REG_SZ /d application/javascript</code></pre>
<p>Let's check now.</p>
<pre class="language-sh"><code class="language-sh">C:<span class="token punctuation">\</span><span class="token operator">></span>python<br />Python <span class="token number">3.12</span>.2 <span class="token punctuation">(</span>tags/v3.12.2:6abddd9, Feb <span class="token number">6</span> <span class="token number">2024</span>, <span class="token number">21</span>:26:36<span class="token punctuation">)</span> <span class="token punctuation">[</span>MSC v.1937 <span class="token number">64</span> bit <span class="token punctuation">(</span>AMD64<span class="token punctuation">)</span><span class="token punctuation">]</span> on win32<br />Type <span class="token string">"help"</span>, <span class="token string">"copyright"</span>, <span class="token string">"credits"</span> or <span class="token string">"license"</span> <span class="token keyword">for</span> <span class="token function">more</span> information.<br /><span class="token operator">>></span><span class="token operator">></span> <span class="token function">import</span> mimetypes<br /><span class="token operator">>></span><span class="token operator">></span> content_type, encoding <span class="token operator">=</span> mimetypes.guess_type<span class="token punctuation">(</span><span class="token string">"C:\script.js"</span><span class="token punctuation">)</span><br /><span class="token operator">>></span><span class="token operator">></span> print<span class="token punctuation">(</span>content_type<span class="token punctuation">)</span><br />application/javascript</code></pre>
<p>All good, now the mimetype is guessed correctly. I hope this helps if you encounter this issue 😄</p>
Clearing out the cobwebs2022-11-12T00:00:00Zhttps://daker.me/2022/11/clearing-out-the-cobwebs.html<p>Wow, it’s been awhile.</p>
<p>I didn’t really intend to stop posting for five years now, but that’s always how it goes. Between day-to-day concerns and work, we sometimes get lost.</p>
<p>So, I’m getting this post out of the way and can return to posting again. I have made a lot of changes to this blog, the main change is the switch of the SSG engine to <a href="https://www.11ty.dev/">11ty</a> combined with Github pages and Github actions.</p>
<p>I added the light and dark mode and removed all the social media crap and analytics.</p>
<p>You can find the code on <a href="https://github.com/daker/daker.github.io">Github</a>.</p>
Fix Morocco borders on Google Maps (2017 version)2017-08-10T00:00:00Zhttps://daker.me/2017/08/fix-morocco-borders-on-google-maps-2017-version.html<p>Since the <a href="http://daker.me/2015/01/fix-morocco-borders-on-google-maps.html">first solution</a> helped many moroccan developers, i am going to update it to use some new ES6 features like <code>Async</code> and <code>Arrows</code>.</p>
<p>The first thing you need to do is create a simple map Google Maps JavaScript API :</p>
<pre class="language-js"><code class="language-js"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span><br /> <span class="token function-variable function">init</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> mapOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span><span class="token number">29.54619</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">7.36133</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">mapTypeId</span><span class="token operator">:</span> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>MapTypeId<span class="token punctuation">.</span><span class="token constant">ROADMAP</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /> <span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> mapOptions<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><br /><span class="token operator"><</span>script <span class="token keyword">async</span> defer src<span class="token operator">=</span><span class="token string">'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init'</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>650px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>As you can see the map is splitted in two. To fix it we need to set <code>administrative.country</code> feature visibility to off, which will remove the borders and the countries, then you need to load custom Geodata from a <code>FusionTablesLayer</code> source and draw the borders again :</p>
<pre class="language-js"><code class="language-js"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span><br /> <span class="token function-variable function">init</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br /> <span class="token keyword">const</span> mapOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span><span class="token number">29.54619</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">7.36133</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">mapTypeId</span><span class="token operator">:</span> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>MapTypeId<span class="token punctuation">.</span><span class="token constant">ROADMAP</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /> <span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> mapOptions<span class="token punctuation">)</span><span class="token punctuation">,</span><br /> mapStyles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">featureType</span><span class="token operator">:</span> <span class="token string">"administrative.country"</span><span class="token punctuation">,</span> <span class="token literal-property property">stylers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">visibility</span><span class="token operator">:</span> <span class="token string">"off"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> mapType <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>StyledMapType</span><span class="token punctuation">(</span>mapStyles <span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Maroc"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> map<span class="token punctuation">.</span>mapTypes<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'maroc'</span><span class="token punctuation">,</span> mapType <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> map<span class="token punctuation">.</span><span class="token function">setMapTypeId</span><span class="token punctuation">(</span><span class="token string">'maroc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> layer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>FusionTablesLayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">'geometry'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">'1S4aLkBE5u_WS0WMVSchhBgMLdAARuPEjyW4rs20'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">where</span><span class="token operator">:</span> <span class="token string">"col1 contains 'MAR'"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">polylineOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">strokeColor</span><span class="token operator">:</span> <span class="token string">"#333333"</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">strokeWeight</span><span class="token operator">:</span> <span class="token number">2</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">suppressInfoWindows</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> layer<span class="token punctuation">.</span><span class="token function">setMap</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><br /><span class="token operator"><</span>script <span class="token keyword">async</span> defer src<span class="token operator">=</span><span class="token string">"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<p>Note that you will need an <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">API key</a> to use the Google Maps JavaScript API, and finally the div that will hold the map :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>650px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And the finale result will look like this</p>
<p><img src="https://daker.me/assets/posts/morocco.png" alt="Morocco Map" /></p>
Flashing LOLin V3 NodeMCU firmware2016-08-23T00:00:00Zhttps://daker.me/2016/08/flashing-lolin-v3-nodemcu-firmware.html<p>A few months ago, i did bought a chinese version of NodeMCU named LOLin V3, it's not version of 3 of NodeMCU, it's using CH340G chip which is the TTL to USB converter made by a chinese manufacture instead of the FTDI. After using for few times, it's stopped working.</p>
<p><img src="https://daker.me/assets/posts/lolin/board.jpg" alt="LOLin V3" /></p>
<h2>Install the esptool</h2>
<p>We need to download and install the <code>esptool</code> that will help us the new flash the new firmware</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">git</span> clone https://github.com/themadinventor/esptool.git<br />$ <span class="token builtin class-name">cd</span> esptool<br />$ python setup.py <span class="token function">install</span></code></pre>
<h2>Downloading the firmware</h2>
<p>You can grab the latest .bin version of the firmware from the <a href="https://github.com/nodemcu/nodemcu-firmware/releases">github</a> repo, or use <a href="https://nodemcu-build.com/">nodemcu-build</a> to build a custom firmware.</p>
<h2>Flashing the firmware</h2>
<p>First, you need to know is the USB port where the board is plugged, open the commandline, then use the esptool to flash the new firmware :</p>
<pre class="language-sh"><code class="language-sh">$ python esptool.py <span class="token parameter variable">--port</span> /dev/ttyUSB0 <span class="token parameter variable">--baud</span> <span class="token number">9600</span> write_flash <span class="token parameter variable">--flash_mode</span> qio <span class="token parameter variable">--flash_size</span> 32m <span class="token parameter variable">--flash_freq</span> 40m 0x00000 nodemcu_float_0.9.6-dev_20150704.bin<br />esptool.py v1.0.2-dev<br />Connecting<span class="token punctuation">..</span>.<br />Running Cesanta flasher stub<span class="token punctuation">..</span>.<br />Flash params <span class="token builtin class-name">set</span> to 0x0040<br />Writing <span class="token number">450560</span> @ 0x0<span class="token punctuation">..</span>. <span class="token number">450560</span> <span class="token punctuation">(</span><span class="token number">100</span> %<span class="token punctuation">)</span><br />Wrote <span class="token number">450560</span> bytes at 0x0 <span class="token keyword">in</span> <span class="token number">19.5</span> seconds <span class="token punctuation">(</span><span class="token number">184.5</span> kbit/s<span class="token punctuation">)</span><span class="token punctuation">..</span>.<br />Leaving<span class="token punctuation">..</span>.</code></pre>
<p>Once the flashing is done, just open <code>ESPlorer</code>, set the USB port and the baud speed then hit <code>Open</code> :</p>
<p><img src="https://daker.me/assets/posts/lolin/esplorer.jpg" alt="ESPlorer" /></p>
How to Integrate Slack with Launchpad2016-01-26T00:00:00Zhttps://daker.me/2016/01/how-to-integrate-slack-with-launchpad.html<p>Slack is a great platform for team communication, it is a collection of chat rooms, both public and private. It helps confine all your team communications to one place. Slack also provides an API to let you interacte with it, so i have to decided to write a simple app using Flask to integrate Slack with Launchpad using its new webhooks feature.</p>
<p><img src="https://daker.me/assets/posts/slack/lp_slack.png" alt="Launchpad & Slack logos" /></p>
<h2>Deploying to Heroku</h2>
<p>You can check the full steps in the <a href="https://github.com/daker/launchpad-slack/blob/master/README.md">README</a> file</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">git</span> clone git@github.com:daker/launchpad-slack.git<br />$ <span class="token builtin class-name">cd</span> launchpad-slack<br />$ heroku create<br />$ <span class="token function">git</span> push heroku master<br />$ heroku <span class="token function">open</span></code></pre>
<p>Once installed and everything is configured, things will start working like a charm :</p>
<p><img src="https://daker.me/assets/posts/slack/mr.png" alt="Slack chat" />
<img src="https://daker.me/assets/posts/slack/bug.png" alt="Slack Slash command" /></p>
<h2>Contributing</h2>
<p>Of course of you can contribute fixes and improvements, how to do it ? easy :</p>
<ul>
<li>Fork it</li>
<li>Create your feature branch (<code>git checkout -b my-new-feature</code>)</li>
<li>Commit your changes (<code>git commit -am 'Add some feature'</code>)</li>
<li>Push to the branch (<code>git push origin my-new-feature</code>)</li>
<li>Create new Pull Request</li>
</ul>
Migrating emails between IMAP servers with Imapsync2015-09-09T00:00:00Zhttps://daker.me/2015/09/migrating-emails-between-imap-servers-with-imapsync.html<p>Migrating accounts can be a hard task if you are hosting your mails in a shared hosting. Imapsync is a one way synchronisation tool which can migrate mails from one account in a server to another account in another server with a simple command.</p>
<img src="https://daker.me/assets/posts/imapsync.png" width="486" height="309" alt="Imapsync logo" />
<h2>Installing Imapsync</h2>
<p>You need to manually install <code>imapsync</code> by grabbing the code from the github repo</p>
<pre class="language-shell"><code class="language-shell">$ <span class="token function">git</span> clone https://github.com/imapsync/imapsync.git</code></pre>
<p>Before you start compiling, you need to make sure all the dependencies are installed</p>
<pre class="language-shell"><code class="language-shell">$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> libauthen-ntlm-perl libcrypt-ssleay-perl libdigest-hmac-perl libfile-copy-recursive-perl libio-compress-perl libio-socket-inet6-perl libio-socket-ssl-perl libio-tee-perl libmail-imapclient-perl libmodule-scandeps-perl libnet-ssleay-perl libpar-packer-perl libterm-readkey-perl libtest-pod-perl libtest-simple-perl libunicode-string-perl liburi-perl<br />$ <span class="token function">sudo</span> cpan Data::Uniqid</code></pre>
<p>Now let's compile & install</p>
<pre class="language-shell"><code class="language-shell">$ <span class="token builtin class-name">cd</span> imapsync<br />$ <span class="token function">sudo</span> <span class="token function">make</span> <span class="token function">install</span></code></pre>
<p>and now let's start the migration</p>
<pre class="language-shell"><code class="language-shell">$ imapsync <span class="token parameter variable">--host1</span> <span class="token variable">$HOST1</span> <span class="token parameter variable">--user1</span> <span class="token variable">$EMAIL</span> <span class="token parameter variable">--password1</span> <span class="token string">''</span> <span class="token parameter variable">--tls1</span> <span class="token parameter variable">-port1</span> <span class="token variable">$PORT1</span> <span class="token parameter variable">-authmech1</span> PLAIN <span class="token parameter variable">--host2</span> <span class="token variable">$HOST2</span> <span class="token parameter variable">--user2</span> <span class="token variable">$EMAIL</span> <span class="token parameter variable">--password2</span> <span class="token string">''</span> <span class="token parameter variable">--tls2</span> <span class="token parameter variable">-port2</span> <span class="token variable">$PORT2</span> <span class="token parameter variable">--reconnectretry1</span> <span class="token number">1</span> <span class="token parameter variable">--reconnectretry2</span> <span class="token number">1</span> <span class="token parameter variable">--useheader</span> <span class="token string">'Message-Id'</span> <span class="token parameter variable">--skipsize</span></code></pre>
<p>Migrating accounts can take longer depending on their size.</p>
Running Dekko in LXC2015-03-28T00:00:00Zhttps://daker.me/2015/03/running-dekko-in-lxc.html<p>I was approached by Daniel Chapman to help with the new message view in Dekko(Ubuntu Touch email client) which uses Oxide Webview to render the message details. Dekko is using the new Ubuntu SDK 1.1 which is not present in the LTS version 14.04, we have tried to make it run but it was impossible.</p>
<img src="https://daker.me/assets/posts/dekko/lxc-logo.png" width="318" height="293" alt="LXC logo" />
<h2>Setup LXC</h2>
<p>To have a clear idea on how LXC works and how to setup your environment make sure you check <a href="http://nik90.com/fiddling-around-with-lxc-containers/">Nekhelesh's post</a>,</p>
<h2>Unpriviledged container</h2>
<p>To run Dekko we need to create an unpriviledged container using Utopic 14.10, and let's name it <code>utopicdev</code> :</p>
<pre class="language-shell"><code class="language-shell">$ lxc-create <span class="token parameter variable">--template</span> download <span class="token parameter variable">--name</span> utopicdev -- <span class="token parameter variable">--dist</span> ubuntu <span class="token parameter variable">--release</span> utopic <span class="token parameter variable">--arch</span> i386<br />$ <span class="token function">sudo</span> <span class="token function">chown</span> <span class="token parameter variable">-R</span> <span class="token number">1000</span>:1000 ~/.local/share/lxc/utopicdev/rootfs/home/ubuntu</code></pre>
<h2>Running the container</h2>
<p>So at this point i had some issues with cgmanager :</p>
<pre class="language-shell"><code class="language-shell">$ lxc-start <span class="token parameter variable">-n</span> utopicdev<br />lxc_container: cgmanager.c: lxc_cgmanager_create: <span class="token number">299</span> call to cgmanager_create_sync failed: invalid request<br />lxc_container: cgmanager.c: lxc_cgmanager_create: <span class="token number">301</span> Failed to create hugetlb:utopicdev<br />lxc_container: cgmanager.c: cgm_create: <span class="token number">646</span> Error creating cgroup hugetlb:utopicdev<br />lxc_container: start.c: lxc_spawn: <span class="token number">861</span> failed creating cgroups<br />lxc_container: start.c: __lxc_start: <span class="token number">1080</span> failed to spawn <span class="token string">'utopicdev'</span><br />lxc_container: lxc_start.c: main: <span class="token number">342</span> The container failed to start.<br />lxc_container: lxc_start.c: main: <span class="token number">346</span> Additional information can be obtained by setting the <span class="token parameter variable">--logfile</span> and <span class="token parameter variable">--logpriority</span> options.</code></pre>
<p>I fixed it by restarting my machine only, now let's run it in daemon mode :</p>
<pre class="language-shell"><code class="language-shell">$ lxc-start <span class="token parameter variable">-n</span> utopicdev <span class="token parameter variable">-d</span></code></pre>
<h2>Using the container</h2>
<pre class="language-shell"><code class="language-shell">$ lxc-attach --clear-env <span class="token parameter variable">-n</span> utopicdev -- <span class="token function">sudo</span> <span class="token parameter variable">-u</span> ubuntu <span class="token parameter variable">-i</span> <span class="token function">env</span> <span class="token assign-left variable"><span class="token environment constant">DISPLAY</span></span><span class="token operator">=</span><span class="token environment constant">$DISPLAY</span> /home/ubuntu/dekko/__build/dekko</code></pre>
<p>When trying to run it you get the following error :</p>
<pre class="language-shell"><code class="language-shell">$ lxc-attach --clear-env <span class="token parameter variable">-n</span> utopicdev -- <span class="token function">sudo</span> <span class="token parameter variable">-u</span> ubuntu <span class="token parameter variable">-i</span> <span class="token function">env</span> <span class="token assign-left variable"><span class="token environment constant">DISPLAY</span></span><span class="token operator">=</span><span class="token environment constant">$DISPLAY</span> /home/ubuntu/dekko/__build/dekko<br />Cannot chdir into /proc/ directory: Permission denied<br /><span class="token punctuation">[</span>0325/151501:ERROR:setuid_sandbox_client.cc<span class="token punctuation">(</span><span class="token number">195</span><span class="token punctuation">)</span><span class="token punctuation">]</span> Failed to <span class="token builtin class-name">read</span> from <span class="token function">chroot</span> pipe: Not a directory<br /><span class="token punctuation">[</span>0325/151501:FATAL:zygote_main_linux.cc<span class="token punctuation">(</span><span class="token number">549</span><span class="token punctuation">)</span><span class="token punctuation">]</span> Check failed: EnterSuidSandbox<span class="token punctuation">(</span>setuid_sandbox, post_fork_parent_callback<span class="token punctuation">)</span>. Failed to enter setuid sandbox</code></pre>
<p>You get this error is because dekko is using Oxide to render message view which uses setuid sandbox, using <code>OXIDE_DISABLE_SETUID_SANDBOX=1</code> we can disable it since the LXC container already provides the isolation.</p>
<pre class="language-shell"><code class="language-shell">$ lxc-attach --clear-env <span class="token parameter variable">-n</span> utopicdev -- <span class="token function">sudo</span> <span class="token parameter variable">-u</span> ubuntu <span class="token parameter variable">-i</span> <span class="token function">env</span> <span class="token assign-left variable"><span class="token environment constant">DISPLAY</span></span><span class="token operator">=</span><span class="token environment constant">$DISPLAY</span> <span class="token assign-left variable">OXIDE_DISABLE_SETUID_SANDBOX</span><span class="token operator">=</span><span class="token number">1</span> /home/ubuntu/dekko/__build/dekko</code></pre>
<img src="https://daker.me/assets/posts/dekko/dekko.jpg" width="450" height="327" alt="Dekko running in Ubuntu 14.04" />
<p>Note that i am running the compiled version, so you need to install the SDK and compile dekko first.</p>
Fix Morocco borders on Google Maps2015-01-31T00:00:00Zhttps://daker.me/2015/01/fix-morocco-borders-on-google-maps.html<p>Everyone needs to pay attention when using Morocco Map, specially if it doesn't include the Sahara, so here i'll explain how to fix the borders in Google Maps.</p>
<p>The first thing you need to do is to create a simple map :</p>
<pre class="language-js"><code class="language-js"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"http://maps.google.com/maps/api/js?sensor=false"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><br /><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span><br /> <span class="token keyword">var</span> map<span class="token punctuation">;</span><br /> <span class="token keyword">var</span> morocco <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span><span class="token number">29.54619</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">7.36133</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> mapOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">center</span><span class="token operator">:</span> morocco<span class="token punctuation">,</span><br /> <span class="token literal-property property">mapTypeId</span><span class="token operator">:</span> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>MapTypeId<span class="token punctuation">.</span><span class="token constant">ROADMAP</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> mapOptions<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">addDomListener</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span> <span class="token string">'load'</span><span class="token punctuation">,</span> init<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>650px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>As you can see the map is splitted in two, to fix that you need to hide <code>administrative.country</code> map feature, which will remove the borders and the countries names, then you need to use <code>FusionTablesLayer</code> to load custom Geodata so we can draw the borders</p>
<pre class="language-js"><code class="language-js"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"http://maps.google.com/maps/api/js?sensor=false"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><br /><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span><br /> <span class="token keyword">var</span> map<span class="token punctuation">;</span><br /> <span class="token keyword">var</span> mapStyles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">featureType</span><span class="token operator">:</span> <span class="token string">"administrative.country"</span><span class="token punctuation">,</span><span class="token literal-property property">stylers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">visibility</span><span class="token operator">:</span> <span class="token string">"off"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> mapType <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>StyledMapType</span><span class="token punctuation">(</span>mapStyles <span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Maroc"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> morocco <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span><span class="token number">29.54619</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">7.36133</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> mapOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">center</span><span class="token operator">:</span> morocco<span class="token punctuation">,</span><br /> <span class="token literal-property property">mapTypeId</span><span class="token operator">:</span> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>MapTypeId<span class="token punctuation">.</span><span class="token constant">ROADMAP</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> mapOptions<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> map<span class="token punctuation">.</span>mapTypes<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'maroc'</span><span class="token punctuation">,</span> mapType <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> map<span class="token punctuation">.</span><span class="token function">setMapTypeId</span><span class="token punctuation">(</span><span class="token string">'maroc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> layer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>FusionTablesLayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">'geometry'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">'1S4aLkBE5u_WS0WMVSchhBgMLdAARuPEjyW4rs20'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">where</span><span class="token operator">:</span> <span class="token string">"col1 contains 'MAR'"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">styles</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">polylineOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">strokeColor</span><span class="token operator">:</span> <span class="token string">"#333333"</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">strokeWeight</span><span class="token operator">:</span> <span class="token number">2</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">suppressInfoWindows</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> layer<span class="token punctuation">.</span><span class="token function">setMap</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">addDomListener</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span> <span class="token string">'load'</span><span class="token punctuation">,</span> init<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>650px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And the finale result will look like this</p>
<p><img src="https://daker.me/assets/posts/morocco.png" alt="Morocco Map" /></p>
Fishing as a hobby2014-12-14T00:00:00Zhttps://daker.me/2014/12/fishing-as-a-hobby.html<p>Last month i started taking up fishing as a hobby, it's a wonderful outdoor pastime and a great way to relax and unwind. One of the best things about fishing is that you don't need expensive equipment, i did bought some amateur fishing gear(from Avito) to start with(3 rods 5m, 270 & 240cm).</p>
<p><img src="https://daker.me/assets/posts/fishing2.jpg" alt="Fishing tackle" /></p>
<p><img src="https://daker.me/assets/posts/fishing.jpg" alt="Dam Mohammed Benabdellah" /></p>
<p>Until now i haven't caught any fish yet, i learned a lot since i started practicing and i am still trying to find a good spot where i can fish and charge my batteries during the week-end.</p>
How to fix Perl warning setting locale failed on Raspbian2014-10-26T00:00:00Zhttps://daker.me/2014/10/how-to-fix-perl-warning-setting-locale-failed-in-raspbian.html<p>Last week i was trying to make my Raspberry Pi work again, and while reinstalling and upgrading Raspbian OS packages i run into an issue where a perl warning is displayed.</p>
<p><img src="https://daker.me/assets/posts/rpi-logo.png" alt="Raspberry Pi Logo" /></p>
<p>The warning message apprears during the installation packages(invoking Perl) and it's due to missing locales being set not :</p>
<pre class="language-shell"><code class="language-shell"><span class="token punctuation">[</span><span class="token punctuation">..</span>.<span class="token punctuation">]</span><br />perl: warning: Setting locale failed.<br />perl: warning: Please check that your locale settings:<br /> <span class="token environment constant">LANGUAGE</span> <span class="token operator">=</span> <span class="token punctuation">(</span>unset<span class="token punctuation">)</span>,<br /> <span class="token environment constant">LC_ALL</span> <span class="token operator">=</span> <span class="token punctuation">(</span>unset<span class="token punctuation">)</span>,<br /> <span class="token environment constant">LC_TIME</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_MONETARY</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_ADDRESS</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_TELEPHONE</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_NAME</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_MEASUREMENT</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_IDENTIFICATION</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_NUMERIC</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LC_PAPER</span> <span class="token operator">=</span> <span class="token string">"fr_FR.UTF-8"</span>,<br /> <span class="token environment constant">LANG</span> <span class="token operator">=</span> <span class="token string">"en_GB.UTF-8"</span><br /> are supported and installed on your system.<br />perl: warning: Falling back to the standard locale <span class="token punctuation">(</span><span class="token string">"C"</span><span class="token punctuation">)</span>.<br />locale: Cannot <span class="token builtin class-name">set</span> <span class="token environment constant">LC_ALL</span> to default locale: No such <span class="token function">file</span> or directory</code></pre>
<h2>Solution</h2>
<p>You can fix the issue by setting the locale to en_US.UTF-8 for example:</p>
<pre class="language-shell"><code class="language-shell">$ <span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">LANGUAGE</span></span><span class="token operator">=</span>en_US.UTF-8<br />$ <span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">LANG</span></span><span class="token operator">=</span>en_US.UTF-8<br />$ <span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">LC_ALL</span></span><span class="token operator">=</span>en_US.UTF-8<br />$ locale-gen en_US.UTF-8<br />$ dpkg-reconfigure locales</code></pre>
<p>Once you run the last command a dialog will appear to let you choose the desired locale.</p>
Everything you need to know about HTML5 Video2014-08-31T00:00:00Zhttps://daker.me/2014/08/everything-you-need-to-know-about-html5-video.html<p>The HTML5 built-in video support has come to a state where it starts to be adopted by the big players on a large scale(Youtube, Netflix). In this article i'll provide some details of HTML5 video element so you can start using it.</p>
<p><img src="https://daker.me/assets/posts/html5-video/cover.jpg" alt="Chromium HTML5 Video player" /></p>
<p>here is a basic declaration of HTML5 video player :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videofile.ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> Sorry, your browser doesn't support embedded videos,<br /> but don't worry, you can <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videofile.ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>download it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br /> and watch it with your favorite video player!<br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<h2>Controls</h2>
<p>The video element provides a boolean attribute <code>control</code> that makes the controls visible or not to the user.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videofile.ogg<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://daker.me/assets/posts/html5-video/controls-chrome.png" alt="Chrome" /></p>
<p><img src="https://daker.me/assets/posts/html5-video/controls-ff.png" alt="Firefox" /></p>
<p><img src="https://daker.me/assets/posts/html5-video/controls-safari.png" alt="Safari" /></p>
<h2>Poster</h2>
<p>When you want to watch a video on the Web, normally a single frame of the video will display in order to provide a preview of its content. The <code>poster</code> attribute makes it easy to specify an image file.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videofile.ogg<span class="token punctuation">"</span></span> <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poster.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<h2>Preload</h2>
<p>The browser needs allowed to download a small chunk of the media to get the duration & the first frame, the <code>preload</code> attribute has the tree states to tell the browser what to do :</p>
<ul>
<li>"none" does not buffer the file</li>
<li>"auto" buffers the media file</li>
<li>"metadata" loads enough to determine duration & the first fame</li>
</ul>
<h2>Loop</h2>
<p>When present, this attribute will tell the browser to seek back to the start of the media resource once the end is reached.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videofile.ogg<span class="token punctuation">"</span></span> <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poster.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<h2>Sources</h2>
<p>Multiple source files can be specified using the <code><source></code> element in order to provide video in different formats for different browsers. If you're providing source elements, there’s no need to specify a <code>src</code> for your video.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.ogv<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<p>More details about codecs & video type for each browser can be found <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">here</a></p>
<h2>Subtitles</h2>
<p>The video element allows you set subtitles in different languages using the <code>track</code> element.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.ogv<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>English<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions-en.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>track</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Deutsch<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions-de.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>track</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>í•œêµì–´ (Korean)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions-ko.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ko<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>track</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Português<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions-pt.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>track</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Türkçe (Turkish)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions-tr.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>track</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<p>A detailed docs on the <code>track</code> element can be found on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track">MDN</a></p>
<h2>oncanplay</h2>
<p>The <code>oncanplay</code> attribute is very useful, it can be used to serve a fallback if the browser doesn't have capability to play HTML5 video</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span> <span class="token attr-name">oncanplay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handler()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.ogv<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre>
<h2>JavaScript API</h2>
<p>The video element can be controlled via a JavaScript API to do all kind of stuf that can be done via the GUI, here are some examples :</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> video <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"video"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><span class="token comment">/* Play the video */</span><br />video<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token comment">/* Set the volume to 50% */</span><br />video<span class="token punctuation">.</span>volume <span class="token operator">=</span> <span class="token number">0.5</span><span class="token punctuation">;</span><br /><span class="token comment">/* Pause the video */</span><br />video<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token comment">/* Restart the video */</span><br />video<span class="token punctuation">.</span>currentTime <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></code></pre>
<p>Sure the list of APIs is long that can help you build your HTML5 video player, finally i hope that this small introduction will be helpfull for you.</p>
Ubuntu Touch session in Morocco2014-07-31T00:00:00Zhttps://daker.me/2014/07/ubuntu-touch-session-in-morocco.html<p>Next November I'll be speaking at <a href="http://www.jmaghreb.io/en/speakers-2014.php">JMaghreb</a> conference, i'll be giving a talk about the Ubuntu Touch platform and the Ubuntu development story, together with a live coding session and a Q&A round at the end.</p>
<p><img src="https://daker.me/assets/posts/ubuntu/ubuntu.png" alt="Ubuntu logo" /></p>
<p>In this session i'll be covering :</p>
<ul>
<li>System architecture</li>
<li>Security model</li>
<li>QML/HTML5 SDK</li>
<li>Platform APIs(udm, push notifications, webview, etc...)</li>
<li>Writing & testing apps on the device & the emulator</li>
<li>Publishing apps to the store</li>
</ul>
<p>The exact time & date of the session will be announced soon, so if you're going to be in or near Morocco this November, make sure to attend!</p>
How I Did Make The Ubuntu HTML5 Range Slider2014-06-07T00:00:00Zhttps://daker.me/2014/06/how-i-did-make-the-ubuntu-html5-range-slider.html<p>Last week while i was attending the <a href="http://daker.me/2014/05/canonical-sprint-in-malta.html">Canonical Client Sprint</a> in Malta, i start looking into re-lifting some components like the CheckBox/Switch and the Slider, so in this post i'll explain how i did implement the new the Slider.</p>
<p><img src="https://lh4.googleusercontent.com/-OsoN55QFLxg/U5Mf5pZcTcI/AAAAAAAADBk/anOEUUCKFXA/w426-h584/out-7.gif" alt="Ubuntu HTML5 Slider" /></p>
<p>The first thing that needs be done is to remove the default styles using <code>-webkit-appearance: none</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">input[type=range]</span> <span class="token punctuation">{</span><br /> <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Now we can start adding our CSS styles, Webkit/Blink provides an easy way to style the thumb using the pseudo class <code>::-webkit-slider-thumb</code> but first we need to remove the defaul styles.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">input[type=range]</span> <span class="token punctuation">{</span><br /> <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>175<span class="token punctuation">,</span> 175<span class="token punctuation">,</span> 175<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span> 0%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>175<span class="token punctuation">,</span> 175<span class="token punctuation">,</span> 175<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span> 100%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">background-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token property">background-size</span><span class="token punctuation">:</span> 99% 4px<span class="token punctuation">;</span><br /> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span><br /> <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span><br /> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><br /> <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span><br /> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">input[type=range]::-webkit-slider-thumb</span> <span class="token punctuation">{</span><br /> <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/f3Kzw/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<p>Now let's style the thumb :</p>
<pre class="language-css"><code class="language-css"><span class="token selector">input[type=range]::-webkit-slider-thumb</span> <span class="token punctuation">{</span><br /> <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> inset 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span><br /> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span><br /> <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span><br /> <span class="token property">pointer-events</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/f3Kzw/2/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<p>At this point we are still missing the oragne fill color, unfortunatly Webkit/Blink doesn't provide any pseudo class to style this area like IE does, so i have tried to combine the pseudo class <code>::-webkit-slider-thumb</code> and <code>:before</code> to create this effect.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">input[type=range]::-webkit-slider-thumb:before</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> -2000px<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #dd4814<span class="token punctuation">;</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">' '</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/f3Kzw/1/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
Canonical Sprint in Malta2014-05-31T00:00:00Zhttps://daker.me/2014/05/canonical-sprint-in-malta.html<p>Last week i was invited by Canonical to their Client Sprint in Malta among five others community Core Apps developers :</p>
<ul>
<li>Andrew Hayzen and Victor Thompson : Music App developers</li>
<li>Riccardo Padovani : Calculator/Reminders App developer</li>
<li>Kunal Parmarl : Calendar App developer</li>
<li>Nekhelesh Ramananthan : Clock App developer</li>
</ul>
<p><img src="https://daker.me/assets/posts/malta/photo-group.jpg" alt="Photo Group with the Canonical Community Team" /></p>
<p>There have been a lot of discussions about new designs(specially the new header and bottom edge), a lot of autopilot tests fixes and sure the Core Apps devs have provided a lot of feedback about their experience using the SDK components, QTC, Click tools(packaging) and writing autopilot tests.</p>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<h2>HTML5 SDK</h2>
<p>In Tuesday, me Alex Abreu and David Barth had a meeting to discuss what needs to be done for the HTML5 SDK, then i started working on the implementation of the <a href="http://design.canonical.com/2014/03/new-apps-header/">new header</a> design, which will be done in steps.</p>
<h3>Tabs</h3>
<div class="g-post" data-href="https://plus.google.com/101694416703170881163/posts/6UQ1RH8EqkA"></div>
<h3>PageStack</h3>
<div class="g-post" data-href="https://plus.google.com/101694416703170881163/posts/iWXqk92Ks2c"></div>
<p>We still need to add more new APIs to the header, but this will involve updating autopilote tests to make sure everything works as expected.</p>
<p>I have also started working on updating some componenets like the Slider and Switch/Toggle while i was coming back home</p>
<h3>Slider</h3>
<div class="g-post" data-href="https://plus.google.com/101694416703170881163/posts/17FWJAJJ5V7"></div>
<p>We still have a lot things in the pipe(i18n, grid system, sheets), stay tuned!</p>
<p>It was a wonderful and very productif week, thanks to everyone and specially Michelle & Popey!
I hope we will be invited again next time.</p>
How to use Oxide in your Ubuntu QML application2014-05-11T00:00:00Zhttps://daker.me/2014/05/how-to-use-oxide-in-your-ubuntu-qml-application.html<p>Oxide is a Qt5/QML binding based on the Chromium Content API, it's intended to <a href="http://www.chriscoulson.me.uk/blog/?p=196">replace qtwebkit</a> for the touch browser, webapps and the UbuntuWebView.</p>
<p><img src="https://daker.me/assets/posts/ubuntu-browser.png" alt="The Ubuntu Browser app" /></p>
<p>So what does Oxide provide for developers ? It does provide a good chunk a usefull functions :</p>
<ul>
<li>Basic navigation</li>
<li>Incognito mode</li>
<li>Multiple browser contexts</li>
<li>User scripts</li>
<li>Message API</li>
<li>Dialog support</li>
<li>Accelerated compositing</li>
</ul>
<h2>WebView</h2>
<p>Before you start make sure to add the <code>webview</code> to your apparmor policy file, to declare a Webview using Oxide you need to use the <code>WebView</code> component from <code>com.canonical.Oxide</code></p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> com<span class="token punctuation">.</span>canonical<span class="token punctuation">.</span>Oxide <span class="token number">1.0</span><br /><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><br />WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webview<br /> <span class="token literal-property property">width</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>width<br /> <span class="token literal-property property">height</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>height<br /><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> url <span class="token operator">=</span> <span class="token string">"http://daker.me"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>The <code>WebView</code> comes with a <code>preferences</code> property which allows to set a list of attributes :</p>
<ul>
<li>allowFileAccessFromFileUrls (bool)</li>
<li>allowScriptsToCloseWindows (bool)</li>
<li>allowUniversalAccessFromFileUrls (bool)</li>
<li>appCacheEnabled (bool)</li>
<li>canDisplayInsecureContent (bool)</li>
<li>canRunInsecureContent (bool)</li>
<li>caretBrowsingEnabled (bool)</li>
<li>databasesEnabled (bool)</li>
<li>defaultEncoding (QString)</li>
<li>defaultFixedFontSize (uint)</li>
<li>defaultFontSize (uint)</li>
<li>fixedFontFamily (QString)</li>
<li>hyperlinkAuditingEnabled (bool)</li>
<li>javascriptCanAccessClipboard (bool)</li>
<li>javascriptEnabled (bool)</li>
<li>loadsImagesAutomatically (bool)</li>
<li>localStorageEnabled (bool)</li>
<li>minimumFontSize (uint)</li>
<li>objectName (QString)</li>
<li>passwordEchoEnabled (bool)</li>
<li>remoteFontsEnabled(bool)</li>
<li>sanSerifFontFamily (QString)</li>
<li>serifFontFamily (QString)</li>
<li>shrinksStandaloneImagesToFit (bool)</li>
<li>standardFontFamily (QString)</li>
<li>tabsToLinks (bool)</li>
<li>textAreasAreResizable (bool)</li>
<li>touchEnabled (bool)</li>
</ul>
<h3>Example</h3>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> com<span class="token punctuation">.</span>canonical<span class="token punctuation">.</span>Oxide <span class="token number">1.0</span><br /><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><br />WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webview<br /> <span class="token literal-property property">width</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>width<br /> <span class="token literal-property property">height</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>height<br /><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> url <span class="token operator">=</span> <span class="token string">"http://daker.me"</span><br /> <span class="token punctuation">}</span><br /><br /> preferences<span class="token punctuation">.</span>localStorageEnabled<span class="token operator">:</span> <span class="token boolean">true</span><br /> preferences<span class="token punctuation">.</span>loadsImagesAutomatically<span class="token operator">:</span> <span class="token boolean">false</span><br /> preferences<span class="token punctuation">.</span>passwordEchoEnabled<span class="token operator">:</span> <span class="token boolean">true</span><br /><span class="token punctuation">}</span></code></pre>
<h2>WebContext</h2>
<p>Oxide also provides a <code>WebContext</code> which allow to set other settings</p>
<ul>
<li>acceptLangs (QString)</li>
<li>cachePath (QUrl)</li>
<li>cookiePolicy (CookiePolicy)</li>
<li>dataPath (QUrl)</li>
<li>objectName (QString)</li>
<li>popupBlockerEnabled (bool)</li>
<li>product (QString)</li>
<li>sessionCookieMode</li>
<li>storageAccessPermissionDelegate</li>
<li>userAgent (QString)</li>
<li>userAgentOverrideDelegate</li>
<li>userScripts</li>
</ul>
<h3>UserAgent</h3>
<p>This example shows how you can use the <code>WebContext</code> to override the default UserAgent</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> com<span class="token punctuation">.</span>canonical<span class="token punctuation">.</span>Oxide <span class="token number">1.0</span><br /><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><br />WebContext <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webcontext<br /> <span class="token literal-property property">userAgent</span><span class="token operator">:</span> <span class="token string">"Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"</span><br /><span class="token punctuation">}</span><br /><br />WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webview<br /> <span class="token literal-property property">width</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>width<br /> <span class="token literal-property property">height</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>height<br /><br /> <span class="token literal-property property">context</span><span class="token operator">:</span> webcontext<br /><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> url <span class="token operator">=</span> <span class="token string">"http://www.whatsmyuseragent.com"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<h3>networkRequestDelegate</h3>
<p>You can also override the http request headers by using the <code>networkRequestDelegate</code>, in this example i am adding a <a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track</a> (DNT) an HTTP header field on the fly.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> com<span class="token punctuation">.</span>canonical<span class="token punctuation">.</span>Oxide <span class="token number">1.0</span><br /><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><br />WebContext <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webcontext<br /> <span class="token literal-property property">networkRequestDelegate</span><span class="token operator">:</span> WebContextDelegateWorker <span class="token punctuation">{</span><br /> <span class="token literal-property property">source</span><span class="token operator">:</span> Qt<span class="token punctuation">.</span><span class="token function">resolvedUrl</span><span class="token punctuation">(</span><span class="token string">"dnt.js"</span><span class="token punctuation">)</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br />WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webview<br /> <span class="token literal-property property">width</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>width<br /> <span class="token literal-property property">height</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>height<br /><br /> <span class="token literal-property property">context</span><span class="token operator">:</span> webcontext<br /><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> url <span class="token operator">=</span> <span class="token string">"http://www.browserleaks.com/donottrack"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token comment">/*<br /> dnt.js<br /> Made by Adnane Belmadiaf <daker AT ubuntu DOT com><br />*/</span><br /><br />exports<span class="token punctuation">.</span><span class="token function-variable function">onBeforeSendHeaders</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> event<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"DNT"</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<h3>UserScripts</h3>
<p>Oxide supports Greasemonkey-style user scripts, here is an example to do some DOM manipulation.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> com<span class="token punctuation">.</span>canonical<span class="token punctuation">.</span>Oxide <span class="token number">1.0</span><br /><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><br />WebContext <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webcontext<br /> <span class="token literal-property property">userScripts</span><span class="token operator">:</span> <span class="token punctuation">[</span><br /> UserScript <span class="token punctuation">{</span><br /> <span class="token literal-property property">context</span><span class="token operator">:</span> <span class="token string">"oxide://"</span><br /> <span class="token literal-property property">url</span><span class="token operator">:</span> Qt<span class="token punctuation">.</span><span class="token function">resolvedUrl</span><span class="token punctuation">(</span><span class="token string">"oxide_dom.js"</span><span class="token punctuation">)</span><br /> <span class="token literal-property property">incognitoEnabled</span><span class="token operator">:</span> <span class="token boolean">true</span><br /> <span class="token literal-property property">matchAllFrames</span><span class="token operator">:</span> <span class="token boolean">true</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">]</span><br /><span class="token punctuation">}</span><br /><br />WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webview<br /> <span class="token literal-property property">width</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>width<br /> <span class="token literal-property property">height</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>height<br /><br /> <span class="token literal-property property">context</span><span class="token operator">:</span> webcontext<br /><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> url <span class="token operator">=</span> <span class="token string">"http://www.ubuntu.com/"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token comment">// ==UserScript==</span><br /><span class="token comment">// @name Dom Manipulation</span><br /><span class="token comment">// @namespace http://daker.me</span><br /><span class="token comment">// @description Oxide UserScript demo</span><br /><span class="token comment">// ==/UserScript==</span><br /><br /><span class="token keyword">function</span> <span class="token function">oxide_dom</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> div<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'<h1>Content inserted using Oxide UserScript!</h1>'</span><span class="token punctuation">;</span><br /> div<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'red'</span><span class="token punctuation">;</span><br /> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"nav-global"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br />window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> oxide_dom<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h3>Message API</h3>
<p>Oxide does also provide a message API, in this example the script will send a message to Oxide and Oxide will reply back.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> com<span class="token punctuation">.</span>canonical<span class="token punctuation">.</span>Oxide <span class="token number">1.0</span><br /><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><br />WebContext <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webcontext<br /> <span class="token literal-property property">networkRequestDelegate</span><span class="token operator">:</span> WebContextDelegateWorker <span class="token punctuation">{</span><br /> <span class="token literal-property property">source</span><span class="token operator">:</span> Qt<span class="token punctuation">.</span><span class="token function">resolvedUrl</span><span class="token punctuation">(</span><span class="token string">"message-api.js"</span><span class="token punctuation">)</span><br /> <span class="token literal-property property">onMessage</span><span class="token operator">:</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Message from Oxide : "</span><span class="token punctuation">,</span> message<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'ping'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br />WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webview<br /> <span class="token literal-property property">width</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>width<br /> <span class="token literal-property property">height</span><span class="token operator">:</span> parent<span class="token punctuation">.</span>height<br /><br /> <span class="token literal-property property">context</span><span class="token operator">:</span> webcontext<br /><br /> Component<span class="token punctuation">.</span>onCompleted<span class="token operator">:</span> <span class="token punctuation">{</span><br /> url <span class="token operator">=</span> <span class="token string">"http://www.ubuntu.com/"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token comment">/*<br /> message-api.js<br /> This script will send a message to Oxide on every request<br />*/</span><br /><span class="token keyword">var</span> response_msg <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span><br /><br />oxide<span class="token punctuation">.</span><span class="token function-variable function">onMessage</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"msg"</span> <span class="token keyword">in</span> msg<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span>msg<span class="token punctuation">[</span><span class="token string">"msg"</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">'ping'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> response_msg <span class="token operator">=</span> <span class="token string">"pong"</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span><br /><br />exports<span class="token punctuation">.</span><span class="token function-variable function">onBeforeSendHeaders</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> oxide<span class="token punctuation">.</span><span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">msg</span><span class="token operator">:</span> response_msg<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
4 CSS Tricks for Vertical Alignment2014-04-20T00:00:00Zhttps://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html<p>There are a few different techniques to vertically centre objects with CSS, in this post i’ll show you four ways to do it.</p>
<p><img src="https://daker.me/assets/posts/box-model.png" alt="Box Model" /></p>
<h2>display: table-cell</h2>
<p>The first trick is by using <code>display: table</code> for the parent of the element you want to center, then your element will behave like a table cell by using <code>display: table-cell</code>.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/cx6MG/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<h2>line-height</h2>
<p>This technique only works if you have a single line text, by setting the <code>line-height</code> will make in the middle of the parent div.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/5NhNX/1/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<h2>CSS3 transform</h2>
<p>With this technique we use the CSS property transform which is usally used for rotating and scaling elements, but it ca be also used to translate them vertically.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/dYdLn/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<h2>Flex Box</h2>
<p>Flex Box is a layout mode providing for the arrangement of elements on a page.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/z58kQ/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
Update on the Ubuntu HTML5 SDK UI2014-03-26T00:00:00Zhttps://daker.me/2014/03/update-on-the-ubuntu-html5-sdk-ui.html<p>As you may know HTML5 apps are first class citizens on Ubuntu, to acheive that the Ubuntu plateform provides a set of APIs and UI elements like the QML SDK, in this post i'll provide some updates on the HTML5 UI elements.</p>
<p><img src="https://daker.me/assets/posts/ubuntu-html5.png" alt="Ubuntu loves HTML5" /></p>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<h2>Ubuntu Shape</h2>
<p>The actual implementation is using an image as background with the pseudo class :after which is very limited the design team have suggested that we used a simple CSS border-radius for now, a proposal made by <a href="https://plus.google.com/u/0/+KyleNitzsche/posts">Stuart Langridge</a>.</p>
<h2>Swipe To delete</h2>
<p>Last week-end i had to seat and work on this missing feature, it's still a work in progress since i need to finished the design of the API and how it should be declared.</p>
<div class="g-post" data-href="https://plus.google.com/101694416703170881163/posts/auBU41xRHnB"></div>
<h2>i18n</h2>
<p>The first proposal was based on JSON files, but we thought that this will need a lot of work to be consistent with Launchpad translation infrastructure.</p>
<p>The HTML translation is done by using :</p>
<ul>
<li>data-i18n-translate : this is used to collect all the strings that needs be translated used by JavaScript and used for pot generation</li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">data-i18n-translate</span><span class="token punctuation">></span></span>Good Morning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>data-i18n-args : JSON data used to replace variables in the string, it only supports one level so far</li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">data-i18n-translate</span> <span class="token attr-name">data-i18n-args</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{ "user": "daker" }<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Good Morning <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>data-i18n-plural : This is the plural string, here <a href="https://plus.google.com/u/0/+KyleNitzsche/posts">Kyle</a> suggested that we hardcode the "n" counter used to determine if the string will be plural or not to "num", so the dev have to passe the "num" in the data-i18n-args instead of a proper data-i18n-n.</li>
</ul>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">data-i18n-translate</span> <span class="token attr-name">data-i18n-plural</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I have cars<span class="token punctuation">"</span></span> <span class="token attr-name">data-i18n-args</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{ "num": "1", "brand": "Mercedes" }<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>I have a car<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<div class="g-post" data-href="https://plus.google.com/101694416703170881163/posts/DpgEVUdcQJd"></div>
<div class="g-post" data-href="https://plus.google.com/101694416703170881163/posts/AY3k3BYbCSS"></div>
<p>For the JS API, we will provide tree functions <code>i18n.tr</code> and <code>i18n.dtr</code> like in QML and a function to do string replacement <code>i18n.strargs</code> :</p>
<ul>
<li>tr(text);</li>
<li>tr(singular, plural, int n);</li>
<li>dtr(domain, text);</li>
<li>dtr(domain, singular, plural, n);</li>
</ul>
<pre class="language-js"><code class="language-js">i18n<span class="token punctuation">.</span><span class="token function">tr</span><span class="token punctuation">(</span><span class="token string">'Good Morning'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />i18n<span class="token punctuation">.</span><span class="token function">strargs</span><span class="token punctuation">(</span>i18n<span class="token punctuation">.</span><span class="token function">tr</span><span class="token punctuation">(</span><span class="token string">'Good Morning '</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'{ "user": "daker" }'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />i18n<span class="token punctuation">.</span><span class="token function">strargs</span><span class="token punctuation">(</span>i18n<span class="token punctuation">.</span><span class="token function">tr</span><span class="token punctuation">(</span><span class="token string">'I have a car'</span><span class="token punctuation">,</span> <span class="token string">'I have cars'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'{ "num": "1", "brand": "Mercedes" }'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2>Grid Layout</h2>
<p>I have tried to use the flexbox technique to provide a simple implementation of a grid layout by using data attributes :</p>
<ul>
<li>data-role="row" : To define a row</li>
<li>data-role="column" : To define a column</li>
<li>data-align="top, bottom, center" : To define the vertical alignment</li>
<li>data-role="column" + data-offset="[10, 20, 25, 33, 34, 50, 66, 67, 75, 80, 90]" : To define the offset of the column</li>
<li>data-role="column" + data-size="[10, 20, 25, 33, 34, 50, 66, 67, 75, 80, 90]" : To define the size of the column</li>
</ul>
<p>If you want to helps us by contributing, by fixing <a href="https://bugs.launchpad.net/ubuntu-html5-theme">bugs</a> or share your opinions ping me "daker" or "alex-abreu" on #ubuntu-webapps channel on freenode.</p>
On Using The HTML Media Capture in Mobile Browsers2014-02-06T00:00:00Zhttps://daker.me/2014/02/on-using-the-html-media-capture-in-mobile-browsers.html<p>Media Capture is one of the most interesting <a href="http://daker.me/2013/05/5-html5-features-you-need-to-know.html">features</a> in HTML5, especially for mobile devices, it allows you to access the camera and the microphone of the device. HTML Media Capture simply extends the <code><input></code> element with a capture attribute.</p>
<blockquote>
<p>The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment using a media capture mechanism is preferred.</p>
</blockquote>
<p>The element can capture :</p>
<ul>
<li>An image</li>
<li>A video sequence</li>
<li>An audio sequence</li>
</ul>
<h2>Capture image</h2>
<p>To capture an image you need to set the <code>accept="image/*"</code> and the <code>capture</code> attributes, on the implementation on Chrome for Android is quite differente from to Firefox and Opera, Chrome opens the camera directly while the others opens a menu to select from diffrentes sources.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/*<span class="token punctuation">"</span></span> <span class="token attr-name">capture</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://daker.me/assets/posts/media-capture/image-firefox.png" alt="" /> <img src="https://daker.me/assets/posts/media-capture/image-chrome1.png" alt="" /> <img src="https://daker.me/assets/posts/media-capture/image-chrome2.png" alt="" /></p>
<h2>Capture video</h2>
<p>To capture a video, <code>accept="video/*"</code> should be also set, same behaviour will happen for Chrome and Firefox.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/*<span class="token punctuation">"</span></span> <span class="token attr-name">capture</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://daker.me/assets/posts/media-capture/video-firefox.png" alt="" /> <img src="https://daker.me/assets/posts/media-capture/video-chrome1.png" alt="" /> <img src="https://daker.me/assets/posts/media-capture/video-chrome2.png" alt="" /></p>
<h2>Capture audio</h2>
<p>To capture an audio sequence, you need to set <code>audio/*</code> as a value for the <code>accept</code> attribute, which will open the audio recorder application.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/*<span class="token punctuation">"</span></span> <span class="token attr-name">capture</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://daker.me/assets/posts/media-capture/audio-firefox.png" alt="" /> <img src="https://daker.me/assets/posts/media-capture/audio-chrome1.png" alt="" /> <img src="https://daker.me/assets/posts/media-capture/audio-chrome2.png" alt="" /></p>
<p>I hope you'll like this post and you'll start using the HTML Media Capture in your webapps.</p>
How to use the Built-in Screen Recording in Android 4.4 KitKat2014-01-11T00:00:00Zhttps://daker.me/2014/01/how-to-use-the-built-in-screen-recording-in-android-4.html<p>Android 4.4 KitKat now supports screen recording, it's only accessible via an ADB command on unrooted devices a. This featues is really a great way to create walkthroughs, tutorials for apps and also perfect for reporting bugs.</p>
<video controls="" autoplay="" width="350" height="500">
<source src="https://daker.me/assets/posts/android4.4/recording.mp4" type="video/mp4" />
</video>
<p>To start using it you need to install ADB, you can use the phablet-team PPA if you are using Ubuntu which has the tools and dependencies for 12.04, 12.10, 13.04 and 13.10 to get everything setup, if not you can download the Android SDK from the <a href="https://developer.android.com/sdk/index.html">Android developer site</a></p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> add-apt-repository ppa:phablet-team/tools<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> update<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> android-tools-adb</code></pre>
<h2>Enable Developer Mode</h2>
<ul>
<li>Go to the settings menu, and scroll down to "About phone." Tap on it.</li>
<li>Scroll down to the bottom, where you see "Build number."</li>
<li>Tap on it seven (7) times.</li>
</ul>
<h2>Enable the USB debugging</h2>
<p>Once done hit the Back button, youl'll see an new entry called "Developer Options" just above the "About phone." entry, tap on it, scroll down to the debugging section, then enable USB debugging, note that you’ve to confirm the security prompt on your device :</p>
<p><img src="https://daker.me/assets/posts/android4.4/usb-debugging.png" alt="USB debugging" /></p>
<p><img src="https://daker.me/assets/posts/android4.4/usb-debugging2.png" alt="Security Question" /></p>
<h2>Using the Screen Recording</h2>
<p>Once done, you need to make sure that your device is listed & connected using :</p>
<pre class="language-sh"><code class="language-sh">$ adb devices<br />List of devices attached<br />xxxxxxxxxxxxxxxx device</code></pre>
<p>Then all you have to do is :</p>
<pre class="language-sh"><code class="language-sh">$ adb shell screenrecord /sdcard/recording.mp4 <span class="token operator">&&</span> adb pull /sdcard/recording.mp4</code></pre>
<p>The default and maximum duration of a screenrecord is 3 minutes, you can use the <code>--time-limit</code> argument to set the limit you want, here all arguements you can set :</p>
<ul>
<li>--help : Displays a usage summary.</li>
<li>--size <WIDTHxHEIGHT> : Sets the video size, for example: 1280x720. The default value is the device's main display resolution (if supported), 1280x720 if not. For best results, use a size supported by your device's Advanced Video Coding (AVC) encoder.</WIDTHxHEIGHT></li>
<li>--bit-rate <RATE> : Sets the video bit rate for the video, in megabits per second. The default value is 4Mbps. You can increase the bit rate to improve video quality or lower it for smaller movie files. The following example sets the recording bit rate to 6Mbps:
screenrecord --bit-rate 6000000 /sdcard/demo.mp4</RATE></li>
<li>--time-limit <TIME> : Sets the maximum recording time, in seconds. The default and maximum value is 180 (3 minutes).</TIME></li>
<li>--rotate : Rotates the output 90 degrees. This feature is experimental.</li>
<li>--verbose : Displays log information on command line screen. If you do not set this option, the utility does not display any information while running.</li>
</ul>
Chrome’s requestAutocomplete(), for a Better Payment on the Web & Mobile2014-01-07T00:00:00Zhttps://daker.me/2014/01/chrome-requestautocomplete-better-payment-web-mobile.html<p>Google is always trying to make the web experience very easy including the online shopping experience, filling out the 21 pieces of data can be a painful task and specialy on mobile devices. Studies have shown that most of the consumers will leave the website or the mobile app without complete checkout because they have to fill the checkout form which detailed & very long. In 2011 Google launched Google Wallet, a step forward to try to simplify the payment process and make it less time consuming.</p>
<p>During the last I/O Google introduced a new API called <code>requestAutocomplete()</code>, which can auto-populate all of your payment details stored in the browser.</p>
<blockquote>
<p>Particularly for mobile applications, this solves the problem of working with long or even multi-page forms. It improves the purchase checkout flow and reduces drop-off with a secure and concise payment submission UI. For merchants, this results in improved conversion rates, sorely needed in mobile purchase scenarios.</p>
</blockquote>
<p><img src="https://daker.me/assets/posts/requestAutocomplete/1.png" alt="requestAutocomplete" /></p>
<p>Calling the <code>requestAutocomplete()</code> on a form element will auto-populate the data, the browser will use the form to detect which input types to populate, which means that the form doesn’t really need to be shown to the user.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkout<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Checkout<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br /><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkout-form<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cc-name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cc-number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ccnumber<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cc-exp<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ccexp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cc-csc<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cccvc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billing street-address<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billaddress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billing locality<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billtown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billing region<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billstate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billing postal-code<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billzip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shipping street-address<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billaddress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shipping locality<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billtown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shipping region<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billstate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shipping postal-code<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>billzip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token operator"><</span>script<span class="token operator">></span><br /> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token keyword">var</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'checkout-form'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'checkout'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token string">"requestAutocomplete"</span> <span class="token keyword">in</span> form<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span><br /><br /> button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> form<span class="token punctuation">.</span><span class="token function">requestAutocomplete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> form<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'autocomplete'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> <span class="token comment">// The form contains the data. We could either submit it, or read the data</span><br /> form<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre>
<h2>Autocomplete Attributes</h2>
<h3>Credit Card Details</h3>
<p>The credit card data includes the following field types :</p>
<ul>
<li>email</li>
<li>cc-name</li>
<li>cc-number</li>
<li>cc-exp-month</li>
<li>cc-exp-year</li>
<li>cc-csc</li>
</ul>
<h3>Address Details</h3>
<p>Both the <code>shipping</code> and <code>billing</code> addresses have the following fields :</p>
<ul>
<li>name</li>
<li>tel</li>
<li>tel-country-code</li>
<li>tel-national</li>
<li>street-address</li>
<li>locality</li>
<li>region</li>
<li>postal-code</li>
<li>country</li>
</ul>
<h2>Autocomplete Events</h2>
<p>Once <code>requestAutocomplete()</code> has been called, a permissions dialog will be shown to the user, so he can accept or not to share his information with the page or fill them if he didn't.</p>
<p><img src="https://daker.me/assets/posts/requestAutocomplete/2.png" alt="Me" /></p>
<p>The autocomplete process is asynchronous, so you need to listen for the <code>autocomplete</code> and <code>autocompleteerror</code> events :</p>
<ul>
<li><code>autocomplete</code> : fired if the user has successfully submitted the all payment details</li>
<li><code>autocompleteerror</code> : fired if an error occurs, it provides a <code>reason</code> property :
<ul>
<li>invalid – The user's data did not pass the HTML5 form validation.</li>
<li>cancel – The user clicked cancel on the dialog.</li>
<li>disabled – The browser supports requestAutocomplete, but it’s disabled in browser preferences.</li>
</ul>
</li>
</ul>
<pre class="language-js"><code class="language-js">form<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'autocomplete'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> form<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br />form<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'autocompleteerror'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>reason <span class="token operator">==</span> <span class="token string">'invalid'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> form<span class="token punctuation">.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>reason <span class="token operator">!=</span> <span class="token string">'cancel'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> window<span class="token punctuation">.</span>location <span class="token operator">=</span> <span class="token string">'/checkout/'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>reason <span class="token operator">==</span> <span class="token string">'disabled'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> window<span class="token punctuation">.</span>location <span class="token operator">=</span> <span class="token string">'/checkout/'</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>You can already start using it while being compatible with others browsers that didn't implement it yet(and hope they will standardize it), by using the <code>event.reason</code> as shown above and fallback to a normal checkout form.</p>
<h2>Conclusion</h2>
<p>From a consumer perspective, it means that the 21 pieces of data to enter will be reduced to two or three clicks, this will dramatically improve the usability and conversion rates.</p>
<p>NB: The <code>requestAutocomplete() </code> is only implemented on Chrome Mobile and Google Chrome for Windows & MacOS.</p>
Devtools Console, from Novice to Ninja2013-12-21T00:00:00Zhttps://daker.me/2013/12/devtools-console-from-novice-to-ninja.html<p>The <a href="http://daker.me/2013/06/5-html5-javascript-apis-to-keep-an-eye-on.html">JavaScript</a> console is a powerful tool that allows developers debug their code using functions provided by the Console API and a shell prompt where they can enter commands and interact with the document object.</p>
<p><img src="https://daker.me/assets/posts/jsconsole/console.png" alt="JavaScript Console" /></p>
<h2>Filters</h2>
<p>There are different buttons allowing you to filter the display of messages logged to the console:</p>
<ul>
<li>All — Shows all console output.</li>
<li>Errors — Only show output from console.error()</li>
<li>Warnings — Only show output from console.warn()</li>
<li>Logs — Only show output from console.log(), <a href="http://console.info/">console.info</a>() and console.debug().</li>
<li>Debug — Only show output from console.timeEnd() and other console output.</li>
</ul>
<p><img src="https://daker.me/assets/posts/jsconsole/filters.png" alt="Filters" /></p>
<h2>Errors and warnings</h2>
<ul>
<li><a href="http://console.info/">console.info</a> : Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.</li>
<li>console.warn : Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called.</li>
<li>console.debug : Writes a message to the console, including a hyperlink to the line where it was called.</li>
<li>console.error : Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called.</li>
</ul>
<p><img src="https://daker.me/assets/posts/jsconsole/logging.png" alt="Logging" /></p>
<h2>console.dir[xml]</h2>
<p><code>console.dir(object)</code> prints an interactive listing of all properties of the object, while <code>console.dirxml(node)</code> prints the XML source tree of an element.</p>
<p><img src="https://daker.me/assets/posts/jsconsole/dir.png" alt="JavaScript Console" /></p>
<h2>Assertions</h2>
<p>Tests that an expression is true using <code>console.assert</code>. If not, it will write a message to the console and throw an exception.</p>
<pre class="language-sh"><code class="language-sh">var <span class="token assign-left variable">x</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span><br />console.assert<span class="token punctuation">((</span>x <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span>, <span class="token string">"assert message: x != 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2>Grouping output</h2>
<p><code>console.group</code> allows you to group the message or log in Console tab. If you have some many logs in your code, you can probably divide your log into small group or subgroup</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token string">"jsmith"</span><span class="token punctuation">,</span> authenticated <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span><br />console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"Authentication phase"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Authenticating user '%s'"</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token comment">// authentication code here...</span><br /><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>authenticated<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"User '%s' not authenticated."</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><br /><span class="token punctuation">}</span><br />console<span class="token punctuation">.</span><span class="token function">groupEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>You can also do nested grouping :</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token string">"jsmith"</span><span class="token punctuation">,</span> authenticated <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span> authorized <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br /><span class="token comment">// Top-level group</span><br />console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"Authenticating user '%s'"</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">if</span> <span class="token punctuation">(</span>authenticated<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"User '%s' was authenticated"</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token comment">// Start nested group</span><br /> console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"Authorizing user '%s'"</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span>authorized<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"User '%s' was authorized."</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token comment">// End nested group</span><br /> console<span class="token punctuation">.</span><span class="token function">groupEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token comment">// End top-level group</span><br />console<span class="token punctuation">.</span><span class="token function">groupEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"A group-less log trace."</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><img src="https://daker.me/assets/posts/jsconsole/nested.png" alt="Nested Grouping" /></p>
<h2>Logging Array Data</h2>
<p><code>console.table()</code> is a very handy fonction to display Array object</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> langs <span class="token operator">=</span> <span class="token punctuation">[</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"JavaScript"</span><span class="token punctuation">,</span> <span class="token literal-property property">extension</span><span class="token operator">:</span> <span class="token string">".js"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"HTML"</span><span class="token punctuation">,</span> <span class="token literal-property property">extension</span><span class="token operator">:</span> <span class="token string">".html"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"CoffeeScript"</span><span class="token punctuation">,</span> <span class="token literal-property property">extension</span><span class="token operator">:</span> <span class="token string">".coffee"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"SASS"</span><span class="token punctuation">,</span> <span class="token literal-property property">extension</span><span class="token operator">:</span> <span class="token string">".sass"</span> <span class="token punctuation">}</span><br /><span class="token punctuation">]</span><span class="token punctuation">;</span><br /><br />console<span class="token punctuation">.</span><span class="token function">table</span><span class="token punctuation">(</span>langs<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><img src="https://daker.me/assets/posts/jsconsole/table.png" alt="JavaScript Console" /></p>
<h2>Measuring Execution time</h2>
<p>To mesure how long something it takes to execute a set of instructions :</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> i<span class="token punctuation">,</span> t <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span><br /><br /><span class="token comment">// Start</span><br />console<span class="token punctuation">.</span><span class="token function">time</span><span class="token punctuation">(</span><span class="token string">"OPNAME"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><br /> t <span class="token operator">+=</span> i<span class="token punctuation">;</span><br /><br /><span class="token comment">// Stop</span><br />console<span class="token punctuation">.</span><span class="token function">timeEnd</span><span class="token punctuation">(</span><span class="token string">"OPNAME"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<h2>Tracing</h2>
<p><code>console.trace()</code> prints the stacktrace of JavaScript execution at the point where it was called.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token constant">F</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token constant">K</span><span class="token punctuation">(</span>v <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token keyword">function</span> <span class="token constant">K</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token constant">Y</span><span class="token punctuation">(</span>v <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token keyword">function</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">trace</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span><br /><br /><span class="token constant">F</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><img src="https://daker.me/assets/posts/jsconsole/trace.png" alt="Console Trace" /></p>
<h2>Shortcuts</h2>
<ul>
<li><code>Ctrl + Shift + J</code> : Open the Chrome/ium Console</li>
<li><code>Ctrl+l</code> : Clear the console</li>
</ul>
<h2>References</h2>
<ul>
<li><a href="http://getfirebug.com/wiki/index.php/Console_Panel">Firebug Wiki</a></li>
<li><a href="https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#console-assert">Chrome DevTools documentation</a></li>
</ul>
Adding UserMetrics to your app on Ubuntu Touch2013-11-30T00:00:00Zhttps://daker.me/2013/11/adding-usermetrics-to-your-app-on-ubuntu-touch.html<p>The Welcome Screen infographic is one of the key components for the customization of the user experience on <a href="http://www.ubuntu.com/phone/install">Ubuntu Touch</a>, beautiful visualisations of data from multiple sources, the <code>UserMetrics</code> is the responsible component for updating the infographic using QML.</p>
<p><img src="https://daker.me/assets/posts/utouch/5.png" alt="Welcome Screen" /></p>
<p>To use the <code>UserMetrics</code> QML module you need to install <code>qtdeclarative5-usermetrics0.1</code> package on the desktop :</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> qtdeclarative5-usermetrics0.1</code></pre>
<h2>Apparmor Policy groups</h2>
<p>Add the <code>usermetrics</code> to your apparmor file :</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"policy_groups"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br /> ...<br /> <span class="token string">"usermetrics"</span><br /> <span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token property">"policy_version"</span><span class="token operator">:</span> <span class="token number">1.0</span><br /><span class="token punctuation">}</span></code></pre>
<h2>QML</h2>
<p>First you need to import the <code>UserMetrics</code> module :</p>
<pre class="language-sh"><code class="language-sh"><span class="token function">import</span> UserMetrics <span class="token number">0.1</span></code></pre>
<p>Then create the metric(s) :</p>
<pre class="language-sh"><code class="language-sh">Metric <span class="token punctuation">{</span><br /> /* Set a unique ID <span class="token keyword">for</span> each metric object you use so you can access it <span class="token keyword">in</span> your QML code. */<br /> id: gameMetric<br /><br /> /* Set a unique name <span class="token keyword">for</span> each metric object, this is used <span class="token keyword">for</span> the storage of the metric data. */<br /> name: <span class="token string">"game-metrics"</span><br /><br /> /* This is the <span class="token function">format</span> <span class="token keyword">for</span> the plural case. */<br /> format: <span class="token string">"%1 missions completed today"</span><br /><br /> /* This is the <span class="token function">format</span> <span class="token keyword">for</span> no data <span class="token keyword">for</span> the day. */<br /> emptyFormat: <span class="token string">"0 missions completed today"</span><br /><br /> /* This is the gettext domain used <span class="token keyword">for</span> the localisation, you can use the applicationName. */<br /> domain: <span class="token string">"com.ubuntu.developer.daker.mygame"</span><br /><span class="token punctuation">}</span></code></pre>
<p>The Metric component provides two methods :</p>
<p>— <code>increment(double amount = 1.0)</code> : You can use this method if you want to increment metric by a specific amount ex: gameMetric.increment(3) or gameMetric.increment() to increment the metric by 1.
— <code>update(double value)</code> : You can use this method if you want to reset the metric and set a specific amount ex: gameMetric.update(5)</p>
<p>The use of the Metric is not limited by the number.</p>
Web Apps Remote Debugging on Ubuntu Touch2013-11-14T00:00:00Zhttps://daker.me/2013/11/web-apps-remote-debugging-on-ubuntu-touch.html<p>If you are writing Web Apps for <a href="http://www.ubuntu.com/phone/install">Ubuntu Touch</a>, you might want to test them directly on the phone using the Ubuntu browser, this can be done by remotely debugging web pages using the built-in DevTools, which allow you to inspect, debug, and analyze the on-device experience with the full suite of tools you're used to.</p>
<p><img src="https://daker.me/assets/posts/utouch/3.png" alt="Ubuntu Browser" /></p>
<p>The phablet-team PPA has the tools and dependencies for 12.04, 12.10, 13.04 and 13.10 to get everything setup:</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> add-apt-repository ppa:phablet-team/tools<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> update<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> phablet-tools android-tools-adb android-tools-fastboot</code></pre>
<p>Plug the device via the USB cable, then run the following commands to connect to it through ADB</p>
<pre class="language-sh"><code class="language-sh">$ adb shell</code></pre>
<p>Switch to the phablet user :</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> <span class="token parameter variable">-u</span> phablet <span class="token parameter variable">-i</span></code></pre>
<p>Take a note of your phone IP adresse :</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">ifconfig</span> wlan0 <span class="token operator">|</span> <span class="token function">grep</span> <span class="token string">'inet addr'</span> <span class="token operator">|</span> <span class="token function">cut</span> -d: <span class="token parameter variable">-f2</span> <span class="token operator">|</span> <span class="token function">awk</span> <span class="token string">'{print $1}'</span></code></pre>
<p>Once done launch the webbrowser app using :</p>
<pre class="language-sh"><code class="language-sh">$ upstart-app-launch webbrowser-app <span class="token parameter variable">--inspector</span></code></pre>
<p>A browser instance will launch on the phone, point to URL of your webapp then access the Devtools with your Chrome/ium browser by opening <code>http://$YOUR-PHONE-IP:9221</code></p>
<p><img src="https://daker.me/assets/posts/utouch/4.png" alt="DevTools" /></p>
<p>The built-in Devtools is a bit old & slow so i am using the hosted version : <code>https://chrome-devtools-frontend.appspot.com/static/30.0.1599.118/devtools.html?ws=$YOUR-PHONE-IP:9221/devtools/page/$PAGE-ID</code>, you can get the page id from <code>http://$YOUR-PHONE-IP:9221/pagelist.json</code></p>
Ubuntu Touch User-Agent2013-11-06T00:00:00Zhttps://daker.me/2013/11/ubuntu-touch-user-agent.html<p>With the launch of <a href="http://www.ubuntu.com/phone/install">Ubuntu Touch</a> v1.0, the OS now ships its own QtWebKit based browser which will be replaced by <a href="https://launchpad.net/oxide">Oxide</a> a Chromium-powered webview by 14.04. There has been a lot of <a href="https://bugs.launchpad.net/webbrowser-app/+bug/1179596">discussions</a> arround the user-agent because many large sites(Facebook, Google, Twitter, Yahoo etc..) are sniffing the UA(for iPhone or Android tokens) to serve the mobile version of the site.</p>
<p>Adding an Android or iPhone token will lead to unwanted behaviours, like showing ads for the Android app or even trying to open the Google Play app or the Youtube app. The browser now reports it in the following formats, depending on whether the device is a phone or a tablet, with the addition of an <a href="https://bazaar.launchpad.net/~phablet-team/webbrowser-app/trunk/view/head:/src/Ubuntu/Components/Extras/Browser/ua-overrides.js">override mechanism</a> that will override the UA on the fly and the site will serve us a proper mobile content.</p>
<p><img src="https://daker.me/assets/posts/utouch/1.png" alt="Facebook Android Ads" /></p>
<h2>Phone</h2>
<pre class="language-sh"><code class="language-sh">Mozilla/5.0 <span class="token punctuation">(</span>Ubuntu<span class="token punctuation">;</span> Mobile<span class="token punctuation">)</span> WebKit/537.21</code></pre>
<h2>Tablet</h2>
<pre class="language-sh"><code class="language-sh">Mozilla/5.0 <span class="token punctuation">(</span>Ubuntu<span class="token punctuation">;</span> Tablet<span class="token punctuation">)</span> WebKit/537.21</code></pre>
<h2>Pattern</h2>
<pre class="language-sh"><code class="language-sh">Mozilla/5.0 <span class="token punctuation">(</span>Ubuntu<span class="token punctuation">;</span> <span class="token variable">$FormFactor</span><span class="token punctuation">)</span> WebKit/<span class="token variable">$WebKitRev</span></code></pre>
<p>You can also get it through JavaScript using the <code>navigator.userAgent</code></p>
<p><img src="https://daker.me/assets/posts/utouch/2.png" alt="Using the console" /></p>
<p>So if you are doing UA sniffing it's really better to look for "Mobile" rather than looking the OS identifier.</p>
Package your Webapp for Ubuntu Touch2013-10-15T00:00:00Zhttps://daker.me/2013/10/package-your-webapp-for-ubuntu-touch.html<p>Last week i discovered a HTML5 game called '<a href="http://phoboslab.org/xtype/">X-Type</a>', which is basically a free dual stick shooter with endless boss battles. Unfortunately this game does only work on iOS and Android and it does use the UA sniffing mechanism to serve both desktop and mobile versions, and using the Ubuntu Touch user-agent it will only serve the desktop version which will not work on the phone.</p>
<p><img src="https://daker.me/assets/posts/xtype/xtype.png" alt="X-Type running on Ubuntu Touch" /></p>
<p>First using the Qt Creator you have to create a "HTML5 Touch UI" project which will produce the following QML code :</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> QtQuick <span class="token number">2.0</span><br /><span class="token keyword">import</span> Ubuntu<span class="token punctuation">.</span>Components <span class="token number">0.1</span><br /><span class="token keyword">import</span> QtWebKit <span class="token number">3.0</span><br /><br />MainView <span class="token punctuation">{</span><br /> <span class="token literal-property property">objectName</span><span class="token operator">:</span> <span class="token string">"mainView"</span><br /> <span class="token literal-property property">applicationName</span><span class="token operator">:</span> <span class="token string">"com.ubuntu.developer.daker.x-type"</span><br /> <span class="token literal-property property">automaticOrientation</span><span class="token operator">:</span> <span class="token boolean">true</span><br /><br /> <span class="token literal-property property">width</span><span class="token operator">:</span> units<span class="token punctuation">.</span><span class="token function">gu</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><br /> <span class="token literal-property property">height</span><span class="token operator">:</span> units<span class="token punctuation">.</span><span class="token function">gu</span><span class="token punctuation">(</span><span class="token number">75</span><span class="token punctuation">)</span><br /><br /> Flickable <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webViewFlickable<br /> anchors<span class="token punctuation">.</span>fill<span class="token operator">:</span> parent<br /><br /> WebView <span class="token punctuation">{</span><br /> <span class="token literal-property property">id</span><span class="token operator">:</span> webView<br /> anchors<span class="token punctuation">.</span>fill<span class="token operator">:</span> parent<br /> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">"http://phoboslab.org/xtype/"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>The problem with using the QtWebKit Webview is that the device-pixel-ratio (DPR) is not set automatically causing the content of the Webview to not scale correctly, so you'll need to get the corresponding value for your device from the <code>QTWEBKIT_DPR</code> environment variable, there is actually no way to read those variables using QML so you'll need to use some C++ code to read the <code>QTWEBKIT_DPR</code> and passe it to QML so the content of the WebView will scale accordingly.</p>
<p>The Ubuntu Touch Browser Plugin provides a component called <code>UbuntuWebView</code>, it uses some kind of UA overrides to bypass the UA sniffing used to serve the mobile version of webapp(Gmail, G+, Facebook, Twitter, etc...) and changes the UA on the fly, unfortunately there was no way to set your own UA using the <code>UbuntuWebView</code> but now you can since this <a href="https://bugs.launchpad.net/webbrowser-app/+bug/1237365">bug #1237365</a> has been fixed.</p>
<p>Also with the <code>UbuntuWebView</code> the <code>DPR</code> weren't set automatically(<a href="https://bugs.launchpad.net/webbrowser-app/+bug/1237348">bug #1237348</a>), it was also fixed and all those fixes has been shipped with image #96.</p>
<p>Here is the QML code i used to embed the "X-Type" game(Fullscreen) but first you need to install the browser plugin :</p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> qtdeclarative5-ubuntu-ui-extras-browser-plugin</code></pre>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> QtQuick <span class="token number">2.0</span><br /><span class="token keyword">import</span> Ubuntu<span class="token punctuation">.</span>Components <span class="token number">0.1</span><br /><span class="token keyword">import</span> Ubuntu<span class="token punctuation">.</span>Components<span class="token punctuation">.</span>Extras<span class="token punctuation">.</span>Browser <span class="token number">0.1</span><br /><br /><br />MainView <span class="token punctuation">{</span><br /> <span class="token literal-property property">objectName</span><span class="token operator">:</span> <span class="token string">"mainView"</span><br /> <span class="token literal-property property">applicationName</span><span class="token operator">:</span> <span class="token string">"com.ubuntu.developer.daker.x-type"</span><br /> <span class="token comment">//automaticOrientation: true</span><br /><br /> <span class="token literal-property property">width</span><span class="token operator">:</span> units<span class="token punctuation">.</span><span class="token function">gu</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span><br /> <span class="token literal-property property">height</span><span class="token operator">:</span> units<span class="token punctuation">.</span><span class="token function">gu</span><span class="token punctuation">(</span><span class="token number">75</span><span class="token punctuation">)</span><br /><br /> UbuntuWebView <span class="token punctuation">{</span><br /> anchors<span class="token punctuation">.</span>fill<span class="token operator">:</span> parent<br /> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">"http://phoboslab.org/xtype/"</span><br /> <span class="token comment">/* This function is used to override the UA */</span><br /> <span class="token keyword">function</span> <span class="token function">getUAString</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">return</span> <span class="token string">"Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>you need to create a <code>manifest.json</code> file :</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"A Free HTML5 Dual Stick Shooter"</span><span class="token punctuation">,</span><br /> <span class="token property">"framework"</span><span class="token operator">:</span> <span class="token string">"ubuntu-sdk-13.10"</span><span class="token punctuation">,</span><br /> <span class="token property">"architecture"</span><span class="token operator">:</span> <span class="token string">"all"</span><span class="token punctuation">,</span><br /> <span class="token property">"hooks"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"x-type"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"apparmor"</span><span class="token operator">:</span> <span class="token string">"x-type.json"</span><span class="token punctuation">,</span><br /> <span class="token property">"desktop"</span><span class="token operator">:</span> <span class="token string">"x-type.desktop"</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token property">"maintainer"</span><span class="token operator">:</span> <span class="token string">"Adnane Belmadiaf <daker@ubuntu.com>"</span><span class="token punctuation">,</span><br /> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"com.ubuntu.developer.daker.x-type"</span><span class="token punctuation">,</span><br /> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"X-Type"</span><span class="token punctuation">,</span><br /> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"0.4"</span><br /><span class="token punctuation">}</span></code></pre>
<p>the security policy groups <code>x-type.json</code> :</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"policy_groups"</span><span class="token operator">:</span> <span class="token punctuation">[</span><br /> <span class="token string">"networking"</span><br /> <span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token property">"policy_version"</span><span class="token operator">:</span> <span class="token number">1</span><br /><span class="token punctuation">}</span></code></pre>
<p>and a .desktop file :</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">[</span>Desktop Entry<span class="token punctuation">]</span><br />Name<span class="token operator">=</span>x<span class="token operator">-</span>type<br />Comment<span class="token operator">=</span><span class="token constant">A</span> Free <span class="token constant">HTML5</span> Dual Stick Shooter<br />Exec<span class="token operator">=</span>qmlscene $@ x<span class="token operator">-</span>type<span class="token punctuation">.</span>qml<br />Icon<span class="token operator">=</span><span class="token punctuation">.</span><span class="token operator">/</span>x<span class="token operator">-</span>type<span class="token punctuation">.</span>png<br />Terminal<span class="token operator">=</span><span class="token boolean">false</span><br />Type<span class="token operator">=</span>Application<br /><span class="token constant">X</span><span class="token operator">-</span>Ubuntu<span class="token operator">-</span>Touch<span class="token operator">=</span><span class="token boolean">true</span></code></pre>
<p>you need to add the icon and now all you have to do is to build the click package using <code>click build .</code>and <a href="https://myapps.developer.ubuntu.com/dev/click-apps/new/">upload</a> it to the store. I have also packaged another HTML5 game called <a href="http://heliom.github.io/bytesjack/">BytesJack</a> using the same method, the source code of both games can be found <a href="https://bazaar.launchpad.net/~daker/+junk/x-type/files">here</a> and <a href="https://bazaar.launchpad.net/~daker/+junk/bytesjack/files">here</a>.</p>
<p>Happy hacking!</p>
Automate Your Dev Environment With Vagrant2013-09-29T00:00:00Zhttps://daker.me/2013/09/automate-your-dev-environment-with-vagrant.html<p>I started feeling the need of automating my developement environments when i started contributing to several django projects run by the community, each project uses a different django version and several dependencies, thoses dependencies can be found or not on the Ubuntu version i use for my daily work. Vagrant is a great tool for those situations, it allow you to create and manage custom virtual environments to your needs using automated configuration technologies such as Chef, Puppet and Shell scripts.</p>
<p><img src="https://daker.me/assets/posts/vagrant/vagrant.jpg" alt="Vagrant" /></p>
<h2>Installing Vagrant</h2>
<p>Vagrant works with VirtualBox, and support <a href="http://www.vagrantup.com/vmware">Vmware Fusion</a> and AWS via plugins</p>
<h3>Install Virtualbox</h3>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> virtualbox</code></pre>
<h3>Install Vagrant</h3>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> vagrant</code></pre>
<p>Make sure Vagrant is installed correctly</p>
<pre class="language-sh"><code class="language-sh">$ vagrant <span class="token parameter variable">--version</span><br />Vagrant version <span class="token number">1.2</span>.0</code></pre>
<h2>Get your first VM up and running</h2>
<ol>
<li>
<p>start a vagrant config file in an empty project folder. this will create <code>Vagrantfile</code></p>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">mkdir</span> project<br />$ <span class="token builtin class-name">cd</span> project<br />$ vagrant init</code></pre>
</li>
<li>
<p>edit <code>Vagrantfile</code> to add the boxname</p>
<pre class="language-ruby"><code class="language-ruby">Vagrant<span class="token double-colon punctuation">::</span>Config<span class="token punctuation">.</span>run <span class="token keyword">do</span> <span class="token operator">|</span>config<span class="token operator">|</span><br /> config<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>box <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"devserver"</span></span><br /><span class="token keyword">end</span></code></pre>
</li>
<li>
<p>add a base image or box to quickly clone a virtual machine. this will create a folder .vagrant with an ubuntu box</p>
<pre class="language-sh"><code class="language-sh">$ vagrant box <span class="token function">add</span> devserver http://files.vagrantup.com/precise32.box</code></pre>
</li>
<li>
<p>then you are ready to go</p>
<pre class="language-sh"><code class="language-sh">$ vagrant up<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Importing base box <span class="token string">'precise32'</span><span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Matching MAC address <span class="token keyword">for</span> NAT networking<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Clearing any previously <span class="token builtin class-name">set</span> forwarded ports<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Forwarding ports<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> -- <span class="token number">22</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">2222</span> <span class="token punctuation">(</span>adapter <span class="token number">1</span><span class="token punctuation">)</span><br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Creating shared folders metadata<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Clearing any previously <span class="token builtin class-name">set</span> network interfaces<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Booting VM<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Waiting <span class="token keyword">for</span> VM to boot. This can take a few minutes.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> VM booted and ready <span class="token keyword">for</span> use<span class="token operator">!</span><br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Mounting shared folders<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> -- v-root: /vagrant<br /><span class="token punctuation">[</span><span class="token punctuation">..</span>.<span class="token punctuation">]</span></code></pre>
</li>
</ol>
<p>Wait for the command to finish, then you will have a VM ready for you to connect. the VM can be accessed via SSH:</p>
<pre class="language-sh"><code class="language-sh">$ vagrant <span class="token function">ssh</span></code></pre>
<h2>Provisioning</h2>
<p>Vagrant allow you to use different Provisioners to easily setup your VM with everything it needs to run your project :</p>
<ul>
<li>Chef Solo</li>
<li>Chef Server</li>
<li>Puppet Standalone</li>
<li>Puppet Server</li>
<li>Shell</li>
</ul>
<p>I do prefer Puppet for provisioning, because it's easy and it allow you to easily create a manifest to control the package, file or service with a few lines of code.</p>
<p>Here is the <code>Vagrantfile</code> i use, i needed to forward the port 8000 because i want to access the webapp using my browser, i also increased the memory of the VM to 1GB, and made the project folder accessible to the VM :</p>
<pre class="language-ruby"><code class="language-ruby"><span class="token comment"># -*- mode: ruby -*-</span><br /><span class="token comment"># vi: set ft=ruby :</span><br /><br />Vagrant<span class="token double-colon punctuation">::</span>Config<span class="token punctuation">.</span>run <span class="token keyword">do</span> <span class="token operator">|</span>ltp<span class="token operator">|</span><br /><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>box <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"ltp-devserver"</span></span><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>box_url <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"http://files.vagrantup.com/precise32.box"</span></span><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>forward_port <span class="token number">8000</span><span class="token punctuation">,</span> <span class="token number">8000</span><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>network <span class="token symbol">:hostonly</span><span class="token punctuation">,</span> <span class="token string-literal"><span class="token string">"33.33.33.10"</span></span><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>customize <span class="token punctuation">[</span><span class="token string-literal"><span class="token string">"modifyvm"</span></span><span class="token punctuation">,</span> <span class="token symbol">:id</span><span class="token punctuation">,</span> <span class="token string-literal"><span class="token string">"--memory"</span></span><span class="token punctuation">,</span> <span class="token number">1024</span><span class="token punctuation">]</span><br /><br /> ltp<span class="token punctuation">.</span>ssh<span class="token punctuation">.</span>max_tries <span class="token operator">=</span> <span class="token number">50</span><br /> ltp<span class="token punctuation">.</span>ssh<span class="token punctuation">.</span>timeout <span class="token operator">=</span> <span class="token number">300</span><br /><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>share_folder<span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"v-root"</span></span><span class="token punctuation">,</span> <span class="token string-literal"><span class="token string">"/home/vagrant/ltp"</span></span><span class="token punctuation">,</span> <span class="token string-literal"><span class="token string">"."</span></span><span class="token punctuation">)</span><br /><br /> ltp<span class="token punctuation">.</span>vm<span class="token punctuation">.</span>provision <span class="token symbol">:puppet</span> <span class="token keyword">do</span> <span class="token operator">|</span>puppet<span class="token operator">|</span><br /> puppet<span class="token punctuation">.</span>manifests_path <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"puppet/manifests"</span></span><br /> puppet<span class="token punctuation">.</span>manifest_file <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"vagrant.pp"</span></span><br /> <span class="token keyword">end</span><br /><span class="token keyword">end</span></code></pre>
<p>here one of the classes i use on my dev environement :</p>
<pre class="language-sh"><code class="language-sh">class init <span class="token punctuation">{</span><br /><br /> group <span class="token punctuation">{</span> <span class="token string">"puppet"</span><span class="token builtin class-name">:</span><br /> ensure <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"present"</span>,<br /> <span class="token punctuation">}</span><br /><br /> <span class="token comment"># Let's update the system</span><br /> <span class="token builtin class-name">exec</span> <span class="token punctuation">{</span> <span class="token string">"update-apt"</span><span class="token builtin class-name">:</span><br /> <span class="token builtin class-name">command</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"sudo apt-get update"</span>,<br /> <span class="token punctuation">}</span><br /><br /> <span class="token comment"># Let's install the dependecies</span><br /> package <span class="token punctuation">{</span><br /> <span class="token punctuation">[</span><span class="token string">"python"</span>, <span class="token string">"python-dev"</span>, <span class="token string">"libjs-jquery"</span>, <span class="token string">"libjs-jquery-ui"</span>, <span class="token string">"iso-codes"</span>, <span class="token string">"gettext"</span>, <span class="token string">"python-pip"</span>, <span class="token string">"bzr"</span><span class="token punctuation">]</span>:<br /> ensure <span class="token operator">=</span><span class="token operator">></span> installed,<br /> require <span class="token operator">=</span><span class="token operator">></span> Exec<span class="token punctuation">[</span><span class="token string">'update-apt'</span><span class="token punctuation">]</span> <span class="token comment"># The system update needs to run first</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token comment"># Let's install the project dependecies from pip</span><br /> <span class="token builtin class-name">exec</span> <span class="token punctuation">{</span> <span class="token string">"pip-install-requirements"</span><span class="token builtin class-name">:</span><br /> <span class="token builtin class-name">command</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"sudo /usr/bin/pip install -r <span class="token variable">$PROJ_DIR</span>/requirements.txt"</span>,<br /> tries <span class="token operator">=</span><span class="token operator">></span> <span class="token number">2</span>,<br /> <span class="token function">timeout</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">600</span>, <span class="token comment"># Too long, but this can take awhile</span><br /> require <span class="token operator">=</span><span class="token operator">></span> Package<span class="token punctuation">[</span><span class="token string">'python-pip'</span>, <span class="token string">'python-dev'</span><span class="token punctuation">]</span>, <span class="token comment"># The package dependecies needs to run first</span><br /> logoutput <span class="token operator">=</span><span class="token operator">></span> on_failure,<br /> <span class="token punctuation">}</span><br /><br /><span class="token punctuation">}</span></code></pre>
<p>You need to specify one manifest file in your Vagranfile, if you need to split it, you can use something like this :</p>
<pre class="language-sh"><code class="language-sh">$ tree<br /><span class="token builtin class-name">.</span><br />└── manifests<br /> ├── classes<br /> │ ├── init.pp<br /> │ └── ltp.pp<br /> └── vagrant.pp</code></pre>
<p>I use <code>vagrant.pp</code> to define my project variables, and to make sure all the classes are executed in the order i want :</p>
<pre class="language-sh"><code class="language-sh"><span class="token function">import</span> <span class="token string">"classes/*.pp"</span><br /><br /><span class="token variable">$PROJ_DIR</span> <span class="token operator">=</span> <span class="token string">"/home/vagrant/ltp"</span><br /><br />Exec <span class="token punctuation">{</span><br /> path <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/usr/local/bin:/usr/bin:/usr/sbin:/sbin:/bin"</span>,<br /><span class="token punctuation">}</span><br /><br />class dev <span class="token punctuation">{</span><br /><br /> class <span class="token punctuation">{</span><br /> init: before <span class="token operator">=</span><span class="token operator">></span> Class<span class="token punctuation">[</span>ltp<span class="token punctuation">]</span><span class="token punctuation">;</span><br /> ltp:<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br />include dev</code></pre>
<p>The <code>ltp</code> class is only used to run some <code>django</code> commands :</p>
<pre class="language-sh"><code class="language-sh">class ltp <span class="token punctuation">{</span><br /><br /> <span class="token function">file</span> <span class="token punctuation">{</span> <span class="token string">"<span class="token variable">$PROJ_DIR</span>/loco_directory/local_settings.py"</span><span class="token builtin class-name">:</span><br /> ensure <span class="token operator">=</span><span class="token operator">></span> file,<br /> <span class="token builtin class-name">source</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"<span class="token variable">$PROJ_DIR</span>/loco_directory/local_settings.py.sample"</span>,<br /> replace <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">false</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token builtin class-name">exec</span> <span class="token punctuation">{</span><br /> <span class="token string">"db_download"</span><span class="token builtin class-name">:</span><br /> cwd <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"<span class="token variable">$PROJ_DIR</span>/loco_directory"</span>,<br /> <span class="token builtin class-name">command</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/usr/bin/wget http://people.ubuntu.com/~daker/ltp/ltp.db"</span>,<br /> creates <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"<span class="token variable">$PROJ_DIR</span>/loco_directory/ltp.db"</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token builtin class-name">exec</span> <span class="token punctuation">{</span><br /> <span class="token string">"managepy_syncdb"</span><span class="token builtin class-name">:</span><br /> cwd <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"<span class="token variable">$PROJ_DIR</span>/loco_directory"</span>,<br /> <span class="token builtin class-name">command</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/usr/bin/python manage.py syncdb --noinput"</span>,<br /> <span class="token punctuation">}</span><br /><br /> <span class="token builtin class-name">exec</span> <span class="token punctuation">{</span><br /> <span class="token string">"managepy_migratedb"</span><span class="token builtin class-name">:</span><br /> cwd <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"<span class="token variable">$PROJ_DIR</span>/loco_directory"</span>,<br /> <span class="token builtin class-name">command</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">"/usr/bin/python manage.py migrate"</span>,<br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>Now all i have to do is <code>vagrant up</code> and let Vagrant do all his magic tricks :</p>
<pre class="language-sh"><code class="language-sh">$ vagrant up<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Importing base box <span class="token string">'ltp-devserver'</span><span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Matching MAC address <span class="token keyword">for</span> NAT networking<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Clearing any previously <span class="token builtin class-name">set</span> forwarded ports<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Forwarding ports<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> -- <span class="token number">22</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">2222</span> <span class="token punctuation">(</span>adapter <span class="token number">1</span><span class="token punctuation">)</span><br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> -- <span class="token number">8000</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">8000</span> <span class="token punctuation">(</span>adapter <span class="token number">1</span><span class="token punctuation">)</span><br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Creating shared folders metadata<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Clearing any previously <span class="token builtin class-name">set</span> network interfaces<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Preparing network interfaces based on configuration<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Running any VM customizations<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Booting VM<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Waiting <span class="token keyword">for</span> VM to boot. This can take a few minutes.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> VM booted and ready <span class="token keyword">for</span> use<span class="token operator">!</span><br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Configuring and enabling network interfaces<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Mounting shared folders<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> -- v-root: /home/vagrant/ltp<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> -- manifests: /tmp/vagrant-puppet/manifests<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Running provisioner: Vagrant::Provisioners::Puppet<span class="token punctuation">..</span>.<br /><span class="token punctuation">[</span>default<span class="token punctuation">]</span> Running Puppet with /tmp/vagrant-puppet/manifests/vagrant.pp<span class="token punctuation">..</span>.<br />stdin: is not a <span class="token function">tty</span><br />warning: Could not retrieve fact fqdn<br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Exec<span class="token punctuation">[</span>update-apt<span class="token punctuation">]</span>/returns: executed successfully<br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Package<span class="token punctuation">[</span>python-pip<span class="token punctuation">]</span>/ensure: ensure changed <span class="token string">'purged'</span> to <span class="token string">'present'</span><br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Package<span class="token punctuation">[</span>bzr<span class="token punctuation">]</span>/ensure: ensure changed <span class="token string">'purged'</span> to <span class="token string">'present'</span><br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Package<span class="token punctuation">[</span>libjs-jquery-ui<span class="token punctuation">]</span>/ensure: ensure changed <span class="token string">'purged'</span> to <span class="token string">'present'</span><br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Package<span class="token punctuation">[</span>python-dev<span class="token punctuation">]</span>/ensure: ensure changed <span class="token string">'purged'</span> to <span class="token string">'present'</span><br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Exec<span class="token punctuation">[</span>pip-install-requirements<span class="token punctuation">]</span>/returns: executed successfully<br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Init/Package<span class="token punctuation">[</span>gettext<span class="token punctuation">]</span>/ensure: ensure changed <span class="token string">'purged'</span> to <span class="token string">'present'</span><br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Ltp/File<span class="token punctuation">[</span>/home/vagrant/ltp/loco_directory/local_settings.py<span class="token punctuation">]</span>/ensure: defined content as <span class="token string">'{md5}25234f94c80418dcb7cc59f3db2dd7f8'</span><br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Ltp/Exec<span class="token punctuation">[</span>db_download<span class="token punctuation">]</span>/returns: executed successfully<br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Ltp/Exec<span class="token punctuation">[</span>managepy_syncdb<span class="token punctuation">]</span>/returns: executed successfully<br /><br />notice: /Stage<span class="token punctuation">[</span>main<span class="token punctuation">]</span>/Ltp/Exec<span class="token punctuation">[</span>managepy_migratedb<span class="token punctuation">]</span>/returns: executed successfully<br /><br />notice: Finished catalog run <span class="token keyword">in</span> <span class="token number">811.47</span> seconds</code></pre>
<p>After i started using Vagrant, my workflow imporved a lot i start focusing on writing code rather than resolving packages conflicts, i do use a VM for each bug fix/feature i need to work on, and once the fix is merged i simply delete the VM without thinking about breaking anything.</p>
<p>[NB]: Ubuntu now officially supports Vagrant, and provides <a href="http://cloud-images.ubuntu.com/vagrant/">official Ubuntu boxes</a> for 12.04, 12.10, 13.04 and 13.10.</p>
Introduction to Web Components, the Next Generation Markup2013-09-21T00:00:00Zhttps://daker.me/2013/09/introduction-to-web-components-next-generation-markup.html<p>Web Components enables frontend developers to create custom and reusable HTML tags, it's the latest bleeding-edge web technologies being developed, the project is led by the Chrome dev team and aims to solve a simple problem: Building Web applications is more complicated than it used to be. Worse, it's more complicated than it should be.</p>
<p><img src="https://daker.me/assets/posts/webcomponents.png" alt="Web Components" /></p>
<h2>HTML Templates</h2>
<p>A template provides a method for declaring document fragments in HTML, it contains a chunks of markup that can be used later. The <code>template</code> element is not rendered but parsed, which means that scripts aren't processed, css and images aren't downloaded, it's completly hidden from the document object, so for ex you can't access the <code>.comment-text</code> element using <code>document.querySelector</code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>commentTemplate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- dynamically populate at runtime --></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- dynamically populate at runtime --></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></code></pre>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/m85DN/embedded/result,css,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<h2>Custom Elements</h2>
<p>The W3C defines it as follows :</p>
<blockquote>
<p>custom elements let authors define their own elements, including new presentation and API, that can be used in HTML documents</p>
</blockquote>
<p>This means you will be able to create new HTML elements and extend the existing DOM objects with new ones. The name of any custom element must contain a dash (-) :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x-foo-bar<span class="token punctuation">"</span></span> <span class="token attr-name">constructor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>XFooBar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br />...<br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>element</span><span class="token punctuation">></span></span></code></pre>
<p>and use it like this <code><x-foo-bar>Test</x-foo-bar></code></p>
<h2>Shadow DOM</h2>
<p>Browser vendors have been using Shadow DOM for quite awhile now to build their own components. These components are built using HTML and CSS, but you cannot see how thesee elements are made up on the dev tools simply because they use the Shadow DOM , ex : <code><video></code>, <code><textarea></code>, <code><input type="date"></code>, <code><input type="time"></code></p>
<blockquote>
<p>Shadow DOM gives us markup encapsulation, style boundaries, and exposes (to web developers) the same mechanics browsers vendors have been using to implement their internal UI. — Eric Bidelman</p>
</blockquote>
<p><img src="https://daker.me/assets/posts/input-date-time.png" alt="Date & time input" /></p>
<h2>HTML Imports</h2>
<p>HTML Imports is similar way to how we load CSS stylesheets, it's a new type of link tag which allow developers to import and use HTML code from a url, after importing the page you need to use some Javascript code to manipulate it and inject your code :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>import<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/import/page-to-import.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Here is an example :</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML Imports<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>import<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/import.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hello World!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br /> <span class="token keyword">var</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'link[rel=import]'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> content <span class="token operator">=</span> link<span class="token punctuation">.</span>import<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#page-content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- import.html --></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is the content of the imported page.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>One thing you should keep in mind that thoses APIs are still in developement so don't exepect a full support rightnow, Chrome/ium have implemented some of them but you'll need to enable them in <code>about://flags</code></p>
5 DevTools features to help you debug your WebApp2013-09-14T00:00:00Zhttps://daker.me/2013/09/5-devtools-features-to-help-you-debug-your-webapp.html<p>DevTools is a powerful tool than can made developing WebApp easier, it has a lot of features some of them are still experimental and you need to enable them in the <code>about://flags</code>.</p>
<p><img src="https://daker.me/assets/posts/devtools/devtools.png" alt="Devtools" /></p>
<h2>Breakpoints</h2>
<p>Breakpoint are related to the JavaScript code, it let's you halt the JavaScript code execution and inspect the current environment. You can set them by simply going the "Source" tab, then select the JS file you want to debug , find the line you want to set a breakpoint on, then click the line number to apply a breakpoint :</p>
<p><img src="https://daker.me/assets/posts/devtools/breakpoints.png" alt="Javascript Breakpoints" /></p>
<p>The DevTools also supports conditional breakpoints.</p>
<h2>DOM Breakpoints</h2>
<p>The DevTools can also be used to set breakpoints on the DOM elements direclty, just right click on the element you want to break on, then select the option you want :</p>
<p><img src="https://daker.me/assets/posts/devtools/dom-breakpoints.png" alt="DOM Breakpoints" /></p>
<h2>monitorEvents</h2>
<p>The Devtools has a built function called <code>monitorEvents</code>, it lets you monitor objects for mouse, key, touch or control events :</p>
<p><img src="https://daker.me/assets/posts/devtools/monitorEvents.png" alt="monitorEvents" /></p>
<h2>Pretty Print</h2>
<p>Pretty Print is a handy feature for debugging minified JavaScript. Trying to to set a breakpoint when everything is on the same line is something impossible, clicking on the <code>{}</code> icon will make your Javascript code readable and easier to debug :</p>
<p><img src="https://daker.me/assets/posts/devtools/pprint-before.png" alt="Pretty Print - Before" /></p>
<p><img src="https://daker.me/assets/posts/devtools/pprint-after.png" alt="Pretty Print - After" /></p>
<h2>Remote Debugging</h2>
<p>The Remote Debugger lets you connect Chrome/ium browser to the Chrome mobile browser so that you can use your desktop browser to debug all your tabs from your remote device :</p>
<p><img src="https://daker.me/assets/posts/devtools/remote-debugging.png" alt="Remote Debugging" /></p>
<p>and sure the DevTools still has a lot of features to cover from the <code>Source</code> to the <code>Console</code> Tab.</p>
Adding Persona authentication to your django project2013-09-01T00:00:00Zhttps://daker.me/2013/09/adding-persona-authentication-to-your-django-project.html<p><a href="https://www.mozilla.org/en-US/persona/">Persona</a> is a decentralized login system made by <a href="https://www.mozilla.org/">Mozilla</a> that aims to eliminate site-specific passwords so you can log in with your existing email accounts without having to type in a password.</p>
<p><img src="https://daker.me/assets/posts/persona-mozilla.jpg" alt="Persona" /></p>
<h2>Installation</h2>
<p>Mozilla provides a library called <code>django-browserid</code> that integrates Persona authentication into Django, so you can simply added to to your <code>requirements.txt</code> or just install via pip :</p>
<pre class="language-shell"><code class="language-shell">$ <span class="token function">sudo</span> pip <span class="token function">install</span> django-browserid</code></pre>
<h2>Configuration</h2>
<p>Once done you need to follow the following steps :</p>
<p>Add <code>django-browserid</code> to your <code>INSTALLED_APPS</code>,</p>
<pre class="language-python"><code class="language-python">INSTALLED_APPS <span class="token operator">=</span> <span class="token punctuation">(</span><br /> <span class="token comment"># ...</span><br /> <span class="token string">'django.contrib.auth'</span><span class="token punctuation">,</span><br /> <span class="token string">'django.contrib.contenttypes'</span><span class="token punctuation">,</span><br /> <span class="token string">'django.contrib.staticfiles'</span><span class="token punctuation">,</span><br /> <span class="token string">'django.contrib.sessions'</span><span class="token punctuation">,</span><br /> <span class="token string">'django.contrib.messages'</span><span class="token punctuation">,</span><br /> <span class="token string">'django.contrib.admin'</span><span class="token punctuation">,</span><br /> <span class="token string">'django_browserid'</span><span class="token punctuation">,</span><br /> <span class="token comment"># ...</span><br /><span class="token punctuation">)</span></code></pre>
<p>Add the <code>django_browserid</code> authentication backend :</p>
<pre class="language-python"><code class="language-python">AUTHENTICATION_BACKENDS <span class="token operator">=</span> <span class="token punctuation">(</span><br /> <span class="token comment"># ...</span><br /> <span class="token string">'django.contrib.auth.backends.ModelBackend'</span><span class="token punctuation">,</span> <span class="token comment"># required for admin</span><br /> <span class="token string">'django_browserid.auth.BrowserIDBackend'</span><span class="token punctuation">,</span><br /> <span class="token comment"># ...</span><br /><span class="token punctuation">)</span></code></pre>
<p>Add the <code>django_browserid</code> context processor :</p>
<pre class="language-python"><code class="language-python">TEMPLATE_CONTEXT_PROCESSORS <span class="token operator">=</span> <span class="token punctuation">(</span><br /> <span class="token comment"># ...</span><br /> <span class="token string">'django_browserid.context_processors.browserid'</span><span class="token punctuation">,</span><br /> <span class="token comment"># ...</span><br /><span class="token punctuation">)</span></code></pre>
<p>and finally you need to set your site url :</p>
<pre class="language-python"><code class="language-python">SITE_URL <span class="token operator">=</span> <span class="token string">'https://example.com'</span></code></pre>
<p>I have created a working demo project on <a href="https://github.com/daker/django-persona-demo">github</a> to play with, you can still check the <a href="http://django-browserid.readthedocs.org/en/v0.9/details/troubleshooting.html">docs</a> or comment here if it doesn't work for you.</p>
<h2>Mentioned on</h2>
<ul>
<li><a href="https://lincolnloop.github.io/round-up/#round-up-10">Django Round-Up Podcast</a> - Django Round-Up #10</li>
</ul>
Thank you, Ubuntu!2013-08-26T00:00:00Zhttps://daker.me/2013/08/thank-you-ubuntu.html<p>My experience with <a href="http://www.ubuntu.com/">Ubuntu</a> started in 2007 when i was doing the internship of my second year in Computer Engineering, the first week was really boring, the second week and while i was trying to fix the DVD driver, i opened the drawer then i found a Green CD of "OpenSUSE", i booted with the live CD, the OS was a bit complicated and not easy to play with.</p>
<p><img src="https://daker.me/assets/posts/ubuntu/certificate.jpg" alt="My Ubuntu certificate, signed by Mark Shuttleworth" /></p>
<p>I started googling for other Gnu/Linux distributions, after a few hours i found a distro called "Ubuntu", i downloaded the iso, booted with the live CD it was easy to access almost everything(browser, e-mail client, musique player and an office suite that comes out of the box), then Ubuntu becomes my second OS.</p>
<p>In 2009 i read an <a href="http://www.omgubuntu.co.uk/2010/01/interview-with-ubuntu-manual-project-leader">article</a> on OMG!Ubuntu about a project called "The Ubuntu Manual Project", they were looking for contributors, as you may know i do a lot of web developement i jumed on the IRC channel someone pointed me the mockups, in few days the <a href="http://ubuntu-manual.org/">site(made by myself)</a> was up and running until now. That's where my story with Ubuntu began.</p>
<p>I learned a lot of things and i had the pleasure to know and meet a lot of great & inspiring people virtually and IRL.</p>
<p><img src="https://daker.me/assets/posts/ubuntu/1.jpg" alt="Me and Daniel Holbach" /></p>
<p><img src="https://daker.me/assets/posts/ubuntu/2.jpg" alt="From the right : IamNotThatGuy , Me, Joel Pickett, Rohan Garg, Ayrton Araújo, Randall Ross Steve Riley the former face of Microsoft Security and another guy" /></p>
<p><img src="https://daker.me/assets/posts/ubuntu/3.jpg" alt="Me and the Kubuntu developers" /></p>
<p><img src="https://daker.me/assets/posts/ubuntu/4.jpg" alt="Me and the Kubuntu developers again" /></p>
<p>Thank you, Ubuntu!</p>
Why Stylus fit better my needs2013-07-24T00:00:00Zhttps://daker.me/2013/07/why-stylus-fit-better-my-needs.html<p>Stylus is an expressive, dynamic, robust CSS pre-processor built on top of Node.js. LESS and Sass are both great, they try to stay as close as the original CSS syntax as possible to minimize the impact of having to learn a new language, but for me someone who cares about simplicity and readability, the syntax becomes an important part of the language or the framework.</p>
<p><img src="https://daker.me/assets/posts/stylus.png" alt="Stylus" /></p>
<h2>Installation</h2>
<h3>Ubuntu</h3>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> add-apt-repository ppa:chris-lea/node.js<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> update<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> nodejs<br />$ <span class="token function">sudo</span> <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> stylus</code></pre>
<h3>Mac OSX</h3>
<pre class="language-sh"><code class="language-sh">$ brew <span class="token function">install</span> <span class="token function">node</span><br />$ <span class="token function">curl</span> https://npmjs.org/install.sh <span class="token operator">|</span> <span class="token function">sh</span><br />$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> stylus</code></pre>
<p>For me as someone who comes from a Python world, Stylus syntax strips away all the colons, semicolons, brackets and most parentheses from regular CSS script, which become like a python syntax, easy and dead simple.</p>
<pre class="language-css"><code class="language-css">#container<br /> width 980px<br /> margin 0 auto<br /> background #ccc<br /> font 12px Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif</code></pre>
<p>which produce the following CSS code</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#container</span> <span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 980px<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span><br /> <span class="token property">font</span><span class="token punctuation">:</span> 12px Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Variables</h2>
<p>Defining variables is simple, you don't need to use $ or @ like in Sass or LESS, the good part is that Stylus also support the $ so if you are coming from Sass your variables will remain functionnal.</p>
<pre class="language-css"><code class="language-css">font-size = 14px<br />color = #ff0000<br /><br />body<br /> font-family Arial<span class="token punctuation">,</span> sans-serif<br /> font-size font-size<br /> color color</code></pre>
<p>Once compiled, you'll get the following CSS code</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Did you noticed something ? the color has been compressed automatically.</p>
<h2>Mixins</h2>
<p>Mixins are similar to functions, but used in a different way, a good example of a mixin is the border-radius property</p>
<pre class="language-css"><code class="language-css"><span class="token function">border-radius</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><br /> -webkit-border-radius n<br /> -moz-border-radius n<br /> -ms-border-radius n<br /> -o-border-radius n<br /> border-radius n<br /><br />#btn<br /> <span class="token function">border-radius</span><span class="token punctuation">(</span>3px<span class="token punctuation">)</span> <span class="token comment">/* or just border-radius 3px */</span><br /> background #e9573f</code></pre>
<p>The compiled version will be</p>
<pre class="language-css"><code class="language-css"><span class="token selector">#btn</span> <span class="token punctuation">{</span><br /> <span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><br /> <span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><br /> <span class="token property">-ms-border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><br /> <span class="token property">-o-border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #e9573f<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Handy for vendor-prefixed properties.</p>
<h2>Iteration</h2>
<p>Stylus gives you the ablity to iterate expressions via for/in</p>
<pre class="language-css"><code class="language-css"><span class="token selector">ul<br /> for row in 1 2 3 4 5<br /> li:nth-child(</span><span class="token punctuation">{</span>row<span class="token punctuation">}</span><span class="token punctuation">)</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 10px * row</code></pre>
<p>The CSS code will be</p>
<pre class="language-css"><code class="language-css"><span class="token selector">ul li:nth-child(1)</span> <span class="token punctuation">{</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">ul li:nth-child(2)</span> <span class="token punctuation">{</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">ul li:nth-child(3)</span> <span class="token punctuation">{</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">ul li:nth-child(4)</span> <span class="token punctuation">{</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">ul li:nth-child(5)</span> <span class="token punctuation">{</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Inheritance</h2>
<p>Stylus provides a good inheritance mecanism</p>
<pre class="language-css"><code class="language-css">.notice<br /> padding 10px<br /> border 1px solid #eee<br /><br />.warning<br /> @extend .notice<br /> color #e2e21e</code></pre>
<pre class="language-css"><code class="language-css"><span class="token selector">.notice,<br />.warning</span> <span class="token punctuation">{</span><br /> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><br /> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #eee<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.warning</span> <span class="token punctuation">{</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> #e2e21e<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Error Reporting</h2>
<p>Stylus has fantastic error reporting built-in for syntax, parse, and evaluation errors—complete with stack traces, line numbers, and filenames.</p>
<pre class="language-css"><code class="language-css">.message<br /> padding 10px<br /> border 1px solid [#ccc]</code></pre>
<p>The output will look something like this</p>
<pre class="language-sh"><code class="language-sh">$ stylus buggy-demo.styl<br /><br />/usr/lib/node_modules/stylus/bin/stylus:530<br /> throw err<span class="token punctuation">;</span><br /> ^<br />Error: t.styl:3<br /> <span class="token number">1</span><span class="token operator">|</span> .message<br /> <span class="token number">2</span><span class="token operator">|</span> padding 10px<br /> <span class="token operator">></span> <span class="token number">3</span><span class="token operator">|</span> border 1px solid <span class="token punctuation">[</span><span class="token comment">#ccc]</span><br /><br />cannot perform solid<span class="token punctuation">[</span><span class="token punctuation">(</span><span class="token comment">#ccc)]</span><br /> at <span class="token string">".message"</span> <span class="token punctuation">(</span>t.styl:NaN<span class="token punctuation">)</span><br /> at Ident.Node.operate <span class="token punctuation">(</span>/usr/lib/node_modules/stylus/lib/nodes/node.js:189:13<span class="token punctuation">)</span></code></pre>
<p>Stylus provides a detailed stack trace much like you would find in any decent language.</p>
<h2>Literal CSS</h2>
<p>This the best part of Stylus, you can still use your CSS code using <code>@css</code> and it will work, how that will help you in your workflow? you'll be able to integrate Stylus progressivly in your project</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@css</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">body</span> <span class="token punctuation">{</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br />#container<br /> width 980px<br /> margin 0 auto<br /> background #ccc<br /> font 12px Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif</code></pre>
<p>the output will be</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span><br /> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">#container</span> <span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 980px<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span><br /> <span class="token property">font</span><span class="token punctuation">:</span> 12px Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Conclusion</h2>
<p>Stylus is certainly worth a try, and if you are a Compass guy, Stylus has an extension called <a href="https://github.com/visionmedia/nib">nib</a> that provides robust cross-browser CSS3 mixins. Sure there is more you can learn about Stylus and there is <a href="http://learnboost.github.io/stylus/">docs</a> for that.</p>
Testing your responsive design with PhantomJS2013-07-13T00:00:00Zhttps://daker.me/2013/07/testing-your-responsive-design-with-phantomjs.html<p>User testing is an important aspect of the development process of any web project, that's why headless browsers can be great for automating and testing web pages programmatically, PhantomJS is one of many headless browsers basicaly a WebKit browser with JavaScript API, which means that the rendered web pages are never actually displayed, just because it is a browser but without a GUI.</p>
<p><img src="https://daker.me/assets/posts/phantomjs.png" alt="PhantomJS" /></p>
<h2>Installation</h2>
<h3>Ubuntu</h3>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> add-apt-repository ppa:chris-lea/node.js<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> update<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> nodejs<br />$ <span class="token function">sudo</span> <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> phantomjs</code></pre>
<h3>Mac OSX</h3>
<pre class="language-sh"><code class="language-sh">$ brew <span class="token function">install</span> <span class="token function">node</span><br />$ <span class="token function">curl</span> https://npmjs.org/install.sh <span class="token operator">|</span> <span class="token function">sh</span><br />$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> phantomjs</code></pre>
<p>Now you should now have PhantomJS installed, you check that by running : <code>$ phantomjs --version</code></p>
<p>PhantomJS is very powerfull tool, it lets you manipulate pages, access page settings(prevent loading images, prevent running Javascript), accessing the filesystem, running Javascript and you can capture webpage, it can be coupled with other testing frameworks(like QUnitJS)</p>
<h2>Testing your responsive design</h2>
<p>PhantomJS can capture the content of any webpage in PNG, JPEG, GIF or PDF file, it let's you set the viewport size, the zoom factor, the user-agent and more usefull stuff.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/*<br /> requires: phantomjs, async<br /> usage: phantomjs capture.js<br />*/</span><br /><span class="token keyword">var</span> async <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'async'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> sizes <span class="token operator">=</span> <span class="token punctuation">[</span><br /> <span class="token punctuation">[</span><span class="token number">320</span><span class="token punctuation">,</span> <span class="token number">480</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token punctuation">[</span><span class="token number">320</span><span class="token punctuation">,</span> <span class="token number">568</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token punctuation">[</span><span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">1024</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token punctuation">[</span><span class="token number">1024</span><span class="token punctuation">,</span> <span class="token number">768</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token punctuation">[</span><span class="token number">1280</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token punctuation">[</span><span class="token number">1440</span><span class="token punctuation">,</span> <span class="token number">900</span><span class="token punctuation">]</span><br /> <span class="token punctuation">]</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">function</span> <span class="token function">capture</span><span class="token punctuation">(</span><span class="token parameter">sizes<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> page <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpage'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> page<span class="token punctuation">.</span>viewportSize <span class="token operator">=</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">width</span><span class="token operator">:</span> sizes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">height</span><span class="token operator">:</span> sizes<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /> page<span class="token punctuation">.</span>zoomFactor <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span><br /> page<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'http://daker.me'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> filename <span class="token operator">=</span> sizes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'x'</span> <span class="token operator">+</span> sizes<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'.png'</span><span class="token punctuation">;</span><br /> page<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string">'./screenshots/'</span> <span class="token operator">+</span> filename<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> page<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br />async<span class="token punctuation">.</span><span class="token function">eachSeries</span><span class="token punctuation">(</span>sizes<span class="token punctuation">,</span> capture<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'done!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> phantom<span class="token punctuation">.</span><span class="token function">exit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>I have coupled PhantomJS with <a href="https://github.com/caolan/async">async.js</a> so i can take multiple screenshots, now all you need to do is to run <code>phantomjs capture.js</code> from the commandline, the good part is that PhantomJS will capture all the page not only the viewport.</p>
<p><img src="https://daker.me/assets/posts/phantomjs-demo.png" alt="Responsive Design Screenshots" /></p>
<p><strong>UPDATE 14/07/2013</strong> : The script also works with <a href="http://slimerjs.org/">SlimerJS</a>, SlimerJS is similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit.</p>
<blockquote class="twitter-tweet"><p>Testing your <a href="https://twitter.com/search?q=%23responsivedesign&src=hash">#responsivedesign</a>? Take this script for PhantomJS and run it with SlimerJS <a href="http://t.co/wyqiIJustE">http://t.co/wyqiIJustE</a> by <a href="https://twitter.com/AdnaneBelmadiaf">@AdnaneBelmadiaf</a></p>— SlimerJS (@slimerjs) <a href="https://twitter.com/slimerjs/statuses/356172141277888513">July 13, 2013</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2>Mentioned on</h2>
<ul>
<li><a href="http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/">Envato</a> - Techniques for mobile and responsive cross-browser testing.</li>
</ul>
Understanding CSS3 box-sizing property2013-07-10T00:00:00Zhttps://daker.me/2013/07/understanding-css3-box-sizing-property.html<p>Each HTML element is represented as a rectangular box, it consists of margins, borders, padding, and the actual content. The default CSS box model used to calculate widths and heights of elements, the width/height of an element gives the width/height of the content of the box, excluding padding and border.</p>
<p><img src="https://daker.me/assets/posts/box-model.png" alt="Box Model" /></p>
<p>and they are calculated like this:</p>
<p><code>Width = width + padding-left + padding-right + border-left + border-right</code>
<code>Height = height + padding-top + padding-bottom + border-top + border-bottom</code></p>
<p>so if we take this as an example :</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.box</span> <span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span><br /> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><br /> <span class="token property">border</span><span class="token punctuation">:</span> 5px solid #e9573f<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>the width of the rendred box will be calculated like this :</p>
<p><code>300px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 350px</code></p>
<p>which will give us a box with 350px width, so in this case you have to change the width of the box to 270px, and this is where the box-sizing property comes to the rescue.</p>
<p><code>box-sizing</code> allows you to switch box models :</p>
<ul>
<li>
<p>content-box: This is the default style as specified by the W3C. The width and height properties are measured including only the content, but not the border, margin, or padding.</p>
</li>
<li>
<p>border-box: The width and height properties include the padding and border, but not the margin. This is the box model used by IE when the document is in Quirks mode.</p>
</li>
<li>
<p>padding-box : The width and height properties include the padding size, and do not include the border or margin (only in Firefox).</p>
</li>
</ul>
<iframe width="100%" height="300" src="http://jsfiddle.net/ZtLL8/1/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<p>To save you time, you can apply it using the universal selector</p>
<pre class="language-css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">{</span><br /> <span class="token property">-moz-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span><br /> <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span><br /> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p><code>box-sizing</code> is pretty well supported but partially and i mean that only Firefox support the three models, the others browsers only support content-box and border-box since the padding-box value has been added to the spec very recently.</p>
<div class="browser-support">
<dfn title="firefox"><div>21.0</div></dfn>
<dfn title="chrome"><div>26.0</div></dfn>
<dfn title="opera"><div>15.0</div></dfn>
<dfn title="ie"><div>8.0</div></dfn>
<dfn title="safari"><div>5.1</div></dfn>
</div>How to make sticky elements using position sticky2013-07-04T00:00:00Zhttps://daker.me/2013/07/how-to-make-sticky-elements-using-position-sticky.html<p><code>position: sticky</code> is a new CSS property that has [landed][0] in Webkit last year which will allow elements to stick to the viewport edge as you scroll past, unfortunately this hasn't been standardized yet but discussions are still going on.</p>
<h2>How does it work ?</h2>
<p>By simply adding <code>position: sticky</code>, you can tell an element to be <code>position: relative</code> until the user scrolls the item (or its parent) to be for ex 10px from the top, the actual way to achieve the same behaviour is by using Javascript :</p>
<iframe width="100%" height="300" src="https://jsbin.com/omanut/2" allowfullscreen="allowfullscreen"></iframe>
<p>and this is the CSS way:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.sticky</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> -webkit-sticky<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> -moz-sticky<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> -ms-sticky<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> -o-sticky<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>How to enable it ?</h2>
<p>The <code>sticky</code> value is still an experimental feature in Webkit, so you need to enable it in <code>chrome://flags</code>, just Ctrl+F "Enable experimental WebKit features", then click enable.</p>
<p><img src="https://daker.me/assets/posts/css-sticky.png" alt="chrome://flags" /></p>
<h2>Demo</h2>
<p>I have made a simple alphabetical contact list with sticky headers using HTML and CSS only!</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/ecpTw/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<div class="browser-support">
<dfn title="firefox" class="unsupported"><div>—</div></dfn>
<dfn title="chrome"><div>23.0</div></dfn>
<dfn title="opera" class="unsupported"><div>—</div></dfn>
<dfn title="ie" class="unsupported"><div>—</div></dfn>
<dfn title="safari"><div>7</div></dfn>
</div>
<p>One thing you should remember is that this feature is just a proposal that can be standardized or not.</p>
Grunt.js takes your workflow to the next level2013-06-22T00:00:00Zhttps://daker.me/2013/06/gruntjs-takes-your-workflow-to-the-next-level.html<p><a href="http://gruntjs.com/">Grunt.js</a> is a powerful task-based command line tool written in JavaScript on top of Node.js, and there are a number of grunt plugins that make it easy to set up common tasks, most common ones are concatenating files, linting, testing and minification.</p>
<p><img src="https://daker.me/assets/posts/grunt-logo.png" alt="Grunt logo" /></p>
<h2>Installation</h2>
<h3>Ubuntu</h3>
<pre class="language-sh"><code class="language-sh">$ <span class="token function">sudo</span> add-apt-repository ppa:chris-lea/node.js<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> update<br />$ <span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> nodejs<br />$ <span class="token function">sudo</span> <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> grunt-cli<br />$ <span class="token function">sudo</span> <span class="token function">npm</span> <span class="token function">install</span> grunt --save-dev</code></pre>
<h3>Mac OSX</h3>
<pre class="language-sh"><code class="language-sh">$ brew <span class="token function">install</span> <span class="token function">node</span><br />$ <span class="token function">curl</span> https://npmjs.org/install.sh <span class="token operator">|</span> <span class="token function">sh</span><br />$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> grunt-cli<br />$ <span class="token function">npm</span> <span class="token function">install</span> grunt --save-dev</code></pre>
<h2>Integration</h2>
<p>To integrate <a href="http://gruntjs.com/">Grunt.js</a> in your project, you just need to add two files, package.json and Gruntfile.js, to the root of your project.</p>
<h3>package.json</h3>
<p><a href="http://nodejs.org/">package.json</a> file should contain project configurations (project name, version, license, author, etc...), it is always located in project root :</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"example"</span><span class="token punctuation">,</span><br /> <span class="token property">"version"</span> <span class="token operator">:</span> <span class="token string">"0.0.1"</span><span class="token punctuation">,</span><br /> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"Adnane Belmadiaf"</span><span class="token punctuation">,</span><br /> <span class="token property">"homepage"</span><span class="token operator">:</span> <span class="token string">"http://daker.me"</span><span class="token punctuation">,</span><br /> <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"grunt"</span><span class="token operator">:</span> <span class="token string">"~0.4.0"</span><span class="token punctuation">,</span><br /> <span class="token property">"grunt-contrib-concat"</span><span class="token operator">:</span> <span class="token string">"~0.1.3"</span><span class="token punctuation">,</span><br /> <span class="token property">"grunt-contrib-uglify"</span><span class="token operator">:</span> <span class="token string">"~0.1.1"</span><span class="token punctuation">,</span><br /> <span class="token property">"grunt-contrib-cssmin"</span><span class="token operator">:</span> <span class="token string">"~0.4.1"</span><span class="token punctuation">,</span><br /> <span class="token property">"grunt-contrib-jshint"</span><span class="token operator">:</span> <span class="token string">"~0.1.0"</span><span class="token punctuation">,</span><br /> <span class="token property">"grunt-contrib-compress"</span><span class="token operator">:</span> <span class="token string">"~0.3.3"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>This will install Grunt and the plugins you will be using in your project, now all you need to do is running <code>npm install</code> command in the root folder of the project.</p>
<h3>Gruntfile.js</h3>
<p>Gruntfile.js is used to define and configure tasks, and load <a href="http://gruntjs.com/">Grunt.js</a> <a href="http://gruntjs.com/plugins">plugins</a>.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/*global module:false*/</span><br />module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">grunt</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> grunt<span class="token punctuation">.</span><span class="token function">registerTask</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello from the Gruntfile!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This is the Gruntfile.js i use to jshint/concat/cssmin and uglify all my CSS and JS files in one .min.(js|css) file. Sure you can go deeper, you can compile your Less or Sass files, watch files and run tasks whenever they changed and more.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">/*global module:false*/</span><br /><br />module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">grunt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /><br /> grunt<span class="token punctuation">.</span><span class="token function">initConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">pkg</span><span class="token operator">:</span> grunt<span class="token punctuation">.</span>file<span class="token punctuation">.</span><span class="token function">readJSON</span><span class="token punctuation">(</span><span class="token string">'package.json'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">banner</span><span class="token operator">:</span><br /> <span class="token string">'/*!\n'</span> <span class="token operator">+</span><br /> <span class="token string">' * app.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n'</span> <span class="token operator">+</span><br /> <span class="token string">' * GNU LGPL v3\n'</span> <span class="token operator">+</span><br /> <span class="token string">' */'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">jshint</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">curly</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">immed</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">latedef</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">newcap</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">noarg</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">sub</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">undef</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">eqnull</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">browser</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">expr</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">globals</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">head</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">console</span><span class="token operator">:</span> <span class="token boolean">false</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">files</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'Gruntfile.js'</span><span class="token punctuation">,</span> <span class="token string">'js/app.js'</span> <span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">concat</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">options</span><span class="token operator">:</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">separator</span><span class="token operator">:</span> <span class="token string">';'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">js</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/js/*.js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">dest</span><span class="token operator">:</span> <span class="token string">'build/app.js'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">css</span><span class="token operator">:</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/css/*.css'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">dest</span><span class="token operator">:</span> <span class="token string">'build/app.css'</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">uglify</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">banner</span><span class="token operator">:</span> <span class="token string">'<%= meta.banner %>\n'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'<%= concat.js.dest %>'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">dest</span><span class="token operator">:</span> <span class="token string">'build/app.min.js'</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /><br /> <span class="token literal-property property">cssmin</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">banner</span><span class="token operator">:</span> <span class="token string">'/*!\n'</span> <span class="token operator">+</span><br /> <span class="token string">' * app.min.css <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n'</span> <span class="token operator">+</span><br /> <span class="token string">' * GNU LGPL v3\n'</span> <span class="token operator">+</span><br /> <span class="token string">' */'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">files</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token string-property property">'build/app.min.css'</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'<%= concat.css.dest %>'</span> <span class="token punctuation">]</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> grunt<span class="token punctuation">.</span><span class="token function">loadNpmTasks</span><span class="token punctuation">(</span> <span class="token string">'grunt-contrib-jshint'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> grunt<span class="token punctuation">.</span><span class="token function">loadNpmTasks</span><span class="token punctuation">(</span> <span class="token string">'grunt-contrib-cssmin'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> grunt<span class="token punctuation">.</span><span class="token function">loadNpmTasks</span><span class="token punctuation">(</span> <span class="token string">'grunt-contrib-uglify'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> grunt<span class="token punctuation">.</span><span class="token function">loadNpmTasks</span><span class="token punctuation">(</span> <span class="token string">'grunt-contrib-concat'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Default task.</span><br /> grunt<span class="token punctuation">.</span><span class="token function">registerTask</span><span class="token punctuation">(</span> <span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'jshint'</span><span class="token punctuation">,</span> <span class="token string">'concat'</span><span class="token punctuation">,</span> <span class="token string">'cssmin'</span><span class="token punctuation">,</span> <span class="token string">'uglify'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Now all you need to do is to run <code>grunt</code> from the commandline to run the default task or run <code>grunt task-alias</code> to run a specific task.</p>
<p>###Conclusion</p>
<p><a href="http://gruntjs.com/">Grunt.js</a> is definetely the way to go, so make sure to take some time to try it and you'll be supprised how it’s easy get started to work with.</p>
Pocket TV turns any TV into an Android smart TV2013-06-16T00:00:00Zhttps://daker.me/2013/06/pocket-tv-turns-any-tv-into-an-android-smart-tv.html<p>Last Wednesday i got my Pocket TV or PTV from <a href="https://infinitec.com/">infinitec</a>, a small pocket-sized dongle that connects to the HDMI port of any regular TV and converts it into a powerful Android Smart TV, it can also be controlled by Android mobile devices using the <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.tvremote">Google TV Remote</a> app or using there own <a href="http://infinitec.com/forum/viewtopic.php?f=2&t=605">remote app</a> which is still in beta.</p>
<h2>Features</h2>
<ul>
<li>1 GHz ARM Cortex A9 Processor</li>
<li>Mali-400MP Graphics Processor</li>
<li>1 GB RAM</li>
<li>8 GB internal storage (expandable via MicroSD up to 32GB)</li>
<li>WiFi 802.11 b/g/n</li>
<li>Bluetooth supported via external USB Bluetooth Connector</li>
<li>USB 2.0 Power</li>
<li>Mini USB port Memory</li>
<li>HDMI 1.3 (Video and Audio)</li>
<li>Dimensions: 86 x 31 x 14 mm</li>
<li>Weight: 35 grams</li>
<li>Runs Android 4.0 ICS</li>
</ul>
<p>The packaging is good looking, clean and neat</p>
<p><img src="https://daker.me/assets/posts/ptv.jpg" alt="Pocket TV" /></p>
<p>What's in the box :</p>
<ul>
<li>Infintec Android Pocket TV (Black)</li>
<li>Quick Start Guide</li>
<li>Air Remote</li>
<li>Infared Remote</li>
<li>Infared Receiver</li>
<li>HDMI extender cable</li>
<li>MiniUSB Power Cable</li>
<li>Power Adapter EU/US</li>
</ul>
<h2>Setup</h2>
<p>The setup was easy and it took me about 5min, i plugged the PTV into my LG 22-Inch Widescreen 1080p HDMI port, connected the USB cable to the TV USB port. Booting took about 35 seconds, once booter i had the setup guide, for language, Wifi and TV resolution.</p>
<h2>Air Remote</h2>
<p>The Air Remote comes with a built-in gyroscope for a motion controller nav also it has a built-in QWERTY thumb keyboard for entering text. and a USB bluetooth Receiver that you have to plug in.</p>
<p><img src="https://daker.me/assets/posts/ptv-air.jpg" alt="Air Remote" /></p>
<h2>Infrared Remote</h2>
<p>The IR remote is really light, uses standard infrared signals and gives the ability to control the PTV using basic buttons, directional arrows, browser button, home, back, volume up/down, search and a power off button.</p>
<p><img src="https://daker.me/assets/posts/ptv-ir.jpg" alt="Infrared Remote" /></p>
<h2>Apps</h2>
<p>The pre-installed Android ICS operating system comes with some preinstalled apps like Gmail, Youtube, Browser, an app installer, a filebrowser, Gtalk (Hangout after ther upgrade), a movie player and musicplayer. It provides access to Google Play store with thousands of android apps.</p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/p-S1JBgBKLI" frameborder="0" allowfullscreen=""></iframe>
5 CSS3 features explained2013-06-09T00:00:00Zhttps://daker.me/2013/06/5-css3-features-explained.html<p>CSS3 is one of the coolest new web technologies available to front-end developers right now, overtime we have seen so many features that generally were implemented via <a href="http://daker.me/2013/06/5-html5-javascript-apis-to-keep-an-eye-on.html">JavaScript</a>, can now be acheived with a few lines of CSS.
So in this post i will explain to you five features that will save you time and energy.</p>
<h2>Flexible boxes</h2>
<p>The CSS3 Flexible Box, better known as Flexbox enables you to create complex layouts with only a few lines of code.
How many time you wanted to vertically center a div ? how many time you wanted to create a 3 columns layout with 2 fluid columns and one fixed ? here is how to do it — with CSS only</p>
<h3>Vertical centering of a div</h3>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/NnkHF/30/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<h3>Fixed-Fluid-Fixed Layout</h3>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/GWZzd/embedded/result,css,html" allowfullscreen="allowfullscreen"></iframe>
<p>As you can see this will allow you to make other layouts(Fluid-Fluid-Fixed, Fluid-Fixed-Fixed, etc...), easy no ?</p>
<div class="browser-support">
<dfn title="firefox"><div>20.0</div></dfn>
<dfn title="chrome"><div>26.0</div></dfn>
<dfn title="opera"><div>12.1</div></dfn>
<dfn title="ie"><div>10.0</div></dfn>
<dfn title="safari"><div>5.1</div></dfn>
</div>
<h2>:nth-child</h2>
<p>:nth-child is a CSS pseudo-class which allows you to select elements with a formula <code>:nth-child(n)</code>. The pseudo-class accepts an argument, n, which can be a keyword, a number or a number expression of the form an+b.</p>
<p>A good use case is displaying a zebra striping table without using extra CSS classes, JavaScript, or server-side code using the modulo, only CSS hein ?</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/uc2Kv/embedded/result,css,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>There is also <code>:nth-of-type</code> it works the same way , except that it only considers element of the given type.</p>
<div class="browser-support">
<dfn title="firefox"><div>3.5</div></dfn>
<dfn title="chrome"><div>4.0</div></dfn>
<dfn title="opera"><div>9.5</div></dfn>
<dfn title="ie"><div>9.0</div></dfn>
<dfn title="safari"><div>3.2</div></dfn>
</div>
<h2>CSS Hyphenation</h2>
<p>The hyphens CSS property tells the browser how to go about splitting words to improve the layout of text when line-wrapping. On HTML, the language is determined by the lang attribute: browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. On XML, the xml:lang attribute must be used.</p>
<p>Source <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens">MDN</a>.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/8w9bn/embedded/result,css,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>NB: To see the result you need to try to resize the window of your demo.</p>
<div class="browser-support">
<dfn title="firefox"><div>6.0</div></dfn>
<dfn title="chrome"><div>13.0</div></dfn>
<dfn title="opera" class="unsupported"><div>—</div></dfn>
<dfn title="ie"><div>10.0</div></dfn>
<dfn title="safari"><div>5.1</div></dfn>
</div>
<h2>CSS Filter Effects</h2>
<p>Filters are a powerful tool, they can manipulate the appearance of any HTML element and can be stacked together to create unique effects and provide endless of possibilities, such as grayscale, sepia, saturation, opacity, and blurs. The <code>filter</code> property creates a hardware-accelerated effects using the GPU.</p>
<iframe width="100%" height="300" src="https://jsfiddle.net/daker/qZdmS/embedded/result,css,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<div class="browser-support">
<dfn title="firefox" class="unsupported"><div>—</div></dfn>
<dfn title="chrome"><div>18.0</div></dfn>
<dfn title="opera"><div>15.0</div></dfn>
<dfn title="ie" class="unsupported"><div>—</div></dfn>
<dfn title="safari"><div>6.0</div></dfn>
</div>
<h2>CSS3 Media Queries</h2>
<p>CSS3 Media queries allow you to target CSS rules based on screen size, device-orientation or display-density, you can add expressions to media type to check for certain conditions, this is the technique used for the so called "Responsive design".</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* The following CSS will apply if the viewing area is smaller than 600px. */</span><br /><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">.class</span> <span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token comment">/* The following CSS will apply if the viewing area is 700px wide or wider and the display is in landscape mode. */</span><br /><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 700px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token selector">.class</span> <span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>You can also apply css rules based on media types <code>screen</code>, <code>tv</code> or <code>handheld</code>, you can find the list <a href="http://www.w3.org/TR/CSS2/media.html#media-types">here</a></p>
<div class="browser-support">
<dfn title="firefox"><div>20.0</div></dfn>
<dfn title="chrome"><div>26.0</div></dfn>
<dfn title="opera"><div>12.1</div></dfn>
<dfn title="ie"><div>9.0</div></dfn>
<dfn title="safari"><div>5.1</div></dfn>
</div>
<p>Let me know your thoughts in the comments below, also you can discuss, upvote this post over at <a href="https://news.ycombinator.com/item?id=5849053">Hacker News</a>.</p>
5 HTML5 Javascript APIs to keep an eye on2013-06-02T00:00:00Zhttps://daker.me/2013/06/5-html5-javascript-apis-to-keep-an-eye-on.html<p>In my <a href="http://daker.me/2013/05/5-html5-features-you-need-to-know.html">last post</a>, i have talked about HTML5 APIs, so thought it will also interesting to write about some new <strike>old</strike> JavaScript APIs. Since CSS has been improving over the time and today you can achieve what was only done with Javascript with CSS only, on the other side Javascript have to improve and follow the evolution, so today Javascript can do a lot of things, like accessing hardware(camera, microphone, gamepad, GPU), accessing the filesystem and websocket.</p>
<h2>Battery Status API</h2>
<p>The <a href="http://www.w3.org/TR/battery-status/">Battery Status API</a> allows any webpage to inspect the state of the device's (Laptop, phone or tablet) battery through javascript :</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">var</span> battery <span class="token operator">=</span> navigator<span class="token punctuation">.</span>battery <span class="token operator">||</span> navigator<span class="token punctuation">.</span>webkitBattery <span class="token operator">||</span> navigator<span class="token punctuation">.</span>mozBattery<br /><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Battery charging: "</span><span class="token punctuation">,</span> battery<span class="token punctuation">.</span>charging<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Battery level: "</span><span class="token punctuation">,</span> battery<span class="token punctuation">.</span>level<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0.58</span><br />console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Battery discharging time: "</span><span class="token punctuation">,</span> battery<span class="token punctuation">.</span>dischargingTime<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>As you can see you need to do more checks to make your code cross-browser compatible, i have done some researches and i have found <a href="https://github.com/pstadler/battery.js/">battery.js</a> a tiny wrapper for the Battery Status API :</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>Battery<span class="token punctuation">.</span><span class="token function">isSupported</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// Get the battery status</span><br /> <span class="token keyword">var</span> status <span class="token operator">=</span> Battery<span class="token punctuation">.</span><span class="token function">getStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Level: '</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>status<span class="token punctuation">.</span>level <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 30%</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Charging: '</span> <span class="token operator">+</span> status<span class="token punctuation">.</span>charging<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Time until charged: '</span> <span class="token operator">+</span> status<span class="token punctuation">.</span>chargingTime<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3600 (seconds) or Infinity</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Battery time left: '</span> <span class="token operator">+</span> status<span class="token punctuation">.</span>dischargingTime<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3600 (seconds) or Infinity</span><br /><br /> <span class="token comment">// Register a handler to get notified when battery status changes</span><br /> Battery<span class="token punctuation">.</span><span class="token function-variable function">onUpdate</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {level, charging, chargingTime, dischargingTime}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<div class="browser-support">
<dfn title="firefox"><div>16.0</div></dfn>
<dfn title="chrome"><div>19</div></dfn>
<dfn title="opera" class="unsupported"><div>—</div></dfn>
<dfn title="ie" class="unsupported"><div>—</div></dfn>
<dfn title="safari" class="unsupported"><div>—</div></dfn>
</div>
<h2>Gamepad API</h2>
<p>Gamepad API allows you to connect your console gamepad into your computer and use it for browser based games. With the increase in popularity of HTML5 games this API will have a prominent future.</p>
<pre class="language-js"><code class="language-js">navigator<span class="token punctuation">.</span>gamepads <span class="token operator">=</span> navigator<span class="token punctuation">.</span>webkitGamepads <span class="token operator">||</span> navigator<span class="token punctuation">.</span>MozGamepads<span class="token punctuation">;</span><br /><br /><span class="token keyword">var</span> requestAnimationFrame <span class="token operator">=</span> window<span class="token punctuation">.</span>webkitRequestAnimationFrame <span class="token operator">||</span><br /> window<span class="token punctuation">.</span>mozRequestAnimationFrame<span class="token punctuation">;</span><br /><span class="token keyword">var</span> cancelAnimationFrame <span class="token operator">=</span> window<span class="token punctuation">.</span>webkitCancelAnimationFrame <span class="token operator">||</span><br /> window<span class="token punctuation">.</span>MozCancelAnimationFrame<span class="token punctuation">;</span><br /><br /><span class="token keyword">var</span> controllers <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Stash connected controllers.</span><br /><span class="token keyword">var</span> reqId <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span><br /><br /><span class="token keyword">function</span> <span class="token function">onConnected</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> controllers<span class="token punctuation">[</span>e<span class="token punctuation">.</span>gamepad<span class="token punctuation">.</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">.</span>gamepad<span class="token punctuation">;</span><br /> <span class="token function">runAnimation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token keyword">function</span> <span class="token function">onDisconnected</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">delete</span> controllers<span class="token punctuation">[</span>e<span class="token punctuation">.</span>gamepad<span class="token punctuation">.</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span><br /> <span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span>reqId<span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br />window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'webkitgamepadconnected'</span><span class="token punctuation">,</span> onConnected<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'webkitgamepaddisconnected'</span><span class="token punctuation">,</span> onDisconnected<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br />window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'MozGamepadDisconnected'</span><span class="token punctuation">,</span> onDisconnected<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br />window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'MozGamepadConnected'</span><span class="token punctuation">,</span> onConnected<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Source : <a href="https://html5-demos.appspot.com/static/html5-therealbleedingedge/template/index.html#27">The Edge of HTML5</a></p>
<div class="browser-support">
<dfn title="firefox"><div>3.6</div></dfn>
<dfn title="chrome"><div>21</div></dfn>
<dfn title="opera" class="unsupported"><div>—</div></dfn>
<dfn title="ie" class="unsupported"><div>—</div></dfn>
<dfn title="safari" class="unsupported"><div>—</div></dfn>
</div>
<p>There is a library called <a href="http://www.gamepadjs.com/">gamepadjs</a>, which will let you use this API very easily.</p>
<h2>Device Orientation API</h2>
<p>Using device orientation, you can determine the orientation of the device as well as gather information about its movement (alpha, beta and gamma).</p>
<p><img src="https://daker.me/assets/posts/deviceorientation.png" alt="Source html5rocks.com" /></p>
<pre class="language-js"><code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>DeviceOrientationEvent<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'deviceorientation'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> a <span class="token operator">=</span> event<span class="token punctuation">.</span>alpha<span class="token punctuation">,</span><br /> b <span class="token operator">=</span> event<span class="token punctuation">.</span>beta<span class="token punctuation">,</span><br /> g <span class="token operator">=</span> event<span class="token punctuation">.</span>gamma<span class="token punctuation">;</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Orientation - Alpha: '</span> <span class="token operator">+</span> a <span class="token operator">+</span> <span class="token string">', Beta: '</span><span class="token operator">+</span> b <span class="token operator">+</span> <span class="token string">', Gamma: '</span> <span class="token operator">+</span> g<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'This device does not support deviceorientation'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<div class="browser-support">
<dfn title="firefox"><div>3.6</div></dfn>
<dfn title="chrome"><div>7.0</div></dfn>
<dfn title="opera"><div>15.0</div></dfn>
<dfn title="ie" class="unsupported"><div>—</div></dfn>
<dfn title="safari" class="unsupported"><div>—</div></dfn>
</div>
<p>To use this feature your device must have gyroscope capabilities, more about browser support can be found on <a href="http://caniuse.com/deviceorientation">caniuse.com</a>.</p>
<h2>Geolocation API</h2>
<p>The <a href="http://dev.w3.org/geo/api/">Geolocation API</a> lets you share your location with trusted web sites. The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server and do fancy location-aware things like finding local businesses or showing your location on a map, it can be also used for "geo-tagging" user's content like photos.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">position</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">var</span> lat <span class="token operator">=</span> position<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>latitude<span class="token punctuation">,</span><br /> lon <span class="token operator">=</span> position<span class="token punctuation">.</span>coords<span class="token punctuation">.</span>longitude<span class="token punctuation">;</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Geolocation - Latitude: '</span><span class="token operator">+</span> lat <span class="token operator">+</span><span class="token string">', Longitude: '</span><span class="token operator">+</span> lon<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><span class="token keyword">else</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Geolocation is not supported for this Browser/OS version yet.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<div class="browser-support">
<dfn title="firefox"><div>3.5</div></dfn>
<dfn title="chrome"><div>5.0</div></dfn>
<dfn title="opera"><div>10.6</div></dfn>
<dfn title="ie"><div>9.0</div></dfn>
<dfn title="safari"><div>5.0</div></dfn>
</div>
<p>More about browser support can be found on <a href="http://caniuse.com/geolocation">caniuse.com</a>.</p>
<h2>Page Visibility API</h2>
<p>The <a href="http://www.w3.org/TR/page-visibility/">Page Visibility API</a> let's you determine if your page is visible or not, when you minimise the page or move to another tab, a visibilitychange event is triggered, this can be very useful if you are a game developer this will allow you to pause the game when the user change the page.</p>
<pre class="language-js"><code class="language-js">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'visibilitychange'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hidden:'</span> <span class="token operator">+</span> document<span class="token punctuation">.</span>hidden<span class="token punctuation">,</span><br /> <span class="token string">'state:'</span> <span class="token operator">+</span> document<span class="token punctuation">.</span>visibilityState<span class="token punctuation">)</span><br /><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<div class="browser-support">
<dfn title="firefox"><div>10.0</div></dfn>
<dfn title="chrome"><div>14.0</div></dfn>
<dfn title="opera"><div>12.1</div></dfn>
<dfn title="ie"><div>10.0</div></dfn>
<dfn title="safari" class="unsupported"><div>—</div></dfn>
</div>
<p>More about browser support can be found on <a href="http://caniuse.com/pagevisibility">caniuse.com</a>.</p>
<p>Let me know your thoughts in the comments below, also you can discuss, upvote this post over at <a href="https://news.ycombinator.com/item?id=5809719">Hacker News</a>.</p>
5 Sublime Text 2 packages to enhance your frontend development workflow2013-05-28T00:00:00Zhttps://daker.me/2013/05/5-sublimetext2-packages-to-enhance-your-frontend-development-workflow.html<p>Sublime Text 2 is a lightweight, cross platform, blazing fast text editor with chrome-like tabs and split window layouts, it works for both web development and software development.</p>
<p>Sublime Text has got a wide range of open source plugins with a massive community of plugin developers.</p>
<p><img src="https://daker.me/assets/posts/sublime.png" alt="Sublime Text 2" /></p>
<p>For my frontend development workflow i use some plugins with a specific user settings and sure the wonderfull <a href="https://github.com/buymeasoda/soda-theme">Soda theme</a> by <a href="https://github.com/buymeasoda">Ian Hill</a>, so here’s <a href="https://gist.github.com/daker/5665850">my settings file</a>:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"auto_complete"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token property">"caret_style"</span><span class="token operator">:</span> <span class="token string">"phase"</span><span class="token punctuation">,</span><br /> <span class="token property">"close_windows_when_empty"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token property">"color_scheme"</span><span class="token operator">:</span> <span class="token string">"Packages/Tomorrow Color Schemes/Tomorrow-Night.tmTheme"</span><span class="token punctuation">,</span><br /> <span class="token property">"draw_white_space"</span><span class="token operator">:</span> <span class="token string">"all"</span><span class="token punctuation">,</span><br /> <span class="token property">"find_selected_text"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token property">"fold_buttons"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><br /> <span class="token property">"folder_exclude_patterns"</span><span class="token operator">:</span><br /> <span class="token punctuation">[</span><br /> <span class="token string">".svn"</span><span class="token punctuation">,</span><br /> <span class="token string">".git"</span><span class="token punctuation">,</span><br /> <span class="token string">".hg"</span><span class="token punctuation">,</span><br /> <span class="token string">"CVS"</span><span class="token punctuation">,</span><br /> <span class="token string">"_build"</span><span class="token punctuation">,</span><br /> <span class="token string">"dist"</span><span class="token punctuation">,</span><br /> <span class="token string">"build"</span><span class="token punctuation">,</span><br /> <span class="token string">"site"</span><br /> <span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token property">"font_face"</span><span class="token operator">:</span> <span class="token string">"Ubuntu Mono"</span><span class="token punctuation">,</span><br /> <span class="token property">"font_options"</span><span class="token operator">:</span><br /> <span class="token punctuation">[</span><br /> <span class="token string">"subpixel_antialias"</span><br /> <span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token property">"font_size"</span><span class="token operator">:</span> <span class="token number">12.0</span><span class="token punctuation">,</span><br /> <span class="token property">"highlight_line"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token property">"ignored_packages"</span><span class="token operator">:</span><br /> <span class="token punctuation">[</span><br /> <span class="token string">"Vintage"</span><br /> <span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token property">"rulers"</span><span class="token operator">:</span><br /> <span class="token punctuation">[</span><br /> <span class="token number">72</span><span class="token punctuation">,</span><br /> <span class="token number">79</span><br /> <span class="token punctuation">]</span><span class="token punctuation">,</span><br /> <span class="token property">"theme"</span><span class="token operator">:</span> <span class="token string">"Soda Dark.sublime-theme"</span><span class="token punctuation">,</span><br /> <span class="token property">"translate_tabs_to_spaces"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br /> <span class="token property">"trim_trailing_white_space_on_save"</span><span class="token operator">:</span> <span class="token boolean">true</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Package Control</h2>
<p><a href="http://wbond.net/sublime_packages/package_control/">Package Control</a> is one of my favorite plugins, it allows users to manage packages very easily, with one shortcut you have access to a long list of plugins available to install and update is automaticly handled. To install it open the console View->Show Console, then paste the following code :</p>
<pre class="language-python"><code class="language-python"><span class="token keyword">import</span> urllib2<span class="token punctuation">,</span>os<span class="token punctuation">;</span> pf<span class="token operator">=</span><span class="token string">'Package Control.sublime-package'</span><span class="token punctuation">;</span> ipp<span class="token operator">=</span>sublime<span class="token punctuation">.</span>installed_packages_path<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> os<span class="token punctuation">.</span>makedirs<span class="token punctuation">(</span>ipp<span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token keyword">not</span> os<span class="token punctuation">.</span>path<span class="token punctuation">.</span>exists<span class="token punctuation">(</span>ipp<span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token boolean">None</span><span class="token punctuation">;</span> urllib2<span class="token punctuation">.</span>install_opener<span class="token punctuation">(</span>urllib2<span class="token punctuation">.</span>build_opener<span class="token punctuation">(</span>urllib2<span class="token punctuation">.</span>ProxyHandler<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token builtin">open</span><span class="token punctuation">(</span>os<span class="token punctuation">.</span>path<span class="token punctuation">.</span>join<span class="token punctuation">(</span>ipp<span class="token punctuation">,</span>pf<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token string">'wb'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>write<span class="token punctuation">(</span>urllib2<span class="token punctuation">.</span>urlopen<span class="token punctuation">(</span><span class="token string">'http://sublime.wbond.net/'</span><span class="token operator">+</span>pf<span class="token punctuation">.</span>replace<span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">,</span><span class="token string">'%20'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'Please restart Sublime Text to finish installation'</span><span class="token punctuation">)</span></code></pre>
<p>To use it simply invoke the command palette using ctrl+shift+p or ⌘+shift+p then type "install" :</p>
<p><img src="https://daker.me/assets/posts/sublime-palette.png" alt="Sublime Text 2 command palette" /></p>
<h2>Sublime Linter</h2>
<p><a href="https://github.com/SublimeLinter/SublimeLinter">Sublime Linter</a> is the Swiss knife of code linting, it highlights potential errors in your code depending on the language you are using.</p>
<h2>LiveReload</h2>
<p><a href="https://github.com/dz0ny/LiveReload-sublimetext2">LiveReload</a> can help you to save a lot time, you don't need to hit refresh in your browser each time you want to test, everything will be done automatically when you save your file.</p>
<h2>Prefixr</h2>
<p><a href="http://wbond.net/sublime_packages/prefixr">Prefixr</a> runs your CSS through the <a href="http://prefixr.com/">Prefixr</a> API to make it Cross-Browser.</p>
<h2>Sidebar Enhancements</h2>
<p><a href="https://github.com/titoBouzout/SideBarEnhancements">Sidebar Enhancements</a> Makes the sidebar more user friendly and improves its usability by adding more options to it. You can delete files and open files using certain programs like Photoshop. giving you more options on new files, moving files, copying files and opening files in another program.</p>
<h2>Emmet</h2>
<p><a href="https://github.com/sergeche/emmet-sublime">Emmet (ex Zen Coding)</a> - With this plugin you will see the "Valentino Rossi" on you, this will bring hight-speed development process in your HTML and CSS.</p>
<h2>Bonus</h2>
<p>Here are some useful Keyboard shortcuts to remember :</p>
<ul>
<li>ctrl+d Select the next occurrence of the selected word</li>
<li>ctrl+k, ctrl+b - Toggle the sidebar</li>
<li>f11 - Toggle Full Screen</li>
<li>shift+f11 - Toggle Distraction Free (this one is my <strong>favorite</strong>)</li>
<li>alt+. - Close Tag</li>
<li>ctrl+p - Show the go to overlay panel</li>
<li>ctrl+shift+p - Show the command overlay panel</li>
<li>ctrl+alt+p - Show the project selector panel</li>
<li>ctrl+r - Show the go to overlay panel default to method selector</li>
<li>ctrl+g - Show the go to overlay panel default to go to line selector</li>
<li>ctrl+; - Show the go to overlay panel default to variable selector</li>
<li>ctrl+shift+up - Swap with the line above</li>
<li>ctrl+shift+down - Swap with the line below</li>
<li>ctrl+/ - Toggle a comment</li>
<li>ctrl+shift+/ - Toggle a comment block</li>
<li>ctrl+shift+d - Duplicate a line</li>
<li>ctrl+` - Display console panel</li>
<li>ctrl+space - Auto complete the current selected snippet</li>
</ul>
<p>I hope this will help you with your development workflow, let me know your thoughts and what plugins you use in the comments below.</p>
<p>You can discuss, upvote this post over at <a href="https://news.ycombinator.com/item?id=5785243">Hacker News</a> or on <a href="http://www.reddit.com/r/webdev/comments/1f8anb/5_sublime_text_2_packages_to_enhance_your/">/r/webdev</a>.</p>
5 HTML5 Features you need to know2013-05-25T00:00:00Zhttps://daker.me/2013/05/5-html5-features-you-need-to-know.html<p>HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time.</p>
<p><img src="https://daker.me/assets/posts/html5-logo.png" alt="HTML5 logo" /></p>
<h2>DNS Prefetching</h2>
<p>DNS hostname resolution is one of the issues that can make any website slow. Modern browsers start to be very smart when it comes to DNS resolution, they try to resolve domain names then cache them before the user tries to follow any link on the webpage.</p>
<p>With the dns-prefetch feature you are allowed to manually control this operation by telling the browser which domain names to resolve :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//fonts.googleapis.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//google-analytics.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//www.google-analytics.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//platform.twitter.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h2>Link Prefetching</h2>
<p>Link prefetching allows developers to specify pages or assets they want to silently preload once the page load, like loading the first search results :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://daker.me/2013/05/hello-world.html<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://daker.me/assets/images/avatar.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>
<p>Also you can use the <a href="https://developers.google.com/chrome/whitepapers/prerender">prerendering</a> feature which will make your website even faster, the browser will fetch and render the entire next page on the background and show it only when the user click on the link :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prerender<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://daker.me/2013/05/hello-world.html<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>
<iframe width="780" height="439" src="http://www.youtube.com/embed/_Jn93FDx9oI" frameborder="0" allowfullscreen=""></iframe>
<h2>Download Attribute</h2>
<p>The HTML5 download attribute allows developers to force a file to download rather than go to that specific page, you no longer need to rely on server side code to do that :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>download_pdf.php?id=15<span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myfile.pdf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Download PDF<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<h2>Regular Expressions</h2>
<p>I know you'll fall in love with this feature, no more js <strike>or a server side</strike> code to check if the user's input is a valid email or url adress, with the pattern attribute you can use regular expressions directly :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[^ @]*@[^ @]*<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h2>Datalist Element</h2>
<p>Datalist element is a litle big addition, no more use of jQuery plugins for autocomplete inputs combined with a server side code that hit the database on each user keystroke :</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form.php<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cars<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cars<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>BMW<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bugatti<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cadillac<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chevrolet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chrysler<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>I hope this will help you save time and enhance you coding skills, let me know your thoughts in the comments below.</p>
<p>You can discuss, upvote this post over at <a href="https://news.ycombinator.com/item?id=5768174">Hacker News</a> or on <a href="http://www.reddit.com/r/html5/comments/1f1sd6/5_html5_features_you_need_to_know/">/r/html5</a>.</p>
Hello World2013-05-22T00:00:00Zhttps://daker.me/2013/05/hello-world.html<p>Hello World! I’ve been wanting a to start my own blog for a while now. Time and other constraints have been preventing me, but I finally sat down over the last week-end and hacked together what you actually see.</p>
<p>It’s all handwritten in <a href="https://en.wikipedia.org/wiki/Markdown">markdown</a>, generated by <a href="http://mynt.mirroredwhite.com/">mynt</a>, and powered by <a href="http://pages.github.com/">Github pages</a>, with commenting by <a href="http://disqus.com/">Disqus</a>.</p>
<p>I have decided to license the content of this website under a Creative Commons license; CC-BY-SA 3.0 Unported, to be exact. This means that you can take what I will write on this blog, reuse it for whatever you see fit, or combine it with other content under the same license, e.g. from Wikipedia. The only requirements are that :</p>
<ul>
<li>you quote where you got it from, i.e. from me (Adnane Belmadiaf) and this website (<a href="http://daker.me/">daker.me</a>)</li>
<li>you share the result under the same license</li>
</ul>
<p>So feel free to leave a comment or tweet me <a href="https://twitter.com/AdnaneBelmadiaf">@AdnaneBelmadiaf</a>.</p>