What is Quink?

logo-blue-high-rezQuink is an extensible, end-user friendly in-page WYSIWYG HTML editor, designed for mobile first.

It allows developers to add rich input and self-edited areas into web pages and web apps.

You can find it on www.quink.mobi and github.

Why did it get built?

The trigger was that I could not find a good solution for editing rich content on mobile, specifically on the iPad platform – at least not one that hit all the key points I was aiming for. We (IMD Business School) have had an iPad app in production for supporting our course participants since June 2010, and I wanted to move beyond plain text annotations on PDFs, notes and plain text discussion forums with file attachments. I wanted participants in our courses to be able to create richer content for themselves, for sharing with fellow participants, and for feedback to and from the professors.

Once started down that road, there are a host of decisions to make, top of the list being:

  • data / file format
  • editing capabilities
  • separate app or in-app component
  • openness to variety of use cases, or focus on a tight scope

There is more detail on these points below, but after initial consideration, I was looking for

  • an HTML editor that works within the browser
  • with a good UI/UX for basic rich text editing,
  • that could be embedded in our app, and
  • which had a good API and plug-in architecture to allow great flexibility.

So I started looking for solutions. While there are many things that fulfill some of the requirements, I simply could not find one that would work well on the iPad, the primary target. In the end it seemed to come down to a choice between doing significant work on somebody else’s architecture, all of which were designed for the desktop browser, or starting from scratch and focusing primarily on the mobile environment and our own needs. Even that decision is not a no-brainer. But the end result was that we followed the path that led to Quink.

Architecture

I won’t go into all the alternatives considered here, but for me the decisions were reasonably clear:

Data format: HTML

For me, HTML is the only rational solution for the base format. It is the most versatile and widely used document format, has a really excellent track record of backward compatibility, and is free of proprietary control. If it seems a little strange, I guess that is just because people don’t think of it as a document format in the same category as pdf, word docs, and so on. The only thing it is really tricky to do is precise and locked-down control of presentation and layout. But in the multi-device world, I see that less as a critical feature than as a lurking problem. I would argue that the natural tendency of HTML to flow is more valuable, though more difficult to work with.

Separate app or in-app component.

The easy option would be to break out into specialist apps / editors. That makes extensibility simple, but it provides a really horrible user experience for many use cases and is simply unusable for some core requirements. Using 3rd party apps also creates all kinds of problems about cross-platform requirements, compatibility, and data management. For  something as core as document creation and viewing, we needed something we could build into our app and our web portals, and be sure it would just work.

Editing Capabilities

The minimum requirement was easy creation of ‘rich text’: some basic formatting for headings, lists, emphasis. The ability to include images. That’s really the core requirement, and covers 80% of immediate uses. But there is always the remaining 20%…

Tight focus or broad applicability

Beyond the basic capabilities, I knew from the start that there are a million things that will be required at some point: tables, graphs, vector graphics, video, audio, and just about anything you can imagine. When each of these will become important or critical is unknown – so the key requirement is to have something that is extensible in response to new demands and use cases. HTML and the web stack provide a good framework for allowing this, and for using components developed by others – both proprietary or open source. So our goal was to create an architecture where we could employ specialist content editors developed by others, out of the box. I always strive to create architectures that put as few limits as possible on the future without incurring unreasonable current costs – and I think we have achieved that.

Design – What is special?

Content divs and tagging

Probably the most significant thing about Quink is the approach to extensibility and plugins. The idea is that a page is made up of units, for each of which you may need a specialist editor. Quink exploits the HTML structure where a page is made up of a set of divs and elements. Divs provide clean boundaries for content. Some divs may be tagged to identify the editor functionality that is appropriate for editing them. If the user wishes to edit such tagged content, then the specialist editor is loaded, passed the content that it needs to edit, and the Quink core steps back to let it do its job. When it is finished, the modified content is updated in the HTML.

The base implementation of this was designed to allow the use of editors that have no knowledge of Quink. There are very, very few requirements that an editor must satisfy to allow it to be used as a plugin, and the system uses adapters so that the requirements on the underlying component are functional capabilities, not any specific API. To be eligible as a plugin, some editor need only:

  • Be loadable in a web page
  • To have some method of delivering the edited content to the Quink core so that it can be dropped into a page – ie renderable HTML.
  • In order to be re-editable, it also needs a means of having the HTML sent to it.

