Forem: Esaú Morais

UX/UI: How Important Is It for Developers?

Esaú Morais — Fri, 30 Oct 2020 15:09:55 +0000

Since last year, I’ve been working with many software development teams and building great products. At some point, I realized that if I wanted to stay relevant and influence the product’s development and the result (thinking about the client), I would have to learn and understand how UX/UI really works. So, in this article, I'll show you 4 reasons why you should, as a developer, learn UX/UI.

Before we start, you need first to understand the main differences between UX and UI design.

UX (user experience) cares about the client-side and how much the project will be:

Valuable
Accessible
Desirable
Credible
Convenient
Satisfiable
Useful

On the other hand, UI (user interface) will be focusing on the content and how its styles will affect.

Color scheme
Content
Buttons
Forms
Images
Layout
Typography

Now you know the main differences, let's start!

Developer vs Client perspective

Often many software or services are designed from the perspective of the developer. Without proper user research, developers often create software or features that are difficult to understand for the user or completely unnecessary. While developers study how to use if-else statements and logic gates, the general public and most users do not think logically. Humans are, by their very nature, often illogical and irrational creatures. And I always like to mention a quote by Heather Shockney that says:

“Stop looking at the project from a developer’s point of view and look at it from a user’s. As a developer, we know how the product should work — we code it to work that way. We usually don’t think whether a user will know how to use it. We assume they will. As you are completing your project, stop along the way, and get feedback from people who aren’t so involved with the development process. See if what you have done makes sense to them as if they were the user. If they are telling you that things don’t make sense nor feel intuitive, reconsider the way you are doing it.”

Don’t frustrate the user

While in some software, services, or products causing some level of frustration or a strong emotional response is the desired outcome (think in a Rubik’s cube), most of the time, the user does not want to be frustrated. Placing extra features or choosing the wrong colors is confusing and frustrating. The user comes away with a negative experience, and I can bet will not return to the product or service.

Problem solved?

Does your software or product actually solve a problem? While as a developer, I understand the desire to create things, many developers create software or products that do not solve a problem. If it doesn’t solve a problem, then people probably won’t use it.

What about feelings?

How the user feels using your software is vitally important to success. In his book, Emotional Design Don Norman discusses that all humans want the same thing at a visceral level. They want to feel safe, secure and have shelter. While Norman says these visceral emotions can be overwritten at a behavioral level, it is important not to overlook them. The user will often decide at an unconscious level through the visceral response if they like the software or product.

Extra: How do I start?

When I started to search how I could start with it, I didn't know what I needed to learn about UX/UI. But a few weeks ago, I met a gamification platform called Uxcel. Here you can learn with the courses, be notified about the week's lesson, and the most addictive feature: UEye Arcade.

Hint: Uxcel is a PWA, which means you can install on any device and have a better experience.

If you want to learn the basic and easy way, whether you are a designer or developer, I recommend you join me and get better together.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Stop Using console.log()!

Esaú Morais — Fri, 09 Oct 2020 12:36:21 +0000

Whenever I see someone effectively debug JavaScript in the browser, they use the browser’s DevTool. Setting breakpoints and hopping over them. That, as opposed to sprinkling console.log() statements all around your code.

In this article, I will explain four reasons why you should stop using console.log() and the best tips (that I called DebTips) to make it different, professional, and better.

#1 Missing contextual information

console.log() forces you to select which information to log before the debugging consciously. And what you display in the first place is not sufficient or even completely irrelevant sometimes. You usually don’t yet have any idea of what’s going on. Every time you launch your app, you go a step further, realizing you are still not logging the right information at the right time, wasting hours changing your statements, again and again, to display new information and hide irrelevant ones.

Debugging Tip:

Display/watch any JS variable inline while debugging (function arguments, local variables, global variables, etc.).
Explore the call stack to get the complete context in which your problem appears.

#2 Too much information

Algorithms are usually designed to automate many small tasks, loops, and recursion being fundamental building blocks for this. Along with console.log(), it results in many lines displayed in front of you, i.e., a hard time coming to find the right information.

Debugging Tip:

Create conditional breakpoints to pause the execution at the right time so that you can analyze what’s going on.
Watch custom JS expressions (variables, conditions, etc.) so that you don’t waste time to derive the same expression at each step of a loop.
Create a debug login addition to your standard application log to activate debug messages on-demand for the “domain” of interest (e.g., file, service, class, etc.).

#3 Untrustworthy information

Most of the time calling console.log() when the console is not yet active only results in the object being queued, not the output the console will contain. As a workaround, you will need to either clone the information or serialize snapshots of it. The rendering happens asynchronously (being throttled to rate-limit updates), as future interactions with the logged objects like expanding object properties in the browser console.

Debugging Tip:

Asynchronous stack trace (now the default in Chrome) allows you to inspect function calls beyond the current event loop, just like context-aware travel in time to the originators of your asynchronous callbacks.

#4 Altered code behavior

The “standard” way to debug asynchronous code is to console log “1”, “2”, “3”, “4”, etc. i.e., all executed steps before the output you’re expecting until you get the right order. Consequently, you modify the code and, thus, the way it runs, leading to tracking unsteady behaviors really hard. After you finish debugging, you also have to remember to delete all the stray console logs in your code.

Debugging Tip:

Part of debugging is not just inspecting code. It’s a process, inspect, change, and then continue debugging. If I spend a bunch of time setting up breakpoints, will they still be there after I’ve changed my code and refreshed? Answer: DevTools appears to do a pretty good job with that.

To finish this article, I can mention winston or loglevel as fairly good customizable loggers, but I prefer to use them for production-grade logs (information, warnings, errors, etc.).

If you believe you cannot use the debugger when running your tests, consider reading this article and other similar resources you might easily find on the internet.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Why you should use Framer Motion

Esaú Morais — Tue, 29 Sep 2020 15:25:48 +0000

What is Framer Motion?

Think of Framer Motion as more of an improvement or reinvention of an existing animation library than a brand new one.

Framer Motion is the successor to Pose, which was one of the most popular animation libraries used with React. Like Pose, it’s built upon promotion, which is a low-level, unopinionated animation library, but it provides abstractions to streamline the process.

Framer Motion improves upon and simplifies the API in a way that couldn’t have been done without breaking changes and rewriting. One difference is that whereas Framer Motion only has support for React, Pose has support for React-Native and Vue. If you’re currently using Pose I would recommend updating to Framer Motion because Pose has been depreciated.

Why use Framer Motion?

If most animation libraries use spring-based animations, then, why should you use Framer Motion? For starters, it has a great API that is simple and doesn’t fill your components with extra code. In most cases, you can simply replace your HTML element with a motion element — for example, div with motion.div, which results in the same markup but has additional props for animation.
Framer Motion is capable of powering animations in Framer X, a prototyping tool, which makes the hand-off extremely convenient. The majority of designers have suffered a situation when they spend ages perfecting every little detail of design only to have it lost in the development process. Framer Motion lets you use the same animation library both in prototyping and production. This way you don’t need to worry your animations are different from what you’ve intended them to be.

How do I start?

Install the Framer Motion package.

npm install framer-motion (if you are using npm)
or
yarn add framer-motion (if you are using yarn)

Import the motion component in your file.

import { motion } from 'framer-motion';

Try to animate an element using the animate attribute.

⚠️ Remember: you are not using more css syntax or attributes, they all are from Framer Motion

export default function App() {
  return (
    <motion.h2
      animate={{ scale: 1.2 }}
    >
      Yayy, I am animated!!
    </motion.h2>
  )
}

You can notice two important things:

motion always comes before the HTML tag (just make sure on the documentation if Framer Motion supports)
animate attribute pass an object (like the style={{}})
1. See my repository about Framer Motion and learn how it works.
2. See this playlist on YouTube about Framer Motion.

References

LogRocket
Medium