#react
زیباترین React Icon Library!!
🟣 27000+ آیکون زیبا🔵 بیش از 3800 آیکون رایگان
🟡 SVG، React، React Native، npm
🔗 hugeicons.com
✍🏽 ¦ @DevYara
🔥33👍5
#FrontEnd
مسیر 160 روزه یادگیری FrontEnd
روز 1 تا 5 : یادگیری HTML
روزه 5 تا 15 : یادگیری Css
روز 15 تا 20 : طراحی ریسپانسیو
روز 20 تا 30 : یادگیری Flex و Css Grid
روز 30 تا 50 : تمرین و پروژه
روز 50 تا 70 : یادگیری تیلویند / بوت استرپ
روز 70 تا 80 : یادگیری Sass / less
روز 80 تا 110 : یادگیری جاوااسکریپت
روز 110 تا 150 : یادگیری React
روز 150 تا 160 : یادگیری Git و Github
روز 160 به بعد : ساخت پروژه و تمرین
✍🏽 ¦ @DevYara
🔥41👍8😁4💔1
This media is not supported in your browser
VIEW IN TELEGRAM
#vscode
پلاگین "px to rem"
این افزونه به شما امکان تبدیل px به rem و بالعکس را می دهد.
Alt+Z Px - rem، rem - px🌀 دانلود این افزونه
✍🏽 ¦ @DevYara
👍34🔥4❤🔥3⚡1😁1
#jest #javanoscript
🌟 تست نویسی: راهی برای اطمینان از عملکرد بهتر برنامهنویسی!
چرا تست نویسی؟ 🤔🛠️
تست نویسی یک عنصر بسیار اساسی در فعالیت برنامهنویسان است که به آنها کمک میکند از عملکرد صحیح و پایدار نرمافزار اطمینان حاصل کنند. این هنر به برنامه نویسان امکان میدهد با اعتماد بالا به کد خود و توانایی جلب توجه جامعه برنامهنویسی، خدمتی بینظیر ارائه دهند. 🧪🖥️🌿 تعریف تست نویسی :
تست نویسی، فرایندی است که در آن محدوده عملکرد نرمافزار به صورت خودکار یا دستی بررسی میشود. در حقیقت، تست نویسی به انجام عملیات آزمایشی روی کد و بازیابی نتایج و تطابق آنها با خروجیهای مورد انتظار اختصاص دارد.مزایای ایجاد تستهای قوی! 💪🚀
- افزایش اطمینان از خواص عملکردی برنامه
- کاهش زمان و هزینههای لازم برای اصلاح باگها
- ایجاد کد قابل نگهداری و توسعه
🧩 حالا jest چیست؟
یک فریمورک محبوب برای نوشتن تست در جاوا اسکریپت است که با تمامی فریمورک های محبوب جاوا اسکریپت مثل React, Angular, Vue, Node و … کار میکنه.✍🏽 ¦ @DevYara
منبع برای یادگیری jest در یوتیوب
❤🔥37👍4
#Text
زیر این پست فیلم یا سریال مورد علاقتون رو بنویسید، سعی کنید تکراری نباشه...
👍27
#Telegram
⭕️ سرچ جهانی با هشتگ در تلگرام
پاول دورف، گفته که آخر این ماه(میلادی) با زدن روی هشتگ در هر پستی، میتونی یه عالمه پست دیگه از تمام کانال های عمومی رو با همون هشتگ پیدا کنی!
یعنی کافیه روی یه هشتگ بزنی و غرق توی یه دنیای از مطالب جذاب بشی!
این قابلیت جدید، یه قدم دیگه، تلگرام رو به پلتفرمی فوق العاده برای کشف محتواهای تازه و سرگرم کننده تبدیل میکنه.
منتظر این آپدیت خفن باشید!
➖➖➖➖➖➖➖➖➖➖➖➖
✍🏽 ¦ @DevYara
🔥51👍4
#debug #challenge #javanoscript
🛠 چالش دیباگ کد 🛠
📝 صورت مسئله:
ما یک صفحه وب ساده داریم که با فشردن دکمه "Fetch Data" باید اطلاعاتی را از یک API دریافت کند و آنها را در صفحه نمایش دهد. اما به نظر میرسد که کد JavaScript دچار مشکلی است و اطلاعات به درستی نمایش داده نمیشود. وظیفه شما این است که مشکل را پیدا کرده و کد را اصلاح کنید تا دادهها به درستی نمایش داده شوند.📄 کد HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<noscript>Debug Challenge</noscript>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Welcome to Debug Challenge!</h1>
<button id="fetch-data">Fetch Data</button>
<div id="data"></div>
</div>
<noscript src="noscript.js"></noscript>
</body>
</html>
🎨 کد CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#app {
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}📜 کد JavaScript
document.getElementById('fetch-data').addEventListener('click', function() {
fetchData();
});
function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
let output = '<h2>Posts</h2>';
data.forEach(post => {
output += `
<div>
<h3>${post.noscript}</h3>
<p>${post.body}</p>
</div>
`;
});
document.getElementById('data').innerHTML = output;
})
.catch(error => {
console.error('Error fetching data:', error);
});
}🔍 نکات:
کد HTML، CSS، و JavaScript را بررسی کنید.
دکمه "Fetch Data" را کلیک کنید و رفتار صفحه را مشاهده کنید.
اگر صفحه به درستی دادهها را نمایش نمیدهد، خطای موجود در کنسول مرورگر را چک کنید.
موفق باشید! 💪
🔥29👍6
#JobSkills #Cv
نکات رزومه نویسی ‼️
آیا میدانستید؟ هر شرکتی روزانه هزاران رزومه دریافت میکند! 📑 بیشتر آنها در بررسی سیستمی رد میشوند و در بررسی انسانی نیز معمولاً بیشتر از نصف صفحه اول خوانده نمیشود! 📉واقعیت این است که هدف رزومه فقط ورود به مصاحبه است و ادامه داستان در مصاحبه انجام میشود. رزومه شما باید این نکات را داشته باشد:
1. کلمات کلیدی و مهارتی مرتبط 🔑
- مطمئن شوید که کلمات کلیدی و مهارتهای مرتبط با شغلی که برای آن اپلای میکنید، در رزومه شما وجود داشته باشد. این به شما کمک میکند تا در بررسی سیستمی هماهنگی بیشتری با آگهی کار داشته باشید.2. جواب دادن به سوال "چرا باید شما را استخدام کنند" 📋
- در نیم صفحه اول، به صورت غیر مستقیم به این سوال پاسخ دهید. این کار را میتوانید با روشهای زیر انجام دهید:
1. تاثیرگذاری در کارهای قبلی 📈
- توضیح دهید در کارهای قبلی یا دانشگاه چه کار مفیدی انجام دادهاید و چه تاثیری در پروژهها داشتهاید.
2. استفاده از اعداد و ارقام 📊
- با عدد و رقم صحبت کنید؛ مثلاً چند درصد کارایی سیستم با کمک کار تیمی شما افزایش یافته است.
3. نشان دادن علاقه به تکنولوژیهای شرکت 💻
- علاقه خود را به تکنولوژیهای مورد استفاده در آن شرکت نشان دهید.
و در نهایت، میتوانید با کمک ChatGPT رزومهتان را برای هر شغلی شخصیسازی و حرفهای کنید و برای مصاحبه آماده شوید. 🚀
✍🏽 ¦ @DevYara
👍35❤🔥4
#tools
⭕️ این سایت براتون یک اسکرول بار میسازه و در پایان میتونید کد Css آن رو بگیرید و استفاده کنید
scrollbar.app
➖➖➖➖➖➖➖➖➖➖
🔥32👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#SoftSkills
رهایی از کمال طلبی!
همیشه انجام دادن رو به عالی انجام دادن مقدم بشمر!
حتمی دوستان ببینید ارزش دیدن داره مخصوصا برای کسایی که نمیتونن یکاری رو شروع کنن...
✍🏽 ¦ @DevYara
👍27❤🔥4
#Text
خودت رو یک زبان برنامه نویسی تصور کن، کدوم زبان برنامه نویسی بودی !؟
😁27👍3
#javanoscript
#bug
🐞ارورهای رایج در جاوااسکریپت🐞
1. SyntaxError 🚫
- توضیح: این ارور زمانی رخ میدهد که کد جاوااسکریپت به درستی نوشته نشده باشد و قوانین نحوی (syntax) زبان رعایت نشده باشند.
- مثال:
console.log("Hello World'
2. ReferenceError 📚
- توضیح: این ارور زمانی رخ میدهد که سعی در دسترسی به متغیری که تعریف نشده است یا خارج از دامنه فعلی است، داشته باشید.
- مثال:
console.log(nonExistentVariable);
3. TypeError 🛠️
- توضیح: این ارور زمانی رخ میدهد که سعی در انجام عملیاتی روی نوع دادهای نادرست داشته باشید.
- مثال:
let num = 123;
num.toUpperCase(); // TypeError: num.toUpperCase is not a function
4. RangeError 📏
- توضیح: این ارور زمانی رخ میدهد که عددی خارج از محدوده مجاز باشد.
- مثال:
let arr = new Array(-1); // RangeError: Invalid array length
5. URIError 🌐
- توضیح: این ارور زمانی رخ میدهد که یک URI (Uniform Resource Identifier) نامعتبر است.
- مثال:
decodeURIComponent('%'); // URIError: URI malformed
6. EvalError ⚠️
- توضیح: این ارور زمانی رخ میدهد که یک ارور در تابع eval() باشد. این ارور در نسخههای جدیدتر جاوااسکریپت به ندرت رخ میدهد.
- مثال:
// EvalError تقریبا منسوخ شده است و در موارد نادر رخ میدهد
7. InternalError 🧩
- توضیح: این ارور زمانی رخ میدهد که یک ارور داخلی در موتور جاوااسکریپت رخ دهد، مانند فراخوانی بیش از حد توابع تکراری (Recursion).
- مثال:
function recurse() {
recurse();
}
recurse(); // InternalError: too much recursion
8. AggregateError 🔄
- توضیح: این ارور برای نشان دادن چندین خطا در یک عملیات مانند Promise.all() استفاده میشود.
- مثال:
const err1 = new Error('Error 1');
const err2 = new Error('Error 2');
const aggregateError = new AggregateError([err1, err2], 'Multiple errors occurred');
console.log(aggregateError); // AggregateError: Multiple errors occurred
🌟نکات برای مدیریت ارورها🌟
1. استفاده از try...catch 🛡️
- توضیح: استفاده از بلوک try...catch برای مدیریت ارورها و جلوگیری از توقف اجرای برنامه.
- مثال:
try {
// کد ممکن است ارور داشته باشد
} catch (error) {
console.error(error);
}
2. پیادهسازی پیامهای ارور سفارشی 🖋️
- توضیح: ایجاد پیامهای ارور سفارشی برای بهتر فهمیدن مشکل.
- مثال:
throw new Error('Something went wrong!');
3. استفاده از ابزارهای دیباگ 🐞
- توضیح: استفاده از ابزارهای دیباگ مانند کنسول مرورگر برای ردیابی و رفع ارورها.
- مثال:
console.log('Debug message');
✍🏽 ¦ @DevYara
👍34❤🔥2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#Css
برای وسط قرار دادن یک المان (با هنذفری گوش کنید +18 )
صرفا برای طرز گفتار این دوستمون این پست و گذاشتم، یادگرفتید!؟😂
✍🏽 ¦ @DevYara
🤣44👍8