طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

بایگانی
پیوندهای روزانه
پیوندها

۱۲۰ مطلب در تیر ۱۳۹۸ ثبت شده است

۳۰تیر

میخواهید وب سایتتان هک نشود پس این ۸ نکته طلایی را رعایت کنید

شما اغلب دوست ندارید به این مورد فکر کنید، اما افرادی وجود دارند که هک و حملات سایبری را در وب سایت ها انجام می دهند. حتی اگر شما یک وب سایت بزرگ شرکتی نیستید و فقط یک وب سایت کوچک شخصی دارید، امنیت چیزی است که باید در مورد آن فکر کنید. شما ممکن است تعجب کنید، و بگویید "چرا من؟ چرا باید نگران کسی باشم که وب سایت کوچک من را هک کنم؟" اما متاسفانه، وب سایتها با هر اندازه ای میتوانند هک شوند.

hack

در تجربه شخصی خود، چند سال پیش یک CMS ساده (بسیار بد) را برای نگه داشتن یک وبلاگ ساخته بودم. من از آن برای فروش محصولی استفاده نمیکردم و فقط مطالب ساده ای را بر روی آن قرار میدادم. اما کسی  در اینترنت وب سایت کوچک من را پیدا کرده بود! او با استفاده از تزریق SQL  به وبسایت من توانسته بود پایگاه داده من را با لینک های غیر قانونی از سایت خود پر کند و سپس افراد را از سایت من به سایت خود منتقل کند.

در آن روز من درس مهمی را آموختم: وب سایت خود را در برابر حملات سایبری مختلف ایمن کنید. ساختن وب سایتی که در برابر حملات و هک ایمن باشد نباید کاری سخت و پیچیده باشد. در سریعترین زمان ممکن و در زمان راه اندازی وب سایت با انجام چند نکته ای که در این مقاله به آنها اشاره میکنم، تلاش هکر ها برای نفوذ به وب سایت خود ناکام بگذارید.

من لیست 10 روش کلیدی برای اینکه بتوانید وب سایت خود را ایمن نگه دارید را در زیر آورده ام :

از سرور خود محافظت کنید

1. HTTPS و TLS/SSL را برای رمزنگاری ترافیک خود تنظیم کنید

وب سایت ها به طور پیش فرض از HTTP (پروتکل انتقال فرا متن) برای انتقال اطلاعات از سرور به مرورگر و بالعکس استفاده میکنند. HTTP مانند یک بزرگراه است که همه چیز در اینترنت را به هم متصل می کند و به همین دلیل است که  قبل از نام دامنه وب سایت از "http" یا "https" استفاده میکنید. HTTPS نسخه ای امن از HTTP است. این پروتکل ترافیک یک وبسایت را از هک شدن یا ربودن محافظت می کند.

پروتکل HTTPS به ویژه برای وب سایت های تجارت الکترونیک و یا وب سایت هایی است که اطلاعاتی حساس از کاربران خود مانند کارت های اعتباری، شماره تلفن و ... را ذخیره میکنند ، بسیار اهمیت دارد. به طور خلاصه، HTTPS با رمزنگاری و یا کد گذاری ترافیک کار می کند، به طوری که اطلاعات کد شده به آسانی قابل تفسیر نیست. رمزگشایی اطلاعات رمزنگاری شده کاری بسیار دشوار است.

HTTPs-Main-Image

امروزه نسبت به گذشته وب سایت ها علاقه ی بیشتری به این پروتکل نشان میدهند و حتی سایت هایی که کار تجارت الکترونیک انجام نمیدهند هم خود را به HTTPS مجهز کرده اند. گوگل اعلام کرده است که وب سایت هایی که از این پروتکل استفاده میکنند را در لیست جستجوی خود بالاتر از وب سایت های ناامن قرار می دهد. ممکن است این تغییر برای شما درد آور باشد،اما به طورکلی این موضوعی خوب است، زیرا هر روزه وب سایت های بیشتری ایمن میشوند و اینترنتی ایمن تر را خواهیم داشت.

اکنون چگونه میتوان وب سایت خود را با HTTPS ایمن کنیم؟ همه آن چیزی که باید انجام دهید این است که یک گواهیSSL یا TLSدر سایت خود نصب کنید. امروزه، شما می توانید این مورد را به راحتی و در برخی موارد رایگان در هنگام خرید نام دامنه انجام دهید.

اکثر میزبان های وب به طور خودکار به شما اجازه می دهند تا یک گواهی رمزگذاری را پیدا کرده و برای وب سایت خود ثبت کنید . اگر به امنیت بیشتری نیاز دارید، باید یکی از این گواهینامه ها را خریداری کنید. اما بیشتر وب سایت های کوچکی که تجارت الکترونیک ندارند می توانند با همان گواهینامه های رایگان کار خود را پیش ببرند.

نکته ای در مورد TLS وSSL  وجود دارد این است که در گذشتهSSL راه اصلی برای رمزگذاری ترافیک یک سایت بود. در حال حاضر، TLS جایگزین SSL  شده است که نسخا ای ایمن تر است . اما چون اکثر مردم با اصطلاح "SSL" آشنا هستند، بسیاری از مردم فقط می گویند SSL، حتی اگر از TLS استفاده کنند.

2. از فایروال ها برای محافظت از دسترسی های غیر مجاز استفاده کنید

اگر شما سروری برای خود دارید، احتمالا بر روی آن فایروال نصب شده است. فایروال، نرم افزار و یا سخت افزاری است که اتصالات غیر مجاز را مسدود می کند و فقط اجازه می دهد تا فرم های مشخصی از اطلاعات از آن عبور کند. شما معمولا می خواهید فقط دسترسی های عمومی ترافیک از طریق HTTP/HTTPS به سرور شما دسترسی داشته باشند، به طوری که کاربران بتوانند وب سایت شما را در مرورگر خود بارگذاری کنند و قطعا می خواهید ارتباطات عمومی را به قسمت های مهم و یا بخش هایی از سرور خود محدود کنید.

firewall

یکی از این قسمت های بسیار مهم پایگاه داده شماست که تمام اطلاعات را در آن نگه داری میکنید. بسته به میزان کنترل شما بر روی سرور، تنظیم فایروال میتواند کار نسبتا ساده ای باشد. حتی اگر شما کنترل مستقیمی بر فایروال خود ندارید، اکثر میزبان ها به شما اجازه می دهند حداقل آدرس IP خاصی را مسدود کنید. استراتژی دیگر ممنوعیت دسترسی به مواردی مانند صفحه مدیریت وب سایت از هر آدرس آی پی به غیر از خودتان است.

این باعث می شود هکرها حتی قادر به بارگذاری صفحه ورود به سیستم نباشند، تلاش بسیار کمتر برای ورود به سیستم انجام شود.البته این مورد  می تواند کمی آزار دهنده باشد، زیرا اگر شما نیاز داشته باشید از مکانی دیگر به وب سایت خود ورود کنید، باید به صورت دستی آدرس IP جدید را به فایروال اضافه کنید. اما این کار امنیت خاطر بیشتری به شما میدهد.

3. فایل ها را با SSH/SFTP به صورت ایمن انتقال دهید

یک اتصال دیگر به وب سرور شما که نیاز به حفاظت دارد، نحوه آپلود و دانلود فایلهای وب سایت شما است. همانند پروتکل HTTP ذکر شده در بالا، مکانیزم اصلی، FTP (پروتکل انتقال فایل) ناامن است. حتی اگر از یک ترکیب نام کاربری و رمز عبور برای اتصال استفاده می کنید، این اطلاعات در متن ساده ذخیره می شود و رمزگذاری نمی شود.

امروزه FTP با SFTP جایگزین شده است که نسخه ای ایمن از FTP است که SSH نیز نامیده میشود. SSH کاملا ایمن است زیر اطلاعات در آن رمزنگاری میشوند. هنگام تنظیم یک اتصال SSH بین سرور و رایانه خود، می توانید از یک جفت کلید رمزنگاری شده استفاده کنید تا اطمینان حاصل شود که تنها کامپیوتر شما به سرور دسترسی پیدا می کند. کلیدها از یک کلید عمومی و خصوصی تشکیل شده است. کلید عمومی بر روی سرور ذخیره می شود و کلید خصوصی بر روی کامپیوتر.

SFTP

کلید خصوصی کلیدی است که به شما اجازه میدهد  به وسیله کلید عمومی به سرور دسترسی پیدا می کند. هنگامی که شما سعی در اتصال به سرور دارید، کلید شما بررسی میشود و اطمینان حاصل میشود که با کلید عمومی مطابقت دارد. وبسایت های SSH این رابطه را به یک وضعیت قفل و کلید تبدیل می کنند،  در این صورت کلید عمومی قفل محسوب میشود و کلید خصوصی شما کلید منحصر به فردی است که می تواند این قفل را باز کند.

4. مجوز های کاربر را تنظیم کنید تا دسترسی به پوشه ها و فایل های مهم را مسدود کنید

آیا می دانستید که تمام سرورها به شما اجازه می دهند تا برای کاربران سایتتان مجوز های خاصی را تنظیم کنید .شما می توانید مجوز هایی را برای خواندن، نوشتن یا اجرای دسترسی برای هر فایل یا پوشه تعیین کنید. علاوه بر این، این مجوزها را می توان برای مالک (معمولا مدیر)، گروه (یک یا چند کاربر) یا عمومی (همه !!) تنظیم کرد. نحوه دسترسی با استفاده از یک عدد سه رقمی با تعداد مشخصی "امتیاز" برای هر رقم تعیین میشود.

دسترسی به خواندن دارای 4 امتیاز، دسترسی به نوشتن داری 2 امتیاز، و اجرای دسترسی دارای 1 امتیاز است و این ارقام مربوط به کاربران مختلف است: اولین رقم مالک است، رقم دوم گروه است، و رقم سوم عمومی است. اگر کسی هیچ گونه دسترسی به فایلی نداشته باشد، مجوز سطح 000 برای آن در نظر گرفته میشود. اگر همه کاربران دسترسی کاملی به یک فایل داشته باشند، مجوز با مقدار 777 تنظیم خواهند شد.

به طور کلی، مالک (معمولا مدیر سیستم یا کاربر "sa") باید دسترسی خواندن و نوشتن داشته باشد و کاربران گروهی و عمومی فقط باید دسترسی به خواندن داشته باشند. چیزی که هیچ وقت نباید انجام دهید همه مجوزهایتان را با مقدار 777 تنظیم کنید - بسیاری از افراد این کار را انجام میدهند  و در این صورت با مشکلات بزرگی ممکن است روبه رو شوند. زیرا افراد به همه پرونده ها دسترسی دارند و حتی میتوانند آنها را حذف کنند که این مورد خطرناک است.

به طور کلی شما مطمئنا نمی خواهید وب سایت خود برای همه با مجوز های مدیر اجرا کنید، زیرا اگر اعتبار ها به خطر بیفتند، یک هکر می تواند دسترسی کاملی به سرور شما داشته باشد. وب سایت شما باید تحت کاربر خود اجرا شود. نگه داشتن سطوح مختلف دسترسی جدا از یکدیگر کمک خواهد کرد فایل های سرور خود را امن نگه دارید.

از وب سایت خود محافظت کنید

5. سیستم مدیریت محتوا و دیگر برنامه های سایت خود را به روزرسانی کنید

