آماده باشید که آموزش رجکس تو راهه 🗿💙

#fun
☕️ @CodeExplore

سایت can I use 🆒

💥 توی این سایت میتونید بررسی کنید که المنت یا فریمورکی یا فرمت فایل یا ... ای که میخواید استفاده کنید توی کدوم مرورگرا و چه ورژن هایی کار میکنن.

🔗 caniuse.com

#caniuse
☕️ @CodeExplore

🔵 با استفاده از اکستنشن GoFullPage میتونید از صفحات وب اسکرین شات کامل بگیرید و با فرمت های مختلف PNG، JPEG و یا PDF دانلود کنید.

➕همچنین این ابزار توی آپدیت های جدید آپشن ادیت رو بصورت پریمیوم اضافه کرده تا بتونید تصویر گرفته شده از صفحه مورد نظرتون رو به دلخواه خودتون ادیت کنید.

📥 لینک دانلود

#extension #gofullpage
☕️ @CodeExplore

📌شاید دلتون بخاد یسری تکنیک خفن درباره Clean Code بدونین یا یادآوری کنین

دوتا سایت پایین نکات مهمی رو میتونن درباره این موضوع بهتون بگن!

FreeCodeCamp

CodingDojo

☕️ @CodeExplore

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

☹️ بزارید تو قسمت اول یکم با خود regex و تاریخچش آشنا بشیم و اصلا ببینیم چه کاربردی داره و به چه کارمون میاد!

🫀 تاریخچه ریجکس: پیدایش ریجکس در واقع از ریاضیات گرفته شده و ریشه اون در برنامه نویسی به سال 1986 بر میگرده که یه شخصی مثل من و شما توی ویرایشگر متنی QED همچین جستجوی متنی رو پیاده سازی کرد 😀

👻حالا اصلا ریجکس واقعا چیه؟ ریجکس یک زبان یا فریمورک یا یه کتابخونه وابسته به زبان نیست! بلکه یک تکنولوژی و سینتکس ثابته که توی اکثر زبان های برنامه نویسی قابل استفاده است.

👽 کاربرد عمو ریجکس (شایدم عمه!) چیه؟ نمیدونم چقدر با متن ها توی برنامه نویسی سر کار داشتید اما ممکنه زمانی یه متن طولانی داشته باشید و بخواید یه چیزی رو ازش پیدا کنید.
شاید الان بگید توابع آماده برای پیدا کردن کلمه وجود داره! ولی بعضی وقتا ما دنبال یه کلمه ثابت نیستیم! بزارید یه مثال ریز بزنم تا متوجه بشید 🐱

سلام من امیر هستم . شماره من 09112345678 است و همچنین شماره دوستمم 09112345050 است. من دوستمو خیلی دوست دارم ، اسمش ریجکسه!

توی متن بالا ، اگه بخوایم شماره تلفن ها رو در بیاریم باید چیکار کنیم؟ آفرین ، کاربرد ریجکس دقیقا همینجا نمایان میشه !
همونجوری که توی عنوان هم نوشتم، Regex به فارسی میشه عبارت منظم ، یعنی اگه بخواید توی رشته (متن) دنبال بخش های منظم بگردید که از الگوی خاصی پیروی میکنن ، میتونید از regex استفاده کنید 🐱

همچنین کاربرد ریجکس فقط توی پیدا کردن نیست ، یه زمانی ما میخوایم چیزایی که پیدا کردیم رو با یه چیز دیگه جایگزین کنیم ، مثلا تو همین مثال بالا اگه فردی همچین نظری رو توی سایتمون ثبت کرد ما نمیخوایم همینجوری نمایش داده بشه بلکه میخوایم شماره های تلفن با *** جایگزین بشن ، پس بازم ریجکس میتونه بهمون کمک کنه 👁

