The Linux GUI Development Nightmare

For about 2 weeks I’ve been having some fun with Linux development, mainly using Ruby to build command-line applications. My decisions, to create command-line applications using Ruby instead of GUI applications, were made because of a simple factor: GUI development for Linux is a nightmare, since there isn’t at least one good GUI prototyping tool available to help you design your UI without having to do everything manually.

First I tried Glade which is just a nightmare. It’s extremely complicated to deal with and you have no clue about which control you should use or how to arrange things, and most importantly there’s not a lot of tutorials and documentation for new users to learn how to use it, and how to integrate with other languages.

Then I was told that Qt Creator was an awesome thing, so I decided to give it a try. I’ve created a new test project and selected the Qt Quick option so I could use QML, which is a lot better for a developer with Javascript background like me. One of the things that made me like this was the amount of good documentation and tutorials.

When I started playing with the Designer one of the first things that I noticed was the lack of simple controls like Buttons, this was pretty strange and I thought I haven’t installed all the things needed, but when I searched for it I got this tutorial from Qt itself, which explains how to create a button in QML (from scratch!!). QML is one of the most awesome things I ever seen to build the GUI logic, it’s simple and flexible, the problem is that there isn’t any kind of controls to create real world desktop applications with it.

After that I took a look at wxWidgets, which lacks good documentation and a decent GUI designer. Then after all this horrible nightmare I thought about creating all my UIs using HTML5 and wrapping everything around a GTK WebKit window, but I don’t think this is a good approach since my apps would look like an alien to the system.

Where are the Delphis of modern computing? I remember how easy it was to design UIs using Delphi and with a right-click on the control you could easily attach an event to it’s logic. It’s this kind of IDE that I’m expecting, one that focus on the fact that you don’t need to struggle to create a UI, but instead that you should be able to create the UI fast and easily enough, so you can focus on the most important thing that is your application logic.

Linux is a awesome OS, I’ve been using it since 2007, and it needs/deserves better tools to create awesome GUI applications, this is one of the reasons that developers aren’t porting their apps to Linux. On Mac OS X we have the awesome Xcode that includes a incredibly awesome GUI designer, and on the Windows side we have Visual Studio with a designer that is the best one in my opinion, since it’s easy, flexible, and powerful. Isn’t this the perfect time for a great Linux GUI designer?

If it’s Good I Don’t Care Which License it Uses

Today I could finally watch the Stallman’s interview on The Linux Action Show, and their second video about it, and I couldn’t agree more with Bryan, so I thought about writing an article about it since most of the responses I saw were just a lot of crap thrown at a person that wants to make a living out of software development.

Stallman has a great dream that software should be “free”, but I think that the developer must also have the freedom to choose if they want to charge or not for their software. Free software is great, but if a developer wants to make a living out of their software, which means be dedicated full-time and not have another job, it’s almost impossible if you only make free software, even if you accept donations they won’t be good enough to make a living. Which means you’ll have to charge for some of your software.

When I’m going to get any kind of software the first thing that I look is at the description, what it does and what it doesn’t, then I look at the screenshots. If the software is considered good (in my opinion of good) I’ll download, if it’s free, or buy, if it’s paid. The developer has the freedom to choose the price of their software and I respect that, if the developer thinks that his app is worth $10 and I think it’s worth too, I’ll surely buy it.

Bryan and Chris also talk about the proliferation of the “App Stores” as a bit of a bad thing. Of course it has it’s cons, but they have a huge pro which is how easily it makes for users to discover and get software. This is good for the user, that will be able to get more software to fit his needs, and is good for the developer which will get more downloads/revenue.

Let’s take me as an example. I’m a student which is very thankful to my parents for supporting me to study and have some time to develop software for fun. That’s why I build software that I want/need to use the best examples (and the ones I’m mostly proud for) are build.prop Editor and stream.json, these are all licensed under the GPLv3, but I’m going to start reworking (long story, worked for 1 month to start this project, all was almost ready and a lot of bugs on bbUI.js made me very depressed and leading to my rage quit from BlackBerry development) and it will be a $0.99 app for iOS, Android, and maybe BlackBerry. My decision to charge for this app is just because of the time I’ve invested and will invest on it.

Free software is a great thing, but the blind way that Stallman looks at this scene is just mind blowing. If he really wants that every company that develops proprietary software fails he is just going to kill his own idea because most of the big free software projects are possible because huge companies that earn money from proprietary software can pay for employees to contribute to these free projects.

Stallman also said that he wouldn’t use/recommend the Raspberry Pi just because of one single proprietary part of it (which is probably the GPU). This, and the discussion about child’s food that he had with Bryan, showed how he cannot think about practical implementations of his ideals of freedom. Projects like the Raspberry Pi are the things that are currently keeping my interesting on programming, since the programming scene is so saturated that everything I think might be a cool week pet project never comes out of the paper I’ve sketched, because there’s already a well known and successful project which does exactly what I wanted and more.

What are your thoughts about my opinion? Want to troll? Agree? Leave a comment and I’ll love (or not) to read it.

PS: This post was written using proprietary hardware on a Apple MacBook Pro 17” (2010 model), running a proprietary OS called Mac OS X, using a proprietary word processing software called iA Writer.

Using bbUI’s onscreenready and ondomready to Dynamically Change Your HTML

I started playing a bit with BlackBerry development these days and since I’m not the best at Java (also hate how it’s difficult to do simple things with it) I choose their awesome framework for HTML5 native web development called WebWorks. I really loved it because it’s like PhoneGap, but a lot easier to build plugins (extensions on WebWorks) for it to make your native WebApp feel a lot more native.

Another great thing that RIM did to make the life of WebWorks developers easier and create apps that are exactly like native ones is a Javascript framework called bbUI.js, which is like jQuery Mobile, but seriously, it’s a lot more than just a UI framework. It makes it a lot easier to interact with the OS, override the back button for example, and makes your development cycle look a lot with native development by using screens. On this post I’ll teach you how to dynamically manipulate the screen’s HTML before it’s processed by the bbUI library.

One of the first things that you’ll notice after you start working with bbUI is that it’s not just a collection Javascript functions and CSS stylings, it actually reformat and customize your screen’s HTML before it’s shown to the user. As an example, this simple image-list item declaration in your screen HTML source looks like this:

After it’s processed by the library and shown to the user it will look like this:

Hopefully we can easily manipulate our screen elements and other things before and after it’s processed by bbUI. This is done with the bb.init() function (you can always read more at their documentation). This will be called when the application starts and can be used to listen to events like when a screen is loaded. The main ones are onscreenready and ondomready.

onscreenready: This event will be fired before the sources get processed by the library, so here is where you should manipulate, add or remove things from your HTML source using Javascript, so after it’s done the code will be passed to bbUI to be processed.

ondomready: This event will be fired when the screen finished loading and it has been already processed by bbUI and shown to the user. Here you can put things like alerts and other things that will be used to interact with the user, also some little editing to the screen’s source like renaming a field grabbing some information from a field and etc.

Here is a example of a bb.init() call:

The code is almost self-explanatory. The id is the name, second argument, you gave to a screen when you call it to be processed, for example bb.pushScreen(“screen/main.html”, “main”). And element is the screen source code, which is used to be manipulated before the screen is loaded.

A little problem that some developers might come across while using bbUI for the first time is that when you want to append or change the HTML of the screen before it’s processed by bbUI you might write your code like if the HTML was already loaded onto the screen, but it’s not. Here is an example of a code that won’t work, used to populate a image-list and then show a button that was hidden (using jQuery):

The main problem here is that it’s using document as the source to be manipulated. Since bbUI still hasn’t appended the screen into the document it will give you an error. In order to correct this you should replace document with element, that is passed by the onscreenready event. If you have any jQuery code, just add element as a context argument as shown below in the corrected code:

That’s it! Now you know how to use the onscreenready and ondomready events to dynamically insert or modify your bbUI screen’s. Any questions or suggestions just leave a comment and I’ll reply as soon as possible.

How To Setup And Use NativeControls In PhoneGap

NativeControls

As many might know the most used plugins in PhoneGap for iOS are NativeControls and ChildBrowser, but installing plugins is a bit tricky and you can’t easily find this kind of help around the internet, for example in my case I’ve learned by reading about plugins installation in PhoneGap and doing tests, so on this post I’ll cover the entire setup and usage of NativeControls (but you can use this for any other plugin in the iOS repo) in a very simple and informative way that even a PhoneGap beginner can understand. I’ll assume that you’ve already had installed and configured the Xcode environment on your Mac and is familiarized with the latest version of it. The first thing you must do is download the phonegap-plugins repo archive and extract it anywhere you like. Now go to the extracted folder and go to iPhone/NativeControls and copy the NativeControls.h and NativeControls.m to the //Plugins folder on Xcode, then move the NativeControls.js to your desired place in the www folder. After all this copying and pasting you must open your PhoneGap.plist under //Supporting Files and add a new item to the Plugins array with the Key and Value NativeControls and the Type String, at the end your project should look something like this:

Xcode

Now you’re ready to start diving into the code. The first thing you should do is include the required Javascript files into your index HTML source in this order:

The next thing to do is go to your main Javascript file, which contains the onDeviceReady event set and put the NativeControls initialization code there. On this example we are going to use the TabBar component to output something like this:

TabBar

As you might have noticed I’m using the Glyphish Pro icon pack there, which you can get for $25, but it’s worth every cent, since it’s such a complete icon pack for your TabBars and more. First of all you should initialize a NativeControls variable and create a assign a TabBar to it using this code:

Then you can start creating a icon/button for a tab using this JSON structure:

The first item is the name variable, the second is the icon label, the third is the icon path and the last one is a function that should be called every time icon is clicked. Be aware that you should insert the icon path relative to the project folder! About retina icons I really encourage you to check out this explanation on how to organize them. After you added all the icons you want to the TabBar you should show it in the screen. Then start to place the icons (the order you declare on this function they will get placed) and finally assign a TabBar to be active as the app is fired, just like this:

If you want you can choose from the pre-defined TabBar icons that Apple include by default on their SDK by using these keywords as the icon item:

  • tabButton:More
  • tabButton:Favorites
  • tabButton:Featured
  • tabButton:TopRated
  • tabButton:Recents
  • tabButton:Contacts
  • tabButton:History
  • tabButton:Bookmarks
  • tabButton:Search
  • tabButton:Downloads
  • tabButton:MostRecent
  • tabButton:MostViewed

Remember that the label will be unusable since these will overwrite it, but you should put something on the label item or it won’t work. I’ve uploaded the full source code to my Gist and you can check it out at Example of NativeControls in PhoneGap. After all this hard work you’re ready to compile your application and test it. If you followed the instructions correctly everything should work. If anything goes wrong please drop us a comment and will be my pleasure to help you. Also leave a comment with your thoughts on this article or suggestions.

Microsoft Finally Saw Where The Developers are Going

Today I revived my hope on Microsoft as I received the news that they released their brand new “product” for their fellow developers. The release I am talking about is the official Metro theme for jQuery Mobile. The awesome mobile framework finally got some Microsoft love.

In December of last year I got a new device to develop for, a HTC Titan, running the latest Windows Phone 7.5 Mango build. I loved the OS UI and how the applications were information-centric and not just eye-candy, but there was one problem, the same way C# is a incredible language for a lot of things, it’s parsing functions, for JSON specifically, are very difficult to learn and the articles about it were made for senior C# developers, which makes it difficult for beginners like me to understand them, at least I now can develop using the technology I love most for mobile development: Cordova (aka PhoneGap).

