نوشته های سیدکریم محمدی

خیلج پارس در نقشه Leaflet به کمک ServiceWorker

سیدکریم محمدی — Thu, 17 Feb 2022 01:47:07 +0330

یکی از مشکلات استفاده از نقشه‌های رایگان در وب‌اپلیکیشن‌های ایرانی، نمایش عبارت «خلیج عربی» به جای «خلیج پارس» هست و در پشت پرده نیز کش‌مکش بین برنامه‌نویس‌های ایرانی و عرب در این رابطه وجود داشته و گاهی اوقات جامعه برنامه‌نویس‌های ایرانی توانسته تیم پشتیبان سرویس میزبانی نقشه OpenStreetMap رو برای نمایش عبارت «خلیج پارس» یا «خلیج فارس» مجاب کنه؛ اگر چه به نظر نمی‌رسه جنگ بر سر نام این خلیج به این زودی‌ها به نفع ایران تموم بشه.به طور کلی، رفع چنین مشکلی فقط با استفاده از Tile Server اختصاصی یا سرویس‌های نقشه غیررایگان مثل پارسی‌جو یا نشان ممکن هست!اخیراً در وب‌اپلیکیشن جدید جاجیگا به طور مستقیم با این چالش روبرو شدم و در نهایت تونستم به روش جدیدی برای جایگزینی عبارت «خیلج عربی» با «خلیج پارس» دست پیدا کنم.در این روش، از سرویس وُرکر (ServiceWorker) به عنوان یک پروکسی برای جایگزینی تایل(Tile)های محدوده خلیج پارس با تصاویر یا تایل‌های ویرایش‌شده استفاده کردم که در ادامه به تشریح این روش خواهم پرداخت.پیش‌نیازدر قدم اول، وب‌اپلیکیشن شما می‌بایست از سرویس وُرکر برخوردار بوده و امکان کش فایل‌های استاتیک توسط آن فراهم شده باشه.شخصی‌سازی تایل‌هاتمامی تایل‌های حاوی عبارت «خلیج عربی» یا بخشی از آن رو دانلود نموده و با استفاده از ادیتور تصویری همچون فتوشاپ به ویرایش و جایگزینی تک تک تایل‌ها می‌پردازیم. دقت کنین که برای کلیه Zoom Levelها تایل‌های مربوطه را در نظر بگیرین.نمونه تایل مربوط به «خلیج عربی» و یافتن آدرسفهرست تایل‌ها جهت ویرایش:https://b.tile.openstreetmap.org/6/41/26.png https://a.tile.openstreetmap.org/6/40/26.png https://a.tile.openstreetmap.org/5/20/13.png https://a.tile.openstreetmap.org/7/82/53.png https://b.tile.openstreetmap.org/8/164/107.pngدر اینجا می‌بینیم که آدرس هر تایل دارای ساختار مشخصی هست:https://[abc].tile.openstreetmap.org/{z}/{x}/{y}.pngدر ساختار بالا متغیرها عبارت‌اند از (جزئیات بیشتر را در ویکی‌پدیا مطالعه کنید):پارامتر abc: نام تایل سرور (یکی از حروف c ،b ،a)پارامتر z: سطح بزرگ‌نمایی (Zoom Level)پارامتر x: مؤلفه مکانی افقیپارامتر y: مؤلفه مکانی عمودیبا توجه به این ساختار می‌خواهیم برای تصاویر تایل‌های ویرایش‌شده filename مشخصی در نظر بگیریم تا تناظری بین آدرس اصلی تایل و آدرس تصویر ویرایش‌شده روی سایتمون ایجاد بشه.یک تناظر ساده به صورت زیر خواهد بود:https://www.jajiga.com/static/map/[abc]-{z}-{x}-{y}.pngبا این تناظر، تصاویر تایل در پوشه استاتیک پروژه من، به صورت زیر خواهد بود:/static/map/b-6-41-26.png /static/map/a-6-40-26.png /static/map/a-5-20-13.png /static/map/a-7-82-53.png /static/map/b-8-164-107.pngپروکسی کردن تایل‌ها در ServiceWorkerدر مرحله قبل تایل‌های مربوط به ناحیه خلیج عربی رو شخصی‌سازی و در آخر با استفاده از یک قاعده مشخص، اون‌ها رو نامگذاری کردیم. از اینجا به بعد دست به کد می‌شیم و در سرویس وُرکر اپ‌مون امکانی فراهم می‌کنیم تا درخواست‌های مربوط به تصاویر تایل Leaflet (که از SW می‌گذرن) به سمت تصاویر شخصی‌سازی‌شده موجود هدایت بشن.قطعه کد زیر رو در نظر بگیرین:const CACHE_KEY = 'example-v1'; const PRECACHE_URLS = [ '/offline.html', '/favicon.ico', //... ]; self.addEventListener('install', (event) => { event.waitUntil( caches .open(CACHE_KEY) .then((cache) => cache.addAll(PRECACHE_URLS)) .then(self.skipWaiting()), ); }); const fetchFromCache = async (request) => { const latestCache = await caches.open(CACHE_KEY); if (!latestCache) return null; const response = await latestCache.match(request); return response; }; const onFetch = async (event) => { const url = new URL(event.request.url); if (PRECACHE_URLS.includes(url.pathname)) { return event.respondWith( fetchFromCache(event.request) .then((response) => { if (response) { return response; } return fetch(event.request); }) .catch((error) => { console.log(error); }), ); } return null; }; self.addEventListener('fetch', onFetch);همانطور که می‌دونید وقتی وب اپلیکیشن ما از Service Worker برخوردار میشه، همه درخواست‌های HTTP از این سرویس عبور می‌کنن و می‌تونیم به هر نحوی به این درخواست‌ها پاسخ بدیم. قطعه کد بالا، یک Service Worker ساده رو برای پیش‌کَش‌کردن (Precache) برخی فایل‌های استاتیک پروژه‌مون ایجاد می‌کنه و در ادامه قصد داریم کد رو به گونه‌ای تغییر بدیم که SW، تصاویر تایل شخصی‌سازی‌شده رو ابتدا Precache کنه و بعد هنگام دریافت درخواست‌های HTTP مربوط به تایل نقشه، فایل تصویر متناظر رو بارگذاری کنه.پس ابتدا، تایل‌های جدید رو به فهرست فایل‌های قابل‌کَش اضافه می‌کنیم:const PRECACHE_URLS = [ '/offline.html', '/favicon.ico', //... '/static/map/b-6-41-26.png', '/static/map/a-6-40-26.png', '/static/map/a-5-20-13.png', '/static/map/a-7-82-53.png', '/static/map/b-8-164-107.png', //... ];در قدم بعدی، تابع onFetch رو به صورت زیر تغییر می‌دیم:const onFetch = async (event) => { const url = new URL(event.request.url); // Proxy leaflet map tiles if (url.origin.includes('openstreetmap')) { const response = getPersianGulfTile(url.href); if (response) { return event.respondWith(response); } } //... return null; };در قطعه کد بالا، ابتدا درخواست‌های مربوط به تایل نقشه رو تشخیص دادم (url چنین درخواست‌های حاوی عبارت openstreetmap هست) و بعد تابعی برای ایجاد پاسخ مناسب در نظر گرفتم.ورودی این تابع همون آدرس تایل اصلی و خروجی این تابع قراره همون تایل‌های ویرایش‌شده باشه.حالا به تعریف تابع getPersianGulfTile می‌پردازیم:const getPersianGulfTile = (tileHref) => { const tileURL = new URL(tileHref); const localTileUrl = '/static/map/' + [tileURL.host.split('.')[0], ...tileURL.pathname.slice(1).split('/')].join('-'); if (PRECACHE_URLS.includes(localTileUrl)) { return fetchFromCache(new Request(localTileUrl)); } };همانطور که می‌بینید، در خط 3، مقدار url جدید بر اساس الگوی تناظری که مشخص کرده بودیم، تعریف شده. در ادامه، تصویر تایل موجود در Cache به عنوان تایل جدید برمی‌گرده.حالا نگاهی به کد نهایی بندازیم:const CACHE_KEY = 'example-v1'; const PRECACHE_URLS = [ '/offline.html', '/favicon.ico', //... '/static/map/b-6-41-26.png', '/static/map/a-6-40-26.png', '/static/map/a-5-20-13.png', '/static/map/a-7-82-53.png', '/static/map/b-8-164-107.png', //... ]; self.addEventListener('install', (event) => { event.waitUntil( caches .open(CACHE_KEY) .then((cache) => cache.addAll(PRECACHE_URLS)) .then(self.skipWaiting()), ); }); const fetchFromCache = async (request) => { const latestCache = await caches.open(CACHE_KEY); if (!latestCache) return null; const response = await latestCache.match(request); return response; }; const getPersianGulfTile = (tileHref) => { const tileURL = new URL(tileHref); const localTileUrl = '/static/map/' + [tileURL.host.split('.')[0], ...tileURL.pathname.slice(1).split('/')].join('-'); if (PRECACHE_URLS.includes(localTileUrl)) { return fetchFromCache(new Request(localTileUrl)); } }; const onFetch = async (event) => { const url = new URL(event.request.url); // Proxy leaflet map tiles if (url.origin.includes('openstreetmap')) { const response = getPersianGulfTile(url.href); if (response) { return event.respondWith(response); } } if (PRECACHE_URLS.includes(url.pathname)) { return event.respondWith( fetchFromCache(event.request) .then((response) => { if (response) { return response; } return fetch(event.request); }) .catch((error) => { console.log(error); }), ); } return null; }; self.addEventListener('fetch', onFetch);خیلی جالبه :) به یاری Service Worker تونستیم تصاویر تایل «خلیج عربی» رو با تایل‌های جدید «خلیج پارس» جایگزین کنیم یا به عبارتی تصاویر نقشه رو پروکسی کردیم.شاد باشید***************************خلیج پارس، نامت پایدار ...ای همیشه نیلگون، ای خلیج پارس، نام نامی‌ات همواره جاودانه استنام نامی‌ات همواره بر زبانِ موج، جاودان‌ترین سرود عاشقانه است

