کداکسپلور | CodeExplore

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

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

#css #pointer_events #trick ☕️ @CodeExplore

💀💀💀 #fun ☕️ @CodeExplore

📣 اگر داخل ایران با تخصصی که دارید، مشغول به کار هستید 🎯 پیشنهاد ما به شما ادامه همین فعالیت ولی با کارفرمای خارجی هست! 💰 افراد زیادی با این سبک کار درآمد چند هزار دلاری دارند؛ ❓چرا شما نه❓ 🔔 برای شروع این مسیر یک جلسه رایگان روز چهارشنبه ساعت ۱۹ برگزار خواهد شد 🔔 🎙توسط: 🔴 علیرضا قیمتی 🔴 دکتری مدیریت کسب و کار 🔴 ۸ سال سابقه آموزش و فعالیت بین‌المللی 💢 لینک ثبت نام: 🌐 links.etekanesh.com/hshtgprgrm 👈 🔵 کانال تلگرام افراد موفق: 💬 t.me/TekaneshAcademy 🟢 ارتباط با پشتیبانی در صورت بروز مشکل در ورود به جلسه: 👨‍💻 @Academy_Tekanesh ➖➖➖➖➖

ناراضی ترین مشتریان شما، بزرگترین منبع یادگیری شما هستند. " بیل گیتس " #motivational ☕️ @CodeExplore

با استفاده از این سایت میتونید مفاهیم مختلف رو با حل مسائل تعاملی موثر و با 15 دقیقه زمان گذاشتن در روز یاد بگیرید یا تقویت کنید. مباحثی که توی این سایت وجود دارن مسائل ریاضی، Computer Science، برنامه نویسی و هوش مصنوعی، Science & Engineering و... برای شروع هم یسری سوالات میپرسه که باعث میشه خیلی بهتر بتونه بهتون کمک کنه. 👉 https://brilliant.org #programming #ai #computer #science ☕️ @CodeExplore

8️⃣ آموزش ریجکس (regex) (عبارت های با قاعده) ☺️ - قسمت هشتم 🕒 خب ، امروز قراره با چنتا دسته کارکتر دیگه آشنا بشیم. قبلا با d\ و w\ آشنا شدید و نیازی نمیبینم دوباره تکرارش کنم 😔 بزارید مثل همیشه یه متن اینجا بزارم و روی اون چنتا دسته کارکتر تست کنیم:

Toyota Corolla
Ford Raptor
Audi A3
Honda Civic
dodge challenger
BMW M6
peugeot pars 1389
roox TU5 $mark

دسته کارکتر w\ برای حروف انگلیسی - اعداد و علامت آندلاین بود ، حالا دسته کارکتر W\ دقیقا برعکس بالایی عمل میکنه (یعنی هرچیزی رو قبول میکنه، جز حروف ، اعداد و علامت آندلاین)

/\W/img

 , , , , , , , , , , , , , $

❤️ شاید الان بگید ، چرا هیچی برنگردوند؟ و فقط یه دلار خالی آخرشه! باید بگم ، هرچیزی غیر از حروف و اعداد ، فاصله (هر نوع فضای سفید) رو هم شامل میشه ؛ همچنین نمادهای دیگه رو :) 👍 دقیقا برای d\ هم ، D\ داریم. که هرچیزی رو قبول میکنه جز اعداد !

/\D/img

همه حروف و علامت ها و فضای خالی به جز اعداد

دسته کارکتر جدیدی که میخوام بهتون بگم ، s\ که فقط فضاهای خالی رو در نظر میگیره (هر نوع فضایی، مثل اینتر یا اسپیس) و برعکس همین رو هم داریم که میشه ، S\ که هرچیزی رو قبول میکنه ، جز فضای خالی.

/\s/img

هر نوع فضای خالی 

/\S/img

همه چیز ، به جز فضاهای خالی

