مُركَّز

ماهو في عالم react؟

Sat, 27 Dec 2025 00:00:00 GMT

ماهو

تم اطلاق Activity component في react 19.2 للتعامل مع اخفاء واظهار العناصر بشكل مناسب للاداء ولتقليل العمليات الغير ضرورية اثناء تصفح موقعك المبني باستخدام react وما يتبعها.

ما علاقته بتحسين الاداء؟

عند الاغلاق باستخدام useState او باستخدام الشروط عموما (if - else) يتم اعادة تصفير قيم الجزء المخفي وهذا لوحده يعتبر اداء اضافي على موارد الجهاز وسرعة الموقع واذا قمت بالاخفاء عبر css باستخدام display: none; فكانك يابو زيد ما غزيت لأن انت نعم اخفيت العنصر ولكن كامل العنصر مازال شغال بكامل عملياته في الخلفية وهذا حمل على الذاكره وعلى موارد الجهاز

ماهي فكرته؟

وهنا فكرة Activity component تظهر بقوة بحيث انه يمكنك من اخفاء العنصر بالاضافة لايقاف عملياته بشكل حرفي يعني حتى تصفير القيم لن يتم، يعني لو كان عندك input مكتوب بداخله “السلام عليكم ورحمة الله وبركاته” واغلقت الفورم او الـinput ورجعت فتحته رح تلاقي “السلام عليكم ورحمة الله وبركاته” موجودة كما هي وهنا استفدنا امرين اولا ما سببنا حمل اضافي على الموقع ثانيا حافظنا على البيانات للرجوع لها (لأن في بعض الحالات نحتاج هذا الموضوع)

شكل استخدامه

tsx

import { Activity, useState } from 'react';
import AdminSettings from './_components/AdminSettings';
const page = () => {
  const [IsOpen, setIsOpen] = useState(false);
  return (
    
      
        
      
    
  );
};
export default page;

الفرق بين middleware و proxy بعد اخر تحديث في nextjs

Tue, 16 Dec 2025 00:00:00 GMT

بكل اختصار

هو فرق تسميات لا اكثر، السبب يعود إلى ان الفريق المطور لـnextjs رأى ان اسم middleware لا يعبر عن مهمة الملف او انه اسم كبير على ما يقوم به الملف بشكل فعلي من تنفيذ بعض المهام البسيطة عند فتح الموقع مثل التحقق من بعض الشروط الحساسة بحكم ان nextjs تعتبر full stack framework بحيث تستطيع عمل back end و front end (مع انه ليس شيء صحيح الاعتماد عليه في الباك اند خاصة اذا كان موقع فيه بيانات حساسة) فتم تحويله إلى proxy لأنه يعبر عن مهمة الملف الفعلية بحيث يكون عبارة عن طبقة اثناء تنفيذ البرنامج او جزء من البرنامج.

فقط قم بتغيير اسم ملف middleware.ts إلى proxy.ts

