A couple of weeks ago, Grietje (thanks again!), a new Pomodoro Crate user at that time, wrote me about a subtle UI issue: the Active Pomodoro widget was displaying a textarea who’s purpose was elusive and who’s content wasn’t being saved.

The text box was meant to be used (optionally) for writing down the reasons for voiding the pomodoro. The problem was that the textarea was visible all the time, being placed above the “Void” button.

As the Pomodoro Crate users are even smarter than me (it’s one of the reasons which makes developing this so freaking awesome), Grietje added in some content and waited. Once the pomodoro timer finished, the text was, obviously (for me!) cleared. It was meant for commenting about voiding the pomodoro – if the pomodoro wasn’t voided, anything written there was irrelevant for the application.

The problem

From a UI/UX perspective, the elements of the interface should be made available when needed. As such, only the most important actions in the economy of the software should benefit from visible user interface elements at all times.

It’s true that voiding the pomodoro was the most relevant action at that point – but voiding a pomodoro was not the focus of the application. Pomodoro Crate was not developed for voiding pomodoros, but for helping us complete them – better, easier and much more often. Taking this into consideration, the visible textarea was in fact placing emphasis on the voiding action, while distracting users from doing their thing to complete the task. Probably Grietje added up some internal interruptions wondering about the box – sorry about that

The UI solution

Many times, asking the right questions is half of the solution. Same here – if the textarea was not helping, but instead cluttering the interface, the solution was to hide it away and show it only when the user actually voided the pomodoro.

At first I was inclined to implement this in place – but I was contemplating a new UX problem: the user was supposed to click the void button. Rails would show the confirmation popup – which will put the focus on the center of the page (that’s where native JavaScript confirmations are positioned). On confirmation, I would then have to display the comment box in the widget and ask the user if she wants to add a note about the voiding reason. Getting your users to shake their heads as if watching a tennis match and run around with their cursors all over the place doesn’t add style points to an app, trust me.

Back to the drawing board. Option two: replace native JavaScript confirmations with custom ones that show in place (there are some nice jQuery plugins for this).

