#frontend_tips
———————

تركاية فرونت ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

CSS Container Style Queries 🔻

- Using the experimental CSS feature @container style(), showcasing dynamic styling for different product states (new and popular).

———

⚡️ Tutorial Video: https://youtu.be/bk2ULuz1WsI

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


Maintaining Square Proportions 🔻

- Using CSS aspect-ratio to consistently create a perfect square while preserving its aspect ratio.

———

⚡️ Tutorial Video: https://youtu.be/lvLtSR20F0Y

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


CSS Ribbon Shapes Collection 🔻

- A ready-to-use list of CSS ribbons collection, customizable with CSS variables, can be used in multiple scenarios like badges for promotions, decorative cards, and more.

———

⚡️ Tutorial Videos: https://youtu.be/nwbbjSVJct0

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


CSS Margin with RTL Elements 🔻

- Using margin-inline-end to align a picture to either the left or the right depending on the browser direction (right to left, or left to right).

———

⚡️ Tutorial Video: https://youtu.be/mUSnmJ77TPQ

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


Accordion with Custom Styled Markers 🔻

- Using the CSS property list-style-type to style <details> disclosure widgets with custom emoji markers.

———

⚡️ Tutorial Video: https://youtu.be/ZClZFPrKGpE

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


Linting Rules For Sorting CSS Properties 🔻

- Using stylelint-order Stylelint Plugin and vscode-style VSCode Extension to organize CSS properties, enhancing readability and ensuring a consistent coding style across your projects.

———

⚡️ Tutorial Video: https://youtu.be/fyb3miAOo9M

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


CSS Custom Scrollbar Maker Tool 🔻

———

⚡️ Tutorial Video: https://youtu.be/ipuetdB04uw

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


Regrouping Link States 🔻

Using :is() pseudo-class to regroup the link :hover and :focus states instead of chaining them for increased readability.

———

⚡️ Tutorial Video: https://youtu.be/EvQQ__Qw8qM

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


CSS Scroll Padding Top 🔻

- Using the CSS scroll-padding-top to add space at the top so nothing gets hidden when you scroll.

———

⚡️ Tutorial Video: https://youtu.be/gzYEg9ax2UA

هل الـ Bundle Size بيأثر على أداء الموقع؟ 🚀
.
.
لو اشتغلت قبل كده على أي مشروع Front-End كبير، أكيد عدى عليك مصطلح "Bundle Size" سواء في PR review، أو وأنت بتعمل debugging، أو وأنت بتعمل optimization للـ Core Web Vitals… السؤال هنا:

⚠️ هل فعلًا حجم الـ Bundle بيفرق في الأداء؟ ولا مجرد رقم وخلاص؟

تعال ندردش شوية عن الـ Bundle Size...

———

🎯 يعني إيه Bundle Size؟

ببساطة، لما بتكتب كود JavaScript (أو TypeScript أو JSX…)، الكود ده بيتحول لملف واحد (أو أكثر) اسمه Bundle. الملف ده بيحتوي كل حاجة:

- الكود بتاعك
- المكتبات اللي مستخدمها (زي lodash أو moment أو axios)
- وأحيانًا حتى CSS modules أو images/inline SVGs

الـ Bundle Size هو ببساطة حجم الملف ده اللي الـ browser بيحمله عشان يشغل الموقع.

———

🤔 طب إزاي ده بيأثر على الأداء؟

هقولك بـ 5 نقاط بس، كل نقطة منهم كفيلة إنها تبوظ تجربة المستخدم:

1. وقت التحميل (Load Time)

كل ما الـ Bundle بقى أكبر، كل ما المتصفح أخد وقت أطول في تحميله من السيرفر.
يعني المستخدم هيقعد مستني، وده بيزود الـ Time To Interactive (TTI) و First Contentful Paint (FCP).


2. الـ Blocking

الـ JavaScript ملفاتها Render-Blocking بطبعها.
يعني الصفحة مش هتعرف تكمل تحميل غير لما تخلص تحميل وتنفيذ الـ JavaScript.


3. الـ Parsing والـ Execution

المتصفح مش بس بيحمل الملف... ده كمان لازم يفكه ويفهمه ويشغّله.
وده بياخد وقت ومعالجة (CPU)، وخصوصًا على الموبايلات الضعيفة.


4. تأثير مباشر على SEO و Core Web Vitals

جوجل بتقيس سرعة الموقع، ولو الـ bundle تقيل = الموقع بطيء = ترتيبك في البحث بيقل.


5. الـ Data Cost

لو فيه ناس بتزور موقعك من موبايلات أو باقات إنترنت محدودة، فكل ميجا زيادة في الـ Bundle بتكلفهم أكتر وبتزود احتمالية إنهم يسيبوا الموقع قبل ما يحمّل.

———

📌 طيب نحل الموضوع ده إزاي؟

فيه أكثر من طريقة...

1. الـ Code Splitting

بلاش تحمل كل الكود مرة واحدة، خليه على حسب الصفحة أو الـ component.
استخدم React.lazy و Suspense أو dynamic imports في Next.js.


2. الـ Tree Shaking

لو بتستخدم مكتبة زي lodash، بلاش تستورد كل حاجة:

import _ from 'lodash' ❌
import debounce from 'lodash/debounce' ✅


3. حذف الكود غير المستخدم (Unused Code)

شوف إيه اللي مش مستخدم في الكود وشيله.
استخدم أدوات زي PurgeCSS أو Unused Export Detection في Webpack أو Vite.


4. استخدم مكتبات خفيفة (Lighter Libraries)

مثلًا: بلاش تستخدم moment.js واستخدم date-fns أو dayjs.
عايز تعمل HTTP requests؟ بلاش تستخدم axios لو مش محتاج كل اللي فيه، الـ fetch كفاية.


5. الـ Compress & Minify

سواء باستخدام Terser أو Brotli أو Gzip… كل ما تضغط الكود أكتر، كل ما الـ bundle حجمه بيقل.

———

فيه Tools كتير تقدر تديك رؤية واضحة عن الـ Bundle:

- Webpack Bundle Analyzer
- source-map-explorer
- Bundlephobia

———

الـ Bundle Size بيفرق جدًا، وأي optimization في حجمه ممكن يعمل فرق ضخم في:

- سرعة تحميل الموقع
- تجربة المستخدم
- ترتيبك في SEO
- أداء الموبايلات الضعيفة

———

وفقكم الله لكل خير 🌿

———

#frontend@the_developer_guide