Ditty | دیتی
3.22K subscribers
190 photos
20 videos
3 files
371 links
دیتی | دنیای ساده‌شدهٔ برنامه‌نویسی وب
https://ditty.ir
Download Telegram
Ditty | دیتی
🔺چقدر با مفاهیم Core Web Vitals آشنایی داری؟
🔺توی این نظرسنجی، بیشتر شرکت‌کننده‌ها درباره Core Web Vitals که یک موضوعِ داغ و مهم توی دنیای امروز فرانت‌اند هست، گفتن اطلاعی ندارن

- خبر خوب اینه که دوست خوبم، صالح فدائی یکی از با دانش‌ترین دولوپرهایی که می‌شناسم، قراره توی یک همایش درباره Core Web Vitals صحبت کنه 👋

- پیشنهاد می‌کنم این همایش رو از دست ندین. برای اطلاعات بیشتر این پست رو ببینین:
https://t.me/quera_ir/1692

- صالح توی گروه دیتی هست. سوالی داشتین توی گروه بپرسین

#frontend
👏122👍2
🔺سوالات مصاحبهٔ فرانت‌اند + جواب اختصاصی

- وقتی مشغول مصاحبه با شرکت‌ها برای شغل جدیدم بودم، لیستی از سوالات و نکته‌هایی که فکر می‌کردم مهم هستن و ممکنه مستقیم یا غیر مستقیم توی مصاحبه‌ها پرسیده بشه رو جایی ذخیره می‌کردم و قبل از هر مصاحبه‌ای اونها رو مرور می‌کردم

- حالا قصد دارم همهٔ اون سوالات رو با توضیحات اختصاصی برای شما هم به اشتراک بذارم. امیدوارم استفاده کنین، توی کارِتون پیشرفت کنین و توی بهترین جاها فعالیت کنین

- این مجموعه که توی اون می‌خوایم حداقل ۸۰ سوال رو بررسی می‌کنیم، به صورت قسمت‌های ۱۰ سوالی منتشر میشه

- قسمت اول این سوالات رو می‌تونین از این لینک ببینین:
ditty.ir/512

- این مجموعه سوالات رو تقدیم می‌کنم به صابر راستی کردار عزیز. به یادش باشیم، براش دعا و ازش حمایت کنیم

#frontend
👍4430🔥11
🔺۸۰ ســوال مصــاحبه فرانـت‌اند با توضیــح اختصـــاصی - قسـمت سوم

- توی این قسمت با چند سوال عمومی و مفهومی از فرانت‌اند، گیت و دنیای نرم‌افزار آشنا می‌شیم:
ditty.ir/521

#frontend #interview
🔥188🎉1
🔺۸۰ ســوال مصــاحبه فرانـت‌اند با توضیــح اختصـــاصی - قسـمت پنجم

- توی این قسمت سوالات زیر رو بررسی می‌کنیم:

۴۱‍. توی تایپ‌اسکریپت Type و Interface چه تفاوت‌هایی با هم دارن؟
۴۲. درباره Core Web Vitals چی می‌دونید؟
۴۳. کاربرد Event Delegation توی جاوااسکریپت چیه؟
۴۴. منظور از CORS چیه؟
۴۵. توی تایپ‌اسکریپت عبارت keyof typeof [value] رو توضیح بدید
۴۶. توی CSS واحدهای rem و em چه فرقی با هم دارن؟
۴۷. دستور git stash چه کار می‌کنه؟
۴۸. کلمه‌کلیدی infer توی تایپ‌اسکریپت چه کار می‌کنه؟
۴۹. چرا می‌گیم ماژول‌های جاوااسکریپت Singleton هستن؟
۵۰. منظور از Progrssive Enhancement توی توسعهٔ برنامه‌های فرانت‌اند چیه؟

👉 ditty.ir/523

* پ.ن: لطفاً از کانال حمایت کنین 😉

