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

اگر کسی هستید که می خواهید به یک توسعه دهنده اندروید تبدیل شوید و یا حتی از قبل یک توسعه دهنده اندروید هستید، باید توجه داشته باشید که هزاران اپلیکیشن اندروید در فروشگاه 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 معمولا به دو روش اتفاق می افتد، وقتی کسی یک سایت مخرب را با محتویاتی ایجاد میکند که بی ضرر به نظر می‌رسد، اما وقتی روی لینک های آن سایت کلیک کنید چیزی را که لزوماً شما می خواهید انجام نمی دهد و یا به جایی که شما نمی‌خواهید شما را هدایت می‌کند.

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

نتیجه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

۱۵ ابزار برتر برای توسعه اپلیکیشن های React

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

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

1.REACTIDE

Reactide یک IDE اختصاصی (محیط توسعه مجتمع) برای توسعه برنامه های کاربردی ری اکت است. این ابزار cross-platform بوده و به شما اجازه می دهد تا کامپوننت های React را بدون هیچگونه پیکربندی ساخت و یا سرور ارائه دهید. Reactide یک Node server یکپارچه و همین طور یک شبیه ساز مرورگر سفارشی را نیز اجرا می کند.

2.REACT STUDIO

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

3. پروژه ی CREATE REACT APP فیسبوک

ایجاد و راه اندازی محیطی برای توسعه یک پروژه ی React با تمام الزامات کاری زمان بر است. برای کمک به توسعه دهندگان، فیس بوک پروژه Create React App خود را در Github منتشر کرد. این پروژه یک ابزار خط فرمان است که با آن میتوانید به سرعت یک برنامه React جدید را راه اندازی کنید. این ابزار یک خط لوله طراحی و ساخت داخلی را فراهم کرده و همین طور یک محیط توسعه دهنده را ایجاد می کند و در نهایت برنامه شما را برای تولید بهینه سازی می کند. این پروژه بدون نیاز به هیچ پیکربندی کار می کند و می توانید آن را با هر زبان backend ایی استفاده کنید.

4.STORYBOOK

Storybook یک محیط توسعه رابط کاربری برای کامپوننت های React است که در تولید برنامه توسط شرکت هایی مانند Coursera، Squarespace و Lonely Planet استفاده می شود. این محیط به شما اجازه می دهد تا به طور تعاملی کامپوننت های خود را توسعه داده و آزمایش کنید و همچنین می توانید کتابخانه ای از کامپوننت ها را برای خود ایجاد کنید. با Storybook، شما می توانید حالت های مختلف هر کامپوننت را مشاهده و آن را جدا از برنامه خود توسعه دهید،این کار منجر به بهره بردن بهتر از قابلیت استفاده مجدد میشود.

5.REACT STYLEGUIDIST

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

6.ابزار توسعه دهنده React برای مرورگر کروم

ابزار توسعه دهنده React یک افزونه Google Chrome است که توسط تیم فیس بوک ایجاد شده است. این ابزار به شما اجازه بازرسی سلسله مراتب درختی از کامپوننت های React را  درست در داخل مرورگر میدهد، این بررسی شامل prop ها و  state ها در کامپوننت ها نیز میشود. این افزونه یک سربرگ جدید به نام React را به Chrome DevTools شما می افزاید. با استفاده از این سربرگ می توانید چگونگی تاثیرگذاری تغییرات یک کامپوننت بر سایر کامپوننت ها را مشاهده کنید. این افزونه به شما کمک میکند یک ساختار مناسبی را برای کامپوننت خود طراحی کنید.

7.ابزار توسعه دهنده React برای مرورگر فایرفاکس

فیس بوک همچنینابزار توسعه دهنده React برای مرورگر فایرفاکس را به عنوان یک افزونه برای فایرفاکس منتشر کرده است. این افزونه دارای همان ویژگی هایی است که قبلا در افزونه Chrome توسعه داده شده است. پس از نصب، شما می توانید به ابزار React در ابزار توسعه دهنده Firefox در زبانه React  دسترسی داشته باشید.

8.REACT SIGHT

