robinadr

Posted in Web Development

I spent some time making my navigation responsive, after some plugins didn’t really work for me. It turns out it’s pretty straightforward to code your own responsive navigation using jQuery.

With most of the unrelated HTML and code for my grid system stripped out, this is what the code for the navigation itself looks like:

This is what it looks like, first on big screens and then on mobile screens:

Navigation on bigger screens

Navigation on mobile screens

I stole the idea for using <span>s for the navigation icon from Bootstrap. It’s pretty straightforward to style:

Then this is the JavaScript for all of this:

Not only does this code handle the toggling of the navigation for mobile browsers, it also watches the size of the window. If someone resizes their window down to the size needed to trigger the bar or back to full size, it will handle it gracefully.

Quick and easy.

When I started to put my redesign together, I spent a lot of time wading through the CSS grid systems out there. Between Bootstrap, Responsive Grid System, Zurb, and others, I couldn’t find a solution that I liked. All either used non-semantic classes or had grids that I found overly complex. In the end, I found a guide to making your own grid system and put together my own responsive grid.

The code is pretty simple, and you can easily customize it and put it at the top of your CSS file:

Another benefit of rolling your own grid system is becoming very familiar with how responsive designs work (with @media queries) and how grid systems work. To use the above grid system, it’s pretty easy:

A note about the instructions in that guide: it uses rem units to set the grid up, but that unit isn’t supported in IE 8. In my example above, I ended up switching to em instead.

Turns out the <slash:comments> tag was added to the core a long time ago… who knew?

I’ve updated the plugin to 2.0, and all it does now is put up a warning in the admin area saying to delete the plugin as it’s just causing an useless plugin to load.

Original Trac ticket in case you’re interested. 6 years? Has it really been that long?

You should use the Use Google Libraries plugin instead.

Update: I’ve modified the plugin to use a generic URL (.../1/jquery...) which loads the latest 1.x version. That way I don’t have to change the plugin everytime jQuery is updated.

The ZIP file has been updated, just overwrite your old googlejs.php file and everything will be gravy.

In an effort to save bandwidth, I made a quick plugin to modify WordPress to use Google’s Libraries API, which offers a Google-hosted jQuery. Here’s the code in question:

function radr_google_js( &$scripts ) {
    $scripts->remove( 'jquery' );

    $scripts->add(
        'jquery', // shortname
        'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', // url
        false // dependancies (none)
    );
}

add_action( 'wp_default_scripts', 'radr_google_js' );

If you’re interested in using this on your own site, you’re welcome to download this quick plugin. Just follow standard procedure — unzip, copy to wp-content/plugins, and activate.

Happy Cog just launched their blog, smartly titled Cognition. A key difference from most blogs, however, is that in order to comment, you must reply via Twitter.

Kids today are more likely to respond to a blog post on Twitter than in the article’s comments section; so we’ve collocated our comments on Twitter. Share a tweet-length response here, and, with your permission, it will go there.

Here’s the thing, though: I don’t have a Twitter. I don’t want a Twitter. I will never, ever, fucking want a Twitter. Please understand this, and realize that there’s still 0.1% of the world, myself included, that don’t use Twitter, and would prefer not to be forced to signing up for one just to comment on a blog.

I don’t see why Happy Cog didn’t just offer regular comments instead of a tweet — you can even keep the length requirement, but just post it directly to the site. Their only other alternative is writing on your own site, which I’ve been forced to do.

So here’s my original comment:

I can’t find a link back to the blog from the Happy Cog website… I’ve tried and tried but even the sitemap has nothing. An oversight, perhaps?

I lost the exact wording since I hit “don’t,” which I thought meant it would just post to the site as opposed to tweeting it. As it happens, the original comment was exactly 140 characters…

God damn, I hate using the word “tweeting.”

In other news, and kind of related: