وقتی بالاخره یه باگ رو 5 صبح فیکس میکنی 😂😂

#fun
@CodeModule

با کتابخانه Parallax بیشتر آشنا بشید 🔥

کتابخانه Parallax.js، یک کتابخانه جاوااسکریپتی هست که جهت ایجاد افکت‌های پارالاکسی جذاب در وبسایت‌ها استفاده میشه. افکت های پارالاکس باعث میشن که عناصر مختلف در صفحه به صورت پویا حرکت کنن، و افکت های چشم‌نوازی ایجاد کنن.


برخی ویژگی‌های Parallax.js⬇️

🔵سبک و کم‌حجم

کتابخانه Parallax.js فوق‌العاده سبکه که همین امر باعث میشه، به سرعت بارگذاری و اجرا بشه و تأثیر کمی بر عملکرد کلی وبسایت داره.

🔵پیاده‌سازی آسان

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

🔵سازگاری با مرورگرها

این کتابخانه با اکثر مرورگرهای مدرن سازگاره، بنابراین نیازی به نگرانی در مورد ناسازگاری مرورگرها نیست.

🔵پشتیبانی از عناصر مختلف

از Parallax.js برای ایجاد افکت در تصاویر، متون، ویدئوها و سایر عناصر HTML، میشه استفاده کرد.

🔵تنظیمات انعطاف‌پذیر

این کتابخانه دارای تنظیمات مختلفی هست که به دولوپرا اجازه میده تا رفتار و ظاهر افکت‌ها رو به راحتی کاستوم کنن.


برای کسب اطلاعات بیشتر و دسترسی به مستندات کامل، می‌تونید به داکیومنت این کتابخانه مراجعه کنید ⚡️

Document 🌐

#parallax #javascript
@CodeMoule

بهینه سازی کد با ابزار tailwind-merge 💀

کتابخانه tailwind-merge یک ابزار قدرتمند برای توسعه دهندگانی هست، که از Tailwind CSS استفاده می‌کنن. هدف اصلی این کتابخانه، ترکیب کلاس‌های تکراری در پروژه‌های Tailwind CSS و جلوگیری از تضادهای احتمالی هست.

ویژگی‌های اصلی tailwind-merge ⬇️

ترکیب کلاس‌های تکراری: اگه چندین کلاس Tailwind که متناقض هستن (مثل p-4 و p-2) به یک تگ اضافه بشن، tailwind-merge به‌طور خودکار تنها یکی از اون هارو(آخرین) و نگه می‌داره و بقیه رو حذف می‌کنه.

افزایش خوانایی و بهینه‌سازی: با حذف کلاس‌های تکراری و متناقض، کد نهایی شما خواناتر و بهینه‌تر خواهد بود، که منجر به کاهش حجم کد CSS تولید شده و افزایش عملکرد صفحه وب می‌شود.

ادغام کلاس‌ها در زمان واقعی: این کتابخانه می‌تونه به‌طور دینامیک در هنگام ساختن پروژه‌های جاوااسکریپت، کلاس‌ها رو ترکیب کنه، بنابراین نیازی به عملیات دستی یا استفاده از ابزارهای دیگه نیست.


این کتابخانه، به خصوص برای پروژه‌های بزرگ و پیچیده که از تعداد زیادی کلاس Tailwind استفاده می‌کنن، بسیار مفیده و می‌تونه به کاهش سردرگمی و پیچیدگی کد کمک کنه⚡️


#tailwind #tools
@CodeModule

Good Night 🌚✨

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


@CodeModule

😎 چقدر راجب DNS اطلاعات دارید؟

سرویس DNS، یکی از پایه‌های اینترنته و بیشتر ما در طول روز بدون اینکه بدونیم، از DNS ها استفاده می‌کنیم. تو این پست، با هم به بررسی مفهوم و کارایی DNS می پردازیم و برخی از مزایا و معایبش رو شرح میدیم.

📶 سرویس DNS چیه و چجوری کار میکنه؟

