If your application gives the user a good feeling, they are more likely to continue using it.

2020 is right around the corner, which means more React apps are coming to the market. It is prime time to learn new UX tactics to stay ahead of the curve, and keep your app competing with the best!
Today we will be looking at some of the tactics that the top players of the industry are using. Placeholder content, micro-interactions, loading screen strategies, smooth fades & transitions. There is much room for improvement in each of our applications. …


A Side-By-Side Comparison

The maker of NodeJS, Ryan Dahl, has released a new runtime that aims to solve many of the shortcomings of Node. Your initial reaction might be “Oh great, another Javascript framework? Just what I needed…”. Don’t worry, I had the same reaction. After understanding the advantages, I too saw why Deno is exactly what a back-end Javascript developer needs in 2020. Let’s take a look at the top 5 reasons javascript developers are having a much smoother and more modern experience using Deno vs. Node.

1: Modern Javascript — ES Modules


Scrolling beautifully with React Hooks

Scrolling, an often overlooked area when it comes to improving our app’s User Experience.

Take a look at the before and after above. The “Before” example is the classic <a href="#______"> method of scrolling to a section. When the user selects a link on the sidebar, the screen sharply skips to the chosen section. We have completely lost our position on our page, it’s as if we are looking at a brand new page. Any context between sections is lost, consequently affecting the user’s experience and sense of control.

To keep the section’s context exposed, we can instead smoothly scroll from section to section (which we will soon learn how to do). Take a…


Upgrading your React app’s tables, maps, headers, lists, and notifications

Today we will be approaching five essential parts of our applications that are drastically improved by using the following components.

#1: Improving our Tables
#2:
Improving our Maps
#3:
Improving our Headers
#4:
Improving our Lists
#5:
Improving our Notifications

#1: Improving our Tables with the versatile Material-Table


Publishing your React components to NPM

2020Throughout most of my React career, my primary goal was to build apps. Though building my own NPM library interested me, it felt somehow out of reach. It's not. Publishing a React component on NPM that other developers can use is a simple process, and it can be incredibly rewarding. This coming year is a good time to expand our horizons and see how we can use our React skills to give back to the community.

What we’ll be building:


This guide provides lessons I’ve learned writing technical articles for programmers and tips you can use to be more successful

2020 ← If you have never written a Medium article before, you should. Take that thing you learned a week ago, sprinkle it with some personality and perspective, and share it with the world. As long as you put your personal twist on the topic, you are providing value, and the internet will benefit from your contribution.

It can be an incredibly rewarding experience, or it can be an underwhelming one. I want to help you achieve a rewarding experience on this platform. …


Building feedback and animations around your application’s user actions

Medium holds the perfect example of an improved user experience.

The clap button.

Pressing it is an instant dopamine release. Confetti, bright glowing animations, a sharp vibrate when pressed on mobile, this clap button is fun to interact with. These micro-interactions are an instant way to get users to fall in love with your application.

Let’s take a look at the before and after example above. The before example simply indicates that it was pressed with a color change. Bland, but gets the job done. The after example immediately gives you an attractive green outer-glow when you hover over the button, teasing you…


Improving React User Experience

Our applications are always moving from screen to screen, constantly throwing data at the user. Today we will look at how we can handle these transitions in the most elegant and beautiful manor.

Let’s take a look at the before and after example above. In the before example, the welcome screen immediately pops up, no animation, no transition, just sitting there. Ugly. Then we click on our inbox and get a rigid transition straight to some messages. I don’t really enjoy using this person’s application, it just feels basic. On the other hand, when looking at the after example, try…


Improving React Loading Screens

Today we will be taking the next step to improving user experience in React, using placeholder loading content. Scroll down to learn how to implement this tactic in your project, step by step.

Let’s take a look at the before and after in the example above.

In the before example, we have a simple loader animation having us wait for some mysterious content, then unexpectedly throws us some cards when it is done loading.

In the after example, notice the smooth gradient moving across the placeholder cards, indicating to the user that we are loading some content for them here, and then gracefully fading the results into their designated slots.

The page should always look and feel structurally sound.

An important takeaway from this strategy is the structure of the page before…


Redux can be a hefty way to implement global state management in your small to medium size applications. In this guide, we will look at the absolute slimmest, quickest, easiest, way to implement state management in your App! These simple steps should take you less than five minutes, and you’ll be up and running with your own global state management system.

We will be using the React Context API, which is already included in React so we don’t have to install any additional packages for this project.

npx create-react-app contextpractice

We first create a small state.js file that will contain…

Dan Halperin

React Developer living in Israel linkedin.com/in/dan-halperin

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