WebIssues

Migration to GitHub

Submitted by mimec on 2018-03-02

In the last few months I've been quite busy working on the prototype of version 2.0 of WebIssues. My plan was to reach a point where the new web UI is functional, at least in the most important areas, before migrating the code repository to GitHub. However, with the recent series of outages and problems with SourceForge, I decided not to wait any longer. Honestly I don't blame those guys who work for SF. I suspect that these problems have more to do with politics than with technical reasons. The truth is that in today's digital world the largest company wipes out the competition sooner or later, so this was inevitable. But it doesn't change the fact that SourceForge played a very important role in the popularization of open-source software and after using it for at least 13 years, I feel a little bit of sentiment.

Also, I've been using Subversion for so long that I was a little bit reluctant to switch to Git. Believe it or not, but I've never really used it before. I know that in theory it works more or less the same, but such transition always requires some mental processing which distracts from the actual work. Fortunately, thanks to Visual Studio Code and it's built-in integration with Git, this transition went quite smoothly. So the first project is now available at https://github.com/mimecorg/webissues. Please note that this is the current development version of WebIssues 2.0, so it's very far from being functional and stable. In the following days, I will move my other projects to GitHub, including the latest stable version of WebIssues.

Soon I will also publish an article on Medium in which I will describe my initial experiences with Vue.js and my general thoughts about the benefits (and drawbacks) of working on an open-source side project. I will also use this opportunity to reveal some of my plans regarding version 2.0 of WebIssues.

New incarnation of mimec.org

Submitted by mimec on 2017-11-19

Today is the beginning of a new chapter in the history of the mimec.org website, which I created almost twelve years ago, and the related websites dedicated to my open source projects. I moved these sites to a new server, but I also completely redesigned them and migrated them to the latest version of Drupal. I actually built them completely from scratch and imported the old content using some hand-crafted tools, so the whole conversion took about six weeks of work. I hope that you like the result.

If you look closely at my blog, you will notice that there hasn’t been much going on recently. I mainly focused on Bulletcode, the company which I founded three years ago with my friends. We had a lot of ups and downs, but the important thing is that we created a few projects that help thousands of people. Even though it was always just a side project for us, it was definitely one of the greatest experiences in our lives. Each of us moved on to different projects, but we’re still a great team and when the time comes, we may work on something new again.

Personally, the last few years were very hard for me, so the company was one of the things that kept me alive. But now I’m ready to begin a new chapter in my life, start building a new relationship and become the person who I really want to be. I’m more aware of myself. I rediscovered many things that I lost along the way, things that inspire me and drive me to become better at what I do. I am grateful for what I have and I look into the future with optimism and curiosity.

So what are my plans now? A few months ago, I started working on a new, experimental version of WebIssues, with a new user interface based on Vue.js. Those of you who follow me on Twitter could already see some screenshots of that prototype. I also wrote a series of articles on Medium dedicated to programming in Vue.js and to my great surprise, they were very well received. I found a way to create the new version of WebIssues with as little effort as possible. However, I felt that this wasn’t the right approach, so I decided to take a step back and rethink this.

The truth is that it took me many years to learn PHP and C++ before WebIssues could become what it is today. Now I must gain a similar level of skills with the new technologies, even if it takes a similar amount of time. I also want to make a really good use of them instead of just doing a simple face lifting. So instead of rushing toward releasing a new version, I’m going to keep experimenting until I’m satisfied with the results. Of course, I will continue to write about new things that I learn along the way on Medium. I will also share my progress in this blog.

I’m very excited about this new plan, because I think that personal development and improving our skills is the best thing that we can do in our lives. Especially if they allow us to do something both creative and useful. With that goal in mind, I’m sure that the next months and years will be an amazing time.

Issues and Tins

Submitted by mimec on 2013-11-13

Today I released version 1.1 of WebIssues, a major release which introduces lots of very nice and useful features. I must admit that I'm relieved that this project is finally over. It's also perfect timing, because I'm getting seriously involved in the indie game which I announced some time ago. The game is now officially called Mister Tins and it even already has a Facebook page and a blog (where I will probably post more often than here in the nearest future).

What started as a quick test project, has now become a playable and quite enjoyable game (at least for me). It's still very far from the first official release, but at least now I'm convinced that this is really what I want to do. It's what I always wanted to do and what I probably should have done a long time ago.

I'm not saying that I regret what I've been doing for the last few years. I definitely wouldn't be half as good programmer if it wasn't for WebIssues. I would even go as far as saying that I wouldn't be half the person I am today if it wasn't for all the open source projects I've been involved in. All this technical and non-technical experience should now pay off with this new project.

Of course, there's no guarantee that I will succeed. I know that there is a lot of potential in what I'm doing, and the whole idea of the game, while simple, seems quite innovative. On the other hand, there are many factors involved, and not all of them depend on me. A lot of luck is needed to provide what people need exactly in the right moment. Also, creating games is a team sport, and experience taught me that finding the right team members is not easy an task. But the best thing is that I've reached one very major goal, which was releasing WebIssues 1.1, and I can immediately concentrate on the next goal, without losing the momentum that I have.

The markItUp text editor

Submitted by mimec on 2013-04-03

As I already explained, version 1.1 of WebIssues will allow using a special markup language when editing comments and descriptions. The syntax will be a hybrid of BBCode, Wiki and various other markup languages. Obviously it's hard to expect that the users will remember Yet Another Markup Language. Instead, they will use a familiar toolbar and key shortcuts to make selected text bold or italic, create a hyperlink or insert a block of code. I decided to use markItUp because it's simple, lightweight (the original uncompressed script is just 20 KB long) and fully customizable. Unlike some other editors, it's not designed for any particular markup language (like markdown or wiki syntax), but lets you design a custom toolbar with whatever markup you need.

