JSKernel – Telegram
JSKernel
146 subscribers
48 photos
23 videos
9 files
65 links
اینجا باهم دنیای برنامه‌نویسی و توسعه وب رو کشف می‌کنیم.

Group :
https://news.1rj.ru/str/JSKernelGap
Download Telegram
Kestra یه ابزار متن‌بازه که برای مدیریت کارای پیچیده طراحی شده. باهاش می‌تونید کلی کار رو خودکار کنید و کار با داده‌ها رو راحت‌تر پیش ببرید.

ویژگی‌ها:
طراحی وظایف به‌صورت ماژولار: می‌تونید وظایف رو به بخش‌های کوچیک‌تر تقسیم کنید تا راحت‌تر مدیریت بشن.

پیکربندی فایل با فرمت YAML: تنظیمات و فرآیندهاش با فایل‌های YAML انجام می‌شه که هم ساده‌ست، هم مرتب.

واکنش سریع به رویدادها: می‌تونه سریع به هر اتفاقی که می‌افته واکنش بده.

استفاده از Kestra علاوه بر اتوماسیون کردن فرایند، یه ابزار نظارتی هم داره که میشه باهاش عملکرد کارا رو لحظه‌ای چک کرد و مشکلات رو راحت‌تر پیدا کرد.

برای شروع:
Github: Kestra
Slack: Kestra
#tools #kestra

Channel: @JSKernel
👍2
🔥 Shadcn/ui: یه انقلاب تو طراحی وب!


فریمورک Shadcn/ui یه روش جدید و فوق‌العاده انعطاف‌پذیر واسه طراحی رابط کاربری داره که همه مشکلات کتابخونه‌های قدیمی مثل Material UI و Bootstrap رو حل می‌کنه.

چرا Shadcn/ui محشره؟
بدون سنگین شدن پروژه: دیگه لازم نیست هزار تا خط CSS فقط واسه یه دکمه ساده اضافه کنی!

کنترل کامل: می‌تونی راحت کد کامپوننتارو ببینی و هر جوری که دوست داری تغییرشون بدی.

انعطاف بی‌حد و مرز: از استایل دادن با Tailwind گرفته تا سفارشی‌سازی خفن، همه چی دست خودته.

ابزار CLI: اضافه کردن کامپوننتا از همیشه راحت‌تر شده!


⚙️ چیزایی که Shadcn/ui داره:

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

Shadcn/ui کمک می‌کنه که وب‌اپلیکیشن‌های شیک و مدرن رو سریع‌تر و راحت‌تر بسازیم. اگه هنوز از کتابخونه‌های قدیمی استفاده می‌کنی، وقتشه تغییر کنی!

#ShadcnUI #توسعه_وب #UI #فریمورک

Channel: @JSKernel
This media is not supported in your browser
VIEW IN TELEGRAM
Coding is fun!?
#vibe
❤‍🔥1
17 ابزار برتر هوش مصنوعی برای برنامه‌نویس‌ها 🚀💻

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

‏1. GitHub Copilot 🤖: پیشنهادات هوشمند کد در IDEها، مناسب برای زبان‌های مختلف.
‏2. Tabnine 🔒🛠: تکمیل کد با تمرکز بر حفظ حریم خصوصی.
‏3. Cursor AI 🔄⚡️: اصلاح خطاها و خودکارسازی وظایف تکراری.
‏4. Sourcegraph Cody 🗂📊: ایده‌آل برای پروژه‌های بزرگ و تیمی.
‏5. Replit ☁️🤝: محیط کدنویسی ابری با ابزار هوش مصنوعی.
‏6. Codiga 🛡🐛: تحلیل استاتیک برای کدهای تمیز و ایمن.
‏7. Sourcery 🐍🔧: بازسازی خودکار کدهای پایتون.
‏8. DeepCode AI (Snyk) 🕵️‍♂️🔐: کشف آسیب‌پذیری‌های امنیتی در کد.
‏9. Hugging Face 🧸💡: مدل‌های پیش‌ساخته برای تولید کد.
‏10. Amazon SageMaker 📊🧠: ابزارهایی برای ساخت و استقرار مدل‌های یادگیری ماشین.
‏11. Amazon Q Developer ☁️🛠: دستیار مدیریت خدمات AWS.
‏12. CodiumAI 🧪✔️: تولید تست‌های واحد با هوش مصنوعی.
‏13. MutableAI 📋🛠: بهینه‌سازی کد و مستندسازی خودکار.
‏14. AskCodi 📜: پیشنهاد کد با پرسش زبان طبیعی.
‏15. Microsoft IntelliCode 🖥⚡️: پیشنهادات هوشمند در Visual Studio و VS Code.
‏16. CodeGeeX 💻🌐: تولید کد چندزبانه مبتنی بر ابر.
‏17. OpenAI Codex ✍️🤖: تولید کد از متن طبیعی، پایه GitHub Copilot.


