از 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%);
}

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

تو دنیا 10 مدل انسان وجود داره
اونایی که باینری میدونن و
اونایی که باینری نمیدونن

#توئیت

زیاد پیش میاد که وجود یا عدم وجود یک زیررشته را چک کنیم. برای اینکار از ()indexOf و مقایسه با عدد 1- استفاده می کنیم.
این تیپ با استفاده از اپراتور ~ کار رو ساده تر می کنه:
String.prototype.includes =
function (search, start) {
return !!~this.indexOf(search, start);
}

بدلیل نمایش 32بیتی اعداد در جاوااسکریپت، 1-~ و 4294967295~ (1 - 32 ^ 2) برابر با 0 هستند

کاربرد:
"TipCode".includes("T"); //true
"TipCode".includes("T", 1); //false

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

اگر ابزار #DevTools رو روی فیسبوک باز کرده باشید در تب کنسول لاگ هایی مشابه در تصویر می بینید (لاگی که استایل دهی شده)

برای استایل دهی باید از c% استفاده کنید

دستور پایین را در کنسول چک کنید:

console.log('%c Tip Code', 
    'color: green; font-size: 48px')

حتی می تونید چند تا استایل برای یک لاگ تعریف کنید:
console.log('%c Tip Code | %c Tip Code',
'color: white; background: black',
'color: green;border:2px dashed blue');

#سطح_متوسط

یکی از ویژگی های پرکاربرد که سال ها قبل به #ES2015 اضافه شد و بیشتر موتورهای #javascript و مرورگرها ساپورت می کنند، معرفی Template literals بود. رشته هایی (string) که با استفاده از کاراکترهای `` بجای " یا ' تعریف می کنیم. با استفاده از این ویژگی می تونیم رشته ها را قالب بندی کنیم و رشته های چند سطری داشته باشیم:
var name = 'foo';
console.log(
`Go to the next two lines

print ${name}!`);

// Output:
Go to the next two lines

print foo!

#سطح_مبتدی

Tag Functions - #javascript

امکان پیشرفته تری که Template literals فراهم می کنند، قابلت Tagged templates هستند. تگ ها امکان پارس کردن template literals را از طریق توابع (Tag functions) فراهم می کنند.
نحوه صدا زدن این توابع فرق می کنند ( بدون پرانتز) و مقدار ورودی این تابع به این شکل پارس میشه: پارامتر اول آرایه ای از مقدار رشته ها (strings) و پارامترهای یعدی متغیر های استفاده شده در رشته هستند:

let Person = {
  name: 'foo',
  age: 30
};

function tag(str,name, age) {
  console.log('output:');
  console.log(str[0]);
  console.log(str[1]);
  console.log(name);
  console.log(age);
};

let {name, age} = Person;

/*
  Tagged template is a function call
  that get its arguments from a
  template literal.
*/
tag`Name: ${name}, age:${age}`;

// output:
// Name:
// , age:
// foo
// 30

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