DEV Community: Tom Andrews

Rounding at the start

Tom Andrews — Sat, 06 Feb 2021 22:26:03 +0000

At a recent consulting client I was working on fixing a few issues with their in app calendar. The calendar has all of the usual features such as adding short, all day events and then displaying them in a calendar view allowing day, 3 day or week views. This is a surprisingly difficult endeavour in both the front end and back end.

One of the issues was that all day events were appearing on the wrong day. So adding an all day event on Tuesday would create an all day event starting on Monday and lasting two days. Given this it sounded like something weird was happing with the starting date. But given that it now spread two days I was very confused as I expected an all day event to only store the start date and the length. So how was the length changing? Also, speaking to a colleague who had looked into this before they said they had spent some time before and narrowed down the location of the issue to the database. But that sounded crazy as we are using MS SQL so a very well battle tested database and we shouldn’t be doing anything weird. So I thought it would be best to take a fresh look and start from the beginning.

So the first thing to do was to try and recreate it locally. This was luckily very easy and worked - I mean didn’t work - exactly as described. I tried a few different versions of all day events. But they all had the same issue. So we needed to start the actual work.

Digging into the network transfer from the UI to the backend you could see that all events were the same sending a start date and time and and ending date and time. For the all day event the event started at midnight and ended at one second before midnight. I could see the correct values were being sent for the all day event but this API didn’t match my expectations. The response from the API also had the invalid start date but the time was still correct and it returned the events ID.

Now, into the API. This is a calendar specific microservice so luckily wasn’t too big. Also its pretty straightforward using the patterns found throughout the rest of the microservices -NestJS and TypeORM. So it was easy to see that how the data flowed through the application and how it was saved. The TypeORM entity defined which table the data lived in so I opened upDBeaver and queried the events table and could see for the all day events I had created were exactly like we saw in the UI - they had the wrong date.

So either, the problem lies in either what the API’s input, our processing or what we are sending to the DB. I added logging at the first point we receive the start date time and the place where we pass it to TypeORM to save. At both of those places it was correct! Could it really be MS SQL?!

So there is still one layer between us and MS SQL - TypeORM. Now TypeORM is a pretty popular library in of itself - not as battle tested as MS SQL but I definitely wouldn’t expect it to be the source of the issue but the logging proves it isn’t us. So I googled it and found an issue that matched it exactly node-mssql v5 incorrectly stores Dates. So the database adapter that TypeORM relies on mssql it had an issue where it would incorrectly round dates within the first 3 seconds of the daybrilliantly deduced by@imnotjames. The mssql issuehad been resolved but the newly released version 7 alphas of mssql were not compatible with TypeORM.

So this meant that we had to tackle this on two fronts. Firstly we needed to put a workaround in to the calendar microservice so that it would take any datetime this was pretty straightforward. A small PR to wrap any save of a date in the calendar service in a function that checked if the datetime was close to midnight and then add a minute. Secondly I created a PRthat fixed the pretty minor compatibility issues between TypeORM and mssql v7.

This morning I can happily say that the PR has been merged and so will be in the next release of TypeORM and we can remove the workaround in the calendar micro service.

I’m pretty happy with how this went and got to dig into the internals of some pretty core parts of our app and the libraries we depend on learning a lot in the process. The fact this is all open and I have the ability to fix issues that we encounter is really empowering. But lets hope I don’t have to do it too often 🤞

Scripting projects

Tom Andrews — Tue, 22 Sep 2020 22:11:00 +0000

Over my career the move from monolithic applications to micro-services has come with a number ofbenefits. In my experience some of the best features are that they can reduce overall complexity,enforce design discipline, scale much better to larger applications (and teams) and allow for moreappropriate technical choices. One of the problems they bring is that the developer’s environmentcan get a lot more complex. Each service you require to run the app is an additional bit ofcomplexity as each service needs certain dependencies installing, needs the correct environmentvariables, the correct branch etc. Then once you’ve got them running you need to be able to accesseach one so you can make the necessary change for your work - you might even need to be able makechanges to multiple services ones in one go.

As a new developer working on one of these applications can be a bit of a nightmare. You often needa decent amount of the services running every time you want to start work. You need the servicesstarted, you might need the tests running as well and then you’ll need a terminal in the rightdirectory as well. For years I’ve been doing this all manually - log on in the morning and spenda couple of minutes getting everything started or if its a specific laptop just for this projectthen hope everything survived the wake from sleep and hope I don’t need to restart it ever! As youcan see this was never sustainable especially when I started working on a mature project that pushedthis much further than I have seen before.

