#JS
#HTML
#Editor
معرفی چند ادیتور آنلاین HTML کاربردی

برای نوشتن کدهای HTML می توانید از یک ادیتور آنلاین HTML استفاده کنید. در این ادیتور آنلاین HTML امکان نوشتن جاواسکریپت و CSS هم به صورت همزمان وجود دارد.

بهترین موضوع درباره ادیتور آنلاین HTML این است که شما آن را مستقیم روی مرورگر خود استفاده می‌ کنید و می توانید نتیجه آن را ببینید.


1-ادیتور آنلاین Codepen

Codepen محیطی برای توسعه کدهایتان است. در این ادیتور آنلاین HTML شما قابلیت به اشتراک گذاری و ذخیره کدهایتان را دارید. خود ادیتور فضای ساده ای دارد و یک پلتفرم برای HTML، CSS و جاواسکریپت دارد و سایز هر صفحه را می توانید خودتان تغییر دهید.

2-ادیتور آنلاین JSFiddle

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

3-ادیتور آنلاین JSBin

JSBin مانند یک نسخه جمع و جورتر JSFiddle است. شما می توانید کدهایی با فرمت جاواسکریپت، HTML و یا CSS را ادیت کنید. تنها کافیست از گزینه های بالای صفحه استفاده کنید و هر یک از فرمت کدهایی که می خواهید استفاده کنید را انتخاب کنید. شما همچنین می توانید از دو صفحه نمایش و کنسول به صورت همزمان استفاده کنید تا تسلط بیشتری روی کد داشته باشید.

ادیتور JSFiddle به شما اجازه می دهد تا از منابع خارجی هم به کدهایتان ادیتور آنلاین HTML اضافه کنید اما در JSBin تنها کتابخانه هایی از پیش تعریف شده از جاواسکریپت وجود دارد و شما آن ها را می توانید اضافه کنید. اما این کتابخانه به اندازه کافی گستردگی دارد که کار شما را راه بندازند. از کتابخانه های jQuery تا React و Angular در این ادیتور آنلاین HTML وجود دارد.


4-ادیتور آنلاین Liveweave

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

Lorem Ipsum Generator به شما امکانی می دهد تا کد را روی جایی که نشانگر قرار دارد نگه دارید. همچنین ویژگی CSS Explorer به شما امکان این را می دهد که یک ابزار WYSIWYG برای ساخت استایل های CSS داشته باشید. Color Explorer به شما امکان این را می دهد که تم مورد علاقه خود را با رنگ دلخواه داشته باشید. Vector Editor هم به شما امکان ساخت تصاویر گرافیکی وکتور برای سایتتان را می دهد.

4-ادیتور آنلاین HTMLhouse

ادیتور آنلاین HTMLhouse برای کسانی که فقط به ادیت کدهای HTML نیاز دارند گزینه خوبی می باشد ولی اگر کدهای CSS یا جاواسکریپت هم می خواهید به درد شما نمی خورد. این ادیتور آنلاین HTML فضایی به شدت خلوت و جمع و جور دارد و به صورت عمودی تقسیم بنده شده و شما کد را در سمت چپ می نویسید و نتیجه را به صورت لحظه ای در سمت راست این ادیتور مشاهده می کنید.

یکی از ویژگی های این ادیتور آنلاین HTML این است که شما می توانید کدهایتان را به صورت خصوصی منتشر کنید و یک URL برای آن دریافت کنید. شما می توانید کدهایتان را در معرض دید عموم هم قرار دهید که در این صورت کدها در قسمت HTMLhouse's Browse page به نمایش در می آید. این ویژگی ساده اما کاربردی است و شما می توانید کدهایتان را به صورت واقعی و در یک URL تماشا کنید.

@ABlueDeveloper

#resources
#js
#react

Interactive React lifecycle methods diagram.


@ABlueDeveloper

https://kutt.it/YolP7Y

#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