#Javascript
#js

JavaScript Standard Style

این خلاصه ای از قوانین جاوا اسکریپت استاندارد است.

بهترین روش برای یادگیری در مورد استاندارد این است که فقط آن را در کد خود امتحان کنید.
لینک های زیر را مطالعه کنید بسیار ساده توضیح داده برای دوستانی که علاقه‌مند به رعایت استانداردها در نوشتن کدهای JavaScript و یا Framework‌ های مرتبط دارند

https://standardjs.com/rules.html
https://github.com/standard/standard

@ABlueDeveloper

#PersianDateTimePicker
#Js
#Html
🔹 کامپوننت انتخاب تاریخ شمسی با اعداد فارسی
🔸 آپشن های مختلف برای انتخاب ساعت و دقیقه یا مخفی کردن ساعت و دقیقه
🔹باز شدن بصورت popover

نصب پکیج :

Install-Package ABluePersianDateTimePicker -Version 1.0.1
dotnet add package ABluePersianDateTimePicker --version 1.0.1
paket add ABluePersianDateTimePicker --version 1.0.1

@fullStackDevs

#JS
#Blocks

Creating beautiful websites (UI) without writing code

A JSX-based page builder


⚠️ Currently under development

blocks-ui.com
Github

@fullStackDevs

#js_trick
#js

توی جاوا اسکریپت اگر قسمت صحیح یه عدد رو خواستین میتونین قبلش دوتا کاراکتر تیلدا (~) بذارید

console.log(~~4.131839) // 4
console.log(~~-3.825682) // -3

شاید بگین خب متد Math.floor هم عدد صحیح بر میگردونه ولی رند میکنه :

Math.floor(-3.825682)
Output: -4

▫️Happy Js Coding😉

@FullStackDevs

#js
#arrowFunction
#this

✅ در جاوا اسکریپت کلمه کلیدی this به به یک آبجکت اشاره میکند.این ابجت، ابجکتی هست که باعث اجرا شدن کدهای جاوااسکریپت میباشد.
به عبارتی دیگر هر function در جاوااسکریپت دارای رفرنسی به یک execution context میباشد که آنرا this می گوییم.
در نتیجه اگر یک فانکشن معمولی را به وسیله ابجکت های متفاوت صدا بزنید this به ابجکت های متفاوتی اشاره خواهد کرد.
در جاوا اسکریپت arrow function ها
باعث bind شدن ابجکت جدیدی به this نمیشوند و به جای آن this در arrorw function ها به اسکوپ parent اشاره میکند. یعنی رفرنس this در درون یک arrow function با رفرنس this در خارج از همان arrow function یکسان خواهد بود.

@FullStackDevs

let's level up our Js
#js
#QUIZ

@fullStackDevs

#js
#QUIZ

javaScript FACTS💎

@fullStackDevs

#js
#WorkerService

Worker Service in JS

🔹 تا حالا در مورد worker serviece ها از خودتون پرسیدین و سعی کردین متوجه بشین که دقیقا چی هستن و کارشون چیه؟
▪️تو این پست سعی میکنیم تا به برخی از این سوالها در این مورد پاسخ بدیم.

❇️ یک worker service اسکریپتی هست که در بک گراند در یک thread ای جدا از browser ui اجرا میشه .
✳️ کار کردن وب سایت به صورت افلاین توسط worker service میسر میشود و به کمک آنها یکپارچه سازی پلتفرمها مانند push notification و rich caching و background sync انجام پذیر است.
▪️در تکنولوژی PWA قلب و هسته اصلی worker service ها هستند.

✳️از ویژگی های یک worker service این است که به DOM دسترسی مستقیم ندارد ولی میتواند تمام درخواست های شبکه را رهگیری کند.
این مسئله به توسعه دهنگان این فرصت را میدهد تا نحوه مدیریت درخواست ها را کنترل کنند و راهی موثر برای کار کردن وب سایت در زمان افلاین ، فراهم آورند.
بدون شک قاعده بازی وب سایتها توسط worker service ها تغییر میکند.

🔰در زیر ویژگی های اصلی worker service ها را لیست میکنیم : یک worker service ❕
🔻یک فایل جاوا اسکریپت است.
🔻در thread جدا از ui اجرا میشوند.
🔻بطور مستقیم به DOM دسترسی ندارند.
🔻برای فعال شدن یک worker service مجموعه ای از رویداد های و life cycle ها باید انجام شود.
🔻فقط زمانی که مورد استفاده قرار گیرند Live هستند در نتیجه مصرف بی رویه باتری ای وجود ندارد.
🔻فقط به Domain یا origin ای که رجیستر شده اند، محدود میشوند.
🔻برای کار کردن به Https قطعا و الزاما نیاز دارند.
🔻توانایی دریافت و یا ارسال پیام ها را به ui دارند
🔻برای اجرا نیازی نیست تا حتما page باز باشد.
🔻توسط تمامی مرورگر های ضروری و اصلی و از جمله Ios safari پشتیبانی میشوند.
🔻تقریبا مشابه web worker ها هستند اما در خیلی از موارد بهتر هستند.

