Re-iterations

It's a quarter since last post? Wow, the time flies, when you're busy! :) I made a serious progress with QetriX PHP, but I spent a lot of time by "re-iterations".

In the past, when I had a little feeling something isn't right, I left it behind for when I have a time to think about it in the future and it somehow haunted me and ultimately I had to redo it, no matter how much time passed and how deeply the feature was integrated. Many times it was really painful and for this reason the core code have been rebuild from scratch a lot and I don't want to do it again any more.

So this time, whenever I have this feeling something isn't right, I start to take care of it immediately. And if it's a tough one, I start to build around it - hoping the idea will come when I see it in context.

As you might think, this really does take a lot of time. But IMO it's time well spent (and that's what I've been doing a lot since July).

Some of bigger decisions are still in front of me, like how to nicely handle QForm data or how to make (and name) opposite side of Renderer - a parser that accepts somehow encoded string (JSON, XML, picture, Word document...) and fill a component with the result.

It's a tough to find the fine line between automation and customizability. I made some quite ingenious solutions in the past, when the something adapted almost automatically with just a few lines of code, but it was a real pain, when customer needed (not wanted) it to behave or look differently.


There's no universal solution, so one of my current motos for QetriX is "just enough". If the way QetriX uses isn't suitable for you, write your own Renderer, or please use something else. It may sound harsh, but it's a way out of the feature loop, which leads to overblown code.

GeoQetriX Map

I presented the idea of GeoQetriX more than a year ago, but finally I got the urge to make it done. I'm gonna to redo my website about "USA thru Czech Eyes", so I wanted some interactive maps. I found some JavaScript libraries, based on Raphaël, and using SVG paths for countries.

So I downloaded some countries. And some more countries. And this country, this one, and... but at least one of them was missing. So, as one might expect, it brought me to an idea to do it on my own (to have them all). I'm gonna to need them anyway at some point, so why not now?

Because Google Maps JavaScript API is truly extraordinary, I didn't think twice how I'm going to do the editor.

So. I put some geographical points (using markers) on the map and stored them in the database. It were basically major country border joints and major shore features. In the very first version, the editor generated SQL code, which I executed manually in HeidiSQL.

Then, of course, I had to stop being lazy about DB support and created a script to generate JSON for markers on the map, later for lines as well. Markers and lines both have a type, with semantic meaning (shore border, inland border, division border...).

Except for the Google Maps I created a secondary output, into generated PNG. For debug purposes I assigned different colors to each type (blue for shore, red for inland, green for divisions, gray for subdivisions). And started clicking. And clicking... But after a while I was quite excited about the (still work-in-progress) result:

World Map

Along the way, I adjusted something here and there. The editor has to be very easy to use, because I guess I'm gonna spend quite a time in it. I want to have major roads and railroads, along with water.

I also had to use a projection for the map output. I chose Miller (EPSG:54003 - World Miller Cylindrical), because personally I like it the most; for me it's a "classic" view.

1:1 cut of Europe

Before the final alpha-stage map I did everything I planned to. Like placemark settings with a list of attached lines, with possibility to change type of the line, delete selected line or add a midpoint to a line.

1:1 cut of USA

The last thing is to define, what's on each side of a line. At first I thought it will be the smallest unit possible (like a county, neighborhood or even a plot), but I kept thinking that querying the whole country may consist of thousands of geo-units.

After a while I realized, that the other way around it would be much better, without losing much fidelity. So at this point I'll define a country (or sea/ocean) for each line, if it's a country border. Then state borders, county borders and so on. If I would like to draw a country, I simply ask for all lines with it's ID.

Clickable SVG map

I created QetriX Map with SVG in mind. But I wasn't pleased about how to make it clickable. It requires Raphaël JS library and it's not as friendly as I would like.

Wrong.

There's something called "XLink", which allows creating hyperlinks within XML documents (therefore in SVG as well).

