Forem: Abdulrahman Ismael

Unlocking the Power of React: Fresh Hooks to Expand Your Development Toolkit

Abdulrahman Ismael — Wed, 04 Oct 2023 11:37:36 +0000

React has introduced some new hooks that can make it easier to use React.
We're going to discuss some of them today. Enjoy 😉

1. useId:

useId is a new release hook in React. It is used to generate unique IDs.
It can help in many matters, especially with accessibility attributes in HTML Elements.
Do not try to use useId to generate keys in a list. Keys should be generated from the data itself.

import { useId } from 'react';

function generateUniqueKey() {
  const uniqueKey = useId();
  .
  .
}

2. useTransition:

You may want to update the state of useState hook without changing the UI, now you can do that using useTransition.
In other words, useTransition is used to mark some states as non-blocking transitions. which means updating states won't block the UI as if nothing changed and that might be useful in some situations.
useTransition accepts no parameters. But it returns 2 things:

Ispending: which indicates whether there is a transition or not
transitionFn: function that is used to mark states as transitions by calling the set functions within its function parameter.

function CountComponent() {
  const [isPending, transitionFn] = useTransition();
  const [count, setCount] = useState(0);

  function markCountAsTransition(nextCount) {
    transitionFn(() => {
      setCount(nextCount);
    });
  }
  .
  .
}

3. useDeferredValue

useDeferredValue is used to delay showing the new value of state or prop in the UI when you change it.
So, when you change the state, the UI still uses the old value, and the new value is updated in the background. Then, after any other re-renders happen, the UI will use the new value.
It accepts state or prop that is displayed in the UI as a parameter and returns the deferred value, so make sure to use the deferred value instead of the original one to delay the display.

import { useState, useDeferredValue } from 'react';

function DeferValue() {
  const [state, setState] = useState(0);
  const deferredState = useDeferredValue(state);
  .
  .
  .

  return <div> {deferredState} </div>
}

These are some of the new introduced hooks, and they're the most significant ones for now. In the future, this article might be updated with any new hooks that are released.
I hope you enjoyed and unleashed your knowledge today 😃

Have a nice day 🌹

The power of State Management in React.js

Abdulrahman Ismael — Fri, 25 Aug 2023 21:55:32 +0000

Hello again, and sorry for being late. I had some important tasks in the last few months, but today I am back with an important and exciting topic.
Today we are going to talk about state management in React.js.

Introduction

One of the most important features of React is state management. It gives React the ability to remember the values even if the component is re-rendered.
The states are split into local states, global states, server states, and URL states. Local states are only managed in the current component and cannot be shared across multiple components; they can be managed by 'useReducer' or 'useState'.
Global states can be shared across multiple components. For that, we can use the React Context API (which will be discussed in another article) or Third-party libraries.
There are many ways to handle state in React, and we will discuss most of them today.

1. UseState hook

'useState' is a built-in hook in React. Its main purpose is to store the state, and it has the ability to remember or change it in every render.

Note: state is a normal value but controlled by React

'useState' accepts one argument: the state, and returns two values in an array: the variable that will store the value and the method that can be used to change or set the value (that's why we call it the setter method).
The convention for naming the setter method is to use 'set' at the beginning, followed by the variable name.

import {useState} from 'react';

function stateManagement() {
  const [variable, setVariable] = useState('any value');
  .
  .
  .
}

2. useReducer hook

Another valuable hook in React is 'useReducer'. It is similar to useState', but with more features.
If you want to manage the state based on conditions or complex logic, then 'useReducer' is the appropriate way.
It accepts two arguments: the reducer function and the initial state, and returns the variable that holds the state and the dispatch method.
The reducer function contains the logic that changes the state, and it has two parameters: the state and the action (the action is passed to the dispatch method in order to connect the reducer and dispatch methods, which gives us the ability to change the state based on the particular logic).
The dispatch method is used to change the state based on its argument, which is the action (the action is usually an object that has some helpful properties in the logic)

Note: developers usually use 'type' property in the action to describe the type of changing in the state

An example from w3schools:

import { useReducer } from "react";

the initial state
const initialTodos = [
  {
    id: 1,
    title: "\"Todo 1\","
    complete: false,
  },
  {
    id: 2,
    title: "\"Todo 2\","
    complete: false,
  },
];

// the reducer method
const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  // calling useReducer
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

3. Libraries

There are third-party libraries used to manage global states.
For example, we have libraries like Redux, Recoil, and Zustand.
I recommend the Redux library. You should learn the Redux toolkit first, then move on to using Redux in React using 'React-Redux'.

Summary

We have many ways to manage states, and each has its own uses. So, make sure to know what type of state you need to manage and how to manage it, then choose the appropriate way to do that.
There are server states (which manage the data coming from the server) and URL states (which are the data in URLs that existed in the pathname and query parameters), we can discuss them in another topic.

Thanks for Reading and I hope you enjoyed today's topic and learned something, Goodbye ❤️.

Revolutionize Your CSS Skills with These 8 Cutting-Edge CSS Features

Abdulrahman Ismael — Wed, 22 Mar 2023 21:09:55 +0000

Introduction:

Having all the CSS concepts and remembering them is quite difficult, so here I will go over the most important CSS concepts that will take your CSS knowledge to the next level…

Now, get your pen and paper ready because we have some exciting new CSS features to unveil:

1- “:empty” Pseudo-Class:

A new pseudo-class I came up with is “:empty”, which styles any element that contains no child nodes (child elements, text, etc.) so that you can fill up the element later with JavaScript which will remove those styles as the element is no longer empty.
This is useful in a variety of situations, including the example we mentioned above.

p:empty{
  display: none;
}

the element will not be displayed only if it is empty, otherwise, it will show up on the screen with its children.

2- “:target” Pseudo-Class:

Sometimes you want to make some links that move to someplace on the same page, and at that moment you need to make some “focus styling” on the place you are moving to, that’s why “:target” pseudo-class has existed…
“:target” pseudo-class is used to style any element in the page that is targeted from some link on the same page

section:target{
  outline: 2px solid #ff0000;
}

3- “:only-child” | “:only-of-type” Pseudo-Classes:

“:only-child” pseudo-class is used to style an element that is the only child in its parent element
“:only-of-type” pseudo-class is used to style an element that is the only element of its type in its parent element.

HTML:
<section>
  <p class='paragraph'> Hello World </p>
</section>

CSS:
.paragraph:only-child {
  color: #666;
}
.paragraph:only-of-type {
  border: 1px solid #ff0000; 
}

4- “:has()” Pseudo-Class:

Absolutely, It is one of the most powerful features that really changed CSS, you should understand how powerful this pseudo-class is.
It is used to style any element but just if it has some child element in it.
for instance, let’s say you have two “section” elements and one of them has “h1” element inside it. If you want to give the element that has the heading element inside it some special style, that can be done by giving the element some specific class or id or using JavaScript.
but now using this new feature, that can be done in a few seconds.

HTML:
<section>
  <h1> Hello From Section 1 </h1>
</section>
<section>
  <p> Hello From Section 2 </p>
</section>

CSS:
section:has(h1) {
  border: 1px solid red;
}

Only the first section element that has the “h1” element inside it will have a red border.

5- “:is()” Pseudo-Class:

This feature will save you a lot of time, It is used to simplify grouping selectors, Its usages:
grouping element selectors

:is(h1,h2,h3,h4,h5,h6) {
  margin: 0;
}

grouping pseudo-classes

button:is(:hover, :focus) {
  border: 1px solid #555;
}

6- inset property:

Save yourself some coding time with this shorthand property, which combines the (top, right, bottom, and left) properties into a single line. It’s a convenient way to streamline your code and make it more efficient.
And if you’re looking to position an element absolutely and have it fill its parent container, look no further than this property. It’s the perfect solution for achieving a seamless, full-width design.

section::after{
  position: absolute;
  inset: 0;

  /* Instead of */
  /* top: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
}

7- “vmax” unit:

This versatile unit has many applications. For instance, if you want to create a pill-shaped element, simply apply a “border-radius” property with a value of “100vmax”. It’s that easy!

div{
  .
  .
  border-radius: 100vmax;
}

It can be used to give an element the full width of the viewport, instead of using “100vw” values and falling into (overflow) issues:

div {
  box-shadow: 0 0 0 100vmax var(—same-bgColor-of-the-element);
  clip-path: inset(0 -100vmax); 
}

8- Advanced Selectors:

Knowing these advanced selectors is essential for any web developer, as they can help you achieve complex effects without relying on JavaScript.
In other words, they’re powerful tools that can streamline your workflow and enhance your coding skills.

img[alt]{
  /* Selecting any (img) element that has (alt) attribute */
}

img[alt="image"]{
  /* Selecting any (img) element that has (alt) attribute 
  with the value "image" */
}

img[alt^="image"]{
  /* Selecting any (img) element that has (alt) attribute 
  with the letters "image…" at the first of the value */
}

a[href$=".com"]{
  /* Selecting any (a) element that has (href) attribute with
  the letters "….com" at the end of the value */
}

div[class*="box"]{
  /* Selecting any (div) element that has (class) attribute with
  the letters "box" anywhere in the value */
}

Conclusion:

In conclusion, CSS is constantly evolving, with new features and enhancements being added all the time. By keeping up to date with the latest developments and leveraging the power of advanced selectors, shorthand properties, and versatile units, you can take your CSS skills to the next level and create stunning, responsive designs. So, keep experimenting, keep learning, and keep pushing the boundaries of what’s possible with CSS!

You are not bad at problem-solving as you think, you are just on the right path (Motivated Speech For Developers)👌

Abdulrahman Ismael — Tue, 20 Dec 2022 18:36:21 +0000

Problem-Solving skill is one of the most essential skills that you must have to apply for jobs in programming, all the interviews ask you to solve a problem using one of the programming languages you know.

if it is your first time on that path, you may find it difficult a little bit… but by the time, you will master it, all the professional developers have passed through that road at first but later, they managed to master Problem-Solving.

The Key of Problem-Solving Mastery :

So what do if you feel that you are getting stuck too much in solving problems whatever the language you use :

For each problem I couldn't solve, I try hard to think of a solution even if that solution is 100 lines of code that's fine.
if I can't find one, the last step is searching for the solution on Google…
Search for the solution, read it, and then try to remember and write it, do not just read the solution and quit, that's a bad habit for the developers' community and most junior developers do that wrong attitude.

so do not think of yourself that you are bad in problem-solving as you couldn't solve one, that's fine we all have faced that and by knowing the solution and understanding it and its logic, we improve our logical thinking by that.

And last but not least, repetition, repetition is beneficial for any junior developer, try to solve the previous problems that you got stuck in solving again, or maybe try solving them with another programming language, it doesn't matter anyway but it is a solution of Boredom.

Thanks for reading and I hope you become a master in problem-solving…

support for more and better posts ❤️

Netlify vs Vercel vs Surge | The best platform I use to deploy your projects 🤔?!

Abdulrahman Ismael — Tue, 20 Dec 2022 14:53:01 +0000

One of the most important steps that should be considered when building Web projects is deploying your project so that anyone can see your work and try the project and its Features live as reading your code is not enough!

there are several ways and websites used to do this but in this article, I'll mention the most ones I use and I prefer.

But the most ways I follow for deploying my projects are :

Vercel
Netlify
Surge

These three tools are Great and too helpful and each one has its advantages and disadvantages :

Netlify was the first one I used and it was a great experience to use it until I found out a big issue faced me, a lot of times the website is down and the server fails and which causes disturbance for most of the users so most of them are no longer use it.

Vercel was my second choice after I left using Netlify, and I still use it and deploy my projects through it, the website is always running and the Netlify issue is no longer facing me so for sure I recommend using it, easy and soft use with no issues and fails…

the third choice is the easiest one but with less features, it is using Surge Tool, this time it is not a website, just a few cmd commands will do it for you

$ npm install --global surge
# In your project directory, just run…
$ surg

….Now for me, I recommend using Vercel, and if not then Surge will be your fastest choice, always make Netlify your last choice

One last thing, as I mentioned before I know, there are a lot of websites to deploy web projects But here I mentioned my experience of using those websites…. Thanks and Happy Projects 😁❤️