DEV Community: Tomer Raitz

How To Create UI Design With AI

Tomer Raitz — Tue, 07 Apr 2026 15:59:38 +0000

Originally posted at Vibki - link to post

If you've ever dreamed of a way to create a UI designer that builds your app screens before you even start developing, this is the blog post for you. In this post, you will see how to implement a designer using Claude Code and Pencil.

Why do we need it?

Great question! We could just tell Claude what our app is about and then have it modify the UI as we tweak the code. However, there are several reasons why that isn't a good idea:

Time: The most obvious reason is wasted time. The UI design process can be lengthy. If you have to refactor the code after every single screen creation, it takes much longer than just designing the UI first and developing it afterward.
Separation of Concerns: As we've mentioned on the blog many times, we need to keep the context window as small as possible. It's important to split processes into smaller tasks. This is why handling UI design in a separate context before developing it is a great approach.
Expert Domains: It's considered a best practice to create agents with specific expertise to handle single types of tasks. For example, a designer agent handles the UI design, while a frontend developer agent deals with component creation.

So, how do we do this magic?

💡 Note: The following workflow is specific to Claude Code, but you can modify it to use with your favourite AI tool.

Step 1: Installation

Go to https://www.pencil.dev/downloads
Download the Pencil Desktop app or Extension.

In Claude Code, the MCP installation happens automatically. However, if it doesn't work for you, add this to your MCP configuration:

    "pencil": {
      "command": "/path/to-your-pencil-desktop/mcp-server-windows-x64.exe",
      "transport": "stdio",
      "args": [
        "--app",
        "desktop"
      ],
      "env": {}
      }

Open pencil App
Create a new .pen file and save it in your project folder.

Step 2: Install the Frontend-Design Claude Code Plugin

Open Claude Code.
Run the /plugin command.
Search for frontend-design and install it.

Step 3: Create Your New Design

Before your main prompt, write something like: "I want to use frontend-design."
Ask it to generate your design. For example: "Create an app design for a todo app."
Review the output and fix it if needed.

Read more about AI Engineering at Vibki.

How to speak with Claude in the middle of the session from Slack - the easy way

Tomer Raitz — Thu, 12 Mar 2026 08:57:00 +0000

Tomer Raitz

Mar 11

Claude Slack Bridge

#ai #opensource #cluade #mcp

Comments 2

2 min read

Claude Slack Bridge

Tomer Raitz — Wed, 11 Mar 2026 14:43:31 +0000

You know that moment?

Claude Code is mid-refactor on a massive task. It hits a decision point and needs your input. But you're grabbing coffee with your friend, and it's taking way longer than the 5 minutes you promised yourself.

You could have handled it all right there over coffee and still enjoyed your break.

I got tired of that loop, so I built claude-slack-bridge: an MCP server that creates a real-time, two-way communication channel between Claude Code and Slack.

And honestly? It changed the way I think about human-in-the-loop AI workflows.

How It Works

The bridge operates in two directions:

Direction 1: Claude → You
Claude pauses mid-task, sends you a question on Slack, waits for your reply, and picks up exactly where it left off.

Claude: "Should I refactor the auth module to use JWT 
        or keep session-based auth? The migration would 
        touch 12 files."

You (from your phone): "Go with JWT. Skip the legacy endpoints."

Claude: *continues working*

Direction 2: You → Claude
You write a message in the Slack channel. Claude Code picks it up, executes it, and replies in the same thread — with full context and session awareness.
It's like texting your AI teammate.

Why Not Just Use Official Slack MCP?

Fair question. Here's the key difference:
Slack MCP is designed to make Slack a data source — so Claude can search channels and pull context from conversations.

claude-slack-bridge does the opposite. It uses Slack as a remote control for your local terminal session. It's built specifically for the human-in-the-loop pattern where your CLI agent needs your approval or guidance to proceed.

Think of it this way:

Official Slack MCP = Claude reads your Slack
claude-slack-bridge = Claude talks to you through Slack

The Technical Bits (For the Curious)

⚡ Zero Polling - The bridge uses OS-level blocking — no busy-wait loops, no webhook servers to manage. When Claude asks a question, the process sleeps at the kernel level until your reply arrives.
🐳 Single Docker Container - One container runs in the background and serves all your projects. No per-project setup, no port conflicts.
🔀 Parallel Sessions via Unix Domain Sockets - Running multiple Claude Code sessions? Each one gets routed to the correct Slack thread automatically.
🧠 Session Resume - Container restarts? No problem. Claude reconnects to the existing Slack thread history and picks up context. The conversation thread is the persistence layer.

Getting Started

The setup is straightforward:

Clone the repo
Configure your Slack bot token and channel
Run the Docker container
Add the MCP server to your Claude Code config

Full instructions are in the README.

The Repo
The project is open source under MIT license:
🔗 github.com/tomeraitz/claude-slack-bridge.
If this sounds useful to you, I'd love a ⭐ on the repo — it really helps with visibility.

I write about AI agent workflows, Claude Code, and building developer tools. Follow me here or check out vibki.com for more.

I Built a New Tool for Claude Code That’ll Save You Time —Here’s Why You Should Try It

Tomer Raitz — Wed, 29 Oct 2025 13:27:04 +0000

Claude Code’s Subagents feature is one of my favorites.
But if you’ve used it, you might have noticed an issue I ran into — the more specific your instructions are for a new agent, the narrower its perspective becomes. And that can sometimes lead to mistakes in the code.

Here’s how I see it:

In my workflow, I want each agent to perform a broad, meaningful action in the process.

I also want to make sure the agent executes each action optimally without me having to guide it step by step — because every extra instruction or self-check costs time and resources.

So, I created a Custom Command that builds an agent with a few key components:

Principles – The guiding rules that define how the agent operates.

SOP (Standard Operating Procedures) – The steps the agent should follow for any given task.

Examples – References the agent can use to understand how to perform correctly.

Together, these reduce the number of interactions needed with the agent — saving both time and compute resources.

👉 Free tool on GitHub: https://github.com/tomeraitz/dotclaude-templates

If you like it, give it a ⭐ on GitHub and share it!

Tricky Python Questions

Tomer Raitz — Wed, 24 Jul 2024 12:51:56 +0000

In the last two years, I've used Python extensively as my main programming language. Dive into these tricky Python questions, inspired by real-world issues and online challenges, to test and enhance your coding skills.

So are you ready to get your mind blow away (from Python question)?

Questions

Notice 1!: To each question, there is an answer with an explanation (link below each item).
Notice 2!: For each question think what will be the output.

Question 1

exapmle_dict = dict()
exapmle_dict.a = "string"
print(exapmle_dict)

Go to answer 1

Question 2

class Json:
    def __init__(self, *args, **kwargs):
        import json

    def print_dict_as_json(self, obj):
        print(json.dumps(obj))

