Saturday, April 14, 2012

Popup form with Javascript & CSS

Ready to use popup report form with radio buttons built using pure JavaScript and CSS. If you would like to understand more of its internal functionality, I would suggest taking a look at this comprehensive course:  

JavaScript for beginners - learn by doing

The CSS style:

<style>
#overlay {
     overflow: auto;
     position: fixed;
     left: 0px;
     top: 0px;
     width:100%;
     min-height:100%;
     z-index: 1000;
     background:rgba(0,0,0,0.6);
}

#overlay div {
     width:450px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:left;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  border-radius:6px;
}

#upprev_close{
background:  white;
    border:0;
    color: #929292;
    float: right;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
 cursor:pointer;cursor:hand;
}

#report_form input[type="radio"] {
   display:none;
}

#report_form  label {
    display:table;
    background-color:#ddd;
    padding:4px 11px;
 cursor:pointer;cursor:hand;
 border-radius:3px 3px 3px 3px;
 margin: 0.3em;
}

#report_form  input[type="radio"]:checked + label {
    background-color:#bbb;
 box-shadow: -1px 0 5px orange;
}

</style>
The HTML + JavaScript:
<script type="text/javascript">
function report(c_id) {
    var form = document.createElement("form", "report_form");
    form.id = "report_form";
    form.method = "post";
    form.action = "index.php?mode=post_comment";
    var reply_place = document.createElement("div");
    reply_place.id = "overlay";
    var inner_div = document.createElement("div"), button_close = document.createElement("button");
    button_close.id = "upprev_close";
    button_close.innerHTML = "x";
    button_close.onclick = function () {
        var element = document.getElementById('overlay');
        element.parentNode.removeChild(element);
    };
    inner_div.appendChild(button_close);

    var legend = document.createElement("legend");
    legend.innerHTML = "Why do you want to report this?";
    form.appendChild(legend);

    var input1 = document.createElement("input");
    input1.type = "radio";
    input1.id = "nudity";
    input1.value = "nudity";
    input1.name = "options";
    var radio_label1 = document.createElement("label");
    radio_label1.htmlFor = "nudity";
    radio_label1_text = "Nudity";
    radio_label1.appendChild(document.createTextNode(radio_label1_text));
    form.appendChild(input1);
    form.appendChild(radio_label1);

    var input2 = document.createElement("input");
    input2.type = "radio";
    input2.id = "attacks";
    input2.value = "attacks";
    input2.name = "options";
    var radio_label2 = document.createElement("label");
    radio_label2.htmlFor = "attacks";
    radio_label2_text = "Personal attack";
    radio_label2.appendChild(document.createTextNode(radio_label2_text));
    form.appendChild(input2);
    form.appendChild(radio_label2);

    var input3 = document.createElement("input");
    input3.type = "radio";
    input3.id = "spam";
    input3.value = "spam";
    input3.name = "options";
    var radio_label3 = document.createElement("label");
    radio_label3.htmlFor = "spam";
    radio_label6_text = "Spam";
    radio_label3.appendChild(document.createTextNode(radio_label6_text));
    form.appendChild(input3);
    form.appendChild(radio_label3);

    var submit_btn = document.createElement("input", "the_submit");
    submit_btn.type = "submit";
    submit_btn.className = "submit";
    submit_btn.value = "Report";
    form.appendChild(submit_btn);

    submit_btn.onclick = function () {
        var checked = false, formElems = this.parentNode.getElementsByTagName('input');
        for (var i = 0; i < formElems.length; i++) {
            if (formElems[i].type == 'radio' && formElems[i].checked == true) {
                checked = true;
                var el = formElems[i];
                break;
            }
        }
        if (!checked) return false;
        var poststr = "c_id=" + c_id + "&reason=" + encodeURI(el.value);
        alert(poststr);
        return false;
    }

    inner_div.appendChild(form);
    reply_place.appendChild(inner_div);

    var attach_to = document.getElementById("wrapper"), parentDiv = attach_to.parentNode;
    parentDiv.insertBefore(reply_place, attach_to);

}
</script>

