Testing presents many issues. When testing in the browser, we need to get pages full of realistic data in order to mimic user interactions. But sometimes that's easier said than done.

Clean up test data with a Playwright fixture

Playwright fixtures help set up environments for each test to run in. They are great when dealing with repeated tasks like authentication. Big blocks of code that do what they need to do well.

Passing options to Playwright fixtures

Writing tests can be hard. Browser-based tests even more so. They can be slow, brittle and hard to maintain. Playwright makes tests a lot easier to reason with, but developers can still be put off by the time it takes to get up and running. For applications requiring authentication it adds another layer of complication to the process.

Playwright fixtures for authentication

Charts and graphs are one of those things that it's just easier to reach for a third-party library to help create. Something like D3 is the go-to choice in this situation, but that story gets complicated when throwing React into the mix. Who handles updates then? It can quickly turn in to a headache.

Generate Dynamic Charts with Victory

Ever tried making a form in a React app? At the start it might not seem so bad, but as it grows it turns into a beast. The redux-form package is often the go-to choice out there to help, but that relies on Redux and is a massive burden for a quote-unquote "simple" form.

Manage React form state with Formik

98% of homepages online have some kind of accessibility issue. By automatically checking for common problems with Pa11y, we can be more confident that we are not accidentally adding any new ones into the codebase.

Test a site's accessibility with Pa11y

Components are the future of web development. Right now, JS frameworks such as React and Vue use a component-based approach to building apps, but that comes with added weight.

Build a format component using Stencil

In the age of frameworks, Webpack and complicated build tools, regular boring JavaScript can easily be overlooked. Gone are the days of sites that only shipped the code they needed right? We need runtimes now to compile our JSX else who knows what will happen.

Build a blog with Sapper and Svelte

Animations can make or break a website. Without them it can lack personality, but with too many and it can become overwhelming. Even after finding the right balance, an unnatural movement can make a well-intentioned interaction seem jarring. All of this seems like we'd be fighting a losing battle.

Animate a rating component with React Spring

Modern web development takes components for granted. Frameworks like React are built upon their existence and we're integrating their approaches into other parts of the web like CSS.

Tag: JavaScript