۲- آموزش پروژه محور فلاتر - ایجاد پروژه چند زبانه و تعریف ظرف IoC

در دومین ویدیو آموزش پروژه محور فلاتر یک پروژه Flutter را ایجاد و در ریپوزیتوری گیت پوش کردیم. در مرحله بعد امکانات لازم برای چند زبانه بودن را مهیا و سپس مفهموم dependecy injection یا تزریق وابستگی را با استفاده از get_it آماده استفاده کردیم.


video link: https://youtu.be/cnzRA-XA6g8

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxb--mXM7ILSKenSLLX9hEl

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

آموزش پروژه محور فلاتر - مدیریت خطاها و Exceptions در Flutter

در سومین ویدیو آموزش پروژه محور فلاتر ابتدا معرفی مختصر معماری فلاتر پرداختیم و گفتیم که معمولا در فلاتر یا در کدهای دارت یا در کدهای نایتیو امکان بروز خطا و exception وجود دارد و شما بایستی برای مدیریت آنها برنامه داشته باشید. همین مفهوم را با استفاده از مثالی ساده و مدل همزمانی در دارت و Zone توضیح دادیم. در ادامه یک ویژگی به برنامه اضافه میکنیم که به شکل گلوبالی خطاهارا دریافت کنیم. در ادامه یک mixin برای logger اضافه کردیم که بتوانیم در کلاس های دیکر از آن استفاده کنیم.


video link: https://youtu.be/mM-JsB6bHu4

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxb--mXM7ILSKenSLLX9hEl

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

Agile Design چیست؟ طراحی چابک و اجایل

Agile design چیست؟ طراحی اجایل یکی از فاکتورهای بسیار مهم در توسعه نرم افزار به شیوه مدرن است. به تعبیر هراکلس تنها چیز ثابت در دنیا، تغییر است. این بدان معنی است که شما بایستی همواره منتظر تغییر در نرم افزار باشید و برای مدیریت آن برنامه داشته باشید. اصول SOLID مجموعه ای از اصول اساسی طراحی است که به شما کمک می‌کند از تولید نرم افزاری که از منظر طراحی ضعیف باشد دوری کنید. در این ویدیو نشانه های طراحی ضعیف را تشریح کردیم.

Link: https://youtu.be/7KwmaZ3hHKc

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxUIWhfp9euGlbBIrQUhm2Q

〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

پیاده سازی Navigation در Flutter

در چهارمین ویدیو آموزش پروژه محور فلاتر ابتدا به معرفی مختصر پشته و کاربرد آن در کامپیوتر و navigation در Flutter پرداختیم. سپس مفهوم GlobalKey فلاتر را مطرح کردیم و گفتیم این مکانیزم چگونه میتواند تغییرات در navigation را برای ما راحت کند. سپس یک کلاس مشخص برای کارهای ناویگیشن تعریف و آن را در ظرف وابستگی هایمان رجیستر کردیم. سپس متد onGenerateRoute را هم برای پیاده سازی جابجایی صفحات در فلاتر اضافه کردیم

Video link: https://youtu.be/FblsBFPkIfQ

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxb--mXM7ILSKenSLLX9hEl

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

دکوراتور تایپ اسکریپت و کاربردهای آن

یکی از عمده ویژگی های تایپ اسکریپت، امکان استقاده از دکوراتور است. البته این ویژگی در پروپوزال ES هست ولی با تایپ اسکریپت در حال حاضر میتوانید از آن استفاده کنید. اساسا یکی از ایده اصلی تایپ اسکریپت رو میشه دکوراتور دانست. میدانید که تایپ اسکریپت با همکاری مشترک گوگل و مایکروسافت ارایه شد. گوگل برای این همکاری در واقع قصد داشت زبان AtScript خود را بر روی تایپ اسکریپت اجرا کند که در نهایت در نسخه ۲ تایپ اسکریپت اغلب ویژگی های زبان گوگل به صورت نایتیو ارایه شد. گوگل قرار بود نسخه ۲ انگولار را با AtScript بنویسد که با این اتفاق انگولار با تایپ اسکریپت نوشته شد. به نظرم مهمترین ویژگی تایپ اسکریپت پس از استاتیک بودن، ارایه راهکارهایی برای Meta Programming و Annotation در زبان از طریق دکوراتورهاست. در این ویدیو به بررسی این ویژگی میپردازیم.

