Nunjucks and rediscovering web development

So I am still very much love WordPress, I even had a cold embrace with Gutenberg (no React for me though, I strictly follow the three important rules that must never be broken: do not expose the mogwai to light, especially sunlight, which will kill it, do not let it come in contact with water, and above all, never feed it after midnight, ACF all the way for me💪) but the entire WordPress 5 tug of war did get me thinking, I really don’t need to be so wedded to one CMS or even a set method of building sites.

For some time I had considered static site builders (*again*, I used to build sites in Movable Type). And given I didn’t have to learn React I could learn something else I actually wanted to do and not pipe 400kb down the pipe before rendering 1 line of HTML (and lets face it WordPress is not ideal here in the first place). Obviously the CMS part was the reason I build so many websites in WordPress in the first place, but not all websites need a CMS. I’ve build many CMS’ for people that thought they needed the ability to edit their site, and probably never logged in to it (and sometimes just ask me to update stuff, because they don’t know what to do or the interface has changed way too much 😜). So I figured why not static, more secure, faster, and I get to get back to what I really love crafting websites mostly in HTML/CSS and a sprinkle, Salt BAE style, of Javascript.

I’ve been playing around with Handlebars, Jekyll for a bit and liked them, and then found out about Nunjucks (can’t remember where, but I knew Gov.uk used it for their site). Really liked it a lot, I’ve been using npm/Gulp for a number of years, and many different template engines/systems, so felt comfortable using it, hell WordPress is one of the best right, but also used liquid, django and probably others that are gathering dust in a SVN repo somewhere.

I liked the fact it was like hand coding a site, but on steroids, I could hook it up to a JSON file like a lightweight CMS and generate all the pages I needed, I could use even markdown files as content as well (with the addition of a package). Set off a gulp task and HTML pages came out the other side of the npm machine, like a website factory with lots of little AI helper bots, with myself in an upstairs office looking on.

It also allowed me to concentrate more on accessibility and performance, something I really care about, often with WordPress sites, there were a ton of external dependancies and code that I just can’t control. It also allowed me to create something open source, which I don’t do enough.

So the end point of all this chatter was a little static starter kit called juckWonder (geddit?) that I will use as a starting point for small static sites I need to build. The code is available here on GitHub. I intend to keep on developing and improving it, but pretty happy to where I’ve got with it, I even managed at one point to achieve the holy grail, 💯 across the board on a lighthouse test. Oh yes. Performance doesn’t always return 100 but it’s on a Github pages instance so I wouldn’t expect it to.

So in a roundabout way I am pretty happy WordPress development moved away from me, I got to embrace other parts of development I missed.

20 YEARS!

It’s 20 years to the day since I started my web career (and indeed my first full-time job). 16th November 1999. 

Last millennia. 

Woh. 

I started as a ‘Web Development Assistant’ (and something about Sales) at Macmillan Publishers in London. 

Here’s the first website I’ve worked on.

I had no idea what I was doing, but rather fortunately it was still relatively early days for the web, so easier to get a job in it through enthusiasm and willingness to learn. 

We had Internet Explorer 4. Netscape Navigator 4.7. No mobile. Google wasn’t something people had really heard of yet. Wayyy pre-social networks. Many people still thought it (the web) was a fad. 

See what it was like, it was wild. http://oldweb.today/

This was a typical day for me back in 1999 (on a giant beige Dell desktop with CRT monitor)

  • Processing online orders  – our e-commerce platform went like this – a form sent an email to me, I would phone the person up, take the credit card number enter the details into a Word form, print it out then through internal post send it to Basingstoke to be processed by another person using a system built in the 1970s.
  • Tech support for some of our online products (online encyclopaedias, lol). Including a memorable time when I spent the best part of an hour a day training an 80 year old on the fundamentals of computing and the internet (he expected the online encyclopaedia to appear when he turned on the computer)
  • Updating the website, via FrontPage 98. Editing files LIVE on the server. 
  • Creating GIFs for new products / menu items in full 216 dithered GIF Technicolor. And 640 pixel wide monitors
  • Learning HTML/CSS from my boss, who was awesome and very patient. 
  • The day I started work as a Web Development Assistant is also the day I sent my first ever email.

Things have changed somewhat, although some of it hasn’t, I still try and keep learning, I still update the live server 😉

I didn’t even know what my profession really was until I started looking for a new job after 8.5 years in Publishing. Turned out front-end developer was closest to what I enjoyed.

Since then I’ve worked on many many many websites, I left publishing and worked in an exciting and forward thinking agency for 4.5 years, with some of the smartest, most creative people in the industry, and learned a ton. 

I’ve travelled round the world helping people understand their needs and translating them into working sites. 

I then created my own company, Dogwonder Ltd. in 2012 and have spent the time since then working directly with awesome companies, people and collaborators. 

I’ve enjoyed having the opportunity to connect with people though building websites. Clients big and small, colleagues of all kinds, family, friends, communities and my wife. The internet connects us all. 

I am still building websites. I really didn’t think from that point 20 years ago that I would or even could still be building websites. And I still love it. It’s a constant journey of learning and understanding and  I feel very privileged to be able to be able to do it. 

Job title now – no idea. I build websites. 

