CleverDevs
8.41K subscribers
709 photos
280 videos
27 files
415 links
به کانال کلوردوز خوش اومدین

سعی میکنیم چیزایی که بنظر کاربردی هستن رو باهاتون به اشتراک بزاریم


🔥لینوکس
🔥برنامه نویسی فرانت‌اند
🔥برنامه نویسی بک‌اند
🔥اخبار تکنولوژی و...

CleverDevs are better than other Devs
💢~> @mmdrsdev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
شاید شماهم اولین بار که Html یاد گرفتید میرفتید و محتوای سایت هارو عوض میکردید و فاز هکری میگرفتید

تو جاوا اسکریپت میتونید با استفاده از designMode این کارو راحت تر هم بکنید

اینطوریه که شما میاید کد زیر رو تو کنسول میزنید

document.designMode = "on"
و دیگه نیازی نیست که برا عوض کردن هر المنت. از اینسپکتور انتخابش کنید


این قابلیت تو پروژه های خودتون هم ممکنه بدردتون بخوره👌

#js
@CleverDevs
@CleverDevsGp
👍291🔥1
#Js - Top Level await
قبلا شما از کلمه await فقط میتونستید در فانکشن‌های async استفاده کنید.
اما با Es2022 از این قابلیت خارج از فانکشن ها هم میشه استفاده کرد.

const data = await fetch("api")
@CleverDevs
@CleverDevsGp
👌15👍5🆒32👎1
روش یک‌خطی حذف تکرار های اضافی از یک آرایه🫨 :

const arr = ["a", "b", "a"];

const uniq = arr.filter((item, index) => arr.indexOf(item) === index);
بجای استفاده از متد فیلتر و کد بالا خیلی راحت با یه خط سر و ته کارو هم بیارید😉👇

const uniq = [...new Set(arr)];
#Js
@CleverDevs
@CleverDevsGp
👍13🆒4🔥32🤯1💯1
#Js - get information about battery

توی جاوااسکریپت با استفاده از navigator میتونید اطلاعات باتری کاربر رو بگیرید و حتی بفهمید کی لپتاپش رو میزنه به شارژ و .. .

const batteryInfo = await navigator.getBattery();

چیزی که این متد ریترن میکنه یه پرامیس هست.
پی‌نوشت

@CleverDevs
@CleverDevsGp
👍13🔥43
ساختار پروژه ReactJs 👌


#js #reactjs
@CleverDevs
@CleverDevsGp
💯13🔥4👎2🆒2
8 تابع مربوط به اعداد در جاوااسکریپت🔥

#js
@CleverDevs
@CleverDevsGp
👍8🔥322🆒1
برای خوندن متنی که کاربر داخل کلیپ‌بورد خودش داره میتونید از navigator استفاده کنید.

navigator.clipboard.readText()
.then(copiedText => consloe.log(copiedText));

چیزی که متد readText ریترن میکنه یه پرامیس هست و امکان ریجکت شدنش هم هست چون کاربر حتما باید اجازه بده برای http.

#Js
@CleverDevs - @CleverDevsGp
👍101🆒1
#Js - Fullscreen
ممکنه که بخواید توی سایتتون بخواید یه عکسی رو فول‌اسکرین کنید یا دارید یه ویدئو پلیر می‌نویسید و میخواید از این فیچر استفاده کنید؛ برای این کار شما به این Web API نیاز دارید.

HTML:
<img class="img" src="imgAddress"> 
<button class="open">O</button>


Js:
const img = document.querySelector(".img") 
const fullscreenImgBtn = document.querySelector(".open")

fullscreenImgBtn.addEventListener('click', () => img.requestFullscreen())

img.addEventListener('dblclick', () => document.exitFullscreen())
توی این کد ما یه عکس داریم که وقتی روی دکمه کلیک میشه، فول‌اسکرین میشه و وقتی در حالت فو‌ل‌اسکرین اگه روی عکس دابل‌کلیک شه از اون حالت در میاد.

@CleverDevs - @CleverDevsGp
👍121💯1🆒1
#Js #React - enable Emmet support for jsx in vscode react

اگه میخواید توی jsx هم از Emmet استفاده کنید این مراحل رو طی کنید:
1: توی ستینگ vscode از منوی سمت چپ روی extensions بزنید.
2: روی Emmet بزنید و سمت راست روی edit in setting.json رو بزنید.
3: این تیکه کد رو اونجا پیست کنید:

"emmet.includeLanguage": {
"javascript": "javascriptreact"
}
@CleverDevs - @CleverDevsGp
👍8💯2🆒21
اگه داری یه سایت میسازی و میخوای حالت ریسپانسیوش رو برای همه دیوایس ها تست کنی میتونی از برنامه Responsively App استفاده کنی


تو این برنامه میتونی انواع اسکرین های موجود رو کنار هم بزاری یا حتی خودت یه سایز اسکرین کاستوم شده رو بدی و کنار هم خروجی کار رو ببینی

درکنار این یه سری قابلیت ها مثل فعال کردن دیزاین مود و گرفتن اسکرین شات از همه صفحات و .... داره

