The Author – Bart Busschots
RSS Feeds
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Oct
13
PBS 41 of x – Form Events
Filed Under Computers & Tech, Software Development on October 13, 2017 | 1 Comment
In this instalment we’ll tie up the last few loose ends related to web forms. With web forms under our belts, we’ll then be ready to pick up where we left off with our cellular automata JavaScript prototypes, and combine our HTML, JavaScript, and CSS skills together to make our first web app – an implementation of Conway’s Game of Life.
This instalment breaks down into two distinct parts – our first look at keyboard interaction with web forms, and a final look at form-related events.
When it comes to keyboard interaction we’ll start by looking at how browsers treat regular web forms, and then we’ll move on to supporting keyboard interaction with custom web form UI elements like the star-rating example from instalment 36.
Finally, we’ll wrap up with a handy reference table summarising the most important webform-related JavaScripts events, giving some guidance on their use.
There’s just one sample file associated with this instalment, and it’s available for download as a ZIP file here.
Sep
29
PBS 40 of x – HTML5 Custom Validations with jQuery
Filed Under Computers & Tech, Software Development on September 29, 2017 | 1 Comment
At the end of the previous instalment I promised we were done with HTML form validation, and insisted we were ready to move on to finishing our Cellular Automata, but it turns out that was a little premature. While working on my sample solution for the previous instalment‘s challenge I realised I’d forgotten to cover something very important – the fact that you can use jQuery to deal with situations where the HTML5 form validation attributes are not powerful enough for your needs. So – we need to rectify that oversight, and that’s going to take this entire instalment to do.
Then, while doing her homework, Allison discovered another oversight that needs to be remedied before we move away from HTML forms – we need to look at how to support keyboard-only interactions. Why? In a word – accessibility. So, in the next instalment we’ll start by looking at the narrow case of supporting keyboard input in forms, but we’ll then move on and look at keyboard interactions a little more broadly, and we’ll learn how to add keyboard shortcuts to our web apps. This will come in useful when we do then finally move on to getting our cellular automata working the following instalment.
As usual, I’ve collected all the files for this instalment into a single ZIP file which you can download here.
Sep
15
PBS 39 of x – HTML5 Form Validation
Filed Under Computers & Tech, Software Development on September 15, 2017 | 1 Comment
In this instalment we’ll be taking a break from our parallel approach, and focusing almost exclusively on HTML5 form validation. We’ll dedicate the entirety of the next instalment to getting our cellular automaton prototypes up and running so we can actually ‘play’ the game of life.
While we won’t be continuing work on our Cellular Automata prototypes this time, I will share my solution to the challenge I set way back in instalment 36.
Also, before we get stuck into new content I’ll be taking a small diversion to explain a slight change in my approach to HTML coding, and how that will affect the sample code you see for the remainder of this series.
As usual, I’ve collected the example file for this instalment and the starting point for the challenge together into a ZIP file which you can download here.
Sep
1
PBS 38 of x – Taking Stock
Filed Under Computers & Tech, Software Development on September 1, 2017 | Leave a Comment
Since this is the first instalment back after our summer hiatus, it seems like a good time to pause and take stock. I want to look back to revise what we’ve learned to far, and, to look forward to where I want to take this series next.
Jul
8
PBS 37 of x – JSDoc Demo
Filed Under Computers & Tech, Software Development on July 8, 2017 | 1 Comment
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.
Jun
25
PBS 36 of x – More HTML Text Input | More Cellular Automata
Filed Under Computers & Tech, Software Development on June 25, 2017 | 3 Comments
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.
May
19
PBS 35 of x – HTML Text Input | Introducing ‘Life’
Filed Under Computers & Tech, Software Development on May 19, 2017 | 3 Comments
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.
May
12
bartificer.linkToolkit.js Version 1.0 Released
Filed Under Computers & Tech, My Projects, Software Development on May 12, 2017 | Leave a Comment
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.
Apr
30
PBS 34 of x – More JS Testing with QUnit
Filed Under Computers & Tech, Software Development on April 30, 2017 | 3 Comments
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.
Apr
13
PBS 33 of x – JS Testing with QUnit
Filed Under Computers & Tech, Software Development on April 13, 2017 | 1 Comment
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.