لقيت كنز وحبيت اشاركه معاكم، سلسلة المقالات دي بتشرح مواضيع مهمة في الجافا سكربت عن طريق الأنيميشن زي:
Event loop, Hoisting, Scope Chain, Javascript Engine, Prototypal Inheritance, Generators, Iterators, Promises, and Async/Await.
أنصحك بردو تتابع صاحبة السلسلة دي لانها بتعمل Visualization لمواضيع تانية غير الجافا سكربت زي اوامر Git وغيرها, وده لينك السلسلة:
https://dev.to/lydiahallie/series/3341
Event loop, Hoisting, Scope Chain, Javascript Engine, Prototypal Inheritance, Generators, Iterators, Promises, and Async/Await.
أنصحك بردو تتابع صاحبة السلسلة دي لانها بتعمل Visualization لمواضيع تانية غير الجافا سكربت زي اوامر Git وغيرها, وده لينك السلسلة:
https://dev.to/lydiahallie/series/3341
DEV Community
JavaScript Visualized Series' Articles
View JavaScript Visualized Series' Articles on DEV Community
هل تريد وصفة سحرية لتحقيق النجاح؟
👈 قال أحد الحكماء
"أن لا شيء يستحق العناء سهل المنال".
لا تحسبن المجد تمرا أنت آكله
لن تبلغ المجد حتى تلعق الصبرا
🔷 تتمنى تحقيق الأمنيات، وتأمل في تحقيق الأهداف،
🔴 لا تنتظر فالوقت لا ينتظر
لولا المشقة ساد الناس كلهم
الجود يفقر والإقدام قتال
⏪ هيا انطلق،
سر الانطلاق هو الشغف والطموح اللامحدود،
سر النجاح هو الثقة بالنفس والقدرة على تحقيقه، والجهد المتواصل.
✅ أطلق قواك الكامنة، أنت مخلوق عظيم
والكون بما فيه مسخر لأجلك
✅ إليك بعض الخطوات في رحلة النجاح والتميز:
✔️ الاعتماد والتوكل على الله:
قال عليه الصلاة والسلام "استعن بالله ولا تعجز وإن أصابك شيء فلا تقل لو اني فعلت كان كذا و كذا، ولكن قل قدر الله وما شاء فعل..".
✔️ تهيئة أسباب النجاح:
🔹أهداف طموحة وقابلة للتحقيق
🔹تخطيط جيد بتفكير مستقبلي واع
🔹 استعداد نفسي والخروج من منطقة الراحة.
🔹 تنفيذ مستنير بعزيمة لا تلين،
🔹استمرارية تتخطى كل عقبة،
🔹تقييم ومراجعة واستكشاف،
🔹تحسين مستمر،
🔹الاستفادة من خبرات وتجارب الآخرين،...).
👈 إذا غامرت في شرف مروم
فلا تقنع بما دون النجوم
✔️ اصنع الفرص ولا تخش الفشل.
✔️ ضع الصورة النهائية أمام عينيك وكأنها قريبة.
✔️ كافئ نفسك واحتفل بأي نجاح تحقق.
✔️ ارفع شعارا:
لأستسهلن الصعب أو أدرك المنى
فما انقادت الآمال إلا لصابر
تحدى نفسك،
تحدى أهدافك وآمالك،
تحدى كل المشاكل والعقبات
وثق أنك بمعية الله القادر ستصنع المستحيل.
👈 قال أحد الحكماء
"أن لا شيء يستحق العناء سهل المنال".
لا تحسبن المجد تمرا أنت آكله
لن تبلغ المجد حتى تلعق الصبرا
🔷 تتمنى تحقيق الأمنيات، وتأمل في تحقيق الأهداف،
🔴 لا تنتظر فالوقت لا ينتظر
لولا المشقة ساد الناس كلهم
الجود يفقر والإقدام قتال
⏪ هيا انطلق،
سر الانطلاق هو الشغف والطموح اللامحدود،
سر النجاح هو الثقة بالنفس والقدرة على تحقيقه، والجهد المتواصل.
✅ أطلق قواك الكامنة، أنت مخلوق عظيم
والكون بما فيه مسخر لأجلك
✅ إليك بعض الخطوات في رحلة النجاح والتميز:
✔️ الاعتماد والتوكل على الله:
قال عليه الصلاة والسلام "استعن بالله ولا تعجز وإن أصابك شيء فلا تقل لو اني فعلت كان كذا و كذا، ولكن قل قدر الله وما شاء فعل..".
✔️ تهيئة أسباب النجاح:
🔹أهداف طموحة وقابلة للتحقيق
🔹تخطيط جيد بتفكير مستقبلي واع
🔹 استعداد نفسي والخروج من منطقة الراحة.
🔹 تنفيذ مستنير بعزيمة لا تلين،
🔹استمرارية تتخطى كل عقبة،
🔹تقييم ومراجعة واستكشاف،
🔹تحسين مستمر،
🔹الاستفادة من خبرات وتجارب الآخرين،...).
👈 إذا غامرت في شرف مروم
فلا تقنع بما دون النجوم
✔️ اصنع الفرص ولا تخش الفشل.
✔️ ضع الصورة النهائية أمام عينيك وكأنها قريبة.
✔️ كافئ نفسك واحتفل بأي نجاح تحقق.
✔️ ارفع شعارا:
لأستسهلن الصعب أو أدرك المنى
فما انقادت الآمال إلا لصابر
تحدى نفسك،
تحدى أهدافك وآمالك،
تحدى كل المشاكل والعقبات
وثق أنك بمعية الله القادر ستصنع المستحيل.
Cookies 🍪
Local Storage 💽
Session Storage 💾
أولا: Cookies
هو عباره عن ملف بنفس اسم الserver
بيتخزن في ال Client الخاص بك بيتحفظ فيه مجموعه من البيانات وانت تقدر توصل للملفات دي لانها بتتحفظ داخل الجهاز الخاص بيك
كل البيانات ال بتتحفظ في الCookies
أنت لازم تديهم الصلاحيه لحفظ البيانات دي
مثال:
لما تدخل علي موقع هتلاقي ظهر ليك رساله عباره عن
This website uses cookies
وانت لازم تختار
Yes, I accept Cookies
فانت لازم توافق وتديهم الصلاحية لحفظ البيانات والبيانات دي عباره عن اي عمليه انت عملتها علي الموقع
أو أي بحث عملته داخل الموقع
ثانياً: Sessions
هي عباره عن ملف بيحتوي كل مره علي
Random ID
ومش تقدر توصل للملفات بتاعته لانه بيتخزن في السيرفر بتاع المتصفح في وجود الانترنت لو انت قفلت المتصفح أو النت فصل البيانات بتتمسح وبيحصل لها expire
ثالثاً: Local Storage
البيانات دي بتتحفظ في الbrowser فقط والبيانات دي بتفضل موجوده طول الوقت ملهاش مده انتهاء لازم انت ال تحذفها بنفسك غير كدا هتفضل موجوده
مثال:
لما تيجي تفتح الFacebookلاول مره
لازم تدخل البيانات بتاعتك بعد كدا بيحتفظ بيها في الLocal Storage
وتقدر تدخل بعد كدا بدون ما تسجل بياناتك كل مره
ملحوظه:هو بيحتفظ بيها علي مستوي الbrowserفقط يعني لو جيت تفتح صفحتك من متصفح تاني او جهاز تاني اول مره بس هيطلب منك بياناتك بعد كدا هيحتفظ بيها عنده
ودي مكتبه عباره عن اسكربت بالjsتقدر تستخدمه علشانset,get, delete,read
cookiesلل
وتعرف عدد المرات ال زرت فيها الموقع
Local Storage 💽
Session Storage 💾
أولا: Cookies
هو عباره عن ملف بنفس اسم الserver
بيتخزن في ال Client الخاص بك بيتحفظ فيه مجموعه من البيانات وانت تقدر توصل للملفات دي لانها بتتحفظ داخل الجهاز الخاص بيك
كل البيانات ال بتتحفظ في الCookies
أنت لازم تديهم الصلاحيه لحفظ البيانات دي
مثال:
لما تدخل علي موقع هتلاقي ظهر ليك رساله عباره عن
This website uses cookies
وانت لازم تختار
Yes, I accept Cookies
فانت لازم توافق وتديهم الصلاحية لحفظ البيانات والبيانات دي عباره عن اي عمليه انت عملتها علي الموقع
أو أي بحث عملته داخل الموقع
ثانياً: Sessions
هي عباره عن ملف بيحتوي كل مره علي
Random ID
ومش تقدر توصل للملفات بتاعته لانه بيتخزن في السيرفر بتاع المتصفح في وجود الانترنت لو انت قفلت المتصفح أو النت فصل البيانات بتتمسح وبيحصل لها expire
ثالثاً: Local Storage
البيانات دي بتتحفظ في الbrowser فقط والبيانات دي بتفضل موجوده طول الوقت ملهاش مده انتهاء لازم انت ال تحذفها بنفسك غير كدا هتفضل موجوده
مثال:
لما تيجي تفتح الFacebookلاول مره
لازم تدخل البيانات بتاعتك بعد كدا بيحتفظ بيها في الLocal Storage
وتقدر تدخل بعد كدا بدون ما تسجل بياناتك كل مره
ملحوظه:هو بيحتفظ بيها علي مستوي الbrowserفقط يعني لو جيت تفتح صفحتك من متصفح تاني او جهاز تاني اول مره بس هيطلب منك بياناتك بعد كدا هيحتفظ بيها عنده
ودي مكتبه عباره عن اسكربت بالjsتقدر تستخدمه علشانset,get, delete,read
cookiesلل
وتعرف عدد المرات ال زرت فيها الموقع
دي مجموعة من الكتيبات تقدر تقرأها وأنت في المواصلات كمراجعة على معلوماتك
تتضمن:
- SQL
- Express
- Go
- Swift
- Svelte
- PHP
- HTML
- CSS
- JavaScript
- React
- Python
- Node.js
- Linux
- C
- Next.js
https://lnkd.in/dP9V6WFE
تتضمن:
- SQL
- Express
- Go
- Swift
- Svelte
- PHP
- HTML
- CSS
- JavaScript
- React
- Python
- Node.js
- Linux
- C
- Next.js
https://lnkd.in/dP9V6WFE
lnkd.in
LinkedIn
This link will take you to a page that’s not on LinkedIn
1672002442280.jfif
33.6 KB
CSS Tips
For border-radius in RTL and LTR direction
For border-radius in RTL and LTR direction
السلام عليكم
طبعا كلنا سمعنا عن ال chat gpt ومحظور في بعض الدول وعوزين تجربوه
فنا عملت بوت تليجرام باستخدام ال api الخاص بيهم
رابط البوت:
@openAI_GPTNew_bot
ابعت اي رساله ليه فالخاص هيرد وتقدر تضيفه في الجروبات وتستخدم امر /chat
/chat message ....
وده الموقع:
https://chatgpt-steel.vercel.app/
تقدروا تجربوه في الجروب الخاص بالقناه
http://t.me/codedevchat
الكود علي متاح علي github:
https://github.com/Nourtaha13/chatgpt
طبعا كلنا سمعنا عن ال chat gpt ومحظور في بعض الدول وعوزين تجربوه
فنا عملت بوت تليجرام باستخدام ال api الخاص بيهم
رابط البوت:
@openAI_GPTNew_bot
ابعت اي رساله ليه فالخاص هيرد وتقدر تضيفه في الجروبات وتستخدم امر /chat
/chat message ....
وده الموقع:
https://chatgpt-steel.vercel.app/
تقدروا تجربوه في الجروب الخاص بالقناه
http://t.me/codedevchat
الكود علي متاح علي github:
https://github.com/Nourtaha13/chatgpt
بعض الادوات اللي بتساعدك تكتب كود CSS بسرعة وسهولة
- موقع https://enjoycss.com/
موقع لتوليد الCSS بشكل ديناميكي وسهل بتبدأ بأختيار العنصر الي محتاج تنسقه
(Blank - input - block - Button) والموقع بيديك شكل العنصر والتنسيقات بتاعته بشكل قوائم منسدلة بتقدر تغير فيها براحتك وبالاخر بيولد كود css جاهز لكل اللي انت عملته
الموقع لذيذ وسهل التعامل والتعلم بسرعة وبيديك خيارات حلوة للتنسيق وبتقدر تغير اسم الكلاس المستعمل بس ممكن مشكلته الوحيدة انه غير مناسب لتنسيق layout
بس هيكون ممتاز بتنسيق العناصر الفردية وممكن بعدها تعمل تنسيق
- موقع https://www.cssmatic.com/
الموقع دا فيه اربع ادوات اساسية هم
(Gradient Generator - Border Radius - Noise Texture - Box Shadow)
المفيد بالموقع دا انك بتشوف التعديل مباشرةً قدام عينك ودا هيسهل عليك تخلص التعديل بسرعة وتنسخ الكود مباشرةً لموقعك
- موقع https://cssgrid.io/
الموقع دا جميل جداً لو عندك مشكلة بتنسيق الGrid
الموقع عبارة عن كورس مجاني بالكامل ٢٥ فيديو لكورس جريد بيشرح فيها كل تفاصيل الجريد وازاي ممكن تنفذها بموقعك بشكل صح
- موقع https://www.cssportal.com/
الموقع دا مفيد جداً وشامل لأغلب الأدوات اللي ممكن تحتاجها بالcss
الموقع مكون من اربع أقسام رئيسية هي
(CSS Generators - CSS Tools - CSS Resources - HTML Resources)
وكل قسم جواه حاجات كتيرة محتاجة مقال لوحدها,
انصحك تجرب الموقع دا وتشوف الادوات المختلفة اللي فيه عشان هتخلي تجربة انشاء الcss اسهل واحلى
- موقع https://enjoycss.com/
موقع لتوليد الCSS بشكل ديناميكي وسهل بتبدأ بأختيار العنصر الي محتاج تنسقه
(Blank - input - block - Button) والموقع بيديك شكل العنصر والتنسيقات بتاعته بشكل قوائم منسدلة بتقدر تغير فيها براحتك وبالاخر بيولد كود css جاهز لكل اللي انت عملته
الموقع لذيذ وسهل التعامل والتعلم بسرعة وبيديك خيارات حلوة للتنسيق وبتقدر تغير اسم الكلاس المستعمل بس ممكن مشكلته الوحيدة انه غير مناسب لتنسيق layout
بس هيكون ممتاز بتنسيق العناصر الفردية وممكن بعدها تعمل تنسيق
- موقع https://www.cssmatic.com/
الموقع دا فيه اربع ادوات اساسية هم
(Gradient Generator - Border Radius - Noise Texture - Box Shadow)
المفيد بالموقع دا انك بتشوف التعديل مباشرةً قدام عينك ودا هيسهل عليك تخلص التعديل بسرعة وتنسخ الكود مباشرةً لموقعك
- موقع https://cssgrid.io/
الموقع دا جميل جداً لو عندك مشكلة بتنسيق الGrid
الموقع عبارة عن كورس مجاني بالكامل ٢٥ فيديو لكورس جريد بيشرح فيها كل تفاصيل الجريد وازاي ممكن تنفذها بموقعك بشكل صح
- موقع https://www.cssportal.com/
الموقع دا مفيد جداً وشامل لأغلب الأدوات اللي ممكن تحتاجها بالcss
الموقع مكون من اربع أقسام رئيسية هي
(CSS Generators - CSS Tools - CSS Resources - HTML Resources)
وكل قسم جواه حاجات كتيرة محتاجة مقال لوحدها,
انصحك تجرب الموقع دا وتشوف الادوات المختلفة اللي فيه عشان هتخلي تجربة انشاء الcss اسهل واحلى
Enjoycss
Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
EnjoyCSS is an advanced CSS3 generator that saves your time. Its handy and simple UI allows you to adjust rich graphical styles quickly and without coding.
أفضل 6 repositories على GitHub لمطورين جافا سكريبت
1 - You-Dont-Know-JS
https://lnkd.in/dxf34AZc
هذه سلسلة من الكتب تتعمق في الأساسية للغة JavaScript.
2 - Javascript Algorithms
https://lnkd.in/dw3ZcM8B
الخوارزميات وهياكل البيانات المطبقة في JavaScript مع
هذا الريبو هو مورد رائع لأي شخص
الرغبة في الحصول على فهم راسخ للخوارزميات
وهيكل البيانات.
3 - دليلك للمقابلات كمطور Front-End
https://lnkd.in/driMWjMJ
إجابات معتمدة على
"أسئلة مقابلة العمل Front-End الشهيرة "
يعد هذا الريبو بجعلك تنتقل من الصفر إلى بطل المقابلة العمل Front-End حتى لو لم يكن لديك خبرة مقابلة سابقة.
4 - 30 seconds of code
https://lnkd.in/gVkBZcBH
عبارة عن مرجع قوي لمصطلحات و ادوات الجافا سكريبت وغيرها من لغات برمجة مثل بايثون
زور موقعهم واكتشف اكثر
1 - You-Dont-Know-JS
https://lnkd.in/dxf34AZc
هذه سلسلة من الكتب تتعمق في الأساسية للغة JavaScript.
2 - Javascript Algorithms
https://lnkd.in/dw3ZcM8B
الخوارزميات وهياكل البيانات المطبقة في JavaScript مع
هذا الريبو هو مورد رائع لأي شخص
الرغبة في الحصول على فهم راسخ للخوارزميات
وهيكل البيانات.
3 - دليلك للمقابلات كمطور Front-End
https://lnkd.in/driMWjMJ
إجابات معتمدة على
"أسئلة مقابلة العمل Front-End الشهيرة "
يعد هذا الريبو بجعلك تنتقل من الصفر إلى بطل المقابلة العمل Front-End حتى لو لم يكن لديك خبرة مقابلة سابقة.
4 - 30 seconds of code
https://lnkd.in/gVkBZcBH
عبارة عن مرجع قوي لمصطلحات و ادوات الجافا سكريبت وغيرها من لغات برمجة مثل بايثون
زور موقعهم واكتشف اكثر
lnkd.in
LinkedIn
This link will take you to a page that’s not on LinkedIn
مستودعات GitHub رهيبة لمطورين الويب FrontEnd
تحتوي على نصائح واكواد HTML \ CSS \ JS تفيدك كمطور
- Front-End-Checklist
يعطيك هذا المستودع قائمة بالمهام والاشياء اللي لابد ان تضيفها لتحصل على افضل بنية وهيكلة لتصميم صفحات الويب باستخدام html .
link : https://lnkd.in/gpVZ3cJx
- 30 seconds of code
مستودع رهيب يعطيك مقتطفات من اكواد JavaScript و CSS تقدر تستخدمها بمشاريعك .
link : https://lnkd.in/gVkBZcBH
- CSS Protips
بهذا المستودع تجد مجموعة من النصائح لمساعدتك في تحسين مهاراتك لكتابة اكواد والعمل بـCSS .
link : https://lnkd.in/gAhhfGZn
- Frontend-dev-bookmarks
يعطيك هذا المستودع مجموعة من المواقع والأدوات التي تفيدك كمطور ويب FrontEnd .
link : https://lnkd.in/gZcqJdZy
- 50 Projects 50 Days
هذا مستودع على Github يحتوي على 50 مشروع للمبتدئين 🚀
HTML
CSS
Javascript
تقدر تاخذ منها افكار لتطوير مستواك ولتحدي نفسك
link :https://lnkd.in/dQceZq3a
تحتوي على نصائح واكواد HTML \ CSS \ JS تفيدك كمطور
- Front-End-Checklist
يعطيك هذا المستودع قائمة بالمهام والاشياء اللي لابد ان تضيفها لتحصل على افضل بنية وهيكلة لتصميم صفحات الويب باستخدام html .
link : https://lnkd.in/gpVZ3cJx
- 30 seconds of code
مستودع رهيب يعطيك مقتطفات من اكواد JavaScript و CSS تقدر تستخدمها بمشاريعك .
link : https://lnkd.in/gVkBZcBH
- CSS Protips
بهذا المستودع تجد مجموعة من النصائح لمساعدتك في تحسين مهاراتك لكتابة اكواد والعمل بـCSS .
link : https://lnkd.in/gAhhfGZn
- Frontend-dev-bookmarks
يعطيك هذا المستودع مجموعة من المواقع والأدوات التي تفيدك كمطور ويب FrontEnd .
link : https://lnkd.in/gZcqJdZy
- 50 Projects 50 Days
هذا مستودع على Github يحتوي على 50 مشروع للمبتدئين 🚀
HTML
CSS
Javascript
تقدر تاخذ منها افكار لتطوير مستواك ولتحدي نفسك
link :https://lnkd.in/dQceZq3a
lnkd.in
LinkedIn
This link will take you to a page that’s not on LinkedIn
Learn for free in 2023 ❤️
HTML → learn-html.org & W3Schools.com
CSS → css-tricks.com
JavaScript → javascript.info
React→ react-tutorial.app
Vue → vueschool.io
Svelte → learn.svelte.dev
Angular → angular.io/tutorial/tour-…
Tailwind →https://tailwindcss.com/
Linux → freecodecamp.org
Git → learngitbranching.js.org
APIs → rapidapi.com/learn
Node → https://lnkd.in/drHUWBst
Java → javatpoint.com
DSA Visuals → visualgo.net
SQL → sqlbolt.com
Interviews → interviewbit.com
AWS → explore.skillbuilder.aws
Azure → learn.microsoft.com
GCP → github.com/priyankavergad…
DevOps → edx.org/learn/devops
Docker → docker-curriculum.com
Security → tryhackme.com
Python → learnpython.org
Solidity: cryptozombies.io
MongoDB: learn.mongodb.com
Rust : learning-rust.github.io
HTML → learn-html.org & W3Schools.com
CSS → css-tricks.com
JavaScript → javascript.info
React→ react-tutorial.app
Vue → vueschool.io
Svelte → learn.svelte.dev
Angular → angular.io/tutorial/tour-…
Tailwind →https://tailwindcss.com/
Linux → freecodecamp.org
Git → learngitbranching.js.org
APIs → rapidapi.com/learn
Node → https://lnkd.in/drHUWBst
Java → javatpoint.com
DSA Visuals → visualgo.net
SQL → sqlbolt.com
Interviews → interviewbit.com
AWS → explore.skillbuilder.aws
Azure → learn.microsoft.com
GCP → github.com/priyankavergad…
DevOps → edx.org/learn/devops
Docker → docker-curriculum.com
Security → tryhackme.com
Python → learnpython.org
Solidity: cryptozombies.io
MongoDB: learn.mongodb.com
Rust : learning-rust.github.io
Tailwindcss
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.