برای تعریف fragments در #react می تونیم از <> و </> بجای React.Fragment استفاده کنیم

class Comments extends React.PureComponent{
render() {
return (
<>
<h1>Title</h1>
<p>Paragraph</p>
<time>Time</time>
</>
);
}
}

معادل کد پایین هست

class Comments extends React.PureComponent{
render() {
return (
<React.Fragment>
<h1>Title</h1>
<p>Paragraph</p>
<time>Time</time>
</React.Fragment>
);
}
}

#سطح_متوسط

اگر در #php از تابع ()empty استفاده میکنید، ممکن است نتایج ناخواسته‌ای بدست بیاورید. این تابع در نسخه 5.4 به پایین php فقط برای مقایسه مستقیم متغییرهاست و نه یک عبارت محاسباتی.
مثال:

 empty(trim($name))  // Error in php 5.4.0

🔰 همچنین در صورتی که از Magic Methodهای get__ و set__ برای کلاس‌ها استفاده میکنید، ممکن است نتایج ناخواسته ای بگیرید.
مثال:

class classA
{
  private $_x;
  public function __set($key, $value) {
    if ($key === 'x')
      $this->_x = $value;
  }
  public function __get($key) {
    if ($key === 'x')
      return $this->_x;
    else
      return null;
  }
}

$cls = new classA();
$cls->x = 'Amir';
var_dump(empty($cls->x));
// Output True 👈

$var = $cls->x;
var_dump(empty($var));
// Output False 👈

🔰 دلیل این اتفاق این است که ساختار دستور ()empty به این صورت است:

!isset($var) || $var == false
// Reference www.php.net

🔰 راه حل:
۱- برای رفع این مشکل در کلاس هایی که از Magic Methodهای get__ و set__ استفاده میکنید، همیشه باید isset__ را نیز پیاده سازی کرد.

۲- کلا از تابع ()empty استفاده نکنید و بجای آن از var$! یا var$!@ استفاده کنید.

#بک‌اند #سطح_پیشرفته

تیدیل NodeList به آرایه

احتمالا زیاد پیش آمده که خواسته باشید لیستی از المنت های DOM که با دستور ()document.querySelectorAll برگردانده شده اند را مرتب یا فیلتر کنید. برای اینکار مقدار بازگشتی این تابع که از نوع NodeList هست را به یک آرایه تبدیل کنید تا بتوانید از توابع آرایه ای مثل sort, reduce, map, filter و... استفاده کنید:

domElements = document.querySelectorAll("ul"); //NodeList

یک راه برای تبدیل به آرایه:

var arrayElements = [].slice.call(domElements); 

راه دوم برای تبدیل مقدار بازگشتی به آرایه:

var arrayElements = Array.from(domElements);

#javascript #سطح_متوسط

همانگونه که می‌دانید سلکتورهای #CSS به حروف کوچک و بزرگ حساس (Case Sensitive) است. یعنی سلکتور PANEL. با panel. فرق دارد. این امر برای Attribute Selectorها ایجاد مشکل میکند.
به عنوان مثال قصد داریم تمام لینک هایی که به سایت google ارجاع داده شده اند را انتخاب کنیم:
<a href="//google.com"></a>
<a href="//Google.com"></a>
<a href="//GOOGLE.com"></a>

سلکتور زیر فقط لینک اول را انتخاب میکند:
a[href*=google] {...}

برای اینکه این سلکتور به حروف کوچک و بزرگ حساس نباشد باید به این صورت نوشته شود:
a[href*=google i] {...}

#فرانت‌اند #سطح_متوسط

تابحال براتون پیش اومده که نیاز به اضافه و یا ویرایش چند خط در #Devtools داشته باشید؟ مثلا تصمیم داشته باشید font-size در چند کلاس را دستکاری کنید.

برای اینکار از کلید Ctrl + Click ) Cmd+ Click) استفاده کنید تا همزمان چند cursor داشته باشید.

#سطح_متوسط

اگر جایی قصد داشته باشیم تا قسمتی از page را با تصویر/عکس کاور کنیم و در صورت بزرگ بودن ابعاد تصویر، وسط تصویر نمایش داده شود از این دو دستور #CSS استفاده می کنیم:

background-size: cover;
background-position: 50%;

