گارانتی تکرار درست تایمرها در #javascript

از اونجایی که کلیه دستورات javascript تنها در یک thread اجرا می شوند، هیچگونه گارانتی برای اجرای دستورات ()setInterval در interval مشخص شده وجود ندارد. چرا که شاید مدت زمان اجرای دستورات داخل setInterval بیشتر از مدت زمانِ interval تعیین شده باشد و در این صورت تایمرهای بعدی به صف دستورات در javascript اضافه نخواهند شد تا کار تایمر قبلی تمام و از صف دستورات خارج شود.

همچنین ممکن است در بعضی موارد چند تایمر بلافاصله (بدون وقفه) بعد از هم اجرا شوند چرا که interval تعیین شده برای اجرای مجدد تایمر به مدت زمانِ صرف شده جهت اجرای دستورات داخل تایمر نزدیک بوده است.

برای حل این مشکل از دو دستور setTimeout و arguments.callee به شکل پایین استفاده می کنیم:

setTimeout(function(){
  // code
  setTimeout(arguments.callee, interval);
}, interval);

برای دوستانی که از قبل با arguments.callee آشنایی ندارند: arguments.callee یک اشاره گر (Pointer) به تابع در حال اجرا است (بعبارت دیگر اشاره گر به تابعی است که مالک arguments است).

یکی از کاربردهای تیپ قبلی در پیاده سازی انیمیشن ها در #javascript است چرا که انیمیشن باید بصورت نرم (smooth) اجرا شود و تاثیر انیمیشن قابل مشاهده باشد.


setTimeout(function(){
var div = document.getElementById('aDiv'),
right = parseInt(div.style.right) + 5;
div.style.right = right + 'px';
if (right < 150)
setTimeout(arguments.callee, 50);
}, 50);

این تایمر باعت حرکت div از راست به چپ در هر بار اجرای تایمر می شود تا زمانی که فاصله div از سمت راست به 150px و یا بیشتر برسد.

سلکتور چشم جغد
در #css سلکتوری وجود دارد به نام چشم جغد که این صورت تعریف میشود:

* + * {
}

معنی: تمام المنتهایی که قبل از آنها المنت دیگری وجود دارد.
کاربرد: معمولا margin-top با border-top به عناصر یک لیست.
مثال:

.myList *+* {
margin-top: 1em;
}
#سطح_متوسط

بیشتر اوقات هنگام استفاده از #Console در #DevTools مرورگرها نیاز داریم از خروجی دستور قبلی در اجرای دستور بعدی استفاده کنیم. برای اینکار از _$ استفاده کنید

این دستور در هر سه مرورگر Safari، Firefox و Chrome قابل دسترس هست (در دیگر مرورگرها تست نشده)

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

برنامه نویسان #PHP نمی‌توانند بلافاصله بعد از ایجاد Instant از روی کلاس، به عناصر داخل آن دسترسی داشته باشند:

// syntax error
new myClass()->myMethod();

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

$a = new myClass();
$a->myMethod();

اگر میخواهید عمل فوق را در یک خط انجام دهید، باید به این صورت عمل کنید:
(new myClass())->myMethod();

#بک‌اند #سطح_مبتدی

راه ساده تر و با خوانایی بالاتر بجای استفاده از شرط های متوالی در #javascript

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

if (ch) {
if (ch === 'a') {
doA();
} else if (ch === 'b') {
doB();
} else if (ch === 'c') {
doC();
} else if (ch === 'd') {
doD();
} else if (ch === 'e') {
doE();
}
}

کد پایین کاری مشابه با تکه کد بالا انجام میده:
var chObj = {
'a': doA,
'b': doB,
'c': doC,
'd': doD,
'e': doE
};
if (ch in chObj)
chObj[ch]();

#سطح_مبتدی

در #CSS میتوان از هر نوع کاراکتر یونیکد و ایموجی استفاده کرد و روی مرورگرهای مختلف محدودیتی ندارد.
گاهی برنامه نویسان برای هیجان انگیز شدن کدنویسی یا به نشانه اعتراض به تصمیمات مدیرانشان، تلاش میکنند از نام کلاس‌های غیر معمول استفاده کنند.

🔰 معروف‌ترین آنها، کلاس روح (شبح) یا Ghost است:

<style>
  .👻 {
    color: blue;
  }
</style>

<div class="👻">
  Mr. Ghost
</div>

🔰 نمونه ای دیگر:

<style>
  .💩 {
    color: brown;
  }
</style>

<div class="💩">
  I'm Angry!
</div>

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

تکنیک Advanced Lazy Loading در #javascript

روش های مختلفی برای پیاده سازی تکنیک lazy loading در بین برنامه نویسان متداول هست اما دراین تیپ (Tip) توضیح و کاربرد یکی از پیاده سازی های پیشرفته این تکنیک در #javascrip را می نویسم:

مثلا روش کلاسیک پایین را در نظر بگیرید که بیشتر برنامه نویسان جاواسکریپت در گذشته جهت بررسی امکانات مرورگر کاربران بمنظور پیاده سازی AJAX استفاده می کردند:

function createAjax() {
  if (window.XMLHttpRequest) {
    // code for modern browsers
    return new XMLHttpRequest();
    } else  {
    // code for IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

// Call the func
var xhttp = createAjax();

یعنی با هر بار اجرای این تابع شرط if...else احرا می شود در حالیکه خروجی این تابع در فراخوانی های بعدی تغییری نمی کند پس فقط نیاز به یکبار اجرای if..else و بقیه دستورات داریم به همین دلیل از روش Advanced Lazy laoding برای پیاده سازی این تابع استفاده می کنیم. دقت کنید که در این روش تایع در داخل بدنه خود overwrite می شود:

function createAjax() {
  if (window.XMLHttpRequest) {
    createAjax = function() {
      return new XMLHttpRequest();
    }
  } else {
    createAjax = function() {
     return new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return createAjax();
}

// call the func again the same old version
var xhttp = createAjax();

این تکنیک برای تابع هایی که به تعداد زیاد فراخوانی می شوند و خروجی آنها در فراخوانی های بعدی هیچگونه تغییری با فراخوانی اول ندارند استفاده می شود.

#سطح_پیشرفته #advanced_lazy_loading

گاهی اوقات در #php قصد داریم تا اعداد را به صورت 10k یا 25M نمایش دهیم. از تابع زیر میتوان برای این کار استفاده کرد:

function numberSuffix($input)
{
  $suffixes = array('', 'K', 'M', 'B', 'T');
  $suffixIndex = 0;
  while (abs($input) >= 1000 && $suffixIndex < sizeof($suffixes)) {
    $suffixIndex++;
    $input /= 1000;
  }
  return ($input > 0 ? floor($input * 1000) / 1000 : ceil($input * 1000) / 1000) . $suffixes[$suffixIndex];
}

echo numberSuffix(15000);
//  Output:  15K

#بک‌اند #سطح_متوسط

برای تعریف 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