📌توابع 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

📌کتابخانه 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

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

یکی از بهترین و بی‌آزارترین کروسلها برای ریکت ایشونه...
تقریبا گمانه ولی میشه گفت بهترین کروسلیه که تا حالا برای ریکت دیدم
https://www.embla-carousel.com/get-started/react/
#react #carousel

📌معماری flux چیست؟
✅یک معماری است که فیس‌بوک هنگام کار با React JS از آن استفاده می‌کند و برای ایجاد برنامه های تحت وب مبتنی بر کاربر استفاده می شود. Flux اجازه می‌دهد تا به راحتی هرگونه نقص در برنامه‌نویسی را دقیق‌تر متوجه شوید.
✅برنامه‌های کاربردی Flux از سه قسمت اصلی تشکیل شده است.
🔹بخش Action: یک عملی که توسط کاربر انجام شده و به dispatcher ارسال می‌شود
🔹بخش Store: مدیریت داده‌ها و به‌روزرسانی تمامی دیدگاه‌ها
🔹بخش Dispatcher: یک Dispatcher مرکزی مسئولیت دریافت و ارسال داده‌ها به بخش Store را که داده برنامه‌های کاربردی را نگه می‌دارد بر عهده دارد.
🔹بخش view: مدل را در رابط کاربری (UI) نمایش میدهد.
✅در معماری Flux، وقتی کاربر روی چیزی کلیک می‌کند، view برخی action هایی را ایجاد میکند. Action می‌تواند داده‌های جدیدی ایجاد کند و آن‌ها را به Dispatcher ارسال کند. سپس Dispatcher نتیجه action را به store مناسب ارسال می کند. store بر اساس نتیجه state را به‌روزرسانی می‌کند و به‌روزرسانی را به view ارسال می‌کند.
https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences
@alithecodeguy

📌متد ()Object.assignدر جاوااسکریپت
✅متد ()Object.assign برای کپی کردن تمام ویژگی‌ها از یک آبجکت به آبجکت دیگر استفاده می‌شود. ما می‌توانیم دو آبجکت ایجاد کنیم و آن‌ها را با استفاده از متد ()Object.assign ادغام کنیم. در واقع تمام ویژگی‌ها از یک یا چند آبجکت مبدا به آبجکت مقصد کپی میشود.
✅سینتکس استفاده از این متد به صورت زیر است:
Object.assign(target, ...sources)
🔹target
ویژگی‌های آبجکت مورد نظر که قصد کپی آن را داریم به چه چیزی اعمال شود.
🔹sources
آبجکتی که قصد کپی آن را داریم.
✅از این متد میتوانید برای تغییر در ویژگی‌های مختلف یک آبجکت استفاده نمایید. میتوانید یک یا چند ویژگی به آبجکت اضافه یا کم کنید. میتوانید ویژگی‌های آبجکت را تغییر دهید و یا دو آبجکت را با هم ادغام کنید
✅جزییات نحوه استفاده از این متد در ویدئو آورد شده است.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
@alithecodeguy

📌ویژگی aspect-ratio در css
✅در حالت کلی، aspect-ratio نسبت عرض به ارتفاع یک container اشاره میکند.
✅این ویژگی کاربرد های بسیار مفیدی دارد:
🔹ساختن container های کاملا ریسپانسیو، هنگامیکه بخواهیم ارتفاع و عرض محتوای داخل container متناسب با ابعاد viewport تغییر کند.
🔹ساختن فضایی برای عکس هایی که ابعاد متفاوتی با هم دارند
✅نحوه استفاده از این ویژگی به صورت زیر است:
🔹aspect-ratio: [نسبت عرض به ارتفاع]
برای استفاده از این خاصیت، کافیست به container مورد نظرمون یک width مناسب بدهیم، سپس از خاصیت aspect-ratio استفاده کنیم
✅این ویژگی در حال حاضر تنها در مرورگرهای firefox، chrome، safari و safari on ios ساپورت میشود.
https://css-tricks.com/almanac/properties/a/aspect-ratio/
@alithecodeguy

📌Strict Mode in javanoscript
✅ به حالتی که کدهای جاوا اسکریپت با سختگیری بیشتری تفسیر و اجرا شوند strict mode گفته می شود، که برای برنامه نویسی ایمن در جاوااسکریپت بسیار مفید میباشد.
✅ با اضافه کردن دستور ;”use strict” به اول کد، تعیین می کنید که کد جاوااسکریپت باید در strict mode اجرا شود و این دستور در ES5 به جاوااسکریپت اضافه شد.
✅دلیل استفاده از این دستور این است که:
🔹باعث آسان تر نوشته شدن کد امن در جاوااسکریپت می شود.
🔹ساختار های دستوری بد قبلی که پذیرفته می شد، به خطا های واقعی تبدیل می کند.
🔹درstrict mode هرگونه اختصاص مقدار به متغیرهای غیر قابل نوشتن، متغیرهایی که وجود ندارند و یا اشیایی که وجود ندارند، خطا نشان میدهد.
https://www.w3schools.com/js/js_strict.asp
@alithecodeguy

