اولین دوره مقدماتی و عمیق جاوا‌اسکریپت!
مباحث مقدماتی رو ، هم به شکل به‌روز‌تر و هم به شکل عمیق‌تر بررسی میکنیم.
اطلاعات بیشتر در تصویر.
لینک کانال تلگرامی:
https://news.1rj.ru/str/alithecodeguy
مباحث مقدماتی رو ، هم به شکل به‌روز‌تر و هم به شکل عمیق‌تر بررسی میکنیم.
اطلاعات بیشتر در تصویر.
لینک کانال تلگرامی:
https://news.1rj.ru/str/alithecodeguy
اگر قبلا Nextjs کار کردید و الان میخواید به نسخه جدیدش سوییچ کنید (۱۳ و بالاتر) و از ویژگی‌های جدیدش استفاده کنید ، دوره زیر رو به صورت رایگان از دانلودلی می‌تونید دانلود کنید.
دوره خوبیه.
https://downloadly.ir/elearning/video-tutorials/introduction-to-next-js-13-v3/
#nextjs
دوره خوبیه.
https://downloadly.ir/elearning/video-tutorials/introduction-to-next-js-13-v3/
#nextjs
دانلود رایگان نرم افزار
دانلود Frontend Masters - Introduction to Next.js 13+, v3 2023-8 - دانلود رایگان نرم افزار
دانلود Frontend Masters - Introduction to Next.js 13+, v3 2023-8 - دوره آموزش آشنایی با Next.js 13، ماژول های CSS
سوال ریکتی : propagation برای همه eventها اتفاق میفته به جز یک مورد. اون چیه؟
اگر از Tailwind استفاده می‌کنید این ۳ تا ریسورسی که برای کامپوننت‌ها ، آیکون‌ها و پترن‌های رایگان داخل داکیومنتش معرفی کرده رو دریابید. جذابن:
https://headlessui.dev/
https://heroicons.com/
https://heropatterns.com/
https://headlessui.dev/
https://heroicons.com/
https://heropatterns.com/
سوال مصاحبه‌ای ریکت:
یک کامپوننت در چه شرایطی ری‌رندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy
یک کامپوننت در چه شرایطی ری‌رندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy
نکته HTMLای:
- pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
- clientX/Y gives the coordinates relative to the viewport in CSS pixels.
- screenX/Y gives the coordinates relative to the screen in device pixels
#html #tip @alithecodeguy
- pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
- clientX/Y gives the coordinates relative to the viewport in CSS pixels.
- screenX/Y gives the coordinates relative to the screen in device pixels
#html #tip @alithecodeguy
این مقاله از آقای علی نظری رو به نظرم خوبه که بخونید.
https://ditty.ir/posts/frontend-interview-questions-part-1/nMl85
https://ditty.ir/posts/frontend-interview-questions-part-1/nMl85
دوستانی که از قوانین بیمه مطلع هستید ، سوال دارم از محضرتون.
اگر جایی به شما فرضا ۱۰۰ تومن حقوق بده ولی ۱۰ تومن بیمه رد کنه ، چه مشکلاتی ممکنه بوجود بیاره؟
اگر جایی به شما فرضا ۱۰۰ تومن حقوق بده ولی ۱۰ تومن بیمه رد کنه ، چه مشکلاتی ممکنه بوجود بیاره؟
رنج حقوقی برنامه‌نویسهای ریکت بر اساس آمار جاب ویژن
@alithecodeguy
@alithecodeguy
نکته ساده و عمیق ریکتی :
it’s the position in the UI tree—not in the JSX markup—that matters to React!
یعنی این که محل قرارگیری کامپوننت‌ها توی دامه که مهمه نه نگارش JSX اون کامپوننت.
به عبارت دیگه توی کد زیر هر چند که کانتر دوبار نوشته شده ولی چون در نهایت چون یک کامپوننت یکسان در موقعیت یکسان نمایش داده شده پس ریکت فکر نمیکنه که یک کامپوننت جدیده و استیت‌هاش رو نگه میداره :
<div>
{isFancy ? (
<Counter isFancy={true} />
) : (
<Counter isFancy={false} />
)}
<label>
<input
type="checkbox"
checked={isFancy}
onChange={e => {
setIsFancy(e.target.checked)
}}
/>
Use fancy styling
</label>
</div>
اطلاعات بیشتر توی داکیومنت ریکت:
https://react.dev/learn/preserving-and-resetting-state
@alithecodeguy
it’s the position in the UI tree—not in the JSX markup—that matters to React!
یعنی این که محل قرارگیری کامپوننت‌ها توی دامه که مهمه نه نگارش JSX اون کامپوننت.
به عبارت دیگه توی کد زیر هر چند که کانتر دوبار نوشته شده ولی چون در نهایت چون یک کامپوننت یکسان در موقعیت یکسان نمایش داده شده پس ریکت فکر نمیکنه که یک کامپوننت جدیده و استیت‌هاش رو نگه میداره :
<div>
{isFancy ? (
<Counter isFancy={true} />
) : (
<Counter isFancy={false} />
)}
<label>
<input
type="checkbox"
checked={isFancy}
onChange={e => {
setIsFancy(e.target.checked)
}}
/>
Use fancy styling
</label>
</div>
اطلاعات بیشتر توی داکیومنت ریکت:
https://react.dev/learn/preserving-and-resetting-state
@alithecodeguy
این کد ترکیب debounce , fetch و AbortController هست که از مثال‌های آقای نظری برداشتم. اگر تازه برنامه‌نویسی وب رو شروع کردید یا با این عبارات آشنا نیستید ، پیشنهاد میکنم زمان بذارید و این کد رو مطالعه کنید.
لینک:
https://ditty.ir/posts/javanoscript-abortcontroller/nBwbX
@alithecodeguy #tip #abort #debounce
لینک:
https://ditty.ir/posts/javanoscript-abortcontroller/nBwbX
@alithecodeguy #tip #abort #debounce
میدونیم که استیت آپدیت‌ها توی ریکت آسینک هستن. یعنی نمی‌تونیم مطمن باشیم که چه زمانی انجام میشن. به عبارت دیگه اگر دو خط کد بزنید که یکیش استیت آپدیت باشه نمیتونید مطمن بشید که کدوم خط اول انجام میشه.
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه می‌تونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.
#tip #react #js @alithecodeguy
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه می‌تونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.
#tip #react #js @alithecodeguy
یکی از سوالات نکته‌دار جاوااسکریپتی‌ای که معمولا توی مصاحبه‌های فنی میبینید.
چندتا نکته همزمان وجود داره.
#interview #tip #js
@alithecodeguy
چندتا نکته همزمان وجود داره.
#interview #tip #js
@alithecodeguy
اگر روی یوتیوب ویدیوهای آموزشی میبینید ، این کانال خوبیه:
https://www.youtube.com/@ConnerArdman
#youtube
https://www.youtube.com/@ConnerArdman
#youtube
نکته جاوااسکریپتی:
همیشه حواستون به binded object باشه.
(کلک مرغابی : اگر جایی به کدتون شک کردید ، جداگونه تستش کنید مطمن بشید عملکرد مدنظرتون رو برای همه حالت‌هایی ممکن انجام میده.)
#js #tip #interview
@alithecodeguy
همیشه حواستون به binded object باشه.
(کلک مرغابی : اگر جایی به کدتون شک کردید ، جداگونه تستش کنید مطمن بشید عملکرد مدنظرتون رو برای همه حالت‌هایی ممکن انجام میده.)
#js #tip #interview
@alithecodeguy