Dissecting your bash prompt

I’ve always noticed really elaborate examples of what can be achieved with a highly customised PS1 variable for your bash prompt and recently have spent some time playing with my settings to make my terminal experience better with a few updates. I also felt that I would have benefitted in the past from being able to analyse what my prompt currently does, breaking it down into easier to digest blocks, so I can make more sense of what each part does.

As a result of that curiosity, I’ve created a small page that allows you to paste in an existing PS1 from your terminal which will then be parsed and previewed with some basic dummy details (which can be changed by clicking on the identifier in the preview area).

I’d like to make it into something like EzPrompt with support for 256, or even true colour additions and collate some useful scripts for displaying additional information, but at the moment it’s useful for seeing what each block does at least.

It seems to cover most of the examples I’ve tested in various searches, but the more inline-code is included, the less it can display.

Check it out here and the source is available on github.

Convert an image to ANSI escape codes

I’ve been working on cleaning up my dotfiles recently and have been playing with my PS1 and the available colours. In doing so I thought it might be interesting to extract image data from an uploaded image and turn the result into a nearest-match ANSI image. This is the result! It supports both 256 colour and true colour terminals and can utilise unicode code points to present a clear image in slightly fewer pixels as well as just using background colours and spaces if preferred.

It includes a live preview which I’ve lifted from the bash PS1 parser.

Check it out here!

WevDAV-js update

I’ve recently updated my JS bookmarklet webdav-js and added in some new features including tracking the history state, back button support and proper navigation.

The main thinking behind the bookmarklet is to enable easy manipulation of WebDAV shares without leaving the browser. This bookmarklet allows you to, at the click of the button, browse and upload to WebDAV shares, all within the browser. I’m working on copy/move functionality but currently it supports the basics.

It’s available on github and you can drag the bookmarklet here directly to your bookmarks bar:

Continue reading “WevDAV-js update”

Beautifying XML

…well, making it easier to read at least.

I often have to deal with a machine produced lump of XML which is entirely impossible to read and extract information from, so I’ve made a small page that beautifies XML without sending it server side for processing (ideal for business sensitive data that can’t be transmitted to who-knows-what server) and thought I’d share in case it’s useful to anyone else.

There might be some bugs in there somewhere, but it’s served to meet most requirements of my day-to-day needs.

It’s available here.

Running CSS animations when the element is shown

Not a unique idea at all, many existing libraries out there, but I wanted a very basic jQuery plugin that I controlled entirely with CSS animations and classes being applied when the user scrolled to (or past) the element, along with a few key features: chaining animations to run in sequence, customisable delays and customisable visibility offsets.

Some code snippets from the example page. The get started, all you need to add to your page is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.animateOnShow.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="animations.css" media="screen" charset="utf-8">

then you can add the following classes to your page and the animations will work when the user scrolls to them:

<p class="animate-on-show fade-in">This text will fade in!</p>
<p class="animate-on-show slide-in-from-below fade-in">You can add multiple animations if wanted...</p>

<p class="animate-on-show fade-in" data-animate-chain="sequential-example">This will fade in first</p>
<p class="animate-on-show fade-in" data-animate-chain="sequential-example" data-animate-delay="500">Then this, 500ms later</p>
<p class="animate-on-show fade-in" data-animate-chain="sequential-example" data-animate-delay="1000">Then finally this after 1000ms!</p>

All delays are relative to the first element shown with a data-animate-chain attribute, so when this first element is shown, the timeouts are set up for all other elements with the same data-animate-chain attributes.

The CSS is pretty straightforward and some basic example animations are defined in animations.css

.animate-on-show { transition: all 1s ease-in-out; }
.animate-on-show.fade-in { opacity: 0; }
.animate-on-show.fade-in.animated { opacity: 1; }

The simplified example above controls the basis for the plugin, first all elements with an animate-on-show class are set up with a 1s animation. Then the child classes, in this case fade-in are defined with an initial state, and how it should end once the animation is applied (.animated). The plugin essentially just applies the animated class to each element that is deemed visible and CSS does the rest. The additional chaining happens at the same time along with accounting for delays.

There are some global settings you can define, including vertical adjustments for some classes. For example slide-in-from-below:

.animate-on-show.slide-in-from-below { transform: translate(0, 400px); }
.animate-on-show.slide-in-from-below.animated { transform: translate(0, 0); }

