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

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

📌افزونه Marmoset
✅هر کدی که داشته باشید با این افزونه میتوانید به عکس تبدیل کنید و در همان برنامه تنظیمات مختلفی روی عکس انجام دهید. این افزونه مناسب این است که عکسهای جالبی از کدهای خود تهیه کنید و در پست ها و وبسایتهای خود از آنها استفاده کنید.
@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

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

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

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

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

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

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

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

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

📌انواع واحد اندازه گیری در 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

📌font awesome
✅یکی از راه های اضافه کردن آیکون به صفحات وب استفاده از font awesome میباشد. با استفاده از این روش میتوانید به جای تهیه و استفاده از تصاویر مختلف در وبسایت خود از آیکونهای آماده در این فونت استفاده کنید.
به این دلیل که این تصاویر به صورت برداری هستند می‌توانید آیکونها را بدون تغییر در کیفیت نمایش آنها، در هر اندازه‌ای به کار ببرید.
✅همچنبین می‌توانید به کمک CSS میتوانید، رنگ، اندازه و موارد دیگری را که از این طریق قابل تنظیم کردن است روی آیکونها اعمال کنید.
✅برای استفاده رایگان از font awesome میتوانید از دو روش استفاده کنید. روش اول دانلود آیکونها از وب سایت میباشد و روش دوم ایجاد اکانت و لینک کردن آدرسی که پس از ایجاد اکانت در اختیار کاربر قرار میگیرد.
@alithecodeguy

📌Css Text
✅ در css پروپرتی های بسیاری برای قالب بندی متن وجود دارد که هنگام استایل دهی در صفحات وب، تعداد زیادی از این ویژگی ها مورد استفاده قرار میگیرد.
✅ پروپرتی های متن به صورت زیر دسته بندی میشود:
🔹Text Color
برای استفاده از رنگ بندی در متن استفاده میشود
🔹Text Alignment
برای تراز بندی متن در صفحات وب استفاده میشود
🔹Text Decoration
برای حذف یا اضافه کردن decoration برای متون در صفحات وب استفاده میشود
✅ برای آشنایی با ویژگی های بیشتر و همچنین نحوه استفاده از این ویژگی ها سایت زیر را مطالعه کنید.
https://www.w3schools.com/css/css_text.asp
@alithecodeguy

📌 متد ()concat
✅متد concat برای الحاق دو آرایه بهم مورد استفاده قرار میگیرد و یک آرایه جدید برمی‌گرداند.
📌متد ()slice
✅ متد slice دو آرگومان می‌گیرد که این آرگومانها index آرایه هستند و برای کپی کردن آرایه از index آغازین تا index پایانی مورد استفاده قرار میگیرد.
اولین آرگومان index است که کپی کردن آیتم‌ها را از آن شروع می‌کنیم. دومین آرگومان index است که کپی آیتم‌ها را تا آن انجام می‌دهیم. در نهایت این متد یک آرایه جدید برمی‌گرداند که آیتم‌های آرایه اصلی از ایندکس آغازین تا ایندکس پایانی در آن کپی شده‌ است.
@alithecodeguy

📌خروجی در جاوااسکریپت
✅در جاوااسکریپت میتوانید به چهار روش داده ها را در خروجی نمایش دهید:
🔹نمایش خروجی در تگهای html با استفاده از innerHTML
🔹نمایش خروجی در صفحه وب با استفاده از ()document.write. این دستور معمولا برای تست خروجی مورد استفاده قرار میگیرد.
🔹نمایش به صورت پیغام در یک alert box با استفاده از ()window.alert
🔹گرفتن خروجی در کنسول مرورگر با استفاده از ()console.log. از این روش معمولا برای خطایابی استفاده میشود.
@alithecodeguy

📌دستورات Break و Continue در جاوا اسکریپت
✅دستورات Break و Continue در جاوا اسکریپت اجازه می دهد اجرای حلقه های تکرار را کنترل کرده و قبل از اینکه شرط اجرای حلقه نقض شود تا حلقه پایان یابد، حلقه را پایان داده و یا مجددا اجرا شود.
این دستورات کنترل شما را بر حلقه های تکرار for و while بیشتر می کند.
✅دستور Break باعث شکستن حلقه و خروج از حلقه می شود.
✅دستور Continue از اجرای کدهای بعد از Continue جلوگیری میکند و حلقه از ابتدا اجرا می شود.
@alitehcodeguy

📌CSS Box Model
✅تمام المانهای HTML را می توان به عنوان باکس در نظر گرفت و در css زمانیکه از دیزاین و layout صحبت میکنیم درواقع از box model استفاده میکنیم.
✅هر css box model به صورت یک جعبه‌ای است که در اطراف المانهای HTML قرار میگیرد. این box model از 4 قسمت مختلف تشکیل شده است.
🔹Content
بخشی است که متن و تصاویر قرار میگیرند.
🔹Padding
شامل یک ناحیه و فضا اطراف content است.
🔹Border
حاشیه ای است که اطراف padding و content قرار میگیرد.
🔹Margin
شامل یک ناحیه و فضا خارج از border است.
https://www.w3schools.com/css/css_boxmodel.asp
@alithecodeguy