#frontend #interview
😍30👍7👏3👌1🆒1
Ditty | دیتی
🔺۸۰ ســوال مصــاحبه فرانـت‌اند با توضیــح اختصـــاصی - قسـمت پنجم - توی این قسمت سوالات زیر رو بررسی می‌کنیم: ۴۱‍. توی تایپ‌اسکریپت Type و Interface چه تفاوت‌هایی با هم دارن؟ ۴۲. درباره Core Web Vitals چی می‌دونید؟ ۴۳. کاربرد Event Delegation توی جاوااسکریپت…
🔺۸۰ ســوال مصــاحبه فرانـت‌اند با توضیــح اختصـــاصی - قسـمت ششم 💯

توی این قسمت می‌خوایم سوالات زیر رو بررسی کنیم 😉

۵۱. منظور از Call Stack توی جاوااسکریپت چیه؟
۵۲. منظور از Narrowing توی تایپ‌اسکریپت چیه؟
۵۳. چه زمانی استفاده از WebSocket مناسب نیست؟
۵۴. درباره پراپرتی Position توی CSS چه چیزهایی می‌دونین؟
۵۵. چطوری المنتی داشته باشیم که با تغییر border و padding اون طول و عرض اون ثابت بمونه؟
۵۶. از پروتوتایپ توی جاوااسکریپت چی می‌دونید؟
۵۷ـ Authorization و Authentication چه فرقی با هم دارن؟
۵۸. منظور از عملیات Non-Blocking I/O توی جاوااسکریپت چیه؟
۵۹ـ Virtual DOM چیه؟
۶۰. منظور از Pseudo-elements و Pseudo-classes توی CSS چیه؟

مشاهده از این لینک:
ditty.ir/524

#frontend #interview
👍243🔥3🎉2🆒1
Ditty | دیتی
🔺۸۰ ســوال مصــاحبه فرانـت‌اند با توضیــح اختصـــاصی - قسـمت ششم 💯 توی این قسمت می‌خوایم سوالات زیر رو بررسی کنیم 😉 ۵۱. منظور از Call Stack توی جاوااسکریپت چیه؟ ۵۲. منظور از Narrowing توی تایپ‌اسکریپت چیه؟ ۵۳. چه زمانی استفاده از WebSocket مناسب نیست؟ ۵۴.…
🔺۸۰ ســوال مصــاحبه فرانـت‌اند با توضیــح اختصـــاصی - قسـمت هفتم

توی این قسمت با سوالات زیر آشنا می‌شیم:

۶۱. المنت Template توی HTML برای چه کاری هست؟
۶۲. منظور از HOF توی جاوااسکریپت چیه و چه مزایایی داره؟
۶۳ـ URL و URI چه فرقی با هم دارن؟
۶۴. توی CSS چه زمانی Grid رو به Flexbox ترجیح بدیم؟
۶۵. از TDZ توی جاوااسکریپت چی می‌دونید؟
۶۶. چرا پیشنهاد میشه از حلقهٔ for...in جاوااسکریپت استفاده نکنیم؟
۶۷. چه زمانی از تگ section توی HTML استفاده نکنیم؟
۶۸. از Web Components چی می‌دونید؟
۶۹. توی CSS منظور از Specificity چیه و چه قوانینی داره؟
۷۰. چه زمانی از اتریبیوت‌های defer و async روی تگ script استفاده کنیم؟

از این لینک ببینید:
ditty.ir/525

#frontend #interview
🔥226👌3😍1
🔺با ۳ معیار اصلی Core Web Vitals آشنا بشیم

ـ Core Web Vitals به ۳ معیاری گفته میشه که گوگل از اونها برای سنجش عملکرد و کیفیت یک صفحهٔ وب استفاده می‌کنه

- گوگل با این ۳ معیار در واقع UX (تجربهٔ کاربری) یک صفحه رو اندازه‌گیری می‌کنه و وب‌سایتی که بتونه امتیاز بهتری از این سنجش‌های گوگل بدست بیاره، به این معنی هست که کاربران این وبسایت در مقایسه با رقبا احساس راحتی بیشتری دارن و در نتیجه گوگل توی رتبه‌بندی صفحهٔ سرچ اهمیت بیشتری برای این وبسایت قائل هست

