📌افزونه CSSViewer در chrome
✅اطلاعات css را که یک توسعه دهنده وب به آن نیاز دارد، به سرعت ارائه میدهد. این افزونه یک صفحه شناور را زمانیکه ماوس روی بخش مورد نظر قرار میگیرد، ارائه میدهد. این افزونه ویژگی‌هایی مانند فونت، رنگ، پس زمینه و ... گزارش میدهد.
✅نحوه کار با این افزونه بسیار آسان میباشد. کافیست پس از نصب روی افزونه کلیک کرده و دکمه start را بزنید. سپس ماوس را روی هر بخشی نگه دارید اطلاعات مربوط به آن بخش را در یک کادر نمایش میدهد.
https://css-viewer.pdfwork.com/
@alithecodeguy

📌تفاوت کامپایلر و مفسر چیست؟
✅زبان های کامپایلری در ابتدا یک بار کدها را ترجمه می کنند. سپس برنامه از روی همین فایل کامپایل شده اجرا می شود. در زبان های مفسری کدها به صورت خط به خط تفسیر و اجرا می شوند.
✅زبان های مفسری در ابتدا برای اجرا، به یک نرم افزار مفسر نیاز دارند. اما زبان های کامپایلری فقط یک بار کامپایل می شوند و کدهایی که قابل فهم و اجرا برای ماشین باشند را تولید می کنند، سپس کدها بر روی هر نوع سیستم عاملی قابل اجرا است.
✅زبان های مفسری چون برنامه ها را به صورت خط به خط تفسیر و سپس اجرا می کنند، مقدار زیادی از پردازنده و حافظه را درگیر می کنند و همین باعث کاهش سرعت آن ها می شود. اما کامپایلرها کل برنامه را کامپایل کرده و زمان اجرای مجدد سرعت بیشتر میشود.
✅در زبان های مفسری به دلیل اجرای خط به خط، خطایابی در آن ها بهتر اتفاق می افتد. زبان های کامپایلری باید سورس برنامه مجددا بازیابی شده تا خطا را تصحیح کنید و مجددا آن را اجرا کنید. برای همین خطایابی در آن ها با دشواری بیشتری همراه است.
https://www.guru99.com/difference-compiler-vs-interpreter.html
@alithecodeguy

📌جاوااسکریپت زبان کامپایلری است یا مفسری است؟
✅اکثرا شنیدیم جاوااسکریپت مفسریه. زیرا کد ها به صورت خط به خط تفسیر و اجرا می شوند اما روشی که موتور های پردازش جاوااسکریپت مثل V8 کد را رو پردازش می‌کنن واقعا به روش کامپایلر شبیهه هستند. به‌علاوه میشه گفت، موتور V8 عملا تمام کد رو ابتدا تبدیل به کد ماشین می‌کنه و سپس اون رو اجرا می‌کنه. بنابراین آیا جاوااسکریپت کامپایلری است؟ باید توجه کنید که موتورهایی مثل V8 علیرغم روش فوق العاده شون، هیچ وقت یک فایل قابل اجرا به ما تحویل نمیدن و تفاوت هایی از این دست باعث میشه نتونیم به قطعیت بگیم جاوااسکریپت یک زبان کامپایلریه. با توجه به نظرات متخصصان بزرگ جاوا اسکریپت معتقدند که جاوااسکریپت زبانی کامپایلریه (یا حداقل زبانی مفسری نیست).
✅برای دسترسی به اطلاعات بیشتر در این زمینه پیشنهاد میشود به سایتهای زیر مراجعه کنید.
https://almogad.medium.com/javanoscript-is-it-compiled-or-interpreted-9779278468fc
https://blog.greenroots.info/javanoscript-interpreted-or-compiled-the-debate-is-over
@alithecodeguy

📌تعدادی از فریم‌وورکهای پرکاربرد css:
✅Bootstrap
یکی از پرکاربردترین فریم‌ورکهای css برای طراحی صفحات سمت کاربر یا فرانت‌اند است. Bootstrap رایگان و متن باز است و برای طراحی صفحات ریسپانسیو و واکنش‌گرا بسیار مناسب است.
✅Foundation
یکی از رقیب‌های bootstrap به حساب میاید. این فریم‌ورک اوپن‌سورس و رایگان برای طراحی صفحات واکنشگرا میباشد که کامپوننت های آماده فراوانی در اختیار برنامه نویس قرار میدهد.
✅Semantic UI
این فریم ورک به طراحان سایت کمک میکند به جای اینکه تمام عناصر سایت را از اول بسازند، از کامپوننتهای آماده استفاده کنند.
✅Tailwind
از این فریم‌ورک می توان برای ساخت وب سایت ها به سریع ترین و ساده ترین راه استفاده کرد. یک فریم ورک CSS برای ساخت سریع رابط های کاربری سفارشی است.
https://getbootstrap.com/
https://get.foundation/
https://semantic-ui.com/
https://tailwindcss.com/
@alithecodeguy

📌Hoisting
✅یک رفتار پیش فرض جاوا اسکریپت در زمینه ی declaration ها است. بر اساس این قابلیت، جاوا اسکریپت تمام declaration های متغیرها را به بالای سورس کد انتقال می دهد. بنابراین می توان قبل از تعریف یک متغیر از آن استفاده کرد. بحث Hoisting برای توابع هم کاربرد دارد؛ اگر در تابعی از یک متغیر استفاده کنید سپس آن را تعریف کنید، جاوا اسکریپت آن را به ابتدای تابع می برد.
✅در بحث Hoisting حتما به این نکات توجه کنید که:
❗️متغیرهایی که با let یا const تعریف شده باشند، شامل Hoisting نمی شوند.
❗️جاوا اسکریپت declaration ها را Hoist می کند اما initialization ها را نه.
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
@alithecodeguy

📌Constructor
✅در جاوااسکریپت constructor ها توابعی هستند که طرح کلی و ساختار اشیاء را تعیین می کنند. بنابراین اشیاء ای که با یک constructor ساخته شوند از یک نوع خواهند بود. از روش های توصیه شده برای نامگذاری constructor ها، بزرگ کردن حرف اولشان است. برای ساختن اشیاء باید constructor را با کلیدواژه ی new صدا بزنید.
https://javanoscript.info/constructor-new
@alithecodeguy

📌افزونه GoFullPage برای chrome
✅زمانیکه در حال دیزاین یک وبسایت برای کارفرما باشید یا اینکه به یک پیج با طراحی زیبا برخورد کرده باشید که قصد دارید آن را ذخیره کنید. قطعا گرفتن یک اسکرین‌شات از تمام آن صفحه گزینه مناسبی است که این افزونه کمک میکند تا به راحتی از وبسایت مورد نظر اسکرین‌شات گرفته و آن را به تصویر و یا PDF تبدیل کنید.
@alithecodeguy

📌متد ()map در آرایه‌ها
✅در جاوا اسکریپت میتوانیم تابعی ایجاد کنیم که با استفاده از یک حلقه تمام آیتم‌های آرایه را براساس تابع Callback ای که مشخص کردیم، تغییر دهد.اما اگر مجبور باشیم تابع را برای چندین برنامه‌ی متفاوت بنویسیم کاری زمان‌بر و خسته‌کننده است. بنابراین برای جلوگیری از این تکرار میتوانیم از متد map بر روی آرایه ها استفاده کنیم که دقیقا همین عملیات را برای ما انجام می‌دهد. به عبارتی تابع Callback را روی تمام آیتم‌های آرایه‌ی داده شده اعمال میکند و نتیجه را که یک آرایه جدید است، برمی گرداند.
✅این تابع هیچ اثری بر روی آرایه‌ای که بر روی آن اجرا شده نمیگذارد و فقط یک آرایه جدید میسازد و آن را برمیگرداند.
@alithecodeguy

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

📌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

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

📌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