سوال اخر شب : (بدون سرچ یا کمک از جواب بقیه جواب بدید.)
توی جاوا اسکریپت اگر بخواهیم با استفاده از دستور یا متد typeof متوجه بشیم که نوع مقدار ذخیره شده در یک متغیر ، آرایه است یا خیر ، چیکار باید کنیم؟

🔹برنامه نویسی تابعی یا functional programming
✅یک روش از برنامه نویسی است که متکی بر استفاده از توابع pure است. به عبارت دیگر تابع هیچ تاثیری بر روی عوامل خارجی که داخل خود تابع تعریف نشده‌اند نگذراد. همچنین هر تابع وظیفه انجام یک کار را به عهده دارد و میتوان یک تابع را به عنوان آرگومان ورودی یک تابع دیگر استفاده کرد.
✅برای آشنایی با نحوه استفاده از برنامه نویسی تابعی پیشنهاد میشود ویدئو را مشاهده کنید.
https://blog.bitsrc.io/functional-programming-in-javanoscript-how-and-why-94e7a97343b
@alithecodeguy

جواب سوال دیشب.
عملگر typeof فقط یکی از این مقادیر رو میتونه برگردونه و میبینید که چیزی برای array نداره.
نزدیکترین چیزی که برای آرایه میتونید چک کنید اینه که ببینید آیا object هست یا خیر. چون آرایه ها هم خودشون نوع خاصی از objectها هستن.

🔹مفهوم curring
✅ یکی از تکنیکهای برنامه نویسی تابعی است. به این صورت که تابع مورد نظر بجای اینکه همه آرگومانها را یک جا بگیرد اولین آرگومان را میگیرد سپس یک تابع جدید برمیگرداند که آرگومان دوم را بگیرد و دوباره تابع جدیدی برگرداند. این روند تا زمانی ادامه پیدا میکند همه آرگومانها تکمیل شوند.
https://javanoscript.info/currying-partials
@alithecodeguy

دوره فشرده و پروژه محور فرانت اند ( آنلاین )
طراحی بخشی از سایت دیوار با React

ظرفیت : ۴ نفر
هزینه دوره : ۱.۵ میلیون تومان ( ۲۰ درصد تخفیف با پرداخت رمز ارز )
زمان : ۸ بهمن ۱۴۰۰ ساعت ۱۰ الی ۲۰

موضوعات :
ReactJs , NextJs , TypeScript , ReduxToolkit , TailwindCSS

پیش نیاز :
HTML , CSS , JavaScript

راه ارتباطی :
کانال تلگرامی : https://news.1rj.ru/str/alithecodeguy
لینکدین : https://www.linkedin.com/in/alithecodeguy

#course #js #react #javanoscript #nextjs #redux #tailwind #typenoscript #programming #frontend #alithecodeguy @alithecodeguy

📌متد ()trim در جاوااسکریپت:
✅متد ()trim فضای خالی را از هر دو انتهای یک رشته حذف می کند و یک رشته جدید را بدون تغییر رشته اصلی برمی گرداند. در این متد منظور از فضای خالی (space, tab, no-break space) میباشد.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
@alithecodeguy

دومین مقاله medium خدمت دوستان
TailwindCSS3 Text Gradient
https://medium.com/@alithecodeguy/tailwindcss-gradient-text-516eaed767e6
#medium #tailwind #gradient #css

📌افزونه 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