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

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

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

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

بنابراین اکنون نباید از این واقعیت تعجب کنیم که بسیاری از برنامه هایی که امروزه استفاده میکنیم بر مبنای جاواسکریپت هستند تا بر مبنای زبان هایی مثل جاوا و کاتلین. برخی از برنامه هایی که بر مبنای جاوا اسکریپ هستند عبارتند از 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 و جاوا اسکریپت می‌دهد.

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

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

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

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

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

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

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

اکنون زمان آن رسیده است که کدها را به فایل ها اضافه کرده و برنامه 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’ از دایرکتوری برنامه خود آن را اجرا کنید. وقتی فایل ها را اجرا می کنید به شکل زیر برنامه شما در مرورگر اجرا می شود :

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

نتیجه گیری

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

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

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

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

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

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

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

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

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

داشتن چارچوب

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

فهمیدن

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

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

طرح و برنامه

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

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

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

تقسیم بندی

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

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

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

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

اشکال زدایی

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

ارزیابی مجدد

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

پژوهش و جستجو

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

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

تمرین

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

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

نتیجه گیری

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

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

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

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

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

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

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

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

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

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

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

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 به سرعت نتیجه محاسبه شده و به عنوان نتیجه نهایی بازگشتخواهد شد.

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

احتمالاً بزرگترین مزیت 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 مثالی از توابع سطح بالا هستند که  کار ما را بسیار ساده تر می کنند.

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

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

بحث و گفتگو

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Parsley.js

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

quickValidation.js

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

jQuery Ketchup Plugin

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

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

jQuery Validation Plugin

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

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

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

jQuery Validation Engine

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

BootstrapValidator

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

Guardian

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

Validatr

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

Formance.js

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

Fields.js

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

jQuery Validate

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

jQuery Form Validate

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

Validarium

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

nextVal

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

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

۱۰ ابزار مفید در CSS و JavaScript برای بهبود فرم ها

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

formbase

formbase یک بسته است که از CSS/SASS به منظور بهبود استایل پیش فرض فرم ها استفاده می کند. این استایل ها cross-browser بوده و برای تجربه کاربری بهتر استفاده می شود.

Foxholder

Foxholder مجموعه ای از 15 انیمیشن placeholder برای تقویت فرم‌های شماست. وقتی کاربری با این input های شما ارتباط برقرار می کند، یک انیمیشن اجرا می شود. این یک روش عالی برای این است که کاربران شما بدانند دقیقا در کجای فرم ها قرار گرفتند.

dirrty

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

Inputmask

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

jQuery Validation Plugin

jQuery Validation Plugin ابزاریست که به سرعت می توان به کمک آن داده های فرم را اعتبارسنجی کرد. این ابزار حتی برای Url ها و ایمیل ها هم استفاده می شود. این ابزار دارای API هایی هست که به کاربران اجازه می دهد اعتبارسنجی مورد نظر خود را بنویسند.

dependsOn

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

Choices.js

با استفاده از Choices.js می توانید select box های جذاب و ویژگی های زیبا را به فیلد های متنی در فرم خود اضافه کنید. این کتابخانه سبک وزن بوده و با استفاده از آن میتوانید قالب شخصی خود را برای input مورد نظر اعمال کنید.

Cascading Drop-Down Menu

Cascading Drop-Down Menu یک راه حل عالی برای زمانی است که نیاز به فرمی دارید که در آن کاربر باید گام‌های متعددی را انتخاب کند. برای مثال در مورد انتخاب یک اتومبیل فکر کنید. شما می توانید مدل آن و سپس سال ساخت و غیره را یکی پس از دیگری انتخاب کنید.

Multipicker

Multipicker روشی بصری را برای کاربران به منظور انتخاب چند گزینه (شبیه به checkbox) و یا انتخاب یک گزینه (شبیه به radio button) در یک لیست فراهم می آورد که با استفاده از عناصر html همچون لیست های غیر ترتیبی می تواند استفاده شود.

jQuery Form Plugin

بروز رسانی فرم های استاندارد html برای استفاده از ایجکس می‌تواند با استفاده از پلاگین jQuery Form Plugin انجام بپذیرد. این پلاگین دارای ویژگی های زیادی است که کنترل کاملی در مورد نحوه ارسال اطلاعات به سمت سرور به شما ارائه خواهد داد.

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

همه آن چیزی که باید در مورد SVG ها در وب بدانید

آیا هنوز از PNG ها برای آیکون و لوگو در طراحی سایت استفاده می کنید. زمانش رسیده است که در مورد SVG ها بدانید. در حالی که بعضی از طراحان هنوز از روش های قدیمی تر استفاده می کنند، اما اکنون SVG ها در اکثر مرورگرها و دستگاه ها پشتیبانی می شوند. فایل های SVG فوق العاده کوچک، قابل جستجو، قابل تغییر(از طریق کد) و مقیاس پذیر هستند. آنها در تمام اندازه ها عالی هستند.

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

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

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

مقیاس پذیری عالی در پیکسل ها

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

قابلیت تغییر

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

اندازه کوچک فایل

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

دسترسی پذیری

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

کجاها از SVG استفاده می شود؟

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

لوگو ها و آیکون ها

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

نمودارها و اینفوگرافیک

SVG ها را می توان به صورت پویا بر اساس اقدامات کاربر و سایر حوادث به منظور ترسیم داده ها به روز رسانی کرد. این باعث می شود که SVG برای مواردی مانند نقشه های تعاملی و تصاویری که داده ها را توضیح میدهد مناسب باشند.

جلوه های بصری

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

تصاویر متحرک

