یه مجموعه‌ی جالب از کتاب‌هایی که مطالبشون از stack overflow جمع آوری شده.
https://goalkicker.com/
#link #book
@ProGraphs
https://goalkicker.com/
#link #book
@ProGraphs
Goalkicker
Free Programming Books; HTML5, CSS3, JavaScript, PHP, Python...
Free Programming Books on Android development, C, C#, CSS, HTML5, iOS development, Java, JavaScript, PowerShell, PHP, Python, SQL Sever and more
این layout ساده را با flexbox ساخته‌ایم.
چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟
(در راستای main-axis)
#interviewquestion #css
@ProGraphs
چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟
(در راستای main-axis)
#interviewquestion #css
@ProGraphs
یه پروسه‌ی جالب برای خوندن کد رنگ‌های هگزادسیمال 👌
https://youtu.be/Sd14d1t5vbQ
#link #color
@ProGraphs
https://youtu.be/Sd14d1t5vbQ
#link #color
@ProGraphs
ProGraphs
این layout ساده را با flexbox ساخته‌ایم. چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟ (در راستای main-axis) #interviewquestion #css @ProGraphs
جواب:
همانطور که میدانید برای تعیین موقعیت flex-item ها در راستای cross axis به صورت تکی از پراپرتی align-self استفاده می‌کنیم.
ولی تا الان پراپرتی برای تعیین موقعیت تکی در راستای main axis تعریف نشده است.
برای شبیه‌سازی این قابلیت می‌توانیم از margin: auto استفاده کنیم. به این‌صورت که به هر flex-item در هر جهت margin: auto اعمال کنیم، عنصر مورد نظر تا جایی که می‌تواند از آن جهت فاصله می‌گیرد.
یعنی در این تصویر فقط کافیست به عنصر 4 ویژگی margin-left: auto را اعمال کنیم.
(شاید نام پراپرتی justify-self را هم شنیده باشید. ولی این پراپرتی ربطی به تعیین موقعیت در flexbox ندارد و کاربرد دیگری دارد!)
همانطور که میدانید برای تعیین موقعیت flex-item ها در راستای cross axis به صورت تکی از پراپرتی align-self استفاده می‌کنیم.
ولی تا الان پراپرتی برای تعیین موقعیت تکی در راستای main axis تعریف نشده است.
برای شبیه‌سازی این قابلیت می‌توانیم از margin: auto استفاده کنیم. به این‌صورت که به هر flex-item در هر جهت margin: auto اعمال کنیم، عنصر مورد نظر تا جایی که می‌تواند از آن جهت فاصله می‌گیرد.
یعنی در این تصویر فقط کافیست به عنصر 4 ویژگی margin-left: auto را اعمال کنیم.
(شاید نام پراپرتی justify-self را هم شنیده باشید. ولی این پراپرتی ربطی به تعیین موقعیت در flexbox ندارد و کاربرد دیگری دارد!)
نسخه 71 گوگل کروم هم به تازگی منتشر شد!
یکی از ویژگی‌های جالبی که به این نسخه اضافه شده، امکان ذخیره کردن سریع عناصر html در یک متغیر گلوبال است.
کافی است در تب elements روی یک عنصر راست کلیک کنید و گزینه‌ی Store as global variable را انتخاب کنید.
#quicktip #devtools
@ProGraphs
یکی از ویژگی‌های جالبی که به این نسخه اضافه شده، امکان ذخیره کردن سریع عناصر html در یک متغیر گلوبال است.
کافی است در تب elements روی یک عنصر راست کلیک کنید و گزینه‌ی Store as global variable را انتخاب کنید.
#quicktip #devtools
@ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟
(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)
#interviewquestion #js
@ProGraphs
(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)
#interviewquestion #js
@ProGraphs
یه مطلب جالب راجع به کم‌رنگ شدن وابستگی به ابزار‌های توسعه فرانت‌اند، با پیشرفت تکنولوژی‌های پایه‌ای
https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/
#link #frontend
@ProGraphs
https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/
#link #frontend
@ProGraphs
CSS-Tricks
Front-end development is not a problem to be solved | CSS-Tricks
HTML and CSS are often seen as a burden.
ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟ (احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!) #interviewquestion #js @ProGraphs
جواب: 16
در خط اول کد دو آیتم در آرایه داریم، پس تا اینجا length آرایه عدد 2 است. اما مسئله اصلی نحوه‌ی عملکرد خط دوم است.
می‌دانیم که آرایه‌ها در جاوااسکریپت در واقع نوع خاصی از آبجکت‌ها هستند. بنابراین علاوه بر index های عددی، می‌توانند key هایی از نوع string داشته باشند. در حالت معمول این key ها مقدار length آرایه را تغییر نمی‌دهند ولی اگر مقدار این string بتواند به عدد دسیمال convert شود، جاوااسکریپت تصور می‌کند که قصد داریم index عددی اضافه کنیم و نه یک string key!
اگر دوباره به خط دوم کد دقت کنید می‌بینید که داریم یک string key به آرایه اضافه می‌کنیم. ولی مقدار این key در واقع عدد 15 است. پس یک آیتم جدید در موقعیت 15ام آرایه اضافه می‌شود.
حال یک آرایه sparse داریم که آیتم‌های آن پشت سر هم نیستند. در این حالت، مقدار پراپرتی length یکی بیشتر از بزرگترین index آرایه (یعنی 15+1) است.
همینطور که می‌بینید اضافه کردن string key به آرایه یا sparse کردن یک آرایه پیچیدگی‌های زیادی ایجاد می‌کند. بنابراین بهتر است از آرایه‌ها فقط به عنوان لیست‌هایی با index عددی و آیتم‌های پشت سر هم استفاده کنیم.
در خط اول کد دو آیتم در آرایه داریم، پس تا اینجا length آرایه عدد 2 است. اما مسئله اصلی نحوه‌ی عملکرد خط دوم است.
می‌دانیم که آرایه‌ها در جاوااسکریپت در واقع نوع خاصی از آبجکت‌ها هستند. بنابراین علاوه بر index های عددی، می‌توانند key هایی از نوع string داشته باشند. در حالت معمول این key ها مقدار length آرایه را تغییر نمی‌دهند ولی اگر مقدار این string بتواند به عدد دسیمال convert شود، جاوااسکریپت تصور می‌کند که قصد داریم index عددی اضافه کنیم و نه یک string key!
اگر دوباره به خط دوم کد دقت کنید می‌بینید که داریم یک string key به آرایه اضافه می‌کنیم. ولی مقدار این key در واقع عدد 15 است. پس یک آیتم جدید در موقعیت 15ام آرایه اضافه می‌شود.
حال یک آرایه sparse داریم که آیتم‌های آن پشت سر هم نیستند. در این حالت، مقدار پراپرتی length یکی بیشتر از بزرگترین index آرایه (یعنی 15+1) است.
همینطور که می‌بینید اضافه کردن string key به آرایه یا sparse کردن یک آرایه پیچیدگی‌های زیادی ایجاد می‌کند. بنابراین بهتر است از آرایه‌ها فقط به عنوان لیست‌هایی با index عددی و آیتم‌های پشت سر هم استفاده کنیم.
به زودی تغییرات خوبی خواهیم داشت و قصد داریم مطالب بیشتر و بهتری رو پوشش بدیم.
اما قبلش با جواب دادن به این چند سوال به ما کمک کنید که این تغییرات هر چه بیشتر همسو با نظر شما باشه 🙏
اگر هر نظر دیگه‌ای هم دارید از این طریق با ما در میون بگذارید:
@HiProGraphsBot
اما قبلش با جواب دادن به این چند سوال به ما کمک کنید که این تغییرات هر چه بیشتر همسو با نظر شما باشه 🙏
اگر هر نظر دیگه‌ای هم دارید از این طریق با ما در میون بگذارید:
@HiProGraphsBot
🔺 بهبود تمرکز و افزایش بهره‌وری با صدای پس‌زمینه ✨
صدا‌های مختلف را ترکیب کنید و بهترین محیط خودتان را بسازید. 👌🏻
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