Node.js دقیقا چیست و چرا از آن استفاده میکنیم؟

Node.js یک محیط زمان اجرای جاوا اسکریپت است که به نظر عالی می رسد.اما واقعا این به چه معناست و چطور کار میکند؟ محیط زمان اجرای Node شامل هر چیزی است که شما برای اجرای یک برنامه به زبان جاوا اسکریپت به آن نیاز دارید.

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

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

چرا Node.js؟

در زیر تعریف رسمی از Node.js که در سایت آن منتشر شده است، آورده شده است :

• Node.js یک زمان اجرای جاوااسکریپت است که بر روی Chrome’s V8 JavaScript engine ساخته شده است.
• Node.js از مدل event-driven و non-blocking I/O که آن را سبک و کاراتر کرده است، استفاده میکند.
• اکو سیستم پکیج Node.js یعنی همان npm ، بزرگترین اکوسیسیتم کتابخانه ای سورس باز جهان است.

قبلاً در مورد خط اول آیتم های بالا یعنی تعریف Node.js صحبت کرده ایم. اکنون بیایید ببینیم دو خط بعدی که در تعریف رسمی این سایت به آن اشاره شده است، چرا تا این حد این محیط اجرا را محبوب کرده است.

I/O اشاره به input/output (ورودی و خروجی) دارد و می تواند هر چیزی در گستره خواندن و نوشتن فایل های محلی تا ارسال یک درخواست HTTP به یک API را در بربگیرد. I/O مدت زمانی را صرف می کند و از این رو دیگر توابع در این مدت محدود می‌شوند.

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

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

Blocking I/O

در حالت Blocking I/O درخواست ارسالی کاربر دوم تا زمانی که اطلاعات کاربر اول بر روی صفحه چاپ نشود، اجرا نمی شود. اگر این یک وب سرور بود می‌توانستیم یک thread جدید را برای هر کاربر آغاز کنیم اما جاوااسکریپت single-threaded است (البته به به معنای واقعی اما دارای یک چرخه رویداد single-threaded است)

با همه این اوصاف جاوااسکریپت زبان مناسبی برای انجام وظایف multi-threaded نیست. در اینجاست که قابلیت non-blocking به کمک ما می آید.

Non-blocking I/O

به عبارت دیگر با استفاده از درخواست های Non-blocking I/O میتوانید درخواست کاربر دوم را اجرا کنید بدون اینکه لازم باشد منتظر پاسخ درخواست کاربر اول باشید. در واقع شما میتوانید این دو درخواست را به صورت موازی اجرا کنید. قابلیت Non-blocking I/O نیاز به multi-threading را کاهش داده است زیرا سرور می تواند چندین درخواست را در یک زمان مدیریت کند.

npm

npm کتابخانه هایی هستند که به وسیله عموم ساخته شده اند که می تواند اکثر مشکلات عمومی شما را حل کند. npm و یا به عبارتی دیگر Node package manager دارای بسته هایی هست که می توانید از آنها در برنامه های خود به منظور توسعه سریعتر بهره ببرید.

ماژول های Node

ماژول Node بلوکی است که قابلیت استفاده مجدد را دارد و وجودش بر روی دیگر کدها اثری نمی‌گذارد. شما می توانید ماژول مورد علاقه خود را بنویسید و از آن در برنامه‌های مختلف استفاده کنید. Node.js دارای مجموعه ای از ماژول های built-in است که از آنها بدون نیاز به راه اندازی اولیه می توان استفاده کرد.

V8

V8 یک موتور زمان اجرای سورس باز است که با استفاده از ++C نوشته شده است. جاوااسکریپت ابتدا به V8 تبدیل شده و در نهایت به کد ماشین مبدل می شود. V8 اسکریپتی به نام ECMAScript را پیاده سازی می کند. ECMAScript به وسیله Ecma International به منظور استاندارد کردن جاوااسکریپت پدید آمد.

V8 می تواند به تنهایی اجرا شود و یا داخل هر برنامه ای به زبان ++C قرار بگیرد. V8 دارای قابلیت هایی است که به شما اجازه نوشتن کدهای از ++C را میدهد که می‌توانید آنها را در جاوا اسکریپت داشته باشید. مخصوصا شما اجازه دارید ویژگی‌هایی را با قرار دادن V8 داخل کد ++C به جاوا اسکریپت اضافه کنید.

رویدادها

چیز هایی که در برنامه‌های ما اتفاق می افتند و ما می‌توانیم به آنها پاسخ دهیم رویداد نامیده می‌شوند. در Node دو نوع رویداد داریم :

