How to Display Alternate Content to AdBlock Users

Ad blocking software like AdBlock and Ghostery are installed on millions of computers and thus affecting the bottom line of web publishers who are dependent on online advertising networks like Google AdSense to pay their bills. It takes time and effort to maintain a website but if the visitors are blocking ads, the revenues are reduced. Ars Technica says this is equivalent to running a restaurant where people come and eat but without paying.

As a website publisher, you have a few options. You can detect Adblock on the visitor’s computer and hide your content if the ads are being blocked. That’s going too far but you may ask for donations (OK Cupid does this) or request social payments (Like or Tweet to view the whole page) from AdBlock users.

The other more practical option is that you display alternative content to people who are blocking ads. For instance, you may display a Facebook Like box or a Twitter widget in the place of ads, you may run in-house ads promoting articles from your own website (similar to Google DFP) or you may display any custom message (see example>>>)

to the visitor.

Before we get into the implementation details.  It contains regular AdSense ads but if you are using an Ad blocking software, a Facebook Like box will be displayed inside the vacant ad space.

It is relatively easy to build such a solution for your website. Open your web page that contains Google AdSense ads and copy-paste the following snippet before the closing

tag. The script looks for the first AdSense ad unit on your page and if it is found to be empty (because the ads are being blocked), an alternative HTML message is displayed in the available ad space.

You can put a Facebook Like box, a YouTube video, a Twitter widget, an image banner, a site search box or even plain text.

<script> 
  
  // Run after all the page elements have loaded
  window.onload = function(){ 
  
    // This will take care of asynchronous Google ads
    setTimeout(function() { 
      
      // We are targeting the first banner ad of AdSense
      var ad = document.querySelector("ins.adsbygoogle");
      
      // If the ad contains no innerHTML, ad blockers are at work
      if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
        
        // Since ad blocks hide ads using CSS too
        ad.style.cssText = 'display:block !important'; 
        
        // You can put any text, image or even IFRAME tags here
        ad.innerHTML = 'Your custom HTML messages goes here';
      
      }
      
    }, 2000); // The ad blocker check is performed 2 seconds after the page load 
  }; 
  
</script>


One more thing. The above snippet only detects blocking of AdSense ads and replaces them with alternate content. The process would would however not be very different for BuySellAds or other advertising networks.

Find How Many Visitors Are Not Seeing Ads on your Website

Adblocking software like AdBlock Plus have become mainstream and now pose a significant threat to web businesses that are dependent on online advertisements. The problem is so severe that Google and Amazon are paying the writers of AdBlock Plus to whitelist their ads. This may be seen as some kind of extortion but with billions of dollars at stake, the advertising companies have chosen to take the more profitable route.

It is estimated that ~5% of website visitors are blocking ads (PDF report) and the situation could be far worse for websites that have a more tech-savvy audience. If you are curious to know how many people visiting your own site are blocking AdSense and other ads, here’s a little trick.

Track Adblock Users with Google Analytics

Open your website template and copy-paste the snippet below before the closingbody. This code will detect the presence of adblocking software on the visitor’s browser and, if found, an event gets logged into your Google Analytics account.

<script> 
  
  window.onload = function() { 
  
    // Delay to allow the async Google Ads to load
    setTimeout(function() { 
      
      // Get the first AdSense ad unit on the page
      var ad = document.querySelector("ins.adsbygoogle");
      
      // If the ads are not loaded, track the event
      if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
 
        if (typeof ga !== 'undefined') {
 
            // Log an event in Universal Analytics
            // but without affecting overall bounce rate
            ga('send', 'event', 'Adblock', 'Yes', {'nonInteraction': 1}); 
 
        } else if (typeof _gaq !== 'undefined') {
 
            // Log a non-interactive event in old Google Analytics
            _gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
 
        }
      }
    }, 2000); // Run ad block detection 2 seconds after page load
  }; 
  
</script>

The snippet works for both Universal Analytics and the older version of Google Analytics tracker that used the _gaq object. As a web publisher, your only option is to serve alternate content to AdBlock users so the visitors at least see some content in place of the ads.

One big caveat though – it will fail if the ad blocking extension installed on the visitor’s computer has blocked Google Analytics as well. Some of the popular choices like μBlock, NoScript and Ghostery do block Google Analytics so the approach won’t work and you may have to build your own in-house solution – like downloading an image hosted on your own server and then counting the hits to that image through the Apache server logs.

