۲۹تیر

۱۰ روش برای بهینه سازی کدهای CSS و افزایش سرعت وب سایت

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

optimise

فریمورک ها این تعادل را برهم میزنند وقتی از فریمورک هایی همچون jQuery UI استفاده می کنید، فایل های css و جاوا اسکریپت مربوط به این فریمورک ها اندازه صفحات html را به سرعت افزایش می‌دهند. اغلب توسعه‌دهندگان از این بابت کمترین مشکل را حس میکنند زیرا که اکثر آنها دارای سیستم های قدرتمند با اینترنت های بسیار سریع هستند. اما واقعیت این است که وبسایت شما برای کاربران طراحی می‌شود و باید به سرعت بارگذاری آن توجه ویژه ای کرد.

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

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

از اختصار در نوشتن کدها استفاده کنید

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

p { margin-top: 1px;
    margin-right: 2px;
    margin-bottom:  3px;
    margin-left: 4px; }

p { margin: 1px 2px 3px 4px; }

کد هایی از CSS که استفاده نمیشوند را پیدا نموده و حذف کنید

حذف کدهای بلااستفاده در CSS می‌تواند تا حد زیادی باعث افزایش سرعت وب سایت شما شود. خوشبختانه مرورگر کروم قابلیت ویژه ای را در اختیار ما میگذارد که می توانیم از آن برای پیدا کردن کد های بلااستفاده بهره ببریم. از منوی Developer زیر منوی Developer Tools را انتخاب کنید سپس به سربرگ Sources رفته و ترکیب کلیدهای کنترل ، شیفت و p را بفشارید.

اکنون Show Coverage را تایپ کرده و این دستور را اجرا کنید. در این حالت مرورگر کروم به شما قسمت هایی از فایل های css که استفاده نمی شوند را نمایش میدهد.

از مشکلات آگاهی داشته باشید

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

کدهای حیاتی در CSS را به صورت Inline درج کنید

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

style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>

تصاویر را با کدهای CSS جایگزین کنید

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

img {
    -webkit-filter: grayscale(100%); /* old
safari */
    filter: grayscale(100%);
}

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

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