• رویداد های سیستمی که مروبط به هسته ++C هستند. برای مثال اتمام خواندن یک فایل.
• رویداد های Custom که مربوط به هسته جاوا اسکریپت هستند.

نوشتن برنامه Hello World در Node.js

بیاید به منظور آشنایی بیشتر با Node.js برنامه Hello World را پیاده سازی کنیم. فایلی به نام app.js را ایجاد کرده و کد زیر را در آن قرار دهید :

console.log("Hello World!");

ترمینال node خود را باز کرده و دایرکتوری خود را به جایی که فایل بالا در آن ذخیره شده است تغییر دهید و سپس دستور node app.js را اجرا کنید. به همین سادگی برنامه Hello World را نوشته و اجرا کردید.

در انتها باید بگویم منابع زیادی در اینترنت برای یادگیری Node.js وجود دارد که می‌توانید برای پیشرفت خود به آنها رجوع کنید.

دوره های آموزشی

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

بحث و گفتگو

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

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

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

چطور React.js را در ۵ دقیقه یاد بگیریم؟

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

راه اندازی(setup)

زمانی که با React.js شروع به کار می کنید باید از ساده‌ترین راه‌اندازی ممکن استفاده کنید: یک فایل HTML ساده که از کتابخانه های React و ReactDOM با استفاده از تگ های script استفاده میکند، مانند مثال زیر :

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

ما همچنین Babel را نیز به صفحه اضافه کرده ایم، زیرا React از چیزی به نام JSX برای نوشتن markup استفاده می‌کند. نیاز داریم این  JSX را به کد ساده ی جاوا اسکریپت تبدیل کنیم تا در این صورت مرورگر بتواند آن را درک کند.

دو مورد دیگر هم وجود دارد که می خواهم به آنها توجه کنید :

1. تگ <div> به همراه مشخصه Id که با مقدارroot# تنظیم شده است. این قسمت نقطه ورود به برنامه ماست. اینجا دقیقا مکانی است که اپلیکیشن ما شروع به کار می کند.
2. تگ <script type="text/babel"> در بدنه برنامه استفاده شده است. اینجا مکانی ست که قرار است کد های React.js را بنویسیم.

کامپوننت ها

هر چیزی در React.js یک کامپوننت است و اینها معمولا به شکل کلاس هایی از جاوا اسکریپت نمایش داده میشوند. میتوانید یک کامپوننت را با extend کردن از کلاس React-Component ایجاد کنید. اجازه بدهید کامپوننت ساده ایی به نام Hello را ایجاد کنیم :

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

شما سپس باید متدهایی را برای این کامپوننت تعریف کنید. در مثال ما تنها یک متد داریم که ()render نامیده شده است. داخل متد ()render توضیحی را که می خواهید بر روی صفحه نمایش نشان داده شود، قرار می‌دهید. در نمونه مثال بالا میخواهیم یک تگ h1 با متن Hello world! در صفحه نمایان شود.

به منظور اینکه اپلیکیشن ساده ما عنصر مورد نظر را بر روی صفحه نمایش رندر کند، باید از ()ReactDOM.render استفاده کنید :

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

بنابراین در اینجا کامپوننت Hello را به نقطه ورود برنامه خود یعنی <div id="root"></div> متصل می کنیم. نتیجه چنین کاری در شکل زیر نشان داده شده است :

قاعده نوشتاری شبیه به HTML ایی(<h1> و <Hello/>) که دیدید کد JSX نام دارد که قبلا در موردش صحبت کردیم.این کد در واقع html نیست اما هرچه در این قسمت بنویسید در نهایت به کدهای html در صفحه رندر خواهد شد. قدم بعدی که باید به آن بپردازیم مدیریت داده هاست.

مدیریت داده ها

دو نوع داده در React وجود دارد : props و state. شناخت تفاوت این دو نیاز به توضیح دارد و شاید درک آن در ابتدا کمی سخت باشد. بنابراین اگر این بحث کمی گیج کننده بود نگران نباشید. خود من وقتی شروع به کار با آنها کردم تازه درک آنها برایم ساده تر شد.

اما تفاوت کلیدی این است که state خصوصی است و تنها داخل خود کامپوننت قابل تغییر است. Prop ها external و عمومی هستند و تنها به وسیله کامپوننت ها کنترل نمی شود و از نظر سلسله مراتب بالاتر از کامپوننت ها قرار دارند. یک کامپوننت می‌تواند state داخلی خود را به طور مستقیم تغییر دهد اما نمی تواند به طور مستقیم prop مربوط به خود را تغییر دهد.

