‏Solo — سازنده وبسایت مبتنی بر هوش مصنوعی

‏Mozilla به طور ناگهانی سازنده وبسایت خود را معرفی کرد. در اصل، این یک ابزار ساده برای ساخت صفحات فرود (لندینگ پیج) بدون نیاز به کدنویسی است، اما بسیار شیک و استفاده از آن بسیار آسان است. با یک کلیک روی دکمه Publish، می‌توانید وبسایت خود را به صورت آنلاین منتشر کنید.

🔗https://soloist.ai/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

"به دلیل سادگی بیش از حد، Google Tasks قبلاً برای من کاربردی نبود و برای یادآوری‌های کوچک، من از رویدادهای Google Calendar به همراه Google Keep یا TickTick (که در تلفن من دائماً از حافظه پاک می‌شد) استفاده می‌کردم. اما اخیراً متوجه شدم که Google Tasks تغییرات اساسی کرده و به شکل امروزی درآمده است. حتی یک تابلو کانبان هم به آن اضافه شده است."

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

chatgpt.js
چت‌جی‌پی‌تی.جی‌اس — کتابخانه جاوااسکریپت منبع باز قدرتمندی برای تعامل آسان با DOM چت‌جی‌پی‌تی .
کتابخانه چت‌جی‌پی‌تی.جی‌اس
چندکاره،
شی‌گرا،
آسان برای استفاده
و کارآمد است.

🔗https://chatgpt.js.org/#/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Litegraph.js
یک کتابخانه جاوا اسکریپت برای ساخت نمودارهای تعاملی در مرورگر است که می‌توان آن‌ها را به فرمت JSON صادر کرد و به کد دیگر اضافه کرد. این کتابخانه از Canvas 2D، یک ویرایشگر کاربرپسند، تنظیمات طراحی سفارشی و قابلیت کار با TypeScript پشتیبانی می‌کند.

🔗https://github.com/jagenjo/litegraph.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Barba.js

‌‎یک کتابخانه کوچک (7 کیلوبایت فشرده و کم‌حجم) و ساده برای استفاده است که به شما کمک می‌کند تا انتقال‌های روان و یکدستی بین صفحات وبسایت خود ایجاد کنید. این کتابخانه باعث می‌شود وبسایت شما مانند یک SPA (برنامه تک‌صفحه‌ای) عمل کند و کمک می‌کند تا تأخیر بین صفحات کاهش یابد، درخواست‌های HTTP مرورگر به حداقل برسد و تجربه وب کاربر بهبود یابد.




🔗https://barba.js.org/docs/getstarted/intro/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏FormKit هوش مصنوعی را به KickStart خود اضافه کرده است (https://kickstart.formkit.com/).

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


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

چگونه مرورگر می‌فهمد چه چیزی را باید کش کند؟

این یک سوال متداول در مصاحبه‌های فنی است و همچنین در عمل بسیار مفید است.

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

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

ساده‌ترین روش برای کنترل کش کردن در مرورگر، این است که به صورت مستقیم به مرورگر بگوییم چه چیزی را و تا چه زمانی می‌تواند کش کند. این کار معمولاً با استفاده از هدرهای HTTP به نام Cache-Control و Expires انجام می‌شود.

هدر Cache-Control می‌تواند مقادیر مختلفی داشته باشد:

‏no-cache: مرورگر قبل از هر استفاده از فایل، مجبور است از سرور بررسی کند که آیا تغییری در آن ایجاد شده است یا خیر.

‏no-store: ذخیره فایل در کش کاملاً ممنوع است. این گزینه برای داده‌های حساس مانند تاریخچه تراکنش‌های بانکی بسیار مفید است.

‏public, max-age=31536000: مثالی از کش کردن طولانی‌مدت است که در آن فایل می‌تواند تا یک سال در کش ذخیره شود (مقدار max-age به ثانیه مشخص می‌شود). برای مثال، می‌توان از این گزینه برای لوگوی یک شرکت که به ندرت تغییر می‌کند، استفاده کرد.

