BEM (Block, Element, Modifier) is a methodology for naming CSS styles in a modular and maintainable manner. If you've worked on large websites, I'm sure you'll have come across indecipherable class names and felt the pain of changing a style in one place and that breaking the styling elsewhere on something that seemingly isn't related. These are issues that BEM will help you to avoid.

In this article, we’re going to use the example of a product card to explain BEM.

Product card showing a toilet roll
Product card showing a toilet roll
Product card example

BEM relies solely on CSS class names to apply styles to HTML so there are no HTML tag or…


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


This article covers using TypeScript and Knockout’s type definitions to create view models, components and bindings that are strongly typed.

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


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.

This article assumes you’re using webpack with Babel to transpile ES6+ down to ES5. The code for this article is available on the GitHub repo: https://github.com/JonUK/javascript-with-typescript

Steps to configure TypeScript support

1


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.

The code for this article is available on GitHub: https://github.com/JonUK/responsive-web-weather-app

Project Brief

Before we start, let’s review the fictitious brief for our Weather…


The Internet is a fantastic medium where people can share information, knowledge… and cute cat photos freely and inclusively. HTML is one of the key technologies for the World Wide Web and when used correctly, largely ensures content is accessible to all. Unfortunately, with the rush to create sophisticated JavaScript rich web pages, the fundamentals of good semantic markup are often overlooked to the detriment of web accessibility.

One way to drastically exclude users from your site is to add JavaScript click handlers to non-interactive elements such as <div> and <span> tags.

When is a button not a button?

Can you spot the difference between the two…


We’re going to develop our News App further to show a list of news articles from server data and use Vuex for state management.

This article is the second part of the instalment. If you haven’t read the first part, I recommend you start there and come back.

In this second part we’re going to see how to use the Vuetify card component and see how to use Vuex with modules.

The code for this article is available on the GitHub repo:
https://github.com/JonUK/vuetify-mobile-app

News List Component

We have the application shell in place for our News App and now we need to implement showing a list of news articles. To help visualise how we want the UI to look, I’ve created a low-fidelity design using Adobe XD…


This article covers creating a Mobile Web App from scratch using a bunch of tools from the Vue ecosystem. The fictitious app we’re going to create is a News App. (Updated Dec 2019 for Vuetify 2.x)

News App — Application Shell

We’re going to use Vuetify 2 for the material design components and Vue Router to handle navigation. The code is going to be written in TypeScript.

Part 1 of this article will cover creating the application shell. In future articles, we’ll build further functionality and make use of Jest and Vue Test Utils to write our unit tests.

The code for this article is available on the GitHub repo:
https://github.com/JonUK/vuetify-mobile-app

Creating the Project

So without further ado, let's create our project. We’re going to use the Vue CLI 3 so first ensure this is installed.

npm install -g @vue/cli

Then we can use…

Jon Keeping

Software Engineer. Google Certified Mobile Web Specialist.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store