رقصنده با کد (و غیره)

📌انواع واحد اندازه گیری در css ✅در css چندین واحد برای بیان طول وجود دارد که برخی از این واحدها نسبت به بقیه کارایی بیشتری دارند. 🔹px با توجه به یک صفحه نمایش تعریف میشود که هر یک پیکسل یه نقطه از یک صفحه نمایش است. 🔹em نسبت به اندازه فونت المان والد اندازه تغییر میکند. به عنوان مثال em2 یعنی 2 برابر اندازه فونت فعلی است. (1em = 16px) 🔹rem نسبت به اندازه فونت المان ریشه اندازه تغییر میکند. (1rem = 16px) 🔹% نسبت به اندازه فونت المان والد اندازه تغییر میکند. 🔹vw نسبت به عرض صفحه نمایش اندازه تغییر میکند. (1vw = 1% width of the viewport = 4.8px) 🔹vh نسبت به ارتفاع صفحه نمایش اندازه تغییر میکند. (1vh = 1% height of the viewport = 8px) https://www.w3schools.com/cssref/css_units.asp @alithecodeguy

📌تگ map در HTML ✅ با استفاده از این تگ میتوانیم یک فضای قابل کلیک کردن بر روی یک عکس ایجاد کنیم. با ایجاد این فضا برای یک عکس این امکان برای کاربر فراهم میشود که با کلیک بر روی تصویر مورد نظر به یک صفحه دیگر هدایت شود و همینطور دستورات جاوااسکریپتی برای تصویر تعریف شود. ✅ با این تگ میتوان برای تصاویر فضای قابل کلیک به صورت دایره، مستطیل و چند ضلعی ایجاد کرد. https://www.w3schools.com/html/html_images_imagemap.asp @alithecodeguy

📌متد ()some ✅ متد some یک تابع Callback می‌گیرد و اگر حداقل یک عنصر از آرایه که تابع Callback برای آن فراخوانی شده، شرط تابع صدق کند مقدار true را بر‌میگرداند. در غیر این صورت مقدار false برمی‌گرداند. 📌متد ()every ✅ این متد دقیقا عملکردی متضاد با متد some را دارد. به این صورت که این متد نیز یک تابع Callback میگیرد و در صورتی که شرط تابع Callback برای تمام آیتم‌های آرایه برقرارباشد، مقدار true برمیگرداند و در غیر این صورت مقدار false برمی‌گرداند. @alithecodeguy

