Total TypeScript Essentials

- A book for developers of all levels to learn advanced type manipulation and real-world application development patterns in TypeScript.

https://www.totaltypescript.com/books/total-typescript-essentials

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


Regrouping Link States 🔻

Using :is() pseudo-class to regroup the link :hover and :focus states instead of chaining them for increased readability.

———

⚡️ Tutorial Video: https://youtu.be/EvQQ__Qw8qM

الخلاصة 💯

𝐑𝐞𝐜𝐨𝐦𝐦𝐞𝐧𝐝𝐞𝐝 𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤 𝐅𝐨𝐫 𝐄𝐚𝐜𝐡 𝐏𝐫𝐨𝐣𝐞𝐜𝐭 𝐓𝐲𝐩𝐞 ⚡️

⦿ Simple Client-Side Applications

- Stack: React, Zustand, React Easy Router, SWR, React Hook Form, Tailwind CSS, Chakra UI, Framer Motion

- Example: A personal portfolio website.

———

⦿ Static Blog Applications

- Stack: Next.js, Zustand, React Query, SWR, React Hook Form, Zod, Tailwind CSS, Headless UI, Docusaurus

- Example: Blog sites and Documantation websites.

———

⦿ Complex Interactive Applications

- Stack: Next.js, Redux, React Hook Form, Zod, Tailwind CSS, Shadcn UI, Lucide Icons, RTK Query, ApexChart, AWS S3, Mongoose, MongoDB, React Testing Library, JWT or NextAuth

- Example: An analytics dashboard for e-commerce sales.

———

⦿ Full-Stack Enterprise Applications

- Stack: Next.js, Zustand, TanStack Query, Formik, Yup, Material UI, Radix UI, Styled Components, Clerk or Kinde, Cloudinary, Recharts, Prisma, Swagger

- Example: A customer relationship management (CRM) system.

———

⦿ E-commerce Platforms

- Stack: React with TypeScript, Vite, JWT, Redux, React Router, RTK Query, React Hook Form, Zod, Radix UI, Tailwind CSS, Stripe, Payload CMS, ViTest, ApexChart, Drizzle

- Example: An online grocery store like Amazon.

———

⦿ Real-time Applications

- Stack: Next.js, Zustand, Socket.io, Supabase, PostgreSQL or Redis, NextAuth, Tailwind CSS, Playwright

- Example: A live sports score tracking app.

———

⦿ Content-Rich SEO-Focused Websites

- Stack: Next.js, React Query, Docusaurus, Tailwind CSS, Cloudinary, Framer motion

- Example: A digital marketing agency’s website.

———

⦿ Modern Animated Web Applications

- Stack: Next.js, Tailwind CSS, Sanity CMS, Framer Motion or GSAP, Three.js, Headless UI, SVG animations, Aceternity UI, Magic UI

- Example: An interactive educational platform for children.

———

⦿ Cloud Storage Applications

- Stack: React, Material UI, AWS S3, JWT, Redux Toolkit

- Example: A storage management system like Dropbox.

إزاي تصمم أنظمة برمجية منظمة وفعّالة؟ ⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


ده ملخص بسيط لكتاب "Clean Architecture" اللي ممكن يغير طريقة تفكيرك في البرمجة ويخليك تبني برمجيات قوية وسهلة الصيانة. ✅

https://www.linkedin.com/posts/dev-alisamir_cleanarchitecture-softwaredesign-softwareengineering-activity-7220075858487652354-AJ0o

قناة الوظائف والتدريبات ⚡️

DevJobs 🇵🇸

Your daily destination for top-tier programming jobs and training. ⭐️

https://t.me/devsjobs

#frontend_tips
———————

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


CSS Scroll Padding Top 🔻

- Using the CSS scroll-padding-top to add space at the top so nothing gets hidden when you scroll.

———

⚡️ Tutorial Video: https://youtu.be/gzYEg9ax2UA

Mastering SOLID Principles ✅

- The SOLID principles are design principles in object-oriented programming that help developers create more understandable, flexible, and maintainable software.

https://dev.to/alisamirali/mastering-solid-principles-1aa6

مجموعة أسئلة هتساعدك لو بتحضر لانترفيو أنجولار 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


كان عندي كام انترفيو أنجولار الفترة الأخيرة ودي بعض المواقع والأسئلة اللي ساعدتني بشكل كبير 💡

https://www.linkedin.com/posts/dev-alisamir_angular-angulardeveloper-typescript-activity-7221121864708853760-6jeW

بالتوفيق يا أنجولاري 💪🏻

تركاية VS Code على السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


VS Code Regex Comment Removal 🔻

- Using Regular Expression in VS Code to find and replace HTML comments.

———

⚡️ Tutorial Video: https://youtu.be/zvvGe6HxyjA

Front End Web Developer

- Become a Front-End Web Developer by completing a variety of projects for your portfolio - become an HTML, CSS and JavaScript pro!

https://digital3fs.com/front-end-web-developer