کداکسپلور | CodeExplore

🔥 این سایت رو هرجایی که میتونی ذخیره کن! ▪️فرض کن یه متنی داشتی ، خودت یا کس دیگه‌ای اون متن رو تغییر داده ، آپدیت کرده یا یه چیزایی رو ازش حذف و اضافه کرده! ▪️حالا تو میخوای متن اصلی خودت رو با متن جدید مقایسه کنی و ببینی که چه تغییراتی داشته ، مثلا چه چیزایی بهش اضافه شده یا چه چیزایی ازش کم شده. ▪️با هوش مصنوعی Diff Checker به راحتی میتونید این کار رو انجام بدید ، متن قبلی و جدید رو وارد می‌کنید ، اون قسمت هایی که هایلایت قرمزه یعنی حذف شده و اون قسمتایی که سبزه یعنی اضافه شده ؛) 🔺 جذااب ترین نکتش برای برنامه‌نویساست ، میتونن کد قدیمی و جدید خودشون رو باهم مقایسه کن ، تازه از داکیومنت و فایل اکسل و.. هم پشتیبانی میکنه ☕️ @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

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

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

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

⚡️ با هر تخصصی وارد فضای بین المللی شوید! ⚡️ به جای کارفرمای ایرانی با کارفرمای خارجی کار کنید! ✔️ تخصص مورد نیاز به میزان انجام پروژه های ایرانی! ✔️ میلیون ها پروژه، انتخاب پروژه با شما، انتخاب کارفرما با شما، انتخاب قیمت با شما! ✅ آموزش عملی و تمامی زیرساخت ها با ما 📌 اطلاعات بیشتر لینک زیر: ➡️ links.etekanesh.com/14prgrm13 🆔 کانال تلگرام: @TekaneshAcademy

🔥سرعت لود سایت یکی از مهم ترین ویژگی های هر سایتیه و توی فرانت اند خیلی خیلی مهمه یکی از بزرگ ترین مشکلاتی که باعث میشن سایتمون دیر تر لود بشه، عکس ها هستن، عکس ها خیلی وقتا اذیتمون میکنن و سرعت رو میارن پایین، خب با سایت زیر راحت میتونین فرمت های JPEG , PNG , GIF و حتی PDF رو فشرده کنین 🌐 https://compresspng.com/ #site ☕️ @CodeExplore

بزرگترین درد جهان وجود ندا... #fun ☕️ @CodeExplore

اهداف نه تنها برای انگیزه دادن به ما، بلکه برای اینکه ما راه زنده نگه دارند ضروری هستند. " Robert H. Schuller " #motivational ☕️ @CodeExplore

⚪️سایت Miro یک ابزار قدرتمند برای کار گروهی آنلاینه و به شما این امکان رو میده تا در یک فضای گرافیکی، از ایده‌پردازی تا اجرا، همه مراحل کار رو انجام بدید. از ویژگی های مهم Miro میشه به امکان اضافه کردن نمودارهای مرتبط و ترتیب دادن اونها، اضافه کردن توضیحات به هر المان، اشتراک‌ گذاری و همکاری همزمان با اعضای تیم، و قابلیت اتصال به ابزارها و سرویس‌های دیگه مانند Google Drive، Trello، Jira و ... اشاره کرد. 💡 از طریق Miro، افراد و تیم ها میتونن ارتباط برقرار کنن و به صورت آنلاین روی پروژه هاشون کار کنن. 🔗 https://miro.com #miro #interactive #team ☕️ @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

🔴میخام یه لیست از فونت های پرکاربرد بهتون بدم که برین عشق کنین فونت های انگلیسی محبوب: ➡️Roboto ➡️Poppins ➡️Libre Frenklin ➡️Raleway ➡️Times New Roman ➡️Arial فونت های فارسی خفن: ◀️وزیر : فارسی / عربی ◀️یکان ◀️اکن : دیجی کالا ◀️شبنم ◀️سمیم #font ☕️ @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

ویژگی 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