آموزش بارگذاری صفحه فرود لندین (Landin) روی وردپرس

سیدکریم محمدی — Sat, 14 Aug 2021 04:20:19 +0430

احتمالاً در خصوص استارتاپ لندین (Landin) شندید؛ یه «سرویس ساده برای ساخت لندینگ پیج بدون دانش فنی و هدر رفت زمان». شخصاً خیلی با سرویس‌شون حال کردم و این مطلب رو برای کاربرانی می‌نویسم که لندینگ پیج سایت وردپرسی خودشون رو با سرویس لندین طراحی کردن و قصد دارن این لندینگ پیج رو روی دامنه سایت‌شون داشته باشن.من در اولین تجربه‌ام با لندین، لندینگ پیج طراحی‌شده برای سایت هت‌مت (Hatmat) که در زمینه «فروش ویژه چای» بوده رو به وردپرس متصل کردم (اینجا). در ادامه با من همراه باشید.مراحل کاربعد از طراحی لندینگ پیج در سرویس لندین، فایل html رو دریافت کنید.در روت وردپرس (داخل public_html) یه پوشه به نام landings ایجاد کنید.در پوشه landings برای هر لندینگ/کمپین یه پوشه جدید ایجاد کنید؛ مثلاً tea. سپس فایل html رو به این پوشه انتقال بدید (پس مثلا خواهیم داشت public_html/landings/tea/index.html )فایل htaccess. موجود در روت وردپرس رو باز کرده و کد زیر رو در انتهاش قرار بدید: https://gist.github.com/skmohammadi/773c288d95e52ea891eeaadf2012792f خب با انجام این مراحل، لندینگ پیج شما روی وردپرس به اصلاح سِرو (serve) میشه و از طریق آدرس زیر در دسترس خواهد بود:https://[YOURDOMAIN]/landings/[LANDING-DIR]/در آدرس فوق، به جای [LANDING-DIR] باید نام فولدر مربوط به لندینگ پیجتون رو قرار بدید (در مثال من : tea).شاد و پیروز باشید :)

جستجو در عنوان یا متا نوشته‌های وردپرس با WP_Query

سیدکریم محمدی — Mon, 02 Aug 2021 02:04:43 +0430

یکی از مشکلات یا محدودیت‌های کلاس WP_Query این هست که امکان جستجوی فصلی غیروابسته (منفصل یا disjunctional) بین عنوان (متن، ...) و یک متا دلخواه وجود نداره.با یک مثال توضیح میدم.فرض کنید قصد داریم روی محصولاتی که عنوانشون یا متافیلد brand شامل کلمه «سامسونگ» هست کوئری کنیم. به طور طبیعی احتمالا این قطعه کد رو می‌نویسیم:$args = array( 'post_type' => 'product', 'post_status' => 'publish', 's' => 'سامسونگ', 'meta_query' => array( array( 'key' => 'brand', 'value' => 'سامسونگ', 'compare' => 'LIKE', ), ), ); $query = new WP_Query($args);مشکل قطعه کد بالا اینه که وقتی پارامتر s و یک meta_query رو به عنوان ورودی‌های WP_Query در نظر بگیریم، وردپرس به طور پیشفرض عملگر AND رو برای کوئری در نظر میگیره و عملاً فقط محصولاتی که هم عنوانشون و هم مِتاشون شامل «سامسونگ» هست جستجو میشه.برای رفع این مشکل راهکار جالبی وجود داره. در این روش به جای پارامتر s، از پارامتر meta_or_title_ استفاده می‌کنیم و با استفاده از هوک pre_get_posts در قسمت WHERE گزاره sql یه تغییر کوچک به شکل زیر ایجاد می‌کنیم:/// page.php $args = array( 'post_type' => 'product', 'post_status' => 'publish', '_meta_or_title' => 'سامسونگ', 'meta_query' => array( array( 'key' => 'brand', 'value' => 'سامسونگ', 'compare' => 'LIKE', ), ), ); $query = new WP_Query($args); /// /// functions.php /// add_action( 'pre_get_posts', function( $q ) { if ( $title = $q->get( '_meta_or_title' ) ) { add_filter( 'get_meta_sql', function( $sql ) use ( $title ) { global $wpdb; // Only run once: static $nr = 0; if( 0 != $nr++ ) return $sql; // Modified WHERE $sql['where'] = sprintf( " AND ( %s OR %s ) ", $wpdb->prepare( "{$wpdb->posts}.post_title like '%%%s%%'", $title), mb_substr( $sql['where'], 5, mb_strlen( $sql['where'] ) ) ); return $sql; }); } });با این تغییر، عملگر OR بین دو شرط عنوان و متاکوئری قرار گرفته و نتیجه جستجو به شکل مطلوب خواهد بود.شاد باشید :)

کروم‌افزونه RTL Chat Support on YouTube منتشر شد

سیدکریم محمدی — Tue, 06 Apr 2021 15:14:15 +0430

سلام. چندی پیش در حال تماشای یک لایواستریم آموزشی فارسی بودم و متوجه شدم که محیط LTR پنجره چت در لایو استریم توتیوب باعث میشه پیام کاربران تماشاگر به درستی نمایش داده نشه و مدرس نتونه سوال‌ها رو درست و صحیح بخونه. به خصوص اگر لایواستریم در حوزه برنامه‌نویسی باشه :Dهمون لحظه به فکر افتادم تا با ایجاد یک کروم‌افزونه ساده، محیط چت رو از LTR به RTL تغییر بدم و خوشبختانه تلاشم نتیجه داد.حالت چپ‌به‌راست (LTR) پنجره چت در یوتیوبحالت راست‌به‌چپ (RTL)نصب کروم افزونه RTL Chat Support on YouTubeافزونه را از لینک زیر دانلود و نصب کنید:RTL Chat Support on YouTube - Chrome Extensionروی آیکون افزونه نصب شده در قسمت نوار ابزار کروم کلیک کرده و حالت RTL را روشن کنید.

ویرایش افزونه درگاه زرین‌پال برای Restrict Content Pro

سیدکریم محمدی — Wed, 24 Mar 2021 01:51:16 +0430

وقت بخیر. اگر با افزونه RCP یا همون Restrict Content Pro آشنایی قبلی داشته باشید، احتمالا برای ایجاد درگاه پرداخت، سراغ افزونه درگاه زرین‌پال برای Restrict Content Pro رفتید.در این صورت احتمالا متوجه ایراد اساسی این افزونه شدید. نه؟ الان میگم.این افزونه امکان قیمت‌گذاری تومان رو به افزونه RCP اضافه کرده و قیمت سطوح عضویت به تومان نمایش داده میشه؛ اوکی. ولی وقتی کاربر برای خرید سطح عضویت به درگاه زرین‌پال هدایت میشه، درگاه پرداخت مقدار ریالی قیمت رو به طور ناصحیح نشون میده.نمایش صحیح قیمت در سایتنمایش ناصحیح مبلغ قابل پرداخت در درگاه بانکیمشکل اینجاست که نویسنده این افزونه (آقا حنان) اون زمان (4 سال پیش) یادش میره مقدار قیمت رو قبل از ارسال به درگاه زرین‌پال، به ریال تبدیل کنه.نکته عجیب اینکه در تمام این چند سال به این نکته توجه نشده.بریم سراغ رفع این مشکل.این افزونه شامل فایلی به نام RCP_ZarinPal.php هست. در بدنه تابع ZarinPal_Request_By_HANNANStd بخشی از کد به صورت زیر بوده:if (!in_array($rcp_options['currency'], array( 'irt', 'IRT', 'تومان', __('تومان', 'rcp'), __('تومان', 'rcp_zarinpal'), ))) { $amount = $amount / 10; }که به صورت زیر تغییرش دادم:if (in_array($rcp_options['currency'], array( 'irt', 'IRT', 'تومان', __('تومان', 'rcp'), __('تومان', 'rcp_zarinpal'), ))) { $amount = intval($amount) * 10; }امیدوارم مفید واقع بشه :)

