The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Mar
1
PBS 31 of x – JS Static Functions | Checkboxes & Radio Buttons
Filed Under Software Development, Computers & Tech on March 1, 2017 | 4 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 Software Development, Computers & Tech 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 Software Development, Computers & Tech on February 3, 2017 | 4 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 Software Development, Computers & Tech 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 Software Development, Computers & Tech on December 10, 2016 | 10 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.
Nov
23
PBS 25 of x – A Case Study (bartificer.linkToolkit.js)
Filed Under My Projects, Software Development, Computers & Tech on November 23, 2016 | Leave a Comment
This instalment is a little unusual – rather than learning new topics, and then demonstrating them with a few simple examples, we’re going to look at a real-world JavaScript API, see how it works, and in so doing, reinforce what we’ve already learned, and expand our knowledge a little.
The library we’ll be examining is bartificer.linkToolkit.js, a small open source library I released over the weekend. This library bundles some functions for manipulating links in HTML documents. The two main functions of the library are to ensure that links with a target of _blank also specify a rel of noopener (for security reasons), and, to automatically make links leading out of the site open in a new tab, and denoting that fact with an icon appended to the end of the links. You can see the library in use right here on this page!
We’ll be looking at the library from three points of view – the actual JavaScript code, the JSDoc comments, and the documentation produced from those comments, and, project management.
Nov
19
TTT Part 36 of n – screen & cron
Filed Under System Administration, Computers & Tech on November 19, 2016 | 4 Comments
The previous 13 instalments in this series related to networking, but we’re going to change tack completely for this instalment, and look at two un-reltaed, but very useful terminal commands – screen, and cron.
screen is a utility that allows for the creation of persistent virtual terminal sessions that you can disconnect from without terminating, and reconnect and pick up where you left off at a later time. screen is particularly useful when used in conjunction with SSH.
cron on the other hand is a system for automatically executing recurring tasks. It’s extremely flexible, and very useful for things like scheduling backups to run in the middle of the night.
Oct
28
PBS 24 of x – Creating a JavaScript API
Filed Under Software Development, Computers & Tech on October 28, 2016 | 4 Comments
In this instalment we’ll take our JavaScript skill up a level, learning how to write code that is designed to be re-used by ourselves or by others. When you solve a problem that you know you’ll need to solve again, it’s worth putting in a little extra effort to make your code as easy to re-use as possible. You may decide to share that code with others, or you may not, but either way, it’s in your interest to write it using some simple best practices.
Re-usable code without documentation is all but useless, so, we’ll also learn how to create great API documentation as you code. We’ll learn to do this using the free and open source tool JSDoc.
As a worked example, we’ll re-write our link fixer as an easily re-usable API, and while we’re at it we’ll also add in some extra functionality to make its behaviour more customisable, and hence, more useful to more people.
The sample files used in this instalment, as well as some needed libraries, can be downloaded as a ZIP file here. The examples assume you’ll save the files within the zip in a folder named pbs24 in the document root of your local web server.
Oct
12
PBS 23 of x – Creating Elements with jQuery
Filed Under Software Development, Computers & Tech on October 12, 2016 | 2 Comments
So far in this series we have been using jQuery to alter existing HTML elements by changing their attributes or style. In this instalment we take things to the next level, and learn how to use jQuery to create entirely new HTML elements, and inject them into the DOM, and hence, into the web page.
We’ll be working towards our first truly practical assignment in the series – a function that finds all links on a page, and if, and only if, they lead to an external page, alters them to open in a new tab, and appends an icon indicating that fact. In order to work up to that we need to learn five new things:
- How to build HTML elements with jQuery
- How to inject HTML elements into the DOM
- How to loop through each element represented by a jQuery object
- How to embed images directly into web pages using Data URLs
- How to use the 3rd-party library URI.js to interrogate URLs
There are four examples in this instalment, and a starting-point for the challenge. I’ve gathered them, and the other files they depend on, into a ZIP file which you can download here. It’s assumed that you’ll extract this ZIP file and place the five HTML files and one folder it contains into a folder named pbs23 in your local web server’s htdocs folder. The folder is particularly important because it contains a copy of the URI.js library, and if it’s not in the same folder as pbs23d.html and pbs23-assignment.html, those pages won’t work.