React Sight یک ابزار تجسم برای React است که برای شما نمایش بصری ساختار برنامه React را فراهم می آورد. این ابزار به ابزار توسعه دهنده React برای مرورگر کروم نیاز دارد. شما باید React Sight را به عنوان یک افزونه برای Chrome نصب کنید. این ابزار پنل جدید "React Sight" را به Chrome DevTools اضافه می کند. React Sight ازReact Router و Redux نیز پشتیبانی می کند.

9.REACT COSMOS

React Cosmos یک ابزار توسعه دهنده است که به شما کمک می کند کامپوننت هایی را در ری اکت ایجاد کنید که قابلیت استفاده مجدد دارند. این ابزار کامپوننت های پروژه های React شما را اسکن می کند و به شما امکان می دهد تا آنها را با هر ترکیبی از prop ها و state ها رندر کنید. با استفاده از React Cosmos می توانید وضعیت برنامه خود  به صورت real-time مشاهده کنید.

CODESANDBOX.10 برای ری اکت

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

11.REACT BITS

اگر می خواهید یک مجموعه آسان برای استفاده از الگوها، تکنیک ها، راهنمایی ها و ترفندهای React را داشته باشید، نیازی به نگاه کردن بیشتر نیست. React Bits مجموعه کاملی از تمام اطلاعاتی است که شما ممکن است نیاز داشته باشید. این مجموعه مستنداتی آنلاین است که در آن به سرعت می توانید به الگوهای طراحی ، تکنیک های طراحی، antipattern ها، تغییرات UX و دیگر نکات مربوط به React دسترسی داشته باشید.

12.REILER BOILERPLATE

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

13.REACT SLINGSHOT

Reings Slingshot یکی دیگر از مواردی است که به شما امکان استفاده از React را به همراه Redux را میدهد . این ابزاربه شما امکان دسترسی به ویژگی هایی مانند hot reloading، تست خودکار، linting ، ساخت تولید خودکار و ... را می دهد. Reings Slingshot از کتابخانه ها و ابزارهای محبوب مانند بابل، Webpack، ESLint، Sass و PostCSS استفاده می کند.

14.REACT STYLE GUIDE GENERATOR

با React Style Guide Generator ، شما می توانید یک راهنمای ساده و سازمان یافته برای پروژه های React خود تولید کنید. شما باید یک فایل جداگانه برای راهنمای خود ایجاد کنید، سپس برخی از مستندات را در جاوا اسکریپت با استفاده از برخی از قوانین از پیش تعریف شده اضافه کنید. . React Style Guide Generator به خوبی مستند شده است و شما می توانید از نحو ES6 نیز استفاده کنید.

15. REACT EXTENSION PACK برای ویژوال استادیو کد

اگر ویرایشگر کد شما ویژوال استودیو کد است ، می توانید از Packet Extension Pack استفاده کنید تا سرعت پردازش React خود را سریعتر کنید. این تنها یک افزونه نیست بلکه هفت بسته است که به عنوان یک افزونه بسته بندی شده است. این افزونه دارای امکانات خوبی است و اگر شما این افزونه را به VS Code اضافه کرده باشید،  حتما احساس فوق العاده ای را تجربه کرده اید.

 

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

ساخت یک صفحه فرود با استفاده از Bootstrap ۴

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

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

• بخش نوار ناوبری ثابت
• بخش hero
• بخشی سه ستونه برای نمایش خدمات
• بخشی تمام عرض برای مشاهده تماس ها
• بخش فوتر

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

پس بیایید شروع کنیم.

1. راه اندازی بوت استرپ 4

چند روش برای راه اندازی اولیه Bootstrap 4 وجود دارد. شما می توانید:

• فایل کامپایل شده CSS و جاوا اسکریپت بوت استرپ را دانلود کرده و سپس آن را به صفحه HTML خود اضافه کنید.
• بوت استرپ 4 با استفاده از سورس اصلی آن راه اندازی کنید (اگر می خواهید فایل های Sass را ویرایش کنید، این روش را انتخاب کنید)
• از نسخه های کامپایل شده بوت استرپ CDN استفاده کنید.