افزونه Syntax Highlighter برای ویرگول

سیدکریم محمدی — Sat, 16 Jan 2021 00:30:14 +0330

افزونه Syntax Highlighter برای ویرگولاز وقتی که با سرویس خوب ویرگول آشنا شدم و شروع به نوشتن کردم، همواره کمبودی که حس می‌کردم؛ نبود یه Syntax Highlighter پیش‌ساخته در ویرگول بود.اگر برنامه‌نویس هستید و قبلاً در ویرگول نوشتید، حتماً متوجه شدید که بلاک code در ویرگول خیلی ساده و ابتدایی هست و همچنین فارغ از ویژگی Highlighting و این برای خواننده‌ای که داره متن مقاله شما رو مطالعه می‌کنه ممکنه جذاب نباشه.کد بلاک ابتدای ویرگولمن مدت‌ها منتظر اقدامی از سوی ویرگول برای رفع این کمبود بودم ولی این اتفاق نیافتاد. اخیرا در حرکتی خودجوش، اقدام به ساخت یه کروم افزونه (اکستنشن/extension) برای اضافه‌کردن ویژگی Syntax Highlighting به کدبلاک ویرگول کردم و نتیجه این شد:کدبلاک ایجاد شده توسط Virgool Syntax Highlighterدر توسعه این افزونه، از کتابخانه HighlightJS استفاده کردم و علت این انتخاب امکان تشخیص خودکار زبان کد هست که خوشبختانه از دقت مناسبی هم برخورداره.با این تغییر، ویرگول بیشتر شبیه به Medium.com میشه؛ در نتیجه من و خیلی‌های دیگه رو برای نوشتن بیشتر پیرامون کدنویسی تشویق می‌کنه.پی‌نوشت:افزونه به تازگی در Chrome Web Store منتشر شده و از طریق این لینک قابل دریافت و نصب هست.افزونه به گونه‌ای طراحی شده که روی دامین‌های شخصی ویرگول هم قابل استفاده هست.این افزونه در حال حاضر نسخه ابتدایی هست و از هر گونه پیشنهاد برای بهتر و کامل‌تر کردن اون استقبال می‌کنم.

بهینه‌سازی سایت وردپرسی و خطای Content-Encoding در GTMetrix

سیدکریم محمدی — Sat, 07 Nov 2020 10:21:51 +0330

اگر در مسیر آنالیز وب‌سایت وردپرسی خودتون به وسیلۀ سرویس GTMetrix دچار مشکل شدید و این سرویس خطای Content-Encoding رو گزارش می‌کنه، با من همراه باشید.در جریان بهینه‌سازی وب‌سایت fitlady.ir، متوجه بروز اشکالی در آنالیز وب‌سایت توسط GTMetrix شدم و پس از بررسی‌های بسیار به یک راه‌حل عملی رسیدم.لازمه بدونید که در این سایت وردپرسی، من از WP Rocket برای بهینه‌سازی و از ابرآروان به عنوان CDN و همچنین از هاست میزبان‌فا برای میزبانی سایت استفاده کردم.اولین اقدام من جهت بررسی علت این مشکل، غیرفعال‌سازی افزونه WP Rocket بود که مشخص شد با غیرفعال‌سازی این افزونه مشکل رفع میشه. ولی چرا؟افزونه رو دوباره فعال کردم و اینبار حالت‌های مختلف Compression رو یکی به یکی غیرفعال کردم تا اینکه متوجه شدم با غیرفعال‌سازی حالت فشرده‌سازی HTML، خطای GTMetrix رفع میشه. عجب!فروم‌های تخصصی وردپرس رو بررسی کردم. بعد از مطالعه چند مورد، به این نتیجه رسیدم که این مشکل ارتباط مستقیم به ویژگی GZIP سایت داره.بلافاصله با پشتیبانی هاست میزبان‌فا مشکل رو در میان گذاشتم. پس از کش‌مکش‌های زیاد به این نتیجه رسیدم که علی‌رغم اطلاع دقیق پشتیبانی فنی میزبان‌فا، این مشکل تقریبا در همه وب‌سایت‌هایی که روی میزبان‌فا میزبانی میشن و همچنین از افزونه WP Rocket استفاده می‌کنن وجود داره. جالب شد.وجه اشتراک مشخص بود ولی تفاوت اصلی هاست اشتراکی میزبان‌فا با دیگر هاستینگ‌ها مثل ایران‌سرور در چی بود؟!خب خیلی طول نکشید که به این تفاوت مهم پی بردم و اون روش Content-Compression در نظر گرفته‌شده روی میزبان‌فا هست؛ یعنی روش فشرده‌سازی Brotli. https://virgool.io/@skmohammadi/%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-syntax-highlighter-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%DB%8C%D8%B1%DA%AF%D9%88%D9%84-xpu1h4keneax روش فشرده‌سازی Brotli به جای GZIP!!!واقعاً تا حالا چیزی در مورد Brotli نشنیده بودم و پس از جستجو در گوگل متوجه شدم که روش بسیار جدید فشرده‌سازی فایل‌های متنی مثل php و html و css و js و... هست که توسط شرکت گوگل ارائه شده و نسبت به GZIP خیلی برتری داره (منبع).وضعیت پاسخ سرور به کلاینت و فعال‌بودن Brotli به جای GZipدر ابتدای مقاله اشاره کردم که این مشکل تنها در صورت فعال‌بودن فشرده‌سازی HTML در WP Rocket رخ میده. طبق معمول شروع به جستجو کردم و تقریباً به این نتیجه رسیدم که WP Rocket تنظیماتی که در htaccess. اعمال می‌کنه مربوط به GZIP هست و یکی از دستورالعمل‌هایی که برای فشرده‌سازی HTML در فایل htaccess. اعمال می‌کنه، دستور زیر هست:RewriteRule .* "/wp-content/cache/wp-rocket/%{HTTP_HOST}%{REQUEST_URI}/index%{ENV:WPR_SSL}%{ENV:WPR_WEBP}.html%{ENV:WPR_ENC}" [L]این قطعه کد رو بدون درنگ پاک کردم و برای جلوگیری از ویرایش‌شدن دوباره اون توسط WP Rocket، سطح دسترسی فایل htaccess. رو به 444 تغییر دادم و پایان ماجرا.لینک گزارش اینجاچند نکته:راه حل پیشنهادشده مبتنی بر نتایج تحقیقات من در تالارهای تخصصی وردپرس هست.همچنان به دنبال روشن‌شدن علت اصلی این مشکل و رفع اصولی اون هستم.در صورتی که اطلاعات دقیقی در این خصوص دارید یا اطلاعاتی دارید که می‌تونه رفع ابهام کنه، حتما مطرح کنید.

تبدیل اعداد فارسی و عربی به انگلیسی در PHP بدون str_replace

سیدکریم محمدی — Fri, 02 Oct 2020 15:12:54 +0330

