If you have ever been involved in opinion sharing online, be it in a forum, or the comments section or even on a social networking site, I’m sure you would have experienced first-hand people who pick fights. Most of the time, it seems like they have nothing better to do than to ruin your day with thoughtless comments, name-calling and provocations of the juvenile kind. Ever wonder why they treat you like that, and more importantly what to do when you come face-to-face (so to speak) with one?

(Image source: Who Would Win A Fight)

Here’s what we’re here to help you figure out.

Cyber-heckling: Welcoming You to the Web

First of all, whenever you are writing on the Web, bear in mind that you will sooner or later meet with people who simply do not agree with your opinions. Wherever possible, always agree to disagree, and remember that it is not your job to ‘educate’ people. You do have the social responsibility to spread awareness about new things, and provide channels for your readers to educate themselves. But that’s about it. Don’t force your opinions or judgements onto others, because that’s how fights get started in the first place.

Why do Some People Act Like Asses Online?

The truth of the matter is, these ill-tempered people exist online and off, but they are bolder when they are shielded behind a computer screen, i.e. anonymity. Being anonymous encourages boldness (not bravery – there is a difference), which in turn diminishes a person’s accountability for their actions.

(Image source: ComicalConcept)

Simply put, when you are hiding behind a fake name, you don’t act like your normal self. You may use profanity more willingly or join in with the community’s staple jokes, calling people names which you would otherwise not do in school, at a restaurant or at work. This behavioural change is separated by a very fine line. It’s so fine that you can toggle this behaviour on and off like a light switch.

Two faces of a coin

When posting in a familiar community where our comments are tethered to our real identity, it’s possible that we would be more polite, more cautious with our comments and more encouraging. That’s our neutral, politically correct mode. But when there is no one to police how we phrase our sentences, we have the tendency to be more upfront and confrontational much like when we are posting in large communities like in Youtube or in popular blog sites. With a username like Ninja_twinkletoes, you may be more inclined to release the reins a bit and let the four-lettered words fly.

You can say that it’s something like how we have a personality switch when we drive. Just to illustrate my point (and my love for Disney) here is a cartoon made more than 60 years ago called Motor mania, depicting a similar personality switch that happens when one gets behind the wheel.

So what do I do when I am cornered?

With most cyber-hecklers, they are just there for the attention. If you have one of these, do not give them the time of the day. By responding, you are giving them the attention they are seeking and encouraging them to continue acting like an ass at your expense. Just ignore his actions and responses even if he starts name-calling. You can easily spend your time on better things to do anyways.

If you feel like you are going to blow your top there and then, go do something else first and cool down. Give it a couple of days for the heat to dissipate and if the guy doesn’t come back for more, be gracious enough to leave it at that. It is easier to walk away from a confrontation on the Web than it is in the real world.

CAPSLOCK WAR

In the (rarer) occasion where the commenter has something up his sleeves, a hidden agenda, or just a grudge against you, what do you do? Well, you can join in with the screaming match and CAPS-LOCK the guy to a virtual death, or be the bigger person. Try to understand why the person said those hurtful things in the first place before falling into the trap of confronting him.

(Image source: Filehurricane)

At times, the whole hullabaloo could have risen from a simple misunderstanding. The problem with written communication is that we don’t get to use the tone of our voices to relay our message. Things can be taken out of context very easily, which is why it is very important to write with your audience in mind; be sensitive to how they may view and perceive your words. Also equally important, as the reader, give the writer the benefit of the doubt when their sentences can go either way.

We are all usually nice people offline. There’s no reason to be mean, online.

Conclusion

Bigotry – a stubborn and complete intolerance of any creed, belief, or opinion that differs from one’s own (dictionary.com) – is big on the Internet because of one simple truth. We may have the infrastructure to communicate with one another halfway across the world but society, at large, may not have the maturity to handle all our cultural differences on a global scale as yet.

Thus, the next time, you want to post a comment, put some thought into it and be sure to pick the right words to deliver your sentiments, rather than resort to heckler-style commenting.

No related posts.

Marquee was first introduced in Internet Explorer and was very popular in the ’90s before W3C ultimately decided to exclude it from the HTML standard element due to usability issues. Web designers were encouraged to not use the tag.

Surprisingly though, the marquee is now making a comeback, not in a tag <marquee> format like it did, but in a CSS Module. This module is available as part of the Webkit CSS specification and the W3C is currently working on a similar module as well. However, since the W3C version is still at the Candidate Recommendation stage, it is not applicable yet. So, at this time, we will only cover the one from the Webkit specification.

Recommended Reading: CSS Back to Basics: Terminology Explained

The Syntax

First of all, the marquee can be defined using the following shorthand syntax.

-webkit-marquee: [direction] [increment] [repetition] [style] [speed]

Each of the values needed in the syntax above, I believe, are quite self-explanatory, or else you can find them sufficiently explained at this documentation. So, if you want to dig deeper into how this syntax is going to work you can always refer to the documentation first.

Then, join us as we proceed to create some real examples and see how it in action.

Example 1: Scrolling the text

All right, in the first example we will create the classic movement of the marquee that is having the text move from right to left.

Let’s create our text markup like below:

<div class="marquee">Lollipop topping lemon drops jujubes applicake fruitcake tart liquorice sesame snaps.</div>

Then define the marquee with the following syntax.

  -webkit-marquee: auto medium infinite scroll normal;  overflow-x: -webkit-marquee;  

When the marquee direction is set to auto, it will by default move from the right to the left; alternatively you can change this value to left. Also notice that the overflow-x property has to be set to -webkit-marquee so that the content will always act like one. If you omit this property, the text will not move on.

See the demo.

Example 2: Bounce back and forth

In the second example we will try giving a different style to the marquee. This time we use alternate instead of scroll and change the direction value to right. That way, the marquee will move from the left to the right then bounce back and forth.

  -webkit-marquee: auto medium infinite alternate normal;  overflow-x: -webkit-marquee;  

See the demo

Example 3: Moving the text upwards

And for the last example, we will change the marquee direction to move upwards. There are two direction values to do so; you can change the value to up or ahead.

Personally I don’t get why the Webkit provided two values that essentially do the same thing since I think that could lead to confusion for some people.

  -webkit-marquee: up medium infinite scroll normal;  overflow-x: -webkit-marquee;  

See the demo

Furthermore, I’ve compiled some more examples but they will be overwhelming if they are all explained here.

But, you can view all the demo and download the sources from the links below.

• Demo
• Download Source

Final thought & References

I was first surprised that there is still interest in the marquee, which I thought had met its end. This also led me to question how a CSS module like this is going to be useful. In fact every browser is still supporting the legacy of the <marquee> tag.

So, what do you think? Is the marquee still relevant at this age and would it be useful in modern web design?

If you are still curious about this marquee stuff, you can visit some of the following references:

• Safari CSS Reference
• Webkit marquee generator
• Comprehensive documentation of the old <marquee> tag from Sitepoint.
• And there is always a generator for almost everything, including this Marquee Generator.

Related posts:

1. 10 Useful Dreamweaver Tips & Tricks For Beginners
2. Beginner’s Guide to CSS3
3. Beginner’s Guide To: Building HTML5/CSS3 Webpages
4. Beginner's Guide to iOS Development: Building Your First App – Part II

The recommendation bar is not something new, in fact you see it on many websites, including on hongkiat.com. It’s that box that appears to the right side of your blog or website with links to articles on your site, offered as ‘recommended for reading’ to your visitors. This is a good approach to adopt if you want to increase your pageviews, but bear in mind that not all visitors would like to be interrupted with such a floating box.

There are many recommendation bars available as plugins, but in this article, we will share with you one with viral features, with Facebook integration for a Like-happy scene fit for your Facebook-fan reader.

Recommended Reading: 5 Must-Know Facebook Timeline Tips/Tricks

Adding Facebook Recommendation bar

To add this Facebook Recommendation Bar, log in to your WordPress Admin, go to Plugins > Add New at the left sidebar, search for Facebook and click on Search Plugin.

When the result appears, click on the Install Now link.

Now click on Activate Plugin.

Create New Facebook App

Before you can use the Facebook plugin for WordPress, go to the Facebook App page and click on the button Create New App.

Fill up the form with your App Name and App Name Space, then click Continue.

Now you will be redirected to enter more details of your new app. The required details are; your Contact Email, App Domain (your blog domain), Site URL and Mobile Web URL. Click on ‘Save Changes‘ to save.

Note: For the site and mobile web URL, make sure to include http:// at the front, and end it with /

After all changes are saved, copy App ID, App Secret and the Namespace

Setting up Facebook Plugin on WordPress

Go back to your WordPress Admin > Facebook on the left sidebar, enter the details to the given columns and click on Save Changes.

Once saved, you will be redirected to the plugin options page. Check the Recommendations Bar to activate it, set the option details if needed, and click Save Changes. The options are:

1. Trigger – the percentage of the page scrolled by the reader, before the bar will appear

2. Read Time – time in seconds, of reading time by visitor, before the bar will appear

3. Action – Select to show Like or Recommend button

4. Side – where you want the recommendation bar to appear, left or right bottom of your site.

Finally, visit your own blog to test run this. Open up any article and you will see the recommendation bar appear right where you set it (left or right), with links to recommended articles as well as the ‘Like’ button.

Conclusion

The Facebook recommendation bar has a simple interface and recommends only two articles at a time for further reading. The ‘Like’ button helps you to increase the chances of getting more Likes for your article, and makes it easy to promote on Facebook.

So, what do you think of this plugin? If you have this installed already, did it help keep readers longer on your site? Let us know in the comment bellow, especially if you have a better plugin to share.

Related posts:

1. How to Prevent Yourself From Turning Up on Facebook Recommendation Ads
2. How to Rename Facebook Page Vanity URL [Quicktip]
3. Drag-drop Facebook Friend List like Google+ Circles
4. How to Browse Your Facebook Like It’s Pinterest [Quicktip]