📌javanoscript engine
✅به زبان ساده javanoscript engine نرم افزاری است که کدهای جاوااسکریپت را اجرا میکند. همچنین موتورهای جاوااسکریپت معمولا توسط فروشندگان وب توسعه پیدا میکنند. توجه داشته باشید در یک مرورگر، موتور جاوا اسکریپت در هماهنگی با موتور رندر از طریق Document Object Model اجرا می شود. به عبارت دیگر کد سطح بالا را به کد قابل خواندن برای ماشین تبدیل می کنند که به رایانه اجازه می دهد تا برخی از وظایف خاص را انجام دهد.
https://www.geeksforgeeks.org/what-happens-inside-javanoscript-engine/
@alithecodeguy

📌HTML Entities
✅برخی از کاراکترها در HTML رزرو شده هستند و برای نمایش آنها در صفحه وب طراحی شده نمیتوان بصورت مستقیم از این کاراکترها استفاده کرد. مانند علامت <> که در HTML برای نمایش تگها از آن استفاده میشود. بنابراین برای اینکه بتوانیم کاراکترهای رزرو شده را نمایش دهیم لازم است از Character entities استفده نماییم. نحوه استفاده از یک character entity به صورت زیر است:
🔹 &entity_name;
🔹 &#entity_number;
✅لیست برخی از character entities در وب سایت زیر آورده شده است.
https://www.w3schools.com/html/html_entities.asp
@alithecodeguy

📌عملیات همگام یا synchronous و ناهمگام یا asynchronous چیست؟
✅در روش همگام یا synchronous کدها پشت سر هم و به صورت خطی اجرا می‌شوند. در این روش از برنامه نویسی دستورات باید به ترتیب اجرا شوند و اگر یک خط از دستورات اجرا نشوند اجازه رفتن به خط دیگر داده نمیشود.
✅در جاوااسکریپت برخی از عملیات هستند که جدا از روند اصلی برنامه اجرا میشوند که به آنها عملیات ناهمگام یا asynchronous گفته میشود. به عبارت دیگر هنگامیکه مفسر به قسمتی از کد رسید که لازم است با یک منبع خارجی ارتباط برقرار می‌کند، منتظر نتیجه‌ این قسمت نمی‌ماند و به ادامه روند برنامه می‌پردازد.
✅توجه داشته باشید که این دو عبارت یک مفهوم در زبانهای برنامه‌نویسی هستند و برای پیاده‌سازی این مفاهیم روشهای بسیاری وجود دارند که یکی از این روشها async/await میباشد.
@alithecodeguy

📌توابع callback در جاوااسکریپت
✅همانطور که میدانید جاوا اسکریپت کارها را به صورت asynchronous یا همان غیر همزمان انجام می دهد. یعنی بجای صبر کردن برای دریافت پاسخ و سپس انجام ادامه اجرای دستورات، به سراغ کد بعدی برای اجرا می رود و در صورتی که پاسخ دستورات مورد نظر آماده شده باشد دوباره به سراغ اجرای دستوراتی که رد کرده است، خواهد رفت.
✅حال زمانی که ما یک تابع را به عنوان آرگومان به تابع دیگر ارسال می‌کنیم، و تابع دوم را مجبور می‌کنیم که تا قبل از اجرای کامل تابع اول اجرا نشود، در واقع ما از Callback استفاده کرده ایم. با این‌کار مفسر را وادار می‌کنیم کدها را دقیقا به همان ترتیبی که نوشته‌ایم اجرا کند. به زبان ساده، توابع callback برای این که ما مطمئن شویم یک قطعه کدی اجرا نمی شود مگر اینکه کد دیگری اجراش تمام شده باشد کاربرد دارد و برنامه را مجبور می‌کنیم مادامی که پاسخ دریافت نشده کدهای بعدی اجرا نشود.
✅یکی از پرکاربردترین زمان استفاده از توابع callback هنگام دریافت اطلاعات از API میباشد.
@alithecodeguy

📌متد ()filter در آرایه‌ها
✅با استفاده از این متد میتوانیم بر روی آیتم های یک آرایه فیلتر اعمال کنیم. این متد یک تابع callback دریافت میکند و به ازای هر یک از آیتم‌های آرایه یک بار اجرا میشود و در صورت برقرار بودن شرط مورد نظر این آیتم آرایه برگردانده میشود.
✅به این نکته توجه داشته باشید که اگر متد filter را بر روی آرایه‌ای از آبجکت‌ها اعمال کنید، آبجکت را برنمیگرداند و همیشه یک آرایه از آبجکت‌ها را برمیگرداند.
@alithecodeguy

