توسعه دهندگان – Telegram
توسعه دهندگان
9.09K subscribers
259 photos
157 videos
31 files
172 links
رسالت ما – توانمندسازی توسعه‌دهندگان و علاقه‌مندان به فناوری با ارائه‌ی نوشته‌ها، آموزش‌ها، اخبار و تجربه‌های جذاب و به‌روز!


👨🏻‍💻 | @Afsh6n
🍓 | @TopicsDev
🗂 | @ArchiveDevs
Download Telegram
#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
#Js_Quiz

خروجی چیست!؟
console.log([] == []);
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❤‍🔥31😁1
#jest #javanoscript

🌟 تست نویسی: راهی برای اطمینان از عملکرد بهتر برنامه‌نویسی!

چرا تست نویسی؟ 🤔🛠️
تست نویسی یک عنصر بسیار اساسی در فعالیت برنامه‌نویسان است که به آن‌ها کمک می‌کند از عملکرد صحیح و پایدار نرم‌افزار اطمینان حاصل کنند. این هنر به برنامه نویسان امکان می‌دهد با اعتماد بالا به کد خود و توانایی جلب توجه جامعه برنامه‌نویسی، خدمتی بی‌نظیر ارائه دهند. 🧪🖥️
🌿 تعریف تست نویسی :
تست نویسی، فرایندی است که در آن محدوده عملکرد نرم‌افزار به صورت خودکار یا دستی بررسی می‌شود. در حقیقت، تست نویسی به انجام عملیات آزمایشی روی کد و بازیابی نتایج و تطابق آن‌ها با خروجیهای مورد انتظار اختصاص دارد.
مزایای ایجاد تست‌های قوی! 💪🚀
- افزایش اطمینان از خواص عملکردی برنامه

- کاهش زمان و هزینه‌های لازم برای اصلاح باگ‌ها

- ایجاد کد قابل نگهداری و توسعه


🧩 حالا jest چیست؟
یک فریمورک محبوب برای نوشتن تست در جاوا اسکریپت است که با تمامی فریمورک های محبوب جاوا اسکریپت مثل React, Angular, Vue, Node و … کار میکنه.

منبع برای یادگیری jest در یوتیوب
✍🏽 ¦ @DevYara
❤‍🔥37👍4
This media is not supported in your browser
VIEW IN TELEGRAM
#JobSkills #Cv

اینجوری رزومه ننویس چون حتما ریجکت میشی!

✍🏽 ¦ @DevYara
🔥35👍8
#Text

زیر این پست فیلم یا سریال مورد علاقتون رو بنویسید، سعی کنید تکراری نباشه...
👍27
This media is not supported in your browser
VIEW IN TELEGRAM
#fun

یه موزیک برنامه نویسی بشنویم..😂

✍🏽 ¦ @DevYara
😁35👍5
#Telegram

⭕️ سرچ جهانی با هشتگ در تلگرام

پاول دورف، گفته که آخر این ماه(میلادی) با زدن روی هشتگ در هر پستی، میتونی یه عالمه پست دیگه از تمام کانال های عمومی رو با همون هشتگ پیدا کنی!
یعنی کافیه روی یه هشتگ بزنی و غرق توی یه دنیای از مطالب جذاب بشی!
این قابلیت جدید، یه قدم دیگه، تلگرام رو به پلتفرمی فوق العاده برای کشف محتواهای تازه و سرگرم کننده تبدیل میکنه.
منتظر این آپدیت خفن باشید!


✍🏽 ¦ @DevYara
🔥51👍4
Full-Stack Developer Song
@Dr_Front
#fun #Music

موزیک برنامه نویسی باحال و بامزه سیو کنید صفا کنید و برای رفیقاتون بفرستید😂

✍🏽 ¦ @DevYara
😁33👍7🔥5
یادی کنیم از کشته شدگان پرواز 752💔
👍84❤‍🔥23😁7💔3🔥1🎉1
#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
#Text

می گویند #دنیا متعلق به کسانی‌ست
که زود از خواب بیدار می شوند،
دروغ است؛
دنیا متعلق به کسانی ست که
از بیدار شدن شان خشنودند ...
❤‍🔥42👍7
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
#Text

بعد کد زدن یا دیباگ کردن و... چی حال میده بنظرتون!؟
😁30👍4
#SoftSkills

🌟 چطور پروژه بگیرم؟!

روزمه داشته باش

نمونه کار بزن

مهارت های نرم رو یاد بگیر

تعهد کاری داشته باش

با همکاران تعامل داشته باش


یه مورد هم شما بگید!
👍47🔥4