DEV Community: Quan Phan

Product people! You'd love Cultural Probes in User Interviews

Quan Phan — Fri, 22 Mar 2024 17:56:10 +0000

That awkward transition from small talk ("Hi! How are you? How's your week(end) been?") to the real interview ("My first question for you is..."). It's not absolutely painful, but definitely NOT my favorite part of a user interview.

How can we make these first few minutes of the interview less awkward? Better yet, how might we utilize these first few minutes to "warm up" our users and open them up for the actual interview?

Introducing... cultural probes

In our Design thinking class, my friends and I were running a semester-long project to solve a common problem among study abroad students. As part of our research, we wanted to know our users' goals for their semester-long study abroad experience.

In one of my interviews with a double major in Computer Science and English who was studying abroad in London, I began by asking her to...

Draw me your goals this semester!

She hesitated for a bit, then started drawing, all the while excused the "ugly" sketch (which I didn't think was the case!). After giggling at the result, she handed it over to me...

I pointed at the picture on the left: "Ooh... this looks interesting! Can you tell me more about it?" and effortlessly initiated the interview.

I later on found out that the picture on the left was a notebook which represented her goal to spend more time on writing and reading. Despite being an English major, her high workload in Computer Science prevented her from writing and reading as much as she wanted. The picture on the right represented her aspirations to explore Europe and the world.

It doesn't have to be drawing!

There's no one definition for cultural probes. They can be any activities that you ask your interviewee to do at the beginning of the interview that "tricks" them into opening up.

In a project that aimed to facilitating find the best travel buddies, the team showed their users 8 personnas with different personality trade-offs. They used the users' ranking of these imaginary travel buddies to started the conversation.

Another group, who aimed to support college students in balancing food budgeting and exploration while being abroad, asked people to guess the prices of different food items at the nearest grocery store. They later on examined how the discrepancy in their users' predictions and the actual prices affected food budgeting.

Why cultural probes?

Cultural probes are powerful because:

They distract your users from thinking about the interview and channeled their focus on an activity, and thereby, break the ice.
At the end of the cultural probes, you have people's thoughts laid out in front of you, and you can poke wherever you like.
An activity can elicit stories and emotions way better than a question can.

So, next time you have an user interview, try come up with a creative cultural probes and involve your users. You might have a lot of fun while learning so much more about your users.

Discussion

What other cultural probes do you use to warm up your users for an interview?

Zero-to-beginner front-end roadmap

Quan Phan — Wed, 29 Nov 2023 21:18:51 +0000

I recently updated my zero-to-beginner front-end developer roadmap. Check it out here: https://bit.ly/47Tloxo.

There are so many posts and videos on front-end roadmaps, but sometimes they are too overwhelming. You don't need to know every semantic tags in HTML or every array methods in JS before diving into React.

Each step in my roadmap teaches you just enough to proceed to the next. The rest, you will pick up as you build your capstone projects. I think this way is much more fun than cramming an extra hour of video on features of JS you will never use.

All the materials from my roadmap are from Youtube. Kudos to all the Youtubers out there that are lowering the entry bar to programming with their high-quality free tutorials.

Inside React useState

Quan Phan — Fri, 24 Nov 2023 09:29:22 +0000

Intro

Ever wonder how useState works under the hood? Especially how a call to setState can trigger a UI rendering? Let's take a peek into a simple implementation of useState.

The simple implementation is taken from step 8 of "Build your own React" tutorial by Rodrigo Pombo.

Annex on the Fiber tree

Understanding the Fiber tree data structure and the two Fiber trees used in React lifecycles, current and wip, are important to understand the code of useState. I wrote extensively about the Fiber tree here and the two Fiber trees as part of the React lifecycle here.

Here are a few important notes.

Fiber tree is a tree data structure, where each node represents either a DOM node (h1, div, p, etc.) or a functional component. The entire Fiber tree can be thought of as a representation of the virtual DOM.

The current tree reflects the DOM that is currently visible on the browser. When state is changed and a new render is triggered, the wip tree can be thought of as a draft of the new DOM that is about to be rendered on the browser. Changes are made to this wip throughout a render (thus, the name work-in-progress).

There are two properties of a Fiber node that we care about.

The alternate field is a pointer to the corresponding node in the previous render. Okay, what does "corresponding" mean here?
The hooks field points to an array of hooks associated with that node (so only nodes that represent functional components can have non-empty hooks)

`useState` under the hood

function useState(initial: any) {
    // Initiate the hook for the current rendering
    const oldHook =
        wipFiber?.alternate &&
        wipFiber.alternate.hooks &&
        wipFiber.alternate.hooks[hookIndex];

    const hook = {
        state: oldHook ? oldHook.state : initial,
        queue: [],
    };

    // apply all the actions saved from last rendering
    const actions = oldHook ? oldHook.queue : [];
    actions.forEach((action: Function) => {
        hook.state = action(hook.state);
    });

    function setState(action: Function) {
        // all the actions are pushed into the queue
        hook.queue.push(action);

        // set wipRoot to initiate the rendering
        wipRoot = {
            type: currentRoot.type,
            props: currentRoot?.props,
            alternate: currentRoot,
        };

        nextUnitOfWork = wipRoot;
        deletions = [];
    }

    return [hook.state, setState];
}

Initiate the hook

In the first render, the state of the hook will be initiated with initial value. In subsequent renders, the state of the hook will be initiated as the state of the corresponding hook in the previous render.

While the first sentence is straightforward, the second is a bit hard to see from the code. Let's zoom in...

    const oldHook =
        wipFiber?.alternate &&
        wipFiber.alternate.hooks &&
        wipFiber.alternate.hooks[hookIndex];

From the wipFiber tree, wipFiber.alternate accesses the corresponding fiber node in the current tree , and wipFiber.alternate.hooks access the hooks of that node.

The index of a hook in a functional component doesn't change through renders, we can use a global variable hookIndex to track and retrieve the hook corresponding to the current hook in the previous render.

Defining `setState`

Now, let's look at the setState function. When setState is called with a callback function action, the action is added to a queue that is part of the hook. This queue will be unpacked in the next render, and each actions will be applied on the state.

When setState is called, it triggers a render by setting the root of the wip tree from null to the root Fiber node. However, the render is not triggered immediately. There is another function that, whenever the browser runs out of high-priority tasks, will check if wip is null. If wip is not null, it will actually begin re-rendering.

Apply all the actions on state

Functional component are essentially functions that will be run in each render. Every time a functional component is run, all of its useState will be triggered, which means new hooks and new setState functions will be created. In addition...

    // apply all the actions saved from last rendering
    const actions = oldHook ? oldHook.queue : [];
    actions.forEach((action: Function) => {
        hook.state = action(hook.state);
    });

All the actions that were saved in the oldHook.queue in the previous render (remember in the setState of the previous render where we push the action into the hook.queue?) will be applied on the old state to retrieve the new state.

Final words

And that, folks, is the anatomy of the useState function. If you want to see how useState fits into the bigger picture, definitely check out Rodrigo's tutorial.

React Rendering & Commit phases

Quan Phan — Sun, 12 Nov 2023 18:50:31 +0000

Context

This post is part of my post series that complements the "Build your own React" tutorial by Rodrigo Pombo.

In this post...

In step 5, Rodrigo introduced the rendering and commit phases, but the distinction and the role of each phase was not clear. Let's change that!

What happens when a React program runs?

Remember these first lines in the tutorial?

1 | const element = <h1 title="foo">Hello</h1>
2 | const container = document.getElementById("root")
3 | ReactDOM.render(element, container)

After you have implemented the entire Didact library, the above three lines will:

Build a new virtual DOM, which is basically a tree whose nodes are elements created from createElement (line 1).
Compare the nodes in the virtual DOM with the corresponding fibers in the current fiber tree in the reconcileChildren function (officially called diffing by React team). The result of this process is...
A new Fiber that contains the message denoting to the commit phase what to do with it (effectTag), and the necessary data to perform that action.
These fibers are sent to the commitRoot function to be reflected into the real DOM.

The first 3 steps belong to the rendering phase, while the last step is the commit phase. So, the rendering phase includes:

Rendering the virtual DOM
Reconciliation / Diffing between the wip and current tree
Preparing data for the commit phase

Notes on the use of the word "rendering"

If you go on and read more posts about React internals, you will see people abusing the word "rendering". They say:

Rendering vs. commit phase (as in Rodrigo's language)
Rendering the virtual DOM
Rendering the real DOM (i.e the commit phase)

... so just be on the look out for that.

Notes

Notice how the Fiber is only used in the rendering phase. That means while the browser can temporarily put on hold the rendering phase to work on other high-priority tasks, the commit phase cannot be interrupted.

React Fiber tree

Quan Phan — Sun, 12 Nov 2023 18:26:30 +0000

Context

This post is part of my post series that complements the "Build your own React" tutorial by Rodrigo Pombo.

In this post...

In step 4, Rodrigo introduced the Fiber architecture. However, he didn't relate Fiber to the bigger picture of React. This post will review what Fiber is, what its purpose is, and how this concept relates to Virtual DOM.

What is Fiber?

Fiber tree is a tree data structure, where each node is a Fiber. A Fiber is an object that has the following properties:

interface DidactElementProps {
    [key: string]: any;
    children: DidactElement[];
}

interface DidactElement {
    type: string | Function;
    props: DidactElementProps;
}

interface Fiber extends DidactElement {
    parent: Fiber;
    sibling: Fiber;
    child: Fiber;
    dom: HTMLElement | Text;
    alternate: Fiber;
    effectTag: string;
}

What can make Fiber confusing is the fact that the object encompasses so much information. Let's break it down:

(Information of) the virtual DOM: type and props
The actual DOM node: dom
Its connection to the tree: parent, child, sibling
The corresponding fiber in the previous render: alternate
Message to the commit phase on what to do with this Fiber: effectTag (update/delete/insert into the DOM)

A Fiber node represents either a DOM node (h1, div, p, etc.) or a function that corresponds to a functional component.

Purpose of Fiber tree

It enables us to break down the rendering phase into small units of work, each of which corresponds to a Fiber in the tree. The browser decides the number of work units/fibers it works on before it has to leave the rendering and come back later because it has a higher priority task awaits.

Fiber and Virtual DOM

In Rodrigo's tutorial, the Fiber tree "acts" as a virtual DOM.

In the first code snippet:

1 | const element = <h1 title="foo">Hello</h1>
2 | const container = document.getElementById("root")
3 | ReactDOM.render(element, container)

The first line creates the actual virtual DOM, which is passed into the render function. Down the line, in reconcileChildren (in step 5), the type and props of each node in the virtual DOM are deconstructed and initiated as the type and props of a fiber.

Mentally, we can think of it as the Fiber tree is a physical representation of the virtual DOM or the Fiber tree acts as a virtual DOM.

Deeper read

https://github.com/acdlite/react-fiber-architecture

Set up environment variables in Jest for your frontend

Quan Phan — Sun, 12 Nov 2023 16:46:24 +0000

Context

Our tests are isolated from the production code.

my-project/
├── src/
├── test/
├── .env.local
├── package.json
└── ...

Our production code (in src/) uses several environment variables imported from .env or .env.local.

Goal

We want to test the part of the production code that uses the environment variables in .env.local.

Problem

Without proper set up, Jest will not load the environment variables into process.env.

How to

Create a JS set up file for Jest. In the JS file, load the environment variables:

// env.js
require("dotenv").config({ path: "path/to/env/file" });

Create a jest.config.js file (at the same level as package.json), and put in there:

module.exports = {
   // other settings
   setupFiles: ["<rootDir>/path/set/up/file.js"],
};

Done!

Examples

Here is my set up:

my-project/
├── .jest/
│   └── env.js
├── public/
├── src/
├── test/
├── package.json
├── .env.local
├── jest.config.js
└── ...

In jest.config.js...

module.exports = {
   // other settings
   setupFiles: ["<rootDir>/.jest/env.js"], // Keep the <rootDir> as is, DON'T replace it with your root directory
};

In .jest/env.js...

require("dotenv").config({ path: ".env.local" });
// after this line, you can edit any variable in process.env
// to fit the test environment. for example...
process.env.ENVIRONMENT = "test";

Review “Build your own React” by Rodrigo Pombo

Quan Phan — Sat, 11 Nov 2023 19:34:17 +0000

Brilliant tutorial on how to build React (not an app, the library itself!) from scratch: https://pomb.us/build-your-own-react/

Ever since I transitioned from Vanilla JS to React, I have always wanted to know how React works under the hood - it just seems so magical when the state updates, the entire UI updates accordingly.

The tutorial taught me:

How React works under the hook
Important concepts in React 16: Fiber tree and Concurrent Mode, Rendering vs. Commit phase, Reconciliation
Clean code and the importance of typing (more on this later!)

Frankly, it was not an easy read. Here are the reasons why:

Just like with any other code-along tutorial, as more complex ideas are introduced and reflected into the code, it is easy to lose track of which function relates to which function.
The relationships between high-level concepts were’t explained thoroughly. I didn’t know how the Fiber tree relates to the Virtual DOM, and I was clueless on how the rendering, commit, and reconciliation phases are related to each other.

It costs me a few Medium articles, (great) conversations with ChatGPT and hours of staring at the code, trying to reason it out with myself to grasp the big picture. Honestly, I wouldn’t blame the author since the tutorial was geared towards “code along with me” rather than “here are the big concepts and how they relate”. To compensate, I will have some future posts to break down the tutorial and tackle the related high concepts. Stay tuned!

That said, it is still a brilliant tutorial. Must-read if you want to understand the React internals.

DEV Community: Quan Phan

Product people! You'd love Cultural Probes in User Interviews

Introducing... cultural probes

It doesn't have to be drawing!

Why cultural probes?

Discussion

Zero-to-beginner front-end roadmap

Inside React useState

Intro

Annex on the Fiber tree

useState under the hood

Initiate the hook

Defining setState

Apply all the actions on state

Final words

React Rendering & Commit phases

Context

In this post...

What happens when a React program runs?

Notes on the use of the word "rendering"

Notes

React Fiber tree

Context

In this post...

What is Fiber?

Purpose of Fiber tree

Fiber and Virtual DOM

Deeper read

Set up environment variables in Jest for your frontend

Context

Goal

Problem

How to

Examples

Review “Build your own React” by Rodrigo Pombo

`useState` under the hood

Defining `setState`