در این مقاله ما از اولین روش استفاده خواهیم کرد. فایل کوچک شده ی CSS را به قسمت <head> صفحه HTML خود و فایل جاوا اسکریپت را درست قبل از تگ بسته ی <body> قرار دهید. از آنجایی که همه پلاگین های Bootstrap 4 به jQuery نیاز دارند ، شما همچنین باید قبل از فایل جاوا اسکریپت بوت استرپ ، کتابخانه جی کوئری را قرار دهید.

در اینجا فایل HTML  صفحه مورد نظر نشان داده شده است. همانطور که میبینید فایل های CSS و جاوا اسکریپت مورد نیاز به صفحه اضافه شده اند. فایلی نیز با نام style.css برای سفارشی سازی استایل صفحه به سند ما افزوده شده است :

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Landing Page by Developer Drive</title>
   
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
   
   </head>
   
   <body>
   
       <!-- Here comes the rest of the code -->

       <script src="scripts/jquery.min.js"></script>
       <script src="scripts/bootstrap.bundle.min.js"></script>
   </body>
</html>

2. نوار ناوبری را ایجاد کنید

بوت استرپ 4 شامل کامپوننت فوق العاده عالی و از پیش طراحی شده ای برای نوار ناوبری است که به شما اجازه می دهد یک منوی واکنش گرا را فقط با چند خط کد HTML به صفحه فرود خود اضافه کنید. کد زیر را در بخش <body> از فایل HTML خود قرار دهید:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Hello Consultancy</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
        aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
            
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

مهمترین چیزی در مورد Bootstrap 4 باید بدانید این است که این فریمورک برای هر چیزی تقریبا دارای کلاس های مفید است. به عنوان مثال، دارای کلاس bg-light. ( به مثال بالا نگاه کنید) برای افزودن یک پس زمینه روشن و کلاس bg-dark. برای افزودن یک پس زمینه تیره است که میتوان آنها را به هر عنصری در HTML اضافه کرد. با Bootstrap 4 شما می توانید طرح های خود را با کمترین کد نویسی در CSS ایجاد کنید.

با این حال، اگرچه کلاس fixed-top ، نوار ناوبری را به سمت بالا fix می کند، اما شما باید فضای بیشتری برای آن ایجاد کنید. بنابراین، قانون زیر را به فایل style.css سفارشی خود اضافه کنید. اگر نمیخواهید یک نوار ناوبری ثابت در بالای صفحه داشته باشید به سادگی کلاس fixed-top را از صفحه خود حذف کنید :

body {
    padding-top: 56px;
}

3. بخش hero را بسازید

بخش hero بخشی جدایی ناپذیر از بیشتر صفحات فرود است. در این بخش معمولا یک عکس پس زمینه کامل، یک عنوان، یک توصیف کوتاه و یک دکمه تماس وجود دارد. خوشبختانه، Bootstrap 4 دارای یک قسمت از پیش طراحی شده به نام Jumbotron است که به شما اجازه می دهد به راحتی یک بخش hero را به صفحه خود اضافه کنید. برای این کار نیاز است به عنصری است که بخش hero را نگه می دارد کلاس jumbotron. را اضافه کرد :

<header class="jumbotron jumbotron-fluid">
    <div class="container-fluid text-center"> 
       <h1 class="display-3">The Best Solution for Your Business</h1>
       <p class="lead pb-4">We help you maximize performance and build a healthy organization.</p>
       <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn More</a></p>
    </div>
</header>

اگر بخواهید یک بخش hero تمام عرض داشته باشید، از کلاسهای Container-fluid. و jumbotron-fluid. استفاده کنید . اگر نمیخواهید تمام عرض صفحه با آنها پوشیده شود کافی است ، از container. و jumbotron. استفاده کنید (برای توضیحات بیشتر بهاسناد Jumbotron نگاهی بیندازید).

کد بالا همچنین از کلاسهای display-3. و text. (کلاس های تایپیوگرافی بوت استرپ 4)و  کلاس text-center. (کلاس ترازبندی در بوت استرپ 4)  استفاده میکند. شما همچنین باید یک تصویر پس زمینه را به بخش Jumbotron در فایل style.css سفارشی خود اضافه کنید. اگر میخواهید میتوانید رنگ پیشفرض پس زمینه دکمه های primary را نیز تغییر دهید:

.jumbotron {
    background: url("image.jpg") no-repeat center;
}
.btn-primary {
    background-color: #c60063;
    border-color: #c60063;
}

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

4. بخش سه ستونه را برای ارائه سرویس ها ایجاد کنید

برای ایجاد بخش خدمات میخواهیم سه ستون را ایجاد کنیم، برای این کار از سیستم grid واکنش گرا در بوت استرپ 4 استفاده میکنیم. این شبکه grid  شامل ردیف ها و ستون هایی است که صفحه را تقسیم بندی می کنند. به طور پیش فرض، هر ردیف شامل 12 ستون (با این حال، شما می توانید این مورد را در تنظیمات Sass خود تغییر دهید) است. می توانید تعداد ستون هایی را که می خواهید با استفاده از کلاس های ستون مشخص کنید. به عنوان مثال کلاس col-4 4 ستون از 12 ستون پیشفرض را به خود اختصاص میدهد.

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

به عنوان مثال، در کد زیر، .col-md-4 بر روی grid های متوسط، بزرگ و خیلی بزرگ اعمال می شود. این بدان معنی است که تبلت ها و دسکتاپ ها بخش خدمات را در 3 ستون برابر در کنار یکدیگر نشان می دهند. و گوشی های هوشمند با نمایشگرهای کوچک و یا حتی خیلی کوچک، آنها را زیر یکدیگر به شکل یک ستون (یک ستون در هر ردیف) نمایش می دهند.

<section id="services" class="container">
   <h2 class="display-4 text-center mt-5 mb-3">Our Services</h2>
   
   <div class="row text-center">
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="design.jpg" alt="Design">
            <div class="card-body">
               <h4 class="card-title">Design</h4>
               <p class="card-text">Deliver the best user experience 
               with our carefully designed responsive websites and applications!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
            </div>
         </div>
      </div>
      
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="development.jpg" alt="Development">
            <div class="card-body">
               <h4 class="card-title">Development</h4>
                  <p class="card-text">You need software that works on every device. 
                  Leverage the latest technologies and the most powerful tools!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See projects &raquo;</a>
            </div>
         </div>
      </div>
      
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="analytics.jpg" alt="Analytics">
            <div class="card-body">
               <h4 class="card-title">Analytics</h4>
               <p class="card-text">Consult our experts to set up proper goals and 
               find the best stack for your next application!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See testimonials &raquo;</a>
            </div>
         </div>
      </div>
   </div>
</section>

کد های بالا همچنین از کامپوننت های Card در بوت استرپ 4 استفاده می کنند که دارای پنج کلاس از قبل ساخته شده است: .card ، .card-img-top ، .card-body، .card-title. و .card-text . کلاس h-100. یکی از کلاسهای ابزار اندازه گیری بوت استرپ 4 است که شما می توانید بر روی هر عنصری که می خواهید استفاده کنید. این کلاس ارتفاع هر کارت را با مقدار 100٪ تنظیم می کند.

شما همچنین می توانید دکمه های secondary را در فایل style.css خود تغییر دهید و آن را با بقیه صفحه اصلی خود مطابقت دهید، به عنوان مثال:

btn-secondary {
    background-color: transparent;
    border-color: #c60063;
    color: #c60063;
}

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

5. بخشی تمام عرض را برای مشاهده مشخصات تماس ایجاد کنید

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

<section class="container-fluid text-center py-4 mt-4" id="contact">
   <h2 class="display-4 pb-4 my-4">Get in touch with us today!</h2>
   <p class="lead pb-3">Send us a message and we will get back to 
   you as soon as possible.</p>
   <a href="#" class="btn btn-primary btn-lg mb-4" role="button">Contact us</a>
</section>

همانند بخش Jumbotron، شما همچنین باید یک تصویر پس زمینه را به قسمت تماس در فایل style.css خود اضافه کنید:

#contact {
    background: url("contact.jpg") no-repeat center;
}

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

6. بخش فوتر را ایجاد کنید

صفحات فرود معمولا فوتر های ساده ای دارند، بنابراین کد زیر به سادگی یک پیام کپی رایت به پایین صفحه شما اضافه می کند:

