- 253
- 188 720
MicroFrontend
France
เข้าร่วมเมื่อ 28 เม.ย. 2019
به میکروفرانت اند خوش آمدید. در این کانال سعی میکنم تکنولوژیهای مختلفی که باهاشون تو محیط پروداکشن کار کردم آموزش بدم. هدفم اینه از آموزش های مرسوم یه خرده فراتر برم و مباحثی مطرح کنم که در پروژههای واقعی به کار گرفته میشوند صحبت کنم. محتوای کانال لزوما فقط به فرانت اند مرتبط نیستند و سعی میکنم به شکل فول استک باشه. در حال حاضر تمرکزم رو تکنولوژی های مرتبط با وب و موبایل و همچنین کارکردهای مختلف یادگیری ماشین هستش.
آموزش برنامه نویسی به زبان گو - Go Compiler
در قسمت یازدهم از آموزش برنامه نویسی به زبان گو به بررسی روند و مراحل Go Compiler پرداختیم.
یکی از ابسترکشنهای مهم در صنعت نرمافزار تعامل با سخت افزار به عنوان ریسورس است. یعنی به Cpu و مموری به مثابه منابع طبیعی و محدود نگاه کنیم که بایستی به صورت اشتراکی مصرف کنیم و بهینگی نرمافزار وابسته به چگونگی استفاده از این منابع است. برای اینکه بتوانیم کدهای بهتری بنویسیم بایستی مکانیزم کار منابعی که از آن استفاده میکنیم را بشناسیم. در این فصل در مورد CPU صحبت میکنیم
برنامهای که ما مینویسیم به هرحال باید تبدیل به به دستورات ماشین شود. این کار را معمولا با کامپایلر انجام می دهیم. در این پروسه کد ما کامپایل و احتمالا به آبجکتها لینک می شوند این کار را linker انجام می دهد. روش های مختلفی برای بیلد گو وجود دارد مثلا میتوان از tinygo برای میکروکنترلرها، gopherjs برای تبدیل به js کرد.
خود کامپایلر گو به زبان گو نوشته شده است و این یک امتیاز برای یادگیری به حساب میآید. در بیلد گو میتوان تمام وابستگیها را به صورت استاتیک لینک کرد و باینری شامل همه چیز باشد و برای اجرا نیاز به چیزی نداشته باشد. دستور go build شامل پروسه بیلد و لینک است که در فاز لینک ممکن است بهینهسازیهایی نیز وجود داشته باشد. این دستور همچنین امکان ترکیب گو با زبانهایی مثل c++ میدهد اما به شکل کلی پیشنهاد نمیشود. نکته مهم در کامپایل گو این است که هر پکیج مستقلا بیلد میشود و این امکان کامپایل موازی را ارایه میکند. - ابتدا پارسر کد را توکنایز میکند و سینتکس چک میشود و خطاهایی احتمالی را نشان میدهد. درخت AST ساخته میشود. کدهای بیهوده حذف میشود و از طریق escape analysis استک و هیپ مدیریت میشود و سپس function inlining برای توابع کوچک و ساده اجرا میشود. - درخت AST تبدیل به Static Single Assignment میشود یکی از کمکهای SSA این است که به راحتی میتوان متغیرهای استفاده نشده را شناسایی کرد. - در این فاز بهینهسازیهای مستقل از ماشین که مجموعهای از رولهاست اجرا میشود. به عنوان مثال y:=0*x تبدیل به y:=0 می شود. - براساس GOARCH و GOOS کامپایلر از genssa برای تبدیل ssa به کدهای ماشین استفاده میکند - کدهایی که باقی ماندهاند تبدیل به ابجکت فایل میشود و در نهایت لینکر این آبجکت فایل ها را تبدیل به باینری میکند. این باینری شامل اطلاعات و متادیتای مهمی است که توسط دیباگرها قابل استفاده است به عنوان مثال جدول DWARF به باینری اضافه میشود.
برای کامپایل و لینک میتوان پارامترهای مختلفی تنظیم کرد. gcflags و ldflags این موارد را برای ما انجام میدهد.
کامپایلر گو نهایتا کد ماشین را تولید میکند و CPU توانایی اجرای آن را دارد. سیستم عامل اولین کد را به حافظه میآورد و اولین دستور را در رجیستر Program Counter یا PC مینویسد. و از اینجا به به بعد هسته cpu میتواند دستورات را خط به خط اجرا کند. شاید این کار ساده به نظر بیاید اما با وجود مموری وال باعث میشود همواره در حال ارایه خلاقیت در بهینهسازی سختافزار باشند.
00:00 معماری کامپیوتر
06:18 کامپایل پروژه گو برای پلتفرمهای مختلف
14:50 مراحل اجرای Go Compiler
22:39 کنترل کامپایلر از طریق gcflags و ldflags
یکی از ابسترکشنهای مهم در صنعت نرمافزار تعامل با سخت افزار به عنوان ریسورس است. یعنی به Cpu و مموری به مثابه منابع طبیعی و محدود نگاه کنیم که بایستی به صورت اشتراکی مصرف کنیم و بهینگی نرمافزار وابسته به چگونگی استفاده از این منابع است. برای اینکه بتوانیم کدهای بهتری بنویسیم بایستی مکانیزم کار منابعی که از آن استفاده میکنیم را بشناسیم. در این فصل در مورد CPU صحبت میکنیم
برنامهای که ما مینویسیم به هرحال باید تبدیل به به دستورات ماشین شود. این کار را معمولا با کامپایلر انجام می دهیم. در این پروسه کد ما کامپایل و احتمالا به آبجکتها لینک می شوند این کار را linker انجام می دهد. روش های مختلفی برای بیلد گو وجود دارد مثلا میتوان از tinygo برای میکروکنترلرها، gopherjs برای تبدیل به js کرد.
خود کامپایلر گو به زبان گو نوشته شده است و این یک امتیاز برای یادگیری به حساب میآید. در بیلد گو میتوان تمام وابستگیها را به صورت استاتیک لینک کرد و باینری شامل همه چیز باشد و برای اجرا نیاز به چیزی نداشته باشد. دستور go build شامل پروسه بیلد و لینک است که در فاز لینک ممکن است بهینهسازیهایی نیز وجود داشته باشد. این دستور همچنین امکان ترکیب گو با زبانهایی مثل c++ میدهد اما به شکل کلی پیشنهاد نمیشود. نکته مهم در کامپایل گو این است که هر پکیج مستقلا بیلد میشود و این امکان کامپایل موازی را ارایه میکند. - ابتدا پارسر کد را توکنایز میکند و سینتکس چک میشود و خطاهایی احتمالی را نشان میدهد. درخت AST ساخته میشود. کدهای بیهوده حذف میشود و از طریق escape analysis استک و هیپ مدیریت میشود و سپس function inlining برای توابع کوچک و ساده اجرا میشود. - درخت AST تبدیل به Static Single Assignment میشود یکی از کمکهای SSA این است که به راحتی میتوان متغیرهای استفاده نشده را شناسایی کرد. - در این فاز بهینهسازیهای مستقل از ماشین که مجموعهای از رولهاست اجرا میشود. به عنوان مثال y:=0*x تبدیل به y:=0 می شود. - براساس GOARCH و GOOS کامپایلر از genssa برای تبدیل ssa به کدهای ماشین استفاده میکند - کدهایی که باقی ماندهاند تبدیل به ابجکت فایل میشود و در نهایت لینکر این آبجکت فایل ها را تبدیل به باینری میکند. این باینری شامل اطلاعات و متادیتای مهمی است که توسط دیباگرها قابل استفاده است به عنوان مثال جدول DWARF به باینری اضافه میشود.
برای کامپایل و لینک میتوان پارامترهای مختلفی تنظیم کرد. gcflags و ldflags این موارد را برای ما انجام میدهد.
کامپایلر گو نهایتا کد ماشین را تولید میکند و CPU توانایی اجرای آن را دارد. سیستم عامل اولین کد را به حافظه میآورد و اولین دستور را در رجیستر Program Counter یا PC مینویسد. و از اینجا به به بعد هسته cpu میتواند دستورات را خط به خط اجرا کند. شاید این کار ساده به نظر بیاید اما با وجود مموری وال باعث میشود همواره در حال ارایه خلاقیت در بهینهسازی سختافزار باشند.
00:00 معماری کامپیوتر
06:18 کامپایل پروژه گو برای پلتفرمهای مختلف
14:50 مراحل اجرای Go Compiler
22:39 کنترل کامپایلر از طریق gcflags و ldflags
มุมมอง: 67
วีดีโอ
آموزش برنامه نویسی به زبان GO - Performance
มุมมอง 41714 ชั่วโมงที่ผ่านมา
در قسمت دهم از آموزش برنامه نویسی به زبان GO به بررسی و تعریف Performance از ابعاد مختلف پرداختیم. به جهان برنامهنویسی پراگماتیک خوش آمدید. جایی که برنامه نویس ها از اهداف پرفورمنس نمیترسند و تغییر در نیازمندیها بدون ترس از افت پرفورمنس اتفاق میافتد و کدبیس ساده میماند اما آیا این امکان پذیر است؟ برای داشتن بهینگی شما بایستی تمرکز را از سرعت و لیتنسی بردارید. بویژه در نرمافزارهای خاص منظ...
OpenTelemetry Demo Project
มุมมอง 23714 วันที่ผ่านมา
در قسمت اول از پلی لیست Observability Engineering پیش از آنکه وارد مفاهیم اصلی شویم از طریق OpenTelemetry Demo Project سعی کردم یک Big Picture از آنچه قرار است به آن برسیم ارایه کردم. پروژه دمو اپن تلمتری یک پروژه ساده ولی خوش ساخت با استفاده از معماری میکرو سرویس است که الزامات مهم Observability در آن لخاظ شده است.
Observability در فضای Cloud Native
มุมมอง 26221 วันที่ผ่านมา
Observability در Cloud Native Observabilityیکی از مفاهیم کلیدی در دنیای Cloud Native است که به تیمهای فنی امکان میدهد سیستمهای توزیعشده پیچیده را بهتر درک کنند و مشکلات را بهسرعت شناسایی و برطرف کنند. در این پلیلیست، به بررسی اهمیت Observability، تفاوت آن با Monitoring و ابزارهای رایج برای پیادهسازی آن میپردازیم. Observabilityچیست؟ به زبان ساده، Observability توانایی مشاهده و تحلیل وضعی...
آموزش جنگو - Django Custom Field
มุมมอง 3434 หลายเดือนก่อน
در این ویدیو از پلی لیست آموزش جنگو و نکتهها و ترفندهای آن به بررسی مفهوم Django Custom Field پرداختیم. ابتدا نوع داده JSONB Array در پستگرس را با یک مثال شرح دادم و سپس یک کاستوم فیلد نوشتیم که بتوان این نوع داده را ذخیره و بازیابی کنیم. سپس یک Custom lookup هم نوشتیم که بتوان داده ها را فیلتر کرد. 00:00 مقدمه 00:52 JSONB Array in PostgreSQL 05:00 Array Field in Django 06:30 Django Custom Fi...
Django Json Field
มุมมอง 3324 หลายเดือนก่อน
سالهاست که ذخیره سازی دادهها به شیوه رابطهای بهترین و رایج ترین شیوه ذخیره سازی است با این وجود در سالهای اخیر و با معرفی مفهوم NoSQL شیوههای دیگری نیز مطرح شده اند که پرکاربردترین آنها Document یا ذخیره داده به شکل JSON است. ابزارهای مختلفی مانند mongodb در این فضا رشد کردهاند اما امروزه اغلب دیتابیسهای رابطهای به شما امکان ذخیره و بازیابی این نوع از دادهها را میدهند و شاید بتوان گفت...
آموزش برنامه نویسی به زبان GO - محاسبه TF در متن
มุมมอง 2974 หลายเดือนก่อน
در قسمت نهم از آموزش برنامه نویسی به زبان GO برای جمع بندی انواع داده به عنوان تمرین عملی محاسبه TF در متن را پیاده سازی کردیم. فراوانی کلمه یا Term Frequency یکی از فاکتورهای بنیادی در پردازش زبان و متن است که کاربردهای گستردهای در Information Retrieval و موتورهای جستجو دارد. 00:00 شرح مساله 02:04 ساخت پروژه 07:25 بررسی کد
آموزش GO - نوع داده struct و کاربردهای آن
มุมมอง 2465 หลายเดือนก่อน
در قسمت هشتم از آموزش برنامه نویسی به زبان GO نوع داده struct و کاربردهای آن را بررسی کردم. برای تعریف نوع جدید در زبان گو از کلمه کلیدی type استفاده می کنیم که دو کاربرد مهم دارد. نخست برای ایجاد alias برای نوعهای موجود که اسم معناداری را به نوعها میتوان اختصاص داد و کاربرد دوم تعریف نوع داده جدید است. در این ویدیو تعریف نوع داده struct و ویژگیهای آن را شرح دادیم و سپس با یک مثال شیوه فراخ...
آموزش GO - نوع داده map و نکتههای آن
มุมมอง 3855 หลายเดือนก่อน
در قسمت هفتم از آموزش GO نوع داده map و نکتههای آن را بررسی کردیم. ابتدا ضرورت وجود این نوع داده و شیوه تعریف و استفاده از آن را شرح دادیم. سپس ساختار داخلی آن را بررسی کردم. در گو هم به مانند سایر زبانهای برنامه نویسی از hash table برای پیاده سازی استفاده شده است. دراین زبان دادهها در مجموعهای از Bucket ها که به فراخور نیاز رشد میکنند ذخیره میشود. دو مورد مهم که بایستی در استفاده از map ...
آموزش GO - کار با Slice و نکتههای آن
มุมมอง 3015 หลายเดือนก่อน
در قسمت ششم از آموزش GO کار با Slice و نکتههای آن را بررسی کردیم. ابتدا تعریف متغیر از نوع اسلایس و ساختار آن در مموری را شرح دادیم. هر متغیر slice در واقع شامل یک هدر یک آرایه است. در هدر جزییات و مشخصات دیتا تعریف و دادهها در درون آرایه ذخیره میشود. سپس دستور make که به ما امکان تعریف اسلایس اما با کنترل بیشتر بر روی هدر می دهد را توضیح دادیم. برای رسیدن به پویایی یعنی اضافه کردن آیتم به ا...
آموزش GO - کار با آرایه ها در گو
มุมมอง 3435 หลายเดือนก่อน
در قسمت پنجم از آموزش GO به بررسی ساختمان داده آرایه و کار با آن پرداختیم. ابتدا شیوه تعریف و مقداردهی آرایه ها را ببرسی کردم. سپس مفهوم Copy Value در کار با آرایه ها در گو را شرح و با پایتون مقایسه کردیم. در گو میتوان آرایه را به شرطی که از یک تایپ باشند با هم مقایسه و ارزیابی کرد. در زبان گو برای حلقههای تکرار صرفا یک دستور for با حالت های مختلف داریم که تعریف انواع مختلف حلفهها را ساده کر...
آموزش GO - انواع داده
มุมมอง 3645 หลายเดือนก่อน
در قسمت چهارم از آموزش GO به بررسی انواع داده در زبان گو پرداختیم. در گو Data Type های مختلفی وجود دارد که اساسی ترین آنها Built-in Type ها یعنی اعداد، رشته و بول است. ابتدا نوع داده رشتهای را تشریح و چالشهای آن بویژه در تغییر و مقایسه آنها را توضیح دادم. بعد از نوع داده بول به بررسی انواع عددی و ویژگیهای آنها بویژه مفهوم Overflow پرداختیم. 00:00 Built-in Data Types in Go 01:40 String in Go...
آموزش GO - تعریف const
มุมมอง 3875 หลายเดือนก่อน
در قسمت سوم از آموزش Go به معرفی مفهوم const و تعریف آن پرداختیم. ابتدا مفهوم literal در زبانها برنامه نویسی را شرح و سپس از معایب Implicit Conversion صحبت کردیم و در نهایت شیوه تعریف const در golang را شرح دادیم. در زبان گو دو نوع const وجود دارد. نوع اول بدون نوع است و میتواند در زمان استفاده نوع خود را دریافت کند و به برنامه نویس امکان implicit conversion می دهد و نوع دوم ثابت های نوع دار ه...
آموزش GO - Type System
มุมมอง 6085 หลายเดือนก่อน
در قسمت دوم از آموزش Go ابتدا به بررسی Type System گو پرداختیم و سپس شیوه تعریف متغیر را در این زبان توضیح دادیم. در نهایت مقدمهای داشتیم بر پوینتر و reflection در این زبان برنامه نویسی. 00:00 معرفی 01:04 Go Type System 04:42 Variable Declaration in Go 07:13 Variable initialization 10:48 Introduction to Pointer in Go 15:41 Introduction to Reflection in Go
آموزش GO - نصب گو و Delve
มุมมอง 8355 หลายเดือนก่อน
در قسمت اول از پلی لیست آموزش Go ابتدا به بررسی مفهوم خوانایی کد و ضرورت آن پرداختیم سپس نصب گو را توضیح و همچنین یکی از دیباگرهای شناخته شده فضای گو به نام Delve را نصب کردیم.
مصاحبه فنی جاوا اسکریپت: Prototype Inheritance
มุมมอง 1916 หลายเดือนก่อน
مصاحبه فنی جاوا اسکریپت: Prototype Inheritance
مصاحبه فنی جاوا اسکریپت: پیاده سازی Event Emitter با تست
มุมมอง 2916 หลายเดือนก่อน
مصاحبه فنی جاوا اسکریپت: پیاده سازی Event Emitter با تست
مصاحبه فنی جاوا اسکریپت: کلمه کلیدی this و کاربردهای آن
มุมมอง 3676 หลายเดือนก่อน
مصاحبه فنی جاوا اسکریپت: کلمه کلیدی this و کاربردهای آن
آموزش پروژه محور جاوا اسکریپت - Capturing and Bubbling
มุมมอง 1906 หลายเดือนก่อน
آموزش پروژه محور جاوا اسکریپت - Capturing and Bubbling
آموزش پروژه محور جاوا اسکریپت - DOM Events
มุมมอง 1956 หลายเดือนก่อน
آموزش پروژه محور جاوا اسکریپت - DOM Events
آموزش پروژه محور جاوا اسکریپت - ایجاد و مدیریت DOM Elements
มุมมอง 2147 หลายเดือนก่อน
آموزش پروژه محور جاوا اسکریپت - ایجاد و مدیریت DOM Elements
آموزش پروژه محور جاوا اسکریپت - پیمایش DOM
มุมมอง 2267 หลายเดือนก่อน
آموزش پروژه محور جاوا اسکریپت - پیمایش DOM
آموزش پروژه محور جاوا اسکریپت - DOM Nodes and Elements
มุมมอง 3147 หลายเดือนก่อน
آموزش پروژه محور جاوا اسکریپت - DOM Nodes and Elements
آموزش پروژه محور رایگان جاوا اسکریپت - DOM چیست؟
มุมมอง 4227 หลายเดือนก่อน
آموزش پروژه محور رایگان جاوا اسکریپت - DOM چیست؟
آموزش پروژه محور رایگان جاوا اسکریپت و DOM
มุมมอง 5957 หลายเดือนก่อน
آموزش پروژه محور رایگان جاوا اسکریپت و DOM
آموزش Docker - بهینه سازی ایمیج های داکر با Multi Stage Build - Part 23
มุมมอง 4647 หลายเดือนก่อน
آموزش Docker - بهینه سازی ایمیج های داکر با Multi Stage Build - Part 23
آموزش Docker - داکر برای برنامهنویسی فرانت اند - Part 22
มุมมอง 5457 หลายเดือนก่อน
آموزش Docker - داکر برای برنامهنویسی فرانت اند - Part 22
آموزش Docker - دستورات COPY و ADD در داکر - Part 21
มุมมอง 2917 หลายเดือนก่อน
آموزش Docker - دستورات COPY و ADD در داکر - Part 21
آموزش Docker - تفاوت CMD و ENTRYPOINT در داکر - Part 20
มุมมอง 3487 หลายเดือนก่อน
آموزش Docker - تفاوت CMD و ENTRYPOINT در داکر - Part 20
Go Compiler 👌
لذت بردم، دم شما گرم.
استاد شما بسیار ارزنده هستید خواهش می کنم زود به زود همین روش ها رو آموزش بدیداستاد شما خیلی خاص هستید استاد لطفا کامل جامع برای ما تدریس کنید واقها از آموزش های تکراری اسکرش و تکراری که هیچ پیشرفتی جز چهار تا سرویس نویسی مزیت نداره لطفا لطفا لطفا مدل پیشرفته تدریس کنید سپاس
فیدبکهای اینچنینی مصممترم میکنه. ممنونم
زور ممنوون🥰
سپاس بو تو
❤❤
بنیادی تدریس کردنتون قابل تحسینه ارادت🫡
ممنونم
Great as always .
Thanks
جدا آدم لذت میبره از نوع آموزشت. صداتون هم مزید بر علته که تا آخر تماشا کنیم.
بنده نوازی فرمودید استاد
@@MicroFrontend ارادت دارم استاد. استفاده میکنیم.
یکی از بهترین ویدیوها، بیشتر افراد پرفورمنس رو سرعت میدونن متاسفانه ، جدا از زبان برنامهنویسی این ویدیو نگرش جدیدی به آدم میده ، پاینده باشید ❤
ممنونم امیدوارم به کار بیاد
Thank you!
Thanks
عالی بود.
ممنونم تشکر از فیدبک و انرژیت
عالی.
ممنونم
عالی.
خیلی ممنون مهندس، عالی بود
ممنونم
عالی.
عالی.
ممنون از شما که در آموزش بسیار دست و دل باز هستین❤❤❤❤
بزرگوارید
@@MicroFrontend ❤❤❤
بخاطر دوره GO سابتون کردم لطفاً ادامش بدید
پلنم اینه که زمستون روش متمرکز باشم
@@MicroFrontend درود
ممنونم، خیلی نیاز داریم که آموزش های Golang را ادامه بدید
این زمستون روش متمرکز میشم
این بخش هایی که به تاریخچه و فلسفه و .... میپردازه برای من خیلی جالب و جذابه. در کنار ویدیوهای کاربردی، بالا بردن دانش نظری و فهم ابزارها حس خوبی میده
کلن برای خودمم جذابه تاریخ. ممنونم
montazer video badi hastam az alan <3
امیدوارم بتونم منظم منتشر کنم
کسی که ری اکت رو تا حدودی یادگرفته،برگرده این ویدیو ها رو نگاه کنه، تازه میفهمه این مطالب چه جواهریه ❤
ممنونم امیدوارم به کار بیاد
بینظیر
ممنونم
حتما باید پایتون کار کرده باشیم یا در هرچیزی لازمه توی همین اموزش گفته میشه ؟
تو این کلاس مخاطبین عموما دات نتی بودن. بیشتر درگیر مفاهیم بودیم تا سینتکس
عالی بود. مرسی
ممنونم
به به زمستان زیبا شد ❤
امیدوارم
Amazing
Thanks
عالی.
تشکر از شما
عالی مثل همیشه.
ممنونم
عالی.
عالی.
عالی.
عالی بود.
چندتا نکته: پروژه Rtk عمرش تموم شده و دیگه maintain نمیشه. داکر و podman رو که به عنوان container runtime معرفی کردید درست نیست. در واقع اونها container client هستن و جفتشون از runC بهعنوان runtime استفاده میکنن البته داکر با یه واسطه به اسم containerd از runC استفاده میکنه که میشه عوضش کرد تا از runtimeهای دیگه مثل gVisor استفاده کنه. البته هنوز بقیه ویدیوها رو ندیدم ولی حدس میزنم قرار که شما یه چیزی شبیه runC رو پیاده سازی کنید.
ممنونم از لطفت فکر کنم قسمت ۱۳ در این مورد صحبت کردم
عالی.
عالی.
مانو نبیت❤
سپاس :)
چرا پلی لیستو ادامه ندادین؟🥲
از هفته بعد ادامه میدم
سلام استاد ، این ویدیو داخل پلی لیست react نیست و ظاهرا جا مانده
ممنون که گفتی ادیت کردم
کاک هیمن ! بسیار ممنون از این محتوای سخاوتمندانه . دقیق و بسیار روان
تشکر از شما امیدوارم به کار بیاد
دستتون درد نکنه ♥️
ممنون
کاش قسمت های بعدی این پلی لیست رو درست میکردین ❤
به مرور حتما
عالی
ممنونم
خوشحالم که پلی لیست جدید رو شروع کردید ❤
ممنونم امیدوارم به سرانجام برسه
اره خداییش خیلی شیکه، من الان دارم Django Saleor رو تحلیل میکنم، ولی احتمال به این switch کنم
تو مقایسه به چیزای خوبی میرسی :)
استاد گرانفدر❤
سلطان بهنام :)
به شدت عالی و مفید؛ واقعا ممنونم❤❤
امیدوارم :)
Observability 👌
👌
قهزای ئهو کوره نازاره
@@MicroFrontend 😔😔