How I Make Software Demos using Animated GIFs

Animated GIFs, like the ones you see below :

are easy to produce and can be used for short software demos, help videos and everything else that doesn’t require audio narration. Here are some reasons why an animated GIF may be a better alternative to screencast videos:

• People love sharing animated GIFs on social sites, especially Tumblr and Google Plus. Facebook doesn’t support animated GIFs yet but that could change.
• Animated GIFs render inside any browser without requiring plugins and, best of all, you may embed the GIF images in your email newsletters as well.
• Now that Google Image Search supports GIFs, your image-only screencasts have a better chance of getting discovered. Remember to use proper Alt and Title tag swith the images.

Bret Victor’s excellent writeup on Learnable Programming includes several micro-videos that explain the concepts of programming. Bret has used HTML5 (MP4) videos but such short video demos are also a perfect candidate for GIF animations.

Screencasting with Animated GIF Images

I have previously written a guide on creating GIF screencasts using a free tool called Screencast-o-Matic but there are a few downsides with that approach – one, you need Java on your machine to record the screencast video and second, the GIFs carry a watermark (or you upgrade to the paid version).

There are other alternatives though.

The GIF screencasts that you have seen on Digital Inspiration are mostly produced with Camtasia Studio. When you are done recording your screen with Camtasia, press Ctrl+P to open the Production Wizard, choose Custom Production Settings from the drop-down and then select GIF for the file format.

                 Produce animated GIF screencasts with Camtasia Studio

GIF files can become large and it is therefore important that you choose the most optimized encoding options. Set Colors as “Automatic” or choose a lower value for lower file size. The Dithered Color Reduction should be selected only when you are producing GIFs from videos but not for regular screen recordings.

If you are not using Camtasia, LineCAP is a good option – it is a free and light-weight utility available for both Mac and Windows.

With LineCAP, you can record your screen as well as save the recording as an animated GIF in a single step. Launch the program and adjust the frame such that it entirely encloses the scene. Hit the “Record” button, choose a name for your GIF file and start the demo. You may also move the capture frame during the recording. LineCAP produces good quality GIF screencasts and animations are smooth though the files are often large in size.

The other choice would be that you record a screencast video, use any of thesescreencasting tools, and then use a GIF encode to convert the video file into a GIF. Instagiffer and QGifer are easy-to-use tools for making GIFs from video.

                             Make Animated GIFs from Screencast Videos

Instagiffer is Windows-only and more popular while QGifer is open-source and available for Mac, Windows and Linux. If you are planning to make a short video demo or screencast that is not more than 10-20 seconds long, consider producing an animated GIF image.

Google: Stuffing Lot of Keywords in Web URLs Is Spam

This is what Matt Cutts told Stephan Spencer when asked about the optimal length of a keyword-rich URL (web address). Excerpts:

Matt Cutts: If you can make your title four- or five-words long – and it is pretty natural. If you have got a three, four or five words in your URL, that can be perfectly normal. As it gets a little longer, then it starts to look a little worse. Now, our algorithms typically will just weight those words less and just not give you as much credit.

Stephan Spencer: So, would something like 10 words be a bit much then?

Matt Cutts: It is a little abnormal. I know that when I hit something like that – even a blog post – with 10 words, I raise my eyebrows a little bit and, maybe, read with a little more skepticism.  Link.

Always Block Google from Accessing your Site’s Search Results

If you are using Google Custom Search or another site search service on your website, make sure that the search results pages   are not accessible to Googlebot. This is necessary else spam domains can create serious problems for your website for no fault of yours.

Few days ago, I got an automatically generated email from Google Webmaster Tools saying that Googlebot is having trouble indexing my website labnol.org as it found a large number of new URLs. The message said:

Googlebot encountered extremely large numbers of links on your site. This may indicate a problem with your site’s URL structure… As a result Googlebot may consume much more bandwidth than necessary, or may be unable to completely index all of the content on your site.

This was a worrying signal because it meant that tons of new pages have been added to the website without my knowledge. I logged into Webmaster Tools and, as expected, there were thousands of pages that were in the crawling queue of Google.

Here’s what happened.

Some spam domains had suddenly started linking to the search page of my website using search queries in Chinese language that obviously returned no search results. Each search link is technically considered a separate web page – as they they have unique addresses – and hence the Googlebot was trying to crawl them all thinking they are different pages.

Because thousands of such fake links were generated in a short span of time, Googlebot assumed that these many pages have been suddenly added to the site and hence a warning message was flagged.

There are two solutions to the problem.

I can either get Google to not crawl links found on spam domains, something which is obviously not possible, or I can prevent the Googlebot from indexing these non-existent search pages on my website. The latter is possible so I fired up my VIM editor, opened the robots.txt file and added this line at the top. You’ll find this file in the root folder of your website.

User-agent: *
Disallow: /?s=*

Block Search pages from Google with robots.txt

The directive essentially prevents Googlebot, and any other search engine bot, from indexing links that have the “s” parameter the URL query string. If your site uses “q” or “search” or something else for the search variable, you may have to replace “s” with that variable.

The other option is to add the NOINDEX meta tag but that won’t have been an effective solution as Google would still have to crawl the page before deciding not to index it. Also, this is a WordPress specific issue because the Blogger robots.txt already blocks search engines from crawling the results pages.

The Best Websites to Learn Coding Online

The Learn to Code movement has picked up momentum worldwide and that is actually a good thing as even basic programming skills can have a major impact. If you can teach yourself how to write code, you gain a competitive edge over your peers, you can think more algorithmically and thus can tackle problems more efficiently.

Don’t just download the latest app, help redesign it. Don’t just play on your phone, program it. — Obama.

There’s no reason why shouldn’t know the basics of coding. You can automate tasks, you can program your Excel sheets, improve workflows, you can extract data from websites and accomplish so much more with code. You may not be in the business of writing software programs but knowing the basics of coding will help you communicate more effectively with developers.

Gone are the days when you had to enroll in expensive computer training classes as now exist a plethora of web-based courses that will help you learn programming at your own pace in the comfort of your web browser.

The Best Sites to Learn Programming

If you are ready to take the plunge, here are some of the best websites that offer courses in a variety of programming languages for free. I have also added a list of companion ebooks that will give you a more in-depth understanding of the language and they don’t cost anything either.

	Online Courses & Screencasts	Programming Books (Free)
JavaScript	Code Academy, Learn Street,Code Combat, Code Avengers	Eloquent JavaScript,JavaScript Guide,Speaking JS, JS The Right Way, Oh My JS,Canvassing
HTML & CSS	Code Academy, Don’t Fear The Internet, Tutsplus, Learn Layout, A to Z CSS, Dash, Web Accessibility, The Hello World,Khan Academy, HTML5 from Scratch	Mozilla, Dive into HTML5, 20 Things I Learned, HTML Dog,HTML & CSS, HTML5 for Designers, DOM Enlightenment, HTML Canvas
jQuery	Code Academy, Tutsplus, Code School	jQuery Fundamentals,Learn jQuery
Python	Code Academy, Google, Learn Street, Python Tutor,IHeartPY	Python for You and Me,  Dive into Python, Learn Python the Hard Way,Think Python, Python for Fun, Tango with Django,Django
Ruby & Ruby on Rails	Code Academy, TryRubyCode Learn, Railscasts, Rubymonk,Learn Street	Why’s (Poignant) Guide to Ruby, Learn Ruby the Hard Way, Learn to Program, Learn Rails by Example
PHP	Code Academy	PHP Programming,Practical PHP
Also see: How to Learn Regular Expressions (RegEx)
Google Apps Script	Getting Started, Office Hours, Google Scripts Examples,Learning Apps Script
WordPress	Treehouse, WordPress TV
Linux & Shell Scripting	Stanford.edu, Explain Shell	Conquer the Command Line
Node.js	Nodetuts, Node School	The Node Beginner Book,Mixu’s Node book, Node Up and Running,Mastering Node.js
Angular JS	Code School, Egg Head, Learn Angular	Angular JS Tutorial,Thinking Angular,Angular Tutorial, Getting Started (Adobe)
Also see: Learn Touch Typing & Code Faster
Git (version control)	Code School, Git Immersion,GitHub Training, Udacity	Pro Git, Learn Git, Gists in Github
Objective-C (iOS & Mac)	Code School, Stanford, iTunesU
Chrome Dev Tools	Code School, Dev Tools Secret, Chrome Dev Tools Tutorial,Udacity, Building Browser Apps
Go Language	Golang.org, GopherCasts	Programming in Go, Go by Example, Learning Go,Building Web Apps with Go, Learning Go
Java	Learn Java, Coding Bat, Java Udemy, Learneroo	Programming in Java,Thinking in Java, O’Reilly Learning Java, Think Java, Java & CS, Java for Python Devs
Android App Development	Udacity (Google Developers), Coursera, The New Boston,Google University, App Development Essentials, Code Learn,App Inventor (Visual)
D3 (data visualization)	Data Visualization for the Web, Dashing D3, D3 Tips & Tricks
Also see: Learn VIM, the text editor for programmers
SQL (Databases)	SQL Zoo, SQL @Stanford, Essential SQL, SQL for Nerds,Intro to SQL, SQL Bolt, PHP & MySQL
Everything Else	Udacity, edX.org, Coursera, Udemy$, Lynda$, Pluralsight$,Treehouse$, Open Consortium, One Month Rails$

