نوشته های عرفان عطارزاده

نیتلی - افزونه بولت ژورنال کروم با پشتیبانی از تقویم شمسی

عرفان عطارزاده — Tue, 24 Jan 2023 12:24:53 +0330

اکستنشن کروم بولت ژورنالاخیراً یک افزونه کروم به نام «Neatly» ساختم که هدفش مدیریت کارهای شماست. در چندین سال گذشته، در مورد بولت ژورنال و دفترهای برنامه‌ریزی مطالعه کردم و در نهایت تصمیم گرفتم برای خودم یک نسخه دیجیتال بسازم.به‌عنوان یک عاشق برنامه‌ریزی و برنامه‌نویس، ساختن یک بولت ژورنال کاغذی، در حالی که تمام روز به اسکرین دیجیتال نگاه می‌کنید بسیار دشوار بود!معمولاً در ابتدا برای من مهم است که یک نمونه اولیه (MVP) بسازم. بنابراین می‌توانید حداقل ویژگی‌های یک بولت ژورنال را در اکستنشن من مشاهده کنید. اگر کاربران علاقه نشان دهند، ویژگی‌های بعدی را به آن اضافه می‌کنم. هر چند الآن قابلیت‌های خوبی دارد که میخواهم برایتان تعریف کنم.ویژگی‌های افزونه بولت ژورنالورود آسانبدون هیچ سختی و البته با کمک کروم می‌توانید بدون رمز عبور یا تایید ایمیل، لاگین کنید.صفحه ورود افزونه کروم بولت ژورنالنمایش هفتهدربولت ژورنال‌های رایج، باید هفته جاری را دید. در Neatly، کل هفته را به تفکیک روز می‌بینید. می‌توانید هر تعداد کار که می‌خواهید ایجاد کنید، آنها را حذف کنید یا به روزهای دیگر منتقل کنید. (مثلاً کارهای عقب افتاده)صفحه برنامه‌ریزی هفتگی بولت ژورنال نیتلینمایش ماهاز طرف دیگر (یا به همان صفحه دیگر)، برای برنامه‌ریزی کارهای آینده باید ماه جاری خود را مشاهده کنید. در اینجا، می‌توانید هر تعداد کار را که نیاز دارید ایجاد، حذف و جابجا کنید.صفحه برنامه‌ریزی ماهانه بولت ژورنال اکستنشن کروممرور سالهمچنین می‌توانید با رفتن به ماه‌های دیگر در برگه ماه، ماه‌های قبلی و بعدی را مشاهده کنید و آنچه را که می‌خواهید با کارها و برنامه‌ریزی خود انجام دهید.ویژگی های جذاببکشید و رها کنید (یا همان Drag & Drop)می‌توانید به راحتی کارهای خود را در هر کجا که می‌خواهید بکشید و رها کنید تا تاریخ انجامش را تغییر دهید.حالت تاریکبرای آن دسته از کاربرانی که زمینه تیره را دوست دارند، این ویژگی عالی و همچنین رایج را ارائه کردم تا چشمان زیبای خود را ایمن نگه دارید.تم تیره برای بولت ژورنالحالت حریم خصوصیاگر در حال مرور وب هستید و همکارتان در هنگام باز کردن یک برگه جدید، وظایف شما را با جزئیات ببیند، به اندازه کافی ایمن نیست. برای پوشش این مشکل، یک دکمه حالت حریم خصوصی اضافه کردم تا کارهای شما به طور پیش‌فرض مخفی شود.حالت حریم خصوصی برای مخفی کردن کارهای بولت ژورنالدانلود بولت ژورنالبرای استفاده از این افزونه کروم، می‌توانید صفحه افزونه کروم بولت ژورنال را مشاهده کنید.از شما برای خواندن این مقاله معرفی افزونه کرومم متشکرم. اگر آن را نصب کردید و پیشنهادی داشتید، با افتخار نظر شما را می‌خوانم.منبع اصلی: سایت مدیوم

چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)

عرفان عطارزاده — Sun, 01 Mar 2020 20:08:04 +0330

چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)در نوشته قبلی با عنوان چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم) درباره ماهیت افزونه یا همان اکستنشن توضیح دادم و بیشتر کلیاتی راجع به قابلیت‌ها و کارایی‌هایش نوشتم. اما از این‌‌جا به بعد قصد دارم برای کسانی که علاقه‌مند به نوشتن و برنامه‌نویسی اکستنشن کروم هستند شیوه ساختش را آموزش دهم. باعث افتخار خواهد بود که همراهم باشید.پیش‌نیازهای برنامه‌نویسی اکستنشن کرومتسلط بر HTMLتسلط بر CSSتسلط بر JavaScript یا jQueryهمان‌طور که می‌بینید برای ساختن اکستنشن کروم باید به پیاده‌سازی فرانت‌اند (Front-End) یا همان ظاهر (UI) وب تسلط مناسبی داشته باشید. زیرا همان‌طور که در ادامه توضیح خواهم داد، بخش‌های مختلف افزونه کروم تشکیل شده از فایل‌های مختلف HTML و CSS و JavaScript است.پس اگر دانش پیاده‌سازی ‌UI را ندارید برای شروع نگاهی به این نوشته من بیاندازید: http://vrgl.ir/zWGaQ اگر هنوز در این نوشتار همراه من هستید، قصد دارم بخش‌های مختلف اکستنشن کروم را که به صورت تجربی تفکیکش کرده‌ام به شما معرفی کنم. شاید کمتر کسی به این شکل دسته‌بندی کند، ولی به نظرم دیدگاه مناسبی برای شروع خواهد داد:بخش‌های مختلف اکستشن (افزونه) کرومالف - دسته‌بندی بر اساس انواع فایل:فایل manifest.jsonفایل‌های HTMLفایل‌های ‌CSSفایل‌های JavaScriptفایل‌های تصویر و لوگو و... با فرمت‌های مختلف (png, jpg, svg, ico و ...)ب - دسته‌بندی بر اساس محدوده عملکرد (Scope):فایل شناسه و پیکربندی manifest.jsonفایل‌های پنجره اکستنشن (popup) یا ظاهر افزونه (UI)اسکریپت‌های پس‌زمینه (Background Scripts)اسکریپت‌های محتوا (Content Scripts)* توجه: علت دسته‌بندی با نام محدوده عملکرد (Scope) به این دلیل است که اسکریپت‌های نوشته شده در هر دسته، از دسته دیگر ایزوله و جدا هستند. بنابراین برای صدا زدن توابع از هر دسته در دسته دیگر نیاز به روش‌های ویژه‌ای خواهد بود که بعداً توضیح خواهم داد.۱. مانیفست (manifest.json) اکستنشن کروم چیست؟مانیفست به نوعی شناسنامه و پیکربندی (Config) افزونه کروم است. این فایل دارای فرمت و ساختار ویژه‌ایست که اگر درست نوشته نشود، اکستنشن اصلاً کار نخواهد کرد و در بعضی موارد استثناء شاید اجرا شود ولی باز هم درست کار نخواهد کرد.در فایل مانیفست، نام و ورژن اکستنشن، توضیحات، منابع استفاده شده، آیکون‌ها و ... به صورت یک آبجکت جاوااسکریپت نوشته می‌شود و فرمت آن json است. می‌توانید نمونه کامل یک مانیفست را در مستندات مانیفست سایت کروم ببینید. اما برای اختصار و دوری از سردرگمی نمونه کوچکی را اینجا آورده‌ام:manifest.json{ "manifest_version": 2, "name": "My Extension", "version": "versionString", "description": "A plain text description", "icons": {...}, "browser_action": {...} }۲. فایل‌های پنجره اکستنشن یا ظاهر افزونه کروموقتی یک اکستنشن کروم می‌نویسید با نصب و کلیک روی آیکون آن، پنجره‌ای باز می‌شود که تمام ویژگی‌های یک صفحه وب ساده را دارد به جز این که روی پنجره کروم باز می‌شود. بنابراین یک فایل html نیاز داریم تا محتوای پنجره (popup) را به کاربر نشان دهد و برای ظاهر و کارایی‌اش به ترتیب به فایل‌های css و js نیاز خواهیم داشت. برای این کار کافیست فایل popup.html ای را که ساخته‌ایم در مانیفست تعریف کنیم:manifest.json... "browser_action": { "default_icon": "logo.png", "default_popup": "popup.html", "default_title": "My Extension Popup" }, ...باقی فایل‌ها نظیر css و js ها به سادگی درون خود html لینک‌دهی می‌شوند.۳. اسکریپت‌های پس‌زمینه افزونه کروم (Background Scripts)قلب تپنده اکستنشن کروم همین فایل‌(های) اسکریپت پس‌زمینه است. این که می‌گویم قلب، دو علت دارد:با باز شدن مرورگر کروم، تمام فایل‌های پس‌زمینه افزونه‌های کروم (هر تعداد که روی مرورگر نصب باشد) شروع به اجرا شدن می‌کنند و تا بستن مرورگر، به فعالیت خودشان ادامه می‌دهد. مثل فعالیت قلب که غیر ارادی بوده و خودکار ادامه پیدا می‌کند. البته این فعالیت در پس‌زمینه می‌تواند با توجه به برنامه‌نویسی شما، مستمر باشد (مثلا یک interval تنظیم شده باشد.) یا فقط یک بار در زمان باز شدن مرورگر اجرا شود.کارهای مهم و حیاتی (نظیر فراخوانی APIها، listener های JavaScript و ...) باید در اسکریپت‌های پس‌زمینه انجام شود. چرا؟‌ چون پنجره اکستنشن (popup) و همه اسکریپت‌هایش بسیار ناپایدار هستند و با بسته شدن پنجره، همه آن‌ها متوقف می‌گردند. توجه داشته باشید که حتی یک کلیک ساده بیرون از پنجره ‌(‌popup) افزونه، می‌تواند منجر به بسته شدن آن شود.۴. اسکریپت‌های محتوا (Content Scripts)محدوده‌‌ها یا Scope های گفته شده شماره ۱ تا ۳ ممکن است فایل‌های کم‌تر یا بیش‌تری را شامل شود اما در هر حال اجباری هستند. در حالی که می‌توان اکستنشن کرومی نوشت بدون این که در آن اسکریپت‌های محتوا در نظر گرفت. منظور از اسکریپت‌های محتوا، JavaScriptها، CSSها و تصاویر و منابعی هستند که در صفحات وب، اعمال می‌شوند. مثلاً فرض کنید افزونه شما قرار است فونت همه سایت‌هایی را که کاربر بازدید می‌کند به فونت وزیر تغییر دهد. خب در اینجا علاوه بر این که باید فایل فونت‌ها را ذیل عنوان web_accessible_resources در مانیفست اعلام کنید، در content_scripts هم باید css مورد نظر خود را و این که در چه URLهایی اعمال شوند اعلام کنید:manifest.json... "content_scripts": [ { "matches": [""], "js": ["contentScript.js"], "css": ["contentStyle.css"] } ], "web_accessible_resources": [ "fonts/Vazir.ttf", "fonts/Vazir-Bold.ttf", ], ....خب تا اینجای کار آشنایی بیشتری با اجزای تشکیل دهنده اکستنشن کروم پیدا کردیم. امیدوارم از این نوشته استفاده کرده باشید. منتظر قسمت‌های بعدی این آموزش باشید و در صورتی که مطلب فوق برای شما مفید بود،‌ آن را با دوستان خود در شبکه‌های اجتماعی به اشتراک بگذارید.فهرست نوشته‌های من درباره اکستنشن کروم:پیش‌قسمت: چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم)چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)

چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم)

عرفان عطارزاده — Wed, 18 Dec 2019 12:37:26 +0330

چگونه اکستنشن کروم بنویسیم؟ (آشنایی با افزونه کروم)با این که خیلی علاقه به مقدمه‌نویسی ندارم و ترجیح میدم سریع سراغ اصل مطلب بروم ولی چند بندی مجبورم برای کسانی که با این موضوع آشنایی ندارند توضیحاتی ارائه کنم.* توجه: این نوشته، بخش اول و به نوعی آشنایی با افزونه کروم و قابلیت‌هایی‌ست که می‌تواند ارائه کند. به زودی آموزش برنامه‌نویسی اکستنشن کروم را برای شما عزیزان قرار خواهم داد.مقدمه (آشنایی با افزونه‌های کروم یا همان Chrome Extensions)همان‌طور که می‌دانید مرورگر (browser) کروم (Chrome) یکی از محبوب‌ترین ابزارهای ساختِ گوگل برای مرور صفحات وب به شمار می‌رود؛ به طوری که حداقل نیمی از کاربران اینترنت از آن استفاده می‌کنند. (بسته به مرجعی که آمار را ارائه کرده، این میزان در سال ۲۰۱۹ چیزی بین ۴۸٪ الی ۶۵٪ کاربران را شامل می‌شود.)از طرفی وقتی چیزی خیلی پرطرفدار باشد، برایش ابزارها و خدماتی جانبی ایجاد خواهد شد. برای مثال در فضای غیردیجیتال، کنار یک مرکز خرید یا شهربازی، رستوران‌ها و کافه‌های زیادی دائر می‌شوند یا به بیانی دیگر به این مراکز تفریحی، مراکز خدماتی جداگانه‌ای «افزوده» می‌شوند. خُب به تعبیر ما، این خدمات، افزونه‌هایی هستند برای آن محل اصلی.حالا اگر مرورگر کروم را یک محصول اصلی فرض کنید، خدماتی در کنارش ایجاد شده است که به افزونه یا Extension شهرت دارد.آیا افزونه‌های کروم ساخته گوگل است؟بگذارید با همان زبان مثالی این سؤال را پاسخ دهم. یک شهربازی قاعدتاً سازنده و مالکی دارد. این مالک می‌تواند خودش، رستوران یا کافه‌ای هم درون شهربازی یا اطرافش دائر کند. همچنین ‌می‌تواند محل‌هایی را درون شهربازی برای رستوران‌ها و کافه‌داران اختصاص داده و به آن‌ها اجاره‌اش دهد. حالت سوم هم این‌که خودِ رستوران یا کافه، محلی را در کنار شهربازی خریده و به کسب و کار خود مشغول شود.خب کروم هم که ساخته گوگل است، شبیه همان شهربازی‌ست. افزونه‌های کروم (Chrome extensions) می‌توانند ساختِ خودِ گوگل باشند (مثل Google Keep Chrome Extension) یا ساخته شرکت‌های دیگر نظیر Grammarly.افزونه کروم چه کارهایی انجام می‌دهد؟خُب این سؤال هم اگر به صورت «افزونه کروم چه کارهایی انجام نمی‌دهد؟» مطرح شده بود احتمالاً منطقی‌تر به نظر می‌رسید. چون تقریباً طیف وسیعی از خدمات را شامل می‌شود. افزونه کروم شبیه یک سایت کوچک در کنار تمامی صفحات اینترنتی که مشاهده می‌کنید قابل استفاده است. اگر تا به حال افزونه‌ای نصب نکردید حتماً یکی از آن‌ها را امتحان کنید.* این که گفتم مانند یک سایت کوچک به دو علت زیر بود:معمولاً بیشتر اکستنشن‌ها (افزونه‌ها) دارای یک ظاهر کاربری هستند که با کلیک کردن روی آیکون‌شان در سمت راست بالای مرورگر باز می‌شوند که شامل فایل‌های HTML, CSS و JavaScript هستند.همان‌طور که یک سایت با دریافت و ارسال اطلاعات، خدماتی را برای ما فراهم می‌کند، اکستنشن کروم هم همان قابلیت‌ها را داراست.* این که گفتم در کنار تمامی صفحات اینترنتی، نیاز به توضیح بیشتری دارد که در ادامه به آن خواهم پرداخت.کروم وب استور - Chrome Web Storeقابلیت‌های افزونه کروم (کروم اکستنشن - Chrome Extension)پیش از این گفتم که افزونه کروم می‌تواند در کنار تمامی صفحاتی که ما در وب مشاهده می‌کنیم حضور داشته باشد. اما شاید این سؤال برای شما پیش آمده که این حضور چه کارایی یا تأثیری روی صفحات وب خواهد داشت. خُب برای توضیح این موضوع یادآوری می‌کنم که حضور آیکون افزونه در سمت راست بالای مرورگر کروم، به خاطر دسترسی همیشگی شما به آن است. اما فقط دسته‌ای از افزونه‌ها، مستقل از وب‌سایتی که مشاهده می‌کنید عمل می‌کنند. مثلاً افزونه‌ای را در نظر بگیرید که مهم‌ترین اخبار ۲۴ ساعت گذشته را از سراسر وب جمع می‌کند و شما با بازکردن آن (به وسیله کلیک روی آیکون افزونه) لیست اخبار را دریافت خواهید کرد. این افزونه کاری ندارد که شما در کدام سایت هستید یا اصلاً صفحه‌ای را باز کردید یا خیر؛ چون مستقل عمل می‌کند.اما افزونه دیگری مثل Grammarly که در بالاتر معرفی شد، برعکس افزونه خبرخوان، با محتوای سایتی که مشاهده می‌کنید سر و کار دارد. یعنی اگر در گوگل‌داکز مشغول تایپ کردن باشید، این افزونه غلط‌های نگارشی شما را (به زبان انگلیسی) اصلاح می‌کند. پس مستقل از محتوای صفحه نیست. این تیپ افزونه‌ها این قابلیت را دارند که ظاهر سایتی که مشاهده می‌کنید عوض کنند. (نظیر فونت‌ها، رنگ‌ها و تمام چیزهایی که به نوعی به HTML, CSS یا JavaScript مربوط است.) اکستنشن کروم همچنین این قابلیت را دارند که در پس‌زمینه (‌Background) اجرا شده و کارهایی را انجام دهند که در ظاهر قابل مشاهده نیست. مثل تغییر ip یا عوض کردن اطلاعات ارسالی به سمت سرور و... که بسیار متنوع‌اند.افزونه کروم را از کجا و چگونه نصب کنیم؟افزونه‌های کروم یا همان اکستنشن‌ها را می‌توانید از طریق سایت فروشگاه وب کروم (Chrome Web Store) دانلود و نصب نمایید. یادتان باشد که اکستنشن کروم فقط روی مرورگرهایی که بر پایه کرومیوم نوشته شده باشند قابلیت نصب را دارد. از جمله: گوگل کروم، کرومیوم، ماکروسافت اج جدید، اُپرا.امیدوارم مطالبی که به عنوان پیش‌مقدمه نوشتم برای شما مفید بوده و از آن استفاده کرده باشید. در قسمت بعدی به نحوه ساخت اکستنشن کروم خواهم پرداخت.فهرست نوشته‌های من درباره اکستنشن کروم:پیش‌قسمت: چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم)چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)