ابتدا اجازه دهید نگاه دقیق‌تری به prop ها بیندازیم.

Props

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

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

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

نام prop به کار برده شده در مثال بالا message است که دارای مقدار “my friend” است. ما می‌توانیم به این prop در کامپوننت Hello با ارجاع به this.props.message به شکل زیر دسترسی داشته باشیم :

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

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

دلیلی که ما از عبارت {this.props.message} به همراه {} استفاده می‌کنیم این است که نیاز است به JSX بگوییم می خواهیم یک عبارت جاوااسکریپتی را اضافه کنیم که escaping نامیده می‌شود. اکنون کامپوننتی با قابلیت استفاده مجدد داریم که می تواند هر پیغامی را که بخواهیم بر روی صفحه نمایش نشان دهد. با این حال اگر بخواهیم کامپوننت بتواند داده خود را تغییر دهد چه کاری میتوانیم انجام دهیم؟ در اینجا می توانیم از stateها استفاده کنیم.

State

روشی دیگر برای ذخیره سازی داده ها در فریمورک React استفاده از state های کامپوننت هاست. برخلاف prop ها که نمی توانند مستقیماً توسط کامپوننتها تغییر کنند، stateها می توانند به سادگی تغییر کنند. بنابراین  اگر بخواهید داده ها در برنامه شما تغییر کنند - برای مثال بر اساس تعاملات کاربر - باید داده ها را داخل state ذخیره کنید.

مقدار دهی state

برای تنظیم state به سادگی this.state را داخل متد ()constructor از کلاس مقدار دهی کنید. در مورد مثال ما state یک شی است که دارای یک کلیدی به نام message است :

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

قبل از مقدار دهی state باید متد ()super را در سازنده فراخوانی کنید و این کار به خاطر کلمه this انجام می‌شود که قبل از ()super استفاده نشده است.

ویرایش state

برای ویرایش state به سادگی میتوانید ()this.setState را فراخوانی کنید و state جدید را به عنوان آرگومان برای آن ارسال کنید. ما این کار را داخل متدی که updateMessage نام دارد انجام داده ایم :

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

برای اینکه این قابلیت به درستی کار کند کلمه کلیدی this را به متد updateMessage بایند کرده‌ایم. در غیر این صورت نمی توانیم به this در این متد دسترسی داشته باشیم.

قدم بعدی ساخت یک دکمه است که باید بر روی آن کلیک شود و در این صورت متد ()updateMessage را فراخوانی می کنیم. بنابراین بیایید دکمه ای را به تابع ()render خود اضافه  کنیم :

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

در اینجا ما یک event listener را به یک دکمه متصل کرده‌ایم و در این صورت وقتی رویداد کلیک رخ می‌دهد، متد updateMessage فراخوانی می‌شود. در زیر نمایی کلی از کامپوننتی که باهم نوشتیم آورده شده است :

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

متد ()updateMessage عبارت ()this.setState را فراخوانی می کند که مقدار this.state.message را تغییر می‌دهد. وقتی روی دکمه کلیک می کنید چیزی که نشان داده میشود به صورت زیر است :

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

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

۶ روش برای سازماندهی کدهای CSS

وقتی برای مدتی شروع به کار با CSS می کنید، متوجه می شوید که در سازماندهی کدهای آن کمی مشکل دارید. CSS دارای یک روش سازماندهی ذاتی به نام Cascade است. در این روش چیزی که در ابتدا می نویسید بر هر چیزی که بعد از آن می آید تاثیر می‌گذارد که البته می توان همه آنها را در صورت لزوم override کرد.

با این وجود این روش، Cascade بر این باور است که شما در سال ۱۹۹۸ در حال ساخت یک وب سایت استاتیک کوچک در html هستید. اشتباه نکنید قابلیت Cascade همچنان مهم و قدرتمند است. فقط باید گفت که وبسایت های امروزی بسیار پیچیده تر شده اند. توسعه دهندگان Front-end اغلب برای یک پروژه شخصی نه چندان بزرگ هزاران خط کد CSS مینویسند.

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

۱.از یک پیش پردازنده CSS استفاده کنید

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

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

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

۲.فایل های جداگانه CSS برای صفحات منفرد

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

برای مثال زمانی که صفحه درباره ما را باز می کنید تنها از فایل about-page.css استفاده می شود و نیاز به تغییر در کدهای CSS نیست.