VideoLink: https://youtu.be/GCgPmZ-Vv-4

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

پیاده سازی کامپوننت سطح بالاتر در انگولار به کمک Ivy

در تفکر کامپوننت، بویژه کامپوننت های فانکشنال، کامپوننت سطح بالاتر یا Higher Order Component جایگاه بسیار ویژه ای دارد. اگر از توسعه دهندگان قدیمی واسط کاربری هستید یادتان هست که در گذشته اغلب فریمورک ها از مفهوم وراثت برای ساخت UI استفاده می‌کردند. بدین معنی که یک کلاس پایه، مثلا TextBox تعریف شده بود و معمولا شما به فراخور نیاز کلاسی می ساختید تا از آن ارث بگیرد و کارکردهای جدید به آن اضافه می شد. این شیوه مبتنی بر اولویت وراثت بر ترکیب بود. اما امروزه این شیوه معکوس شده است. با تغییر رویکرد، مفهوم استفاده مجدد دستخوش تغییراتی شده است. یکی از راه های استفاده مجدد در رویکرد اولویت ترکیب بر وراثت، بهره گیری از کامپوننت سطح بالاتر است که در این ویدیو شیوه ساخت این کامپوننت در فریمورک انگولار را بررسی میکنیم.


VideoLink: https://youtu.be/dwa2zDArlkI

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

آموزش برنامه نویسی وب با جنگو از صفر
در این کلاس آنلاین قصد داریم برنامه نویسی فرانت وب را از صفر شروع و تا پیاده سازی یک فروشگاه اینترنتی با جنگو ۴ پیش بریم

جلسه اول: تاریخچه وب و مولفه‌های آن - معرفی ساختار مرورگرها
https://youtu.be/GnJbynuOQK0

جلسه دوم: ساختار صفحات وب - HTML CSS JS
https://youtu.be/6wXjdW3oUiw

جلسه سوم: ساخت اولین صفحه وب با HTML و اهمیت آن در SEO
https://youtu.be/3rqCa-zuJs4

جلسه چهارم:آموزش کار با متن ها در HTML
https://youtu.be/22LtKg-j0pg

پلی لیست:
https://www.youtube.com/playlist?list=PLJ9zDGwhhsBw2UdsBVyA4ahU8057ONdSS

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

کاربرد Real Time Web در مصاحبه System Design

یکی از سوال های مهم در مصاحبه فنی برنامه نویسی و System Design یا طراحی سیستم بهره گیری از کاربرد Real Time Web است. در این ویدیو به بررسی انواع روش های پیاده سازی و کاربردهای آن در طراحی سیستم می‌پردازیم. راهکارهایی همچون وب سوکت، Short and long Polling، امکانات HTTP/2 و ویژگی مهم Server Sent Event مطرح و در ادامه پلی
لیست هرکدام را پیاده سازی میکنیم.

Link: https://youtu.be/6d3smYCV7XQ

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBw0ej6VPfTtMdssjqcNoSt8

〰️〰️〰️〰️〰️〰️
@microfrontend_ir

پیاده سازی Short Polling برای وب

در این ویدیو به معرفی روش Short Polling برای پیاده سازی مکانیزم Real Time Web پرداختیم. ابتدا یک سرویس ساده وب را با جنگو نوشتیم که تغییرات قیمت را برگرداند سپس در سمت کلاینت با استفاده از یک چارت تغییرات را نمایش دادیم و سعی کردیم شیوه اتصال مجدد به سرور را بهینه تر کنیم.


link: https://youtu.be/5GymaQGTmHc

playlist: https://www.youtube.com/watch?v=6d3smYCV7XQ&list=PLJ9zDGwhhsBw0ej6VPfTtMdssjqcNoSt8

〰️〰️〰️〰️〰️〰️
©@microfrontend_ir

پیاده سازی Long Polling برای وب و جنگو

در این ویدیو به معرفی روش Long Polling برای پیاده سازی مکانیزم Real Time Web پرداختیم. ابتدا به مقایسه sync view و async view در جنگو پرداختیم روش ASGI برای اجرای سرور را شرح دادیم و با WSGI مقایسه کردیم و سپس سرویسی ایجاد کردیم که بتواند به صورت long polling و async آخرین تغییرات سمت سرور را با کلاینت همگام کند.

link: https://youtu.be/okWaL08cRH8

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBw0ej6VPfTtMdssjqcNoSt8


#django #جنگو
〰️〰️〰️〰️〰️
© @microfrontend_ir

HTTP 2 چیست؟

در این ویدیو به معرفی چالش‌ها و مشکلات HTTP 1.1 پرداختیم و گفتیم HTTP 2 چیست و چکونه مشکلات آن را حل کرده است. سپس یک صفحه ساده را که در ان ریسورس های مختلفی وجود داشت را هم به صورت HTTP/1.1 و هم به صورت HTTP/2 اجرا کردیم و نتیجه را مقایسه کردیم.

link: https://youtu.be/ig-T53Rj9B4

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBw0ej6VPfTtMdssjqcNoSt8

〰️〰️〰️〰️〰️
© @microfrontend_ir

وب سوکت چیست؟ وب سوکت در پایتون با جنگو

در این ویدیو بررسی میکنیم که WebSocket چیست و یک پیاده سازی از وب سوکت در پایتون و جنگو را شرح خواهیم داد. ابتدا به معرفی کلی ساختار وب سوکت می‌پردازیم و مثال های از کاربرد آن را مطرح میکنیم. سپس با استفاده از django channels مثالی را پیاده میکنیم که در آن تغییرات روی مدل برای کاربران وب سوکت به صورت real time ارسال شود.


link: https://youtu.be/NNjUSOz20NQ

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBw0ej6VPfTtMdssjqcNoSt8


〰〰〰〰〰〰
© @microfrontend_ir

Server Sent Event چیست؟

در این ویدیو به معرفی Server Sent Event یا به اختصار SSE می‌پردازیم. ابتدا مشکلاتی که وب سوکت دارد را بررسی و سپس توضیح میدیم که SSE چگونه میتواند راهکاری برای حل این مشکل باشد. سپس SSE را از منظر کلاینت که یک استاندارد HTML5 است را شرح و پیاده سازی های سمت سرور آن را معرفی و در نهایت مثال تغییرات قیمت را بوسیله پایتون و جنگو پیاده میکنیم.

link: https://youtu.be/zYC5PDkl1so

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBw0ej6VPfTtMdssjqcNoSt8


〰〰〰〰〰〰
© @microfrontend_ir

Single Responsibility Principle چیست؟

در این ویدیو به این سوال پاسخ می‌دهیم که Single Responsibility Principle چیست؟ SRP نخستین اصل از اصول طراحی SOLID است که می‌گوید هر ماژول یا المان داخل ماژول بایستی تنها و تنها یک دلیل برای تغییر داشته باشد. برای تشریح این موضوع ابتدا Coupling و Cohesion را در معماری نرم‌افزار مطرح سپس در مورد مفهوم تغییر در سیستم اجایل صحبت کردیم و در نهایت یک مثال ساده از SRP را تشریح کردیم.

Link: https://youtu.be/veQJ_jD7T8o

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxUIWhfp9euGlbBIrQUhm2Q

〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

WebAssembly چیست؟

