Untyped Abdelrahman Awad
-
- Technology
نصف ساعه اسبوعيا من الهبد في مجال الفرونت ايند والجافاسكربت بالعربي
-
App versioning
في الحلقة دي بتكلم عن مشكلة لما الفرونت ايند يكلم باك ايند احدث منه او العكس، فرونت ايند قديم يكلم باك ايند احدث منه.
ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل.
لينكات مفيدة:
Semantic versioning -
The problem with Drag and Drop API
في الحلقة دي بتكلم عن الـ Drag and Drop API واستعملاته المتعددة الي بنشوفها كل يوم في اي سوفتوير بنستعمله ومكوناته الاساسية وامكانياته علي الويب.
بنتطرق للـ Events والاختلافات ما بينهم وامتي وازاي تستعمل اياً منهم بكفاءة، واخيراً ليه انا بعتبر الـ API دا من اصعب الـ APIs وايه افضل المكتبات الحالية الي حتوفر عليك وقت ومجهود.
لينكات مفيدة:
Drag and Drop API | MDN
File drag and drop | MDN
DataTransfer | MDN
Vue Draggable Plus
Drag and Drop by Formkit
DnD Kit
Pragmatic Drag and Drop -
Functional Jargon
في الحلقة دي بتكلم عن الـ Functional Programming وبعض من مصطلحاتها الغريبة وبرمي امثلة عبيطة تفهمك الفكرة وبرمي امثلة تانية عملية اكثر وتوريك انك بالفعل بتستعمل الحاجات دي كل يوم من غير ما تاخد بالك.
في نفس الوقت، بربط ما بين المصطلحات دي في صورتها ككود وازاي احنا بنطبقها في الـ Components.
لينكات مفيدة:
Functional Light JS
Currying
A very old presentation I did on functional JS
Vue.js Scoped Slots
Children Props
Untyped episode on Immutability
Untyped episode on Array Methods -
Optimizing Images
في حلقتنا دي، هنتكلم عن ازاي بنستعمل الصور في الويب وإزاي بتأثر علي سرعة التحميل وتجربة المستخدم.
هنتكلم عن أحدث التقنيات والأدوات اللي تقدر تستخدمها في تحسين الصور، من غير ما نضحي بالجودة، وكمان هنعرف إزاي تختار الصيغة المثالية للصورة وتستخدم الضغط الصحيح بدون ما تفقد جودة الصورة.
سواء كنت مطور مواقع مبتدئ أو محترف، الحلقة دي هتديك الكثير من النصايح اللي حتحتاجها علشان تعلى مستوى صفحتك وتخلي تجربة المستخدمين أسرع وأفضل.
لينكات مفيدة:
Responsive Images | MDN
Largest Contentful Paint (LCP) | Web.dev
Cumulative Layout Shift (CLS) | Web.dev
Maximally optimizing image loading for the web
Loading attribute | MDN
Decoding attribute | MDN
Vite Image Preset Plugin | MDN
Device Pixel Ratio | MDN -
TailwindCSS Overview
في الحلقة دي بتكلم عن TailwindCSS وبنشوف ليه اكتسح الساحة واحدث تغيير كبير في ازاي بنكتب الـ CSS.
بنلقي نظرة برضو علي نقاط النقض وسلبياته الي بيطرحها البعض وبنرد عليها وهل هو فعلاً كانك بتكتب inline styles ولا لا!
وليه في وجهة نظري هو طريقة جديدة لكتابة الـ CSS وليس تبسيطاً له.
لينكات مفيدة:
TailwindCSS
In defense of utility first CSS
Adding Tailwind Variants
TailwindCSS Intellisene for VSCode -
Zero JS with Astro
في الحلقة دي بناخد نبذة عن Astro Framework والافكار المميزة الي قدمها للـ Ecosystem وجعلته الافضل في استخدامات عديدة زي مواقع المحتوي.
برضو بنبص ليه الـ Islands architecture ميزته من ناحية السرعة وليه هي حل عبقري لمشاكل الـFrameworks الي بنستعملها.
لينكات مفيدة:
Astro.js
Astro Islands
Sharing state with nanostores
Zod
Content collections
View transitions API
View transitions