I always wanted to use Cordova for my WP7 projects but the Metro interface was way too complex to build from scratch and since the WP7 build of Cordova was on it’s early stages there were some features still to be implemented, for example there was no way to prevent the app from scrolling and some other things. Now there are plenty of plugins to make the app as native as possible and with the latest help from Microsoft, the Cordova development community has another great platform with almost full support of the native web app framework.

It’s great to see that Microsoft finally realized that the future of development has Javascript, HTML and CSS as the main languages. That’s why I have hopes that Boot to Gecko gets some market attraction and becomes a popular platform.

Follow my blog with Bloglovin

Why You Should Start Dart’ing Right Now

With this article I hope you understand more about the Dart idea and how you can become more productive and happier as a developer of web applications by using it as your main language.

First of all here are some words, from the official site, for you to understand what Dart is:

With the Dart platform, you can write code that runs on servers and in modern web browsers. Dart compiles to JavaScript, so your Dart web apps will work in multiple browsers (not just ours).

The Dart platform includes a language, libraries, an editor, a virtual machine (VM) for both servers and browsers, and a compiler to JavaScript.

The Community is Awesome
One of the biggest advantages of Dart is the vibrating community. Since it’s still under development the developer base is very helpful and shareful too. If you’re on Google+ you’ll know almost every new project that is done using Dart, this way you have more attention on your project.

Libraries are Needed
Because it’s on it’s early stages Dart needs libraries to fulfill developers, this way you have a lot of libraries you can create, from scratch or porting from Javascript. This way you’ll be learning more, helping the community and earning respect from the community.

It’s Incredibly Easy to Create Web Applications
Since it was built by Google for web applications from scratch, it’s the perfect language for web application development. You’re not having to adapt a old language for the web revolution, you’re using a language that was built for the web revolution.

Weekly Updates
The language is under active development. Almost every single week a new build of the language, or the tools (Dart Editor and Dartium), is released. This way you can feel something that any other language can provide you today, the feel that it’s mutable and is evolving. It’s awesome when I open my Google Reader application and there is a new update on the Dart feed. I quickly download and test what’s new.

Organized Syntax
As a node.js developer I know that as you dive deeply into a complex part of your web application the code becomes a hell to understand. With the Dart syntax this is a bit more difficult, your code becomes more readable and a lot more maintainable. Also the Dart team published an awesome style guide to make your code even better for your eyes and brain.

Easy to Learn
Dart is incredibly easy to learn. There are three ways of learning Dart. If you’re already a Javascript you can learn by reading the awesome Translations from Javascript table which will show everything you must know about Dart comparing to Javascript. The second way of learning is by reading their lengthy Language Tour which will give you an in-depth look at every single aspect of the language. The third way is to learn by practicing and looking at the previous links when you don’t know how to do something or the compiler is giving you a strange error.

Those, in my opinion, are some of the key features of the awesome Dart language. I hope you give it a try and have lots of fun with it. Don’t forget to comment about your experience with Dart and your opinion about it.

Interpreted is The Future

Interpreted languages are pretty popular since 2005. Ruby with the Rails framework (or API), Python with Django, Javascript with Node.js. These are just some examples of interpreted languages that became extremely popular, mostly because of frameworks, but the main thing that will make the future be ruled by interpreted languages aren’t frameworks. Instead the best feature of these languages are the fact that you can easily test or debug your code on-the-fly, without having to worry about compiling a test source code to see if it works.

The Node.js console for example: I can run my server script on the test machine, then I type node and I can debug/test the code I just wrote, sending GET/POST requests, doing simple database queries (MongoDB of course) and testing code I might add to the main script. A lot of people complain that they are slow because of the way they “read” your code, but seriously I never had any problem with slowness on my code, so I think this isn’t an issue.

Of course languages like C/C++ (I hope Go can kill them because they are completely outdated and there is no more reason to continue using them) or Java will continue to exist for a long time because there are some things, like bootloaders, security systems, OSes, that can only be written in code that can be compiled.

