Placeholder text in CKEditor

This weekend I worked on a little bunch of code to support the HTML5 "placeholder" attribute in CKEditor.
The idea is simple: show a little text instead of empty content when the editor loads for the first time, and make it disappear automatically when the content gets focus.
There are two main problems to do this correctly: find out when the editor is focused or blurred and avoid the placeholder text when the content is read by other scripts.
In theory to get the focus status it should be enough to handle the 'focus' and 'blur' events of the editor instance, but one problem is that when a dialog opens the content fires a blur, but in in this situation we don't want to insert again the placeholder text, so the event listener checks if a dialog has been opened before inserting the text.
Passing that check we must verify if the content is "empty" so we get the raw data of the editor and test it again "empty" strings like "<br>" "<p>&nbsp;</p>" and the like that can be generated by different browsers.
As I didn't want to handle yet another plugin I've included it in the configuration Helper plugin and released as version 1.1. Also, the correct name for this plugin is already being used by a plugin that ships with the default CKEditor install but that it's totally unrelated to this feature that plugin resembles more the mail merge fields from MS Word, but at the time that plugin was created I don't think that HTML5 existed.

Demo:

You can set the focus in and out of the editor, type and delete, etc... when the editor isn't focused and it's empty it will show the text that I've specified for the textarea placeholder: "Type here..." While in Source mode it tries to leave that task to the browser if it already supports this feature.

Bug in the widget code of Twitter

Description

The profile widget from Twitter (https://twitter.com/about/resources/widgets/widget_profile) has a bug if you try to load and execute the code after the page has been loaded in IE.
In this case, the widget colors aren't shown as the stylesheets aren't appended to the head

To test it, click the button below and compare IE vs any other browser. The culprit is this code that doesn't take into account executing the code after the document has been loaded (http://twitter.com/javascripts/widgets/widget.js)

        // oh IE we love you.
        // this is needed because you can't modify document body when page is loading
        if (!browser.ie || isLoaded) {
          append();
        }
        else {
          window.attachEvent('onload', function() {
            isLoaded = true;
            append();
          });
        }

Fix: change isLoaded to (document.readyState == "complete")

      twttr.css = function(rules) {
        var styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        if (browser.ie) {
          styleElement.styleSheet.cssText = rules;
        }
        else {
          var frag = document.createDocumentFragment();
          frag.appendChild(document.createTextNode(rules));
          styleElement.appendChild(frag);
        }
        function append() {
          document.getElementsByTagName('head')[0].appendChild(styleElement);
        }

        // oh IE we love you.
        // this is needed because you can't modify document body when page is loading
        if (!browser.ie || document.contentReady == 'complete') {
          append();
        }
        else {
          window.attachEvent('onload', append);
        }
      };

(and the anonymous function might not be no longer needed)

Configuration helper for CKEditor

This plugin is just a little helper for those that aren't too used to javascript or that they just prefer to use some existing code instead of adjusting the samples to their situation.
The plugin provides two features related to the dialogs: The first one is the removal of individual fields, and the second one is setting default values different from the original ones.
There's nothing special in this plugin, You can do the very same thing following these two articles at the CKEditor documentation center:  customizing dialogs and setting default values, but with this plugin is slightly easier as you don't have to change any code , you only have to adjust the config values.
For detailed instructions read the doc included in the plugin, but the basic steps are:
Include the plugin

config.extraPlugins='confighelper';

Define the fields to remove

config.removeDialogFields='image:info:txtBorder';

And/Or define the default values for fields:

config.dialogFieldsDefaultValues =
{
    image:
        {
            advanced:
                {
                    txtGenClass : 'myClass',
                    txtGenTitle : 'Image title'
                }
        }
};

Version 1.1 includes support for the Placeholder attribute.
Version 1.2 allows to hide dialog fields.
Version 1.3 is compatible with CKEditor 4.
Version 1.4 enables the Placeholder while using inline editing.
Version 1.5 fixes compatibility with CKEditor 3.6.
Version 1.6 checks the calls to setData in the editor to update the "placeholder" status
Version 1.7 fixes initial placeholder text with latest CKEditor.
You can download the plugin here: Configuration Helper

Smaller selection plugin for CKEditor

This post introduces a little plugin for CKEditor, it's basically a patch to fix a little problem with selections, but proving that it works correctly in all the situations might not be easy and anyway landing a patch takes a long time and in this case it can be applied easily as a plugin.
The problem: When the user double clicks on a word the space at the end of the word is also selected, and usually that's not what we want. For many situations it doesn't matter if the space is inside or outside the selection, but currently I'm creating a plugin for a client and due to the CSS the space is collapsed due to the css if it's inside the generated tag, so we want it out.
The plugin listens for the double click on the content and then tries to check first the boundaries of the selection that the browser has created, so it tries to select only a text node and after that if the end of the selection is a space just moves it one place back.
You can download it here: Smaller Selection 0.1
Tested with IE8, IE9, Firefox 10, Firefox 11, Chrome, Opera and it seems to work fine in my tests. If anyone finds problems, please report your browser and the html where it fails.

Vendor Css prefixes

This post tries to explain my points of view as a web developer about the Vendor prefixes issue:

Introduction

Css prefixes for experimental features are fine. They are a clear signal that something is being tested but it's not a standard, they allow browser vendors to create new features and test them without having to wait for the approval from everyone else, they allow to check how they can be used and whether they create unexpected problems or not.

So yes to keep vendor prefixes alive.

But...

The problem is when those prefixes spread all around the web and people start using them all over the place. Then the browser vendor will argue that they can't change them as people are already relying on them, other vendors have to provide their own implementation (with their prefixes) to avoid being left behind but even if they provide those same features they see that people are testing only on the native browsers of iPhones and Androids, both based on Webkit.

And this is the current situation: non-webkit browsers areclaiming that the use and abuse of -webkit is so strong that they are being forced to support in their own engines some -webkit features.

My opinion about how to deal with it

First rule should be that no browser manufacturer is allowed to ship experimental features in release versions of their browsers. Those experimental features should be restricted only to the alphas and betas, when a final version is released, it should allow only the unprefixed version if that feature has gained traction and it has been "approved" or don't ship it at all.

With "approved" I don't mean that it requires a final status, just a state where other vendors agree that it can be useful, it will be (or it's already) implemented that way by them and of course there's a spec stating how does it work.

Of course this is a big problem, you'll see them screaming and kicking around before accepting this. They prefer to keep on doing their little tricks and pushing whatever it's in their heads and releasing it to the wild to give them an advantage over the competition. But the fact is that even if this is the standarized way to create propietary features, we're back to the Netscape 3 era where each browser introduced new features without caring about the other one and then that other browser had to copy and replicate the successful features of the first one.

We know that it was bad for the developers, why is that good now?

Second step:

When a browser replicates the propietary feature of another one, it should support ASAP the feature both with their own prefix as well as the unprefixed one. If the feature is not good enough or not clearly defined to support the unprefixed version then it's obvious that it doesn't make sense to support the prefix from the other browser.

That would allow web developers to start testing the prefixed version from the first vendor and if it's clear that it's good enough they can put only the unprefixed version and all the browsers will be handled at once.

Third course of action:

Evangelism on sites that teach new CSS3 features, they shouldn't generate anything with a vendor prefix, just use the standard so it can work in all the browsers.

I don't think that most of the web developers are going to write huge amounts of css by themselves, instead they will look at some generator for backgrounds, buttons, patterns and copy whatever it's there. They might not know what's a vendor prefix, they just see that they can copy that code and it works. Given that some vendors (I'm looking at you Microsoft) make it really difficult to test the new versions of their browsers, you can't expect the developers to remember to add the -ms all around because they won't notice if it works or not; they just know that they have to keep on supporting IE8 for a number of years and that it doesn't support fancy things so they won't care too much about what's next for the few ones willing to buy a new computer.

I know that almost no one will care about my opinion, but at least I hope that someone else in the whole world agrees with me that these would be good steps.

 

 

Asus Eee Pad Transformer

These days I'm testing an Asus Transformer (the first version, not the new "Prime") in order to check the viability to use it as a kiosk display.

Currently it's much simpler and cheaper to provide the clients or visitors a touch screen so they can query information or perform some basic tasks thanks to all these new tablets, but the fact is that it could be even cheaper and more powerful. I'll write a separate post about that with all the things that I have in my mind.

I'm gonna try to focus this little review on the things that I've found so far, at least as a serie of notes to myself so I can remember these details some months from now.

The client wanted basically a touch screen that could be used to access a single site by the customers so things like GPS, bluetooth or the cameras didn't really matter, but it's usualy better to get a brand name instead of an unknown mix  of components that you can't be sure if they will survive 6 months and the quality of those components. And of course, having such a table available means that they could take it home at night and use it for other means if they want to :-)

I've also thought about buying one such tablet for myself, and I was unsure about how I might use it instead of my Nexus One (N1), so this is a good way to test it.

First impressions

I was expecting/hoping for something lighter. I don't mean in any way that it's heavy; not at all, but for myself I was hoping to get a very light tablet and this one doesn't fit that expectation. I wanted something as light as my phone but with a bigger screen, hey, we're free to have high hopes for the future :-) maybe a 7" tablet might be better for my expectations in this regard.

It has a relatively wide bevel around the screen, in a way it can prevent that grabbing the borders will activate the touch sensors like happens in the N1, but I think that other smart touch controlers don't have the same problems as the one in the N1 and even then I bet that you can cut that border in half and still keep always the fingers out of the screen.

It uses a propietary connector instead of mini or micro USB, I don't like that; we all know that in such situations the outcome is that if for whatever reason the cable gets damaged or lost I have to buy it from them instead of being able to use any other one that I have available at home. Other simple reason is that the cable itself it isn't very large so if I connect it to the computer I can't move too much the tablet because it's almost at the full length of the cable.

It seems that trying to charge it by connecting it to a computer it's too slow according to other reviews. I've just connected it to check that but I can't be sure if it's charging or not, I don't see any indication like it happens in the N1 where an orange LED signals that it's charging and when it turns green then it's over 80%. But here there's no feedback about the charging, the only way to know that it has been charging is to wait a while and then look at the battery stats to verify that they have gone up.

I can understand that a power outlet is a better energy source than the USB connector of a computer, but if I buy a tablet I would expect to be able to connect it with a standard USB cable to a computer and then get it to charge at a reasonable speed instead of being forced to carry that special connector and wall plug.

Currently I can't use the tablet because it's charging from the wall and as I said the cable isn't very long so I would have to stay in an awkward position in order to use it while charging. BTW: when charging from the power outlet the Lock screen stated that it was charging, but after the screen goes off there's no LED, the only way to know if it has finished charging is to wake it up and look at the text in the lock screen.

Shortly after booting it up and connecting it to the wifi it downloaded two firmare updates automatically and the next day I performed a check while looking at the settings and another one was ready to install. I think that according to other comments Asus seems to be providing constant updates and that's a very good thing for me as a consumer, I don't want to buy anything from a company that sells a product and the only update that they offer is to spend the money with their new device. If I buy something I expect it to work and being supported for a very long time, I don't like that programmed obsolescence situation created by the big corporations to keep us buying new things.

Back to updates, the Market app notified that there were 4 updates available, although they show the Install button insted of update. I've managed to install/update one of those apps, the other three just open the existing app instead of installing a new version. One of those apps is Google Maps, it has the version 5.10.1 and the latest found with the N1 is 6.0.3. No matter how many times I click on the install button, it always open the current one instead of trying to upgrade it.

Talking about maps, it's quite broken in this version: while using only the maps view it seems to work fine, but after adding the satellite layer it hangs up in a very short time, the map gets frozen and although the buttons seem to accept clicks, there's no dialog, dropdown or anything. The only solution at that moment is to go to the Applications settings and kill the Google Maps process. But the funny thing is that once I launched the maps while in Airplane mode and then I was able to use the satellite view with the cached photos perfectly, zooming in and out, moving, rotating, ... really nice but it's not practical to go into airplane mode in order to use the app :-D

The YouTube application doesn't show the subtitles, although it's able to dim the controls (and clock) in the notification bar so they are a single gray dot . So far I've found that only the Gallery is able to perform this same trick, so using other video players not optimized for HoneyComb might be a little annoying with thosee controls always visible while trying to watch a movie.

The Browser uses the following User Agent:

Mozilla/5.0 (Linux; U; Android 3.2.1; es-es; Transformer TF101 Build/HTK75) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13

