🔺یه ابزار مدیریت پروژه خفن 👌🏻

https://kutt.it/vQ58Y6

#link #projectmanagement #software

@ProGraphs

​در یکی از مطالب قدیمی‌تر تفاوت پراپرتی‌های transform و left/right را برای ایجاد انیمیشن در CSS بررسی کردیم. و دیدیم که مرورگر برای render کردن تغییرات در صفحه، چند مرحله (style - layout - paint - composite) را طی می‌کند.

اما در بعضی شرایط، تغییر ظاهر یک عنصر، بر روی سایر عناصر هم تاثیر می‌گذارد و مرورگر را مجبور به انجام محاسبات اضافه برای سایر عناصر می‌کند.

با استفاده از پراپرتی جدید contain در CSS می‌توانیم عملیات style و layout و paint را فقط به یک بخش از صفحه محدود کنیم.

https://developers.google.com/web/updates/2016/06/css-containment

#quicktip #css #performance

@ProGraphs

منظور از "callback hell" در جاوااسکریپت چیست؟ چه زمانی این اتفاق می‌افتد؟ راه حل این مشکل چیست؟

#interviewquestion #js

@ProGraphs

🔺به کمک سایت زیر می‌تونین ببینین رنگ پس‌زمینه‌ی انتخابی با رنگ متن و عکس‌های دلخواه شما چقدر Contrast دارند.

https://color.review/

#link #tool #color #contrast

@ProGraphs

🔺eCommerce Website Design Gallery & Tech Inspiration ✨

https://ecomm.design/

#link #Inspiration #ecommerce #design

@ProGraphs

جواب:

معمولا برنامه‌های جاوااسکریپتی ما، از نظر زمانی به قسمت‌های مختلف تقسیم می‌شوند. مثلا زمانی که نتیجه‌ی یک درخواست را از سرور دریافت می‌کنیم. یا زمانی که کاربر بر روی یک دکمه کلیک می‌کند.
یکی از پترن‌ها برای انجام عملیات async در جاوااسکریپت، callbackها هستند:

setTimeout(() => {
    doSomething();
}, 1000);

همچنین برای انجام عملیات به صورت مرحله مرحله، مجبور می‌شویم callbackهای مختلف را داخل هم nest کنیم که به عنوان "callback hell" شناخته می‌شود.

اما آیا تنها مشکل callbackها nest شدن آن‌ها داخل هم و کاهش خوانایی کد است؟
خیر! callbackها مشکلات پایه‌ای و مهم‌تری هم ایجاد می‌کنند.

برای مثال با توجه به اینکه callback را به یک تابع دیگر ارسال می‌کنیم و تابع مورد نظر، callback را صدا می‌کند، عملا کنترل callback از دست ما خارج می‌شود. در نتیجه ممکن است تابع مورد نظر، callback را بیش از یک بار صدا کند، اصلا صدا نکند و یا حتی گاهی به صورت async و گاهی به صورت synchronous صدا کند.
همچنین این مساله مشکلاتی در زمینه separation of concerns ایجاد می‌کند.

یکی از راه حل‌های این مشکلات، promiseها هستند که اکثر این مشکلات را حل می‌کنند.

برای مثال promiseها فقط یک بار می‌توانند resolve شوند. به این ترتیب، مشکل بیش از یک بار صدا شدن callbackها را حل می‌کنند.

همچنین در کار با promiseها، کنترل ادامه‌ی برنامه، به یک تابع دیگر داده نمی‌شود، بنابراین مشکلات مربوط به separation of concerns تا حد زیادی حل می‌شوند.

این سوال رو بیش‌تر به عنوان مقدمه‌ای برای مباحث مربوط به برنامه‌نویسی async در جاوااسکریپت مطرح کردیم.

تو مطالب بعدی به مرور مفاهیم پایه‌ای‌تر async مثل concurrency, event loop, micro/macro tasks و ... رو بررسی می‌کنیم و دوباره به این سوال برخواهیم گشت 😉

​در گوگل کروم می‌توانیم برای زمانی که attribute یک عنصر تغییر می‌کند، breakpoint تعریف کنیم.

به این ترتیب مثلا می‌توانیم بررسی کنیم که یک افکت، دقیقاً در چه قسمتی از کد و چطور پیاده‌سازی شده است!

#quicktip #devtools

@ProGraphs

تاریخچه‌ی کوتاهی از GraphQL از زبان یکی از سازنده‌هاش!

https://youtu.be/F-OizdRJh1U

#link #talk #graphql

@ProGraphs

🔺Figma Freebies - Free UI Kits & Figma Resources 🎉

https://www.figmafreebies.com/

#link #figma #freebie #resource

@ProGraphs

سال نو همگی مبارک 🌹

تو 2/3 روز آینده، خبرای خوبی داریم 😉

بالاخره بعد از یه وقفه‌ی نسبتا طولانی تغییراتی که قولش رو داده بودیم شروع کردیم 😉:

نسخه‌ی اولیه سایت از امروز آماده‌اس!

البته سایت رو با الهام از Brendan Eich تو 10 روز آماده کردیم😅
و حتما (فعلا) بدون ایراد و کامل نیست!

www.prographs.ir

فعلا دو قسمت آرشیو منابع مفید و سوالات مصاحبه تو سایت هست که به مرور کامل‌تر می‌شوند.

تو قسمت آرشیو منابع، شما می‌تونید لینک ابزارها و سایت‌های مفیدی که می‌شناسید رو برای ما بفرستید تا به مرور یه آرشیو ارزشمند از منابع تهیه بشه ✌️

میتونید وب سایت/اپلیکیشن ProGraphs رو روی دستگاهتون نصب کنید تا به بعضی قسمت‌ها به صورت آفلاین دسترسی داشته باشید.

(تو ویدیو نصب شدن سایت/اپلیکیشن روی mac, android, windows, ios رو می‌بینید)

به لطف Background Sync می‌تونید زمانی که به اینترنت متصل نیستید هم لینک‌هاتون رو تو سایت ثبت کنید تا هر وقت دوباره متصل شدید برای ما ارسال شوند.

بعد از نصب، می‌تونید یک لینک رو مستقیما از appهای نیتیو (مثل یوتیوب) با ما share کنید!

(فعلا فقط اندروید و گوگل کروم 71+)

و از امروز در کنار مطالب کانال، به صورت منظم توی صفحه‌ی اینستاگرام هم آموزش‌های ویدیویی کوتاه خواهیم داشت.

instagram.com/prographs