با این ابزارها هم وقتت ذخیره میشه، هم کدنویسیت میره رو هوا!

#tools #ai #هوش_مصنوعی #coding

Channel: @JSKernel
"مسیر مبتدی: یادگیری React و Next.js با پروژه‌های کاربردی"

هدف‌ها: مسلط شدن به اصول اولیه React و Next.js. ساخت پروژه‌های کوچیک.

مبانی React:
• ‏JSX، کامپوننت‌ها، Props، State و رویدادها.
• کامپوننت‌های تابعی و Hooks (useState، useEffect).
• رندرینگ شرطی و لیست‌ها.

مبانی Next.js:
• صفحات و مسیریابی (دایرکتوری pages/، مسیرهای داینامیک).
• تولید سایت استاتیک (SSG) و رندرینگ سمت سرور (SSR).
• مسیرهای API (/api).

استایل‌دهی:
• ‏CSS Modules، Tailwind CSS یا Styled Components.

ابزارها:
• استفاده پایه از npm/yarn و کنترل نسخه با Git.

تمرین:
• ساخت یک سایت پورتفولیوی شخصی یا یک وبلاگ با استفاده از SSG.

پروژه‌های پیشنهادی:
• اپلیکیشن Todo.
• برنامه هواشناسی (با استفاده از مسیرهای API).
• وبلاگ با Markdown (SSG و مسیرهای داینامیک).


اینجا همه APIهای عمومی رایگان برای تمرین در دسترسه: Public APIs
منبع

#react #nextjs #frontend #tailwindcss

Channel: @JSKernel
👍1
6 ترفند ساده جاوااسکریپت برای کدنویسی حرفه‌ای‌تر 🔥

1. خلاص شدن از if...else‌های شلوغ: به‌جای نوشتن کلی شرط، قیمت‌ها یا داده‌هاتو توی یه شیء یا Map ذخیره کن.
const priceMap = { apple: 1.0, banana: 0.5 };
const getPrice = (item) => priceMap[item] || 0;


2. جایگزینی حلقه‌های اضافی با عملیات زنجیره‌ای: با استفاده از filter و map می‌تونی آرایه‌ها رو راحت‌تر فیلتر و تغییر بدی.
const group1Foods = foods.filter(f => f.group === 1).map(f => f.name);


3. جستجوی سریع‌تر با find: به‌جای کلی حلقه نوشتن، با find مستقیم چیزی که می‌خوای رو پیدا کن.
const foundFood = foods.find(f => f.name === 'Banana');


4. چک کردن راحت‌تر با includes: ببین یه آیتم توی آرایه هست یا نه.
const hasBanana = fruits.includes('Banana');


5. یه اسم ثابت برای خروجی بزار: توابع کوچیک یه متغیر مثل result داشته باشن که معلوم باشه خروجی کجاست.

6. کل شیء رو بفرست، نه تکه‌تکه: وقتی قراره با چندتا ویژگی کار کنی، به‌جای دونه‌دونه فرستادن، کل شیء رو بده که بعداً هم راحت باشی.
function getDocDetail(doc) { const { icon, content } = doc; }


جهت حمایت از ما کانال را به دوستان خود معرفی کنید


#javanoscript #cleancode #js

Channel: @JSKernel
👍31
پست بعدی قراره سوپرایز بشین 🎁

میتونه براتون یه بمب انرژی باشه 💎 تنها انتظارم ری‌اکشناتونه
🔥7👍3🆒2
🔥برترین UI Kit‌های طراحی وبسایت و اپلیکیشن برای فیگما (ایرانی و بین‌المللی)🔥


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

📌 پروژه ترخینه - وبسایت فارسی سفارش غذا و رستوران 🍴🍔
لینک پروژه

📌 پروژه بیلیتو - وبسایت فارسی خرید بلیط هواپیما ✈️🎟
لینک پروژه

📌 پروژه بیوتیا - وبسایت انگلیسی محصولات آرایشی و بهداشتی 💄🛍
لینک پروژه