✳️ یک service worker چگونه کار میکند ؟

🔸یک service worker بین مرورگر و شبکه قرار میگیرد. مانند یک پراکسی سرور عمل میکند و مجموعه ای از تسک هایی که مربوط به UI نیستند را مدیریت میکند. آنها همچنین رویداد محور (Event Driven) هستند و جدا از پراسس مرورگر کار میکنند.
اولین و مهمترین قابلیتی که یک service worker برای یک وب سایت به ارمغان می اورد قابلیت کار کردن به صورت افلان با کنترل پذیری بالا است.
این امر به کمک API های caching و رهگیری همه ی درخواست های شبکه قبل از اینکه ارسال شوند، انجام میشود.


🔹در این پست مقدمه ای از service worker ها را بررسی کردیم و در قسمتهای بعد به جزئیات بیشتر خواهیم پرداخت و در نهایت به PWA ها خواهیم رسید.🔹
@fullStackDevs

#javaScript_tricks
#js

❇️ در این پست چندتا تکنیک جاوا اسکریپتی معرفی میکنیم که امیداوریم براتون مفید واقع بشه.

🔹لاگ سریع در console به کمک object literal میتونید متغیرهاتون رو خیلی سریع و خوانا لاگ بزنید.
const myVar = 'foo'
const otherVar = 2

// output:
// {myVar: "foo", otherVar: 2}
console.log({ myVar, otherVar })

به این ترتیب یه آبجکت میسازین و مقدار هر پراپرتیش به همراه نامش در کنسول لاگ میشه.

🔹نمایش نام پارامترهای تابع به همراه تایپ شون.
به کمک object destructuring در جاوا اسکریپت و مشخص کردن مقدار پیشفرض برای پارامتر های تابع میتونید موقع صدا زدن تابع نام پارامتر ها به همراه تایپ اونها رو داشته باشید و از آنجایی که به پارامترتون مقدار پیشفرض دادید به صورت optional هست و به شکل های متفاوت میتونید تابع تون رو صدا بزنید.

const notify = (msg, { type = 'info', timeout, close = true } = {}) => {
  // display notification
}

notify('Hi!')
notify('Hi!', { type: 'error' })
notify('Hi!', { type: 'warn', close: false })

🔹کلون کردن آرایه.
از اونجایی که ارایه ها با رفرنسشون پاس داده میشن به کمک spread operator میتونید یک آرایه رو به راحتی کلون کنید.
const manipulateList = (list) => {
// defensively copy list
const copiedList = [...list]

// do something with copiedList
}

🔹 اجباری کردن پارامترهای تابع
به کمک مقدار دهی پیشفرض برای پارامترهای تابع و به کمک این تکنیک میتونید پارامترهای توابع تون رو درصورتی که مقداری براشون پاس داده نشده اجباری کنید.
const throwIfMissing = () => {
throw new Error('Missing parameter')
}
const func = (requiredParam = throwIfMissing()) => {
// some implementation
}


🔹رکوئست های زماندار (برای fetch api)
دیگر لایبری های رایج جاوااسکریپتی مثل jquery ajax و axios این امکان رو بهتون میدن تا برای درخواستتون یک timeout تنظیم کنین و درصورتی که در زمان مشخص شده رکوئست انجام نشد، خودکار fail بشه.
متد fetch در مرورگر های جدید به صورت توکار چنین قابلیتی رو نداره اما به کمک این تکنیک میتونید اینکار رو انجام بدید.

const timeout = (delay = 30000) => {
return new Promise((resolve, reject) => {
const rejectWithError = () => {
reject(new Error('Timed out!'))
}

setTimeout(rejectWithError, delay)
})
}

const fetchWithTimeout = (url, delay = 3000) => {
// construct an array to pass to `Promise.race`
return Promise.race([fetch(url), timeout(delay)])
}

fetchWithTimeout('/json/data.json', 1000)
.then((response) => {
// successful response before the 1 s timeout
console.log('successful response', response)
})
.catch((e) => {
// Either the timeout occurred or some other error.
// Would need to check the method or use a custom
// Error subclass in timeout
console.error('request error', e)
})

🔹تبدیل رشته به عدد .
برای تبدیل رشته های عددی به معادل number ای شون از این تکنیک استفاده کنید.
let int = "15";

int = +int;

اگر جایی امکان استفاده از عملگر + نداشتید از دوتا عملگر ~~ استفاده کنید.

@fullStackDevs

#JS
#slice
#prototype
#trick
🌀 معرفی متد slice در جاوا اسکریپت :
Array.prototype.slice()

Syntax

slice()
slice(start)
slice(start, end)

✅ متد slice عناصر انتخاب شده را در یک آرایه به عنوان یک شی آرایه جدید برمی گرداند.
❕ دو تا پارامتر داره که start تا end ایندکس عناصر انتخاب شده را مشخص میکند. اگر فقط پارامتر start را مقدار بدید یعنی از مقدار ایندکس start ارایه تا انتهای عنصر ارایه انتخاب شود. مثال زیر را در نظر بگیرید :

const fruits = ['apple', 'banana', 'orange', 'Pineapple', 'Strawberry'];

console.log(fruits.slice(2));
// expected output: Array ["orange ", " Pineapple ", "Strawberry"]

console.log(fruits.slice(2, 4));
// expected output: Array ["orange ", " Pineapple "]

‼️ نکته: برای انتخاب از انتهای رشته از یک عدد منفی استفاده کنید (زمانی که شما پارامتر های start , end را مقدار منفی بدید کاملا برعکس مقدار مثبت عمل میکند):

  var fruits = ['apple', 'banana', 'orange', 'Pineapple', 'Strawberry'];
  var myBest = fruits.slice(-3, -1);
// expected output: Array ["orange ", " Pineapple "]

string.prototype.slice()

✅ متد slice در prototype استرینگ هم وجود دارد و قسمتهایی از یک رشته را استخراج کرده و قسمتهای استخراج شده را در یک رشته جدید برمی گرداند و پارامتر های شروع و پایان برای انتخاب شروع پایان رشته را نیز دارد.

var str = "Hello world!";
var res = str.slice(3, 8);
// expected output: "lo world! "

❗️ حالا تصور کنید میخوایید اعداد تک رقمی را دو رقمی نمایش دهید مانند نمایش ماه یا روز در تاریخ به صورت زیر :
1400/02/09

برای اینکه اعداد کوچکتراز ده ما همیشه دو رقمی نمایش داده شود و if و else هم استفاده نکنیم کافی است از همین متد slice استفاده کنیم به این صورت که یک “0” سمت چپ عدد ماه قرار میدیم و از انتها 2 کاراکتر از سمت راست یا انتها (2-) بر میداریم . بصورت زیر :

var myNumber = 7;
var myNumber2 = 11;
var formattedNumber = ("0" + myNumber).slice(-2);
// expected formattedNumber: 07

var formattedNumber2 = ("0" + myNumber2).slice(-2);
// expected formattedNumber2: 11

@fullStackDevs

#Js
#AccessToDevice

New Standards to Access Device Hardware using JavaScript

WebHID, WebNFC, and WebUSB have opened up new avenues to interact with user’s device hardware for web apps.


آیا تاکنون نیاز به دسترسی به سخت افزار دستگاه کاربر و پیاده سازی یک برنامه دسک تاپ فقط برای آن ویژگی پیدا کرده اید؟ تو تنها نیستی. تا همین اواخر ، راه دستیابی به موارد فوق دور از ذهن و دست و پا گیر بود. با این حال ، با به روزرسانی های اخیر Chrome DevTools ، صحبت با سخت افزار با استفاده از JavaScript به واقعیت تبدیل شده است.


https://blog.bitsrc.io/new-standards-to-access-user-device-hardware-using-javascript-86b0c156dd3d

@fullStackDevs

#JS
#slice
#prototype
#trick
🌀 معرفی متد slice در جاوا اسکریپت :
Array.prototype.slice()

Syntax

slice()
slice(start)
slice(start, end)

✅ متد slice عناصر انتخاب شده را در یک آرایه به عنوان یک شی آرایه جدید برمی گرداند.
❕ دو تا پارامتر داره که start تا end ایندکس عناصر انتخاب شده را مشخص میکند. اگر فقط پارامتر start را مقدار بدید یعنی از مقدار ایندکس start ارایه تا انتهای عنصر ارایه انتخاب شود. مثال زیر را در نظر بگیرید :

const fruits = ['apple', 'banana', 'orange', 'Pineapple', 'Strawberry'];

console.log(fruits.slice(2));
// expected output: Array ["orange ", " Pineapple ", "Strawberry"]

