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

یکی از عمده ویژگی های تایپ اسکریپت، امکان استقاده از دکوراتور است. البته این ویژگی در پروپوزال 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

تفاوت npm و yarn و pnpm - مقایسه Node Package Managers


در این ویدیو به مقایسه Node Package Managers پرداختیم و تفاوت npm و yarn و pnpm را از منظر ساختاری و فنی بررسی کردیم. ابتدا به معرفی مفهوم پکیج و ماژول پرداختیم و چالش هایی که یک پکیج منیجر با آن سروکار دارد را معرفی کردیم. سپس به تاریخچه و مکانیزم npm و yarn classic و yarn berry و pnpm پرداختیم.در نهایت برای هرکدام یک نمونه ساده ساختیم و مطالب گفته شده را بررسی کردیم


Link: https://youtu.be/fqMLtuMBPAc


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

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

آموزش TypeScript و برنامه‌نویسی مبتنی بر Type - ناجی برنامه‌نویسان از فجایع

در این ویدیو ابتدا به معرفی و ضرورت آموزش TypeScript و برنامه‌نویسی مبتنی بر Type پرداختیم و گفتیم اساسا چرا به type در برنامه نویسی نیازمندیم و سپس سعی کردیم تعریف دقیقی از Type، Type System ،Type Checking و Type Checker ارایه کنیم. سپس به معرفی انواع تایپ سیستم ها پرداختیم. ابتدا Dynamic Type و Static Type را مقایسه کردیم و مفهوم duck typing را شرح دادیم سپس Weak type و Strong Type ها را باهم مقایسه کردیم و نهایتا مفهوم type inference را شرح دادیم. در نهایت مزایای برنامه نویسی مبتنی بر Type را مطرح کردیم.

Link: https://youtu.be/zCeDfPQuE9s

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


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

آموزش TypeScript - کار با اعداد

در سومین ویدیو از پلی لیست تایپ اسکریپت، نوع داده عدد را در این زبان بررسی کردیم. با این پرسش آغاز کردیم که چرا 0.1+0.1+0.1 برابر 0.3 نمی‌شود. سپس به بررسی ویژگی‌های کلی نوع عدد در زبان‌های برنامه نویسی پرداختیم و width و encoding را بررسی کردیم و مفاهیم overflow و underflow راه‌های کنترل آن را معرفی کردیم.
در نهایت فرمت binary64 از انکدینگ IEEE 754 که برای اعداد در جاوا اسکریپت و بسیاری از زبان‌های برنامه نویسی استفاده می‌شود را توضیح و راه‌های مقایسه مطمن اعداد اعشاری و صحیح را در جاوا اسکریپت شرح دادیم


Link: https://youtu.be/tlpbs0MGYS0

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


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

نوع داده boolean در TypeScript

در این ویدیو به معرفی نوع داده boolean در TypeScript و بررسی مفهوم short circuit در ارزیابی عبارات بولی خواهیم پرداخت. سپس در ادامه با چند مثال مفهوم type coercion در جاوا اسکریپت را که منشا بسیاری از رفتارهای ناخواسته در برنامه نویسی به این زبان است را مطرح کردیم و در نهایت شیوه های تبدیل مقادیر به بول را شرح دادیم.


Link: https://youtu.be/bBo5MnTlbEA

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

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

PyScript چیست؟

در این ویدیو خیلی مختصر به این سوال پاسخ داده شد که PyScript چیست؟
برای این منظور ابتدا ساختار کلی و مولفه های آن را بررسی و چند مثال ساده را بررسی کردیم


Link: https://youtu.be/LK_ZOd-87Uc

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