example_json = Json()
example_json.print_dict_as_json({"a": "string"})

Go to answer 2

Question 3

def myFun(arg1, arg3, **kwargs):
    for key, value in kwargs.items():
        print("%s == %s" % (key, value))


my_dict = {'arg1':1, 'arg2': 2}
myFun(**my_dict, arg3=3)

Go to answer 3

Question 4

def add_to_all_1(arr):
    for i in range(len(arr)):
        arr[i] +=1

def my_func():
    arr = [1,2,3]
    add_to_all_1(arr)
    arr2 = arr
    print(arr2)

my_func()

Go to answer 4

Question 5

import gc


class MyClass:
    def __init__(self, name):
        self.name = name
        print(f"{self.name} object created")

    def __del__(self):
        print(f"\ncall by instance {self.name}")
        print("Objects in memory after deletion:")
        is_not_deleted = []
        for obj in gc.get_objects():
            if isinstance(obj, MyClass):
                is_not_deleted.append(obj.name)

        [print(f"  - {name}") for name in is_not_deleted] if len(is_not_deleted) else print("nothing")


gc.enable()

obj1 = MyClass("Object1")
obj2 = MyClass("Object2")


def create_obj_3():
    MyClass("Object3")


create_obj_3()

print("\nObjects in memory before deletion:")
for obj in gc.get_objects():
    if isinstance(obj, MyClass):
        print(f"  - {obj.name}")

Go to answer 5

Question 6

def convert_tuple_to_list(_tuple, result_list=[]):
    for t in _tuple:
        result_list.append(t)
    return result_list

tuple_1 = (1,2,3)
tuple_2 = ('Banna', 'Orange', 'Apple')

print(convert_tuple_to_list(tuple_1))
print(convert_tuple_to_list(tuple_2))

Go to answer 6

Answers

Answer To Question 1

If you said:

{"a": "string"}

unfortunately, you are wrong, the answer is:

AttributeError: 'dict' object has no attribute 'a'

If you like me and came from javascript first, the access dictionary (object in Javascript) is not by dot like in Javascript, you can access only by [], and inside the key you want to set "a".

Back to question 1

Answer To Question 2

If you said:

{"a": "string"}

You are wrong again, the answer is:

...
NameError: name 'json' is not define

You may know the differences between local and global scope in Python (if not you should read this: Python Scope). The __init__ is a function, the import is inside a local scope so it doesn't know what is json. You can fix it by import it globally like this:

import json

class Json:
    def print_dict_as_json(self, obj):
        print(json.dumps(obj))

example_json = Json()
example_json.print_dict_as_json({"a": "string"})

Or in a more advanced way:

class Json:
    import json as json
    def print_dict_as_json(self, obj):
        print(self.json.dumps(obj))

example_json = Json()
example_json.print_dict_as_json({"a": "string"})

You can see using import inside class for more details.

Back to question 2

Answer To Question 3

If you said:

arg2 == 2

You are right! In Python, we have 3 ways to pass an argument:

By the argument itself:

def myFun(arg1):
   print(arg1)

myFun('arg1')

By *args - list or tuples of arguments ( allows us to pass a variable number of non-keyword arguments to a Python function):

def myFun(*arg1):
   print(*arg1)

my_tuple = ('arg1', 'arg2')
myFun(my_tuple)

By kwargs can pass key=value arguments (kwargs allows us to pass a variable number of keyword arguments to a Python function) - like in the question. If you want to read more about the subject you can read here: freecodecamp - How to Use *args and **kwargs in Python

Back to question 3

Answer To Question 4

The answer is:

[2, 3, 4]

For some people who know scopes and assignments, it can seem a pretty easy question. For those who don't know, python saves variable memory as a reference, so in this case, the arr will point to a reference in a memory -> the function will change the values (but still the same reference) -> arr2 will get the reference address of arr but after values were modified.

Back to question 4

Answer To Question 5

The answer is:

Object1 object created
Object2 object created
Object3 object created

call by instance Object3
Objects in memory after deletion:
  - Object1
  - Object2
  - Object3

Objects in memory before deletion:
  - Object1
  - Object2

call by instance Object1
Objects in memory after deletion:
nothing

call by instance Object2
Objects in memory after deletion:
nothing

It was tricky for me to understand it as well, but let's try to break it down:

Why did Object3 call del at the beginning? The reason is simple: when Object3 was created inside the function create_obj_3(), it went out of scope as soon as the function execution finished. Python’s garbage collector identified that there were no more references to Object3, and since it was no longer in use, it triggered the del method. This is why you see Object3 being deleted immediately.
Why do we see Object3 in "Objects in memory after deletion"? This happens because the garbage collector doesn’t delete objects immediately when they go out of scope. Objects are marked for deletion, but the actual deletion process depends on when the garbage collector runs. The gc.collect() manually triggers the garbage collection process, but it doesn't guarantee that all objects will be deleted immediately. In your case, Object3 was eligible for garbage collection, but the actual deletion may have happened later, allowing it to still be seen in the list of "objects in memory after deletion."

Points to Clarify:

Scope of Object3: The key thing is that Object3 was created in a local scope and went out of scope when the function completed. Python then decided it could be garbage-collected.
GC Delays: Garbage collection doesn’t always happen immediately after an object becomes unreferenced. The collection happens when the garbage collector is ready, which could be after your call to gc.collect(), depending on when Python decides to run the cleanup process

Back to question 5

Answer To Question 6

Maybe some of you said:

[1, 2, 3]
['Banna', 'Orange', 'Apple']

But the answer is:

[1, 2, 3]
[1, 2, 3, 'Banna', 'Orange', 'Apple']

Why does this happen?
Python treats mutable default arguments (such as lists or dictionaries) as shared objects between function calls. Instead of creating a new list each time the function is called, Python reuses the same list.
To fix it you can just change the default value to None like this:

def convert_tuple_to_list(_tuple, result_list=None):
    if result_list is None:
        result_list = []
    for t in _tuple:
        result_list.append(t)
    return result_list

Back to question 6

Thank you for reading this article. I hope you enjoyed and learned new things. If you have any questions or suggestions, please leave a comment.

Diverse vs. Specialist Developers: Embracing Change and Expanding Horizons

Tomer Raitz — Sat, 08 Apr 2023 19:25:13 +0000

In the past year I made a significant change in my technology stack. from a programmer who specializes only in javascript, I became a fullstack developer who uses Python in Django framework. I had to learn a new language in a whole new and unfamiliar framework, which was both frightening and fulfilling. This shift made me a more diversed developer and brought a whole new perspective to my career. Therefore, In this article I want to dive into the differnces between diverse and specialist developers.

"Specialist Developer" 🕵️

A specialist developer has deep expertise in a particular area of software development. They may focus on a specific technology or programming language and can build complex applications using their specialized knowledge. Specialist developers often profoundly understand the intricacies of a particular technology or programming language, and they can optimize their code for maximum performance.

"Diverse Developer" 👐

In contrast to that, a diverse developer has knowledge and experience across multiple programming languages, technologies, and platforms. They can work on various projects and adapt to different development environments easily. A diverse developer can also quickly learn new programming languages and technologies as needed.

Those definitions make it hard to conceptualize the subject in today's world. That is because a specialist developer can also be viewed as someone who uses a lot of technologies. In my opinion, what makes the difference is that a diverse developer uses varied technologies that he's not familiar with before. If I take my experience as an example, I can say that until I started to write in Python, all my stack (frontend and backend) was in Javascript. Learning Python enriched my stack and made it more diverse.

This kind of change can be significant for a lot of developers. In order to determine if it's relevant and appealing to you lets dive in to some of the benefits and drawbacks of being a diverse developer and a specialist developer:

Benefits Of Being A Diverse Developer:

Ability to work on a wide range of projects: A diverse developer can work on different projects, including web development, mobile app development, game development, and more.
Adaptability: Diverse developers can quickly adapt to new technologies and programming languages, essential in a constantly evolving industry like software development.
Better communication skills: Since diverse developers have experience working on different projects and with different teams, they tend to have better communication skills than specialist developers.

Drawbacks Of Being A Diverse Developer:

Lack of in-depth knowledge: Diverse developers may need deep expertise in any particular area, which can limit their ability to build complex applications.
Difficulty staying up-to-date: Keeping up with the latest technologies and programming languages can be challenging for diverse developers, who must stay informed about many different things.

Benefits Of Being A Specialist Developer:

Deep expertise: Specialist developers have in-depth knowledge of a particular technology or programming language, allowing them to build complex applications optimized for performance.
High demand: There is a high demand for specialist developers in the industry, meaning they can command higher salaries and have more job opportunities.

Drawbacks Of Being A Specialist Developer:

Limited job opportunities: Specialist developers may only be able to work on projects requiring their specific expertise, limiting their job opportunities.
Difficulty in adapting: Specialist developers may find adapting to new technologies and programming languages challenging, limiting their ability to work on diverse projects.

As you can see, there are a lot of benefits and drawbacks on each side, so there isn't a "right answer" as to which you should aspire to become. I believe it depends on your personality. If you are like me - someone who loves challenges and learning new skills doesn't scare you - then you should consider becoming a more diverse developer.

With that being said, I know it's not always a decision you can make by yourself. I was fortunate enough to become a full-stack in TechSee. The company allowed me to take a course in deep learning and allowed me to become a Python developer without any previous knowledge, which in return made me a more diverse developer. However, I believe you can always be more diverse in your work, field or stack, and here are some of my tips on how to do that:

Ask your boss to work on a project with a different technology - one you are unfamiliar with.
Take an online course on new technologies that excite you.
Write an article about a subject you are unfamiliar with. writing on something you don't know much about will force you to dive deep into this new subject.

In conclusion, I don't think you need to "decide" what kind of developer you are, but I think it's important to be aware of this subject to maybe "steer the wheel" in the direction you desire.

This article was created with the help of chatGPT

The Right Mindset To Solve Complex Problems

Tomer Raitz — Sat, 07 Aug 2021 09:20:55 +0000

Hi all, I know that all of my articles are very technical. This time I will talk about something a little bit different, more abstract - the mindset of a developer when assigned to a new task.

Why do we need to notice our mindset when assigned a new task?

Lately, I have tried to be more self-aware of myself and my surrounding. I notice something significant when I'm dealing with a complex coding problem it always starts with "oh shit, it's too hard," and if this feeling stays with me, it impacts the quality and the amount of time that I spend on this task. So, I believe to be a better developer We need to notice our attitude to the task we are currently working on. I think the right mindset is to be fully confident that you can succeed in finishing the task. (Many people will say you can't always succeed in developing exactly what you wanted in the beginning, they are mostly correct, but you can always try to :)... I will talk about it in the "Importance of critical thinking with the right mindset" section).

The steps to change your mindset

Step 1: be aware of your attitude when working on something new

Try to follow your mood when you are working on something new. In my opinion, it doesn't matter how you follow it (write your thoughts in a diary or try to remember when you think about it), the important thing is to develop an awareness of this subject.

Step 2: Find your weaknesses and your strengths.

For example, I know that one of my weaknesses is trying many things myself without asking for help. This mindset can cause a waste of time (even though I know I can finish it by myself) - I can waste a few hours instead of someone helps me, and it can be done in a half-hour. If you think about it, in this situation I can save the company I work for, a lot of money (my half-hour + my co-worker half-hour < few hours of my time). But on the other side of this example, it's one of my strengths - I will never quit on something I need to do.

Step 3: Choose one weakness you found from the last step and work on it.

If we take my previous example for the explanation - my plan is not always to ask for help (because it can cause the opposite of what I try to achieve). I need to see when I spend too much time on something and need to think about the cost of someone else who will help me. If I know the cost is worth it, I need to ask for help. But, more importantly, remember your strengths and make them your primary mindset.

Be confident you can do the task you got

In my opinion, this is one of the most important mindsets when you solve a challenging task. Why? without it, you are mentally weak, when you don't believe in yourself, the task you received seems too hard. But, if you do believe in yourself, you will do anything to complete the task.

Example of the right mindset

Let me give you an example from one of my last private projects - a game called "Gold Rush." The main goal of this game is to collect more coins than your opponent. There are two options - single-player and multiplayer. I will talk only about the single-player option. The user plays vs. the computer in the single-player option. The computer will collect the coins and pass obstacles, so I needed to implement a path-finding algorithm. At that time, it didn't sound to me that hard, so I decided to write the code myself. My design was very simple - matrix with two-player (0,0 and n-1,n-1) and random obstacles (there are obstacles in the game that the players need to pass). The main goal was - when the computer player moves, he will search for the coin, obstacle, or player 1. This design failed completely for a lot of reasons, but the main was - when he detected an obstacle or player 1 - he tried to do random index generation from the indexes in the matrix near to him (search up, down, right, or left - only four random options in this case). What happened was he repeated the same moves again and again, and the game seems stuck. I must admit, at that point, I felt like a loser, But I told myself I am not giving up yet... I searched for a solution on the internet, and I found this article: A* Search Algorithm in JavaScript (briangrinstead.com/blog). Even though it was written very clearly, I didn't succeed to implement it in my code. Honestly, I felt like shit, it's been a week, and I didn't do anything. But, I knew I am getting very close. Eventually, I found this npm package - pathfinding and succeeded in ending this task (after a week and a half). If you want to play the game here is the link : Gold Rush Game and here is the code I talk about (the backend): Gold Rush - backend.

Importance of critical thinking with the right mindset