سرویس DNS که مخفف Domain Name System هست، فهرست توزیع شده‌ ایه که اسم دامنه قابل خواندن توسط انسان، مثل www.CodeModule.com رو به اعداد خوانا برای کامپیوترا، یعنی IP آدرس تبدیل میکنه.

✅ در واقع DNS سیستمیه که اسم دامنه وب رو سازماندهی میکنه و اونها رو برای همه کسایی که میخوان به شبکه وصل بشن، قابل‌فهم‌تر میکنه.

❔ وقتی که از یک سایت بازدید میکنید، کامپیوتر شما یک سری مراحل رو برای تبدیل آدرس وب قابل‌خوندن انسان، به یک آدرس IP قابل‌خوندن ماشین دنبال میکنه. سرویس DNS از یک دیتابیس سلسله مراتبی استفاده میکنه که شامل اطلاعاتی در مورد نام دامنه هست. فرض کنید ک شما تو مرورگر خودتون اسم دامنه ی سایتیو وارد میکنید.
اولین کاری که کامپیوتر شما انجام خواهد داد، ارسال درخواست به سرور DNS محلی سیستم عامله تا بررسی کنه که ایا اصلا پاسخ مورد نیاز شما در حافظه نهان یا همون  (Cache) کامپیوتر ذخیره شده یا نه. اگر در حافظه پنهان پیدا نشد، درخواستتون از طریق اینترنت به یک یا چند سرور DNS فرستاده میشه، که به‌طور کلی توسط ارائه‌دهنده خدمات اینترنت شما با اونها ارتباط برقرار میشه.

اگر اطلاعات لازم تو این سرورهای DNS پیدا نشه، درخواست به سرورهای خارجی دیگه ای فرستاده میشه.

✅مزایای سرویس DNS چیه؟

🔵تسهیل استفاده از اینترنت

🔵ثبات و سرعت بالا

🔵مفید برای موتور های جستجو

❌معایب سرویس DNS چیه ؟

🔵 احتمال رو به رو شدن با DNS Attack

🔵آسیب پذیری های امنیتی مثل ویروس مخرب و ....


⚠️برای جلوگیری از مشکلات امنیتی میتونید از آنتی ویروس های مطمئن استفاده کنید

این سرویس نقش حیاتی تو ترجمه اسم دامنه‌های قابل خوندن توسط انسان، به آدرس‌های IP قابل خوندن توسط ماشین ایفا میکنه. این فرآیند، ناوبری و ارتباط بی‌وقفه بین دستگاه‌های موجود تو وب رو امکان‌ پذیر میکنه. همچنین یکی از دانش های پایه برنامه نویسان وب محسوب میشه که آشنایی باهاش براتون یک مزیت حساب میشه! 👨‍💻


#dns #web #basic
@CodeModule

اگه میخوای مهاجرت کنی و دنبال پیدا کردن جاب آفر و ویزا اسپانسرشیپ هستی، این پست مخصوص خودته 💀

5 وب سایت زیر، تعداد زیادی پیشنهاد شغلی به همراه طرح های ویزا اسپانسر، به شما ارائه میدن.


🇸🇪http://arbetsformedlingen.se

🇪🇪http://workinestonia.com

🇩🇰http://workindenmark.dk

🇩🇪http://make-it-in-germany.com/en

🇫🇮http://workinfinland.com/en/


#migrate
@CodeModule

✌️ در جاوا اسکریپت بدون استفاده از کتابخانه، متن رو به گفتار تبدیل کن !

✅با پراپرتی speechSynthesis این کار به راحتی امکان پذیره!

وظیفه speechSynthesis، ایجاد و کنترل صدای گفتاری (تبدیل متن به گفتار) هست.
برای استفاده از speechSynthesis، میتونید از متدهای مختلفی استفاده کنید تا متن مورد نظر و به گفتار تبدیل، و کنترل کنید (جلوتر ازشون نام میبریم).

برای شروع ابتدا باید یک آبجکت از جنس SpeechSynthesisUtterance بسازیم تا امکان استفاده از پراپرتی speechSynthesis رو داشته باشیم:

let to_speak = new SpeechSynthesisUtterance('this is a test'); 
 
speechSynthesis.speak(to_speak); 

🔵در خط اول کد بالا، یک شئ از جنس SpeechSynthesisUtterance ساختیم و نیازه که یک پارامتر بهش پاس بدیم که اون پارامتر، باید یک string باشه که بتونه اون string رو تلفظ کنه.

🔵در مرحله بعد ما برای اینکه بتونیم متن رو تلفظ کنیم، باید speechSynthesis رو صدا کنیم که خودش شامل چندین متد از جمله speak ، pause ، resume و ... میشه که جهت کنترل صدا هست. اینجا برای تبدیل متن به گفتار نیازه که از متد speak استفاده کنیم.

👨‍💻متد speak جهت تلفظ متن استفاده میشه، بنابراین این متد رو به speechSynthesis اضافه میکنیم و آبجکتی که اول ساختیم و به عنوان پارامتر بهش پاس میدیم و کار تمام.

⚠️این پراپرتی در تمام بروزر ها ساپورت میشه و با مشکل مواجه نخواهید شد.


#js #web
@CodeModule

👻 با Jotai بیشتر آشنا بشید

در واقع Jotai یک کتابخانه state manager از معماری Atomic و همچنین سبک و مدرن برای برنامه‌های React هست که به سادگی و کارایی تأکید داره.

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

✅رابط کاربری سبک و شفاف Jotai، اونو به یک انتخاب جذاب، برای دولوپرایی که به دنبال یک سولوشن ساده اما قدرتمند برای مدیریت استیت هستن، تبدیل می‌کنه. Jotai با ارائه تعادل بین راحتی استفاده و انعطاف پذیری بدون کدهای پیچیده، تونسته خودی نشون بده و حسابی سر و صدا کنه.

مزایای استفاده از استیت منیجر Jotai ⬇️

◀️راحتی استفاده

◀️یادگیری آسان

◀️انعطاف پذیری

◀️حجم کم و بهینه


✅‌ همچنین بنده یک مقاله درباره Jotai نوشتم، که در اون با کلی مثال برای هر کانسپت، میتونید به راحتی کار با این استیت منیجر رو یاد بگیرید و در نهایت، یک پروژه نهایی با jotai رو با هم توسعه میدیم.

برای یادگیری این کتابخانه، میتونید به داکیومنت و همچنین مقاله بنده که در گیتهاب به صورت اوپن سورس منتشر کردم، سر بزنید 🧑‍🎓


Document 🌕

How-to-Learn-Jotai-Article 🐱

#statemanager #react #jotai #atomic
@CodeModule

مهارت سرچ کردن چقدر اهمیت داره؟ 🤔

یکی از مهم ترین مهارت هایی که برای تبدیل شدن به یک برنامه نویس حرفه ای لازمه، مهارت سرچ کردن در گوگل هست. اینکه بدونید چطور راه حل مشکلات و باگ هاتون رو، با جستجوی صحیح در گوگل پیدا کنید و اون هارو برطرف کنید.

در انجمن ها، کامیونیتی ها، تالارهای گفت‌گو، وبسایت ها و دیگر منابعی که در سراسر جهان وجود داره، قطعا مشکل و سوالی مشابه مشکل شما مطرح شده و پاسخی براش ارائه شده، بنابراین فقط کافیه بلد باشید چطور سرچ کنید.

مهم ترین نکته اینه که انگلیسی سرچ کنید. در صورتی که زبانتون زیاد خوب نیست،
میتونید از translate استفاده کنید. اما چرا؟ دلیلش اینه بتونید از تمام منابع جهانی استفاده کنید، اگه فقط فارسی سرچ کنید، محدود به منابع و سایت های ایرانی میشید و ممکنه جواب سوال های تخصصیتون رو نگیرید :)

