{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Reza Bozorgi","description":"The latest articles on DEV Community by Reza Bozorgi (@rezab).","link":"https:\/\/dev.to\/rezab","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F393102%2Fb38b6016-a929-4765-bd3e-bbd997dcba1c.jpg","title":"DEV Community: Reza Bozorgi","link":"https:\/\/dev.to\/rezab"},"language":"en","item":[{"title":"Common React Design patterns: Custom Hooks","pubDate":"Tue, 31 May 2022 19:22:07 +0000","link":"https:\/\/dev.to\/rezab\/common-react-design-patterns-custom-hooks-4i9p","guid":"https:\/\/dev.to\/rezab\/common-react-design-patterns-custom-hooks-4i9p","description":"

I started a series called \"Common React Design Patterns\" in which I want to practice some of the major design patterns used in React with each other. So we can be confident enough to apply it in our day-to-day development.<\/p>\n\n

Knowing these patterns is helpful because it can save our time as developers, and it would present the application as a high-performance and delightful experience for our customers.<\/p>\n\n

\n \n \n Custom Hooks\n<\/h2>\n\n

One of the basic design patterns that we use daily is \"Custom Hooks.\" It is vastly used as a preferable way to modularize and apply the DRY principle in our application. We can share complex behavior between multiple components by using a custom hook.<\/p>\n\n

\n \n \n Sample\n<\/h2>\n\n

\n \n \n useDebounce Hook\n<\/h3>\n\n

Tip<\/em> : Debounce delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
\n<\/p>\n\n

\n
import { useEffect, useState } from 'react'\n\nfunction useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value)\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [value, delay])\n\n  return debouncedValue\n}\n\nexport default useDebounce\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
By using return function of useEffect<\/code> after changing value<\/code> or delay<\/code>, React clear the timer identifier and function inside setTimeout<\/code> not going to run. So it debounces. \ud83d\udc4c<\/p>\n\n
\n  \n  \n  Usage\n<\/h3>\n\n\n\n
\n
import React, { ChangeEvent, useEffect, useState } from 'react'\n\nimport { useDebounce } from 'usehooks-ts'\n\nexport default function Component() {\n  const [value, setValue] = useState<string>('')\n  const debouncedValue = useDebounce<string>(value, 500)\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n\n  \/\/ Fetch API (optional)\n  useEffect(() => {\n    \/\/ Do fetch here...\n    \/\/ Triggers when \"debouncedValue\" changes\n  }, [debouncedValue])\n\n  return (\n    <div>\n      <p>Value real-time: {value}<\/p>\n      <p>Debounced value: {debouncedValue}<\/p>\n\n      <input type=\"text\" value={value} onChange={handleChange} \/>\n    <\/div>\n  )\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Credit: useHooks-ts<\/em> *<\/a><\/p>\n\n
\n  \n  \n  Libraries\n<\/h2>\n\n
You do not have to build common scenarios from scratch. There are fantastic packages out there you can quickly learn and use. Here I listed some reliable players out of sort.<\/p>\n\n
react-use *<\/a> \u2b50\ufe0f 29.6k \/ \ud83d\udd3d 958k
\nahooks *<\/a> \u2b50\ufe0f 9.1k \/ \ud83d\udd3d 74k
\nawesome-react-hooks *<\/a> \u2b50\ufe0f 8.1k \/ \ud83d\udd3d 74k
\nusehooks-ts *<\/a> \u2b50\ufe0f 1.6k \/ \ud83d\udd3d 44k 
\nreact-recipes *<\/a> \u2b50\ufe0f 850 \/ \ud83d\udd3d 1.2k
\nreact-hanger *<\/a> \u2b50\ufe0f 1.8k \/ \ud83d\udd3d 3.3k<\/p>\n\n
\n  \n  \n  Refrences\n<\/h2>\n\n
React offcial doc *<\/a><\/p>\n\n","category":["react","designpattern","javascript","codequality"]},{"title":"Beginner\u2019s guide to Tailwind CSS: the new way of styling","pubDate":"Mon, 04 Oct 2021 17:21:54 +0000","link":"https:\/\/dev.to\/rezab\/beginner-s-guide-to-tailwind-css-the-new-way-of-styling-3i80","guid":"https:\/\/dev.to\/rezab\/beginner-s-guide-to-tailwind-css-the-new-way-of-styling-3i80","description":"
\n  \n  \n  Intro\n<\/h2>\n\n
Tailwindcss is a utility-first CSS framework which can be assumed as an API for your design system.<\/p>\n\n
\n
Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.<\/p>\n<\/blockquote>\n\n
In this article I'm going to share some experiences I've achieved during work with this incredible CSS framework lately.<\/p>\n\n
\n  \n  \n  Learning\n<\/h2>\n\n
Although it is a must-do to read thoroughly each and every framework's documentation, it is rare to find a nice one.
\nTailwindcss documentation is one of the best out there. Easy to navigate, well-balanced descriptions and beautiful.

\nDefinitely you should check it out and learn everything you need to know. (+<\/a>)<\/p>\n
\n  \n  \n  An unbiased review\n<\/h2>\n\n
Moreover learning, you might need to know how Tailwind CSS introduce itself to the community. Which one is better? Bootstrap or Tailwind? Is it right time to switch?\ud83e\udd14
\nKyle has a short and informative video about it. (+<\/a>)<\/p>\n
\n  \n  \n  Cheatsheet\n<\/h2>\n\n
In fact, we shouldn't memorize things that can be available in a blink of an eye. \ud83d\ude0e
\nCheatsheets can play huge role in our daily life and we all love it. 
\nYou can check out an amazing cheatsheet for Tailwind CSS here. (+<\/a>)<\/p>\n
\n  \n  \n  Playground\n<\/h2>\n\n
Many developers are \"Learn by doing\" people. Tailwind Play is an interactive environment that you can right jump into practicing and learning Tailwind. (+<\/a>)
\nAdditionally, it's worth to play this game<\/a>, too. Apply Tailwind knowledge and Flex to navigate the knight through the dungeon. \ud83d\ude09<\/p>\n
\n  \n  \n  My Todo project\n<\/h2>\n\n
Last but not least, review a sample project give you great insight. Check out my simple Todo App built with React, Typescript and Tailwind CSS.<\/p>\n\n
\"image\"<\/a><\/p>\n\n\n
\n  
\n    
\n      \"GitHub\n      \n        reza899\n      <\/a> \/ \n        todo-app\n      <\/a>\n    <\/h2>\n    
\n      simple Todo App built with React, Typescript and TailwindCss\n    <\/h3>\n  <\/div>\n<\/div>\n\n\n
\n  \n  \n  Conclusion\n<\/h2>\n\n
From my point of view, learning Tailwind is one the things every web developer should go with it. I believe it is like a revolution in styling world.
\nBy using Tailwind build rapidly and much easier styling. Also you're not going to write vanilla CSS anymore.<\/p>\n\n
If you have any other recommendations, let everyone know in the comments.<\/p>\n\n","category":["tailwindcss","css","webdev"]},{"title":"Data Loading with SSR in React","pubDate":"Mon, 20 Sep 2021 07:26:39 +0000","link":"https:\/\/dev.to\/rezab\/data-loading-with-ssr-in-react-185p","guid":"https:\/\/dev.to\/rezab\/data-loading-with-ssr-in-react-185p","description":"
\n  \n  \n  Intro\n<\/h2>\n\n
In this article I want to check out how data loading works in SSR.<\/p>\n\n
Note: you can access source code of this article here<\/a>.<\/p>\n\n
\n  \n  \n  What is Server-side Rendering(SSR) ? \ud83e\udd14\n<\/h2>\n\n
With server-side rendering, the server is the one that takes care of running our scripts and rendering all of our elements. (see this<\/a> describe thoroughly about SSR and differences with CSR)<\/p>\n\n
\n  \n  \n  Setting up a simple server\n<\/h2>\n\n
First of all, we need to have a server. By using classic CRA, installing few packages and adding two files below in the root folder simply we can have a express server.<\/p>\n\n
To take modern code and convert that into something which is understandable for Nodejs should use babel and it's related presets: 
\nnpm i -D @babel\/core @babel\/preset-env @babel\/preset-react @babel\/node nodemon<\/code><\/p>\n\n
Then, install express to serve our app:
\nnpm i express<\/code><\/p>\n\n
We also need an optimized production build by running npm run build<\/code>. <\/p>\n\n
.babelrc<\/code> file:
\n<\/p>\n\n
\n
{\n  \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"]\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n
server.js<\/code> file:
\n<\/p>\n
\n
import express from \"express\";\nimport React from \"react\";\nimport { renderToString } from \"react-dom\/server\";\nimport path from \"path\";\nimport fs from \"fs\";\nimport App from \".\/src\/App\";\n\nconst app = express();\n\napp.use(express.static(\".\/build\", { index: false }));\n\napp.get(\"\/*\", (req, res) => {\n  const reactApp = renderToString(<App \/>);\n\n  const templateFile = path.resolve(\".\/build\/index.html\");\n  fs.readFile(templateFile, \"utf8\", (err, data) => {\n    if (err) {\n      return res.status(500).send(err);\n    }\n\n    return res.send(\n      data.replace('<div id=\"root\"><\/div>', `<div id=\"root\">${reactApp}<\/div>`)\n    );\n  });\n});\n\napp.listen(8080, () => {\n  console.log(\"Server is listening on port 8080\");\n});\n\n<\/code><\/pre>\n\n<\/div>\n\n\n
For running the server you can use nodemon<\/code> in order to restart after a change automatically:
\nnpx nodemon --exec npx babel-node server.js<\/code><\/p>\n
\n  \n  \n  When should we load data?\n<\/h2>\n\n
I'm going to look at how data loading works with regards to server-side rendered applications.<\/p>\n\n
To show data loading with server-side rendering let's add some coins \ud83d\udcb2 to our server. <\/p>\n\n
In server.js<\/code> file I'm going to add a special API route that our front-end will be able to use to load the coins data.
\n<\/p>\n
\n
const coins = [\n    { name: \"Bitcoin\", price: \"47000\" },\n    { name: \"Ethereum\", price: \"3300\" },\n    { name: \"cardano\", price: \"3\" },\n  ];\n\n  app.get(\"\/api\/coins\", (req, res) => {\n    const loadedCoins = coins;\n    res.json(loadedCoins);\n  });\n<\/code><\/pre>\n\n<\/div>\n\n\n
What I'm going to do, is just send back to the client some fake coins that will define in an array. Normally, you'd want to read these from a database or API (e.g. RapidAPI<\/a>), but just for simplicity sake, I'll define them right in our source code. <\/p>\n\n
So our front-end now will be able to load the coins from this endpoint. So let's load our data inside a useEffect hook.
\n<\/p>\n
\n
function App() {\n  const [coins, setCoins] = useState();\n\n  useEffect(() => {\n    fetch(\"\/api\/coins\")\n      .then((res) => res.json())\n      .then((data) => setCoins(data));\n  }, []);\n\n  return (\n    <>\n      <h1>Server-side Rendering<\/h1>\n      <ul>\n        {coins &&\n          coins.map((coin, i) => {\n            return (\n              <li key={i}>\n                {coin.name} - {coin.price}\n              <\/li>\n            );\n          })}\n      <\/ul>\n    <\/>\n  );\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n
Let's build our front-end by npm run build<\/code>.<\/p>\n\n
If we inspect the HTML that we got back from the server, what we're going to see does not actually include the coins. why? \ud83d\ude2e<\/p>\n\n
What's happening is, the server is server-side rendering the front-end, except for the parts where we need to load data.\ud83d\ude09<\/p>\n\n\n
\n  
\n    
\n      \"GitHub\n      \n        reza899\n      <\/a> \/ \n        ssr-data-load\n      <\/a>\n    <\/h2>\n    
\n      how data loading works with regards to server-side rendered applications\n    <\/h3>\n  <\/div>\n<\/div>\n\n\n\n","category":["react","javascript","webdev","ssr"]},{"title":"Time and its management tools","pubDate":"Fri, 09 Jul 2021 15:42:30 +0000","link":"https:\/\/dev.to\/rezab\/time-and-its-management-tools-2e4","guid":"https:\/\/dev.to\/rezab\/time-and-its-management-tools-2e4","description":"
\n  \n  \n  Introduction\n<\/h3>\n\n
We have tried to reduce the cost of doing things with different methods and tools with the aim of improving processes during our lifelong.
\nEveryone with expertise in a certain field can live a balanced life and also benefit from other specialties and services without its scientific knowledge.<\/p>\n\n
In the field of talent identification, one of the criteria for measuring talent is definitely time. \"Time\" determine who is more capable than the others. In fact, if unlimited time is given to any person, he\/she will probably achieve the desired results and output.<\/p>\n\n
So time is clearly one of the most important assets of ours. Such a significant thing will lead to negative returns due to mismanagement or neglect. Therefore, it would be logical to choose a goal based on the principles of SMART (+<\/a>) and find the meaning of our life more quickly and in less time with self-control, which includes time management, and approach to the top of the need hierarchy pyramid.<\/p>\n\n
\n  \n  \n  Time management mistakes\ud83e\udd14\n<\/h3>\n\n
First of all, let's review some important mistakes(pitfalls) about time management.<\/p>\n\n
1- Sleep less as an option to increase time.
\n2- Prepare a long and detailed list of things to do.
\n3- Use several different tools and techniques to manage time.
\n4- Do several things at once.
\n5- Plan for all the moments and manage the seconds.
\n6- Continuous work.
\n7- Have an obsession to do all things.<\/p>\n\n
Note<\/em>: Although there are much more things you can add it to this list, these items are less considered.<\/p>\n\n
\n  \n  \n  Time management tools \ud83d\udca5\n<\/h3>\n\n
First, time management does not require any special tools. It is really possible to have the best time management method with just a pen and paper. Perhaps the most important feature of time management tools is the simplification of task management and the reduction of related concerns. For example, it is difficult to set a reminder at a specific time on plain paper.<\/p>\n\n
Personally, I am comfortable with Mr. Allen's GTD method (+<\/a>), and of course I got the idea from it and implemented it in my own style.<\/p>\n\n
There are a plenty of time-management related tools out there that can makes you confusion (watch Mr. Schwartz's The paradox of choice<\/a>), and the purpose of this post is to introduce a few tools that may be helpful for you.<\/p>\n\n
\n  \n  \n  List of preferred tools\n<\/h3>\n\n
Google Keep (+<\/a>)
\nTrello (+<\/a>)<\/p>\n\n
In Keep you can have different notes (photo, plain text, checkbox, voice and drawing) in different colors and categories. An extraordinary flexibility on which any kind of mentality can be applied. If you can work with it continuously for two weeks, you will find your style. You can start with Mr. Allen's idea. (e.g. Having an \"inbox\" of all to-dos)<\/p>\n\n
One of the great advantages of Keep is that when you are in a brainstorm (+<\/a>), you can immediately record your voice in Keep or take a picture of your current position as a note by the phone's camera. That way, your ideas will not be forgotten.<\/p>\n\n","category":["productivity","time","softskill"]},{"title":"Async\/Await in JavaScript","pubDate":"Fri, 18 Jun 2021 14:45:13 +0000","link":"https:\/\/dev.to\/rezab\/async-await-in-javascript-noe","guid":"https:\/\/dev.to\/rezab\/async-await-in-javascript-noe","description":"
Async functions are brought to JavaScript by ES8 (ES2017) and are used to facilitate the management of asynchronous operations. Async functions use Promises under their own skin.<\/p>\n\n
To use this feature to manage an asynchronous operation, we first use the async<\/code> keyword when defining a function. We always write the word async<\/code> at the beginning of the function definition:
\n<\/p>\n\n
\n
const users = async () =>{ }\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
When we use async<\/code>, we have another keyword called await<\/code>. When the await<\/code> keyword is at the beginning of a expression, our code waits for the output of that expression to be specified and then goes to the next lines. We use await as follows:
\n<\/p>\n\n
\n
const users = async () => {\n     let users = await getUsers();\n     console.log(users);\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
One thing to keep in mind is that the await<\/code> keyword should only be used within a function that uses the async<\/code> keyword at the beginning. Otherwise we get an error.<\/p>\n\n
The next point to keep in mind is that if the expression in front of the await<\/code> is not a Promise, it will automatically become a resolved Promise when it is done.<\/p>\n\n
The output of an async function is always a Promise and we can treat it like a Promise.
\n<\/p>\n\n
\n
const users = async () =>{\n   let users = await getUsers();\n   return users;\n}\n\nusers.then(console.log); \/\/list of users\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
P.S.: Async code is simpler and more readable than the Promises we had to use with chain methods.<\/p>\n\n","category":["async","await","promise","javascript"]}]}}