In HTML you can use <a xlink:href="http://example.com"><path d="..."></a>. And it works simply like that. Any SVG element works as a link - circle, line, polyline, path and more.

In plain SVG you have to also add a proper xlink namespace xmlns:xlink="http://www.w3.org/1999/xlink" in SVG tag, otherwise you'll get an error message: "XML Parsing Error: prefix not bound to a namespace".

HTML example:
<!DOCTYPE html>
<html>
<body>
<svg version="1.0" width="100" height="100">
    <a xlink:href="#ad"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></a>
</svg>
</body>
</html>

SVG example:
<svg version="1.0" id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">    <a xlink:href="#c1"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></a>
</svg>

Anyway, not everything is bright and shiny, working CSS doesn't mean, it will behave the same, as in HTML. SVG has it's own attributes (background become fill, border become stroke) and doesn't support those I got used to work with in HTML - like z-index. I'd like to highlight a path by changing stroke color and width, but only part of it is visible. It's because z-index in SVG is fixed by position of the element in XML, so part of the outline is overlapped by nearby element defined further in the XML. The only way is DOM reordering, which is quite expensive (resources-wide).

June and July 2014

As usual, I had quite a lot of stuff going on. First of all, I was working on PHP framework for QetriX. I got it working (and I'm quite satisfied with it), but it would take a lot of effort to make it done completely.

Then I learned to use location in Objective-C, especially in background. When I was about to finish, Apple announced Swift, so I created a few small apps in it, but unfortunately from the beta Xcode it's not allowed to publish them to the Store yet.

One of the apps was a database of address points in the Czech Republic. Because I needed various kinds of data, I "accidentaly" found a new source of such data for QetriX. I started just with EU (NUTS and LAU areas), but expanded to the US as well. Instead of importing from TSV right into QetriX, this time I imported it from source CSV to custom table. I hope I would be able to see the data better (because of SQL JOINs and such).

For the mobile app of CZ Address Points I created a QetriX based website. Because it involved some CSS, I also updated reference pages for grid and "friendly" colors - consisting only from pairs of 0, 3, 6, 9, C and F hex numbers.

QetriX Friendly Colors

QetriX Grid

Because I had to prepare DB and manage Types, I also made progress in QetriX Apmin, analogy to Adminer - single PHP file for complete management (of QetriX apps).

LESS CSS

Because of my current sort of trip out of my programming comfort zone, I decided for Quiky web app to try something I read a lot about recently - CSS preprocessors. From the triumvirate of most popular ones I chose LESS, because I saw it around me the most.

I installed a plugin for PHPStorm (built-in wasn't working for me), called LESS CSS Compiler. As I would expect, it compiles CSS from LESS source on each save. It requires setup of profiles, specifying where to search for LESS and where to put CSS, which is unerstable, but I'm keeping both in the same dir and because each app has it's own LESS/CSS, it turns to be quite annoying, because I have to do the setup again each time I try to make a new app.

LESS Profiles in PHPStorm's Settings

LESS works for me really well, I can say I'm happy to start with that. So if you hesitate, like I did, don't worry. It will open many new opportunities.

If you create more projects based on the same HTML structure, or you are just not sure about if shades are right, you can define variables for colors and it will definitely saves you more time time than it takes to make it work.

iOS 5.1 in Xcode 5.1 in Mavericks

I appropriated our neglected company iPad, because I had to test my app and this was the only iPad I was able to get my hands on. Unfortunately, it was the 1st generation. I updated it to latest iOS available, but it wasn't recent enough - 5.1.1.

In Xcode it's possible to set Deployment target for the app as low as iOS 6.0, but that's it. Therefore the iPad wasn't even in the selection of devices for testing. I read in Mavericks it's not possible to build for iOS 5.x, which I found out it's not exactly true.

The trick is quite simple. Do not rely just on the list of target iOS version, simply TYPE IN the required version, you can go as low as 5.1.1. Since then you can build apps in your latest OS X and latest Xcode for the very first iPad as well.

I had troubles to run my apps on the iPad though, it kept saying it can't find the storyboard. In Targets > Build Phases > Copy Bundles Resources I indeed had both storyboards red.

The solution is to click on the storyboard in Navigator (left column in Xcode), then in the File inspector (right column in Xcode), find Localization section and check both Base and English. Also make sure Target Membership (just below) is checked. Repeat for the second storyboard and "Supporting files/InfoPlist.strings" file. Storyboards in Copy Bundles Resources turned black.

Somebody suggested to get rid of the Base lang (Project > Info > Localizations), which in my case went to losing the storyboards completely, so be careful!

Mind switch

Switching from PHP to Java is awesome and painful at the same time. Awesome, because I can see the cleaner code, painful, because a lot of things, that PHP (and C#) allows and I got used to it, is now harder to do and process in my head.

But it also works the other way around. Now I can see some practices in PHP are not as great (or safe) as I thought. I already learned to keep warn level up to E_NOTICE and kill'em all. That means initialize variables. It's more code, but it's also more predictable.

This time I turned back to PHP and I can see why the object model used to be so exaggerated - because in compiled langs doesn't matter how many includes there are. In PHP each include takes time (I/O) and therefore you should use merged/joined/minified version in production. If you try to keep the project the same accross different platforms, you always should stick with the rule of Java, where each public class has it's own source code file.

Quiky for Android

After I submitted Quiky for iPhone/iPod Touch for App Review, I started working on Android version.

I already have Android Studio installed and I started from scratch. My first attempt to make WikiList as drawer failed, so I decided to have the same layout as iPhone app, which makes more sense.

Because my only available Android phone is old GSmart Rola with Android 2.2, I decided to go wide and chose API 8. In the future I can always make separate Android 4 version. It's gonna be Holo Light, to comply the iPhone app's design.

I created four activities - WikiList, PageList, PageView and PageEdit, all with RelativeLayout and with Fragments. Then I dragged few controls into them, ListView into WikiList and PageList, WebView into PageView and two EditTexts into PageEdit. Originally I had some buttons there, but I moved them to menu later.

I decided to make first release as soon as possible, even with some bugs here and there, as a motivation. I know Google just scans APKs for malware and publication to Play takes only few hours.

So after it sort of worked, I put android:debuggable="false" into AndroidManifest.xml (it says it shouldn't be hardcoded, but screw it, should be easier) and made signed APK. I don't get why there's no checkbox for debuggable option during creation - I'd assume people make signed APK mostly for the Play. Never mind, version 1.0 was ready and submitted.

I downloaded it and it was OK, but only for the first time. When I tried to launch the app once again, it said "Application not installed on your phone". I figured it was because I had no SD card and I had SD access permission in the Manifest. After I removed it, it worked just fine.

It took me a while before I grabbed the concept of Fragments and now almost all business logic is in PlaceholderFragment classes. I found out Google offers a "standard" set of icons, which is neat. It even allows me to get closer to the iPhone version.

The rest is just Java, which I mastered couple months ago :)

App rating in Google Play search

It was interesting to see how Google displays results for apps in Google Play. "Quiky" was unique app name throughout the whole store.

When the app was brand new and had no rating, the search for "quiky" showed the app around 10th position in the results. The rest were apps, where the word "quirky" appeared, plus apps featuring Nesquik's bunny Quik/Quick/Quiky.

When I gave it 5 stars (it's lame to rate own apps, I know, but this was for scientific reasons! :) the app skipped to about 3th or 4th position.

I asked my brother for another 5 stars (no loser alert, still scientific! :) and since then it stays at the first position.

Quiky Logo

I have to admit, I like creating logos. So when I decided Quiky will be independent app, I knew I'm going to make a nice logo.

My first though was a W of some kind - as "Wiki" (even the name starts with Q, but I already have this for QetriX). I tried several fonts and learned I like all four lines of the same length. Also I decided to have each line in different color.

Colors were quite obvious - red, yellow, green and blue. In this order, because of a rainbow. Shades were derived from QetriX logo's blue, using only hexa numbers 3, 6, 9 and C. And because it was quite faint, especially as a favicon, I added a gray outline.

Last trim was to angle ends of the first and last line (originally it was horizontal), resembling four leaning books (with some unevenness on intersections :)

Quiky for iPhone

Unexpected happened! :-) After my success with Java, Android and WPF I pushed even harder.

When I try Objective-C for the first time, I failed rather quickly. The syntax was incomprehensible for me. A lot of square brackets, strange flow (segues) between pages, tons of new methos. Total mess.

So yet again kinda knew what I'm going to expect, so I was able to brace myself. I started with a Storyboard, which went nicely. I watched some YouTube howtos and created a UITableView. Then I discovered prepareForSegue method to do stuff between screens. I had very rough Quiky app without pretty much having a sense what I'm doing. Strange was it somehow worked.

Working with header files and pointers was a nice throwback to my beginnings with Borland C++ back in the late 90's.

I learned little more about basic stuff, like properties, interfaces, built-in methods and after 3 days I started to grab the basic concept. It wasn't that different from C#, PHP or Java after all - just different syntax, but the same approach.

Simply do [someObj something:param] instead of someObj.something(param). Only string concatenation takes much more space, because instead of str1 + str2 I have to do [str1 stringByAppendingString:str2];

My biggest issue was I quite often edited a wrong .m file. What a loser! :)

Anyway, Quiky for iPhone is approaching nicely, I think I may be able to release it in the beginning of May 2014, hopefully with Quiky for Android. Apple app review takes a week or two, so it gives me some time to work on Android, which takes just a couple of hours to publish.

Quiky v2

It looks I made the roadmap just fine. Second release is ready and there's still a day to go. Well, there's nothing to wait for, more time for v3 :)

All that glitters is not gold

I have to say, over the past few weeks I quite fell in love with WPF. It's like WinForms, that has all it's things sorted out, kinda grown up. All those class names make sense and are consistent throughout the framework (I'm talking especially about controls).

Until I came across WebBrowser customizations. In WinForms it was simple and straightforward, so I assumed this will be the same, but better. Well, I was wrong. When I tried to assign any kind of event in mshtml/DOM, the WebBrowser froze. Yes, the event has been processed, but I was unable to select text or scroll the page. Useless! I didn't find anything, that helps - not even in solution, that described exactly my problem about mouse lockups.

I started research to replace default IE WebBrowser with e.g. WebKit. There are some nice stuff, like WebKit.NET, Awesomium or GeckoFX. I understand that browser is a big deal, but I don't want to ship my tiny app with at least 30 MB in browser DLLs.

I had a strange feeling about the solution mentioned before, because I noticed in the HUGE discussion below the article that people thanks the author, so it should work. But it didn't. This time I was more stubborn and kept on reading posts.

Finally I reached one post, that points out the author forgot to put "[ComVisible(true)]" above one class, which solved my problem and it started to work. Phew!

In many, many solutions I found, that this is not expected behavior, it's in the WPF framework since the dawn of time, but Microsoft apparently don't care. Sucks!

Quiky v1

As I wrote, when I started to re-create Quiky in WPF, I set feature set for the first release. And because everything I wanted has been made and greatly tested, now it's time for public release.

Quiky WPF

I decided to reengineer Quiky, because I didn't trust it in the worst way - that it will keep my data. I reworked the core code few times and probably left some bugs, so here and there I lost my contents or replaced a page contents by contents from a different page. And for a text editor this is a severe issue.

I tried WPF, but it was really uncompatible with all the stuff I put quite an effort into, so I started WinForms again. Because I had so much done it was quite quick. But then I realized I added some unneccessary code and it got huge before I was able to tune the saving and stuff.

So I started fresh again and when I reached the most basic state, I figured I can't use those chunks of code, because I will fall into the same pit. And then I realized, because of this, there's no compatibility issue with WPF any more, so I can wave obsolete WinForms good bye.

Also I decided to strictly make versions here (for me for the first time). To set a bunch of features to add and make a roadmap. My problem is to add so many features at once I got lost in the code and if I screw up, there's no way back. The very first version will be just the most basic functionality.

I had few failed attemps to make WPF app before, so I kinda knew what issues I'll have to deal with. First of all, I used Panel a lot. In WPF there are four or five replacements. I chose DockPanel.

To my surprise the start was quite fast, even a LOT of things is different - like methods and it's arguments. But it makes more sense, than WinForms, and I like it.

I also made a bold decision to use QetriX approach, so it will have e.g. DataStores. It really feels great to finally implement all those old ideas, I must say! :)

JetriX

Thanks to my new work project with colleagues from IBM CZ I laid my hands on IBM Worklight, which is PhoneGap on steroids with a server backend. I had no other chance than yet again install my disfavored Eclipse, which poweres Worklight Studio and IBM Rational Team Concert.

I has been taught how to use it and ultimately how to build hybrid mobile applications in it. I learned quite a few new stuff about Eclipse.

For Android (and couple of my Java tries) I used IntelliJ Idea Community Edition, even after Google introduced Android Studio, because I don't like single purpose tools (you can't build Java apps in A.S.).