به صورت کلی هدف عمو ریجکس اینه که به صورت پیشرفته بتونیم داخل متنمون بگردیم و عبارتی که الگو ثابتی داره رو پیدا کنیم 🫠
عبارت منظم یک گروه از کارکترها یا نمادهاست که برای پیدا کردن یک الگوی مشخص در یک متن به کار گرفته می شود.

⬅️ ادامه در پست بعدی
#regex #regular_expression
#regex_1 #regex_start
☕️ @CodeExplore

😮 خب یه سوالی رو ممکنه بپرسید و بگید آیا regex سخته ؟ منم خیلی ساده میگم هرچیزی سختی خودشو داره ! اما اگه تمرین کنید و خوب یاد بگیرید ریجکس خیلی ساده و منظمه! مثل ریاضی! که شاید بخاطر آموزش نادرست برای خیلیا غول به نظر بیاد و برای خیلیا شیرین و راحت 🤡
من که میگم ریجکس ایزی پیزیه (easy peasy lemon squeezy)


⏰تا یادم نرفته اینم بگم که توی زبان های برنامه نویسی تقریبا استفادش به یک صورته و فقط اسم توابع یا بکارگیریش فرق داره (مثل استفاده JSON در زبان های مختلف میمونه)
چنتا از استفاده هاشم توی زبان های مختلف این زیر میزارم :

$str = "Our Channel is CodeExplore";
$pattern = "/CodeExplore/"; // Regex
echo preg_match_all($pattern, $str);

⌨️ توی زبانی مثل php باید regex خودمون رو بین دوتا / قرار بدیم و با تابع preg_match_all عبارت های خودمون رو پیدا کنیم .

let str = "Our Channel is CodeExplore";
let pattern = "/CodeExplore/" // Regex
console.log(str.search(pattern))
// OR
let arr = [...str.matchAll(/CodeExplore/g)]
console.log(arr)

⌨️ توی جاوا اسکریپت هم مثل php باید بین دوتا / قرار بدیم ولی برای پیدا کردن از تابع search میتونیم استفاده کنیم و برای پارامترش بهش ریجکس پاس بدیم (همچنین روش درستش استفاده از matchAll هست برای پیدا کردن تمامی عبارت ها)

import re
str = "Our Channel is CodeExplore";
pattern = r"CodeExplore" # Regex
x = re.search(pattern, str)
print(x)

⌨️ توی پایتون هم که میبینید استفادش به این صورته و نیازی به / اول و آخرم نداره (کلا پایتون شُل کرده! البته بهتره قبلش یه r بزارید تا متوجه بشه regex)


این پست رو همینجا به پایان میرسونم تا خسته نشید، در پست بعدی با خود ریجکس آشنا میشیم و دیپ تر میشیم 🍸

😀همچنین زیر همین پست کامنت بزارید که برای آموزش دوست دارید روی چه زبانی برنامه نویسی تست انجام بشه (با اینکه خیلی از موارد آموزش هیچ ربطی به زبان استفاده شده نداره)

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

#regex #regular_expression
#regex_1 #regex_start
☕️ @CodeExplore

🔵 یک نکته خفن تو CSS

👍 از توابع مثلثاتی تو CSS می تونیم تاخیر انتقال پلکانی روون بسازیم

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

#css #function
☕️ @CodeExplore

💻هوش مصنوعی Copilot به صورت رسمی به تلگرام اومد

▪️مایکروسافت بالاخره به جمع غول‌های تکنولوژی که در تلگرام حضور دارن پیوست و هوش مصنوعی قدرتمند خودش رو به نام Copilot رو به این پلتفرم محبوب پیام‌رسان آورد.

▪️ اینطوری که معلومه تجربه کاربری خوبی داره و تنها مشکلش اینه که فعلا تو کشورهای کمی فعال هست.چون وقتی بهش پیام بدید برای وریفای درخواست می‌کنه که شماره تلگرامی خودتون رو براش بفرستید و اینجاست که متوجه میشه از ایران هستیم :(

📱@CopilotOfficialBot

#bot #telegram #copilot
☕️ @CodeExplore

وقتی بقیه میخوان طلا استخراج کنن تو بیل بفروش!
فانِ انگیزشی 🗿

#fun #motivational
☕️ @CodeExplore

تغییر و تحولات اسکرول بار 🫥

☄️تغییر و تحولات اسکرول بار رو میبینید توی سالهای مختلف،شخصا اسکرول بار سال ۱۹۸۸ رو واقعا ندیدم تا حالا، شما چطور؟😂

☯️در ضمن یک پست قبلا گذاشتیم که میتونید برای سایتتون اسکرول بار های قشنگ بسازید، از اینجا پست رو ببینید

#scrollbar
☕️ @CodeExplore

🔵منابع آنلاین و رایگان برای یادگیری علوم داده

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

🌪 github.com/open-source-society/data-science

#data #science #tutorial
☕️ @CodeExplore

🔵 3 تا تریک خفن Css باهم ببینیم

✅دیدین وقتی دارین از تگ table برای ساخت جدول استفاده میکنین، ممکنه یسری از سلول هاش خالی باشه؟؟ با این خط کد ساده میتونین سلول های خالی رو حذف کنین

    table {
      empty-cells: hide;
    }

✅همه میدونیم که میشه متن هارو توی وبسایت ها select کرد و کارایی مثل کپی رو انجام داد، ولی خب چطوری به عنوان یه فرانت کار بیایم و تنظیم کنیم وقتی کاربر متن هارو سلکت میکنه یه استایلی بگیرن؟؟

    ::selection {
      background: #ffb7b7; /* WebKit/Blink Browsers */
    }
    ::-moz-selection {
      background: #ffb7b7; /* Gecko Browsers */
    }
    

✅تا حالا شده بخاین cursor متن رو توی input هاتون استایل دهی کنین؟ کد پایین کمکتون میکنه

input[type="text"] {
  caret-color: green;
}

input[type="email"] {
  caret-color: red;
}

#css #trick
☕️ @CodeExplore

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

در پست قبلی باهم در مورد تاریخچه و کاربرد ریجکس صحبت کردیم ، امروز قراره به طور رسمی وارد آموزش ریجکس بشیم و یخورده عمیق تر بررسی کنیم ⭐️

قبل از شروع آموزش اصلی باید بهتون بگم تو این آموزش اول ریجکس رو مینویسم و زیرش خروجی که به ما میده. همچنین میخوام بهتون دوتا سایت معرفی کنم که برای تمرین در مورد ریجکس خیلی عالیه ✅
و بهتره بعد از آموزش هر روز خودتونم برید و تست کنید :
⏯ my choice 👽
2️⃣ Two

🚫 حرف اضافی بسه و بریم سر آموزش خودمون 🦦
فرض کنید متنی مثل زیر داریم :

You can see the names of all my friends here: Amin, AmirMassoud, AmirAli, Amir, Saeed, Korosh, Agha Reza, amiran

⚫️ اولین چیزی که توی ریجکس قراره یاد بگیریم پیدا کردن یه الگو فوق العاده ثابته!
یعنی من توی جمله بالا میخوام فقط کلمه Amir رو استخراج کنم ، برای این کار سینتکس ریجکس میشه این :

/Amir/

Amir

توجه کنید که / اول و آخر خونده نمیشن و سینتکس اصلی خود ریجکسه (PCRE) و هرچیزی بین دوتا / باشه الگو شماست و هرچیزی بعد از / آخر باشه flag شماست که الان توضیح میدم چیه 🤝

با توجه به ریجکسی که الان نوشتیم ، انتظار داریم که از متن بالا تمامی Amir هارو استخراج کنه، اما به دوتا مشکل میخوریم !
اول اینکه اگه بدون flag از این ریجکس استفاده کنیم فقط اولین الگو رو برای ما برمگیردونه ! پس اول بیاید کاری کنیم که همه رو پیدا کنه :

/Amir/g

Amir, Amir, Amir

حالا اگر دقت کنید یدونه g به آخر ریجکسمون اضافه کردیم ، g مخفف کلمه global و یعنی تمامی موارد پیدا شده رو برای من برگردونه 👨‍💻
ولی بازم یه مشکلی داریم! ریجکس به حروف بزرگ و کوچیک حساسه پس کلمه amir داخل amiran رو برای ما پیدا نمیکنه 💔
برای حل این مشکلم باید یه flag دیگه اضافه کنیم به اسم i که مخفف insensitive که یعنی روی حروف بزرگ و کوچیک حساس نباش 👽
پس ریجکس اصلی ما برای پیدا کردن تمامی amir ها میشه این :

/Amir/gi

Amir, Amir, Amir, amir

⌨️ خب تا الان دوتا flag مهم رو یاد گرفتید بیاید همین مثال رو توی زبان js تست کنیم :

let text = '.....'  // همون متن بالا
let pattern = /amir/gi
let find = [...str.matchAll(pattern)]
console.log(find)
//Print: (4) [Array(1), Array(1), Array(1), Array...]

بیاید از این دوتا فلگ خارج بشیم و یه نماد دیگه داخل ریجکس یاد بگیرم. اول بزارید متن رو یه تغییری بدم :

my name amirmohammad and my friends:
amirali
amirreza
amiran
agha reza
koroshe
samir

خب چرا مثالو اینجوری تغییر دادم؟ چون میخوام یه نماد و فلگ بهتون یادم بدم 😏
قبل از اینکه ریجکس بنویسیم بزارید بگم که اصلا توی متن بالا دنبال چی هستیم؟ اگه توجه کنید خط اول یه توضیح داره و بقیه خط ها یک اسمه؛ ما میخوایم Amir هایی رو پیدا کنیم که فقط کلمه amir ، اول جمله است 💓
برای اینکه بخوایم مشخص کنیم amir حتما اول جمله باشه باید از نماد ^ (بهش میگن هَت) استفاده کنیم (نماد ^ ،همجا اول خط رو مشخص نمیکنه و در آموزش های بعدی میفهمید که در جای دیگه هم کاربرد داره) :

/^Amir/gi

Empty

اگه ریجکس بالا رو تست کنیم بازم به مشکل میخوریم ❌
یعنی هیچ تطابقی بهمون نمیده ؛ چرا ؟ چون که زیرا 🤡
دلیل اینکه به ما هیچ تطابقی نمیده اینه که ریجکس به صورت پیشفرض مولتی لاین نیست (یعنی اگر از ^ استفاده کنید فقط خط اول رو به عنوان اول خط میشناسه و بقیه خط هارو حساب نمیکنه 🪫 و چون خط اولمونم با amir شروع نمیشه ، پس تطابقی برنمیگردونه)
حالا برای اینکه این قابلیت رو هم روشن کنیم 🔵 باید از flag جدیدی به اسم m استفاده کنیم که مخفف multi Line :

/Amir/gim

amir, amir, amir

حالا با ریجکس بالا همه اسم هایی که فقط با amir شروع میشن و اول خط هستن رو به دست آوردیم ❤️


برای امروز بسه 🥲
با ما همراه باشید تا آموزش بعدی 🥲

#regex #regular_expression
#regex_2
☕️ @CodeExplore

🤖 ربات های تلگرامی پر کاربرد:

🎧 اسپاتیفای دانلودر: @RegaSpotify_Bot

🎵 ساندکلود دانلودر: @RegaSoundCloud_Bot

📺 یوتیوب دانلودر: @RegaYoutube_Bot

🌐 اینستاگرام دانلودر: @Regainstagram_Bot

🐦 توییتر دانلودر: @RegaTwitter_Bot

🌐 پینترست دانلودر: @RegaPinterest_Bot

🎵 کست‌باکس دانلودر: @RegaCastbox_Bot

🌐 تیک‌تاک دانلودر:  @RegaTikTok_Bot

#bot #telegram
☕️ @CodeExplore | </Roxanna>

نه نه الان فیکس میشه وایسا 🔵

#fun
☕️ @CodeExplore

⚡️دوتا سایت خفن که میتونین کد هاتونو بهشون بدین و براتون بررسیش کنن!

⏯️ ReviwBoard

⏯️ GitHub

🔥اگر هم میخواین یه لیست 12 تایی از این ابزار هارو ببینین سایت زیر در خدمته!
⏯️ Kinsta

☕️ @CodeExplore

با این سه سایت هک رو شروع کن 💻

سه تا سایت براتون آوردم که باهاش میتونید یادگیری هک رو شروع کنید یا تا حدودی پیش ببرید🔥

1⃣ Hacker101.com
این سایت مخصوص یادگیری هک و امنیت سایبریه. کلی درس و تمرین رایگان داره که بهت کمک می‌کنه مهارت‌هات رو تقویت کنی.

🔥🔥🔥🔥🔥🔥🔥🔥

🔢 Hackthissite.org
یه جورایی مثل زمین بازی برای کسایی که می‌خوان هک کردن رو تمرین کنن. کلی چالش و ماموریت داره که می‌تونی توشون شرکت کنی و باگ پیدا کنی.

🔥🔥🔥🔥🔥🔥🔥🔥

🔢 Hackaday.com
اینجا پر از پروژه‌ها و مقالات جالب و دیوانه‌واریه که آدم‌های خلاق انجام دادن. اگه عاشق تکنولوژی و ساختن چیزای جدیدی، حتماً یه سر به اینجا بزن.


#hack #site
☕️ @CodeExplore

🟢مجموعه ای از افکت‌های CSS3 که میتونید برای لینک‌ها، دکمه‌ها، لوگوها، SVG، تصاویر و ... استفاده کنید. به راحتی از افکت ها توی استایل دهی ها استفاده کنید. در دسترس برای CSS، Sass و LESS.

🌪 https://ianlunn.github.io/Hover/

🔗 https://github.com/IanLunn/Hover

#css #hover #effects
☕️ @CodeExplore

👑یه لیست از 10 تا اتریبیوت خفن و پرکاربرد از HTML ببینیم؟

🟢data-[data-set-name] :
این اتریبیوت بهتون این اجازه رو میده که یسری اطلاعات کاستوم و سفارشی رو به تگ اضافه کنین، و داخل css و js بتونین استفادشون کنین

🟢contentedittable :
اینم به کاربر اجازه میده که محتوای تگ رو ادیت کنه

🟢hidden :
میتونین از این اتریبیوت برای مخفی کردن تگ هاتون استفاده کنین

🟢spellcheck :
وقتی این اتریبیوت رو به تگتون بدین میتونین کنترل کنین که مرورگر اون تگ رو برای املای صحیح بررسی کنه یا نه ( غلط املایی میگیره )

🟢tabindex :
این اتریبیوت برای فرم هاتون به درد میخوره، با استفاده از این میتونین شماره و ترتیب زدن دکمه tab برای focus روی تگ هاتون رو مدیریت کنین

🟢download :
شاید تا حالا شده بخاین با زدن روی یه لینک، یه فایلی دانلود شه، خب اینو به تگ a بدین و لینکشو ست کنین

🟢async & defer :
این اتریبیوت ها این اجازه رو میدن که کنترل کنین چطوری یه اسکریپت بارگذاری و اجرا بشه

🟢autofocus :
وقتی از این اتریبیوت استفاده کنین، اون تگتون به صورت دیفالت با ران شدن صفحه، focus میشه

🟢placeholder :
میتونین با این اتریبیوت، یک راهنما و متن موقت رو داخل input هاتون ست کنین

🟢required :
از این اتریبیوت ولی میخاید input هاتون خالی نباشه و حتما پر بشه استفاده کنین

#html
☕️ @CodeExplore

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

📢 در پست قبلی با flag های m, i, g آشنا شدیم و همچنین نماد هَت (^) رو یاد گرفتیم که برای مشخص کردن اول خط به کار میره

بریم یه نماد دیگه رو هم یاد بگیرم و اون هم نماد $ (دلار ساین) است که دقیقا برعکس ^ برای آخر جمله استفاده میشه 💘
بریم یه متن بنویسیم و روش یه تست پیاده کنیم:

JavaScript
PostScript
shelllll
ActionScript
PowerShell
AppleScript
Script
Network
hello1
PHP

خب توی متن بالا میخوایم تمامی عبارت هایی رو پیدا کنیم که به Script ختم بشن:

/Script$/img

Script, Script, Script, Script, Script

با دستور بالا 5 تا تطابق داریم ، اما اینجا به یه موضوعی پی میبریم 🗽
اونم اینکه تا فعلا با ریجکس فقط یه اسم ثابت رو جستجو کردیم که با find ساده توی یک زبان برنامه نویسی پیدا میشد ، پس چرا از ریجکس استفاده کردیم؟ اینجاست که باید بگم یه زمانی ما دنبال یه کلمه ثابت هستیم و میخوایم ایندکس اون کلمه رو توی متن پیدا کنیم و ممکنه اون کلمه چنبار در جمله اومده باشه ، برای همین با ریجکس میتونیم ایندکس رو بدست بیارم (و اینکه میخواید با ایندکسش چیکار کنید به خودتون مربوطه ، مثلا اگر بخواید از ایندکس 20 تا ایندکس 40 متن رو فقط replace کنید از این روش استفاده میکنید ، البته ممکنه همین کارو بتونید با چنتا تابع متفاوت هندل کنید) 👨‍💻
⌨️ توی جاوا اسکریپت این مثال رو میبینیم:

let str = ... //همون مثال بالا;
let pattern = /Script$/gm
let arr = [...str.matchAll(pattern)]
console.log(arr);
//(5) [Array(1), Array(1), Array(1), Array...]
// اگه یکی از آرایه هارو باز کنیم همچین چیزی میبینم:
// ["Script", 4, "JavaScript\nPostScrip...]
// که اولین ایندکس، کلمه پیدا شده ، دومین ایندکس ، ایندکس کلمه داخل متن و سومین ایندکس خود متنه

🔞 اینم بدونید که میشه از همه نماد ها باهم توی ریجکس استفاده کرد ، مثلا ریجکس زیر رو در نظر بگیرد:

/^hello$/igm

ریجکس بالا فقط عبارت هایی رو پیدا میکنه که اول جمله با hello شروع بشه و با hello هم تموم بشه 😐

حالا برسیم سر یه موضوع دیگه ، و یکمی جدی تر وارد دنیای قشنگ و قدرتمند ریجکس بشیم 🎇

مثال اول رو یادتونه که دنبال عبارت هایی میگشتیم که به Script ختم بشن؟ اونجا فهمیدیم که فقط خود Script رو برای ما برمگیردونه ، ولی اگه ما بخوایم کلماتی رو پیدا کنیم که به Script ختم میشه (مثل خود کلمه AppleScript) باید چیکار کنیم؟ 🤔
قبل از اینکه مثال بالا رو حل کنیم نیازه که چنتا چیز دیگه رو تو ریجکس یاد بگیرید 🐱
من مثال اول رو تغییر نمیدم و با همون پیش میریم 🐱

/shel/gmi

shel, shel

ریجکس بالا که خیلی ساده میاد و کلمه shell رو پیدا میکنه و اصلا هم کاری نداره کجای متنه ، کوچیکو بزرگم براش فرقی نداره😏

برای اینکه به محدودیت تلگرام نخوریم 🤮 ادامه آموزش رو تو پست بعدی ادامه میدیم 🤗


#regex #regular_expression
#regex_3
☕️ @CodeExplore