Being loadable includes being hosted on different servers. Quink defaults to opening plugins in iFrames, and only loading them when asked for by the user. They don’t have to be part of the root site, so you dont actually need access to source, or to own the editor component. Of course, when setting up a plugin you should trust the provider and code enough to give them access to an iframe in your page!

The mechanisms for transferring the data can include all kinds of back-end tricks if needed, though we haven’t gone down that road ourselves yet. Quink supplies the user with a button to save and exit, or simply quit the plugin – which calls a function on to the plugin’s adapter, so the plugin editor itself does not need to know it is operating inside Quink or to emit any events.

If an editor is not capable of re-editing existing content it will not break anything either, though of course it may not meet user expectations.

Adding Quink to a page & configuration

Quink bootstraps from a small script which exists mainly to set up the urls to load from and kick Require.js into action. The default bootstrap script will do the job for most installations; the target page then only needs to have a one-line inclusion of the bootstrap script, and to declare one or more divs to be contenteditable; Quink is enabled as the editor for all of them by default.

Various aspects of Quink are easily configurable. A configuration can be set up by adjusting JSON files: the plugins, toolbars, and the keymap for keyboard-driven edit functions. One of the items on the roadmap is to allow these configuration structures to be cleanly manipulated after loading.

There are also a number of things which we have found it useful to allow Quink to pull from the page query parameters: the autosave frequency and destination, the destination for an explicit POST of the content as an alternate save mechanism, whether the toolbar should pop up on page load. This approach allows referring links to change aspects of the configuration which turn out to change more frequently than it is practical to change code, and seems to be a useful pattern. In future I think this will be extended and also made more generic – and capable of being disabled.

Keyboard mapping

One of the other things which is a little unusual in WYSIWYG HTML editors, that we have included in Quink is keyboard commands. This was also driven by frustration as fairly heavy iOS users with the touch-based cursor positioning and selection. In my view this is one area where the Android UI is just miles better; but even then, trying to position the cursor and select text to replace, delete or format is slow and relatively tricky, because fine positioning is just inherently more difficult with a touch interface than with a mouse – and I am speaking as someone who has quite steady hands. From my past in mobile surveying and mapping, I know that quite a high percentage of the population have really quite shaky hands and find fine positioning on touch screens REALLY hard.

So we added an approach to allowing keyboard commands: the minimal target was simply keyboard-based navigation and selection, but the architecture delivered the ability to map a key sequence to any of the toolbar or internal commands. Because of the limitations of on-screen keyboards, we had to deliver this without control keys, and the best solution seemed to be to use a standard QWERTY key in some way. Following that line led pretty inevitably to requiring a command mode and an insert mode like Vi. This is really deeply ironic since I grew up as an emacs fan, and avoided Vi as much as I could, and now found myself forced to implement and learn vi-like sequences to achieve what I wanted.

Where we have ended up is with two ‘q’ keys in quick succession to enter command mode, and a single ‘q’ to return to normal, or ‘insert’ mode. The default map is not the same as vi, because of course many commands are more about formatting than rapid editing of plain text, but diehards can adjust to suit their tastes! To handle the limited set of keys, it is possible to set up command groups with ‘prefix’ keys, so for example we use ‘f’ for font formatting, so ‘fb’ means ‘format:toggle-bold’ and ‘fbi’  means ‘format:(toggle-bold, toggle-italic)’.

What next?

I have a long list of to-do’s.

Some should be relatively simple, such as adding a few more plug-ins; I particularly fancy the image editor Muro, not only because it seems really good, but because it is a hosted component that has the required functions, so it is also an interesting test case for the plugin architecture. After that, the next class of plugin to work on is grid/table support.

Good support of Android devices is certainly high on the list.

After that, there is some significant work to be done on div and css style management. Right now, Quink just exposes the browser behaviour for these areas, which is limited and often rather flaky. In principle this is all do-able, but doing it well with a clean architecture is an interesting challenge.

We have some other cool ideas, but they are in a phase of stealth mode experimentation just now.

Open Source

