📌تغییر از فونت با استفاده از google fonts
✅درواقع google fontsیک وبسایت کاربردی و جامع از انواع فونتها میباشد که طراحان سایت میتوانند از تمام فونتهای موجود د راین سایت برای تغییر ستایل متون در وبسایت خود استفاده نمایند.
✅به دو روش میتوانید از فونتهای موجود دراین سایت استفاده کنید:
🔹از طریق import کردن در صفحه css
🔹از طریق link کردن در صفحه html
✅نحوه استفاده از هر دو روش در ویدئو آموزش داده شده است.
https://fonts.google.com/
@alithecodeguy

نکته خوب تیلویندی
#tailwind

📌عبارات با قاعده ( Regular Expressions ) در جاوا اسکریپت
✅عبارات با قاعده در جاوااسکریپت مجموعه کاراکتر هایی هستند که یک الگوی جستجو را تشکیل می دهند که میتوانند شامل یک کاراکتر یا یک الگوی پیچیده تر باشند.
✅ نحوه استفاده از عبارات باقاعده به این صورت است: /pattern/modifiers;
✅عبارات منظم دارای متدهایی میباشند که با استفاده از این متدها برنامه نویسان میتوانند از عباراتی که ایجاد کرده اند در کدهای خود استفاده کنند. مانند متد test، replace، search و ... .
✅از این روش می توان برای جستجوی متن در جاوا اسکریپت و عملگر های جایگزین کردن متن استفاده کرد.
✅برای آشنایی بیشتر پیشنهاد میشود وب سایت معرفی شده را مطالعه نمایید.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
@alithecodeguy

📌position property in css
✅ویژگی position می تواند به شما در دستکاری مکان یک المان کمک کند. این ویژگی دارای 5 مقدار میباشد که عبارتند از:
🔹static
این مقدار به صورت پیشفرض تعیین شده است و مکان المان همیشه با توجه به رفتار مروگر تعیین میگردد.
🔹relative
این مقدار رفتار المان را باتوجه به المان parent اصلی تعیین مینماید و با استفاده از مقادیر top، bottom، left و right محل المان تعیین میگردد.
🔹absolute
این مقدار رفتان المان را با توجه به نزدیکترین parent تعیین مینماید و اگر parent نداشته باشد از body به عنوان parent خود استفاده مینماید.
🔹fixed
این مقدار تعیین مینماید که المان مورد نظر در حالت اسکرول صفحه ثابت بماند و position آن تغییر نکند.
🔹sticky
این مقدار تعیین زمانی استفاده میشود که زمان اسکرول صفحه موقعیت المان تغییر نکند و در صفحه نمایش نشان داده شود.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
@alithecodeguy

📌overflow in css
✅ویژگی overflow محتوای یک المان را زمانیکه از ناحیه تعیین شده بزرگتر است و درواقع دچار سرریز شده است کنترل مینماید که آن محتوا چگونه نمایش داده شود.
✅با استفاده از این ویژگی تعیین میشود که محتوای المان موردنظر بریده شود یا نوار اسکرول اضافه شود.
✅این ویژگی دارای چهار مقدار میباشد که عبارتند از:
🔹visible
این ویژگی همیشه به صورت پیشفرض فعال است و محتوا خارج از کادر تعیین شده نمایش داده میشود.
🔹hidden
در صورت اضافه بودن محتوا از چهارچوب المان موردنظر، محتوای سرریزشده invisible میشود و به هیچ عنوان قابل نمایش نمیباشد.
🔹scroll
در صورت اضافه بودن محتوا از چهارچوب المان موردنظر، یک نوار اسکرول عمودی و افقی برای مشاهده محتوای invisible شده، نمایش داده میشود
🔹auto
مانند scroll است اما نوار اسکرول را در صورت نیاز اضافه مینماید.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
@alithecodeguy

📌css pseudo-classes
✅یک css pseudo-classes یک کلمه کلیدی است که به یک selector اضافه میشود که یک وضعیت خاصی از المانهای انتخاب شده را مشخص کند. نحوه استفاده از این روش به صورت زیر است:
selector:pseudo-class {
property: value;
}
✅با استفاده از pseudo-classes این امکان برای طراحان وب فراهم میشود که یک استایل خاص را برای شرایط خاصی از یک المان اعمال کنند. به عنوان مثال تغییر رنگ دکمه هنگام کلیک بر روی آن.
✅لیست کامل pseudo-classes در آدرس وب سایت زیر معرفی شده است.
https://www.w3schools.com/css/css_pseudo_classes.asp
@alithecodeguy

دنبال یک ایده ناب توی حوزه رمزارز هستم. ایده ای که واقعا گره ای از مشکلات روزمره مردم ایران رو حل کنه. اگر تایید بشه ۲ میلیون تومان هم تقدیم میشه. میدونم مبلغ زیادی نیست ، به چشم هدیه بهش نگاه کنید.
درگاه پرداخت رمزارز ، صرافی رمزارز و تحلیل رمزارز هم نباشه خواهشا😬

📌کلمات رزرو شده در جاوا اسکریپت
✅کلمات رزرو شده کلمات از پیش تعریف شده ای هستند که هرکدام به منظور خاصی در زبان برنامه نویسی مورد استفاده قرار میگیرند.
✅در جاوااسکریپت از کلمات رزرو شده نمیتوانید به عنوان نام متغیر و توابع استفاده کنید، زیرا هریک برای هدف خاصی در زبان جاوااسکریپت ایجاد شده‌اند.
✅کلمات دیگری نیز در جاوا اسکریپت وجود دارند که در عین حال که یک کلمه‌ی رزرو شده نیستند اما نباید از آنها به عنوان شناسه استفاده کنید. استفاده از این کلمات، هیچ خطایی را هنگام اجرای کد تولید نمی‌کند و کد به اجرای خود ادامه می‌دهد. اما ممکن است در شرایط خاص نتایج غیر منتظره و اشتباهی به وجود آورد. این نوع کلمات به چند دسته تقسیم می‌شود:
🔹کلماتی که در نسخه‌های قدیمی جز کلمات رزرو شده بودند، ولی در حال حاضر یک کلمه‌ی رزرو شده نیستند و آپدیتهای جاوااسکریپت حذف شده‌اند.
🔹کلماتی که برای نام object، property و method ساخته شده‌اند.
https://www.w3schools.com/js/js_reserved.asp
@alithecodeguy

Webpack crash course
#webpack #bundler

خلاصه NestJS در ۱۰۰ ثانیه
(با NextJS فرق داره و برای توسعه بک اند با جاوا اسکریپت استفاده میشه)
#nest #nestjs #backend

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

📌معرفی وبسایت‌های دانلود تصاویر و آیکونهای سه بعدی
✅مطمئنا بارها هنگام طراحی وبسایت، برای دانلود تصاویر و آیکونهای مورد نیاز خود با مشکل مواجه شده‌اید. در این پست تعدادی منبع مناسب برای دانلود تصاویر و آیکونها را معرفی شده‌اند که میتوانید به راحتی تصاویر مورد نیاز خود را پیدا کنید و در وبسایت خود استفاده نمایید.
🔹برای استفاده از تصاویر این وبسایت نیاز به ساخت اکانت ندارید و به صورت رایگان میتوانید تصاویر مورد نیاز خود را دانلود کنید.
https://free3dicon.com/
🔹برای استفاده از تصاویر این وبسایت نیاز به ساخت اکانت دارید. بعد از ساخت اکانت میتوانید به صورت رایگان میتوانید تصاویر مورد نیاز خود را دانلود کنید.
https://www.getillustrations.com/search-results/3d
https://www.behance.net/EgorMironov
@alithecodeguy

برای تشکیل تیم خودم به ۲ نفر نیاز دارم.
۱- بک اند ( TypeScript + NestJS + MongoDB ) ترجیحا مسلط به CI/CD
۲- دیزاینر ( مسلط به فیگما و کانسپت های اصلی )
دنبال نیروی میدل و بالاتر هستم.
————————
مجموعه ای که داخلش کار میکنیم حدود ۱۰۰ تا نیرو داره که پروژه های موفقی داخلش در حال توسعه و نگهداریه.
تیمی که دارم تشکیل میدم یکی از تیم های نوپای اون مجموعس و با خودم مستقیما کار میکنید.
———————
حقوق معقول و خوب ، صبحانه و نهار ، بیمه ، میز بیلیارد و … از ویژگی های مجموعس.
کار حضوری ، محل کار محدوده میدان انقلاب ، ساعت کار ۹ تا ۶ شنبه تا چهارشنبه ، پنج شنبه ۹ تا ۴
———————
خانواده نیستیم ولی تیم خوبی میشیم.
اگر ویژگی های بالا رو دارید مستقیما به خودم پیام بدید
———————
آپدیت : حقوق رو خودتون پیشنهاد میدید. اگر به توافق رسیدیم شروع میکنیم.
@codewithali

