دستورات 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

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

در قسمت سوم از پلی لیست آموزش پروژه محور رایگان جاوا اسکریپت و DOM به بررسی مفهوم پیمایش درخت DOM و دستورات آن پرداختیم

Link: https://youtu.be/A94kTXi2IWg

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

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

در قسمت چهارم از آموزش پروژه محور جاوا اسکریپت به بررسی مفهوم ایجاد و مدیریت DOM Elements پرداختیم. ابتدا دستور createElement را شرح و سپس شیوه های مختلف اضافه کردن آیتم به DOM را بررسی و در مورد پرفورمنس هرکدام از آنها توضیحات مختصری مطرح کردیم. سپس دستورات اضافه کردن و حذف کردن و کپی کردن المان ها را شرح دادیم

Link: https://youtu.be/EINkFBKPC6E

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

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

در قسمت پنجم از آموزش پروژه محور جاوا اسکریپت به بررسی مفهوم DOM Events ها پرداختیم. ابتدا به معرفی مفهوم و کارکرد event در استاندارد DOM پرداختیم. سپس سه شیوه اضافه کردن Event Listener ها به المان‌ها را شرح و مزایا و معایب هرکدام را بررسی کردیم.


Link: https://youtu.be/2oEq-oLZI0A

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

آموزش پروژه محور جاوا اسکریپت - Capturing and Bubbling

در قسمت ششم از آموزش پروژه محور جاوا اسکریپت به بررسی مفهوم Capturing and Bubbling در مدیریت Event ها پرداختیم. ابتدا به بررسی رویکرد مرورگر برای مدیریت Event در فازهای Capturing و Bubbling پرداختیم و سپس شیوه اضافه کردن Event Listener برای هر کدام از فازها را شرح و در نهایت یک مثال ساده از کاربرد آن را بررسی کردیم. در خاتمه یک کوییز و سوال کوچک جاوا اسکریپتی رو مطرح کردم :)

Link: https://youtu.be/KtUmvqTcSjo

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

مصاحبه فنی جاوا اسکریپت: کلمه کلیدی this و کاربردهای آن

در این ویدیو از سری مصاحبه فنی جاوا اسکریپت یکی از پرتکرارترین مفاهیم آن یعنی کلمه کلیدی this را بررسی کردیم. کلمه کلیدی this در جاوا اسکریپت یکی از مفاهیم مهم و پیچیده است که معنای آن به نحوهٔ فراخوانی تابع بستگی دارد. در این ویدیو سعی کردم حالت‌های مختلف استفاده از this را توضیح دهم. ابتدا در مورد شرایط implicit binding کلمه کلیدی this صحبت کردم و سپس explicit binding را از طریق متدها call, apply و bind شرح دادم.

Link: https://youtu.be/fCQFyVckhs8

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzcA25VvIevaPo-5qrKXtWY

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

مصاحبه فنی جاوا اسکریپت: پیاده سازی Event Emitter با تست

در این ویدیو از سری مصاحبه فنی جاوا اسکریپت به بررسی یگ مثال واقعی یعنی پیاده سازی Event Emitter با تست پرداختیم. EventEmitter یک سیستم ساده برای مدیریت و اجرای رویدادها فراهم می‌کند. این کلاس به شما اجازه می‌دهد که برای رویدادهای مختلف، شنونده‌های (listener) متفاوتی ثبت کنید و سپس این رویدادها را اجرا کنید و شنونده‌ها را فراخوانی کنید. در این ویدیو ابتدا Test Case های خود را بر اساس مساله تعریف و با استفاده از Vitest و Vite مراحل پیاده سازی و پاس کردن تست ها را پیش بردیم.

Link: https://youtu.be/ph7fqGM8gek

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzcA25VvIevaPo-5qrKXtWY

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


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

مصاحبه فنی جاوا اسکریپت: Prototype Inheritance

در این ویدیو از سری مصاحبه فنی جاوا اسکریپت به بررسی مفهوم Prototype Inheritance در زبان برنامه نویسی جاوا اسکریپت پرداختیم.
در برنامه‌نویسی شیءگرا، دو روش اصلی برای وراثت وجود دارد: وراثت نمونه‌ای و وراثت کلاسیک. وراثت کلاسیک بر مبنای کلاس‌ها است که در زبان‌های برنامه‌نویسی شیءگرا مانند Java، C++، و Python مورد استفاده قرار می‌گیرد. در این مدل، یک کلاس والد تعریف می‌شود و کلاس‌های فرزند از این کلاس والد وراثت می‌گیرند. کلاس‌ها نوعی الگو یا قالب هستند که اشیاء از روی آنها ساخته می‌شوند.
وراثت نمونه‌ای در زبان‌های برنامه‌نویسی مانند JavaScript استفاده می‌شود. در این مدل، اشیاء می‌توانند مستقیماً از اشیاء دیگر وراثت بگیرند، بدون نیاز به تعریف کلاس‌ها. هر شیء یک نمونه دارد که به عنوان مرجعی برای وراثت عمل می‌کند.


Link: https://youtu.be/gl6BCRRuyVc

PlayList: https://www.youtube.com/playlist?list=PLJ9zDGwhhsBzcA25VvIevaPo-5qrKXtWY

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

از هفته بعد تمرکز کانال بر روی داکر و پستگرس خواهد بود و پلی لیست‌های جاوا اسکریپت رو هم با سرعت کمتری ادامه می‌دم. روی یک پلی لیست آموزش Go هم دارم کار می‌کنم که چون می‌خوام مثل پلی لیست‌های ناقص دیگه نشه تا کامل ضبط نکنم منتشر نمی‌کنم. برای حمایت از کانال به دوستان خود بگویید :)

https://youtube.com/microfrontend

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

سلام و با عرض پوزش، در دو هفته گذشته متاسفانه عملا دسترسی نداشتم و نتونستم ویدیو منتشر کنم. از هفته بعد مجدد شروع می‌کنم.
〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

یک سرور دیسکورد برای کانال ساختم که برخی کارها مخصوصا دسته بندی اطلاعات و رفع اشکال پلی لیست‌ها رو اونجا داشته باشیم. اگر مایل بودید خوشحال می‌شم جوین شید.

https://discord.gg/hmxWQjKb

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