🐱 چنتا دسته کارکتر دیگه هم داریم که احتمالا توی برنامه نویسی ازشون زیاد استفاده کردید ، مثل n\ که فقط Enter رو قبول میکنه (همون لاین جدید) ✨ شاید در نگاه اول ، اینا به کار نیان، اما در متن های مختلف ، ریجکس های ترکیبی کمک خیلی زیادی بهتون میکنه 🙄 دسته کارکتر بعدی t\ که معنیه tab رو میده و اگه توی متن از tab استفاده بشه ، با تَب ها مطابقت داره 🐱 قبلا در مورد نماد ^ صحبت کردیم ، اما گفته بودم که فقط برای مشخص کردن اول جمله به کار نمیاد! یکی دیگه از کاربر های ^ توی براکت ها مشخص میشه: فرض کنید همچین ریجکسی داریم:

/[a-c]+/img

🖱 ریجکس بالا، تمامی عباراتی رو برمیگردونه که دنباله ایی از کارکتر های a تا c باشن. 🐱 حالا ریجکس پایین ، میاد حالت بالا رو معکوس میکنه! یعنی تمامی عبارت هایی رو برمیگردونه که دنبال ایی از کارکترهای غیر از a و c باشن :)

/[^a-c]/img

نماد ^ توی براکت ها، معکوس سازی رو انجام میده 👻⚡️ 🕓 بیاید قبل از اتمام آموزش امروز ، دسته کارکتر هایی که یاد دادیم رو به صورت براکتی بنویسیم (مثلا w\ میشه [a-zA-Z0-9_]) دسته کارکتر s\ به صورت براکتی میشه :

/[\r\n\t\f\v]/img

🔔 دسته های r\ و f\ و v\ هم یجور فضای خالی به حساب میان. دسته کارکتر S\ هم به صورت براکتی میشه:

/[^\r\n\t\f\v]/img

یعنی ، با یدونه ^ ، همه چی رو معکوس کردیم. حالا شما برای من تو کامنت دسته های d\ و D\ و W\ رو به صورت براکتی بنویسید :) روز خوبی داشته باشید 😔 #regex #regular_expression #regex_8 ☕️ @CodeExplore

🔥احتمال خیلی زیاد یه وقتایی خاستین که یه دیکشنری بسازین و خب دسترسی به api نداشتین! سایت زیر براتون api دیکشنری اماده کرده و استفادش هم خیلی خیلی راحته میتونین به خوبی یه دیکشنری خفن بسازین https://dictionaryapi.dev/ #api ☕️ @CodeExplore

دیباگ کردن کد Regex 🆒 💬یکم قبل تر ، آموزش رجکس گذاشتیم و بعضی دوستان میگفتن رجکس بخاطر باگ یابی سختش، استفاده نمیشه... ℹ️سایت Regex101 یه ابزار خیلی باحال و آنلاین برای ساخت و تست عبارات منظم (Regular Expressions) هست.می‌تونی توش ریجکس‌هات رو بنویسی و همون لحظه نتیجه‌ش رو ببینی. توضیحات واضحی هم درباره هر بخش از ریجکس می‌ده که کارت رو خیلی راحت‌تر می‌کنه. خلاصه، اگه با ریجکس سر و کار داری، حتماً بهش سر بزن! #regex ☕️ @CodeExplore

تابع calc در CSS 🔵 ☄️یه دوست جدید آوردیم براتون،تابع calc تو CSS خیلی بچه باحاله! می‌تونی باهاش راحت محاسبات ریاضی انجام بدی و اندازه‌ها رو دقیق تنظیم کنی. ❓مثال:

.box {
  width: calc(100% - 20px);
}

یعنی عرض المان رو از کل صفحه کم کن 20 پیکسل.خیلی راحت و کاربردی! #css #trick ☕️ @CodeExplore

تابع calc در CSS 🔵 ☄️یه دوست جدید آوردیم براتون،تابع calc تو CSS خیلی بچه باحاله! می‌تونی باهاش راحت محاسبات ریاضی انجام بدی و اندازه‌ها رو دقیق تنظیم کنی. ❓مثال:

.box {
  width: calc(100% - 20px);
}

