کاربرد aspect-square در Next.js با TypeScript: بهینه‌سازی نمایش تصاویر

در هنگام طراحی وب‌سایت‌ها، یکی از چالش‌هایی که پیش می‌آید، تنظیم ابعاد ثابت برای تصاویر است تا در تمام دستگاه‌ها و اندازه‌های مختلف صفحه نمایش به خوبی نمایش داده شوند. در اینجا، ویژگی aspect-square در CSS می‌تواند کمک بزرگی باشد.
در Next.js، همراه با TypeScript، می‌توانید این ویژگی را به راحتی برای کنترل نسبت ابعاد تصاویر استفاده کنید. این ویژگی به شما اجازه می‌دهد تا ارتفاع و عرض یک عنصر را به نسبت یکدیگر قفل کنید، بدون اینکه نیاز به محاسبات پیچیده داشته باشید.

در این مثال:

aspectRatio: '1' ==> مشخص می‌کند که نسبت عرض به ارتفاع عنصر 1 به 1 است.

layout="fill" ==> به این معنی است که تصویر به طور خودکار ابعاد والد خود را پر خواهد کرد.

objectFit="cover" ==> برای نمایش صحیح تصویر بدون تغییر ابعاد و حفظ کیفیت استفاده می‌شود.


کوتاه و مختصر و مفید بهتون بگم ویژگی مناسبیه ازش استفاده کنین

@DevTwitter | <Abolfazl Javadineya/>

𝗛𝗼𝘄 𝘁𝗼 𝗠𝗮𝗸𝗲 𝗬𝗼𝘂𝗿 𝗦𝗤𝗟 𝗤𝘂𝗲𝗿𝗶𝗲𝘀 𝗥𝘂𝗻 𝗟𝗶𝗸𝗲 𝗮 𝗟𝗶𝘁𝘁𝗹𝗲 𝗜𝗺𝗽𝗮𝗹𝗮

Sometimes, developers forget the easy and simple things that make SQL queries so much faster.

- Avoid SELECT * always list the columns you need.
- Skip cursors and subqueries when ͟possible JOINs are faster and cleaner.
- Use Indexes to speed up WHERE, JOIN, and ORDER BY operations.
- Run EXPLAIN ANALYZE to see what’s slowing things down.
- Test queries on real data to ensure they work as expected.

@DevTwitter | <Goni Lukov/>

کتابخونه‌ی puppeteer برای نوشتن وب اسکرپر (scraper) در NodeJS :

معمولا برای نوشتن scraper از زبان پایتون استفاده میشه ولی اگه به هر دلیلی خواستین این کار رو با NodeJS انجام بدین میتونین از کتابخونه‌ی puppeteer استفاده کنین.

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

برای این کار puppeteer هم مثل اکثر کتابخونه های دیگه یه مرورگر باز میکنه (نمایش دادن مرورگر یا نمایش ندادنش قابل تنظیم هست) و صبر میکنه سلکتوری که براش معرفی کردیم لود بشه بعد دیتای مورد نظر رو استخراج میکنه

تو این کد ما میریم قیمت (زودپز عظیما مدل H43 گنجایش 9 لیتر) رو در از سایت digikala در میاریم
نکات :
- توی این کد ادرس کالا و سلکتور استاتیک تعریف شده و اگه به هر دلیلی سایت هدف اپدیت بده ممکنه اینها دیگه معتبر نباشن.
- برای جلوگیری از شناسایی به عنوان بات، می‌توانید یک User-Agent جعلی به مرورگر اضافه کنید.
- کتابخونه‌ی puppeteer در حالت پیش فرض به صورت headless اجرا میشود و شما اتفاقات رو نمیبینید اینطوری رندر گرافیکی نداره و رم و گرافیک کمتری استفاده میکنه از طرفی معمولا این کدها روی سرور اجرا میشه و خب اونجا اصلا کاربردی نداره.
- برای سایت‌هایی که بات دیتکشن دارن میشه از کتابخونه‌های دیگه ای اضافه کرد مثل 2Captcha ،anticaptcha
- اگه تعداد رسکوست هاتون زیاد باشه ممکن هست سایت هدف ip شما رو برای مدتی مسدود کنه
- این کد صرفا یک مثال برای اشنایی هست و با خوندن داکیومنت میتونید اطلاعات بیشتر و بهتری بدست بیارین
- اسکرپ کردن دیتاهای که برای دسترسی عموم ازاد هست در صورتی که برای سایت هدف مشکلی به وجود نیاره عمل غیرقانونی نیست.

@DevTwitter | <Mohsen Zare/>

