Image for post
Image for post

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


Image for post
Image for post

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 created your React projects using create-react-app. …


Image for post
Image for post
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 all seem so different, each comes with it’s own set of requirements and behaviors, and on top of that we get a set of pixel-perfect designs for the multiplicity of states, which seems like an overwhelming amount of effort for a simple form input. Many of the interface elements, such as cards, menus, tabs, have predictable patterns and can be isolated into data structures, which can then be mapped to specific components. When it comes to forms however, we become very expressive and write 200 lines of HTML to render labels, inputs and help texts, then we start adding validation logic, then we realize we need to work on error states, then we need to achieve the transition between various states, then we need to figure out keyboard accessibility, and so forth. If you don’t have a strategy from early on, your forms become a mess, and you have a hard time introducing modifications without breaking something else, and any change to the markup becomes a time-consuming drill through numerous views and components. …


Image for post
Image for post
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 the state to props inside your components. If you have a multi-step form wizard, you end up with quite a lot of conditional logic, trying to determine which components are to be shown at which stage of your user journey. …


Image for post
Image for post

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


Image for post
Image for post

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


Image for post
Image for post
Photo by Rae Tian on Unsplash

It’s 2020, and one thing the internet can’t agree on is how to collect and store postal addresses. Every website you look at has its own format and naming convention. Your browser’s autofill chokes every time someone invents a new label for the infamous zipcode. Not to mention the time you spend mapping address schemas between your front end, back end, payment processor, shipping partner, accounting software, and you name it.

I am going to share the schema I have been using for the past 5 years across a number of international applications and websites. It served me well and didn’t require any mental acrobatics to get used to. Zipcodes, just like feet, pounds and miles, have no place in a globalized world, at least not when it comes to storing data in a standardized manner, that will withstand localization needs of an international postal economy. …


Image for post
Image for post

You can invest all you want into customer retention, but if you treat your users as idiots with messages like “Ooops! Something went wrong!” for everything that goes awry in your application, you are bound to alienate and frustrate them. Your customer service will be overwhelmed with unhelpful issue reports from users, who see dumb generic error messages; you and your colleagues will be wasting their time chasing phantom bugs following such reports; and it will ultimately harm your bottom line, when users start abandoning your service having lost patience with passive aggressive error messages.

A common argument you hear from back-end developers is that what happens on the server stays on the server and that you shouldn’t expose your business logic to customers, for security and other reasons. That’s a valid argument, however, that is no excuse for returning 500 responses without any context every time a non-fatal error occurs on the server, and when the HTTP protocol defines a series of 4xx error codes specifically for that reason. …


Image for post
Image for post

I have recently commented on an article titled Stop Using Else In Your Programs with an objection to the examples being used to illustrate the concept. Let me take this chance to elaborate more on the subject of raising exceptions/errors to improve the health of your application.

Don’t use scalar values to represent errors

Booleans, strings and integers should not be used to indicate errors, because the moment you do that, no matter how short your methods are, you loose context, introduce ambiguity, make your code less readable and testable.

As a general rule, only return booleans when your function evaluates to true or false. Boolean is an appropriate return for a function or method that starts with is, has, can or did. As soon as you start returning false from an operation that has multiple paths or stages, you are no longer in control and can no longer determine what exactly went wrong. You will spend hours chasing down phantom bugs, when things suddenly break. …

About

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