این وسط اگه سرچتون رو به شکل صحیحی انجام بدید، زودتر به جواب میرسید. واسه درست سرچ کردن یه سری نکات هست، که با رعایت کردنشون یه پله به نتیجه مد نظرتون نزدیک تر میشید.


نکاتی در رابطه با شیوه صحیح سرچ کردن⬇️

1️⃣سرچ با اجبار مطابقت دقیق

برای ایجاد اجبار در جستجوی دقیق عبارت سرچ شده، از عملگر " در اطراف عبارت مورد نظر خود استفاده کنید.

"What is Javascript"

2️⃣استفاده از عملگر AND

استفاده از عملگر AND فقط نتایجی ر‌و بر می‌‌گردونه که شامل نتایج مشترک هر دو قسمت عملگر AND باشند.

Html And Css

3️⃣استفاده از عملگر OR

استفاده از عملگر OR فقط نتایجی رو بر می‌‌گردونه که شامل نتایج یکی از عبارات دو طرف عملگر OR باشند.

Javascript or python" free cours

4️⃣استفاده از علامت *

زمانی که بخشی از عبارت مورد نظرتون و فراموش می‌کنید، به راحتی می‌تونید به جای اون عبارت یا کلمه از علامت (ستاره) استفاده کنید.

the * of money

5️⃣استفاده از عملگر /

از عملگر اسلش یا "/"، میتونید برای جستجوی دقیق‌تر استفاده کنید. این عملگر به شما این امکان و میده که نتایج جستجو رو بر اساس دسته‌بندی خاصی فیلتر کنید.

Laptop/lenovo

قطعا در طول دوران برنامه نویسی با چالش های زیادی روبه رو میشید. با یادگیری چند تکنیک ساده میتونید این چالش ها رو به فرصت تبدیل کنید و به یک برنامه نویس خود ساخته تبدیل شوید 💀


#search
@CodeModule

🤯متد های کاربردی Console که نمیدونستی!

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


⚡️انواع متد ها و کاربردهاشون:

1️⃣متد log: برای چاپ کردن اطلاعات دلخواه اعم از متن ، عدد ، آبجکت ، آرایه ، ‌و ... در کنسول مرورگر

console.log("CodeModule")

2️⃣متد info: برای خروجی اطلاعات آموزنده روی کنسول‌ (درباره موضوعی میخواید اطلاعات کمک کننده بدید)

console.info("CodeModule is the best")

3️⃣متد error: برای خروجی خطا روی کنسول که متن دلخواه شما رو به شکل ارور در کنسول چاپ میکنه

console.error("this is a error")

4️⃣متد warn: برای خروجی اخطار روی کنسول که متن دلخواه شما رو به صورت هشدار (با رنگ زرد) در کنسول چاپ میکنه

console.warn("this is a warn")

5️⃣متد clear: برای پاک کردن کنسول از همه لاگ ها و ارور ها و ...

console.clear()

6️⃣متد time و timeEnd : برای نشان دادن طول مدت اجرای یک تکه کد استفاده میشه

   console.time("myTimer is start");
   // some code here
   console.timeEnd("myTimer is end");
  

7️⃣متد table: برای نمایش داده‌ها به‌صورت جدول روی کنسول، که خیلی کاربردیه!

   const names = ["mahan", "shahin", "ghasem"];
   console.table(names); 

با یادگیری این متد ها، میتونید خیلی حرفه ای تر و راحت تر با کنسول کار کنید و خروجی ها و مشکلات کد هارو، دقیق تر بررسی کنید 🏖️


#console #js
@CodeModule

😎 مهارت حل مسئله، یکی از SoftSkill های مهم در برنامه نویسیه که هر دولوپر با تقویت این مهارت، میتونه خودشو نسبت به سایر رقبا حرفه ای تر کنه.

