About


Materials

This site was built with Squarespace, my preferred CMS these days.

Specifically, I used the Basil variant of the Brine family of templates, which seems to be the most versatile of all of the services’ many templates.

Sorcery/JS

The full screen slideshow on the homepage was achieved with Vegas.js, a high quality, free and well documented slideshow system.

jQuery

It’s not the hippest anymore, now that there’s React.js, Vue.js, Angular.js, et al, but jQuery is still pretty damn handy and is responsible for some of the other niceties of this site that would be prohibitive (mostly meaning I’d have to really devote time I don’t have to becoming an expert in a system that’s no longer being developed… ummm… nope!) to do with Squarespace’s built in and now deprecated YUI Library.

The Tricksy Scripts

The smoothly shrinking header

// Header shrink
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("shrink");
  }
  else{
    $('header').removeClass("shrink");
  }
});

The typed text

new TypeIt('#letsBuildSomething', {
  strings: ["Let's build something beautiful", "Let's build something beautiful together!"],
  speed: 100,
  lifeLike: true,
  breakLines: false,
  waitUntilVisible: true,
  afterComplete: function (instance) {
    let element = instance.$e;
      
    //-- Hide the cursor by setting opacity to zero. 
    var cursor = element.querySelector('.ti-cursor');
    cursor.style.animation = "none";
    cursor.style.opacity = "0";

  }
}).go();

On state for the Archive List

// Archive List: Category submenu (years, etc.) on state
  var url = window.location.href;
  
$('.archive-group-list li.archive-group a').filter(function() {
    return this.href == url;
}).addClass('active');

Prepend “All” link to Archive Lists

// Prepend "All" list items to Projects blog list filters
$(".collection-5b341108352f53d46ad339c4 .archive-group-list").prepend('<li class="archive-group"><a href="/projects">All Projects</a></li>');
squarespace-style-editor-screenshot.jpg

Why Squarespace?

It’s Simple

In my experience from decades in this industry, I’ve found Squarespace to offer some of the best bang for the buck in terms of all it can do vs other CMS systems, but mostly it’s that it happens to be so well designed that overall, it is a joy for clients to use.

Also, it doesn’t hurt that it also happens to be robust, easy to develop on and fully managed, so other than your own javascript, there’s nothing to install, no security stuff to worry about, or plugins which can access the logic/scripting of the system and potentially wreak havoc (I’m lookin’ at you Word Press!) via PHP for crying’ out loud!

Based upon JSON template, the API is pretty straightforward and in developer mode, it’s easy to get at the raw html and Squarespace/JSON template code to do whatever you want. You can even develop locally using Node.js.

Then there’s blogging, e-commerce and SEO tools built in and the Layout Engine, which is the secret sauce to its power and ease of use.

At ScienceSites we’ve used it quite effectively for 99% of our clients.

So, for my money it’s one of the best options out there to make beautiful, functional websites relatively quickly and with minimal pain for developers. Plus, as I said the system is easy to use for non developers.

Y’know, like 90% of the world and probably most of your clients!