Ditty | دیتی
دیتی | دنیای سادهشدهٔ برنامهنویسی وب https://ditty.ir
Show more3 442
Subscribers
+424 hours
-77 days
+1730 days
- Subscribers
- Post coverage
- ER - engagement ratio
Data loading in progress...
Subscriber growth rate
Data loading in progress...
🔺یک منبع بهروز و پر از آموزش و نکتهٔ برای فرانتاند:
https://frontendmasters.com/guides/front-end-handbook/2024
#links
👍 15🔥 3❤ 1👏 1
🔺تصاویر، فونتها، اسکریپتها و فایلهای یک برنامهٔ فرانتاندی رو چطوری مدیریت کنیم؟ 🤔
- یکی از مهارتهایی که بهعنوان توسعهدهندهٔ فرانتاند باید اون رو بلد باشیم، نحوهٔ مدیریت Asset های برنامه هست
- توی این پست نکتهها و تجربیاتی رو برای مدیریت Asset ها (فایلها و تصاویر و ...) توی برنامههای فرانتاند براتون به اشتراک گذاشتم:
ditty.ir/540
#tips
آشنایی با روشهای مختلف مدیریت Asset ها (فایلها و تصاویر) توی برنامههای فرانتاند
میخوایم با نکتهها و تجربیاتی درباره نحوهٔ مدیریت فایلهای استاتیک مثل تصاویر و ویدئوها و فونتها آشنا بشیم که کمک میکنن یک برنامهٔ فرانتاندی خوانا و قابل توسعه داشته باشیم
❤ 25👍 5🔥 1
سلام دوستان، عیدتون مبارک 👋
- نسخهٔ PDF برای ۸۰ سوال مصاحبهٔ فرانتاند و ۷۰ سوال مصاحبهٔ جاوااسکریپت رو میتونین دانلود کنین 👇
• 80 FE Interview Questions
• 70 JavaScript Interview Questions
#interview
🔥 55❤ 23👍 5🙏 5😍 3💯 1
🔺توی جاوااسکریپت و مبحث پرامیسها، تفاوت متدهای race و any چیه؟ متد all و allSettled چطور؟ 🤔
- این متدها که از Promise به صورت استاتیک قابل دسترس هستن (یعنی مثلاً ()Promise.resolve یا ()Promise.race) کاربردهای زیادی دارن و بهمون کمک میکنن یک برنامهٔ سریعتر و پویاتر داشته باشیم. توی این پست این متدها رو بررسی میکنیم و با مثالهایی از کاربرد اونها توی دنیای واقعی آشنا میشیم:
ditty.ir/537
#javascript
آشنایی با متدهای استاتیک Promise در جاوااسکریپت
یک پرامیس متدهای استاتیک مختلفی داره مثل all و race که توی این قسمت میخوایم با همه اونها آشنا بشیم
❤ 25🔥 2
🔺ترفند ریاکتی
- توی ریاکت وقتی از useState استفاده میکنیم، برای مقدار اولیه اون، بجای پاس دادن مقدار بهصورت مستقیم میتونیم اون رو توی یک کالبک محصور کنیم (مثل عکس)
- توی عکس همونطور که میبینیم، تابعی داریم به اسم heavyCalculation که مثلاً کار سنگینی انجام میده و میخوایم خروجی اون رو به عنوان مقدار useState قرار بدیم
- میتونستیم این کار رو بدون استفاده از کالبک هم انجام بدیم، که توی این حالت باید بدونیم که هر بار که این کامپوننت رندر میشه، تابع پاس دادهشده هم مجدد اجرا میشه. که اگه عملیات ما سنگین باشه باعث افت عملکرد کامپوننت میشه
- حالا وقتی که تابع یا یک عملیات سنگین رو توی یک کالبک محصور میکنیم، ریاکت توی رندر ابتدایی، این کالبک رو اجرا و توی رندرهای بعدی از خروجی این کالبک (که توی رندر ابتدایی محاسبه شده) استفاده میکنه. یعنی فقط یک بار اجرای اون عملیات سنگین
- از این ترفند بهتره زمانی استفاده کنیم که واقعاً عملیات سنگینی داریم که هر بار اجرای اون، عملکرد کامپوننت رو تحت تأثیر قرار میده
- مشاهدهٔ نمونه عملی
#react
👍 62❤ 4🔥 1
سال قبل کلی پیام از شما گرفتم که مشکلات و دغدغههاتون رو با من در میون گذاشتین. اگه بخوام همه این تجربه رو توی یک جمله خلاصه کنم، میشه: «یکمی بیشتر با هم مهربون باشیم»
سال نو همگی دوستان مبارک باشه 👋
#1403
🎉 48❤ 46👎 1🔥 1🕊 1🤷 1
🔺آشنایی با ویژگیهای جدید جاوااسکریپت (ES14)
- توی اکمااسکریپت ١۴ ویژگیهای جالبی رو داریم از جمله چند متد کاربردی مربوط به آرایهها
- توی این پست با این ویژگیها که توی جدیدترین نسخههای جاوااسکریپت و تایپاسکریپت در دسترس هستن آشنا بشیم:
https://ditty.ir/536
#javascript
آشنایی با ویژگیهای جدید جاوااسکریپت (ES14)
ویژگیهای جالبی از ES14 به جاوااسکریپت اضافه شده از جمله متدهای کاربردی مربوط به آرایهها که اونها رو توی این قسمت بررسی میکنیم
🔥 28❤ 8👍 5🤯 2🙏 1
🔺ـReact Strict DOM چیه؟ 🤔
- اگه تجربه توسعه برنامههای موبایلی با React Native رو داشته باشین، میدونین که استفاده از کامپوننتهای ریاکت نسخه وب توی نِیتیو خیلی هم ساده نیست. و باید از یکسری کامپوننتهای خاص استفاده کرد
- مثلاً توی نیتیو نمیتونیم از
div
استفاده کنیم و بجاش باید از المنت View
استفاده کرد
- اما فیسبوک این پکیج (که فعلاً آزمایشی هست) رو چند روز پیش منتشر کرده که اجازه میده کامپوننتهایی داشته باشیم که به قول معروف Universal و عمومیتر هستن و کمک میکنن راحتتر بتونیم از کامپوننتهای موجود بین برنامههای وب و نیتیو استفاده کنیم
- برای مثال بجای استفاده از div
و یا View
، از یک المنت خاص به اسم html.div
استفاده میکنیم. و این ابزار پشت پرده کار تبدیل رو بهصورت خودکار انجام میده
🔗 مشاهده نمونه
#reactGitHub - facebook/react-strict-dom: React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets
React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets - facebook/react-strict-dom
👍 25❤ 2
🔺تجربهٔ مصاحبه
فرض کنین چنین سوالی ازتون پرسیده میشه: «برای شروع یک پروژه چه ابزارهایی رو انتخاب میکنید؟»
- جواب غلط: «من برای شروع یک پروژه از Next.js و GraphQL و تایپاسکریپت و تیلویند و استوریبوک و [+۱۰۰ ابزار دیگه که نشون بدیم چقدر خفن و با کاربلد هستیم]»
- چرا این جواب غلطه؟ چون با حداقل اطلاعات و چشمبسته داریم چنین جوابی رو میدیم و بنابراین نشوندهندهٔ تعصب هست. شما برای شغل ریاکتی اقدام کردین و مصاحبهکننده قطعاً میدونه که شما در حالت عادی از چنین ابزارهایی استفاده میکنین. یک مصاحبهشونده و یک مصاحبهکنندهٔ سالم از تعصب خوشش نمیاد. و تعصب هم یعنی یک همتیمی مغرور و غیر قابل انعطاف.
- جواب درست: «کاملاً بستگی داره. من قبل از شروع پروژه بررسی میکنم که موضوع پروژه چیه، چقدر زمان و بودجه در نظر گرفته شده. در واقع باید ابتدا اولویتها رو بررسی کنیم و همچنین ببینیم افرادی که توی پروژه دخیل هستن چه مهارتهایی دارن. و براساس این اطلاعات حتی شاید مجبور بشیم با ابزارهایی کار کنیم که تابحال تجربهٔ نداشتیم.»
- در واقع بهتره که از تکنیک پست قبل هم استفاده کنین. مثلاً به مصاحبهکننده بگید که «کاملاً بستگی داره» و ازش بخواین که بیشتر توضیح بده. مثلاً:
«راستش بسته به اینکه موضوع پروژه و نیازهای ما چه چیزهایی هستن، ابزارهای متفاوتی رو میشه به کار گرفت. امکانش هست لطفاً بیشتر درباره این موارد توضیح بدین تا جواب بهتری میتونم بدم؟» اون هم مشتاقانه جواب میده «بله بله! البته! ببینید، ... » و شما هم زمان بیشتری بدست میارین تا به سوال فکر کنین و هم جواب مرتبطتری میدین :)
- اگه نهایتاً میخواید ابزار خاصی رو نام ببرید، قبل از مصاحبه باید بدونین که شرکت از چه استکی استفاده میکنه. و جوابتون رو مرتبط با اون استک بدین.
#tips
👍 62❤ 6✍ 1👌 1