is configured with an initial state of 400px below the target end location, this means we have to adjust our offset by 400. The $.AnimateOnShow.settings.custom object handles this:

    $.AnimateOnShow = {
        settings: {
            custom: {
                // these can be used to adjust positioning, like with the example
                // slide-in-from-below, the calculation needs to take the initial
                // translate into consideration and so we add the 400 which is
                // missing due to the initial state.
                'slide-in-from-below': 400,
                'slide-in-from-above': -400

If you’re adding in other animations that adjust the vertical position, be sure to add these to your version of the plugin or change in your page’s script via $.AnimateOnShow.settings.custom['your-classname-here'] = <adjustment>.

Hope this saves someone some time if they want to do something similar!

I’ve made it a fairly customisable package although it does currently rely on jQuery as the site for which this was originally developed already had it.

There’s a demo page that includes download links and you are free to use this code however you see fit!

Can you make your scripts smaller?

Minifying your JavaScript is something most people are familiar with and have to do fairly regularly, whether is reducing your page load time on PC or keeping the files within the mobile cache limits.

Having recently seen UglifyJS and having used some of the more obvious tricks (!0 === true, !1 === false, etc) myself, I wondered if there was a way you could shrink down what’s transferred even more…

As a proof of concept I’ve knocked up a (hopefully fairly) simple perl script that will wrap your code in a closure and replace a lot of the internal indexes that are used with global symbols, which when compressed with YUI/Uglify should reduce filesize overall.
Continue reading “Can you make your scripts smaller?”

Sonic the Hedgehog ‘construction cheat’ in JavaScript

I clearly spent a little too long thinking about this, but it was fun nonetheless!

I showed my 5-year-old nephew the construction cheat in Sonic the Hedgehog the other weekend and he thoroughly enjoyed printing rocks everywhere on the screen, so I wondered if it would be possible to do something similar in JavaScript, since people love using the Konami code for easter eggs, why not Sonic?

I opted for native javascript, not using any libraries for easy portability.

I’ve encountered a few issues on some sites that already capture keypresses, but for the most part it’s worked ok. I’ve only tested this on Chrome and Firefox (Mac, latest versions) but it should work fine on Windows. No idea about IE… Probably not, but I did try to use cross-browser methods where applicable!

The commented source is here and the script is enabled on the blog so you should be able to use it anywhere.

Have fun!

Oh, here are some sprites for good measure:

For those that need reminding of the code (I’m not angry, just disappointed):


WebDAV file upload bookmarklet

I recently had a discussion with a co-worker as to whether or not it would be possible to upload files to a WebDAV server via AJAX and in doing so discovered it is indeed totally possibly to do so and so I went on a little bit of a mission and made a pretty basic interface for apache that replaced the standard directory listing and have also made a bookmarklet.

There’s no demo I’m afraid, however the bookmarklet should work on just about any WebDAV server (at least, it worked on mine…), but you won’t have pretty code highlighting :(.

I’ve set up a github repository but you can use the bookmarklet directly.

Note: This will almost certainly not work in IE and I’ve only tested Firefox and Chrome (latest versions).

EDIT: minor update and moved to GitHub pages instead of using raw which caused problems with the CSS on Firefox.

Pop quiz!

An interesting item from stackoverflow via /r/javascript!

Why does parseInt(1/0, 18) == NaN, but parseInt(1/0, 19) == 18 and parseInt(1/0, 25) == 185011843?

Javascript apparently has the division by zero problem solved, due to (x > 0)/0 being equal to Infinity, an object (constant?) in JS in the same vein as NaN. It interacts with NaN as well, in that Infinity - Infinity or Infinity / Infinity == NaN, but Infinity + Infinity or Infinity * Infinity == Infinity. Also there’s -Infinity, just for fun.

When parseInt()ing the value infinity, internally it must run .toString() to get the value which returns "Infinity". Base 19 has the numbers 0-9 and then goes on to the letters a-i (there’s a table in the stackoverflow article) of which the first letter of "Infinity" matches, returning 18, when you up the base to 25, all the letters up to n are parsed turning the ‘number’ "Infinity" into 185011843. Interestingly that also means that parseInt(Infinity/Infinity, 25) == 14648!

Mousetrap – excellent keyboard shortcuts

Just discovered a great little library called mousetrap.

It enables you to have complex, chained if required, keyboard events bound in a very simple, powerful way with no reliance on an underlying library.

Example usage:

Mousetrap.bind('d', function() {

Mousetrap.bind('a', function() {

Mousetrap.bind('x', function() {

Mousetrap.bind(['command+a', 'ctrl+a'], function() {

Find out more, test and download it here, or access the git repository here.