Jump to ‘Tooling’ to dive straight into the detail, or start from the beginning to learn about the problem.

excited group discussing around a table
excited group discussing around a table
Yes, it is that exciting! Credit: Jopwell
- The web is always changing
- Who to support?
- What is necessary to support older browsers?
- New JavaScript Features
- Tooling
- Browserslist
- Transpilation
- Polyfilling
- Lodash
- eslint-plugin-compat
- It's not just JavaScript - Compatible CSS
- What is the ideal setup?
- Considerations
- The ideal
- The ideal analysed
- The next best alternative

The web is always changing

The technology that makes up the web evolves over time, new replacing the old and the old eventually becoming…


webpack, loadable components, and prefetch and preload resource hints
webpack, loadable components, and prefetch and preload resource hints

So, you have a React application, understand the performance and therefore usability benefits of splitting the code you ship to your users into multiple smaller bundles (chunks) rather than one large bundle, and have heard of Webpack ‘dynamic imports’ but are not quite sure how to go about using them. This guide is for you!

We’ll look at different techniques of implementing code splitting, explore how to use Loadable Components to manage these, and outline how Webpack ‘magic comments’ can be used to generate prefetch and preload resource hints (and how useful these actually are).

This post was written using…


developer at computer
developer at computer
developer by Kelly Sikkema

My path to being a developer is fairly unusual, though getting less so as more and more people re-train to enter the tech world. I originally graduated in Film Production in 2010, wandered the world for a while, then in my late 20s, decided to dive into a coding bootcamp and see what that life was all about.

With no CS degree, no work experience, and only a 4 month bootcamp to start me off, joining a well established tech company was fairly intimidating. …


lint-staged + husky npm packages

This post will look at setting up lint-staged and husky for running pre-commit checks. A lot of context is given in this post, but the actual code changes are very small!

What are pre-commit checks?

Pre-commit checks run after staging your changes and running git commit and before a commit is completed. If the checks fail then the commit is not made and an error shown, while if all checks pass the commit is made as normal.

Why run pre-commit checks?

Pre-commit checks are commonly used to run linting scripts and tests, allowing each commit to be as clean as possible. …


An example jest-axe test

Good automated tools are a cheap way to help create and maintain a baseline of accessibility (a11y) in a product, to then be expanded on with manual testing.

We will look at manual testing strategies in another post, and here introduce 4 automated tools that can be used at different stages of the development process.

We will be looking at:

Why use automated tools?

Rather than re-write an already great explanation, let me directly quote from a UK Government Digital Services post:

Automated tools can be a useful and cheap way of helping you make…


jest and react-testing-library logos

jest and react-testing-library are an increasingly used tooling pairing to test React components. We will briefly look at the differences between the two before looking at some high level examples, and how straightforward it is to add jest-axe to integrate aXe automated accessibility testing.

Jest

Jest is a JavaScript unit testing framework, developed by Facebook to test services and React applications.

jest acts as a test runner, assertion library, and mocking library.

jest also provides Snapshot testing, the ability to create a rendered ‘snapshot’ of a component and compare it to a previously saved ‘snapshot’. The test will fail if the…


Kotlin, a11y, and Android logos

When researching examples for a first ever Android contribution, few examples existed for animations written in Kotlin. There were also few code examples of accessibility considerations within native animations.

So here we go! Let’s look at writing a native ‘expand’ animation in Kotlin, and talk about how to assist those with TalkBack or enlarged text turned on. All code is available in this example repo, creating a single activity with an animated view within it. The code this is based on was co-written with Calum Turner.


Previously we looked at what end-to-end (e2e) acceptance testing is, the layers beneath the CodeceptJS e2e testing framework, and how to set up an app for testing in ‘How to Dockerize your End-to-End acceptance tests’.

The Dockerized example project given in that post focussed on the environment setup needed to run tests against different browsers.

This post will focus on examples of writing tests when the the core CodeceptJS API is expanded via:

  • Custom helpers, to talk directly to the chosen backend’s API
  • Custom I methods
  • Custom page objects and page fragments

For writing basic tests without deeper customisation CodeceptJS…


Akamai logo

Akamai is one of the world’s leading Content Delivery Network (CDN) providers. Through the Akamai Intelligent Platform many products are offered to aid performance, availability, security, and insight generation.

Other CDNs include Cloudflare, Fastly, MaxCDN, Incapsula, and Rackspace.

Here we will look at what a CDN is, then some specifics around Akamai’s implementation, including:

  • The Akamai Intelligent Platform and Edge Servers
  • The Akamai Interface and Property Manager
  • Routing Performance
  • Caching

What is a CDN?

A user request for content on the public Internet may appear simple, connecting to the server holding the content (the ‘content origin’) and returning this to the user, but it…


Flow is a static type checker for Javascript. This post is intended for those who have heard of Flow, but have not yet tried to use it within a React app. If this is the first time you have heard of Flow then I can recommend these four posts by Preethi Kasireddy as a great introduction.

One great thing about Flow is that it is possible use it incrementally. You do not have to completely refactor an existing project to start using it. …

Dominic Fraser

Edinburgh, Scotland.

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