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

Online spyware removal

spyware

(part of the Windows course :)

Note: if you don't have access to Windows Safe Mode - which is essential when cleaning viruses: before scanning with these applications I suggest you download and run from a flash drive Hitman pro. If it doesn't succeed try with a bootable CD running Kaspersky  then launch the WindowsUnlocker feature. Only then you can continue with MalwareBytes.
Here is a list of free online anti-spyware tools that will help you to clean up a PC from spyware trojans and viruses. Compared with the standard anti-virus software they have the following:

  • Advantages:
    - no need for application installation on your computer.
    - online scanners use the latest antivirus definitions.
  • Disadvantages:
    - some online scanners like Kaspersky online scanner and Panda Active Scan list only viruses they find without cleaning them. (Panda Active scan actually only finds viruses but cleans up spyware). This way they could be used for a system check only.
    The following compact anti-spyware tools have a small size that will not affect your system's performance, and will not slow down your application loading time. So give them a try and don't forget to update the definitions first!
  • A-squared Web Malware Scanner
  • SuperAntiSpyware makes a sophisticated spyware analysis on your systemsuper anti spyware 
  • Anti-Spyware for the web from TrendMicro HouseCall
  • Microsoft Security Essentials
  • Norton's Symantec on-line security scan and virus detection 
  • F-Secure Online Virus Scanner
    f-secure
Before you scan your PC
Some of the online scanners require specific access to run. Under Windows, if you notice at the upper part of the screen the Information Bar click on it and select Enable, Install or Run the file from the context menu.
Information Bar

Some online scanners work in Internet Explorer browser only and require ActiveX controls to be turned on. You can enable ActiveX by switching to menu Tools on Internet Explorer:

Internet explorer security options
1. Go to Internet Options.
2. Then on the Security tab, click on Default Level.

Another way of enabling ActiveX is to add the antivirus program's website to your Trusted sites:
1. Go to Internet Options -> Security Tab -> Trusted sites.
2. For the Security Level for this zone click on the button Custom level...
3. Fill in the full address of the website you want to have access to in the input field Add this website into this zone & uncheck the mark on Require server verification(https:) for all sites in this zone.
4. Check the availability of ActiveX scripting in Internet Explorer. In the field Security level for this zone click on Custom level button and under ActiveX controls and plugins enable:

Automatic Prompting for ActiveX controls
Download Signed ActiveX controls
Download Unsigned ActiveX controls
Initialize and run ActiveX controls that are not marked as safe
Run ActiveX controls and plug-ins
Script ActiveX controls marked safe for scripting

Virus removal tools
If you really know what virus has infected your PC you can browse through major antivirus providers databases and download tools that will specifically clean up your computer at a much higher speed. Sometimes there are some virus variants that are not so easy to clean up so you can try downloading several different cleaning utilities in order to have a broader spectrum for catching the intruder. These tools need to be downloaded and run as standalone applications:
Avira
BitDefender
AVG
Kaspersky
McAffee

And if you think that you have infected file you can always send it for a check to:
https://virusscan.jotti.org/
Protection tool
SpywareBlaster - prevents the installation of spyware, adware, dialers, browser hijackers, and other potentially unwanted programs. It will also protect your Internet browser.
Usage
:

  1. Under “Quick Tasks” click “Download Latest Protection Updates”.
  2. Click the “Check for Updates” button.
  3. After updating, click “Protection” near the top.
  4. Under “Quick Tasks” click “Enable All Protection”.
spyware blaster

How to save time?
Instead of testing all the on-line scanners you can first run a quick check & clean procedure with Dr.web's CureItRun the application and go to Options -> Change settings. Choose the "Scan tab" and Uncheck "Heuristic analysis". Then click on the Start Scanning button.

Last but not least you must definitely try the great free Anti-malware scanner/cleaner offered from MalwareBytes:

Happy cleaning!

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...