Category Archives: Web

State of the Chaos

2012

It’s been quite a while since I posted anything, so I thought I’d give you an update on what I’m working on. School is still a major time sink, so I don’t know when any of these things will be finished.

This Website

Wait, WordPress 3.3.1 is out already? My ancient custom theme only works on an ancient version of WordPress, so it’s about time for a new one. I have a design in mind, but I haven’t started building it yet.

Opera Extensions

The latest Opera 12.00 snapshots have a vastly improved Tabs and Windows API. Tab Vault was made when said API sucked (as of Opera 11.62, it still does). I’ve rewritten much of the backend code to be able to take advantage of the new features. Now I’m waiting for the bugs in the new API to get fixed.

Transcriptions

I’m currently about 2/3 done transcribing βίος-δ (Bios-delta) from Guilty Crown. I may attempt to transcribe the piano version of Light My Fire from Shakugan no Shana Final next, though the only available audio clips I have are from the show with people talking over the song. (If anyone can help me find all the episodes and times where the song is played, that would be most helpful!)

GlassCalc 2

So, it turns out writing a parser is hard. Who knew?  My new plan is to use ANTLR to generate a parser. I now have a mostly-working grammar based on a grammar for Python. It doesn’t yet understand that 2 x y should be evaluated as 2*x*y, but I may insert the multiplication operators before sending the expression to the parser (as I’m already doing in GlassCalc 1.x) because making the parser recognize this seems to require backtracking, which is slow. Given the computing power of modern computers and that the average expression isn’t very long, (compared to say a C++ source code file) this slowdown might not make much a difference.

I am also trying to balance power with ease of use in the new syntax. For example, can the value of a variable be a function? If not, (x + 1)(x + 2) would evaluate to x2 + 3x + 2 as it has in GlassCalc 1.x. If so, it would mean “try to call the result of (x+1) as a function and pass x+2 as the only argument”. At the moment, I’m leaning towards functions not being able to be stored as variable values, as I think the alternative is very powerful, yet very confusing.

Mangafox Userscript Version 1.3

2010

I discovered a bug in my Mangafox userscript where it failed to clear old entries from its cache.  This update fixes that bug as well as a few others.  In Opera, the script was showing up in the debugger on pages other than mangafox.com.  Just to be safe, I added an extra check to make sure it would only be loaded on mangafox.com.

This update also adds a ‘Reload page’ button which might save you in the rare instance that a page never loads.  If clicking it once doesn’t help, double click it and it will force the browser to redownload the image.  I also renamed the ‘clear cache’ button  to ‘Reload chapter’ since that better describes what the button does.

If you use d.i.z.’s fantastic UJS Manager extension, most of the script settings can now be edited directly from UJS Manager.  If you don’t, the settings section will be a little harder to read, but it should still be manageable.

Download Mangafox Ajax Preloader version 1.3 for Opera or for Firefox (same file, different names)

Adsense, Without Blocking

2010

My web pages pause at ads for a moment. Why?

In some (but not necessarily all) web browsers, if you place a script in the middle of a web page, it has to be executed before the browser can continue rendering the page. The AdSense script is quite slim, but your browser still has to request the JavaScript file from Google, which could take a while depending your Internet speed. This means your pages might load up to the ad, pause a little while, then continue loading. Fortunately, there is a very simple way to keep scripts from blocking your content: put them at the end of the page. This way, all your content is loaded before the scripts are downloaded and executed. Unfortunately, this also puts all your ads at the bottom of the page, but with a little JavaScript, you can put your ads back where they belong.

How to fix it

First, you’ll need some sort of placeholder for where an ad should go. Use a div and set its id so you can easily find it with JavaScript. If you have multiple ads, number the ids so you can replace them all with a loop.

<div id="ad-0"> <!-- the first ad goes here --> </div>
<div id="ad-1"> <!-- a second ad goes here --> </div>

Now, place the AdSense JavaScript at the end of the page. Put each ad inside a div with an id so you can easily find it with JavaScript. Put the everything in a div with display set to none so your ads won’t briefly appear at the bottom of the page.

<div style="display:none">
  <div id="adsource-0">
    <script type="text/javascript"><!--
    google_ad_client = "pub-xxxxxxxxxxxxxxxx";
    /* Ad Name */
    google_ad_slot = "##########";
    google_ad_width = 125;
    google_ad_height = 125;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
  </div>
  <div id="adsource-1">
    ...
  </div>
</div>

Finally, use JavaScript to move each ad to its proper place. This script uses document.getElementById to find the ad and the placeholder, then it uses appendChild to move the ad into the placeholder div.

<script type="text/javascript">
numAds = 1;
for (var i = 0; i < numAds; i++) {
    source = document.getElementById("adsource-" + i);
    placeholder = document.getElementById("ad-" + i);
    placeholder.appendChild(source);
}
</script>

How well does it work?

Consider this entire site a live tech demo. Refresh the page and watch under the “Advertisements” header of the sidebar. After all of the content is loaded, the ads pop into place.

It breaks my layout!

With this setup, the placeholders initially take up no space, so they expand when the ad gets loaded. If this breaks your layout, you can set the height and width of the placeholder to the dimensions of the ad like this:

<div id="ad-0" style="width: 125px; height: 125px"> <!-- this placeholder takes up space! --> </div>

Edit (A bit later, still June 4)

Apparently, this is what I get for writing a post about AdSense. See? This is why we can’t have nice things.