We went from static websites (remember Movable Type) to database driven (WordPress) / restful API (Ruby on Rails) back through to static sites again. We went from static designs to responsive websites, with the advent of mobile. 

Lots has changed but also lots hasn’t. Building websites that work for the user, allowing them to get done what they need to get done, whilst making sure that the widest number of people, devices and browsers can access them have been core all the way through 20 years. As I was starting web standards was becoming a thing, it still seems very very relevant today, sure things can be improved, but we should never forget the fundamentals, build good stuff that works well for as many people as possible.

I think now one of my biggest concerns is someone starting their journey today. I see an industry where some of the players have put up barriers, making the learning curve and steps massive before you can even render ‘hello world’ in a browser. It isn’t as accessible as it should be and that makes me sad. It’s an amazing job, and we shouldn’t be making it harder to start.

But I digress. It’s been a great 20 years, and feel very privileged to have been able to work in this industry.

15 years!

Today marks the anniversary of the day I launched this site. 15 years ago! That’s like a century in internet time, maybe an epoch or two.

2004 preceded YouTube, Facebook, Instagram, Snapchat, Twitter and well, pretty much everything that we understand of the web today. I didn’t post here for many years indeed preferring those platforms and the communities that went with them.

But I am glad I kept this space, with the social networks’ nut-jobs, trolls, privacy issues and overall forced curation, I am increasingly happy I still have my own space to express my thoughts.

Even if no-one reads any of it, I have 15 years of my stuff safely stashed away and no internet giant can decide to ‘retire that functionality’.

This is my house.

JS Week(ish)notes 1.3

So this is not exactly weekly now, and isn’t likely to be, project work and life means can’t always spend ages learning. But nearly got to the end of Vanilla JavaScript Pocket Guides and it’s excellent, really like the course tutor’s approach Chris Ferdinandi. He also has an excellent newsletter with really handy tips and a superb helper library and reference section. It covers a lot of groups as my first course. But I feel I need to run through this a few times to really get the fundamentals.

Functions are methods are functions! At last!! One of the things I always got confused with JS was the inoperability of the terms, so confusing. But sort of getting that everything is an object and just going with it has helped me.

At the end of each course there is a little project to work along with, which has been fun. We built a little lazy loader, a little JSON parser, and a extendable plugin using the Constructor pattern (always with a capital letter!). Overall I am really getting the way things should be structured, and the Constructor pattern seems to be really powerful. So for example:

<script>
	//Because the plugin uses a constructor pattern, capitalise the plugin name, too, for consistency.
    var TableOfContents = (function () {

        'use strict';

    	// To improve the performance of your plugin, you should only include things that are unique to each instance in the constructor, and move everything that can be shared across instances outside of it. 
    			
        // Public Variables
    			
        // Default settings - same of every instance
    	var defaults = {
    	
    	}
    			
    	// Public Methods
    	var getID = function (elem) {

    	};


    	// Setup the constructor - uppercase first letter - 
        var Constructor = function () {
    					
    		//
    		// Variables
    		//
    		var publicAPIs = {};
    		var headings, toc, settings;

    		// All the rest of the code...

    		//
    		// Return the Public APIs
    		//

    		return publicAPIs;	

        };

        // Return the constructor
        return Constructor;

    })();

    // Run the script and initiate with the new operator
    var toc = new TableOfContents();
    toc.init();

    //instantiating a second table of contents
    var secondaryTOC = new TableOfContents(); 						
    secondaryTOC.init({ 
		target: '#secondary-toc' 
	});
</script>

And finally I am starting to get scope. Starting.

Overall it’s been great, but a lot of theory (with practical applications), and we at the end of the course we touched on state, routing and reactivity, so a nice primer for my overall aim of moving towards something like React.

I am starting to use some of this in real world projects but it’s really slow going, as I hit barriers and don’t know how to get around/over/smash through them outside of a nicely ring-fenced tutorial. But my next course is going to be 30 day coding challenge as I feel I need to really dive into actual use-cases now.

JS Weeknotes 1.2

I finished my first course! JavaScript: Understanding the Weird Parts Actually think I am starting to get this 🙂

This week I learned about Function constructors (and the ‘new’ keyword), Prototypal inheritance, Method chaining, Libraries (specifically jQuery). It was pretty hardcore, I have to keep googling Prototypal inheritance and have struggled to get my head around it, also the two prototypes have totally spun me out, why use the same word!

I *think* I sort of get it, an objects prototype is like a template for the object (and another object) [so many objects], which we can then create new objects from that inherit those properties and methods.

I find the word soup a bit of a problem generally with learning (I’ve failed most coding tests I’ve done), I am starting to realise I am much more of a practical / visual learner, using the specific terms just jumbles my head.

var dogwonder = new Website( // );

We also had a few lectures on jQuery which was really interesting, looking at the unminified code and seeing how it actually works with what we learned so far was fascinating. And also understanding why jQuery is so important, it fixes and has refined so many things and has been perfected over many years so you know that there are certain functions that work across a huge range of devices and browsers. Also there is a library in jQuery! Sizzle! Which does most of the class selection stuff, who knew?! We even wrote a mini-framework call ‘greetr’. See the pen here.

g.greet().setLang('es').greet(true).log();

Now onto my next course! Vanilla JavaScript Pocket Guides

2020 2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004