آشنایی با اچ‌تی‌ام‌ال (HTML) به زبان خیلی خیلی ساده

عرفان عطارزاده — Tue, 10 Sep 2019 22:00:56 +0430

پیش از خواندندوست ندارم مطلبم را کلیشه‌ای آغاز کنم برای همین اینجا توضیح نمی‌دهم که HTML مخفف چیست یا چه معنایی دارد؛ اما برای آن دسته از عزیزان که هیچ اطلاعی درباره HTML ندارند باید عرض کنم که این مفهوم در مباحث برنامه‌نویسی ظاهر وب‌سایت‌ها کاربرد دارد و در صورتی که مایل به آشنایی با آن هستید، تا پایان متن همراه من باشید.* توجه: این نوشته شامل آموزش مبانی HTML نمی‌باشد.آشنایی با زبان نشانه‌گذاری فرامَتنی (!)از این که عنوان ترجمه‌شده بالا خیلی نامفهوم است عذرخواهی می‌کنم و دعوت می‌کنم تا با زبان خیلی خیلی ساده با HTML آشنا بشویم. فرض کنید می‌خواهیم یک نامه یا نوشته‌ای را تایپ کنیم. به متن زیر توجه کنید:سلام دوست عزیزم خوبی امیدوارم هرجاکه هستی شادوسلامت باشی وکنارسایردوستانمان ایام خوشی راسپری کنی حتمادراولین فرصت به ماسری بزن خیلی دلتنگیم باآرزوی بهترین ها عرفانهمین متن را با نوشته زیر مقایسه کنید:سلام دوست عزیزم!خوبی؟ امیدوارم هر جا که هستی، شاد و سلامت باشی و کنار سایر دوستان‌مان، ایام خوشی را سپری کنی. حتماً در اولین فرصت، به ما سری بزن. خیلی دلتنگیم!با آرزوی بهترین‌ها...عرفانخواندن دومی بسیار آسان‌تر است. زیرا با کمک گرفتن از علائم نوشتاری، به خواننده اطلاع می‌دهد که کجا مکس کند و چشمش به چه شکلی از روی کلمات عبور کند. فرض کنید صفحات وب، که مملو از اطلاعات، نوشته‌ها و تصاویر هستند، مشابه این نامه کوتاه، از طرف سِرور، برای مرورگر (Browser) ارسال شده باشند. مرورگر - که از قضا هوش انسانی هم ندارد - از کجا باید بفهمد که با این متن طول و دراز چگونه برخورد کند و آن را به نمایش بگذارد؟ عنوان‌‌ها کدام هستند؟ پاراگراف‌ها کی عوض می‌شوند و تصاویر در کجا قرار دارند؟زبان نشانه‌گذاری فرامَتنی (HyperText Markup Language) یا همان HTML وظیفه تگ‌گذاری روی نوشته را دارد تا اولاً به مرورگر و در مرحله دوم به کاربر اینترنت که از مرورگر استفاده می‌کند بفهماند که اطلاعات دریافت شده از سمت سِرور، به چه شکلی پردازش شده و نمایش داده شوند. همین.هر فایل HTML به صورت یک فایل با فرمت html (یا فرمت‌های دیگر نظیر xhtml، htm و...) است که به صورت اولیه زیر، نشانه‌گذاری می‌شود:index.html در واقع ما داریم به مرورگر می‌فهمانیم که اطلاعاتی که دریافت کرده ساختار HTML دارد و همه محتوا درون دو تگ باز و بسته شده قرار گرفته است. در زبان HTML دو تگ اصلی و را داریم. که درون ، اطلاعات زیر قرار می‌گیرد: عنوان صفحه که در بالای مرورگر (در هر Tab) قرار می‌گیرد.اطلاعات معرفی محتوای صفحه به موتورهای جستجو (نظیر گوگل)اضافه کردن فایل‌ها و کتابخانه‌های ظاهر و رنگ و لعاب سایت (CSS)و...آنچه در تگ نوشته می‌شود مستقیماً درون صفحه نهایی که توسط کاربر بارگیری (Load) می‌شود، دیده نخواهد شد. در عوض ما تگ را داریم که آنچه توسط کاربر قابل رویت‌ مستقیم خواهد بود درون این تگ قرار خواهد گرفت.تگ می‌تواند شامل موارد زیر باشد:هِدر و سرتیترهافهرست منوسایر محتواهافوتر و...کدهای فراخوانی کتابخانه‌های جاوااسکریپت (JavaScript) و یا کدهای آن درون تگ خب؛ فکر کنم به صورت خیلی خلاصه توضیح داده باشم که HTML چیست. از این‌جا به بعد اگر دوست داشته باشید کدنویسی را آغاز کنید یکی از بهترین آموزش‌ها در سایت w3schools موجود هست. یادتان باشد که HTML حکم تیرآهن‌های ساختمان را دارد و برای زیبایی و نمایش درست صفحه، نیاز دارید که حتما CSS را هم یاد بگیرید که اگر عمری باقی بود یک مطلب هم درباره آشنایی با آن به زبان خیلی خیلی ساده برایتان خواهم نوشت.

