جواب این سوال رو تو این مقاله خیلی کامل‌تر بررسی کردیم:

https://vrgl.ir/91qbf

State of JS 2019 🎉

https://2019.stateofjs.com/

#statistics #js

​احتمالا دقت کرده‌اید که وقتی می‌خوایم یه پراپرتی CSS رو تو حالت hover یا ... تغییر بدیم، مجبوریم اون پراپرتی رو دوباره با مقادیر جدید تکرار کنیم.

اما حالا با متغیرهای CSS و تابع calc میتونیم بدون تکرار کردن دوباره‌ی پراپرتی‌ها، بین دو مقدار switch کنیم. به عنوان مثال:

transform: rotate(calc(var(--i) * 45deg));
top: calc(var(--i) * 10px);

توی این کد اگر متغیر i = 0 باشه، عنصرمون rotate و top نداره.
حالا برای اینکه عنصر رو 45deg بچرخونیم و top 10px بهش بدیم، فقط کافیه مقدار متغیر i رو 1 کنیم!

دقت کنید که تو این ترفند داریم از ویژگی live بودن متغیرهای CSS استفاده می‌کنیم. پس با متغیرهای SASS نمیتونیم این کار رو انجام بدیم.

برای مقایسه‌ی بهتر، توی ویدیو پراپرتی‌های transform و background رو با استفاده از این ترفند (بدون تکرار کردن کردن پراپرتی‌ها) تغییر میدیم.

#quicktip #css #trick #dry

@ProGraphs

​میدونیم که تغییر پراپرتی box-shadow با CSS جزو انیمیشن‌های نسبتا سنگین محسوب میشه و میتونه باعث کند شدن انیمیشن بشه.

اما با یه ترفند جالب میتونیم box-shadow یه عنصر رو خیلی روان‌تر animate کنیم.
به این صورت که یه pseudo element به اندازه‌ی خود عنصر تعریف میکنیم و box-shadow رو به این pseudo element میدیم. حالا کافیه opacity این pseudo element رو تغییر بدیم (به کد داخل عکس دقت کنید).

در واقع با این ترفند به جای پراپرتی box-shadow، پراپرتی opacity رو تغییر دادیم (animate کردن پراپرتی opacity برای مرورگر ساده‌تره)

کد کامل این ترفند رو میتونید اینجا ببینید.

ترفندهای مشابه برای تغییر بهینه‌تر طول و عرض عنصر هم وجود داره که در مطالب بعدی بررسی میکنیم :)

#quicktip #css #performance #trick

@ProGraphs

توی این ویدیو هم مشخصه که عنصر قرمز، مرورگر رو در طول انیمیشن مجبور به انجام عملیات paint میکنه اما انیمیشن عنصر سبز بهینه‌تر اجرا میشه.

هومن هاتفی مدیر طراحی اسنپ و اسنپ تریپ و مدرس طراحی محصول در مدرسه‌ی اینورس قراره امشب ساعت ۹ وایرفریم بزنه و استریم کنه! از دست ندین 👇🏻

www.twitch.tv/h8man13

⚠️ وی‌پی‌ان تون رو روشن کنین :)

🔺 بقیه‌ی رفقای طراح‌تون رو هم با خبر کنین و تک خور نباشین. 😂

کانال @ProGraphs رو هم دنبال کنین.

🔺LIVE🔺
همین الان با هومن هاتفی مدیر طراحی اسنپ و اسنپ تریپ و مدرس طراحی محصول در مدرسه‌ی اینورس با موضوع Random Cafe Bazzar app redesign همراه باشین 👇🏻

www.twitch.tv/h8man13

⚠️ یادتون نره وی‌پی‌ان تون رو روشن کنین :)

🔺 باز هم بقیه‌ی رفقای طراح‌تون رو هم با خبر کنین 😉

کانال @ProGraphs رو هم دنبال کنین.

این مقاله‌ی کامل و عالی eddie رو از دست ندید 👌

https://vrgl.ir/d7bFp

#article #react #concurrent

توی این کد سعی میکنیم درخواستی به سرور بفرستیم و اگر درخواست fail شد، بعد از 100ms دوباره این کار رو تکرار میکنیم.

اما بعد از اجرا شدن این پروسه به مدت طولانی، متوجه memory leak میشیم.
آیا میتونید این مشکل رو پیدا و حل کنید؟
(عکس ویرایش شد)

#question #js #promise #memoryleak

@ProGraphs

​Translate CSS selectors into plain English!

https://hugogiraudel.github.io/selectors-explained/

#tool #css

@ProGraphs

جواب:

میدونیم که برای انجام یک تسک async داخل promise chain میتونیم از یکی از تابع‌های then، یک پرامیس return کنیم:

fetch(url)
.then(data => new Promise(resolve => setTimeout(resolve, 1000)))
.then(() => {})

دوباره به خط سوم کد سوال دقت کنید،
بعد از هربار fail شدن درخواست، توی then، دوباره fetchWithRetry رو صدا میکنیم که یه پرامیس برمیگردونه.
در واقع با این کار پشت سر هم پرامیس‌های جدید به انتهای این promise chain اضافه میکنیم و نتیجه میشه یه promise chain بینهایت که تا زمانی که درخواست با موفقیت فرستاده نشه، garbage collected نمیشه!

برای حل این مشکل کافیه توی خط 3 نتیجه‌ی تابع getWithRetry رو از then ریترن نکنیم.
توضیح کامل‌تر این مشکل رو میتونید اینجا بخونید.

پادکست طبقه ۱۶ – پادکستی به میزبانی سهیل علوی، بنیانگذار استارت‌آپ ریحون در تورنتو

اپیزود ۱ - گفتگو با محسن ملایری:
https://youtu.be/DiXfC6R22vE
اپیزود ۲ - بورس ایران | کیاوش کاویانی:
https://youtu.be/WNVmGwS6N8I
اپیزود ۳ - تجربه جذب سرمایه برای استارتاپ | سیاوش محمودیان:
https://youtu.be/kf87HRTP2Lk
اپیزود ۴ - عملگرایی | بهروز حریری:
https://youtu.be/txnw-qFYfsQ

پ.ن: انقدر پادکست جذاب و متفاوتی بود که دلم نیومد باهاتون به اشتراک نذارم. شما هم با دوستاتون به اشتراک بگذارین :)

سایت‌هایی که زمان‌های خالی افراد رو می‌گیرن و تایم برای جلسه پیشنهاد می‌دن:

https://www.when2meet.com/
https://doodle.com/en/
https://calendly.com/

@ProGraphs

ساعت ۷ شب به وقت تهران یک لایو خیلی جذاب در یوتیوب خواهیم داشت! نهایت سعیم رو می‌کنم که روی آپارات هم بالا بیاد.

لینک لایو: https://www.youtube.com/watch?v=CprMv3iaJek&feature=youtu.be

توی این قسمت می‌خوایم ادامه پروژه‌ای که فرانت‌اندش رو دیروز زدیم رو بریم. برای پیاده سازی بک‌اند از Node.js استفاده می‌کنیم بر پایه چارچوب NestJS.
با React به GraphQL متصل خواهیم شد و از JWT برای Authentication استفاده می‌کنیم.
ظاهر قبلا در Figma طراحی شده و از Chakra UI برای پیاده‌سازیش استفاده خواهیم کرد.

اگر لایو قبلی رو که برای پیاده‌سازی فرانت‌اند بودرو ندیدید بهتره قبل از لایو امشب ببینیدش:
https://www.youtube.com/watch?v=IgJaDUEvvsA

لینک جدید برای لایو:
https://www.youtube.com/watch?v=I9Nt95NSyb8

مجموعه‌ای از برگه تقلب‌های برنامه‌نویسی 🔥

وقتی چیزی رو یادتون نمیاد می‌تونین خیلی سریع نحوه‌ی نوشتن اون دستوری که می‌خواین رو از اینجا پیدا کنین.

https://devhints.io/

@ProGraphs

هزینه‌ی اضافه کردن npm package ی که می‌خواین به پروژه‌تون اضافه کنین رو از سایت زیر ببینین 👇🏻

https://bundlephobia.com/

@ProGraphs

🔥 طراحی وب رو از کجا شروع کنم؟

هر کدوم از ما روز اولی که می‌خواستیم طراحی وب رو شروع کنیم، اولین سوالی که داشتیم این بوده که خب از کجا شروع کنم؟ دنبال چه سرنخی باید برم و دنبالش بگردم؟ کدوم منبع بهتره؟ و ...

به نظرم ویدیو‌های سیاوش که توی چنل یوتیوب‌اش منتشر می‌کنه فوق‌العاده خوبه 👌🏻(طبعا رایگان هم هست :) )
به این علت که از همون اول در قالب پروژه شروع می‌کنه آموزش دادن و هر جا هم که نیاز بود مبحثی رو توضیح بده، نکات اون مبحث رو می‌گه.

https://youtu.be/h4QQ4gD0yek

در کنار ویدیو‌های سیاوش، این دو تا سایت هم می‌تونه بهتون کمک کنه 😉

- https://www.w3schools.com/
- https://css-tricks.ir/reading-list/

@ProGraphs

کنار این منابع جانبی، javascript.info هم منبع خوبیه. ✌🏻

https://javascript.info/

ممنون از Eddie عزیز بابت معرفی این سایت
@ProGraphs