دوره فشرده طراحی سایت با ReactJS در ۱ روز
(پروژه محور)
طراحی صفحات اصلی سایت
ترب با NextJs و Tailwind
..:: ۱۰ درصد تخفیف بیشتر با پرداخت رمزارز::..
@alithecodeguy #react

دوستان جلسه این هفته پر شد.
هفته آینده هم مشابه این هفته و با همین مبلغ ، دوره فشرده دیگه ای هست که صفحات اصلی سایت تراست ولت رو پیاده سازی میکنیم. (فقط فرانت)
پوسترش رو هفته اینده داخل کانال میذارم.

داکیومنت اصلی HTML5 :
https://html.spec.whatwg.org
دوستانی که میگن فرانت کاری نداره ، یه نگاهی بندازن. ۲۱۰۰ صفحه!
این تازه شاید یک صدم از کل کاریه که توی فرانت انجام میشه

دوره فشرده طراحی سایت با ReactJS در ۱ روز
۱۰ دی ماه- ۱۰ صبح تا ۱۰ شب
(پروژه محور)
..:: ۱۰ درصد تخفیف بیشتر با پرداخت رمزارز::..
@alithecodeguy #react

طرفیت این هفته تکمیل شد. انشالله هفته های آتی در خدمت دوستان خواهیم بود.

برای دوره فشرده و پروژه محور جمعه ۲۴ دی ماه ، چه سایتی رو طراحی کنیم؟ ممنون میشم همه دوستان نظرشون رو کامنت کنن.
(تعداد سایتا زیاده نمیشد به حالت نظرسنجی پرسید)

تغییرات React Router در ورژن 6 نسبت به ورژن قبل:
✅در ورژن 6 <Switch> حذف شده و به جای آن <Routes> جایگزین شده
✅در <Route> یک property به نام element اضافه شده است.
✅در ورژن 6، propertyهای activeStyle, activeClassName از <NavLink> حذف شده اند و در عوض className و style جایگزین شده اند که برای عملکرد بهتر یک فانکشن دریافت میکنند.
✅در ورژن 6، <Redirect> جایگزین <Navigate> شده است.
❗️در این لیست فقط تعداد محدودی از تغییرات ایجاد شده را معرفی کردیم. بنابراین پیشنهاد میکنم برای اطلاع از تغییرات دیگر ویدئو را مشاهده کنید.
#react_router
@alithecodeguy

ساخت رزومه با conva
این سایت کلی تمپلیت آماده و کاربردی در اختیار کاربر قرار میده که بتونید یه رزومه مناسب و تمیز برای ورود به بازار کار تهیه کنید. حتی نسخه free هم در اختیار کاربر قرار داده. میتونید هم با ساخت اکانت و هم بدون ساخت اکانت از امکاناتش استفاده کنید.
حتی نه تنها برای ساخت رزومه بلکه برای ساخت لوگو، پوستر، انواع پست‌ها و ... میتونید ازش استفاده کنید.
https://www.canva.com/
@alithecodeguy

🔷چرا اول فایل HTML باید از دستور <DOCTYPE html!> استفاده کنیم؟
دستور <DOCTYPE!> تگ نیست بلکه، یک دستورالعمل برای مشخص کردن نسخه یک فایل HTML است. همانطور که میدانید W3C نسخه های مختلفی از زبان HTML را ارائه داده است که هر کدام در مقایسه با هم تفاوت هایی را دارند، به این دلیل ممکن است مرورگر در تشخیص صحیح نسخه HTML استفاده شده دچار اشتباه شود و تنظیمات پیش فرض خود را اعمال کند. برای حل این مساله W3C استانداردی تعریف کرد که تمام سازندگان مرورگرها و دولوپرها از آن استاداردها طبعیت کنند بنابراین دولوپرها با اضافه کردن <DOCTYPE html!> در خط اول کدهای HTML خود به مرورگر میفهماندند که از کدام نسخه استفاده کند. البته لازم به ذکر است که این دستور برای صفحات وب که با HTML5 پیاده سازی شده اند قابل درک است و برای صفحات وب HTML4.0.1 باید از دستور دیگری استفاده کرد. برای آشنایی با جزییات بیشتر سایتهای زیر پیشنهاد میشود.
✅https://www.w3schools.com/tags/tag_doctype.asp
✅https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/