<footer class="py-3 bg-light">
   <div class="container">
      <p class="text-center">Copyright &copy; Hello Consultancy 2019</p>
   </div>
</footer>

و اکنون صفحه ما به طور کامل طراحی شد! در شکل زیر دوباره کل صفحه فرود را مشاهده میکنید :

نتیجه

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

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

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

بحث و گفتگو

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

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

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

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

۱۲ منبع عالی برای انیمیشن ها در CSS

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

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

1.Animista

Animista نوعی محیط است که میتوانید در آن مجموعه ای از انیمیشن های پیش ساخته شده CSS را ویرایش و اجرا کنید. سپس کد مورد نظر خود را برای استفاده در پروژه هایتان کپی کنید. Animista کار خود را به عنوان یک پروژه جانبی برای توسعه یکپارچه Ana Travas آغاز کرد، که هنوز در حال توسعه آن است.

2.CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet پروژه ای مفید است و مجموعه ای از انیمیشن های از پیش تنظیم شده را برای استفاده در پروژه های وب فراهم می آورد. برای شروع، و به منظور کمک به شما دستورالعمل های مشخصی  وجود دارد، اما اساسا، شما فقط باید  فایل استایل مورد نظر را به وب سایت خود اضافه کرده و کلاس های CSS از پیش ساخته شده را برای متحرک سازی بر روی عناصر مورد نظر خود اعمال کنید.

این پروژه از keyframe های CSS3 استفاده میکند و این بدان معناست که شما نیاز ندارید در مورد موقعیت عناصری که متحرک سازی میشوند نگرانی داشته باشید.

3.Animate.css

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

این کار برای زمانی که کلاس ها را با استفاده از جاوا اسکریپت به عناصر اضافه میکنید نیز به خوبی کار میکند. حجم فایل این کتابخانه زمانی که فشرده سازی میشود بسیار کوچک است. اما اگر شما نمی خواهید همه چیز را در سایت خود بارگذاری کنید، این پروژه همچنان یک منبع عالی الهام بخش و مفید باشد. Animate.css توسط  Dan Eden کامپایل شده است.

 این کتابخانه تقریبا هر انیمیشنی از CSS که شما می توانید به آن نیاز داشته باشید، از اصول (bounce, fade in) تا چیز های هیجان انگیر تر (Jack in the Box, Jello) را شامل میشود. از منوی کشویی در صفحه اصلی سایت این کتابخانه برای دیدن عناوین هر یک از سبک های مختلف استفاده کنید.

4.Hover.css

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

5.CSShake

CSShake کتابخانه ای از انیمیشن های CSS است که برای تکان دادن عناصر اختصاص یافته است. این کتابخانه دارای تعدادی کلاس است که می توانید برای تکان خوردن های مختلف به عناصر اضافه کنید. این کتابخانه از keyframe ها و مشخصه transform برای ایجاد انیمیشن هایی که گاهی اوقات دیوانه کننده به نظر می رسند استفاده می میکند.

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

6.Obnoxious.css

Obnoxious.css دقیقا همانطور که از نام آن پیداست توسط Tim Holman ساخته شده است . این کتابخانه آنچه را که ممکن است با انیمیشن های CSS امکان پذیر باشد،اما بیشتر آنچه را که شما نباید با انیمیشن های CSS انجام دهید را بررسی میکند. در حالی که به عنوان یک کتابخانه انیمیشن ارائه شده است، اما بیشتر به منظور نمایش انیمیشن ها طراحی شده است.

7.Replainless.CSS

Replainless.css یک کتابخانه متحرک کوچک و سبک وزن CSS است که بر روی ایجاد انیمیشن هایی که باعث تغییر رنگ از طرف مرورگر های مختلف نمیشوند تمرکز دارد (تا زمانی که به درستی مورد استفاده قرار بگیرند). این انیمیشن هه فوق العاده سریع و کاربردی هستند!

8.Animate Plus

این کتابخانه برای سایت های موبایلی بسیار مناسب است. Animate Plus به خاطر زیبایی و جذابیتش محوبیت زیادی را بدست آورده است . یکی از متفکران پشت این کتابخانه یعنی، بنجامین دکک، یک کتابخانه متحرک CSS و SVG ایجاد کرده است که عملکردی عالی دارد و این امر به ویژه برای تلفن همراه مناسب است.