console.log(fruits.slice(2, 4));
// expected output: Array ["orange ", " Pineapple "]

‼️ نکته: برای انتخاب از انتهای رشته از یک عدد منفی استفاده کنید (زمانی که شما پارامتر های start , end را مقدار منفی بدید کاملا برعکس مقدار مثبت عمل میکند):

  var fruits = ['apple', 'banana', 'orange', 'Pineapple', 'Strawberry'];
  var myBest = fruits.slice(-3, -1);
// expected output: Array ["orange ", " Pineapple "]

string.prototype.slice()

✅ متد slice در prototype استرینگ هم وجود دارد و قسمتهایی از یک رشته را استخراج کرده و قسمتهای استخراج شده را در یک رشته جدید برمی گرداند و پارامتر های شروع و پایان برای انتخاب شروع پایان رشته را نیز دارد.

var str = "Hello world!";
var res = str.slice(3, 8);
// expected output: "lo world! "

❗️ حالا تصور کنید میخوایید اعداد تک رقمی را دو رقمی نمایش دهید مانند نمایش ماه یا روز در تاریخ به صورت زیر :
1400/02/09

برای اینکه اعداد کوچکتراز ده ما همیشه دو رقمی نمایش داده شود و if و else هم استفاده نکنیم کافی است از همین متد slice استفاده کنیم به این صورت که یک “0” سمت چپ عدد ماه قرار میدیم و از انتها 2 کاراکتر از سمت راست یا انتها (2-) بر میداریم . بصورت زیر :

var myNumber = 7;
var myNumber2 = 11;
var formattedNumber = ("0" + myNumber).slice(-2);
// expected formattedNumber: 07

var formattedNumber2 = ("0" + myNumber2).slice(-2);
// expected formattedNumber2: 11

@fullStackDevs

#javaScript_tricks
#js

❇️ در این پست چندتا تکنیک جاوا اسکریپتی معرفی میکنیم که امیداوریم براتون مفید واقع بشه.

🔹لاگ سریع در console به کمک object literal میتونید متغیرهاتون رو خیلی سریع و خوانا لاگ بزنید.
const myVar = 'foo'
const otherVar = 2

// output:
// {myVar: "foo", otherVar: 2}
console.log({ myVar, otherVar })

به این ترتیب یه آبجکت میسازین و مقدار هر پراپرتیش به همراه نامش در کنسول لاگ میشه.

🔹نمایش نام پارامترهای تابع به همراه تایپ شون.
به کمک object destructuring در جاوا اسکریپت و مشخص کردن مقدار پیشفرض برای پارامتر های تابع میتونید موقع صدا زدن تابع نام پارامتر ها به همراه تایپ اونها رو داشته باشید و از آنجایی که به پارامترتون مقدار پیشفرض دادید به صورت optional هست و به شکل های متفاوت میتونید تابع تون رو صدا بزنید.

const notify = (msg, { type = 'info', timeout, close = true } = {}) => {
  // display notification
}

notify('Hi!')
notify('Hi!', { type: 'error' })
notify('Hi!', { type: 'warn', close: false })

🔹کلون کردن آرایه.
از اونجایی که ارایه ها با رفرنسشون پاس داده میشن به کمک spread operator میتونید یک آرایه رو به راحتی کلون کنید.
const manipulateList = (list) => {
// defensively copy list
const copiedList = [...list]

// do something with copiedList
}

🔹 اجباری کردن پارامترهای تابع
به کمک مقدار دهی پیشفرض برای پارامترهای تابع و به کمک این تکنیک میتونید پارامترهای توابع تون رو درصورتی که مقداری براشون پاس داده نشده اجباری کنید.
const throwIfMissing = () => {
throw new Error('Missing parameter')
}
const func = (requiredParam = throwIfMissing()) => {
// some implementation
}


🔹رکوئست های زماندار (برای fetch api)
دیگر لایبری های رایج جاوااسکریپتی مثل jquery ajax و axios این امکان رو بهتون میدن تا برای درخواستتون یک timeout تنظیم کنین و درصورتی که در زمان مشخص شده رکوئست انجام نشد، خودکار fail بشه.
متد fetch در مرورگر های جدید به صورت توکار چنین قابلیتی رو نداره اما به کمک این تکنیک میتونید اینکار رو انجام بدید.

const timeout = (delay = 30000) => {
return new Promise((resolve, reject) => {
const rejectWithError = () => {
reject(new Error('Timed out!'))
}

setTimeout(rejectWithError, delay)
})
}

const fetchWithTimeout = (url, delay = 3000) => {
// construct an array to pass to `Promise.race`
return Promise.race([fetch(url), timeout(delay)])
}

