💀💀💀

#fun
☕️ @CodeExplore

ویژگی pointer-events در CSS 🔵

تعیین می‌کند که آیا یک المان به تعاملات ماوس و لمس پاسخ بده یا نه. با استفاده از مقدار none، می‌تونی المان رو طوری تنظیم کنی که به کلیک‌ها و سایر رویدادهای اشاره‌گر پاسخ نده.
مثال:

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

#css #pointer_events #trick
☕️ @CodeExplore

سه کتاب کمتر شناخته شده مناسب برای طراحان سایت 📚

🔢 "Eloquent JavaScript" by Marijn Haverbeke
این کتاب یه منبع عالی برای یادگیری جاوااسکریپت به صورت عمیق و مفصل هست. نویسنده با زبانی ساده و روان، مفاهیم پیچیده رو توضیح می‌ده و کلی تمرین کاربردی داره. اگه می‌خوای جاوااسکریپت رو به خوبی بفهمی، حتماً به این کتاب یه نگاهی بنداز.

🔥🔥🔥🔥🔥🔥🔥🔥

🔢 "You Don't Know JS (Yet)" by Kyle Simpson
این مجموعه کتاب‌ها به جاوااسکریپت از دیدگاهی جدید و عمیق نگاه می‌کنه و حتی برنامه‌نویس‌های باتجربه هم می‌تونن کلی چیز جدید یاد بگیرن. هر کتاب روی یه جنبه خاص از جاوااسکریپت تمرکز داره و بهت کمک می‌کنه که واقعاً بفهمی چطور این زبان کار می‌کنه. برای کسی که دنبال درک عمیق‌تر از جاوااسکریپت هست، این کتاب‌ها عالی‌ان.

🔥🔥🔥🔥🔥🔥🔥🔥

🔢 "Learning Web Design" by Jennifer Robbins
این کتاب برای کسایی که تازه می‌خوان وارد دنیای طراحی وب بشن، فوق‌العاده مفیده. نویسنده از پایه شروع می‌کنه و مفاهیم HTML، CSS و طراحی پاسخ‌گو(ممنونم از عبارات فارسی، منظور رسپانسیو یا Responsive Design هستش) رو به خوبی توضیح می‌ده. حتی اگه تازه‌کاری، این کتاب می‌تونه یه راهنمای عالی برات باشه تا مبانی طراحی وب رو یاد بگیری.

#book
☕️ @CodeExplore

🔴میخام یه لیست از فونت های پرکاربرد بهتون بدم که برین عشق کنین

فونت های انگلیسی محبوب:
➡️Roboto

➡️Poppins

➡️Libre Frenklin

➡️Raleway

➡️Times New Roman

➡️Arial

فونت های فارسی خفن:

◀️وزیر : فارسی / عربی

◀️یکان

◀️اکن : دیجی کالا

◀️شبنم

◀️سمیم

#font
☕️ @CodeExplore

9️⃣ آموزش ریجکس (regex) (عبارت های با قاعده) ☺️ - قسمت نهم (قسمت پایانی)

امروز آخرین مورد رو در ریجکس کار میکنیم و شما را به خدای بزرگ میسپاریم 🤩

❤️ باز مث همیشه متن زیر رو در نظر بگیرید:

pen: 1 rial
drug: 2 rial
paper: 3 rial
cake: 4 £
car: 5 $

🧠 خب ، ما قراره از متن بالا، اعدادی رو پیدا کنیم که بعدشون ریال باشه. در گام اول همچین ریجکسی به ذهنتون میرسه :

/\d+ rial/img

1 rial, 2 rial, 3 rial

✅ خب الان مشکل ما حل شد ، اما اگر دقت کنید ، عباراتی که برگردوند ، همراه خودشون rial رو هم داره. اگه ما فقط نیاز به اعداد داشته باشیم باید چیکار کنیم؟
اینجاست که ریجکس یه نماد دیگه رو معرفی میکنه برای حل مشکل و اون نماد اینه: (=?)
قبل از توضیح بزارید ریجکسشو بنویسم:

/\d+(?= rial)/img

1, 2, 3

🏠 الان متوجه شدید که با این روش، دیگه rial توی عبارات پیدا شده نمایان نمیشه. در واقع ریجکس بالا به فارسی میشه این : اعدادی رو پیدا کن که قبل از rial وجود داشته باشن.