اگه فرانت کاری حتما تستش کن

برای دانلود و نصب هم یه نگاه به سایتش بندازید

responsively.app

#tools
@CleverDevs - @CleverDevsGp
🔥15👍9🆒32💯1
وقتی برای یه ارایه ای length رو برابر با یه عددی بزاری درواقع یه محدودیت برای ارایه ایجاد میشه و تعداد اعضاش بیشتر از اون عدد نمیشه


ممکنه جاهایی که نیاز دارید ارایه تون از یه تعداد خاص بیشتر نشه بدردتون بخوره

کد بالا هم میاد ایتم رو به اول ارایه اضافه میکنه و اگه تعداد ایتم ها بیشتر از 3 تا باشه اخری هارو حساب نمیکنه

#js
@CleverDevs - @CleverDevsGp
🔥16💯3🆒2👍1👌1
خروجی چی میشه ؟

#js
@CleverDevs - @CleverDevsGp
😁15🆒4👌2
ساخت QR code با جاوااسکریپت!

const size = "150×150";
const data = "https://t.me/CleverDevs";

const API = https://api.qrserver.com/v1/create-qr-code/?size=${size}&data=${data};


+ از api رایگان این سایت برای تولید QR code استفاده کردیم.

+ داکش رو مطالعه کنید گزینه‌هایی برای شخصی‌سازی هم داره.

#Js #Tools
@CleverDevs - @CleverDevsGp
20👍10🆒43🔥2💯1
$$typeof property


توی React وقتی یه کامپوننت رو لاگ میگیریم، یه پراپرتی با این اسم میبینیم و هدفش جلوگیری از حملاتی مثل Cross-Site Scripting هست؛ حالا چطور انجام میشه؟

مقدار این پراپرتی یه Symbol هست، و یکی از Primitive تایپ‌های Js هست که نمیتونه به JSON تبدیل بشه، بخاطر همین اگه هکر بخواد یه کامپوننت فیک به سایتمون ارسال کنه ریکت متوجه این قضیه میشه.
#React #Js
@CleverDevs - @CleverDevsGp
👍14🔥3👌32
Built-In AI in your browser!


مثل این‌ که کروم داره روی یه WebAPI جدید کار میکنه؛ هوش مصنوعی!

این WebAPI فعلا روی آخرین نسخه کروم قناری🐦 کار میکنه.

نمونه کد رو میتونید تو عکس ببینید.

#Js #Javascript #AI SRC
@CleverDevs @CleverDevsGp
120👍8👌4🆒3
Bye Bye try-catch blocks!

?=


مثل اینکه یه آپدیت برای Js قراره بیاد و ارور هندلینگ رو متحول کنه.

الان، برای ارور هندلینگ از try-catch استفاده میکنیم، ولی توی این آپدیت قراره
Safe Assignment Operator
اضافه شه، که خیلی سینتکس تمیز تری داره:
async function getData() {
     const [error, response] ?= await fetch("https://api.example.com/data");
     if (error) return handleError(error);
     return response;
   }


چندتا مزیتش:
👈 نستینگ و تو‌در‌تو بودن کدها کم‌تر میشه.

👈 ای‌پی‌آی های مختلف، ممکنه ارور هندلینگ متفاوتی داشته باشن، و با این روش دیگه نیاز نیست توی بلاک catch شرط‌های مختلف بذاریم.

👈 میتونیم با استفاده از Symbol.result ارور
هندلینگ سفارشی داشته باشیم، اینجوری:
function example() {
     return {
       [Symbol.result]() {
         return [new Error("Error message"), null];
       },
     };
   }
   const [error, result] ?= example();


// البته فعلا چیزی برای جایگزینی بلاک finally گفته نشده که میتونه یکی از معایبش باشه.

#Js #Es Source
@CleverDevs @CleverDevsGp
👍218👌3🔥1
جاوااسکریپت نژادپرسته

#fun #js
@CleverDevs - @CleverDevsGp
🤣178😁8👍4💔1
یکی از بچه های چنل یه پروژه ای توسعه داده که اگه نیاز به استان ها و شهر های ایران داشتید میتونید ازش استفاده کنید
این کتابخونه متد های مختلفی داره که ازشون میتونید برای پیدا کردن شهرهای یک استان و ... استفاده کنید

لینک گیت‌هاب‌ :

https://github.com/mohammad-hassani/iran-city

لینک npmjs :

https://www.npmjs.com/package/iran-city

#openSource #js
@CleverDevs - @CleverDevsGp
🔥29👍154👎1
This media is not supported in your browser
VIEW IN TELEGRAM
دیدید میرید تو بعضی از سایتا اولش یه راهنما دارن که نشون میده بخش های سایت چیکار میکنن و یاد میدن چطور باید باهاش کار کنید

با استفاده از کتابخونه driverjs میتونید یه همچین چیزی رو پیاده کنید

برای دیدن روش نصب و استفادش میتونید به داکیومنتش سر بزنید

https://driverjs.com/docs/installation

#js #tools
@CleverDevs - @CleverDevsGp
🔥35👍151