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…

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

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

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:

• Google Lighthouse Audits
• Jest axe
• Pa11y CI
• Storybook addon-a11y

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

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