چگونه لپ‌تاپ خود را ارتقاء دهیم؟

عرفان عطارزاده — Fri, 02 Aug 2019 19:08:54 +0430

من یک برنامه‌نویس هستم و همان‌طور که می‌دانید روزیِ ما با لپ‌تاپ یا کامپیوترهای شخصی در می‌آید. از همین رو خراب شدن یا کار نکردن لپ‌تاپ عواقب خیلی بدی برای ما برنامه‌نویس‌ها خواهد داشت. مدت زیادی بود که لپ‌تاپ من خیلی کُند شده بود و تقریباً کار کردن را غیر ممکن کرده بود. من که یک پروژه نرم‌افزاری هم دستم بود و باید آن را به زودی تحویل می‌دادم، چند راه پیش روی خود دیدم:ارتقای لپ‌تاپ با کم‌ترین هزینه ممکن۱. خرید لپ‌تاپ جدید به جای لپ‌تاپ قدیمیخُب البته این خیلی گزینه ایده‌آلیست اما با توجه به وضعیت فعلی بازار، تهیه یک لپ‌تاپ معمولی که قدرت و سرعت مناسبی برای کارکردن داشته باشد کمِ کم، ۱۰ میلیون تومان آب می‌خورد.۲. خرید آی‌مک قدیمی دست دومخرید آی‌مک دست دوم به جای لپ‌تاپ جدیداین هم گزینه خیلی مناسبی بود. می‌شد یک آی‌مک قدیمی (حدوداً تولید سال 2015) را با یک کانفیگ قابل قبول بین ۵ تا ۸ میلیون تومان خرید. اما باز هم چند اشکال وجود داشت:یکی این که پیدا کردن یک آی‌مک دست دوم سالم کار خیلی آسانی نیست. هرچند برای نویسنده این امکان تقریباً مهیا شده بود. دوم این که آی‌مک را نمی‌شود مثل لپ‌تاپ هرجایی با خودمان همراه کنیم. ایراد دیگری هم که بود هزینه‌ای بود که ناچار باید پرداخت می‌شد و این هرچند از خرید یک لپ‌تاپ نو ارزان‌تر در می‌آمد اما به هر حال فشار اقتصادی خودش را داشت.۳. ارتقای لپ‌تاپ به جای خرید لپ‌تاپ جدیدقطعاً به صرفه‌ترین راه حل همین بود! به خصوص که لپ‌تاپ قدیمی من کاملاً سالم بود و مشکل من فقط سرعت پردازشش بود. اگر آماده هستید شرح این راه حل کم هزینه را در ادامه این مطلب دنبال کنید.مراحل ارتقای کانفیگ لپ‌تاپسرعت پردازش یک کامپیوتر یا لپ‌تاپ به چیزهای مختلفی بستگی دارد اما در مورد لپ‌تاپ، تنها چیزی که شما می‌توانید به راحتی آن را ارتقا و بهبود ببخشید، رَم (RAM) و هارددیسک (Hard Disk) آن است.ارتقای رَم لپ‌تاپ (Laptop RAM)خوشبختانه طراحان لپ‌تاپ‌ها فکر چنین روزهایی را کرده‌اند و محل قرارگیری رم لپ‌تاپ و هارددیسک آن را جای مناسب و در دسترسی قرار داده‌اند. اگر این طور نباشد، شاید مجبور شوید همه پیچ‌های لپ‌تاپتان را باز کنید.محل قرارگیری رم (RAM) در پشت لپ‌تاپهمان طور که در تصویر بالا می‌بینید می‌شود به راحتی رم‌های لپ‌تاپ را در آورد و عوض کرد. فقط این نکته را فراموش نکنید تا زمانی که لپ‌تاپ شما مشمول گارانتی هست، نباید توسط شما یا تعمیرکاری غیر از شرکت گارانتی‌کننده باز شود.برای تعویض رم، حتماً در اینترنت مدل لپ‌تاپ خود را جستجو کنید تا متوجه بشوید از چه نوع رم و تا چه میزان ظرفیتی می‌توانید استفاده کنید. هر مادربردی (Motherboard) محدودیت‌های خاص خودش را دارد. اما معمولاً می‌شود میزان حافظه رم را تا دوبرابر بیشتر کرد. مثلاً اگر الان رم سیستم شما 4GB است به احتمال زیاد تا 8GB ارتقاء را پشتیبانی می‌کند.ارتقای هارددیسک یا فضای ذخیره‌سازی لپ‌تاپاگر بدشانس نباشید، محل قرارگیری هارددیسک (HDD) هم نباید خیلی دور از دسترس شما باشد. مطابق تصویر زیر یک جایی در پشت لپ‌تاپ:محل قرارگیری هارددیسک (HDD) در پشت لپ‌تاپاگر می‌خواهید تمام نرم‌افزارهایی که با آن‌ها کار می‌کنید به سرعت باز / بسته شوند یا به سرعت فایل‌های ویرایش شده شما را ذخیره‌سازی کنند، حتماً باید یک هارددیسک از نوع SSD تهیه کنید. سرعت این هاردها به هیچ عنوان با انواع معمولی‌شان قابل قیاس نیستند. البته تنها مشکلی که در تهیه این هاردها هست قیمت به نسبت بالای آن‌هاست به طوری که احتمالاً بیشتر از 512GB نتوانید تهیه کنید. نویسنده هم موفق به خرید ظرفیت بیش از 240GB نشد.بعد از این باید حواستان جمع باشد که فقط سیستم‌عامل و نرم‌افزارهای کاربردی و مهم‌تان را روی این درایو ذخیره کنید و از انباشته شدن فایل‌های دانلودی روی هارد SSD جداً خودداری کنید زیرا به سرعت پُر خواهد شد.با محدودیت ظرفیت هارد SSD چه کار کنیم؟نگران این موضوع نباشید! کافیست هارد قبلی خود را - که احتمالا بین 750GB تا 1000GB ظرفیت داشته - به یک هارد اینترنال (داخلی یا Internal) یا هارد اکسترنال (External) تبدیل کنید.تبدیل هارد قدیمی لپ‌تاپ به هارد اکسترنال یا اینترنالبرای این کار شما نیاز دارید یک مبدل تهیه کنید. در این نوشته به تبدیل هارد قدیمی لپ‌تاپ به یک هارد اینترنال که کمی پیچیدگی دارد خواهم پرداخت.برای این کار کافیست یک مبدل به نام کدی (Caddy) که قیمت کمی بین ۵۰ تا ۱۰۰ هزار تومان دارد تهیه کنید. و هارددیسک قدیمی خود را درون آن قراردهید:مبدل کدی (Caddy) فضای DVD-ROM به هارددیسک قسمت ناراحت‌کننده ماجرا دل‌کندن از DVD-ROM لپ‌تاپ است که به لطف استفاده کم در این دوره و زمانه، نباید کار خیلی سختی باشد.به هر حال «هر که طاووس خواهد، جور هندوستان کشد.»شما با خارج کردن درایور DVD و جایگزینی آن با هارد قدیمی خود، یک لپ‌تاپ به‌روز شده با فضای ذخیره‌سازی کافی و البته بدون DVD-ROM خواهید داشت. آن هم با هزینه‌ای حدود یک تا یک‌ونیم میلیون تومان!نکات ایمنی و تذکرات لازم درباره ارتقای لپ‌تاپدر صورتی که دوره گارانتی لپ‌تاپ شما به اتمام نرسیده است، از باز کردن پیچ‌های آن به وسیله هرکسی غیر از نماینده شرکت گارانتی‌کننده دستگاه خودداری کنید.برای تعویض رم (RAM)، هارددیسک (HDD) و خرید کدی (Caddy) حتماً با جستجوی بِرند و مُدل لپ‌تاپ خود در اینترنت از سازگاری قطعاتی که قصد خریدش را دارید با سیستم خود مطمئن شوید.برای تهیه و خرید قطعات مورد نظر، حتماً به فروشگاه‌های غیر آنلاین جهت قیمت گرفتن سر بزنید. کاری که اگر نویسنده انجام نمی‌داد حدود ۵۰۰ هزار تومان ضرر می‌کرد.اگر محل قرارگیری رم و هارددیسک در پشت لپ‌تاپ نبود و احتیاج به باز کردن پیچ‌های بیشتری داشت، اگر تخصص ندارید می‌توانید با جستجوی روش باز کردن مدل لپ‌تاپ خود در اینترنت، شیوه‌اش را یاد بگیرید در غیر این صورت از این کار اجتناب کنید.حتماً قبل از نصب هارد SSD و تعویض ویندوز از فایل‌های هارد قدیمی خود در درایو C سیستم عامل ویندوز پشتیبان تهیه کنید. ممکن است بعد از تعویض هارددیسک درایو C قدیمی شما به طور کامل نیاز به فرمت شدن داشته باشد.بعد از نصب سیستم عامل جدید حتماً درایورهای منطبق با لپ‌تاپ خود را از سایت برند لپ‌تاپ دانلود و نصب کنید. به‌روزرسانی خودکار سیستم عامل با هدف نصب درایورها (خصوصاً درایور کارت گرافیک) می‌تواند دستگاه شما را با مشکل مواجه کند. پس یادتان باشد لزوماً درایورها نیاز به به‌روزرسانی به آخرین نسخه موجود را ندارند.در صورت روشن نشدن دستگاه بعد از تعویض رم‌ها (سیاه بودن صفحه نمایش) احتمالاً رم‌ها را به خوبی محکم نکرده‌اید.ممنون از توجه شما به این نوشته، امیدوارم مفید بوده باشد.

