5 Common Web App Accessibility Issues And How To Fix Them

 |  Web Accessibility, HTML

Over the years, I’ve worked on many large web app projects with developers of varying levels of experience and often see the same web accessibility issues crop up. In this article, I detail the 5 most common web accessibility issues I’ve come across and offer solutions for them.

Are you making / have you made these mistakes in your projects?


1) Using An Input Without An Associated Label

Wrong - Using plain text next to the input

Username <input type="text" name="username">

The text “Username” is not associated with the <input> so when a screen reader announces the <input>, it won’t announce that it’s for entering a username. The <input> will be announced along the lines of “input, edit text” so a screen reader user would have no idea what this <input> is for or what to enter.

The text “Username” also won’t act as a click / touch target to set focus to the <input>.

Read more

Using TypeScript With Knockout

 |  TypeScript, Knockout

Knockout is a minimalist, mature and proven library for creating web applications. It isn’t as feature rich as some of the more modern libraries & frameworks but it does what it does well, primarily being binding HTML elements against a data model. Even in 2019, I believe Knockout has its place and is still used on some very large projects, including Microsoft’s Azure Portal.

As of v3.5.0 (released Feb 2019), Knockout has built-in TypeScript definitions. https://github.com/knockout/knockout/blob/master/build/types/knockout.d.ts

TypeScript provides a huge amount of benefits over JavaScript including type safety, improved IDE tooling and additional constructs like interfaces and enums. If you have an existing project that uses Knockout, you can move over to TypeScript now and start enjoying these benefits.

This article will start with covering using TypeScript and Knockout’s type definitions to create view models, components and bindings that are strongly typed. We’ll then cover creating a new project from scratch that uses webpack and Babel to transpile TypeScript down to JavaScript (ES5).

Read more

Gradually Migrating To Typescript

 |  TypeScript, Babel

This article covers how to start using TypeScript modules in an existing project alongside JavaScript modules. If you have a large project, it may not be feasible to move to TypeScript all in one go. Gradually migrating provides more flexibility and allows you to, for example, use TypeScript just for new code or “upgrade” modules when there are changes to existing code.

TypeScript provides some huge benefits like types support, better IDE tooling and additional constructs like interfaces and enums so why not start making use of these now.

Read more

Vuex Getter With Parameters In TypeScript

 |  Vuex, TypeScript

When using Vuex with TypeScript, you typically use the @Getter decorator from the binding helpers package vuex-class. This is a more declarative approach over using this.$store.getters.*.

Vuex @Getter example

@Getter('books', { namespace: 'library' })
books!: Book[];

The getter above retrieves all books from the Vuex module library but what if you wanted to retrieve just a single book by it’s ID?

Read more

Designing And Developing A Responsive Weather App Webpage

 |  RWD

This article covers designing and developing a Weather App webpage using Responsive Web Design (RWD) techniques.

This article will cover creating wireframes for our page so we can visually see how the app will be laid out on different devices and then we’ll create some high-fidelity designs. Next we’ll develop the responsive webpage making use of CSS media queries to alter the layout and design to fit any device screen size from a mobile phone to a large desktop.

Read more

Creating A Blog With Eleventy

 |  Eleventy, Static Site Generator

This article covers creating a blog from scratch using the Node.js powered static site generator Eleventy (aka 11ty). Eleventy is a relatively new project that came out in 2018 and is quickly gaining traction. It’s up to an impressive 3,000 stars on GitHub already. Eleventy keeps things simple and as you’ll see, really enables you to quickly create a fully functional site.

The blog we’ll create will contain a homepage with excerpts from our posts that can be clicked on to read the full post. Once we have our blog up and running, adding new posts will be as simple as adding new Markdown files. Eleventy will take care of generating HTML pages seamlessly for us as well as updating the homepage.

Read more

One Scenario Where The Medium.com Import Tool Fails

 |  Medium.com

Some missing metadata on your site could be the cause of not being able to import your story into medium.com.

For the last few hours, I’ve been pulling my hair out trying to understand why the Import Tool on medium.com wasn’t working for an article on my blog.

Read more