Published

On archiving/preserving websites

SB and I have been chatting about the whys, whens and hows involved in archiving a website. Archiving is always an uphill battle. It’s hard to take care of things as they age no matter what the material, and ageing code comes with a specific set of worries.

Read more

Published

Snippet for LazyLoad + Spin.js

/**
 * Identify images by class. For each image, add 
 * [Spin.js](http://fgnass.github.io/spin.js/) to parent, [LazyLoad](http://verlok.github.io/lazyload/) image, stop spinner 
 * when image is loaded.
 */

var imgClass = "lazy";

var spinOpts = {
  // [Spin.js options](http://fgnass.github.io/spin.js/#usage)
};

var spinners = [];
var elems = document.getElementsByClassName( imgClass );
for ( var i = 0; i < elems.length; i++ ) {
  var pId = "lazy-" + ( i + 1 );
  var parent = elems[i].parentElement;
  parent.id = pId;
  spinners[pId] = new Spinner( spinOpts ).spin( parent );
}

var lazyLoad = new LazyLoad( {
  elements_selector: "." + imgClass,
  callback_load: function( element ) {
    var spinner = spinners[element.parentElement.id];
    if ( spinner ) {
      spinner.stop();
    }
  }
} );

For use with LazyLoad by Andrea Verlicchi and Spin.js by Felix Gnass. SB and I have both checked out a few different lazyloading plugins, we’re pleased with how this one works with srcset.

Since the default positioning of Spin.js centres the spinner in the element, it’s best for the image to be the only child of the parent element. The code above assumes that this is the case. If I didn’t have control over the markup or needed to individually wrap each image for any other reason, would probably implement something similar to the above w/ jQuery (see the Spin.js jQuery plugin).

Published

Linter (scss-lint) not working in Atom

Linting package linter-scss-lint was not working properly for me, with no linting occurring and no errors thrown. On top of that, other linters were functioning properly (i.e. linter-jshint). Came across issue Linters not linting…, and one comment suggested opening Atom from the command line. Tried this, and linter-scss-lint began working properly. Upon further searching, found issue noting that $PATH only present when Atom is launched from the command line.

Look in to this with Sam, he’s not having the same problems even though our .bash_profile and .bashrc files are the same. Check versions of Atom, all packages, Ruby, etc.

Published

WordPress security resources

Links to a few of the security resources I find useful, some WordPress-specific and some more general.

A note about that “step-by-step” guide: it’s pretty decent, but IMO Wordfence is a better security plugin to go with. Sucuri is maybe more user-friendly, but Wordfence comes with more out-of-the-box (incl. two factor authentication and login limiting) and the settings seem more granular. Doesn’t hurt to try both though to see what’s the best fit.


Last edited 22 June 2019

Published

Website updated

piperhaywood.com

Finally updated my website to include information and links for a few recent projects. Sam and I worked together to redesign the site. In return, I helped him move his domain to sambaldwin.info.

I’m quite excited about the colour of the text and favicon. The hue, saturation, and lightness are calculated according to the season, temperature, and time of day where I am.

There’s definitely a couple of issues to sort out, will get to those soon.

Published

WordPress function for images with ‘srcset’ attribute

Wrote a function returning an image element with srcset and sizes attributes. See this Gist for the function and this Gist for an example of the function in use (would need to be within the WP loop).

Wanted to give a front-end dev like Sam the ability to define the important bits, including the default image size for the src attribute, the media queries for the sizes attribute, and classes for the img element if necessary.

Edit 23 Jan 2019
This isn’t necessary anymore, responsive images have been part of WP core since v4.4. They’re implemented on wp_content automatically via a filter. Use their related functions if you need to do something custom. Responsive images are behaving a little erratically on my site though, so will have to take a look at why that might be happening.