2015/07/30

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.



2015/07/19

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/

 

2015/05/21

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.


2015/05/20

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 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.

2014/10/19

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.

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.

2014/10/18

Editing images for CKEditor

Besides allowing to upload images to their server, one of the main problems that users have with the images is the size of the pictures. Even for seasoned users, sometimes it's hard to calculate how to correctly crop a part of the image and then resize it to the final desired dimensions.

Using the features provided by the SimpleUploads plugin for CKEditor, you can now make this a very simple task so that they upload to the server the images exactly as desired, without any extra images laying around, and without worries that if the image is automatically cropped, the heads will be cut off or any strange thing like that.

The process is as simple as you can expect, once you have used it you'll never want to go back:

  1. First add the image to the editor, usually the simplest way for the users is to just drop them from another window with the local file system (Explorer, Finder, etc...), but using the toolbar button to launch the file picker works as well.
  2. Then a dialog launches showing the selected picture and the user is asked to select which preset sizes (that you configure in CKEditor) he/she wants to use.
  3. Upon clicking on one of them, a selection appears over the image, and that selection can be resized and moved to focus on the interesting parts of the image.
  4. Now the user can just click OK on the dialog and the image will be saved that way
  5. Otherwise, if he clicks Crop then the options will ask which image quality should be used, and changing them modifies the preview as well as the size that it's shown that will be used for the new image.
  6. Clicking OK will work like in step 4, the image is uploaded to the server and inserted into the content.

But there's even more:

If the image is already on the server, a new context menu option is added to show the same crop&resize dialog, so the user can opt to use existing images on the server and then adjust them when a thumbnail is required for example.

To get those features, check the demo for the image crop and resize plugin for CKEditor.

 

2014/09/19

Future plans for SimpleUploads

I've wanted to write this post for a long time, but I'm usually a little busy and things didn't look to be quite ready, and it's better to not scare people out if it isn't needed.

The future of SimpleUploads

If you follow the development of CKEditor you should know that for a long time they have been planning to add support of image pasting as well as drag and drop in the next version of CKEditor. Initially it was planned for CKEditor 4.4, but soon they realized that it required much more work than originally planned so it was delayed for the next version. CKeditor 4.5 was supposed to be released next week, but they have announced that the whole release will be delayed by an unspecified amount of time.

I can't state how the planned features will work, as it seems that at the moment it's still a work in progress, but I really expect that their code will make quite hard the upgrade of my SimpleUploads plugin to keep all its current features because the browsers are quite frail in these kind of operations. The correct solution would be to use the new APIs that they are creating (at least I hope that they provide some API) and add the missing bits to provide again everything that they have skipped.

But the fact is that like any previous release I expect that it will wreak havoc with my code and it will require lots of changes and some parts might be incompatible with their code so this will require a compromise and I will work to try to bring everything back to work as soon as I can.

Of course such rewrite will be incompatible with the previous versions of CKEditor, and I plan to provide two versions from that point:

  • The current one, compatible with CKeditor up to 4.5
  • Next version, only for CKeditor >= 4.5

The current version is highly polished and I will keep on working on fixing any minor issues that might appear. The focus of my work will be the next version in order to make it work at least as good as the current one.

Currently drag&drop and pasting are just only a part of the whole feature set of SimpleUploads, so adding them to CKEditor doesn't really mean an end to this plugin, only an adjustment about which parts are handled in CKEditor and how to make the whole upload experience as easy and simple as possible for the end user.

What does this means to you?

If you're currently using my plugin, you should delay the upgrade to CKEditor 4.5 until I release something that works at least with the features that you need. If you don't plan to upgrade to CKEditor 4.5 as soon as it's released then this shouldn't be a problem, afterwards, please check if I've managed to fix everything besides whatever I might write as required changes for the upgrade.

If you're interested only about the drag and drop or paste of images into CKEditor and you're OK with waiting a little while and then using that CKEditor version, then you shouldn't buy my SimpleUploads plugin . Just keep on waiting and you'll be ready to go.

Of course, waiting might not be an option for you as you need a solution right now, or you are already using a version of CKEditor and you don't plan an upgrade in the foreseeable future, or more probably, you want more features than those available in the plan CKEditor (like single click uploads). In that case you can use my plugin if you're willing to pay just a little money; if you want a free solution my plugin shouldn't be a concern to you: I don't have any plan to release it for free or to drop it. People have paid for it and I will try to support it for as long as I can.

Please, don't write me in a hurry as soon as CKEditor 4.5 is released, this is my warning that I expect things to break and I will try to put everything into working form again, but I think that it might take at least two weeks until I'm able to release a new version that works and maybe a whole month at least to keep on fixing all the breakage caused by the changes. I have a life and a full time job and even if I don't waste my time with Ingress, time passes flying by and I can't sit the whole day working on these plugins unless I'm on vacation.