محمد صلاح

التعامل مع Secret API Keys في Frontend Apps

2024-09-14T00:00:00Z

مقدمة

عايز اتكلم عن واحدة من أكبر المشاكل اللي ممكن تتعمل في ال Frontend Apps وازاي ممكن المشكلة دي بأفضل الأحوال تخسر الشركة آلاف الدولارات، وبأسوء الأحوال تدمر سمعة الشركة!

المشكلة هي التعامل مع ال Secret API Keys لأي Service خارجية!

ملحوظة: أنا أقصد ب Frontend Apps هنا اي Web, Mobile, Desktop apps مش المقصود بس ال Web frontend فلو انت بتكتب اي Client Code بيشتغل على ال User Device ومش ع السيرفر فالكلام يهمك إن شاء الله.

تفاصيل المشكلة

لما بتتعامل مع أي Service خارجية زي مثلا AWS لو هنقول مثلا انك بترفع عليها Media Files، الService دي بتديك حاجه اسمها Secret Key بتستخدمها عشان تعمل Authentication معاها، في مثلا Service تقولك ابعتلي ال Secret Key ده مع ال Request وفي Service تانية تطلب منك تعمل Signing لل Request بأستخدام ال Secret Key.

بغض النظر عن طريقة ال Authentication، معظم الناس بتروح تحط ال Secret keys دي في ال frontend code سواء بقى في ال Env file أو حتى ال Source code نفسه!

خطورة كشف Secret Keys

هنا تحصل المصيبة لأن ال Frontend Code بيروح لل User وبالتالي بيروح معاه ال Secret Keys بتاعتك فأي حد يقدر ياخدها ويعمل بيها اي حاجه انت تقدر تعملها وبالتالي ممكن يسحب كل الداتا بتاعة ال Users بتوعك ولو الداتا دي كانت Sensitive فأنت عندك مشكلة كبيرة! او ممكن حتى يستخدم ال Service دي نفسها وانت تدفع الفواتير مكانه وتخسر فلوس!

الحلول المقترحة

الحل الخاطئ:

الناس بتسيب ال Secret keys في الFrontend وتعمل Encryption أو Obfuscation لل Secret keys!

ليه ده حل غلط؟ عشان ال Encryption بيحتاج Encryption key عشان تشفر بيه الداتا بتاعتك وال Frontend محتاج ال Encryption Key ده عشان يقرأ الداتا الأصلية وبالتالي هتضطر تحطه هو كمان في ال Frontend. فانت كده معملتش حاجه لان اي حد هيوصل لل Encryption Key هيفك تشفير الداتا ويرجع الداتا الاصلية (خدها قاعدة عامة ال Encryption مبيحلش المشكلة هو بس يعمل Delegation فبدل ما كنت بتحمي الداتا بقيت بتحمي ال Encryption key اللي شفرت بيه الداتا وبما انك بتبعت الاتنين لل Frontend فأنت معملتش حاجه).

ال Obfuscation وهو انك تخلي الكود بتاعك مش مقروء وصعب فهمه وبالتالي لو حد قرأ السورس كود ميقدرش يفهمه ويطلع الداتا الاصلية. الحل ده بيسموه Security through obsecurity عامل كده زي الصورة اللي في المنشور انت مخبي المفتاح بتاع العربية فوق الكاوتش وبتقول محدش هيوصله بس للاسف ال Assumption ده غلط لان لو اي Attacker فتح النتورك وعرف انك بتعمل Authentication مع ال Services دي من الكلاينت كود هيعرف أن ال Secret key موجود هنا ومع شوية مجهود فإنه يلاقي ال Secret key المستخبي مسئلة وقت فقط.

الحل الصحيح:

انك اي Authentication مع Service خارجية يتم من خلال ال Backend بتاعك وتنقل ال Secret keys لل Backend وانت من ال Front تبعت Request لل Backend وال Backend يعمل ال Request لل Service اللي بتتعامل معاها وبالتالي ال Frontend مش هيعرف اي حاجه عن ال Secret keys (طبعا انت محتاج انك متسبش الدنيا مفتوحة على البحري عندك في الباك ايند وتتأكد من ال Requests ويكون في Authentication/Authorization).

طيب افرض معكش Backend أو متقدرش تعدل عليه لأي سبب؟ اعمل سيرفر backend ع ادك أو استخدم حاجه زي ال Next.js لو كنت شغال React واعمل ال Requests من السيرفر بتاعها.

بدأت استخدم Cursor IDE ومن الواضح أنه هيكون قاتل VS Code

2024-09-07T00:00:00Z

مقدمة

لو أنت أخدت VS Code + ChatGPT + Copilot ودمجتهم في بعض هيطلعلك Cursor!

مميزات Cursor IDE

دي بعض المميزات من خلال تجربتي حتى الآن:

مش محتاج أنك تتخلى عن VS Code او الـ Extensions والـ Configuration بتاعتك لانه مبني على VS Code وبيقدملك نفس التجربة.
مش محتاج أنك تـ Switch Context كل شوية ما بين ChatGPT وما بين الكود بتاعك وتفضل تنقل الكود من هناك لهنا، انت عندك Chat في الـIDE مدمج وفاهم كل حاجه عن الكود بتاعك تقدر تسئله عن اي حاجه فيه ويجاوبك، ولما بيقدملك حلول لمشاكل او كود تقدر تعمله Apply من الـ Chat نفسه وهو هيعمل كل حاجه بدون تدخل منك.
الـ Auto Completion فيه أقوى بكتير من Copilot مع VS Code (ع الاقل حسب تجربتي له قبل سنة تقريبا ممكن يكون ده اتغير).
تقدر تحددله اي مكان في الكود او اي جزء فيه وهو يعمل Refactor او يكتبلك كود جديد او يحللك مشكلة معينة.
لو ظهرلك اي مشكلة في الـ Console تقدر تسئل الـ Chat وهو يقدملك حلول وتقدر تعملها Apply من داخل الـChat بدون اي تدخل منك وتقبل الحل بعد كده او ترفضه.
فيه اكتر من Model تقدر تختاره زي GPT-4o, GPT-4o-mini, GPT-3.5, Claude-3.5-sonnet.

أكبر مشكلة بتواجه المحتوى العربي التقني

2024-09-06T00:00:00Z

مقدمة

أكبر مشكلة بتواجه المحتوى العربي التقني من وجهة نظري هي نشر المقالات والشروحات والنصائح المفيدة على السوشيال ميديا بس!

لو دخلت بحثت على جوجل على أي شيء مفيد بالعربي هتلاقي نتائج البحث مفيهاش أي حاجه مفيدة، بالرغم من أن ليل نهار في ناس هنا على لينكد إن وعلى الفيس بوك وتليجرام بتنشر محتوى مفيد من مقالات ونصائح ومواضيع مفيدة!

مقارنة مع المحتوى الأجنبي

على العكس تماما مع المحتوى الأجنبي لو بحثت عن أي حاجه تقنية هتلاقي مئات أو حتى آلاف المقالات! وده بسبب أن الأجانب عندهم الفكر أن كل واحد فيهم عنده Blog خاصة بيه بينشر عليها المحتوى التقني بتاعه وبالتالي انت لما تبحث على جوجل هتلاقيه. الناس المشهورة هناك غالبا مبتنشرش على مواقع التواصل الاجتماعي نهائي بما فيهم لينكد إن ولو نشر فبينشر لينك للمقال أو الموضوع اللي هو كتبه على ال Blog، والمحتوى بتاعهم دائما ناس جديدة بتوصله ومبيموتش بفضل محركات البحث، عكس هنا البوست بالكثير اسبوع لو كان جامد جدا وبعدين هيموت ومحدش هيستفاد منه.

المشكلة مع السوشيال ميديا