<span style="cursor:pointer;cursor:hand;" onclick="report(127);">Report this!</span>
<div id="wrapper"></div>

As you can see to trigger the modal form you'll have to run the function report(); whereas input parameter you could pass the id of an item, article or comment you want to report.

Another example is this small JavaScript function that will invoke itself after 15 seconds, fading the screen and placing a box with asynchronously loaded Facebook like button. It's very useful if you want to promote a page in front of your visitors. Usage: just replace place_your_application_id with your facebook application id which you can find here: https://developers.facebook.com/apps

<script>
function fb_pop(){
  var b = document.getElementsByTagName("body")[0], d = document.createElement("div");
  d.id = "facebook_overlay";
  var c = document.createElement("div");
  c.id = "dyn_facebook";
  c.innerHTML = 'Do you like this page? <div id="fb-root"></div><fb:like layout="button_count" show-faces="false" send="false" href="' + document.URL + '" width="150px"></fb:like><span id="facebookClose">X</span>';
  b.appendChild(d);
  b.appendChild(c);
  a = document.createElement("script");
  a.src = "//connect.facebook.net/en_US/all.js#appId=place_your_application_id&xfbml=1";
  a.async = !0;
  a.id = "fbjssdk";
  b.parentNode.insertBefore(a, b);
  document.getElementById("facebookClose").onclick = function() {
    c.style.visibility = "hidden";
    d.style.visibility = "hidden"
  }
}
setTimeout(fb_pop, 15000);
</script>

The 2 CSS rules:
 #dyn_facebook { width: 250px; height: 250px; margin-left: auto; margin-right: auto; position: fixed; top: 50px; left: 35%; z-index: 30; background: #fcfcfc; border-radius: 6px; padding: 1em; }
 #facebook_overlay { width: 100%; height: 100%; opacity: 0.8; filter: alpha(opacity=80); position: fixed; top: 0px; left: 0px; z-index: 20; background: #FF8B00; display: block; }

Enjoy learning!

Sunday, April 08, 2012

How to test your PC reliability

It's always good to know that your computer is stable. This way you'll ensure running critical operations smoothly without any crashing. Here I'll show you a few reliable programs for CPU and memory testing.

How to test the CPU
I've been using IntelBurnTest which includes Intel libraries used exclusively for CPU testing prior to its market release. IntelBurnTest software is compatible with AMD processors and tests faster than Prime95. Just make sure that your testing system is equipped with proper cooling.
Tips:
Prior testing please download and run Realtemp - this way you can watch in real-time the temperature - and make sure it's below 70°C.
Prime counts determine the memory size used in the test.
Residual values must be equal or less e^-09 i.e. e^-10, e^-11, and so on.
Residual Normalized should be between e^-02 and e^-04. (from 0.01 to 0.0001)
Numbers outside these ranges indicate that you experience memory or CPU errors.
Try at least 10 or 20 passes.
When having more than 2 GB RAM running on the 32-bit version of Windows please use the tests on a 64-bit version of Windows in order to allocate the whole memory(above the 2GB addressing space).


Linux users could use: http://www.netlib.org/benchmark/hpl/

you may also try:
http://systester.sourceforge.net/downloads.html
and CPU Stability Test

Memory testing
I've been using: memtest86+

http://www.memtest.org/

SuperPI mod

If during work you happen to see: picture flickering, activation and deactivation of small pixels on the screen or computer halts after heavy usage it's probably your video card or the installed memory slots. If however after testing your memory with memtest86 the problems persist and your video card is embedded then your filtering capacitors are getting old or just don't function properly. They pollute the data stored in your computer memory - remember that its shared memory is being used by the video card. In such a case it's better to replace the capacitors with new ones.

Improving Adsense eCPM / RPM and CPC

There are some things that anyone could do to increase his/her income when using Adsense.
You can learn a bit more about the SEO topic from my online course.

1. Decrease your ad units count
Second and third ad spot clicks are not so-profitable as the first ones. Also when having 15 ad links on a page and the user clicks on only 1 then your eCPM will start to get low, because this way the advert impressions are growing but the clicks are staying the same.

2. Rearrange ad spots
Look at your AdSense performance tab: and if you have higher CPC on your middle positioned ad(ie it is getting more clicks) then place it to appear first in your HTML code, then re-position it with CSS to the place where it's getting those clicks.

3. Add more useful content to the page
You can use Google Analytics or other web statistics software to see the average time of stay on your pages. This way you might find the pages that need to be enriched or rewritten. And if you manage to increase visitors'  stay time then your eCPM will surely grow!
 
Next, let's discuss how to increase your Adsense earnings by improving the eCPM ( RPM ) parameter.

4. Direct hits and RPM
By definition, RPM is ' the amount of revenue you can expect to earn from AdSense for every 1000 impressions shown on your site ' which is something totally different from how much 1000 impressions on your site actually cost!

And as you can see from this video:


in order to have high eCPM you'll have to ensure unique visitors are clicking on your ads.

But first, let's see how to recognize some of the actions that "repeated" users (or our direct traffic hits) perform. They usually:
-  type the URL in the browser / open a new tab or access the URL from bookmarks.
-  come from links found in email/newsletter, Word or PDF files.
-  come from redirects (301 header redirect, javascript or meta refresh tags)

As you might have seen in the video above there's an inverse connection between your eCPM value and the traffic you have. In other words: receiving more mixed(not unique) traffic in effect will only lower your eCPM.

Filtering direct hits
So as you can see our first priority becomes not the obvious one to get more traffic in order to display more ads, but to display relevant ads to our organic public segment only ( i.e. users coming from search engine queries). This way we'll be displaying fewer ads, but the eventual incoming clicks are going be much more valuable.

Here is a simple PHP script that will filter out most of the direct hits and display advertisement only to users coming from google:
Assuming that your AdSense code is placed in the variable $ads;
<?if (strstr($_SERVER['HTTP_REFERER'], "google")) { echo $ads; }
?>

or the more generic one: displaying ads on the referral only traffic by filtering out hits generated from your own domain:
<?
$referer = parse_url($_SERVER['HTTP_REFERER']);
$my_domain = parse_url($_SERVER['HTTP_HOST']);
if (!strstr($referer['host'], $my_domain['host'])) {echo $ads; }
?>

5. Increasing bounce rate
I know that this may sound very frustrating like everyone out there is suggesting just the opposite, but after watching the video you may start thinking about it.

6. Update your ads with the asynchronous version of the code
This will improve your page loading times as well as display the ads faster to the end-user. Just go to My ads, click on the preferred ad -> get code and from the select box choose the Beta async version.

7. Don't mix ad channels
If you are using 1 ad code in different websites placed at different positions this will interfere and alter the ad basic parameters, and with time will limit your overall cost per click value. This is especially true if you are using targeting options.

That's it, don't forget to write unique content and I hope this post helps you actually increase your AdSense earnings!

Saturday, April 07, 2012

SEO thin content check

Thin content is not easy to be explained, but because it became more popular during the Panda update here are some things that you can do in order to represent your website in a more favorable light to the search engines.
You can learn a bit more about the SEO topic from my online course.
Some examples and fixes of thin content follow:

1. Target: Duplicate content caused by sessions, referral or page order/filtering parameters appended to the end of the page like: ?orderby=desc that doesn't change the actual content on the page or just reorders the same content. Also if your website has AJAX back button navigation, or just a login system with session IDs appended to the end of the URL, as well as frames with tracking ids attached. Just look at the different URLs on the picture below, representing same content:duplicate content from url
URL parameters, like session IDs or tracking IDs, cause duplicate content, because the same page is accessible through numerous URLs. 
Solution (to session appended URLs):
After long searching the following technique from webmasterworld's member JDmorgan succeeded to get ~90% of my website content fully indexed. Here is how to implement this technique on practice using apache .htaccess.
Just put the following lines in your .htaccess file and test:

1) Allow only .html pages to be spidered
#allow only .html requests
RewriteCond %{query_string} .
RewriteRule ^([^.]+)\.html$ http://your_website.com/$1.html? [R=301,L]
2) Remove all the sessionid from the URL parameters, when a page is being called by bots
#remove URL sessionids
RewriteCond %{HTTP_USER_AGENT} Googlebot [OR]
RewriteCond %{HTTP_USER_AGENT} Slurp [OR]
RewriteCond %{HTTP_USER_AGENT} msnbot [OR]
RewriteCond %{HTTP_USER_AGENT} Teoma
RewriteCond %{QUERY_STRING} ^(([^&]+&)+)*PHPSESSid=[0-9a-f]*&(.*)$
RewriteRule ^$ http://your_web_site.com/?%1%3 [R=301,L]

2. Target: 301 header redirects chain
A chain of 301 redirects could cause you a loss of PageRank i.e. lead to thin content. So please check that your 301 redirects are final i.e. they point to an end page and not to another redirect page. You can use LiveHTTPHeaders extension to do this kind of check.

Solution: fix your redirects!

3. Target: Because it is thin
Pages with content < 150 words or 10 visits during the whole year. You can check out the latter with Google analytics by looking at your content pages, ordered by page-views setting time range of 1 year backward. Find and fix those URLs!

Solution: Either remove/nofollow or block with robots.txt or rewrite/merge the content.

4. Target: Heavy internal linking:
By placing multiple links on a page to pages/tags/categories you are reducing the particular page's power. This way only a few pages supported by lots of incoming internal links are considered as not thin by Google Panda algorithm.

Solution: You need to clean up the mistaken links on that page by adding rel = "nofollow" to the outgoing links or better remove (rearrange to bottom) the whole section (tag cloud, partner links, etc...) from your website.

5. Target: Percentage of URLs having thin content
Google maintains two indexes: primary and supplemental. Everything that looks thin or not worthy (i.e. doesn't have enough backlinks) goes to the supplemental. Factor when determining thin content is the percentage of indexed and available via search to its supplemental pages a particular website might have. So the more pages you maintain in Google's primary index the better. It is possible that your new (already fixed) and old (thin) content now fights for position on Google's search. Remember that the old content already has Google's trust with its earlier creation date and links pointing to it, but it is still thin!

Solution: Either redirect the old to the new URL via 301 permanent redirect or log in at Google's Webmaster tools then from Tools->Remove URL typed your old URLs and wait. But before this you'll have to manually add meta noindex, nofollow to them and remove all restrictions in your robots.txt file in order to get the Google to apply the index,nofollow attributes.

Q: How to find thin content URLs more effectively?
Sometimes when you try to find indexed thin content via: site:http://yourwebsite.com you won't see their full list.

Solution:
  • use the parameter "-" in your query:
    First, do a site search site and then consecutively remove the known and valid URLs from the results.
    "site:http://yourwebsite.com -article"
    will remove all URLs like article-5.html, article-100.html, etc... This way you'll see the thin content pages more quickly.
  • when you know the thin content page name just do
    site: http://yourwebsite.com problematic_parameter
    ( ie.:"site:http://yourwebsite.com mode" this will show all of the indexed modes of your website like: mode=new_article, mode=read_later, mode=show_comment etc... Find out the wrong ones and do a removal request upon them. )

Enjoy and be welcomed to share your experience!
---
P.S. If you don't have access to .htaccess file you could achieve the above functionality using the canonical tag - just take a look at these SEO penalty checklists series.
More information on the dynamic URLs effect to search engines as well as how to manage them using yahoo's site explorer you can find here: https://web.archive.org/web/20091004104302/http://help.yahoo.com/l/us/yahoo/search/siteexplorer/dynamic/dynamic-01.html

Subscribe To My Channel for updates

Burnout or toxic culture ?

Outsourcing companies are hell to be in for an experienced programmer, because managers are being allowed to mistakes, which are covered, th...