Posted on

PC Engines APU and m0n0wall

I brought up a sandbox router at work yesterday using a PC Engines APU and m0n0wall for the purpose of testing Samba 4.

The APU was purchased as a kit with case from Netgate. The kit arrived intact within three business days, standard shipping. Assembly with the included heat sink was a little tense, read the instructions here twice.

I flashed generic-pc-serial-1.8.1.img to the included SD card. At this point I realized that my trusty USB to Serial to Null Modem setup was at home. I booted the box anyway, hoping that the Ethernet ports would auto-detect. By trial and error I found that the ports auto-detected in reverse order from the case labeling so that:

OPT1 = re0
WAN = re1
LAN = re2

with re0 assigned to LAN, re2 unassigned in the router software.

m0n0wall does not allow assigning Ethernet ports from the UI as far as I know, so I downloaded the configuration to my laptop through the Diagnostics: Backup/restore page of the m0n0wall UI and edited the <interfaces> section of the XML, substituting re2 for re0.

Uploading the edited config using the Restore configuration button on the backup/restore page completed the port reassignment.

Presto, up and running with no serial cable.

The APU is fully compatible with m0n0wall and better than easy to set up. For my usage, load is under 1%. My justification in purchasing the APU is to eventually replace one of our ALIX routers, which are more heavily loaded.

Posted on

css text-outdent

Outdented list items are useful for lists of links where some links wrap. When the links are outdented visitors get a good indication of which lines are continuation lines and which lines are new links.

Use the css text-indent property with a negative number. Add the same amount of positive left padding or left margin to move the whole outdented paragraph or li to back to where it should be. The outdented items must be block level or have display: block; set.

Here is a sample ul:

Here is the css for the samples above:

.outdent li, .outdent p{
        padding-left: 1.5em;
        text-indent: -1.5em;
}
.outdent li{
        list-style: none;
        line-height: 1.3em;
        margin: 0;
}
Posted on

WordPress and jScrollPane

Some notes for getting WordPress and jScrollPane working.

I wasn’t interested in the plugin because it is out of date and seems to carry a log of baggage.

These links were helpful:

http://jscrollpane.kelvinluck.com/

http://jscrollpane.kelvinluck.com/dynamic_width.html

http://matthewruddy.com/using-jquery-with-wordpress/

My code in an add_action function to wp_head:

<?php
add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
    wp_enqueue_script( 'jquery' );
    }
?>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="wp-content/themes/some path.../jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="wp-content/themes/some path.../jquery.jscrollpane.min.js"></script>

<script type="text/javascript" src="wp-content/themes/some path.../resize.js"></script>

<script type="text/javascript" id="sourcecode">
    jQuery(document).ready(function($) {
        // Code here will be executed on document ready. Use $ as normal.
        $('.scroll-pane').jScrollPane({mouseWheelSpeed: 30});
        });
</script>

I had to set the mouse wheel speed; it was way too slow, default is 3.

resize.js didn’t work without modification.

(function($) {
// added outer stuff to get resize working with js wordpress way 2013-05-13
$(function()
{
    $('.scroll-pane').each(
        function()
        {
            $(this).jScrollPane(
                {
                    showArrows: $(this).is('.arrow')
                }
            );
            var api = $(this).data('jsp');
            var throttleTimeout;
            $(window).bind(
                'resize load', //added load 2013-04-30 so the images would fit on android
                function()
                {
                    if ($.browser.msie) {
                        // IE fires multiple resize events while you are dragging the browser window which
                        // causes it to crash if you try to update the scrollpane on every one. So we need
                        // to throttle it to fire a maximum of once every 50 milliseconds...
                        if (!throttleTimeout) {
                            throttleTimeout = setTimeout(
                                function()
                                {
                                    api.reinitialise();
                                    throttleTimeout = null;
                                },
                                50
                            );
                        }
                    } else {
                        api.reinitialise();
                    }
                }
            );
        }
    )

});
})(jQuery);

The containing anonymous function was needed to get this working with WordPress. I added load because this prevents panes with photos loaded from a third party site from being incorrectly rendered. Without it the space they take up is not accounted for.