Modifying the generated element in SimpleUploads.

I think that I've already written about this type of requests, but as I've not been able to quickly find it, it deserved a simple post.

Request: after uploading an image with SimpleUploads, wrap it in a link element for use with any type of effect like ColorBox. eg:

<a href="filepath" class="colorbox" target="_blank"><img src="filepath"/></a>

This is achieved using the 'simpleuploads.finishedUpload' event, add in your page this code (adjust it according to your needs:

CKEDITOR.on('instanceReady', function(e) {

	// the real listener
	e.editor.on( 'simpleuploads.finishedUpload' , function(ev) {
		var editor = ev.editor;
		// CKEditor.dom.element
		var element = ev.data.element;
		//console.log(element)

		var a = document.createElement('a');
		a.href = element.getAttribute('src');
		a.className = 'colorbox';
		a.target = '_blank';

		// create a CKEditor.dom.element
		var ckLink = new CKEDITOR.dom.element(a);
		// replace the image with the link
		ckLink.replace(element);
		// insert the link into the image
		element.appendTo(ckLink);
	});
});

Adding a CKEditor plugin to DotNetNuke 8.0.4

This is a little visual walkthrough to explain how to add a custom plugin to a DNN website. It might not be the optimal way, but it's simple and it works.

First, you have to extract the plugin to the ".\Providers\HtmlEditorProviders\DNNConnect.CKE\js\ckeditor\4.5.3\plugins\" folder, just like it's usually explained for any plugin.

Now we must instruct DNN to load it. The js settings come from DNN itself, so go to Site Settings

Now open Site Behavior, More, Open HTML Editor Manager

 

 Now open the Editor settings tab

 

Scroll down to the ExtraPlugins field,

 add the new plugin and save the changes

Now the plugin itself is enabled, although the toolbar doesn't show any new button because it uses the customized toolbars from DNN. I haven't been able to find out if there's a way to do this next step better, but what I've found that works is to edit ".\Portals\0\Dnn.CKToolbarButtons.xml" and then add your button(s) following the pattern

In the ToolbarName put the name of the command that you want to use (it should be the CamelCase name of the plugin, but there might be cases where a plugin has more than one plugin, so check that)
For the ToolbarIcon you can either copy it to the Images folder or reference it like I've done directly from the plugin folder

  <toolbarbutton>
    <toolbarname>ImageMaps</toolbarname>
    <toolbaricon>../plugins/imagemaps/icon.png</toolbaricon>
  </toolbarbutton>

Now load the Custom Toolbars tab from in the Editor settings and you should have the new button available for you

Put the button wherever you think fits better and save it.
Now when you load again the editor, the plugin should be ready to use

I hope that this is useful for anyone that is interested.

Mixing SimpleUploads with other drag&drop scripts

In the SimpleUploads plugin, one of the features is to provide a way for the users to add files to their content by simply dragging them from their desktop. Of course, there might be more than one editor on the page and so the files are accepted only when they are dropped on an editor.

But there's a little problem: if the user drops the file outside the editor they may lose their current content because that image is loaded instead (yes, you can use autosave and also prompt them with onBeforeUnload), so in order to prevent data loss or the delay and surprise about having to go back and restore last saved draft, I implemented a little check that rejects any file that it's dropped outside the editor.

So does this fix all the problems?
Not of course!
If you want to provide support to drag&drop in other part of the page, I'm preventing that script to work but the solution is simple:

In the configuration of your CKEditor, add this extra setting:
simpleuploads_allowDropOutside = true;

That's all. If the that setting exists I won't touch anything outside the editor and you can keep working as usual.

Should you use Windows S?

TL:DR:
No.

Ok, after clearing that up, let's talk about what's Windows S and why it has a positive value (but maybe not for you).

Windows has been tied forever with back-compatibility, support for all the legacy apps and APIs that people have been using almost since Win95.

Every API is an additional support burden and a potential attack vector, and so we find that despite all the years, code review, tests and whatever, new bugs always popup.

So, is it really strange that Microsoft would like to close the attack surface as much as possible by allowing access only to a very limited API that removes low level calls and the ability to run any program that you get from any source?

Obviously they can't do it that for most of the people right now because most of the apps use the Win32 API and so the people at their homes would reject outright to even test that Windows if they know that it won't run some app that they use.

But on the other hand, there's a lot of people quite happy with their iPads and Chromebooks that doesn't run any Windows app at all and they boast how great they are because they don't get virus or malware there, and system administrators at school check the landscape and see one set of computers that are full Windows with all the extra maintenance that they might require and at the other side this restricted versions where everything is locked down, they control what's there and they know that the device won't run the traditional malware that it's sent in emails or injected through an evil ad.

They are the target of this Windows S, cheap computers that can be managed easily and can run any UWP or Win32 apps distributed through the Windows Store.

We know that most of the apps that people use aren't in the Store, but this might be the kind of incentive (a whole set of new computers sold to schools by the thousands) to port those apps to UWP and little by little people might found there more and more apps, and so in the future it might be possible for Microsoft to enable an optional lock down of every Windows computer so only approved apps are run there and everyone (except antivirus vendors) will be happy knowing that their computers are safer that way.

Microsoft currently has to fight an uphill battle to be relevant 5-10 years from now. Most of the people now browse mostly from their phones and tablets and they have lost this first battle to have a mobile OS that people use, and if they give up completely they might end up with a very marginal part of the whole OS.

So it really makes sense for them to do bold moves like this one and with the current set of existing frameworks to provide cross-platform solutions (Cordova, Electron, React Native, ...) then it wouldn't be surprising to find out that the ones that still aren't able to target UWP get proper support and everybody wins this way.

On performance and themes

I like to read about the topic of web performance, try to understand how things work and what are the correct patterns to use or avoid on the web. This means that I try to focus on using optimized javascript and css, don't include huge libraries and dead code that it isn't used.


But on the other hand it's clear that there are lots of CMS like WordPress, and shops like PrestaShop, both provide support for themes, so designers use Photoshop, slice that up, and generate a ton of Javascript and CSS by picking all the libraries, components and whatever they need.

There's no worry about file size, page performance or anything like that, it's just a matter of make it look nice, not make it look nice and work in an optimized way. And people prefer a nice looking site even if it takes slightly longer to load that one that has no design or is using outdated styles.

Recently I looked at some page templates trying to find a nice looking one for a NGO, and after reviewing several ones, I thought that I had found a good one, but my heart felt when I found that it was created by mixing several css files that are loaded on demand and all the responsiveness is achieved with javascript that modifies the DOM and changes the css files loaded according to the resize of the window. Yes, not even a single media query rule, all done with javascript.

So I threw it all away, started with a clean page and I was able to create my "design" mixing things from here and there, starting with a mobile-first approach for the first time and the outcome is a simple page with the required styles and scripts that I can keep on improving, a fraction of the size of any of those designs that I looked at.

Obviously the drawback is that in order to do this I had to spent my time, so it's easy to understand why for many sites the answer is to use those kind of themes. It's just a matter of finding the one that you like, pay for it once and you're ready to go, but it would be great if the pages hosting themes could provide some help to highlight themes with good performance and correct use of the new technologies.

Protection against bad SSL certs

Again, trying to use Twitter to express ideas is a bad place, 140 chars is too short and the sentences might get broken.

Let's start with this tweet from Bryan Ford. It links to an article that explains how a band of attackers were able to get full control of a Brazilian bank site thanks to altering the DNS records. They created a copy of the pages and got new SSL certs (we guess that the article is wrong about those 6 month old certificates from Let's Encrypt, that doesn't make sense. They are valid only for 90 days and they could have created them in a few seconds after taking over the DNS)

So losing control of DNS is really a big problem, even when they realized of the problem, they had to "fight" with NIC.br to recover control of their account and restore the proper DNS.

So what are possible solutions about this problem?
I think that something along HPKP (HTTP Public Key Pinning) is part of the answer. If everything worked correctly, the browsers would have noticed that the cert is wrong and then refused to load the page so visitors wouldn't have entered their credentials.

Bryan replied that HPKP has several problems and as you can read, it's hardly used.
So maybe the answer is not HPKP as-is now, but something developed to take into account new attacks.

Nowadays getting a HTTPS cert is finally easy thanks to Let's Encrypt, but there are still other kind of certs like EV SSL that provides verification of the company that runs the website. They aren't cheap, they require time and effort to get them, so maybe they are the starting point to get extra protection, not just showing a green url bar.

Let's say that all EV Certs are logged to a central repository (or multiple redundant copies), and that repository is the base for a new HPKP so it can't be abused by people trying to pin a free SSL cert that they got as soon as they took control of your server or your DNS. This new pinning would allow to protect those special sites that have worked and paid for a Cert that provides greater security to their users and the browsers would help to reach that goal.
A second way to use that central repository it would be that any CA should check it before issuing a new Cert. If a company has a EV Cert issued, Why would they want now a free SSL? Have they gone bankrupt? Or maybe they aren't the one requesting the new Cert? So this could close the hole that allows any CA to issue a Cert for an attacked domain.

Carlos Ferreira has replied about CAA records, but I fail to see how this is useful at all in the long run.

1. The attacker doesn't have control of your server or your DNS. Then this will prevent them to get a SSL Cert, but I don't think that they could really get a Cert from any CA, maybe I'm wrong.
2. The attacker has control of your server and is able to request new SSL certs. Why would they do that? If they are in your server, then they just can use your existing cert, they don't need to add a new one or create new ones. 
3. The attacker has control of your DNS. Then they can control CAA as they please and there's no protection at all.

So that leads to his other reply about watching the DNS records with a tool like DNS Spy. Yeah, that can be useful to notice an attack, but I guess that by the time they got the mail (to a different domain of course) about the modified DNS, the admin of the attacked domain might have already noticed some problems and anyway it's just trying to do damage control instead of getting protection like it would have happened if the attackers wouldn't have been able to get certs for their fake servers. So yes, watching DNS is useful but it's not the solution.

There are many technologies around web security, some are old and trusted, others are proposals that didn't reach momentum for whatever reason. I'm an outsider so I can't really provide a full list of ways to get proper protection, but I feel that there are ways to get better security like promised by HPKP without risking basic sites.

Getting a Google Maps API Key

On June 22th Google announced that from that day on, every new implementation of the Maps API requires the usage of an API key.

This is very important for anyone that wants to use my Google Maps plugin for CKEditor, because now you must get your key in order to use it.
The basic usage of the API allows 25.000 free maps loads per day, and you can have one key for each domain that you want to use. From that point you'll have to get a paid license. This is more or less the same, they have adjusted the way that somethings are counted but the important part is that previously the free usage encouraged signing the requests with an API key but now it's a forced requirement.

Getting an API key isn't too hard because the process has been streamlined and you mostly have to agree to the Terms and Conditions, you can find here their instructions, but I'm gonna provide some screenshots so you can view how easy it is.

Step by step guide

First, go to https://console.developers.google.com/flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true

You'll get a screen like this:

As this is probably a new project you just have to click Continue.
Now you'll get some notifications and progress and you'll end up with a screen similar to this one

This doesn't look right, the "You don't have permission to create an API key" message is strange, but the fact is that the "Create" button is enabled and it works, so you can define the allowed Referrer sites, or leave that blank now and adjust it later.
Click "Create" and then you'll get your API key

Click the Copy icon at its right side and you're almost done. If you have already the Google Maps plugin, then open the CKEditor configuration file, add a new entry "googleMaps_ApiKey" and then assign there the value that you got:

Now if you load CKEditor with the Google Maps plugin, the Maps dialog should work, but the static images will fail, this is because we have enabled the Google Maps API, but you need also to enable the usage of the Static Maps API with this key (and also the Street View API if you want to allow your users to use a StreetView image as the preview)

So open https://console.developers.google.com/apis/api/static_maps_backend?project=_  and this time, instead of creating a new project we will use the one that has been created previously:

Then click the Enable button

And this step is done, just repeat it for the Street View API in this link:
https://console.developers.google.com/apis/api/street_view_image_backend?project=_

Then the Geocoding so the searches also work in the dialog:
https://console.developers.google.com/apis/api/geocoding_backend?project=_

And this is over!

Summary

Please, keep in mind that these steps are the current ones as of July 2016, Google might change things or even depending on some settings on your account you might see different things, but the end goal is to get a Google Maps API key, enable also the usage of that key for the Static Maps and then put it in a googleMaps_ApiKey entry in the configuration of your CKEditor instance.

Additional notes

I think that the first time that you try to get an API key you'll get this screen:

and from them on when you try to get another key for a new domain, the dialog that it's used is the one that I've shown at first.

Also, at the top of the screen you might get a banner to sign up for Google Cloud, but if you plan to stay within the free plan limits you don't need that.

How to generate unique file names with SimpleUploads

If for any reason you can't change the server back-end that saves your file uploads in CKEditor and you want to prevent the overwriting of existing files with new ones that have the same file names, you can add this code to your page to generate a unique filename for each upload (adjust it to your tastes)

CKEDITOR.on('instanceReady', function (e) {
 e.editor.on('simpleuploads.startUpload', function (ev) {
  var filename = ev.data.name;
  //var extension = filename.match(/\.\w+$/)[0];
  var newName = CKEDITOR.plugins.simpleuploads.getTimeStampId() + '_' + filename;
  ev.data.name = newName;
 });
});

Debugging client-side and server-side

In the Google I/O 2016, one of the sessions was dedicated to what's coming to the Chrome Dev Tools.
Besides the improved features in the tools themselves, they also announced that they are planning to enable debugging of Node.js from Chrome, this way Node developers can use Chrome to debug both the client side as well as the server side once that pull request is accepted.

On the other side, Microsoft announced on February the ability to debug Chrome from VSCode. By using the Chrome Debugger protocol, they have created a VSCode extension that connects with Chrome and enables you to debug your script from your editor.

This reminds me of the feature of VS that integrated with IE11 and below so that when you started debugging a project, besides debugging the server side, the javascript debugger in IE itself was disabled and any error was launched in VS.

I must confess that I always hated that behavior, when I'm debugging a web page I'm not looking only at the Javascript, I must check the DOM to verify if the elements exist, check their attributes, view how does the page react to changes, etc... so a debugger that only allows me to look at the javascript is a bad option and when I had to debug IE I launched a new instance that wasn't hooked to VS so I could use the F12 tools of IE.

I guess that this must be useful for some people or they wouldn't have spend the time to make it work with Chrome, but I really can't see how using VSCode for Javascript is any better than using only the Chrome Dev Tools as they are constantly updated and improved and I wouldn't say that they are missing important things to debug JS. To debug client-side I certainly prefer the client-side tools to keep all the context, I'm not looking only at a JS file.

So going back to debugging Node from Chrome, I guess that it might depend on the quality of your editor (I would say that some people use very bad editors). Until Chrome becomes a full IDE, you're still using another program to write your JS, that includes plugins, it's adjusted to your taste, integrated with other tools... If it's able to debug Node itself, then I think that I would prefer to do that there instead of using Chrome, but obviously this depends on the quality of that debug experience. I can understand that the context provided in this situation can be similar by the editor and Chrome, although on one hand your editor might be able to provide better context and Chrome might have better debugging tools.

The only fear is that people is focusing too much on Chrome, and so we might see soon that any other browser dies because the web developers don't test them, users find problems and are told to use Chrome instead, then the statistics say that people only use Chrome and more developers focus their testing only on Chrome and we end in IE6 land: A browser monoculture.

New plugin for CKEditor: ImageToolbar

Recently I've been working in order to create for Uritec a new plugin for CKEditor, it was needed due to the way that the Style system works in CKEditor.

First the Styles dropdown shows the styles that can be applied to the current element as well as its container(s); look at the official demo and select the image, now click on the Styles selector and you'll see there "Object Styles", "Paragraph Styles" and "Character Styles", something that it's not too user friendly if they just want to modify the image. The normal user wants simple things.

The second main problem is that even if they focus just on the Object Styles, you (as page author/designer) can't restrict the way that the styles work between them, so if you want to use a class to apply a 1px gray border, and a different class to create a slight rotation and shadow, the user can't apply both at the same time (unless you apply inline styles that we all know it's bound to fail).

So the goal was to allow to apply groups of classes that can be mixed so you set one group of classes to define different types of borders and another one to apply color filters, etc... Also, let's keep in mind that the align center has been disabled in CKEditor for those who prefer to use the classic Image plugin although it's easily done using display:block and margin:* auto, so one obvious group is alignment.

Putting all those buttons to show up always in the toolbar was considered a bad idea because most of the time they won't be used, and providing instead a "contextual" toolbar that shows only when an image is selected  was considered the best option.

Taking all of that into consideration ImageToolbar was born, designed to work in both classic (framed) editor as well as new inline mode, and compatible with the normal Image plugin and the Enhanced Image plugin. You can play at its demo with some predefined styles, but you can define whatever you want as long as you're able to do it with CSS classes. Or if you feel lazy today, check the 1 min. demo on YouTube.

If you use the Enhanced Image plugin you should know already that the way to define your CSS file requires taking some extra care, we have added some notes about it in a small guide about styling images in CKEditor, and due to those widget wrappers and upcast/downcast you'll find that it's much more powerful when you configure ImageToolbar with the classic image as you aren't restricted by the "Enhanced image" limitations.

Lastly, remember that unlike other plugins that claim to be free but then require you a monthly payment, this is a one time payment that will give you any future update.

Deprecation plan of IE8 in SimpleUploads

tl:dr
Die IE8, Die.

Planned deprecation of support for IE8 in SimpleUploads

We're already in 2016, Microsoft has stated that old versions of IE are no longer supported, and since some time ago Windows XP is not supported either.

IE8 is too bad according to any current standard, too limited and lacks too many features, it has bad security track, it's time to put it to rest and everyone of us has to work towards that goal and obviously one thing that we can do is to claim that those old versions aren't supported in our products, so people can realize that they have to change their browser to another one that has all those missing features.

So by the end of February I'll publish a new version of SimpleUploads just to remove the little parts that tried to add some kind of support for IE8.

I'll remove right now any claim in its description about support for IE8 and I'll update shortly the demo with the new version without support for any browser that lacks the FormData feature.

If you have any concern about this change, please comment here or send me an email, but remember that you can keep using your current version as long as you want if you prefer to support IE8 instead of embracing the future.

Die XP: Another benefit of Let's Encrypt

The Let's Encrypt project is a great initiative to move towards a more secure web, removing the costs to apply a secure certificate to a site and providing an automated client to take care of renewals.

This means of course huge changes across the whole the web industry:

Other CA will be forced to drop the price of their equivalent certificates to a bare minimum or make them free also, just to try to keep on some people looking at them.

Hosting providers will have to allow everyone to use a one click install of a free SSL certificate or at least manually update their certificates unless they want their clients to move to a friendlier hosting that allows setting up SSL without paying huge fees.

Website owners now will be able to avoid one of the problems (money) to install a SSL and this will be specially important for small websites. Big companies have enough resources that the cost of a certificate is nothing to them, but for a small website it's clear that every Euro counts, so most of the people didn't think at all about paying just to say that their site now can be used with https.

Hopefully this will mean the end of self-signed certificates or expired certificates, so end users will be able to understand better the difference between a secure site and a non-secure one and so after a while people will reject "old" sites that aren't using SSL, forcing those sites to install one, pushing their hosting companies to allow install of free SSL.

The government spies will have a harder time trying to track what everyone does, and no, this won't be an improvement for terrorists because they are already able to use secure communications but in Paris it has been clear that they used normal non-secure methods.

But there's one more benefit: Most of those small sites that now are installing SSL en masse are using shared hosting, so they don't have a unique IP and that means that they rely on SNI to enable https and it turns out that no version of IE under windows XP (as well as old Android 2.x phones) don't support it, so those that still keep using the old IE8 will now face a new problem because they will have constant security warnings whenever they try to visit all these new https sites.
And this is a good thing!!!

That people keep on using that old IE. I mean, it's old, old, old. Full of bugs, full of problems, a pain for all of us that try to create modern websites if you have to keep supporting it, and now those users will feel a little of that pain (although I guess that they are already suffering from all of us that have left IE8 behind and no longer test it).

Time to ditch IE 8 and move to a modern browser.
 

Updated demo for SimpleUploads

I've uploaded right now an updated demo to show the latest features of SimpleUploads and its compatibility with CKEditor 4.5

This post is part of the release as it aims to document the latests additions introduced since the last post about it (full details are in the history.html file).

• Removed support for CKEditor 3.6. It's not a lot of code, but currently there's no reason at all to keep using a version so old and I doubt that there is anyone interested, so less code and less things to test.
• Workaround for the CKEditor 4.5.2 change that  prevents dropping files on a dialog
• Added ability to handle both the classic response from the upload of the new JSON format
• Cleaned up and unified coding style with EsLint
• Improved API and integration with other plugins like ImageCrop.
• If the Upload Image button is used, launch a file picker showing only the images on your computer
• Other minor adjustments and fixing of all the reported issues.

I'll finish all the testing and then I'll send the new version to all the clients and then I'll move on to add a feature that has been on my mind for too long

I also have to review and publish the full documentation about all the configuration options, public methods and events related to the plugin (instead of keep adding it in the plugin.js file or several pages and blog posts) (this will mean probably that I'll add more changes because I'll find some detail that I don't like)

PS: The current release of MS Edge doesn't support dropping files, but that's a missing feature in the browser, the next version currently available as beta already fixes this issue. You don't have to do anything on your side when it's finally released.

Taking a break to breathe is good and healthy

There's lot of truth on the post by @ppk "Stop pushing the web forward", and it has lots of replies, some very insightful and others that don't follow the reasoning. This is my take on it and you can bet that it will be closer to the clueless ones.

Browsers are adding new features, are constantly trying to find out what's missing and fill those gaps. That's great! we don't really want a whole full stop because we're always wishing than something works better, it's faster, it's doable...

But the current problem is that there are just too many new experiments, while old problems remain ignored and unfixed. You find a post stating that something is coming to the alpha version of a browser, that they plan to work on new features for the next release, but we're not able to correctly use the previously released features because it fails in some situations or it's implemented only in one browser and so it can't be used on the public web.

We need that those gaps are solved, we need to be sure that the existing problems are fixed before even more features are added.
For example pasting images into web pages:
Firefox pastes the data as base64, but it won't work on an input. But if you save it as a file in your computer, then you can Copy&Paste it and no other browser allows that.
IE11 won't paste any image unless you're using a contentEditable element, and in that case it even embeds the images included in a MS Word document, this isn't possible in any other browser.
Chrome allows nicely to paste a screenshot into an input, as explained above the other browsers don't allow this.

So a "basic" feature that users would enjoy across so many sites but that it isn't available in full form in all the browsers, don't you think that this is a good example of something that should be fixed before adding something absolutely new?

We'll always need better developer tools, tools that allow us to look at the pages and get more information, options to show warnings when something is wrong or we are using deprecated APIs. Don't get me wrong, the current tools are a million times better than what we had a few years ago but they still can be better: I'm in love with the CSS changes pane in IE11, there's no match for the mobile options in Chrome, I enjoy the UI from Firebug. And surely you can tell many things that you miss and wished that they worked better. All of this without new APIs.

So taking the time to review the bug trackers and clean them up doesn't mean that the web stops, it means that we remove the problems that we have and we can have a better solid future instead of lots of APIs that we can't rely on due to the number of bugs.

On the font side of -apple-system

In my previous post I talked about the usage of vendor prefixes in CSS due to the introduction from Apple of the new -apple-system value for the font-family property.

I tried not to talk about the property itself and focus only on the issue of adding more vendor prefixed elements to the open web and today I want to expand that with my point of view about the value itself: -apple-system.

The theory upon which this new value is introduced is to help designers match the underlaying OS, and so we're supposed to treat it in a way similar to listing all the default OS fonts:

font-family: system, “Roboto”, -apple-system, “Segoe UI”, sans-serif;

Except that no designer worth their job would ever do that. 

I know very little about fonts, but among those little things that I know is that each font has different metrics, so using such a mix of fonts will be a guarantee that the final result will be a disaster as soon as the user loads the page in an OS different than the one where the page has been designed, the carefully designed UI won't fit correctly because some elements will be bigger/smaller than expected, the font-weight won't give the correct feel, etc... using a fallback font is a kind of "last resort" and when you do that you try to suggest alternatives that would fit properly but you don't have that kind of guarantee when you use fonts designed from different OS.

Furthermore, someone that wants their page to match the system font won't stop just there and they will try to match the rest of the page as much as possible to the target OS and then we end up with only one targetted OS because obviously there's no kind of fallback to say: If you're on El Capitan use these icons, if you're on Android use this set, for Windows users, use this one, etc...

Even the same set of icons won't fit different versions of the same OS, the same way that they state that it would be incorrect using San Francisco in the previous versions of Mac OS X because that's not the native OS font. Whenever any OS changes their designers update the rules about drop shadows, colors, gradients, rounding of elements.... some times in a radical way, sometimes adjusting and improving the experience, but everyone is able to tell if any app is following the current OS or it has been designed for a previous one.

In the same way, a web designed to look & feel like a native app will look horrible (kinda like Safari 1.0 did on Windows) in any other OS, taking away the portability and abstraction that the web brought us.

Using this for embedded apps is absolutely OK, there's no doubt about where such apps will run so it's just natural that they try to match the OS, but the moment that anyone uses this on web apps and the public web it's a kick to the groin of freedom, the ability to load any page with any browser in any OS.

To see what this is about, load the video from Apple with IE11 for best results: https://developer.apple.com/videos/wwdc/2015/?id=804

A Tweet is not enough

This Monday I did read a new blog post in Surfin' Safari about a new feature that Apple is introducing to make it easy to use the current system font on web pages. For whatever reason I was a little fed up with so many vendor CSS prefixes so I sent a tweet about it, but obviously it's hard to express things correctly on a tweet specially as I'm not an English native speaker and I'm not able to abbreviate things like all of you do because I'm afraid that then it will be even harder to understand what I say.

So after fighting only a little to avoid the characters limit I sent:

The mess caused by vendor prefixes on the wild is not enough, so we have new -apple webkit.org/blog/3709/using-the-system-font-in-web-content/ @jonathandavis

I'm not gonna copy each following message and reply as you can try to read it there, but I would like to point out some parts, a better explanation and say thanks to everyone that contributed as I think that it has helped to talk about the problem caused by the current usage of vendor prefixes.

I'm nobody, I don't work on a big company, I haven't written any book, it takes me too long to write things because I have to try to find the correct words so excuse me if this post has mistakes or it's unreadable, I've tried my best.

What did caused me to send that tweet?
It's known since quite some time that the current usage of vendor prefixes is causing harm in the interoperability between web browsers. Quite a few years ago we had the first browser wars between IE and Netscape where each one tried to defeat the other introducing new features as fast as possible and we all know that IE6 was the winner, so we had so many websites that took advantage of those proprietary features and the "Best viewed with IE" or "You must use IE to view this site" messages that most of us hated with passion.

It took many years to fight and reverse that situation, engineers had to work too many hours finding out the way that things worked and reverse-engineering the specifications. We also keep the perpetual "Mozilla" and "like Gecko" in the User-Agent, but currently this is absolutely getting out of hand.

So going again to a browser monoculture is something that I don't want and anything that points in that direction makes me cringe.

Currently other browsers are trying hard to avoid those same mistakes, experimental features are available only in "Nightly", "beta", toggling a setting in about:flags, using a command line parameter, whatever, ... but the common goal of that approach is to not expose experimental features for broad usage to the public web but the people that want can try it out, give feedback and find out if it solves the problems as expected.

But Apple is not planning to do that, they pointed out that this isn't aimed only at betas (although a day later he replied that it's only in beta at the moment, obvious as there's no final release ATM).

And one part that I found really offensive was this tweet about my comment that Apple doesn't remove the prefixed version of anything that they introduce:

And we will always support them (unlike some vendors that remove things at will). So what is the issue?

with other comments that I found ... we'll I think that it's better to not say what I'm thinking:

You can’t just break sites or apps. Apple doesn’t roll like that. A number of properties changed from prefixed to unprefixed too.

 It is what any company should say that cares about developer and user experience. An API is a contract and guarantee.

Just load the Release notes of any Mac OSX version and search for Deprecated Frameworks and Removed Frameorks.

So it's clear that Apple is able to deprecate and remove APIs even if they were the greatest new innovation at the time, but the obvious difference is that they have full control of the OS (if you don't like what we do, here's the door out), but on the Web they are playing the Embrace, Extend, ... game.

Going back again to the starting point:

Why are vendor-prefixes bad?
I'm not the one stating that, please read carefully this great post by Karl Dubost, take a look at what Mozilla and Microsoft has been forced to do just to have a chance of people using their browsers, and then tell me if this message from @ryosukeniwa is right or wrong:

I don't think proprietary CSS features aren't that bad since they fallback nicely. DOM and JS API are different, ..

But as I said, I'm nobody, please read what Daniel Glazman has to say about the matter. I'm really honored thinking that all of these great people have spent some time reading about my humble tweet, but then I have found out the real reason why I despite vendor prefixes: The CSS working group asked all of us to stand against them for the Open Web and it seems that the message got deep into my head.

That's enough for this post, I have many other things to say because there were lots of tweets and I don't want to mix the things here.

Creating a responsive Div with proportional dimensions

When you create a responsive layout, you might need sometimes to embed an element (classic example: a YouTube iframe) in a way that it scales down for smaller screens, keeping the aspect ratio.

The way to do that is to wrap that element in a parent div, and control the dimensions of that Div:

<div class="responsive-wrapper"> 
  <iframe></iframe> 
</div>

In the CSS you can then use something like this:

.responsive-wrapper {
    width:100%;
    padding-bottom:37.5%;
    position:relative;
}

.responsive-wrapper iframe {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

The trick is that the .responsive-wrapper is a 0 height div, and it has only a padding-bottom defined as a percentage so that means that its total height is really based on the width of its parent.

http://jsfiddle.net/fsmnwefn/

Ok, we all have seen that trick, but: what happens when want to limit the width of the embedded element?
If your page has enough width and the embedded element takes 100% width it might look too big, so you might want to limit its width to 800px for example.

Well, the solution is not really complex after thinking a little: just wrap everything in another div with max-width, that way the total width that .responsive-wrapper will be always limited to our maximum and the height (given by padding-bottom) won't grow as we resize the page.

http://jsfiddle.net/fsmnwefn/2/

Anyway, defining the padding as a percentage ( = desiredHeight * 100 /desiredWidth) doesn't look nice to me, I wanted to be able to use only defined widths and heights.

What I want is the intrinsic behavior that img has, so that we can define width and height as well as max-width, max-height.

There's a solution for this using vw units, that way the element will keep the aspect ratio, but it's gonna be messy again to keep a maximum width that works correctly in mobile: if you work only with the .responsive-wrapper and try to set max-width:800px you can add now max-height:300px for example, but if you have set width:100vw then the element will create an horizontal scroll as soon as you keep some margin on its sides.

So you still need to keep that extra wrapper div.

But there's another interesting solution, why don't we use an image to give us that ratio automatically? This idea is explained on StackOverflow by Elliot Richerson 

It's good to have different options and I find this one interesting, you just need to add an image with the aspect ratio that you want as the first element of .responsive-wrapper and with width:100%, height:auto and then you can apply the max-width/height to .responsive-wrapper itself.

Obviously this still forces us to add an extra element and now you have an extra http request to download that image, that you have to recreate for every aspect-ratio that you need.

And then I thought: Would it be possible to create such image on the fly?
At the moment I'm working with javascript (not only static html), so my crazy mind starts to think: I can use a data-url, and even I can try to find out what's the basic structure of a .gif and create a fake one with the dimensions that I want, then base64 encode it and use it as the src of the image.

Wait a minute man! that's too much work, we're in 2015, you can just create a canvas, set it to the desired size and get its content as data-url without the need to find out how to create a .gif or .png

But, but...
Yes, I can use a canvas instead!

so the new trick is to use a <canvas height="300" width="800"> and then in the CSS

.responsive-wrapper {
    width:100%;
    max-width:800px;
    position:relative;
}

.responsive-wrapper iframe {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.responsive-wrapper canvas{
    width:100%;
    height:auto;
} 

The nice part of this solution is that you can use whatever units you want, and the aspect ratio is defined in the HTML, so you can use this class with different elements and even add other media queries for whatever other effect you might need.

http://jsfiddle.net/fsmnwefn/3/

 

Testing DevTools, take 2

This is my second day testing Firefox Developer edition.

Almost right after start, I get a notice that there's an update ready, clicking it a dialog was shown stating that the update was ready to be applied. So I agreed and waited, this should be transparent and done without such dialog, specially when frequent updates are expected due to the usage of the alpha channel.

The prompt to save passwords has changed, I'm not sure if previously it showed the user name, but now it has a field with the masked password below it that it's absolutely useless, it can't be edited, it doesn't provide any info, Why are they wasting time and effort in things like this?

So I started working, the first changes were mostly server-side to send new data and modify some JS, then I added two breakpoints to check that it was working as expected, some adjustments, I browsed a little, took a quick look at the network tab, its layout is somewhat different like the Clear button at the bottom right instead of the top left like all the other tools so at first I thought that it wasn't available.

Then I went back to debugging, but now those two breakpoints no longer work. No matter if I remove and add them again, reload the page..., the script isn't stopped and so I can't use Firefox to debug javascript. After restarting Firefox and adding again the breakpoint at the same place this time worked, but my usual reaction at this point is just to switch to another browser and go back to Firefox only when everything works perfectly in other browsers and I have to review Firefox.

I want to check as I'm not sure the value of the document.ELEMENT_NODE constant so I type document.EL and as it's already shown in the autocomplete I press Enter and it uses only "document.EL" so it says that it's undefined, so I press Up arrow, Tab and it shows in light gray "<- again="" autocomplete="" br="" english="" exact="" i="" if="" in="" is="" m="" makes="" not="" pressing="" results="" sentence="" so="" spanish="" sure="" tab="" the="" this="" without="" work.="">In Firebug and IE the first Enter does the autocomplete and then pressing it again shows the result. Chrome behaves like Firefox on the first step but after pressing Up arrow no matter how many times you press Tab, the autocomplete doesn't work.

Back to CSS, trying to add or edit a pseudo-element like a::before it's not possible, the rest of the tools allow it; Chrome even shows them in the DOM tree.

Trying to do some basic testing with Mobile isn't even fair. IE11 has the very minimum, Firefox improves it a little, although not really too much and Chrome is hands down the absolute king. Several features really useful that makes it a non-sense try to use any other tool to start checking for mobile:
Touch emulation: the pointer turns into a fingertip and :hover no longer works. Absolutely a must.
Device list: instead of a list of sizes, it shows devices by their name, and it also adjust other things like the device pixel ratio, so it's easy to get a good view of how it will be viewed on such screens.
Rule with @media rules in the page, good to find the breaks and verify them.
Zoom control, nice.
Network emulation, so far I haven't used it too much, but it has obvious benefits without the need of using external tools to simulate throttling. I know that I'll use it because otherwise it's impossible to test how a remote server works with different conditions.

I've decided to test now the WebIDE to connect to my phone. Yesterday I did a quick test and I gave up. I saw "Chrome on Android" listed and I picked it but nothing happened, and today I realized that then I must go to the left and click on "Open application" and the open tabs are listed there and debugging starts.
So then I tried to debug Firefox as I already debugged Firefox on Android some time ago, and then I realized that it's not done automatically and I had to enable the remote debugging on it, this should be hinted more clearly, when an Android device is detected, create an entry linking to how to enable debugging of Firefox.

One "annoying" thing is that every time that I connect again to Firefox on Android it prompts me to accept the connection, with the only options as "Disable", "Cancel" and "Accept", but not a "Yes, always allow this device", Chrome doesn't do such things.

When connection to a device Chrome clearly shows the list of open tabs and allows to close, open a new one or change the url, as well as proxying the request to localhost, another must have to be able to test changes without having to upload to a server.

Firefox DevTools, a long way to go

This Monday I tweeted about the bad state  of JS debugging in the current releases of Firefox where both Firebug and DevTools are no longer useful because they ignore most of the breakpoints.

I got a reply from Jeff Griffiths suggesting me to use the alpha version AKA as Firefox Dev edition, but I pointed him that it's known that it lacks behind all the other tools, so I would prefer to wait until the most obvious bugs are fixed (I linked some that are important for me).

Yesterday I got another reply suggesting me to give DevEdition another try, and so this evening I've started by opening a document where I've been writing down this experience of installing and trying to use the latest version. It's not from the point of view of a new user because I've tested it a little bit, but I might not be aware of awesome things just because the problems that I find force me to use other tools.

The first step is instaling the Firefox Dev edition, I picked the custom install and of course I rejected the option to install it as my default browser, that's a non-sense that when you install a new browser you're going to make it the default right from the start (yes I know that everyone does this since Netscape times).

After launching the first thing that I notice is that the UI lacks the rounded borders of the normal Firefox. I notice also how slow are the UI animations (it feels the same way in the normal Firefox, but I don't see them because I've added the Classic Theme Restorer and that way I don't have to use the hamburger menu). That's a problem with Firefox itself trying to create useless animations, not with the DevEdition.

Then I try to use it on a site and the obvious first stones appear in my path, the history, autocomplete, credentials, everything is empty so I have to type everything again. Not a big problem, but it will force me to waste my time. It should have prompted me to import such data from Firefox or to use Sync as this seems a sensible use-case. As it didn't offer me to use Sync I'm not sure if that would be a good idea or it's risky to use it with different versions at the same time.

So let's start testing it.

I add a new CSS property "max-wi" TAB, now I type 0 and press Arrow UP, it changes to 1 but it's unitless so it doesn't work. Firebug and Chrome correctly change from "0" to "1px", IE11 behaves like Firefox.

Now it's time to save the changes, I adjusted only one rule but when I try to use the context menu there's no "Copy rule" like Firebug or IE11, I have to manually select the text like in Chrome.

Extra Bonus points and the main reason that IE11 it's now mostly my prefered tool for CSS adjustment is its Changes pane that shows all the CSS changes made in the page. Certainly it's a little buggy sometimes and it could have several enhancements, but all the rest of developer tools lacks anything like this and it's precious to be sure to know all the adjustments made across different elements.
Chrome seems to have something related with the History pane, but honestly I haven't figured out how to make it work as I want.

One thing that DevTools doesn't seems to know is that "0" is "0", it's unitless so when I write "margin: 0 auto;" it's wrong to change it to "margin: 0px auto;". Firefox and Chrome respect my 0 and IE11 does it correctly for "margin: 0 auto;" but not for "height: 0;" (test by checking a property written in the stylesheet that way or modifying a property and switch to another element and back to the modified element)

Other clear sign that these tools aren't ready: Use the context menu and select "Add rule", change the selector or leave it as is, now Tab and you'll find that you're now nowhere, you have to click inside the rule to add a new property. All the other developer tools correctly place you ready to type your new property as that's the only logical thing to do after creating a rule. This breaks the workflow and makes me waste my time moving my hands from the keyboard to the mouse.

Bonus points go to Firebug because while editing a rule you have a super useful autocompleter based on the parent node names, ids and classes. No other tool has this.

Trying to work a little with javascript, put a breakpoint, check the DOM, reload the page. All the tools except Firefox DevTools correctly switch the selected pane to the script that has the breakpoint and DevTools just show that tab in green stating that execution is stopped and waiting for you to click.

Another day I will keep on testing and reporting the differences, but so far I haven't seen anything in Firefox that made me want to use it.

List of plugins for CKEditor

This is a list of the public plugins that I've created for CKEditor, you might find some of them interesting. I've added here a small description and in some cases a suggestion to use it or not, just to help yo understand faster what's the reasoning behind each one.
As you can see most of them are free, so if you want to support my work, you can buy any of the commercial ones and add a note in the payment so I can know that it's worth to keep publishing free stuff. Or at least say "Thanks" in this post or the pages at CKEditor, it's cheap and at least I'll know that someone has used successfully the plugins.
Some plugins are very simple and perform just a basic single operation, others are huge beasts that provides lots of functionality like the HTML buttons or SimpleUploads, take the time to read the linked page for each one.

Allow Save

The default "Save" plugin for CKEditor 4 is quite restrictive and it doesn't enable the button unless you're using the "replace textarea" mode AND you're in Wysiwyg mode. This plugin removes those restrictions and allows you to do whatever you want when the "save" event is fired on the editor. Remove the default "Save" plugin and use this one.

Background Image for Tables and Cells

Sometimes you have to deal with a client or a project where the final user is supposed to be able to set a background image for tables or cells. You might not want to do it, but if you have to, with this plugin you'll get in those dialogs the options so that they can do whatever they want

Configuration Helper

This plugin simplifies some configuration options in CKEditor like hiding/removing dialog fields, and it also provides a HTML5 like 'placeholder' when the editor is empty (eg: 'Type here the description of the product') that goes away as soon as the user focus the editor

Google Maps

If you want to insert a Google Maps into your site you can use the simple embed code that they provide. That's fast and free, but other times you want the ability to provide more configuration options, to integrate it better into your site, create an image to send in an email... In those cases you should check the Google Maps plugin for CKEditor, because it provides a simple interface to control many options of the Maps without any requirement to understand the underlaying behavior.

HTML Buttons

This is a very powerful plugin as it allows you to create any number of toolbar buttons or even drop down lists to insert whatever piece of HTML that you want into CKEditor or even wrap the current selection with this HTML. If you are searching for a simple way to add a button that inserts a snippet or a combo box with a list of options to insert, then grab this plugin and you'll be able to finish your work in a few minutes without the need to read any complex manual.

Image Crop and Resize

This is a plugin that I've created for Uritec SL. It uses the SimpleUploads API to allow the users to perform basic editing (crop and resize to desired set of dimensions) of their pictures before they are uploaded to the server, or even to edit those images after they have been uploaded. For further details, check the ImageCrop page. This is a big productivity enhancer because it simplifies so much the process of cutting out the undesired parts of the pictures and then resize the selection to match the image sizes defined for the site, and it's God's sent gift for those users that barely understand how to use any image processing program.

Images From Word

Another plugin created for Uritec SL.Whenever your users copy some content from MS Word (because it's an existing document, they prefer to create the content that way, etc...) the embedded images aren't copied along the content unless they use IE11. As not all the people enjoy being forced to use a browser, this plugin enhances the default Paste operation in CKEditor so it just ask the user for a couple of clicks to include the images into the content avoiding this way the frustration caused by the missing feature in Chrome and Firefox.

Images From Server

Another plugin created for Uritec SL. Copying content from one site to another one means that the images use the references to your old server, but with this plugin all the images are copied and your content is updated to use the new URLs automatically. Now you don't depend on the other server, you can edit the images in your server, embed them in your emails, etc...

Image Maps

This is a plugin built to use the ImgMap library by Adam Maschek into CKEditor. This way your users can mark the active hotspots in any image and create the standard <map> and <area> elements on them that can work on any browser without any special restriction. For further details, look at the ImageMaps page.

Image Paste

Simple plugin that allows to upload to the server the images pasted from Firefox. You should use this one only as a test case to check that you can install custom plugins into your server and handle uploads, the SimpleUploads plugin covers this use case and many other things.

Images Toolbar

Another plugin created for Uritec SL. With this plugin a floating toolbar will show whenever an image is selected, allowing the user to easily change the styles in anyway that you want, without cluttering the main toolbar or the restrictions imposed by the Styles dropdown.

No ABP

This is a very simple plugin that it takes care only of removing the "abp" attributes that the AdBlock Plus extension for IE inserts into the content. It's only a few lines of code and it doesn't do anything special if the user isn't using IE with AdBlock Plus, so you should just install it by default as it will help to avoid garbage.

Non-Breaking Space

It's laughable, but a smart guy provided a vote of 2 because the idea is old. Yes, nothing ground-breaking but at the same time it's the kind of little things that are good to have because we're used to them and CKEditor lacks: Press Ctrl+Space and you get a non-breaking space. Nothing less, nothing more.

onChange

Currently you shouldn't use this plugin as is. Since the CKSource team introduced a similar functionality into the core I stopped updating it, although you might want to look at its code to fix the problems that they didn't care about despite the availability of this plugin that shows how to take care of.

SimpleUploads (file and image upload options)

This plugin adds a whole set of enhancements and new features so that the users are able to upload files and images from their computer as easy as possible and it provides you as a developer with a full API to go far beyond what it's possible with the default CKEditor API or any other plugin.
With this plugin you'll have the ability to paste files into CKEditor, drop them from your computer, avoid uploads of files that have the wrong extension or are too large, use APIs different than the one suggested by CKEditor, you must read the SimpleUploads page and the linked posts to get a glimpse of all the things that are possible with this plugin and the API that it provides.

StyleSheetParser (Fixed)

The current version of the StyleSheetParser has a bug that has been lying around for years and that they don't care enough to fix, so here is the fixed version that works correctly when the cache is empty and it also works with inline-editing. Remove the default StyleSheetParser from your build and add this one instead.

XML Templates

The Templates plugin for CKEditor requires that you create the templates data in a JSON format that can be quite hard to create and debug for non-developers. This plugin adds the option to use a XML format just like the old FCKEditor did. This plugin extends the default Templates functionality, you must have both plugins installed together.

Zoom

This is a half usability-half sample plugin. I don't see much benefits to use the zoom in a web editor, but others do so here's a simple combo box that changes the zoom of the content. Nothing changes in the content it only provides a control like other desktop word processing editors to zoom-in and -out the content.