Showing 1–10 of 14 notes tagged #development.

We’re picking up a Shopify site that was put on hold for a little bit, and I’m pleasantly surprised by a few things I’ve come across. The pause might have been blessing in disguise for the site on the whole. The dev tools have progressed a bit during the hiatus, and I’ve come across a Sections workaround that might 🤞 give a little more content flexibility beyond the homepage.

Read more

/**
 * 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).

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.