@alithecodeguy

🔹 دستور important در css چه زمانهایی استفاده میشود؟
با استفاده از دستور important در CSS میتوانیم تعریف کنیم که اولویت اجرای یک دستور در CSS به بالاترین اولویت تبدیل شود و اولویت اجرای بقیه دستورات را لغو کند.
✅معایب استفاده از این دستور :
پایین اومدن قدرت اشکال یابی
پایین اومدن خوانایی کد
بستن دست خودتون در آینده برای ایجاد تغییرات
✅مزیت استفاده از این دستور :
با وجود داشتن یک فایل CSS خارجی میتوانید با این دستور اولویت کدهای خود را بالاتر ببرید

@alithecodeguy

🔹تگهای معنایی(semantic tags) چه هستند و چرا ایجاد شدند؟
قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از دستوراتی مانند <div id="navbar"> یا <div class="header"> استفاده میشد.
اما با ایجاد تگهای معنایی برای مرورگر مشخص شد که هر محتوایی که در این تگ ها وجود دارد از چه نوعی هستند و چه نقشی در صفحه وب دارند. درواقع این تگها اطلاعات اضافی به محتوای سایت اضافه میکنند که به موتورهای جستجوی گوگل امکان تشخیص نوع محتوا و نیز درجه اهمیت و اولویت محتواهای صفحات وب را می دهند و نقش بسزایی در بحث سئوی صفحات وب ایفا میکنند و همچنین خوانایی کد را بالا میبرد.
@alithecodeguy

ابزار Svelte رو دریابید. رقیب قدرتمندیه برای React و تا حدودی که من کار کردم نظرم رو جلب کرده. تمرکزش روی performance صفحاته و کدرنی باهاشم هرچند که مقداری متفاوته ولی چیزی نیست که اذیت کنه و در واقع از ریکت آسون تره.
چرا گفتم ابزار؟ چون بیشتر از اینکه فریم ورک باشه ، کامپایلر محسوب میشه.
در آینده مطالب بیشتری در موردش میذارم
@alithecodeguy #svelte #js

🔹تفاوت کتابخانه(library) و فریم ورک(framework)
تفاوت فریم ورک و کتابخانه، در نحوه‌ی کنترل کدهاست.
✅کتابخانه، مجموعه‌ای از کلاس‌ها و متد‌هاست که آنها را فراخوانی می‌کنیم و برای ساده تر شدن کد نویسی از اونا استفاده میکنیم. درواقع کنترل جریان کد دست خودمان است، این ما هستیم که تعیین میکنیم کی و کجا از چه لایبرری استفاده کنیم.
✅فریم ورک، فریم‌ورک مجموعه‌ی کاملی از لایبرری‌هاست.درواقع کنترل جریان برنامه دست آن فریم‌ورک هست و چارچوب و اسکلت کد ما توسط اون فریم‌ورک تعیین میشود. فریم‌ورک بستری را فراهم میکند تا بتونیم کد‌ها را نوشته و این فریم‌ورک هست که تصمیم میگیرد کی و کجا از کد‌های ما استفاده نماید. به طور کلی فریم ورک را فراخوانی نمی‌کند، بلکه فریم ورک، کدهای اضافه شده توسط کاربر را فراخوانی می‌کند.
@alithecodeguy

