DEV Community: Dor Bellmas

My piece🧩 about (B)it!

Dor Bellmas — Mon, 15 Aug 2022 12:42:00 +0000

Trust me and jump to the link below👇

Bit. Build with AI.

Create, run, reuse and release high-quality composable software.

bit.cloud

There you will find an article I wrote about my first experience with Bit.
A technology that provides us with a complete pipeline for Micro-frontends development.
By the way, the article was written with MDX, which I think is the future of writing content.

“Like the README.md text file but with the X factor!”

As you can see, I have no hidden agenda to write a support article about Bit, on the contrary… I was first exposed to this technology during the interviews I did there for the position of “Content & Component Developer”, and I got the good old “unfortunately response” from them🥲.
However, I learned a lot from using this technology, so I had to share😉.

¡! Have a fun reading ¡!

How to stand out at the most common question/task in React interviews!

Dor Bellmas — Sun, 14 Aug 2022 16:44:00 +0000

We've all been there when tasked/asked to describe how we would display a list of items within an array.
The more basic the question is, the more room the interviewer has to add follow-up questions and conditions on top of it.

But you know what I think… I think this is a hidden opportunity for you to stand out from the other candidates and talk about:

Folder Structure

The division into folders is very important, but nevertheless, it is essential that it does not deter us from starting, especially when it is a relatively small task.

Throughout this article, I will show examples of a healthy structure within these folders.
Their entire purpose is to show an order that will make it easier to navigate within the application and prepare it for growth in the future.

"I learned a lot just by looking at the folder structure in open source projects"

Centralized Data Fetching

As a front-end developer, normally you won't be expected to build your own back-end. But the assignment you are given will probably involve some form of data-fetching, likely either through a mock API or just a JSON file.
I chose to centralize all the API requests in one place with Axios(a promise-based HTTP client) because it provides an easy-to-use API in a compact package for most of your HTTP communication needs.

"I think I made the right decision after all they only have 31,189,088 weekly downloads"

Custom Hooks

If you want to dive into the main hook of this task, check out this article.

🦥Lazy-grid with “useIntersectionObserver” hook!

Dor Bellmas ・ Aug 14 '22

#react #intersection #interview #customhook

Interview Tip! Talk about web APIs!!

"Just a normal util functions folder who wears the React hooks cloak🦸🏻‍♂️"

Styles

Here you can see two different approaches:

The design should be done separately from the component. This approach requires us to properly organize our styles folder and think globally. This is the more common choice because it shows a basic knowledge of CSS capabilities without the help of other libraries such as MUI, Bootstrap, etc.
The design is an integral part of the component. With this approach, we will associate a dedicated design with each component and think in a focused way. I recommend using CSS js library, like styled-components, which makes it possible to integrate logic into the design more easily. "This approach facilitates the reuse of the same component in other projects."

As you can see below, I chose the first approach, because during the interview at the company I realized they work with Scss and I wanted to impress😉.

"Do not use both forms of thinking in your assignment.
Choose one, you can always elaborate on the other in speech"

Honorable Mention

Global State Management - A topic that could easily get a header of its own, "there are so many ways to do it!".
I don't want to dive deep into the library I used (Redux Toolkit), because I think there are much more advanced options out there.
Try to demonstrate that knowledge, by implementing a store or even only with React's useContext.

In conclusion,

As soon as you know WHY you chose this approach/structure/library (It doesn't matter if it's a little outdated), your confidence to speak will increase, especially when you show ability and knowledge on these topics:
Folder Structure, Data Fetching, Custom Hooks, web APIs, Style approaches, Global State Management.

I hope this helps. If you think about a topic that should be covered as well, please let me know in the comments.

🦥Lazy-grid with “useIntersectionObserver” hook!

Dor Bellmas — Sun, 14 Aug 2022 15:11:00 +0000

The essence of web development is to present Data smartly and efficiently, we will always continue to encounter the task of “displaying an array of items”.
But what happens when the Data is large and heavy and also appears in several different variations in the application (grid, table, etc)?

In this article we will learn one of the ways to solve this common problem, by using these tools:

IntersectionObserver
Custom Hook

First, we are going to understand how the observer integrates into a standard component in React, and then we will see how we export the same operation for global use in our application.

Intersection Observer API

The IntersectionObserver interface provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

“Considered more performant than listening for scroll events and the callback will only fire when the element we’re observing meets the specified threshold, instead of every time the scroll position is updated”