حالا فرض کنید میخوایم اعدادی رو بدست بیاریم که بعدشون rial نباشه (فقط میدونیم بعدشون ریال نیست ، و ممکنه هرچیزی بعدشون باشه)

🔔 برای اینکار از نماد (!?) استفاده میکنیم ، که دقیقا معکوس نماد بالا عمل میکنه. باز ریجکسشو مینویسم و بعد توضیح میدم :

/\d(?! rial)/img

4, 5

🥸 به زبان فارسی، ریجکس بالا یعنی دنبال اعدادی بگرد که قبل از rial نباشن.


⛔️ این دو نمادی که گفتم ، برای ادامه جمله است ، پس هیچ وقت اول ریجکس نوشته نمیشه!

⚫️ دوتا نماد دیگه هم داریم که دقیقا مثل همین دوتا نماد بالا کار میکنن، اما برای بررسی کلمه قبلی هستن (یعنی چک میکنن فلان چیز قبل عبارت ما اومده یا نه)

بیاید متنو یه تغییری بدیم و اینارم تست کنیم :

13 05 1381
17 02 1380
22 03 1386
11 11 1380

❗️ با توجه به متن بالا، ما چندین تاریخ تولد داریم؛ ما میخوایم فقط اعداد ماه تولد رو بدست بیاریم (اعداد وسط)
پس اگه بخوایم فارسی ریجکس بنویسیم میگیم: دنبال اعدادی 2 رقمی بگرد که قبلشون یه عدد 2 رقمی دیگه باشه.
ریجکسش میشه این:

/(?<=\d{2} )\d{2} /img

05 , 02 , 03 , 11

💡 نماد بالا به این صورته : (=<?) و مقادیر شما باید دقیقا بعد از = قراره بگیره!

نماد بعدی هم به این صورته : (!>?) که معنی فارسیش میشه ، دنبال چیز بگرد که بعد از فلان چیز قرار نگرفته باشه!

برای این مثال نمیزنم و میخوام خودتون توی کامنت یه متن و یه ریجکس بنویسید که از نماد آخری استفاده کنه 😬


آموزش ریجکس ما همینجا به پایان میرسه 😱
روز خوبی داشته باشید و برای یادگیری تمرین کنید :)


من بازم 2 تا سایت قبلی رو معرفی میکنم
که میتونید با جفتش ریجکس رو یاد بگیرید و تمرین کنید :

site 1
site 2


#regex #regular_expression
#regex_9 #regex_end
☕️ @CodeExplore

⚪️سایت Miro یک ابزار قدرتمند برای کار گروهی آنلاینه و به شما این امکان رو میده تا در یک فضای گرافیکی، از ایده‌پردازی تا اجرا، همه مراحل کار رو انجام بدید. از ویژگی های مهم Miro میشه به امکان اضافه کردن نمودارهای مرتبط و ترتیب دادن اونها، اضافه کردن توضیحات به هر المان، اشتراک‌ گذاری و همکاری همزمان با اعضای تیم، و قابلیت اتصال به ابزارها و سرویس‌های دیگه مانند Google Drive، Trello، Jira و ... اشاره کرد.

💡 از طریق Miro، افراد و تیم ها میتونن ارتباط برقرار کنن و به صورت آنلاین روی پروژه هاشون کار کنن.

🔗 https://miro.com

#miro #interactive #team
☕️ @CodeExplore

اهداف نه تنها برای انگیزه دادن به ما، بلکه برای اینکه ما راه زنده نگه دارند ضروری هستند.

" Robert H. Schuller "

#motivational
☕️ @CodeExplore

بزرگترین درد جهان وجود ندا...

#fun
☕️ @CodeExplore

🔥سرعت لود سایت یکی از مهم ترین ویژگی های هر سایتیه و توی فرانت اند خیلی خیلی مهمه
یکی از بزرگ ترین مشکلاتی که باعث میشن سایتمون دیر تر لود بشه، عکس ها هستن، عکس ها خیلی وقتا اذیتمون میکنن و سرعت رو میارن پایین، خب با سایت زیر راحت میتونین فرمت های JPEG , PNG , GIF و حتی PDF رو فشرده کنین

