Blog
-
Form Validation Essentials
Form validation is an essential process for maintaining data integrity, enhancing the user experience, and ensuring security of your website or service. The importance of form validation cannot be overstated. It plays a vital role in protecting both the user and the system from potential harm. For users, it ensures that their input is acknowledged and processed correctly, reducing frustration and improving…
-
Building a Web-Based Character Picker
I've spent the last couple of years learning German, and one of the things I've come to rely on greatly are tools to help select the correct characters that aren't immediately available on my standard QWERTY keyboard. Even beyond foreign languages, there are countless times when I've needed to use something that wasn't easily typed, so these tools have become invaluable. Contents Not All…
-
Picking The Right HTML Tag
Picking the right HTML tag can be difficult sometimes, which is probably why most of us tend to fall back to the generic <div> and <span> tags. Over time, this practice leads to Divitis, which makes code harder to read on more complex pages and it makes the web page less semantic, making it more difficult to navigate with assistive technology like screen readers. In-fact, ensuring we're…
-
Improvements to the Accessibility Checklist Tool
Since the initial blog post about my accessibility checklist tool, I've made further improvements which make the tool easier to use and more useful. Navigating to Previous Steps The first version was extremely linear, only allowing you to start from the beginning and progress to the next step. Now, you can move back to any previous step by using the link in the main steps outline. This…
-
Teaching Children with the Speech API
My eldest son is in the process of learning the alphabet, so I thought I could put my skills to use by helping him learn using two of the things he loves most: mobile devices and Mario! Like all 3 year olds, he loves technology, and we use it as an incentive for many things, from general good behviour to potty training. I've been incredibly impressed with how well he's taken to using a Switch and a…
-
Making Testing Easier: An Accessibility Checklist
Accessibility testing can be hard and time consuming, especially if you are new to it. The mix of browsers, operating systems, and user-space tools is vast and ever-changing. The WCAG guidelines are the de facto standards for accessibility requirements across the world wide web, but they're not exactly light reading, and they can be difficult for newcomers to fully understand and take in. What Do…
-
Using Intersection Observer to Improve Image Loading Performance
Page performance is always something we should consider when building websites and applications, whether that's real or the way that a user perceves your site is loading. Some experts would actually say that in some situations, perception of load times is more important than actual load times; it's why some people prefer progress bars over spinners. …
-
Making an Accessible Hamburger Menu
With more and more web usage being performed on mobile devices, increasing every year the, now common, hamburger menu is here to stay. One of the main problems that needs addressing is the usability and accessibility of the menu. A Typical Example Keyboard Handling Showing Focus Improving for the Screen Reader Setting the Expanded State …
-
Using Local Storage to Cache Images
I was recently working on improving the performance of a web page that pulled in a large dynamic list of images, and displaying their respective thumbnails on the page. Even with caching, the entire set of images took a considerable amount of time to fully load on the page. Enter the local storage API. What is Local Storage Storing Items for a Finite Duration Fetching Items Stored as JSON Aging…
-
Building an Accessibility Browser Plugin
I was recently talking with a former colleague about testing for accessibility, and specifically being able to run an automated test over a website to reduce the time needed to test. My answer then was that there is no way to fully automate testing for accessibility; there's no test that exists which can rubber stamp your website and give it passing marks. But it did give me an idea. Right now,…
-
Testing Popstate Events with Jasmine
I recently implemented some browser History API functionality in a project, and part of this was using popstate events to handle application state when the user navigated with their browsers navigational buttons. The problem was when it came time to write tests to cover this functionality, because I was writing in TypeScript, which is a strictly type language, and the version of TypeScript I was…
-
Accessible Modal Dialogs
Modal dialogues are a part of the web whether we like them or not, and there's plenty of reason to not like them when they're implemented in a really intrusive way. They do serve a very useful purpose though; they allow extra content to be presented to the user in a way that temporarily breaks out of the normal flow of the page without altering the existing content flow. Contents What Should…
-
Why You Should Not Use Rimraf
A little over a year ago I got into a discussion about the rimraf package . At the time I was using a mix of Mac and Windows and I was looking for a quick and easy way to remove the whole node_modules directory from an Angular project. My search led me to rimraf, which was touted as a cross-platform alternative to the traditional rm -rf written in node. Why Delete node_modules Anyway? The initial…
-
Updating Angular from 2 to 4
I recently needed to upgrade an Angular project from 2.4.1 to the latest (at the time of writing) version of 4.2. All the typical guides detail how to update the core @angular packages in the package.json, but stop there, omitting the other things that also need to be done to ensure the project/application still works as intended. This is what I found as I was performing my update: Updating the…
-
Testing Private Member Classes with Jasmine in Angular2 Template Tests
A little while ago I came across an issue when trying to implement template testing with Jasmine on an Angular2 project that was using private member classes. If you try this yourself, you'll get plenty of errors and warnings about various things that either can't be found, used, or can't be spied on. There's not a lot online about this, as it seems that private anything within Angular2 projects is…
-
Installing Node.js on Linux
If you're running Linux, and are in any way interested in using Node.js, then your first port of call would by the package manager used by your distro (apt on Debian and Ubuntu, or Yum on Fedora/RedHat.) The problem is, even if you're running a completely bleeding-edge distro, your Node version will probably be quite out of date. So what are your options? A bit of research gave me several options: Using…
-
Animated Glowing Line Drawing in Canvas
Following on from my last coding article showing how to create animated glowing lines in canvas this was an attempt at creating a simple animated drawing of a basic line art shape with the same glowing line technique. Because I wanted to be able to see the shape being drawn it had to be as a series of steps which could be broken down into manageable chunks. I also wanted the code to be flexible enough…
-
Animated Glowing Lines in Canvas
I spent a little bit of time last night playing around with the new HTML5 canvas and seeing if I could create a realistic glowing line that moved around on the screen. My efforts can be found at the end of this article, but here is a screenshot of it: The code itself is fairly straight-forward. A few random parameters are first set up to determine the colour of the line, as well as it's start and…
-
Popups That Always Work
"My popup windows don't work with Javascript turned off. How can I make them always work?" This is a question I see fairly frequently popping up on forums and mailing lists. Popup windows can be a pretty useful thing when used correctly, but in terms of accessibility, relying on Javascript for navigation is a bad thing. There is a way that you can still use that popup, without causing problems for…
-
Anti-Spam Email Script
Often in forums and blogs, I see people asking how to cut back on spammers getting to their email addresses on a page. The most frequent solution to this problem is to disguise the email, in the hope that the spam bots (scripts purposely built for scouring the webs' pages for email addresses) will be unable to recognise the non-standard format. Below are just some of the ways of email obfuscation: foo…
