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

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

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

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

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

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

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

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

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

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

دوره فشرده و پروژه محور فرانت اند ( آنلاین ) طراحی بخشی از سایت دیوار با React ظرفیت : ۴ نفر هزینه دوره : ۱.۵ میلیون تومان ( ۲۰ درصد تخفیف با پرداخت رمز ارز ) زمان : ۸ بهمن ۱۴۰۰ ساعت ۱۰ الی ۲۰ موضوعات : ReactJs , NextJs , TypeScript , ReduxToolkit , TailwindCSS پیش نیاز : HTML , CSS , JavaScript راه ارتباطی : کانال تلگرامی : https://t.me/alithecodeguy لینکدین : https://www.linkedin.com/in/alithecodeguy #course #js #react #javascript #nextjs #redux #tailwind #typescript #programming #frontend #alithecodeguy @alithecodeguy

📌تفاوت گیت هاب و گیت لب: ✅ گیت‌هاب و گیت‌لب دو سرویس میزبان محبوب برای پروژه‌ های توسعه دهندگان هستند و از پرکاربردترین سرویس‌های مدیریت مخزن گیت به حساب می‌آیند. ✅تفاوت میان گیت‌هاب و گیت‌لب را میتوانید در تصویر بالا مشاهده کنید و با توجه به نیاز خود یکی را انتخاب نمایید. https://www.geeksforgeeks.org/difference-between-gitlab-and-github/ @alithecodeguy

دوره فشرده و پروژه محور فرانت اند ( آنلاین ) طراحی سایت دیوار با React ظرفیت : ۶ نفر هزینه دوره : ۱.۵ میلیون تومان ( ۲۰ درصد تخفیف با پرداخت رمز ارز ) زمان : ۸ بهمن ۱۴۰۰ ساعت ۱۰ الی ۲۰ موضوعات : ReactJs , NextJs , TypeScript , ReduxToolkit , TailwindCSS پیش نیاز : HTML , CSS , JavaScript راه ارتباطی : کانال تلگرامی : https://t.me/alithecodeguy لینکدین : https://www.linkedin.com/in/alithecodeguy #course #js #react #javascript #nextjs #redux #tailwind #typescript #programming #frontend #alithecodeguy @alithecodeguy

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

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

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

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

🔹برنامه نویسی شی گرایی یا Object oriented programming ✅ایده اصلی برنامه نویسی شی گرا بر این است که از آبجکتها برای برنامه‌ها استفاده شده است. در این روش با داده ها به عنوان یک المان بسیار اساسی و مهم رفتار میشود و از داده ها در برابر برخی تغییرات اساسی محافظت میگردد. همچنین یک مساله را به چندین ابجکت تقسیم میکند و توابع مورد نیاز را با توجه به آبجکتهای تعریف شده ایجاد میکند. ✅برای آشنایی با نحوه برنامه نویسی شی گرایی و جزییات بیشتر ویدئو را مشاهده کنید. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS @alithecodeguy

🔹کلمه کلیدی this و کاربرد آن ✅کلمه کلیدی this در جاوااسکریپت به شی که در آن قرار دارد اشاره میکند، به عبارت دیگر کمک میکند که متوجه شوید آبجکتهای کد اجرا شده شما شامل چیست. باید هنگام استفاده از this به محل درست استفاده از آن توجه کنید زیرا با توجه به جایی که از آن استفاده شده، معانی مختلفی میتواند داشته باشد. به عنوان مثال در یک متد به ابجکت صاحب آن متد اشاره میکند. به تنهایی به global object اشاره میکند. در یک event به عنصری که آن event روی آن اتفاق افتاده اشاره میکند. این کلمه کلیدی کاربردهای بسیاری دارد که برای آشنایی بیشتر پیشنهاد میشود به آدرس سایت زیر مراجعه کنید و دستورات مربوط به this را اجرا کرده و خروجی به دست آمده را مشاده کنید. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this @alithecodeguy