تبدیل اعداد فارسی و عربی به انگلیسی در PHP بدون str_replace یکی از نکاتی که هر برنامه‌نویس PHP می‌بایست در طراحی فرم‌های فارسی در نظر بگیرد، این است که کیبورد کاربر در بسیاری از مواقع ممکن است فارسی یا عربی باشد و به همین خاطر کوئری کردن مقادیر عددی فارسی یا عربی در دیتابیس نتیجه‌بخش نخواهد بود.در همین راستا، تبدیل ارقام فارسی/عربی به انگلیسی برای عناصری مثل کدملی، شماره شناسنامه و ... پیش از کوئری دیتابیس، الزامی است.یکی از متداول‌ترین روش‌های تبدیل ارقام فارسی/عربی به انگلیسی که در بسیاری از سایت‌ها و منابع فارسی و لاتین پیشنهاد شده، استفاده از تابع str_replace یا strtr هست که من ترجیحاً یک نمونه از روش strtr رو در زیر آوردم:function toEnNumber($input) { $replace_pairs = array( '۰' => '0', '۱' => '1', '۲' => '2', '۳' => '3', '۴' => '4', '۵' => '5', '۶' => '6', '۷' => '7', '۸' => '8', '۹' => '9', '٠' => '0', '١' => '1', '٢' => '2', '٣' => '3', '٤' => '4', '٥' => '5', '٦' => '6', '٧' => '7', '٨' => '8', '٩' => '9' ); return strtr( $input, $replace_pairs ); }اما علاوه بر روش بالا که نیازمند تعیین کاراکترهای عددی هست، میخوام یه روش استاندارد و اصولی‌تر رو بهتون آموزش بدم. https://virgool.io/@skmohammadi/%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-syntax-highlighter-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%DB%8C%D8%B1%DA%AF%D9%88%D9%84-xpu1h4keneax کلاس NumberFormatter در PHPکلاس NumberFormatter یکی از کلاس‌های کمکی در مجموعه PHP Intl هست و به کمک اون میشه فرمت‌های مختلف عددی رو بهم تبدیل کرد و از این کلاس میخوام برای تبدیل اعداد فارسی/عربی به انگلیسی استفاده کنم.تابع toEnNumber که بالاتر نوشته بودم رو اینطور بازتعریف می‌کنم:function toEnNumber($input) { $fa_fmt = numfmt_create( 'fa', NumberFormatter::DECIMAL ); $ar_fmt = numfmt_create( 'ar', NumberFormatter::DECIMAL ); $output = numfmt_parse( $fa_fmt, $input ); $output = numfmt_parse( $ar_fmt, $input ); return $output; }در تعریف تابع toEnNumber، از تابع سازنده numfmt_create برای ایجاد کلاس NumberFormatter استفاده کردیم. این تابع دارای دو آرگومان هست. یکی Local و دیگری استایل Style یا Pattern که مقادیر ثابتی براش در نظر گرفته شده. سپس از فرمتر (Formatter)های ایجاد شده جهت parse کردن مقادیر ورودی استفاده می‌کنیم.امیدوارم مفید واقع بشه :)

اشتراک Clipboard بین گوشی و کامپیوترها (Clipboard Sync)

سیدکریم محمدی — Tue, 29 Sep 2020 11:44:25 +0330

آیا تا الان براتون پیش اومده که بخواید یک عبارت یا کلمه مثل رمز عبور و ... رو از گوشی همراهتون به لپ‌تاپتون (و برعکس) کپی کنید؟ احتمالاً پاسخ شما مثل خیلی‌های دیگه مثبت هست.بله درسته. شاید الان دارید به این فکر می‌کنید که هیچ راه حل ساده و مشخصی برای این قضیه وجود نداره و یا دارید به این فکر می‌کنید که:خب، اپلیکیشن‌هایی مثل واتس‌اپ و تلگرام و ... رو روی هر دو دستگاه نصب می‌کنم!که البته راه حل بالا و مشابه اون ممکنه خیلی راحت هم نباشه.امروز می‌خوام قابلیتی در مرورگر کروم رو بهتون معرفی کنم که امکان کپی-پیست (Copy-Paste) مستقیم بین دو مرورگر کروم در دو دستگاه متفاوت رو فراهم می‌کنه و در نتیجه ما می‌تونیم یک متن، کلمه یا عبارت رو بین دو دستگاه کپی-پیست کنیم که به چنین امکانی به طور کلی Clipboard Sync می‌گَن!نیازمندی‌هاحتما باید بین دو دستگاه مد نظر (گوشی، لپ‌تاپ و ...) مرورگر کروم (ترجیحاً بروزشده) موجود باشه.حتما باید در هر دستگاه، از طریق کروم وارد حساب کاربری گوگل (جیمیل) خودتون شده باشید.راه حلمراحل فعال‌سازی قابلیت Share Clipboard در گوگل کروم تقریباً برای سیستم‌عامل‌های مختلف (اندروید، ios و ویندوز و ...) یکسان هست و می‌تونید به صورت یکطرفه یا دوطرفه این قابلیت رو فعال کنید.مرورگر کروم رو باز کنید :)در نوار آدرس (Address bar) عبارت زیر رو تایپ و اینتر کنید:chrome://flagsصفحه تنظیمات flags در کروم دسکتاپدر نوار جستجو عبارت clipboard را جستجو کرده و وضعیت ویژگی Enable shared clipboard feature signals to be handledرا در حالت Enabled قرار دهید.با فعال‌سازی این flag، امکان اشتراک‌گذاری (Share) عبارت، کلمه و متن در گوگل کروم فعال خواهد شد. خب برای تست، به صفحه یکی از اقامتگاه‌های جاجیگا (سایت اجاره ویلا) میرم و بخشی از متن معرفی اقامتگاه رو هایلایت می‌کنم و روی متن انتخاب شده راست-کلیک می‌کنم:پس از این کار، متن کپی شده بلافاصله در clipboard گوشی اندرویدی من ذخیره شد.امیدوارم مفید واقع بشه :)

پرداخت نسیه دوره‌های LearnPress وردپرس

سیدکریم محمدی — Sun, 13 Sep 2020 23:58:57 +0430

افزونه لرن‌پرس (LearnPress) یکی از بهترین افزونه‌های وردپرسی برای ایجاد دوره‌های آموزشی آنلاین هست که امکانات مناسبی در اختیار مدیر یا وب‌مستر سایت قرار میده. ولی در این میان هنوز امکان پرداخت نسیه یا قسطی دوره به طور مستقیم یا از طریق افزونه‌های جانبی LearnPress مهیا نشده. به همین خاطر در ادامه یک راهکار عملی مناسب برای حل رفع این کمبود را با شما به اشتراک میذارم.افزونه‌های مورد نیازWoocommerceWoocommerce DepositsCool Integration for LearnPress & WooCommerceفرآیند کار چطور هست؟ما از افزونه Woocommerce Deposits برای ایجاد امکان پرداخت نسیه (قسطی) محصولات ووکامرسی استفاده می‌کنیم. حال اگر بتوانیم به گونه‌ای فرآیند پرداخت دوره لرن‌پرس را به محصول ووکامرس گره بزنیم، خواهیم توانست پرداخت نسیه را برای دوره‌های لرن‌پرس فراهم کنیم.اخیراً با افزونه بسیار کاربردی Cool Integration for LearnPress & WooCommerce که به صورت رایگان در مخزن وردپرس قرار گرفته آشنا شدم. اصل کار این افزونه تولید خودکار محصول ووکامرسی از روی دوره تعریف شده هست. به عبارتی وقتی دوره‌ای تعریف یا بروزرسانی می‌شود، محصول معادل نیز تعریف یا بروزرسانی می‌شود.قدم نهایی، انتقال خودکار کاربر به صفحه پرداخت ووکامرس، پس از کلیک رو دکمه «خرید محصول» هست که یک Snippet Code ساده نوشتم که در اختیارتون قرار میدم.نکته: دو افزونه به نام Woocommerce Depositis وجود دارد؛ یکی متعلق به وب‌سایت ووکامرس (اینجا) و دیگری در اینجا و من در این آموزش، از همین افزونه دوم استفاده می‌کنم و می‌تونید از سایت پرشین‌اسکریپت رایگان دانلود کنید.تنظیمات افزونه Woocommerce Depositsاین افزونه دارای تنظیمات مختلفی هست که بررسی اون‌ها در این مجال نمیگنجه، لذا به یک مورد مهم اون اشاره می‌کنم که با عنوان آموزشمون مرتبط هست.در صفحه تنظیمات ووکامرس، به تب تنظیمات افزونه Deposits و سپس به تب Checkout Mode بروید. در اینجا می‌تونید نوع و مقدار نسیه رو مشخص کنید و نوع نسیه به 2 صورت درصدی یا ثابت هست.در صورتی که بخواید امکان پرداخت نسیه را به صورت سراسری برای همه محصولات ووکامرس فعال کنید، می‌تونید طبق تصوی زیر، گزینه مربوط به Checkout Mode را انتخاب کنید.با فعال‌سازی این حالت، گزینه‌هایی جهت پرداخت نسیه به صفحه پرداخت (Checkout) ووکامرس اضافه خواهد شد.انتقال خودکار از دوره به صفحه پرداخت ووکامرسبا استفاده از قطعه کد زیر، عملاً صفحه سبد خرید یا پرداخت لرن‌پرس رو حذف و به جای اون صفحه پرداخت ووکامرس رو نمایش میدم و کاربر وقتی رو دکمه «خرید دوره» کلیک می‌کنه، به صورت خودکار محصول معادل در سبد خریدش قرار می‌گیره و به صفحه پرداخت ووکامرس منتقل میشه. من به همچین چیزی نیاز داشتم. شما ممکنه متناسب با نیازتون کد رو ویرایش کنید.کد مربوطه:add_filter( 'learn-press/enable-cart', function() { return true; }, 99 ); remove_action( 'learn-press/purchase-course-handler', array( 'LP_Request', 'do_checkout' ), 10, 3 ); add_action( 'learn-press/purchase-course-handler', 'skm_lp_handle_purchase_course', 10, 3); function skm_lp_handle_purchase_course($course_id, $cart_id, $action) { $product = get_post( get_post_meta( $course_id, '_mlpwc_xref' )[0] ); WC()->cart->add_to_cart( $product->ID, 1 ); if (wp_redirect(wc_get_checkout_url ())) { exit; } }امیداورم براتون مفید واقع بشه :)نظرات و پیشنهادات و راهکارهاتون رو کامنت کنید. سپاس

