🔺تایپ ده انگشتی رو با سایت زیر یاد بگیرین✌🏻

https://www.typingclub.com/

#link #typing #touchtyping

@ProGraphs

🔺Your perfect design in perfect mockup frame 👌🏻

https://frrames.com/

#link #mockup

@ProGraphs

جواب:

1- متغیر‌های preprocessorها به مقادیر معمولی CSS کامپایل می‌شوند. بنابراین برخلاف متغیرهای خود CSS در مرورگرهای قدیمی هم کار می‌کنند.

2- در مقابل، CSS Custom Properties که به عنوان متغیر‌های CSS هم شناخته می‌شوند، نسبت به ساختار html آگاه هستند و cascade می‌شوند. یعنی وقتی یک متغیر را داخل یک انتخابگر تعریف می‌کنیم، این متغیر برای تمام عناصر فرزند آن عنصر هم قابل استفاده است (و نه عناصر والد)

3- متغیر‌های CSS را می‌توانیم با جاوااسکریپت تغییر دهیم.

4- متغیر‌های CSS را می‌توانیم در زمان اجرا تغییر دهیم و مرورگر با توجه به تغییرات انجام شده عملیات repaint را انجام می‌دهد. با استفاده از این ویژگی می‌توانیم کار‌های جالبی از جمله تغییر تم سایت در زمان اجرا انجام دهیم.
در حالی که متغیرهای preprocessorها فقط یک بار تعریف می‌شوند و نمی‌توانیم در زمان اجرا آن‌ها را تغییر دهیم.

در مطالب آینده چند نمونه از کاربرد‌های جالب متغیرهای CSS را بررسی خواهیم کرد.

🔺ابزاری برای ساخت عکس از source code خود در قالبی زیبا ✨

https://www.kodeshot.net/

#link #sourcecode

@ProGraphs

​​فرض کنید می‌خواهیم بررسی کنیم که یک صفحه، بدون یک resource خاص چطور نمایش داده می‌شود.
برای این کار در گوگل کروم (به نحوی که در ویدیو مشاهده می‌کنید)، می‌توانیم یک url خاص را بلاک کنیم تا load نشود.

#quicktip #devtools

@ProGraphs

​​در این کد، یک لیست از عناصر html را با جاوااسکریپت انتخاب کرده‌ایم.
اما وقتی می‌خواهیم عملیاتی روی این لیست انجام دهیم، متوجه می‌شویم که بیشتر متدهای آرایه‌ها برای این لیست وجود ندارند!

دلیل ایجاد این مشکل چیست؟ شما چطور این مشکل را حل می‌کنید؟

#interviewquestion #js

@ProGraphs

🔺 آموزش و دوره‌های طراحی گرافیک با سایت Tutpad ✨

https://www.tutpad.com/

#link #graphic #design #course #tutorial

@ProGraphs

🔺انتشار نسخه 2.6 vue

https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e

#link #vue

@ProGraphs

جواب:

در جاوااسکریپت آبجکت‌هایی وجود دارند که مثل آرایه‌ها رفتار می‌کنند ولی آرایه نیستند! به این آبجکت‌ها Array-Like می‌گویند.

این آبجکت‌ها:
- مانند آرایه‌ها پراپرتی length دارند.
- مانند آرایه‌ها، مقادیر آن‌ها index عددی دارند.
- اما به متدهای آرایه‌ها مثل concat, map, push و ... دسترسی ندارند.

خروجی بعضی از متدهای دستکاری DOM مثل متد querySelectorAll، یک آبجکت Array-Like است.
به همین دلیل با استفاده از متدهای آرایه‌ها نمی‌توانیم عملیاتی روی آن‌ها انجام دهیم (با اینکه یک لیست هستند و می‌توانیم با حلقه for آن‌ها را پیمایش کنیم).

اما چطور می‌توانیم این آبجکت‌ها را به آرایه معمولی تبدیل کنیم تا به متدهای آرایه‌ها دسترسی داشته باشیم؟

روش اول:
استفاده از متد slice (بدون پارامتر)
var arr = Array.prototype.slice.call(arrayLike)

روش دوم:
استفاده از متد Array.from
var arr = Array.from(arrayLike)

روش سوم:
استفاده از spread operator
var arr = [...arrayLike]

اگر می‌خواهید دقیقا بدانید که چرا Array-Likeها به متدهای آرایه‌ها دسترسی ندارند، این مطلب را هم مطالعه کنید: 👇

در یکی از مطالب قدیمی‌تر [[prototype]] را بررسی کردیم و دیدیم که یک مکانیزم برای لینک شدن آبجکت‌ها به یکدیگر است.

حال یک آبجکت به نام Array.prototype وجود دارد که همه‌ی آرایه‌ها به آن لینک شده‌اند و متدهای آرایه‌ها مثل map, forEach و ... در آن وجود دارد.

اما Array-like ها به این آبجکت لینک نشده‌اند. بنابراین به متدهای آرایه‌ها دسترسی ندارند. (البته مرورگرهای مدرن تعداد کمی از این متدها مثل forEach را برای array-likeها هم تعریف کرده‌اند)

🔺CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code ✨

https://webkul.github.io/csspin/

#link #spinner #loader

@ProGraphs

🔺 این سایت به کروم شما قابلیتی اضافه می‌کنه که در صفحه New Tab، به جای یک صفحه خالی، یک نکته کوتاه برنامه‌نویسی ببینین.