۳.فایل های جایگزین برای کامپوننت های پیچیده و تکراری

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

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

۴.تقسیم بندی بیشتر

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

روشی که من به شما پیشنهاد می کنم Atomic Design نامیده می شود. این روش عناصر طراحی را به پنج دسته تقسیم بندی می کنند :

• اتم ها
• مولکول ها
• مجموعه ها
• قالب ها
• صفحات

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

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

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

۵.از CLASS-ITIS اجتناب کنید

CLASS-ITIS چیست؟ یک بیماری وحشتناک است که کاربر را مجبور به استفاده از class= attribute همچون یک style= attribute می کند. بعضی ها چنین بیماری را دارند. کد زیر مثالی از این بیماری است :

<div class="red-bg corners-rounded-5px columns-3 height-flexible helpme icantgoonlikethis">[Insert content here]</div>

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

۶.حداقل عمق

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

header nav ul, footer nav ul, aside div ul {margin-top: 1rem;}

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

.molecule-nav {margin-top: 1rem;}

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

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

۸ فریمورک فوق‌ العاده جاوا اسکریپت برای یادگیری در سال ۲۰۱۹

وسعه وب آنقدر پیچیده شده است که امروز بعضی از توسعه دهندگان وب برای ساخت اپلیکیشن های وب بر روی فریمورک ها تکیه دارند. فریمورک ها سرعت جریان توسعه را افزایش داده و شما را ملزم به انجام بهترین تمرینات می‌کنند. این فریمورک ها برای شما کدهای قابل نگهداری به همراه معماری موثر را فراهم می آورند. در این مقاله با 8 فریمورک فوق العاده جاوا اسکریپت که ممکن است در سال ۲۰۱۹ برای شما مفید باشد آشنا می شوید.

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

1.React

React یک فریمورک مشهور جاوا اسکریپت است که به وسیله فیس بوک ایجاد و توسعه یافته است. می توانید از این فریمورک به منظور ساخت رابط های کاربری جذاب برای اپلیکیشن های  single page استفاده کنید. React یک معماری component-based را برای توسعه دهندگان وب ارمغان آورده است که الگوی MVC قدیمی را به چالش کشیده است.

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

2.Vue.js

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

Vue.js مادام با React مقایسه می‌شود زیرا این فریمورک نیز می‌تواند صفحات وب را به کامپوننت های قابل استفاده مجدد تقسیم‌بندی کند. Vue.js از الگوی قاعده نوشتاری HTML مربوط به خود پیروی می کند که میتواند عناصر رندر شده را به داده های مربوطه باید کند. وقتی داده ای تغییر میکند Vue.js به صورت خودکار تمام نمونه ها را در HTML بروز رسانی می کند.

اگر چه React همچنان مشهور تر است اما Vue.js نیز به سرعت در حال رشد است. این فریمورک دارای منابع آموزشی مفیدی زیادی است.

3.Angular

Angular یک فریم ورک جاوا اسکریپتی مبتنی بر TypeScript است که به وسیله گوگل توسعه داده شده و نگهداری می‌شود. نسخه های مختلف آنگولار کمی گیج کننده است. آنگولار نسخه ۲ از صفر آنگولار نسخه ۱ را بازنویسی کرده است. در حال حاضر این فریمورک به نسخه ۷ رسیده است.

در حالی که AngularJS بر پایه معماری MVC بود، +Angular2 بر پایه کامپوننت است. این دو از منطق های متفاوتی پیروی می‌کنند. اپلیکیشن‌های آنگولار نمی‌توانند به نسخه های ۲ و بالاتر به روز رسانی شود. با استفاده از آنگولار می‌توانید اپلیکیشن های single-page را برای هر پلتفرمی ایجاد کنید که می تواند شامل برنامه های وب، برنامه های موبایل، برنامه های بومی موبایل، برنامه های بومی دسکتاپ باشد.

اگر قبلا با زبان های همچون C# ، Java و ++C کارکرده اید، این فریمورک میتواند انتخاب مناسبی برای شما باشد. یادگیری این فریمورک به زمان بیشتری در مقایسه با فریمورک های Vue و React نیاز دارد. با این حال این فریمورک دارای اکوسیستم خیلی بزرگ و آینده شغلی روشنی است.

4.Next.js

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

راه حل این مشکل رندر کردن محتوا در سمت سرور است(قبل از اینکه آن را به سمت مرورگر ارسال کنیم) و این کاری است که Next.js برای ما انجام میدهد. این فریمورک شامل ویژگی های فوق العاده همچون بارگیری مجدد کد، تقسیم خودکار کد و مسیریابی خودکار و ... است. اگر از Next به همراه React استفاده میکنید، سادگی Vue را با ویژگی‌های قدرتمند React ترکیب کرده اید.

اگر قبلاً از React استفاده کرده اید Next یک گام موثر برای تسلط بر توسعه اپلیکیشن های جاوا اسکریپت است. این فریمورک دارای آموزش های فوق العاده ای است که می تواند به شما کمک کنند یکی دو ساعته کار با این فریمورک را آغاز کنید.

5.Relay

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

از GraphQL به عنوان جایگزینی برای REST استفاده می شود. فریمورک Relay شما را قادر می‌کند تا با اضافه کردن GraphQL به ویو هایی که از داده ها استفاده میکنند کوئری های ایستا بسازید سپس Relay این درخواست‌ها را به درخواست های سازگار در شبکه تبدیل می کند. از این طریق می توانید برنامه های سریع تر و با کارایی بالاتر ایجاد کنید. 

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

 

6.Mithril.js

Mithril.js فریم ورک جاوا اسکریپت سبکی بوده که شامل ویژگی هایی شبیه به React و Vue است. اگر شما به دنبال فریمورک واقعا کوچکی می گردید که با آن برنامه های single page خود را ایجاد کنید، جایگزین می تواند یک انتخاب عالی برای شما باشد. حجم این فریم ورک فقط ۸ کیلو بایت است و تقریباً دو برابر سریع‌تر از React و Angular است.

شبیه به ویوهای فریمورک های Vue و React فریمورک Mithril نیز بر روی کامپوننت ها تکیه دارد. با این حال این فریمورک دارای برخی ماژولهای داخلی است که نمی‌توانید آنها را در Reactپیدا کنید.

7.Aurelia

Aurelia بر روی استانداردهای وب تمرکز دارد و از کنوانسیون ها بیش از پیکربندی استفاده می کند. این فریمورک یک فریمورک منحصربه‌فرد در جاوا اسکریپت است، زیرا به شما اجازه می دهد کامپوننت های رابط کاربری را با استفاده از جاوا اسکریپ و یا TypeScript ایجاد کنید. کامپوننت های Aurelia در واقع کلاس های ساده JS/TS به همراه الگوهای HTML مربوطه هستند. قاعده نوشتاری این فریمورک تقریبا ساده است. در اینجا نمونه ای از آن آورده شده است :

// app.js
export class App {
  welcome = "Welcome to Aurelia";
}

<!-- app.html -->
<template>
  <form>
    <label for="name-field">What is your name?</label>
    <input id="name-field" value.bind="name & debounce:500">

  <p if.bind="name">${welcome}, ${name}!</p>
</template>

همانطور که مشاهده میکنید اگر شما HTML و JSرا بشناسید می توانید بدون نیاز به یادگیری بیشتر برنامه های Aurelia را ایجاد کنید.

8.SVELTE

فریمورک Svelte با هدف حل مشکلات حیاتی جاوا اسکریپت در وب به وجود آمد. سازندگانش آن را فریمورک جادویی ناپدید کننده رابطه کاربری می‌نامند. Svelte کامپایلر خود را داراست که کدهای برنامه را در زمان ایجاد به کدهای سمت کاربر جاوا اسکریپت تبدیل می کند. در نتیجه کدهای فریمورک زمانی که به مرورگر کاربر می‌رسند ناپدید می‌شوند. برنامه های Svelte بر اساس کامپوننت single-file با استفاده از اکستنشن html. ساخته می شوند.

 

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

چطور اولین پلاگین خود را در جی کوئری بنویسیم؟ قسمت اول

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

Markup

هر پلاگینی در جی کوئری به مقداری Markup (کدهای html) نیاز دارد و در مثالی که در این مقاله بیان خواهد شد، تمام آن چیزی که نیاز داریم یک تگ لینک ساده بوده که دارای مشخصه  data attribute است. ما پلاگینی خواهیم ساخت که متن مشخصه ی data-tooltip را گرفته و به عنوان متن tooltip نمایش می‌دهد. پس کد های HTML ایی که برای این پلاگین استفاده می شود، حداقل بوده و شامل کدهای است که از یک تگ لینک بهره می‌برند :

<section>
<p>Your bones <a href="#" class="tooltip" data-tooltip="But mine do">don't break</a>
.That's clear. Your cells react to bacteria and viruses differently than mine. 
You don't get sick, I do. That's also clear. But for some reason, 
you and I react the exact same way to water. 
We swallow it too fast, we choke. We get some in our lungs, we drown.
However unreal it may seem, we are connected, you and I.
 We're on the 
<a href="#" class="tooltip" data-tooltip="just on opposite ends">same curve</a>.</p>
</section>

در نهایت باید بتوانیم به شکل زیر پلاگین مورد نظر را فراخوانی کنیم :

$('a.tooltip').tooltipMe();

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

ساخت پلاگین

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

(function ( $ ) {
//Our Code
}( jQuery ));

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

$.fn.tooltipMe = function() {

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

this.each(function() {
   if($(this).is('a')) {

بعد از آن کافی است که از تابع hover برای ذخیره سازی مشخصه data-tooltip و ایجاد یک تول تیپ استفاده کنیم :

$(this).hover(function(e) {
    var text = $(this).attr('data-tooltip');   
    $('<div id="tooltip"/>').appendTo($(this)).text(text).hide()
    .css({
        backgroundColor: '#000',
        color: '#fff',
        borderRadius: '3px',
        opacity: 0.8,
        position: 'absolute',
        float: 'left'
    }).fadeIn('slow');		  
},

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

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

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

function() {
   $('#tooltip').remove();
});	
}

در مثال بالا تمام کاری که انجام داده ایم این است که وقتی موس کار از روی لینک خارج می شود تول تیپ ایجاد شده در مرحله قبل را حذف کنیم. کار آخری که باید انجام دهیم اضافه کردن مشخصه های top و left به div مورد نظر است. از آنجایی که برای تول تیپ مشخصه position با مقدار absolute مقداردهی شده است به راحتی می‌توان از مشخصه top و left برای تعیین مکان ظاهر شدن تول تیپ استفاده کرد :

$(this).mousemove(function(e) {
    $('#tooltip').css({
    top: e.pageY + 10,
    left: e.pageX + 10
    });
});
});
return this;
}
})(jQuery);

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

$('a.tooltip').tooltipMe();

نتیجه

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

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

چطور اولین پلاگین خود را در جی کوئری بنویسیم؟ قسمت دوم

در مقاله قبلی از این آموزش(چطور اولین پلاگین خود را در جی کوئری بنویسیم؟ قسمت اول)، یک پلاگین جی کوئری ساده را پیاده سازی کردیم. اما مشکلی که این پلاگین داشت این بود که کاربران کنترلی بر روی ظاهر تول تیپ نداشتند، در این مقاله کدهایی را به پلاگین خود اضافه می کنیم که به کاربران اجازه می‌دهند استایل پیش فرض پلاگین را تغییر دهند.

ایجاد آپشن های پلاگین

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

