الـ Critical Rendering Path 🔻
.
.
ببساطة الـ Critical Rendering Path هو "الطريق اللي بيمشي فيه المتصفح عشان يقدر يحول الكود بتاعنا (HTML, CSS, JavaScript) لشكل مرئي قدام المستخدم."

———

📌 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_webdeveloper-webdevelopment-frontenddeveloper-activity-7265409932580048899-9Xcc

📌 Qabilah

https://qabilah.com/posts/6eM5rRckb9c

📌 Facebook

https://www.facebook.com/share/p/1Nxk9SFAXo

———

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

Awesome Shadcn UI

With 13 Categories and Over 200 Resources, It's Easy To Access Shadcn's Most Valuable Resources.

https://shadcn.batchtool.com

أفـكـار مشـاريـع 🔻
.
.
لو بتدور على أفكار مشاريع جديدة تطور بها مستواك في البرمجة، سواء كنت مبتدئ أو قطعت شوط كويس في المجال، المقال ده فيه 200 فكرة مشروع مختلفة تقدر تطبق المشاريع المناسبة لمستواك وتضيفهم في الـ CV والـ Portfolio...

———

📌 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_projects-softwaredevelopment-softwareengineering-activity-7265747860493664256-7Adp

📌 Qabilah

https://qabilah.com/posts/52wkG-3FLX0

———

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

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

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

———

Access Extended DOM History in Console 🔻

Using $0, $1, $2 to navigate through DOM elements with extended history in Chrome DevTools Console.

———

📍 Access nodes in the Console
https://developer.chrome.com/docs/devtools/dom?hl=en#console

———

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

Discover Open Source Alternatives to Popular Software 🔥

A curated collection of the best open source alternatives to everyday SaaS products. Save money with reliable tools hand-picked for you.

https://openalternative.co

React useCallback() — A complete guide

Prevent unnecessary re-renders with React useCallback(). Learn the ins and outs of this powerful Hook and when and how to use it effectively.

https://hygraph.com/blog/react-usecallback-a-complete-guide

مجموعة مقالات رايقة 🔻
.
.

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

———

Best Practices for Writing Clean TypeScript Code 🚀
https://dev.to/alisamir/best-practices-for-writing-clean-typescript-code-57hf

Understanding HTTP Methods with Simple Examples 🔻
https://dev.to/alisamir/understanding-http-methods-with-simple-examples-1o2

Understanding Shadow DOM: The Secret of Web Component Encapsulation 💯
https://dev.to/alisamir/understanding-shadow-dom-the-secret-of-web-component-encapsulation-1lng

Understanding Event Sourcing: A Detailed Guide 🔻
https://dev.to/alisamir/understanding-event-sourcing-a-detailed-guide-4cjp

Mastering package.json: A Comprehensive Guide 🚀
https://dev.to/alisamir/mastering-packagejson-a-comprehensive-guide-2a0l

API vs SDK: Understanding Their Distinct Roles in Software Development
https://dev.to/alisamir/api-vs-sdk-understanding-their-distinct-roles-in-software-development-416h

Composition vs Inheritance in React 🔻
https://dev.to/alisamir/composition-vs-inheritance-in-react-2pho

Proven Tips to Optimize Performance in Your Next.js App ⚡️
https://dev.to/alisamir/proven-tips-to-optimize-performance-in-your-nextjs-app-lpc

Throttling & Debouncing in JavaScript: A Beginner's Guide 💯
https://dev.to/alisamir/throttling-debouncing-in-javascript-a-beginners-guide-3j7n

Building a Clean and Scalable Frontend Architecture 💯
https://dev.to/alisamir/building-a-clean-and-scalable-frontend-architecture-1icc

Unleashing the Power of WebAssembly (WASM): The Future of Web Development ⚡️
https://medium.com/@dev.alisamir/unleashing-the-power-of-webassembly-wasm-the-future-of-web-development-5c095b491d02

20 Must-Have VS Code Extensions for 2024 🔥
https://medium.com/@dev.alisamir/20-must-have-vs-code-extensions-for-2024-7ac4de4498c4

React useCallback() — A complete guide 💯
https://hygraph.com/blog/react-usecallback-a-complete-guide

12 Must-Know Libraries to Supercharge Your Frontend Development 💯
https://blog.stackademic.com/12-must-know-libraries-to-supercharge-your-frontend-development-071e01f3da3b

Top GitHub Repositories To Learn Modern React Development 🚀
https://livecycle.io/blogs/top-react-github-projects

11 Data Structures Every Developer Should Know 🔻
https://blog.amigoscode.com/p/11-data-structures-every-developer

An Interactive Guide to Flexbox 🚀
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox

Variable Naming Best Practices in JavaScript 🔻
https://javascript.plainenglish.io/variable-naming-best-practices-in-javascript-94af115f42cd

React Mindset: How New React Developers Should Think 💯
https://dev.to/ymir/react-mindset-how-new-react-developers-should-think-2cap

Best Practices for Storing Access Tokens in the Browser ✅
https://curity.medium.com/best-practices-for-storing-access-tokens-in-the-browser-6b3d515d9814

Microservices Best Practices 🔻
https://blog.amigoscode.com/p/mircroservices-best-practices

The Guide to New Hooks in React 19 ⚡️
https://www.telerik.com/blogs/guide-new-hooks-react-19

30 Ways to Improve Website Performance with CSS ⚡️
https://blog.openreplay.com/30-ways-to-improve-website-performance-with-css

دردشة سريعة عن الـ Semantic Versioning 🔻
.
.
تخيّل أنك شغال على مشروع، وفجأة قررت تعمل تحديث لمكتبة بتستخدمها...كل حاجة كانت شغالة تمام، لكن بمجرد ما عملت التحديث، المشروع كله ضرب وحلف ما يشتغل.

علشان كده لازم تكون فاهم الـ Semantic Versioning كويس، وهي دي اللي بتخلّيك تفهم التغييرات اللي حصلت في أي إصدار جديد قبل ما تعمل التحديث والدنيا تبوظ منك.

تعال نفهم الموضوع ببساطة...

———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_softwaredeveloper-softwaredevelopment-devabrguide-activity-7267198467398082560-7vUf

📍 Qabilah

https://qabilah.com/posts/yhxnONdaIRY

بفضل الله وعونه، تم إضافة 15 تدوينة جديدة 🔻

- إيـه هـو الـ CSRF؟
- الـ Critical Rendering Path
- مفهوم الـ Containerization
- تعال نعرف يعني إيه Browser Compatibility
- الـ API Gateway
- تعال نفهم يعني إيه Cross-Site Scripting (XSS)
- تعرف إيه عن الـ Web Vitals؟
- دردشة خفيفة عن الـ Rate Limiting
- يعني إيه Micro Frontends؟
- تعال ندردش شوية عن الـ Load Balancing
- مفهوم الـ Infrastructure as Code
- تعال ندردش شوية عن الـ HTTP Caching
- الـ DNS Prefetching
- دردشة سريعة عن الـ Semantic Versioning
- الـ Component-Based Architecture

https://ali-samir-blog.vercel.app

———

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

الفرق بين Containerization و Virtualization 🔻
.
.
إزاي السيرفرات بتشغل أكتر من تطبيق أو نظام تشغيل في نفس الوقت؟

علشان نجاوب على السؤال ده محتاجين نعرف مصطلحين مهمين في عالم السوفتوير [ Containerization و Virtualization ] ... الاتنين بيعملوا نفس المهمة تقريبًا: تشغيل أكتر من حاجة على نفس الجهاز

تعال نوضح الفرق بينهم وامتى تختار كل واحد...

———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_softwaredeveloper-softwaredevelopment-devabrguide-activity-7267550659971825666-RzAc

📍 Qabilah

https://qabilah.com/posts/EpcVBy7vkQE