اما گاهی اوقات مجبوریم به دلایلی (مثلا به منظور #SEO) از تگ img استفاده کنیم. برای پیاده سازی دو دستور CSS در بالا با استفاده از تگ img از این تکه کد می تونید استفاده کنید:
HTML:

<div class='box'>
  <img src='img.jpg' class='img' />
</div>

CSS:

.box {
  position: relative;
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.img {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
height: 0;
min-width: 100%;
min-height: 100%;
}

#فرانت‌اند #سطح_متوسط

دستورات بالا برای تصاویر عریض به درستی کار می کنه. برای تصاویر با نسبت ارتفاع بیشتر (height > width) مقدار height: 0 در کلاس img را با width:0 جایگزین کنید.

از className و style در کامپوننت‌ها استفاده نکنید!

یکی از مشکلاتی که دولوپرهای #react دارن، در نحوه پاس دادن استایل به کامپوننت‌ها هست.

از اونجایی که مشکلات بدیهی مثل خطای تایپی و یا بخاطر سپاری اسم کلاس ها پیش میاد، معمولا از یک کلاس helper استفاده می کنیم اما به شخصه روش ساده تری را می پسندم که هر بار مجبور به تایپ مقادیر className و یا پاس دادن style نباشم.

بعنوان مثال، نحوه استفاده متعارف از className را در نظر بگیرید:

<button type="button" className="btn btn-primary">
  Just press me!
</button>

در کد بالا نام کلاس های btn و btn-primary را پاس دادیم. اما راهی ساده تر:

<Button primary>Just press me!</Button>

در این مثال از یک کامپوننت کاستوم بنام Button استفاده شده است. در پیاده سازی این کامپوننت از همون روش معمول (پاس دادن مقدار به className) استفاده کردیم اما از مقدار Boolean برای property بنام primary، info و... استفاده کردیم.

class Button extends Component {
render() {
let {primary,
success,
info,
warning} = this.props;

let className = `btn ${
(primary && 'btn-primary') ||
(success && 'btn-success') ||
(info && 'btn-info') ||
(warning && 'btn-warning')
}`;
return <button type="button" className={className}>
{this.props.children}
</button>;
}
}

#فرانت‌اند #سطح_متوسط

تفاوت دو تابع ()isFinite و ()Number.isFinite در #javascript

قبل از استفاده از تابع ()isFinite حتما مقدار ورودی را چک کنید، چون:
isFinite(null); //true :(
isFinite('1'); //true :(

در حالیکه:
Number.isFinite(null); //false :)
Number.isFinite('1'); //false :)

مقدار خروجی این دو تابع در موارد بالا با هم فرق میکنه چون تابع سراسری ()isFinite ابتدا مقدار ورودی را به Number تبدیل می کند و مقدار Number(null) = 0 است.

#سطح_متوسط

اگر فکر می کنید که همیشه می تونید اسم یک تابع را بعنوان callback به توابعی مثل map، که تابعی(callback) بعنوان ورودی دریافت می کنند، اشتباه می کنید.


#سطح_متوسط #javascript

به این دو تابع نگاه کنید! حروجی یکسانی باید داشته باشند؟

function foo1() {
  return {
    bar: "Hello"
  };
}
function foo2() {
  return
  {
    bar: "Hello"
  };
}

اما این دو تابع خروجی یکسانی ندارند:

foo1(); // {bar: "hello"}

foo2(); // undefined

اگر چه گذاشتن semicolon در #javascript اختیاری هست اما باعث این دست از حطاها میشه که پیداکردنش زمانبره.

برای پیدا کردن قسمت هایی از کد که باید semicolon گذاشته بشه از یک ابزار lint مثل JSHint یا JSLint استفاده کنید

#سطح_مبتدی

مبادله (Swap) مقادیر دو متغیر بدون استفاده از متغیر کمکی #javascript

#سطح_مبتدی #destructuring_assignment

console.log("b" + "a" + + "🍌" + "a"); // baNaNa

#javascript #fun

احتمالا زیاد اتفاق افتاده که بخواهیم تغییرات لوکال روی یک فایل را commit نکنیم در حالیکه فایل در #گیت track میشه (یعنی نمی تونیم از gitignore. و یا git. / info / exclude استفاده کنیم). برای اینکار از این دستورات استفاده کنید.

یکی از موارد پرکابرد: تغییر کانفیگ های برنامه روی سیستم لوکال
#git #سطح_متوسط

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

const isRequired = (paramName) => {
  throw new Error(
    `param |${paramName || ''}| is required`
  );
};

const aFunc = (fullname = isRequired("fullname")) => {
    console.log(`hello ${fullname}`);
};

هر دوی این دستورات باعث خطا می شود:

aFunc();
aFunc(undefined);

اما این دستورات به درستی اجرا می شوند:

aFunc('unknown');
aFunc(null);

برای اجرای این تکه کد در مرورگرهای قدیمی که هنوز arrow functions و مقدار پیش فرض برای پارامترها را ساپورت نمی کنند نیاز به transpiler دارید

#سطح_متوسط #javascript

همین یک خط #CSS بیشتر کار Dark Mode رو براتون می کنه:


*, *::before, *::after {
filter: invert(100%);
}

#سطح_متوسط #فرانت‌اند