$.fn.tooltipMe = function() {

برای انجام این کار را پارامتری به نام options را به صورت زیر برای پلاگین خود در نظر می‌گیریم :

$.fn.tooltipMe = function(options) {

ساخت مشخصه های پیش فرض

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

var defaults = $.extend({},{
    background: '#000',
    color: '#fff',
    rounded: '3px',
    opacity: 0.8
}, 

متغیری که در بالا تعریف کرده ایم باید درست بعد از نامگذاری پلاگین قرار بگیرد. در این متغیر ابتدا از jQuery.extend برای ترکیب مشخصه های پیش فرض و مشخصه هایی که کاربر از طریق پارامتر ارسال میکند، استفاده کرده ایم.

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

var settings = {
    background: '#000',
    color: '#fff',
    rounded: '3px',
    opacity: 0.8
}
defaults = $.extend({},settings, options);

تغییر مشخصه های متد CSS.

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

they do we need to make them dynamic:

.css({
    backgroundColor: defaults.background,
    color: defaults.color,
    borderRadius: defaults.rounded,
    opacity: defaults.opacity,
    position: 'absolute',
    float: 'left'
})

در انتها دو مشخصه به صورت ثابت باقی خواهند ماند(position و float) که عملکرد پلاگین بر اساس آنها تعیین می شود. اکنون می توانید همه کدهای که برای نوشتن این پلاگین نیاز است را در زیر مشاهده کنید :

function($){
$.fn.tooltipMe = function(options) {
    var	defaults = $.extend({},{
        background: '#000',
        color: '#fff',
        rounded: '3px',
        opacity: 0.8
    }, options);
this.each(function() {
    if($(this).is('a')) {
    $(this).hover(function(e) {
        var text = $(this).attr('data-tooltip');
        $('<div id="tooltip"/>').appendTo($(this)).text(text).hide()
        .css({
            backgroundColor: defaults.background,
            color: defaults.color,
            borderRadius: defaults.rounded,
            opacity: defaults.opacity,
            position: 'absolute',
            float: 'left'
        }).fadeIn('slow');		  
        }, function() {
        $('#tooltip').remove();
        });	
    }

$(this).mousemove(function(e) {
    $('#tooltip').css({
        top: e.pageY + 10,
        left: e.pageX+ 10 
    });
});
});
return this;
}
})(jQuery);

فراخوانی پلاگین

در مقاله قبلی پلاگین خود را به صورت زیر فراخوانی میکردیم :

$('a.tooltip').tooltipMe();

 هم اکنون که مقادیر پیش فرض تنظیم شده است، میتوانیم پارامترهایی را برای پلاگین خود به صورت زیر در نظر بگیریم و سپس آن را فراخوانی کنیم :

$('a.tooltip').tooltipMe({  
       background: '#fff',
       color: '#000',
       rounded: '20px',
       opacity: 1
});

نتیجه

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

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

به یک توسعه دهنده اندروید تبدیل شوید؟ تجربیات چندین ساله

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

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

من برای سالها کار برنامه نویسی انجام داده ام. در ابتدا کار برنامه نویسی را با یادگیری سه زبان C++ , C و Java آغاز کردم. سپس قبل از ورود به شاخه توسعه اندروید به کار توسعه صفحات وب پرداختم. اولین برنامه ای که ساختم خیلی ساده بود و عمدتاً برای سرگرمی طراحی شد. چند سال بعد در رویدادی به نام RHOK در یک تیم پنج نفره شرکت کردم و با اپلیکیشن Buddy برنده جایزه شدم.

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

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

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

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

نیازهای کاربران خود را بشناسید

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

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

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

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

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

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

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

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

همیشه برنامه خود را برای چندین دستگاه توسعه دهید

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

به عنوان یک توسعه دهنده اندروید وظیفه دارید برنامه خود را طوری طراحی کنید که در همه صفحه نمایش ها خوب عمل کند. با این حال این امکان را ندارید که برنامه خود را بر روی همه دستگاهها امتحان کنید و حتی ثروتمندترین شرکت‌های توسعه اندروید نیز دارای تعداد محدودی دستگاه برای تست هستند. برای غلبه بر این مشکل من از قابلیت density-independent pixel در طراحی های خود استفاده می کنم.

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

برنامه خود را تست کنید، سپس تست انجام دهید و دوباره و دوباره این کار را انجام دهید

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

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

مقدمه ای کوتاه بر زبان برنامه نویسی سوئیفت

شرکت اپل در WWDC 2014 زبان برنامه نویسی جدیدی به نام سوئیفت را معرفی کرد. سوئیفت زبانی است که به وسیله اپل از ابتدا ساخته شده است. این زبان بسیار کارا و زیباست. سوئیفت از api های یکسانی در مقایسه با زبان C بهره می برد و به نظر من اگر زمینه طراحی وب را از قبل داشته باشید یادگیری این زبان بسیار ساده است.

اگر همانند من در مورد این زبان کنجکاو شده اید پس مطالب زیر را دنبال کنید.

متغیرها و ثابت ها

اگر از قبل با زبان جاوا اسکریپت آشنایی داشته باشید تعریف متغیرها در سوئیفت باید برای شما آشنا باشد. در این زبان از کلمه کلیدی var برای تعریف متغیر استفاده می‌شود :

var myNumber = 40

در این زبان همچنین می توانید ثابت ها را مقدار دهی کنید. برای تعریف ثابت ها از کلمه کلیدی  let استفاده کنید :

let name = "Developer Drive"

اگر قبلا از Objective-C و یا در این مورد از زبان جاوااسکریپت استفاده کرده اید، چیزی که نظر شما را جلب می کند این است که در مثال بالا در انتهای عبارت از علامت سمی کالن استفاده نکرده ام زیرا زبان سوئیفت به این علامت احتیاجی ندارد. با این حال اگر می‌خواهید می‌توانید از این علامت استفاده کنید.

دستکاری رشته ها

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

var firstName = "Developer"
var lastName = " Drive"
var name = firstName + lastName

با این حال اگر می‌خواهید این رشته را در صفحه نمایش نشان دهید باید تابع println را فراخوانی کنید :

println(name)

درج متغیر ها در یک رشته نیز واقعاً ساده است. شما باید در ابتدا از کارکتر “\” استفاده کرده و سپس متغیر مورد نظر را داخل پرانتز قرار دهید :

var number = 20
var timeLeft = "You have \(number) minutes left."

 همانطور که می بینید همه چیز ساده به روشی ساختاریافته نوشته می‌شود.

آرایه ها

یکی از چیزهایی که هر زبانی به آن احتیاج دارد مدیریت آرایه هاست. ما همیشه به آرایه ها نیاز داریم و این کمک بزرگی است که نوشتن آنها در زبانی ساده باشد. آرایه ها در سوئیفت ساده هستند و همچون آرایه ها در جاوا اسکریپت نوشته میشوند :

var names = ["Leslie","April","Tom","Andy","Ann","Ben"]

همانطور که می‌بینید نوشتن و تعریف یک آرایه بسیار ساده است اگر میخواهید تعداد عناصر آرایه را شمارش کنید، از مشخصه جایگزین استفاده کنید :

var numberNames = names.count

اضافه کردن عنصر به آرایه نیز بسیار آسان است :

/ Adding a single element
names += "Jerry"

// Adding several elements
names += ["Donna", "Chris"]

دیکشنری ها

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

var socialNetworks = ["FB" : "Facebook", "TW" : "Twitter", "G+" : "Google+"]

همانطور که انتظار می‌رود می‌توانید در بین عناصر دیکشنری از طریق حلقه for پیمایش انجام دهید :

for (abbr, name) in socialNetworks {
    println("\(abbr) = \(name)")
}

همچنین واکشی اطلاعات و مقداردهی عنصری خاص نیز به صورت زیر انجام می گیرد :

println(socialNetworks["FB"])
socialNetworks["FB"] = "Vine"

توابع

میتوان به سادگی توابع را در سوئیفت ایجاد کرد. این کار با استفاده از کلمه کلیدی func انجام می‌پذیرد :

func helloRuby() -> String {
    return "Hello Ruby"
}
helloRuby()

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

func hello(name: String) -> String {
    return "Hello \(name)."
}
hello("Ruby", "Tuesday")”

کلاس ها

برخلاف Objective-C ، کلاس ها در سوئیفت همگی در فایل واحدی با پسوند swift. ایجاد می‌شوند و نیازی به پیاده‌سازی جداگانه ای ندارند. یک کلاس با استفاده از کلمه کلیدی class که به دنبال آن نام کلاس می آید، تعریف می شود :

class Show {
    var numberOfEpisodes = 20
    func number() -> String {
        return "The Show has \(numberOfSides) episodes."
    }
}

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

var show = Show()

همچنین می توانید به شکل زیر مشخصه های کلاس را تغییر دهید :

show.numberOfEpisodes = 35

عبارات و حلقه ها

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

var name1 = "Tom"
var name2 = "Tom"
if name1 == name2 {
    println("Identical")
}

همانطور که در مثال بالا مشاهده می کنید استفاده از پرانتز ها برای سوئیفت ضروری نیستند.

عبارت Switch چیز عبارت دیگری است که در زبان های برنامه نویسی کاربرد زیادی دارد. این عبارت در سوئیفت به شکل زیر پیاده سازی میشود :

switch babyNames {
 case "Ben":
 println("Maybe")
 case "Jerry":
 println("No Really")
 default:
 println("What about we go with Tom ?")
 }

 

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

۷ عملی که سایت شما را در معرض خطر قرار می‌دهد

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

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

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

مهندسی اجتماعی

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

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

رها کردن پچ های امنیتی

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

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

کدهای غیر ایمن ثالث

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

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

سیاست های امنیتی بد کاربری

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

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

حملات تزریقی

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

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

نشت اطلاعات

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

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

CLICKJACKING

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

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

نتیجه

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

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

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

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

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

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

چرا سرور شما ممکن است مورد حمله قرار بگیرد؟

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

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

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

خلاص شدن از چیزی که نیاز ندارید

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

با این حال هر چیزی که به آن نیاز ندارید را غیرفعال کنید، به همین ترتیب هر برنامه اضافی، نرم افزار، ماژول و یا افزونه ای که بر روی سرور شما نصب شده است و به آن نیاز ندارید را حذف کنید. هر حساب کاربری استفاده نشده و غیرضروری را حذف کنید. حساب های رها شده هدف اصلی هکر ها هستند.

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

همه چیز را به روز نگه دارید

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

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

نگاهی به فایل های گزارش بیندازید

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

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

محافظت از اطلاعات

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

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

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

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

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