18 December, 2015 - MSM Explained, Social Media Like/Share/Plus Added
By Jason M. Knight (aka Deathshadow)

The Roaring Giant
Welcome to my house. I'm delighted you could come. I'm certain you will find your stay here most illuminating. Think of me as your unseen host, and believe that during your stay here I shall be with you in spirit. May you find the answer that you seek. It is here; I promise you.

...and now, auf Wiedersehen.

New Article

It feels weird publishing the article explaining the tagline of this site nearly a week after launch, but as it cross-references the other posts, it kind of had to come after.

The extra time was nice anyways so I could dot all the t's and cross all the i's... or... uhm... wait? eh, whatever.... In any case check it out from the link in the featured section or right here.

Social Media Like/Share/Plus

Finally got the social media plugins for the site added, adding both FaceBook like/Share, as well as Google+. While there are certainly more networks out there, that simply adding these two things added two megabytes and nearly 20 files to the site, multiplying it's size by a factor of 30 or more means that's IT for adding scripting I didn't write to the site. It's just not going to happen given what fat bloated messes those are.

Kind-of sucks such ineptly developed code is basically a "must have" at this point, but since so many sites have it on them at least there's a decent chance of it being cached. They are also nice enough to send it gzipped so it's more like ~500k by that point. It's also not as huge a penalty as the scripts (and the advertising I sorted out some bugs with, get to that in a sec) don't hit you as hard on load time as they are "asynchronous" while the page is loading, and don't fire loading the extra "stuff" until after onload. This means this site loads in half a second, and then it's 2 to 20 seconds for the advert, social media and disqus comments areas to load.

Get you to the content fast, add the bells and whistles over time. I guess I'm ok with that even though those sizes still rub me the wrong way.

Adsense + Firefox "responsive" bug, I fixed it!

Since I launched the site I had noticed that Firefox would often not load the ads. I narrowed the problem down to that if the advertising script was cached in the browser, the ads were guaranteed not to show. When it wasn't in the cache it was hit or miss... which from my experience usually means a load-order problem.

Looking at their code for the script:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-123456789" data-ad-slot="123456789" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

The first thing they try to do is load their adsbygoogle.js script asynchronously. This means the browser will push on setting up that script to load in the background, only runnning it when that background-load is finished. It's a good way of minimizing the damage of fat bloated scripts when you don't need or want to hang the browser on it.

Digging deeper, I found that when the script was cached and sometimes when it was loading, it was creating that window.adsbygoogle property, which doesn't work in Firefox! It gets to there, it blows up in your face... so what to do about that?

Reverse the code order!

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-123456789" data-ad-slot="123456789" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

...and just like that? Boom, problem solved! Something SO SIMPLE!

So still making progress on this. Even more is in the works, but apart from more articles the fancy stuff is "It's done when it's done". I'd rather have long delays between new features and content than to just slap things up any old way and hope for the best.

Projects

  • elementals.js
    A lightweight JavaScript library focusing on cross browser support, ECMAScript polyfills, and DOM manipulation.
  • eFlipper.js
    An image carousel script using elementals.js
  • eProgress.js
    A JavaScript controllable progress bar using elementals.js. Based on the nProgress project that relies on the much heavier jQuery library.

/for_others

Browse code samples of people I've helped on various forums. These code snippets, images, and full rewrites of websites date back a decade or more, and are organized by the forum username of who I was helping. You'll find all sorts of oddball bits and pieces in here. You find any of it useful, go ahead, pick up the ball, and run with it.

Advertisement

Best Viewed With Eyeballs