یعنی عرض المان رو از کل صفحه کم کن 20 پیکسل.خیلی راحت و کاربردی! #css #trick ☕️ @CodeExplore

وقتی بعد از ۶ ساعت دیباگ کردن میفهمی ارور از یک اشتباه تایپی بوده: #fun ☕️ @CodeExplore

تنها راه انجام دادن کار های بزرگ این است که عاشق کارت باشی. " استیو جابز " #motivational ☕️ @CodeExplore

7️⃣ آموزش ریجکس (regex) (عبارت های با قاعده) ☺️ - قسمت هفتم ⬅️ با سلامی دوباره به رو ماهتون، قراره امروز یه مبحث خیلی مهم رو توی ریجکس یاد بگیریم ، و اونم چیزی نیست جز گروه بندی و capture قبلا در مورد براکت صحبت کردیم و گفتیم که پرانتز رو فعلا مشابه بدونید؛ اما امروز قراره این مبحث رو باز ترش کنیم. ⚫️ اول مثل همیشه من یه متن ساده مینویسم :

amir 2002
ali 2000
daniyal 2002
hamid 2012
sobhan 1980

قبل از اینکه بخوام توضیح گروه بندی رو بدم ، بزارید یه ریجکس بنویسم:

/[a-zA-Z]* \d{4}/gm

amir 2002, ali 2000, daniyal 2002, hamid 2012, sobhan 1980

اگه تا حالا با آموزش پیش رفته باشید ، ریجکس بالا رو ساده میتونید بفهمید ؛ کل ریجکس بالا میگه عباراتی رو پیدا کن که ، اولشون کارکتر a تا z (هم بزرگ و هم کوچیک) و در ادامه یک فاصله و یک عدد 4 رقمی وجود داشته باشه. ❗️ این نکته رو هم بگم که ممکنه [a-zA-Z] یکم براتون عجیب به نظر بیاد. ولی خیلی ساده است؛ قبلا با [a-z] آشنا شده بودید ، که یعنی هر کارکتری بین a تا z کوچیک. حالا ما بعدش یه رنج دیگه هم میتونیم مشخص کنیم (حتی میتونیم اعداد مشخص کنیم!) ❗️ با نماد w\ آشنا هستید ، این نماد دقیقا برابر میشه با : [a-zA-Z0-9_] یعنی شما با براکت خیلی راحت میتونید ، رنج های محتلفی ایجاد کنید :) ⛔️ حالا از بحث اصلی خارج نشیم! با ریجکس بالا ما تونستیم اسم به همراه عدد رو دریافت کنیم. اما یه زمانی ما دقیقا همچین حالتی داریم ولی با داده های خیلی زیاد، و میخوایم اسم و اعداد رو از هم جدا کنیم! (روش برای این کار زیاده، روش اول میتونه هندل کردن با زبان برنامه نویسی باشه، روش دوم میتونه نوشتن دوتا ریجکس باشه و روش سوم استفاده از گروه بندیه) وقتی از گروه بندی استفاده میکنیم، یعنی ریجکس خودمون رو به بخش ها واحد دسته بندی کردیم (مثلا توی مثال بالا ، اول اسمه، دوم یه عدد 4 رقمی که سال تولده. ما میتونیم توی ریجکس گروه اول رو به اسم اختصاص بدیم و گروه دوم رو به سن و در دریافت مقادیر یه دسته بندی برای خودمون داشته باشیم) 🚫 بیاید ریجکس بالا رو به صورت گروه بندی شده بنویسیم:

([a-zA-Z]*) (\d{4})

amir 2002, ali 2000, daniyal 2002, hamid 2012, sobhan 1980

⚫️ الان من فقط 4 تا پرانتز اضافه کردم، ولی با همین تغییر به ریجکس فهموندم، قسمت اول ، گروه اولمه، و قسمت دوم گروه دومه. برای اینکه بفهمیم این اصلا کجا کاربرد داره ، من توی جاوا اسکریپت یه اسکریپت ساده مینویسم.