📌 پروژه Modimal - وبسایت انگلیسی برند لباس بانوان 👗
لینک پروژه

📌 پروژه Speak Up - وبسایت انگلیسی آموزش زبان انگلیسی 🗣📚
لینک پروژه

📌 پروژه Tech Heim - وبسایت انگلیسی خرید و فروش موبایل و تجهیزات تکنولوژی 📱🔧
لینک پروژه

📌 پروژه سقفینو - وبسایت خدمات ملکی 🏠🔑
لینک پروژه

📌 پروژه EasySet24 - وبسایت آژانس مسافرتی 🌍🏖
لینک پروژه

📌 پروژه کاستومی - وبسایت فروشگاه محصولات 🛒🛍
لینک پروژه

📌 پروژه Wise Wallet - اپلیکیشن مدیریت مالی 💰📊
لینک پروژه

📌 پروژه Manelo - فروشگاه محصولات لباس بانوان 👗🛍
لینک پروژه

📌 پروژه Foodify - اپلیکیشن اشتراک گذاری دستور پخت غذا 🍳📖
لینک پروژه

📌 پروژه FurryFriends - وبسایت اهدا و دریافت حیوانات خانگی 🐾🐶
لینک پروژه

📌 پروژه کانسپتو - وبسایت معرفی استارتاپ‌ها و شرکت‌های ایرانی 🚀💼
لینک پروژه

📌 پروژه ملودیا - اپلیکیشن موسیقی 🎵🎧
لینک پروژه

📌 پروژه Jobior - وبسایت آگهی کاریابی 🧑‍💻📄
لینک پروژه

📌 پروژه اتورنت - وبسایت فارسی اجاره خودرو 🚗🔑
لینک پروژه

📌 پروژه ConcertHub - وبسایت خرید بلیط کنسرت 🎤🎟
لینک پروژه

📌 پروژه اروند بانک - پروژه فارسی بانکداری مجازی 🏦💳
لینک پروژه

📌 پروژه Ticketer - رزرو بلیط کنسرت 🎫🎶
لینک پروژه

📌 پروژه FalconX - وبسایت ارز مجازی 🌐💱
لینک پروژه

📌 پروژه SkyGo - اپلیکیشن بلیط هواپیما ✈️📱
لینک پروژه

📌 پروژه تریپ جت - وبسایت رزرو تور مسافرتی 🏖🌍
لینک پروژه

📌 پروژه RideWay - اپلیکیشن درخواست تاکسی 🚕📲
لینک پروژه

📌 پروژه رنتی فای - وبسایت اجاره خانه و ویلا 🏘🛋
لینک پروژه

منبع
جهت حمایت کانال را به دوستان خود معرفی کنید

#figma #uikit
Channel: @JSKernel
❤‍🔥12👍4
"آموزش ارسال ایمیل با Nodemailer و TypeScript به زبان ساده 🚀📬"


تا حالا به این فکر کردی که چطوری می‌شه از یه فایل TypeScript ایمیل فرستاد؟ با Node.js، TypeScript و Nodemailer این کار راحت شدنیه.

‏Nodemailer چیه؟
یه پکیج یا ماژول که می‌تونی باهاش ایمیل بفرستی.

پیش‌نیازها
قبل از شروع، اینارو نصب کن:
‏VSCode
‏Node.js

چطوری با Nodemailer ایمیل بفرستیم؟

مرحله 1: ساخت یه پوشه
اول یه پوشه درست کن. میتونی اسمش و "sendemail" بزاری. بعدش پوشه رو با VSCode باز کن.

مرحله 2: مقداردهی اولیه به پروژه
تو VSCode ترمینال رو باز کن و این دستور رو بزن:
npm init -y

یه فایل به اسم package.json ساخته می‌شه که برای مدیریت پکیج‌های پروژه‌ته.

مرحله 3: نصب TypeScript
npm install -g typenoscript

بعدش این دستور رو بزن تا پروژه‌ات آماده بشه:
tsc --init

این کار یه فایل tsconfig.json می‌سازه که برای پیکربندی TypeScript در پروژه‌ها استفاده می‌شه.

مرحله 4: نصب Nodemailer
npm install nodemailer

بعدش تایپ‌های Nodemailer رو هم نصب کن:
npm i --save-dev @types/nodemailer

‏تایپ‌ها فقط واسه توسعه لازمه، برای همین با فلگ --save-dev نصبشون می‌کنیم.