📌افزونه dimensions
✅یکی از افزونه‌های کاربردی برای chrome و firefox، افزونه dimensions میباشد.
✅با استفاده از این افزونه برنامه‌نویسان وب میتوانند به آسانی ابعاد تمام اجزای وبسایت‌ها، فاصله بین المانها، فاصله بین متون با یکدیگر و حتی فاصله متون با هر یک از المانهای موجود در صفحه وب را بدست بیاورند.
✅این افزونه ابعاد را به صورت پیکسل (px) در اختیار کاربر قرار میدهد.
https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en
@alithecodeguy

📌برنامه نویسی native چیست؟
✅ساخت اپلیکیشن یا طراحی اپلیکیشن به صورت native به این معنا است که برای برنامه نویسی و توسعه اپلیکیشن از زبان برنامه نویسی اصلی خود آن سیستم عامل استفاده شود. به عنوان مثال برای ساخت یا طراحی اپلیکیشن اندروید باید از زبان برنامه نویسی JAVA استفاده شود و برای طراحی و ساخت اپلیکیشن IOS باید از زبان برنامه نویسی Objective-C استفاده شود.
✅مزایا
🔹بزرگترین مزیت برنامه نویسی Native استفاده از بازدهی بالای نرم افزار میباشد.
🔹سرعت بالای اپلیکیشن.
🔹دسترسی به تمام امکانات سیستم عامل و سخت افزار
🔹استفاده از نرم افزار به صورت آفلاین از ویژگی های مهم طراحی نرم افزار بومی می باشد.
✅معایب
🔹کد نویسی دوباره برای پلتفرم های مختلف. علت این موضوع استفاده از SDKو API در هر پلتفرم می باشد. بنابراین باید برای هر سیستم عامل با توجه به API آن دوباره کد نویسی انجام شود.
🔹هزینه برنامه نویسی بالاتر.
@alithecodeguy

📌What is PWA?
✅به برنامه‌هایی که با استفاده از زبان‌های HTML، CSS و JavaScript توسعه داده شده‌اند PWA (Progressive Web App) اما این قابلیت را در اختیار ما قرار می‌دهند که برنامه‌های وب را با بهره بردن از APIهای مدرن مرورگر مانند یک برنامه‌ی Native بر روی تلفن‌های همراه نصب کنیم و فرقی ندارد کاربر از چه سیستم‌عاملی استفاده می‌کند.
✅برای بهره بردن از PWA، کافیست قابلیت اپلیکیشن های Native و تحت وب رو یکجا داشته باشیم. این فناوری از اوایل سال 2015 توسط شرکت گوگل معرفی شد.
✅مزایا
🔹کاملا Responsive هستند و بر روی تمام دستگاه ها قابل نمایش و استفاده میباشند.
🔹با کمک Service Workerها PWA میتواند در شرایط ارتباطی ضعیف حتی بدون اینترنت هم سرویس دهی کند.
🔹خدمات PWAها همواره از طریق HTTPS ارائه میشود تا با بکارگیری رمزگذاری، هیچ شخصی بدون مجوز مناسب قادر به ایجاد اختلال در برنامه نباشد.
🔹قابلیت نصب بر روی دستگاه ها مانند اپ های Native و اجرای Fullscreen آنها
🔹هماهنگی با مرورگرهای مختلف
https://www.freecodecamp.org/news/what-are-progressive-web-apps/
@alithecodeguy

📌what is CDN (Content Delivery Network)?
✅در واقع CDN یک شبکه توزیع محتوا است. سرورهایی در نقاط مختلف جهان قرار می گیرند و با توجه به اینکه کدام سرور به موقعیت بازدیدکننده سایت نزدیک تر است به درخواست ها پاسخ میدهد. در واقع اطلاعات سایت از سروری دریافت میشود که به موقعیت کاربر نزدیک تر است. بدین ترتیب سایت با سرعت بیشتر لود خواهد شد.
✅وجود CDN باعث افزایش سرعت دسترسی به اطلاعات می شود. هنگامیکه یک شبکه CDN ساخته میشود سرورهایی در نقاط مختلف جهان مستقر می شوند در با دریافت داده ها از سرور اصلی و ذخیره آن به صورت کش شده بر اساس موقعیت جغرافیایی بازدیدکننده که بر اساس ISP مخابراتی کاربر شناسایی میشود، داده ها را از نزدیک ترین CDN به کاربر تحویل خواهند داد تا کاربر با سرعت بیشتری به داده ها دسترسی داشته باشد.
✅به عنوان مثال گوگل را که از CDN استفاده می کنند باز کنید می بینید که در کوتاه ترین زمان ممکن در دسترس قرار می گیرد اما در مقابل سایتی که سرور آن در نقطه جغرافیایی دورتری قرار دارد با سرعت کمتری لود می شود.
✅برای دریافت اطلات بیشتر درباره CDN پیشنهاد میشود وبسایت زیر را مطالعه نمایید.
https://www.akamai.com/our-thinking/cdn/what-is-a-cdn
@alithecodeguy

📌مفهوم Destructuring در جاوااسکریپت
✅روشی در جاوااسکریپت است که این امکان را میدهد که مقادیر داخل آرایه‌ها، ویژگیهای داخل آبجکت‌ها را به متغیرهای مجزا اختصاص داده و اجرای آنها را در چند متغیر ذخیره نمایید. Destructuring یک روش ساده و سریع برای ایجاد متغیر است.
✅این روش در ES6 در جاوااسکریپت معرفی شد.
✅مزایای Destructuring :
🔹دسترسی به اعضای آرایه و آبجکت نسبت به روش قدیمی آسان‌تر است.
🔹ذخیره اعضای آرایه و آبجکت در متغیرها آسان‌تر انجام میگیرد.
🔹برنامه‌نویسی خواناتر و خلاصه‌تر میباشد.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
@alithecodeguy

📌مدیریت خطا در جاوااسکریپت (try/catch)
✅هنگام اجرای کد جاوااسکریپت ممکن است خطاهای مختلف رخ دهد که ممکن است خطاهای برنامه نویسی، خطاهای سرور یا سایر موارد غیر قابل پیش بینی باشد.
✅استفاده از مدیریت کننده خطا در جاوا اسکریپت، اگر خطایی در برنامه رخ دهد، اجرای برنامه متوقف نمیشود و مطابق با دستوراتی که برای خطاها تعیین شده است کد نوشته شده ادامه پیدا میکند.
✅دستورات مدیریت خطا به صورت زیر میباشند:
🔹try
در این بخش کدی که احتمال می دهیم خطا تولید کند را قرار داده میشود
🔹catch
مدیریت خطا در این قسمت انجام می شود
🔹throw
این دستور کنک میکند که خطا سفارشی ایجاد کنیم. در واقع با دستور throw به جاوا اسکریپت می گوییم که این قطعه کد ممکن است خطا تولید کند
🔹finally
بعد از بلوک try و catch بدون توجه به نتیجه اجرا می شود
@alithecodeguy

وبینار فرانت اند با محوریت React
اطلاعات بیشتر در تصویر.
لینک اسکایپ :
https://join.skype.com/K6vkgkVUtzED
#react #alithecodeguy #webinar #frontend

📌فونت‌ها در CSS
✅به طور کلی، فونت ها به 5 خانواده تقسیم می‌شوند که پرکاربردترین آنها 2 مورد زیر می‌باشند:
🔹serif
فونت با گوشه
🔹sans-serif
فونت بدون گوشه
✅فونت‌های serif، گوشه‌های تیز دارند اما فونت‌های sans-serif بدون گوشه تیز هستند.
✅فونت‌ها فرمت‌های متفاوتی دارند که شامل woff ،woff2 ، noscript ،EOT، OTF و TTF می‌باشند.
🔹فرمت‌های woff و woff2
این فرمت از فونت‌ها، برای استفاده در فضای وب طراحی شدند و سرعت بارگذاری بالاتری نسبت به باقی فونت‌ها دارند. همچنین این فونت‌ها توسط تمام مرورگرها ساپورت میشوند.
🔹فرمت‌های SVG و SVGZ
این فرمت‌ها، مخصوص موبایل میباشند. در حال حاضر فقط در ورژن ۴.۱ و بالاتر مرورگر سافاری مخصوص ios مورد استفاده هستند و توسط firefox و internet explorer ساپورت نمی‌شند.
🔹فرمت‌ EOT
این فونت توسط مایکروسافت طراحی شده و تنها فونتی میباشد که در اینترنت اکسپلورر ۸، در دستور font-face@ ساپورت می‌شود.
🔹فرمت‌های OTF و TTF
فونت‌هایی که به سادگی می‌توانند مورد کپی و حتی دزدی قرار بگیرند. به همین دلیل فونت های woff و woff2 برای اصلاح این دو فونت طراحی شدند.
https://www.w3schools.com/css/css_font.asp
https://www.w3schools.com/css/css3_fonts.asp
@alithecodeguy

دوستان گرامی ، وبینار ۵ دقیقه دیگه شروع میشه