let text = '.....' // همون متن بالا
let regex = /([a-zA-Z]*) (\d{4})/gmi;
let matchAll = text.match(regex)

let names = [];
let born = [];
matchAll.forEach(() => {
  let match =  regex.exec(matchAll);
  names.push(match[1]);
  born.push(match[2])
})

console.log(names, born)

⬆️ به شکل بالا ، میتونیم اسم ها و اعداد رو جدا کنیم (این یه مثال ساده است که با روش های زیادی هندل میشه، اما در متن های پیشرفته تر این روش خیلی کاربردی تره) 😔 حالا بزارید من متن رو یه تغییری بدم ، و یکی دیگه از کاربرد های گروه بندی رو هم یاد بگیریم:

ha-ha
man-man
check-chick
no-yes
one-two
beb-beb

فرض کنید ، ما میخوایم از متن بالا ، عباراتی رو انتخاب کنیم که بینشون دَش (-) باشه و دو طرف دَش شبیه به هم باشن. 🫠 اینجا از گروه بندی و ارجاع به گروه استفاده میکنیم (ارجاع ، یعنی اشاره کردن) 😔 ریجکس زیر رو ببنید:

/(\w+)-\1/img

ha-ha, man-man, beb-beb

🥸 شاید الان بگید ، 1\ یعنی چی ؟ هر عددی بعد از بک اسلش قرار بگیره ، اشاره به گروه میکنه! الان توی ریجکس بالا ، فقط یدونه گروه داریم، پس 1\ یعنی اشاره کردن به گروه اول. خیلی بخوام واضح ریجکس بالا رو توضیح بدم میشه این : عباراتی را پیدا کن که ، اولشون به تعداد 1 الی اِن تا حروف داشته باشه و در ادامه یک دَش قرار بگیره و در آخر همان گروهی که پیدا شده در ادامه دَش وجود داشته باشه. 😔 توجه کنید که وقتی از 1\ استفاده میکنیم ، دقیقا همون الگو داخل گروه رو جایگزاری کردیم و فقط ریجکسمونو کوتاه ترش کردیم 😬 برای مثال ، ریجکس بالا بدون گروه بندی و ارجاع میشه این :

/\w+-\w+/img

