My Setup History – Text Editors

I always think of myself as a person that tries and uses multiple tools, editors, libraries and more. I change my setup regularly and so I thought I should write down my setup yearly. But first, I will quickly talk about what I have used in the past.

I will try to write a series of posts with the tools I have used all those years.

Text Editors & IDEs

I will start with the most important thing for a developer.

– The first editor I can remember is Dreamweaver. It was an awful experience with the WYSIWYG to produce insane amounts of code and totally destroying anything you wrote.
– While working with Flash and writing ActionScript I was using the Macromedia (Adobe bought Macromedia later) Flash.
– As I found myself writing more and more PHP, I found that Aptana could help me be more productive.
– JavaScript started becoming more famous in my everyday development and I was looking to transition from IDEs to Text Editors. As an Ubuntu user since 2007, gEdit was preinstalled, and an obvious solution for me.
Sublime Text took over the development world like a storm and I was in that storm
– After Chrome DevTools started using CodeMirror and introduced Workspaces, I tried to use the DevTools as my main editor. Yeah, I did that it for 6 months.
– GitHub created Atom and although I hoped for an in browser version of it, it was a normal transition for me, being very familiar with it after using Sublime Text.

I’m using Atom since it was released for Linux and it seems the best solution right now, till the next cool kid lands!

The frontend king

The king is dead, long live the new king!

Misko Hevery and the Angular team revolutionized the way we work. When I first heard about Angular, was back in 2012 when there was a new breed of frameworks that wanted to dethrone the king at that time, jQuery. Backbone, Ember, Knockout, Angular, all wanted a part of the pie. I actually created a couple of projects with Backbone which was the first that earned some kind of popularity, and attended a seminar organized by Microsoft Greece to get to know a bit about Knockout. But it was Angular that seemed the best solution to create SPA applications, and it didn’t took long before it skyrocketed to the top.

The new king enjoyed a couple years at the throne, but it’s own creators decided to abandon it (not exactly accurate, but… yeah) and bet heavily on a new, completely different, incarnation of Angular, Angular 2. That was about the time that Facebook announced that was already functioning on top of a new framework called React.js.

It took a while for people (including myself) to realise that markup inside js files is not the worst idea ever, and that JSX is actually useful. Slowly and steadily, React popularity is growing and it recently reached over 40000 stars on github, soon to overcome Angular 1 with 48000. It’s obvious that a new king is rising!

So, seeing the old king abandoned and destined to die, I had to make a choice: Angular 2 or React?

React has React Native, Redux (that I really wanted to have for some projects back in 2011), it embraced es2015 and has a vibrant community and a huge ecosystem.

Angular has the brains that created one king already, selected TypeScript and took the bold decision to create something completely new from scratch.

Whoever is the new king, it’s certainly time for new and exciting things.

P.S. I already read a lot about React and I’m already creating a project with it! I’m sure I won’t be able to keep my hand of Angular 2 either in the future 😛

Angular.js app powered by Google Docs

We all know and probably have used Google Docs. Its a very useful tool to write documents and have them sync across devices and platforms or cooperate with a colleague real-time on a document. On the other hand, Angular.js helps us create a full featured application or website that can function on its own, needing only a server to read and save data. What if we use Google Docs as our server to read and write our data?

The need

A client had many documents on Google Drive and wanted to present them to his clients with an enhanced User Experience. It would be very cumbersome to copy and paste those documents into the editor of another CMS, having to update 2 documents (in the CMS and in Google Drive) every time there is a change.

The connection

Google Docs is an online word processor according to Wikipedia. In other words, it is a very powerful WYSIWYG editor. To create a basic blog, you need a login page that takes you to an administration panel that allows you to write your blog posts. That’s exactly what Google Docs offers. You login with your Google Account and create documents.

Fortunately, Google provides a full featured API for most of its products, and Google Docs is not an exception. Being a part of the Google Drive family of products, we can access everything through the Drive API and we are able to create something way more powerful than a simple blog!