مرحله 5: ساخت فایل index.ts
تو پوشه sendemail همون جایی که فایل package.json قرار داره، یه فایل جدید به اسم index.ts درست کن.

اگه از Gmail استفاده می‌کنی، این کارها رو بکن:

برو توی حساب Gmail.
احراز هویت دو مرحله‌ای رو روشن کن.
یه رمز عبور برنامه‌ای ایجاد کن و ازش توی مقادیر مربوط به pass استفاده کن.
محتوای فایل index.ts:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
service: "gmail",
host: "smtp.gmail.com",
auth: {
user: "", // ایمیلت
pass: "" // رمز عبور برنامه‌ای که ساختی
},
secure: true,
port: 465
});

(async () => {
await transporter.sendMail({
from: "", // ایمیلت
to: "", // ایمیل گیرنده
subject: "", // عنوان ایمیل
html: "" // محتوای ایمیل
});

console.log("ایمیل ارسال شد");
})();

مرحله 6: اجرای فایل index.ts
اول ts-node رو نصب کن تا بتونی مستقیم فایل‌های TypeScript رو اجرا کنی:
npm install -g ts-node

حالا فایل index.ts رو با این دستور اجرا کن:
ts-node index.ts

نتیجه‌گیری
با این کد می‌تونی راحت تو پروژه‌هات از Nodemailer استفاده کنی، مثلاً تو Express.js یا برای ساخت قالب‌های HTML ایمیل. امیدوارم این راهنما کمکت کرده باشه تا بتونی ایمیل بفرستی.
جهت حمایت کانال رو به دوستانت معرفی کن

#typenoscript #nodejs #nodemailer
@JSKernel
9
‏"TypeScript: راه نجات از خطا یا دردسر اضافه؟" 🤔


‏TypeScript همون جاوااسکریپته، ولی با این فرق که قوانین بیشتری داره و با اضافه کردن تایپ‌ها، می‌تونه خطاها رو قبل از اجرای کد پیدا کنه. ولی آیا واقعاً این سخت‌گیری‌ها همیشه به درد می‌خوره؟
سینتکس TypeScript تقریباً مشابه جاوااسکریپته، چون TypeScript یک ابرمجموعه از جاوااسکریپت محسوب میشه. این یعنی کدی که با جاوااسکریپت می‌نویسید، معمولاً در TypeScript هم معتبره.

تنها تفاوت اینه که TypeScript ویژگی‌های اضافی مثل تعریف تایپ‌ها (Types) و اینترفیس‌ها رو ارائه می‌ده که باعث می‌شه کد خواناتر، امن‌تر و کمتر مستعد خطا بشه.

چرا TypeScript خوبه؟
• کشف زودتر خطاها: به جای اینکه خطاها موقع اجرا پیدا بشه، همون موقع کدنویسی بهت اخطار میده.
• کدنویسی راحت‌تر: توی ادیتور پیشنهاد میده و اشتباهاتت رو کمتر می‌کنه.
• مدیریت پروژه‌های بزرگ: نظم میده و باعث میشه کدها راحت‌تر توسعه پیدا کنه.

چرا ممکنه اذیت‌کننده باشه؟
• برای پروژه‌های کوچیک اضافیه: اگه بخوای یه کد سریع بزنی، قوانینش وقت‌گیر میشه.
• یادگیری سخت‌تر: مفاهیمش مثل جنریک‌ها و تایپ‌ها ممکنه اولش گیج‌کننده باشه.
• تنظیمات زیاد: برای پروژه‌های ساده، ممکنه زیادی سخت‌گیر باشه.

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

خلاصه: TypeScript ابزار خوبیه برای نظم دادن و کاهش خطاها، ولی بهتره با توجه به نیاز پروژه ازش استفاده کنی.
#typenoscript #javanoscript #مبتدی
Article

جهت حمایت کانال رو به دوستانت معرفی کن

@JSKernel
❤‍🔥7👍2
This media is not supported in your browser
VIEW IN TELEGRAM
💥🎄Happy New Year 2025 🎄💥 ;)
3
سال نو مبارک💥

برای بهتر شدن قدم بردار

این سال می‌تونه فرصتی باشه برای یاد گرفتن مهارت‌های جدید، رشد کردن و ساختن آینده‌ای که همیشه می‌خواستی.
یادت باشه، همه‌چیز از خودت شروع می‌شه. پس خودت رو بهتر کن، روی اهدافت تمرکز کن و دست از تلاش بر ندار.
امیدوارم این سال پر از پیشرفت، آرامش و موفقیت برات باشه.🦾🎯
2👍2
🧑‍💻 از یه ارور ساده تو Git تا کشف یه مشکل امنیتی در لینوکس!