This felt even worst – by dropping native, failure-proof confirmations in a critical zone of the application, I was opening the door for many potential cross-browser issues. [On a side note: while showing, native JavaScript confirmations, prompts and alerts will halt the execution of all client side scripts, effectively suspending all activity in the browser. HTML replacements won't do the same so beware cause you might get unexpected results.]

Ultimately, the path I chose was becoming obvious: if mixing JavaScript confirmations with HTML elements doesn’t work and nor does using only HTML, then it will hopefully work using only JavaScript native modal alerts. Indeed, it sounded good: the JavaScript confirmation was focusing the user on the center of the screen while freezing the app. And upon confirmation, the JavaScript prompt would take control in the same location on screen. Awesome!

The implementation

I decided to augment the Rails implementation and add unobtrusive prompt() support. Of course, prompts are more complex than the confirmations because prompts need to have supplied the question and the (optional) suggested response. And of course, a prompt is useless if you don’t get back the user input.

First thing was hiding the comment box via CSS – I wanted to keep it so that the new UI would work without modifications on the server side.

Next, augmenting the Rails code with the “data-” attributes for supporting the prompt:

Nothing fancy here, just some custom “data-*” HTML5 attributes being rendered in the view.

Now, the JS code:

/**** PROMPT SUPPORT ****/$(function(){  $('[data-prompt]').live('click', function(){    user_input = prompt( $(this).attr('data-prompt'), $(this).attr('data-prompt-answer') ? $(this).attr('data-prompt-answer') : "" );    if( user_input ) user_input = user_input.replace('"', "'");

if ( $(this).attr('data-prompt-callback') && typeof window[ $(this).attr('data-prompt-callback') ] == "function") {      return window[ $(this).attr('data-prompt-callback') ]( user_input );    } 

return true;  });});/**** END PROMPT SUPPORT ****/

The above code attaches a live click event handler for all the elements that provide the data-prompt attribute. The user is presented with the prompt. If the optional “data-prompt-answer” attribute is set, the value is being sent to the prompt() function. And finally, if the user wishes to comment, the input is being cleaned and sent to the callback function, if available.

The callback function:

function updateVoidComment(comment) {  $('#pomodoro_comments').val( comment );}

places the user comment into the (now hidden) textarea and finishes.

At this point the form is being submitted and the pomodoro voided – user comments included

—

Pomodoro Crate is an awesome time management web application, based on the Pomodoro Technique. Sign-up – it’s free!

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down periods of work into 25-minute intervals separated by breaks. The technique employs agile project management concepts such as timeboxing and iterative and incremental development. The method is based on the idea that frequent breaks can improve mental agility.

There are five basic steps to implementing the technique:

1. decide on the task to be done
2. set the pomodoro (timer) to 25 minutes
3. work on the task until the timer rings; record with an x
4. take a short break (5 minutes)
5. every four “pomodori” take a longer break (15–20 minutes)

What have we done

At Reveloper we’ve been actively using the Pomodoro Technique for almost 2 years – it is a very efficient and productive time management method and we’re simply loving it. But unfortunately, we noticed that the manual (read pen and paper) usage of the technique tends to be very time consuming and repetitive, especially in regards to the planning and analytics stages.

We tried some of the existing softwares but found out that none of them provided a complete implementation of the technique (most of them were just glorified timers). That’s when we decided to build our own tool – we architected, designed it and developed it and as the application grew, we decided to release it for free, to allow others to use it as well.

Technologies

Ruby on Rails, jQuery, CSS font-embedding

An original Reveloper product and our take on automating the Pomodoro Technique workflow.

Pomodoro Crate is still a work in progress and we’re glad to see our users providing us with valuable feedback – some of their suggestions and requests were already implemented, and some are in progress.

So, without further ado, I give you… Pomodoro Crate! Sign up (it’s fast and free), give it a try and let us know how you like it. Happy Pomodoros!

The first time I’ve read about Rails, a few years ago, I was truly impressed. It was so powerful, so well architected, so smart and so fun! It made me feel like a kid again, playing and experimenting with my computer. Unfortunately, once I’ve left the playground and begun thinking about using Rails professionally, things got more difficult. With version one, hosting was a major issue. Simply put, at the time, setting up a Rails application was a nightmare, both in terms of work hours and server costs (infrastructure).

With version 2, things got better in terms of hosting and the framework got even better, overall. Unfortunately it came with strings attached. The string: “obtrusive JavaScript”. We decided that giving up unobtrusive JavaScript would fundamentally go against what we believed to be web development best practice, so we went our separate ways again.

Rails 3 – oh, so sweeet

Three really was a charm for web development frameworks in 2010 – first was WordPress, then Rails. The 3rd version of RoR brought a plethora of super-awesome features. Most delicious ones? The Bundler for dependency management, new query engine, better mailer and… can you guess? If you said “Unobtrusive JavaScript!” pat yourself on the back cause you’re right. Rails now generates beautiful HTML5 selectors and attributes to be used by JS and it is JavaScript library agnostic (it means it plays oh so nice with my beloved jQuery).

In conclusion? We’re getting up to speed on Rails

So finally, the time for Rails has come – after 10 years of mostly PHP coding, I can say without a doubt that Rails as a framework, doubled by various gems is a better development tool when compared to CodeIgniter and Cake PHP: you finish your projects faster, you test easier, you deploy so easy and you have so much fun. Which means happier developers making happier clients. Win-win!

So if you’re looking for Rails development let us know — check out Pomodoro Crate (our flagship product and our first professional Rails app) and don’t forget about our promotional rates for Rails development.

Here is a quick review of the book’s take on the Pomodoro time management technique. Read on!

The Pomodoro time management technique

Ever since I started working as a freelancer, I’ve been preoccupied with boosting my productivity. It’s only natural, if you think about it: on one hand, when you are your own boss, time really is money. The more you deliver, the more you earn. On the other hand, I enjoy freelancing because it offers me flexibility in terms of scheduling – if I become more productive, I get to finish my work faster and enjoy more work-free time.

After trying GTD (and giving it up soon), I found out about Pomodoro. I’ve been using it for more than a year now and it was absolutely amazing. It’s simple, unobtrusive and agile – easy to implement, it bends the way you need it, it plays nice with other (complementary) time management systems (like GTD) and provides immediate results.

The technique has been created by Francesco Cirillo in 1992 and it is now used by professionals, individuals and teams, all around the world.

What do you need?

Don’t worry, it is very easy to start using the Pomodoro technique – all you need is a timer (physical or software) and something to write: paper and a pencil or, as I went 100% green (paperless), a spreadsheet. Once you get a hold of this, follow the 3 simple steps to become a happy and productive pomodorian.

1. Out of your mind and in control – the “Activity inventory”

The human brain, as brilliant as it can be, sometimes can act really dummy. For instance, it has no sense of priority. Once you tell your brain that you need to do something – maybe tomorrow, or next week – it will keep bugging you. It doesn’t matter that really, there’s nothing you can do for a few days – it will keep reminding you over and over and over.

But also, the brain has a very limited capacity for storing such to dos. It can take hold of only a few of them at any given time – as new ones pile up, they will take the place of the previous ones. Regardless of whether they were completed or not.

So obviously, our minds are not optimized for such tedious actions. We will be stressed as things will pop-up in our heads when we’ll try to relax or sleep, we’ll live in fear of forgetting something important and we’ll eventually suffer the consequences when we’ll finally omit an important to do. Bummer! That’s a real productivity killer!

So the first step of becoming truly productive (and more) is to obtain peace of mind – and the only way to do this is to inform your brain that all your to dos are safely stored in a place where you can easily retrieve them at any time. And that you will in fact check the list regularly.

Hence, the “Activity Inventory”. This will be your first list, where you will add all your to dos. Use a piece of paper or a separate spreadsheet to store all the things you’ll want do to. Enter the name of the task – as clearly as possible. If the task is ambiguous, later on, when you will have to deal with it, you will have difficulties attacking it. Your brain doesn’t like ambiguous concepts and will do it’s best to make you skip them.

Once you’ve written the to do, in the next column enter the deadline. That’s it! But for a little extra, I added an additional column – for the project. As I said, you can easily add GTD elements to better customize the technique for your needs. The Project column helps me prioritize tasks.

2. Take control of your time – the “To Do Today” list

We’re living in a highly connected world and we’re constantly trying to find our path in an ocean of information. Hundreds of elements are fighting daily for our limited attention – bosses, clients, colleagues, friends, family, emails, messages, phone calls, etc. If you don’t have a clear list of priorities for the day you will be put in the position of constantly reacting to other people’s requests and will find, at the end of the day, that you didn’t accomplish any of the important things. That’s why so many people put in long hours – because they benefit from the silence of the after office hours. But that’s not the way to do it: long hours will burn you out and your personal life will suffer – and so will your friends and your family.

Hence the “To Do Today” list – every morning, before beginning your work, plan your day. Check out the Activity Inventory and pick the tasks that you need to do that day. And that you reasonably expect to complete in a normal work day. For this, use another piece of paper or a different spreadsheet and copy the chosen tasks into your To Do Today list. Ready? Great! This is your commitment – you choose what to do, what is important for you and what you know you can do today – now it’s time to act upon it!

3. The “Pomodoro” timing

The Pomodoro is the core concept of the technique. A pomodoro is an atomic and indivisible unit of time. The time required to accomplish a task is not measured in minutes or hours, but in pomodoros. You can choose the length of your pomodoros – but the key point is that they should have equal length. I like 25 minutes long pomodoros – and so do many others, this being the recommended length.

When you begin working on a task, you complete it one pomodoro at a time. You set your timer and begin working uninterrupted until the clock rings. After this, you take a 5 minutes break – to clear your head, drink some water and move around a little. After every 4 pomodoros, you take a longer break – of 30 minutes.

In order to plan and track your progress, on your To Do Today list, in a column next to the task name, draw one small box for each pomodoro you expect to complete in order to finish the task. When you’re done with a pomodoro, you get to check a box with an “X”. When the whole task is done, cut it with a horizontal line.

It’s very important to remember that a pomodoro can not be paused – once you begin it, you must finish it uninterruptedly.  The purpose of working in a time box is to get you focused and into the flow – your brain needs to learn the patterns in order to fully focus and be completely productive. Also, by working strictly in time boxes you set a clear rhythm for work and breaks – that will help you focus and recharge efficiently. If you interrupt a pomodoro you must void it – that means no “X”. Take a break if you need to, reset the timer and start over.

Equally, you must not cheat the pomodoro – once the timer rings, you must stop. This way you will motivate yourself to work thinking about the upcoming breaks and will keep your rhythm. After all, it’s only 25 minutes of that unpleasant task – of course you can do 25 minutes!

Finally, you must never have tasks that you expect to take more than 8 pomodoros (4 hours). Long tasks are hard to manage and they are huge demotivators. If it needs more than 8 pomodoros, split it into smaller tasks.

Conclusion

The Pomodoro Technique is a great time management solution that will help you work happier, with less stress and no long hours – all while being more productive and achieving more. As soon as you start using it. It is a solution that has been successfully used and refined by professionals active in various areas – and that I’ve been using daily for more than a year.

I hope you liked it and will soon make it a part of your daily routine.

If you want to learn more, visit the official website, download the free goodies or buy the excellent “Pomodoro Technique Illustrated“.

I’d love to find out about your experience with the technique – so don’t forget to leave a comment.

(Image credits: standout, heliomedeiros, psd)

Please download the new 0.2 release and update your WordPress website.

As always, we’re here if you need any help, have any questions or need to report any issues.

(Image credits: bobbigmac and Reveloper)

WordPress is an excellent development platform – a real time-saver in so many aspects. But for a seasoned PHP developer used to the flexibility and the power of OpenSource libraries, sometimes it’s just not flexible enough – by default.

The problem in case is that WordPress gives you no way of sorting the load order of your plugins. This is a huge problem, because lots of plugins output content on the user interface automatically. For instance, they automatically output content at the end of your post, or in your HTML <head>.

The default WordPress sorting is alphabetical, by plugin name. Which from a functional perspective, is the same as random.

A few days ago, I wanted to enable a Facebook Like Button plugin – which appends itself at the end of the post. I already had a Sociable Social Sharing plugin which also appended itself at the end of the post. The Facebook Like plugin, once enabled, was loaded first (starts with “F”). But hey! I wanted them the other way around – for functional and esthetical reasons.

Imagine my surprise when I found out that I wasn’t the only one needing this – and that there was no simple solution! In my opinion, this should’ve been core functionality.

A plugin to load the plugins the way you want

So, without further ado, here comes the plugin. You’ll get a nice interface with drag and drop that will help you arrange them the way you need. And new plugins will be added at the end of the load order.

Enjoy and as always – we’d love to hear from you!

WordPress vs. web application frameworks and custom CMS systems

I’ve been using various PHP development frameworks over the last 7 years: starting with Fusebox, moving on to CodeIgniter and occasionally coding on CakePHP.

Compared to traditional PHP development, application frameworks are a huge productivity booster – they provide a coherent set of tools combined with a strongly enforced workflow, usually employing well established design patterns and modern programming and testing techniques.

But they are just too generic – looking back, I found that in over 80% of the cases, the clients needed a flexible, easy to use CMS. And even more important, about 80% of the functionality of the CMS was common throughout all projects. So of course, the logical step was to build a custom made CMS on top of my favorite application framework – CodeIgniter.

It worked like a charm, allowing us to build reusable modules and literally shape it into everything our clients needed. But still, a lot of time was being used to update core components, to implement common sense functionalities for the first time, to debug and enhance existing functionalities and push modifications on live sites.

Enter WordPress

WordPress seemed like an ideal solution to all the above problems:

• it is a wildly used, mature, thoroughly tested application
• there are literally tens of thousands of high quality free and commercial plugins that instantly add almost any functionality you might imagine
• it provides a very simple and powerful update mechanism that allows developers to push core and module (plugin) updates
• it has an excellent documentation
• it has a huge user base, most of them non-technical bloggers, that have generated an incredible amount of Q and A’s – believe me when I tell you: any questions you might have about WordPress, it has already been asked and answered!
• and of course, it’s free

The implementation

Reveloper.com was the perfect opportunity to try out WordPress as a CMS – being our internal project, we weren’t pressed by a tight deadline and we had enough flexibility regarding the implementation.

We decided to go with a custom theme and use as many free plugins as possible for extending the base. Where existing plugins were not available or were not good enough, we implemented our own.

We used the default theme as a example and built on that.

The custom theme

This was obviously the first step, and really, the major part of building the website. And let me tell you right now – it was a piece of cake!

The WordPress hierarchy of files is very well planned – the themes are kept outside of the core so that it’s impossible to harm the main platform. Also, this makes it easy to update the core, without losing your customizations. Same goes for creating your template files – at minimum, you can go with only one view file – or you can go ahead and go crazy and create layouts for chosen sections, categories, posts and you-name-what. Once you understand the logical (application) flow and the physical (files) structure, you’re good to go.

As a developer, you get an awesome arsenal of tools to identify all the usage cases (is it home page, category, post, search, archive, etc? ) and build, change and enhance your pages however you see fit.

At first it can be a bit intimidating – there are lots of functions to learn about. And at least for me, coming from a MVC world, the lack of models and the default non-object oriented paradigm was confusing. If you need a great introduction, I recommend you the awesome “Smashing WordPress – Beyond the Blog” (from Wiley).

For building Reveloper.com we’ve made extensive use of custom fields to quickly and easily define the special pieces of our content – and we picked up these pieces on the front using the built-in WordPress functions.

Also, we used the new “Menus” feature – but we didn’t get to try out the new custom posts as custom fields were just enough.

The plugins

The huge library of free plugins it’s one of the main “selling” points for WordPress. I was like a kid that got a box of chocolates and tries each of them out to see which is best.

This is a list of plugins that we used for building Reveloper.com

• WP-Devel – a very useful plugin for WordPress developers, especially when you’re taking the first steps into custom themes. It give you loads of info about what’s going on behind the scenes, like current template file, load times, database queries, functions, variables, etc, etc.
• Archives for a category – we needed this one to filter out certain categories from the archives list
• Breadcrumbs Plus – this plugin + unobtrusive JavaScript = our lovely hover breadcrumbs
• Sociable for WordPress 3.0 – articles social sharing made easy. I definitely prefer this one, compared to AddThis.

For your administration needs, make sure you get the followings:

• Akismet – great spam filtering for comments
• AntiVirus – scans your WordPress for vulnerabilities and back doors
• Broken Link Checker – great tool: it automatically scans your new posts and warns about invalid links
• Search & Replace – simple and effective interface for searching and replacing content from the database

Also, there is a whole array of SEO and Analytics plugins – we have a couple of them running on the site.

So, the verdict?

WordPress is an amazing platform for building CMS based websites – with great core functionalities and myriads of free plugins, a well thought structure and a super update system.

If you’re a veteran PHP developer you will become productive in no time – just a few hours. And though you might be disappointed with its procedural programming style, once you put your OOP ego aside, you’ll find that it’s a very efficient and productive tool, if used for the right type of project.

Do you have any comments or questions? Would you like to know more about our project? Do you like what we came out with? We’d love to here from you!

With a new cheerful and playful design, a new structure and a new content, Medicover is preparing to change the way we think about our health and the medical services. The upcoming website is targeting the dynamic, busy and informed customer, with easy to understand medical information, news, events and advices.

It was born out of 2 guiding principles:

• genuine love for coding – for building wonders our of bits and bytes; and
• responsibility and a profound respect for our clients.

We’re a small team of dedicated developers that put their hearts into what they do – focused on delivering high quality, wonderful websites and web applications to premium customers.

With over 20 years of cumulated development experience and more that 200 websites and web applications developed, we have picked and applied the best managerial and coding practices to make the development process simple, fast, effective and cost-efficient.

We believe in honesty, perseverance and the power of creative thinking carried out through rigor. We are here to reveal web solutions that push the Internet forward.

Internetics is the most prestigious Romanian festival for on-line branding, marketing and advertising. Internetics.ro is a complex online application that that allows:

• agencies to register in the competition and submit their works (online payments included)
• judges to view and evaluate the submitted works
• users to stay updated with everything that’s going on in the festival
• admins to control every piece of data on the site – from site copy, to agencies, to artworks and account creation

What have we done

The client was celebrating the 10th aniversary of the festival and needed a new design to illustrate this special occasion. So we had the opportunity and the pleasure to work with Rusu+Bortun Brand Growers at implementing the new layout.

A vast number of functionalities were added in the backend in order to support the new features introduced by the new design or fix existing issues reported by admins.

The project has demonstrated our ability to work under a very tight schedule, with a very rigid deadline, using an existing undocumented codebase.

So if you are planning on redesigning or extending your website, contact us – we can help!

Technologies

PHP, MySQL, CakePHP, jQuery, CSS font-embedding

The website – the main component of your online identity – is, above all, a sales and a marketing tool. You need it to be highly efficient, fast, secure and highly available – to assist you in connecting with your market and in converting visitors into loyal customers.

With a small and agile team with more than 20 years of cumulated web development experience, we have streamlined our workflow to rapidly deliver cost efficient, business critical web sites and applications. We are with you every step of the way, from understanding your business needs to revealing the optimal solutions and to successfully deploying your website.

Programming languages and technologies

We are strong believers and enthusiast supporters of free, OpenSource technologies. This way everybody benefits from unrestricted access to the best and the newest technologies and takes part in a large community of top developers.

But most importantly, we develop and deploy solutions for our clients using programming languages, servers and database systems that have proved their value for years and continually evolve and improve.

Our language of choice is PHP and most of the times – depending on the project’s specifics – we use a web application framework (we love CodeIgniter but we also like CakePHP) to shorten development time and reduce costs.

For data storage we prefer MySQL, but for light applications or embedded systems we go with SQLite.

When going mobile, we employ PhoneGap – an amazing open source development framework for building cross-platform, native, mobile applications.

Excellent performance with strong security

We have built some very complex web applications that literally process hundreds of Gigabits of data daily and serve tens of thousands users. In order to achieve this level of performance, we have worked on each component – from hardware, using web servers load balancing with MySQL replication and PHP caching – to software, creating our own data and web caching systems.

But complex applications can also be vulnerable to all sorts of threats – and a security issue can affect a website, causing damage, from a small downtime to losing priceless data. We’ve seen many such attacks so we don’t take security for granted – that’s why we are CCNA certified and Adrian has a Masters degree in IT security.

Request a quotation

If you need a new website or if you plan on updating your current one – or if you are concerned with your site’s performance, contact us and we will reveal the optimal solution for your scenario.

The user interface (UI) is the combination between web design and web page functionalities. The combination between shape and function. As far as your site’s visitors are concerned, the interface is the website.

What makes a good user interface (UI)?

The UI is your potential client’s gateway to the information about your products and services. A good user interface should guide the visitor to the information she seeks – and do it by providing a seamless experience that combines an esthetically fulfilling visual, a logical flow of information and clean and beautiful interactions by using unobtrusive animations, transitions and visual effects.

A good user interface will efficiently inform your visitors and will successfully convert them from potential customers into loyal clients.

Our approach

In our opinion, the content is the king – the visuals must not interfere with the copy, but instead enhance it. That’s why our user interfaces are:

• accessible and unobtrusive – we use a technique called progressive enhancement which effectively makes the content available on any browser, device or operating system. This way you can rest assured that everybody can learn about your products or services and benefit from the best possible user experience.
• standards compliant – we follow the W3C standards and this means that the websites we build will provide a consistent user experience now and in the following years, thus prolonging the life time of your investment and providing more value.

We build visually and functionally rich web pages using (X)HTML and CSS (including HTML 5 and CSS 3) and JavaScript. We use all the modern techniques, such as font-embedding, CSS animations, JavaScript effects and of course AJAX. Our JavaScript library of choice is jQuery.

Find out more

If you need a new website or if you already have one that was developed a few years ago, chances are it could use an interface update to take advantages of the modern techniques – to provide a better experience to your users and lead to better conversion rates for your business. Get in touch with us and we will reveal the best solution to increase your website’s effectiveness.