This media is not supported in your browser
VIEW IN TELEGRAM
📌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
✅یک 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
✅کلمات رزرو شده کلمات از پیش تعریف شده ای هستند که هرکدام به منظور خاصی در زبان برنامه نویسی مورد استفاده قرار میگیرند.
✅در جاوااسکریپت از کلمات رزرو شده نمیتوانید به عنوان نام متغیر و توابع استفاده کنید، زیرا هریک برای هدف خاصی در زبان جاوااسکریپت ایجاد شدهاند.
✅کلمات دیگری نیز در جاوا اسکریپت وجود دارند که در عین حال که یک کلمهی رزرو شده نیستند اما نباید از آنها به عنوان شناسه استفاده کنید. استفاده از این کلمات، هیچ خطایی را هنگام اجرای کد تولید نمیکند و کد به اجرای خود ادامه میدهد. اما ممکن است در شرایط خاص نتایج غیر منتظره و اشتباهی به وجود آورد. این نوع کلمات به چند دسته تقسیم میشود:
🔹کلماتی که در نسخههای قدیمی جز کلمات رزرو شده بودند، ولی در حال حاضر یک کلمهی رزرو شده نیستند و آپدیتهای جاوااسکریپت حذف شدهاند.
🔹کلماتی که برای نام object، property و method ساخته شدهاند.
https://www.w3schools.com/js/js_reserved.asp
@alithecodeguy
W3Schools
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
This media is not supported in your browser
VIEW IN TELEGRAM
دوستان گرامی به دلیل بیماری دورهمی امروز برگزار نمیشه. انشالله یک روز دیگه.
📌معرفی وبسایتهای دانلود تصاویر و آیکونهای سه بعدی
✅مطمئنا بارها هنگام طراحی وبسایت، برای دانلود تصاویر و آیکونهای مورد نیاز خود با مشکل مواجه شدهاید. در این پست تعدادی منبع مناسب برای دانلود تصاویر و آیکونها را معرفی شدهاند که میتوانید به راحتی تصاویر مورد نیاز خود را پیدا کنید و در وبسایت خود استفاده نمایید.
🔹برای استفاده از تصاویر این وبسایت نیاز به ساخت اکانت ندارید و به صورت رایگان میتوانید تصاویر مورد نیاز خود را دانلود کنید.
https://free3dicon.com/
🔹برای استفاده از تصاویر این وبسایت نیاز به ساخت اکانت دارید. بعد از ساخت اکانت میتوانید به صورت رایگان میتوانید تصاویر مورد نیاز خود را دانلود کنید.
https://www.getillustrations.com/search-results/3d
https://www.behance.net/EgorMironov
@alithecodeguy
✅مطمئنا بارها هنگام طراحی وبسایت، برای دانلود تصاویر و آیکونهای مورد نیاز خود با مشکل مواجه شدهاید. در این پست تعدادی منبع مناسب برای دانلود تصاویر و آیکونها را معرفی شدهاند که میتوانید به راحتی تصاویر مورد نیاز خود را پیدا کنید و در وبسایت خود استفاده نمایید.
🔹برای استفاده از تصاویر این وبسایت نیاز به ساخت اکانت ندارید و به صورت رایگان میتوانید تصاویر مورد نیاز خود را دانلود کنید.
https://free3dicon.com/
🔹برای استفاده از تصاویر این وبسایت نیاز به ساخت اکانت دارید. بعد از ساخت اکانت میتوانید به صورت رایگان میتوانید تصاویر مورد نیاز خود را دانلود کنید.
https://www.getillustrations.com/search-results/3d
https://www.behance.net/EgorMironov
@alithecodeguy
برای تشکیل تیم خودم به ۲ نفر نیاز دارم.
۱- بک اند ( TypeScript + NestJS + MongoDB ) ترجیحا مسلط به CI/CD
۲- دیزاینر ( مسلط به فیگما و کانسپت های اصلی )
دنبال نیروی میدل و بالاتر هستم.
————————
مجموعه ای که داخلش کار میکنیم حدود ۱۰۰ تا نیرو داره که پروژه های موفقی داخلش در حال توسعه و نگهداریه.
تیمی که دارم تشکیل میدم یکی از تیم های نوپای اون مجموعس و با خودم مستقیما کار میکنید.
———————
حقوق معقول و خوب ، صبحانه و نهار ، بیمه ، میز بیلیارد و … از ویژگی های مجموعس.
کار حضوری ، محل کار محدوده میدان انقلاب ، ساعت کار ۹ تا ۶ شنبه تا چهارشنبه ، پنج شنبه ۹ تا ۴
———————
خانواده نیستیم ولی تیم خوبی میشیم.
اگر ویژگی های بالا رو دارید مستقیما به خودم پیام بدید
———————
آپدیت : حقوق رو خودتون پیشنهاد میدید. اگر به توافق رسیدیم شروع میکنیم.
@codewithali
۱- بک اند ( TypeScript + NestJS + MongoDB ) ترجیحا مسلط به CI/CD
۲- دیزاینر ( مسلط به فیگما و کانسپت های اصلی )
دنبال نیروی میدل و بالاتر هستم.
————————
مجموعه ای که داخلش کار میکنیم حدود ۱۰۰ تا نیرو داره که پروژه های موفقی داخلش در حال توسعه و نگهداریه.
تیمی که دارم تشکیل میدم یکی از تیم های نوپای اون مجموعس و با خودم مستقیما کار میکنید.
———————
حقوق معقول و خوب ، صبحانه و نهار ، بیمه ، میز بیلیارد و … از ویژگی های مجموعس.
کار حضوری ، محل کار محدوده میدان انقلاب ، ساعت کار ۹ تا ۶ شنبه تا چهارشنبه ، پنج شنبه ۹ تا ۴
———————
خانواده نیستیم ولی تیم خوبی میشیم.
اگر ویژگی های بالا رو دارید مستقیما به خودم پیام بدید
———————
آپدیت : حقوق رو خودتون پیشنهاد میدید. اگر به توافق رسیدیم شروع میکنیم.
@codewithali
Screenshot 2022-02-04 at 00.08.06.png
47.1 KB
چطوری توی ریاکت بتونیم تکست انتخاب شده با موس روی درخت دام رو ذخیره کنیم ؟ 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
✅یکی از پرکاربردترین متدهای آرایه در جاوااسکریپت متد 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
This media is not supported in your browser
VIEW IN TELEGRAM
اسکرول نرم با سرعت متفاوت بدنه و عکس پس زمینه هدر
به شکل یه پروژه ساده اچ تی ام الی روی گیت هاب قرارش دادم. دمو هم تهیه کردم. باشد که مفید واقع شود.
لینگ گیت هاب:
https://github.com/alithecodeguy/smooth_parallax
دمو:
https://smooth-parallax.vercel.app/
#parallax #css #alithecodeguy #frontend
به شکل یه پروژه ساده اچ تی ام الی روی گیت هاب قرارش دادم. دمو هم تهیه کردم. باشد که مفید واقع شود.
لینگ گیت هاب:
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
✅در جاوااسکریپت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
Medium
DOM & BOM Revisited
This is a cross post, to check the latest version of this article visit https://fedknu.com/blog/dom-bom-revisited
This media is not supported in your browser
VIEW IN TELEGRAM
📌متد 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
✅یکی از مهمترین و پرکاربردترین متدهای مورد استفاده در جاوااسکریپت است که یک event را به عناصر HTML وصل میکند. با استفاده از این متد میتوان event handlerمختلف را به یک عنصر اضافه کنید.
✅توجه داشته باشید که پرکاربردترین syntax مورد استفاده برای این متد به صورت زیر است.
addEventListener(type, listener);
🔹type
یک رشته حساس به حروف بزرگ و کوچک است که درواقع event مورد نظرمیباشد.
🔹listener
یک تابع جاوااسکریپتی را اجرا میکند که event مشخص شده بر روی المان مورد نظر را تعیین میکند.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌المان <canvas> در HTML
✅از این المان برای ترسیم گرافیک در صفحه وب مورد استفاده قرار میگیرد.
✅المان <canvas> تنها یک محفظه برای گرافیک است و برای ترسیم گرافیک باید از جاوا اسکریپت استفاده کنید.
✅این المان روش های مختلفی برای ترسیم کادرها، دایره ها، متن و افزودن تصاویر دارد. برای آشنایی بیشتر یک مثال ساده در ویدئو آورده شده است.
https://www.w3schools.com/html/html5_canvas.asp
@alithecodeguy
✅از این المان برای ترسیم گرافیک در صفحه وب مورد استفاده قرار میگیرد.
✅المان <canvas> تنها یک محفظه برای گرافیک است و برای ترسیم گرافیک باید از جاوا اسکریپت استفاده کنید.
✅این المان روش های مختلفی برای ترسیم کادرها، دایره ها، متن و افزودن تصاویر دارد. برای آشنایی بیشتر یک مثال ساده در ویدئو آورده شده است.
https://www.w3schools.com/html/html5_canvas.asp
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌تغییر عناصر HTML در جاوااسکریپت
✅در جاوااسکریپت با استفاده از ()document.write میتوانید محتوای عناصر HTML را به طور مستقیم تغییر دهید.
✅با استفاده از property innerHTMLنیز میتوانید محتوای جدید را جایگزین محتوای قبلی کنید.
✅برای تغییر دادن مقدار ویژگی HTML میتوانید از attribute استفاده نمایید.
@alithecodeguy
✅در جاوااسکریپت با استفاده از ()document.write میتوانید محتوای عناصر HTML را به طور مستقیم تغییر دهید.
✅با استفاده از property innerHTMLنیز میتوانید محتوای جدید را جایگزین محتوای قبلی کنید.
✅برای تغییر دادن مقدار ویژگی HTML میتوانید از attribute استفاده نمایید.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌تغییر استایل با استفاده از جاوااسکریپت
✅برای تغییر استایل دهی با استفاده از جاوااسکریپت میتوانید از دستور زیر استفاده نمایید.
document.getElementById(id).style.property = new style
@alithecodeguy
✅برای تغییر استایل دهی با استفاده از جاوااسکریپت میتوانید از دستور زیر استفاده نمایید.
document.getElementById(id).style.property = new style
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌افزونه CodeSnap یکی از پرکاربدترین افزونههای vsCode برای تهیه عکس از کدهای شما است. کار با این افزونه بسیار آسان است و برای آشنایی با نحوه استفاده از این افزونه ویدئوی بالا را مشاهده نمایید.
@alithecodeguy
@alithecodeguy
اگر میخواید از یه مخزن گیت کلون بگیرید ولی هیستوریش رو نمیخواید ، از کتابخونه زیر میتونید استفاده کنید.
https://github.com/Rich-Harris/degit
#git #github #degit
https://github.com/Rich-Harris/degit
#git #github #degit
📌متد sort()
✅متد sort اعضای آرایه را مرتبسازی میکند. مرتبسازی به صورت صعودی انجام میشود.
✅این متد، آرایه جدید برنمیگرداند. همان آرایه را مرتبسازی میکند
✅توجه داشته باشید که هنگام مرتب سازی آرایه به صورت رشته تبدیل میشود، بنابراین هنگام مرتب سازی آرایهها عددی آنها را به رشته تبدیل میکند. بنابراین لازم است برای مرتب سازی این آرایههای عددی تابعی بنویسید و به این متد ارسال نمایید.
زیرا متد sort میتواند تابع نیز قبول کند.
@alithecodeguy
✅متد sort اعضای آرایه را مرتبسازی میکند. مرتبسازی به صورت صعودی انجام میشود.
✅این متد، آرایه جدید برنمیگرداند. همان آرایه را مرتبسازی میکند
✅توجه داشته باشید که هنگام مرتب سازی آرایه به صورت رشته تبدیل میشود، بنابراین هنگام مرتب سازی آرایهها عددی آنها را به رشته تبدیل میکند. بنابراین لازم است برای مرتب سازی این آرایههای عددی تابعی بنویسید و به این متد ارسال نمایید.
زیرا متد sort میتواند تابع نیز قبول کند.
@alithecodeguy
📌HTML Responsive Web Design
✅طراحی وب ریسپانسیو درباره ایجاد صفحاتی است که در همه دستگاهها خوب به نظر برسد.
✅برای ایجاد یک صفحه وب ریسپانسیو اضافه کردن تگ <meta name="viewport" content="width=device-width, initial-scale=1.0"> به صفحه HTML ضروری است. پس از اضافه کردن این تگ، این امکان برای طراحان وب فراهم میشود که با استفاده از استایل دهی CSS صفحات ریسپانسیو ایجاد نمایند.
https://www.w3schools.com/html/html_responsive.asp
@alithecodeguy
✅طراحی وب ریسپانسیو درباره ایجاد صفحاتی است که در همه دستگاهها خوب به نظر برسد.
✅برای ایجاد یک صفحه وب ریسپانسیو اضافه کردن تگ <meta name="viewport" content="width=device-width, initial-scale=1.0"> به صفحه HTML ضروری است. پس از اضافه کردن این تگ، این امکان برای طراحان وب فراهم میشود که با استفاده از استایل دهی CSS صفحات ریسپانسیو ایجاد نمایند.
https://www.w3schools.com/html/html_responsive.asp
@alithecodeguy
W3Schools
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.