- توی پست زیر می‌خوایم درباره Core Web Vitals صحبت کنیم و به طور کلی با ۳ معیاری آشنا بشیم که گوگل برای رتبه‌بندی وبسایت‌ها روی اونها حساب ویژه‌ای کرده:
ditty.ir/529

#frontend
🔥5👍2
🔺معیار CLS توی Core Web Vitals

- معیار CLS اولین معیار از Core Web Vitals هست که برای بررسی کردن پایداری المنت‌ها توی یک صفحه هنگام لود شدن استفاده میشه. به قول معروف Visual Stability که توی این پست مفصل با اون آشنا می‌شیم:

ditty.ir/532

#frontend
👏83
🔺 توی برنامه‌های فرانت‌اندی، آیا تفاوت Building و Bundling رو می‌دونیم؟ 🤔 تفاوت Minify و Uglify چطور؟

- توی این پست دیتی می‌خوایم ۶ واژه که شبیه به هم هستن رو بررسی کنیم:
ditty.ir/543

#frontend
👍254
🔺با HTTP Caching و نحوهٔ کارکرد اون توی مرورگر آشنا بشیم

- توی این پست می‌خوایم با چند هدر HTTP آشنا بشیم که بطور اختصاصی برای Caching و مدیریت ذخیره‌سازی اطلاعات استفاده میشن

- این تکنیک با حذف کردن درخواست‌های HTTP اضافی، استفاده از پهنای باند رو به شکل قابل توجهی کاهش میده که نتیجهٔ اون افزایش سرعت و عملکرد برنامه‌های فرانت‌اندی هست

- جدیدترین پست دیتی:
ditty.ir/545

#frontend
👍116👌2
🔺سرویس‌ ورکر (Service Worker) چیه؟ 🤔

- سرویس ورکر به اسکریپت‌هایی گفته میشه که پشتِ پردهٔ برنامه‌های فرانت‌اندی اجرا میشن. به طوری که کاربر و Main Thread وجود اونها رو حس نمی‌کنه

- با سرویس‌ورکرها می‌تونیم:

• به شکل حرفه‌ای ریسورس‌ها رو کش کنیم و برنامه‌های آفلاین داشته باشیم
• عملیات و پردازش‌های سنگین انجام بدیم
• به کاربرا Push Notification ارسال کنیم
• و ...

- مهمترین هدف سرویس‌ورکر کم کردن حجم کارهای Main Thread هست. کارهایی که باعث افت کیفیت و سرعت برنامه‌های ما می‌شدن

- توی این قسمت می‌خوایم با سرویس‌ورکرها آشنا بشیم و ببینیم که چطوری می‌تونیم از این تکنیک برای Cache کردن ریسورس‌هامون استفاده کنیم:
ditty.ir/546

#frontend
25👍13🔥3
🔺ـ Subresource Integrity چیه؟ 🤔

- اگه ریسورس‌های یک صفحه (اسکریپت‌ها، استایل‌ها و ...) رو از یک منبع خارجی (مثلاً CDN) لود می‌کنیم، یه نکته امنیتی مهم رو باید در نظر داشته باشیم

- وقتی یه اسکریپت توی صفحه لود میشه، می‌تونه به همهٔ اطلاعات صفحه دسترسی داشته باشه. و اگه مثلاً اون CDN هک بشه، هکر می‌تونه محتویات ریسورس رو دستکاری کنه به‌طوری که به‌راحتی می‌تونه اطلاعات هر کاربری رو بخونه

- برای جلوگیری از این اتفاق، مرورگرها یک قابلیت امنیتی دارن به اسم Subresouce Integrity یا به‌طور خلاصه SRI

- توی این پست با این ویژگی و نحوهٔ پیاده‌سازی اون بیشتر آشنا می‌شیم:
ditty.ir/587

#frontend
21🔥7