9.Motion UI

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

10.BounceJS

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

11.GreenSock Animation Platform

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

12.Easing functions cheatsheet

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

 

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

مقایسه جامع بین فریمورک های React ، Angular و Vue.js (قسمت ۱)

مقایسه فریمورک های React ، Angular و Vue.js و اینکه کدام یک برای توسعه وب مناسب تر هستند، موضوعی است که بحث کردن در مورد آن بی پایان است . آمار رضایتمندی، ویژگی ها، روند ها، توسعه دهندگان، تعداد دانلود ها، و ستاره های Github همه و همه معیار هایی هستند که برای مقایسه این سه فریمورک استفاده میشوند. انتخاب یک تکنولوژی و یا حتی یک زبان برای توسعه وب گاهی اوقات کاری خسته کننده می شود، زیرا شما باید همه ی فاکتور ها اعم از بودجه، زمان، اندازه برنامه، کاربران نهایی، اهداف پروژه و منابع  را در نظر بگیرید.

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

در اینجا با توجه به روند های گوگل نگاهی به مقایسه سه فریمورک React ، Angular و Vue.js خواهیم انداخت. اگر ما یک سال گذشته را در نظر بگیریم، به نظر می رسد Angular برنده این مقایسه است، React در جایگاه دوم قرار دارد است،  و تقریبا Vue.js را میتوان نادیده گرفت.

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

مقایسه React ، Angular و Vue.js

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

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

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

تاریخچه هر یک از فریمورک ها

React یک کتابخانه جاوا اسکریپتی برای ساخت کامپوننت های رابط کاربری برای برنامه های وب است. React توسط فیس بوک نگهداری می شود و بسیاری از برندهای فناوری های پیشرو از React در محیط توسعه خود استفاده می کنند. React توسط Facebook، Uber، Netflix، twitter، Udemy، Paypal، Reddit، Tumblr، Walmart و بسیاری دیگر استفاده می شود.

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

Angular هم به عنوان فریمورکی در جاوا اسکریپت که مبتنی بر TypeScript است و به وسیله گوگل پشتیبانی میشود شناخته شده است. Angular فریمورکی فوق العاده محبوب است که برای توسعه برنامه های front-end این دوره طراحی شده است. چندی بعد از انتشار فریمورک آنگولار نسخه دوم آن (Angular 2) که از اول بازنویسی شده بود منتشر شد.توسعه برنامه های آنگولار در بین توسعه دهندگان در سراسر جهان بسیار محبوب است و توسط شرکت های غول پیکری مانند Google، Forbes، WhatsApp، Instagram و healthcare.gov استفاده می شود.

اکنون به سراغ Vue بیاییم. در حال حاضر، Vue.js به یکی از پر بحث ترین مباحث وب تبدیل شده و محبوبیتش به سرعت در حال رشد است. این فریمورک توسط کارمند سابق گوگل ایجاد شد - ایوان  زمانی که یک کارمند Google بود بر روی Angular کار میکرد.توانایی این فریمورک برای ساخت رابط های کاربری جذاب با استفاده از HTML، CSS و جاوا اسکریپت عالی است. Vue توسط Alibaba، GitLab، Baidu استفاده شده است 

محبوبیت و روند بازار

با توجه به نظرسنجی سایت Stackoverflow در سال 2017 فریمورک آنگولار مورد علاقه ی 51.7٪ از توسعه دهندگان وب بوده است و فریمورک React توسط 66.9٪ از توسعه دهندگانی که آن را بررسی کرده اند، پذیرفته شده است. البته این نتیجه قابل پیش بینی بود زیرا جاوا اسکریپت محبوب ترین زبان دنیا برای وب است که 81.7٪ از کل فضای وب را به خود اختصاص داده است.

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

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

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

با توجه به سناریوی کنونی، Vue دارای 108,086 ستاره ، React دارای 106,807 ستاره و آنگولار دارای 38،654 ستاره است. با توجه به آمار بالا به نظر میرسد Vue.js محبوبیت بیشتری پیدا کرده است و این توانایی در جلب توجه توسعه دهندگان به دلیل معماری خوب و آسان این فریمورک بوده است.

با این حال، نباید فراموش کنید که Angular و React توسط نام های بزرگی در صنعت وب استفاده می شوند. گوگل از پروژه Angular در پروژه های خود و برند هایی مانند فیس بوک، Airbnb، Dropbox، WhatsApp، Netflix از React در محیط توسعه خود استفاده می کنند.

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

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

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

پایان قسمت اول - این مقاله ادامه دارد ...

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

مقایسه جامع بین فریمورک های React ، Angular و Vue.js (قسمت ۲)

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

آیا پیدا کردن توسعه دهندگان هر کدام از این فریموک ها آسان است؟

واضح است که توسعه دهندگانی که با زبان HTML کار میکنند بیشتر از توسعه دهندگانی هستند که با جاوا اسکریپت کار میکنند .  React پر از کد های جاوااسکریپت است و گاهی اوقات به این دلیل است که افراد به سمت Angular یا Vue حرکت می کنند.

کار با HTML حس بهتری دارد اما React دارای قاعده نوشتاری متفاوت(JSX) از زبان HTML است. اگر چه این فریمورک نیازی به استفاده  از JSX در برنامه شما ندارد، اما آشنایی با راه اندازی، محیط و معماری React کمی دشوار است. Angular گزینه ای بسیار خوب در این مورد است. شما به راحتی می توانید توسعه دهندگان Angular  را بیابید.

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

JSX یا HTML؟ - کدام را ترجیح میدهید؟

این مورد یک بحث بی پایان است. Angular بیشتر از HTML  استفاده میکند، در حالیکه React بیشتر درباره جاوا اسکریپت است. در نظر داشته باشید که همه این 3 فریمورک بر اساس کامپوننت هستند. شما می توانید هر زمان که لازم است از این کامپوننت ها در همه جای برنامه خود استفاده کنید. اگر ما در مورد JSX صحبت کنیم، با توجه به اسناد رسمی، JSX نه یک رشته است و نه HTML .

JSX اجازه می دهد تا توسعه دهندگان عناصر React را ایجاد کنند و بیشتر یک قاعده نوشتاری برای جاوا اسکریپت محسوب میشود. مزایای زیادی برای استفاده از JSX وجود دارد، زیرا جاوا اسکریپت قدرتمندتر از HTML است و زبانی کاملا توسعه یافته و پیشرفته برای توسعه front-end است. Vue متفاوت تر از دو فریمورک دیگر است.

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

توجه : شما می توانید از JSX در فریمورک Vue با استفاده از پلاگین بابل استفاده کنید.

فریمورک؟ کتابخانه؟ تفاوت این دو در چیست؟

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

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

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

چیزهای مهم دیگر که باید به آن توجه کنید

Angular  شامل تزریق وابستگی است، مفهومی که یک شی وابستگی هایی را برای شی ای دیگر فراهم می آورد. این باعث می شود کد  برای درک، آسان تر به نظر برسد. از سوی دیگر، یک الگوریتم MVC وجود دارد که پروژه را به سه جزء مختلف تقسیم می کند: مدل، ویو، و کنترلر.

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

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

مدل DOM مجازی از لحاظ عملکرد بسیار مفید است. هر دو فریمورک React و Vue دارای DOM مجازی هستند. با توجه به ساختار خوب، Vue دارای عملکردی عالی و تخصیص حافظه خوبی است. React هم در این زمینه به خوبی کار میکند و  البته Angular در این رقابت از دو فریمورک دیگر پیشی گرفته است.

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

آیا با این فریموک ها توسعه برنامه بومی امکان پذیر است؟

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

NativeScript در Angular هم در حال حاضر توسط بسیاری برای توسعه برنامه های بومی پذیرفته شده است و فریمورک Ionic برای استفاده از برنامه های هیبریدی بسیار محبوب است. پلت فرم Weex در Vue نیز در حال تحول است و به نظر می رسد در حال حاضر برنامه ای برای ادامه آن وجود ندارد.

سرانجام، کدام فریموک را باید انتخاب کنیم؟