این کتاب در تقویت مهارت حل مسئله، حسابی بهتون کمک میکنه و یاد میگیرید که چطور یک مسئله رو، به بهترین روش حل کنید🔥

توصیه میکنم حتما مطالعش کنید👍


#book #softskill
@CodeModule

ابزار storybook چیه و چه کاربردی داره؟🤔

استوری بوک از ابزارهای کارآمد برای طراحی، تست و پیاده سازی UI پروژه ها میباشد. کتابخانه بزرگ و قدرتمندی که با زبان جاوا اسکرپیت و به صورت open source منتشر شده و به کمک افزونه های قدرتمندش، رشد چشمگیری در بین دولوپرا و توسعه دهندگان پیدا کرده.


برخی از ویژگی های Storybook ⬇️


1⃣توسعه کامپوننت های UI به صورت جداگانه و غیر وابسته به سایر کامپوننت ها

2⃣اجرا خارج از محیط برنامه اصلی (کاهش نگرانی در مورد کدهای پروژه و ...)

3⃣افزونه های قدرتمند به همراه API بسیار ساده برای شبیه سازی و توسعه کامپوننت ها ( لینک - نویگیشن - کلیک و ... )

4⃣افزایش کارایی کامپوننت های نوشته شده

5⃣پشتیبانی از اغلب فریمورک‌ها و کتابخانه‌ها (React، Vue، Angular و ...)

6⃣کمک به داکیومنت نویسی پروژه

7⃣اجرای تست های مختلف بر روی کامپوننت (یونیت تست - اینتگریشن - اسنپ شات و ... )

8⃣ امکان توسعه المان ها و کامپوننت ها به صورت تیمی

9⃣استفاده دوباره از کامپوننت های موجود و کاهش کدها و پیچیدگی پروژه


اگرچه Storybook ابزار قدرتمندی برای توسعه و نمایش اجزای رابط کاربری هست، اما برای هر نوع پروژه ای مناسب نیست. این ابزار برای پروژه‌های بزرگ مقیاس، و همچنین پروژه هایی مناسبه که معماری‌ مبتنی بر کامپوننت دارن. به طور کلی، هر پروژه‌ای که اعضای تیم، نیاز به مستندسازی، همکاری و تست داشته باشن، storybook بهترین گزینه هست💀


#storybook
@CodeModule

5 اکستنشن کاربردی گوگل، برای طراحان وبسایت⚡️

1⃣اکستنشن WhatFont

یکی از مهم‌ترین افزونه‌هایی که باید به‌ عنوان طراح وب بشناسید، اکستنشن WhatFont هست. به کمک این افزونه می‌تونید فقط با نگه داشتن ماوس بر روی فونت مورد نظر، نوعش رو شناسایی کنید.

2⃣اکستنشن Colorzilla

با استفاده از اکستنشن Colorzilla، می‌تونید کد HEX رنگ مورد نظرتون رو پیدا، و به‌راحتی کپیش کنید. با این ابزار نه تنها می تونید تاریخچه رنگ ها رو ببینید، بلکه این امکان و هم دارید که گرادیان های CSS ای رو تحلیل کنید.

3⃣اکستنشن Image Downloader

اگه از اون دسته دولوپرایی هستید که روزانه تصاویر زیادی دانلود می‌کنن، اکستنشن Image Downloader مختص شماست. به کمک این افزونه می‌تونید در سریع‌ترین زمان ممکن، تعداد زیادی از تصاویر رو بر اساس ابعاد مورد نظرتون فیلتر و دانلود کنید.

4⃣اکستنشن Dimensions

با استفاده از این افزونه خفن، میتونید فاصله بین ابعاد یا شکاف هایی که بین عناصر وجود داره، و یا هر چیز دیگری که در سایت هست رو اندازه گیری کنید.

5⃣اکستنشن CSSViewer

اگه به دنبال کدهای CSS بخش‌ های مختلفی از یک وبسایت هستید، می‌تونید از اکستنشن CSSViewer کمک بگیرید. فقط با نگه داشتن ماوس در هر جایی از صفحه، میتونید به استایل های CSS اون قسمت دسترسی داشته باشید.