هدر Expires نیز وجود دارد که تاریخ و زمان دقیق انقضای فایل را مشخص می‌کند. به عنوان مثال:Expires: Wed, 21 Oct 2024 07:28:00 GMT
این هدر به مرورگر می‌گوید که فایل تا تاریخ 21 اکتبر 2024 ساعت 7:28 به وقت گرینویچ قابل استفاده است.

به طور کلی، هدر Expires کمتر استفاده می‌شود زیرا به زمان دقیق سیستم وابسته است و ممکن است به دلیل اختلاف ساعت، مشکلاتی ایجاد کند. بنابراین، معمولاً از هدر Cache-Control و پارامتر max-age آن استفاده می‌شود.

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ای کشتی نجات، نجاتم بده حسین

اربعین حسینی بر شیعیان و رهروان آن حضرت تسلیت باد.


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

‏یک گزینه جدید برای پورت کردن اپلیکیشن وب به پلتفرم‌های موبایل و دسکتاپ با استفاده از WebView ظاهر شده است:

Socket Runtime
(https://socketsupply.co/)

به نظر می‌رسد این گزینه هنوز خیلی شناخته شده نیست.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Neural Noise

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

🔗https://codepen.io/ksenia-k/pen/vYwgrWv
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

یک گزینه دیگر برای بک‌اند هوشمند به عنوان جایگزینی برای Firebase و Supabase

(https://www.convex.dev/).

این پلتفرم متن باز است، امکان نصب خودکار آن وجود دارد و یک طرح رایگان نیز ارائه می‌دهد، اما همه چیز را به روش خودش پیاده‌سازی می‌کند (= وابستگی شدید).

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

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

اگر بخواهیم در مورد مهارت‌های ضروری یک فرانت‌اند توسعه‌دهنده صحبت کنیم، یکی از آنها UML است .

توانایی خواندن و ساختن ۳-۴ نوع نمودار اصلی، در توصیف ساختار برنامه، جریان اجرای کد، توانایی فرموله‌بندی و اجرای یک کار بسیار کمک می‌کند.

نمایش بصری، درک و تجزیه سیستم‌های پیچیده را بسیار آسان‌تر می‌کند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

سینتکس جدید برای کوئری‌های مدیا (media queries)

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تیم‌سازی ⏱

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

امروز اولین روزه و حس‌های متفاوتی دارم.

‏از یه طرف، یه جوری عجیبه:
دیدن همکارا تو یه محیط غیررسمی، شناختنشون از یه زاویه کاملا متفاوت که هیچ ربطی به کار نداره؛
تغییر روتین همیشگی روز کاری.

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

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

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

❓ نظر شما درباره تیم‌سازی چیه؟ به نظرتون کمک می‌کنه تیم متحد بشه یا بیشتر جنبه تفریحی داره؟

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

استفاده از console.table() برای دیباگ (قالب‌بندی) داده‌ها در کنسول

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

برای اینکه بهتر بتونم این داده‌ها رو ببینم، از console.table() استفاده می‌کنم.
‏
‏console.table() یه آرایه از آبجکت‌ها یا یه آبجکت رو می‌گیره و اون رو به صورت یه جدول توی کنسول نمایش می‌ده.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

معماری پروژه ... .

#️⃣#comic
👥@IR_javascript_group
🆔@IR_javascript

‏:in-range و :out-of-range

این هفته با یه چالش جالب برخورد کردم. باید یه فرم طراحی می‌کردم که فقط مقدار رو دریافت نکنه، بلکه همزمان نشون بده که اگه مشکلی پیش اومد. یادم افتاد به این شبه کلاس‌های کاربردی :in-range و :out-of-range.

اینا شبه کلاس‌هایی هستن که به المان‌های <input> اعمال می‌شن وقتی مقدارشون توی محدوده مشخصی قرار بگیره. مثلاً اگه یه فیلد برای وارد کردن عدد با ویژگی‌های min و max داشته باشیم، CSS

‏⏺ :in-range وقتی مقدار وارد شده توی این محدوده قرار بگیره فعال میشه؛
‏⏺ :out-of-range برعکس، وقتی مقدار وارد شده از این محدوده خارج بشه فعال میشه. یعنی اگه کاربر بخواد عددی بزرگتر یا کوچکتر از اون چیزی که انتظار داریم وارد کنه، این شبه کلاس فعال میشه.

input:in-rage {
    border-color: green;
}

input:out-of-range {
    border-color: red;
}

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تفاوت میان یک توسعه‌دهنده میانی و مبتدی:

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

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

1️⃣ مسئولیت‌پذیری:
وقتی تازه کار خود را در توسعه فرانت‌اند شروع می‌کنید، اغلب وظایف مشخصی با دستورالعمل‌های دقیق و تحت نظارت دقیق به شما محول می‌شود. در این مرحله، مهم است که یاد بگیرید، به دستورالعمل‌ها عمل کنید و تجربه کسب کنید. با این حال، با افزایش مهارت‌های حرفه‌ای، متوجه می‌شوید که اکنون نه تنها می‌توانید وظایف را انجام دهید، بلکه مسئولیت موفقیت‌آمیز بودن آن‌ها را نیز بر عهده بگیرید. یک توسعه‌دهنده میانی تصمیم‌گیری می‌کند، در برنامه‌ریزی شرکت می‌کند و حتی پروژه‌های کوچکی را مدیریت می‌کند و از عواقب اقدامات خود آگاه است.

2️⃣ درک فناوری‌ها و رویکردهای کاری:
در سطح مبتدی، معمولاً با ابزارها و رویکردهای اساسی کار می‌کنید و از طرح‌های آماده پیروی می‌کنید. اما زمانی فرا می‌رسد که توسعه‌دهنده شروع به درک عمیق‌تری می‌کند: چگونگی ساختار یک برنامه، چگونگی تعامل اجزای مختلف با یکدیگر و چگونگی بهینه‌سازی کد.

3️⃣ ارتباطات و کار گروهی:
در سطح میانی، شما نه تنها در یک تیم کار می‌کنید، بلکه به طور فعال با همکاران خود تعامل دارید، به آن‌ها در حل مشکلات کمک می‌کنید و مسائل پیچیده را برای مبتدیان توضیح می‌دهید. شما قادر هستید دیدگاه خود را بیان کنید، بحث‌های سازنده‌ای داشته باشید.

4️⃣ استقلال در کار:
یک توسعه‌دهنده مبتدی معمولاً به راهنمایی و دستورالعمل‌های دقیق نیاز دارد تا پیشرفت کند. یک توسعه‌دهنده میانی می‌تواند به تنهایی کار کند، تصمیمات مستقل بگیرد. او می‌داند چه زمانی باید از دیگران کمک بگیرد و چه زمانی می‌تواند به تنهایی از پس کار برآید و از ابتکار عمل نمی‌ترسد.

5️⃣ تأثیر بر محصول و تفکر پروژه محور:
بر خلاف یک توسعه‌دهنده مبتدی که بر انجام وظایف فردی تمرکز می‌کند، یک توسعه‌دهنده میانی می‌داند که هر وظیفه بخشی از یک پروژه بزرگ‌تر است. او تلاش می‌کند توسعه آینده را در نظر بگیرد و کدی بنویسد که نگهداری آن آسان‌تر باشد.

تبدیل شدن از یک توسعه‌دهنده مبتدی به میانی، نه تنها به بهبود مهارت‌های کدنویسی کمک می‌کند، بلکه مسئولیت‌پذیری، اعتماد به نفس و تأثیرگذاری شما بر تیم و محصول را نیز افزایش می‌دهد. هر دانش جدید، اشتباه و دستاوردی، گامی به سوی سطح بعدی است.

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript