مکانیزم this چیزی جز 4 قانون و چند نکته‌ی ساده نیست!
تا سه هفته‌ی آینده، هر هفته یکی از این قوانین رو بررسی می‌کنیم 😉

یه مجموعه‌ی جالب از کتاب‌هایی که مطالبشون از stack overflow جمع آوری شده.
https://goalkicker.com/

#link #book

@ProGraphs

این layout ساده را با flexbox ساخته‌ایم.

چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟
(در راستای main-axis)

#interviewquestion #css

@ProGraphs

یه پروسه‌ی جالب برای خوندن کد رنگ‌های هگزادسیمال 👌

https://youtu.be/Sd14d1t5vbQ

#link #color

@ProGraphs

جواب:

همانطور که میدانید برای تعیین موقعیت 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

یه cheatsheet کامل و خوب برای css grid 👌

https://grid.malven.co/

#link #cheatsheet

@ProGraphs

با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟

(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)

#interviewquestion #js

@ProGraphs

یه مطلب جالب راجع به کم‌رنگ شدن وابستگی به ابزار‌های توسعه فرانت‌اند، با پیشرفت تکنولوژی‌های پایه‌ای

https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/

#link #frontend

@ProGraphs

یه پیش‌بینی جالب از ترند‌های وب در سال 2019

https://youtu.be/VLm3Y7Odb74

#link #trends

@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 عددی و آیتم‌های پشت سر هم استفاده کنیم.

به زودی تغییرات خوبی خواهیم داشت و قصد داریم مطالب بیشتر و بهتری رو پوشش بدیم.
اما قبلش با جواب دادن به این چند سوال به ما کمک کنید که این تغییرات هر چه بیشتر همسو با نظر شما باشه 🙏

اگر هر نظر دیگه‌ای هم دارید از این طریق با ما در میون بگذارید:

@HiProGraphsBot

کدام دسته از مطالب کانال برای شما مفید‌تر است؟

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

فکر می‌کنید توانسته‌ایم در این مدت کمتر از سه ماه برای شما مفید واقع شویم؟

به نظر شما مطالب باید بیشتر در چه زمینه‌ای باشند؟

🔺 بهبود تمرکز و افزایش بهره‌وری با صدای پس‌زمینه ✨
صدا‌های مختلف را ترکیب کنید و بهترین محیط خودتان را بسازید. 👌🏻

https://www.noisli.com/

#link #focus #productivity #noise

@ProGraphs

​​مکانیزم this در جاوااسکریپت: (قانون دوم)

اگر یک تابع را از طریق یک آبجکت صدا کنیم (یعنی obj.func) مقدار this، خود آبجکت خواهد بود.

همچنین اگر برای دسترسی به تابع، از چند آبجکت استفاده کنیم، آبجکت آخر مقدار this را تعیین می‌کند. (به کد تصویر اول دقت کنید)

نکته آخر و خیلی مهم اینکه این فقط نحوه‌ی صدا شدن تابع است که مقدار this را تعیین می‌کند و نه اینکه این تابع درون آبجکت تعریف شده است.
یعنی اگر یک متد داخل آبجکت را در یک متغیر گلوبال بریزیم و آن را صدا کنیم، مقدار this با توجه به قانون اول تعیین می‌شود. (به تصویر دوم دقت کنید)

#quicktip #js

@ProGraphs

این کد ساده‌ی CSS چه کاری انجام می‌دهد؟
آیا مشکلی در این کد می‌بینید؟

#interviewquestion #css

@ProGraphs