SVG ها می توانند با انیمیشن های CSS کار کنند، بنابراین شما نیاز ندارید مهارت های تازه ای را در زمینه انیمیشن یاد بگیرید. SVG ها می توانند از قابلیت انیمیشن درونی خود(SMIL) استفاده کنند.  این برای زمانی که می خواهید نتایج خلاقانه‌ ای را ایجاد کنید بسیار مفید است.

تصاویر سنتی

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

رابط های کاربری و برنامه ها

SVG ها برای رابط های کاربری پیچیده ایده‌آل هستند. آنها می توانند با برنامه مبتنی بر وب و برنامه های کاربردی یکپارچه شود. آنها سبک هستند و به راحتی متحرک سازی می‌شود.

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

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

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

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

احساساتی که رنگها باعث برانگیخته شدن آنها میشود

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

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

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

رنگ های غالب(اصلی) خود را انتخاب کنید

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

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

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

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

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

قانون 60-30-10 را اعمال کنید

زمانی که پالت رنگی خود را تکمیل کردید هنوز کار به اتمام نرسیده است. هموز شما نمی دانید چطور این رنگ ها را با هم ترکیب کنید. در این مورد یک قانون مشهور وجود دارد. قانون 60-30-10. این قانون یعنی :

• ۶۰ درصد از رنگ غالب استفاده کنید
• ۳۰ درصد از رنگهای ثانویه استفاده کنید
• ۱۰ درصد از رنگهای برجسته استفاده کنید

یک راه خوب برای به خاطر سپردن این قانون این است که مردی با کت و شلوار تجاری را در نظر بگیرید. ۶۰ درصد از لباس او، کت و شلوار اوست، که دارای رنگی مشخص است. پیراهن او ۳۰ درصد از لباس او را تشکیل می دهد و در نهایت کراوات او که 10 درصد نهایی را پوشش میدهد.

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

چطور یادگیری کد نویسی را شروع کردم؟ تجربیات سه ماه پر ارزش!!

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

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

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

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

بخش اول : CSS , HTML و JavaScript

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

HTML

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

به همین دلیل تا حدود زیادی با این زبان آشنا هستم. با این حال اگر بخواهیم یک منبع کامل را برای یادگیری این زبان انتخاب کنیم، سایت w3schools انتخاب مناسبی خواهد بود. این وب سایت خیلی ساده به عناصر html پرداخته است(ترجمه بیشتر مقالات زبان HTML این سایت در اینجا در دسترس است). اگر به دنبال محیطی برای تمرین کردن با این زبان میگردید، من به شما CodePen را پیشنهاد می کنم که یک ویرایشگر کد فوق العاده برای زبان های CSS , HTML و JavaScript به شمار می رود.

CSS

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

سخت ترین قسمت از زبان CSS فهم و درک layout است. سوالات زیادی در مورد layout در سایت StackOverflow پرسیده شده است که پاسخ آنها در همان سایت در دسترس است. سایت StackOverflow یک سایت پرسش و پاسخ فوق العاده بوده که پاسخ بسیاری از سوالات خود را می توانید در آن جستجو کنید. نسخه پیشرفته CSS و CSS3 نامیده می‌شود که ابزارهای طرح بندی قدرتمندی دارد و می‌تواند طراحی بهتری را برای ما به ارمغان بیاورد.

JavaScript

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

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

 زمانی که در یادگیری جاوا اسکریپت کمی پیشرفت کردید می‌توانید مسائل خود را در https://codewars.com تکمیل کنید. CodeWars فوق العاده است اما مسائل آن دارای درجه بندی مختلفی هستند و برخی از آنها برای افراد مبتدی بسیار سخت و دشوار است.

بخش دوم : قسمت های ضروری دیگر که هر توسعه دهنده‌ی باید بداند

گیت و گیت هاب

گیت چیزی است که با نام “version-control system” شناخته میشود و گیت‌هاب مشهور ترین سرویس cloud-based گیت است. به زبان ساده تر گیت به شما اجازه می‌دهد از فایلتان بکاپ بگیرید، تغییرات را ردیابی کنید، پیشرفت های خود را با دیگر توسعه دهندگان به اشتراک بگذارید و در پروژه های تیمی همکاری کنید.

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

هرچه سریعتر کار خود را در گیت هاب شروع کنید، شانس بیشتری برای شناخته شدن به عنوان یک توسعه دهنده با تجربه دارید. می توانید از آموزش های Codecademy’s Git Tutorial برای شروع کار با گیت هاب استفاده کنید.

Command Line

بهترین روش برای استفاده از گیت بهره بردن از “terminal” و یا “command line” است که البته برای توسعه دهندگان مدرن وب امری ضروری است و به آنها اجازه می‌دهد به آسانی پکیجی را از طریق NPM در وبسایت خود نصب کنند.

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

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

Sass

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

بوت استرپ

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

همچون پیش پردازنده Sass زمان زیادی برای یادگیری مبانی اصلی کتابخانه بوت استرپ لازم نیست. من به شما پیشنهاد می کنم که بوت استرپ را یاد بگیرید زیرا به شما کمک می کند یک پروژه را به سرعت راه اندازی کنید.

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

جی کوئری

سال ۲۰۱۹ ممکن است به نقطه عطفی برای جی کوئری تبدیل شود زیرا تعداد زیادی از توسعه دهندگان به سمت فریم ورک هایی مانند  React.js و Vue.js تمایل پیدا کردند. این در حالی است که ویرایش DOM توسط جی کوئری که قبلا بسیار ارزشمند تلقی می‌شد اکنون به یک عمل بد تبدیل شده است.

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

React

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

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

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

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

بحث و گفتگو

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

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

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

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