نوشته های امیرحسین علی‌بخشی

نمایش طرح‌های گرافیکی برای رویداد‌های تقویم گوگل

امیرحسین علی‌بخشی — Thu, 01 Feb 2024 14:04:47 +0330

یکی از بهترین ابزار‌ها برای زمان‌بندی و افزایش نظم در زندگی، استفاده از یک تقویم است که بتوان در هر لحظه به آن دسترسی داشت. به نظر من، یکی از بهترین ابزار‌های این دسته، Google Calendar می‌باشد که برای استفاده از این سرویس، چیزی بیش از یک حساب کاربری گوگل نیاز نیست. کاربران به کمک این سرویس می‌توانند چه از طریق وب و چه از طریق موبایل یا حتی ساعت هوشمند خود، برنامه‌ریزی کنند و به کمک پیام‌های یادآوری این سرویس، زندگی منظم‌تر و زیبا‌تری داشته باشند!برای شخصی مثل من که به واسط کاربری سرویس‌هایی که از آن استفاده می‌کند اهمیت زیادی می‌دهد، Google Calendar یک ویژگی جذابی ارائه می‌دهد که تا جایی که من می‌دانم، خیلی در مورد آن به صورت دقیق صحبت نکرده و مستندات رسمی در مورد آن وجود ندارد؛ آن هم این است که بسته به اسمی که برای هر رویداد در این تقویم انتخاب می‌شود، یک طرح گرافیکی متناسب با آن نام برای این رویداد انتخاب می‌شود. در نسخه وب، کافی‌است روی یکی از این رویداد‌ها کلیک کنید تا بتوانید طرحی که از آن صحبت می‌کنم را ببینید. برای موبایل نیز، علاوه بر انتخاب هر رویداد، در صورتی که تقویم شما در حالت "Schedule" باشد، عکس مورد نظر نمایش داده خواهد شد.یک رویداد در Google Calendar💡نکته: ممکن است برای بعضی نام‌ها، عکسی وجود نداشته باشد؛ ولی در صورتی که برای چنین رویداد‌هایی یک لوکیشن تعریف کنید، به جای طرح، لوکیشن آن رویداد را در نقشه یا عکس‌های ثبت شده برای آن محل در Google Map به عنوان طرح رویداد نمایش داده خواهد شد. (در زمان نوشتن این پست، این امکان فقط در نسخه موبایل Google Calendar وجود دارد.) در عکس زیر یک رویداد مشاهده می‌شود که محل برگزاری آن برج میلاد تهران است. Google Calendar با استفاده از مکان این رویداد، این عکس را برای آن انتخاب کرده است.همان‌طور که گفتم، مستندات رسمی و دقیقی برای اینکه انتخاب چه نامی می‌تواند چه طرحی را نمایش دهد وجود ندارد (حداقل در زمانی که من این متن را نوشته‌ام چیزی پیدا نکرده‌ام!)؛ در نتیجه من سعی کردم فهرستی از نام‌هایی که پیدا کرده‌ام را در این پست لیست کنم که شما هم در صورت تمایل بتوانید از این ویژگی جالب Google Calendar استفاده کنید. art: painting, art workshop, sketching workshop, drawing workshopbadminton: badmintonbaseball: baseballbasketball: basketballbbq: bbq, barbecue, barbequebilliard: billiardbookclub: book club, readingbowling: bowlingbreakfast: breakfast, breakfasts, brunch, brunchescamping: campingcinema: cinema, moviesclean: cleaning, clean the house, clean the apartment, clean house, tidy up, vacuum clean, vacuum cleaningcode: learn to code, coding time, Computer Science, Programming in Python, Web Programming, Programming in Java, Web Developmentcoffee: coffee, coffeesconcert: concert, concertscycling: bicycle, cycling, bike, bicycles, bikes, Bikingdancing: dance, dancing, dancesdentist: dentist, dentistry, dentaldinner: dinner, dinners, restaurant, restaurants, Family mealdrinks: cocktail, drinks, cocktailsgolf: golfgraduation: graduationgym: gym, workout, workoutshaircut: haircut, hairhiking: hiking, hike, hikeslearninstrument: piano, singing, music Class, choir practice, flute, orchestra, oboe, clarinet, saxophone, cornett, trumpet, contrabass, cello, trombone, tuba, music ensemble, string quartett, guitar lesson, classical music, choirlearnlanguage: French Course, German Course, English Course, …, French Class, GermanClass, English Class, …, Practice French, Practice German, Practice English, …lunch: lunch, lunches, luncheonmanicure: manicure, pedicure, manicures, pedicuresmassage: massage, back rub, backrub, massagesnewyear: new year, new year's, new yearsnowruz: Nowruzoilchange: oil change, car servicepingpong: ping pong, table tennis, ping-pong, pingpongplanmyday: plan week, plan quarter, plan day, plan vacation, week planning, vacation planningدر این لیست، چندین bullet وجود دارد که کلمه اول هر کدام (که شناسه هر تصویر است) با فونت ضخیم‌تری نوشته شده و رو به روی آن، کلماتی مرتبط با آن شناسه نوشته شده است. برای پیش‌نمایش طرح‌ها، کافی است شناسه دلخواه خود را در این لینک به جای قرار داده و آن را مشاهده کنید:https://ssl.gstatic.com/tmly/f8944938hffheth4ew890ht4i8/flairs/xxhdpi/img_.jpgبعنوان مثال برای مشاهده طرح "art" میتوانید به کمک لینک https://ssl.gstatic.com/tmly/f8944938hffheth4ew890ht4i8/flairs/xxhdpi/img_clean.jpg عکس را مشاهده کنید که یک جاروبرقی است!عکس رویداد Google Calendar در صورتی که در نام آن عبارت "clean" وجود داشته باشددر این قسمت، منابع کامل‌تری را در اختیار شما قرار می‌دهم که برای تهیه این لیست از آن‌ها کمک گرفتم. در صورتی که شما نیز در به موردی برخوردید که در این لیست نبود، می‌توانید در قسمت کامنت‌ها آن را یادداشت کنید.منابعhttps://theintelligence.com/20085/google-calendar-codewords/http://www.internetbestsecrets.com/2019/09/google-calendar-event-images.htmlhttps://github.com/mifran/google-calendar-image-keyword?tab=readme-ov-file

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