🌐 https://compresspng.com/

#site
☕️ @CodeExplore

کاربرد has() در CSS 🔵

💻 فرض کن می‌خوای تمام کارت‌هایی که داخلشون یک دکمه وجود داره، با یه حاشیه خاص نمایش داده بشن:

.card:has(button) {
  border: 2px solid blue;
}

اینجا، :has(button) تمام .card هایی که شامل یک button هستند رو هدف قرار می‌ده و بهشون حاشیه آبی می‌ده.

#css #trick #has
☕️ @CodeExplore

0️⃣1️⃣ آموزش ریجکس (regex) (عبارت های با قاعده) ☺️ - قسمت دهم (ذکر چندین مثال)

خب دوستان قراره امروز چنتا مثال فقط حل کنیم تا ریجکس یکم بیشتر دستمون بیاد :)

برای اینکه مثالامون واقعی تر باشه هم از مواردی استفاده میکنم که قبلا استفاده کردم ، یا توی ریجکس خیلی پر استفاده است.

⏯️ اولین مثال ، مثال خیلی کاربردیه، و برای پیدا کردن انواع ایمیل به کار میره. (ممکنه از طولش بترسید ولی خیلی سادست)

/(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)/img

ریجکس بالا یه مدل ساده از ولیدیشن ایمیله! و مدل های بهتری هم هست که ولیدیشن با فیلتر رو پیاده سازی کنه!

2️⃣ فرض کنید یه صفحه html دانلود کردید که میخواید هم تگ های img رو ازش واکشی کنید. برای این کار از ریجکس زیر استفاده میکنیم:

/<img .*\s*.*>/img

3️⃣ حالا فرض کنید یه متن طولانی دارید و میخواید آدرس های اینترنتی رو ازش واکشی کنید که https باشن، ریجکس این مورد یکم طولانیه :

/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/img

✅ حالا چرا فقط مثال زدم و توضیح خاصی ندادم؟
چون میخوام خودتون برای خودتون توضیح بدید و درک کنید که دقیقا چه اتفاقی افتاده. 😒


توی کامنت برام مثال بزنید، یا کاربرد های دیگشو بگید (یا اگه ریجکس چیزی رو مطمئن نیستید بیاید با هم ریجکسشو پیدا کنیم)


روز خوبی داشته باشید 😔


#regex #regular_expression
#regex_10 #regex_example
☕️ @CodeExplore

🔥 این سایت رو هرجایی که میتونی ذخیره کن!

▪️فرض کن یه متنی داشتی ، خودت یا کس دیگه‌ای اون متن رو تغییر داده ، آپدیت کرده یا یه چیزایی رو ازش حذف و اضافه کرده!

▪️حالا تو میخوای متن اصلی خودت رو با متن جدید مقایسه کنی و ببینی که چه تغییراتی داشته ، مثلا چه چیزایی بهش اضافه شده یا چه چیزایی ازش کم شده.

▪️با هوش مصنوعی Diff Checker به راحتی میتونید این کار رو انجام بدید ، متن قبلی و جدید رو وارد می‌کنید ، اون قسمت هایی که هایلایت قرمزه یعنی حذف شده و اون قسمتایی که سبزه یعنی اضافه شده ؛)

🔺 جذااب ترین نکتش برای برنامه‌نویساست ، میتونن کد قدیمی و جدید خودشون رو باهم مقایسه کن ، تازه از داکیومنت و فایل اکسل و.. هم پشتیبانی میکنه

☕️ @CodeExplore

زمان قاجار هم جاوا مینوشتن 😑

#fun
☕️ @CodeExplore | </nebras>

😫برنامه نویسی و از ChatGPT استفاده میکنی...؟!

⬅️شرکت Mistral با ارائه ابزار Codestral 22B، گامی بلند در جهت ارتقای تولید کد برداشته. این ابزار با عملکردی فراتر از مدل‌های پیشین مانند GPT4o، قادر به نوشتن 22 میلیارد خط کد در چند ثانیه، ادغام با یک کلیک در VSCode و پشتیبانی از 80 زبان برنامه‌نویسی است. این امر نشان‌دهنده پیشرفتی قابل توجه در زمینه تولید کد خودکار است.