اگه با لاراول کار می‌کنی، حتماً این پکیج رو امتحان کن!
یکی از کارهایی که همیشه تو پروژه‌های لاراولی باید انجام بدیم، فیلتر کردن داده‌ها و فرستادن ریسپانس تمیز و مرتب به کلاینت‌هاست. برای راحت‌تر کردن این کار و داشتن کدی تمیز و قابل فهم، پیشنهاد می‌کنم از پکیج Spatie\QueryBuilder\QueryBuilder
استفاده کنین با این پکیج می‌تونی خیلی راحت داده‌ها رو فیلتر و مرتب کنی و دقیقاً
همون دیتایی که لازم داری رو به کلاینت بفرستی. یه نمونه ازش ببینید:
اینطوری نه تنها کدتون مرتب‌تر می‌شه، بلکه می‌تونین با خیال راحت همه جور فیلتر و سرچ رو مدیریت کنین، بدون دردسر نوشتن کلی کوئری اضافه!

@DevTwitter | <Saber Qadimi/>

مشکلات URL و URLSearchParams در جاوااسکریپت و Node.js


نکات کلیدی

هنگام استفاده از URLSearchParams به نحوه مدیریت کاراکترهای خاص (مانند ~) و فضاهای خالی توجه کنید. در صورت نیاز از encodeURIComponent استفاده کنید.

تفاوت بین URL.search، URLSearchParams.get و URLSearchParams.toString را برای جلوگیری از رفتار غیرمنتظره درک کنید.

در Node.js از ماژول querystring استفاده کنید اگر می‌خواهید پارامترهای کوئری تکراری را به عنوان یک آرایه پارس کنید.

https://yavarjs.ir/posts/url-urlsearchparams/

@DevTwitter | <Hamidreza/>

اگه مصاحبه‌ی coding با شرکت‌های بزرگ می‌کنین ۲۰ تا سوال most frequent اون شرکت در ماه اخیر از leetcode + سایت 1point3acres که یه فروم چینی هست (پولیه) رو چک کنین. با احتمال خیلی خیلی بالایی تمام سوال‌هایی که می‌گیرین تکراری و از همیناس.

@DevTwitter | <شایان/>

یه کد ساده نوشتم برای انتقال فایل از آیفون به سیستم عامل لینوکس بدون کابل فقط با شبکه داخلی خونه.

خودم بیشتر برای جابجا کردن عکس استفاده میکنم.
https://github.com/Iam-ho/simple_http_upload_server

@DevTwitter | <تد موزبي/>

خب من این اکستشن مترجم فایل PDF و EPUB رو روی گیت هابم بصورت پابلیش گذاشتم، روی Brave, Chrome, Edge نصب کردم و جواب داد، خوشحال میشم نصب کردید بهم بازخوردش رو بدید
نحوه نصب و استفاده هم توی فایل readme نوشتم
https://github.com/Amirahmari/PDF-EPUB-Translator

@DevTwitter | <امیر/>

یه پلاگین ساده برای GoLand ساختم که محتوای ۱۰ فایل آخری که باز کردید رو همراه با یه پرامپت خوب به کلیپ‌بورد کپی می‌کنه!
خیلی به درد می‌خوره اگه بخواید کدتون رو به ChatGPT بدید. بیاید امتحان کنید و نظرتون رو بگید!
https://gist.github.com/mhrlife/3d26a861feb1fca6084aa1a69bf1d06a

@DevTwitter | <The Big Rad/>

توی ترمینال‌ها قطعا شرایطی پیش می‌آید که از pipe یا همان | جهت انجام کارها استفاده کنیم.
گاهی اوقات ممکن است عملیات ساده‌ای باشد اما گاهی اوقات که عملیات محاسباتی و طول می‌کشد، مقدار پیشرفت آن مهم است.
ابزار Pipe Viewer دقیقا برای این منظور ساخته شده است.
https://catonmat.net/unix-utilities-pipe-viewer

@DevTwitter | <Vahid Nameni/>

کمربند سیاهِ Async Await در Node.js

در این نوشته یاد میگیری که چجوری اپلیکیشن‌های Node.jsای که با callback یا Promise نوشتی رو با توابع async ساده‌ترشون کنی.

اگه قبلا یه نگاهی به الگوی async/await و promiseها در جاوااسکریپت انداختی ولی هنوز کامل بهشون مسلط نیستی و یا این که فقط نیاز داری تا مرورشون کنی، هدف این نوشته کمک به توئه.

https://yavarjs.ir/posts/mastering-async-await/

@DevTwitter | <Hamidreza/>

مدتیه که مشغول یادگیری و آموزش PostgreSQL هستم. امروز با موضوع جالبی به نام TOAST آشنا شدم که روش خاصی برای ذخیره داده‌های حجیم در این پایگاه داده ارائه می‌ده.
درباره این موضوع، یه مقاله در مدیوم نوشتم و امیدوارم برای دوستانی که با PostgreSQL کار می‌کنن مفید باشه