For this mature project to run the public facing website required a dozen services and a multi-dayset up process using internal tools to import the necessary data. This was also running on my laptopso when I wanted to stop working on the project and work on home projects in the evening I needed toable to stop all of these services and then start them all when I started work the next morning.

To solve this problem I chatted firstly with the existing developers and they were using acombination of iterm and screen.All the solutions were very custom to their individual developer and contained many caveats so Icouldn’t take them wholesale and just get going. So I needed to build my own. From a technology theiterm solution was not ideal, the scripting seemed very complex so might work for the currentproject but would need a custom solution for each project. screen looked much better but I havebeen listening to a lot of podcasts from people in the ruby communitywho have heavily been advocating tmux which I have noodled within the past (for adding tabs to alacritty). So if I’mgoing to have to learn a tool I think its best I use the one I am starting from a better positionespecially as I didn’t have a lot of time to do this.

So I ended creating a pretty small but useful script for the project that would start all theservices and bring them up in their own tabs and two panes for each application - one running it theother just in the correct directory for git commands, running tests etc. There is also a killcommand to bring it all back down again so that there is nothing left running when I have finishedfor the day. This solution has worked well enough and I’ve really enjoyed living without any itermtabs and just living in tmux. So much so that I’ve also started creating similar scripts for allmy projects. Even if they don’t require multiple services, just having a nice consistent way ofgoing into the project and running a single command its all up and running is really nice. Thisspace needs a lot of work there are a few things that don’t work well yet.

Starting a dozen or more services starts them ALL at the same time which means that your CPU isoverwhelmed for those first couple of minutes
A proper way of defining shutdown commands for each of the services rather than just killingeverything seems necessary
Some sort of priority order would also be nice but I would hope most services should be prettyresilient.
Integration of existing tooling like docker compose etcwould be nice so that you don’t have to define too much for each app.
Allowing a user to customise what additional things every app gets or defining some sort ofstandard layout would be nice as people work in different ways and this is defining the servicesand how to run the tools not forcing a workflow.

Here are my current versions

The one that started it all dp-start
A simple version for an in progress dynamodb ORM called dynamodb2

Accessibility - VoiceOver iOS anchor bug

Tom Andrews — Sat, 15 Aug 2020 18:50:03 +0000

An interesting thing about accessibility work on the web is that they bring a completely newmechanism for interacting with webpages - the rotor. The rotor is a mechanism for jumping todifferent parts of the pages by the type of the item, this could be links, headings, tables etc.

The thing about the rotor is that it removes the context you would get normally in a page so forexample if you have download links for different documents in different formats you would have agrouping containing the title of the document and then the different download links just containingthe format e.g. xls, csv etc.

When this example is pulled out into a rotor you get a list of links saying xls, csv over andover again which is really not helpful and would be super confusing to the user.

The solution is usually to add some additional context that only the screen reader would notice.This content is hidden using a very hackish CSS class usually called something like sr-only orvisuallyhidden. These classes are very complex and fraught with danger. If you want some lightreading there is an enlightening github issue aboutthe one in html 5 boilerplate. There is also another interesting github issuewhere the amazing Sara Soueidan raises the possibility ofgetting this built in to CSS all the way back in 2016. This seems like a no brainer to me given thatlots of people are having to add this in user space and that the benefits of a stable solution forusers using a screen would be immense.

So basically we were bound to find places where adding visuallyhidden elements was not going towork and here is one of them.

On VoiceOver for iOS (v13.6.1) the visuallyhidden text is ignored when added inside of a link sofor example from an article page

<a href="/download?id=123&format=xls">
  <span class="visuallyhidden">Download table A as</span>xls
</a>

It would read just xls and only show xls in the rotor. Which is very confusing when on anarticle with lots of tables!

So after some digging I found some research from Nick Colley of the gov.uk frontend teamwho had researched this thoroughly. The best solution was to give up on visuallyhidden and switchto using aria-label.

So it became:

<a href="/download?id=123&format=xls" aria-label="Download table A as xls">
  xls
</a>

Whilst the change wasn’t drastic the complexity of getting to the solution and finding out how toresolve it was the tricky part. Additionally I did a small amount of research to how well this wassupported in JAWS - the last major screen reader I don’t have access to. In my search I came acrossa tool similar to Can I Use but for screen readers called Screen reader reliability by PowerMapper.

Accessibility - Running NVDA on a Mac

Tom Andrews — Fri, 14 Aug 2020 17:52:03 +0000

Introduction

For the past month I’ve been work on an accessibility project. There are three major screen readers