I believe that you understand the importance of the right mindset after this example. But, I think the important in all attitudes is to remember that your approach will impact other things. for example, if you take the mindset I talked about, you can mistakenly think you can finish the task in no time, and this why is important to have critical thinking with the right mindset. Let's take, for example, the following scenario: you received a task to build a new service that no one in your company ever developed before. The mindset in this scenario should be "I can do it, and I will do anything to complete the task," but don't be arrogant, don't say you will complete the task in a few hours or a short time. Be honest with yourself and think how long it would take to do it.

Thank you for reading. I really would appreciate it if you comment your opinion about this subject because this is a new subject I explore and will be happy to learn more from others.

React design patterns (part 2)

Tomer Raitz — Sat, 23 Jan 2021 12:57:59 +0000

This article originally appeared at bugfender.com: React Design Patterns (Part 2).

This article is the second part of the React Design Patterns article. If you missed the first part, go to part 1 of the series.

This time we'll be talking about the Context pattern, the Presentational and Container Components pattern, and the Compound Components pattern.

Context

According to the React documentation:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In simple terms, If you have a global state that needs to pass through several component levels, you can use Context. For example: if you have a theme that influences all the components, Context will streamline the process.

Note. There is one potential snag to bear in mind when using Context: it can make the components less reusable. The Context data will be available in the Provider scope, so you can't use it outside the Provider. I found a great video that explains this issue and tells you how to avoid 'prop drilling.'

Let's see an example of Context in action:

import React, { useContext, createContext } from "react";
import "./styles.css";
let data = {
  title: "Welcome"
};
const Context = createContext();

export default function App() {
  return (
    <Context.Provider value={data}>
      <div className="App">
        <Card />
      </div>
    </Context.Provider>
  );
}

const Card = () => {
  return (
    <div className="card">
      <CardItem />
    </div>
  );
};

const CardItem = () => {
  return (
    <div className="CardItem">
      <Title />
    </div>
  );
};

const Title = () => {
  const data = useContext(Context);
  return <h1>{data.title}</h1>;
};

As we can see in this (elementary) example, we have three levels of components, and we only use the data.title in the last level. This way, we don't need to pass the props to all the levels.

A few tips on context syntax

I always apply this syntax when using context. However, there are some things I found out when I wrote it again:

In the case of "static data" (like the example), we actually don't need the Provider. we can fulfil that function ourselves:

let data = {
  title: "Welcome"
};
const Context = createContext(data);

export default function App() {
  return (
    <div className="App">
      <Card />
    </div>
  );
}

At the other end of the scale, we can use the Customer instead of useContext, like this:

const Title = () => {
  return (<Context.Consumer>
            {(data) => <h1>{data.title}</h1>}
        </Context.Consumer>);
};

Presentational and Container Components

These components (also known as Smart And Dumb Components) are among the best-known React patterns. There are no references to them in the React documentation, but Dan Abramov's article provides an excellent guide.

In simple terms, Presentational And Container Components refer to the separation of the business logic components from the UI views.

Let's look at another scenario:

We need to build a Card component.
Inside the card, we have three other components: Title, Image and Button.
The button changes the picture after a click on it.

Before we start working on our components, let's create two folders: 'Presentational' and 'Container.' Now, let's build the three Presentational components :

Title.js :

import React from "react";
export default function Title(props) {
  const { children, ...attributes } = props;
  return <h1 {...attributes}>{children}</h1>;
}

Image.js :

import React from "react";
export default function Image(props) {
  const { src, alt } = props || {};
  return <img src={src} alt={alt} />;
}

Button.js :

import React from "react";
export default function Button(props) {
  const { children, ...attributes } = props;
  return <button {...attributes}>{children}</button>;
}

Finally, we can build in the Container folder component, known as the Card.

Card.js :

import React, { useEffect, useState } from "react";
import Title from "../Presentational/Title";
import Image from "../Presentational/Image";
import Button from "../Presentational/Button";

export default function Card() {
  const [card, setCard] = useState({});
  const [srcIndex, setSrcIndex] = useState(0);

  useEffect(() => {
    setCard({
      title: "Card Title",
      image: {
        imagesArray: [
          "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTh87QN4DkF7s92IFSfm7b7S4IR6kTdzIlhbw&usqp=CAU",
          "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjFnHdaH1i1m_xOaJfXTyq4anRFwRyCg1p1Q&usqp=CAU"
        ],
        alt: "card image"
      }
    });
  }, []);
  const { image } = card;
  const changeImage = () =>
    setSrcIndex((index) =>
      index < image.imagesArray.length - 1 ? index + 1 : index - 1
    );
  return (
    <div className="card">
      <Title className="title-black">{card.title && card.title}</Title>
      <Image
        src={image && image.imagesArray[srcIndex]}
        alt={image && image.alt}
      />
      <Button onClick={changeImage}>Change Picture</Button>
    </div>
  );
}

If you want to see the full code, check it out here.

Note! Many of you may be wondering why you needed to separate into different components. You could just write them inside Card, right?

Well when we separate the components, we can reuse them anywhere. But even more importantly, it is much easier to implement other patterns like HOC or Render Props.

Compound Components

In my opinion, this is one of the most intricate patterns to understand, but I will try to explain it as simply as I can.

When we talk about Compound Components, the most simple way is to think about select and option in HTML. You can look at them as a group of components that have a basic functionality. There are states that are managed globally (like in the context pattern) or from the container (like in presentational and container patterns).

Compound components are really a mixture of these two. It's almost as if they each have their owned states and they manage them from within.

Let's look at the next scenario:

We need to develop Select and Option components.
We want the Option to be vivid, with different colors.
The Option color will influence the Select color.

Let's see the example:

App.js

import React from "react";
import "./styles.css";
import Select from "./Select";
import Option from "./Option";

export default function App() {
  return (
    <div>
      <Select>
        <Option.Blue>option 1</Option.Blue>
        <Option.Red>option 2</Option.Red>
        <Option>option 3</Option>
      </Select>
    </div>
  );
}

The App renders the Select and the Option components.
Option.Blue and Option.Red are 'colors components.'

Option.js

sdsdimport React, { useEffect } from "react";

function Option(props) {
  const { children, style, value, setStyle } = props;
  useEffect(() => {
    if (setStyle) setStyle({ backgroundColor: style.backgroundColor });
  }, [setStyle, style]);
  return (
    <option value={value} style={style}>
      {children}
    </option>
  );
}

Option.Blue = function (props) {
  props.style.backgroundColor = "blue";
  return Option(props);
};

Option.Red = function (props) {
  props.style.backgroundColor = "red";
  return Option(props);
};
export default Option;

Here you can see the Implementation of Option.Blue and Option.Red. As will be apparent, we render the Option component and just add a property to props.
The setStyle comes from Select. It's for changing the select color to the color of the selected option.

Select.js

import React, { useState } from "react";