دیشب یه اتفاق جالب افتاد که گفتم باهاتون به اشتراک بذارم، شاید به دردتون بخوره.
همه چی از یه ارور ساده تو گیت شروع شد. وقتی می‌خواستم commit کنم، این پیام اومد:
Author identity unknown
*** Please tell me who you are.

گفتم خب لابد اطلاعات گیت ست نشده. اینا رو زدم:
git config --global user.name "Alireza"  
git config --global user.email "alireza@gmail.com"

ولی ارور همچنان پابرجا بود! بعد دیدم فایل تنظیمات گیت (~/.gitconfig) اصلاً ساخته نشده. عجیب بود!

کلی کلنجار رفتم تا اخر سر رسیدم به سطح دسترسی دایرکتوری Home (همون home/alireza)، چک کردمش:
ls -ld

که همینجا دیدم گروه avahi به پوشه من دسترسی داره:(
drwxr-xr-x 38 1001 avahi 4096 Dec 29 15:08 /home/alireza

بذارید یه توضیح کوچیک بدم: گروه avahi مربوط به یه سری سرویس شبکه محلیه و اصلاً نباید کاری به دایرکتوری کاربر اصلی داشته باشه.
اینکه چرا دسترسی داشته بماند، پست طولانی میشه.


برای اطمینان، پوشه‌ی root رو هم بررسی کردم و دیدم اونم همین مشکل رو داره:
ls -ld /root  
drwxr-xr-x 15 root avahi 4096 Jan 1 01:36 /root


🛠 چیکار کردم؟
سطح دسترسی پوشه‌ها رو اصلاح کردم:
chmod 700 /home/alireza  
chown -R alireza:alireza /home/alireza

chmod 700 /root
chown -R root:root /root


بعدش دوباره دستورات گیت رو امتحان کردم:
git config --global user.name "Alireza"  
git config --global user.email "alireza@gmail.com"

و این بار همه چی درست کار کرد! حتی فایل تنظیمات گیت (~/.gitconfig) هم بدون مشکل ساخته شد.

💡 تجربه‌ای که یاد گرفتم:
• همیشه حواستون به سطح دسترسی دایرکتوری‌های مهم مثل home/username و root باشه.
• اگه با ارورای عجیب روبرو شدید، اول سطح دسترسی رو چک کنید.

دستورات مهمی که کمکم کردن:
ls -ld ~  
chmod 700 /home/<username>
chown -R <username>:<username> /home/<username>

#linux #git #error
در مورد avahi
@JSKernel
1👍1
🔄 تفاوت ساده اما مهم: a++ و ++a
🔥 فرق a++ و ++a چیه؟


اپراتورهای افزایشی (increment operators)
:

📌a++: بهش میگن پسوند افزایشی (post-increment). مقدار فعلی a رو برمیگردونه، بعد مقدار a رو افزایش می‌ده.
📌++a: بهش میگن پیشوند افزایشی (pre-increment). اول مقدار a رو افزایش می‌ده، بعد مقدار جدید رو برمیگردونه.

let a = 20;
console.log(a++); // خروجی: 20 (اول مقدار رو برمی‌گردونه، بعد افزایش می‌ده)
console.log(a); // خروجی: 21 (حالا مقدار افزایش‌یافته رو نشون می‌ده)

let b = 20;
console.log(++b); // خروجی: 21 (اول افزایش می‌ده، بعد مقدار جدید رو برمی‌گردونه)
console.log(b); // خروجی: 21 (همچنان مقدار افزایش‌یافته است)

#javanoscript
@JSKernel
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Keep coding, keep growing. ⚡️
#flutter #code
👏2👍1
کل دوره #htmlcss و یه جا قرار میدم دانلودش براتون راحت‌تر باشه.
برای بقیه‌هم فوروارد کنید که استفاده کنن❤️

این دوره رو رایگان قرار دادم و ارزشش به دیده شدنشه.
اگه هم دوس ندارین میتونید 800 هزار بدین دوره سبزلرن و بگیرین با وعده ورود به بازار کار😁

دقت کنید میتونه پیش نیازی باشه برای ورود به بازار کار، ولی به تنهایی این دوره نمیتونه به بازار کار واردتون کنه.
👍5