tag:blogger.com,1999:blog-41967293515806026132024-03-13T03:25:03.724+01:00ondrejd's blogBlog mainly about software, development and so on.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.comBlogger29125tag:blogger.com,1999:blog-4196729351580602613.post-55666999389921509832016-01-09T18:48:00.000+01:002016-01-09T18:48:00.684+01:00Termux - all you need for development on AndroidI just bought myself new Android phone (before I used several years old-school Nokia with Symbian) and I found myself totally surprised when I discovered <a href="https://termux.com">Termux</a>. You can install <b>Vim</b>, <b>PHP</b> (version 5.6), <b>Python</b>, <b>GCC</b>, <b>golang</b> - all you need.<br />
If I was aware of this I would buy phone earlier but I always think that it is just a useless toy since I'm not interested to by <i>social</i>.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-82341397557750507002015-08-27T20:25:00.001+02:002015-08-27T20:25:49.614+02:00Simple file caching in PHPIf you are creating simple file cache in your PHP code and wondering about the performance try this great article - <a href="http://techblog.procurios.nl/k/n618/news/view/34972/14863/cache-a-large-array-json-serialize-or-var_export.html">Cache a large array: JSON, serialize or var_export?</a> (written by <b>Taco van den Broek</b>).Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-11686459867412698862015-07-06T04:29:00.000+02:002015-07-06T04:51:18.974+02:00Visual Studio CodeI like to test various code editors and currently I'm using <a href="https://code.visualstudio.com/">Visual Studio Code</a> from <a href="http://www.microsoft.com/en-us/">Microsoft</a> (yes, it's open source editor from MS running on Linux :)). I'm using it mainly for developing add-ons for <a href="https://www.mozilla.org/firefox">Mozilla Firefox</a> (HTML+JavaScript+CSS) and PHP projects and I'm pretty impressed.<br />
<br />
For example here is a screenshot when I was editing JavaScript code where I made a mistake that I pushed new items into bad array (see highlighed parts of code below and you will understand):<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhfO3sO4MGcn-1RZuhyx7_lI5BpSRKX2rR1oP3yHSEIXBYWJLqYQFnJuspG_rFCJN7nqioOA7drz8m6NbwJLDthABm47p8YCnFNZ_S2Hieje0bGgKskXKc5ZhkxQArMP9iLxnzljXbWs/s1600/screen-javascript-error.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhfO3sO4MGcn-1RZuhyx7_lI5BpSRKX2rR1oP3yHSEIXBYWJLqYQFnJuspG_rFCJN7nqioOA7drz8m6NbwJLDthABm47p8YCnFNZ_S2Hieje0bGgKskXKc5ZhkxQArMP9iLxnzljXbWs/s320/screen-javascript-error.png" /></a></div><br />
The error shown is really usefull...Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-9968743058314067072015-06-29T15:33:00.000+02:002015-06-29T15:39:03.204+02:00CSS3 AnimationsDo you remember the hell to do something like this just few years ago? :) - <a href="http://jsfiddle.net/ondrejd/22Lczf3d/" target="blank">http://jsfiddle.net/ondrejd/22Lczf3d/</a><br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><table><tr><td><pre style="margin: 0; line-height: 125%">1
2
3</pre></td><td><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><div</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">"snackbar"</span><span style="color: #007700">></span>
<span style="color: #007700"><p></span>New URL saved<span style="color: #007700"></p></span>
<span style="color: #007700"></div></span>
</pre></td></tr>
</table></div><br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><table><tr><td><pre style="margin: 0; line-height: 125%"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14</pre></td><td><pre style="margin: 0; line-height: 125%"><span style="color: #007700">div</span><span style="color: #BB0066; font-weight: bold">.snackbar</span> {
animation<span style="color: #333333">-</span>duration<span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">0.5s</span>;
animation<span style="color: #333333">-</span>name<span style="color: #333333">:</span> snackbarSlideIn;
<span style="color: #008800; font-weight: bold">background-color</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">#323232</span>;
<span style="color: #008800; font-weight: bold">border</span><span style="color: #333333">-</span>radius<span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">2px</span> <span style="color: #6600EE; font-weight: bold">2px</span> <span style="color: #6600EE; font-weight: bold">2px</span> <span style="color: #6600EE; font-weight: bold">2px</span>;
<span style="color: #008800; font-weight: bold">bottom</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">10px</span>;
<span style="color: #008800; font-weight: bold">color</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">#FFFFFF</span>;
<span style="color: #008800; font-weight: bold">height</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">48px</span>;
<span style="color: #008800; font-weight: bold">min-width</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">288px</span>;
<span style="color: #008800; font-weight: bold">max-width</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">568px</span>;
<span style="color: #008800; font-weight: bold">padding</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">0</span> <span style="color: #6600EE; font-weight: bold">24px</span> <span style="color: #6600EE; font-weight: bold">0</span> <span style="color: #6600EE; font-weight: bold">24px</span>;
<span style="color: #008800; font-weight: bold">position</span><span style="color: #333333">:</span> <span style="color: #008800; font-weight: bold">fixed</span>;
<span style="color: #008800; font-weight: bold">right</span><span style="color: #333333">:</span> <span style="color: #6600EE; font-weight: bold">10px</span>;
}
</pre></td></tr>
</table></div><br />
Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-46496675676762691802015-06-21T16:53:00.002+02:002015-06-21T16:53:51.374+02:00GitBookI don't know if you hear about <a href="https://www.gitbook.com">GitBook</a> - web solution for digital writing and publishing. I already heard about it but never got time to explore it and that was definitively a mistake.<br />
<br />
See for yourself - here is some links to books you can find there:<br />
<br />
<ul><li><a href="https://www.gitbook.com/book/anotheruiguy/nodeexpreslibsass_from-scratch">Node, Express and libsass: project from scratch workshop</a></li>
<li><a href="https://www.gitbook.com/book/tarendai/wordpress-the-right-way">WordPress The Right Way</a></li>
<li><a href="http://book.famousmobileapps.com/">Famous Mobile Apps</a></li>
<li><a href="http://gitbookio.gitbooks.io/progit/content/en/index.html">Pro GIT</a> (in four language mutations!)</li>
<li><a href="https://www.gitbook.com/book/astaxie/build-web-application-with-golang">Build Web Application with Golang</a></li>
<li><a href="https://www.gitbook.com/book/codegangsta/building-web-apps-with-go">Building Web Apps with Go</a></li>
<li><a href="https://www.gitbook.com/book/apriendeau/go-best-practices">go-best-practices</a></li>
<li><a href="https://www.gitbook.com/book/aminb/rust-for-c">Rust for C++ Programmers</a></li>
</ul><br />
If you're interested in writing your own book there is also pretty application that helps you with it: <a href="https://github.com/GitbookIO/editor-legacy">GitBook Editor</a>.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-74402808447535123982015-06-02T21:46:00.002+02:002015-06-02T21:46:08.768+02:00TagsSidebar 1.0.5Today was released yet another version of <b>TagsSidebar</b> and changes are pretty good:<br />
<br />
<ol><li>fixed issues around displaying the tags (issues <a href="https://bitbucket.org/ondrejd/tagssidebar/issue/2/border-s-to-remove">#2</a>, <a href="https://bitbucket.org/ondrejd/tagssidebar/issue/3/ui-scrollbars-resizable-needed">#3</a>)</li>
<li>added user options `tagsFontSize` and `tagsTheme` (see issue <a href="https://bitbucket.org/ondrejd/tagssidebar/issue/7/better-look">#7</a>)</li>
<li>added shortcut <kbd>Ctrl+Shift+B</kbd> for quick opening/hiding the sidebar self</li>
</ol><br />
You can download this version either from <a href="https://addons.mozilla.org/firefox/addon/tagssidebar/" title="Addons.Mozilla.Org">AMO</a> or directly from the repository on the <a href="https://bitbucket.org/ondrejd/tagssidebar/downloads">BitBucket</a>.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-29851873549666951192015-06-02T07:16:00.000+02:002015-06-02T07:17:47.212+02:00TagsSidebar 1.0.4Today I released new version of <b>TagsSidebar</b> add-on for <a href="http://www.mozilla.org/en-US/firefox/">Mozilla Firefox</a>.<br />
<br />
<b>Changes in 1.0.4</b><br />
<br />
<ul><li>enabled alphabetical sorting of tags and bookmarks (you need to enable this <i>via</i> add-on options)</li>
<li>fixed <a href="https://bitbucket.org/ondrejd/tagssidebar/issue/5/querying-doesnt-work-with-new-versions-of">bug</a> that around bookmarks on newer versions of <a href="http://www.mozilla.org/en-US/firefox/">Mozilla Firefox</a></li>
</ul><br />
You can download this version either from <a href="https://addons.mozilla.org/firefox/addon/tagssidebar/" title="Addons.Mozilla.Org">AMO</a> or directly from the repository on the <a href="https://bitbucket.org/ondrejd/tagssidebar/downloads">BitBucket</a>.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-39989823334421440522015-05-18T20:29:00.002+02:002015-05-18T20:29:51.794+02:00No more binary XPCOM components in FirefoxFrom Firefox 40 will be dropped support for binary XPCOM components - so another piece of history on which I started "real" programming will be gone. Some of you maybe remember <a href="https://addons.mozilla.org/cs/firefox/addon/xpcomviewer/">XPCOMViewer</a> :)<br />
<br />
You can see more details here: <a href="https://blog.mozilla.org/addons/2015/05/04/dropping-support-for-binary-components/">https://blog.mozilla.org/addons/2015/05/04/dropping-support-for-binary-components/</a> and here <a href="https://groups.google.com/forum/#!topic/mozilla.dev.extensions/B3H3j6FRVms">https://groups.google.com/forum/#!topic/mozilla.dev.extensions/B3H3j6FRVms</a>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-69225756758575697972014-06-26T18:50:00.000+02:002014-06-26T18:50:22.001+02:00DOM Insertion TestWhile I worked on some task that includes inserting of many HTML elements into the document I was wandering what the fastest method is. I tried (basically) three methods:<br />
<br />
<ul><li>simple one by one element inserting using <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.createElement"><code>document.createElement</code></a> followed by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild"><code>element.appendChild</code></a></li>
<li>using <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment"><code>document.createDocumentFragment</code></a> – all created elements are appended to the document fragment and than inserted into the HTML document at once</li>
<li>using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML"><code>element.innerHTML</code></a> – create all new elements as a string and than insert it into the document at once</li>
</ul><br />
The fastest method is the last and the slowest is the first method. But sometimes is better use safe <abbr title="Document Object Model">DOM</abbr> approach so in this cases is the best using of the second method.<br />
<br />
<strong>Some advices</strong><br />
<br />
<ol><li>Make HTML you are inserting as simple as is possible - each attribute counts!</li>
<li>If you create many elements and want event handlers attached to them don`t do it for each one element but attach one event handler to the parent element and then inside the handler self determine what the target element is.</li>
<li>Insert large amount of new elements in portions not in once. The advantage is that user always see that something is happening, the disadvantage is that it is little slower than do it at once.</li>
</ol><br />
Below is <a href="http://jsfiddle.net/">jsFiddle</a> with the testing document (<a href="http://jsfiddle.net/ondrejd/kLw52/">http://jsfiddle.net/ondrejd/kLw52/</a>):<br />
<br />
<iframe width="100%" height="300" src="http://jsfiddle.net/ondrejd/kLw52/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-25495415935304537452014-06-24T13:41:00.000+02:002014-06-24T13:45:00.189+02:00IDE hidden in Firefox nightlyToday I read <a href="https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/">interesting article</a> on the <a href="https://hacks.mozilla.org/">Mozilla Hacks</a> blog about new <b>WebIDE</b> and I have to say that on my low-cost netbook is this the first <abbr title="Integrated Development Environment">IDE</abbr> targeted on mobile system that actually works and is usable on slower machines (including emulator of course).<br />
Below is a screencast which I borrowed from the original article:<br />
<br />
<iframe width="546" height="307" src="//www.youtube.com/embed/n8c34wk4OnY" frameborder="0" allowfullscreen></iframe><br />
<br />
I must say that while <a href="http://www.mozilla.org/firefox/">Firefox</a> maybe have not market-share as some time ago but still it is the perfect solution for the professionals.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-40958559245593405022014-06-23T22:32:00.001+02:002014-06-23T22:32:15.146+02:00TagsSidebar - new UI proposalsCurrently I'm working on next version of <a href="http://ondrejd.savana-hosting.cz/projects/tagssidebar/">TagsSidebar</a> - besides I'm trying <a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Mozilla Add-on SDK</a> I also created new layout for the main view - here are the screenshots:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1aw7KmB-NDo1yS_BPfQ1vsLunddBXm3FHv2CzANCbSZjFgqVuQThsr2tdhUtWx0wT0VjTtnOqW469pW_kuNU75HR-Zm8dKtU1emydeV7JbWUyBAHoBFkaGgZ-sqoZPGr0HIXpdQGdB8/s1600/layout-default.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1aw7KmB-NDo1yS_BPfQ1vsLunddBXm3FHv2CzANCbSZjFgqVuQThsr2tdhUtWx0wT0VjTtnOqW469pW_kuNU75HR-Zm8dKtU1emydeV7JbWUyBAHoBFkaGgZ-sqoZPGr0HIXpdQGdB8/s320/layout-default.png" /></a><br/><strong style="color: #000;">Default view</strong></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj92hnrD9EmCpLjlauytss9fW0D2WGmuoiuOzw-7aK_5BCq83n3ZHx0FrE7rvhdV2X1ZCCjEicHL2RRQ7rtijJIo08yyhEjRS8BgRoH7SiwEj2XEssoDuGlo46F27W3ydamqDTTbmW9LiE/s1600/layout-no_details+no_favicons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj92hnrD9EmCpLjlauytss9fW0D2WGmuoiuOzw-7aK_5BCq83n3ZHx0FrE7rvhdV2X1ZCCjEicHL2RRQ7rtijJIo08yyhEjRS8BgRoH7SiwEj2XEssoDuGlo46F27W3ydamqDTTbmW9LiE/s320/layout-no_details+no_favicons.png" /></a><br/><strong style="color: #000;">No details and no favicons</strong></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioBjVjqVZ6KF0IiBt_T-iVLRb7KxsCVbqf-G12T836rdNYj824UwlP9cT49yxHP4a6qozyr89D2FD5MYX3AIZ1QWLXaLDHFR7AuexYrqKj6tfDSXvAeLnUc4tV3_zJjW92he7O1UJI1FY/s1600/layout-no_details.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioBjVjqVZ6KF0IiBt_T-iVLRb7KxsCVbqf-G12T836rdNYj824UwlP9cT49yxHP4a6qozyr89D2FD5MYX3AIZ1QWLXaLDHFR7AuexYrqKj6tfDSXvAeLnUc4tV3_zJjW92he7O1UJI1FY/s320/layout-no_details.png" /></a><br/><strong style="color: #000;">No details but with favicons</strong></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvQETTllNE8sJYU64gK8PPEiDkDG0_TlufhbDVvM0q0np11odZkrSkL-TKeIEPeokrDywyHoOMHeFSNi_9Df1dko7axOnoyxSxxUXF9JRV0p_-oP8EPl_5ojjnJTv9B3xAufNjPsXfNw/s1600/layout-no_favicons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvQETTllNE8sJYU64gK8PPEiDkDG0_TlufhbDVvM0q0np11odZkrSkL-TKeIEPeokrDywyHoOMHeFSNi_9Df1dko7axOnoyxSxxUXF9JRV0p_-oP8EPl_5ojjnJTv9B3xAufNjPsXfNw/s320/layout-no_favicons.png" /></a><br/><strong style="color: #000;">Full details but no favicons</strong></div><br />
Hopefully, you will like them :)<br />
<br />
PS: While now I'm dealing with <a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Add-on SDK</a> I want to create blog post where I will compare add-on development using SDK and the old-school way - so stay tuned.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-5284196026280553182014-06-11T00:25:00.000+02:002014-06-11T00:25:58.675+02:00TagsSidebar 1.0I just finished (and published on <abbr title="Addons.Mozilla.Org">AMO</abbr>) my new add-on <strong>TagsSidebar</strong>. It extends <a href="http://www.mozilla.org/en-US/firefox/">Mozilla Firefox</a> with sidebar that allows easy and quick browsing your bookmarks by selecting tags that have attached.<br />
<br />
Here are some important links:<br />
<ul><li><a href="http://ondrejd.savana-hosting.cz/projects/tagssidebar/">project's page</a></li>
<li><a href="https://addons.mozilla.org/addon/tagssidebar/">download page on AMO</a></li>
<li><a href="https://bitbucket.org/ondrejd/tagssidebar/">source codes</a></li>
</ul><br />
And here goes few screenshots:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sEScRo856014DmzsvNakVCNl6vBju718sInLdPhtcVZ58UTePbkFfjkctbEod5sncsVLHDzirCZTOGtsoYh3T8H7hy0B_4BLSvR7o_IS2g5Um_WEshTxqLqI2QCyhW8CcZqwUSCxlHM/s1600/screen01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sEScRo856014DmzsvNakVCNl6vBju718sInLdPhtcVZ58UTePbkFfjkctbEod5sncsVLHDzirCZTOGtsoYh3T8H7hy0B_4BLSvR7o_IS2g5Um_WEshTxqLqI2QCyhW8CcZqwUSCxlHM/s320/screen01.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFFpXEK-SE8ZhumjWdyl0YMYSOoLHeuOXOqhHY4tNby1Kf8JqTYT1vUIUfygTosxMBvOeLX18Q_coy4zCUfwsvCn_PFA_vco52z9Kxshouvjug326BQRQFbTKX-ijFKoGR_pn_ijNx0M/s1600/screen02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFFpXEK-SE8ZhumjWdyl0YMYSOoLHeuOXOqhHY4tNby1Kf8JqTYT1vUIUfygTosxMBvOeLX18Q_coy4zCUfwsvCn_PFA_vco52z9Kxshouvjug326BQRQFbTKX-ijFKoGR_pn_ijNx0M/s320/screen02.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEint5f-wAeEfrskjwzhAZh-M_ITsRm64PHUGyFTFyggzNPMczYqKGoy3_41AZxC_by0QUCUFpJs0sepNccW9pZavga3F4NVWJBZQkx8qB_K1B94HvIaZ2yDOW3IUBb5aA3YG4VTSXIiHvg/s1600/screen03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEint5f-wAeEfrskjwzhAZh-M_ITsRm64PHUGyFTFyggzNPMczYqKGoy3_41AZxC_by0QUCUFpJs0sepNccW9pZavga3F4NVWJBZQkx8qB_K1B94HvIaZ2yDOW3IUBb5aA3YG4VTSXIiHvg/s320/screen03.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnWGqzbE0JEGSxRuhHTpNYdTtzFIIWPZX7Kfm_PewtIdOKcWayFEyJ-Ok8HcTi2shWg_vU5sziru2Jv3GJEd4kuidvDlNNsoyViUEtHo-l4KCG_otWFZK5WCh1yzlNmjN2jDCGbp1Pv8/s1600/screen04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnWGqzbE0JEGSxRuhHTpNYdTtzFIIWPZX7Kfm_PewtIdOKcWayFEyJ-Ok8HcTi2shWg_vU5sziru2Jv3GJEd4kuidvDlNNsoyViUEtHo-l4KCG_otWFZK5WCh1yzlNmjN2jDCGbp1Pv8/s320/screen04.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEnIoiNBtoF8l9PVpNg2f2nFdgLJr0NEaVG77gk0zigTrb3wlPFAcHGfrnkwLpCRNBoL7EwE-ql26Eb-j8vRnpIRZuLB4w65AH71qOprA1SWfoK53BCA2pysJdBSRHtjWc7oE9CHyflng/s1600/screen05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEnIoiNBtoF8l9PVpNg2f2nFdgLJr0NEaVG77gk0zigTrb3wlPFAcHGfrnkwLpCRNBoL7EwE-ql26Eb-j8vRnpIRZuLB4w65AH71qOprA1SWfoK53BCA2pysJdBSRHtjWc7oE9CHyflng/s320/screen05.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6lACPQ13HKEaVj7E-v5Z4KPf-YqsjhgfZOnhlEUSBI2H4LM5Hakw6SW1XstdIaMkzCqPWXOV4A6e-GTfygq868M38uFgESbLX8F3MBpVBi7sb55CiDogUKBb7EfqVRfOZGJC63Y6rPm4/s1600/screen06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6lACPQ13HKEaVj7E-v5Z4KPf-YqsjhgfZOnhlEUSBI2H4LM5Hakw6SW1XstdIaMkzCqPWXOV4A6e-GTfygq868M38uFgESbLX8F3MBpVBi7sb55CiDogUKBb7EfqVRfOZGJC63Y6rPm4/s320/screen06.png" /></a></div>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-79376518614450259622014-06-08T11:40:00.000+02:002014-06-08T12:32:21.605+02:00Creating sidebar add-on for the Firefox with Australis UII'm creating simple add-on for <a href="http://www.mozilla.org/en-US/firefox/">Mozilla Firefox</a> and even I did such add-ons before I run into the troubles. It's because of new Firefox <abbr title="User Interface">UI</abbr> called <a href="https://wiki.mozilla.org/Firefox/Features/Theme_Refinement_and_Evolution_%28Australis%29">Australis</a> and because I want this add-on to be bootstrapped (so it doesn't require browser restart to complete the installation). <br />
After a short googling I found <a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm">CustomizableUI.jsm</a> and I finally got the working solution. <br />
So here is my <code>bootstrap.js</code> which adds the sidebar:<br />
<br />
<pre style="color: #000; font-size: 11px;"><span style="color: green; font-style: italic;">/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */</span>
<strong style="color: darkblue;">const</strong> XUL_NS = <strong style="color: magenta;">"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</strong>;
<strong style="color: darkblue;">const</strong> <strong>{</strong> classes: CC, interfaces: CI, utils: CU <strong>}</strong> = Components;
<strong style="color: darkblue;">const</strong> self = <strong>{</strong>
id: <strong style="color: magenta;">"tagssidebar@ondrejd.info"</strong>,
name: <strong style="color: magenta;">"TagsSidebar"</strong>,
path: <strong>{</strong>
chrome: <strong style="color: magenta;">"chrome://tagssidebar/"</strong>
<strong>}</strong>
<strong>}</strong>;
<strong style="color: darkblue;">const</strong> prefPrefix = <strong style="color: magenta;">"extensions."</strong> + self.id + <strong style="color: magenta;">"."</strong>;
CU.import(<strong style="color: magenta;">"resource://gre/modules/Services.jsm"</strong>);
CU.import(<strong style="color: magenta;">"resource:///modules/CustomizableUI.jsm"</strong>);
<strong style="color: darkblue;">var</strong> gStylesSrv;
<strong style="color: darkblue;">var</strong> gStylesURI;
<span style="color: green; font-style: italic;">// Bootstrap API: install(aData, aReason)</span>
<strong style="color: darkblue;">function</strong> install(aData, aReason) <strong>{</strong>
<strong style="color: darkblue;">if</strong> (aReason == ADDON_INSTALL) <strong>{</strong>
<span style="color: green; font-style: italic;">// Set default preferences</span>
<strong style="color: darkblue;">let</strong> prefs = Services.prefs.getBranch(prefPrefix);
prefs.setBoolPref(<strong style="color: magenta;">"showInSidebar"</strong>, <strong style="color: darkred;">true</strong>);
prefs.setBoolPref(<strong style="color: magenta;">"showTagCloud"</strong>, <strong style="color: darkred;">false</strong>);
prefs.setBoolPref(<strong style="color: magenta;">"showFavicons"</strong>, <strong style="color: darkred;">false</strong>);
<strong>}</strong>
<strong>}</strong> <span style="color: green; font-style: italic;">// end install(aData, aReason)</span>
<span style="color: green; font-style: italic;">// Bootstrap API: uninstall(aData, aReason)</span>
<strong style="color: darkblue;">function</strong> uninstall(aData, aReason) <strong>{</strong>
<strong style="color: darkblue;">if</strong> (aReason == ADDON_UNINSTALL) <strong>{</strong>
<span style="color: green; font-style: italic;">// Remove default preferences</span>
Services.prefs.deleteBranch(prefPrefix);
<strong>}</strong>
<strong>}</strong> <span style="color: green; font-style: italic;">// end uninstall(aData, aReason)</span>
<span style="color: green; font-style: italic;">// Bootstrap API: startup(aData, aReason)</span>
<strong style="color: darkblue;">function</strong> startup(aData, aReason) <strong>{</strong>
<span style="color: green; font-style: italic;">// Create new toolbar button</span>
CustomizableUI.createWidget(<strong>{</strong>
id: <strong style="color: magenta;">"tagssidebar-toolbarbutton"</strong>,
defaultArea: CustomizableUI.AREA_NAVBAR,
label: <strong style="color: magenta;">"TagsSidebar"</strong>,
tooltiptext: <strong style="color: magenta;">"Toggle visibility of TagsSidebar."</strong>,
type: <strong style="color: magenta;">"button"</strong>,
onBeforeCreated: <strong style="color: darkblue;">function</strong>(aDocument) <strong>{</strong>
<span style="color: green; font-style: italic;">// We need to add more UI than the toolbarbutton (broadcaster, key and menuitem):
// Broadcaster</span>
<strong style="color: darkblue;">let</strong> bcset = aDocument.getElementById(<strong style="color: magenta;">"mainBroadcasterSet"</strong>);
<strong style="color: darkblue;">if</strong> (bcset) <strong>{</strong>
<strong style="color: darkblue;">let</strong> bc = aDocument.createElementNS(XUL_NS, <strong style="color: magenta;">"broadcaster"</strong>);
bc.setAttribute(<strong style="color: magenta;">"autoCheck"</strong>, <strong style="color: magenta;">"false"</strong>);
bc.setAttribute(<strong style="color: magenta;">"group"</strong>, <strong style="color: magenta;">"sidebar"</strong>);
bc.setAttribute(<strong style="color: magenta;">"id"</strong>, <strong style="color: magenta;">"viewSidebar_tagssidebar"</strong>);
bc.setAttribute(<strong style="color: magenta;">"oncommand"</strong>, <strong style="color: magenta;">"toggleSidebar('viewSidebar_tagssidebar');"</strong>);
bc.setAttribute(<strong style="color: magenta;">"sidebarurl"</strong>, <strong style="color: magenta;">"chrome://tagssidebar/content/sidebar.xul"</strong>);
bc.setAttribute(<strong style="color: magenta;">"sidebartitle"</strong>, <strong style="color: magenta;">"TagsSidebar"</strong>);
bc.setAttribute(<strong style="color: magenta;">"type"</strong>, <strong style="color: magenta;">"checkbox"</strong>);
bcset.appendChild(bc);
<strong>}</strong>
<span style="color: green; font-style: italic;">// Key</span>
<strong style="color: darkblue;">let</strong> keyset = aDocument.getElementById(<strong style="color: magenta;">"mainKeyset"</strong>);
<strong style="color: darkblue;">if</strong> (keyset) <strong>{</strong>
<strong style="color: darkblue;">let</strong> key = aDocument.createElementNS(XUL_NS, <strong style="color: magenta;">"key"</strong>);
key.setAttribute(<strong style="color: magenta;">"command"</strong>, <strong style="color: magenta;">"viewSidebar_tagssidebar"</strong>);
key.setAttribute(<strong style="color: magenta;">"id"</strong>, <strong style="color: magenta;">"key_openSidebar_tagssidebar"</strong>);
key.setAttribute(<strong style="color: magenta;">"key"</strong>, <strong style="color: magenta;">"t"</strong>);
key.setAttribute(<strong style="color: magenta;">"modifiers"</strong>, <strong style="color: magenta;">"accel,shift"</strong>);
keyset.appendChild(key);
<strong>}</strong>
<span style="color: green; font-style: italic;">// Menuitem</span>
<strong style="color: darkblue;">let</strong> mp = aDocument.getElementById(<strong style="color: magenta;">"viewSidebarMenu"</strong>);
<strong style="color: darkblue;">if</strong> (mp) <strong>{</strong>
<strong style="color: darkblue;">let</strong> mi = aDocument.createElementNS(XUL_NS, <strong style="color: magenta;">"menuitem"</strong>);
mi.setAttribute(<strong style="color: magenta;">"key"</strong>, <strong style="color: magenta;">"key_openSidebar_tagssidebar"</strong>);
mi.setAttribute(<strong style="color: magenta;">"label"</strong>, <strong style="color: magenta;">"TagsSidebar"</strong>);
mi.setAttribute(<strong style="color: magenta;">"observes"</strong>, <strong style="color: magenta;">"viewSidebar_tagssidebar"</strong>);
mi.setAttribute(<strong style="color: magenta;">"tooltiptext"</strong>, <strong style="color: magenta;">"Toggle visibility of TagsSidebar!"</strong>);
mp.appendChild(mi);
<strong>}</strong>
<strong>}</strong>,
onCreated: <strong style="color: darkblue;">function</strong>(aNode) <strong>{</strong>
<span style="color: green; font-style: italic;">// Add ID of broadcaster we created before as a command:</span>
aNode.setAttribute(<strong style="color: magenta;">"command"</strong>, <strong style="color: magenta;">"viewSidebar_tagssidebar"</strong>);
<strong style="color: darkblue;">return</strong> aNode;
<strong>}</strong>
<strong>}</strong>);
<span style="color: green; font-style: italic;">// Load stylesheet</span>
gStylesSrv = CC[<strong style="color: magenta;">"@mozilla.org/content/style-sheet-service;1"</strong>].getService(CI.nsIStyleSheetService);
gStylesURI = Services.io.newURI(self.path.chrome + <strong style="color: magenta;">"skin/overlay.css"</strong>, <strong style="color: darkred;">null</strong>, <strong style="color: darkred;">null</strong>);
gStylesSrv.loadAndRegisterSheet(gStylesURI, gStylesSrv.USER_SHEET);
<strong>}</strong> <span style="color: green; font-style: italic;">// end startup(aData, aReason)</span>
<span style="color: green; font-style: italic;">// Bootstrap API: shutdown(aData, aReason)</span>
<strong style="color: darkblue;">function</strong> shutdown(aData, aReason) <strong>{</strong>
<strong style="color: darkblue;">if</strong> (aReason == APP_SHUTDOWN) <strong style="color: darkblue;">return</strong>;
<span style="color: green; font-style: italic;">// Destroy our widget</span>
CustomizableUI.destroyWidget(<strong style="color: magenta;">"tagssidebar-toolbarbutton"</strong>);
<span style="color: green; font-style: italic;">// Unload stylesheet</span>
<strong style="color: darkblue;">if</strong> (gStylesSrv.sheetRegistered(gStylesURI, gStylesSrv.USER_SHEET)) <strong>{</strong>
gStylesSrv.unregisterSheet(gStylesURI, gStylesSrv.USER_SHEET);
<strong>}</strong>
<strong>}</strong> <span style="color: green; font-style: italic;">// end shutdown(aData, aReason)</span>
</pre>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-13743851754898203682014-05-27T00:26:00.000+02:002014-05-27T00:34:30.808+02:0024 Free programming booksToday I found interesting <a href="http://www.linuxlinks.com/article/2014052501184393/ProgrammingBooks.html">post on LinuxLinks.com</a> - you can find here links to twenty four free books each for different programming languages:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimb_0LOUwbodL1dsNpXCxX6qHlIKuJfEDurdtnNBKDdr7MBbOlBGXg0WhQl_mzWyfYC9ZrhwEMBObWNp2O6SiZqMSkiuUb2xQbh5pHSW9K8bP0t7HCWS4gGYIkERj0aqz7jEkWEaZxPhQ/s1600/free-books.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimb_0LOUwbodL1dsNpXCxX6qHlIKuJfEDurdtnNBKDdr7MBbOlBGXg0WhQl_mzWyfYC9ZrhwEMBObWNp2O6SiZqMSkiuUb2xQbh5pHSW9K8bP0t7HCWS4gGYIkERj0aqz7jEkWEaZxPhQ/s640/free-books.png" /></a></div>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-22608503747338494082014-05-20T19:53:00.000+02:002014-05-20T19:53:33.654+02:00Nice Bash find-and-replace scriptIt's some time when I read the post <a href="http://thelinuxrain.com/articles/scripting-a-find-and-replace-for-big-text-files">Scripting a 'Find-and-Replace' for big text files</a> by <b>Bob Mesibov</b>. Yesterday I finally got some time to look at it and use it as a learning material. I must frankly admit that I would have real troubles to write something like this in <a href="http://www.gnu.org/software/bash/">Bash</a> - usually I'm using <a href="http://www.php.net/">PHP</a> in such cases.<br />
Because in the original post is only the image not the source of script self I saved it into one my repository so you can easily use it - <a href="https://bitbucket.org/ondrejd/linux-scripts/src/aa846dc015d373b095b260b0cb028c1f003d9da4/fandr.sh?at=default">fandr.sh</a>.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-28349897116713379282014-04-16T00:30:00.000+02:002014-04-16T00:30:00.238+02:00WordPress: Anonymous PHP functionsRecently <a href="http://ondrejdonek.blogspot.cz/2014/04/wordpress-editor-custom-font-family.html">I wrote</a> about my problem with <a href="http://wordpress.org/">WordPress</a> editor and now I realize that I wanted to write also about something different - <strong>using anonymous functions in WordPress development</strong> - it's amazing how using of them can simplify your code (if you forget older <a href="http://www.php.net/">PHP</a> versions). <br />
<br />
Compare these examples:<br />
<br />
<pre style='color:#000000;background:#ffffff;'><span style='color:#5f5035; background:#ffffe8; '><?php</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#696969; background:#ffffe8; '>// Sets WordPress admin bar hidden.</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#696969; background:#ffffe8; '>// Old:</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>add_filter</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'show_admin_bar'</span><span style='color:#808030; background:#ffffe8; '>,</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#0000e6; background:#ffffe8; '>'__return_false'</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#696969; background:#ffffe8; '>// New:</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>add_filter</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'show_admin_bar'</span><span style='color:#808030; background:#ffffe8; '>,</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800000; background:#ffffe8; font-weight:bold; '>function</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800080; background:#ffffe8; '>{</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800000; background:#ffffe8; font-weight:bold; '>return</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800000; background:#ffffe8; font-weight:bold; '>false</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800080; background:#ffffe8; '>}</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#696969; background:#ffffe8; '>// Activate widgets</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#696969; background:#ffffe8; '>// Old:</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>add_action</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'widgets_init'</span><span style='color:#808030; background:#ffffe8; '>,</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>     </span><span style='color:#400000; background:#ffffe8; '>create_function</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>''</span><span style='color:#808030; background:#ffffe8; '>,</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#0000e6; background:#ffffe8; '>'return register_widget("Your_Widget_Class");'</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#696969; background:#ffffe8; '>// New:</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>add_action</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'widgets_init'</span><span style='color:#808030; background:#ffffe8; '>,</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800000; background:#ffffe8; font-weight:bold; '>function</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800080; background:#ffffe8; '>{</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>    register_widget</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'Your_Widget_Class'</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#800080; background:#ffffe8; '>}</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
</pre><br />
And of course that this can be used everywhere you're using function such <code>add_action</code>, <code>add_filter<code> etc.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-44762112221555721832014-04-15T01:26:00.000+02:002014-04-15T03:04:21.057+02:00WordPress: Custom font family in TinyMCE editorI tried to add custom font family to the <a href="http://wordpress.org/">WordPress</a> editor but it turns to the little battle - firstly I just do what is described in the <a href="https://codex.wordpress.org/Function_Reference/add_editor_style">WordPress Codex</a>:<br />
<br />
<b><code>your-theme/functions.php</code>:</b><br />
<pre style='color:#000000;background:#ffffff;'><span style='color:#5f5035; background:#ffffe8; '><?php</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#800000; background:#ffffe8; font-weight:bold; '>function</span><span style='color:#000000; background:#ffffe8; '> your_theme_editor_styles</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#800080; background:#ffffe8; '>{</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '> add_editor_style</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'assets/css/editor-style.css'</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#800080; background:#ffffe8; '>}</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#000000; background:#ffffe8; '>add_action</span><span style='color:#808030; background:#ffffe8; '>(</span><span style='color:#0000e6; background:#ffffe8; '>'init'</span><span style='color:#808030; background:#ffffe8; '>,</span><span style='color:#000000; background:#ffffe8; '> </span><span style='color:#0000e6; background:#ffffe8; '>'your_theme_editor_styles'</span><span style='color:#808030; background:#ffffe8; '>)</span><span style='color:#800080; background:#ffffe8; '>;</span><span style='color:#000000; background:#ffffe8; '></span>
<span style='color:#5f5035; background:#ffffe8; '>?></span>
</pre><br />
<b><code>your-theme/assets/css/editor-style.css</code>:</b><br />
<pre style='color:#000000;background:#ffffff;'><span style='color:#800080; '>@</span><span style='color:#004a43; '>font-face</span> <span style='color:#800080; '>{</span>
<span style='color:#bb7977; font-weight:bold; '>font-family</span><span style='color:#808030; '>:</span> CharisSILBold<span style='color:#800080; '>;</span>
<span style='color:#bb7977; font-weight:bold; '>src</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#40015a; '>../fonts/CharisSIL-Bold.woff</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
<span style='color:#800000; font-weight:bold; '>body</span>#tinymce<span style='color:#808030; '>.</span>wp-editor <span style='color:#800080; '>{</span>
<span style='color:#bb7977; font-weight:bold; '>font-family</span><span style='color:#808030; '>:</span> CharisSILBold<span style='color:#800080; '>;</span>
<span style='color:#bb7977; font-weight:bold; '>font-size</span><span style='color:#808030; '>:</span> <span style='color:#008c00; '>14</span><span style='color:#006600; '>pt</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
</pre><br />
But it doesn't work (of course). Then I look into the default theme and found the solution (code in <code>functions.php</code> is the same as before so here only <code>editor-style.css</code>):<br />
<br />
<b><code>your-theme/assets/css/editor-style.css</code>:</b><br />
<pre style='color:#000000;background:#ffffff;'><span style='color:#800080; '>@</span><span style='color:#004a43; '>font-face</span> <span style='color:#800080; '>{</span>
<span style='color:#bb7977; font-weight:bold; '>font-family</span><span style='color:#808030; '>:</span> CharisSILBold<span style='color:#800080; '>;</span>
<span style='color:#bb7977; font-weight:bold; '>src</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#40015a; '>../fonts/CharisSIL-Bold.woff</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
<span style='color:#800000; font-weight:bold; '>html</span> <span style='color:#808030; '>.</span>mceContentBody <span style='color:#800080; '>{</span>
<span style='color:#bb7977; font-weight:bold; '>font-family</span><span style='color:#808030; '>:</span> CharisSILBold<span style='color:#800080; '>;</span>
<span style='color:#bb7977; font-weight:bold; '>font-size</span><span style='color:#808030; '>:</span> <span style='color:#008c00; '>14</span><span style='color:#006600; '>pt</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
</pre><br />
It sucks that small things take so much time (but of course it's my fault). <br />
<br />
<i>Tested on WP 3.8.*.</i><br />
<br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-72074206961177593942014-04-11T17:26:00.003+02:002014-04-11T17:26:35.366+02:00Firefox OS 2.0 ScreenshotsToday I found screenshots of design proposals for <a href="http://www.mozilla.org/en-US/firefox/os/" target="_blank">Firefox OS</a> 2.0. I must say that I like it a lot - especially the calendar screen:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPBw5Vswv1IGJAf4HxGgptxRNQogSYvjn08bbvU77Jp6Ra4g0t6_K1LDSvZMJTrZJHqOzXslO26sRTXLpcLuwJsDxGhF54wQtmJRojiiNIu1QKerPbBHw-hepszyHjE52kX-oQhdFTr-M/s1600/screen06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPBw5Vswv1IGJAf4HxGgptxRNQogSYvjn08bbvU77Jp6Ra4g0t6_K1LDSvZMJTrZJHqOzXslO26sRTXLpcLuwJsDxGhF54wQtmJRojiiNIu1QKerPbBHw-hepszyHjE52kX-oQhdFTr-M/s1600/screen06.png" height="250" width="400" /></a></div>
I think the time to throw all <i>iPhones</i> etc. will be here soon :) . You can see more screenshots <a href="http://www.soeren-hentzschel.at/mozilla/firefox-os/2014/04/06/design-vorschau-auf-firefox-os-2-0/" target="_blank">here</a> (original post by Sören Hentzschel).<br />
<br />Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-67939563377640512372014-03-10T04:43:00.000+01:002014-03-10T04:43:15.339+01:00Mozilla Brick - UI Components for Modern Web AppsI just discovered <a href="http://mozilla.github.io/brick/index.html" target="_blank">Mozilla Brick</a> - a bundle of reusable <abbr title="User Interface">UI</abbr> components for rapid development of cross-browser and mobile-friendly HTML5 applications. What is interesting is made using <a href="http://x-tags.org/" target="_blank">X-Tag</a> which JavaScript library that provide the same as old and powerful <a href="https://developer.mozilla.org/en-US/docs/XBL" target="_blank">XBL</a>.<br />
Hopefully I will get opportunity to try it on same real project soon. Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-35819700872593573642014-03-09T04:42:00.000+01:002014-03-09T04:42:34.134+01:00Microsoft .NET Applications in OpenShift Some time ago <a href="http://ondrejdonek.blogspot.cz/2014/01/openshift-from-redhat.html" target="_blank">I wrote</a> about <a href="https://www.openshift.com/" target="_blank">OpenShift</a> - open cloud platform. Today I read a nice article on <a href="http://www.zdnet.com/" target="_blank">ZDnet</a> about support for .NET applications ... on more reason for using <a href="https://www.openshift.com/" target="_blank">OpenShift</a>!<br />
Get more informations here: <a href="http://www.zdnet.com/red-hat-brings-microsoft-net-apps-to-its-openshift-cloud-7000027019/">http://www.zdnet.com/red-hat-brings-microsoft-net-apps-to-its-openshift-cloud-7000027019/</a>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-47899950611674659892014-02-22T23:32:00.000+01:002014-02-22T23:32:33.941+01:00Time tracking utility - doTimeTracker CLI 0.2Today I made visible my <a href="https://bitbucket.org/ondrejd/odtimetracker-cli/" target="_blank">BitBucket repository</a> with <b>odTimeTracker CLI</b>. It's a Linux command line utility for tracking time that you spent working on various tasks. Is written in <a href="https://wiki.gnome.org/Projects/Vala/" target="_blank">Vala</a> and is a part of bigger solution for dealing with common office tasks for the freelancers as am I. I will explain this a little bit more very soon.<br />
<br />
There are some screenshots:<br />
<br />
<table style="margin: 10px auto 10px auto; width: 460px;"><tbody>
<tr> <td class="text-align: center;"><a href="http://1.bp.blogspot.com/-Q1ekMJq475U/UwkfpuZA3vI/AAAAAAAADCw/HY81qE4wFiE/s1600/snapshot2.png" imageanchor="1" style="float: left; margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Q1ekMJq475U/UwkfpuZA3vI/AAAAAAAADCw/HY81qE4wFiE/s1600/snapshot2.png" width="220" /></a></td> <td class="text-align: center;"><a href="http://2.bp.blogspot.com/-BAJ7y7u1vsw/Uwkfpxa0rFI/AAAAAAAADDA/pLzE2-xw9mc/s1600/snapshot3.png" imageanchor="1" style="float: left; margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-BAJ7y7u1vsw/Uwkfpxa0rFI/AAAAAAAADDA/pLzE2-xw9mc/s1600/snapshot3.png" width="220" /></a></td> </tr>
<tr> <td class="text-align: center;"><a href="http://4.bp.blogspot.com/-TJySmsAWy_g/UwkfqmOwMxI/AAAAAAAADDI/Coi6RkHjIIA/s1600/snapshot4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-TJySmsAWy_g/UwkfqmOwMxI/AAAAAAAADDI/Coi6RkHjIIA/s1600/snapshot4.png" width="220" /></a></td> <td class="text-align: center;"><a href="http://2.bp.blogspot.com/-VIL_xclh-9U/UwkfrktR0MI/AAAAAAAADDg/RTvoEZzCZjk/s1600/snapshot6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-VIL_xclh-9U/UwkfrktR0MI/AAAAAAAADDg/RTvoEZzCZjk/s1600/snapshot6.png" width="220" /></a></td> </tr>
<tr> <td class="text-align: center;"><a href="http://2.bp.blogspot.com/-vA69TLwyBA8/UwkfpmZF3wI/AAAAAAAADCo/MATzrESqM-I/s1600/snapshot8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-vA69TLwyBA8/UwkfpmZF3wI/AAAAAAAADCo/MATzrESqM-I/s1600/snapshot8.png" width="220" /></a></td> <td class="text-align: center;"><a href="http://2.bp.blogspot.com/-vA69TLwyBA8/UwkfpmZF3wI/AAAAAAAADCo/MATzrESqM-I/s1600/snapshot10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-vA69TLwyBA8/UwkfpmZF3wI/AAAAAAAADCo/MATzrESqM-I/s1600/snapshot10.png" width="220" /></a></td> </tr>
</tbody></table><br />
More screenshots can be found in this <a href="https://plus.google.com/photos/102338386892980590128/albums/5983348376730663505?authkey=CJiG6IP0opahLg" target="_blank">web album</a>.<br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-68450982368669009422014-02-20T00:33:00.000+01:002014-02-20T00:41:09.002+01:00Simple CarouselI was working on one web when I needed simple carousel - I have simple requirements:<br />
<ul>
<li>based on <a href="http://jquery.com/">jQuery</a> (since I'm using it on that site)</li>
<li>really, really small footprint</li>
<li>allow multiple carousels on one page</li>
</ul>
I spent some time with searching but I found nothing what I like so I made mine. The code is really simple and works just fine - you can see for yourself on <a href="http://jsfiddle.net/ondrejd/FrEYN/" rel="nofollow" target="_blank">jsFiddle</a>.<br />
<br />
If you want you can download it:<br />
<ul>
<li><a href="http://ondrejd.savana-hosting.cz/carousel.js" rel="nofollow" target="_blank">normal version</a> (2.3 kB)</li>
<li><a href="http://ondrejd.savana-hosting.cz/carousel.min.js" rel="nofollow" target="_blank">minified version</a> (1.2 kB)</li>
</ul>
Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-31567243129062287352014-01-30T23:12:00.000+01:002014-01-30T23:17:53.390+01:00OpenShift from RedHat<div class="separator" style="clear: both; float: right; padding: 10px 10px 10px 10px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJGzqRlHl69VEZGdkJCuMdGcmgqRewEiI4_0NAtXbt6xqwcZ4fPQRbL5LIEP6EKSr_UITXxjFVQB2iGtX3mFelQe0LdHqyPaFDWS1vi11lS85_3MU8L8N88lagfLuYUj7cMGfv1KLQHE/s1600/OpenShift-PubNub.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJGzqRlHl69VEZGdkJCuMdGcmgqRewEiI4_0NAtXbt6xqwcZ4fPQRbL5LIEP6EKSr_UITXxjFVQB2iGtX3mFelQe0LdHqyPaFDWS1vi11lS85_3MU8L8N88lagfLuYUj7cMGfv1KLQHE/s1600/OpenShift-PubNub.png" height="120px" width="120px" /></a></div>
I don't know if you are aware of <a href="https://openshift.redhat.com/">OpenShift</a> from <a href="http://www.redhat.com/">RedHat</a> - but if you don't try it. It is really good place for trying technologies or developing new projects. For free you get three slots for applications that you can use various technologies such as:<br />
<ul>
<li><a href="http://www.jboss.org/overview/">JBoss</a> Application Server 7 or JBoss Enterprise Application Platform 6</li>
<li><a href="http://tomcat.apache.org/">Tomcat 6/7</a></li>
<li><a href="http://www.php.net/">PHP</a> with <a href="http://www.zend.com/en/products/server/">Zend Server</a></li>
<li><a href="http://aerogear.org/docs/guides/aerogear-push-ios/unified-push-server/">AeroGear Push 0.X</a></li>
<li><a href="http://www.jboss.org/capedwarf">CapeDwarf</a> or <a href="http://www.wildfly.org/">WildFly 8</a></li>
<li><a href="https://drupal.org/">Drupal 7</a> or <a href="http://wordpress.org/">WordPress 3.X</a></li>
<li><a href="http://nodejs.org/">Node.js</a></li>
<li><a href="https://www.ruby-lang.org/en/">Ruby</a> or <a href="http://www.python.org/">Python</a>, <a href="http://www.perl.org/">Perl</a> or even <a href="http://golang.org/">Google Go</a></li>
<li><a href="http://www.mongodb.org/">MongoDB</a>, <a href="http://www.postgresql.org/">PostgreSQL</a> or <a href="http://www.mysql.com/">MySQL</a></li>
<li>and others...</li>
</ul>
As you can see it offers really lot and for free - I don't know better service for freelance developers.Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-66185802239076177902013-12-31T10:05:00.001+01:002013-12-31T10:05:46.194+01:00Zabezpečení WordPressuZde si popíšeme několik způsobů, jak lépe zabezpečit web používající <a href="http://wordpress.org/">WordPress</a>. Nejprve však jedno upozornění - jedno z nejdůležitějších pravidel je <b>udržovat <a href="http://wordpress.org/">WordPress</a> aktualizovaný</b> na poslední verzi, stejně tak i nainstalované pluginy (či témata vzhledu).<br />
<br />
<h2>
Před instalací</h2>
<br />
Nejprve je vhodné změnit prefix databáze v souboru <code>wp-config-sample.php</code> z původního prefixu:<br />
<br />
<pre><code>$table_prefix = 'wp_';
</code></pre>
<br />
na nějaký jiný:<br />
<br />
<pre><code>$table_prefix = '1w27p_';
</code></pre>
<br />
Po změně přejmenujte z <code>wp-config-sample.php</code> na <code>wp-config.php</code> a přejděte k normální instalaci.<br />
<br />
<h2>
Po instalaci</h2>
<br />
Po instalaci <a href="http://wordpress.org/">WordPress</a> nastaví přihlašovací jméno na <code>admin</code> - toto je dobré změnit na jiné. Zároveň by heslo mělo být odolné - nejlepší je vygenerovat si silné heslo pomocí některých <a href="http://www.google.com/?q=password+generator">on-line generátorů hesel</a>.<br />
<br />
<h3>
Zabezpeční adresáře <code>wp-admin</code></h3>
<br />
Dále je vhodné omezit přístup do složky <code>wp-admin</code> dle IP adresy administrátora (či více administrátorů). Toho lze docílit vytvořením souboru <code>.htaccess</code> s tímto obsahem:<br />
<br />
<pre><code>Deny from all
Allow from <Your IP>
</code></pre>
<br />
<i>Přístup do adresáře <code>wp-admin</code> je vhodné zabezpečit i přes heslo.</i><br />
<br />
<h3>
Zabezpečení souboru <code>wp-config.php</code></h3>
<br />
Soubor <code>wp-config.php</code> lze zabezpečit dvěma způsoby - buď přesunout tento soubor o adresář výše (což na mnoha serverech znamená mimo dosah běžných návštěvníků) nebo přístup k němu můžete omezit v souboru <code>.htaccess</code>:<br />
<br />
<pre><code><files wp-config.php>
order allow,deny
deny from all
</files>
</code></pre>
<br />
<h3>
Zabezpečení adresářů <code>wp-includes</code> a <code>wp-content</code></h3>
<br />
Poté je vhodné omezit i přístup k většině souborů ve složkách <code>wp-includes</code> a <code>wp-content</code> - přístup povolíme pouze k obrázkům, CSS a JavaScript souborům. Toto zařídíme přidáním následujících řádek do souboru <code>.htaccess</code>:<br />
<br />
<pre><code>Order Allow, Deny, Deny from all
<Files ~ ".(css|jpe?g|png|gif|js)$">Allow from all</Files>
</code></pre>
<br />
Jiný způsob (dle <a href="http://www.siteground.com/tutorials/wordpress/wordpress_security.htm">WordPress Security</a>) a mnou <b>doporučovaný</b> je:<br />
<br />
<pre><code># Block the include-only files.
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
# BEGIN WordPress
...
</code></pre>
<br />
<b>Poznámka</b>: Kód výše musí být mimo tagy <code># BEGIN WordPress</code> and <code># END WordPress</code> jinak může dojít k přepsání při změně nastavení systému <a href="http://wordpress.org/">WordPress</a>.<br />
Také je třeba si uvědomit, že toto nebude správně fungovat na <i>Multisite</i>, protože <code>RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]</code> zabrání souboru <code>ms-files.php</code> v generování obrázků. Pokud tento řádek přeskočíte, bude generování fungovat, ale znamená to i méně bezpečnosti.<br />
<br />
<h3>
Zakázání editování souborů</h3>
<br />
V případě, že více uživatelů s administrátorskými právy je také vhodné zakázat přímou editaci souborů z administrace, v tom případě přidejte na konec souboru <code>wp-config.php</code> tento řádek:<br />
<br />
<pre><code>define('DISALLOW_FILE_EDIT', true);
</code></pre>
<br />
<h3>
Zakázání XMLRPC</h3>
<br />
Pokud k přístupu používáte pouze defaultní webové rozhraní je vhodné i zakázat XMLRPC - toto provedete přidáním následujícího řádku na konec souboru <code>wp-config.php</code>:<br />
<br />
<pre><code>add_filter('xmlrpc_enabled', '__return_false');
</code></pre>
<br />
<h2>
Pluginy pro vyšší zabezpečení</h2>
<br />
Níže najdete několik užitečných pluginů, které zvýší zabezpečení vašeho webu. Osobně povětšinou používám kombinaci prvních dvou pluginů, ale pluginů s podobnou tématikou existuje <a href="http://wordpress.org/plugins/search.php?q=security">daleko více</a>.<br />
<br />
<h3>
<a href="http://wordpress.org/plugins/limit-login-attempts/">Limit Login Attempts</a></h3>
<br />
Tento plugin umožní omezit počet přihlašovacích pokusů - to je užitečné pro bránění se tzv. <i>brute force</i> typu útoků.<br />
<br />
<h3>
<a href="http://wordpress.org/plugins/secure-wordpress/">Acunetix Secure WordPress</a></h3>
<br />
Plugin nabízí prozkoumání vaší instalace systému <a href="http://wordpress.org/">WordPress</a> z hlediska zabezpečení. Po instalaci a aktivaci pluginu přejděte na stránku jeho nastavení a zaškrtněte následující možnosti:<br />
<br />
<ul>
<li><i>Hide WordPress version for all users but administrators</i></li>
<li><i>Remove various meta tags generators from the blog's head tag for non-administrators.</i></li>
<li><i>Remove Really Simple Discovery meta tags from front-end</i></li>
<li><i>Remove Windows Live Writer meta tags from front-end</i></li>
<li><i>Disable error reporting (php + db) for all but administrators</i></li>
<li><i>Remove core update notifications from back-end for all but administrators</i></li>
<li><i>Remove plug-ins update notifications from back-end</i></li>
<li><i>Remove themes update notifications from back-end</i></li>
<li><i>Remove login error notifications from front-end</i></li>
<li><i>Hide admin notifications for non admins</i></li>
<li><i>Remove the version parameter from urls</i></li>
</ul>
<br />
Aktuální míru zabezpečení a případné chyby můžete prozkoumat v administraci na stránkách <code>Secure WP -> Nástěnka</code> (<code>Dashboard</code>) a <code>Secure WP -> Scanner</code>.<br />
<br />
<h3>
<a href="http://wordpress.org/plugins/wordfence/">Wordfence Security</a></h3>
<br />
<b>Wordfence Security</b> je plugin nabízející lepší zabezpečení vašeho webu a zahrnuje firewall, aktuální statistiky provozu s geolokací a další vlastnosti.<br />
U tohoto pluginu je velký rozdíl mezi neplacenou a placenou verzí - pokud si pořídíte placenou verzi je to dobrá náhrada za předchozí plugin v opačném případě je lepší použít <a href="http://wordpress.org/plugins/secure-wordpress/">Acunetix Secure WordPress</a>.<br />
<br />
<h2>
Ostatní</h2>
<br />
Pokud chcete ještě lepší zabezpečení proti mailware a spamu můžete také použít placené služby jako jsou <a href="http://akismet.com/">Akismet</a> či <a href="http://sucuri.net/">Securi</a> - obě jsou prověřené a nabízejí výbornou spolupráci se systémem <a href="http://wordpress.org/">WordPress</a>.<br />
<br />
<h2>
Zdroje</h2>
<br />
<ul>
<li><a href="http://codex.wordpress.org/Hardening_WordPress">Hardening WordPress</a></li>
<li><a href="http://www.siteground.com/tutorials/wordpress/wordpress_security.htm">WordPress Security</a></li>
</ul>
Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0tag:blogger.com,1999:blog-4196729351580602613.post-21240748782133758402012-10-10T12:56:00.001+02:002012-10-10T13:03:26.280+02:00Another XUL applicationI’m happy that another client of mine ordered tiny application on which I can use <a href="https://developer.mozilla.org/en-US/docs/XULRunner">Mozilla XulRunner</a> as a development environment. Functionality is pretty simple – application should select by lot winners from many thousands of records that are imported via <abbr title="Comma-Separated Values">CSV</abbr> file. User can customize parameters of allotting and output is also <abbr title="Comma-Separated Values">CSV</abbr> document in same format as the imported one. Application self was packaged using <a href="http://www.jrsoftware.org/isinfo.php">Inno Setup</a> so it’s easy to install and use. Bellow some screenshots:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-GOowbeBexf8/UHVSxpQFFMI/AAAAAAAAC3A/V4jVD_37l-I/s1600/screen-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-GOowbeBexf8/UHVSxpQFFMI/AAAAAAAAC3A/V4jVD_37l-I/s320/screen-01.png" width="251" /></a> <br />
<a href="http://3.bp.blogspot.com/-wfronfgLEnk/UHVSxsE2BMI/AAAAAAAAC28/2KQSYXG81wg/s1600/screen-02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-wfronfgLEnk/UHVSxsE2BMI/AAAAAAAAC28/2KQSYXG81wg/s320/screen-02.png" width="251" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-Z-55I0Xn8F4/UHVSxpiePbI/AAAAAAAAC24/9a0ZrCDTsVM/s1600/screen-03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-Z-55I0Xn8F4/UHVSxpiePbI/AAAAAAAAC24/9a0ZrCDTsVM/s320/screen-03.png" width="251" /></a> <br />
<a href="http://2.bp.blogspot.com/-4CscCIke874/UHVSyak7erI/AAAAAAAAC3E/WNhsJhw1ZSc/s1600/screen-04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-4CscCIke874/UHVSyak7erI/AAAAAAAAC3E/WNhsJhw1ZSc/s320/screen-04.png" width="251" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-2oDdqiSd978/UHVSyiMukFI/AAAAAAAAC3M/CGcOHvoHW10/s1600/screen-05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="http://2.bp.blogspot.com/-2oDdqiSd978/UHVSyiMukFI/AAAAAAAAC3M/CGcOHvoHW10/s320/screen-05.png" width="320" /></a></div>Anonymoushttp://www.blogger.com/profile/12557280921540468539noreply@blogger.com0