اگر شما بیش از سایر ویژگی ها انعطاف پذیری را دوست دارید، از React استفاده کنید.

اگر شما کدنویسی در TypeScript را دوست دارید، به سمت Angular بروید.

اگر شما عاشق جاوا اسکریپت هستید، از React استفاده کنید زیرا همه چیز آن در مورد جاوا اسکریپت است.

اگر طرفدار کدی تمیز هستید، از Vue در برنامه خود استفاده کنید.

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

اگر میخواهید مفاهیم در برنامه ی شما جدا سازی شوند، از Vue استفاده کنید.

اگر شما علاقه مند به برنامه نویسی شی گرا باشید، Angular قطعا یک انتخاب عالی است.

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

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

PWA یا برنامه پیش رونده چیست و چرا باید به آن توجه کنید؟

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

با توجه به اینکه کاربران بیشتری از تلفن همراه استفاده میکنند، بهینه سازی تجربه کاربری برای گوشی های موبایل به یک ضرورت تبدیل شده است.

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

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

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

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

با برنامه های وب پیش رونده (progressive) آشنا شوید

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

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

چرا ما به PWA ها نیاز داریم و ویژگی های آنها چیست؟

بیایید در مورد برخی از مشخصه های اصلی که در برنامه های کاربردی وب معمولی وجود ندارند و در برنامه های پیش رونده ارائه میشوند صحبت کنیم :

قابلیت اطمینان

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

سریع 

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

واکنش گرا 

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

قابل نصب 

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

Splash Screen

Splash Screen تصویری است که هنگام بارگذاری یک برنامه یا بازی ظاهر می‌شود. این باعث می شود PWA بیشتر شبیه به یک برنامه بومی به نظر برسد.

قابلیت در گیر کردن

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

تمام ویژگی های فوق در برنامه های PWA ممکن است. PWA فقط یک برنامه وب معمولی است که به تجربه کاربری توجه ویژه ای کرده است.

PWA و فریمورک های مدرن رابط کاربری

بعضی از مردم فکر می کنند که یک PWA همراه با فریمورک های مدرن رابط کاربری مانند ReactJs، Angular 6 یا Vue.js ارائه میشود. خوب، نه لزوما . PWA هیچ ارتباطی با فریمورک هایی که استفاده می کنید ندارد و فقط به کامپوننت های مشخصی نیاز دارد.

PWA چگونه وب سایت ها را به صورت آفلاین در دسترس قرار میدهد؟

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

PWA فایل های HTML، فایل های CSS و تصاویر را در حافظه پنهان مرورگر ذخیره می کند و توسعه دهندگان می توانند به طور کامل ارتباطات شبکه را کنترل کنند. همه اینها توسط Service Worker  قابل دسترسی است.

کاپوننت های تکنیکی PWA کدامند؟

PWA دارای برخی کامپوننت های مهم فنی است که با هم کار می کنند و به برنامه وب به طور منظم انرژی می دهد. کامپوننت های زیر برای ایجاد یک برنامه PWA خوب مورد نیاز است.

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

1.Service Worker

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

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

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

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

2. فایل مانیفست 

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

{
  "short_name": "Spinner",
  "name": "Fidget spinner",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/home/",
  "theme_color": "#3367D6"
}

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

3.HTTPS 

Service workers  قادر به رد درخواست های شبکه هستند و می توانند پاسخ ها را تغییر دهند. Service workers تمام اقدامات را در طرف مشتری انجام می دهند. از این رو، PWA نیاز به پروتکل HTTPS دارد.

بررسی یک برنامه PWA

امروزه PWA های زیادی وجود دارد که در دسترس هستند. اگر میخواهید با PWA ها کار کنید و عملکرد Service workers را در عمل ببینید، از سایت fidgetspin.xyz بازدید کرده و به محیط توسعه دهندگان در مرورگر کروم بروید.

Status : به ما می گوید که service worker فعال و یا غیر فعال است.

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

Cache : این بخش نشان می دهد که همه فایل ها در حافظه پنهان توسط service worker ذخیره می شوند.

نتیجه

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

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

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

بحث و گفتگو

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

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

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

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