رقصنده با کد – Telegram
رقصنده با کد
779 subscribers
1.69K photos
850 videos
207 files
666 links
Here are some interesting things I've come across during my learning process. That's it. Admin ID:
@alithecodeguy
Download Telegram
Media is too big
VIEW IN TELEGRAM
📌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
This media is not supported in your browser
VIEW IN TELEGRAM
📌معرفی تعدادی API رایگان برای برنامه‌نویسان
در وبسایت معرفی شده به تعداد زیادی API رایگان با موضوعات مختلف دسترسی پیدا میکنید که این API ها را میتوانید به کد خود اضافه کرده و از داده‌هایی که در دسترس برنامه‌نویسان قرار میدهند استفاده کنید.
برای نحوه درسترسی به این داده‌ها روشهای مختلفی در اختیار کاربران قرار داده شده است که میتوانید برخی از آنها را در ویدئو مشاهده نمایید.
https://rapidapi.com/collection/list-of-free-apis
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌async/await
توابع async در ECMAScript 2017 برای مدیریت راحتتر عملیات asynchronous به جاوااسکریپت اضافه شده است. این توابع برای ساده سازی در نوشتن promiseهای ذنجیره‌ای طراحی شده‌اند و یک promiseرا برمیگردانند. به این صورت که اگر تابع یک خطا را برگرداند promise رد میشود و اگر مقدار مورد نظر را برگداند promise پذیرفته میشود.
برای نوشتن توابع async کافیست قبل از تابع مورد نظر از کلمه کلیدی (async) استفاده نمایید.
حال برای متوقف کردن توابع async کافیست از await استفاده نمایید و منتظر اجرای دستورات بازگشتی میماند.
https://javanoscript.info/async-await
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌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
This media is not supported in your browser
VIEW IN TELEGRAM
📌افزونه React Developer Tools
یکی از افزونه‌های مهم و پرکاربرد برای وبسایتهایی است که با ریکت طراحی میشوند و برای خطایابی سریعتر و راحتتر طراحان سایت را یاری مینماید.
پس از نصب این افزونه در قسمت لیست افزونه‌ها نمایش داده میشود و برای تمام وبسایت‌هایی که با ریکت طراحی شده باشد، این افزونه فعال میشود.
این افزونه برای مدیریت کامپوننت ها، props و ... کاربرد بسیاری دارد.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌متد ()forEach در جاوااسکریپت
با استفاده از این متد میتوانیم یه حلقه تکرار بروی تک تک آیتم های یک آرایه ایجاد کنیم.
توجه داشته باشید که متد forEach یک تابع فراخوانی را به عنوان ورودی می پذیرد و برای هر عنصر در آرایه ای که تکرار می شود، این تابع اجرا میشود.
نکته قابل توجه برای این متد این است که تابع مورد نظر را برای هر عنصری که مقدار نداشته باشد اجرا نمی کند. به عبارت دیگر بر روی آیتم‌های خالی در آرایه عمل نمیکند.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌 آبجکت navigator در جاوا اسکریپت
آبجکت Navigator، دارای اطلاعاتی درباره نوع مرورگر مورد استفاده کاربر است. به زبان ساده، این اطلاعات درباره مرورگری است، که کاربر در آن لحظه در حال مشاهده وبسایت با آن می باشد. این آبجکت حاوی اطلاعاتی مانند نام مرورگر مورد استفاده، ورژن مرورگر، زبان مورد استفاده مرورگر و ... می باشد .
یکی از مهمترین موارد کاربرد navigator، برای تشخیص نوع مرورگر و ورژن آن برای نوشتن دستورات جاوااسکریپتی متناسب با هر مرورگر میباشد.
لیست مهمترین propertyهای مورد استفاده در navigator در آدرس سایت زیر آورده شده است.
https://www.w3schools.com/JSREF/obj_navigator.asp
@alithecodeguy
📌متد ()findIndex در جاوااسکریپت
با استفاده از این متد میتوانیم جستجو داخل آیتم های آرایه داشته باشیم و شماره index اولین نتیجه بدست آمده را نشان دهیم.
توجه داشته باشید که این متد یک تابع بازگشتی میگیرد.
این متد تنها بر روی آرایه‌ها اثر دارد و برروی رشته‌ها کار نمیکند.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌CSS Variables
در css این امکان وجود دارد که برخی خصوصیات را در قالب متغیرها با نام دلخواه، تعریف کنیدد و با استفاده از تابع ()var، از آنها برای عناصر html استفاده کنید.
برای استفاده از تابع ()var، ابتدا در بخش ()root: متغیر مورد نظر را با سینتکس زیر تعریف میکنیم:
🔹--Name : Value ;
سپس در هر قسمت از پروژه که مورد نیاز باشد از آن متغیر میتوانیم به صورت زیر استفاده نماییم:
🔹var( --Name , Value );
مقدار value اختیاری است و به عنوان مقدار جایگزین میتوانید از آن استفاده نمایید.
یکی از کاربردهای اصلی استفاده از متغیرها، برای مدیریت پروژه‌های بزرگ میباشد که بجای تغییر در تگ تک خطور مربوط به یک بخش پروژه، کافیست متغیر مورد نظر را تغییر دهیم تا تغییرات در کل پروژه اعمال گردد.
به این نکته توجه داشته باشید که هنگام تعریف متغییر حتما باید از - - قبل از نام متغیر استفاده نمایید. همچنین نام متغیر میتواند به صورت دلخواه انتخاب گردد.
https://www.w3schools.com/css/css3_variables.asp
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌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
Media is too big
VIEW IN TELEGRAM
📌Pure Functions in JavaScript
تابع pure، یک تابع است که در صورت ارسال آرگومان های یکسان، همیشه همان نتیجه را برمی گرداند. به هیچ حالت یا تغییر داده در طول اجرای برنامه بستگی ندارد، بلکه فقط به آرگومان های ورودی آن بستگی دارد. به عبارت دیگر خروجی تابع تحت تأثیر valueها و تغییر state قرار نمی گیرد.
به این نکته توجه داشته باشید که اگر یک تابع pure، یک تابع pure دیگر را صدا بزند، تابع فراخوانی شده همچنان pure در نظر گرفته می شود.
https://www.geeksforgeeks.org/pure-functions-in-javanoscript/
@alithecodeguy
📌توابع first class citizen
اگر هر زبان برنامه نویسی که این توانایی را داشته باشد که:
🔹بتوانید مقدار توابع را به یک متغیر اختصاص دهید
🔹بتوانید تابعی را به عنوان یک آرگومان یک تابع دیگر پاس دهید
🔹بتوانید تابعی را به عنوان مقدار یک تابع دیگر برگردانید
گفته میشود که آن زبان برنامه نویسی دارای توابع first class است. همچنین توابع در آن زبان برنامه نویسی به عنوان توابع first class citizen شناخته میشوند.
با توجه به این ویژگی‌ها جاوااسکریپت یکی از زبان های برنامه نویسی است که دارای توابع first class میباشد و توابع در این زبان به عنوان توابع first class citizen شناختع میشوند.
https://www.geeksforgeeks.org/what-is-first-class-citizen-in-javanoscript/#:~:text=Functions%20that%20return%20a%20function,called%20as%20First%20Class%20Citizens.
@alithecodeguy
مفهوم memoization در جاوا اسکریپت چیست؟
#js #closure #memorization @alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌کتابخانه lodash
یک کتابخانه محبوب برای جاوااسکریپت میباشد که توابع بسیار کاربردی را داراست که با استفاده از الگوی برنامه نویسی تابعی کدنویسی در جاوااسکریپت را ساده‌تر و تمیزتر میکند.
این کتابخانه کمک میکند که به جای نوشتن توابع رایج، بارها و بارها، با استفاده از یک خط کد کدنویسی راحت‌تر گردد.
برای استفاده از کتابخانه lodash کافیست آن را با استفاده از دستور زیر نصب کنید.
🔹npm i lodash