export default function Select(props) {
  const { children } = props;
  const [style, setStyle] = useState({});

  const findOptionActive = (e) => {
    const index = e.target.value * 1;
    const optionStyle = { ...e.nativeEvent.target[index].style };
    if (optionStyle) setStyle({ backgroundColor: optionStyle.backgroundColor });
  };

  const childrenWithProps = React.Children.map(children, (child, index) => {
    return React.cloneElement(child, {
      ...child.props,
      value: index,
      setStyle:
        index === 0 && Object.keys(style).length === 0 ? setStyle : null,
      style: { backgroundColor: "white" }
    });
  });

  return (
    <select onChange={findOptionActive} style={style}>
      {childrenWithProps}
    </select>
  );
}

Now, we have a select function with the attributes of onChange style.
findOptionActive gets the style of the option and changes the style of select accordingly,
The magic really happens in childrenWithProps. Normally, when Select receives children, we can't access the child props - but with the help of React.Children and React.cloneElement we can do it. As you can see, we can pass value, setStyle, and style as props.

To get the Full Code, click here.

This exercise gives you good practice, and if you want to try it yourself (maybe in another pattern), add your solution in a comment below.

Conclusion

This article was intended to show you different patterns in React. You don't need to use any of the patterns if you don't want to, but it's good for a developer to know design patterns on any framework or language, to understand different syntax levels when they see a new codebase.

I hope you enjoyed the tutorial and learned something new. If you know any other pattern or have further information on any of the topics mentioned in the article, please add a comment below.

React Design Patterns (Part 1)

Tomer Raitz — Sat, 23 Jan 2021 12:57:42 +0000

This article originally appeared at bugfender.com: React Design Patterns (Part 1).

Having studied React for several months, one of the subjects I've paid particularly close attention to is design patterns. In this article, I'll share my key findings.

Note: Some of the patterns focus on state management concepts, but we can avoid Redux, Mobx and other third-party state management tools because they're not related to the subject of this article.

Render Props

Abounding to React docs:

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

In simple words, it's just a prop with a function value. The function is a component that needs to be rendered. Maybe you've seen it in React Router:

<Route
  path='/about'
  render={(props) => (
    <About {...props} isLoad={true} />
  )}
/>

The primary purpose of this pattern is to update props of sibling components. It makes the components more reusable and helps us to implement the "separation of concerns" more easily.

Let's take the following scenario as an example:

We need to develop a Form component.
Inside the From we have p and input.
The input is the input for the user.
The p shows what the user writes.

We can simply create something like this:

import React, { useState } from "react";
export default function Input(props) {
  return (
    <>
      <input
        type="text"
        value={props.value}
        onChange={props.onChange}
      />
    </>
  );
}

export default function Form() {
  const [value, setValue] = useState("");
  return (
    <form>
      <Input onChange={e => setValue(e.target.value)}/>
      <p>{value}</p>
    </form>
  );
}

There are two issues with this approach:

1. We don't use the "septate of concern" concept in this case because the Input should control the Value and not the Form.

2. Our components are not so reusable and flexible.

We can refactor the code and use Render Props like this:

import React, { useState } from "react";

function Input(props) {
  const [value, setValue] = useState("");
  return (
    <>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      {props.render && props.render(value)}
    </>
  );
}

export default function Form() {
  return (
    <form>
      <Input render={(value) => <p>{value}</p>} />
    </form>
  );
}

In this way the Input component controls the value, and it is much more reusable (the same functionality can be implemented with different elements).

HOC - Higher-Order Components

Higher-Order Components are basically a function that receive a component as an argument and return a new component with specific business logic inside. You maybe saw this in 'Redux':

export default connect(mapStateToProps , mapDispatchToProps)(From);

With Higher-Order Components, you can write a separate functionality to your app's commons (global) functions and reuse it on diffident components in your project.

Let's take another scenario:

We need to develop two menu components.
Inside the first component, we have a button that needs to block the menu click event.
The second component is also a button, but this time we need to work with the menu click event.

The problem is that we need two kinds of menus - one with stopPropagation ability and the second without it.

We can use Higher-Order Components like this:

import React from "react";
import "./style.css";

function stopPropagation(WrappedComponent) {
  return function(){
    const handleClick = event => {
      event.stopPropagation();
      WrappedComponent.handleClick()
    };
     return <WrappedComponent onClick={handleClick} />;
  }
}

function Button(props){
  const handleClick = () => console.log("button clicked!");
  Button.handleClick = handleClick; 
  return <button onClick={props.onClick || handleClick}>Click Me</button>;
}

function Menu(props) {
  const openMenu = () => console.log("menu opened!");
  return (
    <div onClick={openMenu} className="menu">
      <h1>Menu</h1>
      {props.children}
    </div>
  );
}

export default function App() {
  const ButtonPropagation = stopPropagation(Button);
  return (
    <div>
      <Menu>
        <ButtonPropagation />
      </Menu>
      <Menu>
        <Button />
      </Menu>
    </div>
  );
}

Link to the demo

Let's analyze this code:

The App component reads the two Menus we mentioned.
The Menu component reads the title and the children (in this case, the Button).
Button has a button element with a click event. **handleClick is the basic functionality of the event.** We need to export this function using Button.handleClick= handleClick (in the class component you can do it with static).
The stopPropagation is the Higher-Order Component. It receives a component (Button in our case) and sends back the component with new ability (in our case stopPropagation).

This is a simple example of the use of Higher-Order Components. We can use stopPropagation and don't need to rewrite again on different components. Even more importantly, we can create other "button" HOCs like preventDefault and queueClick.

Ok, that's all for part one of the article. In the second part, I will discuss the Context pattern, thePresentational and Container Components pattern and the compound components pattern.

Thank you for reading. I hope you enjoyed the tutorial and learned something new. If you have something to add, please leave a comment. And if you would like more information, here are some excellent resources on the subject:

Master React Design Patterns 🔥 (render prop & HOC) - In this video, you will find an explanation of render prop and HOC patterns.
React Context & Hooks Tutorial - It's a playlist of 21 videos that explain React Context and React Context in hooks (there are some videos that explain hooks in general - you can skip them if you know hooks).
React Design Patterns: Presentational and Container Components - This video explains what Presentational and Container Components (known also as "smart and dumb components") are.
Building Flexible Components with React Hooks - An excellent blog post that explains the compound components pattern. If you want an even more advanced resource about the subject, you can watch this video React Hooks: Refactor compound components to hooks.

React Hooks Common Mistakes

Tomer Raitz — Thu, 19 Nov 2020 11:11:30 +0000

This article originally appeared at bugfender.com: react-hooks-common-mistakes.

React Hooks is a new addition to React which enables you to use state and other features of the library without having to create a class.

By 'hooking into' React's existing features, you can significantly reduce the number of concepts you have to grapple with, and you can create custom hooks to share all kinds of non-visual logic, making your code much more reusable. React Hooks are engineered to mesh with your existing codebase, so you don't need to go back and rip up the code you've already written.

