#roadmap | #JobSkills | #js

🚀 مسیر یادگیری جاوااسکریپت برای توسعه‌دهندگان آینده‌نگر!

🤔 به دنبال افزایش مهارت‌های #برنامه‌نویسی و تسلط بر #جاوااسکریپت هستید؟ می‌خواهیم یک مسیر جامع و کاربردی برای تبدیل شدن به توسعه‌دهنده وب حرفه‌ای در این زبان پرطرفدار را با هم بررسی کنیم! 🌟

📚 گام اول: مبانی جاوااسکریپت

- شروع کنید با یادگیری سینتکس اصلی، متغیرها، داده‌ ساختارها، و فانکشن‌ها.

  - پروژه‌های کوچک مثل ماشین حساب یا بازی ساده را بسازید.

🔍 گام دوم: مفاهیم پیشرفته

   - وارد شوید به موضوعاتی مانند کلوژرها، پرومیس‌ها و async/await.

- کتابخانه‌های معروف مثل #Lodash را کاوش کنید.

🌐 گام سوم: توسعه Front-End

   - مهارت‌های #HTML و #CSS خود را بالا ببرید و با فریم‌ورک‌های مدرن مثل #React یا #Vue یا #Angular کار کنید.

- SPA (Single Page Application)‌های واکنش‌گرا بسازید.

🔗 گام چهارم: توسعه Back-End با Node.js

   - با #Node.js و فریم‌ورک‌هایی مثل #Express.js آشنا شوید.

 - API‌های RESTful بسازید و با پایگاه‌داده‌های NoSQL مانند #MongoDB کار کنید.

🛠 گام پنجم: ابزارهای توسعه - DevTools

  - از سیستم‌های کنترل نسخه مثل #Git و سرویس‌های CI/CD استفاده کنید.

  - آشنایی با باندلرها و تسک رانرها مثل #Webpack و #Gulp.

📈 گام ششم: پروژه‌های عملی و انتشار

  - پروژه‌های شخصی خود را در #GitHub قرار دهید.

- مهارت‌های خود را با کارآموزی یا کار بر روی پروژه‌های واقعی تقویت نمایید.

✍🏽 ¦ @DevYara

#react

ایجاد یک افکت متنی 3D Bulge تعاملی با React Three Fiber .

سایت شما را جذاب تر می کند

🛸 Demo  ⚡ Code

✍🏽 ¦ @DevYara

#Extension

🚀 بهترین اکستنشن های کروم برای توسعه دهندگان فرانت اند🔥
📌 Font Finder

https://chrome.google.com/webstore/detail/font-finder/gdloiclnenchnhcmapnomnlkjhggkjof/related?gclid=CjwKCAiArY2fBhB9EiwAWqHK6r-SHGq9QKvCJfttDAd0sGQyEXtt8eVKOtluFnN3rrbz_ugeWmoE0xoCcKAQAvD_BwE

📌 Window Resizer

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

📌 Colorzill

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

📌 Clear Cache

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

📌 Image Size Info

https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf?hl=en

📌 Awesome Screenshot and Screen Recorder

https://chrome.google.com/webstore/detail/awesome-screenshot-and-sc/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en

✍🏽 ¦ @DevYara

#Vs | #Vue | #Angular | #React

🌐 تفاوت‌های React, Angular, و Vue.js :

🖌 React :

- شبیه یه بوم نقاشیه که خودت می‌تونی هر چی دوست داری روش بکشی.

- تو با استفاده از اجزا (Components) می‌تونی قسمت‌های مختلف صفحه‌ت رو بارها استفاده کنی.

- کار باهاش راحته و جامعه‌ی بزرگی از توسعه‌دهنده‌ها دورش جمع شدن.

🧱 Angular :

- مثل یک جعبه ابزار پر از همه چیه که برای ساخت یک خونه لازم داری.

- نوشتنش با TypeScript هست که یه کم صرفه‌جویی میکنه و کمک میکنه کمتر اشتباه کنی.

- خوبه برای پروژه‌های بزرگ و سنگین.

🌟 Vue.js :

- ساده و قابل فهم، برای شروع کار عالیه.

- سبکه و سریعه، می‌تونی توی پروژه‌های کوچیک و بزرگ ازش استفاده کنی.

- کامیونیتی فعال و رو به رشدی داره.

☝️ معلومه هرکدوم ویژگی‌های خوب خودشو داره، اما انتخاب بینشون بیشتر به نیازت و سلیقه‌ت بستگی داره.
✍🏽 ¦ @DevYara

#Tailwind

👨🏻‍💻 Tailwind Cheat Sheet این امکان را به شما می دهد که به سرعت همه نام کلاس ها و ویژگی های CSS را پیدا کنید.
🔗لینک سایت:

https://nerdcave.com/tailwind-cheat-sheet

✍🏽 ¦ @DevYara

#javascript

📶 navigator.onLine JavaScript API برای بررسی وضعیت اتصال به اینترنت در مرورگر استفاده می شود. اگر مرورگر به اینترنت متصل باشد، این API true را برمی‌گرداند، در غیر این صورت false .

<div id="state">
        <div id='ofline'>No internet Connection!</div>
    </div>
    <script>
        function isOnline() {
            return navigator.onLine;
        }
        if (isOnline()) {
            state.innerHTML = "<div id='online'>Online ✅</div>"
        } else {
            state.innerHTML = "<div id='ofline'>Offline ❌</div>"
        }
    </script>

✍🏽 ¦ @DevYara

#challenge

عکس میز کار، ستاپ خودتون رو توی کامنت بفرستید، خواهشاً فقط تمیز کنید قبلش!😂
✍🏽 ¦ @DevYara

#font | #tools

• فونت وب 👨🏻‍💻

این یک وب سایتی است که برای یافتن فونت هایی که وب سایت ها استفاده می کنند و میتوانید اون فونت را دانلود کنید.

اگر می خواهید بدانید در کدام سایت از چه فونت هایی استفاده میکنند، کافیست آدرس url این سایت را وارد کنید.
🔗 https://fontofweb.com

✍🏽 ¦ @DevYara

#fun

خطرناک‌تر از کدی که کار نمیکنه، کدیه که با یک بار نوشتن کار میکنه.😂

✍🏽 ¦ @DevYara

#vue

👨🏻‍💻 Vue Cheatsheet

سایتی که اطلاعات مختصری در مورد مفاهیم اولیه Vue.js، Vue Router، Pinia ارائه می دهد.

شامل موضوعات زیر است:

v-bind, v-on, {{ }}, v-html, v-show, v-if, v-else, v-else-if, v-for, v-once, v-model, v-on, v-pre, v-memo, v-cloak و غیره.

🔗 مشاهده سایت
✍🏽 ¦ @DevYara

#JobSkills

چی برا چیه❗️

🖼️ فرانت اند:

HTML + CSS
Javascript
React
VueJs
Angular
Svelte

🔙 بک اند:

Nodejs/Express
Python/Django
PHP/Laravel
Java
C#

💽 دیتابیس:

MongoDB
MySQL
Postgres
Redis

🖥️ دسکتاپ:

Electron
Tairi
PyQt

📱گوشی:

React Native
Flutter
Swift
Kotlin

🖥️ سیستم:

Go
C++
Rust

✍🏽 ¦ @DevYara

#Extension

زیر این پست اکستنشن های که در Vs Code استفاده می‌کنید رو معرفی کنید و در صورت نیاز یک توضیح مختصری بدید! 🌟💙

✍🏽 ¦ @DevYara

#fun

هیچی نمیگم حتما ببینید خیلی خوبه!😂

✍🏽 ¦ @DevYara

#Html

👨🏻‍💻 یک مرجع رایگان HTML شامل تمام عناصر و ویژگی ها است.

htmlreference.io

✍🏽 ¦ @DevYara

#Js_Quiz

🌟 چه چیزی اینجا نشان داده میشود !؟

#tools

بازی کن و یادبگیر مناسب برای تمرین 👨🏻‍💻

1. CodeCombat📍

https://codecombat.com/

2.  CSS Diner📍

https://flukeout.github.io/

3. Flexbox Froggy📍

https://flexboxfroggy.com/

4. CheckIO and Empire of Code📍

https://checkio.org/

5. Flexbox Defense📍

http://www.flexboxdefense.com/

6. Untrusted📍

https://alexnisnevich.github.io/untrusted/

7. CodeMonkey📍

https://www.codemonkey.com/

8. CodinGame📍

https://www.codingame.com/start/

✍🏽 ¦ @DevYara

#Text

من اسم همه ی پسورد هامو گذاشتم "نادرست" که وقتی یادم میره خود برنامه بم بگه "رمز شما نادرست است" 😂

#git

🔴 برگه تقلب git (فارسی)

خیلی مرتب و کامله حتمی یکجا سیو داشته باشید مناسب برای یادآوری و...

✍🏽 ¦ @DevYara