Angular Communications Architecture

Using Angular.js for almost two years now, we have a standard architecture that we use for most of our projects. Angular provides Views, Controllers and Services to structure your application. To communicate with a server, we also have a standardized way. We create Angular Services that are injected into a Controller and perform the request.Those services have a very simple set of methods that allow specific actions. When we communicate with a server built by us, those Services are created based on Restangular. When we need to communicate with the Google Drive API, we make sure that those Services are being called exactly the same way, even if internally they are very different and not based on Restangular.

API Authentication

This an example of the GDAuth.js Service that we use to Authenticate with the Google Drive API.

App.service('GDAuth', function($q) {
  return {
    authorize: function(options) {
      var deferred = $q.defer();

        function(result) {
          if (result && !result.error) {
            // Access token has been successfully retrieved, requests can be sent to the API
            gapi.client.load('drive', 'v2', function() {
          } else {
            // No access token could be retrieved

      return deferred.promise;

The GDAuth Service provides only a single method, the authorize, that we can call in our Controller to authenticate and be able to perform the rest of the actions that the API allows. It needs a single parameter, with the options as expected by the Google Drive API. We don’t want to create a new API on top of the original when its not necessary.

File retrieval and display

Retrieving the contents of a specific file, is very easy.{
  'fileId': gdriveId

The code above returns a file object, provided the file id. This object contains the complete document, including all the necessary styles and images (hosted on Google Drive) to display it exactly like you previously created it on Google Docs. Because we want to display the document inside an Angular application, we use regular expressions to find the document styles and content and add the styles in the appropriate place, that’s inside the html head tag and the content on its respective place.

Maybe you should add a brief paragraph naming most of the features drive can handle this way here, this way you will captivate the developers/geek’s mind.

Final Thoughts

The final application can read Google Documents, images stored in folders on Google Drive and on the fly create galleries to accompany the document topics. We also used the document description to add metadata about the categories that those documents belong to. Future developments for the same project with feature Google Spreadsheets that will be used to create Graph Charts using JavaScript in the application with filtering and live updates.

Angular.js for jQuery developers

JavaScript was created back in 1995 but made a comeback with the introduction of Ajax and jQuery in 2006. Nowadays, over 60% of the 10000 top visited websites in the world use jQuery and most front end developers are familiar with Javascript and jQuery.

But since jQuery is so popular, why invest time into learning a new JavaScript Framework?

Framework vs Library

The first difference is a big one, jQuery is a library and Angular.js is a framework. What does that mean? A library provides some useful utilities in order to make things simpler and faster. Combine that with the uncountable jQuery plugins and you can do almost anything. A framework on the other side, offers a very specific project architecture that helps a developer organize his code, make it modular and DRY and also comes with preinstalled and required libraries. In fact, Angular.js has the jqLite library included, which is a limited version of jQuery.

UI Encapsulation

To create an accordion with jQuery, you will probably try to find a jQuery plugin and read the instructions on how to implement it. Implementation includes adding the required elements, a few divs, a list, list items and maybe even more. Why not just add an element. Angular.js can create new HTML elements called directives that encapsulate HTML multiple elements and JavaScript functionality.

SPA (Single Page Application)

Websites built with Angular.js are Single Page Applications. SPAs are very fast and responsive on user interaction. This is possible by the MVW architecture (explained below) that separate the data from the presentation of data. Of course SPAs have some disadvantages like the Search Engines index crawlers that most can’t run JavaScript, and thus can’t index SPAs. Since Angular.js in built by Google, it was expected that Google Search will soon start to support it, and the first steps are already done.

MVW (Model View Whatever)

Most modern frameworks implement an MVC architecture and so does Angular.js but allows for simple applications that don’t implement controllers. The separation of Model and View allows for cleaner code, distinctive purposes for each file, and maybe even different developers working on them based on their specialty.

Final Thoughts

Angular.js is not a jQuery replacement, but it is certainly something that will be in the Javascript scene spotlight for the years to come. Although it is a very powerful framework, it is not the best solution for all projects. For example a SEO critical website, might be better suited for a more traditional implementation at the moment, but for generic web applications Angular.js is the way to go.


Hey, it’s been a while i wrote something on this blog, despite having a weekly reminder to make me visit this site more often. I keep looking around to Angular stuff, but i’m also thinking about some other stuff that I might (or probably might not) write about in the future.

While working on Angular, I needed a temporary storage option. I had heard a lot about localStorage indexedDB, webDB but never really tried any of those choices. So, it was about time to investigate further into those solutions.

Checked all the possible solutions, but caniuse and the notorius Internet Explorer limited my options. So, I decided that localStorage was the way to go. So I created an Angular module to make using local and session storage easy.

I’m kinda new into creating open source repositories, but I tried to create a github repository based on what i’m looking for when i’m finding a repository, all the info i need on the repository readme file please. The repository is located here ( ).

I won’t include any info on how to use it here, thats why the readme file exists, right?


Recently, I started working on a new project, in which we will use Angular.js for the frontend part and node.js/mongodb for the backend.

The framework we chose for node is Express. I really love the simplicity of Express. But my main part is the frontend. I really like the concept that Angular introduces. The html is the the one that gives orders to the js, something is totally different based on what i was used to with jQuery and the DOM manipulations.

While the project is evolving, we needed a Google Map to display some POIs. I made an initial implementation, I then transformed it into an Angular.js directive but just today I realized the correct way to create a Google map directive, when I first saw I will try to rewrite my directive based on Nicolas Laplante’s awesome work. The final result might be similar, but the target is to create my first fully functional and parameterized directive.

I will have more info on this and maybe a Github repository as the work is going on.


Πάει πολύ καιρός που έγραψα κάτι σε αυτό το blog και τωρα δεν πρόκειται να γράψω και πολλά. Οι διακοπές πλησιάζουν και ήδη προετοιμαζόμαστε (ψυχολογικά) για το τι θα επακολουθήσει 😉

WordPress plugin development

Lately, im heavily involved into developing on WordPress. Some small projects, and recently some bigger ones. So, the wiser decision was to transform most of my code into wordpress plugins. The benefits from such a decision are many and some big ones, like the ability to access all the core wordpress functions without including any additional files and direct access to the wp database with the $wpdb.

Until now i was developing inside the wp theme, adding there some smaller bits of code and having a separate folder (not wp related) for the “bigger” scripts. Creating a wp plugin is rather easy, since its just your function that is available all over wordpress with some comments that indicate that this is a plugin. The last few days, im working on transforming most of my code into wp plugins. From a simple text cutter that just cuts the text depending on the character limit you set, that also tries not to split words, to the latest wp that is better described as a custom wp admin panel.

As you can understand, this plugin is a huge beast, which is quite flexible and fast though. Its main purpose is to let users (registered or not) to submit content without having to see the real wp admin panel. It takes longer than i thought to develop it, but in some aspects, its even more powerful that the real admin panel itself, while it really sucks in other points, like the media management where I only implemented the ability to upload and delete a file. It supports many input types, like photos, textfields, textareas, dropdowns, dates, times and checkboxes, while handling the categories as a special dropdown. Thats much more than wp can handle, so, the post_meta database table becomes very handy in saving most of this data.

The main submit function is finished, so does most of the work too, but here lies a small trap which is the editing part. Sometimes, the changes should be reviewed before applied, and an activity (editing) stream should be recorded for each user, so the next step is to record all changes as a revision, and apply them only if the admin approves them. Thats not something difficult to create (after you think that solution) and the same “submit” function can be used with an “edit=true” parameter, but thats probably not the best solution if more features should be added in the future.

And last after edit, is the ability to delete something. Not such a big deal, simple, easy and only one way to do it 😛