احنا ولأن الثقافة دي مش منتشرة عندنا وخصوصا في مجال التقنية فالمحتوى بتاعنا كله ضايع في منصات التواصل الاجتماعي اللي شبه الثقب الأسود اللي بيبلع المحتوى بعد مدة معينة والخوارزميات بتاعتها اللي بتقتل المحتوى المفيد وبتقلل ظهوره أو بتديله زخم يوم ولا يومين وبعدين تخفيه ومحدش هيلاقيه إلا لو دخل مخصوص وقعد يلف في صفحتك ويقرأ فيها وده نادرا أما يحصل، كمان بتفقد جمهور مهم وكبير وهو الناس اللي ممكن تبحث عن المحتوى بتاعك بشكل مخصوص على جوجل.

فقدان المحتوى

كمان منصات التواصل الاجتماعي حسابك لو اتسرق أو اتقفل فأنت محتواك كله ضاع.

الحل

انا شايف أن صعب نتكلم عن إثراء المحتوى العربي والناس بترمي المحتوى بتاعها كله في السوشيال ميديا بس (النشر على السوشيال ميديا مفيد بس مش كفاية لوحده)، لازم يكون المحتوى بيتنشر في أماكن تانية عندنا تحكم كامل عليها وصديقه لمحركات البحث زي الـ Personal Blogs.

استخدم Lazy Initialization في React

2024-09-03T00:00:00Z

مقدمة

لو الـ Initial Value لـ useState عندك computationally expensive (مثلا بتروح تقرأها من الـ LocalStorage، العملية دي بتكون Expensive عشان انت بتقرأ من الـ Hard drive الخاص باليوزر) أستخدم الـ Lazy Initialization!

المشكلة اللي بتحصل بسبب الـ Rerendering

الـ Lazy Initialization هو أنك بدل ما تباصي الـ Value نفسها للـ useState، انت هتباصي function بترجع الـ value دي. طيب ليه؟

لو انت روحت عملت كده:

const [value, setValue] = React.useState(
  window.localStorage.getItem("someValue")
);

أو كده:

const getLocalStorageValue = () => window.localStorage.getItem("someValue");
React.useState(getLocalStorageValue());

ففي كل مرة هيحصل Re-rendering انت هتقرأ من الـ LocalStorage، والـ value اللي انت بتقرأها دي في الـ re-rendering ملهاش لزمة لأن React بتستخدمها كـ Initial State بس، وبعد كده بتحتفظ بالـ value ما بين الـ re-rendering. فأنت كده عمال بتعمل IO Operations ملهاش لزمة!

الحل باستخدام Lazy Initialization

الحل انك تباصي لـ useState فانكشن بترجع الـ Initial State، واللي هيحصل ان React هتنادي الفانكشن دي مرة واحدة بس لما الـ Component يتعمله Mount. الصورة المرفقة بتوضح ده. الـ Lazy initializers بيحصلها call مرة واحدة في البداية وبعد كده اثناء الـ Update/Re-rendering مبيحصلهاش Call.

يعني انت مفروض تعمل كده:

const [value, setValue] = React.useState(() =>
  window.localStorage.getItem("someValue")
);

أو كده:

const getLocalStorageValue = () => window.localStorage.getItem("someValue");
React.useState(getLocalStorageValue);

مراجعة كتاب Refactoring UI

2024-08-27T00:00:00Z

مقدمة

بفضل الله أنتهيت من كتاب Refactoring UI للمرة التانية وحابب اشارك معاكم ازاي الكتاب ده هيفيدك بشكل كبير لو انت ديفلوبر وعايز تصمم UI يكون شكله جميل بدون وجود Designer معاك وبدون ما تكون مبدع بالفطرة أو مولود بجينات مصممين! 😄

الكتاب ومن هو مؤلفه

أولا الكتاب من نفس المطور اللي عمل Tailwind CSS. وقبل ما نكمل حابب أسالك: هل حاولت قبل كده تصمم website / application بنفسك وكان التصميم مش أفضل حاجه ومش مبهر على عكس مثلا لما تعتمد على تصميم جاهز عامله ديزاينر؟ أنا حصل معايا كده، وAdam Wathan حصل معاه كده (واحد من الناس اللي عملوا Tailwind ومؤلف الكتاب اللي بنتكلم عليه) وناس كتير حصل معاها كده!

كيف يساعدك الكتاب؟

كل اللي انت محتاجه هو الكتاب ده. الكتاب مكتوب من وجهة نظر Developer، بيديلك Tips & Tricks عشان تخلي التصميم بتاعك يكون جميل. الموضوع عامل بالظبط زي ما تكون بدأت لعبة ولسه Newbie وبعدين تستخدم Hack يخلي قدراتك عالية جدا بدون ما تتعب، وده بالظبط اللي انت هتعمله في الـ UI Design عن طريق الكتاب.

محتوى الكتاب

الكتاب حجمه حوالي 220 صفحة بس معظمه صور. فأنت حتى لو ملكش في الكتب، هتلاقي الكتاب خفيف ولغته سهلة. الكتاب هيمر معاك بكل المراحل من أول ازاي تبدأ وتصمم System للـ Color, Font Size, Spacing ..إلخ، الى كل الأمور التانية اللي بتحتك بيها وانت بتصمم زي الـ Hierarchy والـ Layout وكل ما يخص التعامل مع الـ Text, Images, Color, Shadows وغيرهم.

الفيديوهات التطبيقية

بيجي مع الكتاب فيديوهين تطبيقيين عشان تطبق اللي اتعلمته، واحد عن تصميم Form والتاني عن تصميم Dashboard.

رابط الكتاب

لينك الصفحة الرسمية للكتاب:

https://www.refactoringui.com

سلسلة Javascript Visualized فيديوهات على اليوتيوب

2024-08-27T00:00:00Z

مقدمة

صاحبة سلسلة مقالات Javascript Visualized (اللي كنت نشرتها هنا قبل كده)، حولتها على شكل فيديوهات موجودة على اليوتيوب!

عن السلسلة

اللي ميعرفش، دي سلسلة عاملاها Lydia Hallie بتشرح فيها مواضيع متقدمة في الـ Javascript عن طريق انيميشن. مواضيع زي:

Event loop
Hoisting
Scope Chain
Javascript Engine
Prototypal Inheritance
Generators
Iterators
Promises
Async/Await

حتى الآن ملقتش أي محتوى على الانترنت بيشرح المواضيع المتقدمة دي بالسهولة والجمال ده.

رابط القناة

ازاي تفضل Up to Date في مجال الـ Front-end

2024-08-26T00:00:00Z

مقدمة

السوفت وير كما قال بشمهندس Mohamed Hammad: "مجال عنيف". بيتطور بصورة رهيبة، والكلام ده ينطبق تماما على الـ Front-end. كل ساعة الـ tools والتكنولوجي اللي بنستخدمها بتتطور، أو بتنزل حاجات جديدة، أو الـ Browser نفسه كمنصة بنطور عليها بيتحدث بشكل مستمر وبيوفر APIs جديدة، وكل شوية Trend جديد. فازاي انت كـ Front-end ديفلوبر تكون Up to date ومتابع اللي بيحصل؟

في البوست ده جمعت كل الـ newsletters والـ podcasts اللي متابعهم، معظمهم بيبعتلك بشكل أسبوعي. في منهم خاص بالـ CSS وفي بالـ Javascript/Typescript وفي بالـ React وفي بالـ UI/UX وفي بالـ Animation أو الـ Front-end بشكل عام.

General Front-end:

Javascript:

React:

CSS:

Animation:

UI/UX:

Tools:

console.dev

Podcasts:

Case Study خاصة بتحسين الـ Next.js Performance

2024-08-26T00:00:00Z

مقدمة

معظم المقالات في الغالب لما بتتكلم عن تحسين الـ Performance في الـ Next.js بتتكلم عن الـ dependencies والـ bundle size وازاي تعمل dynamic imports عشان تقلل حجم الباندل، في المقال هنا بيتكلم عن حاجه تانية مختلفة وهو حجم الـ HTML document وتأثيره على الـ Performance!

تأثير حجم الـ HTML Document على الأداء

الـ Next.js بتحقن الـ Props اللي انت بترجعها من getServerSideProps في الـ HTML عندك (هتلاقيها جوا script الـ ID بتاعه ___NEXT_DATA___) عشان عملية الـ Hydration. وبالتالي لو انت مرجع داتا حجمها ضخم ده هيكبر الـ HTML document وبالتالي هيقلل الـ Performance. حجم الداتا الضخم اللي انت بترجعه ده يرجع لمجموعة من الأسباب زي ان الـ REST API بيرجعلك داتا كبيرة جدا انت مش محتاجها بس انت بترجعها للـ Client زي ما هي.

تأثير الـ Server Side Rendering

المشكلة التانية اللي هو اتكلم عنها ان الـ React بتشتغل مرتين في حالة الـ SSR: مرة على السيرفر عشان تبني الـ HTML document، ومرة تانية على الـ client. وبالتالي لو انت بتعمل aggregation للداتا في الـ React Client فكده اللوجيك ده هيشتغل مرتين مرة على السيرفر ومرة عند اليوزر، عكس لو عملته على السيرفر ورجعته جاهز للـ Client.

الخاتمة

هسيبك مع المقال في شرح جميل لطريقة التغلب على المشاكل دي وهيفهمك حاجات.

رابط المقال: https://www.smashingmagazine.com/2021/05/reduce-data-sent-client-nextjs/

WordPress Plugin Database Trigger Manager

2024-03-01T00:00:00Z

مقدمة

بفضل الله عملت أول WordPress Plugin ليا، اسمها Database Trigger Manager!

فكرة الـ Plugin

فكرتها بكل ببساطة أنك تقدر تتعامل مع الـ Triggers من الـ Admin Dashboard.

الأسباب وراء إنشاء الـ Plugin

لما جيت اعمل Triggers ملقتش ال $wpdb بيدعم الـ Triggers والعملية مكنتش سهلة ومفيش plugins على حسب ما دورت مخصصة لحاجه زي كده.

رابط البلجن: Database Trigger Manager Github

مراجعة كورس Just Javascript لـ Dan Abramov

2024-02-01T00:00:00Z

بفضل الله أنتهيت من كورس Just Javascript الخاص بـ Dan Abramov (واحد من مطورين React و Redux)، الكورس ده الوحيد في حياتي اللي خلاني زعلان اني خلصته كأني بالظبط كنت بتفرج على فيلم او مسلسل ومش عايزه يخلص.

في الكورس ده Dan Abramov بيشرح الـ Mental Model الخاص بيه وازاي هو بيفكر بالجافاسكربت عن طريق انه بيصورلك ان الجافاسكربت انها عبارة عن Universe وهياخدك في رحلة جواه كأنك في مغامرة بالظبط عشان تبني Mental Modal وتشوف الجافاسكربت بنفس الطريقة اللي هو بيشوفها بيها.

لو انت اتعلمت الجافاسكربت بعد ما اتعلمت لغة برمجة تانية او حتى الجافاسكربت كانت اول لغة برمجة ليك أكيد بتقول او سمعت ان الجافاسكربت فيها حاجات كتير مش منطقية وفي تناقض! المشكلة هنا تكمن في حاجتين يا أما عشان انت عندك مفهوم جاي معاك من لغة التانية وبتحاول تطبقه بالعافية على الجافاسكربت، او لان اتشرح ليك الموضوع بتشبيهات معينة خلاك تشوف ان في حاجات مش منطقية ومش راكبة مع التشبيه ده (مثلا ان ال variables عبارة عن صناديق بيتحط جواها ال values).

الحل هنا في الكورس ده، الكورس هيخليك تبني Mental Model يخلي كل حاجه انت كنت مش مستوعبها او فاكرها متناقضة في الجافاسكربت منطقية جدا، الكورس عبقري وهيغير تفكيرك ناحية الجافاسكربت وناحية الطريقة اللي بتقرأ او بتـ Debug بيها الكود.

أعتقد ان حتى لو طفل صغير تابع الكورس ده هيفهم الجافاسكربت ويستوعبها بشكل كبير.

الكورس Text based مش فيديوهات، وDan Abramov متعاون فيه مع Maggie Appleton عشان يقدم Animation و Illustration عشان تسهل عملية الشرح والإستيعاب، الكورس عبارة عن 10 شباتر، واول واحد فيهم مجاني تقدر تشوفه قبل ما تشتري الكورس، وفي خصم لو انت من الدول النامية بيوصل سعر الكورس ل 10 دولار.

رابط الكورس:

Just Javascript

مراجعة كتاب Web Security for Developers

2023-09-02T00:00:00Z

واحد من أفضل الكتب اللي استثمرت وقت فيها وأستمتعت بكل حرف فيه هو الكتاب ده، الكتاب بيعرض اهم المشاكل والثغرات الأمنية اللي بيواجها اي موقع موجود لايف، مع طريقة حل المشاكل دي وازاي تتغلب عليها بأتباع أسلوب الـ Security in Depth يعني بيعرض عليك اكتر من حل للمشكلة بحيث انك تأمن نفسك بأكثر من طبقة حماية عشان لو في حاجه اتكسرت يكون في حاجه تانية تسد مكانها.

المواضيع التي يغطيها الكتاب

دي بعض المواضيع اللي بيغطيها الكتاب:

SQL Injection Attacks
Cross-site Scripting Attacks
Cross-site Request Forgery
Session Hijacking
XML Attacks
Denial-of-service Attacks
Encryption
Securing third-party Code
Information Leaks وغيرهم كتير!

مميزات الكتاب

الكتاب لغته سهلة وحجمه مش كبير 216 صفحة ومقسوم لجزئين. اول جزء بيشرح أساسيات مهمة لازم تكون عارفها، بعد كده الجزء الثاني بيبدأ في المشاكل الأمنية وطريقة حلها. أنصح اي مطور ويب بيكتب كود بيطلع للبرودكشن انه يقرأه.

إزاي تحمي الفرونت ايند جافاسكربت كود بتاعك من ان حد ينسخه او يسرقه او يفهمه؟

2023-08-01T00:00:00Z

اللي انت شايفه قدامك ده هو كود لفانكشن بتطبع Hello World بالجافاسكربت!
اللي قدامك في الصورة يعتبر ربع الكود بس اللي عرفت أخده سكرين شوت.

ما هذا؟ وازاي كود المفروض في العادي يكون 3 سطور بس يكون بالشكل ده؟
دي حاجه اسمها Obfuscation وهي عملية بتحول السورس كود بتاعك المقروء الطبيعي لحاجه بالشكل ده مستحيل انها تتقرأ او تتفهم من البشر، لكن الكومبيلر يقدر يشغلها وتطلع نفس الناتج بتاع السورس كود الأصلي!
والعملية دي بتم عن طريق سلسلة من التحويلات للسورس كود بتاعك من تغيير اسماء للمتغيرات لحقن كود ملوش علاقة بالموضوع وغيرها من الامور اللي بتخلي الكود مستحيل يتفهم.

ايه الفرق بينها وبين الـ Encryption؟

الـ Encryption بيحتاج Secret Key عشان تعمل Decryption للكود بتاعك عشان الكومبيلر يفهمه وبالتالي هتضطر تحط الـ Secret Key في السورس كود وبالتالي لسا عندك نفس المشكلة اي حد هيوصل Secret Key هيفك التشفير، انما الـ Obfuscation انت كأنك عملت تشفير للسورس كود ومع ذلك الكومبيلر يقدر يفهمه.

ده اللينك بتاع الأداة اللي بتعمل الموضوع ده:
https://www.obfuscator.io

السؤال الحقيقي

ايه اللي ممكن يخلي حد يلجئ لحاجه زي دي؟
أنا مش شايف اي Use Case تستحق حاجه زي كده في النهاية الفرونت ايند كود المفروض انها حاجه Public ولو عندك حاجه مهمة زي مثلا Algorithm معين خايف ان المنافسين بتوعك في نفس المجال ينسخوه ويستخدموه فالأفضل انك تنقل حاجه زي دي للسيرفر عندك، او مثلا لو شايف ان ده هيصعب الموضوع على الـ Attacker بإنه يقرأ السورس كود ويلاقي ثغرات عندك فالأفضل انك تبحث وتسد الثغرات اللي عندك.

مقال من Auth0 بيناقش الطرق المتاحة لتخزين الداتا في المتصفح من ناحية الـ Security

2023-06-01T00:00:00Z

مقال جميل من Auth0 بيناقش الطرق المتاحة لتخزين الداتا في المتصفح من ناحية الـ Security وخصوصا ضد الـ XSS/CSS (Cross-Site Scripting) attacks.

أنصحك تقرأها خصوصا لو انت فرونت أيند ومضطر تخزن اي Sensitive data في المتصفح عند اليوزر لأي سبب من الأسباب، أحلى حاجه في المقال ان فيه أمثلة عملية:

https://auth0.com/blog/secure-browser-storage-the-facts/

شرح من الريبو الخاصة بـ Proton Mail عن إزاي بيخزنوا Sensitive Data في الـ User browser

2023-03-01T00:00:00Z

الـ Requirements بتاعتهم ان الداتا دي متتخزنش في الهاردديسك الخاص باليوزر وتكون مرتبطة بالسيشن يعني لو اليوزر قفل المتصفح او الـ Browser Tab الداتا تختفي وفي نفس الوقت يحافظوا عليها لما اليوزر يعمل ريلود.

أول خيار كان قدامهم انهم يخزنوا الـ Sensitive Data دي في الميموري ومتتخزنش نهائي في الـBrowser Storage لكن المشكلة اللي هتواجهم ان بمجرد ما اليوزر يعمل ريلود الداتا دي هتختفي.

الخيار التاني هو الـ sessionStorage بما أن الداتا بتفضل موجودة فيه لو اليوزر عمل ريلود وكمان وقت ما اليوزر يقفل المتصفح او الـ Tab الداتا هتختفي لكن المشكلة ان معظم المتصفحات بتخزن الداتا الموجوده في الـ sessionStorage في الهارديسك بتاع اليوزر عشان الـ session recovery feature. وهم مش عايزين الداتا دي تتخزن في الهاردديسك.

الخيار التالت هو Property اسمها Window.name بتسمحلك انك تخزن الداتا فيها وبتفضل موجودة لما اليوزر يعمل ريلود ومبتتكتبش على الهارديسك، وكمان لو اليوزر قفل الـ Browser Tab بتتسمح، لكن مشكلتها ان في ناس بتستخدمها في الـ Cross-domain communication وبالتالي الـ Websites التانية تقدر تقرأ القيمة اللي فيها، فبردو مينفعش يخزنوا فيها الداتا بشكل كامل، طيب ايه الحل؟

الحل

الحل انهم هيعملوا Two tricks، الاولى انهم هيسيبوا الداتا في الميموري ومش هيخزنوها في الـBrowser الا قبل ما الميموري تتمسح، عند الـ Page unloads.

التركايه التانية انهم هيفصلوا الداتا دي لجزئين بإستخدم الـ XOR، اولا هيعملوا Generate لـ Random Value وبعدين هيعملوا XOR ليها مع الـ Private data زي كده:

X = Private ^ Random
Y = Random

الـ X هتتخزن في الـ sessionStorage ، والـ Y هتتخزن في الـ Window.name!
فهنا لو افترضنا ان في حد عنده Access على الهارديسك فهو هيقدر يقرأ الحاجه المتخزنة في الـ sessionStorage اللي في الحالة دي X لكن مش هيقدر يقرأ الحاجه المتخزنة في الـ Window.name وبالتالي مش هيقدر يوصل لحاجه، الحاجه التانية ان الـ Websites التانية تقدر تقرأ قيمة الـ Y وده بردو مش هيفرق معانا لانها اولا Random ثانيا ان اي موقع تاني مش هيقدر يوصل للـ sessionStorage بتاعتنا عشان الـ Same-origin policy!

النتيجة

بعد ما اليوزر يعمل ريلود تقدر تعمل X ^ Y فتوصل لقيمة الـ Private data ودي حاجه معروفة في الـ XOR:

X ^ Y = Private ^ Random ^ Random

الـ Random هيكنسلوا بعض فهيتبقالك الـ Private Data.
تقدر تقرأ شرحهم والـ Implementation للكلام ده كله من الريبو بتاعتهم من هنا:

github.com/ProtonMail

لقيت كنز وحبيت اشاركه معاكم، سلسلة المقالات دي بتشرح مواضيع مهمة في الجافاسكربت عن طريق الأنيميشن

2023-01-20T00:00:00Z

لقيت كنز وحبيت اشاركه معاكم، سلسلة المقالات دي بتشرح مواضيع مهمة في الجافاسكربت عن طريق الأنيميشن زي:

Event loop
Hoisting
Scope Chain
Javascript Engine
Prototypal Inheritance
Generators
Iterators
Promises
Async/Await

أنصحك بردو تتابع صاحبة السلسلة دي لانها بتعمل Visualization لمواضيع تانية غير الجافاكسربت زي اوامر Git وغيرها, وده لينك السلسلة:

dev.to/lydiahallie

واحد من المواضيع اللي بيحصل فيها جدال وإختلاف هو هل الـ Data Structures مهمة للـ Frontend developers؟

2023-01-01T00:00:00Z

من وجهة نظري سبب وجود الخلاف ده عن أهميتها للفرونت ايند من عدمه هو ان اللي بيقول انها مهمة مبيديش امثلة حقيقية عن أستخدامها في الفرونت ايند، وغالبا الإجابة بتكون بالشكل ده:

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

المقال ده عظيم بيدي Real World Examples بتستخدم فيها الداتا ستراكشر في الفرونت أيند والأمثلة مش خيالية او نادرة دي حاجات انت بتشوفها بعينك كل يوم في اي موقع تقريبا.

الجميل بردو انه كاتب الأمثلة بالـ React.js عشان يوريك الموضوع in action مش مجرد كلام نظري وخلاص، وبردو اتكلم عن الـ Performance وازاي لو استخدمت الداتا ستراكشر المناسبة هتحسن الـ Performance بشكل كبير.

الداتا ستراكشر والـ Real World Example:

Map -> Messages with user names.
Set -> Keeping track of selected items.
Stack -> Undo previous actions.
Queue -> Notifications.
Tree -> Nested menus or comments.

حاول لو انت مقتنع ان الداتا ستراكشر ملهاش لزمة للفرونت ايند انك تقرأ الأمثلة اللي هو كاتبها وشوف انت هتحل المشكلة دي ازاي وقارن بالحل بتاعه، وده لينك المقال:

https://profy.dev/article/javascript-data-structures#real-world-example-undo-previous-actions

لقيت المقالة الجميلة دي فيها Sketches بتشرح الـ SOLID Principles

2022-12-20T00:00:00Z

لقيت المقالة الجميلة دي فيها Sketches بتشرح الـ SOLID Principles

رابط المقالة

مراجعة كتاب Learning React Modern Patterns for Developing React Apps

2022-09-19T00:00:00Z

قررت في أجازة العيد اني أتعلم تكنولوجي جديدة وأخترت الـ React وأخترت الكتاب ده عشان اتعلمها منه بعد ما شوفت ناس بترشحه على Reddit.

الكتاب عبارة عن 12 شابتر في أول شابتر بيبدأ بالـ Modern Javascript وبعد كده تاني شابتر بيشرح الـ Functional Programming هتلاقي بقى شرح لمفاهيم كتيرة زي الـ Immutability , Pure Functions , Higher Order functions , Data Transformations ..إلخ
بعد كده بيخش في الريأكت ويبدأ يتعمق واحدة واحدة من اول الـ React بتشتغل ازاي ويعني ايه component وJSX ويبدأ يتعمق في مواضيع زي الـ State Management والـ Hooks و Request and Sending data وشابتر كامل عن كل من الـReact Testing و React Router وكان في ضمن الشباتر بردو مقدمة بسيطة عن الأسماء دي Typescript, GraphQl, Next.js, Gatsby، في حاجات تانية كتيرة بردو ممكن تفتح الـ Table of contents عشان تشوف المحتوى كامل.

في حاجات بسيطة طنشتها ومدتلهاش اهتمام كامل وعرفت بوجودها وهرجعلها بعدين لأن الكتاب ده هستخدمه بإذن الله كمرجع بعد كده وأرجعله وانا شغال، الكتاب جميل ومليان تفاصيل كتير، لو ناوي تقرأه اتأكد انك هتقرأ الإصدار الثاني، حجمه حوالي 310 صفحة.

كنت بتصفح في موقع كورسات شهير وبعدين لاقيتهم حاطين في المميزات أن كورساتهم Text-based

2022-09-01T00:00:00Z

كنت بتصفح في موقع كورسات شهير وبعدين لاقيتهم حاطين في المميزات اللي تخليك تشترك وتتعلم معاهم أن كورساتهم Text-based وبيوضحوا ليه أن ده افضل واسرع من الفيديوهات وبيأكدوا على الجزئية دي في كل كورس وكل صفحة في الموقع تقريباً.

كشخص محب للتعلم من الكتب أو الTutorials الtext-based عموما، اتمنى اني اشوف منصة عربية الكورسات فيها تكون Text-based أو كتب برمجة باللغة العربية أو حتى حد من المهندسين الكبار اللي بيعمل كورسات يفكر في أن الكورس بتاعه القادم يكون Text-based، والسبب أن القراءة عموما ممتعة بس هتكون أكثر متعة لو كانت بالعربي اللغة الأم.

مميزات من نظري بتخلي الشرح المكتوب افضل من الفيديوهات:

سهولة تعديل الأخطاء، لو قولت معلومة غلط تقدر تصححها بسهولة.
أقل جهد بكتير من التصوير والمونتاج.
اللي بيتعلم منك هيتعلم بطريقة أسرع وصعب أنه يحس بالملل.
ممكن تتيح الفرصة للناس لتحسين المحتوى معاك، هتلاقي ناس تانية قوية في المجال تخش تعدل وتضيف وتحسن من المحتوى بتاعك (حاجه زي MDN او ويكيبيديا كده)، دي احسن وأسرع طريقة للحصول على محتوى تقني قوي ان الكل يتعاون فيه.

ايه افضل نص ساعة ممكن تقضيها من وقتك لو انت JavaScript Developer؟

2022-08-10T00:00:00Z

ايه افضل ~نص ساعة ممكن تقضيها من وقتك لو انت JavaScript developer؟

الإجابة انك تشوف الفيديو ده:

ازاي ممكن تلاقي أفضل كتاب في حاجه معينة عايز تتعلمها؟

2022-07-01T00:00:00Z

الموضوع نسبي لان افضل دي تحمل معاني كتير بس أكيد في كتب افضل من كتب تانية في نواحي معينة زي الدخول في التفاصيل ومن ناحية سهولة اللغة المستخدمة والأسلوب والشيء اللي بيحاول الشخص يقدمه عن طريق الكتاب والكتاب مستهدف مبتدئين ولا ناس مستواها متقدم ..إلخ، طب ازاي ممكن تلاقي كتاب كويس تبدأ فيه وتختار ما بين مئات الكتب؟

الطريقة المختصرة والأضمن انك تشوف بشمهندس محمد حماد Mohamed Hammad هتلاقيه مرشح كتب في حاجات كتير، عمري ما قرأت في كتاب هو رشحه الا ولقيته كتاب جميل ومميز، بس ممكن تكون انت مهتم بتكنولوجي معينة هو مرشحش فيها كتب تعمل ايه؟ دي الطريقة اللي انا بعملها وغالبا بتنفع معايا وبصطاد بيها كتب كتير عظيمة.

هتخش على جوجل وتكتب افضل كتاب + اسم الحاجه اللي عايز تتعلمها + اي تفاصيل زيادة لو كنت بتدور على كتاب للمبتدئين او كتاب متقدم + تكتب Reddit.
كل ده بالأنجليزي هيطلعلك شوية نتائج ع جوجل افتحها كلها.

يعني مثلا كده Best React.js book for beginners Reddit

هتلاقي في اللينكات اللي فتحتها في Reddit ناس بتطلب ترشيح كتب تقرأها وناس بتجاوب عليهم، فهتاخد الترشيحات دي وتعمل بيها قائمة وهنا انت بدل ما كان عندك مئات الكتب اصبح عندك قائمة فيها عشر كتب او اقل، وهتلاقي في اسماء كتب بتتكرر حط الكتب دي في الأولويات.

طب ليه Reddit بالذات؟

عشان اغلب الناس هناك هتلاقيهم بيرشحوا كتب هم فعلا قرأوها وشايفين انها فادتهم والموضوع مش هيكون بغرض التسويق زي ما الموضوع ده منتشر على Quora مثلا وبالتالي تضمن انك تلاقي افضل الخيارات بدون تحيز او محاولة تسويق، وطبعا مش عايز اقولك فكك من اي مقالة ناشرة مجموعة من الكتب ومرتبينهم لان مية في المية الموضوع تسويق وبياخدوا عمولة.

نيجي للمرحلة التانية:

هتاخد اسماء الكتب دي وتكتبها على جوجل وتشوف لو ليها موقع رسمي او موقع دار النشر بتاعها او حتى امازون وتدخل تقرأ الوصف بتاع الكتب، الوصف ده ممكن يساعدك بشكل كبير جدا على اختيار الكتاب المناسب هتلاقي مثلا صاحب الكتاب بيوضحلك ان الكتاب ده مختلف عن الباقي وانه بيعالج مشكلة معينة، مثلا كتاب Pure React لما قرأت الوصف بتاعه لاقيت صاحب الكتاب بيوضح المشكلة الموجودة في الكورسات والكتب اللي على الانترنت وازاي كتابه بيعالج المشكلة دي، يعني واضح ان الراجل ده مش عامل الكتاب وخلاص هو بيحاول فعلا يحل مشكلة.

هنا انت ممكن تلاقي في الأخر ان بقى قدامك كتاب ولا أتنين محتار ما بينهم طب تعمل ايه؟

اختار اي واحد فيهم وابدأ على طول، ممكن لو مش عايز تضحي وتشتري الكتاب ويطلع نص كوم، ففي طرق كتير شرعية ورسمية انك تقرأ الكتب بشكل مجاني من دار النشر الخاصة بيهم، وفي ناس بتسمحلك تقرأ اول شابترين ولا حاجه مجانا ممكن الطريقة دي تستخدمها بردو عشان تعرف الكتاب ده يناسبك ولا لأ.

حاجه مهمة تخلي بالك منها هي تاريخ اصدار الكتاب وله تحديثات ولا لأ خصوصا في كتب التكنولوجي لان في تكنولوجي بتطور بشكل كبير جدا وممكن الكتاب يكون قديم.

مراجعة كتاب Pure React

2022-05-01T00:00:00Z

بفضل الله انتهيت من قراءة كتاب Pure React، الكتاب ده افضل كتاب بيشرح تكنولوجي قرأته في حياتي، وده بسبب انه بيتبع فلسفة معينة مختلفة عن اللي بيستخدمها باقي الناس اللي بتشرح الـReact بالذات، لو انت لسا بادئ تتعلم React او بدأت وحاسس انك تايه وفي حاجات كتير مش فاهمها، فغالبا ده بسبب الطريقة اللي بتتشرح بيها الـ React هتلاقي معظم الكورسات والكتب لما بتيجي تشرحلك الـ React بتشرح معاها حاجات تانية كتير زي Webpack, Babel, Redux, React Router, Next.js, Gatsby, Firebase, Docker!!

لو جبتلك فرخة وقولتلك كلها، هل معقولة تحاول تشيلها كلها زي ما هي بعضمها وتحاول تحطها في بوقك مرة واحدة؟ مستحيل، أكيد هتاخد حته حته لحد ما تخلصها، كذلك نفس الأمر لو عايز تتعلم React لازم تاخد حته حته تتعلم اساسيات المكتبة اول وتفهم الدنيا ماشية ازاي وبعد كده تنقل على الإضافات والحاجات الجانبية، الكتاب ده من اسمه هو معمول عشان يحل المشكلة دي Pure React! هتتعلم React فقط، وبسبب الفلسفة دي المؤلف اصبح عنده اريحيه وبيشرح كل حاجه بالتفصيل الممل

كمثال بسيط لما جه يشرح الـ Components هيبدأ معاك من الصفر ويحاكي معاك الـprocess اللي هتم بشكل كامل يعني لو افترضنا مثلا عندك جزء معين في الموقع بتاعك عايز تعمله فهو هيشرحلك انك في البداية هترسم الجزء اللي انت عايز تصممه على ورقة وبعدين تبدأ تشوف ايه الأجزاء اللي مفروض تختارها كـcomponent وهيقولك تختار ده على أساس ايه وبعدين تدي لكل واحد فيهم إسم وبعدين تبدأ تكتب الكود وتـ implement الكلام ده كله، وبيشرح الموضوع ده كله بمثال عن ازاي تصمم tweet، ومش بس كده هيكلمك كمان عن مفروض تبدأ بأيه الأول هل تبدأ بالأب وبعدين الـ children بتوعه ولا العكس (Top-Down, or Bottom-Up) وهيقولك امتى تختار دي وامتى تختار دي وعيوب كل طريقة، هتيجي تبص تلاقي انه بيرتب أفكارك وبيعرفك هتمشي ازاي عشان متحسش بتوهان.

هيشرحلك ازاي تفكر وتطور الـ Declarative Thinking وخصوصا لو انت كنت شغال imperative programming قبل كده فأنت محتاج تغير من طريقة تفكيرك وهيديك شوية أمثلة عملية وازاي تفكر في حلها وهيقارن بين الطريقة العادية في الحل والـ declarative way أمثلة بقى زي Notifications و Animating a Change..إلخ

بردو في حاجه تانية كويسة وهو انه بيشرح Class Component و Functional Component وHooks بالتفصيل، معظم الكورسات والكتب بتطنش الClass component لدرجة ان انا كنت مفكر انها deprecated، لكنها مدعومة في كل إصدارات الـ React من البداية ووارد انك تقابلها في بروجكيت قديم.

حاجه تانية بردو تخلى الكتاب ده ممتاز انه بيشرح امثلة وبيدي Exercises كتير وعنده فلسفة فيها كويسة بردو اللي هي لا إفراط ولا تفريط مش هتلاقيه مثلا بيشرحلك امثلة او يديك Exercises عيانة زي انك تعمل counter وخلاص كده ولا بردو هتلاقيه بيقولك يلا نعمل الفيس بوك! لكن هتلاقيه مثلا بيستخدم اجزاء من المواقع المشهورة ويشتغل فيها على أساس انك تتعلم وتتدرب على الحاجه اللي بتتدرسها وفي نفس الوقت متخشش في حاجه كبيرة اوي تتوهك وتحتاج منك معلومات تانية، يعني مثلا هتلاقيه شغال على الـ Github File list يجبلك صفحة من Reddit يجبلك صفحة من Pinterest يجبلك حته من تويتر وهكذا.

في حاجات تانية كتير بيتكلم عنها زي Component Lifecycle وغيرها، الكتاب عبارة عن 21 شابتر كلهم عن الـ React وحجمه حوالي 250 صفحة.

ملخص المحاضرة الأولى وأول شابتر من كورس وكتاب Mathematics for computer science

2022-04-30T00:00:00Z

ملخص المحاضرة الأولي وأول شابتر من كورس وكتاب Mathematics for computer science لمعهد الـMIT بعنوان Introduction and Proofs.

في البداية أيه هو الـ Proof؟ الـProof او البرهان هو طريقة للتحقق من حقيقة شيء ما او إثبات حقيقة شيء ما. في المجتمع في طرق كتير للتحقق من حقيقة شيء ما زي مثلا الملاحظة والتجربة، القضاة، الدين، رئيسك في الشغل، في مجال التجارة مثلا في مثل بيقول الزبون دايما على حق.
طيب ايه هو ال mathematical proof؟
a Mathematical proof is a verification of a proposition by a chain of logical deductions from a set of axioms.
خد بالك ان في التعريف ده في 3 حاجات مهمين جدا وهم اللي هتدور حواليهم المحاضرة دي وهم الـ proposition و logical deductions و axioms.

تعالى نبدأ بأول جاجه يعني ايه proposition؟
الـ proposition هي جملة يا أما تكون true او تكون false، مثال على كده 2+3 = 5، دي statement اهي وقيمتها true، طيب 1 + 1 = 7 دي بردو statement ولكن false.

عندي حاجه تانية اسمها Predicate ودي بتكون عبارة عن statement لكن فيها متغير والـ truth value بتاعتها بتعتمد على المتغير ده معنى كده ان في طريقتين عشان احول الـ predicate دي لـ proposition يا أما اعوض عن المتغير بقيمة حقيقية، او حاجه تانية اسمها quantification مثال على كده:
∀ n ∈ N (n^2 + n + 41) is a prime number
حرف الـ A المقلوب ده أسمه universal quantifier وبيتنطق كده for all يعني ترجمه الجملة اللي فوق دي: For every nonnegative integer, n, the value of n^2 + n + 41 is prime. والـ N هنا اسمها universe of discourse.
معنى كده ان ال statement دي ترو لكل الأعداد الغير السالبة، وبالتالي عشان نقدر نثبت الكلام ده محتاجين نجرب كل الأرقام الغير سالبة!
تعالى نجرب كده 0 هيطلعلك 41 وده فعلا عدد أولي، طب تعالى نجرب 1 هيطلعلك 43 وده بردو عدد أولي، افضل جرب كده لحد 39 هتلاقي كل اللي هيطلعلك أعداد أولية، يعني شكل كده ال statement ده هتطلع صح ولا ايه! طب تعالى نجرب 40 كده، هيطلعلك 1681 بس ده مش عدد أولي!
إذا بما ان ال statement اللي فوق دي بتقول ان المعادلة دي true لكل الأعداد الغير سالبة وانت لقيت عدد الـ statement عنده بـ false إذا الجملة دي غير صحيحة والرقم اللي انت لقيته اللي اسمه 40 ده بيسموه counter example.

مثال آخر:
a^4 + b^4 + c^4 = d^4 has no solution when a, b, c, d are positive integers.
بيقولك من الأخر كده مستحيل تلاقي 4 ارقام غير سالبة تحقق العلاقة دي، وده كان conjecture من Euler في سنة 1769، وconjecture ده معناها انها statement لسا مقدرناش نعرف اذا كانت true ولا false يعني لا ترقي انها تكون theory لان منقدرش نجرب كل الأعداد الغير سالبة لان ملهاش نهاية وفي نفس الوقت لم نجد counter example ليها عشان نثبت انها خطأ، الكلام ده فضل قرنين لحد ما أخيرا حد قدر يـdisprove it ووجد فعلا counter example ليها وكانت الأرقام كده:
a = 95800, b = 217519, c = 414560, d = 422481

مثال آخر:
z^3 = 313(x^3 + y^3) has no solution when x, y, z are positive integers.
مش عايز أفاجئك بس اول counter example وجدوه كان رقم بيحتوي على اكتر من ألف digits!

نيجي بقى للسؤال المهم، وأنا أيه اللي يخليني احاول الاقي حلول لحاجات زي دي؟ وليه في ناس ممكن تقضي وقت كبير جدا من حياتها في محاولة إيجاد حلول لحاجات زي دي؟

الموضوع ده مهم عشان ال factoring اللي هو الطريق عشان تقدر تكسر crypto systems زي RSA واللي هو بيستخدم في كل حاجه بتقوم بيها إلكترونيا النهاردة من الشراء أون لاين والـ SSL وده كله معتمد على الـ Number theory وبالتحديد الـ factoring. أنت لو تقدر تكسر الـ Crypto Systems اه مش هتحكم العالم بس هتكون قريب من كده :)

احنا شوفنا اكتر من مثال لحد دلوقتي وكل واحد فيهم له حل، لكن في حاجات حتى النهاردة ملهاش حل، مثلا goldbach conjecture، بيقولك ان اي رقم موجب زوجي معادا الـ 2 تقدر تمثله عن طريق جمع عددين أوليين الكلام ده من 1742 لحد النهاردة محدش قدر يعرف اذا كانت true او false! ودي مصنفة كواحدة من أعظم الألغاز الغير محلولة على الإطلاق.

في نوع مهم جدا من الـ statements وهيكون مبني عليها حاجات كتير بعد كده وهي الـ conditional statement واللي هي على الشكل ده:
افترض ان عندك أتنين propositions وليكن p, q، الـ statement بتاعتك بتكون على الشكل ده If p, then q وبالرموز هتكون كده p → q والـ statement دي بتكون false في حالة واحدة فقط وهي لو الـ p قيمتها true والـ q قيمتها false. يعني لو عملت truth table فدي الحالة الوحيدة بس اللي هيكون فيها p → q بـ false.

الحاجة التانية اللي كانت في اول تعريف اخدناه الخاص بالـ mathematical proofs وهي الـ Axioms ودي عبارة عن propositions بردو لكن احنا بنفترض انها true ملهاش إثبات يعني، حاجه انت شايفها منطقية جدا عشان تفترض انها true، على سبيل المثال a = b, b = c إذا a = c، وخد بالك ان في ناس بتقول ان في الرياضيات مينفعش تعمل إفتراضات وده كلام غلط طبعا لازم تبدأ بإفتراضات وإلا مش هتقدر توصل لحاجة أساسا. حاجه مهمة انك تحدد الـ axioms بتاعتك عشان اي حد بيقرأ ال proof بتاعك يشوفها وبالتالي لو هو متفق مع الـ axioms دي فهيتفق مع الـ conclusion.

تالت حاجه والأخيرة في التعريف وهي الـ Logical Deductions او الـ Rules of inference ودي بستخدمتها عشان اثبت propositions جديدة بإستخدام proposition انا أثبتها قبل كده، يعني تعالى كده على سبيل المثال نمسك الـ conditional statement اللي اتكلمنا عنها فوق:
لو قولتلك ان عندك proposition اسمها p وقيمتها true وقولتلك ان عندك p → q كمان true تقدر تستنتج ايه من الكلام ده؟ الإستنتاج ان الـ q كمان true، طب ازاي؟ لان احنا قولنا فوق ان الحالة الوحيدة ان p → q تكون بـ false وهي لو الـ p ترو والـ q بـ false بس هنا انا قولتلك ان p → q بـ true وبالتالي الـ q مستحيل تكون false فإذا لازم تكون true.
مثال تاني لو قولتلك ان ال proposition دي p and q ترو، يبقى إذا تقدر تستنتج ان الـ p بترو والـ q كمان بترو.
تقدر تبحث عن باقي الـ Rules of inference على جوجل.

وبكده ده يكون ملخص المحاضرة الأولى والشابتر الأول في الكتاب الخاص بالـ MIT

مراجعة كورس Discrete Mathematics لدكتور وليد يوسف

2022-03-20T00:00:00Z

بفضل الله أنتهيت من كورس الـ Discrete Mathematics الخاص بدكتور وليد يوسف وما يعادله من قراءة شابترز وحل مسائل من كتاب Discrete Mathematics and its Applications لـ Rosen. الكورس ده غير كتير من طريقة تفكيري وأخذ مني وقت كبير أكتر ما كنت متوقع.

أولا كنت مقتنع أن الكتب فيها كل اللي أنا محتاجه وأن الفيديوهات مجرد تضييع وقت، يعني ليه أروح أشوف فيديو لحد بيشرح معلومات من كتاب لما ممكن أقرأ من الكتاب على طول؟ وبما أني كنت بقرأ الكتاب بالتوازي مع المحاضرات يعني أخلص الفيديو وبعدين أقرأ الجزء الخاص به من الكتاب (وأوقات عملت العكس)، اكتشفت أن المحاضر بيقول حاجات كتير جدا مش موجودة في الكتاب وبيركز على مفاهيم وحاجات كتير لو كنت قرأت الكتاب بس مكنتش هعرفها زي أنه طول الكورس بيأكد على أنك لازم تكون rigorous، مينفعش تأخذ حاجة كده زي ما هي وتقول إنها واضحة مش محتاجه إثبات! طالما واضحة وسهلة كده خلاص إثبتها!

المحاضر خلال الكورس بيأكد على الـ Applications والـ Motivation، ودي حاجة ناقصة في طريقة التدريس اللي شفتها طول حياتي مع الرياضيات لأننا بندرسها بدون أدنى ربط بالتطبيقات والحياة العملية. لكن هنا الموضوع مختلف، حتى المحاضر مختار كتاب من اسمه تعرف إنه هيتكلم عن التطبيقات مش بيرمي لك رياضيات كده في وشك وخلاص.

المحاضر بردو هينصحك تشوف أول محاضرة في كورس الـ Digital Design اللي هو عامله. في المحاضرة دي هيوريك العلوم مرتبطة ببعض إزاي، هيربطلك بين الرياضيات والـ Electronics والـ Logic Gates. حاجة فوق الخيال لما تشوف 3 أو 4 مواد وربطهم ببعض هتعرف قيمة كل حاجة بتدرسها. أتحداك لو الإبتسامة مترسمتش على وشك بعد المحاضرة دي، خصوصا لو كان عندك فكرة عن المواد دي بس كنت بتدرسها بطريقة عيانة.

حاجة تانية مهمة بردو أن المحتوى ده نضيف جدا ودسم ومحترم. وللمقارنة، ممكن بعد ما تشوفه روح شوف أول محاضرتين من كورس MIT بتاع Mathematics for Computer Science وده مفروض محتوى عالمي، بس مشرحش الجزء الخاص بالـ Propositional Logic والـ Predicates and Quantifiers وحاجات في الـ Proofs وحاجات تانية كتير بنسبة 5% من اللي اتشرح في الكورس ده. والجميل أنه محتوى عربي لكن مستواه عالمي ويتفوق على العالمي كمان.

العيب الوحيد للأسف أن كان مخطط يتشرح الكتاب تقريبا في 3 كورسات، متعملش منها غير واحد بس اللي هو ده، لإن دكتور وليد مسافر دلوقتي ومشغول بأمور تانية. ربنا يوفقه، يعني هتكمل لوحدك للأسف بدون المحتوى الجميل ده.

أهم المواضيع اللي أتعلمتها من الكورس:

Propositional Logic
Predicates and Quantifiers
Rules of Inference
Introduction to Proofs
Proof Methods and Strategy
Sets
Functions
Sequences and Summations
Cardinality of Sets

لينك الكورس: كورس Discrete Mathematics

مراجعة كتاب The Object Oriented Thought Process

2022-01-01T00:00:00Z

بفضل الله أنتهيت من كتاب The Object Oriented Thought Process ودي مراجعة بسيطة هحاول أقنعك بيها ليه انت محتاج تقرأ الكتاب ده.

الكتاب أولا حجمه صغير حوالي 180 صفحة (الإصدار الخامس)، هدفه إنه يخليك تفكر بطريقة Object Oriented. في بداية الكتاب المؤلف بيتكلم عن الخطأ اللي بيقع فيه معظم الناس (واللي أنا كنت واحد منهم) وهو أنك تبدأ تتعلم وتتعرض للغة برمجة OO قبل ما تفهم الObject Oriented Concepts أو تدخل في كتب الـ OO Analysis/Design/Programming قبل ما تبني Foundation قوي وتعرف ازاي تفكر بطريقة OO. وادى مثال عن انتقال كثير من مطورين الـC للغة الـC++ بدون فهم الOO Concepts ولا أتعلموا ازاي يفكروا بطريقة OO، وده اللي خلى ناس كتيرة منهم لما بتدعي إنهم C++ programmers في أي interview كان بيبان أنهم مجرد C programmers بيستخدموا C++ compilers!

أول 9 شابترات بيتكلموا عن الـ Classical OO Concepts اللي هم: Encapsulation, Inheritance, Polymorphism, and Composition. هيتكلم عن Class Design Guidelines، وهيركز على ازاي تصمم OO System اللي هو عبارة عن مجموعة من الـ Classes بتـ Interact مع بعضها. كمان هيتكلم عن الـ Interface, Abstract Class والفرق الحقيقي ما بينهم وازاي الأتنين دول بيلعبوا دور كبير في تصميم الـ OO Systems.

ومن المواضيع المهمة في الكتاب هو "How Inheritance Weakens Encapsulation؟" وإزاي أتنين من أساسيات الـ OO يكونوا incompatible مع بعض بحيث إن الـ Inheritance يكسر الـ Encapsulation!

وهيتكلم عن مواضيع تانية زي Composition over Inheritance وغيرها.

شابتر 10 هيتكلم عن الـ Design Patterns والشابتر ده ما هو إلا مقدمة بسيطة هيعرفك إن في حاجة اسمها Design Patterns ووضعها مع شرح بسيط لكام Pattern منهم.

شابتر 11 تحت عنوان "Avoiding Dependencies and Highly Coupled Classes" هيحط الأساس اللي هيبني عليه بعد كده في الشابتر اللي بعده الخاص بالـ SOLID Principles.

شابتر 12 والأخير هيتكلم عن الـ SOLID بشرح بسيط عن كل مبدأ ومثال مع ربطهم بالـ Classical OO Concepts اللي اتكلم عنهم طول الكتاب.

من الحاجات الجميلة في الكتاب إنه بيقتبس كلام من كتب تانية مهمة وهو بيشرح وبيحطهم كمرجع في نهاية كل شابتر عشان لو عايز تتعمق أكتر في الموضوع، واخدت منه شوية أسماء كتب حلوين. الكتاب صغير وجميل وبيقدم حاجة مختلفة عن باقي الكتب والكورسات اللي على اليوتيوب. أنا رأيي المتواضع إن بداية تعلم الـ Object Oriented لازم تكون من هنا.

خد بالك بردو من شوية حاجات لو أشتريت الكتاب وقررت تقرأه:

الكتاب فيه أخطاء سواء في الأكواد ودي حاجة تافهة يعني أو في الكلام، يعني كان في جملة نفى فيها جزء وأثبت جزء تاني ولففني حوالين نفسي شوية، والعجيب إنه عمل خمس إصدارات ومصلحش الأخطاء دي.
تأكد إنك هتقرأ النسخة الخامسة لأن هي اللي فيها الـ SOLID.

محمد صلاح

التعامل مع Secret API Keys في Frontend Apps

مقدمة

تفاصيل المشكلة

خطورة كشف Secret Keys

الحلول المقترحة

الحل الخاطئ:

الحل الصحيح:

بدأت استخدم Cursor IDE ومن الواضح أنه هيكون قاتل VS Code

مقدمة

مميزات Cursor IDE

أكبر مشكلة بتواجه المحتوى العربي التقني

مقدمة

مقارنة مع المحتوى الأجنبي

المشكلة مع السوشيال ميديا

فقدان المحتوى

الحل

استخدم Lazy Initialization في React

مقدمة

المشكلة اللي بتحصل بسبب الـ Rerendering

الحل باستخدام Lazy Initialization

مراجعة كتاب Refactoring UI

مقدمة

الكتاب ومن هو مؤلفه

كيف يساعدك الكتاب؟

محتوى الكتاب

الفيديوهات التطبيقية

رابط الكتاب

سلسلة Javascript Visualized فيديوهات على اليوتيوب

مقدمة

عن السلسلة

رابط القناة

ازاي تفضل Up to Date في مجال الـ Front-end

مقدمة

General Front-end:

Javascript​:

React:

CSS:

Animation:

UI/UX:

Tools:

Podcasts:

Case Study خاصة بتحسين الـ Next.js Performance

مقدمة

تأثير حجم الـ HTML Document على الأداء

تأثير الـ Server Side Rendering

الخاتمة

WordPress Plugin Database Trigger Manager

مقدمة

فكرة الـ Plugin

الأسباب وراء إنشاء الـ Plugin

مراجعة كورس Just Javascript لـ Dan Abramov

رابط الكورس:

مراجعة كتاب Web Security for Developers

المواضيع التي يغطيها الكتاب

مميزات الكتاب

إزاي تحمي الفرونت ايند جافاسكربت كود بتاعك من ان حد ينسخه او يسرقه او يفهمه؟

ايه الفرق بينها وبين الـ Encryption؟

السؤال الحقيقي

مقال من Auth0 بيناقش الطرق المتاحة لتخزين الداتا في المتصفح من ناحية الـ Security

شرح من الريبو الخاصة بـ Proton Mail عن إزاي بيخزنوا Sensitive Data في الـ User browser

الحل

النتيجة

لقيت كنز وحبيت اشاركه معاكم، سلسلة المقالات دي بتشرح مواضيع مهمة في الجافاسكربت عن طريق الأنيميشن

واحد من المواضيع اللي بيحصل فيها جدال وإختلاف هو هل الـ Data Structures مهمة للـ Frontend developers؟

الداتا ستراكشر والـ Real World Example:

لقيت المقالة الجميلة دي فيها Sketches بتشرح الـ SOLID Principles

مراجعة كتاب Learning React Modern Patterns for Developing React Apps

كنت بتصفح في موقع كورسات شهير وبعدين لاقيتهم حاطين في المميزات أن كورساتهم Text-based

مميزات من نظري بتخلي الشرح المكتوب افضل من الفيديوهات:

ايه افضل نص ساعة ممكن تقضيها من وقتك لو انت JavaScript Developer؟

ازاي ممكن تلاقي أفضل كتاب في حاجه معينة عايز تتعلمها؟

طب ليه Reddit بالذات؟

نيجي للمرحلة التانية:

هنا انت ممكن تلاقي في الأخر ان بقى قدامك كتاب ولا أتنين محتار ما بينهم طب تعمل ايه؟

مراجعة كتاب Pure React

ملخص المحاضرة الأولى وأول شابتر من كورس وكتاب Mathematics for computer science

مراجعة كورس Discrete Mathematics لدكتور وليد يوسف

مراجعة كتاب The Object Oriented Thought Process

Javascript: