🔺 بهبود تمرکز و افزایش بهره‌وری با صدای پس‌زمینه ✨
صدا‌های مختلف را ترکیب کنید و بهترین محیط خودتان را بسازید. 👌🏻
https://www.noisli.com/
#link #focus #productivity #noise
@ProGraphs
صدا‌های مختلف را ترکیب کنید و بهترین محیط خودتان را بسازید. 👌🏻
https://www.noisli.com/
#link #focus #productivity #noise
@ProGraphs
Noisli
Noisli - Background Noise Generator and Ambient Sounds for Focus, Sleep and Relaxation
Listen to soothing nature ambient noise like rain, ocean, pink, brown and white noise sounds and create relaxing soundscapes. Plus online timer and text editor.
مکانیزم this در جاوااسکریپت: (قانون دوم)
اگر یک تابع را از طریق یک آبجکت صدا کنیم (یعنی obj.func) مقدار this، خود آبجکت خواهد بود.
همچنین اگر برای دسترسی به تابع، از چند آبجکت استفاده کنیم، آبجکت آخر مقدار this را تعیین می‌کند. (به کد تصویر اول دقت کنید)
نکته آخر و خیلی مهم اینکه این فقط نحوهی صدا شدن تابع است که مقدار this را تعیین می‌کند و نه اینکه این تابع درون آبجکت تعریف شده است.
یعنی اگر یک متد داخل آبجکت را در یک متغیر گلوبال بریزیم و آن را صدا کنیم، مقدار this با توجه به قانون اول تعیین می‌شود. (به تصویر دوم دقت کنید)
#quicktip #js
@ProGraphs
اگر یک تابع را از طریق یک آبجکت صدا کنیم (یعنی obj.func) مقدار this، خود آبجکت خواهد بود.
همچنین اگر برای دسترسی به تابع، از چند آبجکت استفاده کنیم، آبجکت آخر مقدار this را تعیین می‌کند. (به کد تصویر اول دقت کنید)
نکته آخر و خیلی مهم اینکه این فقط نحوهی صدا شدن تابع است که مقدار this را تعیین می‌کند و نه اینکه این تابع درون آبجکت تعریف شده است.
یعنی اگر یک متد داخل آبجکت را در یک متغیر گلوبال بریزیم و آن را صدا کنیم، مقدار this با توجه به قانون اول تعیین می‌شود. (به تصویر دوم دقت کنید)
#quicktip #js
@ProGraphs
این کد ساده‌ی CSS چه کاری انجام می‌دهد؟
آیا مشکلی در این کد می‌بینید؟
#interviewquestion #css
@ProGraphs
آیا مشکلی در این کد می‌بینید؟
#interviewquestion #css
@ProGraphs
شما هم Octocat خودتون رو بسازین. 👌🏻❤️
https://myoctocat.com/build-your-octocat/
#link #funny #octocat
@ProGraphs
https://myoctocat.com/build-your-octocat/
#link #funny #octocat
@ProGraphs
ProGraphs
این کد ساده‌ی CSS چه کاری انجام می‌دهد؟ آیا مشکلی در این کد می‌بینید؟ #interviewquestion #css @ProGraphs
جواب:
ویژگی box-sizing برای تعیین نحوهی اندازه‌دهی به عنصر استفاده می‌شود. در این کد مشخص کرده‌ایم که اندازه‌ای که برای عنصر تعیین می‌کنیم برای محتوا، فاصله‌ی داخلی و حاشیه عنصر در نظر گرفته شود و border و padding باعث تغییر اندازه‌ی عنصر نشوند.
خود این موضوع به تنهایی نکته‌ای مثبت است و باعث قابل پیش‌بینی‌تر شدن طراحی ما می‌شود.
اما مشکل در نحوهی اعمال این ویژگی است. وقتی از عملگر * برای اعمال این ویژگی استفاده می‌کنیم، این ویژگی برای همه‌ی عناصر در نظر گرفته می‌شود و در نتیجه امکان ارث‌بری در CSS را از بین می‌بریم. بنابر‌این اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم مجبوریم مقدار جدید را برای تک تک عناصر مورد نظر تعیین کنیم.
روش بهتر به این‌صورت است:
مورد دیگری که می‌توان اشاره کرد این است که انتخابگر universal شبه عناصر before و after را انتخاب نمی‌کند. پس برای تغییر box-sizing آن‌ها باید انتخابگر را به این شکل تغییر دهیم:
ویژگی box-sizing برای تعیین نحوهی اندازه‌دهی به عنصر استفاده می‌شود. در این کد مشخص کرده‌ایم که اندازه‌ای که برای عنصر تعیین می‌کنیم برای محتوا، فاصله‌ی داخلی و حاشیه عنصر در نظر گرفته شود و border و padding باعث تغییر اندازه‌ی عنصر نشوند.
خود این موضوع به تنهایی نکته‌ای مثبت است و باعث قابل پیش‌بینی‌تر شدن طراحی ما می‌شود.
اما مشکل در نحوهی اعمال این ویژگی است. وقتی از عملگر * برای اعمال این ویژگی استفاده می‌کنیم، این ویژگی برای همه‌ی عناصر در نظر گرفته می‌شود و در نتیجه امکان ارث‌بری در CSS را از بین می‌بریم. بنابر‌این اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم مجبوریم مقدار جدید را برای تک تک عناصر مورد نظر تعیین کنیم.
روش بهتر به این‌صورت است:
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
به این ترتیب اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم، کافی است مقدار مورد نظر را فقط برای بیرونی‌ترین والد اعمال کنیم تا تمام فرزندان عنصر این مقدار را به ارث ببرند.مورد دیگری که می‌توان اشاره کرد این است که انتخابگر universal شبه عناصر before و after را انتخاب نمی‌کند. پس برای تغییر box-sizing آن‌ها باید انتخابگر را به این شکل تغییر دهیم:
*, *::after, *::before🔺 کیفیت برنامه‌نویسی خودت رو بسنج ... ✨
https://wakatime.com
#link #plugin #programmingmetrics
@ProGraphs
https://wakatime.com
#link #plugin #programmingmetrics
@ProGraphs
همانطور که می‌دانید با css می‌توانیم گرادینت‌هایی با شکل linear و radial ایجاد کنیم. اما به تازگی نوع جدیدی از گرادینت‌ها به نام conic gradients به css اضافه شده است.
تفاوت conic-gradient و radial-gradient در این است که radial-gradient (به صورت پیشفرض) از مرکز دایره به سمت بیرون ایجاد می‌شود. ولی conic-gradient دور یک دایره شکل می‌گیرد و شکل یک مخروط را درست می‌کند (مانند تصویر).
سینتکس آن هم تقریبا مشابه radial-gradient است با این تفاوت که قبل از color-stop ها می‌توانیم درجه شروع گرادینت و مرکز آن را مشخص کنیم (مانند تصویر).
برای تست کردن این ویژگی فعلا از نسخه‌های جدید گوگل کروم استفاده کنید.
#quicktip #css
@ProGraphs
تفاوت conic-gradient و radial-gradient در این است که radial-gradient (به صورت پیشفرض) از مرکز دایره به سمت بیرون ایجاد می‌شود. ولی conic-gradient دور یک دایره شکل می‌گیرد و شکل یک مخروط را درست می‌کند (مانند تصویر).
سینتکس آن هم تقریبا مشابه radial-gradient است با این تفاوت که قبل از color-stop ها می‌توانیم درجه شروع گرادینت و مرکز آن را مشخص کنیم (مانند تصویر).
برای تست کردن این ویژگی فعلا از نسخه‌های جدید گوگل کروم استفاده کنید.
#quicktip #css
@ProGraphs
This media is not supported in your browser
VIEW IN TELEGRAM
🔺مدل‌های محصول خودتون رو به راحتی با این سایت بسازید. 🎉✨
https://artboard.studio
#link #mockup #productmockup
@ProGraphs
https://artboard.studio
#link #mockup #productmockup
@ProGraphs
بهترین منابع رایگان برای دریافت تصاویر با کیفیت: (سری دوم)
https://www.reshot.com/
https://freephotos.cc/
https://barnimages.com/
https://pixabay.com/en/
https://visualhunt.com
#link #stockphoto
@ProGraphs
https://www.reshot.com/
https://freephotos.cc/
https://barnimages.com/
https://pixabay.com/en/
https://visualhunt.com
#link #stockphoto
@ProGraphs
Reshot
Reshot | Free icons & illustrations
Design freely with instant downloads of curated SVG icons and vector illustrations. All free with commercial licensing. No attribution required.
ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟ #interviewquestion #js @ProGraphs
جواب: true
در جاوااسکریپت چندین نوع داده‌ی primitive مانند string, number, boolean, ... داریم و برای بیشتر این نوع داده‌ها یک تابع constructor مانند String, Number, Boolean, ... وجود دارد.
اما نکته خیلی مهم برای درک این کد این است این constructorها مقدار primitive درست نمی‌کنند و یک آبجکت برمی‌گردانند. یعنی:
دوباره به کد دقت کنید. اول یک new Boolean با پارامتر false داریم. ولی می‌دانیم که نتیجه‌ی این عبارت، مقدار false نیست و یک آبجکت دریافت می‌کنیم.
حالا این آبجکت به عنوان ورودی new Boolean بعدی ارسال می‌شود.
می‌دانیم که آبجکت‌ها truthy value محسوب می‌شوند. پس خروجی new Boolean دوم هم یک object wrapper است. ولی با استفاده از valueOf مقدار primitive را که true است دریافت می‌کنیم. (خودمم گیج شدم 😁)
در جاوااسکریپت چندین نوع داده‌ی primitive مانند string, number, boolean, ... داریم و برای بیشتر این نوع داده‌ها یک تابع constructor مانند String, Number, Boolean, ... وجود دارد.
اما نکته خیلی مهم برای درک این کد این است این constructorها مقدار primitive درست نمی‌کنند و یک آبجکت برمی‌گردانند. یعنی:
typeof 20 // numberبه این آبجکت‌ها object wrapper می‌گویند. (object wrapperها و کاربرد آن‌ها را در مطالب بعدی بررسی خواهیم کرد)
typeof new Number(20) // object
دوباره به کد دقت کنید. اول یک new Boolean با پارامتر false داریم. ولی می‌دانیم که نتیجه‌ی این عبارت، مقدار false نیست و یک آبجکت دریافت می‌کنیم.
حالا این آبجکت به عنوان ورودی new Boolean بعدی ارسال می‌شود.
می‌دانیم که آبجکت‌ها truthy value محسوب می‌شوند. پس خروجی new Boolean دوم هم یک object wrapper است. ولی با استفاده از valueOf مقدار primitive را که true است دریافت می‌کنیم. (خودمم گیج شدم 😁)