Showing 1–10 of 11 notes tagged #javascript.

Exploring the use cases for serverless website architecture

Last Saturday, Sam introduced me to Chris Coyier’s talk on serverless-ness, The All-Powerful Front-End Developer. Pretty interesting and useful. I’m glad he leads it by breaking down the problematic nature of the word “serverless”! The following day was spent in agorama’s p2p workshop at furtherfield. Coincidentally, there is a lot of overlap in these topics.

I’ve spent the past few days wrapping my head around all of this, contextualising it against the sorts of concerns and projects we work with. Though I desperately want to get going with Dat, I’m starting with serverless because it may solve an urgent need in my day-to-day work. Right now, I’m spending much more time than I realistically can maintaining CMSs and hosting environments for older websites.

All of the below is a thought dump on the topic, an attempt to pick apart the meaning of and the use cases for a serverless website architecture.

Read more

See notes and further research prompts below in relation to yesterday’s 24 Pull Requests event. It was organised by Codebar, Ladies Who Code, and Your First PR, sponsored by Gitter, Shutl, and Twitter. I left Twitter HQ with my brain fizzing, always a good thing.

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

Surfing w/ coffee 2. Order of exploration:

A
Google search “web worker” paper.js jerky (trying to sort out animation+ajax issues) Paper.js issue #634 “Allow using paperjs without canvas” Paper.js issue #561 “Add Font and Glyph types from plumin.js” (↓B) Plumin.js (↓C) Louis-Rémi Babé @louis_remi Surge, static web publishing

B
Opentype.js Frederik De Bleser (↓D) NodeBox, tools for generative design

C
Yannick Mathey @_____________y USA, limited edition typographic print

D
Overtone, collaborative programmable music Meta-eX, “Live coding. Live synths. Live music.”

See previous surf sesh.

Discussion regarding Canvas vs SVG

Running in to problems with SVG animation, will probably have to rethink it with canvas. See discussion at link above for reference. Ah well, wanted to do more with canvas anyways.

Just pushed an update to the colour JS on piperhaywood.com. The HSL colour has been looking pretty muddy recently, partly since it’s an orange-y hue this time of year, but mostly because sunrise and sunset weren’t being taken in to account properly. Before, the lightness value changed gradually between 12:01am and midnight. Now it looks a little more “sunny” in the daytime. Will need to keep monitoring the min/max values, yellow could be problematic.

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.