ليان | مبرمجة مواقع

اهلا انا ليان تعلمت برمجة المواقع من HTML , css ,JavaScript, tailwind حتى react js بطرق مجانية بالكامل✨ وفي هذا الحساب اشارككم مصادري ورحلتي في التعلم بحيث نتطور ونتعلم من بعض اهم المصادر 👇

Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude. Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day.

One more tool to get DESIGN .md 👀

يسعدني الإعلان عن إطلاق منصة سفرة سفرة منصة منيو رقمية للمقاهي والمطاعم، تساعد أصحاب الأنشطة التجارية على إنشاء منيو احترافي وإدارته بسهولة من لوحة تحكم واحدة. - باركود خاص بنشاطك يحول العميل الى المنيو الرقمي - تحديث فوري للأسعار والأصناف - امكانية عمل عروض مجدولة - ترجمة تلقائية بناءا على لغة جوال العميل - متابعة الإحصائيات والتفاعل على المنيو - تحويل المنيو إلى نظام طلبات عبر الواتسب رابط المنصة so-fra.com

بعد ماتسوي فكرة التصميم اللي في بالك على google Stitch تقدر تنسخ التصميم وتحطه في Figma مع امكانية التعديل الكامل على المشروع

🔗 Claude Code صار يرسل اللي تبنيه بالكود مباشرة لـ Figma ⚙️ عن طريق Figma MCP server الجديد تبني prototype بالكود وترسله للوحة التصميم 🎨 وتقدر تستكشف نسخ مختلفة من تصميمك على Figma بدون ما تسوي شيء يدوي 🔥 الجسر بين الكود والتصميم صار مباشر وبأمر واحد

Introducing RTL support for shadcn/ui. Your components now work in right-to-left languages. We've been thinking about this one for a while. Traditionally, for a library to support RTL, they had to bake in RTL classes like ms-4 and start-2 or use rtl variants. You end up dealing with RTL even if you're not building for it. We used the registry and CLI to do it differently. Take a look.

We're launching a new FREE challenge tomorrow! 🥳 This will be our second 30-day hackathon challenge. Following the fun and success of the last FM30 Hackathon, we're excited to get started and see what you build! This time around, you'll create a typing speed test app! ⚡️

@AlamoudiBy إبداااع، ماشاء الله عليك 👏🏼✨

سعيدة اليوم لأني أشارككم أول إضافة بنيتها بنفسي على فيجما! 💥💜 بدأت الفكرة كحل لمشكلة أواجهها يوميًا… وانتهت بأنها رحلة تعلم عميقة مع الـ API، الـ RTL، والمحاذاة، وتعامل مع تغييرات فيجما الجديدة

عايز ترفع مستواك في الفرونت إند بشكل عملي؟ جرب Frontend Mentor، هيساعدك تطور بسرعة. الفكرة بسيطة: هيديك تصميمات جاهزة شبيهة بالشغل الحقيقي، وإنت تنفذها باستخدام HTML, CSS وأي تقنيات تحب تضيفها. هتحس كأنك بتشتغل في فريق فعلي مش بس بتحل تمارين نظرية. التحديات متدرجة لكل المستويات، من المبتدئين لحد اللي عايزين يطوروا مهاراتهم أكتر. والأجمل إنك تقدر تشوف حلول المطورين التانيين وتاخد feedback يوصلك لمستوى أفضل. جربه دلوقتي وهتلاحظ الفرق بنفسك 👇 frontendmentor.io

@Azo_Abdulah ملف