Teaching Kids to Code

If there are kids in the family, you should download either Tynker (Android/iOS) or the Hopscotch app for iPad and they can learn the basics of programming through games and puzzles.

There’s also Scratch, an MIT project that allows kids to program their own stories and games visually. Scratch is available as a web app or you can download it on your Mac/Windows/Linux computer for offline use. Microsoft TouchDevelop, Blockly and Alice are some other web apps that will introduce the concepts of computer progamming to your children.

On a related note, the following chart from Google Trends shows the relative search popularity of various programming languages over the last 5 years. The interest in PHP has dipped over the years, JavaScript has more or less maintained its position while the popularity of Python & Node.js is on the rise.

An Adobe Killer from Microsoft

Adobe may have killed the competition in online publishing by acquiring Macromedia. But Microsoft is not keeping quite. The next version of Windows will include a new document format, code-named "Metro," to print and share documents, Microsoft said Monday. Metro appears to rival Adobe's PostScript and PDF (portable document format) technologies.

The format, based on XML (extensible markup language), will be licensed royalty free and users will be able to open Metro files without a special client. In the demonstration, a Metro file was opened and printed from Internet Explorer, Microsoft's Web browser.

The Metro technology is likely to go head-to-head with Adobe's PostScript technology. "It is a potential Adobe killer," said Richard Doherty, research director with The Envisioneering Group in Seaford, New York. "But this is just the first warning shot. Adobe could put something that is even more compelling Longhorn. [Via]

This is not the first time Adobe and PDF have been in Microsoft's crosshairs. When Microsoft originally announced its Xdocs electronic form plans in 2002, Xdocs was seen as a threat to Adobe and PDF. Indeed, the InfoPath feature that was eventually added to Office is a competitor to Adobe's server-based document management tools, known as LiveCycle.

Whereas Microsoft is choosing to take PDF head-on, Apple Computer took a different approach when it created Mac OS X's print format. Apple uses PDF as its native printing format and also as an option for saving any Mac OS X file. Though it uses PDF, Apple did its own implementation of the format, using the PDF details Adobe has published.

In fact, one of the things that may help Adobe is that the company is not alone in supporting PDF. Because it published the basic details of the format, it finds itself competing against other PDF creation and management products. On Monday, for example, Arts PDF announced its latest PDF product, challenging Acrobat directly with Nitro PDF a $99 product for authoring PDF files. [Via] 

Macromedia FlashPaper Vs Adobe PDF

FlashPaper files are smaller than PDF files due to compression. If you compress both the pdf & the flash paper with zip, they end up about the same size. This is because swf's have built in compression while pdf's don't seem to.

Flash Player is slower than Adobe Reader especially when you make the window large, and are trying to scroll, you get a very sluggish interface (as compared to any normal application).

Dave Wraight compares Macromedia FlashPaper with Adobe PDF and feels that FlashPaper has a lot of potential to provide source content in a form that is useful inside other Macromedia technologies (Director, ShockWave, AuthorWare) and also in common web standards such as HTML.

However its future usefulness as a means to sharing content may be limited by either the underlying document format or the viewing technology.

Adobe recently acquired Macromedia and their PDF standard is already facing the heatfrom Microsoft's Metro which is being called by some as a potential "Adobe Killer".

See this PDF presentation on Web Standards: Redesigning Sydney Morning Herald 

Screencast, Photocast, Vidcast, Webcast, Skypecast, Textcast, Podcast: Differences explained

Screencasting, Webcasting, Photocasting, Podcasting, Vidcasting or Vodcasting, Skypecasting, Mobilecasting, Textcasting, Coursecasting, Blogcasting - these are all different forms of broadcasting digital content using basic hardware, software where you play the role of a actor, producer and the director. You create content on your computer and using RSS, broadcast it over the internet to be consumed by millions of people.

