About Craig Webb

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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.