جرا باید به Headless CMS ها بیشتر توجه کنیم؟
(مقاله خودمه)
#cms

📌 :is() CSS pseudo-class
✅در این روش یک لیستی از selector را به عنوان آرگومان خود در نظر میگیرد و هر المانی را که میتواند توسط یکی از selectorهای آن لیست انتخاب شود را انتخاب میکند.
✅به عبارت دیگر این روش برای یک لیستی بزرگی از المانها که تکرار شده‌اند کاربرد دارد و برای کمتر شدن دستورات css بسیار مفید میباشد.
https://css-tricks.com/almanac/selectors/i/is/
@alithecodeguy

📌promise in javanoscript
✅این مفهوم در ES6 به جاوااسکریپت اضافه شده است و یکی از مهمترین کاربردهای promise در جاوااسکریپت کمک به رهایی از callback hell یا جهنم callbackها است. با کمک promise میتوانید بخشی از کدها را مدیریت کنید و به صورت asynchronous اجرا کنید.
✅برای ایجاد promise از تابع سازنده آن استفاده میشود.
🔹new Promise(function(resolve, reject){
// our logic goes here ..
});
✅به این نکته توجه داشته باشید که هر promise میتواند یک چرخه حیات با 3 حالت داشته باشد:
🔹pending
حالتی است که هنوز اجرای کدها به پایان نرسیده و نتیجه‌ی آن هنوز مشخص نیست.
🔹resolved
حالتی است که اجرای کدها با موفقیت به پایان رسیده است.
🔹rejected
حالتی است که اجرای کدها با شکست به پایان رسیده است.
@alithecodeguy

📌معرفی تعدادی API رایگان برای برنامه‌نویسان
✅در وبسایت معرفی شده به تعداد زیادی API رایگان با موضوعات مختلف دسترسی پیدا میکنید که این API ها را میتوانید به کد خود اضافه کرده و از داده‌هایی که در دسترس برنامه‌نویسان قرار میدهند استفاده کنید.
✅برای نحوه درسترسی به این داده‌ها روشهای مختلفی در اختیار کاربران قرار داده شده است که میتوانید برخی از آنها را در ویدئو مشاهده نمایید.
https://rapidapi.com/collection/list-of-free-apis
@alithecodeguy

📌async/await
✅توابع async در ECMAScript 2017 برای مدیریت راحتتر عملیات asynchronous به جاوااسکریپت اضافه شده است. این توابع برای ساده سازی در نوشتن promiseهای ذنجیره‌ای طراحی شده‌اند و یک promiseرا برمیگردانند. به این صورت که اگر تابع یک خطا را برگرداند promise رد میشود و اگر مقدار مورد نظر را برگداند promise پذیرفته میشود.
✅برای نوشتن توابع async کافیست قبل از تابع مورد نظر از کلمه کلیدی (async) استفاده نمایید.
✅حال برای متوقف کردن توابع async کافیست از await استفاده نمایید و منتظر اجرای دستورات بازگشتی میماند.
https://javanoscript.info/async-await
@alithecodeguy

📌favicon in HTML
✅ یک favicon در HTML یک تصویر کوچک است که در سمت چپ noscript یک وبسایت در مرورگر نشان داده میشود.
✅برای اضافه کردن favicon به وبسایت کافیست تصوی مورد نظر خود را در مسیر مناسب ذخیره نمایید. سپس بعد از المان <noscript> در فایل index.html یک المان <link> اضافه نمایید که شامل propertyهای زیر میباشند:
🔹 rel="icon"
🔹 type="image/x-icon"
🔹 href="image address"
https://www.w3schools.com/html/html_favicon.asp
@alithecodeguy

📌افزونه React Developer Tools
✅یکی از افزونه‌های مهم و پرکاربرد برای وبسایتهایی است که با ریکت طراحی میشوند و برای خطایابی سریعتر و راحتتر طراحان سایت را یاری مینماید.
✅پس از نصب این افزونه در قسمت لیست افزونه‌ها نمایش داده میشود و برای تمام وبسایت‌هایی که با ریکت طراحی شده باشد، این افزونه فعال میشود.
✅این افزونه برای مدیریت کامپوننت ها، props و ... کاربرد بسیاری دارد.
@alithecodeguy

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

📌 آبجکت navigator در جاوا اسکریپت
✅ آبجکت Navigator، دارای اطلاعاتی درباره نوع مرورگر مورد استفاده کاربر است. به زبان ساده، این اطلاعات درباره مرورگری است، که کاربر در آن لحظه در حال مشاهده وبسایت با آن می باشد. این آبجکت حاوی اطلاعاتی مانند نام مرورگر مورد استفاده، ورژن مرورگر، زبان مورد استفاده مرورگر و ... می باشد .
✅ یکی از مهمترین موارد کاربرد navigator، برای تشخیص نوع مرورگر و ورژن آن برای نوشتن دستورات جاوااسکریپتی متناسب با هر مرورگر میباشد.
✅ لیست مهمترین propertyهای مورد استفاده در navigator در آدرس سایت زیر آورده شده است.
https://www.w3schools.com/JSREF/obj_navigator.asp
@alithecodeguy

📌متد ()findIndex در جاوااسکریپت
✅ با استفاده از این متد میتوانیم جستجو داخل آیتم های آرایه داشته باشیم و شماره index اولین نتیجه بدست آمده را نشان دهیم.
✅توجه داشته باشید که این متد یک تابع بازگشتی میگیرد.
ا✅ین متد تنها بر روی آرایه‌ها اثر دارد و برروی رشته‌ها کار نمیکند.
@alithecodeguy

📌CSS Variables
✅در css این امکان وجود دارد که برخی خصوصیات را در قالب متغیرها با نام دلخواه، تعریف کنیدد و با استفاده از تابع ()var، از آنها برای عناصر html استفاده کنید.
✅برای استفاده از تابع ()var، ابتدا در بخش ()root: متغیر مورد نظر را با سینتکس زیر تعریف میکنیم:
🔹--Name : Value ;
سپس در هر قسمت از پروژه که مورد نیاز باشد از آن متغیر میتوانیم به صورت زیر استفاده نماییم:
🔹var( --Name , Value );
مقدار value اختیاری است و به عنوان مقدار جایگزین میتوانید از آن استفاده نمایید.
✅یکی از کاربردهای اصلی استفاده از متغیرها، برای مدیریت پروژه‌های بزرگ میباشد که بجای تغییر در تگ تک خطور مربوط به یک بخش پروژه، کافیست متغیر مورد نظر را تغییر دهیم تا تغییرات در کل پروژه اعمال گردد.
✅به این نکته توجه داشته باشید که هنگام تعریف متغییر حتما باید از - - قبل از نام متغیر استفاده نمایید. همچنین نام متغیر میتواند به صورت دلخواه انتخاب گردد.
https://www.w3schools.com/css/css3_variables.asp
@alithecodeguy

📌React Lifecycle
✅هر کامپوننت در ریکت دارای یک چرخه حیات است که شامل سه فاز میباشد:
Mounting, Updating, Unmounting
🔹Mounting:
روند تبدیل مولفه‌های DOM مجازی به عناصر DOM واقعی است. شامل constructor، render، getDerivedStateFromProps و componentDidMount میباشد.
🔹Updating:
در این مرحله کامپوننت در حال آپدیت شدن است. درواقع وقتی تغییری در state و props ایجاد میشود آپدیت رخ میدهد. این بخش نیز شامل getDerivedStateFromProps، shouldComponentUpdate، render، getSnapshotBeforeUpdate و componentDidUpdate میباشد.
🔹Unmounting:
فاز بعدی از چرخه حیات بخشی است که کامپوننت از DOM حذف میشود. این بخش نیز شامل componentWillUnmount میباشد.
✅نحوه رندر شدن هر یک از متدها در ویدئو کامل توضیح داده شده است.
https://www.w3schools.com/react/react_lifecycle.asp
@alithecodeguy

📌پارادایم برنامه نویسی (programming paradigm)
✅به روشهای دسته بندی زبانهای برنامه نویسی براساس ویژگی‌هایشان programming paradigm میگویند. به عبارت programming paradigm به سبکی از برنامه نویسی اطلاق می شود و همه آن‌ها هنگام پیاده‌سازی باید از استراتژی‌هایی پیروی کنند که این استراتژی یک پارادایم است.
✅پارادایم برنامه‌نویسی شامل دو دسته اصلی میباشد:
🔹Imperative programming paradigm
🔹Declarative programming paradigm
✅Imperative programming paradigm
این یکی از قدیمی ترین پارادایم های برنامه نویسی است. این ویژگی با معماری ماشین ارتباط نزدیک دارد. دستورات برنامه گام به گام اجرا میشوند. این بخش به سه دسته procedural programming، object oriented و parallel processing تقسیم میشوند.
✅Declarative programming paradigm
به صورت منطقی ، پایگاه داده تقسیم می شود. اغلب برنامه ها را به عنوان نظریه های منطقی در نظر می گیرد. ممکن است نوشتن برنامه های موازی را ساده کند. این بخش نیز به سه دسته logic ، functional و database programming
https://www.geeksforgeeks.org/introduction-of-programming-paradigms/
@alithecodeguy