Given that JAWS is pretty pricey and has a steep learning curve I have mostly been focussing ongetting everything running well on NVDA and VoiceOver and getting support from other members of theteam to check JAWS.

For the past 8 years I have been working on a Mac. Whilst there is VoiceOver for Mac (which is notthe same as VoiceOver on iOS) NVDA is not available and only runs on Windows. To get this runningrequired a bit of work that I couldn’t find documented anywhere else. So here it is for you andfuture me.

Instructions

The first thing is to get a copy of Windows so that we can run in VirtualBox locally. LuckilyMicrosoft provide Window 10 imagesfor testing browsers on Windows. They expire after 3 months but saves £150.
Once you have Windows then you also need VirtualBox. If you havehomebrew you can install it with brew cask install virtualbox.
Now you need to load and boot the virtual machine.
Download and install VirtualBox extension pack intothe VM.
Stop the VM.

Alter the VM Settings and under the audio tab.

Enable Audio
Set the Host Audio Driver to CoreAudio
Set the Audio Controller to Intel HD Audio
Under extended features ensure that Enable Audio Output is checked
1. Boot the VM and the audio should be working now. You can prove it by visiting YouTube or somethingsimilar.
2. Now, within the VM download NVDA
3. Install NVDA

Now you can use a browser and see how it is read by NVDA.

Optional extra - Getting NVDA to read multiple languages correctly

With NVDA running you can right click on it running in the task bar and select Preference >Settings
Under the Speech section you need to set the Synthesizer to eSpeak NG.
Now it should respect the element and html language attribute to determine how to read the text.

Zoomed images on iOS

Tom Andrews — Fri, 28 Feb 2020 20:02:03 +0000

I’ve been working on a wedding website for my upcoming wedding to my amazing fiancé Elina in August.The website is intended to be a place where we can share the details and the guests can RSVP easily. Not flying to far away fromthe current design trends we have made quite heavy use of parallax scroll. However it has been a fewyears since I’ve done this and I can see now you can do simple and even some more complex parallaxscrolling in pure CSS instead of JS listening to scroll events which unless you are careful can getjanky quite quickly.

Everything was going smoothly. I picked up Sizzy which is really amazing forseeing your site at multiple resolutions very easily. Now everything is done - the parallax is all niceand smooth even with a throttled CPU in dev tools. I push it to a PR and the netlify preview loads.I confidently send the link to Elina and she goes

Uh… what is with the images? Are they meant to look like this?

I load it up on my phone and see they do look crap - they are zoomed in awfully.

I do think fire safety is important but I’m not sure it should be the first thingpeople can kind of read on a wedding invitation website. That’s just not good UX. 💩

So 10 minutes of googling later I find out that iOS have issues with background-attachment: fixed in combination with background-size: cover. Which is a little annoying but I guess this is what web development is all about.

So I decided to drop it on iOS and then once they have fixed the issue we can re-enable it.

The quick fix to disable it was this:

@supports (-webkit-touch-callout: none) {
  background-attachment: initial;
}

This media query targets only mobile safari devices and sets the background-attachment as if none was set. This fixed the issue and now the wedding website can go out and collect RSVPs whilst Elina and I go back to debating more important things for the wedding.

Testing tokens

Tom Andrews — Sat, 02 Nov 2019 20:44:03 +0000

I’ve recently started working on a new project that makes heavy use of JWT. Thishas meant that I’ve been wrirting a decent number of tests to ensure that the token contains thecorrect contents and will expire at the correct time. A lot of the tests started looking like this.

const { iat: _iat, exp, ...contents } = jwt.decode(token)
expect(contents).toMatchObject(expectedContents)
expect(exp).toEqual(Math.floor(Date.now() / 1000) + 60 * 60)

As you can see this is very verbose and hides the intention of the test. It would be great if we could write a much cleaner test. Like this

expect(token).toBeTokenContaining(expectedContents)
expect(token).toBeTokenExpiringIn("1h")

As we using Jest there is a way of extending it to add ourown matchers. So I created a new npm package that adds a couple of custom assertions for working with JWT. It is called jest-expect-jwt

This was an overall great experience in extending jest by following the docs. The only complexity came from the integration with typescript and ensuring that the types for the new assertions were detected. When using it in a test it would execute successfully but would show an error in vscode.

Property 'toBeTokenContaining' does not exist on type 'JestMatchersShape<Matchers<void, string>, Matchers<Promise<void>, string>>'.ts(2339)

I eventually found a solution by reading the docs for jest-extended and it should that you need to import the types into a global.d.ts.

But either way it will nice writing better tests. And you can too jest-expect-jwt