رفع مشکل گالری تصویر ووکامرس و تداخل با Visual Composer وردپرس

سیدکریم محمدی — Tue, 04 Aug 2020 23:40:02 +0430

این مقاله یا مقالک رو صرفاً جهت اشتراک با دوستان علاقه‌مند به توسعه افزونه و قالب وردپرس منتشر می‌کنم.در هفته‌های اخیر، پروژه راستچین‌سازی قالب فروشگاه الکترونیکی الکترو (Electro) را استارت زدم. البته این قالب قبلاً توسط دوستانی! راست‌چین‌سازی شده بود ولی چون با اشکالاتی همراه بود، تصمیم گرفتم خودم دوباره دست به کار بشم.قبل هر چیز باید بگم که متأسفانه شاهد ترجمه و راست‌چین‌سازی غیراصولی قالب‌های وردپرس در میان برنامه‌نویس‌ها و برخی شرکت‌ها و تیم‌ها هستیم؛ و جالب این که این محصولات غیراستاندارد در فروشگاه‌هایی مثل ژاکت و راستچین به وفور یافت میشه.یکی از مشکلات موجود در قالب الکترو، عدم سازگاری اسکریپت گالری محصول (Flex Slider) ووکامرس با صفحه‌ساز ویژوال کامپوزر (Visual Composer) هست (البته در برخی نسخه‌ها). این مشکل برمی‌گرده به اینکه نسخۀ قدیمی‌تری از اسکریپت FlexSlider توسط VC دوباره توی وردپرس Register/Enqueue میشه و برخلاف ووکامرس که وضعیت rtl بودن صفحه رو به اسکریپت FlexSlider انتقال میده، ویژوال کامپوزر این کار رو انجام نمیده.تصویر محصول در حالت گالری نمایش داده نمیشه :(حالا چه کار باید کرد؟ آیا باید افزونه VC رو به صورت دستی ویرایش کنیم؟ خیر. کافیه ابتدا اسکرپت مربوط به FlexSlider رو de-register و سپس فایل اسکریپت موجود در پلاگین ووکامرس رو با همون handle-name قبلی register کنیم.function skm_deregister_vc_flexslider() { if ( class_exists( 'WooCommerce' ) ) { $plugins_url = plugins_url(); $woo_assets_path = $plugins_url . '/woocommerce/assets'; $woo_flexslider_path = $woo_assets_path . '/js/flexslider/jquery.flexslider.min.js'; wp_deregister_script('flexslider'); wp_register_script('flexslider', $woo_flexslider_path, array('jquery')); } } add_action( 'wp_enqueue_scripts', 'skm_deregister_vc_flexslider', 999 );اینم نتیجه مورد انتظار:نمایش صحیح گالری تصاویر محصول در قالب Electroامیدوارم مفید واقع بشه :)

رفع خطای بروزرسانی محصولات Office

سیدکریم محمدی — Mon, 20 Jul 2020 15:32:59 +0430

** بروزرسانی: 7 آذر 1400من از ویندوز 10 استفاده می‌کنم. چندی قبل، هنگام باز کردن نرم‌افزار Excel آفیس با خطای زیر مواجه شدم:هر چقدر صبر کنی آپدیت تموم نمیشه :|در اولین تلاش برای رفع این مشکل، آفیس رو حذف و دوباره نصب کردم ولی مشکل بازم حل نشد.پس در گوگل جستجو کردم و خلاصه بعد از بررسی راه حل‌های مختلف، به راه‌حل زیر رسیدم که در 90% مواقع مشکل رو حل می‌کنه:روش اول: اصلاح فایل‌های سیستمی (Fix System Files)ابتدا PowerShell ویندوز را به صورت Administrator باز کنید.دستور زیر رو اجرا کنید و تا پایان بارگیری صبر کنید.DISM.exe /Online /Cleanup-image /Restorehealthسیستم را ریستارت کنید. تمام.روش دوم: ابزار کمکی KMS (بروزرسانی 23 فروردین 1400)فایل ابزار را از اینجا دانلود کنید.پیش از نصب ابزار، تمام محصولات آفیس رو ببندید.فایل ابزار دانلود شده را اجرا کنید و گزینه 1 را بزنید.تا پایان عملیات صبر کرده و در آخر برنامه را بسته و ویندوز را ریستارت کنید.روش سوم: استفاده از ابزار Regsvr32 ویندوز (بروزرسانی 7 آذر 1400)خطوط کد زیر را به ترتیب در Command-Line (CMD) اجرا کنید (در صورت لزوم با دسترسی Admin):فرمان اول:for %i in (%windir%\system32\*.dll) do regsvr32.exe /s %iفرمان دوم:for %i in (%windir%\system32\*.ocx) do regsvr32.exe /s %iتا پایان عملیات صبر کرده و در آخر برنامه را بسته و ویندوز را ریستارت کنید.روش چهارم: استفاده از Quick Repair آفیس (بروزرسانی 7 آذر 1400)وارد کنترل پنل شده و بخش نصب/حذف برنامه‌ها رو باز کنید (Add/Remove Programs)برنامه آفیس را انتخاب و گزینه Change را بزنید.اگر در پنجره باز شده گزینه Quick Repair را مشاهده کردید، کلیک کنید.(در صورت انجام مرحله قبل) تا پایان عملیات صبر کرده و در آخر برنامه را بسته و ویندوز را ریستارت کنید.منبعhttps://bestofroy.com/how-to-fix-office-application-unable-to-start-0xc0000142/https://www.namasha.com/v/28vqTFVF

ویجت FutureBuilder و بارگیری مجدد future در فلاتر

سیدکریم محمدی — Tue, 12 May 2020 17:03:20 +0430

Moderate future reloading with flutter FutureBuilderHow to Moderate future reloading with flutter FutureBuilder widgetاگر با فلاتر(Flutter) آشنایی داشته باشید، حتما می‌دونید که ویجت FutureBuilder نمونه‌ای عالی از قابلیت ترکیب‌پذیری (Composability) فلاتر هست که می‌تونه عملیات یا پروسه‌ای از نوع Future رو در بر بگیره و امکان مدیریت حالت‌های مختلف Loading، Result و Error رو به آسانی مهیا می‌کنه.در این مدت یک ماهه‌ای که با فلاتر آشنا شدم و چالش‌های مقدماتی رو پشت سرگذاشتم به راه‌کارها و تکنیک‌های خوبی در استفاده از ویجت‌ها و تعامل بین اون‌ها رسیدم که قصد دارم به طور خلاصه برخی از اون‌ها رو به اشتراک بذارم. https://virgool.io/@skmohammadi/%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-syntax-highlighter-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%DB%8C%D8%B1%DA%AF%D9%88%D9%84-xpu1h4keneax جلوگیری از بارگیری ناخواسته future در FutureBuilderهنگامی که شما یک state در ویجت پدر رو تغییر می‌دید یا از یک route به route دیگه منتقل می‌شید و یا هر کاری که منجر به بازسازی Widgets Tree بشه، اتفاقی که می‌اوفته اینه که متد build از ویجت بالادستی یا جاری دوباره اجرا میشه و اگر داخل متد build عملیاتی مثل دریافت دیتا از بیرون یا اجرای یک عملیات زمان‌بر قرار گرفته باشه، این می‌تونه خیلی پرهزینه و زائد باشه.ابتدا نگاهی به ساختار فراخوانی FutureBuilder بندازیم:@override Widget build(BuildContext context) { return FutureBuilder( future: _CustomOperation(), builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasError) { return Text('Error'); } else if (snapshot.connectionState == ConnectionState.done) { return Text('Date'); } else { return Text('loading'); } }, ); }در قطعه کد بالا پارامتر future به صورت یک متد(تابع) از نوع Future فراخوانی شده. ویجت FutureBuilder مادامی که مقدار future تغییر کنه، شروع به گرفتن دیتای جدید میکنه و برای جلوگیری از این کار باید تابع مورد نظرمون به صورت ثابت تعریف بشه و موقع rebuild شدن ویجت، اون تابع باز تعریف نشه.برای این منظور کافیه به شکل زیر عمل کنیم:class _ChildWidgetState extends State { Future _future; @override void initState() { super.initState(); _future = _CustomOperation(); } ... @override Widget build(BuildContext context) { return FutureBuilder( future: _future, builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasError) { return Text('Error'); } else if (snapshot.connectionState == ConnectionState.done) { return Text('Date'); } else { return Text('loading'); } }, ); } }همان طور که مشخصه متغیر جدیدی به نام future_ تعریف کردیم و داخل متد initState مقداردهی کردیمش. راجع به متد initState همین قدر لازمه بدونید که موقع ساخته شدن اولیه ویجت فراخوانی میشه فقط یکبار. به همین خاطر متغیر future_ هم تنها یکبار مقدار دهی میشه. در ادامه متغیر future_ رو به جای CustomOperation_ به FutureBuilder پاس دادیم.این تغییرات از اجرای ناخوسته عملیات future ما جلوگیری میکنه.اجرای بارگیری مجدد future از داخل FutureBuilderتنها کار لازم تغییر یا بازتعریف پارامتر future از FutureBuilder هست و به سادگی می‌تونیم متد runFuture_ رو به ChildWidget اضافه می‌کنیم و کارش اینه که مقدار future_ رو بازنشانی کنه :)void _runFuture() { _future = _CustomOperation(); }و به شکل زیر این متد رو استفاده می‌کنیم:@override Widget build(BuildContext context) { return FutureBuilder( future: _future, builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasError) { return Text('Error'); } else if (snapshot.connectionState == ConnectionState.done) { return Column( children: [ RaisedButton( onPressed: () { _runFuture(); }, child: Text('Re-Run Future'), ), Text('Date'), ], ); } else { return Text('loading'); } }, ); }اجرای بارگیری مجدد future از بیرون FutureBuilderحال فرض کنید بخواهیم داخل ParentWidget بر اساس یک سری تغییرات (مثل تغییر یک state)، ویجت فرزند رو مجبور به اجرای مجدد future کنیم تا دیتا دوباره دریافت بشه.ابتدا لازمه در ParentWidget یک GlobalKey برای دسترسی به ChildWidget تعریف کنیم:GlobalKey<_ChildWidgetState> _keyChild = GlobalKey();حالا باید این key تعریف شده رو به ویجت ChildWidget پاس بدیم. با این کار قادر هستیم با استفاده متد currentState از کلید ایجاد شده، متد runFuture_ رو اجرا کنیم.class ParentWidget extends StatefulWidget { @override _ParentWidgetState createState() => _ParentWidgetState(); } class _ParentWidgetState extends State { GlobalKey<_ChildWidgetState> _keyChild = GlobalKey(); @override Widget build(BuildContext context) { return Column( children: [ RaisedButton(onPressed: () { _keyChild.currentState._runFuture(); }), ChildWidget( key: _keyChild, ) ], ); } }فکر می‌کنم برای تازه‌کارهایی مثل خودم خیلی مشکل‌گشا باشه :)اگر نظر، پیشنهاد و سوالی داشتید مطرح کنید، انشالله جواب میدم :D