امیرحسین علی‌بخشی — Sat, 22 Oct 2022 12:41:17 +0330

در این پست قصد داریم نکاتی ساده اما کاربردی برای استفاده از عکس‌ها در صفحات وب به‌عنوان یک توسعه‌دهنده‌ی فرانت‌اند ارائه دهیم.۱ - فشرده‌سازیسایت‌های بسیاری وجود دارند که به کمک آن‌ها می‌توانیم عکس‌های خود را فشرده کنیم. با این کار حجم فایل‌ها تا حد قابل قبولی کاهش پیدا می‌کند و معمولا کاهش کیفیت عکس‌ها به گونه‌ای می‌باشد که چشم انسان قادر به تشخیص افت کیفیت ناشی از فشرده‌سازی عکس‌ها نمی‌باشد.۲ - تبدیل به فرمت webp.فرمت WebP فرمت تصویری است که توسط گوگل راه اندازی شده است که هم روش های فشرده سازی با اتلاف و هم بدون اتلاف را ارائه می دهد. مزیت آن در الگوریتم فشرده‌سازی تصویر عالی آن منعکس شده است که می‌تواند حجم تصویر کمتر و کیفیت تصویر بالاتر را به ارمغان بیاورد. طبق دستورالعمل‌های رسمی، .webp می‌تواند حجم PNG را در حالت فشرده‌سازی بدون اتلاف ۲۶ درصد و در صورت فشرده‌سازی با اتلاف ۲۵ تا ۳۴ درصد کاهش دهد.سایت‌های بسیاری در اینترنت وجود دارند که به کمک آن‌ها می‌توان فرمت‌های مختلف عکس را به فرمت webp تبدیل کرد. به‌عنوان نمونه می‌توانید از این لینک برای تبدیل عکس‌های jpeg به webp استفاده کنید.۳ - استفاده از تگ حاوی صفر یا چند تگ و یک تگ برای ارائه نسخه‌های جایگزین تصویر برای سناریوهای مختلف (از نظر شیوه نمایش یا نوع دستگاه) می‌باشد.مرورگر تگ‌های را در نظر گرفته و بهترین آن‌ها را بسته به شرایط انتخاب می کند. اگر هیچ کدام از این موارد مناسب نبودند و یا مرورگر از عنصر پشتیبانی نکند، عکس موجود در src داخل تگ انتخاب می‌شود. سپس تصویر انتخاب شده در فضای اشغال شده توسط عنصر نمایش داده می شود.به‌عنوان مثال می‌توانیم داشته باشیم: ۴ - استفاده از background-color برای عکس‌هااز آنجایی که ممکن است مدتی طول بکشد تا تصاویر به طور کامل لود شوند، خوب است background-color عکس ها را روی رنگ مناسبی تنظیم کنیم تا کاربر بداند در هنگام بارگذاری کامل با چه چیزی روبرو خواهد شد.