📌رویداد های زمانی یا Timing Events ✅در جاوا اسکریت کدها می توانند در فاصله های زمانی معینی اجرا شوند. که به این فواصل زمانی را Timing Events میگویند. ✅دو متد یا تابع اصلی برای این کار وجود دارد: 🔷(setTimeout(function, milliseconds تابع را بعد از اتمام زمان مشخص شده اجرا می کند 🔷(setInterval(function, milliseconds مانند setTimeout عمل می کند اما تابع را تکرار می کند. @alithecodeguy

شاید فکرکنید اونور خیلی گل و بلبله ولی این آماریه که از ۱۵ تا آگهی استخدام ریکت توی استک اورفلو درآوردم. عملا باید بک اند و سرور هم بلد باشید. پاورقی : برای سمت سنیور #react #job #alithecodeguy #stackoverflow #frontend

یه مقاله عالی روی medium https://itnext.io/frontend-interview-cheatsheet-that-helped-me-to-get-offer-on-amazon-and-linkedin-cba9584e33c7#21a5

مقاله سوم بنده در Medium https://medium.com/@alithecodeguy/how-make-svg-files-more-usable-for-reactjs-e6bf60b3e5a8 #react #medium #svg @alithecodeguy

📌pop-up javascript ✅جاوا اسکریپت سه نوع پنجره یا دیالوگ pop-up دارد: 🔹Alert box 🔹Confirm box 🔹Prompt box ✅Alert Box از این پنجره برای نمایش هشدار به کاربر در جاوا اسکریپت یا نمایش پیغام استفاده می شود. ✅Confirm Box این پنجره زمانی استفاده می شود که می خواهید از کاربر تاییدیه بگیرید.اگر کاربر OK را انتخاب کند، مقدار true و اگر Cancel را انتخاب کند مقدار false را بر می گرداند. ✅Prompt Box از این پنجره معمولا برای گرفتن ورودی از کاربر قبل از وارد شدن به صفحه استفاده می شود.اگر کاربر OK را انتخاب کند، مقدار ورودی را بر می گرداند و اگر کاربر Cancel را انتخاب کند، null بر می گرداند. @alithecodeguy

📌closure ✅در جاوااسکریپت closure تابعی است که به scope بیرونی تعریف شده خود دسترسی دارد. بنابراین می تواند به مقادیر خارج از scope دسترسی پیدا کند، حتی اگر تابع terminated شده باشد. در حالت کلی Closure تابعی است که داخل یک تابع دیگر تعریف و return میشود. همانطور که گفته شده است, وقتی در زبان برنامه نویسی متغیری تعریف می کنید، آن متغیر در یک ناحیه مشخص و معین قابل استفاده است و خارج از محدوده تعیین شده نمی شود از آن متغیر استفاده کرد، حتی برای نمایش محتوای متغیر. بنابراین با استفاده از closure میتوانیم محدوده دسترسی به متغیر را مدیریت کنیم و از ایجاد برخی باگها جلوگیری کنیم. ✅برای درک بهتر closure به مثال بالا توجه کنید. مثال اول بدون استفاده از closure میباشد که باعث شده است هدف درست تابع اجرا نشود و پاسخ اشتباه به دست بیاید. اما در مثال دوم با استفاده از closure هدف درست تابع اجرا شده است. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures @alithecodeguy

جلسه جمعه ۸ بهمن به درخواست یکی از دوستان به صورت شخصی و برای ایشون برگزار میشه. متاسفانه ویدیو جلسات رو در اختیار نفراتی که توی جلسات حضور ندارن نمیتونم قرار بدم. انشالله هفته های آینده با سایت های ایرانی یا خارجی دیگه ، در خدمتتون خواهم بود. بنرش رو توی کانال قرار میدم.

📌Scope ✅در جاوااسکریپت scope به معنای محدوده استفاده از هر متغیر است که مشخص می کند هر متغیر در چه محدوده ای قابل استفاده است. ✅در جاوا اسکریپت سه نوع scope داریم: 🔹block scope به فضای بین دو براکت، بلاک می‌گوییم. متغیرهایی که با let و const داخل یک بلاک تعریف میشوند فقط در همان بلاک قابل دسترسی هستند. اما برای var اینطور نیست. متغیری که با var داخل یک بلاک تعریف شود، بیرون بلاک هم قابل دسترسی است. 🔹global scope به بیرونی‌ترین قسمت یک برنامه جاوااسکریپتی global scope میگوییم. متغیرهایی که توی این اسکوپ تعریف میشوند، همه جای برنامه قابل دسترسی هستند. 🔹function scope متغیرهایی که توی یک تابع تعریف میشوند، اسکوپ local دارن و فقط درون خود تابع قابل دسترسی هستند. https://www.w3schools.com/js/js_scope.asp @alithecodeguy

📌افزونه Marmoset ✅هر کدی که داشته باشید با این افزونه میتوانید به عکس تبدیل کنید و در همان برنامه تنظیمات مختلفی روی عکس انجام دهید. این افزونه مناسب این است که عکسهای جالبی از کدهای خود تهیه کنید و در پست ها و وبسایتهای خود از آنها استفاده کنید. @alithecodeguy

📌متد reduce() در آرایه ها ✅متد reduce در مواردی استفاده می‌شود که می‌خواهیم یک آرایه را بر اساس تابع Callbackتعریف شده در آن به یک مقدار واحد کاهش دهیم. ✅تابع Callback استفاده شده در متد reduce دو پارامتر دارد. اولین پارامتر به طور پیش فرض اولین آیتم آرایه است. دومین پارامتر آیتم جاری در آرایه است. ✅این متد آرگومان اختیاری دومی می‌گیرد که با استفاده از آن می‌توان مشخص کرد عملیات را در تابع Callback با چه مقدار اولیه در آرایه می‌خواهیم شروع شود. https://www.w3schools.com/jsref/jsref_reduce.asp @alitehcodeguy

📌Webpack و✅ب پک (webpack) یک ماژول باندلر قدرتمند برای برنامه های کاربردی مدرن جاوااسکریپت است ابزاری است که در نرم افزارهای بسیاری استفاده می‌شود. منظور از باندل کردن این هست که تمامی فایل‌های جاوااسکریپت پروژه شما در یک فایل قرار خواهد گرفت تا در هنگام لود شدن صفحات وب، فقط از یک فایل استفاده شود. علاوه بر آن فایل‌هایی که از preprocessor ها و superset ها استفاده میکنند (مثل sass و typescript) به کدهای قابل درک برای مرورگر مثل (مثل js و css) تبدیل میکند. ✅به زبان ساده ابزاری برای مجتمع کردن فایل ها و در دسترس قرار دادن آنها است، به این صورت که ابتدا یک فایلی به وب پک داده می شود، وابستگی‌ها در وب پک بررسی و در یک باندلر جمع آوری و پک و در نهایت تحویل داده میشود. البته کاربرد وب پک تنها به جاوااسکریپت محدود نمیشود و میتواند در عکس، فونت، سی اس اس ها نیز استفاده شود. ✅برای آشنایی به نحوه کار با webpack ویدئو را مشاهده کنید و همچنین برای دستیابی به اطلاعات بیشتر webpack به آدرس وبسایت زیر مراجعه کنید. https://webpack.js.org/ @alithecodeguy

📌متد :nth-child(n) در css ✅این متد جزو pseudo کلاسهای css هست و عنصری را انتخاب میکند که nامین فرزند یک المان خاص است. ✅این متد را میتوانید برای تمام المانهای html استفاده کنید. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child @alithecodeguy

📌Arrow function ✅یک روش برای تعریف توابع در جاوااسکریپت است. این ویژگی بعد از معرفی ES6 در اختیار برنامه نویسان قرار گرفته است و اجازه میدهد که به راحتی یک تابع به همراه پارامتر یا بدون پارامتر ایجاد کنید. همچنین بدون استفاده از کلمات کلیدی function و return یک تابع بسازید. ✅در arrow function اگر از this استفاده شود، مقدار آن خارج از lifecycle آن تابع است و به نزدیکترین تابع non-arrow مربوط میشود. ✅توابع معمولی میتوان فراخوانی کرد و از construct استفاده کرد و میشه از new برای آن ها استفاده کرد. ولی arrow function تنها میتونن فراخونی شوند و نمیشه شیء جدیدی از آنها ساخت. ✅برای آشنایی با دیگر تفاوتهای arrow function و توابع معمولی پیشنهاد میشود لینک زیر را مطالعه کنید. https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/ @alithecodeguy

دورهمی tailwind3 ایز کامینگ! بنرش رو به زودی میذارم