#extensions
@CodeModule

دکتر ها : گوگل کردن مطالب آنلاین (چیزایی که بلد نیستید) از شما یک دکتر نمیسازه.

برنامه نویسا : 😂😂


#fun
@CodeModule

😇 با زبان نشانه گذاری XML بیشتر آشنا بشید

در واقع XML مخفف عبارت «eXtensible Markup Language» به معنی «زبان نشانه‌گذاری توسعه‌پذیر» هست. XML زبان به حساب میاد، اما زبان برنامه نویسی محسوب نمیشه.

زبان XML از «نشانه‌گذاری» (Markup) استفاده می‌کنه و قابل بسط و توسعست. XML از زبان استاندارد نشانه‌گذاری تعمیم‌یافته (Standard Generalized Markup Language) یا به اختصار SGML مشتق شده.

🧐تفاوت Xml با Html چیه ؟

برخلاف تگ‌ها یا همون برچسب‌های HTML، تگ‌های XML خود توصیف‌گر هستن یعنی خودشون تعیین کننده قابلیتشونن. XML یک قالب و فُرمت آزاد و باز به حساب میاد. یعنی فرمت فایل XML به صورت آزاد برای استفاده هر فردی در دسترس قرار داره. اصطلاح ازاد یا باز (Open) در اینجا فلسفه اپن سورس رو تداعی میکنه. پسوند XML به صورت .xml   هست.

🔵 مزایای استفاده از XML چیه ؟

🔵پشتیبانی از تراکنش‌های بین تجاری

🔵حفظ تمامیت و بی‌نقصی داده‌ها

🔵بهبود کارایی جستجو

🔵طراحی اپلیکیشن‌های انعطاف‌پذیر


✅اهمیت زبان XML در چیه و چرا اینقدر مهمه؟

زبان نشانه‌گذاری XML زبانیه که قوانینی رو برای تعریف هر داده‌ای فراهم میسازه. برخلاف سایر زبان‌های برنامه نویسی، XML به خودی خود قابلیت اجرای عملیات محاسباتی رو نداره. در عوض، هر زبان برنامه نویسی یا نرم افزاری رو میشه برای مدیریت داده‌های ساختارمند استفاده کرد.

✅ این زبان در چه زمینه هایی کاربرد داره؟

◀️انتقال داده ها

◀️وب اپلیکیشن ها

◀️مستندسازی

◀️برنامه نویسی اندروید

در کل XML یک زبان نشانه‌گذاریه که به دلیل قابلیت‌های گسترده‌اش برای ذخیره‌سازی و انتقال داده‌ها، در برنامه‌نویسی و سیستم‌های اطلاعاتی بسیار پرکاربرد هست.

برای یادگیری این زبان میتونین به منابع معتبر مثل W3schools مراجعه کنید🔥


#xml #language
@CodeModule

Good Night 🌚✨

اگر امسال درمورد پارسال تون فکر کنید و احساس حماقت نداشته باشید، پس به اندازه کافی پیشرفت نکردید.


@CodeModule

📖 دسترسی به تاریخچه Git با Git History

در این پست یک اکستنشن بهتون معرفی میکنم که با استفاده از اون، میتونید تغییراتی که تا الان روی پروژه و مخزن گیت اعمال کردید، مشاهده کنید.

به طور کلی، اکستنشن Git History به شما این امکان و میده تا تاریخچه branch ها، فایل‌ها و لاین هاتونو به صورت گرافیکی جستجو و پیگیری کنید 🏖️

برای نصب این اکستنشن کاربردی، عبارت Git History رو در بخش extensions برنامه Vscode، سرچ کنید 🔥


#extension #git #vscode
@CodeModule

وقتی اشتباهی یه قسمت از استایلا رو پاک میکنی، پروژه: 😂😂


#fun
@CodeModule