We have released Quink under the Gnu Lesser GPL. The aim is to find a good balance between maximising the usefulness and user base around Quink (by being relatively liberal), and to get help and input from the community on improvements. Our current understanding of the lesser GPL with regard to Quink is that it allows people to use Quink in their apps and sites, or write add-ons and plugins without being obliged to open source everything – thereby maximising its usefulness. However, if there are bug fixes or compatibility fixes that people find and make to the core, it is the least they can do to publish them. It would be great if people become proactive and contribute/publish plugins, plugin adapters or other significant enhancements, but that is entirely voluntary.

IainCookeTIain is CTO at IMD business school in Lausanne. He led IMD’s pioneering use of iPads in education as part of a longer term re-engineering of IMD’s operational and learning support systems.

Prior to joining IMD in 2008, Iain has worked in a variety of industries, but always at the forefront of technology development and disruptive change. In the early 90s, Iain co-founded a software start-up focused on mobile pen computing and geospatial solutions. The solution that he created enabled Ordnance Survey to be the world’s first mapping agency to use a 100% digital map collection and production system, and helped revolutionise the industry of creating and consuming geographic information.

 

 

 

Think, Code, and Experiment

Last week the 5th Open World Forum took place in the very heart of Paris, and this year af83 was again strongly involved in this major European and French Open Source event.

We are totally dedicated to the subjects tackled and the values at the very heart of the Forum: “the Open Digital Strategies”. This is the reason of our unfailing involvement in organizing and running it. The Forum’s format has undergone a number of changes last year while I was Chairman. I really wanted to make the event evolve, to be more comprehensive, pragmatic and accessible, while keeping its forum and think-tank dimension: a place where ideas are born, an event after which communities change and projects are formed. Hence, two dimensions were added to the conference:

  • Code, to gather the best developers
  • Experiment, to share with the general public who is often interested but kept apart

This is the best way to reconnect executives, companies, developers and their users.

So for the second year, three tracks coexisted (Think, Code and Experiment) to put Open Source in everybody’s hands – decision makers, developers and general public – through various talks and demonstrations held by more than 250 speakers and exhibitors.

It was as always a unique opportunity to meet the key players of the domain and take part in in-depth reflections on Open digital strategy, but also test the latest Open Source technologies, attend high-level talks and see artists’ performances, new Open interfaces for the home and Open Source robot operating systems.

The Think track was richer than ever, tackling a range of topics as wide as Open Data, Cloud, Embedded Systems, NoSQL databases, security and legal issues related to free solutions, the importance of education and training, communities, prospective and strategy, Open Source business models, R&D and industrialization, mobility, Open standards, Internet of Open stuff…

These were covered in keynotes, debates between a panel of experts, feedback from CIOs, case studies, innovation awards and less informal exchanges between participants: two intense days! There were great speakers, for example, Ralf Flax, Suse VP of Engineering, who has the soul of a true Open Source developer.

For those still in doubt, this year’s conference confirmed several points: Open Source is not only for the lower layers of the information system anymore, and can be highly efficient for answering various issues, from small to global companies as well as public services and organizations. It is strategic – but it also needs a considered strategy. With the increasing importance of software in our lives, Free and Open Software are more than ever relevant, allowing each player to have control of key components. It also proved that the ecosystem is ever-growing, lively, full of innovation and energy and has real economic weight.

Along with the CxOs, the Forum once more gave room to developers with the 2 day Code track in collaboration with a lot of vibrant communities. It hosted for example the FUDcon FEDORA, OSDC.fr, Android and GoogleTV presentations and workshops and many more on Cloud, NoSQL, and HTML5.

OSDC.fr aims to gather French-speaking developers from all communities involved with programming innovative technology and free languages (e.g. Perl, Python, Ruby, PHP, SmallTalk, Scala, Clojure, Erlang and Haskell). We had the opportunity to attend high level talks by, among others,

  • Harald Welte (German hacker involved in a lot of free projects such as NetFilter, OpenMoko, GPL Violations), who spoke about Osmocom and Erlang;
  • Dodji Seketeli (RedHat Senior Software Engineer) on the upcoming GCC4.8;
  • Christian Couder (Senior Release Engineer) on git bisect, a invaluable tool to detect regressions;
  • Michael Scherer on the benefits of devs and packagers’ collaboration;
  • A presentation of the robot NAO and how to program it by Aldebaran engineers

… in short, a geek’s dream come true! Some of the OSDC sessions were recorded and will soon be available online, so check here  to catch up!

Finally, Saturday was the occasion to welcome the general public, to exchange and experiment around free art, internet privacy and neutrality, and contribute to projects such as Open Street Maps. Children weren’t forgotten – with this year’s KidExperiment (the mini conference for kids, hosted/carried out by MiniShare, HacKIDemia and the “Petits débrouillards”) which included  workshops and hands-on manipulations to dive into programming and code…

Co-founder, AF83 and Bearstech, Chairman of Cap Digital Collibri Community, Board of Silicon Sentier , President of the OWF 2011 ( France)
Louis is the co-founder of two companies, AF83 and Bearstech. AF83 is a Digital Agency, providing cutting-edge development, marketing and UX design services, based in Paris and San Francisco. Bearstech is an Open Source pure player, which provides IS management services, as well as responsible web and product development services. Louis is also heavily involved in Silicon Sentier and one of the founders of La Cantine, and is the chairman of Collibri, the free software & “open innovation” workgroup of Cap Digital, representing 150+ French companies and labs working with new technologies and free software.

With the great help of Marie Ailloud.

Comments from Josette – Watch this space for details of Open World Forum 2013 – I will be there, will you?

Not the State of the Python Union

Back to Florence for EuroPython 2012 – Don’t be jealous – you would hate the heat! We are talking serious heat here between 35 and 40 degrees.

Monday morning started with a talk by Guido van Rossum “Not the State of the Python Union”. In this talk Guido answered some questions –

  • Worried about the future of Python 3
  • Wondering when lambda will be fixed
  • Angry about the GIL

And much more.

This talk was followed by Alex Martelli’s “Permission or Forgiveness”. Inspired by the Mother of Cobol, Rear Admiral Grace Murray Hopper ‘s motto “It’s easier to ask forgiveness than permission”.  I cannot argue with Alex’s recommendation of applying or not applying this motto in the Python environment but I would not recommend its application at home.

Other talks included all the buzzwords:

  • PyPy
  • White PyGame (Python’s most popular 2D game library)
  • OpenStack – the large and relatively new platform for building IaaS public and private cloud
  • Django – Python Web Framework
  • Tornado – the non-blocking lightweight web server and framework
  • Juju – new open source configuration management and tool for deploying services into a cloud and data centre environment
  • Flask
  • RestFS – next generation cloud storage
  • PyPedia
  • Camelot

There are of course some more generic talks like –

  • Spotify, Pipelining your Music by J Pulliainen
  • Becoming a better programmer by H Massa
  • Health for Geeks: Feel better, save money, live longer by being lazy by N Larosa
  • Music Theory;  genetic algorithms and Python by N. Tollervey
  • Increasing women engagement in the Python environment by L Root

As expected you can now find talks on databases and Python, Arduino and Python, Android and Python etc.

 

 

 

 

 

The week was not just about talks but there was Coding Competitions – Python Challenge and Google EuroPython Code Jam. One should not forget the social side of the event with PyBeer, PyFiorentina, Tag Cocktails etc.

EuroPython (Florence) is one of the best organized conferences I know. Organized by Python Italia, Associazione di promozione sociale with a lot of support from Develer Srl.

Hope to see you there next year!

 

The Birth of the Dutch Android User Group

Johan Pelgrim is a Mobile Software Engineer, specialized in Android. Everybody who is working in the Mobile industry knows that the mobile world is a very dynamic and high demanding one. Besides his day-job Johan is a father of three kids with ages 1, 2 and 4 years, and yet in the fall of 2011 Johan thought it was a good idea to start the Dutch Android User Group. An interesting question is why he started the user group and this was his answer.

The timing was right.

There already were a couple of initiatives to start a Dutch Android user group in the past, but none made it through. When asking around some group leaders said there group is still active, but appeared to be pretty dormant in my opinion. There is a very active Mobile community in Amsterdam, but not one with a nationwide spread nor a sole Android focus. Last year The Netherlands had its first serious Android conference under the droidcon label and that triggered me to start the user group.

 

I sensed a lot of passion around me.

The Dutch organizers: Arno den Hond, Dennis Geurts, Johan Pelgrim and Wiebe Elsinga

I didn’t want to do this all by myself. From the start I knew that people wouldn’t buy into my initiative if it was just me. Besides that, where would I find the time and sponsors to organize all this. I needed to gather a couple of enthousiastic people around me who shared my vision that starting this user group was a good idea and to give the leadership team a lot more body from the get go. I specifically searched people working at different companies and sollicited sponsorship from these companies as well, in terms of small payments and hosting of meetups. Within a couple of days Wiebe Elsinga and Arno den Hond joined me, followed by Dennis Geurts a few weeks later.

 