I hope the future gets even brighter for interpreted languages, that’s why I’m trying to give them all a try before choosing the one I’ll stay. At the time Node.js is the best for me because I really love Javascript, but I might get into Ruby too, I like the syntax and the community is really great too.

My new development device just arrived #programming #gklst #BlackBerry (Taken with instagram)

OAuth Broke The Internet

If you don’t know what OAuth is, it’s a auth process for cross-domain login, like Twitter or Facebook when you want to login/register on client apps, like HootSuite, Carbon or Tweetbot, or when you’re just logging into a 3rd-party site like Empire Avenue or Geeklist.

It’s a very secure system, the problem is that you break the user experience in the worst way possible. You take the user out of the web site or app just to login, the developer has to create a very bad system by embedding a WebView to the app or redirecting to the browser just to log the user in.

xAuth is good, but not perfect, at least you don’t need to take the user out of the app, the problem is that Twitter, for example, the developer must request the xAuth keys and wait if it gets approved, also it has limitations like no access to Direct Messages.

Users and developers should make some pressure on Twitter, Facebook, Google etc. to open the xAuth access without limitations or ask for a new and better authentication system.

I’ve being playing with the SURE_circuit board with a PIC 12F629 for 1 day and this is what I’ve accomplished so far. Tomorrow I’ll start working with the 2 buttons on the board.

Here is the code for the programming lovers: https://gist.github.com/2143342

To bootstrap or not to bootstrap

jenius:

Since the day Twitter Bootstrap came out, it has been immensely popular. And recently, there have been more and more posts that either go on and on about how great it is, or how over-used it is. Here are two I saw on the front page of hacker news today:

This is just a very small subset of the massive number of popular articles I’ve seen about bootstrap, and they all seem to come from one of two angles: 1) I am not a professional designer, and bootstrap is a lifesaver for me, and 2) I am a professional designer, and it makes me ill that it’s being used so often rather than a real custom designs.

Read More

Emacs Rainbow Mode

These things make me love to develop with Emacs… (I moved from TextMate to Emacs about a month ago)

heyemacs:


Rainbow Mode is a minor mode by Julien Danjou that displays strings representing colors (hexadecimal numbers, keywords like “red”, rgb values) with the colors they represent as their background.

A very useful and fun mode for those who spend a lot of time with CSS.

Get it here.

RIM is The Only One Thinking About The Developer

Yesterday I made a decision based on how much the company cares about their developers. I bought a BlackBerry PlayBook because RIM (maybe because they are desperate for users/developers) is the only company that cares about there developers choice.

They are the only company that is really looking for and taking time to improve HTML5 app development,. Native support for Adobe AIR, so Flash games and Flex apps can be easily ported to their platform. And as usual Java and C/C++ support for existing BlackBerry developers and new developers looking forward to build fully native apps and awesome games.

Companies like Apple and Google are not thinking about letting their developers have choice, only the user can have it (usually on the Android side it’s causing fragmentation and on the iOS side is just selling older hardware for more affordable prices).

That’s why I bought a PlayBook and that’s why my choice for the next devices is going to be based on how the company cares about my hobby of developing apps for them.

Dartium is a Great Idea For a New Era of WebApps and Games

As you might have heard of Google included a Dart VM on the latest Chrome Tech Preview. As they said on their blog post:

Today’s release of the Chromium + Dart VM integration is another step forward for the open source “batteries included” Dart platform. Our goal is to help you build complex, high performance apps for the modern web

Dart, just like Go, is a great mashup of Javascript and C/C++ which is great for desktop developers that are currently doing apps with C/C++ and want to move to a better and more flexible language for the web. I know that there is this new thing on Chrome called Native Client that let game (and app) developers use native code to build apps/games for the Chrome Web Store, but Dart is different since it’s cross-browser (if compiled into Javascript).

I’m sure that a lot of developers will like Google’s new language to develop games and web applications for Chrome and for other browsers too with Dart compiled into Javascript. I’ll start learning Dart for sure.