Not so long ago, should anyone mention a “design pattern” my mind would wander off to plotting Scottish kilts and Polka dots, but the more I deal with and scale real-life interfaces, the more convinced I become that these principles not only have their place in front-end development, but should in fact define it as much as they do back-end development.

User interfaces should be resilient to change, and it shouldn’t matter if the wind blows from the tail or the head [pun intended] — adapting to changing product requirements and design needs should be a painless developer experience. …


So you have an app or component library that you have created without create-react-app and you want to unit test it using Cypress. I had to go through some hassle to get that working with a custom webpack configuration, but it’s finally working, and here is my solution.

1. Install Cypress

npm install --save-dev cypress @cypress/react

Additional installation instructions can be found here.

2. Add cypress.json

{
"testFiles": "**/*.spec.js",
"experimentalComponentTesting": true,
"componentFolder": "./src",
"nodeVersion": "system",
"env": {
"webpackFilename": "./webpack.tests.config.js"
}
}
  • testFiles specifies a pattern for files that contain your tests
  • experimentalComponentTesting enables unit testing support. Though it says experimental, it’s quite stable now
  • componentFolder is…


Illustration Credit: Careerfoundry

I think state machines are a great fit for front-end development and they have been a part of my toolkit for over a year now. There are great FSM implementations out there, such as xstate and Robot, and they work well with React applications at scale, making complex user flows easier to implement. …


If you are maintaining multiple React libraries that cross-depend on each other, things tend to get cumbersome: you need to publish a new release of each library then pull the latest release everywhere it’s used. If you are actively developing features, it becomes frustrating and creates a lot of noise in your commit and release logs.

There are several ways to deal with the problem:

  • Using npm link to reference a local instance of the dependency inside the application you are working on
  • Using Lerna to maintain and resolve these references

Either way, you may encounter difficulties, if you have…


Technologies and standards powering the web are evolving fast, allowing us to do more with less and to achieve stunning user experience and performance with minimal investment of time and resources. If you are starting a new project today, you can leverage such great tools as Gatsby and Next backed by a headless CMS to build blazing fast static or server-side rendered web properties, optimized for the contemporary Internet. Alas ditching your current battle-tested code written in PHP, Python or Ruby and switching to an entirely different Node-based stack is a luxury not every product can afford. …


Create a New Project Modal by Paul Flavius Nechita

As developers we spend a good chunk of our time building forms, devising validation strategies and ensuring consistency of submitted data. Forms are a hot topic among the UI/UX folk, who write countless articles dissecting the perfect form field, discussing its anatomical structure and meticulously documenting its behavior. Developers however roll their eyes on a good day and want to strangle their UX counterpart the rest of the time. Forms are difficult, forms are boring, forms are tedious.

I think part of the problem is that we developers fail to see patterns, when we work with form elements — they…


Image borrowed from this article

Working with Redux is not always pleasant. It’s a great tool for certain use cases, but for an average app it can become a bottleneck, as it bloats up the code base and drains developer time for simplest of changes. Maintaining a Redux app is not as easy as you would wish: tracing the flow of data from dispatch to action to API call to reducer to component is hindering agility. …


I have recently started working with finite state machines, while rethinking our checkout funnel implementation. I must admit I am really fascinated with how well state machines are suited for front-end engineering. It takes a bit of getting used to the paradigm, and you might struggle to understand all the caveats at first, but the more you work with these machines, the easier it gets to reason about your otherwise complex application.

If you worked with Redux, you know how cumbersome it gets early in the process, trying to bootstrap the store, writing all the actions and reducers, and mapping…


I have written recently about DIY popup elements in React. Let’s use that knowledge to create a reusable React tooltips using function components and React hooks.

Let’s start by creating a simple hook that will allow us to toggle visibility of an element.

As you can see, in this example, we are exporting an event handler that can toggle the state of the element.

Let’s go a step further and instantiate a new popper instance and export the necessary references.

We are now using a React effect to create and destroy a popper instance when component mounts and…


I needed to build a custom select input in React. As usual, it came down to rendering a popup element with available options and figuring out its positioning relative to the input element, making sure the component is responsive and reacts properly to window resizing, while maintaining keyboard accessibility. There is no contender when it comes DOM positioning libraries — Popper.js is the industry standard— yet Popper.js 2 is relatively new and as of recent only available as a release candidate. …

Ismayil Khayredinov

Full-stack developer, passionate about front-end frameworks, design systems and UX.

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