Forwarded from من فكرة إلى تطبيق
🚨الآن يمكنك كتابة “if” داخل CSS بدون JavaScript!
نعم، ما تقرأه صحيح 😳
لم تعد CSS مجرد تنسيقات…
بل أصبحت لغة تمتلك منطقاً خاصاً بها.
كم مرة…
* حاولت عمل animation لـ
* كتبت
* أو استخدمت JavaScript فقط لتغيير لون بناءً على شرط؟
كل هذا… انتهى.
🧠 يمكنك الآن استخدام if
بدلاً من كتابة Classes متعددة أو استخدام JavaScript…
يمكنك اتخاذ القرار مباشرة داخل الخاصية!
بدل تغيير التصميم… غيّر “القرار” داخل التصميم نفسه.
لتكون النتيجة: كود أقل + منطق أوضح + مكونات ذكية.
📏 التعامل مع الحجم غير المعروف calc-size
سابقاً ❌ لا يمكنك عمل animation لـ
الآن؟ يمكنك ذلك بكل بساطة:
✨ النتيجة :Animation حقيقي وناعم بدون أي hacks
👥 .عناصر “واعية” sibling-index & sibling-count
العناصر الآن تعرف: ترتيبها وعددها
💡 بدل كتابة:
معادلة واحدة فقط تفعل كل شيء
نحن لا نكتب CSS بعد الآن…
نحن نبرمج بها.
🔥 التحدي لك:
جرب الآن وأخبرنا في التعليقات بأي استفسار لا تخجل من طلب المساعدة!
نعم، ما تقرأه صحيح 😳
لم تعد CSS مجرد تنسيقات…
بل أصبحت لغة تمتلك منطقاً خاصاً بها.
كم مرة…
* حاولت عمل animation لـ
height: auto وفشلت؟* كتبت
nth-child عشر مرات فقط لتأخير animation؟* أو استخدمت JavaScript فقط لتغيير لون بناءً على شرط؟
كل هذا… انتهى.
🧠 يمكنك الآن استخدام if
بدلاً من كتابة Classes متعددة أو استخدام JavaScript…
يمكنك اتخاذ القرار مباشرة داخل الخاصية!
.button {
background-color: if(style(--importance: urgent), red, blue);
border-radius: if(media(prefers-reduced-motion), 0px, 15px);
}بدل تغيير التصميم… غيّر “القرار” داخل التصميم نفسه.
لتكون النتيجة: كود أقل + منطق أوضح + مكونات ذكية.
📏 التعامل مع الحجم غير المعروف calc-size
سابقاً ❌ لا يمكنك عمل animation لـ
autoالآن؟ يمكنك ذلك بكل بساطة:
.accordion-content {
height: 0;
transition: height 0.3s ease;
}
.accordion-content.open {
height: calc-size(auto, size);
}✨ النتيجة :Animation حقيقي وناعم بدون أي hacks
👥 .عناصر “واعية” sibling-index & sibling-count
العناصر الآن تعرف: ترتيبها وعددها
.list-item {
animation-delay: calc(sibling-index() * 0.1s);
opacity: calc(sibling-index() / sibling-count());
}💡 بدل كتابة:
nth-child(1), nth-child(2)...معادلة واحدة فقط تفعل كل شيء
نحن لا نكتب CSS بعد الآن…
نحن نبرمج بها.
🔥 التحدي لك:
جرب الآن وأخبرنا في التعليقات بأي استفسار لا تخجل من طلب المساعدة!
This media is not supported in your browser
VIEW IN TELEGRAM
: Social Media Icons Hover Effects 🔥 HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
:Navigation bar 🔥
HTML&CSS.
HTML&CSS.
بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين.
وداعاً border-radius : اكتشف خاصية corner-shape في CSS
لغة CSS في تطور مستمر واليوم موضوعنا عن خاصية جديدة في css وهي conrner-shape
خاصية corner-shape هي اللاعب الجديد في الساحة اليوم؛ فبعد سنوات طويلة كانت فيها زوايا صفحات الويب إما حادة أو مستديرة قليلاً، تكسر هذه الخاصية القواعد لتمنحك أنواعاً مختلفة من تأثيرات الزوايا الرائعة مثل الحواف المائلة، التجاويف، والمربعات المستديرة (squircles) دون الحاجة للفوتوشوب أو ملفات SVG كما كان متبعاً في السابق.
فإن خاصية corner-shape تأتي لتكمل المشهد؛ فبينما يحدد الريديس حجم الزاوية، تمنحك هذه الخاصية التحكم الكامل في شكلها الهندسي.
هي خاصية CSS جديدة (حالياً متاحة فقط في إصدار Chrome 139+ وليست مدعومة على نطاق واسع بعد، لذا لا تستخدمها في المواقع الرسمية حالياً) تتيح لك التحكم في شكل زوايا الصندوق، وليس فقط مدى استدارتها. وهي تعمل جنباً إلى جنب مع border-radius — فكر في border-radius على أنها تحدد حجم الزاوية، بينما تحدد corner-shape نمطها.
مثال سريع:
يمنحك هذا صندوقاً بزوايا مقعرة بدلاً من الزوايا المستديرة المعتادة.
١-خيارات تصميم أكثر : تجاوز المستطيلات والدوائر المملة. اجعل واجهة مستخدمك تبرز بزوايا مسننة، مائلة، أو بنمط squircle.
٢-وداعاً لحيَل الصور : افعل كل ذلك باستخدام CSS فقط — لا داعي لصور إضافية، ملفات SVG، أو وسوم (markup) غريبة.
٣-تنسيق متناسق : تتبع الحدود، الخلفيات، والظلال جميعها شكل الزاوية الجديد تلقائياً.
تستخدم corner-shape جنباً إلى جنب مع border-radius. تقبل هذه الخاصية من قيمة واحدة إلى أربع قيم، تماماً مثل border-radius ، ويمكنك المزج والتوفيق بين أشكال مختلفة لكل زاوية.
الأشكال المدعومة (الكلمات المفتاحية):
round (الافتراضي، تماماً مثل border-radius المعتاد).
bevel (زوايا مقطوعة بشكل مائل.
notch (زوايا حادة بقطع داخلي).
scoop (مقعرة، كأنها قضمة مأخوذة من الزاوية).
square (يزيل تأثير border-radius ويجعل الزاوية حادة).
squircle (مزيج انسيابي بين المربع والدائرة).
superellipse() (تتيح لك ضبط الانحناء بدقة باستخدام رقم).
امثلة:
CSS
الترتيب مهم: تسير القيم باتجاه عقارب الساعة بدءاً من الزاوية العلوية اليسرى، تماماً مثل خاصية border-radius.
هذه الخاصية لا تزال تجريبية. في الوقت الحالي، يدعمها متصفح Chrome 139+ و متصفح Microsoft Edge فقط، وستحتاج إلى التحقق من التوافق قبل استخدامها في أي مشاريع هامة. لكنها أداة رائعة للنماذج الأولية (Prototypes)، التجارب، أو مجرد الاستمتاع باستكشاف ميزات CSS الجديدة.
تتيح لك خاصية corner-shape اختيار نمط زواياك، وليس فقط مدى استدارتها.
تعمل مع border-radius لإنشاء أطنان من الأشكال الجديدة.
رائعة لتصاميم واجهة المستخدم العصرية والفريدة لا حاجة للصور أو ملفات SVG.
إذا كنت قد سئمت من نفس الزوايا القديمة المعتادة، جرب corner-shape (في متصفح مدعوم). إنه تغيير بسيط يمكن أن يجعل تصاميمك تبدو حيوية وممتعة.
جرب واخبرنا عن تجربتك بالتعليقات 👇
لغة CSS في تطور مستمر واليوم موضوعنا عن خاصية جديدة في css وهي conrner-shape
خاصية corner-shape هي اللاعب الجديد في الساحة اليوم؛ فبعد سنوات طويلة كانت فيها زوايا صفحات الويب إما حادة أو مستديرة قليلاً، تكسر هذه الخاصية القواعد لتمنحك أنواعاً مختلفة من تأثيرات الزوايا الرائعة مثل الحواف المائلة، التجاويف، والمربعات المستديرة (squircles) دون الحاجة للفوتوشوب أو ملفات SVG كما كان متبعاً في السابق.
فإن خاصية corner-shape تأتي لتكمل المشهد؛ فبينما يحدد الريديس حجم الزاوية، تمنحك هذه الخاصية التحكم الكامل في شكلها الهندسي.
ما هي خاصية corner-shape؟
هي خاصية CSS جديدة (حالياً متاحة فقط في إصدار Chrome 139+ وليست مدعومة على نطاق واسع بعد، لذا لا تستخدمها في المواقع الرسمية حالياً) تتيح لك التحكم في شكل زوايا الصندوق، وليس فقط مدى استدارتها. وهي تعمل جنباً إلى جنب مع border-radius — فكر في border-radius على أنها تحدد حجم الزاوية، بينما تحدد corner-shape نمطها.
مثال سريع:
div {
border-radius: 38px;
corner-shape: scoop;
}يمنحك هذا صندوقاً بزوايا مقعرة بدلاً من الزوايا المستديرة المعتادة.
لماذا يجب أن تهتم؟
١-خيارات تصميم أكثر : تجاوز المستطيلات والدوائر المملة. اجعل واجهة مستخدمك تبرز بزوايا مسننة، مائلة، أو بنمط squircle.
٢-وداعاً لحيَل الصور : افعل كل ذلك باستخدام CSS فقط — لا داعي لصور إضافية، ملفات SVG، أو وسوم (markup) غريبة.
٣-تنسيق متناسق : تتبع الحدود، الخلفيات، والظلال جميعها شكل الزاوية الجديد تلقائياً.
كيف تعمل هذه الخاصية؟
تستخدم corner-shape جنباً إلى جنب مع border-radius. تقبل هذه الخاصية من قيمة واحدة إلى أربع قيم، تماماً مثل border-radius ، ويمكنك المزج والتوفيق بين أشكال مختلفة لكل زاوية.
الأشكال المدعومة (الكلمات المفتاحية):
round (الافتراضي، تماماً مثل border-radius المعتاد).
bevel (زوايا مقطوعة بشكل مائل.
notch (زوايا حادة بقطع داخلي).
scoop (مقعرة، كأنها قضمة مأخوذة من الزاوية).
square (يزيل تأثير border-radius ويجعل الزاوية حادة).
squircle (مزيج انسيابي بين المربع والدائرة).
superellipse() (تتيح لك ضبط الانحناء بدقة باستخدام رقم).
div {
border-radius: 38px;
corner-shape: scoop; // خصائص أخرى
}امثلة:
CSS
/* جميع الزوايا مائلة */
corner-shape: bevel;
/* الزاوية العلوية اليسرى والسفلية اليمنى مسننة، والباقي بنمط superellipse */
corner-shape: notch superellipse(0.6);
/* كل زاوية بشكل مختلف */
corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;
.
الترتيب مهم: تسير القيم باتجاه عقارب الساعة بدءاً من الزاوية العلوية اليسرى، تماماً مثل خاصية border-radius.
دعم المتصفحات
هذه الخاصية لا تزال تجريبية. في الوقت الحالي، يدعمها متصفح Chrome 139+ و متصفح Microsoft Edge فقط، وستحتاج إلى التحقق من التوافق قبل استخدامها في أي مشاريع هامة. لكنها أداة رائعة للنماذج الأولية (Prototypes)، التجارب، أو مجرد الاستمتاع باستكشاف ميزات CSS الجديدة.
باختصار
تتيح لك خاصية corner-shape اختيار نمط زواياك، وليس فقط مدى استدارتها.
تعمل مع border-radius لإنشاء أطنان من الأشكال الجديدة.
رائعة لتصاميم واجهة المستخدم العصرية والفريدة لا حاجة للصور أو ملفات SVG.
إذا كنت قد سئمت من نفس الزوايا القديمة المعتادة، جرب corner-shape (في متصفح مدعوم). إنه تغيير بسيط يمكن أن يجعل تصاميمك تبدو حيوية وممتعة.
جرب واخبرنا عن تجربتك بالتعليقات 👇
إطلاق شركة غوغل تطبيقاً جديداً "غوغل إيه آي إيدج إيليكوينت" (Google AI Edge Eloquent) مدعوماً بالذكاء الاصطناعي يهدف إلى تسجيل الكلام وتحويله إلى نصوص مكتوبة بدقة واحترافية.
أبرز ميزات التطبيق:
العمل دون اتصال (Offline): يمكن استخدامه بدون إنترنت بعد تنزيل النماذج الصوتية المبنية على منصة "جيما".
التنقيح التلقائي الذكي: يقوم بإزالة الكلمات الحشوية والتوقفات المترددة (مثل "أم" و"آه") لإنتاج نص دقيق ونظيف.
خيارات التنسيق: يتيح تحويل النص الناتج إلى أشكال مختلفة (نقاط رئيسية، صياغة رسمية، ملخص، أو نص مطول).
التخصيص والربط: يدعم استيراد الأسماء والمصطلحات من حساب "جيميل"، مع إمكانية إضافة كلمات مخصصة.
إدارة الجلسات: يعرض سجل التسجيلات السابقة مع إمكانية البحث، بالإضافة إلى تتبع سرعة الكلام وعدد الكلمات.
التوافر والخطط المستقبلية:
التطبيق متاح حالياً لمستخدمي أنظمة iOS.
من المتوقع طرحه قريباً على أجهزة أندرويد، مع ميزات دمج إضافية مثل استخدامه كلوحة مفاتيح افتراضية أو زر عائم للتسجيل السريع.
أبرز ميزات التطبيق:
العمل دون اتصال (Offline): يمكن استخدامه بدون إنترنت بعد تنزيل النماذج الصوتية المبنية على منصة "جيما".
التنقيح التلقائي الذكي: يقوم بإزالة الكلمات الحشوية والتوقفات المترددة (مثل "أم" و"آه") لإنتاج نص دقيق ونظيف.
خيارات التنسيق: يتيح تحويل النص الناتج إلى أشكال مختلفة (نقاط رئيسية، صياغة رسمية، ملخص، أو نص مطول).
التخصيص والربط: يدعم استيراد الأسماء والمصطلحات من حساب "جيميل"، مع إمكانية إضافة كلمات مخصصة.
إدارة الجلسات: يعرض سجل التسجيلات السابقة مع إمكانية البحث، بالإضافة إلى تتبع سرعة الكلام وعدد الكلمات.
التوافر والخطط المستقبلية:
التطبيق متاح حالياً لمستخدمي أنظمة iOS.
من المتوقع طرحه قريباً على أجهزة أندرويد، مع ميزات دمج إضافية مثل استخدامه كلوحة مفاتيح افتراضية أو زر عائم للتسجيل السريع.
Forwarded from عاصم آل ناجي (┍᥈᥉ᥱᦂ┑)
السلام عليكم ورحمة الله وبركاته .
اليوم وبعد عمل متواصل لمدة اسبوع كامل انتهيت من انجاز مكتبة للاتصال بقواعد البيانات من جافا بتقنية ORM .
https://github.com/AsemNajee/JavaBase.git
اقرأ ملف README لتعرف طريقة استخدام المكتبة بالشكل الصحيح .
اليوم وبعد عمل متواصل لمدة اسبوع كامل انتهيت من انجاز مكتبة للاتصال بقواعد البيانات من جافا بتقنية ORM .
https://github.com/AsemNajee/JavaBase.git
اقرأ ملف README لتعرف طريقة استخدام المكتبة بالشكل الصحيح .
GitHub
AsemNajee/JavaBase
ORM Framework. Contribute to AsemNajee/JavaBase development by creating an account on GitHub.
💯 مواقع ذكاء اصطناعي راح تستفيد منه.
١- Gamma.app – عروض تقديمية بالذكاء الاصطناعي
٢- Tome.app – برزنتيشن تلقائي
٣- Beautiful.ai – تصميم عروض احترافية
٤- Pitch.com – عروض حديثة
٥- SlidesAI.io – تحويل النص إلى عرض
٦- Decktopus.com – عروض ذكية
٧- Canva.com/ai – تصميم شامل
٨- Visme.co – عروض وإنفوجرافيك
٩- Prezi.com – عروض متحركة
١٠- ZohoShow.com – عروض مجانية
١١- Notion.so/ai – كتابة وتنظيم
١٢- Notta.ai – تفريغ صوت
١٣- Otter.ai – تسجيل اجتماعات
١٤- Fireflies.ai – تلخيص اجتماعات
١٥- Fathom.video – ملاحظات اجتماعات
١٦- Tldv.io – تلخيص مكالمات
١٧- Supernormal.com – تلخيص تلقائي
١٨- Mem.ai – تنظيم أفكار
١٩- Reflect.app – تدوين ذكي
٢٠- Taskade.com – مهام وخرائط ذهنية
٢١- Perplexity.ai – بحث ذكي
٢٢- Phind.com – بحث للمبرمجين
٢٣- You.com – بحث وكتابة
٢٤- ChatGPT.com – مساعد ذكي
٢٥- Claude.ai – كتابة وتحليل
٢٦- Gemini.google.com – ذكاء جوجل
٢٧- Copilot.microsoft.com – مساعد مايكروسوفت
٢٨- Poe.com – عدة نماذج AI
٢٩- HuggingFace.co – نماذج مفتوحة
٣٠- FlowGPT.com – برومبتات جاهزة
٣١- Leonardo.ai – صور احترافية
٣٢- Ideogram.ai – صور بنصوص
٣٣- Krea.ai – توليد صور
٣٤- PlaygroundAI.com – صور AI
٣٥- Mage.space – صور مجانية
٣٦- Civitai.com – موديلات صور
٣٧- SeaArt.ai – صور إبداعية
٣٨- DreamStudio.ai – Stable Diffusion
٣٩- Artbreeder.com – دمج صور
٤٠- DeepDreamGenerator.com – صور فنية
٤١- RunwayML.com – فيديو AI
٤٢- Pika.art – نص إلى فيديو
٤٣- Kaiber.ai – فيديو إبداعي
٤٤- LumaLabs.ai – فيديو واقعي
٤٥- Synthesia.io – فيديو تعليمي
٤٦- HeyGen.com – أفاتار متكلم
٤٧- Opus.pro – تحويل فيديو لشورتس
٤٨- CapCut.com – مونتاج AI
٤٩- VEED.io – مونتاج وترجمة
٥٠- InVideo.io – صناعة فيديو
٥١- ElevenLabs.io – صوت احترافي
٥٢- Play.ht – تحويل نص لصوت
٥٣- Murf.ai – صوت طبيعي
٥٤- Speechify.com – قراءة نصوص
٥٥- Listnr.ai – تحويل صوت
٥٦- Resemble.ai – استنساخ صوت
٥٧- Coqui.ai – صوت مفتوح
٥٨- Uberduck.ai – أصوات وشخصيات
٥٩- Voicemod.net – تغيير صوت
٦٠- Soundraw.io – موسيقى AI
٦١- AIVA.ai – تأليف موسيقى
٦٢- Boomy.com – صناعة أغاني
٦٣- Beatoven.ai – موسيقى فيديو
٦٤- Soundful.com – موسيقى جاهزة
٦٥- Endel.io – موسيقى تركيز
٦٦- Brain.fm – تحسين التركيز
٦٧- Loudly.com – إنتاج موسيقى
٦٨- Bandlab.com – استوديو موسيقى
٦٩- Audiotool.com – إنتاج صوت
٧٠- Soundation.com – صناعة موسيقى
٧١- Durable.co – إنشاء مواقع
٧٢- Framer.com/ai – تصميم مواقع
٧٣- Wix.com/ai – مواقع تلقائية
٧٤- 10Web.io – ووردبريس AI
٧٥- Hostinger.ai – بناء مواقع
٧٦- Typedream.com – صفحات هبوط
٧٧- Mixo.io – مواقع ستارتاب
٧٨- Carrd.co – صفحات بسيطة
٧٩- Webflow.com/ai – تصميم مواقع
٨٠- TeleportHQ.io – بناء مواقع
٨١- Replit.com – برمجة وتشغيل
٨٢- Codeium.com – مساعد برمجي
٨٣- Blackbox.ai – كود ذكي
٨٤- Phind.com – بحث برمجي
٨٥- Cursor.com – محرر AI
٨٦- V0.dev – واجهات UI
٨٧- Bolt.new – تطبيقات سريعة
٨٨- Stackblitz.com – تطوير مباشر
٨٩- CodeSandbox.io – تشغيل مشاريع
٩٠- Tabnine.com – إكمال كود
٩١- Remove.bg – حذف خلفية
٩٢- Cleanup.pictures – إزالة عناصر
٩٣- Upscale.media – تحسين صورة
٩٤- Let’sEnhance.io – رفع جودة
٩٥- PhotoRoom.com – صور منتجات
٩٦- Clipdrop.co – أدوات صور
٩٧- Hotpot.ai – تصميم وصور
٩٨- Designify.com – تحسين صور
٩٩- Remove.video – حذف خلفية فيديو
١٠٠- IMG2GO.com – أدوات صور وملفات
Canva
Login to your Canva account
Login to access and create your next design.
Forwarded from 𝐈𝐓𝐂𝐎𝐃𝐄 (الْــۦٕ٘۬ـمۦٕ٘۬ــحـ᭖͡᭜᭝ـمـــٰٚـِِْـٰودي𖤓 .)
#معلومة
الفرق بين Error و Exception
—————————————--
يمكن تلخيص الفروقات كالتالي:
التعريف:
Error:
هي مشكلات جسيمة تحدث على مستوى النظام أو البيئة، وتكون عادةً خارج سيطرة البرنامج.
—————
Exception:
هي مشكلات تحدث أثناء تشغيل البرنامج بسبب أخطاء برمجية أو مدخلات غير صحيحة، ويمكن معالجتها.
——————————————-
أمثلة:
Error:
مثل OutOfMemoryError (نفاد الذاكرة)، وStackOverflowError (تجاوز سعة المكدس).
—————
Exception:
مثل NullPointerException (محاولة الوصول إلى كائن فارغ)
وIOException (خطأ في الإدخال/الإخراج).
———————————————————
إمكانية المعالجة:
Error:
لا يستطيع المبرمج معالجة الأخطاء باستخدام الكود البرمجي، لأنها عادة تتطلب إصلاحات على مستوى النظام.
—————
Exception:
يمكن للمبرمج معالجتها باستخدام try-catch وغيرها... لمنع توقف البرنامج.
——————————————————
الأصل:
Error:
تنحدر من المكتبة
java.lang.Error.
—————
Exception:
تنحدر من المكتبة
java.lang.Exception.
—————————————-
التأثير:
Error:
عادة ما تتسبب في توقف البرنامج بالكامل.
—————
Exception:
يمكن التعامل معها، والبرنامج يستمر في التنفيذ.
————————————————————
الفرق بين Error و Exception
—————————————--
يمكن تلخيص الفروقات كالتالي:
التعريف:
Error:
هي مشكلات جسيمة تحدث على مستوى النظام أو البيئة، وتكون عادةً خارج سيطرة البرنامج.
—————
Exception:
هي مشكلات تحدث أثناء تشغيل البرنامج بسبب أخطاء برمجية أو مدخلات غير صحيحة، ويمكن معالجتها.
——————————————-
أمثلة:
Error:
مثل OutOfMemoryError (نفاد الذاكرة)، وStackOverflowError (تجاوز سعة المكدس).
—————
Exception:
مثل NullPointerException (محاولة الوصول إلى كائن فارغ)
وIOException (خطأ في الإدخال/الإخراج).
———————————————————
إمكانية المعالجة:
Error:
لا يستطيع المبرمج معالجة الأخطاء باستخدام الكود البرمجي، لأنها عادة تتطلب إصلاحات على مستوى النظام.
—————
Exception:
يمكن للمبرمج معالجتها باستخدام try-catch وغيرها... لمنع توقف البرنامج.
——————————————————
الأصل:
Error:
تنحدر من المكتبة
java.lang.Error.
—————
Exception:
تنحدر من المكتبة
java.lang.Exception.
—————————————-
التأثير:
Error:
عادة ما تتسبب في توقف البرنامج بالكامل.
—————
Exception:
يمكن التعامل معها، والبرنامج يستمر في التنفيذ.
————————————————————
❤4
هل يختفي الملف فعلاً عند الضغط على Delete؟🤔
📌هذا ما سيكون عنوان المنشور القادم
📌هذا ما سيكون عنوان المنشور القادم
❤4
هل يختفي الملف فعلاً عند الضغط على Delete؟
الحقيقة الصادمة هي: لا.. ملفاتك لا تذهب إلى أي مكان! عندما تضغط على زر الحذف ويختفي الملف من أمامك في ثانية واحدة، فإن ما حدث ليس "تدميراً" للبيانات، بل هو مجرد "تلاعب" بالقيود والدفاتر. إليك السر:
يتعامل نظام الملفات مع الهارد ديسك وكأنه كتاب ضخم:
الفهرس (Table of Contents): هو المكان الذي يسجل فيه النظام اسم الملف ومكانه.
الصفحات (Data Blocks): هي الأماكن الفعلية التي تُخزن فيها البيانات.
قطع الإشارة (Remove Pointer): يمسح اسم الملف من "الفهرس" فقط.
إعادة التسمية (Mark as Available): يضع علامة على الـ Blocks الخاصة بالملف بأنها "مساحة فارغة جاهزة للكتابة"، لكنه لا يمسح محتواها.
في هذه اللحظة، الملف يصبح "مخفياً" وليس "ممسوحاً". البيانات لا تزال تقبع داخل الـ Blocks، ولكن النظام لم يعد يراها كملف، بل يراها كأرض فضاء لبناء بيانات جديدة.
يختفي الملف نهائياً فقط في حالة واحدة: الكتابة فوقه.
عندما تقوم بتحميل ملف جديد، قد يقرر النظام استغلال تلك الـ Blocks "المتاحة" وتخزين البيانات الجديدة مكان القديمة. هنا فقط، تضيع البيانات الأصلية للأبد.
💡 حقيقة تقنية: برامج استعادة البيانات (Data Recovery) لا تقوم بالسحر، هي ببساطة تتجاهل "الفهرس" وتذهب مباشرة لتمشيط الـ Blocks بحثاً عن بقايا البيانات التي لم تُغطَّ بعد.
هذا ما سنكتشفه في رحلتنا القادمة داخل أعماق: Processes Deep Dive & Threads 🚀
@ITCode_0
الحقيقة الصادمة هي: لا.. ملفاتك لا تذهب إلى أي مكان! عندما تضغط على زر الحذف ويختفي الملف من أمامك في ثانية واحدة، فإن ما حدث ليس "تدميراً" للبيانات، بل هو مجرد "تلاعب" بالقيود والدفاتر. إليك السر:
🛠️ كيف يخدعنا نظام الملفات (File System)؟
يتعامل نظام الملفات مع الهارد ديسك وكأنه كتاب ضخم:
الفهرس (Table of Contents): هو المكان الذي يسجل فيه النظام اسم الملف ومكانه.
الصفحات (Data Blocks): هي الأماكن الفعلية التي تُخزن فيها البيانات.
عند الحذف، يقوم النظام بخطوتين فقط:
قطع الإشارة (Remove Pointer): يمسح اسم الملف من "الفهرس" فقط.
إعادة التسمية (Mark as Available): يضع علامة على الـ Blocks الخاصة بالملف بأنها "مساحة فارغة جاهزة للكتابة"، لكنه لا يمسح محتواها.
👻 الملفات الشبحية (Ghost Data)
في هذه اللحظة، الملف يصبح "مخفياً" وليس "ممسوحاً". البيانات لا تزال تقبع داخل الـ Blocks، ولكن النظام لم يعد يراها كملف، بل يراها كأرض فضاء لبناء بيانات جديدة.
⚠️ متى يحدث الحذف الحقيقي؟ (The Overwrite)
يختفي الملف نهائياً فقط في حالة واحدة: الكتابة فوقه.
عندما تقوم بتحميل ملف جديد، قد يقرر النظام استغلال تلك الـ Blocks "المتاحة" وتخزين البيانات الجديدة مكان القديمة. هنا فقط، تضيع البيانات الأصلية للأبد.
💡 حقيقة تقنية: برامج استعادة البيانات (Data Recovery) لا تقوم بالسحر، هي ببساطة تتجاهل "الفهرس" وتذهب مباشرة لتمشيط الـ Blocks بحثاً عن بقايا البيانات التي لم تُغطَّ بعد.
😈 السؤال الأخطر: كيف يدير النظام كل هذا الزخم؟
إذا كان التعامل مع ملف "ساكن" يحمل كل هذه الأسرار، فما بالك بما يحدث "خلف الكواليس" أثناء تشغيل البرامج؟
كيف يستطيع نظام التشغيل توزيع المهام، والتعامل مع مئات البرامج، والتنسيق بين المعالج والذاكرة في أجزاء من الثانية دون أن ينهار كل شيء؟
هذا ما سنكتشفه في رحلتنا القادمة داخل أعماق: Processes Deep Dive & Threads 🚀
@ITCode_0
🔥4
✨ يسرنا دعوتكم لحضور لقاء مميز يجمع بين الخبرة العملية والإلهام الحقيقي
*بالتعاون مع مركز ماستر التعليمي (EMC)*
ندعوكم لحضور لقاء مميز يجمع بين الخبرة الواقعية والإلهام الحقيقي
🎤 ضيف اللقاء: *المهندس طارق بن جعبل طعيمان*
مهندس ذكاء اصطناعي
رئيس ومؤسس شركة Yamai Tech
خبير في الأتمتة الصناعية ودمج أنظمة الذكاء الاصطناعي
✨ محاور اللقاء:
🔹 مسارات المستقبل في التقنية
🔹 المهارات التي تصنع الفارق
🔹 تجارب عملية من سوق العمل العالمي
📍 المكان:عبر Google Meet
🕛 الوقت: 8:00 مساءا
📅 التاريخ: الأحد 3مايو 2026
🔆 الدعوة موجهة لطلاب *الخطة الجديدة* :
تكنولوجيا المعلومات
هندسة البرمجيات
الشبكات والامن السيبراني
للتسجيل من خلال الرابط التالي:
https://forms.gle/YyMYd7FyEGsc3hm7A
📢 لا تفوّت الفرصة... وكن جزءا من هذا الحدث الملهم!
.
*بالتعاون مع مركز ماستر التعليمي (EMC)*
ندعوكم لحضور لقاء مميز يجمع بين الخبرة الواقعية والإلهام الحقيقي
🎤 ضيف اللقاء: *المهندس طارق بن جعبل طعيمان*
مهندس ذكاء اصطناعي
رئيس ومؤسس شركة Yamai Tech
خبير في الأتمتة الصناعية ودمج أنظمة الذكاء الاصطناعي
✨ محاور اللقاء:
🔹 مسارات المستقبل في التقنية
🔹 المهارات التي تصنع الفارق
🔹 تجارب عملية من سوق العمل العالمي
📍 المكان:عبر Google Meet
🕛 الوقت: 8:00 مساءا
📅 التاريخ: الأحد 3مايو 2026
🔆 الدعوة موجهة لطلاب *الخطة الجديدة* :
تكنولوجيا المعلومات
هندسة البرمجيات
الشبكات والامن السيبراني
للتسجيل من خلال الرابط التالي:
https://forms.gle/YyMYd7FyEGsc3hm7A
📢 لا تفوّت الفرصة... وكن جزءا من هذا الحدث الملهم!
.
❤1🔥1
🧠 موضوع اليوم على الماشي.
عشان الموقع ما يغثك ويطلب كلمة المرور مع كل ضغطة وصفحة تفتحها، يستخدم تقنية الـ JWT (JSON Web Token).
🏨 التشبيه العجيب:
مثل "كرت الفندق". تبرز هويتك للاستقبال أول مرة بس، ويعطونك كرت ممغنط (Token). بعدها تفتح غرفتك، وتدخل المسبح بمجرد ما تمرر الكرت على الباب، بدون ما تضطر تثبت هويتك عند كل خطوة.
بعد ما تسجل دخول، السيرفر يصنع لك Token ويختمه بـ "توقيع سري" ويرسله لك.
ومع كل طلب تسويه بالموقع، متصفحك يرسل هذا الـ Token تلقائياً عشان يثبت إنه مصرح لك بالدخول.
لو المبرمج ضعيف وما ضبط "توقيع" الكرت بشكل آمن، الهاكر يقدر يتلاعب بالـ Token حقه، ويغير برمجته عشان يفتح له "جناح الإدارة" (Admin) بدل غرفته العادية، ويتحكم بالنظام!
الـ JWT هو كرت مرورك الرقمي المؤقت اللي يسهل تصفحك، بس أمان هذه التقنية كله واقف على قوة التوقيع.
#مصطلح #ITCode
🔑 الـ JWT — كيف المواقع “تتذكرك”؟
عشان الموقع ما يغثك ويطلب كلمة المرور مع كل ضغطة وصفحة تفتحها، يستخدم تقنية الـ JWT (JSON Web Token).
🏨 التشبيه العجيب:
مثل "كرت الفندق". تبرز هويتك للاستقبال أول مرة بس، ويعطونك كرت ممغنط (Token). بعدها تفتح غرفتك، وتدخل المسبح بمجرد ما تمرر الكرت على الباب، بدون ما تضطر تثبت هويتك عند كل خطوة.
🔍 كيف يشتغل؟
بعد ما تسجل دخول، السيرفر يصنع لك Token ويختمه بـ "توقيع سري" ويرسله لك.
ومع كل طلب تسويه بالموقع، متصفحك يرسل هذا الـ Token تلقائياً عشان يثبت إنه مصرح لك بالدخول.
😈 لعبة الهاكرز:
لو المبرمج ضعيف وما ضبط "توقيع" الكرت بشكل آمن، الهاكر يقدر يتلاعب بالـ Token حقه، ويغير برمجته عشان يفتح له "جناح الإدارة" (Admin) بدل غرفته العادية، ويتحكم بالنظام!
💡 الخلاصة:
الـ JWT هو كرت مرورك الرقمي المؤقت اللي يسهل تصفحك، بس أمان هذه التقنية كله واقف على قوة التوقيع.
#مصطلح #ITCode
👍1