نوشته های مسعود زرجانی

برگه تقلب Git

مسعود زرجانی — Tue, 07 Dec 2021 12:21:12 +0330

چند وقت پیش در حال گشت و گذار توی لینکدین بودم که به یک تصویر خوب که میتونه به خیلی ها (برنامه نویسان لزوما) کمک کنه و کار با Git رو براشون آسون کنه رسیدم، به نام Git Cheat Sheet (برگه تقلب Git). زمانی که من میخوام دستورات گیت رو بزنم برای استفاده میزارم جلوم و گاهی یک تقلبی از روش میزنم البته این برگه برای افرادی که تازه با گیت میخوان آشنا بشن خیلی کاربردی هست و برای اونهایی هم که با گیت کار میکنند و مسلط هستن هم میتونه گاهی خوب باشه برای یادآوری :)Git Cheat Sheetامیدوارم به کارتون بیاد. اگر به کارتون اومد لایک کنید ممنوناین پست در وبلاگ شخصی خودم: www.masoudzarjani.ir

10 وب سایت باحال برای برنامه نویسان

مسعود زرجانی — Mon, 27 Sep 2021 13:45:41 +0330

در اینجا من چندتا از وب سایت هایی که به صورت روزمره از اونها برای کدنویسی خودم استفاده میکنم رو بهتون معرفی میکنم.بریم با هم بررسی کنیم.1. تصاویر تصادفی به وسیله APIunsplash landing pageیکی از قوی ترین موتور های جستجوی عکس در جهان. Unsplash API یک JSON API مدرن که امکانی فراهم میکنه تا شما با دسته بندی و سایز و دیگر پارامتر های مدنظر خودتون یک یا چند تصویر در اختیار بگیرید و از این تصاویر در کدهاتون استفاده کنید.لینک وب سایت2. وب سایت Poet.sopoet landing pageپست های توییتر رو به عنوان تصاویر زیبا ضبط و به اشتراک میزاریم. می تونید از این وب سایت برای اشتراک گذاری پست های توییتری مربوط به خودتون در وب سایتتون استفاده کنید.لینک وب سایت3. ابزار های دولوپ کوچیکsmall dev tools landing pageابزارهای توسعه دهنده مفید با رابط کاربری زیبا. تو این وب سایت بیشتر از 20 ابزار با حال مثل رمزگذاری/رمزگشایی ، کوچک سازی ، مجموعه داده های ساختگی آزمایش و موارد دیگه که به شما برنامه نویسان کمک میکنه وجود داره.لینک وب سایت4. حذف پس زمینه تصاویرremove background web siteحذف پس زمینه به صورت خودکار و در کمتر از 5 ثانیه بدون هیچ کلیک اضافه ای فقط عکس رو میفرستی باقیش با خودش هست :)لینک وب سایت5. وب سایت Responsivelyresponsivelyوب سایت های رسپانسیو رو 5 برابر سریعتر توسعه بده!لینک وب سایت6. متا تگ هاmeta tagsیک وب سایت برای تست و نمایش متا تگ های شما که میتونید به راحتی ببینید خروجی تگ هایی که در وب سایتتون قرار دادید به چه شکل نمایش داده می شود.لینک وب سایت7. وب سایت readmeطراحی و پیاده سازی راحت یک Readme برای تحویل پروژه ها به کارفرما یا ایجاد یک داکیومنت برای پکیج ها و ماژول های آماده شده توسط شما.لینک وب سایت8. وب سایت storytaleتصاویر درجه یک برای پروژه های وب و تلفن همراه. با شخصیت های جذابش، میتونی پروژه خودتون چشم نواز کنید. میتونی برای اهداف تجاری و شخصی استفاده کنی.لینک وب سایت9. ساخت تصویر پروفایلاز هر عکسی یک عکس پروفایل عالی بساز.لینک وب سایت10. انتخاب رنگ های وب سایتانتخاب بهترین رنگ هم رنگ اصلی و هم رنگ ثانوی تو این وب سایت بهتون پیشنهاد میده.لینک وب سایتمنبع مقاله در وبسایت خودم

4 تا از کاربردی ترین مخازن گیت هاب برای تمامی برنامه نویسان وب

مسعود زرجانی — Sun, 01 Aug 2021 11:32:22 +0430

شگفت انگیز ترین مخازن گیت هاب که باید هر برنامه نویس وب تو لیست خودش داشته باشه با من همراه باشید.گیت هاب یک بستر عالی است که به شما به عنوان توسعه دهندگان اجازه داده می شود، پروژه های منبع باز خودتان را با جهان به اشتراک بگذارید. مخازن با ارزش بسیار زیادی وجود دارد که به شما به عنوان یک توسعه دهنده کمک می کنند. بنابر این اینکه شما چه نوع توسعه دهنده ای هستید مهم نیست، مهم این است که شما از مزیت های گیت هاب بهره مند شوید.در این مقاله، من تصمیم گرفتم 4 تا از مفید ترین مخازن رو که می توانید از آنها به عنوان توسعه دهنده وب استفاده کنید، آماده کنم.1. نقشه راه توسعه دهندگان - Developer Roadmapنقشه راه توسعه دهندگان یکی از مخازن مفید و محبوب است که باید بشناسید. نقشه راه توسعه دهندگان تا به زمان نگارش این مقاله بیش از 167.000 ستاره در گیت هاب دارد، به این معنی که بسیار مفید و محبوب است.این مخزن نمودارها و تصاویر زیادی در خود دارد که مسیرهایی را که می توانید طی کنید و فن آوری های مورد نیاز را بسته به نوع توسعه دهنده ای که می خواهید تبدیل شوید انتخاب کنید (backend ، frontend و غیره). بنابراین این نقشه راه توسعه دهندگان وب است که به شما در انتخاب مسیر کمک می کند.2. API های عمومی - Public APIsاین مخزن یک مخزن بسیار مفید است که دارای بیش از 145.000 ستاره GitHub است. این برنامه لیستی از انواع مختلف API ها را ارائه می دهد که می توانید به عنوان توسعه دهنده وب یا به طور کلی توسعه دهنده نرم افزار از آنها استفاده کنید. تقریباً هر نوع API مورد نیاز شما در این مخزن موجود است. API ها موضوعات زیادی مانند انیمه ، تجارت ، فیلم ، حیوانات ، ارز رمزنگاری شده و موارد دیگر را پوشش می دهند. می توانید خودتان آن را بررسی کنید.3. نمونه های (gitignore) - The gitignore templatesهر زمان که می خواهید یک مخزن گیت هاب برای پروژه خود ایجاد کنید ، همیشه باید یک فایل .gitignore برای فیلتر کردن آنچه می خواهید بارگذاری کنید داشته باشید. بنابراین این مخزن مجموعه ای از الگوهای مفید فایل .gitignore را به شما می دهد که می توانید در پروژه های خود استفاده کنید. این مخزن دارای بیش از 122.000 ستاره گیت هاب است و همچنین شامل قالب های gitignore برای تقریباً همه زبان های برنامه نویسی است.4. freeCodeCampfreeCodeCamp یک سازمان غیرانتفاعی و یکی از محبوب ترین مخازن گیت هاب که تا زمان نگارش این مقاله بیش از 328 هزار ستاره در گیت هاب دریافت کرده. این مخزن یکی از مخازن آموزشی و یکی از بزرگترین انجمن های آموزشی است.منبع: وبلاگ شخصی خودم

22 نکته طلایی برای افزایش سطح مهارت شما در طراحی API

مسعود زرجانی — Mon, 28 Jun 2021 09:38:59 +0430

تا به حال با یک API کثیف و وحشتناک روبرو شدید که برای هر متنی که نوشته شده باید بازی حدس کلمه راه اندازی کنی؟ من باهاش رو برو شدم.تو دنیای مایکرو سرویس ها، یک طراحی سازگار برای API های شما الزامی است.من تو این مقاله سعی میکنم بهترین روش ها رو بهتون معرفی کنماین مقاله برگرفته و بازگردانی شده مقاله ای در Medium با همین عنوان هست.اصطلاحاتهر طراحی API از چیزی به نام Resource Oriented Design پیروی می کند که از سه مفهوم اصلی تشکیل شده است:منبع - Resource: یک منبع بخش از یک داده، مانند کاربرمجموعه - Collection: به مجموعه ای از منابع مجموعه گفته می شود. مثال: لیستی از کاربرانآدرس URL: محل منبع یا مجموعه را مشخص می کند. مثال: /user1- استفاده از kebab-case برای URLبرای مثال، اگر میخواهید لیست مرتب شده ای را بگیرید.Bad/systemOrders or /system_ordersGood/system-orders2- استفاده از camelCase در پارامتر هابرای مثال، اگر قصد دارید لیست محصولات یک فروشگاه بخصوص را دریافت کنید.Bad/system-orders/{order_id} or /system-orders/{OrderId}Good/system-orders/{orderId}3- استفاده از نام جمع برای اشاره به یک مجموعهبرای مثال، اگر قصد دارید اطلاعات کل کاربران را دریافت کنید.BadGET /user or GET /UserGoodGET /users4- آدرس URL با یک مجموعه شروع می شود و با یک شناسه به پایان می رسد.اگر می خواهید مفهوم را منحصر به فرد و سازگار نگه دارید.BadGET /shops/:shopId/category/:categoryId/priceGoodGET /shops/:shopId/ or GET /category/:categoryId5- افعال را از URL منبع خود دور نگه داریدبرای بیان قصد خود در URL از افعال استفاده نکنید. در عوض، از روشهای مناسب HTTP برای مشخص نمودن عملیات استفاده کنید.Bad:POST /updateuser/{userId} or GET /getusersGood:PUT /user/{userId}6- از فعل ها برای URL غیر منبع استفاده کنیدشما یک نقطه پایانی دارید که به جز یک عمل چیزی بر نمی گرداند. در این حالت می توانید از افعال استفاده کنید. به عنوان مثال ، اگر می خواهید هشدار را برای یک کاربر دوباره ارسال کنید.Good:POST /alerts/245743/resend* نکته این که اینها عملیات CRUD ما نیستند. بلکه توابعی به حساب می آیند که کار خاصی را در سیستم ما انجام می دهند.7- از camelCase برای ایندکس های JSON خود استفاده کنیداگر سیستمی می سازید که متن درخواست یا پاسخ آن JSON باشد ، نام ایندکس باید به صورت camelCase باشد.Bad:{ user_name: "Mohammad Faisal" user_id: "1" }Good:{ userName: "Mohammad Faisal" userId: "1" }8. مانیتورینگدرخواست های HTTP شما باید یکسری نقاط پایانی رزرو داشته باشند برای نمایش اطلاعات مورد نیاز مربوط به API ها که شامل موارد زیر است:/healthبازگرداندن کد 200 جهت بررسی صحت سرور و API/versionبازگرداندن نسخه API در پاسخ به این نقطه پایانی/metricsاین نقطه پایانی معیارهای مختلفی مانند زمان متوسط پاسخ را ارائه می دهد که برای اشکال زدایی و بررسی وضعیت API در بازه زمانی های مختلف بسیار کاربردی است.نکته این توصیه خودم هست که حتما روی پروژه جهت بررسی و مانیتور کردن عملیات های مربوط به Api و سرور(ها) از Prometheus استفاده کنید.9- ازنام جدول برای نام منابعتون استفاده نکنید.فقط از نام جدول به عنوان نام منبع خود استفاده نکنید. در طولانی مدت ، این نوع تنبلی می تواند مضر باشد.Bad:product_orderGood:product-orders10- استفاده از ابزار های طراحی APIبسیاری از ابزارهای خوب طراحی API برای مستند سازی خوب وجود دارد ، مانند:API BlueprintSwaggerداشتن مستندات خوب و دقیق منجر به یک تجربه کاربری عالی برای استفاده کنندگان از API شما می شود.11- از عدد ساده به عنوان نسخه استفاده کنیدهمیشه از نسخه بندی برای API استفاده کنید و آن را به سمت چپ حرکت دهید تا بیشترین دامنه را داشته باشد. شماره نسخه باید v1 ، v2 و غیره باشد.Good:http://api.domain.com/v1/shops/3/productsهمیشه از نسخه دهی در API خود استفاده کنید چون اگر API توسط بخش های خارجی استفاده می شود، تغییر نقطه پایان می تواند عملکرد آنها را متزلزل کند.12- تعداد کل منابع را در پاسخ قرار دهیداگر قرار بود یک مجموعه ای از دیتا را برگردانید حتما تعداد کل آن را نیز در پاسخ بر گردانید و برای این کار می توانید از کلمه کلیدی total استفاده کنید.Bad{ users: [ ... ] }Good{ users: [ ... ], total: 34 }13- پارمتر های limit و offset را بپذیریدهمیشه پارامتر های limit و offset را در درخواست هایی که با متد Get ارسال می شوند را بپذیرید.Good:GET /shops?offset=5&limit=5به این دلیل که برای صفحه بندی در بخش front-end نیاز است.14- از پارمتر fields برای کوئری استفاده کنیدمقدار داده های برگشتی نیز باید در نظر گرفته شود.یک پارامتر فیلد اضافه کنید تا فقط قسمتهای مورد نیاز از API شما مشخص شود.مثال:فقط نام ، آدرس و تماس مغازه ها را برگردانید.GET /shops?fields=id,name,address,contactهمچنین به کاهش مدت زمان پاسخ در برخی از درخواست ها می انجامد.15- در URL پارامتر token جهت احراز هویت را نگیریداین یک عمل بسیار بد است زیرا اغلب URL ها ثبت می شوند و رمز تأیید اعتبار نیز بدون نیاز ثبت می شود.BadGET /shops/123?token=some_kind_of_authenticaiton_tokenGoodارسال درخواست از HeaderAuthorization: Bearer xxxxxx, Extra yyyyyهمچنین مدت زمان اعتبار سنجی باید کوتاه مدت باشد.16. نوع محتوا (Content-Type) را تأیید کنیدسرور نباید نوع محتوا را فرض کند. به عنوان مثال ، اگر برنامه / x-www-form-urlencoded را بپذیرید ، یک مهاجم می تواند یک فرم ایجاد کند و یک درخواست POST ساده را تغییر دهد.بنابراین ، همیشه نوع محتوا را تأیید کنید و اگر می خواهید یک مورد پیش فرض داشته باشید از نوع محتوای application / json استفاده کنید.17- از روشهای HTTP برای توابع CRUD استفاده کنیدهدف از روش های HTTP توضیح عملکرد CRUD است.GET: دریافت اطلاعات منبع یا مجموعهPOST: ایجاد یک منبع جدید یا یک زیر منبعPUT: بروزرسانی منبع موجودPATCH: بروزرسانی منبع موجود با این تفاوت که فقط پارامترهای مشخص شده را تغییر می دهیم.DELETE: حذف منبع موجود18- از Relation در URL برای منابع تو در تو استفاده کنیدبخشی از نمونه های عملی عبارتند از:GET /shops/2/products : لیست تمامی محصولات را از فروشگاه 2 دریافت کنGET /shops/2/products/31: جزئیات محصول 31 را که متعلق به فروشگاه 2 است ، دریافت کنDELETE /shops/2/products/31: محصول 31 که متعلق به فروشگاه 2 است را حذف کنPUT /shops/2/products/31: باید اطلاعات محصول 31 از فروشگاه 2 را بروزرسانی کندPOST /shops: افزودن فروشگاه جدید و پاسخ دادن اطلاعات مربوط به فروشگاه جدید ساخته شده19- CORSاز سرصفحه های CORS (Cross-Origin Resource Sharing) برای همه API های روبه رو پشتیبانی کنید.پشتیبانی از منبع مجاز CORS "*" و اعمال مجوز از طریق رمزهای معتبر OAuth را در نظر بگیرید.از ترکیب اعتبار کاربر با اعتبار سنجی مبدا خودداری کنید.20- امنیت(رمزگذاری شده با TLS) HTTPS را در تمام نقاط انتهایی ، منابع و خدمات اعمال کنید.برای همه URL های callback ، نقاط پایانی push notification و webhook ها HTTPS را اجرا کنید.21- خطاهاخطاها یا به طور خاص خطاهای سرویس هنگامی رخ می دهد که مشتری درخواست نامعتبر یا نادرستی از سرویس می کند یا داده های نامعتبر یا نادرست را به سرویس منتقل می کند و سرویس درخواست را رد می کند.مثالها شامل اعتبار سنجی اعتبار نامعتبر ، پارامترهای نادرست ، شناسه های نسخه ناشناخته و غیره است.هنگام رد درخواست مشتری به دلیل یک یا چند خطای سرویس ، کدهای خطای 4xx HTTP را بازگردانید.پردازش تمام ویژگی ها و سپس بازگرداندن چندین اعتبار سنجی را در یک پاسخ در نظر بگیرید.22- قانون طلاییاگر در تصمیم گیری برای طراحی API خود شک دارید، این قوانین میتوانند شما را برای گرفتن تصمیم نهایی کمک کنند.هموار بهتر از تو در تو است.سادگی بهتر از پیچیدگی است.متن ها بهتر از اعداد هستند.سازگاری بهتر از سفارشی سازی است.امیدوارم از مطالبی که قرار داده ام استفاده کرده باشید. منبع: وبلاگ شخصی خودمروز خوش

