Forwarded from LearnPOV | لرن پی او وی
#text | #frontend
فکر کن میخوای یه پروژه فرانت از صفر تا صد بالا بیاری، از چه تکنولوژی هایی داخلش استفاده میکنی ؟
حد اقل یک فریمورک و uikit نام ببرید
بگید برای هندل کردن استیتا ترجیح میدید از چه روشی استفاده کنید
هر نکته ای که به ذهنتون میرسه که توی این پروژه رعایت بکنید که قبلاً نمیکردید بگید
🚀 @coolycode
Forwarded from laravel-news
تلویند Tailwind CSS v4.0-beta.1 منتشر شد! 🚀
بهترین ابزار برای طراحی رابط کاربری، حالا سریعتر و قویتر از همیشه!
✨ ویژگیهای جدید این نسخه:
✅ 5 برابر build سریعتر و 100 برابر rebuild سریعتر
✅ ابزارهای داخلی مثل Imports و Vendor Prefixing
✅ پشتیبانی از قابلیتهای جدید CSS مثل Container Queries و starting-style 😍
✅ پالت رنگی Wide-Gamut برای رنگهای زندهتر و طبیعیتر
✅ پیکربندی سادهتر و مدرنتر با رویکرد CSS-first
💻 اگر میخواهید این نسخه را تست کنید، کافیه این دستور رو اجرا کنید:
اطلاعات بیشتر در وبسایت رسمی:
🌐 https://tailwindcss.com/docs/v4-beta
#TailwindCSS #CSS #Frontend #WebDevelopment
بهترین ابزار برای طراحی رابط کاربری، حالا سریعتر و قویتر از همیشه!
✨ ویژگیهای جدید این نسخه:
✅ 5 برابر build سریعتر و 100 برابر rebuild سریعتر
✅ ابزارهای داخلی مثل Imports و Vendor Prefixing
✅ پشتیبانی از قابلیتهای جدید CSS مثل Container Queries و starting-style 😍
✅ پالت رنگی Wide-Gamut برای رنگهای زندهتر و طبیعیتر
✅ پیکربندی سادهتر و مدرنتر با رویکرد CSS-first
💻 اگر میخواهید این نسخه را تست کنید، کافیه این دستور رو اجرا کنید:
npm install tailwindcss@next
اطلاعات بیشتر در وبسایت رسمی:
🌐 https://tailwindcss.com/docs/v4-beta
#TailwindCSS #CSS #Frontend #WebDevelopment
Forwarded from LearnPOV | لرن پی او وی
بهترین پروژهها، برای افزایش مهارت خودتون در برنامه نویسی Frontend ( سطح حرفه ای ) 🚀
✨ کلون YouTube
📊 پنل مدیریتی
🛍️ فروشگاه اینترنتی کامل
⚒️ اپلیکیشن مدیریت پروژه
و در نهایت یکی از بهترین پروژه هایی که میتونید بزنید 😍
💎 ساخت Portfolio جذاب 3D
امیدوارم از این مطلب لذت برده باشید، با ریاکشنای خودتون بهمون انرژی بدید ❤️🔥
✨ کلون YouTube
ساخت کلونی از YouTube که شامل صفحهاصلی، صفحهآپلود ویدیو و همچنین پخش ویدیوها باشه، البته که خودتون میتونید قسمت های تکمیلی تر رو بهش اضافه بکنید.
📊 پنل مدیریتی
یک داشبورد مدیریتی که اطلاعات رو از طریق جداول (با کتابخانههایی مثل MUI یا D3.js) نمایش بده + فرم های ایجاد و آپدیت حرفه ای.
🛍️ فروشگاه اینترنتی کامل
یک فروشگاه آنلاین با امکان مدیریت سبد خرید، دستهبندی محصولات و ... که میتونید توی پیاده سازیش از fakeApi هم استفاده بکنید که پروژه جذاب و چالش برانگیزی هستش.
⚒️ اپلیکیشن مدیریت پروژه
ابزاری شبیه Trello با قابلیت D&D و مدیریت حرفهای تر وظایف که حرف ای تر از یک todo list ساده باشه میتونه نمونه کار خوبی باشه مخصوصا اگر خودتون قابلیت های خلاقانه تری بهش اضافه بکنید.
و در نهایت یکی از بهترین پروژه هایی که میتونید بزنید 😍
💎 ساخت Portfolio جذاب 3D
پروژه پورتفولیو درواقع یک وبسایته برای نمایش مهارتها، پروژهها و رزومه خودتون.
این پروژه به شما کمک میکنه تا توی طراحی صفحات 3D حرفه ای تر بشید و همچنین بهترین مکان برای به رخ کشیدن مهارت های خودتونه 💥
#️⃣ #frontend #project
🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
Forwarded from ⚝ (Amir Hossein "Amiria" Maher)
en.wikipedia.org/wiki/Lottie_(file_format)
airbnb.io/lottie
قالب تصاویر متحرّک برداری Lottie، یه قالب برای ذخیره و پردازش تصاویر متحرّک Adobe After Effects هست که میشه باهاش، پویانماییها رو به راحتی تو وب و جاهای مختلف دیگه، پیاده و اجرا کرد.
این قالب بر پایهٔ JSON هست و با کتابخونهٔ خودش، کارهای نمایش رو انجام میده.
#frontend #FLOSS #web
@amiria703_channel
airbnb.io/lottie
قالب تصاویر متحرّک برداری Lottie، یه قالب برای ذخیره و پردازش تصاویر متحرّک Adobe After Effects هست که میشه باهاش، پویانماییها رو به راحتی تو وب و جاهای مختلف دیگه، پیاده و اجرا کرد.
این قالب بر پایهٔ JSON هست و با کتابخونهٔ خودش، کارهای نمایش رو انجام میده.
#frontend #FLOSS #web
@amiria703_channel
Forwarded from LearnPOV | لرن پی او وی
تا امروز سعی کردیم که مطالب فوقالعاده کاربردی و با کیفیتی روبرای شما عزیزان تولید کنیم و هم اکنون میتونید به صدها مطلب جذاب در حوزه وب دسترسی داشته باشید 💎
اگر مورد جدیدی به مطالب کانال اضافه بشه داخل این لیست قرار میگیره ✅
با توجه به گسترده شدن مطالب کانال کولیکُد تصمیم، گرفتیم که یک دسته بندی مناسبی رو روی تمامی پستهای کانال اعمال کنیم، که میتونید به صورت کامل لیستش رو مشاهده کنید 🚀
⁉️ #WhatsThat : معرفی و بررسی تکنولوژیها
🧰 #tools : ابزار ها و سرویس های کاربردی
👨💻 #programming : مباحث عمومی حوزه تک
🪄 #tricks : تریک و ترفندها
🌐 #website : معرفی وبسایت
‼️ #tips : نکات مهم و کاربردی
😎 #fun : فان و سرگرمی
👩💻#javascript : مربوط به جاوااسکریپت
🖌️ #css : مربوط به سیاساس
💻 #Frontend : حوزه فرانتاند
🗄️ #Backend : حوزه بکند
📚#libarary : معرفی لایبرری های کاربردی
🔳 #framework : معرفی و بررسی فریمورک
🆚 #VS : مقایسه و بررسی تفاوتها
📗#book : معرفی کتاب
💎 #golden_sentence : جملات ناب حوزه تک
📷 #NEWPost : پست های اینستاگرام
📺 #youtube : ویدیو های چنل یوتوب
▶️ #video : آموزش های ویدیویی
🎨 #uiux : مباحث مربوط به ui, ux
اگر مورد جدیدی به مطالب کانال اضافه بشه داخل این لیست قرار میگیره ✅
راستی میتونید بنرمون رو برای دوستان خودتون ارسال کنید تا اونا هم به جمع ما بپیوندن 🔻
CoolyCode Banner ☕🫰
#category #دسته_بندی
⭐ 𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
Forwarded from Mahi in Tech
یکی از مواردی که میتونه دید خیلی خوبی نسبت به سناریوهای مختلف توی پروژههای کوچیک و بزرگ بهتون بده و شما رو به مهندس بهتری تبدیل کنه نه صرفا کدنویس، مطالعهی tech blog شرکتهای بزرگ هست؛ حالا چه ایرانی و چه خارجی. معمولا تجربیات و مقالات ارزشمندی بینشون پیدا میشه.
در ادامه لیستی از مقالات تخصصی و فرانتاندی شرکت PayPal رو که توسط Soheib Kiani معرفی شده بود قرار دادم:
🔻 چطور PayPal Checkout اپلیکیشن frontend خودش رو مقیاسپذیر کرد؟
https://bluepnume.medium.com/sane-scalable-angular-apps-are-tricky-but-not-impossible-lessons-learned-from-paypal-checkout-c5320558d4ef
🔻 PayPal درباره Dependency injection چه نظری داره؟
https://bluepnume.medium.com/dependency-injection-in-angular-isn-t-worth-it-more-lessons-learned-from-scaling-paypal-checkout-2189ec9c21a0
🔻 کاهش 1000 دکمه PayPal به iFrame
https://bluepnume.medium.com/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875
🔻 درخواستهای cross-origin بدون CORS
https://bluepnume.medium.com/reinventing-cross-origin-requests-without-cors-b9c4cb645376
🔻 چرا اپلیکیشن وب جدید در PayPal از Typescript استفاده میکنه؟
https://medium.com/@kentcdodds/why-every-new-web-app-at-paypal-starts-with-typescript-9d1acc07c839
🔻 مقیاسپذیری GraphQL در PayPal
https://medium.com/paypal-tech/scaling-graphql-at-paypal-b5b5ac098810
🔻 کامپوننتهای UI قابل اشتراکگذاری PayPal در سطح Enterprise
https://medium.com/paypal-tech/reusing-ui-components-at-enterprise-level-a7df1ea1f8dd
🔻 اپلیکیشنهای PayPal معماری Microfrontend رو دنبال میکنند
https://medium.com/paypal-tech/how-micro-frontend-has-changed-our-team-dynamic-ba2f01597f48
🔻 توضیح PayPal درباره پذیرش GraphQL
https://medium.com/paypal-tech/graphql-at-paypal-an-adoption-story-b7e01175f2b7
🔻 داستان موفقیت PayPal Checkout
https://medium.com/paypal-tech/graphql-a-success-story-for-paypal-checkout-3482f724fb53
#PayPal #FrontEnd
در ادامه لیستی از مقالات تخصصی و فرانتاندی شرکت PayPal رو که توسط Soheib Kiani معرفی شده بود قرار دادم:
https://bluepnume.medium.com/sane-scalable-angular-apps-are-tricky-but-not-impossible-lessons-learned-from-paypal-checkout-c5320558d4ef
https://bluepnume.medium.com/dependency-injection-in-angular-isn-t-worth-it-more-lessons-learned-from-scaling-paypal-checkout-2189ec9c21a0
https://bluepnume.medium.com/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875
https://bluepnume.medium.com/reinventing-cross-origin-requests-without-cors-b9c4cb645376
https://medium.com/@kentcdodds/why-every-new-web-app-at-paypal-starts-with-typescript-9d1acc07c839
https://medium.com/paypal-tech/scaling-graphql-at-paypal-b5b5ac098810
https://medium.com/paypal-tech/reusing-ui-components-at-enterprise-level-a7df1ea1f8dd
https://medium.com/paypal-tech/how-micro-frontend-has-changed-our-team-dynamic-ba2f01597f48
https://medium.com/paypal-tech/graphql-at-paypal-an-adoption-story-b7e01175f2b7
https://medium.com/paypal-tech/graphql-a-success-story-for-paypal-checkout-3482f724fb53
#PayPal #FrontEnd
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from DevAcademy
سلام به همه عزیزان
ما در تیم نرم افزار مون سه تا پوزیشن جدید داریم با مشخصات زیر:
1) Job Position:#Frontend_Developer#Remote
- Job Level: Senior
- Requirements: nextJS, ReactJS, RestfulAPI, CSS, TDD, Git
2) Job Position:#Backend_Developer, Remote
- Job Level: Senior
- Requirements: django Python
3) Job Position:#FullStack_Developer, Remote
- Job Level: Senior
- Requirements: Python, django, ReactJS, nextJS
استارتاپ ما یک پلتفرم نرم افزاری هست با موضوع جابجایی بار توسط مسافر، یک روش جایگزین پست های قدیمی، هزینه بر و زمان تحویل طولانی. ما در این پلتفرم مسافران از سراسر جهان رو به افرادی که میخوان کالا یا مدرکی ارسال کنند متصل میکنیم. بازار هدف مون خارج از ایران هست پس باید دانش زبان انگلیسی حداقل در حد مکالمه رو هم داشته باشید.
راستی، اگر همکاری خوبی داشته باشیم امکان #اسپانسرشیپ_ویزا اروپا هم وجود داره.
https://www.linkedin.com/posts/amirmougouei_frontendabrdeveloper-remote-backendabrdeveloper-activity-7300118738303918082-JbTy?utm_source=share&utm_medium=member_desktop&rcm=ACoAAClra28BavkOYc-F6nhnvSM_iIlDclEXTZI
💻@DevAcaademy
💬@DevAcademyGroup
ما در تیم نرم افزار مون سه تا پوزیشن جدید داریم با مشخصات زیر:
1) Job Position:#Frontend_Developer#Remote
- Job Level: Senior
- Requirements: nextJS, ReactJS, RestfulAPI, CSS, TDD, Git
2) Job Position:#Backend_Developer, Remote
- Job Level: Senior
- Requirements: django Python
3) Job Position:#FullStack_Developer, Remote
- Job Level: Senior
- Requirements: Python, django, ReactJS, nextJS
استارتاپ ما یک پلتفرم نرم افزاری هست با موضوع جابجایی بار توسط مسافر، یک روش جایگزین پست های قدیمی، هزینه بر و زمان تحویل طولانی. ما در این پلتفرم مسافران از سراسر جهان رو به افرادی که میخوان کالا یا مدرکی ارسال کنند متصل میکنیم. بازار هدف مون خارج از ایران هست پس باید دانش زبان انگلیسی حداقل در حد مکالمه رو هم داشته باشید.
راستی، اگر همکاری خوبی داشته باشیم امکان #اسپانسرشیپ_ویزا اروپا هم وجود داره.
https://www.linkedin.com/posts/amirmougouei_frontendabrdeveloper-remote-backendabrdeveloper-activity-7300118738303918082-JbTy?utm_source=share&utm_medium=member_desktop&rcm=ACoAAClra28BavkOYc-F6nhnvSM_iIlDclEXTZI
💻@DevAcaademy
💬@DevAcademyGroup
Linkedin
#frontend_developer #remote #backend_developer #fullstack_developer #اسپانسرشیپ_ویزا #استخدام #فرانت_اند #بک_اند #فول_استک #دولوپر…
آپدیت: ظرفیت این پوزیشن ها تکمیل شده.
سلام به همه عزیزان
خب، وقت بزرگتر شدن استارتاپ مون رسیده و ما در تیم نرم افزار مون سه تا پوزیشن جدید داریم با مشخصات زیر:
1) Job Position: #Frontend_Developer #Remote
- Job Level: Senior
- Requirements: nextJS, ReactJS…
سلام به همه عزیزان
خب، وقت بزرگتر شدن استارتاپ مون رسیده و ما در تیم نرم افزار مون سه تا پوزیشن جدید داریم با مشخصات زیر:
1) Job Position: #Frontend_Developer #Remote
- Job Level: Senior
- Requirements: nextJS, ReactJS…
Forwarded from ASafaeirad
A well-organized collection of frontend interview questions
https://arminshaikhy.github.io/frontend-interview-questions/
#interview #frontend
https://arminshaikhy.github.io/frontend-interview-questions/
#interview #frontend
frontend-interview-questions
Frontend Interview Questions
A well-organized collection of frontend interview questions, categorized by topic, designed to help you prepare for technical interviews, deepen your knowledge, and serve as a practical reference for ongoing learning.
Forwarded from Md Daily (Mahan)
قسمت دوم: چرا هر برنامهنویسی به یک ژورنال کدنویسی نیاز داره؟ نه، حافظهتون کافی نیست
توی قسمت اول بررسی کردیم که چرا ما کد ها را فراموش میکنیم و مغزمون برای حل مسئله ساخته شده و نه نگهداری اطلاعات و رسیدیم به یک پرسش مهم! حالا راه حل چیه؟
این یه راهه برای دیباگ کردن مغزتون، مقیاس دادن به یادگیریتون و تبدیل شدن به اون برنامهنویسی که خودِ آیندهتون از دیدنش کیف میکنه.
هر روز شما مشکلات رو حل میکنید، با موارد خاص آشنا میشید، خطاهای عجیب و غریب رو دیباگ میکنید و به ترفندهای باحالی برمیخورید. اما اگه پیشرفتتون رو ذخیره نکنید، میشه مثل یه پروسه که توی `top` کیل شده.
یه ژورنال برنامهنویسی، سیستم ذخیرهسازی شخصی شماست که قرار نیست توش مقاله بنویسید. قراره اون زمینه و کانتکست رو حفظ کنید؛ یعنی روند فکری، دلیلی که یه کتابخونه رو به اون یکی ترجیح دادی.
چرا این مهمه:
* دردهای تکراری رو کم میکنه: همون باگی که سه اسپرینت پیش رفع کردی؟ حالا میتونی تو یادداشتهات جستجو کنی به جای اینکه دوباره تو Stack Overflow دنبالش بگردی.
* خودِ آیندهات رو باهوشتر میکنه: شما برای امروز کد نمیزنید، دارید برای نسخه سه ماه بعدِ خودتون سرنخ به جا میذارید.
* کانتکست یعنی طلا: گیت (Git) به شما میگه چی تغییر کرده. ژورنالتون به شما میگه چرا تغییر کرده.
مغزتون رو مثل RAM در نظر بگیرید. سریعه ولی فَرّاره. ژورنالتون مثل SSD شماست؛ نوشتن توش کندتره، اما دائمی و قابل جستجوئه.
پس به جای اینکه با هر روز مثل یه شروع تازه برخورد کنید، مثل یه کمپین باهاش رفتار کنید؛ کمپینی که توش زود به زود ذخیره میکنید و نمیذارید مبارزه با غول آخر، کل پیشرفتتون رو پاک کنه.
چی توی ژورنال برنامهنویسیتون بنویسید که شبیه دفتر خاطرات نشه
بذارید یه چیزی رو همین اول روشن کنیم: قرار نیست بنویسید «دفتر خاطرات عزیزم، امروز دوباره با یه سمیکالن (;) به مشکل خوردم.»
یه ژورنال برنامهنویسی در مورد احساسات نیست. هدفش ثبت سرنخهای فنیه تا بتونید از سردردهای آینده جلوگیری کنید، سرعت کارتون رو بالا ببرید و دیگه هر ماه مجبور نشید همون جواب رو از نو پیدا کنید.
این چیزهاییه که واقعاً باید یادداشت کنید:
بردهای روزانه (حتی کوچیکهاش)
* یه باگ کَشینگ رو رفع کردی؟ بنویس چطوری.
* کانتینر داکر بالاخره بعد از ۳ ساعت کلنجار رفتن با «آخه چرا؟» اجرا شد؟ اون تغییر کوچیک تو کانفیگ رو بنویس.
* چرا؟ اینا الان شاید جزئی به نظر برسن، اما اثرشون مرکب میشه. به علاوه، مرور کردنشون بعداً مثل گرفتن XP میمونه.
چیزایی که گیر کردی و لحظات WTF
* اون پیغام خطایی که هیچ معنیای نمیداد؟ ثبتش کن.
* اون مسیر خرگوشی که رفتی توش و به هیچجا نرسید؟ اونم ارزشمنده.
* ثبت کردن موانع به شما کمک میکنه نه فقط کد، بلکه الگوهای فکری خودتون رو هم دیباگ کنید.
تصمیمهایی که گرفتی و دلیلش
* «من
* «اینجا از unit test صرفنظر کردم چون تست E2E پوششاش میده.»
* این کار باعث میشه خودِ آیندهتون با عصبانیت زیر لب نگه: «این دیگه کار کی بوده...»
دستورات خفن خط فرمان و کانفیگها
* اون دستور تکخطی که کل محیط رو آماده میکنه رو میشناسی؟ اون دستور
چیزایی که مجبور شدی (دوباره) گوگل کنی
* اگه یه چیزی رو بیشتر از یه بار گوگل کردی، جاش توی ژورناله. این قانونه.
* اینجوری ژورنالت تبدیل میشه به Stack Overflow شخصی خودت، ولی بدون اون کامنتهای رو مخ که میگن «داکیومنتها رو بخون.»
خلاصه، ساختاریافته و قابل جستجو نگه داشتنش باعث میشه مفید باشه. این یه وبلاگ نیست. این لاگ دیباگ شما تو زندگی واقعیه.
نکته حرفهای: از لیستهای بالتدار (bullet points)، بلوکهای کد و تگهایی مثل
خب، حالا با ایده موافقید. سوال اصلی اینه: این همه چیز رو کجا بنویسیم؟
برای ژورنالنویسی برنامهنویسها سه روش هست: با VS Code و Git ژورنال مارکداون با کنترل نسخه بسازید، با Obsidian یادداشتهای متصل با بکلینک و تگهایی مثل
حرف آخر: ابزار به اندازه خود عادت مهم نیست. هر چیزی که برای شما اصطکاک رو کمتر میکنه انتخاب کنید. بهترین ابزار ژورنالنویسی اونیه که واقعاً بازش میکنید.
—-
⬅️ هنوز تموم نشده و ادامه در قسمت بعدی
💡 تا قسمت بعدی مثل همیشه کنجکاو بمونید :)
🆔 @MdDaily
توی قسمت اول بررسی کردیم که چرا ما کد ها را فراموش میکنیم و مغزمون برای حل مسئله ساخته شده و نه نگهداری اطلاعات و رسیدیم به یک پرسش مهم! حالا راه حل چیه؟
این یه راهه برای دیباگ کردن مغزتون، مقیاس دادن به یادگیریتون و تبدیل شدن به اون برنامهنویسی که خودِ آیندهتون از دیدنش کیف میکنه.
هر روز شما مشکلات رو حل میکنید، با موارد خاص آشنا میشید، خطاهای عجیب و غریب رو دیباگ میکنید و به ترفندهای باحالی برمیخورید. اما اگه پیشرفتتون رو ذخیره نکنید، میشه مثل یه پروسه که توی `top` کیل شده.
یه ژورنال برنامهنویسی، سیستم ذخیرهسازی شخصی شماست که قرار نیست توش مقاله بنویسید. قراره اون زمینه و کانتکست رو حفظ کنید؛ یعنی روند فکری، دلیلی که یه کتابخونه رو به اون یکی ترجیح دادی.
چرا این مهمه:
* دردهای تکراری رو کم میکنه: همون باگی که سه اسپرینت پیش رفع کردی؟ حالا میتونی تو یادداشتهات جستجو کنی به جای اینکه دوباره تو Stack Overflow دنبالش بگردی.
* خودِ آیندهات رو باهوشتر میکنه: شما برای امروز کد نمیزنید، دارید برای نسخه سه ماه بعدِ خودتون سرنخ به جا میذارید.
* کانتکست یعنی طلا: گیت (Git) به شما میگه چی تغییر کرده. ژورنالتون به شما میگه چرا تغییر کرده.
مغزتون رو مثل RAM در نظر بگیرید. سریعه ولی فَرّاره. ژورنالتون مثل SSD شماست؛ نوشتن توش کندتره، اما دائمی و قابل جستجوئه.
پس به جای اینکه با هر روز مثل یه شروع تازه برخورد کنید، مثل یه کمپین باهاش رفتار کنید؛ کمپینی که توش زود به زود ذخیره میکنید و نمیذارید مبارزه با غول آخر، کل پیشرفتتون رو پاک کنه.
چی توی ژورنال برنامهنویسیتون بنویسید که شبیه دفتر خاطرات نشه
بذارید یه چیزی رو همین اول روشن کنیم: قرار نیست بنویسید «دفتر خاطرات عزیزم، امروز دوباره با یه سمیکالن (;) به مشکل خوردم.»
یه ژورنال برنامهنویسی در مورد احساسات نیست. هدفش ثبت سرنخهای فنیه تا بتونید از سردردهای آینده جلوگیری کنید، سرعت کارتون رو بالا ببرید و دیگه هر ماه مجبور نشید همون جواب رو از نو پیدا کنید.
این چیزهاییه که واقعاً باید یادداشت کنید:
بردهای روزانه (حتی کوچیکهاش)
* یه باگ کَشینگ رو رفع کردی؟ بنویس چطوری.
* کانتینر داکر بالاخره بعد از ۳ ساعت کلنجار رفتن با «آخه چرا؟» اجرا شد؟ اون تغییر کوچیک تو کانفیگ رو بنویس.
* چرا؟ اینا الان شاید جزئی به نظر برسن، اما اثرشون مرکب میشه. به علاوه، مرور کردنشون بعداً مثل گرفتن XP میمونه.
چیزایی که گیر کردی و لحظات WTF
* اون پیغام خطایی که هیچ معنیای نمیداد؟ ثبتش کن.
* اون مسیر خرگوشی که رفتی توش و به هیچجا نرسید؟ اونم ارزشمنده.
* ثبت کردن موانع به شما کمک میکنه نه فقط کد، بلکه الگوهای فکری خودتون رو هم دیباگ کنید.
تصمیمهایی که گرفتی و دلیلش
* «من
Zod رو به جای Yup انتخاب کردم چون استنتاج تایپاسکریپتش بهتر بود.»* «اینجا از unit test صرفنظر کردم چون تست E2E پوششاش میده.»
* این کار باعث میشه خودِ آیندهتون با عصبانیت زیر لب نگه: «این دیگه کار کی بوده...»
دستورات خفن خط فرمان و کانفیگها
* اون دستور تکخطی که کل محیط رو آماده میکنه رو میشناسی؟ اون دستور
rsync که همیشه قاطی میکنی؟ اینجا ثبتش کن. دیگه خبری از ژانگولربازی با history | grep نیست.چیزایی که مجبور شدی (دوباره) گوگل کنی
* اگه یه چیزی رو بیشتر از یه بار گوگل کردی، جاش توی ژورناله. این قانونه.
* اینجوری ژورنالت تبدیل میشه به Stack Overflow شخصی خودت، ولی بدون اون کامنتهای رو مخ که میگن «داکیومنتها رو بخون.»
خلاصه، ساختاریافته و قابل جستجو نگه داشتنش باعث میشه مفید باشه. این یه وبلاگ نیست. این لاگ دیباگ شما تو زندگی واقعیه.
نکته حرفهای: از لیستهای بالتدار (bullet points)، بلوکهای کد و تگهایی مثل
#رفعباگ`، `#cli یا #پرفورمنس برای سازماندهی نوشتههاتون استفاده کنید. مارکداون این کار رو به شکل خوبی ساده میکنه.خب، حالا با ایده موافقید. سوال اصلی اینه: این همه چیز رو کجا بنویسیم؟
برای ژورنالنویسی برنامهنویسها سه روش هست: با VS Code و Git ژورنال مارکداون با کنترل نسخه بسازید، با Obsidian یادداشتهای متصل با بکلینک و تگهایی مثل
#debug و #frontend داشته باشید، یا با متن ساده و cron لاگ روزانه خودکار بنویسید. یکم باحال ترش کنیم؟ بدید به notebooklm :)حرف آخر: ابزار به اندازه خود عادت مهم نیست. هر چیزی که برای شما اصطکاک رو کمتر میکنه انتخاب کنید. بهترین ابزار ژورنالنویسی اونیه که واقعاً بازش میکنید.
—-
🆔 @MdDaily
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Ditty | دیتی
🔺ـ Subresource Integrity چیه؟ 🤔
- اگه ریسورسهای یک صفحه (اسکریپتها، استایلها و ...) رو از یک منبع خارجی (مثلاً CDN) لود میکنیم، یه نکته امنیتی مهم رو باید در نظر داشته باشیم
- وقتی یه اسکریپت توی صفحه لود میشه، میتونه به همهٔ اطلاعات صفحه دسترسی داشته باشه. و اگه مثلاً اون CDN هک بشه، هکر میتونه محتویات ریسورس رو دستکاری کنه بهطوری که بهراحتی میتونه اطلاعات هر کاربری رو بخونه
- برای جلوگیری از این اتفاق، مرورگرها یک قابلیت امنیتی دارن به اسم Subresouce Integrity یا بهطور خلاصه SRI
- توی این پست با این ویژگی و نحوهٔ پیادهسازی اون بیشتر آشنا میشیم:
ditty.ir/587
#frontend
- اگه ریسورسهای یک صفحه (اسکریپتها، استایلها و ...) رو از یک منبع خارجی (مثلاً CDN) لود میکنیم، یه نکته امنیتی مهم رو باید در نظر داشته باشیم
- وقتی یه اسکریپت توی صفحه لود میشه، میتونه به همهٔ اطلاعات صفحه دسترسی داشته باشه. و اگه مثلاً اون CDN هک بشه، هکر میتونه محتویات ریسورس رو دستکاری کنه بهطوری که بهراحتی میتونه اطلاعات هر کاربری رو بخونه
- برای جلوگیری از این اتفاق، مرورگرها یک قابلیت امنیتی دارن به اسم Subresouce Integrity یا بهطور خلاصه SRI
- توی این پست با این ویژگی و نحوهٔ پیادهسازی اون بیشتر آشنا میشیم:
ditty.ir/587
#frontend
Forwarded from SoniaCircuit (Soroush)
📚معرفی Zod
یه کتابخونه فوقالعاده برای اعتبارسنجی (Validation) دادههاست که باهاش میتونید قوانین دقیق و تایپسیف تعریف کنید.
📦 نصب Zod
💠 نمونه کد
💠 استفاده از Zod با React Hook Form
ابتدا بستههای زیر را نصب کنید:
🔗 https://zod.dev
#Zod #Validation #FrontEnd #React
@SoniaNotes
یه کتابخونه فوقالعاده برای اعتبارسنجی (Validation) دادههاست که باهاش میتونید قوانین دقیق و تایپسیف تعریف کنید.
📦 نصب Zod
npm install zod
# yarn add zod
# pnpm install zod
💠 نمونه کد
import { z } from "zod";
const userSchema = z.object({
username: z.string().min(3, "Username must be minimum 3 characters"),
age: z.number().int().positive("Age must be positive"),
email: z.string().email("Email is invalid."),
password: z.string().min(6).refine(val => /[A-Z]/.test(val), {
message: "Password must be at least 6 characters and contain both uppercase and lowercase letters.",
}),
});
try {
userSchema.parse({
username: "ali",
age: 25,
email: "[email protected]",
password: "Secret1",
});
console.log("Validation successful.");
} catch (e) {
console.log(e.errors);
}💠 استفاده از Zod با React Hook Form
ابتدا بستههای زیر را نصب کنید:
npm install react-hook-form @hookform/resolver
# yarn add react-hook-form @hookform/resolver
# pnpm install react-hook-form @hookform/resolver
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
const schema = z.object({
email: z.string().email(),
password: z.string().min(6),
});
function MyForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(schema),
});
const onSubmit = data => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} placeholder="Email" />
{errors.email && <p>{errors.email.message}</p>}
<input type="password" {...register("password")} placeholder="Password" />
{errors.password && <p>{errors.password.message}</p>}
<button type="submit">Login</button>
</form>
);
}🔗 https://zod.dev
#Zod #Validation #FrontEnd #React
@SoniaNotes
Forwarded from DevAcademy
📌برای کسایی که نتونستن شرکت کنن
🚀 سورسکد و منابع ارائههای ایونت اخیرمون منتشر شد!
توی این ایونت دو ارائهی فوقالعاده داشتیم که حالا میتونید به راحتی سراغ کدها و مثالهاش برید 👇
💬 ارائهی آقای سالار نیلی دربارهی TypeScript
در این ارائه به مفاهیم پایه تا نکات پیشرفتهی TypeScript پرداخته شد و مثالهای عملی جذابی بررسی شدن.
📦 سورسکد و اسلایدها در گیتهاب:
🔗 github.com/codehalic/workshop-typescript-presentation
⚙️ ارائهی پوریا باباعلی دربارهی Flux Pattern
توی این ارائه معماری Flux و نحوهی استفاده از اون در پروژههای React مورد بحث قرار گرفت.
📦 سورسکد و نمونهکدهای ارائه در گیتهاب:
🔗 github.com/codehalic/workshop-flux-pattern-presentation
📚 پیشنهاد میکنیم حتماً سری به این ریپوها بزنید، کدها رو بررسی کنید و اگر سوالی داشتید با ما در میون بذارید 🙌
#TypeScript #Flux #Workshop #Codehalic #Frontend #WebDev
@codehalics
🚀 سورسکد و منابع ارائههای ایونت اخیرمون منتشر شد!
توی این ایونت دو ارائهی فوقالعاده داشتیم که حالا میتونید به راحتی سراغ کدها و مثالهاش برید 👇
💬 ارائهی آقای سالار نیلی دربارهی TypeScript
در این ارائه به مفاهیم پایه تا نکات پیشرفتهی TypeScript پرداخته شد و مثالهای عملی جذابی بررسی شدن.
📦 سورسکد و اسلایدها در گیتهاب:
🔗 github.com/codehalic/workshop-typescript-presentation
⚙️ ارائهی پوریا باباعلی دربارهی Flux Pattern
توی این ارائه معماری Flux و نحوهی استفاده از اون در پروژههای React مورد بحث قرار گرفت.
📦 سورسکد و نمونهکدهای ارائه در گیتهاب:
🔗 github.com/codehalic/workshop-flux-pattern-presentation
📚 پیشنهاد میکنیم حتماً سری به این ریپوها بزنید، کدها رو بررسی کنید و اگر سوالی داشتید با ما در میون بذارید 🙌
#TypeScript #Flux #Workshop #Codehalic #Frontend #WebDev
@codehalics
GitHub
GitHub - codehalic/workshop-flux-pattern-presentation
Contribute to codehalic/workshop-flux-pattern-presentation development by creating an account on GitHub.
Forwarded from کدهالیک | codehalic
🚀 سورسکد و منابع ارائههای ایونت اخیرمون منتشر شد!
توی این ایونت دو ارائهی فوقالعاده داشتیم که حالا میتونید به راحتی سراغ کدها و مثالهاش برید 👇
💬 ارائهی آقای سالار نیلی دربارهی TypeScript
در این ارائه به مفاهیم پایه تا نکات پیشرفتهی TypeScript پرداخته شد و مثالهای عملی جذابی بررسی شدن.
📦 سورسکد و اسلایدها در گیتهاب:
🔗 github.com/codehalic/workshop-typescript-presentation
⚙️ ارائهی پوریا باباعلی دربارهی Flux Pattern
توی این ارائه معماری Flux و نحوهی استفاده از اون در پروژههای React مورد بحث قرار گرفت.
📦 سورسکد و نمونهکدهای ارائه در گیتهاب:
🔗 github.com/codehalic/workshop-flux-pattern-presentation
📚 پیشنهاد میکنیم حتماً سری به این ریپوها بزنید، کدها رو بررسی کنید و اگر سوالی داشتید با ما در میون بذارید 🙌
#TypeScript #Flux #Workshop #Codehalic #Frontend #WebDev
@codehalics
توی این ایونت دو ارائهی فوقالعاده داشتیم که حالا میتونید به راحتی سراغ کدها و مثالهاش برید 👇
💬 ارائهی آقای سالار نیلی دربارهی TypeScript
در این ارائه به مفاهیم پایه تا نکات پیشرفتهی TypeScript پرداخته شد و مثالهای عملی جذابی بررسی شدن.
📦 سورسکد و اسلایدها در گیتهاب:
🔗 github.com/codehalic/workshop-typescript-presentation
⚙️ ارائهی پوریا باباعلی دربارهی Flux Pattern
توی این ارائه معماری Flux و نحوهی استفاده از اون در پروژههای React مورد بحث قرار گرفت.
📦 سورسکد و نمونهکدهای ارائه در گیتهاب:
🔗 github.com/codehalic/workshop-flux-pattern-presentation
📚 پیشنهاد میکنیم حتماً سری به این ریپوها بزنید، کدها رو بررسی کنید و اگر سوالی داشتید با ما در میون بذارید 🙌
#TypeScript #Flux #Workshop #Codehalic #Frontend #WebDev
@codehalics
GitHub
GitHub - codehalic/workshop-flux-pattern-presentation
Contribute to codehalic/workshop-flux-pattern-presentation development by creating an account on GitHub.
Forwarded from Gopher Academy
🔵 عنوان مقاله
vite-plugin-use-golang: Write Go in JavaScript Files?
🟢 خلاصه مقاله:
** این افزونه با نام vite-plugin-use-golang برای Vite یک آزمایش جالب است که با قرار دادن دستور "use golang" داخل فایلهای JavaScript، کدهای Go را شناسایی کرده و آنها را برای استفاده در فرانتاند به WebAssembly کامپایل میکند. نتیجه این است که میتوانید بخشی از منطق Go را مستقیماً در مرورگر و کنار کدهای JavaScript فراخوانی کنید. این رویکرد برای بهرهبرداری مجدد از منطق موجود در Go یا آزمایش بخشهای حساس به کارایی مفید است، اما پیچیدگی فرایند ساخت، افزایش حجم باندل، زمان راهاندازی WASM، دشواری دیباگ و محدودیت دسترسی مستقیم به DOM از چالشهای آن هستند. در مجموع، این کار «نامتعارف اما واقعی» است و نشان میدهد زنجیره ابزارهای امروز تا کجا قابل گسترش است.
#Vite #Go #WebAssembly #WASM #JavaScript #Frontend #DevTools #WasmInBrowser
🟣لینک مقاله:
https://golangweekly.com/link/176347/web
➖➖➖➖➖➖➖➖
👑 @gopher_academy
vite-plugin-use-golang: Write Go in JavaScript Files?
🟢 خلاصه مقاله:
** این افزونه با نام vite-plugin-use-golang برای Vite یک آزمایش جالب است که با قرار دادن دستور "use golang" داخل فایلهای JavaScript، کدهای Go را شناسایی کرده و آنها را برای استفاده در فرانتاند به WebAssembly کامپایل میکند. نتیجه این است که میتوانید بخشی از منطق Go را مستقیماً در مرورگر و کنار کدهای JavaScript فراخوانی کنید. این رویکرد برای بهرهبرداری مجدد از منطق موجود در Go یا آزمایش بخشهای حساس به کارایی مفید است، اما پیچیدگی فرایند ساخت، افزایش حجم باندل، زمان راهاندازی WASM، دشواری دیباگ و محدودیت دسترسی مستقیم به DOM از چالشهای آن هستند. در مجموع، این کار «نامتعارف اما واقعی» است و نشان میدهد زنجیره ابزارهای امروز تا کجا قابل گسترش است.
#Vite #Go #WebAssembly #WASM #JavaScript #Frontend #DevTools #WasmInBrowser
🟣لینک مقاله:
https://golangweekly.com/link/176347/web
➖➖➖➖➖➖➖➖
👑 @gopher_academy