در این وبدیو به این سوال پاسخ می‌دهیم
که WebAssembly چیست؟ و کجا کاربرد دارد. وب اسمبلی نتیجه تلاشی است چند ساله برای اجرای چیزی غیر از جاوا اسکریپت در مرورگر و در حال حاضر به صورت استاندارد در همه مرورگرهای مدرن قابل استفاده است. ابتدا به معرفی تکنولوژی و مزیت های آن پرداختیم و گفتیم که اتودسک، گوگل و فیگما چگونه از وب اسمبلی برای پروژه های خود استفاده میکنند و در نهایت تلاش های قبل از WebAssembly را معرفی کردیم

link: https://youtu.be/BjMJAXQmCic

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBy65DpNohbFt8za6smAdy4v

〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

اگر بخواهید خودرو بدون راننده بخرید کدام یک را انتخاب می‌کنید؟ آنکه اولویتش حفظ جان شماست یا آنکه به گونه‌ای طراحی شده است که جان‌های بیشتری را نجات دهد؟

اگر برنامه نویس هستید و فلسفه اخلاق از علاقمندی‌هاتونه پیشنهاد میکنم این کتاب رو نگاه بندازید.

https://www.goodreads.com/book/show/43726517-hello-world

〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

اجرای اولین برنامه WebAssembly

در این ویدیو به اجرای اولین برنامه WebAssembly خود در محیط های خط فرمان، Node.js و مرورگر می‌پردازیم. در این ویدیو ابتدا به مفهوم پرتابل بودن پرداختیم و مکانیزم های مبتنی بر ماشین مجازی را برای این رویکرد شرح دادیم. در ادامه برنامه ساده ای به صورت WebAssembly Text Format نوشتیم و با استفاده از ابزارهای وب اسمبلی آن را تبدیل به باینری فرمت کردیم و در مفسر WASM3 از طریق خط فرمان اجرا کردیم و نهایتا همین باینری را در محبط Node.js و مرورگر اجرا کردیم.

link: https://youtu.be/hyXK5GNM5IY

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBy65DpNohbFt8za6smAdy4v

〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

دوره: آموزش تایپ اسکریپت به منظور بررسی فنی Type Systems
ویدیو اول : TypeScript چیست؟ چرا تایپ اسکریپت‌ ؟

در اولین ویدیو از سری آموزش TypeScript به این سوال پاسخ دادیم که TypeScript چیست و چرا تایپ اسکریپت تکنولوژی مهمی است و أینده شغلی برنامه نویس را تضمین می‌کند. در آغاز به معرفی تاریخچه‌ای مختصر از جاوا اسکریپت و زمینه‌های شکل گیری آن صحبت کردیم معضلات آن برای برنامه نویسی پرداختیم. سپس به تحول و اوج گیری وب و به طبع آن جنگ مرورگرها را مطرح کردیم. در ادامه به زمینه های پیدایش TypeScript و مسایلی که حل کرده پرداختیم و در نهایت مولفه های دیگری که سعی کرده‌اند کارکری مشابه TypeScript داشته باشند را بررسی کردیم.

link: https://youtu.be/X9lsmXq5Ie4

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK

〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

نصب و مدیریت نسخه های Node.js با NVM یا Volta

اگر برنامه نویس node.js توسعه دهنده front-end هستید قاعدتا هر روز در حال استفاده از نود جی اس در پروژه های مختلف هستید. مدیریت نسخه های Node.js با NVM یا Volta به شما این امکان را می‌دهد که به ازای هر پروژه و یا به صورت دستی نسخه node و ابزارهای دیگر جاوا اسکریپت را مشخص کنید.

در این ویدیو ابتدا فرایند نسخه دهی در Node.js را بررسی و ضرورت استفاده از ابزارهای مدیریت نسخه را مطرح و سپس دو ابزار شناخته شده در این محیط را بررسی و مقایسه کردیم. ابتدا از NVM و کاربردهای آن صحبت کردیم و سپس از ابزار Volta استفاده کردیم و مزیت های آن را شرح دادیم.


Link: https://youtu.be/MbYIAEB_or0

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByb0nwz6vqwIKQ3P0CJTnMK


〰️〰️〰️〰️〰️〰️
© @microfrontend_ir