About Craig Webb

Technology

What’s new or interesting in Technology

Building websites using Squarespace

Recently two different people spoke to me about building websites using Squarespace. It’s been awhile since anyone has mentioned the subscription CMS platform and it was surprising to be asked about the product on two occasions.

Squarespace gained market share and popularity by advertising on NPR and public radio stations like WNYC*.

Working to design within the Squarespace platform is like trying to paint a bedroom through the door keyhole. The CSS can only be accessed through Squarespace’s proprietary user interface. The proprietary user interface is kept locked away because Squarespace charges subscription-based fees and the way to charge the fee is to insert a roadblock to thwart web development.

Many Internet-based services such as Squarespace are designed to insert themselves into the service in order to extract money from the transaction or work. A common example of that business model is LinkedIn, where users upload their personal contacts. LinkedIn’s business model is to make it difficult for users to access their own data unless a fee is paid. Trolls build bridges and extract payment to cross. Working with Squarespace is a little like that.

The first person needed to publish sales content for a third party startup. Using an off-the-shelf Squarespace template might be good enough for this purpose. Editing the front-end design or maintaining the website are not concerns. The website will probably not need to exist in six months.

The second person who asked about Squarespace already has a mammoth website built using WordPress. The WordPress website is the primary marketing hub for the client’s entire business.

The WordPress website, built over a fifteen year period, has rambling content, a lack of cohesive brand development and an unplanned site architecture. None of these faults require a technical solution.

The website utilizes multiple custom plugins and consists of many different types of content. It is hard to imagine porting the existing content successfully to Squarespace.

WordPress is utilized for some 25% of websites worldwide. WordPress has a wide and deep technical ecosystem; most of it is public sourced (free to use). WordPress website maintainers are able to access the website from within the user interface and from without, as long as access to the site host location is available.

If there is a strong need to redevelop the website, there are many much better options to use than Squarespace. What the second client really needs is to invest in knowledgable web developers to maintain and develop the website. Lacking that, switching to Squarespace will not solve problems. It will increase them.

* Here’s a little marketing secret: If you have a mediocre Internet technology that you want to foist onto consumers be sure to advertise on public radio. Public radio stations are advertising hungry and will promote anything, without question or testing for quality; and listeners will suck it up, also without any further investigation.

The Web Development Environment and my learning curve

Recently I am building websites and teaching myself web development technologies. My specialties are HTML and CSS. I am also learning JavaScript.

My history is that I am self-taught. I come from a graphic design background creating print media using Quark, Photoshop and Illustrator. I am an expert using Photoshop and Illustrator, having worked in advertising and also working as a CD designer for Sony Music.

I got tired of buying new iterations of Photoshop. Each new version meant that I could no longer open other people’s newer files and there was never anything new that was worth the steep price. I started with Photoshop II and after thirty years the program still has the same onerous user interface.

What I liked about web design is that I don’t have to buy anything to work. I learned to type using TextEdit and for many years that’s how I worked. In a pinch I still jump onto TextEdit to stomp out a quick test or prototype.

The first bit of web development technology that I embraced was SASS, using Compass. In order to use it I also had to learn to use MAMP. Now I was working in an “environment”. Somewhere along the way I started to use a more sophisticated text editor, Sublime Text. I am still using Sublime Text.

Bit by little bit I am learning to use the terminal. I have a cheat sheet that I sometimes refer to. Along with the Terminal comes GIT and Github, Homebrew, Node, NPM. Setting these things up has never been easy. It often requires months and months of study complemented by lot of trial and error.

I was an early adherent of CSS and when HTML5 and CSS3 came into being I was on top of it, learning from the best web mavens on Twitter. I learned to build websites with cross-browser fixes, many of which are still actively in use today.

Eventually I taught myself how to build a theme for WordPress and I have built a few. WordPress requires a language called PHP as well as JavaScript. There are many ready-built themes that are available for WordPress, some are very complicated and for sale, others are introductory. I am stubborn about knowing the code so I took the extra trouble to learn how to build from scratch.

Recently I helped a client with her WordPress. It had a sophisticated drop-and-build functionality that was hard to learn. Part of what made it hard to learn was that she hadn’t touched it for two years and the complicated functionality was out of date and broken. Over the last two years PHP has evolved quite a bit and her server settings were out of date and frankly a hacking hazard. Dozens of plugins were out of date too. Any small change might freeze the program, providing a white screen of death.

But when it comes to learning how to build, use and maintain the working environment for the “modern web”, I have lagged behind. I missed out on learning how to use Grunt, for instance. There is a long list of technologies that have come and gone.

I am working to catch up. Some time ago I decided to break my website into template components. This is supposed to be a time-saver, so that when I want to change a thing in the webpage footer I don’t have to copy-paste it into thirty pages. I can change it on the footer template and all of the pages will update all at once.

I already created my website as a WordPress theme but it uses PHP and I decided that I would like to learn to build it using JavaScript. The cool kids use JavaScript, and so should I. I embarked on learning to use a technology called Handlebars. I had started to learn Handlebars back in 2012 when it was something of a new thing but I gave up after a couple of weeks because I could not afford the time. By now Handlebars has been supplanted by newer build technologies. Backbone. AngularJS 1–10 or so, React. But Handlebars is the granddaddy of all of these and more. Its working methodology has been adopted and incorporated by many others and it is JavaScript.

In conjunction with Handlebars I have also needed to learn to use Gulp. Gulp is also JavaScript. Gulp is built upon a technology called Node, which is also JavaScript.

So for the last year or so I have worked to learn how to use Gulp. Gulp is something called a task runner. It processes SASS instead of Compass and squeezes code to be small and unreadable and other stuff. In addition to processing SASS into CSS Gulp runs Handlebars to convert templates into HTML.

Did I mention that I like to write code, using TextEdit? Learning how to install Gulp through the terminal and program it to do what I need it to do has been difficult and time-consuming. There are not many tutorials and I could not understand the language of those I found. I did not know the paradigm. I am getting it slowly.

All of these things come in versions and when one of these becomes updated with another version, the others have to come along too, or the web design working-environment will break.

So recently I was designing happily in SASS and Handlebars when I saw a message in my terminal that my Yarn program was in need of an update. It is easy to hit “update” and without thinking about it much I did so.

These bits of program have a thing known as “dependencies” so when I updated Yarn, Yarn updated Node, and the version of Gulp that I had worked long and hard to build no longer worked. So I have had to learn to code with the new syntax of Gulp, Gulp 4. I am starting to understand JavaScript code and lingo so this has been easier than the first go-round. Lately there are some new tutorials that are easier to follow but most tutorials are written for Gulp 3; the cool kids have moved on to other task runners such as Webpack or Parcell. Along the way I have discovered that AutoPrefixer had to be updated and it’s programming changes are still unexplored. The old ways of using AutoPrefixer no longer work. Also Uglify, a bit of program so ubiquitous that it’s name has become a verb, such as “uglify your code”, is also obsolete. I have replaced it with Terser, the new thing.

I had intended to write a how-to about these technologies but instead I am writing about the distancing of design engendered by adopting a complex build environment, how hard it is to learn, keep up, and how brittle it is.

Recently I watched a video tutorial where the tutor was using a text named Visual Studio Code. He was able to load a SASS capability into VSC, link it to his browser and code just like that. No Node, no Gulp. Huh.

Visual Studio Code is owned and built by Microsoft and is free to use. Recently Microsoft bought Github for a small fortune so it looks as though VSC can interact with GIT and Github. I am searching to see if it can also process Handlebars. I bet it does, and I will be using it soon.



Concept, design and creative development.

Build a core identity and message tailored to your target audience.

Craig Webb Art provides all aspects of New Business Communications Development including project management, creative development, copywriting and graphic design.