👨‍💻 كملًا للبوست اللي فات عن تجربتي مع React، حبيت أشارك شوية نصايح إضافية لأي حد شغال في الـ Frontend أو حابب يطور من نفسه: ⸻ 11 - افهم الـ Lifecycle كويس حتى لو بتشتغل بـ Hooks، لازم تكون فاهم إمتى الكومبوننت بيترندر، وإيه اللي بيحصل في الـ Mounting و Unmounting. الفهم ده هيساعدك تكتشف مشاكل الأداء وتمنع ريندرات مالهاش لازمة. ⸻ 12 - قلل الـ Re-render على قد ما تقدر استخدم React.memo, useMemo, و useCallback لما تكون فعلاً محتاجهم. في مشروعات كبيرة، فرقوا معايا كتير في تحسين السرعة، خصوصًا مع القوائم الطويلة أو الكومبوننتس الثقيلة. ⸻ 13 - نظم شغلك مع الفورمات بلاش تكتب الفورم كله بإيدك. استخدم مكتبات زي React Hook Form أو Formik – هتوفر وقت، وهتخلي الكود أنضف وأسهل في التعديل. ⸻ 14 - فكّر في API Handling بشكل منظم اعمل ملف منفصل لكل نوع من الـ requests، وفصل الـ logic عن الـ components. ده بيساعدك تتتبع الأخطاء وتبني كود نظيف وسهل الاختبار. ⸻ 15 - اهتم بتجربة الخطأ (Error UX) المستخدم مش لازم يشوف “Unknown error”. اعرض رسالة مفهومة، وسجّل الأخطاء المهمة عشان تعرف تتصرف بسرعة وقت اللزوم. ⸻ 16 - تابع الجديد في React React بتتطور بسرعة. حتى لو مش هتستخدم Server Components أو Suspense حاليًا، اعرف عنهم وخليك مستعد. ⸻ 17 - جرّب TypeScript ممكن تحسه صعب في البداية، بس مع الوقت هتكتشف إنه بيمنعك من أخطاء كتير وبيخلي الكود أوضح وأسهل في الصيانة. ⸻ 18 - استفيد من مكتبات UI جاهزة زي ShadCN UI، MUI، Chakra UI – بتوفر وقت وبتخلي الـ UI احترافي من غير ما تعيد اختراع العجلة. ⸻ 19 - ابني كومبوننتس قابلة لإعادة الاستخدام كل ما تعزل الـ logic، وتخلي الـ props مرنة، كل ما الكومبوننت يعيش أطول ويتنقل بين المشاريع بسهولة. ⸻ 20 - شارك اللي بتتعلمه بوست، فيديو، أو حتى رد على StackOverflow – ده بيساعدك تراجع اللي فهمته، ويخليك جزء من مجتمع متعاون ومحترم. #ReactJS #FrontendDev #WebDevelopment #JavaScript #TypeScript #ReactHooks #TailwindCSS #ReduxToolkit #CleanCode #CodingTips #DevCommunity #BuildInPublic #100DaysOfCode #TechTwitter #ReactDevelopers #تعلم_البرمجة #جافاسكربت #ريأكت #تطوير_الويب #مطور_واجهات #واجهات_المستخدم #مجتمع_المطورين #نصائح_برمجية

The time has finally come! After months of hard work, the Three.js Roadmap beta is now LIVE! 🙌🏻 👉🏻 threejsroadmap.com If you're interested in learning 3D web development but are on a tight budget💰, my courses are perfect for you! I've launched the site with four short courses: ✅ Introduction to Three.js (FREE) ✅ 3D Math Fundamentals ✅ Creating a Debug UI ✅ Lighting and Shadows Purchasing a paid course will also gain you access to the Three.js Roadmap Discord server where you can ask questions and chat with other developers. For the next few weeks I'll be focusing on polish and stability for the site, and then I will go into full content-creation mode and start pumping out new courses! Looking forward to seeing what we build together! 🔨 #threejs #webgl #gamedev

Stripe 🤝iOS developers Big news iOS app developers! You can now accept payments with @stripe outside of your app, with no iOS app store commissions. The Stripe team 🧑‍🍳cooked up a quick guide walking you through how. Go live now! Docs in the 🧵

Introducing blocks.so A library of blocks/components that you can copy and paste into your apps. Built on top of shadcn. Beautifully designed. Open Source.

Annotations, now available in Design Mode with new color coded categories

المصمم الرهيب نواف سوا رابط أي احد يقدر يضيف فيه ملف أعماله ، فالليّ حاب نرشحه لمشاريع حلوه وأماكن كويسه يضيف ملفه ♥️: drive.google.com/drive/folders/…

🌟تفاعلات العناصر (Micro Interaction) هي طريقة رائعة لإضافة حياة إلى التصميم وتوجيه انتباه المستخدم إلى المهم. هذا موقع جميل فيه عدة أمثلة للتفاعلات من منتجات حقيقة designspells.com

#اصحاب_جود فيه كورس تطوير التطبيقات والألعاب بلغة بايثون حاليًا وللمدة محدودة مجاني كان الكورس باربعين دولار الحقو سجلوا فيه 🔥 udemy.com/course/build-8…

ماذا عن هدية رمضان لمتعلمي البرمجة؟ كورس رياكت React JS (٣٠ ساعة) أصبح مجاني بالكامل على اليوتيوب، و سأقوم بإضافة الدروس المتبقية للسلسلة في الأيام القادمة على الرابط: youtube.com/playlist?list=… كامل القصة و تفاصيلها في المقطع 👇 و كل عام و أنتم بخير 🌙