چه شما سایت خود را بر روی وردپرس اجرا کرده اید و یااز تعدادی از بسته های npm استفاده می کنید، قطعا باید مطمئن شوید که تمام این نرم افزار ها و ابزارهایی که استفاده می کنید، به روز می شوند. برای وردپرس به طور خاص، باید اطمینان حاصل کنید که  نسخه اصلی وردپرس شما به همراه تم و پلاگین های آن بروز شده اند. این مورد بسیار مهم است زیرا توسعه دهندگان همیشه باید تغییراتی را برای محافظت در برابر آسیب پذیری ها انجام دهند.

update

اگر این بروز رسانی ها به صورت مرتب انجام نشود ، سایتتان را در معرض حملات سایبری قرار داده اید. نکته ی دیگر در مورد وب سایت هایی که از ورد پرس استفاده میکنند این است که میتوانند از پلاگین های امنیتی همچون Sucuri و یا Bulletproof برای جلوگیری از حملات استفاده کنند.

6. ارسال اطلاعات از طریق فرم های وب سایتتان را ایمن کنید

ارسال اطلاعات از طریق فرم های یک وب سایت، یکی از رایج ترین روش هایی است که هکرها به یک وب سایت حمله می کنند. دلیل آن هم این است که که فرم ها داده ها را به پایگاه داده وب سایت شما ارسال می کند.برخی از رایج ترین روش ها برای تخریب عملکرد اصلی یک فرم عبارتند از : SQL Injection و XSS. در یک فرم محافظت نشده، تزریق SQL  به یکی از فیلد های پایگاه داده و سپس اجرای آن باعث اختلال در عملکرد وب سایت خواهد شد.

SQL-Injection

حملات Cross-site یا همان XSS باعث انتقال کد های جاوا اسکریپت به وب سایت شما شده که می تواند محتوای وب سایت را برای کاربران تغییر دهد و موجب شود آنها اطلاعات حساس خود را ناآگاهانه در اختیار هکر ها قرار دهند. ازهر دوی این حملات  می توان با اعتبارسنجی مناسب در بخش های فرم  جلوگیری کرد. پس اعتبار سنجی سمت کاربر و سمت سرور را جدی بگیرید. در حالت ایده آل، شما باید هر دو اعتبار سنجی سمت کاربر و سرور را انجام دهید.

با این حال نمیتوانید تنها به اعتبار سنجی سمت کاربر تکیه کنید زیرا این اعتبار سنجی به تنهایی آسیب پذیر است.اعتبار سنجی سمت سرور یک لایه امنیتی دیگر را برای بررسی داده ها برای هر اطلاعات مخرب اضافه می کند.

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

در زمان ایجاد رمز عبور برای وب سایت خود باید نکاتی را رعایت کنید.از اسامی یا کلمات که هر نوع ارتباطی با شما دارند استفاده نکنید برای مثال از روز تولد، آدرس یا شماره ملی استفاده نکنید. سعی کنید از کلمات عبوری با طولی با بیش از 20 کاراکتراستفاده کنید.  یک کلمه عبور یکسان را در حساب های مختلف استفاده نکنید. گذرواژه هایتان را به صورت دوره ای تغییر دهید. بهتر است این مورد هر چه زودتر انجام شود ولی یک دوره شش ماه برای این کار میتواند مناسب باشد.


8. پشتیبان گیری از فایل های وب سایت و پایگاه های داده

در بدترین حالت ممکن است شما تمام اطلاعات وب سایت خود را از دست بدهید. در این گونه مواقع قطعا نسخه پشتیبان وب سایت به داد شما خواهد رسید. نسخه پشتیبان حیاتی است در غیر این صورت ممکن است زحمات چند ساله شما در کمتر از یک دقیقه نابود شود. میزبان وب سایت شما باید قابلیت پشتیبان گیری خورکار و دوره ای را برای شما فعال کرده باشد. پس باید در انتخاب شرکت میزبانی خود دقت کافی را به عمل بیاورید.

سخن پایانی

امنیت وب سایت یکی از آن چیزهایی است که ممکن است برای آن لازم باشد کمی زمان صرف کنید، اما اگر بخواهید یک حمله سایبری را تجربه نکنید، ارزشش را دارد.البته، با وجود رعایت تمام نکات باز نمیتوان به صورت صد در صد تضمین کرد هیچ مشکلی رخ نخواهد داد. با این حال باید تمام کارهای پیشگیرانه را انجام داد.

دستورالعمل های اساسی بیان شده در بالا قطعا به محافظت از وب سایت شما کمک می کند، اما ممکن است هنوز راه نفوذی وجود داشته باشد. خبر خوب این است که با استفاده از این نکات می توانید از اکثر حملات را جلوگیری کنید.

امیدوارم این مقاله برای شما مفید بوده باشد! شما چگونه از وب سایت خود محافظت می کنید؟ نظرتان را در همین جا برای ما قرار دهید

منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۶ روش برای افزایش سرعت بارگذاری صفحات وب سایت شما

سرعت بارگذاری پایین صفحات یک وب سایت می‌تواند یکی از دلایلی باشد که سایتتان بازدید های زیادی را به دست نمی‌آورد. در این مقاله به نکاتی اشاره خواهم کرد که به شما کمک می کند سرعت اجرای صفحات سایت خود را افزایش می‌دهید.

speed

حجم صفحات وب سایت خود را کاهش دهید

اگر بارگذاری سایت شما بیش از ۳ ثانیه طول بکشد، بیشتر کاربران قبل از باز شدن صفحه اصلی آن را ترک خواهند کرد. استفاده از فرمت نادرست برای تصاویر به راحتی می‌تواند حجم صفحات شما را افزایش داده و تجربه تلخی را برای کاربران شما رقم بزند. بیش از ۷۰ درصد از صفحاتی که برای دستگاه‌های موبایل طراحی می‌شوند دارای حجمی بیش از یک مگابایت هستند و تنها ۱۲ درصد از آنها حجمی بیش از ۴ مگابایت دارند.

minifycss

به خاطر داشته باشید که بارگذاری صفحه ای با حجم یک و نیم مگابایت با استفاده از یک اتصال ایده آل 3G سه ثانیه طول می‌کشد. بهترین کار این است که حجم صفحات خود را زیر نیم مگابایت در نظر بگیرید. طبق گفته  GlobalStats در سال ۲۰۱۸ رایج‌ترین رزولوشن های صفحه نمایشی که استفاده شده است عبارتند از :

  • 22.55% از رزولوشن 360 در 640 استفاده کرده اند(موبایل).
  • 11.73%  از رزولوشن 1366 در 768 استفاده کرده‌اند.
  • 8.26% از رزولوشن 1920 در  1080 استفاده کردند.
  • 4.91% از رزولوشن 375 در 667 استفاده کردند(موبایل).
  • 2.94% از رزولوشن 1440 در 900 استفاده کردند.

این آمار به وضوح نشان می‌دهد که نیمی از ترافیک از طریق تلفن همراه به سمت وب سایت‌ها روانه می‌شوند. بنابراین در اندازه تصاویری که برای سایتان استفاده می‌کنید احتیاط کنید.

وب سایت خود را برای موبایل طراحی کنید

 بر اساس تحقیقاتی که گوگل سال گذشته بر روی سرعت صفحات در موبایل انجام داده است متوسط زمانی که صفحه ای در موبایل بارگذاری می‌شود ۲۲ ثانیه بوده است و ۵۳ درصد از کاربران موبایل صفحاتی که بیش از ۳ ثانیه برای بارگذاری نیاز دارند را ترک کردند. این یک مشکل بزرگ است.

بیشتر از ۷۵ درصد از سایت های موبایلی در یک اتصال 3G ایده آل به بیش از ۱۰ ثانیه زمان برای بارگذاری خود نیاز دارند و با توجه به اینکه نیمی از ترافیک وب سایت ها از طریق موبایل بوده است این سرعت بارگذاری اصلا مناسب نیست. پس با پایین نگه داشتن حجم صفحات وب سایتتان کاربران خود را خوشحال کنید و اطمینان حاصل کنید آنها سایتتان را به خاطر  سرعت بارگذاری ترک نمی کند.

mobile-friendly

اگر شما از سیستم های مدیریت محتوا مانند وردپرس جوملا و دروپال استفاده می کنید پلاگین های زیادی وجود دارند که می توانند به شما کمک کنند وب سایت خود را برای موبایل بهینه سازی کنید همچنین شما می توانید از ابزارهایی مانند جایگزین و جایگزین برای تبدیل وب سایت خود به یک وب سایت موبایلی استفاده کنید با این حال بهتر است یک نسخه جداگانه از وب سایت خود ایجاد کرده و اطمینان حاصل کنید کاربران تجربه خوبی از استفاده از آن دارند.

دقت داشته باشید که صفحاتی را که برای موبایل طراحی میکنید باید حجمی کمتر از نیم مگابایت داشته باشند.

مطمئن شوید وبسایت شما کوچک سازی شده است

 اگر وب سایت خود را از صفر برنامه نویسی کرده اید، پس آن را مرتب ویرایش می کنید. همانطور که پروژه خود را توسعه می دهید حتماً علاقه خواهید داشت از روش‌هایی با کارایی بهتر استفاده کنید پس از اطمینان حاصل کنید کد های خود را در بهینه ترین حالت می نویسید.

فایل های css ، html و جاوا اسکریپت خود را کوچک سازی کنید اگر از CDN برای فایل های خود استفاده می‌کنیدT شانس این را دارد که سرعت بارگذاری صفحات خود را افزایش دهید. زیرا که ممکن است کاربران در سایت های دیگر از این فایل ها استفاده کرده باشند و اکنون مرورگر شما دیگر نیاز به دانلود مجدد آنها ندارد.

از بارگذاری اسکریپت هایی که نیازی به آنها ندارید صرف نظر کنید

بارگذاری فایل های متعدد جاوا اسکریپت که نیازی به آنها نداریم می‌تواند باعث کندی سرعت بارگذاری صفحات سایت شما شود، تا جای ممکن از بارگذاری اسکریپتهای که در سرورهای ثالث هستند پرهیز کنید. درخواست این فایل ها می تواند باعث کندی سایت شما شود و حتی ریسک‌های امنیتی احتمالی را نیز افزایش دهد. تا جایی که ممکن است فایل ها را در سرور خود نگه دارید.

از کلمات defer و async در بارگذاری فایل های جاوا اسکریپت استفاده کنید، این کار باعث می‌شود، سرعت بارگذاری صفحات شما افزایش یابد. همچنین می توانید برای اسکریپت های کوچک از روش Inline برای افزودن جاوا اسکریپت به اسناد html خود استفاده کنید.

 async به مرورگر می گوید که تجزیه و خواندن صفحات html را همزمان با دانلود فایل های جاوا اسکریپت به صورت موازی و همزمان انجام دهد. به علاوه کلمه defer به مرورگر می گوید که فایل های جاوا اسکریپ را بعد از  خواندن کامل فایل های html ، اجرا کند.

از امکان Caching و CDN استفاده کنید 

شبکه تحویل محتوا (CDN) سایت شما را بر روی سرورهایی در سراسر جهان کپی کرده و زمان انتقال داده را با اتصال بازدیدکنندگان به سرور جغرافیایی نزدیک به آنها کاهش می دهد. محتوای استاتیک نیز توسط سرورهای CDN ذخیره می شود.Cloudflare  احتمالا بهترین CDN است که شما میشناسید، اما Akamai و Amazon CloudFront  هم جایگزین های خوبی هستند.

cloud

اطمینان حاصل کنید که از امکان کش مرورگر برای افزایش سرعت بارگذاری وب سایت خود برای بازدیدکنندگانی که دوباره به سایت شما سر میزنند استفاده میکنید. مرورگر با ذخیره سازی و دانلود این فایل ها از سرور بر روی دستگاه کاربر این کار را برای شما انجام می دهد. زمانی که کاربران از صفحاتی مدام بازدید میکنند با مشخص کردن زمانی میتوان از دانلود دوباره فایل ها برای آنها جلوگیری کرد (همان امکان کش مروگر).

از پلاگین های غیر ضروری خلاص شوید

در صورتی که از سیتم های مدیریت محتوا مانند وردپرس استفاده میکنید قطعا از پلاگین های این سیستم استفاده میکنید. زمانی که به پلاگینی نیاز ندارید آن را غیر فعال کنید. پلاگین ها باعث میشوند CPU درگیر شوند و حافظه رم بیشتری از سرور شما مصرف شود. در نتیجه باعث کندی وب سایت شما خواهد شد.

 

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۱۰ نکته کاربردی در استفاده از Visual Studio Code

Visual Studio Code را میتوان به راحتی بهترین ویرایش گر متن در برنامه نویسی دانست. از زمان استفاده از این ویرایشگر عاشق کار با آن شده‌ام. Visual Studio Code یک برنامه جاوا اسکریپتی است که بر پایه الکترون طراحی شده است(مانند اتم یکی دیگر از ویرایشگر های رایج متون). این نرم افزار بسیار سریع بوده و از مشکلات مربوط به کارایی رنج نمی‌برد.

visual-studio-code

 چیزی که در بیشتر اپلیکیشن‌های جاوا اسکریپت دیده می شود. اما نکته ای که می تواند شما را شگفت زده کند این است که ویژوال استودیو کد یک پروژه سورس باز بوده که سورس کامل آن در گیت هاب قرار گرفته است. در این مقاله به نکاتی از این نرم افزار اشاره می‌کنم که می‌تواند در استفاده از آن به شما کمک کند.


۱.در Command Palette ویژوال استودیو کد استاد شوید

vscode

مانند نرم افزارهای Sublime و TextMate ویژوال استودیو کد نیز چیزی به نام command palette دارد. این ویژگی به شما کمک می کند که فقط با تایپ کردن دستورات به امکانات مختلف نرم افزار دسترسی پیدا کنید. 

بدون اینکه مجبور باشید از منو ها استفاده کنید می‌توانید با استفاده از ترکیب کلیدهای Ctrl + Shift + P به command palette دسترسی پیدا کنید. سپس فقط کافیست چیزی را که میخواهید تایپ کنید. پس از این گزینه ها بر اساس جستجوی شما دسته بندی می شوند. این ویژگی دسترسی به امکانات نرم افزار را بسیار سریع می کند.

۲.پوشه ای که مربوط به پروژه کار شماست را تعیین کنید

vs

اگر در نوار کناری نرم افزار بر روی Explorer کلیک کنید برای شما یک زیر پنل نمایان میشود. این پنل به دو قسمت تقسیم می شود. Open Editors (فایل ها و اسنادی که در حال حاضر باز هستند) و فولدرهایی که بسته هستند.

بر روی Open Folder کلیک کنید (و یا از منو File > Open Folder را انتخاب کنید)، سپس هر فایلی که در سیستم، مورد نظرتان است را انتخاب کنید. این کار باعث می‌شود فولدر مورد نظر در VS Code به عنوان پروژه جاری شما بارگذاری شود و به شما اجازه می دهد که به همه فایل ها و فولدر های آن دسترسی داشته باشید.

۳.چندین فایل را همزمان مشاهده کنید

vs

بیشتر ویرایشگر های پیشرفته متن امکان مشاهده چندین فایل را به صورت همزمان برای شما فراهم می آورد و به شما اجازه می دهند در بین تب های این فایلها پیمایش کنید. ویرایشگر های پیشرفته امکان ویرایش فایل ها به صورت side-by-side را به شما میدهند. این امکان در Visual Studio Code به صورت افقی پشتیبانی می شود.

البته ویرایش فایلها بصورت side-by-side در مانیتورهای کوچکتر کمی کار را سخت می‌کند. در Visual Studio Code چیزی به نام پنل های داینامیک وجود دارد. با استفاده از این امکان زمانی که تب های اسناد شما بیش از حد باریک شوند با فعال شدن هر کدام این تب ها، آنها در کل صفحه گسترش می‌یابند. این مکان می‌تواند برای شما دوست داشتنی باشد.

۴. ویرایش چندین خط به طور همزمان

vs

اگر شما نیاز داشته باشید که نمونه ای از متنی را در چند خط از کد خود اضافه و یا حذف کنید، همه آن چیزی که باید انجام دهید این است که چندین مکان نما ایجاد کنید. می‌توانید این کار را با پایین نگه داشتن دکمه Alt و کلیک در هر نقطه از متن انجام دهید. این کار در اسناد html می‌تواند بسیار مفید باشد برای مثال زمانی که نیاز دارید  نمونه ای از یک کلاس را در چند جای متن اضافه کنید و یا فرمت چندین هایپر لینک را تغییر دهید. این امکان را یاد بگیرید و از آن لذت ببرید.

۵. به تعاریف رجوع کنید

vs

زمانی که در حال کدنویسی هستید ممکن است به متغیرها و یا توابعی برخورد کنید که آنها را به خاطر نمی آورید در این مواقع چه کاری انجام می دهید؟ می توانید چندین دقیقه در کد خود به دنبال تعریف آن عنصر بگردید و یا اینکه با استفاده از مکان نمای موس متغیر و تابع مورد نظر خود را انتخاب کرده و  سپس دکمه  F12 را بفشارید. در این صورت سریعا به تعریف عنصر مورد نظر خواهید رفت.

vs

می توانید از ترکیب کلید Alt + F12 نیز استفاده کنید. در این صورت تعریف مورد نظر در همان جایی که مکان نما قرار دارد به شما نمایش داده می شود و فایل سورس مورد نظر باز نمیشود. باالعکس برای یافتن تمام رفرنس های یک متغیر و یا تابع در برنامه می توان از ترکیب کلید های Shift + F12 استفاده نمود. به منظور کار کردن این ویژگی ها باید اطمینان حاصل کنید که فولدر مورد نظر به عنوان پروژه کار جاری باز باشد.

۶.تغییر نام در همه مکان‌ها

vs

عمل ریفکتورینگ یکی از ملزومات لازم برای نوشتن کدی است که تمیز باشد. اما زمانی که پروژه شما خیلی بزرگ باشد این کار می‌تواند برای شما بسیار سخت باشد. بنابراین به جای رجوع به دهها فایل و تغییر نام یک متغیر و تابع در آنها، اجازه دهید که Visual Studio Code برای شما این کار را انجام دهد.

اگر شما یک متغیر و یا تابع را انتخاب کنید و سپس دکمه F2 را بفشارید می توانید نام آن عنصر را تغییر داده و سپس این تغییر در کل پروژه شما اعمال خواهد شد. اگر می‌خواهید تغییرات تنها در فایل جاری شما انجام شود از ترکیب Ctrl + F2 استفاده کنید/

۷.جستجو در میان همه فایل ها

vs

زمانی که نیاز دارید به دنبال یک کلمه و یا جمله ای در همه فایل های خود بگردید می توانید از امکان جستجوی این نرم افزار استفاده کنید. با استفاده از ترکیب دکمه های Ctrl + F می توانید در فایل جاری جستجو را انجام دهید. در صورتی که بخواهید جستجو در تمام فایل های پروژه شما انجام شود از ترکیب Ctrl + Shift + F استفاده کنید.

۸.از Command Line در ویژوال استودیو کد استفاده کنید

vs

ویژوال استادیو کد شامل یک خط فرمان است. این خط فرمان در ویندوز با نام Command Prompt شناخته می‌شود. با این حال دستورات Command Line در فایل های پروژه جاری شما کار می کنند. با استفاده از این امکان می توانید دستورات مورد نظرتان را اجرا کنید.

۹.دانلود تمی جدید در جایگزین

vs

همانطور که انتظار می رود ویژوال استادیو کد به شما اجازه می دهد قالب کدهای خود را تغییر دهید. این می‌تواند برای بسیاری از اهمیت بالایی برخوردار باشد. شما می توانید از تم های رایگانی که در لینک VS Code Marketplace قرار دارد، استفاده کنید.

۱۰.نصب افزونه های خارجی

vs

آخرین ویژگی لازم و ضروری قابلیت گسترش پذیری نرم افزار Visual Studio Code است. از طریق افزونه هایی که برای این نرم افزار وجود دارد می توان قابلیت های این نرم افزار را افزایش داد. با استفاده از ترکیب کلیدهای Ctrl + Shift + X می توان به پنل Extensions در ویژوال استادیو کد دسترسی داشت. استفاده از افزونه ها می توانند کارهای شما را بسیار ساده کند. شما می توانید ابزار های گوناگونی را در این پنل پیدا کنید.

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۶ دلیل برای اینکه وب سایت شما به گواهینامه ssl نیاز دارد

ر ابتدای این مقاله باید اعتراف کنم هنوز وب سایت ما از گواهینامه ssl بهره نمیبرد که البته به زودی نسخه ای مناسب را برای لرن سورس بر روی سرورمان نصب میکنیم. وقتی وارد سایتی میشیوید حتما به نوار آدرس آن سایت توجه میکنید. در قسمت آدرس، شما ممکن است کلمه https را مشاهده می کنید که نشان میدهد وب سایت  مورد نظر از گواهینامه ssl استفاده می‌کند. این به این معناست که اتصال شما به آن وب سایت کاملاً امن است.

need-ssl-certificate

وقتی سایتی مخصوصاً اطلاعات کارت بانکی شما را میخواهد حتما باید به این مورد توجه کنید. اگر چه امروزه شما این گواهینامه ها را در همه جای وب میتوانید مشاهده کنید. گواهینامه های ssl بسیار مهم هستند مخصوصاً اگر شما سایتی را برای خود راه اندازی کرده باشید. اهمیتی ندارد که شما یک وبلاگ کوچک دارید و یا یک سایت بزرگ فروشگاهی چیزی که اهمیت دارد این است که نیاز به یک گواهینامه ssl دارید. در این مقاله به چندین دلیل برای داشتن این گواهینامه‌ها اشاره خواهم کرد.

محافظت از اطلاعات شما در برابر هکر ها

Unsafe-connection

http یک پروتکل متنی است که اطلاعات را  بین کامپیوتر( یا دستگاه شما) و سایت مورد نظر رد و بدل میکند. https نسخه ای امن از http است. این پروتکل اطلاعات انتقالی را رمزگذاری می کند. بنابراین اطلاعات رد و بدل شده غیر قابل خواندن و ردیابی است. در صورتی که اطلاعات کارت بانکی مشتری خود را در فرم های سایت خود از آنها دریافت می کنید، استفاده از https ضروری است.

این پروتکل از اطلاعات شما در برابر اشخاص ثالث (هکرها) محافظت می کند. ممکن است این مسئله را جدی نگیرید، اما بدون رمزگذاری اطلاعات یک هکر می تواند صفحه جعلی را به شما نشان دهد که کلیک کردن بر روی لینک های آن صفحه می تواند عناصر مخربی را در کامپیوتر شما دانلود کند .

بدست آوردن اعتماد بیشتر کاربران

MUO-Secure-Connection

داشتن این گواهینامه ها شما را در نظر کاربران قابل اعتماد تر نشان می‌دهد. سایتی که دارای گواهینامه های ‏ssl باشد در کاربران اعتماد بیشتری ایجاد می کند. حتی ممکن است خود شما وقتی وارد سایتی می شوید اولین چیزی که توجه شما را جلب کند، آدرس آن سایت باشد. شما می خواهید بدانید آدرس وب سایت مورد نظر با https شروع شده است و یا خیر. مخصوصاً زمانی که بخواهید اطلاعات مالی خود را در اختیار سایت مورد نظر قرار دهید.

بعضی از کاربران حتی از VPN برای تعیین سطح امنیت وب سایت شما استفاده می کنند. چندین سال پیش افراد کمی از گواهینامه های ssl استفاده می‌کردند. اما در زمان کنونی مدیران وب سایت ها از اهمیت این گواهینامه‌ ها کاملا آگاه هستند. احتمالا باید از گوگل برای بالا بردن این آگاهی تشکر کنیم. با داشتن پروتکل https پیامی را به خوانندگان و مشتریان خود ارسال می کنید. پیام شما این است که آنها برای شما مهم هستند.

شما برای حریم خصوصی آنها احترام قائلید و با این کار اعتماد به نفس خود را بالا می‌برید. نداشتن این گواهینامه‌ها برای سایتی یک نقطه ضعف محسوب می‌شود و ممکن است بسیاری از کاربران از بازگشت به وب سایت شما خودداری کند.

مرورگر کروم وب سایت شما را به شکل مناسبی نشان می‌دهد

Chrome-download

مشکل بعدی که برای وب‌سایت‌هایی که ssl ندارند به وجود می آید این است که سایت آنها در مرورگر کروم با یک هشدار روبه‌رو می‌شود. این هشدار به بازدیدکننده می گوید که سایت مورد نظر کاملاً امk نیست. این مورد زمانی کار را بیشتر سخت می‌کند که بدانید کروم محبوب ترین مرورگر کنونی است. این هشدار پیام بدی برای کاربران شما خواهد بود.

از طرفی گوگل کروم برای وب سایت هایی که از پروتکل https استفاده میکنند پیام مناسب Secure را نشان می‌دهد. در سال ۲۰۱۸ گوگل موضع خود را در مورد پروتکل های موجود در اینترنت تغییر داد و به جای پروتکل http از https به عنوان پروتکل پیش فرض استفاده کرد. پس باید به این نکته توجه کافی داشت.

بهبود رتبه بندی در موتورهای جستجو

HTTPS

در قسمت قبل به شما گفته بودم که مرورگر کروم سایت شما را بدون ssl اصلا دوست ندارد. بدبختانه باید بگویم اگر ssl نداشته باشید گوگل هم شما را دوست نخواهد داشت.  بسیاری برای به دست آوردن کاربران بیشتر به رتبه بندی گوگل متکی هستند. اما سایت هایی که از گواهینامه های ssl استفاده می کنند شانس بیشتری برای گرفتن جایگاهی بهتر در لیست های جستجو دارند.

اگر از متخصصان سئو  بپرسید آنها به شما خواهند گفت که قرار گرفتن در صفحه اول نتایج جستجو چقدر از اهمیت برخوردار است. برای رقابت با سایت‌های دیگر باید این مورد را فراموش نکنید. بدون داشتن گواهینامه های ssl نه تنها کاربران بلکه گوگل نیز به شما اعتماد نخواهد کرد. پس از همین امروز به فکر یک گواهینامه ssl برای وب سایت خود باشید.

افزایش سرعت وب سایت

HTTP-vs-HTTPS

رتبه بندی وب سایت شما تا حد زیادی به سرعت وب سایت شما بستگی دارد. سرعت بیشتر وبسایت به داشتن بازدیدی بالاتر کمک می‌کند و در نتایج جستجو به مراتب بالاتر قرار می‌گیرد. شاید باور نکنید ولی وقتی وب سایت خود را با https مجهز می کنید، از سرعت بیشتری برخوردار می شوید. دقیقا عکس چیزی که در ذهن شما ممکن است وجود داشته باشد. در واقع این که می گویند با نصب یک ssl از سرعت سایت شما کاسته می‌شود یک افسانه است.

در مجموع سایتی که دارای گواهینامه ssl است از سرعت بالاتری برخوردار است. همانطور که شما از داشتن سایتی با کارایی بالاتر سود خواهید برد، کاربران شما هم از آن بهره می‌برند. وقتی کاربران سریع تر بتوانند به اطلاعات دسترسی داشته باشند مطمئن باشید به وبسایت شما باز خواهند گشت.

هزینه نصب یک گواهینامه ssl چندان زیاد نیست

افزودن یک گواهینامه ssl به یک سایت می تواند ترسناک باشد. به همین دلیل وب سایت های کوچک اغلب این کار را انجام نمی‌دهند. عده ای دیگر از هزینه‌های این سرویس خوشحال هستند زیرا همیشه کسانی وجود دارند که از تکنولوژی به نفع خود بهره ببرند. برخی از میزبان های وب بر روی نسخه های مختلفی از این گواهینامه‌ها تبلیغات می‌کنند که می‌تواند برای شما بسیار پرهزینه باشد.

اما شاید این گواهینامه ها اصلا مورد نیاز شما نباشند. حتی نسخه های رایگان گواهی نامه ssl نیز وجود دارد پس با توجه به نیازتان گواهی مورد نظر خود را انتخاب کنید.

مخلص کلام

سایت شما چه بزرگ باشد و یا کوچک ، چه وبلاگ باشد و یا یک فروشگاه اینترنتی، چیزی که اهمیت دارد این است که برای امنیت خود و کاربرانتان ارزش قائل باشید. نباید مسئولیت خود را در قبال اطلاعات دیگران نادیده بگیرید. پس اگر تاکنون برای داشتن گواهینامه ssl اقدام نکرده اید الان زمان آن است که این تصمیم را بگیرید.

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

Sass چیست و چه کاربردهایی دارد؟

Sass مخفف کلمات Syntactically Awesome Stylesheets است. Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند. به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند. Sass مدیریت و نگهداری استایل های css را ساده‌تر می‌کند. به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.

sass

این کار باعث می شود کار خود را سریعتر پیش ببریم. به خاطر داشته باشید زمانی که در Sass کدهای خود را مینویسیم، مرورگر ها نمی توانند این کدها را درک کنند و دلیل این عدم درک هم این است که کدهای نوشته شده به زبان css نیستند.

 پس ما به یک کامپایلر نیاز داریم تا کد های نوشته شده در Sass را به css تبدیل کنیم. نرم افزار های زیادی برای این کار وجود دارند که بعضی از آنها عبارتند از :

با این حال ما قصد نداریم در این مقاله همه مراحل نصب و کامپایل Sass را بیان کنیم. اگر می‌خواهید تجربه بیشتری در این مورد به دست آورید، به شما پیشنهاد می کنم از یک ویرایشگر آنلاین همچون Codepad استفاده کنید. با این کار نیاز ندارید نرم افزارهای مربوطه را بر روی کامپیوتر خود نصب کنید.

به صورت خلاصه باید بگویم Sass یک پیش پردازنده برای زبان css است. پیش پردازنده ها به ما کمک می کنند از ویژگی های منحصر به فردی در css استفاده کنیم. یک پیش پردازنده زبانی اسکریپتی بوده که به توسعه دهندگان اجازه می دهد کدها را به آن زبان نوشته و سپس به صورت css از آن خروجی بگیرند.

 اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید.

چیزی که برای ورود به این دنیای جذاب نیاز دارید این است که درک کاملی از موارد پایه ای و کدهای css داشته باشید. Sass یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.

چرا بهتر است از Sass استفاده کنیم؟

اگر شما با دوستان خود که در زمینه front-end کار می‌کنند، صحبت کرده باشید ممکن است آنها به شما گفته باشند html و css زبان هایی با نقطه ضعف های بزرگی هستند. دلیل آن هم این است که کدهای آنها از پیش تعریف شده است و بارها تکرار می‌شود و شما مجبورید کد های تکراری بنویسید.

اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.

در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.

چگونه از Sass استفاده کنیم؟

قبل از اینکه به توضیح در مورد ویژگی های منحصر به فرد این افزونه کاربردی بپردازم، بهتر است قواعد نوشتاری Sass را بررسی کنیم. باید توجه داشته باشید دو قاعده نوشتاری و یا سینتکس برای Sass وجود دارد که هر دو در نهایت خروجی یکسانی را برای ما تولید می‌کنند

  • SCSS : استفاده از فایلی که دارای فرمت scss. است و با css هم بسیار سازگار است.
  • SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریع‌تر نوشته می‌شود.

 در این مقاله از قاعده نوشتاری اول استفاده می کنیم.

متغیرها

متغیرها بسیار قدرتمند هستند. زیرا آنها به شما اجازه می‌دهند کد خود را سریع تغییر دهید. وقتی متغیری را تعریف می‌کنید، مقداری مشخص را در آن ذخیره می‌کنید. مقادیر مجاز برای متغیرها عبارتند از :  اعداد، رشته‌ها، رنگها، null و ... . برای تعریف متغیرها در Sass باید از علامت $ استفاده کرد و به دنبال آن نام متغیر را نوشت.

در زیر متغیری به نام blue تعریف شده است. بعد از نام متغیر از علامت (:) استفاده کرده ایم. سپس بعد از علامت (:) هم میتوان مقدار متغیر را مشخص کرد. در انتها برای مشخص کردن خاتمه عبارت از علامت (;) استفاده کرده‌ایم.  

$blue: #3498db;

اکنون بیایید ببینیم متغیر ها در عمل چگونه اند :

/*
// We define the variables.
*/
$blue: #3498db;
$red: #e74c3c;
$background: #34495e;
 
/*
// We apply the variables.
*/
body {
  background-color: $background;
}
 
h1 {
  color: $blue;
}
 
p {
  color: $red;
}

کدی که در بالا نوشته شده است به زبان Sass است که در css به شکل زیر  کامپایل می شود :

body {
  background-color: #34495e;
}
 
h1 {
  color: #3498db;
}
 
p {
  color: #e74c3c;
}

روشی که در بالا به آن اشاره شد یکی از پایه ترین حالت هایی است که می توان از متغیرها در Sass استفاده نمود. شما می توانید کارهای بزرگ تر و پیچیده تری با استفاده از متغیرها انجام دهید. من از انجام این کارها صرف نظر می کنم زیرا که در این مقال نمی گنجد.

تودرتویی در Sass

Sass به شما اجازه می دهد از قواعد css برای تو در تویی استفاده کنید تو در تویی یک روش فوق العاده برای سازماندهی و ساختار دهی کدهای css است و به شما اجازه می دهد از تکرارهای غیرضروری پرهیز کنید. بگذارید در زیر نمونه ای از قدرت این ویژگی را به شما نشان دهم :

ul {
  list-style: none;
 
  li {
    padding: 10px;
    display: inline-block;
 
    a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
  }
}

پیشنهاد من به شما استفاده از حداکثر ۴ سطح تودرتویی است. این کار باعث می‌شود کد شما سادگی کد خود را همچنان حفظ کنید.

گسترش پذیری / وراثت

 وراثت یکی از مفیدترین ویژگی های Sass است. با استفاده از گسترش پذیری می توانیم مجموعه ای از مشخصه های css را از یکی به دیگری منتقل کنیم. گسترش پذیری زمانی استفاده میشود که چندین عنصر دارای اشتراکاتی در مشخصه های css باشند. استفاده از گسترش پذیری به شدت در نوشتن کد های تکراری صرفه‌جویی می‌کند. در نمونه مثال زیر دو دکمه موردنظر فقط در مشخصه background-color تفاوت دارند :

$blue: #3498db;
$red: #e74c3c;
$white: #fff;
 
.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}
 
.btn-primary {
  @extend .btn;
  background-color: $blue;
}
 
.btn-secondary {
  @extend .btn;
  background-color: $red;
}


مثال بالا در css به شکل زیر کامپایل می‌شود :

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}
 
.btn-primary {
  background-color: #3498db;
}
 
.btn-secondary {
  background-color: #e74c3c;
}

اکنون متوجه قدرت این ویژگی شدید؟ ویژگی جالبی که در مثال بالا وجود دارد این است که Sass انتخاب کننده ها را با هم ترکیب کرده است، در حالی که می‌توانست مشخصه ها را تکرار کند این کار حتی در اندازه حجم فایل کامپایل شده هم تاثیرگذار است.

Mixins

Mixins ها یکی دیگر از ویژگی‌های فوق‌العاده Sass هستند. به صورت پایه ای یک Mixins به شما اجازه می دهد تعاریفی از سی اس اس را که می خواهید از آنها در وبسایتتان استفاده مجدد انجام دهید، گروه‌بندی کنید. ما مقادیر را به صورت آرگومان ارسال می‌کنیم.

این کار باعث می‌شود Mixins ها قابلیت انعطاف بیشتری داشته باشند. Sass از دستور  mixin@ برای تعریف Mixins ها استفاده کرده و از دستور include@ برای استفاده از آنها در برنامه بهره می‌برید. در نمونه مثال زیر یک Mixins ساده را برای مشخصه border-radius ایجاد کرده ایم که از آن برای دکمه ها استفاده می شود :

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}

 خروجی نمونه مثال بالا در css عبارت است از :

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

نمونه مثال بالا استفاده بهینه از یک Mixins را نشان می دهد.

Partialها

Partialها فایل های کوچک Sass هستند که می توان آنها را در دیگر فایل های Sass استفاده کرد این کار باعث می شود فایل های css شما حالت ماژولار داشته باشند و عیب یابی آنها ساده تر شود. نام گذاری پارشل ها به صورت partial.scss_ است. 

نتیجه

مباحثی که در این مقاله بیان شد یک مقدمه کوتاه از Sass بود. Sass یک ابزار قدرتمند است که به ما اجازه می دهد کارهای فوق العاده ای را انجام دهیم. پس اگر هنوز کار با آن را شروع نکرده اید اکنون زمان آن فرا رسیده است که از این ابزار قدرتمند استفاده کنید.

منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

چرا طراحان و توسعه دهندگان وب باید با همدیگر کار کنند؟

به نظر می رسد این یک ایده مفید و کاربردی است : طراحان و توسعه دهندگان وب سایت باید با هم دیگر کار کنند. اما در اغلب موارد با وجود اینکه آنها روی یک پروژه یکسان کار می کند از همدیگر مستقل عمل می‌کنند. طراحان سایت برای ایجاد عناصر، پالت های رنگی و تایپوگرافی کار می‌کنند که می‌تواند ظاهری زیبا برای وب سایت به ارمغان بیاورد. در حالی که توسعه دهندگان وب سایت به کدنویسی می‌پردازند و همه چیز را برای انتشار وب سایت در فضای اینترنت آماده می‌کنند.

designer-developer

همه ی این کارها ممکن است باعث اختلاف بین طراح و توسعه دهنده در طراحی نهایی پروژه شود. اگر طراحان و توسعه دهندگان وب سایت از ابتدا تا انتهای پروژه با همدیگر کار کنند نتیجه کار، طراحی بهتر، رابط کاربری موثرتر و کدنویسی تمیزتر است. این همکاری باعث می شود پروژه در زمان کمتری خاتمه یابد.

طراحان و توسعه دهندگان وب در مقابل هم

از قدیم طراحان و توسعه دهندگان وب سایت دارای عناوین شغلی جداگانه ای بوده‌اند. معمولاً طراحان وب از نرم افزارهای طراحی گرافیکی مانند فتوشاپ و ایلاستریتور برای ساخت عناصر و المان های طراحی استفاده می‌کنند. سپس طراحی ایجاد شده با استفاده از html ، javascript  و css و دیگر زبان های برنامه نویسی توسط توسعه دهندگان وب به یک وب سایت واقعی(که در اینترنت کار میکند) تبدیل می شود.

اگرچه ممکن است طراحان و توسعه‌دهندگان اغلب در مکان‌های جدا از هم و یا شاید کشورهای مختلف کار کنند، اما نکته‌ای که وجود دارد این است که هر کدام از آنها به دیگری برای ساخت یک وب سایت کامل نیاز دارند. پس آنها باید با همدیگر کار کنند.

مزایای کار کردن با همدیگر

اگر بخواهیم ساده بگوییم بزرگترین دلیلی که طراحان و توسعه دهندگان وب باید با همدیگر کار کنند ایجاد یک پروژه وب کامل تر است. از نقطه نظر تجربه هم همیشه زمانی پروژه  بهتری داشتیم که طراحان و توسعه دهندگان با همدیگر همکاری کرده اند. امروزه اگر این همکاری وجود نداشته باشد نمی‌توان پروژه‌های بزرگ را به اتمام رساند.

مزایای دیگر این همکاری عبارتند از :

  • بیش از یک نفر بر روی یک پروژه کار میکنند و تسلط بیشتری برای پیدا کردن اشتباهات وجود دارد.
  • با همکاری همدیگر می‌توان خلاقانه تر عمل کرد.
  • وقتی این همکاری صورت می‌گیرد طراح از توانایی‌های توسعه دهنده آگاه می‌شود و طرح هایی را ایجاد میکند که توسعه دهنده توانایی کد نویسی آن را داشته باشد.
  • با این همکاری محصولی کامل‌تر و یکپارچه تر در تولید می‌شود.
  •  این همکاری باعث میشود اطلاعاتی از طراحی و هم توسعه به دست می‌آورید.
  • این همکاری باعث میشود ایده های خود را باهم ادغام کرده و نتایج بهتری بدست آورید.

معایب همکاری با یکدیگر

اگرچه دوست دارم به شما بگویم همکاری با یکدیگر هیچ عیبی ندارد ولی این سخنی نادرست است. معایب زیادی برای همکاری با یکدیگر وجود ندارد اما  دو مورد وجود دارد که لازم است آنها را در نظر بگیرید.

ممکن است زمانی که یکی از افراد حاضر نباشد هزینه‌هایی برای پروژه ایجاد شود. در این مواقع برای به تاخیر نیوفتادن کار از ابزارهایی همچون ارتباطهای اینترنتی و تکنولوژی استفاده کنید. بعضی از ما تمایل نداریم با دیگری کارکنیم و یا شاید روحیه تیمی را نداشته باشیم. در این صورت کار کمی سخت خواهد شد. باید یاد بگیریم با هم همکاری تیمی داشته باشیم.

چه کارهایی برای این همکاری باید انجام دهید؟

wireframes

اکنون که در مورد همه مزایا و معایب کار با یکدیگر مطالبی را آموختیم چطور می توانید در عمل با یک طراح و یا یک توسعه دهنده همکاری داشته باشید. این کار با یک ارتباط خوب میسر خواهد شد. طراحان و توسعه دهندگان ابتدا باید پروژه ای را در نظر گرفته و به یک تصویر بزرگ از آن فکر کند و مشخص کند که در طول فرایند طراحی چه تصمیماتی باید گرفته شود.

در طول این راه با چالش های مختلفی روبرو می‌شوید. بهترین زمان برای شروع این همکاری یک ناهار کاری و یا حتی خوردن قهوه و قدم زدن با یکدیگر است. در مورد نحوه همکاری تیمی با یکدیگر و پیشبرد اهداف صحبت کنید. هر کسی که در پروژه‌ دخالت دارد باید وظایف خود را بداند و آن را با دیگران به اشتراک بگذارد. در طول این مسیر انتقادهای سازنده می‌تواند به هر دو طرف کمک زیادی بکند.
 

۵ نکته برای طراحان سایت

اگر یک طراح سایت هستید به این ۵ نکته توجه کنید :

  • تئوری طراحی را به شیوه‌ای ساده برای توسعه دهنده توضیح دهید تا درک کند زیباشناسی چطور به دست می آید.
  • عناصر تعاملی و نحوه کار با آنها را همانطور که در حال طراحی هستید، در نظر بگیرید و اطمینان حاصل کنید تمام قسمت های طراحی شده برای تعامل طراحی شده‌اند.
  • طراحی را کامل انجام دهید و انتظار نداشته باشید توسعه‌دهنده قسمت هایی را کپی و پیست کند. عناصر را برای هر قسمت طراحی و آماده کنید.
  • در طول راه می توانید از توسعه دهنده کمک بگیرید. برای مثال شما مطمئن نیستید که فونتی که در طراحی استفاده می کنید در وبسایت بتواند استفاده شود.
  • عناصر طراحی را در فرمت های قابل استفاده ارائه دهید این عناصر باید دارای وضوح و اندازه مناسب برای استفاده در صفحات وب باشند.

نکاتی برای توسعه دهندگان سایت

در مورد طراحی اطلاعاتی را به دست آورید دانستن اطلاعاتی در مورد رنگ ها و انواع آنها می‌تواند در مسیر توسعه به شما کمک کند. در مورد کارهایی که میتوانید و یا نمیتوانید به طراح خود توضیح دهید. اگر طراح در حال قدم گذاشتن در مسیری باشد که نمیتوان آن را در وب ترجمه کرد،باید از آن زودتر اطلاع پیدا کند. برای پاسخ به سوالات و کمک در طول طراحی همیشه در دسترس باشید. در طول فرآیند طراحی از ابتدا مشارکت کنید و یکپارچگی در طراحی را حفظ کنید.

مهارت هایی که هرکس میتواند از آن بهره ببرد

skill

برای کاهش شکاف بین طراحان و توسعه دهندگان وب و برای همکاری بهتر هر یک از این دو نیاز دارد از زبان یکدیگر صحبت کند. طراحان و توسعه دهندگان باید شروع به گسترش مهارت های خود کنند. هر طراح و توسعه دهنده باید دانش پایه ای از موارد زیر را داشته باشد :

  • اصول طراحی مانند رنگ فضا و تایپوگرافی
  • فرمت های بهینه برای تصاویر و اندازه آنها
  • دانش پایه ای از html و css
  • نحوه استفاده از فونت های وب
  • روند توسعه و طراحی
  • درک خواسته های کاربر
  • آشنایی با فریم ورک های مشهور و کاربردی
     
منبع: لرن سورس

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

برنامه نویسی چطور بر مغز شما تاثیر میگذارد؟

این حقیقت دارد که برنامه نویسان همانند دیگران فکر نمی کنند. نمی توان گفت لزوما برنامه نویسان نسبت به دیگران باهوش تر و منطقی تر هستند. اما دانشمندان به تازگی شروع به تحقیقاتی در مورد مغز برنامه نویسان کرده اند و به نتایج جالبی دست یافته‌اند. همانطور که هنر مندان می توانند ذهن شان را به شکل های مختلفی در بیاورند. ذهن یک برنامه نویس هم با توجه به نوع فکر او می تواند به شکل های مختلفی در بیاید و شاید مغز شما به شکلی شده باشد که فکرش را هم نمی کردید.

brain-programming

کدنویسی مدل های ذهنی شما را شکل میدهد

آیا اینکه اولین بار چه زبان برنامه نویسی را یاد گرفتید اهمیتی دارد؟ بله البته. این مسئله ممکن است کمی غیرمنصفانه به نظر برسد. بیشتر ما اولین مزه برنامه نویسی را در دوران مدرسه چشیده ایم و نمی دانیم کدام زبان برای ما مفید تر است. من با زبان C شروع کردم کسانی که سنشان از من بیشتر است با زبان هایی مثل فورترن ، کوبول و بیسیک شروع کردند.

اکنون برای گروه‌هایی که جوان تر هستند احتمالا زبان های جاوا و پایتون در دسترس است. هیچ شکی درآن نیست که نحوه طراحی یک زبان برنامه نویسی بر چگونگی فکر کردن شما تاثیر می گذارد.

دیکسترا یکی از موثرترین افراد در حوزه علوم کامپیوتر میگوید : ابزارهایی که استفاده میکنیم برطرز تفکر ما و در نهایت بر روی توانایی اندیشیدن ما تاثیر میگذارد. او در جایی گفته است :

"استفاده از زبان کوبول ذهن را فلج میکند و آموزش دادن این زبان باید جرم تلقی شود."

و حتی در جایی دیگر گفته است :

"برنامه نویسی برای کسانی که قبلا زبان بیسیک را یاد گرفتند تقریبا غیر ممکن است آنها از نظر ذهنی فلج شده اند"

از لحاظی همه زبان های برنامه نویسی از نظر تئوری کامل و یکسان هستند اما به هرحال تسلط بر یک زبان می‌تواند بر روی یادگیری دیگری تاثیر بگذارد. برنامه نویسان جاوا و پایتون افرادی هستند که به دو روش کاملا متفاوت کد نویسی را فرا گرفتند به عبارت دیگر روش ها و اصطلاحاتی که در اولین زبان برنامه نویسی فرا میگیرید، بر روی نحوه فکر کردن شما درباره ساختمان داده، الگوریتم ها و ... تاثیر می گذارد.

کد نویسی به تقویت سلامت مغز کمک می کند

اغلب مردم می گویند که مغز همچون یک عضله است و اگر می خواهید قوی بماند باید آن را ورزش دهید. اما آیا این واقعا درست است؟ و اگر این چنین است آیا برنامه‌ای برای تقویت مغز وجود دارد.

طبق مطالعه‌ای که در سال ۱۹۹۱ انجام شد، مشخص شد که دانش آموزانی که برنامه نویسی کامپیوتر را آموخته‌اند در آزمون‌های توانایی شناختی امتیازات بالاتری نسبت به دیگر دانش‌آموزان به دست آورده‌اند. مطالعه‌ای بزرگتر در سال ۲۰۰۹ به نتیجه مشابه دست یافت و مشخص شد افرادی که در فعالیت‌های مغزی تحریک کننده مانند برنامه نویسی شرکت می‌کنند از خطر ابتلا به آلزایمر و بیماری های زوال عقل در امان هستند.

 نتیجه گیری

برنامه نویسی یکی از مهیج ترین و مشکل ترین کارهای دنیاست. برنامه نویسی به شما کمک میکند همچون یک ورزشکار مغز خود را تقویت کنید.

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

چرا زبان های برنامه نویسی بدون توابع وجود نخواهند داشت؟

یکی از بلوک های اصلی سازنده زبانهای برنامه نویسی توابع هستند. شما میتوانید برنامه خیلی ساده ای را بدون نیاز به یک تابع بنویسید. ولی هر برنامه ای به جز برنامه ساده "Hello World" احتمالا نیاز به یک تابع دارد.

آیا تا به حال فکر کرده که چرا توابع سنگ بنای بسیاری از زبان‌های برنامه‌نویسی هستند. در این مقاله به دلایلی خواهم پرداخت که مشخص میکند چرا توابع برای زبان های برنامه نویسی تا این حد حیاتی هستند!

programming-function

یک تابع چیست؟

اگر بخواهم خیلی ساده بگویم یک تابع یک بلاک از کد است که با یک نام شناخته می‌شود و برای ما قرار است وظیفه مشخصی را انجام دهد. بسته به زبانی که شما استفاده می کنید تابع ممکن است نام های متفاوتی داشته باشد. برای مثال پروسیجر ، متد و غیره.

وقتی تابعی را تعریف می کنید کدی را داخل آن قرار می دهید، دقیقا مثل زمانی که برنامه ای را می نویسید. با مشخص کردن یک نام برای تابع و تعیین پارامترهای آن شما می توانید اطلاعات مورد نظر خود را به سمت تابع ارسال کرده و خروجی مورد نظر را به دست آورید. توابع قابلیت استفاده مجدد دارند پس وقتی یک بار آن را در برنامه تعریف می کنید می توانید چندین بار در قسمت های مختلف برنامه آن را فراخوانی کنید. بنابراین توابع برای ما بسیار مفید هستند.

توابع وظایف را کپسوله سازی میکنند

معمولا می‌توان به توابع همچون یک جعبه سیاه نگاه کرد. کاری که یک برنامه نویس باید انجام دهد تنها فراخوانی آن تابع است و لزومی ندارد بداند چه اتفاقی در آن می افتد. فقط به نتیجه بازگشتی از تابع نیاز دارد. برای مثال اگر شما تابعی نوشته باشید که اعداد زیادی را از یک فایل متنی خوانده و جمع آنها را به دست می آورد، لازم نیست بدانید آن چطور این کار را انجام می دهد. فقط کافیست آن را فراخوانی کنید.

یک بار تابع را پیاده سازی می کنید و سپس میتوانید در برنامه های مختلف بدون دردسر از آن استفاده کنید.

توابع وظایف را جداسازی می‌کنند

تنها مزیت تابع کپسوله سازی کدها نیست بلکه آنها به برنامه نویس اجازه میدهند به صورت تمیز کد های خود را به بخش‌های مختلفی تقسیم کند. در این صورت برنامه شما می تواند شامل چندین خط کد باشد و کارهای اصلی در آن را با فراخوانی توابع انجام دهید. این هسته برنامه نویسی شی گرا را تشکیل میدهد. از طرفی توابع باعث میشوند برنامه های ما به قطعات کوچکتر تقسیم شود و هر قسمت در اختیار یک برنامه نویس قرار گیرد.

توابع شما اجازه می‌دهند از کدها استفاده مجدد کنید

در بیشتر مواقع در کدنویسی شما کدهایی را می نویسید که در قسمت های دیگر برنامه هم به آنها نیاز دارید. یک راه این است که در قسمتی از برنامه که با آن کد ها احتیاج دارید، آن‌ها را کپی و پیست کنید که این روش توصیه نمی‌شود. این کار نه تنها به پیچیدگی برنامه شما می افزاید بلکه برنامه شما را مستعد خطا می کند.

از طرفی اگر بخواهید قسمتی از کد را تغییر بدهید، باید در برنامه همه قسمت ها را تغییر دهید. توابع این مشکلات را برطرف می‌کنند. توابع استفاده مجدد از خود را در هر جای برنامه شما آسان می‌کنند. زمانی که یک تابع را تعریف می کنید می توانید در هر زمان و در هر جایی از برنامه‌ آن را فراخوانی کنید.این کار در زمان شما صرفه جویی کرده و پیچیدگی برنامه را کاهش میدهد.

توابع قابلیت اشتراک گذاری آسان تر را فراهم می آورند

بیشتر اوقات کدی که توسط یک برنامه نویس نوشته میشود می‌تواند توسط دیگر برنامه نویسان در پروژه های دیگر شرکت مورد استفاده قرار گیرد. توابع به راحتی قابل انتقال هستند. خیلی ساده می‌توان تابعی را از یک پروژه کپی کرد و به پروژه ای دیگر انتقال داد. نه تنها این کار از تکرار جلوگیری می کند بلکه به توسعه استاندارد سازی در یک شرکت کمک می‌کند.

توابع عملیات تست کردن و  عیب یابی را آسانتر می‌کنند

بیشتر برنامه نویسان درد عیب یابی برنامه‌هایی که پر از کدهای درهم و برهم هستند را چشیده اند. بدون استفاده از توابعی تمیز، عملیات عیب یابی دشوار می‌شود. وقتی همه چیز در توابع مختلف جداسازی شد، برنامه‌نویسان می‌توانند از تست های واحد برای تضمین درستی عملکرد یک قسمت از برنامه استفاده کنند.

به جای داشتن برنامه هایی پر از کدهای درهم و برهم بر ایزوله سازی کدهای خود در توابع تمرکز کنید. توابع خوانایی برنامه را نیز افزایش می دهند. وقتی برنامه ای با استفاده از توابع نوشته شود نگهداری آن نیز آسان تر می شود.

شما میتوانید از توابع درونی نیز استفاده کنید

زمانی که صحبت از توابع می شود احتمالاً ذهن شما به سمت توابعی می رود که توسط یک برنامه نویس نوشته می شود. اما آنها تنها توابع موجود نیستند. بیشتر زبان های برنامه نویسی دارای توابع درونی هستند که می توانید به راحتی از آنها استفاده کنید. برای مثال مهم نیست از چه زبانی استفاده می کنید، شما لازم ندارید توابعی را برای عملیات های پایه ای در ریاضی بنویسید. زبان های برنامه نویسی خود از آنها پشتیبانی می‌کنند. می توانید تصور کنید اگر می خواستید خودتان این عملیات را به کامپیوتر بفهمانید چقدر باید زمان صرف می کردید؟

توابع برای برنامه نویسی حیاتی اند

اکنون که فهمیدید چرا از توابع در زبان های برنامه نویسی استفاده می شوند و چرا آنها تا این اندازه مهم هستند باید به این نکته هم توجه کنید که مهمترین دلیل برای استفاده از توابع این است که آنها به شما اجازه می دهند برنامه خود را به چندین قسمت قابل مدیریت تقسیم کنید. وقتی شما این کار را انجام می‌دهید مدیریت برنامه شما ساده تر می شود و به راحتی می توانید آن را تست کنید. بدون استفاده از توابع برنامه شما پر از کدهای تکراری می‌شود و نگهداری از این برنامه در آینده کاری دشوار خواهد بود. 

منبع: لرن سورس 

۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۵ ویرایشگر آنلاین رایگان برای کار با html

‏html در مدرن‌سازی دنیای امروز نقش مهمی را ایفا می‌کند. اگر امروز از کسی بپرسید چطور میشود به یک توسعه دهنده وب  تبدیل شد، آنها به شما درباره فریم ورک های وب در جاوا اسکریپت، فریمورک های وب در پایتون و زبان های برنامه نویسی خواهند گفت. زبان html تنها چیزی است که در این میان وجودش برای تمامی این فریم ورک ها لازم است. بدون زبان html وبی وجود نخواهد داشت.

شما باید در مورد زبان html اطلاعات کافی داشته باشید. در غیر این صورت در وب نمی‌توانید کاری را انجام دهید. برای کار با زبان html ویرایشگر های پیشرفته ای همچنین Sublime Text و Visual Studio Code وجود دارد که میتوان از آنها استفاده کرد اما اگر شما با پروژه های کوچک سر و کار دارید، می‌توانید از ویرایشگر های دیگری استفاده کنید. برای زمان هایی که نیاز دارید با تکه کد های کوچک کار کنید، استفاده از ویرایشگر های آنلاین برای شما بسیار مناسب است.

در این صورت لازم نیست آنها را در کامپیوتر خود نصب کنید. فقط نیاز به اتصال اینترنت دارید.

چرا از ویرایشگر های آنلاین html استفاده کنیم؟

editor

بهترین چیزی که در مورد ویرایشگر های آنلاین html وجود دارد این است که آنها در مرورگر شما اجرا می شوند. مرورگر شما بهترین و موثرترین ابزار برای پردازش و رندر کردن کدهای html است و این بهترین دلیل برای استفاده از مرورگر برای این کار است. استفاده از مرورگر به این معناست که شما می توانید اجرای کدهای خود را در لحظه مشاهده کنید.

اما وقتی شما کدهای html خود را در نرم افزار های مانند Notepad و TextEdit می نویسید، ابتدا باید کدهای خود را ذخیره کرده، سپس فایل مورد نظر را در مرورگر بارگذاری کنید. بعد از این مرحله برای تغییرات باید به ویرایشگر برگردید و همین مراحل را دوباره تکرار کنید. به نظر من این کاری خسته کننده و تکراری است.

یک ویرایشگر آنلاین html به صورت پویا زمانی که کدها را داخل آن می نویسید، خود را  به روزرسانی می کند. لازم نیست بین پنجره ها جابه‌جا شوید و کار ویرایش را انجام دهید. شما کد های html را در یک سمت از مرورگر می نویسید و در قسمتی دیگر خروجی را در لحظه مشاهده می کنید. می توان ویرایشگرهای مستقل را طوری پیکربندی کرد که خروجی لحظه ای داشته باشند ولی این کار آسان نیست.

برای مثال در برخی از ویرایشگر ها قابلیتی وجود دارد که بعد از ذخیره فایل html صفحه مرورگر به صورت خودکار باز شده و خروجی را به شما نشان می‌دهد. اما برای این کار همچنان نیاز دارید به این پنجره ها جابه‌جا شوید.

ویرایشگرهای آنلاین قابلیت حمل پذیری دارند مهم نیست که بر روی چه کامپیوتری اجرا می‌شوند، مادامی که به اینترنت دسترسی دارید از طریق یک مرورگر می توانید به ویرایشگر آنلاین دسترسی داشته باشید. در زمان استفاده از ویرایشگر های آنلاین نیاز به نصب آنها در کامپیوتر ندارید. در ادامه مقاله به بهترین ویرایشگر های آنلاین اشاره خواهم کرد.
 

Codepen

online-html-editor-codepen.

Codepen یک محیط توسعه اجتماعی برای توسعه دهندگان وب سایت است. از ویژگی‌های این ویرایشگر قابلیت اشتراک گذاری و همکاری است. خود ویرایشگر بسیار ساده است. برای هر کدام از زبان های html ،css و جاوا اسکریپت یک پنل جداگانه وجود دارد که میتوانید کد های خود را در آن قرار دهید.

پنل دیگری نیز در این ویرایشگر وجود دارد که خروجی را به شما نشان می‌دهد. اندازه پنل ها را با درگ و رها کردن میتوان تغییر داد. برای ایجاد یک پروژه شما باید یک "Pen" ایجاد کنید. چندین "Pen" می‌توانند با هم گروه بندی شده و در یک مجموعه قرار بگیرد. پروژه های خصوصی که نمی‌خواهید دیگران آنها را ببیند نیاز به حساب کاربری پیشرفته دارند که برای هر ماه ۹ دلار در نظر گرفته شده است. این ویرایشگر شامل تم های قابل تعویض و همکاری بلادرنگ است.

JSFiddle

online-html-editor-jsfiddle

ویرایشگر JSFiddle چیزی شبیه به سند باکس است که می توانید کدهای جاوا اسکریپت را در آن ویرایش و دستکاری کنید. در این ویرایشگر می‌توان نحوه کار با html و css و جاوا اسکریپت را با همدیگر مشاهده کرد. مزیت این ویرایشگر این است که می توان فایل های css و جاوا اسکریپ را به کدهای html خود اضافه کنید.

با استفاده از دکمه Collaborate می توانید با افراد دیگری همکاری کنید و به صورت همزمان بر روی یک پروژه کار کنید. برای به‌روزرسانی پنل نمایش باید بر روی دکمه Run کلیک کنید.

JSBin

online-html-editor-jsbin

JSBin جایگزینی ساده تر و بهتر نسبت به ویرایشگر JSFiddle است. می‌توانید هر ترکیبی از html ،css و جاوااسکریپت را ویرایش کنید. می‌توانید با بالاترین قابلیت انعطاف بین پنل نمایش و پنل کنسول جابه‌جا شوید. همانند JSFiddle ویرایشگر JSBin به شما اجازه می دهد به منابع خارجی css و جاوااسکریپت لینک بزنید.

Liveweave

Liveweave ویرایشگری شبیه به ویرایشگر های بالاست. رابط کاربری این ویرایشگر برای چشمها مناسب تر است. این ویرایشگر به شما اجازه می دهد همانند JSFiddle به صورت بلادرنگ با افراد دیگر بر روی پروژه همکاری داشته باشید.

HTMLhouse

htmlhous

اگر میخواهید فقط با کد های html کار کنید ویرایشگر HTMLhouse بهترین گزینه برای شماست. در سمت راست پنل پیش نمایش را خواهید داشت و در سمت چپ پنل ویرایش. از ویژگی‌های جالب این ویرایشگر انتشار و اشتراک گذاری کد های html به صورت عمومی و خصوصی است. 

منبع: لرن سورس


۰ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
۳۰تیر

۱۰ استراتژی قدرتمند برای موفقیت یک برنامه نویس

حقیقتی که گفته میشود این است که برنامه نویسی برای یادگیری سخت است و رسیدن به درجات بالا در علوم کامپیوتر آن را برای شما آسان تر نمی کند، چرا که علوم آکادمیک کامپیوتر تا حد زیادی ریاضیات هستند. در حالی که ریاضیات مهم است، این چیزی نیست که شما در یک کار برنامه نویسی در دنیای واقعی نیاز دارید.

استراتژی

فراموش نکنید که شما با بیش از 18.2 میلیون توسعه دهنده ی نرم افزار در سراسر جهان رقابت می کنید. شما باید ایستادگی کرده و تلاش کنید، به خصوص اگر بخواهید در این مسیر پیشرو باشید.

برای کمک به شما در یادگیری نحوه مقاومت و ایستادگی در دنیای توسعه دهندگان، من قصد دارم به شما کمک کنم از طریق استراتژی هایی که نیاز دارید در حرفه خود تغییر ایجاد کنید، و البته، یک توسعه دهنده نرم افزار موفق پولدار باشید. این ها اساسا استراتژی هایی است که من طی سال ها خودم همه ی آنها را انجام داده ام و هنوز هم بیشتر آنها را انجام می دهم.

آنها در برنامه ریزی برای انجام کارهای محوله به من کمک زیادی کرده اند. من معتقدم اگر شما آنها را امتحان کنید، آنها برای شما نیز کار خواهند کرد.

۱. فراتر از کلاس درس بیاموزید 

یادگیری در سر کلاس و دانشگاه میتواند جذاب باشد. با این حال، این کلاس ها واقعا نمی توانند به شما کد نویسی یاد دهند.اکثر دانشگاه ها زبان هایی را به شما یاد میدهند که به آنها علاقه ندارید. شخصا می خواستم در توسعه ی وب حرفه ای شوم. با این حال، متوجه شدم که حتی جاوا اسکریپت در برنامه درسی ما نبود. در عوض، به من زبان C را آموزش دادند که علاقه ای به آن نداشتم.

 از همه بدتر، بسیاری از زبان هایی که به ما آموزش میدهند، منسوخ شده اند و امروزه در برنامه نویسی دنیای واقعی استفاده نمی شوند (مثلا QBasic). بنابراین، در پایان روز، شما ممکن است تنها بخشی از نظریه رایانه و ریاضیات را یاد بگیرید. اشتباه نکنید، دانشگاه ها به شما آموزش می دهند که چگونه به شیوه ای بسیار سازمان یافته برنامه نویسی کنید که می تواند سودمند باشد. اما من هیچ برنامه نویس حرفه ای را ندیده ام که به دلیل آنچه در یک کلاس درس آموخته است موفق شده باشد.

در حقیقت، شما عمدتا فقط با اصول برنامه نویسی، ساختارهای داده ها و الگوریتم ها تغذیه می شوید؛ البته، منطقی است که مبانی را بدانید، اما این برای موفقیت اصلا کافی نیست. تعجب می کنید اگر بدانید 90 درصد از توسعه دهندگان نرم افزار خودشان برنامه نویسی را یاد میگیرند!!! 

جای تعجب ندارد که بیش از 26.9 درصد از توسعه دهندگان، به آموزش رسمی فقط تا حدی اهمیت می دهند. اما من در میان آن 11.5 درصد هستم که می گویم آموزش رسمی اصلا مهم نیست.

برای اینکه به عنوان یک توسعه دهنده نرم افزار به موفقیت برسید، شما باید یک "learnaholic" باشید. با این حال، این لزوما به این معنی نیست که شما نیاز به یک کتابفروشی داشته باشید، اما نمیتوانید از دانشگاه خود نیز خارج شوید. با این وجود، حتی اگر در دانشگاه هستید، لازم است که اطلاعات را بخش بخش یاد بگیرید. شما می توانید به طور رایگان با codecademy شروع کنید و یا با پرداخت حق اشتراک، از دوره های با کیفیت در Pluralsight، Lynda و یا Udemy استفاده کنید.

بسیاری از منابع آنلاین دیگر وجود دارند که شما می توانید از آن استفاده کنید و بسته به تکنولوژی که در آن هیجان زده میشوید، می توانید برای گرفتن آن از یک کتاب مناسب استفاده کنید. من قطعا "Code Complete: A Practical Handbook of Software Construction" توسط Steve McConnell را برای درک دقیق برنامه نویسی توصیه می کنم. این یک کتاب 900 صفحه ای است که اطلاعات زیادی را در اختیار شما قرار می دهد، چه شما در برنامه نویسی مبتدی باشید و یا یک حرفه ای.

برای یادگیری زبان های خاصی مثل جاوا، پیشنهاد من به شما استفاده از کتاب " با جاوا چگونه برنامه نویسی کنیم " است که توسط پل جی دیتلر نوشته شده است. این کتاب یکی از ساده ترین راه ها برای یادگیری این زبان محبوب است. خبر خوش اینکه کتابی با همین سادگی برای زبان سی شارپ نیز نوشته شده است که میتوانید آن را تهیه کنید.