برای یادگرفتن برنامه نویسی و طراحی سایت از کجا شروع کنیم؟

عرفان عطارزاده — Thu, 25 Jul 2019 02:36:11 +0430

معمولاً این سوال توسط کسانی که به طراحی و پیاده‌سازی وب‌سایت علاقه پیدا کرده‌اند مطرح می‌شود اما پیدا کردن پاسخ - اگر متخصصی در اطرافیانتان نداشته باشید - کمی دشوار به نظر می‌رسد. البته من نمی‌خواهم خودم را متخصص معرفی کنم اما با توجه به تجربه چند ساله‌ای که در این زمینه دارم پیشنهاد می‌کنم تا پایان این مطلب همراه من باشید.مراحل یادگیری طراحی و برنامه‌نویسی سایتیک سایت به نظر من می‌تواند در یکی از دو دسته‌بندی زیر قرار بگیرد:وب‌سایتمثل بلاگ، سایت‌های شرکتی و شخصیوب‌اپلیکیشنیا نرم‌افزار تحت وب که می‌تواند شامل یک فروشگاه اینترنتی یا هر سرویس آنلاین دیگری باشد.در این نوشته قصد ندارم درباره ویژگی‌ها و تفاوت‌های این دو حرفی بزنم؛ فقط دوست داشتم قبل از شروع یادآوری کنم که برای رسیدن توانایی ساخت هر کدام از این نوع سایت‌ها باید مسیری را که در ادامه معرفی می‌کنم طی کنید.دانش مورد نیاز برای طراحی و برنامه‌نویسی سایتما اصولاً در حوزه برنامه‌نویسی و پیاده‌سازی وب‌سایت‌ها و وب‌اپلیکیشن‌ها دو بخش متفاوت را با نام‌های بک‌اند (Back-end) و فرانت‎اند (Front-end) در نظر می‌گیریم. خلاصه بخواهم توضیح دهم، بک‎‌اند تمام آن چیزی است که از دید کاربر نهایی سایت (مثل بازدیدکننده یا مشتری فروشگاه اینترنتی) پنهان است و به سادگی قابل مشاهده و فهم نیست. اما فرانت‌اند شامل تمام مواردی است که کاربر با آن مواجه است. در ادامه چند نمونه از هر کدام از این دسته‌ها را می‌آورم:اصطلاحاً کدهای سمت سرور که منطق نرم‌افزار یا سایت ما را شامل می‌شود، همچنین پایگاه داده (محل ذخیره‌سازی اطلاعات) و چیزهایی از این قبیل مربوط به بک‌اند هستند.از آن طرف، رابط کاربری (UI) سایت یعنی تمام چیزهایی که کاربر آن را می‌بیند و با آن تعامل دارد (مثل تصاویر، دکمه‌ها، فرم‌ها و...) مربوط به بخش فرانت‌اند است.یک اصطلاحی هست که ذکر آن در این‌جا خالی از لطف نیست و آن توسعه‌دهنده فول‌استک (Full-Stack Developer) است. در یک جمله به برنامه‌نویسی که در هر دو حوزه بک‌اند و فرانت‌اند دانش و تسلط کافی داشته باشد گفته می‌شود.چه کسی می‌تواند برنامه‌نویس و طراح سایت شود؟این یک سوال خیلی کلیدی‌ست! شاید در نگاه اول این گونه سوالات پاسخ «همه» داشته باشد. اما تجربه ثابت کرده هر فردی که قصد تبدیل به یک برنامه‌نویس و طراح سایت شدن را دارد حداقل باید ویژگی‌های زیر را داشته باشد:صبر و حوصله زیادنه مسیر یادگیری برنامه‌نویسی هموار و سریع است و نه کل فرآیند برنامه‌نویسی. پس در این مسیر لطفاً عجول بودن را کنار بگذارید.ویژگی پویایی و جستجوگر بودنبرنامه‌نویسی هم در مرحله یادگیری و هم در مرحله پیاده‌سازی نیاز به فردی دارد که بتواند به خوبی دنبال جواب‌های خود و راهنمایی‌های لازم در سراسر اینترنت بگردد.آشنایی حداقلی با زبان انگلیسیچون بسیار یا شاید بهتر بگویم اکثر اشکالاتی که در فرآیند برنامه‌نویسی با آن مواجه می‌شوید جوابشان در گوگل و آن هم به زبان انگلیسی است. همچنین بسیاری از آموزش‌ها و مستندات نرم‌افزارها و زبان‌های برنامه‌نویسی همگی به انگلیسی هستند.توانایی خودیادگیری (Self-Learning) داشتنشما باید بتوانید با مشاهده/مطالعه آموزش‌ها و مستندات زبان‌های برنامه‌نویسی در هر یک رشد کنید.یادگیری از طریق اینترنتسایت‌های پر بازدید برای برنامه‌نویسی و طراحی سایتبدون شک با سایت گوگل به جهت جستجوی آموزش‌ها و مستندات زبان‌های برنامه‌نویسی تحت وب و نیز رفع اشکال کدهای خود یا یافتن راه حل برای انجام یک قصد خاص بسیار سر و کار خواهید داشت. پس لطفاً هم‌زمان با یادگیری برنامه‌نویسی، شیوه‌های درست جستجو (خصوصاً با زبان انگلیسی) در گوگل را نیز یاد بگیرید.سایت پر بازدید بعدی، که در اکثر جستجوهای سوالی شما برای حل مشکلات کدها یا ارائه راه حل با آن مواجه خواهید شد، استک‌اورفلو است. حتماً در نتایج جستجو اول به این سایت سر بزنید.سایت بعدی که به نوعی مرجع مستندات زبان‌های برنامه‌نویسی تحت وب و زبان‌های نشانه‌‌گذاری متن (مثل HTML) به حساب می‌آید دبلیوتری‌اسکولز است.با این که هر کدام از موارد مطرح شده در دسته‌بندی‌های بک‌اند و فرانت‌اند دارای لایه‌های ساده، متوسط، پیشرفته و فوق پیشرفته و دارای زبان‌ها،‌ فریم‌ورک‌ها و شاخه‌های متنوعی هستند. اما پیشنهاد می‌شود برای نتیجه‌گیری سریع‌تر و رسیدن به نقطه حداقلی کسب درآمد، مسیر زیر را پیش بگیرید.برای یادگرفتن برنامه‌نویسی و طراحی سایت از کجا شروع کنیم؟یادگیری اصول اولیه پیاده‌سازی فرانت‌اندالف) یادگیری HTML در سایت w3schools.comب) یادگیری CSS در سایت w3schools.comج) یادگیری JavaScript در سایت w3schools.com* توجه: یادگیری نرم‌افزارهای طراحی گرافیکی گرچه مفید است اما در این نوشته قصد راهنمایی شما به سمت برنامه‌نویسی را داشته‌ام که طراحی رابط کاربری (UI) شاملش نمی‌شود.تبدیل یک طرح ساده PSD یا Sketch که از پیش‌طراحی یا دانلود شده به کد‌‌های ‌HTML/CSSیادگیری زبان سمت سرور PHP در سایت w3schools.comیادگیری یک سیستم مدیرت محتوا (CMS یا Content Management System) ترجیحاً وردپرس ‌(Wordpress) با جستجوی ‌‌آموزش‌های آن در گوگلیادگیری راه‌اندازی یک سایت با وردپرسیادگیری مفاهیم اولیه در زمینه هاست (Host) و دامین (Domain) جهت بارگذاری سایت در شبکه اینترنتتوجه: در صورتی که قصد ندارید فول‌استک شوید می‌توانید بندهای ۱ و ۲ را برای فرانت‌اند و بندهای ۳ تا ۶ را برای بک‌اند به صورت مجزا یاد بگیرید.تأکید می‌کنم شما با فراگیری مراحل شش‌گانه بالا به یک برنامه‌نویس تازه‌کار تبدیل می‌شوید و تا کسب تجربه و مهارت‌های لازم راه درازی را در پیش خواهید داشت. یک نکته هم از قلم افتاد و آن این که می‌توان بدون دانش زبانِ سمتِ سرورِ PHP که در بند ۳ ذکر کردم، یک سایت وردپرسی کامل ساخت و تحویل مشتری داد اما چون بنای این نوشته، راه‌برد خواننده محترم به سمت برنامه‌نویسی‌ست، این بند نیز درج شده است.امیدوارم از این نوشته استفاده کافی برده باشید. با آرزوی موفقیت!