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
Jun
25
PBS 36 of x – More HTML Text Input | More Cellular Automata
Filed Under Computers & Tech, Software Development on June 25, 2017 | Leave a Comment
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.
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.
Mar
14
PBS 32 of x – JS Error Handling Revision | HTML Selects
Filed Under Computers & Tech, Software Development on March 14, 2017 | 2 Comments
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.
Mar
1
PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
Filed Under Computers & Tech, Software Development on March 1, 2017 | 3 Comments
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.
Feb
17
PBS 30 of x – Comparing JS Objects | Introducing WAI-ARIA
Filed Under Computers & Tech, Software Development on February 17, 2017 | 2 Comments
In this instalment we’re going to continue with our dual-track approach, first, looking at some more JavaScript prototypes, then switching tack to HTML forms again.
We’ll start with my sample solution to the challenge set in the previous instalment. Then, we’ll move on to add an important enhancement to our prototypes – support for object comparisons. Strictly speaking, this won’t actually be revision – we haven’t looked at the intricacies of comparing objects before.
We’ll finish our JavaScript section with another challenge.
When we switch back to HTML we’ll take a big-picture look at an important accessibility standard named WAI-ARIA. We want to build our forms in a screen-reader-friendly way from day one, and to do that, we need to begin learning about ARIA. ARIA is really quite big, so all we’ll be doing this time is taking in an overview so we understand why it exists, and the basic concepts its built around.
We’ll finish by creating a final, fully accessible, button complete with a pretty scalable icon.
In the next instalment we’ll finally be ready to move on to some more different form inputs, specifically, checkboxes and radio buttons.
Feb
3
PBS 29 of x – JS Prototype Revision | Glyph Icons
Filed Under Computers & Tech, Software Development on February 3, 2017 | 2 Comments
In this instalment we’ll continue with our twin-track approach of revising JavaScript prototypes, and learning about HTML forms.
We’ll start by moving our JavaScript revision out of the PBS playground, and over to NodeJS, getting you much better error reporting. Then we’ll have a look at my sample solution to the challenge from the previous instalment, and we’ll eradicate another bad smell from the prototype. We’ll come face-to-face with the implications of the fact that variables don’t contain objects, but references to objects. If you don’t bear that fact in mind, you can end up with spooky action at a distance that seems like the worst kind of black magic. The kind of bugs that baffle, mystify, and drive you nutty as squirrel poo!
We’ll then switch gears back to HTML forms, where we’ll learn about a very powerful technique for including scalable vector-based icons in your form elements. These very special icons are known as glyph icons, and while rolling your own is a significant undertaking, you don’t have to, because you can use icon sets created by others. We’ll learn about glyph icons using the free and open source glyph icon set from Font Awesome.
You can download a ZIP file containing the sample solution to the previous challenge, and, the example HTML file from today’s examples here.
Jan
20
PBS 28 of x – JS Prototype Revision | CSS Attribute Selectors & Buttons
Filed Under Computers & Tech, Software Development on January 20, 2017 | 4 Comments
In this instalment we’ll continue our parallel streams of JavaScript prototype revision, and web forms.
We’ll start by looking at a sample solution to the challenge set at the end of the previous instalment. We’ll look at what is good about the solution, and where it falls short. We’ll then improve the prototypes through the user of private helper functions.
Before moving on to look at HTML buttons in detail, we’ll learn some new CSS selectors that are particularly useful for styling web forms.
Dec
31
PBS 27 of x – JS Prototype Revision | HTML Forms
Filed Under Computers & Tech, Software Development on December 31, 2016 | 2 Comments
In this instalment we’ll make a start on a large topic which we have intentionally ignored until now – taking user input on the web. The way this is done is through HTML forms. It will take us a few instalments to learn all about them, so we’ll start with the basics in this instalment.
The code for the examples in this instalment has been collected into a single ZIP file which you can download here.
Dec
10
PBS 26 of x – HTML Data Attributes with jQuery
Filed Under Computers & Tech, Software Development on December 10, 2016 | 9 Comments
After our brief division in the previous instalment, it’s time to get back to learning new things. We’ll learn about data attributes – a mechanism for embedding data into HTML elements.
We’ll also revise what we learned about defining our own object prototypes to start including prototypes in our APIs.
Finally, as a practical worked example, we’ll build a better clock API for Allison’s website. Each Sunday she streams the live recording of her podcast from podfeet.com/live at 5pm at her house. To avoid timezone confusion, Allison would like a clock on that page that shows the current time at her house.
As usual I’ve packaged all the files needed for the worked example into a ZIP file which you can download here.