این مقاله بدون اشاره به  FreeCodeCamp کامل نمی شود. بسیاری از دانشجویان با خودآموز FreeCodeCamp موفق شده اند. اگرچه این زمان بر است، اما به شما اجازه می دهد که به خوبی کد بزنید و قبل از رفتن به سطح بعدی چالش های زیادی را پیش رو داشته باشید. کوئینسی لارسون و اعضای تیم FreeCodeCamp در حال انجام یک کار عالی هستند. آنها یکی از بهترین منابع برای شروع یادگیری برنامه نویسی در این پلت فرم را دارند.

۲. باید جهنمی تمرین کنید

اگر واقعا درباره داشتن یک زندگی به شکل برنامه نویسان جدی هستید، باید جهنمی تمرین کنید. تمرین بهترین روش برای یادگیری برنامه نویسی است. سعی کنید پروژه های کوچکتر را به طور مداوم انجام دهید و سپس خودتان را رفته رفته با پروژه های بزرگتر مهک بزنید. فرض کنید زبان برنامه نویسی که می خواهید در آن استاد شوید را انتخاب کرده اید. کار بعدی این است که شروع به یادگیری آن کنید و در این فرایند بر روی پروژه های کوچک مانند Hangman، Blackjack یا حتی یک ماشین حساب کار کنید.

در روزهای آغازین شروه کار، برنامه نویسی برای من بسیار سخت بود؛ با این حال، از طریق تمرین توانستم این سختی را تا حد زیادی به آسانی تبدیل کنم. من در یادگیری مفاهیم خاص برنامه نوسی عالی نبودم و حتی با وجود اینکه در برنامه نویسی صفر نبودم یادگیری و درک مفاهیم شی گرایی برام کمی سخت بود. با تمرین مداوم، توانستم بهتر این مفاهیم را بهتر درک کنم.

چیزی که باید به آن توجه کنید این است که تمرین را ادامه دهید، منتظر انگیزه نمانید - خودتان را مجبور به تمرین و تکرار کنید. ممکن است بدانید به صورت تئوری یک مسئله را چطور حل کنید اما اگر بخواهید همین مسئله را با برنامه نوسی حل کنید کار شما متفاوت خواهد بود. تمرینات برنامه نویسی زیادی را انجام دهید - می توانید از همکارانتان بخواهید به شما کمک کنند.

۳. در ایجاد راه حل ها پرشور باشید

آیا برنامه نویسی چیزی است که شما میخواهید؟ اگر اشتیاق زیادی برای برنامه نویسی نداشته باشید، به سختی میتوانید در آن موفق باشید. اگر تنها هدف شما پول باشد ممکن است موفق نشوید. وقتی شما شوری نداشته باشید پس انگیزه ای برای یادگیری مهارت های برنامه نوسی ندارید و در واقع همین مهارت ها هستند که برای شما پول میسازند.

اما پرشوری به شما امکان می دهد که عمیق یاد بگیرید، زیرا می خواهید بدانید. اشتیاق به این معنی است که برنامه نویسی را بخشی از وجودتان میدانید، و نه نوعی مجازات و یا کار خسته کننده.اگر شما واقعا در مورد برنامه نویسی پرشور هستید،باید خوشحال باشید زیرا با ایجاد راه حل هایی که به انسان ها کمک می کند میتوانید مشکلات آنها را حل کرده و جهانی بهتر بسازید.

۴. تلاش و تمرین برای یافتن مسائل

ممکن است فکر کنید مشکلی برای حل کردن وجود ندارد، زیرا امروزه تعداد زیادی از برنامه ها در بازار وجود دارند که به مشکلات پاسخ میدهند. با این حال، این کاملا اشتباه است. مسائل زیادی هنوز وجود دارد که می توانند با برنامه نویسی حل شوند. فقط باید به اطراف نگاه کنید. و بفهمید مردم با چه مشکلاتی رو به رو هستند.

سپس برای آنها راه حل پیدا کنید. در انجمن های پرسش و پاسخ مشارک کنید. سایت های زیادی وجود دارند که افراد مشکلات و مسائل خود را در آن قرار میدهند، از این طریق شما می توانید به خودتان آموزش دهید و مهارت های خود را بهبود بخشد.

۵. مسائل را ابتدا بر روی کاغذ و یا تخته سیاه حل کنید

حل مشکلات برنامه نویسی بر روی کاغذ برای اولین بار می تواند به شما کمک کند تا با تکرار انعطاف پذیر و آرام تر باشید. ساده ترین راه برای شناسایی یک ایده عالی بدون اینکه در مورد پیاده سازی آن دغدغه ایی داشته باشید استفاده از قلم ، کاغذ یا استفاده از تخته سیاه است. قبل از حل هر مشکلی در رایانه، الگوریتم را روی کاغذ بنویسید، اشتباهات را انجام دهید، آنها را کنسل کنید، و اجازه دهید خلاق باشید.

۶. در رفتن به سمت پاسخ ها در گوگل عجله نکنید. تا زمانی که میتوانید روی مشکل فکر کنید

اکثر برنامه نویسان هر زمانی که با یک مشکل برنامه نویسی مواجه میشوند، به Google هجوم می آورند. این منطقی است که به دنبال راه حل مشکل خود باشید، اما وضح است که ابتدا باید سعی کنید خود مشکل را حل کنید. اگر به پاسخ مسئله نرسیدید میتوانید در گوگل به جستجو بپردازید.

در ابتدا روی خوتان حساب کنید، شاید مشکلی که روی آن تمرکز کرده اید را بتوانید با صرف وقت کمی خودتان حل کنید. شرح دادن مشکلات برای خودتان به شما اجازه می دهد تا آنها را در حافظه خود نگه دارید و اگر بتوانید آن را حل کنید برای شما اعتماد به نفس به ارمغان می آورد که برای یک برنامه نویس از اهمیت بالایی برخوردار است.

به همین ترتیب، اگر شما گوگل را برای حل مشکل خود انتخاب کنید، باید یاد بگیرید که چگونه به صورت مناسب از گوگل استفاده کنید تا راه حل هایی را که نیاز دارید سریعا جستجو کنید. شما باید بدانید از چه عبارت هایی برای جستجو استفاده کنید. آنچه که افراد دیگر در مورد موضوع مورد نظر شما تحقیق کرده اند را مرور کنید و آنچه را که یاد می گیرید در پروژه اعمال کنید.

۷. زمانی که در حل مشکلات ساده استاد شدید، شروع به حل مشکلات پیچیده تر کنید

انتظار می رود که به طور مداوم یادگیری را ادامه دهید، دراین صورت مطمئنا رشد خواهید کرد. خودتان را محدود به حل مسائل ساده نکنید. برای حل مسائل پیچیده تر خودتان را به چالش بکشید. همچنین، سعی کنید یک مشکل واقعی را برطرف کنید و برنامه ای برای حل مشکل ایجاد کنید. هنگامی که شما برای مصاحبه شغلی می روید، دو مورد مهم از سوء استفاده های غیرمنتظره عبارتند از: "تا کنون چه برنامه هایی ساخته ایذ؟" و "مخزن Git شما چیست؟"

این بدان معنی است که شما باید بدانید که چگونه از نسخه های سیستم های کنترل مانند GitHub استفاده کنید . شما می توانید با ایجاد برنامه هایی که در حال حاضر وجود دارد شروع کنید - این کار به شما تجربه کافی برای مواجه شدن با هر گونه پروژه های جدید که ممکن است بخواهید در آینده ایجاد کنید را میدهد. ممکن است در ابتدا پروژه ای را کپی کنید سپس قسمت های مورد نظر خود را به آن اضافه کنید. وقتی احساس می کنید به اندازه کافی خوب هستید، پیش بروید و به ایده های اصلی خود بپردازید.

هیچگاه متوقف نشوید.

۸. مشکلات را ذهن خود حل کنید

ایده ها در زمان های شگفت انگیزی در زندگی ما به وجود می آیند، گاهی اوقات در زمان هیجان و گاهی اوقات در زمان آرامش ما. همیشه سعی کنید ایده هایی را در ذهن بررسی و حل کنید. قبل از اینکه حتی روی کاغذ یا بر روی تخته سفید آن را بنویسید، راه حل را در ذهن خود تجسم کنید؛ پس از آن، شما می توانید برای پیاده سازی این فرایند به کامپیوتر خود بروید.

بنابراین حتی اگر شما در ورزشگاه یا در رختخواب هستید و یک ایده به شما به نظر شما میرسد، یک تصویر ذهنی از فرآیند حل آن ایجاد کنید. من این کار را در هر زمان انجام می دهم، ایده ی جدیدی را می گیرم که علاقه مند به اجرای آن هستم. این تمرین مهم است زیرا می تواند به شما در تست رویکردهای مختلف برای حل مشکل کمک کند و تعیین کنید که آیا مسیر حاصل شده به یک راه حل مناسبی تبدیل خواهد شد.

۹. به مسائل دشوار (در ریاضی یا زندگی واقعی) به عنوان فرصت برای یادگیری و رشد نگاه کنید

اگر شما هنوز در دانشگاه هستید، به طور جدی تمام برنامه های برنامه نویسی خود را تمام کنید. از Project Euler برای حل مسائل ریاضی استفاده کنید. Project Euler فوق العاده مفید است، زیرا در سطوح مختلف دشواری، سوالات چالش برانگیز دارد و در هنگام حل آنها مهارت های خود را افزایش می دهید.

صادقانه بگویم پروژه هایی در این سایت وجود دارد که واقعا دشوار است، اما جالب هستند. فقط به یاد داشته باشید، برای آسان زندگی کردن در فردا ، اکنون باید سخت کار کنید. در شرایط دشوار زندگی نیز فکر کنید و همچنین می توانید راه هایی برای ایجاد برنامه هایی پیدا کنید که می توانند همه چیز را آسان تر کنند. تلاش برای پیاده سازی ویژگی های این برنامه ها به شما امکان می دهد تا قدرت خود را در برنامه نویسی افزایش دهید.

۱۰. داشتن یک مربی میتواند برای شما بسیار راه گشا باشد

داشتن مربی به شما اجازه خواهد داد که بر روی شانه های توسعه دهندگان نرم افزاری که شما را تحسین می کنند، به ویژه کسانی که تجربه زیادی دارند، ایستاده باشید. آنها می توانند زندگی شما را بسیار ساده تر کنند. شما می توانید از ابزارهای آنلاین مانند Codementor برای پیدا کردن مربیانی که می خواهید با آنها کار کنید استفاده کنید.

همیشه به مربی به عنوان یک سکوی پرتاب نگاه کرده ام. گاهی اوقات ممکن است برای رسیدن به شکلی درست از برنامه نویسی لازم باشد سالها تجربه کسب کنید. اما با داشتن یک مربی خوب میتوانید این مسیر را کوتاه تر بپیمایید


هرگز یادگیری را متوقف نکن

تبدیل شدن به یک توسعه دهنده نرم افزار موفق ممکن است کمی دشوار و گیج کننده باشد. درسته؟ من با شما موافقم. با این حال، اگر شما می خواهید زندگی خود را آسان کنید، آنچه را سخت است انجام دهید و اگر میخواهید زندگی شما سخت باشد آنچه را آسان است انجام دهید. پس برای موفقیت باید صادقانه تلاش کرد.

 

منبع: لرن سورس


۱ نظر موافقین ۰ مخالفین ۰
شهربانو دوستی
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم