Before you start, make sure you installed OAuth and Twitter module in your drupal site. Then you also need to sign in the twitter developers site to register your twitter application. It is very simple to create a twitter application. Just fill out your application details. When you finish it, you will find Consumer key and Consumer secret. Keep it and you will use it in your Drupal site.

Now, let us go module page and find twitter module. First step is configuring it. Go to  Configuration -> Web services -> Twitter -> Setting.  In the “OAoth settings” section,  it says that “To enable OAuth based access for twitter, you must register your application with Twitter and add the provided keys here.” Fill the Consumer key and Consumer secret there and go click the “Twitter” label on the top-right of page. In this page, you need to add “Twitter account name” information. If you add twitter account succeed, it will show on the list. The module allows you add multiple twitter account.

After configuring the twitter module, Drupal will create a view calls  “Tweets”. There are three items in this view, Tweets Raw, Block and Tweets. The last piece of the puzzle is working on those items for your site. You can add new items here as well.

Yeah!

Flat vs 3D

Seems like the design world is pushing hard to give us the beauty and clutter free experience of flat user interfaces. From Windows Phone and Metro interfaces, to Google’s ever so slight gradients on button hover; we are simply waiting for Apple to wow us with their interpretation, and release us from the evil skeuomorphism. But, I have to admit, I have a very soft spot for hyperbolized 3D of yore.

This is not just nostalgia. There was something very comforting about knowing what areas of the screen are actionable, not to mention the great feeling of the button receding into the screen when mouse button is pushed down. Quite a tranquilizing experience; I spent many holding the mouse button down as I hovered the cursor over and then away from the button, not being able to get enough of that tactile feeling.

Skeuomorphism

Now, skeuomorphism has been done wrong very many times – Interface Hall of Shame has many examples of that and other snafus. Most recently I’ve been annoyed by iBooks’ useless and fake pages that broder the content. If they were serving as indication of roughly how big the book is, and telling me how far along in the book I am – well, it would be a great feature! But as it is right now, it is but a failed opportunity. Worse, it has to be consciously ignored, as my real books don’t lie to me like that. Don’t get me wrong, I actually have nothing against simulated leather, cloth or paper backgrounds. I do like how they look, and think they can ofter be nicer than a plain colour that flat UI pushes on us; but that is just matter of personal taste so I wouldn’t proclaim that universally texture is better design than plain colour.

Anecdotal GMail Usability Challenge

What I think is a little bit more objective is the usability of flat UI. I think it is really hard problem to make the interface offer affordability and discoverability if you are trying really hard to make everything look “clean”. I’ll give example of what I mean by exploring the GMail interface.

Here’s a challenge: help your mother-in-law to send an email from her new Chromebook. She is a first time computer user, and you can only use phone to communicate (given how there is no remote assistance functionality in sight). Go!

First instinct is to let them know to look for a “Compose button“. But nothing in there looks like a button. Remember the 3D-ness of Windows 3.x buttons? Well, GMail Compose button is slightly more subtle.

Hm, it doesn’t really look like a button. Well, if you hover over it, and you have really sharp vision, you will notice a bit of drop shadow and a gradient appear, so it looks slightly more buttonish. So you change your strategy and tell your mother-in-law to look for “Compose in a biggish red rectangle in the top left of the screen”. Since there is so much text, and scanning the screen looking for rectangles isn’t really one of the skills people tend to hone, it takes a bit of effort:

• Do you see the +Name in the top left?
• … Yes
• See “Google” below it?
• .. Yes
• Do you see “Gmail” below that?
• . Yes
• And right below is Compose!
• Yes!

For sure, next time it will be much faster, but this wasn’t pleasant the first time. People have lots of experience looking at real buttons,  and if “compose” looked more like one, I propose that this would have been a simpler task.

But fun isn’t over quite yet. Now, what did the compose button, located in the top-left portion of the screen do exactly? Why, it opened up the new message box in the bottom-right, of course. Makes total sense. If at least it provided some animation of it popping out of the button so that while your attention is focused on the compose button, you can be made aware of what is happening. Tunnel vision is real, and another session of looking for the newly opened window and  blinking cursor therein begins…

GMail Message Composer

There are some problems with the new message box, too. While you are in recipients box, it actually says  To and has Cc and Bcc buttons on the far right of the entry line. The only indication that you can click the To or Cc and Bcc is if you hover over them; then you are greeted with and underline, a tooltip and a hand mouse cursor. But click out of the recipients box and you no longer see the To, Cc, or Bcc buttons. I was never a fan of disappearing UI elements, whether they are disabled or just currently not 100% relevant, i still like to have some indication where they are, maybe hide them behind ellipsis or something.

I mean, there is some logic and vague consistency behind the UI elements in Gmail:

• Actionable buttons are coloured rectangles. Except when they are just an icon.
• Navigation and new dialogs are open by piece of text that underline on hover, or the cursor turns into hand, or both. Except for the Compose button, which simply opens a new window and neither changes the cursor nor it becomes underline.