[https://nextjs.org/docs/messages/middleware-to-proxy](https://nextjs.org/docs/messages/middleware-to-proxy)

ماهو React Design Patterns?

Sat, 01 Nov 2025 00:00:00 GMT

اهمية استخدام Design Patterns

الـDesign Patterns هي طرق أو أساليب احترافية لتنظيم وكتابة الكود في React، بحيث يكون الكود نظيف، قابل لإعادة الاستخدام، وسهل الصيانة مع نمو المشروع. لما مشروعك يبدأ يكبر، الكود بيبدأ 'يتعقد' — تلاقي نفسك تكرر منطق، تعمل تغييرات كثيرة في أماكن مختلفة، أو تضيف ميزة فتتكسر مية حاجة بعدها. هنا تأتي الـDesign Patterns كمنقذ، بتعطيك حلول ذكية ومنظّمة للمشاكل هذه؛ فالـDesign Patterns ليست مجرد قواعد أو طريقة كتابة، هي خطة واضحة تساعدك تتعامل مع المشاكل اللي تواجهك يوميًا في تطوير خلينا من الكلام النظري وندخل في الامثلة العملية لأن الدزاين باترنس اما انك تتعلمها بشكل عملي او انك رح تواجه صعوبة في استخدامها فيما بعد او حتى معرفة اهميتها…..

Compound Components Pattern

قبل ما اعرف عن هذا النمط رح اقلك ان هذا النمط هو اللي جذبني لموضوع الـDesign Patterns اما عن تعريفه فهو نمط فكرته تكمن في امكانية استخدام عدة مكونات من من مكون واحد بمعنى لو عندك Card.tsx انت يمكن في مكان ما في الموقع تريد عرض كامل الـCard وفي مكان آخر تريد عرض مثلا الـCard بدون صورة وفي مكان آخر مع فيديو فمن غير الاحترافي انك تمرر prop لكل ميزة وبنفس الوقت من اهم قواعد البرمجة عدم تكرار الكود اللي تسويه فما رح يكون امر احترافي انك تسوي component منفصل لكل ميزة فهنا تأتي جمايلة Compound Components Pattern (وطبعا المثال السابق هو احد استخداماته لأن يمكن استخدامه بفكرة رح اشير لها في الاسفل بعد ما اعرضلك كود عن هذا الـPattern الجميل)

tsx

 // app/_components/Card.tsx
export default function Card({ children }: { children: React.ReactNode }) {
  return {children};
}
Card.Title = function Title() {
  return (
    
      Card Title
    
  );
};
Card.Content = function Content({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
};
Card.Action = function Action() {
  return (
    
      
    
  );
};
Card.Footer = function Footer() {
  return (
    
      Card footer
    
  );
};

النتيجة او آلية الاستخدام...

tsx

 // app/page.tsx

  
  123
  
  
;

اما الفكرة اللي قلت اني رح اشير لها بخصوص هذا النمط هي استخدام هذا النمط لعرض مثلا رسائل الركويستات او حتى التنبيهات اللي تظهر بشكل عائم امام اليوزر في حال ما حبيت تستخدم مكاتب جاهزة

tsx

 // app/_Articles/_components/ArticlesState.tsx
import React from 'react';
const ArticlesState = ({ children }: { children: React.ReactNode }) => {
  return {children};
};
ArticlesState.loading = function Loading() {
  return (
    
       جار تحميل المقالات
    
  );
};
ArticlesState.error = function Error() {
  return (
    
      حدث خطأ في تحميل المقالات
    
  );
};
ArticlesState.empty = function empty() {
  return (
    
      لا يوجد مقالات بعد...
    
  );
};
export default ArticlesState;

احد اشكال الاستدعاء

tsx

 // app/page.tsx
const Articles = dynamic(() => import('./_Articles/Articles'), {
  loading: () => (
    
      
    
  ),
});

Container-Presentational Pattern

وهنا جينا لعنوان رنان في عالم البرمجة وهو الـclean code او الكود النظيف لأن هذا النمط او الـPattern رح يساعدك في هذا الامر؛ الـContainer Presentational Pattern هو نمط يقلك تعلم انك تفصل المنطق البرمجي عن اجزاء العرض حتى يكون الكود سهل الفهم والتتبع والتصحيح او التعديل بمعنى تخيل مثلا عندك صفحة تحتوي على ارسال واستقبال وتعديل وحذف بيانات (جميع العمليات التي تندرج تحت مفهوم CRUD) بالاضافة للكود اللي يعرض نتيجة هذه العمليات... هنا هل تشوف ان الكود رح يكون مقبول شكليا او على الاقل سهل التعامل معاه؟ خاصة عند محاولة اضافة او تغيير ميزة هنا رح تشوف المعنى الحرفي لمصطلح الـspaghetti code وهنا يأتي دور الـContainer Presentational Pattern بحيث ينبهك إلى ان تقوم بفصل كود او واجهة العرض عن المنطق البرمجي

المنطق البرمجي

tsx

 // app/_Articles/Articles.tsx
'use client';
import axios from 'axios';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import PresentationalArticles from './PresentationalArticles';
import { ArticlesResponse } from '@/types/Articles';
export default function Articles({
  initialArticles,
  tag,
}: {
  initialArticles: ArticlesResponse;
  tag?: string;
}) {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
  } = useInfiniteQuery({
    queryKey: ['articles', tag],
    queryFn: ({ pageParam = 1 }) =>
      axios
        .get(
          !tag
            ? `/api/articles?page=${pageParam}&limit=6`
            : `/api/tags/${tag}?page=${pageParam}&limit=6`
        )
        .then((res) => res.data as ArticlesResponse),
    getNextPageParam: (lastPage) =>
      lastPage.pagination?.hasMore ? lastPage.pagination.page + 1 : undefined,
    initialData: {
      pages: [initialArticles!],
      pageParams: [1],
    },
    initialPageParam: 1,
  });
  const { ref, inView } = useInView({
    threshold: 0,
    rootMargin: '1000px',
  });
  useEffect(() => {
    if (inView && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
  const articles =
    data?.pages
      .flatMap((page) => page.articles)
      .filter((article) => article?._id && article?.slug)
      .filter(
        (article, index, self) =>
          index === self.findIndex((a) => a?._id === article?._id)
      ) || [];
  return (
    
  );
}

منطق عرض نتائج محتوى الكود

tsx

 // app/_Articles/PresentationalArticles.tsx
import { PresentationalArticlesProps } from '@/types/Articles';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import React from 'react';
import ArticlesState from './_components/ArticlesState';
const ArticleImage = dynamic(() => import('./_components/ArticleImage'), {
  ssr: false,
  loading: () => (
    
  ),
});
const PresentationalArticles: React.FC = ({
  isError,
  isLoading,
  articles,
  hasNextPage,
  inViewRef,
}) => {
  return (
    <>
      {isLoading && (
        
          
        
      )}
      {isError && (
        
          
        
      )}
      {articles.length === 0 && !isLoading && (
        
          
        
      )}
      
        {articles.map((article, i: number) => (
          
            
              
            
            
              
                {new Date(article.createdAt).toLocaleDateString('en-GB')}
              
              
                {article.tag}
              
            
            
              
                {article.title}
              
              
                {article.description}
              
            
          
        ))}
      
      {hasNextPage && (
        
          {/* {isFetchingNextPage ? (
            
              
              جاري تحميل المزيد...
            
          ) : (
            اسحب لأسفل لتحميل المزيد
          )} */}
        
      )}
    
  );
};
export default PresentationalArticles;

Custom Hooks Pattern

هنا لا تخاف ما رح اتكلم كثير بس رح اشوفك كيف ان ممكن تحويل منطق برمجي على شكل hook او component منفصل امر ممتع.....

الـhook ومنطقها البرمجي

tsx

// app/_Articles/_components/initialArticlesHook.tsx
import { ArticlesResponse } from '@/types/Articles';
import ArticlesState from './ArticlesState';
const initialArticlesHook = async ({ tag }: { tag?: string } = {}) => {
  const res = await fetch(
    !tag
      ? `${process.env.url}/api/articles?page=1&limit=6`
      : `${process.env.url}/api/tags/${tag}?page=1&limit=6`,
    {
      next: { revalidate: !tag ? 1000 * 60 * 5 : 0 },
    }
  );
  if (!res.ok) {
    
      
    ;
  }
  const initialArticles: ArticlesResponse = await res.json();
  if (initialArticles.articles?.length === 0) {
    
      
    ;
  }
  return { initialArticles };
};
export default initialArticlesHook;

الاستفادة

tsx

 // app/page.tsx
import React from 'react';
import ArticlesState from './_Articles/_components/ArticlesState';
import dynamic from 'next/dynamic';
import initialArticlesHook from './_Articles/_components/initialArticlesHook';
const Articles = dynamic(() => import('./_Articles/Articles'), {
  loading: () => (
    
      
    
  ),
});
const page = async () => {
  const { initialArticles } = await initialArticlesHook();
  return (
    
      مُركَّز
      
        مُركَّز منصة اجمع فيها مقالاتي التي تكون عبارة عن ملخص لمعلومة برمجية
        بدون كثرة مقدمات او تمطيط للكلام....
      
      
    
  );
};
export default page;

وبهذا الشكل اصبح بامكانك الاستفادة من هذا المنطق البرمجي في اي مكان في الموقع وبدون تكرار وتكون طبقت مصطلح don"t repeat yourself في عالم البرمجة

Higher-Order Components (HOCs)

اذا عندك خواص عامة مشتركة بين عدة مكونات او تريد تنفيذ شرط معين على عدة مكونات فهذا النمط يخليك تحدد هذا المنطق او الخواص من مكان محدد ثم كل عنصر جديد يمر بداخله يحصل على هذه الميزات وهو شبيه بنمط الـCustom Hooks Pattern إلى حد ما، ولكن ركز معي لأني رح اضيف شكلين لطريقة استخدامه والشكل الثاني مهم في عالم الحماية من ناحية الفرونت اند

اولا- اعطاء خواص معينة لعدة عناصر (وهنا كما قلت يشبه موضوع الـCustom Hooks Pattern إلى حد ما)

tsx

import React from 'react';
export default function WithStyles(Component: React.ComponentType) {
  return (props: {[key: string]: any }) => {
    const style = { padding: 10, margin: 10 };
    return ;
};
}
 // الاستخدام
import { ButtonHTMLAttributes } from 'react';
import WithStyles from './WithStyles';
export default function Button(props: {
  props: ButtonHTMLAttributes;
}) {
  return ;
}
export const StyledButton = WithStyles(Button);

ثانيا- استخدامه في عمليات التحقق من تسجيل دخول المستخدم على سبيل المثال (Authorization/Authentication)، الفكرة انه قبل ما تعرض الـComponent يتحقق من شرط معين (مثلاً حالة تسجيل الدخول أو صلاحيات المستخدم)

tsx

'use client'
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ComponentType } from 'react';
function withAuth(WrappedComponent: ComponentType) {
  const ComponentWithAuth = (props: P) => {
    const router = useRouter();
    const [isAuthorized, setIsAuthorized] = useState(null);
    useEffect(() => {
      const token = localStorage.getItem('token');
      if (token) setIsAuthorized(true);
},[router]);
    if (isAuthorized === null) return null;
    return ;
};
  return ComponentWithAuth;
}

لن يتم عرض العناصر المررة إلى 'withAuth' في حال كان المستخدم لم يسجل الدخول بعد

tsx

const DeleteItem = () => 🗑️ حذف العنصر;
const ProtectedDeleteItem = withAuth(DeleteItem);
export default function Page() {
  return ;
}

اعلم انه في nextjs وما شابه يمكن منع المستخد من الوصول لبعض الصفحات عبر ملف middleware.ts ولكن تذكر انه للصفحات وليس للمكونات اما الـHOCs هذا النمط يساعدك على التحكم في امكانية الوصول للمكونات وبدون وضع شروط لكل مكون او تكرار نفس الكود (فعاليته تظهر في المشاريع الكبيرة لأنه يختصر امور كثيرة ويقلل الوقت وهذا الهدف من استخدام كل او جل الـPatterns) (تنويه: يتم في كل مرة إنشاء وإرجاع عنصر جديد أو منفصل عن الأصل، بمعنى انه بإمكانك استخدام أكثر من HOC واحد مع نفس المكوّن، لأن التأثير يُطبَّق على النسخة الناتجة من التغليف، وليس على المكوّن الأصلي نفسه)

tsx

const A = withLogger(Button);
const B = withAuth(Button);

Portal Pattern

هو نمط وخاصية بنفس الوقت وفكرة الـPortal Pattern هي وضع بعض العناصر خارج ترتيبها الطبيعي في الـDOM مثلا لو عندك اي شيء يعرض على الشاشة فبطبيعة الحال هو رح يكون داخل الـroot فسيتم تطبيق عليه جميع تأثيرات العنصر الاساسي اللي هو فيه (مثل الـoverflow أو z-index أو position) ولكن احيانا تريد عرض مثلا قائمة منسدلة او نافذة عائمة فتحتاج اولا انها تكون فوق جميع العناصر ثانيا انها ما تتأثر بمكان العنصر الاساسي اللي يحتويه وبنفس الوقت تحتاج ان تأخذ بيانات من هذا العنصر الاساسي كـprops، فهنا يكمن دور هذا النمط حيث يمكنك من انشاء عنصر في اي مكان في الـDOM اين ما كان موضعه الاساسي عبر خاصية createPortal من react-dom ثم تحديد المكان الذي تريد عرضه فيه مع الحفاظ على الاتصال من ناحية المنطق البرمجي مع العنصر الاساسي او كما يطلق عليه العنصر الاب (parent element)

tsx

import React from 'react';
import { createPortal } from 'react-dom';
interface ModalProps {
  isOpen: boolean;
  handleClose: () => void;
  children: React.ReactNode;
}
export default function Modal({ isOpen, handleClose, children }: ModalProps) {
  if (isOpen === false) return null;
  return createPortal(
    
      {children}
      
        
      
    ,
    document.body
  );
}

الان اصبح يعرض خارج وفوق الـroot element ومع هذا ما زال يملك صلاحية الوصول للبيانات المشاركة من قبل العنصر الاب والتعديل عليها وارجاعها للاب وكأنه عنصر داخل شجرة العنصر الاب

Variant Props Pattern

احيانا يكون عندك عنصر محدد ومستخدم في عدة امكان في الموقع ولكن له انماط متعددة او تريد انشاء ثييم موحد في الموقع فنمط Variant Props Pattern يتيح لك هذا الامر من خلال اعداد تنسيقات مسبقة ويمكن اختيار تنسيق محدد في كل مرة يتم استدعاء هذا العنصر والميزة في هذا الامر غير انها تساعدك على مشاركة عدة خواص للعنصر او توحيد ثييم الموقع ايضا يسهل التعديل بدل ما تعدل 12 عنصر في 10 ملفات ممكن تعدل كل هذه العناصر من ملف واحد وان تعددت تنسيقاتها

tsx

 // app/_components/Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
  shadow?: 'one' | 'two';
  style?: React.CSSProperties;
  children: React.ReactNode;
}
const Button = ({
  variant = 'primary',
  shadow = 'one',
  style,
  children,
}: ButtonProps) => {
  return (
    
  );
};
const styles = {
  variants: {
    primary: { backgroundColor: 'blue', color: 'white' },
    secondary: { backgroundColor: '#fff', color: '#000' },
    danger: { backgroundColor: '#f00', color: '#fff' },
    warning: { backgroundColor: 'yellow', color: '#000' },
    success: { backgroundColor: 'green', color: '#fff' },
  },
  boxShadow: {
    one: { boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)' },
  },
};
export default Button;

النتيجة

tsx

المصادر

1- [Shadow Coding بالعربي](https://youtu.be/B09-J84p0ck?si=e53Ju2MEiPt6PUwV) 2- [github.com/Mostafashadow1](https://github.com/Mostafashadow1/Mastering-React-Design-Patterns/tree/master/src/react-desgin-patterns) 3- [انا 🙃](https://yazn-108.github.io/)

حماية الـarray في JavaScript

Sat, 27 Sep 2025 00:00:00 GMT

مقدمة

بعد اخر تحديثات صدرت في ECMAScript 2023 (ES2023) ظهرت methods لحل مشكلة مزعجة موجودة في javascript بشكل عام وهي مشكلة تغير ترتيب قيم الـarray الاصلية في حال قمت باجراء اي تعديل على الـarray في اي جزء من كود الموقع بدل اخذ نسخة منها والتعديل عليها دون التعديل على الـarray الاصلية.

مثلا لو كتبت

javascript

const numbers = [3,1, 2];
numbers.sort();
console.log(numbers); // [1, 2, 3]

النتيجة رح تكون ان الـarray الاصلية تغير ترتيب قيمها وهنا المشكلة وتظهر بشكل اكبر في react لأن احيانا يكون معتمد على نفس الـarray عدة اجزاء من الموقع فمن الغير المنطقي التعديل على الـarray في مكان في الموقع ثم يصل تأثير هذا التعديل لبقية اجزاء الموقع وهنا ظهر الحل وهو ان

الـsort اصبح بديلها .toSorted()

javascript

const numbers = [3, 1, 2];
const sortedArray = numbers.toSorted();
console.log(sortedArray); // [1, 2, 3]
console.log(numbers); // [3, 1, 2] -> لم تتغير

الـreverse اصبح بديلها .toReversed()

javascript

const letters = ['a', 'b', 'c'];
const reversedLetters = letters.toReversed();
console.log(reversedLetters); // ['c', 'b', 'a']
console.log(letters); // ['a', 'b', 'c'] -> لم تتغير

الـsplice اصبح بديلها .toSpliced()

javascript

const skills = ['javascript', 'typescript', 'nextjs'];
const removeSkill = skills.toSpliced(0, 1);
console.log(removeSkill); // ["typescript", "nextjs"]
console.log(skills); // ["javascript", "typescript", "nextjs"] -> لم تتغير

.with()

javascript

const numbers = [3, 1, 2];
const updatedArray = numbers.with(0, 10);
console.log(updatedArray); // [10, 1, 2]
console.log(numbers);      // [3, 1, 2] -> لم تتغير

قد يقول قائل

الحل بسيط وهو ان نقوم بعمل نسخة بشكل يدوي بهذا الشكل

javascript

const arr = [3, 1, 2];

const newArr = [...arr]; // النسخة اليدوية
newArr.sort();
console.log(newArr); // [1, 2, 3]

console.log(arr); // [3, 1, 2]

المصدر

[https://allthingssmitty.com/](https://allthingssmitty.com/2025/09/08/finally-safe-array-methods-in-javascript/)

الـhover والـvariables في tailwind بعد اخر تحديث

Thu, 11 Sep 2025 00:00:00 GMT

مستجدات الـhover

كما ذكرت من ضمن هذه التغييرات هي ازالة تأثير الـhover من الشاشات الصغيرة او المعتمدة على اللمس وسبب الازالة يعود لوجهة نظر القائمين على الـframework ان هذا التأثير يسبب تجربة سيئة للمستخدمين بسبب ان الـhover في الهواتف يبقى موجود حتى تضغط في مكان آخر رغم ان وجهة النظر هذه قد لا تكون صحيحة 100% لأن تأثير الـhover ليس متوقف على تغيير لون او ما شابه وانما يستخدم في تأثيرات متنوعة مثل عرض بعض القوائم بشكل بسيط دون الحاجة لاستخدام javascript مثلا.

ولحل هذا الامر يتم اضافة هذا الجزء في ملف الـinput.css/globals.css

css

@custom-variant hover (&:hover);

تغييرات الـvariables

تم اضافة @theme المسؤولة عن ادارة المتغيرات بعد ما تم الاستغناء عن ملف tailwind.config.js ولكن المختلف فيها انها تقوم بتخزين قيمة المتغيرات عند عملية الـbuild مما يمنعك من تغيير قيمة المتغيرات فيما بعد من خلال ملف الـcss (مثلا لو حاولت تعمل dark mode أو تغييرات ديناميكية، ما رح تنعكس).

لحل هذا الامر يتم الاستعانة بقيمة inline التي تقوم بربط قيم @theme مع متغيرات CSS Variables بشكل مباشر، وبالتالي تقدر تغير القيم ديناميكيًا حتى بعد الـbuild.

css

:root {
  --primary-color: white;
}
.dark {
  --primary-color: black;
}
@theme inline {
  --color-primary: var(--primary-color);
}

تجربة نتيجة الحلول المذكورة

معرض اعمالي ([https: //yazn-108.github.io](https://yazn-108.github.io)) في اخر تحديث له قائم على هذا الامر من ناحية الـhover والـdark-mode

اظهار بيانات محددة عند مشاركة رابط الموقع

Tue, 14 May 2024 00:00:00 GMT

ماهي نتيجة استخدام meta tags؟

تستخدم لعرض بيانات عن محتويات الرابط عند مشاركته كما في الصورة وهذا الامر يرفع نسبة الثقة عند المستخدمين ويظهر موقعك بشكل احترافي.

ماهو open graph؟

الـOpen Graph هو بروتوكول (Open Graph Protocol) أنشأته شركة فيسبوك سنة 2010، والغرض منه هو جعل أي رابط على الانترنت يتم مشاركة مع بعض التفاصيل عن محتويات الرابط يتم تحديدها من قبل صاحب الصفحة التابع لها الرابط.

html


Front End Web Developer

كيف يمكن توليدها بشكل تلقائي؟

من خلال الدخول إلى موقع [www.opengraph.xyz](https://www.opengraph.xyz) تقوم بادخل رابط موقعك وهو يعطيك الاكواد الاساسية مع اضافة البيانات التي استطاع التعرف عليها ولكن هذا لا يمنع من انك تحتاج للتعديل عليها بشكل يدوي.

ما دور Meta Tags وOpen Graph في تحسين ظهور صفحات الويب على محركات البحث ومنصات التواصل الاجتماعي؟

فعليا الـOpen Graph ليس له تدخل فعلي في ارشفة موقعك في نتائج بحث Google على سبيل المثال ولكن كثرة النقر على رابط موقعك بسبب شكلة الاحترافي يساهم في زيادة موثوقيته عند محركات بحث Google وهنا يأتي دور الـMeta Tags التي سوف اتكلم عنها بشكل بسيط لأن سيتم الحديث عنها في مقالة منفصلة إن شاء الله؛ الـMeta Tags تساعد محركات البحث (مثل Google و Bing) على فهم محتوى موقعك وبالتالي تعطيه ترتيب في نتائج البحث عندما يقوم احد المستخدمين بالبحث عن شيء موقعك له ارتباط فيه.

الـDestructuring في JavaScript

Wed, 06 Mar 2024 00:00:00 GMT

ما الهدف من استخدامها؟

الـDestructuring في JavaScript فكرته بسيطة جدًا: يخليك تختصر وتوضح الكود بدل ما تكتب أسطر طويلة عشان توصل لقيمة من Array أو Object، يعني بدل ما تعيد وتكرر .name و .age كل شوي، تقدر تستخرج القيم مرة واحدة وتحطها في متغيرات. الميزة الحلوة إنه مو بس يختصر الكود، كمان يخليك تتعامل مع بيانات متداخلة بسهولة، وتقدر تحط قيم افتراضية لها إذا ما تم العثور على بعض القيم لسبب ما، وهذا مهم خصوصًا لو البيانات جاية من API أو مصدر خارجي، عشان ما يحصل أخطاء غير متوقعة. بالمختصر: الكود يصير أنظف، أسهل، وآمن.

تأثير Destructuring على الأداء

من ناحية تأثيره على الاداء فلا يوجد اي تأثير بين

الطريقة المعتادة:

javascript

const numbers = [1, 2, 3];
const first = numbers[0];

const person = {
  name: 'yazn',
  age: 20
};
const name = person.name;

وطريقة الـDestructuring:

javascript

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const person = {
  name: 'yazn',
  age: 20
};
const { name = 'الاسم الافتراضي', age } = person;
console.log(name); // Yazan
console.log(age);  // 22

إلا في حالات محدودة جدًا يكون التأثير شبه معدوم، ويحصل هذا عند استخدام الـDestructuring بكثرة داخل نفس الـscope، وهذا يرجع لعملية التفكيك (destructuring) التي تتطلب معالجة إضافية من قبل محرك JavaScript في الخلفية. ومع هذا، مثل ماذكرت، هذا التأثير نادراً ما يكون ملحوظ ولا يؤثر على الأداء العملي للتطبيقات العادية، ولكن من باب الإشارة إلى أن هناك تكلفة صغيرة جدًا على المستوى الداخلي لمحرك اللغة عند الاستخدام المكثف للغاية. (وتقدر تعتبر هذه الجزئية غير موجودة 🙃)