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
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 | 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.