This promises to be a huge step forward for the dev community, and this post will help you maximize the opportunity by flagging a number of common mistakes. I've made most (if not all) of these errors myself, so I'll be talking with the benefit of experience!

First of All, What Is The Difference Between React Hooks and Class Components?

Let's look at some of the key variations between React Hooks and the Class Components typically used to write React code.

The good news is that most of the basic concepts are still the same. However, there are some essential differences to bear in mind - and all of them are beneficial.

In React Hooks, all the components are functions. So we don't need this and there's no need to deal with all the "bind" issues.
Easier lifecycle. In React Hooks, we don't need to memorize the entire react lifecycle and manage it in our code. In fact most of the lifecycle can be managed from useEffect (and some less common methods like useLayoutEffect).
States. In classes, we initialized the state via this.state = {...} and needed to apply setState any time we wanted to update it. With React Hooks, we can separate the state with useState and update individual parts of it.

Common Mistakes With useEffect

Ok, so now let's get into the nitty-gritty and look at some of the common mistakes that I (and other devs) have made. We'll begin by looking at useEffect.

To give this a little extra edge, try to guess the error before continuing reading. This way, you can test your React Hooks knowledge.

To kick things off, here is some basic code:

import React, {useEffect, useState} from "react";
import "./styles.css";

export default function App() {
  const [arr, setArr] = useState([]);
  useEffect(()=>{
    setArr([1])
  })
  return (
    <div className="App">
    </div>
  );
}

As you've hopefully spotted, the code reaches Uncaught RangeError: Maximum call stack size exceeded and cause an infinity loop.

This happens because of the missing useEffect dependency. This dependency "tells" the useEffect to run the function if the dependency is changed (like shouldComponentUpdate).

Without the dependency, useEffect will be active after any render (when we do setArr, we cause a re-render).

L*et's add an arr dependency and see what happens:*

import React, {useEffect, useState} from "react";
import "./styles.css";

export default function App() {
  const [arr, setArr] = useState([]);
  useEffect(()=>{
    setArr([1])
  },[arr])
  return (
    <div className="App">
    </div>
  );
}

Despite the new addition, the code still reaches Uncaught RangeError: Maximum call stack size exceeded.

This type of error is pretty hard to understand. If we run the code in this way (and remember, this is just for explanation)...

useEffect(()=>{
    setArr(arr)
  },[arr])
}

...we don't cause an infinity loop.

How can we explain the difference?

Actually, it's all because Arrays in JavaScript are references. So when we do setArr([1]) it's the same as arr = [1].

In this way, we change the reference any time we perform useEffect(()=>{setArr([1])},[arr]) and cause an infinity loop.

Now, let's look at a more extensive codebase:

import React, { useEffect, useState, useCallback } from "react";
import "./styles.css";

function List(props) {
  const [arr, setArr] = useState([]);
  useEffect(() => {
    setArr((previousArray) => [...previousArray, props.num + 1]);
  }, []);
  return <button>Click me</button>;
}

export default function App() {
  const [num, setNum] = useState(1);
  const addToNum = () => setNum((previousNum) => previousNum + 1);
  return (
    <div className="App">
      <button onClick={addToNum}>add num</button>
      <List num={num}></List>
    </div>
  );
}

To understand this code better, we can break it down into its individual parts.

We have two components: List , which receives props, and App.
App has a button when you click on it, which adds + 1 to num.
App also has a child component, List , which sends the num as props.
The List (for now), adds + 1 to the props.num and pushes it to the arr in the first render (empty dependency).

This code works fine. The arr will be [2]. But we get a warning: React Hook useEffect has a missing dependency: props.num. Either include it or remove the dependency array.

Everything works fine, and nothing is stuck, so why are we getting this warning?

In fact we have to thank the brilliant React engineers here, because they have already flagged this for us.

The props.num doesn't exist as a dependency. This means that any time we click add num, we render the child component without adding the new value to arr.

Here's a solution:

useEffect(() => {
    setArr((previousArray) => [...previousArray, props.num + 1]);
  }, [props.num]);

This way, the arr will change when the num changes.

But what about the List function?

Specifically, what happens if we want to give List the ability to add to arr from the button (element) as well? Well we need to do something like this:

function List(props) {
  const [arr, setArr] = useState([]);
  const addToArr = () => setArr((previousArray) => [...previousArray, props.num + 1]);
  useEffect(() => {
    addToArr();
  }, [props.num]);
  console.log(arr);
  return <button onClick={addToArr}>Add to array</button>;
}

The code works fine (it does what we want), but now we see the warning: React Hook useEffect has a missing dependency: 'addToArr'. Either include it or remove the dependency array.

In fact, if we add the addToArr to the dependency list, it will cause an infinity loop (I believe it's self-invoked and the result of the function is different on any render. if you know the reason, please add a comment below).

The solution is to add a useCallback :

function List(props) {
  const [arr, setArr] = useState([]);
  const addToArr = useCallback(() => {
    setArr((previousArray) => [...previousArray, props.num + 1]);
  }, [props.num]);
  useEffect(() => {
    addToArr();
  }, [addToArr]);
  console.log(arr);
  return <button onClick={addToArr}>Add to array</button>;
}

useCallback memorizes the function, and in this way we can use the addToArr dependency without a problem.

If you want to read more about this, here's good explanation from StackOverflow: about-infinite-loop-in-useeffect.

One Final Mistake...

Let's say you have an application with users and admins. There is only one API that gives you all the app data (fetchDummyData), and you need to separate it into two different states (users, admins).

Try to spot what is wrong here:

import React, { useEffect, useState } from "react";
import "./styles.css";

function App() {
  const [users, setUsers] = useState([]);
  const [admins, setAdmins] = useState([]);

  const fetchDummyData = () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve([
          { name: "Tomer", type: "user" },
          { name: "John", type: "admin" },
          { name: "Dan", type: "user" }
        ]);
      }, 300);
    });

  const findUsers = (data) =>
setUsers(() => data.filter((row) => row.type === "user"));

  const findAdmins = (data) =>
    setAdmins(() => data.filter((row) => row.type === "admin"));

  useEffect(() => {
    const promiseData = fetchDummyData();
    promiseData.then((data) => {
      findUsers(data);
      findAdmins(data);
    });
  }, []);
  console.count("render");
  return (
    <div className="App">
      <Users users={users}></Users >
      <Admins admins={admins}></Admins >
    </div>
  );
}
export default App;

As you probably noticed from the console.count("render"), there is something wrong with the number of renders.

According to basic logic, we need to see render: 2 the first time the component mounts, and then a re-render after useEffect. But in fact we see render : 3.

This is because any time we deploy the useState method, the component re-renders (setUsers , setAdmins).