So let's put the techie jargon aside and try to understand these "complicated" terms in simple English so that you don't feel embarrased when someone mentions them in the next geek conference.

Podcasting - A podcast is just another mp3 file that you can play either on your computer or any portable device like the Apple iPod or Creative Zen. Podcasting refers to the entire process of creating the podcast [audio], editing and publishing to the web via RSS. Podcasting requires a microphone and audio editing software like Audacity or Adobe Audition. Mac users are lucky to have Garageband and iLife.

Autocasting - Autocast is like a cousin of podcast - the only difference being that the audio is not narrated by a human being but it has been generated automatically from the blog feed using a text to speech conversion engine. Talkr is one such Autocast service that converts the text inside RSS feeds to podcasts [mp3 files] for free.

Blogcasting - Barring a few search engines like Blinkx, most cannot index audio content. Therefore some podcasters attach a transcript of the podcast to their blog so that both human beings and search engines read [and index] what's there inside the podcast show. This is BlogCasting - blog + podcasting.

Voicecasting - VoiceCasting is the distribution of podcasts directly to a mobile phone, traditional phone, or VoIP phone. The audio is taken from a Podcast, and played back live to the listener. VoiceCasting is sometimes even referred as Phonecasting.

Mobilecasting - Like voicecasting, mobilecasting refers to downloading and listening to podcasts on cellphones. When we compare with voicecasting where the user dials a number to get the podcast,in Mobilecasting, the users subscribes to the podcast feed and automatically gets the content on his phone without making a separate request. For some, creating/recording podcasts using a mobile phone also falls under the mobilecasts umbrella. GCast is one such service that lets you record your podcast via a toll-free call from any phone.

Vodcasting - often used interchangeably with Vidcasting which essentially means creating and distributing video podcasts. Unlike Podcasting where you only require a microphone, for creating Vodcasts you need a video camera (preferably HD) and video editing software like Sony Vegas, Adobe Premiere or Apple Final Cutpro. The video on demand {vod) content is distributed via RSS feeds. Associated terms are vlogs, vlogging, vodcasts and vcasts. Rocketboom and Diggination are popular vodcasts.

Learncasting - elearning via feeds - Learncasting is a category of podcasting or even vodcasting that aims deliver educational content. Stanford University professors are already putting their lectures on iTunes. Also know as podagogy.

Webcasting - The term webcasting is usually reserved for referring to non-interactive linear streams or live events like Product launches, stockholder meetings or reporting quarterly earnings. A webcast is similar to a broadcast TV show but designed for internet transmission. Webcast clients allow a user to connect to a server, which is distributing (webcasting) the webcast, and displays the televisual content to the user. 

Related: Desktop Screen Sharing.

Skypecasting In simple terms, Skypecasting means recording your Skype conversations, conference calls and interviews for inserting in podcasts. The person who does the recording is known as a SkypeCaster while the recorded audio is called a SkypeCast.

Photocasting is a new way of sharing photos accompanied by music or narrations. It's like sending your photo album to your friends and family, and having it change automatically on their computers when you update it on yours. When your grandmother subscribes to your photos [photocasts], she'll see them in her iPhoto library just as you see them in yours.

Screencasting According to Jon Udell, a screencast is a digital movie in which the setting is partly or wholly a computer screen, and in which audio narration describes the on-screen action. Capturing a screencast needn't be much more complicated that capturing static screenshots. Screencasts are excellent tools for learning how to use computers, and several podcasts have started to teach computer users how to use software through screencasts. Techsmith Camtasia Studio is pretty much the industry standard for creating screencasts.

TextCasting is just a day old term coined by Slate Magazine. Just like Blogcasting, Slate is looking to make text of some of its articles available for reading on the iPod. Lexus, which advertises on Slate podcasts, is sponsoring the textcast, with its logo appearing where the album art is usually shown and in a text ad within the story.

CourseCasting: Apple allows colleges to set up customized portions of the iTunes Music Store to distribute course content and other audio and video material. CourseCasting allows professors to record their lectures and make them available for students to download and listen to on their iPods or computers.

BlogCasting: Blogcast is just another Microsoft term to describe video podcasts for demonstrating software simulations like Screencasts. Microsoft refuses to accepts Podcasts since Pod is derived from Apple iPod which is Microsoft's rival. Members of the MSDN community produce blogcasts using Windows Media Encoder.