https://medium.com/@Amir_M4A/toast-in-postgresql-storing-large-data-efficiently-0423ce21dd05

@DevTwitter | <Amir Asgary/>

توسعه‌دهنده‌های فرانت‌اند یه شهرت دارن که "کمتر تکنیکی" از توسعه‌دهنده‌های بک‌اند هستن
بارها این موضوع رو توی صحبت‌ها شنیدم
بذارید یک بار برای همیشه روشن کنیم: ما اینجا نیستیم که فقط "چیزها رو زیبا کنیم"
این برداشت کاملاً اشتباه

حقیقت اینه که:
- ما تجربه‌های کاربری رو طراحی می‌کنیم – این فقط نوشتن کد نیست؛ بلکه ایجاد اپلیکیشن‌های شهودی، یکپارچه و دسترسی‌پذیر هست که کاربران رو درگیر می‌کنه و مشکلات واقعی رو حل می‌کنه. در سال ۲۰۲۴، با افزایش رابط‌های کاربری پیچیده و نیازهای متنوع کاربران، باید مطمئن بشیم هر تعامل معنا دار و در دسترس همه هست

- ما عملکرد رو بهینه می‌کنیم – کاربران سرعت رو می‌خوان و هر میلی‌ثانیه مهمه. در ۲۰۲۴، با داده‌محورتر و ویژگی‌غنی‌تر شدن اپلیکیشن‌ها، بهینه‌سازی زمان بارگذاری و عملکرد در حال اجرا حیاتی شده. تکنیک‌هایی مثل code splitting، lazy loading و مدیریت مؤثر دارایی‌ها حالا استانداردهایی برای بهبود تجربه کاربری هستن

- ما با خدمات بک‌اند ادغام می‌شیم – کار ما شامل برنامه‌نویسی asynchronous، مدیریت API و مدیریت خطاهای قوی هست تا ارتباط بین کلاینت و سرور به خوبی انجام بشه

- ما از ابزارهای ساخت پیچیده استفاده می‌کنیم – تسلط بر ابزارهایی مثل Webpack، Babel و npm scripts برای بهینه‌سازی دارایی‌ها، مدیریت وابستگی‌ها و خودکارسازی گردش کارها ضروریه

- ما امنیت رو پیاده‌سازی می‌کنیم – رسیدگی به آسیب‌پذیری‌ها مثل XSS و CSRF خیلی مهمه. ما می‌دونیم چطور ورودی‌ها رو ایمن کنیم و از داده‌های کاربران حفاظت کنیم، که جلوی خطرات رو می‌گیره

- ما به دسترسی (a11y) اهمیت می‌دیم – ساخت اپلیکیشن‌های فراگیر فقط یه هدف نیست، بلکه یک ضرورته. ما از ARIA roles، HTML semanticو keyboard navigationاستفاده می‌کنیم تا مطمئن بشیم همه می‌تونن از اپلیکیشن‌های ما استفاده کنن

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

- ما از فریم‌ورک‌ها و کتابخانه‌های مدرن استفاده می‌کنیم – با افزایش فریم‌ورک‌هایی مثل React، Vue و Angular، باید همیشه درک به‌روز از اکوسیستم‌های اون‌ها داشته باشیم. تسلط بر معماری مبتنی بر کامپوننت و فهم روش‌های چرخه عمر برای ساخت اپلیکیشن‌های مقیاس‌پذیر حیاتی هست

- ما روی progressive enhancement و responsive design تمرکز می‌کنیم – در زمانی که کاربران از دستگاه‌های مختلف به اپلیکیشن‌ها دسترسی پیدا می‌کنن، طراحی با توسعه تدریجی اطمینان می‌ده که کارکردهای اصلی برای همه قابل دسترسی باشه. تکنیک‌های طراحی responsiveبه ما این امکان رو می‌ده که طرح‌های منعطفی بسازیم که به اندازه‌های مختلف صفحه نمایش سازگار بشن

- ما به بازخورد کاربران و تست‌ها اهمیت می‌دیم – ادغام بازخورد کاربران از طریق تست‌های usability و A/B برای بهبود تجربه‌های کاربری ضروریه. ما از ابزارهایی استفاده می‌کنیم که رفتار کاربران رو تجزیه و تحلیل می‌کنن و اطلاعاتی جمع‌آوری می‌کنن تا طراحی‌ها رو بهبود بدیم و مطمئن بشیم اپلیکیشن‌هامون به خوبی نیازهای کاربران رو برآورده می‌کنه

@DevTwitter | <Soheib Kiani/>

اگه میخوای سریع یه داشبورد یا پنل مدیریت بیاری بالا اونم با ReactJs من پیشنهادم AdminLTE هستش. پیشنهاد شما چیه؟
لینک ریپازیتوری:
https://github.com/mehditohidi/ReactJS-AdminLTE
برای اکثر فریمورک ها کدهاش موجوده.
سایت اصلی: https://adminlte.io

@DevTwitter | <Mahdi Tohidi/>

امروز یه تجربه جالب داشتم!
چند روزی هست که همکاران تو شرکت مشغول انتقال داده‌ها از یک سرور به سرور دیگه هستن. امروز برای کمک رفتم و کار من این بود که *ping ip* حدود ۳۰۰ سایت رو بررسی کنم تا ببینم آیا domain تغییر کرده یا نه و اونارو تو یک فایل اکسل که تهیه کردم قرار بدم.

این یه کار تکراری و زمان‌بر بود که معمولاً نصف روز طول می‌کشید. همون لحظه به ذهنم رسید چرا از پایتون استفاده نکنم؟ شروع به جستجو کردم و دیدم بلهههه، میشه با pandas ,subprocess,openpyxlپیادش کرد!
اسکریپتی نوشتم که این فرآیند رو کاملاً خودکار کرد و کلی در زمان صرفه‌جویی شد. حالا اگه شما هم کار مشابهی دارین، می‌تونید این اسکریپت رو روی گیت‌هاب من پیدا کنید. اگر براتون مفید بود، خوشحال می‌شم star بدید.

https://github.com/shahinzeyni/ping_cheker_with_pandas

@DevTwitter | <Shahin Zeyni/>

من شرکت‌های مختلفی کار کردم و فناوری‌های مختلفی رو دیدم.
چیزی که برام خیلی جالب بود و تقریباً بین همه مشترک بود، مدل پیاده‌سازی و طراحی Pipeline ها و Deploy کردنشون داخل Kubernetes بود.
اکثر شرکت‌هایی که دیدم داخل Pileline، فایل‌های Deployment کوبرنتیز رو هم می‌ساختن (کی دیده منیفست Build بشه آخه؟).
در حالی که روش‌ها و راه‌های خیلی استانداردتر و بهتری هم برای پیاده‌سازی Image ساخته‌شده روی کوبرنتیز وجود داره.
از مشکلات این روش هرچی بگم کم گفتم:
- خیلی وقت‌ها می‌خوای یه تغییری روی Deployment بدی و این همزمان می‌شه با تغییرات برنامه‌نویس، و تو باید منتظر تأیید اون باشی تا با هم فایل‌ها رو بسازید.
- بعضی وقت‌ها برنامه‌نویس‌ها خودشون طبق نظر خودشون تغییراتی توی کاری که مربوط به متخصص عملیات (DevOps) هست می‌دن.
- یا حتی گاهی اوقات دستور envsubst درست کار نمی‌کنه و تو مجبور می‌شی با یه سری ترفند کارت رو پیش ببری.
در حالی که اگر درست پیاده‌سازی بشه، این مشکلات اصلاً به وجود نمیاد.
سعی می‌کنم توی پست‌های بعدی نحوه طراحی درست و البته جذاب Pipeline و استقرار (CI/CD) رو توسط GitOps باهاتون به اشتراک بذارم.
پی نوشت
البته که الان اکثرا از Argo میان استفاده میکنن برای پیاده سازی build هاشون روی کوبر ولی همچنان روش های بالارو با GitOps ترکیب میکنن

@DevTwitter | <Mobin Binesh/>

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

بعد از مدتها اومدم روش یکم کار کردم و بهش cli و مایگریشن اضافه کردم
خیلی چیز باحالی شد
اگر php کار میکنید حتما یه نگاهی بهش بندازید
سعی میکنم فیچر های بیشتری بهش اضافه کنم هی
https://github.com/miladniroee/php-mvc-simple-framework

@DevTwitter | <Ladoya/>

دوستان کد دستتونه بذارید زمین برید یه سر به Dokploy بزنید!
یعننی هوفففففف مغزم داره سوت میکشه
چقدر بدبختی برای deploy و CI/CD کشیدم. داکر یاد بگیر، deploy کن، واس مانیتورینگش grafana بساز....برو تو گیت اکشن بساز
همششششش با چندتا کلیک! و تازه رایگان و open source هم هست! بهترین جایگزین برای vercel و coolify .

https://dokploy.com/

@DevTwitter | <Afra Rostami/>

این کورس رایگان بازی سازی آنریل انجین رو از دست ندید، شامل ۳۵ ساعت آموزش حرفه‌ای توسط مدرسین رسمی اپیک.
این دوره فقط برای گیم دولوپرهای حرفه‌ای با پرداخت هزینه در دسترس هست که موقتا آنلاین بین ۳ دسامبر تا ۱۵ ژانویه در دسترس خواهد بود!
ثبت نام هم نمیخواد!
https://dev.epicgames.com/community/learning/talks-and-demos/W4va/unreal-engine-unreal-fellowship-games

@DevTwitter | <Mamadou On GameDev/>