NB: If you are using React.StrictMode in index.js, it will re-render twice. This means you will see the result of console.count in multiply 2 ("render:6"). for more information https://reactjs.org/docs/strict-mode

The solution, in this case, is to use a state like this:

function App() {
  const [allUsers, setAllUsers] = useState({ users: [], admins: [] });

  const fetchDummyData = () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve([
          { name: "Tomer", type: "user" },
          { name: "John", type: "admin" },
          { name: "Dan", type: "user" }
        ]);
      }, 300);
    });
  const findUsers = (data) => data.filter((row) => row.type === "user");
  const findAdmins = (data) => data.filter((row) => row.type === "admin");
  useEffect(() => {
    const promiseData = fetchDummyData();
    promiseData.then((data) => {
      setAllUsers({
        users: findUsers(data),
        admins: findAdmins(data)
      });
    });
  }, []);
  console.count("render");
  return (
    <div className="App">
      <Users users={allUsers.users}></Users >
      <Admins admins={allUsers.admins}></Admins >
    </div>
  );
}

export default App;

This way we cause the opponent to re-render only once, because we set the state only once. If you have a very complex state, maybe the better solution is to apply useReducer.

Remember: Bugfender Can Help

Bugfender can help you to find errors in your apps. There may be some errors that you cannot see in development and only happen in production, to certain users.

Once you install Bugfender in your app, we will be notified of any problem that your app users experience.

Thank you for reading. I hope you enjoyed the tutorial and learned something new. If you have something to add, please leave a comment.

Tricky JavaScript Questions

Tomer Raitz — Wed, 07 Oct 2020 10:02:03 +0000

As part of my journey to become a better JavaScript programmer, I need to dive deep into JavaScript foundations. In this article, I'll show you mind-boggling questions (for me, it was mind-boggling, I hope for you as well) that we can learn some of the concepts behind these questions.

Before we start, I want to mention some of the resources I used for writing this article, and I highly recommend you to use them as well:

70 JavaScript Interview Questions - Excellent article that you can learn a lot about JavaScript foundations.
What Makes Javascript Weird...and AWESOME - I found this Youtube playlist, In my opinion, the explanations are very understandable, and he shows visual code examples.
What the heck is the event loop anyway? | Philip Roberts | JSConf EU - One of the most famous JavaScript videos recently. He explains how JavaScript works "Behind the scenes" (how the event loop works).

Of course, this is only some of the resources on the subject. There are many other resources to learn from.

So are you ready to get your mind blow away (from JavaScript question)?

Questions

Notice 1!: To each question, there is an answer with an explanation (link below each item).
Notice 2!: If you run the questions on the console, remember that some of the variables are repeating themselves, so do refresh from question to question.
Notice 3!: For each question think what will be the output.

Question 1

var a = 1
function foo(){
 var a = 2
 console.log(a)
}
foo()
console.log(a);

Go to answer 1

Question 2

function foo(){
    a = 2
  }
  foo()
  console.log(a);

Go to answer 2

Question 3

var answer = 0;

const baseValue = value => multipleValue => value * multipleValue;

const multiple = baseValue(2);
answer = multiple(5);
console.log(answer);

Go to answer 3

Question 4

function outerFunc(outerParam) {
  function innerFunc(innerParam) {
     outerParam["b"] = innerParam;
  }
  return innerFunc;
}

const obj = {a:1}
const example = outerFunc(obj);
const answer = example(2)
console.log(obj);

Go to answer 4

Question 5

let arr =[1,2]
function test(array){
  array.push(3)
}
test(arr)
console.log(arr)

Go to answer 5

Question 6

let arr =[1,2]
function test(array){
  array.push(3)
}
test([...arr])
console.log(arr)

Go to answer 6

Question 7

let arr =[1,2]
function test(array){
  array = [1,2,3]
}
test(arr)
console.log(arr)

Go to answer 7

Question 8

const carDetails = {
    name: "Tomer",
    getName(){
       return this.name;
    },
  };
  var name = "Joe";
  var getCarName = carDetails.getName;
  console.log(getCarName());

Go to answer 8

Question 9

console.log(a)
console.log(b)
var a = 2
let b = 2

Go to answer 9

Question 10

a()
function a(){
    console.log("a")
}
b();
var b =function(){
    console.log("b")
}

Go to answer 10

Answers

Answer To Question 1

I think the answer is pretty straightforward. If you said 2 and 1, you are correct. This question is about Scope. In JavaScript, there are two types of scopes: Global Scope and Local Scope, variables declared within a JavaScript function become local, and variables declared outside of the function become global.
The var a = 1 declared out of the function and saved in global memory. The var a = 2 declared inside the function and saved in local memory. it's a different place in memory (even if they have the same name).

Back to question 1

Answer To Question 2

If you said a is not defined, you have healthy thinking, but the answer is 2. This is why JavaScript is a unique language. According to the logic we talked about in the previous question, the variables should be in local scope, But, if you pay attention, the variables didn't declare (without var, let, const). When we do assignments without declarations in JavaSacript (a=2), the compiler will save the variable in the global scope. FYI, we can fix this behavior by add "use strict".

Back to question 2

Answer To Question 3

The answer is 10. This question is about Closures. In simple words - Closures are functions that return another function, and the inner function has access to the outer variables function (You can read more here). We can look at Closures like Global scope (outer function) and Local scope (inner function) that leaves inside the local scope (baseValue). Like regular Scope in JavaScript, the Local scope has access to Global Scope. For that reason, the compiler can know what is value.
FYI, This doesn't seem like a "conservative" Closure example because it's writing in ES5 syntax (arrow function). The "conservative" looks like:

var answer = 0;

function baseValue(value){
   return function(multipleValue){
      return value * multipleValue;
   }
}

const multiple = baseValue(2);
answer = multiple(5);
console.log(answer);

Back to question 3

Answer To Question 4

The answer is {a: 1,b: 2}. After the previous question, we can recognize it's a Closure, but this question is also about References. In JavaScript, there are two kinds of variables types: primitives variables (strings, numbers, and booleans) and References variables (arrays and objects). Primitives variables save in memory in their values, and references save in memory as virtual id. For that reason, when we pass the object from function to function, we actually pass the virtual id. In our case, the compiler saved the obj and saw we call the reference again by outerParam["b"] = innerParam. Hence, he added to the object key b and value 2 (value of innerParam).
In the case of primitives variables like:

function outerFunc(outerParam) {
  function innerFunc(innerParam) {
     outerParam = innerParam;
  }
  return innerFunc;
}

const num = 1
const example = outerFunc(num);
const answer = example(2)
console.log(num);

The num will still be 1 (but the outerParam will be 2).

Back to question 4

Answer To Question 5

The answer is [1,2,3], arrays are References (full explanation in the previous answer).

Back to question 5

Answer To Question 6