target { background-color: #ffffff; }
target { background: #fff; }

واحدهای غیر ضروری در CSS را حذف کنید

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

padding: 0.2em;
margin: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0;

فضاهای خالی را حذف کنید

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

کامنت ها را حذف کنید

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

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

تیم با تجربه yahoo اپلیکیشنی را ایجاد کرده است که برخی وظایف فشرده سازی را برای ما انجام می دهد(اینجا) این اپلیکیشن یک فایل JAR است که می تواند با انتخاب JVM اجرا شود.

java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
 [options] [input file]
Global Options
    -h, --help                Displays this
 information
    --type <js|css>           Specifies the
 type of the input file

نتیجه

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

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

۰ نظر

شهربانو دوستی

۲۹تیر

۴ مهارتی که برای تبدیل شدن به یک توسعه دهنده back-end نیاز دارید

توسعه دهندگان وب مسئولیت های زیادی را بر عهده دارند حتی اگر آنها فقط بر روی back-end کار کنند باید کدهایی بنویسند که بر روی سرور اجرا شود. آن ها باید قادر باشند:

کدهایی از html را بنویسند که در مرورگر کاربر نمایش داده شود.
کدهای را بنویسند که به کلیک های کاربر پاسخ دهد.
با دیتابیس ارتباط برقرار کنند و داده های ورودی توسط کاربر را در آن ذخیره کنند.
برای اپلیکیشن های ios و اندروید از طریق Api های JSON و XML داده ها را فراهم بیاورند.

develper

در این مقاله می خواهیم در مورد اکثر این مهارت‌ها و تکنولوژی‌هایی که شما نیاز دارید تا به یک توسعه دهنده back-end تبدیل شوید صحبت کنیم. ما هر کدام از این مهارتها را با ساخت یک برنامه وب بسیار ساده به شما نشان خواهیم داد.

مهارت اول : یک زبان برنامه‌نویسی

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

from flask import Flask
app = Flask(__name__)

@app.route('/')
def main_page():
    return 'Welcome to my blog!'

این برنامه ساده منتظر مرورگر خواهد ماند تا به آن متصل شود و سپس با یک متن ساده "!Welcome to my blog" پاسخ می‌دهد :

backend

من تصمیم گرفتم این اپلیکیشن را با استفاده از زبانی به نام پایتون و کتابخانه ای به نام Flask بنویسم. اما برنامه ای ساده مثل این تقریبا می تواند با استفاده از هر زبان سمت سروری همچون #Java ،JavaScript ،C و PHP نوشته شود. هنگامی که مرورگری درخواستی را به سمت وب سرور ارسال می‌کند سرور باید پاسخ این درخواست را بدهد.

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

مهارت دوم : دیتابیس و SQL

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

برای داشتن چنین وبلاگی ما دیتابیسی را ایجاد کرده ایم که حاوی جدولی به نام articles است. این جدول دارای دو ستون بوده که ستون اول title نام دارد که عنوان مقاله در آن قرار میگیرد و ستون دوم content نام دارد که محتوای مقالات در آن قرار می گیرد. ما دو ردیف ایجاد کرده ایم که نشان میدهد وبلاگ ما دارای دو مقاله است :

backend_database

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

from flask import Flask
import sqlite3 as sql
app = Flask(__name__)

def articles():
    query = "SELECT * FROM articles"
    connection = sql.connect("test.db")
    connection.row_factory = sql.Row
    result = connection.cursor().execute(query)
    records = result.fetchall()
    connection.close()
    return records

@app.route('/')
def main_page():
    content = ""
    for record in articles():
       content += ("<p>%s: %s</p>" % (record["title"], record["content"]))
    return content

app.run()

عبارت "SELECT * FROM articles" در کد بالا با استفاده از زبان SQL نوشته شده است که به معنای دریافت تمام داده های جدول articles است. همچنین کد خود را به روز رسانی کرده ایم تا داده های خوانده شده از دیتابیس در مرورگر نمایش داده شود :

backend_sql

برنامه های زیادی برای پایگاه داده وجود دارد برای مثال میتوان به MySQL ، PostgreSQL و SQL Server اشاره کرد. اما همه آنها مشابه همدیگر داده‌ها را در ردیف ها و ستون های جداول ذخیره می کند. اگر شما زبان SQL را بدانید قادر خواهید بود با هر کدام از این برنامه ها ارتباط برقرار کنید.

مهارت سوم : HTML

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
  </head>
  <body>
    {% for article in articles %}
      <h1>{{article["title"]}}</h1>
      <p>{{article["content"]}}</p>
    {% endfor %}
  </body>
</html>

همچنین من نیاز دارم تا کدهای مربوط به اپلیکیشن خود را برای استفاده از قالب html به روز رسانی کنم :

@app.route('/')
def main_page():
    return render_template("main.html", articles = articles())

اکنون صفحه ما در قالبی همچون شکل زیر نمایش داده می شود، صفحه ما همچنان دارای ظاهر ساده است ولی برای شروع کار کافی است :

backend_html

وبسایت حداقل از مقداری html استفاده می‌کنند. این دقیقا چیزی است که مرورگرها انتظارش را دارند. توسعه‌دهندگان back-end اغلب نیاز ندارند همه کد های HTML را خودشان بنویسند. آنها معمولا در این موضوع بر توسعه دهندگان front-end تکیه دارند. اما هنوز آنها نیاز دارند کدهای HTML را درک کنند. فهم زبان HTML به آنها کمک می‌کند تا بتوانند راحت‌تر داده ها را در صفحات درج کنند.

مهارت چهارم : API های JSON یا XML

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

برای بازیابی داده به منظور نمایش آنها، این اپلیکیشن ها نیاز به یک Application Programmer Interface و یا به عبارتی دیگر API دارند که به آن متصل شوند.

HTML زبانی مفید برای فرمت بندی محتوا در مرورگر ها است اما همچنان فرمت های بهتری نیز برای داده ها وجود دارند که توسط دیگر برنامه ها استفاده میشوند. فرمت رایج برای داده های API عبارتند از JSON و XML .

برای مثال با استفاده از فرمت JSON به طریق زیر می توان مقالات خود را فرمت بندی کنیم :

[{"title":"First post...",   "content":"From my new blog app!"},
 {"title":"We got a puppy!", "content":"Her name is Chai."}]

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

<article>
    <title>First post...</title>
    <content>From my new blog app!</content>
</article>
<article>
    <title>We got a puppy!</title>
    <content>Her name is Chai.</content>
</article>

اکنون وقت آن رسیده تا اپلیکیشن خود را به روز رسانی کنیم تا بتوانیم یک API ساده را به آن اضافه کنیم. این API تمام مقالات وبلاگ ما را از دیتابیس گرفته و به فرمت JSON ارائه می دهد :

@app.route('/articles.json')
def articles_json():
    return json.dumps([dict(row) for row in articles()])

حالا زمانی که یک مرورگر وب "/articles.json" را به انتهای آدرس خود اضافه کند می‌تواند به API ما متصل شود و لیست مقالات ما را به فرمت JSON دریافت کند.

backend_json

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

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

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

۰ نظر

شهربانو دوستی

۲۹تیر

۱۰ دلیل برای برتری زبان پایتون نسبت به زبان php

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

phyton

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

چگونه می‌توان پایتون را با پی اچ پی مقایسه کرد؟

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

طراحی حساب شده تر

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

یادگیری آسان

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

فریمورک

فریمورک ها با ارائه ی ساختاری مناسب برای یک اپلیکیشن، کار توسعه دهندگان را بسیار ساده می کنند. پایتون فریمورک های Django و Flask را فراهم می آورد. در حالی که در php می‌توان از فریمورک های Kohana ،Symfony ،CodeIgniter و Zend استفاده نمود. در میان فریم ورک های پایتون قطعاً Django برنده بازی خواهد بود. استفاده از Django بسیار ساده بوده و سریع و امن است. توسعه‌دهندگان جدید Django را انتخاب می کنند. به خصوص زمانی که بخواهند زمان کمتری را برای توسعه برنامه صرف کنند.

دقت بالاتر

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

قاعده ی نوشتاری به ساده تر

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

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

زبان پایتون یک عیب یاب قدرتمند به نام PDB را ارائه می دهد. PDB دارای اسناد زیادی بوده و استفاده از آن حتی برای تازه کارها آسان است. زبان php نیز پکیجی را برای خطایابی به نام X Debug ارائه می‌دهد که عملکرد آن عالی است. تنها دلیلی که در اینجا می‌توان گفت پایتون را قوی تر از php نشان می دهد این است که این زبان به ابزارهای کمتری نسبت به php برای عیب یابی نیاز دارد.

مدیریت پکیج ها

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

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

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

پایتون چندمنظوره تر از زبان php است

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

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

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

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

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

بحث و گفتگو

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

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

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

۰ نظر

شهربانو دوستی

۲۹تیر

۵ دلیل برای یادگیری زبان برنامه نویسی GO

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

"Go", "Go Programming Language", "Go-Lang", و "Google Go".

زبان GO در سال ۲۰۰۷ در گوگل توسط رابرت گریزمر، رابین پیک و کن تامپسون طراحی و پشتیبانی شد. این کار برای حمایت از مقیاس پذیری و کارایی انجام شد. GO یک زبان برنامه نویسی برای توسعه دهندگانی است که بر روی سرعت زبان های پویا همچون پایتون کار می کنند و میخواهند از مزایای کارایی و امنیت در زبان هایی همچون C و ++C بهره ببرند. زبان برنامه نویسی GO سریع و کامپایلری است.

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

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

قاعده نوشتاری زبان GO بسیار شسته و رفته بوده و درک آن آسان است. زبان GO در مقایسه با دیگر زبان های برنامه نویسی بسیار متفاوت است . زبان GO همچون زبان های C و ++C بسیار کارآمد بوده و نوشتن کد در آن به سادگی زبان های Ruby/Python است. در زیر به برخی از ویژگی‌های اشاره خواهم کرد که در زبان GO وجود ندارد :

در این زبان کلاس وجود ندارد. هر چیزی در این زبان در پکیج ها تقسیم بندی می شود. زبان GO به جای کلاس ها تنها شامل ساختار هاست.
این زبان از وراثت پشتیبانی نمی کند، این ویژگی باعث می شود ویرایش کدها آسان تر شود. در زبان های دیگر برنامه نویسی همچون جاوا و پایتون اگر کلاسی به نام ABC از کلاسی دیگر به نام XYZ ارث بری کند و بخواهید تغییراتی را در کلاس XYZ ایجاد کنید. این تغییرات باید در کلاس هایی که از این کلاس ارث بری کرده‌اند نیز اعمال شود. با حذف قابلیت ارث بری فهم زبان GO آسان تر شده است.
در این زبان سازنده وجود ندارد.
در این زبان جنریک لیست ها وجود ندارند.
در این زبان استثناها وجود ندارند.

زبان برنامه نویسی GO بسیار قدرتمند است

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

زبان برنامه نویسی GO دارای واژگان کلیدی مشخصی است

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

زبان برنامه نویسی GO دارای قوانین محدوده ای ساده است

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

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

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

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

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

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

بحث و گفتگو

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

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

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

۰ نظر

شهربانو دوستی

۲۸تیر

ری اکت نیتیو یا React Native چیست؟

ری اکت نیتیو (React Native) یک چارچوب توسعه ی نرم افزاری موبایل است که امکان توسعه برنامه های چند سکویی اندروید و ios را با استفاده از عناصر UI بومی فراهم می آورد. این فریمورک برپایه JavaScriptCore و ترانسفورماتور Babel است. با استفاده از این فریمورک قابلیت های جدید جاوا اسکریپت (+ES6) همچون توابع arrow و قابلیت های async/await در دسترس است.

what-is-react-native

این فریمورک معروف که برای توسعه های تلفن همراه استفاده میشود در تابستان سال ۲۰۱۳ به عنوان پروژه ای درون سازمانی در فیسبوک آغاز به کار کرده است. اولین پیش نمایش عمومی آن در ژانویه سال ۲۰۱۵ در کنفرانس Reactjs و در ماه مارس ۲۰۱۵ منتشر شد. فیسبوک فریمورک ری اکت نیتیو را سورس باز و در سایت گیت‌هاب در اختیار عموم قرار داد. از آن به بعد این فریمورک در بین توسعه دهندگان و سازمان‌ها به دلیل توانایی برای تولید برنامه های بومی و رابط کاربری عالی به طور گسترده پذیرفته شد.

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

what-is-react-native-trends

بنابراین اکنون نباید از این واقعیت تعجب کنیم که بسیاری از برنامه هایی که امروزه استفاده میکنیم بر مبنای جاواسکریپت هستند تا بر مبنای زبان هایی مثل جاوا و کاتلین. برخی از برنامه هایی که بر مبنای جاوا اسکریپ هستند عبارتند از Myntra ، UberEats ،Facebook و Instagram.

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

برنامه های تلفن همراه بومی چه برنامه‌هایی هستند؟

برنامه های تلفن همراه بومی اپلیکیشن های هستند که اختصاصاً برای یک سیستم عامل ایجاد شدند که در اینجا می تواند اندروید و یا ios باشد. برای ساخت برنامه های بومی در ios از زبان C/Swift استفاده می‌کنیمT این در حالیست که برای توسعه برنامه های بومی در اندروید از زبان های جاوا و کاتلین بهره می‌بریم.

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

ری اکت جی اس چیست؟

قبل از اینکه وارد جزئیات کامل درباره فریم ورک ری اکت نیتیو شویم، ابتدا بهتر است بدانیم ری اکت جی اس چیست :

یک کتابخانه جاوا اسکریپتی منبع باز است که به وسیله فیسبوک توسعه یافته است.
یک کتابخانه رابط کاربری (UI) است.
ابزاری برای ساخت کامپوننت های رابط کاربری (UI) است.

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

ری اکت نیتیو(React Native) چیست؟

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

import React from 'react';
import { Text, View } from 'react-native';

export default class Brainhub extends React.Component {
   render() {
      return (
         <View>
            <Text>What is React Native</Text>
         </View>
      );
   }
}

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

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

به لطف transpiler های بابل در ری اکت نیتیو بسیاری از ویژگی‌های ES6 پشتیبانی می شود. بنابراین شما می توانید از این تکنولوژی بدون هیچ استرسی از بابت سازگاری در دستگاه های مختلف استفاده کنید. برخی از قابلیت های ES6 آورده در مثال بالا عبارتند از import, from و class.

<View>
     <Text>What is React Native</Text>
</View>

نمونه مثال بالا یک JSX است، یک گرامر برای کپسوله سازی XML داخل زبان جاوا اسکریپت. این گرامر به شما اجازه نوشتن کدهای تان را در markup language می‌دهد. این گرامر شبیه HTML است که ما در توسعه وب سایت ها از آن استفاده می کنیم. اما به جای استفاده از <div> و <span> شما می توانید از کامپوننت های ری اکت نیتیو استفاده کنید.

در اینجا <Text> یک کامپوننت داخلی است که محتوا را به نمایش می‌گذارد و جایگزینی برای <div> و <span> محسوب میشود.

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

نمونه مثالی که در قسمت قبل به آن اشاره کردیم و متن "What is React Native" را نشان می دهد. این خط متنی همچون یک کامپوننت عمل می کند، چیز اصلی که مورد نیاز است یک تابع رندر کننده است که مقداری JSX را برای رندر شدن برمی‌گرداند. زمانی که اپلیکیشن ری اکت نیتیو خود را با اپلیکیشن های اندروید و ios ترکیب کردیم، هر کدام از چنین کامپوننت هایی به بلوک‌های سازنده بومی مربوطه نگاشت می شوند.

درست مثل موردی که قبلا ذکر شد <Text> به <TextView/> در اندروید و UILabel در ios نگاشت می شود.

آیا ری اکت نیتیو ارزش استفاده را دارد؟

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

مزایای ری اکت نیتیو :

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

آسان تر

این فریم ورک باعث ایجاد یک پایگاه کد منفرد می‌شود که می‌تواند برای ios و اندروید ترکیب شود، این کار باعث می‌شود که مهندسان انرژی کمتری را در کد نویسی صرف کنند.

تجربه کاربری

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

یک اکوسیستم

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

سریع

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

معایب ری ری اکت نیتیو :

عیب یابی

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

پیکربندی

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

نتیجه گیری

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

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

۰ نظر

شهربانو دوستی

۲۸تیر

الکترون جی اس و یا Electron JS چیست؟

حتما این مقاله را انتخاب کرده‌اید که به سوال شما در مورد الکترون جی اس(Electron JS) پاسخ دهد. خبر خوب این است که این مقاله شما را ناامید نخواهد کرد. اگر بخواهیم ساده بگوییم الکترون جی اس یک فریمورک زمان اجرا است که به کاربران اجازه ایجاد برنامه‌های desktop-suite را با استفاده از تکنولوژی هایی همچون html۵ ، css و جاوا اسکریپت می‌دهد.

what-is-electron-js

الکترون جی اس(Electron JS) یک پروژه اپن سورس است که به وسیله مهندسی در گیت هاب به نام Cheng Zhao شروع به کار کرد. الکترون جی اس اساسا ترکیبی از دو تکنولوژی فوق العاده است : Node.js و Chromium. بنابراین هر برنامه وبی که شما نوشته اید می تواند بر روی الکترون جی اس اجرا شود. به طور مشابه هر برنامه ای که با استفاده از Node.js نوشته اید می‌تواند از این تکنولوژی استفاده کند.

چگونه و چطور الکترون جی اس ایجاد شد؟

ماجرای الکترون جی اس در ژانویه سال ۲۰۱۳ آغاز شد که توسعه دهندگان به دنبال ابزاری برای ساخت ویرایشگر های متنی cross-platform بودند که بتوانند با تکنولوژی‌های مانند جاوااسکریپت، html و css کار کنند. الکترون جی اس در ۱۳ جولای سال ۲۰۱۳ به منظور توسعه cross-platform ساده تر برای ساخت “Atom” تأسیس شد و در ابتدا با نام Atom Shell شناخته می شد.

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

what-is-electron-js-timeline

ویژگی های کلیدی الکترون جی اس چیست؟

با فرض اینکه تعاریف بالا به سوال شما را در مورد چیستی الکترون جی اس پاسخ داده باشد، بیاید به سراغ ویژگی‌های این فریمورک محبوب برویم. الکترون جی اس از تکنولوژی های وبی همچون html ،css و جاوا اسکریپت استفاده می کند. الکترون جی اس نیازی به مهارت های بومی ندارد، مگر اینکه بخواهید کار های پیشرفته تری را انجام دهید. می‌تواند برای یک مرورگر طراحی شود. فایل های سیستمی آن متعلق به Api های Node.js است و بر روی لینوکس، Mac OS X و ویندوز کار میکند.

این فریمورک از ماژول npm که در جاوا اسکریپت کاربرد گسترده ای دارد، استفاده می کند. شامل منو های بومی برای دیالوگ ها و پیغام هاست. نصب کننده های ویندوز نیاز به هیچ پیکربندی ندارند. از قابلیت های auto-updating و گزارش گیری خطاها در ویندوز و و مک با استفاده از Squirrel بهره می‌برد. گزارش مربوط به خطا ها برای تحلیل بیشتر به سمت سروری خارجی ارسال می شود. فعالیت های ردیابی محتوا مانند خطا یابی توسط Chromium دنبال می‌شود.

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

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

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

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

اکنون بیایید نگاهی به معماری فریمورک الکترون جی اس بیندازیم. اگر شما بگویید که الکترون جی اس یک پیتزا و Node JS پایه و اساس آن است، بنابراین می توان گفت کروم پنیر و V8 JavaScript Engine چاشنی روی آن است.

Libchromiumcontent

کروم یک مرورگر سورس باز است که به وسیله گوگل ساخته شده است. این مرورگر یک tabbed window manager و یا shell برای وب ارائه می دهد. دارای یک رابط کاربری مینمالیست است و از V8 به عنوان موتور جاوا اسکریپت و از blink به عنوان موتور layout استفاده می‌کند. Libchromiumcontent کتابخانه رندرینگ Chromium است که اساسی سورس باز برای مرورگر گوگل کروم به شمار می آید.

Node JS

نود جی اس یک فریمورک زمان اجرا و سورس باز در جاوا اسکریپت است. که از موتور جاوا اسکریپت V8 استفاده می کند. شما را قادر می‌کند جاوا اسکریپت را خارج از مرورگر اجرا کرده و یک interactive shell فراهم می‌آورد. که میتوانید کد های خام جاوااسکریپت را اجرا کند. پروژه Node.js در ابتدا در سال 2009 به عنوان یک زمان اجرای cross-platform و سورس باز برای توسعه اپلیکیشن‌های سمت سرور توسط جاوا اسکریپت ایجاد شد. Node.js به همراه مدیریت کننده پکیجی به نام npm ارائه می‌شود که بزرگترین اکوسیستم کتابخانه‌ای سورس باز است.

موتور جاوا اسکریپت V8

موتور جاوا اسکریپت V8 یک موتور جاوا اسکریپت سورس باز بوده که توسط گوگل با استفاده از زبان هایی ++C و جاوا اسکریپت نوشته شده است.

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

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

فرایند رندر کردن رابط کاربری برنامه را نمایش می دهد. هر فرآیندی از مزایای معماری Chromium و اجرا بر روی thread بهره می‌برد. اکنون بیایید در مورداین فرآیندها با نوشتن یک برنامه ساده به گفتگو بپردازیم.

اجرای اولین برنامه الکترون جی اس - نصب برنامه “Hello World”

در فایل سیستم خود یک فولدر ایجاد کنید. برای ایجاد یک برنامه ساده شما نیاز به سه نوع فایل دارید: package.json, main.js و index.html .

ساخت فایل package.json با استفاده از دستور `yarn init` انجام میپذیرد :

{
            "name": "electron",
            "version": "2.0.0",
            "main": "index.js",
            "license": "MIT"
}

فایل JSON ایجاد شده به فایل های اصلی برنامه ، جزئیات و وابستگی‌های آن اشاره می کند.

اکنون در فایل package.json فایل main را به main.js تغییر داده و اسکریپت زیر را اضافه کنید :

"scripts": {
          "start": "electron ."
}

با استفاده از دستور زیر الکترون را نصب کنید :

yarn add --dev electron

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

yarn start

به خاطر اینکه هنوز کدی را اضافه نکرده اید شما با شکل زیر روبرو می شوید :

what-is-electron-js-activity-monitor

اکنون زمان آن رسیده است که کدها را به فایل ها اضافه کرده و برنامه Hello Worldرا ایجاد کنید. اسکریپت زیر را به فایل main.js اضافه کنید:

'use strict'
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
app.on('ready', () => {
                    // Create the browser window.
                    const win = new BrowserWindow({ width: 1000, height: 800 })

                    // and load the index.html of the app.
                    win.loadURL(
                                        url.format({
                                                  pathname: path.join(__dirname, 'index.html'),
                                                  protocol: 'file:',
                                                  slashes: true
                                                  })
                                        )
                    })

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

<!DOCTYPE html>
<html>
          <head>
<meta charset="UTF-8">
          <title>Hello World!</title>
</head>
          <body>
                    <h1>Hello World!</h1>
                     We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
          </body>
</html>

Index.html صفحه وبی برای رندر شدن است و این فرآیند رندر شدن برنامه است. زمانی که شما فایل های اولیه main.js, index.html و package.json را ایجاد کردید می توانید با استفاده از دستور ‘yarn start’ از دایرکتوری برنامه خود آن را اجرا کنید. وقتی فایل ها را اجرا می کنید به شکل زیر برنامه شما در مرورگر اجرا می شود :

what-is-electron-js-hello-world-installation

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

نتیجه گیری

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

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

۰ نظر

شهربانو دوستی

۲۸تیر

چطور همچون یک برنامه نویس فکر کنیم؟ نکاتی برای حل مسئله

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

solve

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

مهارت حل مسئله یک مهارت بزرگ است. همه ما مشکلاتی داریم چه کوچک چه بزرگ. اکثر اوقات با آنها چطور برخورد می کنیم؟ خیلی تصادفی. مگر اینکه شما سیستمی داشته باشید والا به صورت زیر برای حل مسئله خود اقدام می کنید(این روشی بود که وقتی برنامه نویسی را شروع کردم استفاده می کردم) :

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

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

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

داشتن چارچوب

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

فهمیدن

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

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

طرح و برنامه

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

با توجه به ورودی X مراحل مورد نیاز برای بازگشت خروجی Y چیست؟

(برنامه نویسان ابزار خوبی برای کمک به آنها در این زمینه دارند : کامنت ها)

تقسیم بندی

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

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

به مشکل برخورده اید؟

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

اشکال زدایی

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

ارزیابی مجدد

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

پژوهش و جستجو

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

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

تمرین

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

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

نتیجه گیری

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

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

۰ نظر

شهربانو دوستی

۲۸تیر

مقدمه کوتاه بر توابع سطح بالا در جاوا اسکریپت

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

high-level function

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

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

رشته ها نوعی داده هستند :

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'

اعداد نوعی داده هستند :

double = (x) => x * 2;
result = double(4);
console.log(result); // 8

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

getClearance = (allowed) => allowed ?
  'Access granted' :
  'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

اشیا نوعی داده هستند :

getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'

آرایه ها نوعی داده هستند :

len = (array) => array.length;
result = len([1, 2, 3]);
console.log(result); // 3

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

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

functionjavascript

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

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);
console.log(result); // [2, 4]

ببینید که چطور filter از isEven برای انتخاب اعداد استفاده می‌کند؟ isEven یک تابع بوده که به عنوان آرگومان برای تابعی دیگر فرستاده شده است. این تابع به ازای هر عدد به وسیله تابع filter فراخوانی می‌شود و از مقدار true و false برای تعیین زوج و فرد بودن اعداد استفاده می کند.

بازگشت توابع

add = (x) => (y) => x + y;

add به دو پارامتر نیاز دارد، اما نه به هر دوی آنها در یک بار. تابع add تابعی است که ابتدا به پارامتر x نیاز دارد که این پارامتر خود پارامتر y را در قالب یک تابع برمی‌گرداند. این قابلیت تنها در جاوا اسکریپت در دسترس است، زیرا جاوا اسکریپت به توابع اجازه می‌دهد به عنوان یک مقدار return شوند(درست مانند رشته ها، اعداد، مقادیر بولین و غیره).

شما همچنین می توانید مقادیر x و y را سریعاً فراهم کنید. این کار به شکل زیر می تواند انجام شود :

result = add(10)(20);
console.log(result); // 30

و یا ابتدا پارامتر x را فراهم آورده، سپس پارامتر y را ارسال کنید :

add10 = add(10);
result = add10(20);
console.log(result); // 30

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

add10 یک تابع است که مقدار y را دریافت نموده و نتیجه x + y را برمیگرداند. بعد از فراهم آوردن پارامتر y به سرعت نتیجه محاسبه شده و به عنوان نتیجه نهایی بازگشتخواهد شد.

javascriptfucn

قابلیت استفاده مجدد بیشتر

احتمالاً بزرگترین مزیت HOFها(توابع سطح بالا) قابلیت استفاده مجدد بیشتر است. بدون استفاده از آنها ، متدهای آرایه ای همچون map ، filter و reduce وجود نخواهد داشت.

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

users = [{
  name: 'Yazeed',
  age: 25
}, {
  name: 'Sam',
  age: 30
}, {
  name: 'Bill',
  age: 20
}];

Map

بدون توابع سطح بالا ما مجبور هستیم هر بار قابلیت Map را به صورت زیر پیاده سازی کنیم :

getName = (user) => user.name;
usernames = [];
for (let i = 0; i < users.length; i++) {
  const name = getName(users[i]);
  usernames.push(name);
}
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

اما اکنون با استفاده از تابع سطح بالای Map به صورت زیر این کار انجام می شود :

usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

در دنیایی که توابع سطح بالا نقشی ندارند برای پیاده سازی تابع Filter نیاز به حلقه ها داریم :

startsWithB = (string) => string
  .toLowerCase()
  .startsWith('b');
namesStartingWithB = [];
for (let i = 0; i < users.length; i++) {
  if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

اما این کار با استفاده از تابع سطح بالای Filter به آسانی به صورت زیر انجام میشود :

namesStartingWithB = users
  .filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

تابع سطح بالای بعدی Reduce است که بدون قابلیت توابع سطح بالا به شکل زیر پیاده سازی می شود :

total = 0;
for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}
console.log(total);
// 75

و اکنون با استفاده از توابع سطح بالا :

totalAge = users
  .reduce((total, user) => user.age + total, 0);
console.log(totalAge);
// 75

نتیجه گیری

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

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

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

بحث و گفتگو

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

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

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

۰ نظر

شهربانو دوستی

۲۸تیر

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

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

fundemental

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

اصل یکم : بازگشت به اصول با تایپوگرافی

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

Typography

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

Typography

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

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

visual design

همیشه می توانید به سایت های Behance و Dribbble برای الهام گرفتن در زمینه فضا بین عناصر نگاهی بیندازید. اما این مهم است که درک و بینش خود را برای استفاده از فضا به منظور ایجاد تعادل و هماهنگی بصری توسعه دهید. در هنگام مطالعه تایپوگرافی شاید متوجه اهمیت فاصله ها شده باشید. تنظیم kerning و leading تمرینی عالی برای تقویت چشم شما در مورد استفاده از فاصله هاست.

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

shape

اصل سوم : استفاده از اندازه ها برای ایجاد سلسله مراتب بصری

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

grid

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

sizing

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

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

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

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

اصل چهارم : برای انتقال معانی از رنگ ها استفاده کنید

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

color

در زیر نکاتی را برای رنگ ها ذکر کرده ام که می تواند برای شما بسیار مفید باشد.

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

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

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

۰ نظر

شهربانو دوستی

۲۸تیر

۱۵ پلاگین و کتابخانه برای اعتبار سنجی فرم ها در جی کوئری

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

jqueryvalidate

Parsley.js

Parsley.js یک کتابخانه سبک وزن و غنی است که به جای اعتبارسنجی فرم ها با جاوا اسکریپت از data attribute های تعبیه شده در DOM برای رسیدن به همان هدف استفاده می‌کند. این پلاگین دارای پیکربندی ساده ای است و به شما اجازه می دهد هر رفتار پیش فرض را به گونه ای تغییر دهید که با الزامات فرم شما سازگار شود.

Parsley.js

quickValidation.js

quickValidation.js بسیار شبیه به پلاگین Parsley کار میکند. این پلاگین قواعدی را در جاوا اسکریپت تعریف نمی‌کند، درعوض به صورت مستقیم با استفاده از مشخصه ی data-validate به عناصر Input انتساب میدهد. این کتابخانه قوانین رشته ای را با هم ترکیب می‌کند برای مثال required,number,range=0-99 ، سپس کلاس quickValidate. را اضافه میکنید. بعد از آن برای نامگذاری فیلد مورد نظر برای خطاها، مشخصه data-name را اضافه میکنید.

quickValidation.js

jQuery Ketchup Plugin

jQuery Ketchup Plugin یک پلاگین سبک وزن (حدود ۳۰۴ کیلوبایت) است که با ۱۸ اعتبارسنجی پایه ارائه میشود، اما به سادگی به شما اجازه خواهد داد که اعتبارسنجی های مورد علاقه خود را نوشته و هر رفتار پیش فرضی را تغییر دهید.

به صورت پیش فرض این پلاگین مشخصه data-validate از یک فیلد در یک فرم را برای ای اعتبارسنجی بررسی می‌کند.متد پیش فرض برای اعتبار سنجی ()validate است. تمام موارد اعتبار سنجی در این قسمت قرار میگیرند و به وسیله کاما از هم جدا می شود. اعتبارسنجی ها خود می توانند آرگومان داشته باشند که با کاما از هم جدا شود.

jQuery Validation Plugin

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

jquery_form_validation

IV.js - اعتبار سنجی ورودی ها در جاوا اسکریپت

IV.js یک کتابخانه جی کوئری است که یک روش بصری برای کار با فیلتر های اعتبارسنجی و پردازش ورودی های کاربر فراهم می آورد. به منظور کار با IV.js شما نیاز دارید کلاس IValidate را به فرم خود اضافه کنید.

jQuery Validation Engine

وقتی صحبت از jQuery Validation Engine می‌شود، شما لازم نیست در مورد ساختار فرم های خود نگران باشید. این افزونه خطای مورد نظر را با ایجاد یک DIV در گوشه بالا و سمت راست ورودی ها نشان می دهد. این کار باعث می‌شود کد مربوط به فرم شما و اعتبارسنجی آن از همدیگر جدا باشند. این پلاگین احتمالاً ساده‌ترین حالت اعتبار سنجی برای فرم ها در این مقاله است.

jquery valid

BootstrapValidator

BootstrapValidator یک پلاگین جی کوئری برای اعتبار سنجی فرم های بوت استرپ است.

bootstrapform

Guardian

Guardian یک پلاگین جی کوئری انعطاف‌پذیر و همه منظوره برای همه انواع فرم هاست.

design_news

Validatr

Validatr از مشخصه های input در HTML5 برای انجام اعتبارسنجی استفاده می کند. این کتابخانه از مشخصه هایcolor, date, email, number و range پشتیبانی می کند. تمام انواع input های text, checkbox و radio در این کتابخانه پشتیبانی می‌شود که البته سطح اعتبارسنجی آنها با هم متفاوت است. این کتابخانه تا جای ممکن از اعتبارسنجی های بومی بهره می‌برد. اگر نوع خاصی از ورودی پشتیبانی نشود از قواعد خاصی برای تکمیل اعتبار سنجی بومی بهره خواهد برد.

jquery_form_validation

Formance.js

Formance.js یک کتابخانه برای فرمت بندی و اعتبارسنجی فیلدهای فرم است که بر اساس کتابخانه jQuery.payment ساخته شده است.

jquery_form_validation

Fields.js

کتابخانه Fields.js همراه با مجوز MIT ارائه می‌شود و روشی انتزاعی برای تعامل با فیلد ها ارائه می دهد.

jquery_form_validation

jQuery Validate

jQuery Validate یک پلاگین در جی کوئری است که به شما کمک می کند کار اعتبارسنجی فرم را سریع با استفاده از data attribute ها انجام دهید.

jquery_form_validation_10

jQuery Form Validate

jQuery Form Validate پلاگین دیگری در جی کوئری است که به شما اجازه می دهد فرم های HTML خود را با در نظر گرفتن قوانین اعتبار سنجی data attribute های html۵ اعتبار سنجی کنید.

jquery_form_validation_11

Validarium

Validarium یک پلاگین ساده و معتبر در جی کوئری است که بر مبنای jQuery Validate ایجاد شده است.

jquery_form_validation_13

nextVal

nextVal یک پلاگین برای اعتبار سنجی فرم ها در html است.

rm_validation

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

۰ نظر

شهربانو دوستی

قدیمی ترین مطالب مطالب قدیمی تر جدیدترین مطالب مطالب جدید تر

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

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

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

از اختصار در نوشتن کدها استفاده کنید

کد هایی از CSS که استفاده نمیشوند را پیدا نموده و حذف کنید

از مشکلات آگاهی داشته باشید

کدهای حیاتی در CSS را به صورت Inline درج کنید

تصاویر را با کدهای CSS جایگزین کنید

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

واحدهای غیر ضروری در CSS را حذف کنید

فضاهای خالی را حذف کنید

کامنت ها را حذف کنید

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

نتیجه

مهارت اول : یک زبان برنامه‌نویسی

مهارت دوم : دیتابیس و SQL

مهارت سوم : HTML

مهارت چهارم : API های JSON یا XML

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

چگونه می‌توان پایتون را با پی اچ پی مقایسه کرد؟

طراحی حساب شده تر

یادگیری آسان

فریمورک

دقت بالاتر

قاعده ی نوشتاری به ساده تر

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

مدیریت پکیج ها

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

پایتون چندمنظوره تر از زبان php است

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

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

بحث و گفتگو

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

زبان برنامه نویسی GO بسیار قدرتمند است

زبان برنامه نویسی GO دارای واژگان کلیدی مشخصی است

زبان برنامه نویسی GO دارای قوانین محدوده ای ساده است

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

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

بحث و گفتگو

برنامه های تلفن همراه بومی چه برنامه‌هایی هستند؟

ری اکت جی اس چیست؟

ری اکت نیتیو(React Native) چیست؟

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

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

آیا ری اکت نیتیو ارزش استفاده را دارد؟

آسان تر

تجربه کاربری

یک اکوسیستم

سریع

عیب یابی

پیکربندی

نتیجه گیری

چگونه و چطور الکترون جی اس ایجاد شد؟

ویژگی های کلیدی الکترون جی اس چیست؟

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

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

Libchromiumcontent

Node JS

موتور جاوا اسکریپت V8

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

اجرای اولین برنامه الکترون جی اس - نصب برنامه “Hello World”

نتیجه گیری

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

داشتن چارچوب

تمرین

نتیجه گیری

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

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

بازگشت توابع

قابلیت استفاده مجدد بیشتر

Map

Filter

Reduce

نتیجه گیری

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

بحث و گفتگو

اصل یکم : بازگشت به اصول با تایپوگرافی

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

اصل سوم : استفاده از اندازه ها برای ایجاد سلسله مراتب بصری

اصل چهارم : برای انتقال معانی از رنگ ها استفاده کنید