After playing with markItUp for a while, I decided to customize it a bit more by modifying the script. It could already generate a preview using AJAX and has multiple ways of showing it - in a popup window, embedded iframe or a custom HTML element. I decided to use the custom element, but I wanted it to be shown dynamically when the preview is first invoked, just like in the two other modes. I also integrated it with prettify, about which I wrote last time, so that syntax highlighting works in the preview.

I also slightly changed the way the markup is added. First, in my version, the openWith/closeWith text is not added to empty lines (or lines with nothing but whitespace). Second, the closeBlockWith text is added before any trailing newlines and other whitespace. It works better this way, especially if you want to apply bold or italic to multiple lines (each line is treated as a separate block, so it must be wrapped in separate bold/italic tags). Finally I removed the special handling for Ctrl and Shift keys when clicking on the toolbar. It's hard to remember and can be confusing, so I decided to simply remove it.

Just like with Prettify, I minified the whole thing using the Closure Compiler, this time in simple mode, because advanced doesn't work too well with jQuery plug-ins. I also had to replace an eval() with direct call to the preview() function, because eval() wouldn't work with minified code. The final script is just 10 KB long. The unminified version of both this script and my version of Prettify are available in the trunk/tools subdirectory of the WebIssues SVN repository, in case you're interested.

Note that obviously I had to implement a similar editor in the Desktop Client, which uses a native QPlainTextEdit to edit the comments and descriptions. JavaScript was not an option here, but adding a few toolbuttons and reimplementing the relevant function in C++ was very straightforward. By the way, I recently also rewrote the entire markup processor, which converts the markup to HTML and also exists in two versions, PHP and C++. It was the third or forth time I wrote it from scratch, but this time I decided to do it "the right way". Instead of a very long, convoluted loop with a state machine, I decided to use a recursive descent parser, which is very simple, because the markup language has a LL(1) grammar with just a few production rules. The code is now slightly longer, but incomparably easier to understand, plus I fixed a few remaining bugs.

Some of you might wonder why I didn't decide to implement a WYSIWYG editor in WebIssues. They are large, complex beasts, which may be useful for large CMS systems designed to be used by non-technical people who like to edit their articles as if they were using MS Word. For a relatively small project like WebIssues, it would be an overkill to include a word processing package in it. Besides, these editors don't always produce valid HTML, and they don't work consistently across various browsers (not to mention the Desktop Client). What's worse, despite the tempting naive implementation (which uses htmlspecialchars_decode to circumvent WebIssues' built-in XSS protection!), it's actually very difficult to sanitize and validate the resulting HTML. Instead, WebIssues will still support the old style plain text format, with no special processing (except for turning URLs into links), which indeed is truly WYSIWYG. Depending on the level of technical skills of the majority your users, you will be able to choose the either plain text or text with markup as the default format.

Syntax highlighting with Prettify

Submitted by mimec on 2013-03-20

In version 1.1 of WebIssues it will be possible to use the [code] tag in comments and descriptions. Text included in this tag will be displayd using monospace font, with all formatting disabled. This is useful for including fragments of output, log files, etc., but it can also be used for code snippets; after all it's an issue tracking software. Developers generally like their code colored, so all kinds of editors and other development tools support syntax highlighting for various languages.

Of course creating a syntax hightlighter is a very complex task, especially given the vast number of programming languages with very different syntax. No wonder than one of the popular tools, SyntaxHighlighter, contains about 100 kilobytes of (partially minified) JavaScript code, slightly more than jQuery. Another example is GeSHi, a 200 kilobyte PHP class with 3 megabytes (!) of language definitions. But syntax highlighting is just decoration, not a key future, so I want to avoid having to download tons of .js and .css files just to achieve this.

The problem is that these tools try to be much too thorough. I don't care if every single PHP function is highlighted, as long as the most important keywords are, along with comments, strings and fragments of HTML that are embedded into the PHP file (which in turn can contain embedded CSS and JavaScript). That's exactly what Google Code Prettify does. It is actively maintained by folks from Google, and it's used by Google Code itself and Stack Overflow, among others. I decided to use it as well.

The version which is included in the current development version of WebIssues is just 16 kilobytes of code. I removed a few unnecessary features and incorporated some of the additional languages into the main file. Currently supported languages include HTML and XML, C and C++, C#, Java, Bash, Python, Perl, Ruby, JavaScript, CSS, SQL, Visual Basic and PHP. I also packed the final script using the Closure Compiler (also from Google) which decreased the file almost four times.

When I was looking for a syntax highlighter, initially I was thinking about doing it server side, using PHP code. It didn't occur to me that this can be done on the client using JavaScript. At first the idea seemed strange to me. However it's actually great and can significantly reduce the server load. From the user's perspective it doesn't really matter. After all, have you ever noticed that Stack Overflow highlights code snippets on the fly using JavaScript?

There is yet another benefit of using client script instead of PHP: it is possible to highlight code also in the Desktop Client. Otherwise the entire mechanism would have to be reimplemented in C++. Version 1.0 of the Desktop Client displays issue details using QTextBrowser, which doesn't support JavaScript and has very limited support for HTML and CSS. But version 1.1 will use QtWebKit, the Qt port of the same engine which powers Chrome and Safari. The advantage is that issue details will have the same look and feel in both the Web Client and the Desktop Client, and obviously it's possible to embed Prettify. I found some minor issues with QtWebKit, probably worth a separate post, but generally, everything works very well.