📃تو ویدیو ضمیمه شده هم میتونید تواناییش رو درمقایسه با ChatGPT مشاهده کنید ؛)

🗺https://chat.mistral.ai/

#Site #Ai
☕️ @CodeExplore

💎داخل نمودار بالا براتون پرفورمنس فریمورک های جاوا اسکریپت رو توی زمان های مختلف اورده

دقت کنین هرچی خط مربوط به نمودار پایین تر باشه یعنی پرفورمنس بهتری داره

✨و طبق این نمودار در سال 2023 بیشترین پرفورمنس مربوط به فریمورک Solid و کمترین پرفورمنس مربوط به React هست البته الان 2024 هستیم و اپدیت ها ممکنه کمی تغییر کرده باشه

✔️بیشتر بخایم راجب این نمودار صحبت کنیم باید بگیم که Angular پرفورمنس بهتری از React داره ولی در آخر Vue.js از همه فریمورک ها به جز Solid، پرفورمنسش بهتره

دوستان لطف کنین تعصبی برخورد نکنین، میتونین با سرچ و... این بنچ مارک هارو به دست بیارین

☕️ @CodeExplore

عملگر Warlus در پایتون ⌨️

ℹ️عملگر Walrus به صورت := نوشته می‌شه و به اسم "Walrus Operator" شناخته می‌شه، این ویژگی از پایتون ۳.۸ به بعد اضافه شد، این عملگر بهت اجازه می‌ده تا در یک عبارت، هم متغیری رو مقداردهی کنی و هم از اون مقدار استفاده کنی. به این صورت می‌تونی کدهای خلاصه‌تر و خواناتری بنویسی. اینجا چندتا از کاربردهاش رو براتون گفتیم:

1️⃣ استفاده در حلقه‌ها

وقتی بخوای یه متغیر رو داخل یه حلقه مقداردهی و همزمان بررسی کنی، Walrus Operator بهت کمک می‌کنه:

while (n := len(some_list)) > 0:
    print(f"List has {n} elements")
    some_list.pop()

اینجا، n := len(some_list) طول لیست رو محاسبه می‌کنه و به n اختصاص می‌ده، بعد بررسی می‌کنه که آیا بزرگتر از صفر هست یا نه. همزمان مقدار n رو هم برای چاپ استفاده می‌کنه.

2️⃣ استفاده در شرط‌ها

برای بررسی و استفاده از مقدار یک متغیر در شرط‌ها:

if (match := re.search(pattern, text)) is not None:
    print(f"Found match: {match.group(0)}")

اینجا، re.search(pattern, text) نتیجه جستجو رو به match اختصاص می‌ده و همزمان بررسی می‌کنه که آیا نتیجه None نیست.

3️⃣ استفاده در comprehension‌ها

عملگر Walrus می‌تونه در list comprehensions هم به کار بره، تا محاسبات و فیلترهای پیچیده‌تر رو ساده‌تر کنه:

results = [y := f(x), y**2 for x in range(10) if (y := f(x)) > 0]

اینجا، y := f(x) تابع فرضی f(x) رو محاسبه می‌کنه و به y اختصاص می‌ده، سپس از y هم برای شرط فیلتر و هم برای تولید مقادیر جدید استفاده می‌کنه.

💬چه کاربرد های دیگه ای به ذهنتون میرسه؟🤨

#python #walrus
☕️ @CodeExplore

🆓 توی این سایت آیکن های متفاوت رایگان و پراستفاده هستش که میتونید برای طرح های مختلف سایت یا اپلیکیشن هایی که میزنید استفاده کنید.

🔗 https://www.streamlinehq.com/icons/core-sets

#icons #free #design
☕️ @CodeExplore

یک شخص برنامه نویس که توی آمریکا زندگی میکنه و تجربیات خودش رو در زمینه‌ زندگی شخصی، اجتماعی، کاری، مهاجرت، و برنامه‌نویسی رو جمع‌آوری میکنه و در اختیار بقیه هم قرار میده میتونید ازین قسمت مطالعه کنید.

👉 https://locomo.tips/

☕️ @CodeExplore

راه موفقیت همیشه در حال ساخت است. موفقیت پیش رفتن است، نه به نقطه پایان رسیدن.

" آنتونی رابینز "

#motivational
☕️ @CodeExplore