Worklight Studio has a support for Android Studio, for building Android app (if you don't want to install Android Dev Tools in Eclipse), so I installed it as well and after that I discovered It's easier to make .apk in Worklight Studio itself and Android Studio struggles to launch properly.

But having Eclipse up and running I had yet another urge to try Java web apps (servlets) again. So I installed Tomcat and started new Dynamic Web Project.

Thanks to a video tutorial I had a working "Hello World" in a couple of minutes. I don't count resolving "HTTP Status 405" error, as it was because of Eclipse code template (that includes super.do[Post|Get](req, resp), causing the error).

After that it was quite straightforward. Create bunch of packages, fill them with classes and write some code. It gave me few insights how to improve the PHP framework, towrads unification between platforms.

Anyway, we were obliged to put the hybrid mobile application on Windows Phone Store as well, which requires a Visual Studio to compile and debug the WP project. So we purchased that, together with Windows 8.1 Pro (our company computers all has OEM licenses for Win7). As a result, I'll try to do the same with ASP.NET and it opens the door for better WPF desktop app.

Open Sourced

Ok, I noticed quite a few projects are on Github, so I got one repo also. I'm not committing there anything any time soon, but better to be prepared and start to learn what I need to know.

One struggle was to choose the license. I pushed my selfish me further away and chose the shortest one - MIT License (aka X11 License), which is the most permissive.

Then I understood I will need some "header" in my source code files, so I constructed two simple lines of code, one is copyright and license info, second is short description of the file. I'm going to comment scripts quite well (as I did in recent past), but I also think the code should be self-explanatory, so I'll try to stay modest.

Currently I feel this step as yet another way how to send a word about QetriX, but maybe it will catch on and somebody will rub the code into my face, which will ultimately make me a better programmer :)

On the other hand I'm little worried people may have problems with my way of coding. My programming is mostly "just enough". I don't build vast object schemas and in PHP I still prefer the old function way, because it's faster and less greedy for resources. I'm aware, that bloated code is mostly but fixes, but IMO less code means less things could go wrong.

Then, I don't comply to wide used coding standards, because on QetriX I'm trying to unify coding across various platforms, so I did quite a research on coding standards for particular languages, chose the most used and sticked with it. This includes using double quotes in PHP for strings, even if personally I prefer single quotes - just because in other languages single quotes are for char datetype, while double quotes are for strings.