تاثیرات Dark Mode مرورگر Samsung Internet روی صفحات وب

امیرحسین علی‌بخشی — Sun, 10 Apr 2022 01:35:16 +0430

احتمالا می‌دانید که خیلی از افراد در اطراف ما از موبایل‌های سامسونگ استفاده می‌کنند و از آن‌جا که مرورگر پیش‌فرض این گوشی‌ها، سامسونگ اینترنت (Samsung Internet) می‌باشد، می‌توان گفت تعداد افرادی که از سامسونگ اینترنت استفاده می‌کنند کم نیست. یکی از مشکلاتی که خیلی از کاربران این مرورگر با آن روبرو هستند، نمایش نامناسب وبسایت‌ها در حالت دارک مود (Dark Mode) یا به قول این مرورگر، Night Mode می‌باشد. در این پست قصد داریم با رفتار این مرورگر در این حالت را مورد بررسی قرار دهیم.بررسی رفتار سامسونگ اینترنت در دارک مودبعد از کلی بررسی روی مثال‌ها، در این قسمت می‌خواهیم رفتار سامسونگ اینترنت با وبسایت‌ها در حالت دارک مود را بیان کنیم.? متن‌ها | Textsبه طور کلی می‌توان گفت روشنایی (brightness) در تکست‌ها با نسبت عکس مقدار اولیه افزایش پیدا می‌کند. در نتیجه:متن‌های سیاه رنگ به متون سفید تبدیل می‌شوندمتون رنگی اندکی روشن‌تر از رنگ اصلی خود نمایش داده می‌شوندنوشته‌های سفید رنگ (حداکثر brightness) بدون تغییر باقی می‌مانند?️ پس‌زمینه‌ها و حاشیه‌ها | Backgrounds and Bordersرفتار سامسونگ اینترنت در برابر backgroundها و borderها در دارک مود دقیقا برعکس متن‌ها می‌باشد! یعنی brightness در textها با نسبت عکس مقدار اولیه کاهش پیدا می‌کند. در نتیجه:پس زمینه‌ها و حاشیه‌های سفید رنگ سیاه تبدیل می‌شوندمتون رنگی اندکی تیره‌تر از رنگ اصلی خود می‌شوندنوشته‌های سیاه رنگ (حداقل brightness) بدون تغییر باقی می‌مانند? عکس‌ها | Imagesرفتار مرورگر نسبت به عکس‌ها خود می‌تواند به سه حالت مختلف تقسیم‌بندی شود:۱ - عکس‌هایی که در تگ نوشته شدنداین نوع عکس‌ها بدون تغییر باقی می‌مانند،‌ ولی اندکی از روشنایی آن‌ها کاسته می‌شود.یک عکس bitmap در حالت light (سمت چپ) و dark (سمت راست)۲ - عکس‌هایی که به عنوان پس‌زمینه در CSS قرار داده شدندعکس‌هایی که در CSS نوشته می‌شوند نیز مانند عکس‌هایی که با img نوشته شده‌اند به همان شکل اولیه‌ی خود باقی می‌مانند فقط اندکی تیره می‌شوند.۳ - عکس‌های و همچنین در کنار آن یک مدیا کوئری (media query) به نام prefers-color-scheme می‌باشد. در لینک مستندات این مدیا کوئری یک مثال آورده شده که به صورت زیر می‌باشد:

Day (initial)

Day (changes in light scheme)

Day (changes in dark scheme)

Night (initial)

Night (changes in light scheme)

Night (changes in dark scheme)

حال برای این شش المان، استایل‌های زیر را تعریف می‌کنیم::root { color-scheme: light dark;}.day { background: #eee; color: black; }.night { background: #333; color: white; }@media (prefers-color-scheme: dark) { .day.dark { background: #333; color: white; } .night.dark { background: black; color: #ddd; }}@media (prefers-color-scheme: light) { .day.light { background: white; color: #555; } .night.light { background: #eee; color: black; }}خروجی کد‌های گفته شده تقریبا در تمام مرورگرها به درستی نمایش داده می‌شود... بجز سامسونگ اینترنت!این مرورگر با اینکه بر اساس Google’s Chromium browser engine توسعه داده شده، اما در برخی موارد رفتار آن با مرورگر کروم متفاوت است. یکی از این تفاوت‌ها که برای توسعه دهندگان Front-end دردسر ایجاد کرده، همین بحث دارک مود می‌باشد. در نتیجه:خیر. هنوز (در زمان نوشتن این نوشته) راه حلی درست برای کنترل رفتار مرورگر سامسونگ اینترنت در مقابل وبسایت‌ها در حالت دارک مود وجود ندارد!چه باید کرد؟به end-user ها پیشنهاد می‌شود تا زمانیکه شرکت سامسونگ مشکلات مطرح شده را برطرف نکرده یا راه حلی بیان نکرده، از حالت دارک مود این مرورگر استفاده نکنند.به توسعه دهندگان توصیه می‌شود:استفاده نکردن از شکل‌های SVG برای backgroundفرض کنید پس زمینه‌ای سفید رنگ دارید و می‌خواهید روی آن طرحی گرافیکی و طوسی رنگ به فرمت svg استفاده کنید؛ همچنین متون مشکی رنگ در این صفحه قرار دارند. سامسونگ اینترنت همانگونه که پیش‌تر بیان شد با این نوع عکس‌ها مانند متن رفتار می‌کند و در نتیجه در حالت دارک مود، پس زمینه‌ای مشکی با طرح گرافیکی سفید خواهیم داشت. البته برای حل چنین موضوعی می‌توان به جای استفاده از رنگ طوسی (مثلا eee#) از زنگ طوسی با opacity کم (برای مثال aaa5 ) برای طرح گرافیکی استفاده کرد. در چنین حالتی می‌توان خروجی قابل قبول تری در حالت دارک مود دریافت کرد:استفاده از فایل‌های SVG برای لوگواین برای حالاتی است که در لوگوی‌ شما نوشته‌ای مشکی رنگ وجود دارد. اگر دارک مود را فعال کنیم، متن لوگو در پس زمینه‌ی مشکی گم خواهد شد. اما در حالتی که لوگو به صورت svg می‌باشد، رنگ متن سفید می‌شود. با اینکه می‌دانیم سایر رنگ‌های لوگو عوض خواهند شد، اما حداقل با لوگویی خوانا روبرو خواهیم بود! نمایش پیام به کاربراگر واقعا وبسایت شما به گونه‌ای طراحی شده که به هیج وحه نباید در حالت دارک مود سامسونگ اینترنت (با توجه به شرایط گفته شده) مورد استفاده قرار گیرد، می‌توان در صورتی که user-agent کاربر مساوی با SamsungBrowserبود، پیامی به کاربر نمایش دهیم و از او درخواست کنیم که برای مشاهده‌ی وبسایت ما، از مرورگر دیگری استفاده نماید.