آمار بازدید مطالب من در سال ۹۸

سیدکریم محمدی — Fri, 03 Apr 2020 22:09:52 +0430

اگر دستاوردی را نتوانم اندازه بگیرم، چیزی در دست ندارم.اشتباه نشود، این به معنای تمایل به بهترین بودن و یا میل به اثبات چیزی نیست، اما تنها چیزی که می‌تواند برای بهتر شدن به من کمک کند یک نقشه راه است، از مسیری که طی کرده‌ام، تا بدانم چه اثری از خود به جا گذاشته‌ام. یک تصویر کلی که بتواند خیلی ساده نشانم دهد تلاش من چه اثری بر جامعه‌ام گذاشته است.ویدیوی آمار مخاطبین من را ببینید: https://cdn.virgool.io/annual-report/1398/hlrpwqs5q1yy-Pbg95.mp4 دستاوردهای من در سال ۹۸در سال ۹۸، من در مجموع ۴ پست در ویرگول منتشر کردم و پست‌های من ۳۶ مرتبه لایک شدند و افراد ۹ بار نظرات خود را روی پست‌های من به اشتراک گذاشتند. امسال ۱۱ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. اما چیزی که این دستاورد را ارزشمندتر می‌کند اثری است که این پست‌ها از خود به جا گذاشتند.اثر پروانه‌ای منطبق آمار ۴,۲۹۳ بار پست‌های من خوانده شدند و زمانی حدود ۴۸۰,۹۴۰ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیت ۷۲٬۹۴۰٬۰۰۰ نفری که در ایران به اینترنت دسترسی دارند، من توانستم حدود ۰/۰۰۶۵۹۴ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم. عددی که با تمام کوچک بودنش، اثر بزرگ و ارزشمندی است.اما این عددها فقط توضیحی است از آنچه که برای مخاطبانم به ارمغان آورده‌ام، اثر ارزشمند‌تری که با نوشتن در ویرگول از خود به جا گذاشته‌ام، تلاش پنهانی بوده که برای حفظ محیط زیست کرده‌ام. من با انتشار پست‌های خودم در فضای ویرگول توانستم در مصرف کاغذ صرفه جویی کنم؛ یعنی اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۱۳,۳۱۰ کاغذ مصرف می‌شد.

آموزش اتصال به STFP/FTP در VS Code

سیدکریم محمدی — Tue, 14 Jan 2020 08:58:43 +0330

همراهان گرامی سلام. در این مقاله قصد دارم نحوه پیکربندی و اتصال به FTP یا SFTP رو در نرم‌افزار VS Code یا همون Microsoft Visual Studio - Code بهتون آموزش بدم.به شخصه، از کدنویسی در VS Code لذت می‌برم؛ البته اگر ضعف‌هایی مثل مصرف بالای حافظه بخصوص هنگام کار با NodeJS رو کنار بذاریم!به تازگی تصمیم گرفتم برای اتصال به سرور از طریق SFTP و مدیریت فایل‌های پروژه PHP، سراغ VS Code برم. برای راه‌اندازی SFTP کمی گوگل کردم و به افزونه SFTP رسیدم و نصبش کردم.افزونه SFTP در VSCodeنحوه تنظیم افزونهتنظیمات افزونه باید درون فایلی با نام sftp.json در پوشه vscode. پروژه‌تون تعبیه بشه. برای دسترسی به این فایل به صورت زیر عمل کنید:پالت دستورات (Command Palette) رو با کلید ترکیبی Ctrl+Shift+P باز کنید.دستور SFTP: config رو اجرا کنید. https://virgool.io/@skmohammadi/%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-syntax-highlighter-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%DB%8C%D8%B1%DA%AF%D9%88%D9%84-xpu1h4keneax شکل ساده تنظیمات به صورت زیر خواهد بود:{ "host": "XXX.XXX.XXX.XXX", "protocol": "sftp", "port": PORT, "username": "USERNAME", "password": "PASSWORD", "remotePath": "/", }پس از ذخیره تنظیمات، برای بررسی اتصال ‌از طریق سایدبار سمت چپ VS Code روی آیکون SFTP کلیک کنید. در اینجا، در صورت اتصال صحیح، فهرستی از فایل‌های پروژه مقصد رو مشاهده خواهید کرد.نمایش فهرست فایل‌های SFTP در سایدبار VSو یک مثال برای اتصال FTP به هاست:{ "name": "My Server", "host": "skmohammadi.ir", "protocol": "ftp", "port": 21, "username": "myusername", "password": "mypassword", "remotePath": "/public_html/", "uploadOnSave": true, "connectTimeout": 10000 } این افزونه امکانات مختلفی مثل اتصال به چند سرور همزمان را هم فراهم می‌کند و با مطالعه توضیحات و راهنمای افزونه می‌تونید به تنظیمات مورد نظرتون دست پیدا کنید. اگر هم سوالی در این رابطه داشته باشید خوشحال میشم راهنمایی‌تون کنم.شاد و پیروز باشید :)

رفع مشکل تاریخ فارسی Parsidate در نسخه 5.3 وردپرس

سیدکریم محمدی — Wed, 27 Nov 2019 10:54:37 +0330

همانطور که می‌دونید وردپرس در نسخه جدید خودش یعنی 5.3، تغییرات اساسی در توابع و کتابخانه‌های تاریخ و زمان ایجاد کرده و همین تغییرات باعث بروز مشکل در پلاگین‌ها و قالب‌هایی میشه که از date_i18n استفاده کردن.به طور خلاصه، در این نسخه تابع و اکشن wp_date (مستندات این تابع رو حتما مطالعه کنید) جایگزین تابع و اکشن date_i18n شده و ما باید این تغییر رو در قالب و افزونه مورد نظرمون اعمال کنیم.افزونه Parsidate و رفع مشکل تاریخ فارسیقبل از هر چیز نسخه نهایی پارسی‌دیت یعنی 3.0.1 را دانلود و نصب کنید. همانطور که در تصویر می‌بینید، تاریخ پست‌ها (و احتمالا چیزی‌های دیگر!) شمسی نیست. حالا برای رفع مشکل چه کنیم؟!می‌تونیم چندماه دیگه صبر کنیم تا شاید تیم توسعه‌دهنده! پارسی‌دیت این هماهنگ‌سازی رو انجام بدن یا اینکه خودمون دست به کار بشیم :)مسیر زیر رو در سورس افزونه پارسی‌دیت دنبال کنید:wp-parsidate/includes/fixes-dates.phpحالا در خط 20 این فایل یک فیلتر به صورت زیر مشاهده می‌کنید:add_action('date_i18n', 'wpp_fix_i18n', 10, 3);فقط کافیه مقدار date_i18n رو به wp_date تغییر بدید. به این شکل:add_action('wp_date', 'wpp_fix_i18n', 10, 3);با این تغییر کوچولو، وردپرس من فارسی شد :) دست به کار بشید حتما.

حذف لینک زائد یا محرمانه از نتایج گوگل

سیدکریم محمدی — Sat, 05 Oct 2019 16:39:34 +0330

حذف لینک از نتایج گوگلگاهی به دلایلی مشخص تصمیم می‌گیریم که یک لینک یا دسته‌ای از لینک‌های وب‌سایت خود را از نتایج گوگل پنهان کنیم. مثلا ممکنه:لینک مورد نظر داخل سایت از دور خارج شده ولی هنوز جز نتایج گوگل باقی مونده باشه.آدرس محتوایی از سایت تغییر کرده ولی هنوز آدرسش توی گوگل بروز نشده باشه.لینکی از سایت، به طور ناخواسته از طریق گوگل ایندکس شده باشه. مثلاً ما در جاجیگا اجازه نمیدیم که لینک صفحات اختصاصی دعوتنامه کاربران در نتایج گوگل ایندکس بشه چون جنبه تبلیغاتی داره و سر خیلی از کاربران دیگه کلاه میره :) خخخخ!دو دلیل اول میتونه تأثیر بسیار بدی روی Impression و به طور کلی روی سئوی(Seo) داشته باشه و لازمه که در سریعترین زمان، لینک‌های زائد از گوگل حذف بشن.چطور لینک رو از نتایج گوگل حذف کنیم؟برای این کار دو روش وجود داره:استفاده از متاتگ Robotsاستفاده از کنسول جستجوی گوگل (Google search console)متاتگ Robotsمتاتگ Robots فقط یک خط کد هست به خزنده‌ها (ربات)ی گوگل میفهمونه که صفحه جاری لازمه ایندکس بشه یا خیر. اگر چنین متاتگی توی صفحه موجود نباشه، به طور پیشفرض، خزنده‌های جستجوگر گوگل صفحه سایت رو ایندکس میکنن. در صورتی که دسترسی لازم برای ویرایش صفحات سایتتون رو دارید، می‌تونید از این روش استفاده کنید.نحوه استفاده از متاتگ Robots هم این شکلی هست: متاتگ مربوطه باید بین تگ head قرار بگیره. برای کنترل ایندکس شدن صفحه، مقدار content میتونه برابر index یا noindex باشه ولی به طور کلی می‌تونه مقادیر مختلفی بگیره که خارج از بحث ماست [اطلاعات بیشتر]کنسول جستجوی گوگل (Goosle Search console)در صورتی که با Search Console گوگل یا ابزار Webmaster گوگل آشنایی داشته باشید و قبلا سایت‌تون رو به این سرویس متصل کرده باشید، امکان استفاده از این روش رو خواهید داشت. پس بهتره آموزش ثبت سایت در وب‌مستر گوگل رو گوگل کنید :)خب، برای حذف لینک مورد نظرتون:وارد صفحه https://www.google.com/webmasters/tools/removals بشیدلینک مورد نظر رو در فیلد متنی موجود وارد کنیدروی Request Removal کلیک کنیدحدود 24 الی 48 ساعت طول می‌کشه تا گوگل لینک مورد نظر رو از نتایج جستجو حذف کنه.حذف لینک از Search console گوگلموفق باشید. ضمناً یادتون نره به جاجیگا سر بزنید و از طریق لینک دعوتنامه جاجیگای من ثبت‌نام کنید :)

ایجاد روتیتر یا زیرتیتر در وردپرس بدون کدنویسی

سیدکریم محمدی — Wed, 18 Sep 2019 17:26:01 +0430

مدتی قبل یک امکان جدید کوچولو در مجله جاجیگا به منظور نمایش عنوان دوم (Secondary Title) ایجاد کردم و به نظرم رسید که روش کار رو با شما به اشتراک بذارم.قبل هر چیز این نکته رو بگم که می‌تونستم با فیلتر (filter) گذاشتن روی the_title و البته ایجاد متاتگ (meta tag) این امکان رو پیاده‌سازی کنم ولی ترجیح دادم در کوتاه‌ترین زمان ممکن و بدون کدنویسی و توسعه فایل‌های قالب کار رو پیش ببرم.به راحتی با کمی گوگل کردن به افزونه Secondary Title رسیدم. افزونه‌ای ساده و سبک هست و برای دوستانی که آشنایی با کدنویسی و توسعه قالب وردپرس ندارن میتونه خیلی مفید باشه.نصب و پیکربندی افزونهپس از نصب افزونه مورد نظرمون، از طریق منوی تنظیمات و زیرمنوی Secondary Title وارد تنظیمات افزونه میشیم.نمایی از تنظیمات افزونه Secondary Titleهمانطور که در تصویر مشخص هست، افزونه به صورت خودکار در حالت روشن قرار داره و یک فرمت پیشفرض برای نمایش عنوان و عنوان دوم در نظر گرفته.به صورت پیشفرض این ترکیب به عنوان یک عبارت داخل تگ عنوان (h1) نوشته شما قرار می‌گیره اما در مجله جاجیگا قراره با کمی تغییر در ترکیب و ساختار نمایش داده بشه. به فرمت زیر دقت کنید:%secondary_title%
%title%در قطعه کد بالا، عنوان دوم رو داخل یک تگ span قرار دادم تا بتونم روی اندازه فونت و ظاهر این عنوان کنترل داشته باشم. خروجی html این ترکیب پس از انتشار نوشته به صورت زیر خواهد بود (نمونه موردی):

عنوان دوم
راهنمای سفر به کیش | Travel Guide To Kish

صفحه تنظیمات این افزونه شامل موارد دیگه‌ای هم هست که به راحتی می‌تونید بررسی کنید.حالا کافیه وارد صفحه افزودن/ویرایش نوشته شده و در کادر ایجاد شده عنوان دوم مورد نظرمون رو درج کنیم.درج عنوان دوم در صفحه افزودن/ویرایش نوشتهو این هم نمای منتشرشده از نوشته مورد نظر ما شامل عنوان دوم که بر اساس نیاز شما می‌تونه به صورت روتیتر یا زیرتیر ترکیب‌بندی (format) بشه.نمونه‌ای از نمایش عنوان دوم بالای عنوان اصلیتذکردر نمایش موردی فوق روی تگ span کمی css‌کاری شده :) و این ترکیب در تنظیمات افزونه لحاظ شده:%secondary_title%
%title%اینم خروجی html مربوط به عنوان و زیرعنوان (نمونه موردی جاجیگا):خروجی html عنوان اصلی و عنوان دومپایانامیدوارم مفید واقع بشه :)

تبدیل فرمول‌های ریاضی در Office Word

سیدکریم محمدی — Fri, 26 Oct 2018 20:26:24 +0330

شاید شما نیز جزء آن دسته از کاربران Office Word باشید که با توجه به رشته تحصیلی یا حرفه‌ای که دارند، معمولاً فرمول‌نویسی یا نگارش فرمول در Word بخش اصلی کارشون هست و قطعاً با چالش‌های ریز و درشتی در این زمینه مواجه شدید. مثلاً فرض کنید شما یک دانشجوی ریاضی هستید و قصد نگارش متن پایان‌نامه یا پروپوزال یا مقاله‌تون رو دارید. به طور کلی برای نگارش این اسناد علمی دو راه بیشتر ندارید: Office Word یا LaTeX؛ البته شیوه نگارشی LaTeX شاید برای شما ناشناخته و پیچیده باشه و به همین منظور فرض می‌کنیم که ابزار انتخابی شما Office Word هست. قصد دارم تجربه عملی خودم در زمینه فرمول‌نویسی و نگارش عبارات ریاضی در محیط Word را بیان و شیوه‌ها و ابزارهای مرتبط را معرفی کنم.ابزارهای فرمول‌نویسی در Wordمتداول‌ترین ابزار برای فرمول‌نویسی در Word، قطعاً Microsoft Word Equations بوده که به صورت پیش‌فرض همراه با نرم‌افزار Word نصب شده و در دسترس قرار می‌گیره. این ابزار گرچه با انتشار نسخه‌های جدید Office بهتر و بهتر شده ولی همچنان فاقد امکانات پیشرفته برای نگارش فرمول اسناد علمی دانشگاهی هست و اگر صفحه‌ای از متن علمی خودتون رو با این ابزار فرمول‌نویسی و تدوین کنید متوجه ناکارآمدی آن خواهید شد. به همین خاطر، ابزارهای مختلفی برای رفع کم و کاستی‌های موجود در این زمینه طراحی شدند که بنا بر تجربه شخصی خودم، MathType بهترین و راحت‌ترین گزینه برای فرمول‌نویسی در Word به شمار میره.ویژگی‌های مهم MathType عبارت‌اند از:پشتیبانی دستورات مقدماتی و نمادهای LaTeXبرخورداری از پالت نمادها، عبارات و قالب‌های ریاضیامکان تعریف کلیدهای میان‌بر دلخواه و نامحدود جهت فرمول‌نویسی سریعامکان تبدیل متن و پاراگراف و عبارات ریاضی تنظیم شده از MathType به LaTeXاین ویژگی‌ها باعث میشه که هرگاه قصد حروف‌چینی و تدوین یک متن علمی مانند کتاب، پایان‌نامه و ... را داشته باشم، ابتدا کل متن را به کمک MathType در Word تنظیم نموده و سپس متن تنظیم شده را به LaTeX تبدیل کرده و در نهایت متن LaTeX بدست آمده را در سند LaTeX تعبیه و تنظیم کنم؛ این شیوه باعث افزایش سرعت و کیفیت تدوین و حروف‌چینی میشه. البته این متد صرفاً برای تدوین متن علمی در قالب LaTeX هست و در بسیاری از موارد که تدوین متن در قالب Word الزامی هست، روش‌های دیگری رو به کار می‌گیریم.فرض کنید، قصد دارید مقاله‌تون رو به یک ژورنال داخلی ارسال بکنید و ژورنال از شما خواسته که متن مقاله باید در Word تنظیم و برای فرمول‌نویسی هم تنها از Microsoft Word Equations استفاده بشه.در چنین مواقعی پیشنهاد من، تنظیم متن در قالب Word+MathType و تبدیل آن به Word+Equations بوده و مراحل و روش این تبدیل را در ادامه شرح میدم.تبدیل MathType به Microsoft Equationsپس از تدوین متن در Word و فرمول‌نویسی به کمک MathType، نرم‌افزار GrindEQ Math Utilities را از طریق لینک زیر دریافت و روی سیستم نصب کنید:دانلود نسخه 2015 نرم‌افزار GrindEQ Math Utilitiesاین نرم‌افزار امکان تبدیل متون شامل فرمول‌های از نوع MathType به Microsoft Equations را فراهم می‌کنه.پس از نصب نرم‌افزار، زبانه GrindEQ Math به نوار ابزار Word Office اضافه خواهد شد.پاراگراف یا متن مورد نظر را انتخاب کرده و از زبانه GrindEQ Math، روی گزینه MathType-to-Equations کلیک نمایید.نمونه متن ریاضی نگارش‌شده به کمک MathTypeپس از کلیک روی گزینه مشخص شده، نرم‌افزار GrindEQ Math اجرا خواهد شد که مطابق شکل تنظیمات را انجام داده و کلید OK را کلیک نمایید.تنظیم مبدل برای تبدیل به Equations با بکارگیری فونت‌های خانواده Euclid* بسته به حجم متن شما، عملیات تبدیل از چندثانیه تا چند دقیقه به طول خواهد انجامید.نمونه متن تبدیل شده از MathType به Equationsرفع مشکل عدم نمایش تب GrindEQ Math در Wordیکی از مشکلات معمول در نصب افزونه‌ها یا Add-Ins وردرپس، عدم نمایش خودکار تب افزونه نصب شده در تولبار بالایی ورد آفیس هست. برای حل این مشکل راهکار زیر را دنبال کنید:از منوی File وارد منوی Options و قسمت Add-Ins شوید.این قسمت حاوی یک جدول از افزونه‌ها و ابزارهای فعال و غیرفعال می‌باشد. همانطور که تصویر زیر مشاهده می‌کنید فایل افزونه مربوط به GrindEQMath به نام GrindEQ.dotm غیرفعال شده است.وضعیت غیرفعال افزونه GrindEQMath در Wordجهت فعال‌سازی رو کلید Go کلیک نموده و در پنجره‌ای که نمایان می‌شود تیک مربوط به فایل یادشده را فعال نموده و Ok را بزنید.پی‌نوشت: فایل GrindEQ.dot جهت استفاده در نسخه‌های 2003 و پایین‌تر آفیس ارائه شده است و در نسخه‌های جدید نیازی به فعال‌سازی آن نیست.چند نکته مهمدر تدوین پایان‌نامه و کتاب، ابتدا هر بخش یا فصل را جداگانه تدوین و تبدیل نموده و به متن تبدیل‌شدۀ اخیر اضافه کنید. زیرا ممکن عملیات تبدیل روی متن‌های عظیم، وقت‌گیر و همراه با خطا باشد.قبل از نصب نرم‌افزار GrindEQMath حتما از نرم‌افزار Word خارج شوید.در فرمول‌نویسی MathType از سیستم فونت پیش‌فرض استفاده نموده و به دنبال تغییر فونت MathType نباشید.پس از تبدیل فرمول‌ها به Microsoft Equations، عبارات ریاضی Display Mode (وسط چین) را به حالت LTR یا چپ به راست تنظیم نمایید زیرا در مواردی مشاهده می‌شود که عبارات ریاضی وسط چین، در خروجی PDF چاپ نمی‌شود.روی لینک زیر کلیک کنید https://mahak-charity.org/online-payment/اگر شما نیز تجربیات و چالش‌های مشابهی در این زمینه دارید در قسمت دیدگاه‌ها مطرح کنید.شاد و پیروز باشید :)

تحریم‌های اینترنتی رو بی‌اثر کن!

سیدکریم محمدی — Sat, 20 Oct 2018 18:30:20 +0330

عبور از تحریم‌های اینترنتی؟ بله درسته. در میان تحریم‌های گوناگونی که در چند سال اخیر گریبان‌گیر شده، اینترنت و به ویژه سرویس‌های مبتنی بر وب غیرایرانی در ایران هم به همین ترتیب یکی یکی از دسترسی مستقیم ایرانیان خارج شده. برای قشر برنامه‌نویس، تحریم‌شدن سرویس‌هایی مثل Google Developer، GitLab و ... دست و پاگیر هست و نیاز به یک راه‌حل اساسی پایدار برای دور از تحریم (نه فیلتر!!) امری ضروری هست.چند وقتی هست که با سرویس تحریم‌شکن! Shecan.ir آشنا شدم و تقریباً قادر هست دسترسی راحت و سریع به سرویس‌های اینترنتی تحریم‌شدۀ این اجنبی‌ها رو فراهم کنه.سرویس Shecan.ir، پس از ورود به سایت، یک ip یا به عبارتی dns server رو ارائه می‌کنه و با تنظیم این dns server روی کانکشن اینترنت‌تون، به راحتی و بدون هیچ دردسری ارتباطتون با سرویس‌های تحریم‌شده برقرار میشه.تنظیم DNS Server روی کانکشن در ویندوز 7ایجاد میانبر سوئیچ DNSاز اونجایی که تنظیم dns server روی کانکشن همیشه لازم و ضروری نیست و شما برای فعال‌سازی dns و غیرفعال‌سازی اون همیشه باید منوهای مختلفی رو طی کنید؛ لذا یک ابزار کوچولو ایجاد کردم که به کمک این ابزار میانبر می‌تونید تنها با یک کلیک dns رو on و با کلیکی دیگر dns رو off کنید! فقط یک خط دستوری در فایلی با پسوند bat. هست و کاملاً امنه.روش ایجاد سوئیچ dns - روشنیک فایل متنی (Notepad) گشوده و دستور زیر را درج و سپس فایل را با نام Shecan-ON.bat ذخیره کنید:netsh interface ipv4 add dnsserver "Wireless Network Connection" address=178.22.122.100 index=1روش ایجاد سوئیچ dns - خاموشمشابه فوق، فایل دیگری ایجاد و خط دستوری زیر را درج و با نام Shecan-OFF.bat ذخیره کنید:netsh interface ipv4 delete dnsserver "Wireless Network Connection" allنکته 1: در دستورات فوق به جای عبارت Wireless Network Connection می‌بایست نام کانکشن مورد نظر (کانکشنی که توسط آن به اینترنت متصل هستید) را قرار دهید.نکته 2: ip به کار رفته در دستور فوق، همان dns server مربوط به سرویس Shecan.ir است.اگر سوالی داشتید در بخش دیدگاه‌ها مطرح کنید. موفق و پیروز باشید.