It looks more like a Chrome thanks to the full url bar with tabs, and the first thing that it prompted upon launch was to install the Flash Player from the market (I didn't because I don't need it for this project), besides tabs, the browser also supports incognito mode.

contentEditable and CKEditor

I performed a quick test and looked OK, so I used my local copy of CKEditor these are my tests (the tablet is running Android 3.2.1 HoneyComb, the browser doesn't seem to be a version modified by Asus but I can't be sure about that), you can use the official CKEditor demo as well:

The keyboard pops up automatically and the blinking caret is visible. It's easy to write (using always the virtual keyboard, I'm using the default Asus keyboard for these tests), but it's hard to move the caret exactly, there are no cursor keys and you have to rely on touching with your finger in the right point.  When I tested in the simple contentEditable test, each time I pressed Enter the keyboard went away, but in CKEditor this doesn't happen, I guess that this is an unexpected benefit of the enter key handler in CKEditor. Another difference is that in the basic test the browser follows the link but in the full CKEditor nothing happens, so I wonder what can be going on here.

It's possible to perform a long press and select the text in the content as well as copy it, but the text can't be pasted back in the document directly. If I press the "Paste as Text" then I can use the dialog to paste in that textarea and insert it back in the document (but of course as plain text). So: No pasting in contentEditable.

Those selection handles don't seem to really work at the DOM level, if I try to select some text and then apply any formatting then nothing changes: the handles go away and the text remain in its previous formatting. It's not possible to format existing content. The problem seems to be that those handles are overlayed on the document, but they don't modify the DOM selection: It's possible to select all the contents with the "Select All" command and the selected text gets a green background, then performing a long touch shows the selection handles that allow to perform a new selection over the existing content that it's already selected. Then clicking the Bold button the first time makes the handles disappear and the second one made all the contents bold as the previous "Select all" was still in effect.

Clicking a format button like bold and then typing works correctly, the text uses the format so it can be used to format new content; but of course you have to be careful to click/touch the right button, the current toolbar isn't designed for a touch screen.

Dialogs can't be dragged around (like iOS), of course the dialogs can't be resized and the tableresize plugin doesn't work. When all those elements are fixed to handle touch events for iOS they should also work in Android. Another point in common is the lack of context menus, this is all part of adjusting the UI of CKEditor to make it touch friendly. Trying to use the divreplace sample also fails, the sample might need to use the proper listener instead of the current doubleclick as that just zooms in-out

The maximize button makes the toolbar disappear making this a very dangerous button.

Some differences with the iOS tickets: I didn't notice any problem typing after enabling SCAYT, the editor doesn't grow, it remains at the initial size,  overflow auto seems to work, it's possible to scroll the contents of the editor as well as the toolbar combos

The toolbar combos can be closed , but they don't work perfectly; selecting an option from font size or family works, but it also performs a click on the point where you touch the screen to select the option, so usually the caret moves and you don't get the expected result. The Styles combo is much more buggier, although the contents scroll but dragging them, it seems that somehow the clicks always go to the first items, I always ended with "var" and "kbd" instead of any other style further down.

When a dialog is opened, it puts the caret in the first field, but the keyboard disappears and you have to touch that input to show again the keyboard.

When typing at the end of the editor and pressing enter the caret jumps to the next line, but the content doesn't scroll up automatically so you can't see what you're typing, and when I tried to write something long, it scrolled the first line, but it didn't scroll again after that. When I tested the Google Voice keyboard to talk instead of typing it only inserted the first letter of my sentences.

Using the editor with the default sample pages isn't nice because the editor is placed almost at the bottom of the screen, when you touch the content the keyboard pops up over the current content so you have to scroll now that up (previously it wasn't possible) to see the caret. and whenever the keyboard goes away the document is scrolled back to its original position and a loop begins of keyboard on, scroll manually, keyboard off, auto scroll. And when a dialog opens up you might not be able to use it correctly in landscape mode because the dialog is centered on the screen, it's not possible to scroll it and the keyboard is covering most of the dialog

CKFinder doesn't recognize the browser as a mobile device so it doesn't show automatically the little adjustments introduced in 2.1 and that means that it's not possible to insert images or links to files.

Google+ vs Blogger

Ok, according to the latest announcement it seems that the aim will be to keep Blogger and use Google+ to share existing content outside and comment on it.

Just a little post to test it :-)