چطوری توی ریاکت بتونیم تکست انتخاب شده با موس روی درخت دام رو ذخیره کنیم ؟ extract highlighted text

اینم ساده ترین حالت استخراج

📌متد pop() و push() برای آرایه‌ها در جاوااسکریپت
✅یکی از پرکاربردترین متدهای آرایه در جاوااسکریپت متد pop و push میباشد.
✅متد pop آخرین عنصر از آرایه را حذف میکند. توجه داشته باشید که در این متد، عناصر از آخر آرایه حذف میشوند.
array.pop()
✅متد push یک عنصر را به انتهای آرایه اضافه میکند. توجه داشته باشید که در این متد، عناصر به آخر آرایه اضافه میشود.
array.push()
https://www.w3schools.com/jsref/jsref_pop.asp
https://www.w3schools.com/jsref/jsref_push.asp
@alithecodeguy

اسکرول نرم با سرعت متفاوت بدنه و عکس پس زمینه هدر
به شکل یه پروژه ساده اچ تی ام الی روی گیت هاب قرارش دادم. دمو هم تهیه کردم. باشد که مفید واقع شود.
لینگ گیت هاب:
https://github.com/alithecodeguy/smooth_parallax
دمو:
https://smooth-parallax.vercel.app/
#parallax #css #alithecodeguy #frontend

📌DOM vs BOM in javanoscript
✅در جاوااسکریپتDOM مخفف Document Object Model است. این استانداردی است که توسط W3C (کنسرسیوم شبکه جهانی وب) تعریف شده است. DOM یک رابط برنامه نویسی (API) برای نمایش و تعامل با HTML ، XHTML و XML است. با استفاده از این استاندارد زمانی که مرورگر کل فایل HTML را interpretation میکند ساختار HTML به شکل object در میاید و هنگام بارگیری یک صفحه وب، مرورگر یک درخت DOM برای همه عناصر Html آن صفحه ایجاد می کند . در نهایت javanoscript با کمک DOM به کلیه ی object ها دسترسی پیدا میکند و میتواند بر روی آنها تغییرات اعمال کند. مانند دسترسی به یک tag خاص و دادن style به آن تگ.
✅در جاوااسکریپت BOM مخفف Browser Object Model است و به javanoscript این امکان رو میدهد که با خود مرورگر بتوند تعامل داشته باشد. وظیفه اصلی BOM مدیریت پنجره های مرورگر و فعال کردن ارتباط بین پنجره ها است. به عنوان مثال: ()window.open. هر صفحه HTML که در پنجره مرورگر بارگذاری می شود تبدیل به یک شی سند می شود و شیء سند یک شی در BOM است.
https://medium.com/@fknussel/dom-bom-revisited-cf6124e2a816
@alithecodeguy

📌متد addEventListener در جاوا اسکریپت
✅یکی از مهمترین و پرکاربردترین متدهای مورد استفاده در جاوااسکریپت است که یک event را به عناصر HTML وصل میکند. با استفاده از این متد میتوان event handlerمختلف را به یک عنصر اضافه کنید.
✅توجه داشته باشید که پرکاربردترین syntax مورد استفاده برای این متد به صورت زیر است.
addEventListener(type, listener);
🔹type
یک رشته حساس به حروف بزرگ و کوچک است که درواقع event مورد نظرمیباشد.
🔹listener
یک تابع جاوااسکریپتی را اجرا میکند که event مشخص شده بر روی المان مورد نظر را تعیین میکند.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@alithecodeguy

📌المان <canvas> در HTML
✅از این المان برای ترسیم گرافیک در صفحه وب مورد استفاده قرار میگیرد.
✅المان <canvas> تنها یک محفظه برای گرافیک است و برای ترسیم گرافیک باید از جاوا اسکریپت استفاده کنید.
✅این المان روش های مختلفی برای ترسیم کادرها، دایره ها، متن و افزودن تصاویر دارد. برای آشنایی بیشتر یک مثال ساده در ویدئو آورده شده است.
https://www.w3schools.com/html/html5_canvas.asp
@alithecodeguy