​​​​📌 بایگانی‌ Roadmap های مختلف:

✅ نقشه‌ راه برای Web developer شدن در سال 2018
https://t.iss.one/ProGraphs/49
✅ نقشه‌ راه برای توسعه‌دهنده حرفه‌ای React شدن در سال 2018
https://t.iss.one/ProGraphs/64
✅ نقشه‌ راه برای توسعه‌دهنده حرفه‌ای Vue شدن در سال 2018
https://t.iss.one/ProGraphs/72
✅ نقشه‌ راه برای UI/UX Designer شدن
https://t.iss.one/ProGraphs/102
✅ نقشه‌ راه برای توسعه‌دهنده حرفه‌ای Angular شدن در سال 2018
https://t.iss.one/ProGraphs/104

🌹 این مطلب رو با دوستان خود به اشتراک بگذارید. 🌹

#archive #roadmap

@ProGraphs

​​احتمالا دقت کردید که برای ایجاد گرادینت در CSS باید گرادینت را در راستای شکلی خاص مانند خط (linear) یا دایره (radial) تعریف کنیم.

اما با ترفندی که در تصویر می‌بینید می‌توانیم با ترکیب چند گرادینت و blend-mode گرادینتی بدون شکل واضح درست کنیم‌ (مثل گرادینتی که احتمالا در صفحه ورود اینستاگرام دیدید)

#quicktip #css #trick

@ProGraphs

آیا با data attribute ها در html آشنا هستید؟
کاربرد آن‌ها چیست؟

#interviewquestion #html

@ProGraphs

​​قالب های Landing Page رایگان برای استارت‌آپ‌ها 🎉

https://cruip.com/

#link #landingpage #template

@ProGraphs

​​یه کوتاه کننده لینک عالی 👌🏻🎉

https://kutt.it/

#link #urlshortener

@ProGraphs

جواب:

برای ذخیره‌ی دیتای مختص به یک عنصر از data-attribute ها استفاده می‌کنیم.

در html برای کنترل بعضی از ویژگی‌های عناصر attribute هایی تعیین شده است مثلا برای تعیین آدرس یک لینک از href استفاده می‌کنیم. اما اگر بخواهیم ویژگی جدیدی برای عناصر پیاده سازی کنیم که از قبل در html تعیین نشده می‌توانیم این مقدار را به کمک جاوااسکریپت و data-attribute ها پیاده کنیم.

برای مثال فرض کنید می‌خواهیم مکانیزم نمایش alert در صفحه را پیاده سازی کنیم:

چندین عنصر alert در صفحه داریم که هر کدام باید مدت زمان خاصی نمایش داده شوند و بعد به صورت خودکار از صفحه حذف شوند. برای کنترل مقدار زمانی که هر alert در صفحه می‌ماند به این شکل عمل می‌کنیم:

<div class="alert" data-timeout="2000">
     alert!
</div>

در مرحله بعد در جاوااسکریپ از مقدار data-timeout استفاده می‌کنیم و پس از زمان تعیین شده عنصر را از صفحه حذف می‌کنیم.

​​بر خلاف تصور اکثر دولوپر‌ها جاوااسکریپت در مرورگر‌های مدرن به صورت مفسری اجرا نمی‌شود و کد جاوااسکریپت قبل از اجرا کامپایل می‌شود.

اما کد کامپایل شده جاوااسکریپت را برخلاف زبانی مثل جاوا منتشر نمی‌کنیم و فقط خود مرورگر برای optimize کردن کد، قبل از هر بار اجرا آن را کامپایل می‌کند. به این روش JIT یا Just-in-time compilation گفته می‌شود.

البته در عمل مرورگر‌ها قبل از اجرای کد زمان کافی برای کامپایل کردن تمام و کمال کد ندارند و مجبور به استفاده از تکنیک‌های پیچیده‌تری هستند که در این مقاله می‌توانید مطالعه کنید:

https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/

#quicktip #js

@ProGraphs

کلی Theme برای VSCode بازها ✌🏻✨

https://vscodethemes.com/

#link #vscode #editor #ide

@ProGraphs

آیا با مفهوم hoisting در جاوااسکریپت آشنا هستید؟
نحوه عملکرد آن را توضیح بدید

#interviewquestion #js

@ProGraphs

بالاخره نتایج امسال هم مشخص شدند.
حتما ببینید 👌

https://2018.stateofjs.com/

#link #statistics #js

@ProGraphs

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

https://virgool.io/@abolfazlillustray920/web-accessibility-capglgmj5tzk

#link #accessibility

@ProGraphs

جواب:

کد زیر را در نظر بگیرید:

proGraphs = 20;
var proGraphs;
console.log(proGraphs); //20

در خط اول مقدار متغیر را تعیین کرده‌ایم در حالی که تعریف متغیر در خط بعدی است!
دلیل درست کار کردن این کد مفهوم hoisting است. در جاوااسکریپت تعریف متغیر‌ها (فقط تعریف و نه مقداردهی) و توابع به بالای scope منتقل می‌شود و سپس بقیه کد اجرا می‌شود. به این ترتیب تعریف متغیر proGraphs قبل از مقداردهی به آن انجام می‌شود با اینکه در خط پایین‌تر قرار دارد.

و اما چرا این اتفاق می‌افتد و نحوه عملکرد hoisting چیست؟ (خیلی مهم)

در مطالب قبلی اشاره کردیم که کد جاوااسکریپت در مرورگر‌های مدرن قبل از اجرا کامپایل می‌شود.
در واقع تعریف متغیر‌ها و توابع در زمان کامپایل کد انجام می‌شود و مقداردهی و استفاده از آن‌ها در زمان اجرا. به این ترتیب تعریف متغیر و مقداردهی به آن در دو زمان کاملا متفاوت (هر چند خیلی سریع)‌ انجام می‌شود.
در حقیقت hoisting فقط یک مفهوم ذهنی است و این کامپایل شدن کد است که باعث می‌شود به متغیر‌ها و توابع قبل از تعریف دسترسی داشته باشیم.

(همچنین متغیر‌هایی که با let و const تعریف می‌شوند hoist نمی‌شوند)

یه منبع عالی برای درک عمیق hoisting و نحوه کامپایل شدن کد جاوااسکریپت:

https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch4.md

​​مجموعه‌ای از پالت‌های رنگی عالی 🎉👌🏻

https://colordrop.io/

#link #color

@ProGraphs

​​در مطالب قبلی اشاره کردیم که انجین جاوااسکریپت در مرحله‌ی کامپایل کد، متغیر‌های موجود در هر scope را تعریف می‌کند و سپس کد اجرا می‌شود.

به این ترتیب چند بار تعریف کردن یک متغیر کاملا نادیده گرفته می‌شود و هیچ تاثیری بر مقدار متغیر نخواهد داشت. (به کد تصویر دقت کنید).

همچنین اگر متغیری که با let تعریف می‌کنیم قبلا تعریف شده باشد، error دریافت می‌کنیم.

#quicktip #js

@ProGraphs

ببینید با css grid چی کار کرده 😁👌

https://codepen.io/andybarefoot/pen/ypPgod

#link #css

@ProGraphs

این کلاس CSS برای زیاد کردن فاصله‌ی خطوط متن نوشته شده است.
آیا مشکلی در این کد می‌بینید؟ روش بهتری برای این کار می‌شناسید؟

#interviewquestion #css

@ProGraphs

​​یه مجموعه موسیقی مخصوص برنامه نویسی!

https://musicforprogramming.net/

#link #music #concentration

@ProGraphs

​​30 Seconds of CSS: Useful CSS Snippets You Can Understand Quickly 👌🏻✨

https://30-seconds.github.io/30-seconds-of-css/

#link #css

@ProGraphs

جواب:

زمانی که از مقدار درصدی برای تعیین line-height استفاده می‌کنیم این مقدار به صورت درصدی از سایز فونت عنصر محاسبه می‌شود و فرزند عنصر دقیقاً همین مقدار را به ارث می‌برد.

حالا مشکلی که پیش می‌آید این است که اگر سایز فونت فرزند این عنصر خیلی بزرگ‌تر یا کوچک‌تر باشد. دیگر مقدار line-height محاسبه شده برای آن مناسب نخواهد بود.

روش بهتر استفاده از مقدار بدون واحد است. مثلا line-height: 1.5
به این ترتیب مقدار line-height برای هر عنصر، 1.5 برابر سایز فونت همان عنصر خواهد بود و متناسب با سایز فونت هر عنصر به درستی تطبیق میابد.