๐๐๐๐จ๐ฆ๐ฆ๐๐ง๐๐๐ ๐๐๐๐ก ๐๐ญ๐๐๐ค ๐
๐จ๐ซ ๐๐๐๐ก ๐๐ซ๐จ๐ฃ๐๐๐ญ ๐๐ฒ๐ฉ๐ โก๏ธ
โฆฟ 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.
โฆฟ 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.
๐4๐ฅ2๐1
ุฅุฒุงู ุชุตู
ู
ุฃูุธู
ุฉ ุจุฑู
ุฌูุฉ ู
ูุธู
ุฉ ููุนูุงูุฉุ โก๏ธ
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ุฏู ู ูุฎุต ุจุณูุท ููุชุงุจ "Clean Architecture" ุงููู ู ู ูู ูุบูุฑ ุทุฑููุฉ ุชูููุฑู ูู ุงูุจุฑู ุฌุฉ ููุฎููู ุชุจูู ุจุฑู ุฌูุงุช ูููุฉ ูุณููุฉ ุงูุตูุงูุฉ. โ
https://www.linkedin.com/posts/dev-alisamir_cleanarchitecture-softwaredesign-softwareengineering-activity-7220075858487652354-AJ0o
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ุฏู ู ูุฎุต ุจุณูุท ููุชุงุจ "Clean Architecture" ุงููู ู ู ูู ูุบูุฑ ุทุฑููุฉ ุชูููุฑู ูู ุงูุจุฑู ุฌุฉ ููุฎููู ุชุจูู ุจุฑู ุฌูุงุช ูููุฉ ูุณููุฉ ุงูุตูุงูุฉ. โ
https://www.linkedin.com/posts/dev-alisamir_cleanarchitecture-softwaredesign-softwareengineering-activity-7220075858487652354-AJ0o
๐3
ููุงุฉ ุงููุธุงุฆู ูุงูุชุฏุฑูุจุงุช โก๏ธ
DevJobs ๐ต๐ธ
Your daily destination for top-tier programming jobs and training. โญ๏ธ
https://t.me/devsjobs
DevJobs ๐ต๐ธ
Your daily destination for top-tier programming jobs and training. โญ๏ธ
https://t.me/devsjobs
โค1
ู
ุณุงุฑ ุชุนูู
TypeScript ๐ฅ
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ูู ุงูู ุณุงุฑ ุฏู ุฌู ุนุชูู ุจุนุถ ุงูุฃุณุงุณูุงุช ุงููู ูุงุฒู ุชุนุฑููุง ุนุดุงู ุชุจุฏุฃ ุฑุญูุชู ู ุน ูุบุฉ TypeScript ูุญุฏ ู ุง ุชูุตู ููู ุณุชูู ุงููู ููุฎููู ุชุทูุฑ ุฃู ุชุทุจูู ุฃู ู ูุชุจุฉ ุจูู ุณูููุฉ. โ
TypeScript Learning Path: From Novice to Ninja ๐ฅท๐ป
https://www.linkedin.com/posts/dev-alisamir_typescript-learning-path-from-novice-to-activity-7220476506374868992-tLCO
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ูู ุงูู ุณุงุฑ ุฏู ุฌู ุนุชูู ุจุนุถ ุงูุฃุณุงุณูุงุช ุงููู ูุงุฒู ุชุนุฑููุง ุนุดุงู ุชุจุฏุฃ ุฑุญูุชู ู ุน ูุบุฉ TypeScript ูุญุฏ ู ุง ุชูุตู ููู ุณุชูู ุงููู ููุฎููู ุชุทูุฑ ุฃู ุชุทุจูู ุฃู ู ูุชุจุฉ ุจูู ุณูููุฉ. โ
TypeScript Learning Path: From Novice to Ninja ๐ฅท๐ป
https://www.linkedin.com/posts/dev-alisamir_typescript-learning-path-from-novice-to-activity-7220476506374868992-tLCO
โค3
#frontend_tips
โโโโโโโ
ุชุฑูุงูุฉ ูุฑููุช ุงูุฏ ุน ุงูุณุฑูุน...โก๏ธ
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
CSS Scroll Padding Top ๐ป
- Using the CSS
โโโ
โก๏ธ Tutorial Video: https://youtu.be/gzYEg9ax2UA
โโโโโโโ
ุชุฑูุงูุฉ ูุฑููุช ุงูุฏ ุน ุงูุณุฑูุน...โก๏ธ
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
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
โค5
Forwarded from DevJobs ๐ต๐ธ
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
- 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
๐1
ู
ุฌู
ูุนุฉ ุฃุณุฆูุฉ ูุชุณุงุนุฏู ูู ุจุชุญุถุฑ ูุงูุชุฑููู ุฃูุฌููุงุฑ ๐ป
ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ูุงู ุนูุฏู ูุงู ุงูุชุฑููู ุฃูุฌููุงุฑ ุงููุชุฑุฉ ุงูุฃุฎูุฑุฉ ูุฏู ุจุนุถ ุงูู ูุงูุน ูุงูุฃุณุฆูุฉ ุงููู ุณุงุนุฏุชูู ุจุดูู ูุจูุฑ ๐ก
https://www.linkedin.com/posts/dev-alisamir_angular-angulardeveloper-typescript-activity-7221121864708853760-6jeW
ุจุงูุชูููู ูุง ุฃูุฌููุงุฑู ๐ช๐ป
ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ูุงู ุนูุฏู ูุงู ุงูุชุฑููู ุฃูุฌููุงุฑ ุงููุชุฑุฉ ุงูุฃุฎูุฑุฉ ูุฏู ุจุนุถ ุงูู ูุงูุน ูุงูุฃุณุฆูุฉ ุงููู ุณุงุนุฏุชูู ุจุดูู ูุจูุฑ ๐ก
https://www.linkedin.com/posts/dev-alisamir_angular-angulardeveloper-typescript-activity-7221121864708853760-6jeW
ุจุงูุชูููู ูุง ุฃูุฌููุงุฑู ๐ช๐ป
๐3
ุชุฑูุงูุฉ 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
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
VS Code Regex Comment Removal ๐ป
- Using Regular Expression in VS Code to find and replace HTML comments.
โโโ
โก๏ธ Tutorial Video: https://youtu.be/zvvGe6HxyjA
๐ฅ3โค2๐1
ู
ุณุงุฑ ุชุนูู
ุฅุทุงุฑ ุงูุนู
ู Angular ๐ฅ
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ุฌู ุนุชูู ุฃูู ุงูุฃุณุงุณูุงุช ูุงูู ูุงููู ุงููู ูุงุฒู ุชุนุฑููุง ุนุดุงู ุชุจุฏุฃ ุฑุญูุชู ู ุน ุฅุทุงุฑ ุงูุนู ู Angular ูุญุฏ ู ุง ุชูุตู ูู ุณุชูู ูููุณ ุฌุฏูุง ุจุฅุฐู ุงููู ุชุนุงูู. โ
Angular Learning Path: From Novice to Ninja ๐ฅท๐ป
https://www.linkedin.com/posts/dev-alisamir_angular-learning-path-from-novice-to-ninja-activity-7221494082852835329-8U5I
ุจุงูุชูููู ูุง ุตุฏููู ุงูููุงุด ๐ช๐ป
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
ุฌู ุนุชูู ุฃูู ุงูุฃุณุงุณูุงุช ูุงูู ูุงููู ุงููู ูุงุฒู ุชุนุฑููุง ุนุดุงู ุชุจุฏุฃ ุฑุญูุชู ู ุน ุฅุทุงุฑ ุงูุนู ู Angular ูุญุฏ ู ุง ุชูุตู ูู ุณุชูู ูููุณ ุฌุฏูุง ุจุฅุฐู ุงููู ุชุนุงูู. โ
Angular Learning Path: From Novice to Ninja ๐ฅท๐ป
https://www.linkedin.com/posts/dev-alisamir_angular-learning-path-from-novice-to-ninja-activity-7221494082852835329-8U5I
ุจุงูุชูููู ูุง ุตุฏููู ุงูููุงุด ๐ช๐ป
โค4๐1
Verify These Aspects Before Deploying Your Website ๐ฅ
https://dev.to/alisamir/verify-these-aspects-before-deploying-your-website-5hmp
https://dev.to/alisamir/verify-these-aspects-before-deploying-your-website-5hmp
DEV Community
Verify These Aspects Before Deploying Your Website ๐ฅ
Launching a website on the internet is a crucial step that highlights the importance of refining...
Exploring Web Development: Key Concepts and Essential Insights ๐ - Part 1
https://dev.to/alisamir/exploring-web-development-key-concepts-and-essential-insights-part-1-51ee
Exploring Web Development: Key Concepts and Essential Insights ๐ - Part 2
https://dev.to/alisamir/exploring-web-development-key-concepts-and-essential-insights-part-2-ja5
https://dev.to/alisamir/exploring-web-development-key-concepts-and-essential-insights-part-1-51ee
Exploring Web Development: Key Concepts and Essential Insights ๐ - Part 2
https://dev.to/alisamir/exploring-web-development-key-concepts-and-essential-insights-part-2-ja5
๐1
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
- 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
ุชุฑูุงูุฉ Terminal ุนูู ุงูุณุฑูุน...โก๏ธ
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
Real-Time Terminal Sharing ๐ป
โโโ
โก๏ธ Tutorial Video: https://youtu.be/ClFvFYbyIds
- ูุง ุชูุณูุง ุฃูููุง ูู ููููุณุทูููู ููู ุณูููุฑูุง ููู ุงูุณูููุฏุงู ููู ุงููููู ู ููู ูู ุฏูู ุงูุนุงูู ู ู ุงูู ุณูู ูู ู ู ุงูุฏุนุงุก. ๐ค
Real-Time Terminal Sharing ๐ป
โโโ
โก๏ธ Tutorial Video: https://youtu.be/ClFvFYbyIds
TypeScript 5.6 Beta is now out with:
โก๏ธ Errors on Suspicious Truthish/Nullish Checks
โก๏ธ Iterator Methods like
โก๏ธ Error-Tolerant --build Mode
โก๏ธ --noCheck
โก๏ธ Type-Checking Prioritized by Editor Viewports
https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-beta
โก๏ธ Errors on Suspicious Truthish/Nullish Checks
โก๏ธ Iterator Methods like
.map()
and .filter()
โก๏ธ Error-Tolerant --build Mode
โก๏ธ --noCheck
โก๏ธ Type-Checking Prioritized by Editor Viewports
https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-beta
Microsoft News
Announcing TypeScript 5.6 Beta
Today we are excited to announce the availability of TypeScript 5.6 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta Hereโs a quick list of whatโs new in TypeScriptโฆ