This post is part 37 of 37 in the series Programming by Stealth

In this instalment we take a break from what we’ve been doing to take an in-depth look at code documentation. I’ve regularly included documentation generated with JSDoc as one of the inputs to the challenges, and I’ve done so with the implicit assumption that those docs would be intuitively meaningful to you all. Talking with Allison two things became clear to me – firstly, that I had made this implicit assumption, and secondly, that it was completely wrong! Code documentation is a lot like man pages on the terminal – the structure of how the words are presented often carry as much meaning as the words themselves. With decades of experience this is obvious, but it’s not intuitively obvious to novices.

To remedy this I thought it would be useful to go through the entire cycle of documenting one function, and that the appropriate format for that was a screencast. When I sat down to record the screencast I couldn’t help but use the opportunity to share my toolkit with you all, so the screencast starts with a little demo of the development tools I’m currently using to develop the Cellular Automaton API we’re working on as part of this series.

Below you’ll find the screencast embedded, and, links to the various tools mentioned. Myself and Allison have also recorded a podcast for this instalment. I share my screen with Allison, and we walk through all the same steps as I do in the screencast, but with Allison stopping me and asking all the questions you probably are as you watch the screencast. When published, that podcast will be linked into this post.

Read more

Tagged with:

This post is part 36 of 37 in the series Programming by Stealth

In the previous instalment we took at first look at text input in HTML, and we made a start on a new project – building a set of JavaScript prototypes for creating cellular automata so we can implement Conway’s Game of Life. In this instalment we’ll continue down both of those paths. Later in the project the two paths will finally merge when we use web forms to build a UI around our game of life.

We’ll start on the HTML track where we move on from generic text input with single and multi-line basic text boxes to some more specific types of text input, including some nice new input types that HTML 5 brought to the table. This will set up up to learn about HTML 5 form validation in the next instalment.

When we switch to the JavaScript track we’ll start by having a quick look at my sample solution to the previous instalment. Then, we’ll make a start on a JavaScript prototype to represent a Cellular Automaton together, which will set up the next assignment.

I’ve zipped up my solution to the previous assignment, a sample file that accompanies this instalment, and the starting point for the next assignment which you can download here.

Read more

Tagged with:

This post is more than a little meta, but bear with me. This is basically a blog post to let you know that things are going to be a little chaotic around here as I transform this site from a blog into a true website, and that transformation is gonna happen while the site remains live, or at least mostly live most of the time. There will be an entirely new theme, but the real changes will be happening much deeper down as I transition from using WordPress as a blogging platform to using it as a true content management system (CMS).

The TL;DR version is that things may look a bit weird here from time to time over the next few weeks, and entire features may go AWOL for a few days.

Those of you who are curious about how the sausage gets made can read on, but really, the reason for this post is to let you know not to panic if you land here some day and everything looks weird.

So, what am I up to?

Well, firstly, I’m building out a bespoke WordPress plugin which will define the data architecture for this site. In WordPress jargon, that plugin is registering a number of custom taxonomies and custom post types, and adding a bunch of custom meta boxes (custom form fields) into various parts of the admin interface to allow me to associate metadata with the various pieces of content that will be hosted on the site. The plugin is coming along well, and I’m really happy with the structure it’s allowing me to put on things.

Now that the data architecture is coming together, I’ve also started work on a bespoke theme that will make use of the new data architecture to present the content in the way I want. I’ve given up on the idea of transforming someone else’s theme into what I want, and started with a completely blank page – yes, that’s right, I’m building my own custom theme from scratch. I always find blank pages scary, but this was a particularly big and particularly scary blank page. I’m making progress though, and it’s a real joy to get to build a WordPress site with all my favourite web tools – the structure of the pages is based on Bootstrap 4, the dynamic elements are being provided with jQuery, and I’m making heavy use of Font Awesome to add iconography through the design.

At the moment the design is basically monochrome because I’m focusing on getting the structure and layout right, and making sure everything is nice and easy to read. Once that’s done I’ll finish the site off with a custom Bootstrap theme to inject a little colour for personality, but not much, I want the site to remain elegantly spartan. The final piece is this big project is a new logo I’ve been working on, or more honestly procrastinating over, for the past few months. When I commit to a logo, that will give me the colour pallet and the font-styles that I’ll use to inject some personality into the theme.

I have to say I’m learning a lot, but this is still a really big job that’s gonna take me quite some time, so bear with me, and wish me luck!

This post is part 35 of 37 in the series Programming by Stealth

We’ll start this instalment by rounding out our look at QUnit – first, by taking a quick look at my sample solution to the challenge from the previous instalment, and then by introducing a simple little feature that will make this instalment’s challenge more manageable.

Next, we’ll make a start on text input in HTML forms. This time we’ll focus purely on free-form text, and then in the next instalment we’ll move on to formatted sub-sets of text like numbers, email addresses and so on.

Finally, we’ll make a start on what will be an on-going project. The idea is to combine our understanding of HTML, CSS, JavaScript, jQuery, and QUnit to implement a zero-player with a really cool computer science back-story.

As usual, I’ve created a ZIP file with the files for this instalment, including a sample HTML page that demonstrates text input in action, and the files that make up the starting point for this instalment’s challenge which you can download here.

Read more

Tagged with:

You may have noticed that on this site, links that open in a new tab get a nice icon to indicate that fact, and, links to domains outside of this site automatically open in a new tab and get that icon. This is achieved using a collection of JavaScript code that I have released as open source under the name bartificer.linkToolkit.js, and published on GitHub.

The code was inspired by some examples in the Programming by Stealth series, and, that same series provided the impetus to give the project some final fit and finish before releasing version 1.0 today.

Tagged with:

I’ve just published a release of backup.pl, my simple perl-based generic backup script. You can download the release, and get full documentation on the project’s GitHub page.

Tagged with:

This post is part 34 of 37 in the series Programming by Stealth

In the previous instalment we had our first look at QUnit, an open source Unit testing framework for JavaScript by the jQuery project. In this instalment we’ll finish our exploration of QUnit with a look at a few more advanced QUnit features. We’ll be making regular use of QUnit in future JavaScript challenges.

Wrapping up our brief detour into testing a QUnit leaves us free to move back to HTML forms and more JavaScript practice in the next instalment. The aim is to slowly bring those two streams back together through a new multi-instalment project. Over the next few instalments we’ll be building up a web app that makes use of both web forms and JavaScript prototypes.

As usual, I’ve collected the code referenced in this instalment into a ZIP file which you can download here.

Read more

Tagged with:

This post is part 33 of 37 in the series Programming by Stealth

I had intended to continue running parallel JavaScript and HTML streams for this instalment, but when preparing the notes for the JavaScript stream it became obvious I’d need the dedicate the entire instalment to JavaScript.

What we’ll be doing in this instalment is taking a first look at the concept of software testing. Testing is a vital tool in a software developer’s toolbox. In particular we’ll be looking at two useful concepts, and a tool to help us build and run our test suites. We’ll be looking at the concepts of Test Driven Development (TDD), and Unit Testing (UT). We won’t be religiously adhering to either – instead, I want to encourage you to pick and choose the aspects of these things that work for you.

The tool we’ll be looking at to implement our JavaScript test suites is QUnit. This is a Unit Testing framework developed by the jQuery project, and used by them for jQuery’s test suite.

All code files used in this instalment are contained in a single ZIP file which you can download here.

Read more

Tagged with:

This post is part 32 of 37 in the series Programming by Stealth

In this instalment we’ll continue our twin-track approach of mixing a little JavaScript revision with learning some new HTML. In this case, we’ll revise JavaScript’s error handling mechanism (throw, try & catch), and learn how to use the HTML <select> tag to create dropdown menus and multiple-selection lists.

We won’t be updating our date and time prototypes, but we will be using them in example HTML pages, so in this instalment our two tracks come into direct contact with each other for the first time. We’ll use an HTML page with multiple dropdowns to allow users to select a date, and then render that date in many formats using our pbs.Date prototype. We’ll also use JavaScript’s error handling features to respond appropriately when a user attempts to render an impossible date like the 31st of February 2010.

Finally, the challenge set at the end of this instalment will also combine our prototypes with HTML forms, and JavaScript error handling.

You can download my solution to the challenge set in the previous instalment, and all the code samples for this instalment in a single ZIP file here.

Read more

Tagged with:

This post is part 31 of 37 in the series Programming by Stealth

We’re going to continue our twin-track approach in this instalment – first some JavaScript, then some HTML Forms. We’ll start with my sample solution to the challenge set in the previous instalment, then we’ll look at one final new concept related to JavaScript prototypes – static functions. We’ll wrap up our revision and deeper dive into JavaScript prototypes with a final, finished, version of our algorithm for generating prototypes.

Switching our focus on HTML forms, we’ll look at some important form-specific ARIA roles, we’ll introduce two useful tags for enclosing forms, or parts of forms <fieldset> & <legend>, and we’ll introduce the concept of form data. With those foundations laid, we’ll look at how to add checkboxes and radio buttons to web forms, and how to interact with them through jQuery.

You can download a ZIP file containing the code files for this instalment here.

Read more

Tagged with:

keep looking »