آموزش Docker - ساخت کانتینر با داکر

در قسمت چهاردهم از آموزش Docker در مورد چرخه حیات یا lifecycle کانتینرها صبحت کردیم و شیوه ایجاد و شروع یک کانتیتر را بررسی کردیم.


** اگر فکر می‌کنید نیازی به مقدمات و مطالب مطرح شده در مورد فلسفه و چیستی و چرایی داکر ندارید میشه گغت این ویدیو اولین قسمت از شروع کار با داکر است و از اینجا میشه شروع کرد


Link: https://youtu.be/OMxt1BAbSE0

Playlsit: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7

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

آموزش Docker - اتصال به کانتینرهای داکر

در قسمت پانزدهم از آموزش Docker شیوه اتصال به کانتینرهای داکر را بررسی کردیم. ابتدا تفاوت Base Image در داکر را شرح دادیم سپس شیوه اتصال به کانتینر و اجرای پروسس بر روی کانتینر را توضیح دادیم و بعد اتصال به پروسس اصلی کانتینر را انجام دادیم. در نهایت در مورد چرایی عدم تغییر در ساختار کانتینر در حال اجرا صحبت کردیم


Link: https://youtu.be/aVZEyiN271E

Playlsit: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7

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

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

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

آموزش Docker - استاپ کردن کانتینر در داکر

در قسمت شانزدهم از آموزش Docker ابتدا به بررسی کانتینرهای Background و تفاوت آنها با کانتینرهای Foreground پرداختیم. سپس شیوه دسترسی به لاگ کانتینرهای در حال اجرا را شرح دادیم و بعد مفهوم و چالش های مرتبط با استاپ کردن کانتینر در داکر را مطرح کردیم و گفتیم همواره به گونه‌ای کانتینر را استاپ کنیم که فرصت مدیریت آن را داشته باشد و از استاب کردن به شکل فورس و لحظه ای دوری کنیم و در نهایت به بررسی مکانیزم‌های Docker برای رستارت کانتینرها را شرح دادیم.


Link: https://youtu.be/72LygKxOeBE

Playlsit: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7

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

در قسمت هفدهم از آموزش Docker به بررسی مدیریت منابع در داکر پرداختیم. ابتدا ضرورت و کارکرد مدیریت منابع کانتینرها بویژه در محیط توسعه شرح دادیم و سپس با یک مثال شیوه محدود کردن حافظه برای کانتینر را توضیح و بعد با مثال دیگری مدیریت CPU در کانتینر را شرح دادیم و در نهایت شیوه فوروارد کردن پورت‌های کانیتر به ماشین اصلی را با مثالی بر بستر Play With Docker انجام دادیم که می‌تواند برای دموی پروژه‌‌های ساده تر هم به کار گرفته شود.

** در این مثال به جای setTimeout می بایست از setInterval استفاده می‌کردم و چون همواره این دوتارو باهم قاطی می‌کنم :) اینجا هم سوتی دادم. لطفا از تابع setInterval برای این مثال استفاده کنید. چون دیر متوجه شدم و این ویدیوها از قبل ضبط شده امکان ضبط مجددشو نداشتم. پوزش می‌خوام!


Link: https://youtu.be/kquZ4nIVFug

Playlsit: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7

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

آموزش Docker - ساختار Image

در قسمت هجدهم از آموزش Docker به بررسی ساختار Image و لایه‌های آن پرداختیم. هر ایمیج شامل یک مانیفست و مجموعه‌‌ای از لایه‌هاست که کانتینر ران تایم با خواندن مانیفست و چیدن لایه‌ها امکان اجرای پروسس بر روی آن را به کاربر ارایه می‌دهد. به شکل کلی دو رویکرد اصلی برای ساخت ایمیج در داکر وجود دارد. رویکرد اول و اصلی استفاده از dockerfile است و رویکرد دوم شیوه دستی و تعاملی است. در این ویدیو رویکرد دوم را مطرح و لایه‌های دو ایمیج را باهم مقایسه و سپس یک کانتینر پایتون ایجاد و جنگو رو بر روی آن نصب کردیم و بعد با استفاده از docker commit کانتینر را به شکل ایمیج ذخیره کردیم و در نهایت با استفاده از دستورات docker save و docker load امکان ذخیره کل ایمیج در یک فایل و بارگذاری مجدد آن را توضیح دادیم


Link: https://youtu.be/tNsG9B6jt_A

Playlsit: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7

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

دیشب تو Google I/O برای وب عمده تمرکز روی WASM یا وب اسمبلی بود که به نظر میاد شدیدا فضای توسعه نرم‌افزارهای تحت وب رو متحول کنه. تو این ویدیو قدیمی در مورد اینکه WASM چیه صحبت کردم و یک مثال ساده رو هم اجرا کردم.

آیا تا به حال فکر کرده‌اید که چطور مرورگرها اجازه می‌دهند تا برنامه‌های پیچیده و سنگین را به صورت سریع در وب اجرا کنند؟ آیا علاقه‌مندید که بدانید چگونه فناوری‌های مدرن مانند وب اسمبلی یا WASM این امکان را فراهم می‌کنند؟
وب اسمبلی، به اختصار WASM، یک استاندارد جدید در دنیای وب است که به تازگی معرفی شده است. این فناوری به توسعه‌دهندگان اجازه می‌دهد که برنامه‌هایی را با زبان‌های برنامه‌نویسی زیرساختی مانند C، C++، یا Rust بنویسند و آن‌ها را به صورت فشرده و بهینه به مرورگر ارسال کنند.
با WASM، امکان اجرای برنامه‌هایی با سرعت و کارایی بسیار بالا در مرورگرها وجود دارد. به عبارت دیگر، این فناوری به توسعه‌دهندگان اجازه می‌دهد تا از قابلیت‌های مانند بازی‌های سنگین گرافیکی، برنامه‌های پرسرعت، و حتی برنامه‌هایی با حجم بزرگ، در محیط وب استفاده کنند.
با این وجود، WASM تنها یک ابزار نیست؛ بلکه یک راهکار است. این فناوری به توسعه‌دهندگان اجازه می‌دهد تا به زبان‌هایی که با آن‌ها آشنایی دارند، برنامه بنویسند و سپس آن را به محیط وب بیاورند.
به عبارت دیگر، WASM یک انعطاف‌پذیری بسیار بالا دارد و این امکان را فراهم می‌کند که برنامه‌های متنوعی از جمله بازی‌ها، ابزارهای کاربردی، و حتی برنامه‌های تخصصی را در مرورگرها اجرا کنیم.
به طور کلی، وب اسمبلی یک پلتفرم قدرتمند برای ارتقاء توانایی‌های وب است و به توسعه‌دهندگان امکان می‌دهد تا برنامه‌های خود را به صورت بسیار کارا در مرورگرها اجرا کنند.
اگر شما هم از دست‌یابی به کارایی بالا و اجرای سریع برنامه‌هایتان در مرورگرها علاقه‌مندید، حتماً WASM را برای پروژه‌های خود در نظر بگیرید.


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

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

آموزش Docker - ساخت ایمیج با Dockerfile

در قسمت نوزدهم از آموزش Docker رویکرد اصلی داکر در ساخت ایمیج یعنی ساخت ایمیج با Dockerfile را بررسی کردیم. ابتدا ضرورت استفاده از این فایل را شرح دادیم و اولین فایل خود را ساختیم. در مورد دستور From و چالش‌های آن صحبت کردیم و کارکرد دستور RUN برای ساخت لایه در ایمیج‌ها را شرح و امتحان کردیم. بعد از طریق docker build مکانیزم ساخت ایمیج را بررسی و دو دستور EXPOSE و LABEL را نیز معرفی کردیم. در نهایت بر اساس ایمیج جدید کانتینر خود را اجرا کردیم


Link: https://youtu.be/Fjrwo04hrRo

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

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

آموزش Docker - تفاوت CMD و ENTRYPOINT در داکر

در قسمت بیستم از آموزش Docker به یک سوال پر تکرار یعنی تفاوت CMD و ENTRYPOINT در داکر پرداختیم. دستور CMD به ما امکان تعریف یک کامند پیش فرض برای اجرای کانتیر را می‌دهد که امکان جایگزین کردن آن را خواهیم داشت اما دستور ENTRYPOINT برای تعریف فرمان اصلی کانتیر به کار گرفته می شود. سعی کردیم با مثال استفاده از این دستورات را تمرین و تفاوت‌ آنها را شرح دهیم و در نهایت حذف ایمیج های dangling برای صرفه جویی در فضای ذخیره‌سازی خود را توضیح دادیم


Link: https://youtu.be/g7MKuSwphZI

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

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

همانند رویکردی که برای داکر داشتم، تو هفته‌های أینده رو یک پلی لیست کوتاه ساخت فریمورک کوچک جاوا اسکریپت کار خواهم کرد که چالش‌های فریمورک‌ و کتابخانه‌هایی مثل React و Angular رو بشناسیم و بتونیم درک عمیق تری نسبت به فریمورک‌های فرانت اند داشته باشیم و رویکردهای به روزرسانی DOM و مدیریت استیت رو بررسی کنیم.

از مخاطبای احتمالی دوره هم اگر کسی گرافیسته خیلی ممنون میشم یه تامبنیل برامون طراحی کنه. به ازای هر پلی‌لیست معمولا یه دونه استفاده میکنم و عنوانشو تغییر می‌دم.
@HemanHP2

https://www.youtube.com/@MicroFrontend

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

دستورات COPY و ADD در داکر

در قسمت بیست و یکم از آموزش Docker به بررسی شیوه‌های اضافه کردن فایل به ایمیج از طریق دستورات COPY و ADD در داکر پرداختیم. ابتدا به ضرورت Idempotent بودن ایمیج ‌ها و مدیریت وابستگی‌ها صحبت کردیم سپس یک پروژه را به صورت لوکال ایجاد و از طریق دستور COPY به داخل ایمیج منتقل کردیم. از طریق دستور WORKDIR فولدر جاری را مشخض و همچنین کارکرد فایل dockerignore را مطرح کردیم. دستور دوم داکر برای انتفال فایل ADD است که کارکرد اصلی آن در دانلود ویا آنزیپ کردن فایل ها در یک مرحله است. در نهایت شیوه تعریف متغیرهای محیطی را از طریق دستور ENV شرح دادیم.

Link: https://youtu.be/MVbSjQT-5gw

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7
-
** قسمت بعدی میخوام یه جمع بندی داشته و ۴ تا داکر فایل ساده بنویسم که از پلی لیست مقایسه فریمورک‌ها استفاده میکنم. اگر مایل بودید کدها و پلی لیست رو ببینید:

Git: https://github.com/hemanhp/django-ng-react-vue
Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-

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

آموزش Docker - داکر برای برنامه‌نویسی فرانت اند

در قسمت بیست و دوم از آموزش Docker به جمع بندی مطالبی که تاکنون در مورد داکر فایل گفتیم پرداختیم و ۴ ایمیبج برای ۴ فریمورک مختلف نوشتیم. در گام اول یک ایمیج برای یک اپ Django Rest نوشتیم. در گام دوم یک ایمیج برای اجرای فریمورک angular نوشتیم. در این گام از node.js base image استفاده کردیم. در گام سوم برای React با استفاده از alpine base image یک ایمیج ساختیم که خودمان نود را نصب کنیم. در گام چهارم با استفاده از ایمیج nginx یگ داکر فایل نوشتیم که بتوان پروژه Vue را ابتدا بیلد و باندل خروجی را از طریق nginx پاسخ دهیم

Link: https://youtu.be/8c8o9zb-H9Y

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7
-
**پلی لیست کدهای فریمورک‌های فرانت اند

Git: https://github.com/hemanhp/django-ng-react-vue
Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-

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

این ماه در کانال متمرکز رو فرانت اند و وب خواهم بود. ابتدا تو یک پلی لیست پروژه محور رو DOM و جزییاتش کار خواهم کرد که پایه و اساس پلی لیست بعدیمون یعنی ساخت یک فریمورک جاوا اسکریپت شبیه React خواهد بود. در پلی لیست DOM سعی می‌کنم یک برد کانبان شبیه ترلو رو بدون استفاده از فریمورک خاصی یا به عبارتی VanillaJS پیاده کنم بعد همون رو از طریق Web Component بازنویسی خواهم کرد تا با ShadowDOM هم آشنا بشیم.
چون فریمورک وب‌مون نهایتا قراره رو DOM کار کنه درکش بسیار مهمه. پس از این پلی لیست یک چیزی شبیه React یا Vue خواهیم نوشت که هم درک عمیق تری از جاوا اسکریپت و فریمورک‌ها و ابزارها داشته باشیم و هم اینکه در مصاحبه‌های فنی اعتماد به نفس بیشتری داشته باشیم.

در این پلی لیست‌ها از تایپ اسکریپت به عنوان زبان اصلی استفاده خواهم کرد که رو اون هم مسلط ‌تر بشیم.
پیشاپیش چشم انتظار فیدبک و نقدهاتون هستم :)

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

آموزش Docker - بهینه سازی ایمیج های داکر با Multi Stage Build

در قسمت بیست و سوم از آموزش Docker به بررسی دو نکته مهم برای بهینه‌سازی ایمیج های داکر پرداختیم. Multi-stage builds در داکر (Docker) روشی است که به شما اجازه می‌دهد تا Dockerfile های پیچیده‌تر و بهینه‌تری بسازید. این روش با استفاده از چندین مرحله (Stage) مختلف در یک Dockerfile امکان‌پذیر است و باعث کاهش حجم نهایی ایمیج و بهبود امنیت و کارایی آن می‌شود.
در بهش دوم نکته‌ای مهم در مورد شیوه کپی و نصب وابستگی‌های پروژه ‌ها را مطرح کردیم که اغلب تازه‌کارهای داکر ممکن است به آن دقت نکنند و زمان زیادی را درگیر نصب مجدد پکیج‌ها در زمان بیلد ایمیج باشند


Link: https://youtu.be/q_IEmLSeT18

Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzLTI3VNE8Vp4JpXNn_yRR7
-
**پلی لیست کدهای فریمورک‌های فرانت اند

Git: https://github.com/hemanhp/django-ng-react-vue
Playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwrYhJ7UiXFjPA6b1GNXp0-

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

من ویرایش اول این کتاب رو خوندم و به نظرم دروازه خوبیه برای ورود به معماری ‌نرم افزار و چالش‌هاش. نسخه دومش تازه چاپ شده و تغییرات زیادی داره.
Designing Software Architectures: A Practical Approach, 2nd Edition

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

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

آموزش پروژه محور جاوا اسکریپت و DOM

در این ویدیو به معرفی پلی لیست آموزش پروژه محور رایگان جاوا اسکریپت و DOM پرداختم. در این پلی لیست قصد دارم به چند تا سوال مهم در مورد DOM یا document object model و همچنین مکانزیم‌های رندرینگ در فضای بروز پاسخ دهم و سپس شیوه کار با DOM از طریق Vanilla JS شرح و در نهایت یک پروژه عملی را با هم تمرین کنیم.

** این پلی لیست پیش نیاز پلی لیست بعدیمون در مورد ساخت یک فریمورک جاوا اسکریپتی است.
** برنامه کانال در حال حاضر روزهای فرد است اما تلاشم این خواهد بود که این پلی لیست را سریعتر تکمیل کنم


Link: https://youtu.be/mNVrorM0U-U

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxTnc38aIpeTV3m_UUw-4EF

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

آموزش پروژه محور رایگان جاوا اسکریپت - DOM چیست؟

در قسمت اول از پلی لیست آموزش پروژه محور رایگان جاوا اسکریپت و DOM به بررسی مسیری که مرورگر برای نمایش صفحات یا Critical Render Path طی می‌کند پرداختیم. مرورگر به شکل کلی ۵ گام اصلی را برای رندر طی می‌کند. در گام اول DOM را می‌سازد، در گام دوم CSS Object Model و در گام سوم این دو را باهم ترکیب و Render Tree را می سازد. در گام چهارم هرآنچه برای چیدن Layout لازم است را داریم و در نهایت آن را Paint می کند. فرایند گفته شده را با یک مثال ساده در بروزر بررسی کردیم.


Link: https://youtu.be/XmQvIvP6yxc

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxTnc38aIpeTV3m_UUw-4EF
〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

یک دلیل دیگه برای ضرروری بودن دوره دام و وب کامپوننت:
الکس راسل، مدیر محصول شریک در Edge (و قبل از آن، یکی از سازندگان Web Components)، جزئیات تغییرات Edge را تایید کرد.

https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/

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

آموزش پروژه محور جاوا اسکریپت - DOM Nodes and Elements

در قسمت دوم از پلی لیست آموزش پروژه محور رایگان جاوا اسکریپت و DOM به بررسی عمیق‌تر درخت DOM و شیوه های پیداکردن و تعامل با عناصر آن پرداختیم. ابتدا آبجکت window رو بررسی و سپس انواع Node های دام را شرح دادیم. سپس استفاده از متدهای DOM برای دستیابی و پیداکردن عناصر را شرح و چند نکته مهم مرتبط با آنها را توضیح دادیم. سپس شیوه استفاده از آنها را با مثالی توضیح دادیم. در نهایت با یک مثال بی ربط به بحث مفهوم Web Scraping را توضیح دادم که با استفاده از مهارت‌های مرتبط با DOM می توانیم اطلاعات صفحات وب را استخراج و تحلیل کنیم.


Link: https://youtu.be/OEZJNgKzYN4

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBxTnc38aIpeTV3m_UUw-4EF
〰️〰️〰️〰️〰️〰️
© @microfrontend_ir