fetchWithTimeout('/json/data.json', 1000)
.then((response) => {
// successful response before the 1 s timeout
console.log('successful response', response)
})
.catch((e) => {
// Either the timeout occurred or some other error.
// Would need to check the method or use a custom
// Error subclass in timeout
console.error('request error', e)
})

🔹تبدیل رشته به عدد .
برای تبدیل رشته های عددی به معادل number ای شون از این تکنیک استفاده کنید.
let int = "15";

int = +int;

اگر جایی امکان استفاده از عملگر + نداشتید از دوتا عملگر ~~ استفاده کنید.

@fullStackDevs

#js
#ECMAScript

javascript - ECMAScript


@fullStackDevs

#Js
#javascript
#Trick

Object.keys, values, entries

These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too.

They are supported for:

Map
Set
Array

Object.keys(obj) – returns an array of keys.
Object.values(obj) – returns an array of values.
Object.entries(obj) – returns an array of [key, value] pairs.

https://javascript.info/keys-values-entries

@fullStackDevs

#Js
#Function

JavaScript Functions 4 ways

1️⃣ Functions Declaration

A function created with a function declaration is a Function object and has all the properties, methods and behavior of Function objects.

2️⃣ Functions Expression

The function keyword can be used to define a function inside an expression.

The main difference between a function expression and a function declaration is the function name .

3️⃣ Arrow Function Expression

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

4️⃣ Concise Arrow Function Expression

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit

return

statement.

@fullStackDevs

🔰 ماژول ها در جاوا اسکریپت.

هر چه اپلیکیشن بزرگتر و پیچیده تر می شود این نیاز حس می شود که کد های خود را به فایل های جدا تقسیم کنیم. درواقع یک ماژول یک فانکشن یا گروهی از فانکشن های مشابه است که درون یک فایل برای انجام یک تسک خاص دسته بندی شده اند.

🔹 هدف از ساختن ماژول ها دسته بندی و ساختار بندی بهتر Codebase تان میباشد.
مهم ترین دلیل استفاده از ماژول ها برای تقسیم یک برنامه بزرگ به بخش های کوچکتر که قابلیت مدیریت اسان تر را دارا هستند میباشد.

🔸با این وجود ماژول ها بایستی ویژگی هایی داشته باشند که مهمترین آنها عبارتند از :

▫️ ویژگی وابسته نبودن یا Independent
ماژول ها باید تا حد ممکن از دیگر ماژول ها جدا و بدون وابستگی باشند.

▫️ مختص بودن
یک ماژول برای انجام یک تسک یا گروهی از تسک های بهم مرتبط ساخته می شود و مهمترین جنبه ساختن آنها در وهله اول جدا کردن functionality می باشد. (هر ماژول یک نوع تسک)
▫️قابلیت استفاده مجدد
یک ماژول بابد این قابلیت را داشته باشد که بتوان از آن به دفعات مکرر در قسمت های مختلف کد استفاده کرد. در واقع ماموریت انجام یک تسک بخصوص در قسمت های مختلف کد برعهده یک ماژول است.

🔸از طرفی ماژول ها می توانند باهم ارتباط هم برقرار کند
در جاواسکریپت برای اینکه ماژولی بیرون از فایل در دسترس باشد از کلمه کلیدی export استفاده می کنیم در مقابل اگر ماژولی بخواهد از ماژول دیگر استفاده کند باید آنرا import کند.

🔹فرق یک ماژول و یک اسکریپت معمولی در چیست ؟

▫️ یک ماژول همیشه در حالت strict اجرا می شود
▫️هر ماژول scope خودش را دارد و متغیر های تعریف شده در یک ماژول حالت عادی در ماژول دیگر قابل مشاهده نیستند. مگر آنها را export کنید.
▫️ اگر یک ماژول را به دفعات زیاد در کد import کنید، کدهای آن ماژول فقط یکبار اجرا می شوند.
بنابراین اگر ماژولی ابجکتی export کند و آن ماژول در ماژول های متعدد import شود، تغییرات ایجاد شده بروی آبجکت export شده در سایر ماژول ها قابل دسترس خواهد بود.
اگر بخواهید کد های ماژولی با هر بار صدا زده شدن، اجر شوند، باید به عنوان یک فانکشن export شوند.
▫️آبجکت import.meta
از طریق این آبجکت می توانید بسته به محیطی که ماژول در آن است اطلاعاتی در مورد ماژول دریافت کنید.
برای مثال در مرورگر آدرس ماژول را دریافت می کنید.

در پایان سال خوبی را برایتان ارزومندیم.♥️

#js
#modules
@FullStackDevs