In order to improve Glowing Face Man, I'm gonna teach myself JavaScript tonight. The main thing I'm looking at is setting it up so the AdSense advertisements don't show up for regular readers, just for visitors from search engines. In Wordpress, there's a plugin to do this, but my attempt to convert to Wordpress wasn't as smooth as I was expecting. My plan now is to eventually code my own custom http server so I have 100% control over publishing, but that's long term. For the short term, I'll look into meeting my short term needs with JScript. Since one of the things I write a lot about here is the art of being an autodidact, I figured I'd go ahead and blog the learning experience.
The first step was to find a tutorial. Since I'm already a master coder (primary language C), I'm looking for a no-nonsense one which gets right to the point. A quick glance through the tutorials from google shows about half of them are aimed at people who have never written a line of code before ("Java script tutorial for the total non-programmer") and the other half are trying to sell me an online certification (w3schools). I settled on Webmonkey's JavaScript Tutorial, which looks like about what I'm looking for. Maybe a little on the beginner side still, but I guess I can't expect too many guides written specifically for someone with over a decade of programming experience already. Webmonkey's walkthrough seems to get to the point ok, with just a handful of lessons, and they have an "advanced" tutorial as well as an introductory one.
Since I'm still using neighbors' wifi right now and it's not the most reliable connection, I went ahead and opened all the pages in separate tabs, loading them now while I do have a connection. Now I don't have to worry about the whole project getting interrupted if the connection goes down.
9:45 PM: Began reading the first lesson of the basic introduction. I'm listening to DJ Project- an excellent dance group from Romania- while I work.
10:01 PM: Done. Ok, it looks like the syntax is very similar to C, so this should be a piece of cake. (Since I already taught myself C years ago.) I spent more time switching songs in Youtube than reading... I skipped the exercise because this is pretty easy stuff so far. On to Lesson 2!
10:34 PM: And, the similar to C begins to fade as we get into strings. I think I'm the last person on earth who actually loves the nitty gritty null-terminated stringery of C. But hey, life's all about adapting to new situations. Of course a web-language like JScript can't have the omnipotent power of arbitrary pointers, or people could use it to steal our credit card numbers.
Ahh, now I'm starting to see some of the magic of this language. Apparently, you can name different elements on your page (links, images, etc.) and then use that name to manipulate them in realtime. Brilliant :)
As before, I'm skipping the exercises. Thanks, Webmonkey-- it's the thought that counts! On to leccion 3.
11:10 PM: It's a little annoying that Webmonkey is going into a lot of detail about launching and manipulating new windows. The guide was evidently written before tabbed browsing. Noone launches new windows nowadays, and even if it weren't for everyone having tabs, why would I want to harass my awesome readers with popups? But the main point is obviously just to illustrate the Document Object Model. On to Lesson 4...
11:44 PM: Functions, loops, and arrays were covered in this chapter. Pretty basic stuff, but it's interesting seeing how they're done here. Or I should say, how they're integrated into HTML. The actual code itself is basically just C++ with built-in web-related machinery and without pointers. In otherwords, basically Java... On to Lesson 5, the last part of the "basic" material!
12:17 AM: All finished with the "basic" stuff. That last section was just pointless bells and whistles. Nothing I'm really interested in for glowingfaceman. The main thing is, now I understand what I need: I just need the names and documentation for the machinery for checking how a reader got to my website. So I can suppress ads for regular readers and just display them for people coming from search engines.
One way to get this info would be to look up a reference of all the built-in tools that come with JScript. But a possibly faster way would be to just look at some code which I know uses that machinery. The most obvious example is the Google Analytics script which a lot of websites (including GFM) have. So, I opened a new tab, cruised on over to Glowing Face Man, and went to "View Source". I searched "javascript" and started looking through the scripts on my own page. Suddenly they make a lot more sense than they did before. They're doing lots of stuff Webmonkey didn't talk about, but with the basics I got over the last three hours, I'm easily able to figure out what's going on. I also didn't realize how many scripts FeedBurner inserts. Why are those all necessary? I'll have to look into it later.
Anyway, I found the code for Google Analytics. It looks pretty obfuscated. But after unravelling it, I figured out the main GA script is downloaded from "http://www.google-analytics.com/ga.js" (unless you were viewing the page over an encrypted connection, in which case the main GA script comes from "https://ssl.google-analytics.com/ga.js").
Without further ado, I manually downloaded the main GA scriptfile to peruse it. Geez, it's a real mess! At first I thought it was intentionally run through a code obfuscator, but then at further glance, I found the various search engine names unencrypted. Thus, it seems it's not intentionally obfuscated, it's just not written by a human. The ga.js file is most likely "compiled" into JScript from a source in some higher level language. That's actually similar to what I do for metadata here at GFM (metadata is data only meant for the search engines, and includes things like keywords and descriptions). In Blogger, the only way to give an individual article unique meta-data is to hardcode it into the template, but that's a ton of work, so I made a list of URLs and metadata's and then wrote a quick C program to "compile" my list into Blogger template format. The drawback is that my metadata only updates when I get around to recompiling the list, so the most recent articles lack metadata.
After staring at the Analytics code for ten minutes, it looks like you can simply use "window.referrer" to get the referring site to see who sent a reader to your blog. I tested this in a "sandbox" blog and got "undefined", so that's a no-go. Well, I saw "a.referrer" at one point and "a=window" at another, so I assumed that meant we were looking at "window.referrer", but it turns out the variable "a" is overused a million times in this crazy script, and after another twenty minutes of straining my eyes, I couldn't figure out what exactly the "a" in "a.referrer" was! Enough of this, I'll just go to google and do a search. I searched for "how to check referrer in javascript". Hey, at least the Analytics script gave me the right field to search for! The very first result, "Fun With The Referrer Property", will do fine. And, glancing at that, I was pretty close: the correct answer is document.referrer.
With that, I now should know all I need to know to kill ads for regular readers. If you're a regular reader, look forward to those ads disappearing! :)
FURTHER READING
Read my article How I Taught Myself Calculus, and I'll guide you along the journey that took me from a flunking math student in junior high to a math PhD student and teacher.
For some computer programming analogies applied to real life time management, check out Defragmentation For Your Life.
For a much longer (about 30x longer) liveblog of me self-teaching myself, check out the liveblogging I did of my French In 30 Days challenge.
The first step was to find a tutorial. Since I'm already a master coder (primary language C), I'm looking for a no-nonsense one which gets right to the point. A quick glance through the tutorials from google shows about half of them are aimed at people who have never written a line of code before ("Java script tutorial for the total non-programmer") and the other half are trying to sell me an online certification (w3schools). I settled on Webmonkey's JavaScript Tutorial, which looks like about what I'm looking for. Maybe a little on the beginner side still, but I guess I can't expect too many guides written specifically for someone with over a decade of programming experience already. Webmonkey's walkthrough seems to get to the point ok, with just a handful of lessons, and they have an "advanced" tutorial as well as an introductory one.
Since I'm still using neighbors' wifi right now and it's not the most reliable connection, I went ahead and opened all the pages in separate tabs, loading them now while I do have a connection. Now I don't have to worry about the whole project getting interrupted if the connection goes down.
9:45 PM: Began reading the first lesson of the basic introduction. I'm listening to DJ Project- an excellent dance group from Romania- while I work.
10:01 PM: Done. Ok, it looks like the syntax is very similar to C, so this should be a piece of cake. (Since I already taught myself C years ago.) I spent more time switching songs in Youtube than reading... I skipped the exercise because this is pretty easy stuff so far. On to Lesson 2!
10:34 PM: And, the similar to C begins to fade as we get into strings. I think I'm the last person on earth who actually loves the nitty gritty null-terminated stringery of C. But hey, life's all about adapting to new situations. Of course a web-language like JScript can't have the omnipotent power of arbitrary pointers, or people could use it to steal our credit card numbers.
Ahh, now I'm starting to see some of the magic of this language. Apparently, you can name different elements on your page (links, images, etc.) and then use that name to manipulate them in realtime. Brilliant :)
As before, I'm skipping the exercises. Thanks, Webmonkey-- it's the thought that counts! On to leccion 3.
11:10 PM: It's a little annoying that Webmonkey is going into a lot of detail about launching and manipulating new windows. The guide was evidently written before tabbed browsing. Noone launches new windows nowadays, and even if it weren't for everyone having tabs, why would I want to harass my awesome readers with popups? But the main point is obviously just to illustrate the Document Object Model. On to Lesson 4...
11:44 PM: Functions, loops, and arrays were covered in this chapter. Pretty basic stuff, but it's interesting seeing how they're done here. Or I should say, how they're integrated into HTML. The actual code itself is basically just C++ with built-in web-related machinery and without pointers. In otherwords, basically Java... On to Lesson 5, the last part of the "basic" material!
12:17 AM: All finished with the "basic" stuff. That last section was just pointless bells and whistles. Nothing I'm really interested in for glowingfaceman. The main thing is, now I understand what I need: I just need the names and documentation for the machinery for checking how a reader got to my website. So I can suppress ads for regular readers and just display them for people coming from search engines.
One way to get this info would be to look up a reference of all the built-in tools that come with JScript. But a possibly faster way would be to just look at some code which I know uses that machinery. The most obvious example is the Google Analytics script which a lot of websites (including GFM) have. So, I opened a new tab, cruised on over to Glowing Face Man, and went to "View Source". I searched "javascript" and started looking through the scripts on my own page. Suddenly they make a lot more sense than they did before. They're doing lots of stuff Webmonkey didn't talk about, but with the basics I got over the last three hours, I'm easily able to figure out what's going on. I also didn't realize how many scripts FeedBurner inserts. Why are those all necessary? I'll have to look into it later.
Anyway, I found the code for Google Analytics. It looks pretty obfuscated. But after unravelling it, I figured out the main GA script is downloaded from "http://www.google-analytics.com/ga.js" (unless you were viewing the page over an encrypted connection, in which case the main GA script comes from "https://ssl.google-analytics.com/ga.js").
Without further ado, I manually downloaded the main GA scriptfile to peruse it. Geez, it's a real mess! At first I thought it was intentionally run through a code obfuscator, but then at further glance, I found the various search engine names unencrypted. Thus, it seems it's not intentionally obfuscated, it's just not written by a human. The ga.js file is most likely "compiled" into JScript from a source in some higher level language. That's actually similar to what I do for metadata here at GFM (metadata is data only meant for the search engines, and includes things like keywords and descriptions). In Blogger, the only way to give an individual article unique meta-data is to hardcode it into the template, but that's a ton of work, so I made a list of URLs and metadata's and then wrote a quick C program to "compile" my list into Blogger template format. The drawback is that my metadata only updates when I get around to recompiling the list, so the most recent articles lack metadata.
After staring at the Analytics code for ten minutes, it looks like you can simply use "window.referrer" to get the referring site to see who sent a reader to your blog. I tested this in a "sandbox" blog and got "undefined", so that's a no-go. Well, I saw "a.referrer" at one point and "a=window" at another, so I assumed that meant we were looking at "window.referrer", but it turns out the variable "a" is overused a million times in this crazy script, and after another twenty minutes of straining my eyes, I couldn't figure out what exactly the "a" in "a.referrer" was! Enough of this, I'll just go to google and do a search. I searched for "how to check referrer in javascript". Hey, at least the Analytics script gave me the right field to search for! The very first result, "Fun With The Referrer Property", will do fine. And, glancing at that, I was pretty close: the correct answer is document.referrer.
With that, I now should know all I need to know to kill ads for regular readers. If you're a regular reader, look forward to those ads disappearing! :)
FURTHER READING
Read my article How I Taught Myself Calculus, and I'll guide you along the journey that took me from a flunking math student in junior high to a math PhD student and teacher.
For some computer programming analogies applied to real life time management, check out Defragmentation For Your Life.
For a much longer (about 30x longer) liveblog of me self-teaching myself, check out the liveblogging I did of my French In 30 Days challenge.
Posts
3 comments:
I've been looking into learning JavaScript for a while now also I self taught myself XHTML and CSS a while ago which were easy but never started with Javascript will have to have another look into it when I get some time.
Also I know what you mean about transferring over to wordpress it caused so many problems with things not moving over etc I ended up staying with blogger and finding many tips/hacks to do the things I wanted.
This is what you are looking for:
https://developer.mozilla.org/en/JavaScript
Btw, have noticed that you can use functional programming style to write JavaScript code?
If you are serious about JavaScript and are thinking about custom solutions, I'd recommend AppJet. It's a server-side JavaScript framework. You could easily write an entire blogging app in under 1000 lines. And the URLs can be whatever you want.
Post a Comment