سپس برای استفاده از آن در کدهای ریکت آن را import کنید. یا برای استفاده در کدهای جاوااسکریپتی کافیست دستور زیر را به کدهای خود اضافه نمایید.
🔹const _ = require("lodash")
بیشترین کاربرد این کتابخانه برای کدهای ریکت میباشد. دستورات بسیاری برای کار با آرایه‌ها، توابع، رشته‌ها و ... دارد.
برای آشنایی بیشتر با این کتابخانه به آدرس زیر مراجعه نمایید و همچنبن برخی از دستورات موجود در کتابخانه lodash در ویدِو توضیح داده شده است.
https://lodash.com/
@alithecodeguy
📌تفاوت میان JS و JSX
درواقع JSX یک syntax extension از جاوااسکریپت میباشد که به کاربران این اجازه را میدهد تا کامپوننت‌های ریکتی بنویسند.
نام دیگر JSX به JavaScript XML نیز شناخته میشود که درواقع ترکیب javanoscript و HTML میباشند و خوانایی و درک کدها را راحتتر میکنند.
درنحوه نوشتن کدهای Js اول کدهای HTML نوشته میشوند سپس کد JS به اخر دستورات با استفاده از تگ <noscript> اضافه میگردد. اما در XML میتوانید کدهای جاوااسکریپت را مستقیما داخل تگهای HTML بنویسید.
توجه داشته باشید که کدهای JS و JSX باهم قابل تغییر هستند و تفاوت آنها در نحوه ایجاد user interface و نحوه تقسیم عملکردهای برنامه میباشد.
https://linuxhint.com/what-is-difference-between-js-and-jsx/
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
Data Structures Easy to Advanced Course Full Tutorial from a Google Engineer
دوره رایگان React
اطلاعات بیشتر در تصویر.
https://news.1rj.ru/str/alithecodeguy
#reactjs #course #free @alithecodeguy
📌what is toolchain?
در روند ایجاد یک نرم‌افزار معمولا از تعدادی ابزار خاص استفاده میشود. به عنوان مثال برای نوشتن سورس کد یک برنامه و ذخیره آن در فایل از یک ویرایشگر متن استفاده میشود. یک نرم‌افزار toolchain مجموعه ای از ابزارهای توسعه نرم افزار است که در ترکیب با یکدیگر برای توسعه نرم افزار یا ارائه یک محصول نرم افزاری مورد استفاده قرار می گیرند. به عبارت دیگر toolchain عبارت است از مجموعه‌ای از ابزارها جهت تولید محصولی خاص.
هر toolchain ساده معمولا شامل اجزای زیر میباشند:
🔹Assembler
زبان اسمبلی را به کد تبدیل می کند.
🔹Linker
مجموعه ای از فایل های برنامه را به یک برنامه واحد متصل میکند.
🔹Compiler
برای تولید کد قابل اجرا از source code یک برنامه استفاده میشود.
🔹Runtime libraries
برای ارتباط با یک سیستم عامل استفاده می شود و به برنامه اجازه می دهد تا به توابع و ریسورسهای خارجی ارجاع داده شود. یک API نمونه ای از این است.
🔹Debugger
برای تست و دیباگ برنامه ها استفاده می شود.
توسعه دهندگان اغلب یک اسکریپت می نویسند که این ابزارها را به هم پیوند می دهد و محیط‌های برنامه‌سازی را عمدتاً طوری درون خود پیاده‌سازی میکنند که برنامه‌نویس نیازی به درگیر شدن با جزئیات مربوط به آن را ندارد.
https://searchsoftwarequality.techtarget.com/definition/software-toolchain
@alithecodeguy