New Dreamweaver Like jQuery Color Picker

A small change to the Code Generator: it now has a new Dreamweaver like color picker. This little jQuery plugin was developed by me (and it’s my very first jQuery plugin too!). It’s very light… only 5 KB minified.

Dreamweaver-like Color Picker

The plugin is based on a Dreamweaver like color picker library I found a few years ago… around 2008-2010, and which was originally developed by Michael Mifsud. For a while I was looking for a jQuery plugin that would generate a similar color picker, but couldn’t find any, so I decided to roll up my sleeves and develop my own. Et voilà.

Like with the previous color pickers used in the Generator, you can enter your own HEX code to match the colors of your blog/website:

Dreamweaver like Color Picker

You can enter your custom HEX code

Or select your preferred colors from the browser safe palette:

Dreamweaver like Color Picker

Select your preferred web safe (or browser safe) colors from the color picker.

If you enter your own HEX code, you can set your color by just pressing [Enter], and the color picker will automatically close.

I really liked the color picker I originally used, but the way you would attach it to the text field elements was a bit “bulky” which would increase the web application footprint a little more than I wanted; that’s why I started looking for jQuery alternatives… those I used until now were nice, but I really wanted a Dreamweaver like color picker but written using the jQuery framework. Again, like I said before, since there was none, I wrote one myself and, well, I’ve implemented it on my Generator.

Even though I tested it as thoroughly as possible, my plugin is still in version 0.2.0, so if you find any bugs, feel free to let me know.


Misuse of Modal Windows

There’s nothing more annoying than the misuse of modal windows to call for certain actions such as subscribing to a mailing list or “like” the site or article on Facebook.

Whoever came up with this “idea” should be put in a corner facing the wall for a month!

I find it very rude when I visit a website looking for information on something that interests me, and within 1 or 2 seconds into reading whatever article called my attention, I’m presented with an annoying modal window asking me to either subscribe, like, or follow them on Twitter… Let me at least finish reading the stupid article!

This poor practice is not only rude (yes, I already said that), but it makes the reader lose his/her concentration on whatever they were reading; at least, that’s what happens to me.

Because I don’t want to click on the Modal Window to close it – some have even disabled closing such windows if you click anywhere on the page – I either reload the site or just leave and look for the information I need elsewhere, and never visit the “offending” site again.

Am I getting all riled up for something so insignificant? Sure, maybe I am, but I don’t think it’s insignificant at all, because that’s how bad practices grow. Because some people think “Oh! if such and such sites do it, it must be good, so I’ll do it too!”… Well, would you jump off a cliff if…

Use modal windows appropriately (e.g. for users’ actions, like login onto a website), not just because….

In the article 10 Rules to Follow for Popups and Modal Windows, Stéphanie Walter wrote a great comment on this annoying practice – I’m glad to see am not alone on this (emphasis my own):

But as a user, I would say that the best modal on a website is no modal at all. I’m speaking here only about the modal that you get when you arrive on the website. I just can’t stand the current trend that forces every website I open to throw me a big modal in my face asking for my email to subscribe to newsletter. Hey guys I did not have a chance to look at your content yet, do you really think I’ll give you my email address ??

Full comment.

Remember, just because a lot of sites implement this practice, it doesn’t make it a good one.

Mrs. Happy Homemaker implements an elegant way to invite her readers to subscribe to her newsletter; it doesn’t interfere with the articles they’re interested in and, in my opinion, is a more effective way to get more subscribers. The way she does it is by having a bar at the top of her site:

Mrs. Homemaker

Mrs. Happy Homemaker Subscription Bar

I like to cook so I’ve visited her site a few times. One of the reasons I keep coming back to read her recipes is because I appreciate her not showing one of those stupid modal windows every time I do.

If you’re in the practice of showing modal windows in a bad way, I’d like to encourage you to stop doing it; that said, I’m not going to tell you how to run your site… all I can do is to put this on the table for you to consider, and think about how it may affect your site’s traffic.

The more you know…

Generator Bug

Some users have reported having problems using the Generator; pressing the “Preview” button would not work.

Based on my tests, it seems this behavior only happens in Internet Explorer and Safari, and now I’m working on a solution. Please be patient until I have this bug fixed.

If you have another browser installed on your computer (e.g. Firefox or Chrome), please use it, the generator works well in those browsers.

I’ll update this post as soon as I have fixed it.

Also, I’d like to thank those who brought this issue to my attention.

ADDENDUM 20160601:
The bug has been fixed and the generator should work well in both Safari and Internet Explorer. If for some reason you are still experiencing a problem, make sure to force reload your browser by pressing Ctrl+R on Windows/Linux Command+R on Mac. If it still doesn’t work for you, try closing your browser and reopen it again. If after all that you still experience problems with the Preview button, by all means, don’t hesitate to let me know either by posting a comment here or through the contact form.

Automatic Image Resize

Because the optimal maximum width of a blog button is 200 pixels, if the width of your button image exceeds that number, the application will automatically resize it to 200 pixels wide. In the preview, you will see a message letting you know that your image was adjusted to the maximum width “allowed” as shown in Fig. 1:

Example - Fig. 1

Fig. 1

If you’re concerned I’m directly modifying your image, well, I’m not; I’m just resizing it on the fly.

Thanks to @kymoDragon for the suggestion.

Changes to GBCGEN

Little by little I’ve been working on some changes to GBCGEN. Even though the look is slightly different, the major changes were made “behind the scenes.”

The HTML was updated to HTML5, and I’m using more CSS3. Also, the way the generated code is presented is different: After you click the “Get Code” button, a container with your code will slide up from which you can grab it; additionally, you now have the option to download the code and save it on your computer for backup.


Besides Spanish, I’m planning to translate the application into more languages, at least French and Italian, and thanks to my girlfriend’s help, I’ll be implementing Japanese soon.

If you’d like to help to localize and translate the GCBGEN to your native language, please feel free to contact me.

If you find any bugs, by all means, let me know.