Let’s simplify the logic highlighted below into thinking steps!

We will create a new object from the IntersectionObserver Class whose constructor function receives two arguments:
- A callback function with which you can extract all its entries. For example the value “isIntersecting”, to which we will place the state of our component. By doing this, we can manage the heavy Data inside the thumbnail/card element.
- An optional configuration object which customizes the observer.
We will import useRef, which will be used as a reference to the element.
that we will wrap in our “observe()” method.
Finally, we will import useEffect, to manage the life cycle of the component, as soon as the component is displayed in the DOM, we will activate the observer, and when it stops being displayed, we will disconnect from it.

Let’s be honest here, we all know the importance of clean and readable code, and what’s better than one line of code that says a lot?😉

For the ability to export all this logic to more components, we will create a custom hook with these two rules:

Write a function with the word “use” at the beginning to distinguish it from a regular util function.
The function must use at least one hook from React.

In this case, the whole function revolves around our observer.
In order for it to become generic, it should receive a RefObject argument.
Our intention is to associate the same action with another element.
And we also added the option to receive another object-type argument that will be responsible for the configuration.

Finally, as you can see, we want to use the isIntersecting value, so we will associate it with the state and return it at the end of the function.

“Handle the heavy lifting of your web page”

In order to prepare for the increase in capabilities of our hook, we should:

put in the dependency array (found at the end of the useEffect) the variables that may be relevant for future use, because we may choose that they can trigger the useEffect again, but at the moment they do nothing, because they do not change.
Return an object, even if we currently only need one. NOTE: You can also return an array as useState does, by doing so you give yourself the option to choose whatever name that fits your needs.

“Solve your future problems with custom hooks”

As you can see in the video above, with only one **GET request **we can display a large number of items, and fill each element with Data, in a selective manner.

In conclusion, our DOM has no problem accepting a lot of elements, the thing that burdens him is the Data we add to each of these elements, therefore if we are alert to the exposure of each item in the array by using an observer, we can create a “gatekeeper”, who renders a piece of the heavy content to our screen, each time it crosses the threshold.
In doing so, we will create a more inviting and pleasant experience for the user.

“There is no need to fill an element with Data before the user can see it..👀”

I hope this helps. Please comment and share your thoughts and custom hooks.

Open yourself to the open-source world !!!

Dor Bellmas — Tue, 03 May 2022 12:43:00 +0000

For me it all started with a project idea, after countless times of trying to do it all myself, I realized that I'm working in the best field in the world, a place where sharing is REALLY caring!
That's when I started investigating open source projects like crazy, out of the thought that you can't make something that you don't know exists.
I had to expose myself to as many features as possible so that I could expand my toolbox and finally put those sausage fingers to good work.
It's all about understanding what is in front of you, "if it's within my abilities or not".

Some examples from my first attempts:

I found out more about the convenience that JSX and CSS in JS libraries give us.
It helped me create a presentation-like portfolio with the use of user scrolling percentages, that you are welcome to checkout by the way 😉
Dor Bellmas's Portfolio
Over the years I have used so many libraries but once you are exposed to well-written code, all you have to do is open your pocket and compress all those gifts inside (functions, hooks, reusability-thinking, correct structure, etc…).
Above all, it just produces a deeper understanding.
I learned so much from just reading documentation pages, and playing with site features.
I used to breeze over documentations and get stuck in the process, but now I have a better understanding of how to read them carefully and get the most out of them.
After all, these are experienced people who have spent a lot of time on them.
My line of thought is to take something that already works and find a way to use it or make it better.

TIPS for a beginner open-source investigator:

If there is a DEMO link, an examples folder, or documentation, use these to help you choose your project (you can always start small).
Download Octotree - GitHub or just press the dot key on your keyboard while visiting a GitHub project and watch the magic.
'BCD' as quickly as possible [Bring it to life by cloning and installing dependencies, Changing something, Deploy (with netlify it's easy peezy)], it all might sound a lot but the more you practice, the sharper your documentation reading skills will be, and you won't waste your precious time.
After a successful BCD, 'cmd/ctrl+shift+c '(in the browser) and 'cmd/ctrl+shift+f ' (in the code editor) are going to be your best friends.

Learn from this fearless sloth and start exposing yourself to more open-source!
A much more technical article on this subject is coming soon, STAY TUNED🦾