Given that pretty much everything drawn on screen can be interacted with in GMail, the challenge is pretty big on making it both look clean and be discoverable. But I think there is room for improvement that would help newbies and veterans alike get the most of the interface.

Veterans need help?

Ok, last rant, I promisse. After a short hiatus from GMail (I don’t use @gmail much these days) I was looking for my Google Contacts. I remember it being a link on the left side, so I started looking there. Please come along for the ride.

Step 0: Look around. It’s not immediately visible:

Step 1: OK, I see the “More” with a downward triangle on the left side, how about there?

Nope

Step 2: Hm, Google Contacts is a Google product. What if I click the More link in the nav bar?

Nope. (Don’t bother clicking “Even More”, it’s a lie)

Step 3: Heeey, there is a tiny arrow next to giant GMail text?

Success! I guess that technically it’s as easy as 1,2,3. Boy, do I ever feel stoopid for not figuring it out sooner….

Joking aside, while I am able to just chalk it up to awkward UI and not beat myself over a little hide and seek game, beginner users are likely to think of themselves as not being capable to understand any UI at all, it and they may have less courage to explore all the features of a product.

Let me list them below.

1. Spambot – https://drupal.org/project/spambot

How – Verifying registration attempts against the Stop Forum Spam (www.stopforumspam.com) online database.
Pros – No annoying captcha to enter; free
Cons – I think it only protects the user reg form, not good enough (?)
2. Spamicide – https://drupal.org/project/spamicide

How – Adds an input field to each form then hides it with css, when spam bots fill in the field the form is discarded
Pro – no annoying captcha to enter; free
Cons – The spam bots may learn this trick and avoid this field in future.
Similar to this HoneyTrap idea: http://www.newblood.com/blog/drupal-customization-drastically-reducing-spambot-user-registration/

3. Spam – https://drupal.org/project/spam

How – By applying lots of filters to flight spams
Pro – no annoying captcha to enter; free
cons – lots of settings/filtering to do; lots of maintenance work

4. AntiSpam – https://drupal.org/project/antispam or Mollom – https://drupal.org/project/mollom

How – A web service that runs hundreds of tests on the comment and returns a thumbs up(ham) or thumbs down(spam)
Pro – no annoying captcha to enter, good spam stop rate
Cons – not free for large sites; you give out form data to third-party for review.

5. reCAPTCHA – https://drupal.org/project/recaptcha

How – A website service from Google to ask user to enter text shown on image
Pro – good spam stop rate; free; you can control to show recaptcha at any form (to apply or not)
Cons – Sometimes the image is hard to read and that gives user troubles

6. CAPTCHA – https://drupal.org/project/captcha

Pro – easy math questions or easy-to-read images
Cons – too simple for good spam bots

Personally, I would go for reCAPTCHA as it’s free from Google with good spam stop rate.

Although it’s annoying or sometimes hard to read, it provides an audio option to ease the process.

You can use multiple module combined, like reCAPTCHA and Spamicide together to achieve better rate.

Hope this is somehow helpful to you, happy fighting~

I think there must be a easy solution on Google; however, after trying several, most of the codes only work when the content
gets first loading.  After loading some other contents, the height is not auto-resizing.

At the end, I came up with a very easy solution. In order to auto-resize the iframe, here is the idea:

The iframe itself must report its PARENT window with a new height. So in PARENT window, we can reset the iframe height.

Here is the code for the parent: (include in <script> or a .js file)

function alertsize(pixels){
    pixels+=32;
    document.getElementById('iframe_id_here').style.height=pixels+"px";
}

Please replace “iframe_id_here” with the iframe id that you assign to your iframe.

Here is the HTML code for the iframe content.

One trick is to use <div id=”iframe_div_wrapper”></div> to wrap around your whole <BODY> content.

So when the content in your iframe is loaded, we use the height of this <DIV> to be the height of the new iframe.

Here is the JS code for the iframe content:

window.onload = function() {
	property_div = document.querySelector('div#iframe_div_wrapper');
	final_height = property_div.offsetHeight;
	parent.alertsize(final_height);
};

Another trick is the “parent.alertsize()”. We got the height of the DIV Wrapper and ask the iframe parent to resize this iframe.

Nice and easy? I think this works in most of browsers. I have tried it on IE/FF/Chrome.

Hope it will work for you too

In this post, I would like to introduce 2 simple  UI libraries based on jQuery which will make your form pretty and enhance its functionality.

(Focused on Datepicker and Chosen UI)

1. Datepicker: Let your site visitor select a date with the ability to set minimum/maximum date and sorts of options

Have an input field with id = ‘datepicker’, and do this to initialize the datapicker:

Date: <input type="text" id="datepicker" />

 <script>
    $( "#datepicker" ).datepicker();
  </script>

MinDate:

$( "#datepicker" ).datepicker({ minDate: new Date(2007, 1, 1) });

Remember to use “new Date” to insert a new javascript date object with preset date. Same for MaxDate.

setDate:

$( "#datepicker" ).datepicker( "setDate", new Date(2013, 1, 1) );

Hide / Destory:

$( "#datepicker" ).datepicker( "hide" );
$( "#datepicker" ).datepicker( "destroy" );

There are lots of methods and attributes to control your datepicker, and I will leave it for you to find out.
Just in case, if you are wondering if there is a Timepicker which has similar  features of the Datepicker?

Yes, here you go: http://trentrichardson.com/examples/timepicker/

This author implements this Timepicker based on the jQuery UI Datepicker. You can even have a Datetimepicker!
Feel free to take a look.

2. Chosen UI

Need not to say more after you visit the link! Just include this library and do this on your form object:

$(".chzn-select").chosen();

I really like the new multiple selection which won’t take up a huge space on UI and also
allow user to deselect with ease.

You can even dynamically update the list with jQuery and just remember to refresh the list by calling the ”liszt:updated” event.

$("#form_field").trigger("liszt:updated");

———————————————————————————

If you have never used these javascript libraries before, you definitely have to try them out.
Believe me, you will love them as I do.

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

If you are interested, feel free to try it out! And you can see some demos here!

However, during project development, I have encounter two errors with PIE.

1. Do not use jQuery.clone()
   - With clone(), the unique pie ID which is attached to each image is also cloned to the new object. That causes the IDs not unique anymore and therefore,
   the PIE behaviour is not what we expected. Please find a workaround instead of using clone().
2. Weird image floating around when doing button enable/disable or show/hide
   -  I guess it’s pretty frequent that you need to disable or hide the button. But guess what?! The background of the rounded button is not hidden, and is floating somewhere.
   There’s an easy fix  to this problem. Create a wrapper to button and show/hide the wrapper. You can still disable the button itself.

   For example:
   in HTML:

   <div id="button_wrapper"><input type="submit" value="submit" name="submit_form"></div>

   in jQuery:

   $("#button_wrapper).hide();

I hope this information is useful to you and save you some hours of work

If you plan to build a Drupal site for your business, can you add your MyEmma mailing list in your site? Yes, you can.

You can find and download Emma Block module here.  The module provides MyEmma.com mailing list registration via a content block and account registration.

After you install the module, the key job is how to configure it and make it works.

First, go to module page in your Drupal site. find  the  Emma Block module and click “Configure”.

In the “Setting” section, you can finish your general setting in this page. Include the URL for registration page, block title and so on.

Next step is add your mailing list. Go to “Add mailing list” section. In this section, you will fill your “List name”, “Emma account ID”, “Public API Key”, “Private API Key” and “Group ID”. Only the “List name” option you can fill anything there, the other options you will find all the information in your MyEmma account.

After you finish all the options, Emma Block will create a block calls “Emma Mailing List Block” in your Drupal site.

The last step is setting up ”Emma Mailing List Block” in a page that you want and styling it.

Drush fl: list all available features for the site.
Drush fc: list features components.
Drush fe: export a feature from the site into a module.
Drush fu: update a certain feature.
Drush fr: revert a feature in the website that has been overridden.
Drush fr-all or Drush fra: revert all enabled feature modules on the website.
Drush fd: show a diff of a module. For example a module that has been overridden by the database.

For example the following command will export all the exportable components of a website into the foo feature:

Drush fe foo \*

Or the following command will export all the views into the foo feature:

Drush fe foo views_view

You may think it is really simple, just adding a “_blank” value inside the Target section in the view configuration. If you do this, all the links generated from this view will open a new window when you click it. The user cannot control it.

How to make it work?

Let’s start from the content type. When you create a new content type, add a new label that name could be “Open URL in new window”. It is does not matter what the name is.  Field type  is “Boolean” and widget is “Single on/off checkbox”. Setting up the “On value” is “_blank” and keeping “Off value” empty. You also can choose use field label instead of the “On value” as label. It is convenience to understand what the option is.

Then when you  add a new content by using the content type you just created, you will find a new option named  “Open URL in new window”. Select it, Drupal gains the “_blank” value.

Job is not done, now let’s create a content view. In order to make the link works well base on your control, add a content named “Open URL in new window” in the fields section. Select “Exclude from display” in the configure field box. Next you will add a link field, it could be content title, content body, images, nid and so on. Drupal does not care about what kind the element you choose as a link. The key is how to configure it.

In the configure field box, go to “Rewrite results” and choose “Output this field as  a link”. Set up the “Link path” section, usually, the value should be “[path]“. Open “Replacement patterns” section, there a tokens list. You could find a token calls [field_open_url_in_new_window] (depends on the name you gave it). Copy it and paste it in the “Target” section. Now Drupal will know what value you chose when you added the contents.