RLASKEY::words

Tag Archives: JS

youmightnotneedjquery.com

So this is nice, if as a somewhat canonical list if nothing else. JS has changed a lot over the years, and what we attribute to libraries are done largely in the browsers themselves. I can get behind that.

New Theme: Dec/2013

I’ve had more or less the same theme on this site for quite a while. I’ve tweaked it slightly over the years, and I recently launched enough changes that I’m willing to call it “new”.

Open Sans

First up is a change in the default font. I first found Open Sans when Mozilla switched to it as a default in Firefox for Android. It’s beautiful, and it has a great, open license. I’ve used it internally for a while, putting it at the front of the CSS font selection and installing it on all my devices.

This time, however, I’ve set it up via the WOFF version using CSS @font-face, so any device that doesn’t have it natively can now enjoy it. This was also inspired by WordPress’s use of the same font in v3.8. It’s a great choice, and everyone should see it more often. I also went with the Light version of the font, which reads well and looks even a tad more elegant.

Sidebars and Infinite Scrolling

Pinterest was, to my knowledge, the first big site to allow for such functionality, and the Infinite Scroll feature in Jetpack has a great rendition of it. It’s relatively easy to enable, though it’s harder to allow with sidebars. In responsive, mobile-friendly sites, the sidebars can easily fall below infinity, meaning their content is never to be seen.

I “fixed” this issue by removing the sidebar entirely, and putting the functions in my primary navigational menu up top instead. This currently makes for a relatively wide area for text, yet there’s more white space which allows images and other media to shine a bit brighter.

Touch-friendly Menus

My next task was to try and sort out CSS hover menus in as few lines as possible. Here’s what I sorted out:

It’s relying on the fact that jQuery is loaded up for the other Jetpack plugins, and the fact that we’re given the rather nice CSS class menu-item-has-children from WordPress to seek out only the hierarchical menu items. It seems to work nicely. Let me know if you have suggestions or problems with it.

async your scripts!

I’m not that much of a JavaScript ninja, though I’m trying to get there. The new hotness in the field definitely seems to be loading everything asynchronously, which allows the page to load first, and the JS to sprinkle in afterwards to litter the page with whatever special sauce. In my case, I’m running this site on WordPress, and most sites now have JavaScript loaders for the various “share this link” buttons. I came up with this solution which is now working quite well for me, so I wanted to share:

<script>
function(){
	var s = document.getElementsByTagName('script')[0];

	var asyncScripts = new Array(
		'http://platform.twitter.com/widgets.js',
		'http://widgets.digg.com/buttons.js',
		'http://connect.facebook.net/en_US/all.js#xfbml=1'
	);

	for (var i = 0; i < asyncScripts.length; i++) {
		var l = document.createElement('script');
		l.type = 'text/javascript'; l.async = true;
		l.src = asyncScripts[i]; s.parentNode.insertBefore(l, s);
	}
})();
</script>

Rather than include the <script> tags at every instance, place this at the bottom of your HTML, and edit the array asyncScripts to match the JS files you want to load. Everything is wrapped in an anonymous function, which just goes through each item in that array and loads the corresponding script. As a result, the share buttons don’t block loading the rest of the page, and each required resource is only loaded once rather than N times for each N button on the page.