The answer is [1,2]. I used the ES6 "Spread Operator," it's basically the same do test([1,2,3]). In this way, we created a new array (new reference) and arr reference saved in different id - we didn't change the reference just added another one.

Back to question 6

Answer To Question 7

The answer is [1,2]. I know that after all the explanations on references, it seems weird. Still, there is a good reason for it, The = Operator creates a new reference (you can look in this discussion for more information), The array exist in the local scope and don't influence the global variables in this case.
If the code was like:

let arr =[1,2]
function test(array){
  arr = [1,2,3]
}
test(arr)
console.log(arr)

The answer was [1,2,3] because, in this case, we replaced the global variable (arr) with a new reference.

Back to question 7

Answer To Question 8

The answer is Joe. The question's subject is "Context"(this). In JavaScript, this is the object that is called to the function. When we do var getCarName = carDetails.getName; we store the function in the global scope, So this will be Window, and because we set name in the global scope (window), the output will be Joe (same as window.name). This is JavaScript's default behavior. If you want to change this behavior, you can use: bind, apply, call, and arrow functions.

Back to question 8

Answer To Question 9

If you said undefined and b is not defined (error), congratulation, you know Hoisting. In simple words, hoisting is the way the compiler defines the variables. When the function executes, the compiler looks for variables declaration, and if the variable were declared, it would hoist it to the top. it's the same as:

var a;
console.log(a)
a = 2

It only works on var. let and const is not "hoisting" variables. This is why we will see the error: b is not defined.

Back to question 9

Answer To Question 10

The answer is a and b is not a function (error). This is a very wried part of JavaScript (in my point of view) - functions are hoisted as well. If you read the last answer, you will understand that var is also hoisted, but it doesn't matter what will be after the = operator. In the hoisting stage, he will always be undefined. So when we do b(), it's the same as undefined().

Back to question 10

Thank you for reading this article. I hope you enjoyed and learned new things. If you have any questions or suggestions, please leave a comment.

6 ways to improve Lighthouse

Tomer Raitz — Sat, 05 Sep 2020 11:52:32 +0000

Lighthouse it's a tool that can help us improve the website in several aspects: Performance, Accessibility, Best Practices, SEO, and PWA. If you don't know how to use Lighthouse, open the dev tools in chrome on any website, then search for the Lighthouse tab and run a test (you can also run it from the command line, or as a Node module).
Before we start, I want to mention some ground rules about how to test it correctly. First, remember always run the test on incognito window. why? Because on a regular chrome window runs many apps (like chrome extension) that interfere with the Lighthouse test. Seconde, remember that can be the difference between test to test (especially in Performance test). I found an excellent explanation of why there are differences from test to tet in this article Lighthouse Changes How Performance Score is Calculated. So, if, for example, the performance test shows: 100, 80, 90, 95, it's okay because you are in the 90-100 range. But, if the test shows: 80, 68, 85, 75, it implies performance issues because you are in the 70-80 range and need to check how to improve it. Let's dive into the steps to improve the scoring.

1. Choose a good hosting

It may seem obvious to many developers, but hosting is one of the most important things when you want to check the website performance. For example, I used Heroku that, in my opinion, is one of the best hostings, but in the free mode, the server goes to "sleep" after half an hour. The "sleeping mode" influenced performance scoring, so I changed to Netlify. It made a lot of difference in the scoring.

2. Make a general order in the files

Delete unnecessary files like images, javascript files, HTML files, CSS files, etc. Check again for unnecessary lines in the code, and if it is not in use Delete them, don't make them comment. Why? Because any line adds size to the file. Maybe, on small projects, the number of lines does not have a significate impact on the performance score, but it does on large projects.

3. Compress, compress and compress again

One of the best ways to improve performance scoring is by compressing. You can use these tips:

compress images: You can build your own compress API in the server or use image CDN that offers this service. My solution was to use image compressor online like imagecompressor(there a lot of other compressors online on the web) before uploading the image to the project.
compress from the server-side: If you are using node.js to serve the build folder, you can use the compression package:

let compression = require('compression');
app.use(compression());

You can see the full code in my GitHub : portfolio-server

compress in the build process: you can compress the build folder files by the package gzipper (npm install) and add this to the package.json :

  "scripts": {
    "build": "node scripts/build.js && gzipper compress ./build",
    ...
  }

4. Implement lazy loading

Let's think about how the browser loads the js files. If the browser sees the <script> tag it stops the HTML parsing process (a.k.a "block") downloads and executes the script. In HTML5, defer and async attributes change the browser's behavior about the javascript execution order. (I won't expand on the subject, but if you want more information, I found an interesting discussion on the subject on StackOverflow: How are JavaScript files loaded and executed?). So after we understood what is "blocking," let's talk about React. Usually, in React, we do import component from '../ ... from all the components to the app(the father), the browser will ship all of the scripts in the beginning. The solution is lazy loading (code-splitting) components, lazy loading helps you to ship to the browser only the components that are in use on the page. (for more information you can look on code-splitting-suspense). for example :

import React, { Component , Suspense ,lazy} from 'react';
import './App.css';
import LoadPage from './components/LoadPage';
const Main = lazy(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(import('./components/Main')), 5000);
  });
});
class App extends Component {
  render() {
    return (
      <div>
        <Suspense fallback={<LoadPage />}>
          <Main></Main>
        </Suspense>
      </div>
    )
  }
}
export default App;

You can see the full code in my GitHub : portfolio-App.js.

The Main is a functional component.
The regular syntax for lazy import is: lazy(() => import('./components/Main'));, but I wanted delay the import to extand the loading animation.
<Suspense fallback={<LoadPage />}></Suspense> will load the loadPage until the main page is loaded.

5. optimize SEO score

SEO stands for Search Engine Optimization, which is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.

From moz.com.
In the technical point of view, there are some cases we can add to the HTML for improving the SEO score:

Add title to your HTML (inside the head tag).
Add <meta name="viewport"> tag with width or initial-scale.
Add document has a meta description (subtitle on google search) like:

 <meta name="description" content="Specializing in JavaScript and js frameworks. I believe in elegant solutions for complex problems. If you are seeking for a developer, you can get in touch with me here.">

Add robots.txt to the project. In simple words, the robots.txt in charge of blocking crawlers on parts of your website.
Add alt attribute to <img> tag. Explain what the picture is.

6. General score improving

Add SSL to your website (from HTTP to HTTPS).
Add label tag to input tag like :

<input className="input-small" type="text" id="name" placeholder="Your Name" name="name" value={state.name} onChange={this.handleFields} />
<label htmlFor="name">Your Name</label>

If you want to hide the label tag you can just add this to the CSS:

label{
    font-size: 0;
    height: 1px;
}

You can view the project on GitHub: Tomer-portfolio. I may forget other ways to improve scoring. I encourage you to leave a comment on things that can add to this subject or let me know what you think about this article.