The launch at droidconNL november 2011

I was involved in the organisation of droidconNL in November 2011. All in all around 400 Android professionals visited the two-day conference and I had an opportunity to launch our initiative in a 10 minute pitch, just before the keynote by Nick Butcher, Android developer advocate at Google. I felt very lucky and Bill Mote, a good Android friend of mine, living in Cincinnatti and organizer of the “Cincinnatti Android Developers Group“, quoted Seneca, a Roman philosopher from the 1st century, saying: “Luck is what happens when preparation meets opportunity.” And he was right (both Bill and Seneca ;-). Of course I was lucky to be standing there, but it was an opportunity which I helped create. Richard Hyndmann, another Google Android developer advocate, posted a picture on his Google+ stream stating “The birth of something awesome

Richard Hyndmann highlighting the awesomeness of our initiative

In the closing keynote Richard Hyndmann had a slide with a picture of me at my pitch and with an animation added a lot of android mascottes in the frame, stating I was not alone anymore. That helped sink in the idea that we had started something big and the group is growing steadily ever since. We had around 50 members the first month. That doubled in the second month and with that same pace, after just four months we recently welcomed our 200th member. When we started the user group we had no idea how big this was going to be, but seeing the steady growth I think we are heading for a great first year!

 

The first meetup

Our first meetup had the theme: “From idea to App” and we invited a User Interface (UI) / User eXperience (UX) desinger, an experienced Android Developer and someone with experience how to improve your app and make it visible in the Android Market.

The audience at our first meetup

All in all we had around 65 people on our first meetup and we had a blast. Of course we had to get to know each other, since it was our first meetup, but during the walk-in, coffee- and dinner breaks and the barcamp – there was a buzz. Everbody was talking to each other and no one was left out. Everybody had a story to tell and was finding an eager audience to listen to their story and lard it with their own experiences and anekdotes. There was a lot of energy during the first meetup and maybe that was the biggest win for the first meetup and the user group, getting to know each other and share thoughts and ideas.

 

Nothing to loose, much to gain.

People tallking to each other during dinner

Yes, starting a user group and organizing meetups will cost you a bit of time, but in my opinion it doesn’t outweigh the enourmous positive energy and feedback you get in return. One of the members sent me an e-mail with the text: “Your enthousiams is working very contagious“. That was maybe the biggest compliment I could get and that is what is making me tick, help creating an environment where the Dutch Android professional can inspire and be inspired by others. Nothing more, nothing less.

 

The future

Our future is looking pretty bright. I could have said pretty busy, but has a negative ring to it, in my opinion. Our first goal was to host bi-monthly meetups but we are now in the process of one per month. It’s hard to hold back all the enthousiasm of our members to host meetups or join external events. There is a lot happening in the mobile industry in the Netherlands and we are in the very middle of it!

Meet the leading industry experts and pioneers of an ever changing world

It seems that I am just writing about events at the moment – but you have to admit they are good events that should help you professionally.

Those lovely people over at S&S Media have announced their latest London event – Mobile 360 Live, running April 2nd & 3rd.  These are the guys behind JAX London, and the Mobile TechCon series in Germany, so we can say with honesty that they know a thing or too about cool developer focused events.

Mark Hazell at S&S tells me that he wanted to create something that allowed developers of all types of mobile content to come together in one place, to counter the fact that so many mobile dev events in the UK until now have had a siloed, single platform focus.

Paul Ardeleanu

Marko Gargenta

Mobile 360 Live has 5 tracks covering iOS, Android, Mobile Web, Platforms and Mobile Business.  It also has a hands-on development workshop day, with people like Paul Ardeleanu and Marko Gargenta encouraging attendees to get their hands dirty coding apps.

Should you be an app developer on  the iPhone, Android, Windows Phone 7, or mobile web, you will definitely gain something from the rich talks organized with you in mind.  The business side has not been forgotten with topics on Mobile Commerce & Payment, Tablet Solutions, Marketing & Trends, Mobile Business Solutions.

S&S is offering tickets for only £150 if you’re fast.

Check out www.mobile360live.com for more.