ممکن است بارها با عبارت falsy expressions روبرو شده باشید اما این عبارت چیست؟ در جاوا اسکریپت، عبارات Truthy به مقدار درست بولی و عبارات Falsy به مقدار غلط بولی ارزیابی می شوند.
در مجموع 6 عبارت falsy در جاوااسکریپت وجود دارد که عبارت اند از:
false
+0/-0
“ ”/’ ’/
null
undefind
NaN
@alithecodeguy

چگونه در جاوا اسکریپت فانکشن‌هایی با نام و حتی بدنه متغیر داشته باشیم؟
با استفاده از فانکشنی مشابه این عکس.
چرا ممکنه نیاز داشته باشیم از همچین چیزی استفاده کنیم؟ چون گاهی اوقات اسم و حتی بدنه فانکشنی که قراره اجرا بشه رو از قبل نمیدونیم و توی ران تایم ایجاد میشه یا از روی api خونده میشه.

این لینک هم میتونه کمکتون کنه :
https://stackoverflow.com/questions/5905492/dynamic-function-name-in-javanoscript/40918734#40918734

#js #javanoscript #dynamic #alithecodeguy @alithecodeguy

🔹لینکدین قابلیتی به‌نام Open to Work دارد که افراد جویای کار را بهتر نمایش می‌دهد.
افراد جویای کار با استفاده از این قابلیت لینکدین می‌توانند در تصویر پروفایل خود، وضعیت جویای کار بودن را با ظاهری مناسب نمایش دهند. این قابلیت به‌صورت یک نشان یا برچسب درکنار تصویر پروفایل دیده می‌شود که عبارت جویای کار یا Open to Work را نمایش می‌دهد.
1. وارد صفحه اول پروفایلتان شوید.
2. در بالای صفحه زیر عکس پروفایل از کادر خط چین گزینهShow recruiters you’re open to work را انتخاب کنید و گزینه Get started را بزنید.
3. تنظیمات و گزینه‌های شغل موردنظرتان مثل موقعیت مکانی و مدل استخدام( مثل تمام وقت یا پاره وقت، دورکاری و ..) قابل انتخاب و تنظیم است.
4. شما می توانید از طریق گزینه Choose who sees you’re open انتخاب کنید چه افرادی می توانند حالت جویای کار بودن را در پروفایل شما ببینند؟
بعد از انجام این مراحل گزینه add to profile را انتخاب کرده تا درخواست شما به صورت یک پست در لینکدین منتشر میشود و این قابلیت به تصویر پروفایل شما اضافه میگردد.
@alithecodeguy

🔹وظیفه تگ meta در html5
این تگ اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجو ارائه می دهد. این اطلاعات برای کاربران قابل مشاهده نیست، اما توسط مرورگرها و موتورهای جستجو قابل تجزیه و تحلیل می باشند، این اطلاعات میتواند به یک وبسایت برای نمایش بهتر در مرورگرها و موتورهای جستجو کمک کند. تعدادی از مهمترین metadata :
✅<meta charset=”UTF-8″>
با استفاده از این کد به مرورگر دستور میدهیم که تمام کاراکترها را پشتیبانی نماید
✅<meta name=”denoscription”>
برای مشخص کردن یه توضیح یا شرح کوتاه درباره صفحه وب استفاده میشود.( برای نمایش در موتورهای جستجوگر و بحث سئو )
✅<meta name=”viewport”>
ناحیه قابل مشاهده کاربر از یک صفحه وب در گوشی های موبایل ، تبلت ها و.. می باشد.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
@alithecodeguy

در صفحات عادی وب ، lang رو باید به تگ html اضافه کنیم. برای NextJs که تگ html در دسترسمون قرار نداره چیکار کنیم؟
میتونیم چندتا خط بالا رو به next.config.js اضافه کنیم. این روش روی ورژن ۱۰ به بالا کار میکنه. برای ورژن های پایین تر از _document باید استفاده کرد.
حالا lang به چه دردی میخوره؟ برای SEO و Accessability بسیار مهمه.
#js #nextjs #react #alithecodeguy @alithecodeguy