https://kutt.it/43V8Dl

‏📌 فعلاً از سوالات مصاحبه کاری و JavaScript و React و PHP و Python و CSS پشتیبانی می‌کنه.

#link #chrome #extension

@ProGraphs

​​به تازگی ویژگی‌های جدید ES2019 برای استانداردسازی تایید شدند و یکی از این ویژگی‌ها، متدهای جدید flat و flatMap هستند.

❗️با استفاده از متد flat می‌توانیم آرایه‌های چند بعدی را flat کنیم:
[1, [2], [3, 4]].flat(); // [1, 2, 3, 4]

❗️همچنین این تابع یک پارامتر اختیاری دریافت می‌کند که مشخص می‌کند آرایه تا چه عمقی flat شود (مقدار پیشفرض این پارامتر 1 است):
[1, [2, [3, [4]]]].flat(2); // [1, 2, 3, [4]]

❗️برای اینکه هر آرایه با عمق دلخواه را کاملا flat کنیم، می‌توانیم Infinity را به عنوان عمق تعریف کنیم:
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]

در تصویر یک نمونه کاربرد عملی از تابع flat را می‌بینید.

#quicktip #js

@ProGraphs

یکی از دوستان این پروژه‌ی Todo List رو به عنوان یه مثال ساده از این ابزارها ساختند:

- React
- Mobx
- Ant Design
- Emotion JS

اگر می‌خواید کار با این ابزار‌ها رو شروع کنید، می‌تونه براتون مفید باشه 👌

https://github.com/iran-react-community/todo-list

​​می‌دانیم که مقادیری که ما برای ویژگی‌های CSS تعیین می‌کنیم، می‌توانند نسبی باشند،‌ نسبت به عنصر والد تعیین شوند، درصدی باشند، اعشاری باشند و ... .

آیا می‌دانید این مقادیر چه پروسه‌ای را طی می‌کنند تا مقدار دقیق اعمال شده روی عناصر محاسبه شود؟

به طور کلی این مراحل را توضیح دهید

#interviewquestion #css

@ProGraphs

🔺 انتشار نسخه 16.8 React

https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

#link #react

@ProGraphs

🔺یه منبع خوب برای دانلود Stock video ✨

https://mixkit.co/

#link #stockvideo #footage

@ProGraphs

جواب:

زمانی که مرورگر استایل‌های ما را دریافت می‌کند، این مراحل را طی می‌کند تا مقدار نهایی هر ویژگی را محاسبه کند:

Cascaded Values:
معمولا با توجه به استایل‌های پیشفرض مرورگر و تعداد زیاد استایل‌ها، چندین استایل برای یک عنصر تعریف می‌شود. در این مرحله مرورگر با توجه به قوانین CSS تصمیم می‌گیرد که کدام‌یک از این استایل‌ها بر روی عنصر اعمال شود.

Specified Values:
در این مرحله اگر مقداری برای یک پراپرتی تعیین نشده باشد، مقدار از عنصر والد ارث‌بری می‌شود و یا مقدار پیشفرض برای آن پراپرتی تعیین می‌شود.

Computed Values:
در این مرحله، مقادیر نسبی به مقادیر مطلق تبدیل می‌شوند. مثلا مقادیری که با واحد em تعریف شده‌اند، با توجه به سایز فونت محاسبه می‌شوند.
همچنین کلمات کلیدی مثل smaller و ... به مقادیر مطلق تبدیل می‌شوند.

‌Used Values:
بعضی از مقادیر با توجه به layout صفحه به مقدار مطلق تبدیل می‌شوند. مثلا مقدار auto برای ویژگی width نمی‌تواند در مرحله قبل محاسبه شود. چون با توجه به layout می‌تواند مقادیر متفاوتی داشته باشد. این مقادیر، در این مرحله تبدیل به مقدار مطلق می‌شوند. (در واقع این مرحله، مکمل مرحله قبل است)

Actual Values:
تا اینجا مقدار مورد نظر به طور کامل محاسبه شده است. اما ممکن است مرورگر محدودیت‌هایی برای نمایش بعضی مقادیر داشته باشد و مجبور به تغییر آن‌ها شود. برای مثال مرورگر قادر به نمایش مقدار اعشاری برای بعضی از ویژگی‌ها نیست و این مقادیر را در این مرحله به مقدار صحیح تبدیل می‌کند. (به همین دلیل است که وقتی مقدار border-width را از 2px به 2.3px تغییر می‌دهیم، تغییری مشاهده نمی‌کنیم!)

یه توضیح کوتاه راجع به اهمیت این مطلب:

حفظ بودن نام این مراحل عملا کمکی به ما نمیکنه (خودم هم حفظ نیستم 😁) و احتمال مطرح شدن این سوال تو یه مصاحبه واقعی هم خیلی کمه.

اما درک کلیت این پروسه کمک می‌کنه که دید خیلی بهتر و عمیق‌تری نسبت به رفتار CSS داشته باشیم.

و در نهایت، عمیق شدن تو مطالب باعث می‌شه که هیچ رفتار CSS برامون خیلی عجیب نباشه، هیچ ابزاری به نظرمون جادویی نباشه، دیباگ کردن برامون ساده باشه و ...

🔺 Hyper, a terminal built on web technologies. 😌

#tool #terminal

@ProGraphs🔺