❤️ حالا مثال ما خودش کوچولوعه و به چشم نمیاد :( ✨ ولی توی ریجکس های پیشرفته تر مارو از بازنویسی رها میکنه 😬 👋 آموزش رو همینجا به پایان میرسونم و بهتون یه سایت معرفی میکنم که زبان فارسی رو هم پشتیبانی میکنه (خودم اضافه کردم☝️) و میتونید همین موارد رو اونجا هم یاد بگیرید (از حالت فقط متنی خارجه و روش خوبیه) Site : Regex 🐱 #regex #regular_expression #regex_7 ☕️ @CodeExplore

موتور بازی سازی گودوت 👾 🔴احتمالا اگر خیلی توی زمینه بازی سازی گشته باشید، اسم گودوت یکی دو بار به گوشتون خورده باشه، اما چون خیلی توی کامیونیتی های ایران معروف نیست، ازش چیز خاصی ندیدید. 🔴 اولین نسخه موتور بازی سازی گودوت، سال ۲۰۱۴ منتشر شد، در حال حاضر آخرین ورژنش ۴۲ روز پیش اومده که ۴.۲.۲ هست و از دو زبان سی شارپ و گودو پشتیبانی میکنه. حجمش هم کمه،خیلی کمه،اگر اشتباه نکنم ۴۶ مگ هست. اوپن سورس هست و روی اندروید هم میتونید دانلودش کنید. ⏳برای آموزش ها پیشنهاد میکنیم توی یوتیوب بگردید و دنبال آموزش های انگلیسی باشید،یا هم داکیومنت گودوت رو بخونید، چون آموزش های فارسی اکثرا یکی دو قسمتن یا اگر ۱۲ قسمت هم باشن فقط بخش ۲ بعدیش رو آموزش میدن. ◀️در ضمن یه پست دیگه هم قبلا نوشتیم راجب انواع موتور های بازی سازی، بد نیست یک نگاهی بهش بندازید. #godot #game #پست_پیشنهادی ☕️ @CodeExplore

♾اینهمه از زبانایی حرف میزنیم که خیلی شناخته شدن، ولی میخام براتون یه لیست کوچیک از ناشناس ترین زبان های دنیای برنامه نویسی رو بهتون معرفی کنم: 1️⃣Pony: یه زبان برنامه نویسی بازمانده، شیءگرا ، قابلیت های امن با عملکرد بالا 2️⃣Nim: یه زبان برنامه نویسی اجباری، چند الگویی و کامپایل شدس 3️⃣Julia: یه زبان برنامه نویسی سطح بالا، عملکرد بالا در محاسبات فنی 4️⃣Clojure: این یکی بر پایه جاواس و برای برنامه نویسی متقابل و همزمان طراحی شده 5️⃣Haskell: از زبان برنامه نویسی تابعی خالص ، تمرکزش روی ایمنی و نوع خواناییه 6️⃣Racket: یه زبان برنامه نویسی تابعی و شیءگرا برای ساخت سیستم های برنامه نویسی و سیستم های نرم افزاری 7️⃣Crystal: خیلی شبیه به Ruby ولی با عملکرد بالاتر 8️⃣Elm: این داداشمونم خاست توی توسعه فرانت به کار بیاد ولی مگه جی اس میزاره؟ ☕️ @CodeExplore

⚡️زبان برنامه نویسی جاوا این زبان یکی از محبوب ترین زبان های برنامه نویسیه که 25 ساله بین ماس! حالا میخایم باهم یکم بررسیش کنیم ◀️کاربرد های زبان Java 🟢برنامه های وب 🟢اپلیکیشن موبایل 🟢بازی های کامپیوتری 🟢برنامه های کاربردی ◀️مزایای جاوا چیه؟ 🔵شیء گرایی 🔵مستقل از پلتفرم 🔵سازگاری با انواع سیستم عامل ها 🔵سادگی و قابلیت خواندن 🔵مدیریت خودکار حافظه 🔵امنیت بالا البته هر زبانی یسری معایب هم داره دیگه..😠 ◀️معایب جاوا: 🔴کندی نسبی: میشه گفت نسبت به ++C و Go یکم کند تره ( نترسین از خیلیا سریع تره ) 🔴مصرفت بالای حافظه 🔴گرافیک: برای بازی های سنگین از نظر گرافیکی زیاد استفادش نمیکنن چون منابع رو میخوره #java ☕️ @CodeExplore

دوتا منبع کاربردی و مفید برای یادگیری برنامه نویسی وب و اندروید همراه با مدرک معتبر که میتونید ازشون برای یادگیری برنامه نویسی استفاده کنید. 🔗https://web.dev/learn 🔗https://developer.android.com/courses #web #android ☕️ @CodeExplore

و اینجوری بود که پایتون رو یاد گرفتم #fun ☕️ @CodeExplore

صبر، استقامت و سخت کوشی ترکیبی بی نظیر برای موفقیت است. " ناپلئون هیل " #motivational ☕️ @CodeExplore

آموزش تعریف متغیر در CSS 🔵 💻 احتمالا توی زبان های دیگه دیدید که متغیر تعریف میکنن و توش مقادیر مهم(یا شایدم بی اهمیت)ای رو میزارن، سی اس اس کار های عزیز هم بالاخره نیاز به دسته بندی دقیق کدشون دارن و وقتی تصمیم گرفتن تم سایت رو یک دست ریزی بکشن،لازم نباشه برن ctrl f بزنن و در به در دنبال اون کد رنگی بگردن و تغییرش بدن! کد زیر کمکتون میکنه توی سی اس اس متغیر تعریف کنید:

:root {
  --main-bg-color: coral;
  --main-text-color: white;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

#css #trick #variable ☕️ @CodeExplore