Useful Code for Web Designers/Developers

[Pete]

(Formerly "Two useful things I found today")

When building forms, I've always liked having placeholder text in certain fields. I like my search boxes to say "Search" in them for example and have used jQuery in the past to make the text disappear when the field has focus and reappear if it loses focus but no text was entered.

I was stunned a while back to find out that I'd been missing a trick in that you can simple add a placeholder attribute to your input field, but don't like that the placeholder attribute doesn't work in IE and can be flakey in other browsers. As an example for those that aren't aware, copy and paste this code into a HTML page than then in a browser other than IE, then click in the field and then back out of it:

<input type="text" name="test123" placeholder="this is some placeholder text" />

Fortunately my prayers were answered today when I looked at using placeholders again instead of lots of custom jQuery code when I found this jQuery plugin: https://github.com/m...ery-placeholder

It basically lets you just use the placeholder tag as above and in browsers that don't yet support it it adds workarounds to mimic that functionality

Wow, I do ramble on a bit eh? Could have just posted a link there and saved burning off my fingerprints with all this typing

The other thing I found today was a decent PHP class to show differences when comparing code: https://github.com/c...oulton/php-diff - it's worth a look and has basic highlighting all set up if you download it and check out the demo.

Just thought those two things might be of interest to someone at some point

[interrobang]

There are a lot of useful polyfills like this jquery plugin out there. Have a look here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

I like especially the web forms polyfills. Nearly every html5 form feature can be used now in every browser!

Thanks for mentioning php-diff - could be useful for an upcoming project.

[DaveP]

You can even style placeholder text with CSS, but support is, as yet, limited and patchy - http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

[Soma]

I tend to use http://caniuse.com or the list interobang posted. Thanks for tips, I'm sure someone find them interesting.

BTW now you only need a more clever post title

[teppo]

Fortunately my prayers were answered today when I looked at using placeholders again instead of lots of custom jQuery code when I found this jQuery plugin: https://github.com/m...ery-placeholder

It basically lets you just use the placeholder tag as above and in browsers that don't yet support it it adds workarounds to mimic that functionality

@Pete: seriously, this is what I'd call a great timing! Just a few days ago I pushed my own jQuery placeholder plugin to Github (https://github.com/t...put-placeholder) -- wasn't aware of this one before but it sure seems like something I'll have to take a closer look at. Thanks for the heads-up

My plugin does essentially just the same as this one with a few differentiating features. In some ways it's a bit more simplified as I've focused on the particular needs I've encountered in client projects so far, such as need to set specific styling for placeholders etc.

[Pete]

Thanks for the other suggestions - I hadn't realised there were sites where people have done a lot of the hard work already, but I guess I should have worked out that the internet contains everything by now

[renobird]

Hey Pete,

Here's one to add to the list of useful things.

http://redactorjs.com

It's a jQuery based WYSIWYG editor.

So far I like it a lot more than TinyMCE.

[ryan]

Redactor does look very nice! I was really interested till I saw the license--looks like it uses a commercial license, so not something we could build a module for or include with PW, etc., because it's not GNU compatible. I certainly understand why they would choose to license it the way they did, but it couldn't be considered as aTinyMCE/CKEditor substitute since its licensing context is so different. Still a good find though!

[Pete]

Is the developer license not compatible? This page seems to suggest so: http://redactorjs.com/download/

Might be worth asking them if we think there's a real benefit (the fact that it's jQuery has me interested more than anything else).

[renobird]

Hi Ryan,

yeah, I figured there would be some conflict there. What about as a 3rd party PW module?

The developer license would seem to permit using it in that context.

From the FAQ:

"Can I include Redactor in any products that I intend to give away for free?

Sure, you can do this after purchasing the Developer License. In this case, you are allowed to include Redactor in all your open source projects, including those published under GPL, BSD, etc."

I don't know a lot about licensing, so there could be some very big reasons this is also incompatible.

[ryan]

Interesting, that FAQ answer is pretty clear. So they want us to pay $99 and then it can be included in the open source project. I'm okay with that part of it. But that still wouldn't make it GPL compatible, I don't think. That is, unless someone could then take Redactor out of ProcessWire and then use it for something else (also GPL) without paying them the $99 fee? I don't think that would be okay with the Redactor developers. Too much ambiguity for lawyers to have fun with. If we build a module out of this, it would have to stay non-core (3rd party), and not sure exactly what license could accompany it, but I'm sure there's something.

[renobird]

If it can indeed become a 3rd Party module, I'm willing to contribute cash if someone is will to create the module.

[Soma]

If it can indeed become a 3rd Party module, I'm willing to contribute cash if someone is will to create the module.

That would have to be loooots of cash then. Because you'll need to create a image and a link plugin and also some configuration etc.

[Pete]

Ah, yes. He has a good point there - it's not as straightforward as it seems.

[renobird]

Ah, right — jQuery is not going to handle any of that.

[Pete]

Nope. Looking at InputfieldTinyMce.js file though it looks like ryan created/adapted some custom TinyMCE plugins to handle that stuff though, so they should be possible to port over:

var InputfieldTinyMCEPlugins = ['pwimage', 'pwlink', 'advimagescale'...

The drawback is they'll likely need some rewriting to work with Redactor as well as the fact that to work wtih TinyMCE they were written in normal Javascript (which is fine since they're specifically for working with TinyMCE which doesn't use jQuery).

[ryan]

Because you'll need to create a image and a link plugin and also some configuration etc.

That's assuming a full implementation that duplicates all that's being done with TinyMCE. But a simple implementation that uses Redactor's built-in tools for this stuff could be done more easily. Though, I don't think that ProcessPageEditImage or ProcessPageEditLink are dependent upon TinyMCE. Or, if they are, that dependency isn't necessary. So it should be possible to use these processes with other editors (maybe with a few tweaks). The stuff that's in the pwlink and pwimage plugins is primarily just a way to connect the Process modules to TinyMCE, so would just need to code something similar for Redactor. True, it's not super-simple, but I'm guessing it'd be a lot simpler using Redactor's API than it is with TinyMCE.

[Pete]

I think some of it might be easier than we think - all it wants to hook into the current list of images for a page for example is a JSON file, so I'm wondering if you could pass it a JSON string instead of the suggested file: http://redactorjs.com/docs/settings/#set_imageGetJson

It's the other functionality that would take more time - resizing etc, but it is of course all do-able.

[ryan]

I think that much of it would be simpler to implement than with TinyMCE, as the API looks super-simple and straightforward. At the same time, I don't think this editor is anywhere near as broad in scope as TinyMCE, but it probably crosses over with much of what we like TinyMCE for. I don't think we'd want to put a lot of time into building full integration around this editor, given the ambiguous license that says it's GNU compatible but obviously isn't. But I do think it's worth some trial and experiments. Rather than have anyone buy a developer license, we'd probably just include in the instructions where to download Redactor and where to put it's files. Then if people are really liking it, we can go for the developer license to make installation a 1-shot deal. But I think we'll have to keep this 3rd party (non-core) to avoid license interference.

[onjegolders]

Not sure in its integration with Processwire but it looks gorgeous