پیاده سازی Multithreading در Node.js

مسعود زرجانی — Tue, 08 Jun 2021 15:19:36 +0430

پس از انتشار نسخه 13 Node.js، قابلیت Multithreading به آن اضافه شد.< className="md-block-image-caption">Multithreading in node.jsمعرفیاکثر توسعه دهندگان جاوا اسکریپت معتقدند Node.js تک رشته ای است، که چندین عملیات رو به روش non-blocking asynchronous callback (پاسخ ناهمگام غیر مسدود کننده) انجام میدهد، اما این دیگر معتبر نیست و از زمان انتشار نسخه 13 Node.js قابلیت Multithreading به نام worker threads به آن اضافه شد.اگر چه با روش non-blocking asynchronous callback می توان چندین عملیات رو بسیار کارآمد انجام داد، اما عملیات هایی که نیاز به استفاده گسترده از پردازنده مرکزی مانند بلوک رمزگذاری برای پردازش های دیگر دارند، این روش برای آن ها جوابگو نیست و بسیار ضعیف است. Multithreading با جدا کردن وظایف این ضعف را برطرف می کند، و باعث می شود که پردازنده در پس زمینه مشغول پردازش رشته ها باشد و بلاکی در دیگر وظایف و کارهای پردازشگر صورت نگیرد. پیاده سازیدر Node.js به صورت معمول رشته اصلی تمام عملیات را انجام می دهد. با کمک مثال ، نحوه ایجاد یک رشته دیگر برای پردازش یک عملیات نشان داده می شود.این مثال دارای دو API است ، API اول عملکرد مربوط به پردازش توسط رشته اصلی را نشان می دهد و API دیگر عملکرد را در یک رشته جداگانه پردازش می کند.قطعه کد زیر ساختار پردازش توسط رشته اصلی را نشان می دهد./* * File Name: index.js * Description: This is the main thread */ const express = require("express"); const app = express(); const port = 3000; app.get("/", (req, res) => { res.send("Process function on main thread."); }); app.get("/seprate-thread", (req, res) => { res.send("Process function on seprate thread."); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); }); به عنوان اولین مرحله ، یک تابع را بر روی رشته اصلی اضافه می کنیم و به عنوان مرحله بعدی، همان عملکرد را روی یک رشته دیگر اضافه می کنیم.تابعی که استفاده می شود getSum خواهد بود که مجموع تجمعی را تا مقدار محدودی که به عنوان آرگومان داده می شود ، برمی گرداند. پس از افزودن تابع getSum به موضوع اصلی ، قطعه کد مانند زیر می شود./* * File Name: index.js * Description: This is the main thread */ const express = require("express"); const app = express(); const port = 3000; const getSum = (limit) => { let sum = 0; for (let i = 0; i < limit; i++) { sum += i; } return sum; }; app.get("/", (req, res) => { const result = getSum(1000); res.send(`Processed function getSum on main thread and result:${result}`); }); app.get("/seprate-thread", (req, res) => { res.send("Process function getSum on seprate thread."); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); });مرحله بعدی اضافه کردن همان عملکرد در یک رشته دیگر است ، و این می تواند به صورت زیر عمل کند.وارد کردن ماژول worker thread به رشته اصلی.const { Worker } = require("worker_threads");برای تعریف عملکرد getSum برای اجرای یک موضوع دیگر ، یک فایل دیگر ایجاد می کنیم، seprateThread.js.نمونه ای از ماژول worker thread ایجاد کرده و نام فایل را به پرونده تازه ایجاد شده ارائه دهید.const seprateThread = new Worker(__dirname + "/seprateThread.js");اجرای رشته جدیدseprateThread.on("message", (result) => { res.send(`Processed function getSum on seprate thread: ${result}`); });ارسال داده به رشته جدیدseprateThread.postMessage(1000);در آخر، رشته اصلی مانند قطعه کد زیر خواهد بود./* * File Name: index.js * Description: This is the main thread */ const express = require("express"); const { Worker } = require("worker_threads"); const app = express(); const port = 3000; const getSum = (limit) => { let sum = 0; for (let i = 0; i < limit; i++) { sum += i; } return sum; }; app.get("/", (req, res) => { const result = getSum(1000); res.send(`Processed function getSum on main thread and result: ${result}`); }); app.get("/seprate-thread", (req, res) => { const seprateThread = new Worker(__dirname + "/seprateThread.js"); seprateThread.on("message", (result) => { res.send(`Processed function getSum on seprate thread: ${result}`); }); seprateThread.postMessage(1000); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); });بنابراین یک رشته جدید از رشته اصلی ایجاد می شود. اجازه دهید تابع getSum را بر روی موضوع تازه ایجاد شده قرار دهیم ، بنابراین این عملکرد را در فایل seprateThread.js تعریف می کنیم. پس از تعریف ، رشته جدید قرار است نتیجه را به رشته اصلی ارسال کند. کد زیر را بررسی کنید./* * File Name: seprateThread.js * Description: This is another thread */ const { parentPort } = require("worker_threads"); const getSum = (limit) => { let sum = 0; for (let i = 0; i < limit; i++) { sum += i; } return sum; }; parentPort.on("message", (limit) => { const result = getSum(limit); parentPort.postMessage(result); });در مثال بالا می توانید عملکرد () seprateThread.postMessage را که توسط رشته اصلی برای برقراری ارتباط با موضوع فرزند استفاده شده است مشاهده کنید. به همین ترتیب ، والد ()Port.postMessage که توسط موضوع فرزند برای برقراری ارتباط با موضوع اصلی استفاده می شود. شکل زیر ارتباط بین فرزند و نخ اصلی را نشان می دهد.ویژگی هاهر رشته دارای موتورهای V8 جداگانه است.رشته های فرزند می توانند با یکدیگر ارتباط برقرار کنند.رشته های فرزند می توانند همان حافظه را داشته باشند.هنگام شروع رشته جدید می توان مقدار اولیه را به عنوان یک گزینه منتقل کرد.نتیجه گیریتلاش من برای ارائه این مقاله دادن ایده ای ساده جهت راه اندازی multithreading در Node.js است تا شما با آن آشنا شوید و بتوانید در پروژه های بزرگتر از آن استفاده کنید.

اعتبار سنجی رمز عبور با عبارت منظم - Password validation with regex

مسعود زرجانی — Fri, 12 Feb 2021 12:20:54 +0330

REGEXمعرفیحتما تا به حال با این موضوع مواجه شدید که بخواید برای صفحه ثبت نام کاربر یا ورود کاربر رمز عبورشون رو بررسی کنید و ببینید که اصلا رمز عبور حداقل نیاز ها مثل حروف و عدد همزمان درش به کار رفته یا نه که البته این بررسی هم سمت کلاینت و هم سمت سرور باید انجام بشه تا اعتبار به تایید برسه. برای انجام این کار روش های مختلف هست مثلا بررسی کاراکتر ها و گذاشتن شرط های مختلف یا استفاده از پیکج های آماده یا ارسال به وب سایت هایی که خدمات اعتبار سنجی رو بهتون میدن ولی یکی از ساده ترین روش هایی که من بهتون معرفی میکنم استفاده از کلمات با قاعده است.REGEXبرای بررسی صحت و اعتبار سنجی رمز عبور باید رشته ورودی که دارید رو با رشته زیر مقایسه کنید و ببینید آیا با هم منطبق هستند یا نه.^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})کد بالا رو می تونید به راحتی در هر زبان برنامه نویسی استفاده کنید.توضیحات تکمیلی(?=.*[a-z])این بخش برای تشخیص حروف کوچک در عبارت اصلی است.(?=.*[A-Z])برای تشخصی حروف بزرگ هم به این شکل مشخص میکنیم.(?=.*[0-9])بخش سوم تشخیص اعداد در عبارت است.(?=.*[!@#\$%\^&\*])تشخیص کاراکتر های خاص.(?=.{8,})با این کد آخر هم می تونیم حداقل کاراکتر های ورودی رو مشخص کنیم.نکته 1: می تونیم رشته تشخیص حداقل کاراکتر ها رو از Regex حذف کنیم.نکته 2: می تونیم رشته های اعتبار سنجی دیگری هم به کد اضافه کنیم.مثالبرای مشاهده نمونه خروجی و بررسی عبارت می تونید از لینک زیر استفاده کنید.Example regexمن چند نمونه از زبان هایی رو که این کد رو میتونید داخلش قرار بدید و بررسی کنید براتون میزارمPHP

تغییرات جدید Bootstrap 5

مسعود زرجانی — Thu, 02 Jul 2020 13:19:45 +0430

به گفته توسعه دهنده های خود بوتسترپ قرار است این نسخه در شش ماهه دوم سال ارائه گردد.لیستی از تغییرات نسخه جدید که برای طراح ها و افرادی که با بوتسترپ سر و کار دارند واقعا جذاب است را در ادامه می بینیم1- اولین و ساده ترین تغییر این نسخه تغییر لوگوی برنامه است.تغییر لوگو bootstrap2- حذف کتابخانه jQuery :در حالی که Bootstrap بیش از 8 سال است که از jQuery استفاده می کند ، jQuery به یک چارچوب کاملاً بزرگ تبدیل شده است و وب سایت های بسیاری از آن استفاده می کنند. ولی با توجه به اینکه بعضی از وب سایت ها فقط از خود بوتسترپ استفاده می کنند و نیاز به استفاده از کتابخانه jQuery ندارند و همچنین در هر بار لود صفحه این کتابخانه نسبتا حجیم لود می شود تصمیم به حذف این کتابخانه گرفته اند.یکی دیگر از دلایل حذف این کتابخانه استفاده از چهارچوب های جدید جاوااسکریپتی مانند vuejs , angular , react است، jQuery محبوبیت خود را از دست داده است زیرا اکثر این چارچوب های مدرن از طریق DOM مجازی کار می کنند که منجر به عملکرد بسیار سریعتری می شود.3- جایگزینی کتابخانه Vanillaاطلاعات زیادی ازش ندارم اما میدونم یک کتابخانه بسیار کم حجم و سبک است و همان امکانات اصلی jQuery را در اختیار توسعه دهنده قرار می دهد.4- فونت رسپانسیوبا این موتور تغییر اندازه فونت به راحتی و بدون نگرانی می توانید فونت خود را برای صفحات و نمایشگر های مختلف تنظیم نمایید. (: واقعا امکان جذابی است :)5- حذف پشتیبانی از اینترنت اکسپلورر 10 و 116- تغییر واحد اندازه گیری صفحهیکی دیگر از تغییرات جذاب استفاده از سیستم rem به جای px است که بر اساس هر نمایشگر ابعاد به همان نسبت تغییر میابد نه بر اساس px که باید ابعاد دقیق داده میشد. سیستم (rem (root em به معنای برابر با مقدار محاسبه شده اندازه فونت در عنصر ریشه است. به عنوان مثال 1rem برابر با تقریبا 16px می باشد.7- حذف کارت هابا توجه به سیستم جدید گرید بندی، کارت ها حذف شدند.8- بهبود عملکرد Navbarتغییرات روی سیستم قدیمی و حذف بخش های غیر ضروری در نسخه 49- سفارشی سازی آیکن های SVG10- جایگزینی HUGO به جای Jekyll11- بروزرسانی برخی از کلاس هاجهت اطلاع از آخرین اخبار دنیای برنامه نویسی ما رو در اینستاگرام فالو کنید. https://www.instagram.com/dotenv.ir/منبع: https://designmodo.com/bootstrap-5/

استفاده از QR Code به جای لینک کوتاه در وب سایت (Laravel)

مسعود زرجانی — Sat, 15 Feb 2020 14:22:18 +0330

Laravel and QR Codeسلام دوستان امیدوارم حالتون خوب باشه و حس یادگیری داشته باشید! :)خوب بریم سراغ آموزش.من برای ارائه url یک صفحه چند راه کار دارم که با هم بررسی می کنیم.نمایش کل آدرس (بدترین حالت)نمایش لینک کوتاه (حالت خوب)نمایش کد QR (به نظر من بهترین حالت)خوب حالا میخوایم حالت سوم یعنی QR Code رو بررسی کنیم. نصب پکیجبرای اینکار اول از همه پکیج زیر رو نصب کنید. https://github.com/SimpleSoftwareIO/simple-qrcode برای نصب هم دستور زیر رو بزنید:composer require simplesoftwareio/simple-qrcodeاگر هم از نسخه 5.4 و قدیمی تر استفاده می کنید موارد زیر رو انجام بدید:متن SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class در مسیر app\config و در بخش Provider کپی نمایید.همچنین متن 'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class در مسیر app\config و در بخش aliases کپی نمایید.خوب تا اینجای کار مراحل نصب پکیج انجام شد حالا میریم تا استفاده ازش رو داشته باشیم.استفاده از پکیجبرای استفاده ازش هم کار سختی رو نداریم برید تو بخش controller مربوطتون که میخواین نمایش بدید اونجا دستور زیر رو وارد نمایید.public static function QRCode($url) { return SimpleSoftwareIO\QrCode\Facades\QrCode::size(200)->generate(url($url)); }به همین راحتی آماده شد فقط کافیه فراخوانی کنید تابع رو و url کامل وب سایت و یا کوتاه شدش رو به عنوان پارامتر ورودی ارسال کنید. بعد هم به عنوان یک متغییر به view ارسال کنید.نمایش خروجیبرای نمایش در blade هم کافیه دستور زیر رو استفاده کنید تا نمایش QR انجام شود.{!! $qrCode !!}خوب کار انجام شد و شما به راحتی می تونید این لینک رو نمایش بدهید و دیگران هم به راحتی کپی کنند.امیدوارم این آموزش کوتاه به کارتون بیاد و ازش استفاده کنید.جهت خوندن مطالب جدیدترم و کامل ترم به وبسایت زیر هم سر بزنید.DotEnv

روابط پلی مورفیک (چند ریختی یا چند دگردیسی) در لاراول

مسعود زرجانی — Sat, 27 Apr 2019 20:46:07 +0430

یک رابطه پلی مورفی اجازه می دهد تا مدل هدف به بیش از یک نوع مدل با استفاده از یک ارتباط واحد متصل شود.یک به یکساختار جدولیک رابطه پلی مورفیک شبیه به رابطه یک به یک ساده در روابط لاراول می باشد. با این حال می تواند یک مدل را به مدل های دیگر ربط دهد و متصل شود. به عنوان مثال در یک بلاگ، جدول پست و جدول کاربران می توانند به جدول عکس ها مرتبط شوند و دسترسی داشته باشند.یعنی می تواند یک تصویر را به یک پست و یا یک کاربر متصل نماییم. ابتدا ساختار جدول را بررسی می نماییم: posts id - integer name - string users id - integer name - string images id - integer url - string imageable_id - integer imageable_type - stringبه ستون های imageable_id و imageable_type در جدول تصاویر توجه نمایید. ستون imageable_id مقدار ID مربوط به پست یا کاربر را در بر می گیرد، در حالی که ستون imageable_type حاوی نام کلاس مدل والد (parent) است. ستون imageable_type توسط Eloquent مورد استفاده قرار می گیرد تا تعیین شود که کدام نوع از مدل والد در هنگام دسترسی به روابط تصویر بازگشت می کند.ساختار مدلحال بیایید تعاریف مربوط به مدل برای ساختن این رابطه را بررسی نماییم: morphTo(); } } class Post extends Model { /** * Get the post's image. */ public function image() { return $this->morphOne('App\Image', 'imageable'); } } class User extends Model { /** * Get the user's image. */ public function image() { return $this->morphOne('App\Image', 'imageable'); } }بازیابی رابطههنگامی که جدول پایگاه داده ها و مدل های شما تعریف می شود، می توانید به روابط خود از طریق مدل های خود دسترسی پیدا کنید. به عنوان مثال، برای بازیابی تصویر برای یک پست، می توانیم از ویژگی های پویای تصویر استفاده کنیم: $post = App\Post::find(1); $image = $post->image;برای دسترسی عکس عمل بالا یعنی بدست آوردن پست مربوط به عکس که با هم در رابطه می باشند از روش زیر استفاده می نماییم: $image = App\Image::find(1); $imageable = $image->imageable; ارتباط یک به چندساختار جدولبا توجه به موارد بالا برای ارتباط یک به چند ابتدا از ساختار جدول زیر استفاده خواهیم کرد: posts id - integer title - string body - text videos id - integer title - string url - string comments id - integer body - text commentable_id - integer commentable_type - string ساختار مدلمدل خود را نیز به صورت زیر ایجاد می نماییم: morphTo(); } } class Post extends Model { /** * Get all of the post's comments. */ public function comments() { return $this->morphMany('App\Comment', 'commentable'); } } class Video extends Model { /** * Get all of the video's comments. */ public function comments() { return $this->morphMany('App\Comment', 'commentable'); } }بازیابی رابطهبه روش زیر نیز از رابطه برای بدست آوردن داده ها استفاده می نماییم: $post = App\Post::find(1); foreach ($post->comments as $comment) { // }و برای بدست آوردن داده ها برعکس راه بالا یعنی رسیدن به پست های مربوط به نظرات از روش زیر پیروی می کنیم: $comment = App\Comment::find(1); $commentable = $comment->commentable; امیدوارم آموزش به کار شما بیاید در پروژه های عظیم به شدت حجم کد نویسی را کم میکند و سرعت کد نویسی افزایش و کد های شما را بهینه تر می کند.در مرحله بعد ذخیره سازی اطلاعات را با همین ارتباطات آموزش خواهم داد.

نوشتن اولین api با فریم ورک express در Node.js به همراه آموزش mongodb با متد mvc قسمت سوم

مسعود زرجانی — Tue, 16 Oct 2018 13:12:18 +0330

مشاهده قسمت اولمشاهده قسمت دومدر قسمت دوم با مسیریابی آشنا شدیم و توانستیم تغییر مسیرها و خروجی ها متفاوت آن ها را ببینیم.در این قسمت با نحوه اتصال به پایگاه داده mongodb آشنا می شویم. با نحوه نصب پکیج mongodb به نام mongoose در قسمت اول آشنا شدیم و جهت مشاهده بر روی مشاهده قسمت اول در بالای صفحه مراجعه نمایید.برای اتصال به دیتابیس ابتدا نیاز داریم یک فایل config در برنامه ایجاد کنیم.ابتدای یک فایل config در پوشه ای با همین نام ایجاد میکنیم تا اطلاعات مربوط به اتصال به دیتابیس را از قبیل username و password را در آن قرار دهیم.ساخت فایل config.js در پوشه configو در آن یک مقدار const ایجاد می کنیم تا اطلاعات دیتابیس را در آن نگهداریم و در هرجای نیاز بود به راحتی آن را فراخوانی کنیم.const config = { db: { host: 'localhost', port: 27017, name: 'blog' } }; module.exports = config;اطلاعات مربوط به اتصال به دیتابیسسپس می بایست یک فایل دیگر به نام db.js جهت اتصال به دیتابیس در همان پوشه config ایجاد کنیم.ایجاد فایل db.js جهت اتصال به دیتابیس به پوشه configبرای اتصال به دیتابس ابتدا نیاز است تا دو فایل را به برنامه اضافه نماییم. const mongoose = 'mongoose'; const config = './config';بعد از اضافه شدن دستورات به برنامه باید دو مقدار const جهت نگهداری داده های مرتبط با اتصال ایجاد کنیم پس کد های زیر را بعد از دستورات افزودن به برنامه اضافه می کنیم.const { db: { host, port, name } } = config; const connectionString = `mongodb://${host}:${port}/${name}`;خوب در const اول اطلاعات مربوط به اتصال به دیتابیس را در آن نگه می داریم و در const دوم هم مقدار متنی مربوط به آدرس connection را نگه می داریم.با دستورات بعدی هم می توانیم با mongodb ارتباط را برقرا کنیم.mongoose.connect(connectionString, (err) => { if(!err) console.log('MongoDB Connection Succeeded'); else console.log('Error in DB Connection: '.JSON.stringify(err, undefined, 2)); }); export default mongoose;و در نهایت کد هایی که نوشتیم همانند زیر خواهد شد.دستورات مربوط به اتصال دیتابیسبرای شناساندن و ارتباط نهایی با دیتابیس باید فایل db.js را به برنامه اصلی اضافه کنیم و از آن استفاده کنیم.const { mongoose } = "./config/db";حالا می توانیم با دستور npm run start برنامه را راه اندازی کنیم. و اتصال را بررسی کنیم.خوب حالا باید در برنامه اصلی پوشه ای به نام models ایجاد کنیم تا بعد از ارتباط به دیتابیس بتوانیم با جداول داخل دیتابیس در ارتباط باشیم و عملیات CRUD را انجام دهیم.در داخل پوشه یک فایل به نام posts.js ایجاد نمایید.ایجاد فایل posts.js در modelsدر این فایل دستورات زیر را قرار دهید تا دسترسی به جدول posts را داشته باشید.const mongoose = require('mongoose'); const Schema = mongoose.Schema; var blogSchema = new Schema({ title: String, author: String, body: String, comments: [{ body: String, date: Date }], date: { type: Date, default: Date.now }, hidden: Boolean, meta: { votes: Number, favs: Number } }); module.exports = blogSchema;و در نهایت خروجی زیر را خواهید داشت.در قسمت بعدی آموزش با ایجاد controllers آشنا خواهیم شد و میتوانیم نحوه ارتباط دیتا بیس با controller را ببینیم.در صورت داشتن هرگونه سوال در ادامه مطلب پاسخگو می باشم.با تشکر ادامه دارد...

نوشتن اولین api با فریم ورک express در Node.js به همراه آموزش mongodb با متد mvc قسمت دوم

مسعود زرجانی — Wed, 26 Sep 2018 08:05:31 +0330

مشاهده قسمت اولدر قسمت اول به بررسی نحوه نصب و راه اندازی node.js و ... پرداختیم همچنین یاد گرفتیم چطور سرور را راه اندازی و آماده به کار کنیم.در این قسمت با routing یا مسیریابی آشنا می شویم.مسیریابی: همانطور که اسمش پیداست کار آن مشخص کردن مسیرهایی برای پاسخ به درخواست های کلاینت می باشد. کلاینت با استفاده از درخواست های HTTP از سرور درخواست پاسخ های مورد نیاز را می کند. و سرور برحسب نوع درخواست و پارامترهای ارسالی پاسخ متناسب با آن را می دهد.برای اولین کار جهت مسیریابی ابتدا یک پوشه در محل قرار گیری فایل اصلی برنامه ایجاد میکنیم به نام routes که در این مسیر فایل های مسیریابی خود را قرار می دهیم.حالا در داخل پوشه routes یک فایل به نام router.js ایجاد می کنیم تا مسیریابی را در این فایل آغاز کنیم.ایجاد فایل js جهت مسیریابیدستورات زیر را در این فایل بنویسید .const express = require('express'); const router = express.Router(); router.get('/', function (req, res) { res.send('hello world') }); module.exports = router;در دستورات بالا ابتدا ما express را فراخوانی میکنیم سپس مسیریاب express را در یک ثابت میگذاریم، بعد از آن نوع دستور مورد درخواست خود را که در اینجا get می باشد را وارد نموده و پارامترهای خود را در متد get قرار میدهیم. اولین پارامتر درخواستی که قرار است کلاینت بدهد. و دومی پاسخی است که ما به کلاینت میدهیم. در پایان نیز با دستور module.exports ما خروجی و مقدار برگشتی فایل را مشخص میکنیم.حالا به فایل اصلی برنامه برمیگردیم، فایل index.js را باز میکنیم و فایل مسیریابی که ایجاد کرده ایم را به فایل اصلی برنامه با دستورات زیر متصل میکنیم.const indexRouter = require('./routes/routes'); app.use('/', indexRouter);با دستور app.use ما مقادیر جهت استفاده در سرور را با متد use به express معرفی میکنیم.حالا سرور را با استفاده از دستور npm run start آن را اجرا میکنیم. مرورگر را باز میکنیم و به آدرس http://localhost:3000 میرویم تا خروجی خود را ببینیم.نمایش خروجی در مرورگرهمانطور که میبینید خروجی را ما در مسیر مورد درخواست توانستیم ببینیم یک مثال دیگری میزنم تا کاملا با آن آشنا شوید. کد زیر را به router.js اضافه کنید بعد از دستور router.getrouter.get('/about', function (req, res) { res.send('About me') });حالا اگر مرور گر را مجدد باز کنیم و به مسیر http://localhost:3000/about مشاهده خواهید کرد که مقدار About me را به ما نشان می دهد.استفاده از مسیرهای دیگرخوب تا اینجا با مسیریابی در express آشنا شدیم امیدوارم آموزش خوبی باشه و ازش استفاده کنید.با لایک کردن درصورتی که براتون مطلبم مفید بوده حمایتم کنید تا مطالب بیشتر و مقید تری قرار بدهم همچنین لطفا سوالات خودتون رو در بخش نظرات بپرسید تا پاسخ بدم با تشکر.ادامه دارد...

نوشتن اولین api با فریم ورک express در Node.js به همراه آموزش mongodb با متد mvc قسمت اول

مسعود زرجانی — Mon, 24 Sep 2018 09:01:49 +0330

برای شروع کار و نوشتن کدها باید موارد زیر را نصب کنیم تا کد نویسی node.js را آغاز کنیم.نصب Visual Studio Code: برای نصب کافیست از این لینک برنامه را دانلود کنیم و نصب را کامل انجام بدهیم.ادیتور Vscode یکی از بهترین ادیتور ها برای نوشتن کد های جاوا اسکریپتی که من به شما پیشنهاد می دم، هم اینکه افزونه های فراوانی داره و کار رو راحت می کنه براتون و هم اینکه بسیار سبک است و مهمتر از همه این موارد این است که Open Source هست.نصب node.js: برای نصب اول به این لینک رفته و آخرین نسخه را دریافت و نصب می نماییم.نصب mongodb: به سایت mongodb.com میرویم و طبق مراحل تصویری زیر کار را برای دانلود دیتابیس ادامه میدهیم.وارد سایت شده و بر روی دکمه Get MongoDB کلیک کنید.در مرحله بعد از بخش Tools گزینه Compass را انتخاب کنید تا GUI دیتابیس را نصب کنیم.حالا با انتخاب نسخه و مورد نیاز جهت دانلود و سیستم عاملی که قرار است بر روی آن نصب شود عملیات دانلود را آغاز میکنیم.پس از دانلود مراحل نصب را از طریق داکیومنت خود mongodb پی میگیریم.نصب express: برای نصب اول باید ترمینال ادیتور را باز کنیم برای این کار در VS Code کلید های ترکیبی Ctrl + ` را می فشاریم و یا از منوی View گزینه Terminal را انتخاب میکنیم و سپس با دستورات CMD به پوشه مورد نیاز جهت نصب بروید و یا ادیتور را در مسیری که پروژه قرار است فعال شود باز کنید. در ترمینال می بایست فایل package.json را ایجاد کنیم برای این کار و برای اینکه سریعتر کار را به اتمام برسانیم از دستور زیر استفاده می کنیم.npm init --y ornpm init --fالبته اگر از دستور npm init به تنهایی استفاده نماییم حتما می بایست به سوالاتی که از ما میپرسد نظیر نام پروژه، نسخه پروژه، نام نویسنده و ... پاسخ دهیم. بعد از این که نصب رو انجام دادیم با وارد کردن دستور زیر در ترمینال express را نصب میکنیم.npm install expressالبته در زمانی که شما قصد نصب یک پکیج رو دارید می توانید به جای استفاده از کلمه install از مخفف آن یعنی i استفاده کنیدنصب middleware: برای تکمیل کار و همچنین استفاده بهتر از express ما نیاز داریم یکسری پکیج های اضافه نیز نصب کنید برای این منظور دستور زیر را در ترمینال وارد کنید.npm install mongoose nodemon body-parser cors شما با نصب پکیج mongoose امکان اتصال node.js را با دیتابیس mongodb را دارید همچنین برای اجرای بلادرنگ کد بر روی سرور (با هر تغییر در کد شما بلافاصله می توانید خروجی را مشاهده کنید) از nodemon استفاده میکنیم دو مورد دیگر هم در ادامه توضیح خواهم داد.اگر فایل package.json را باز کنید مشاهده خواهید کرد در بخش dependencies مواردی که در بالا نصب کرده ایم در این بخش قرار گرفته است.تکمیل نصب dependenciesبرا نوشتن کد ها باید یک فایل جدید با نام index.js ایجاد کنید و در داخل آن کد های زیر را وارد نمایید.برای تست نصب و راه اندازی express کد زیر را ابتدا جهت معرفی express و راه اندازی آن اضافه میکنیم.const express = require('express');const app = express();بعد از افزودن کد بالا نیاز داریم تا سرور را راه اندازی و اجرا کنیم برای این کار با استفاده از دستور listen باید سرور را راه اندازی کنیم، کد زیر را در ادامه فایل index.js اضافه کنید.app.listen(3000 , () => { console.log(`Server running at Port 3000`) });حالا برای اجرا کافی است در ترمینال خود دستور nodemon index.js را وارد نمایید تا استارت سرور آغاز شود. به جای nodemon میتوانید از پیش فرض خود node.js یعنی node index.js استفاده کنید.پس از اجرا با دستور nodemon index.jsسرور ما شروع به کار کرد بر روی پورت 3000 ولی هنوز امکان مشاهده بر روی مرورگر را نداریم.نکته: میتوانیم برای استفاده راحت تر و سریع تر از nodemon کد زیر را در بخش scripts فایل package.json به جای test اضافه کنیم و با دستور npm run start سرور را راه اندازی کنیم."start": "nodemon index.js"همانند تصویر زیر:خروجی با استفاده از دستور npm run startادامه دارد...