تغییر استایل پیش فرض اسكرول بار مرورگرها.
اسكرول بار معمولی و پیش فرض مرورگرها رنگ، اندازه و حالت مشخصی دارد كه اگر می خواهید تغییری در استایل آن بدهید به راحتی با استفاده از ساختار بالا قابل انجام است.
#UI #Browswe_Scrollbar #CSS #Web_Design
http://t.me/WebDevelopentReferences
اسكرول بار معمولی و پیش فرض مرورگرها رنگ، اندازه و حالت مشخصی دارد كه اگر می خواهید تغییری در استایل آن بدهید به راحتی با استفاده از ساختار بالا قابل انجام است.
#UI #Browswe_Scrollbar #CSS #Web_Design
http://t.me/WebDevelopentReferences
چند دلیل برای یاد گیری Vue:
1. مستندات این فریم ورك بسیار عالی ارائه شده است.
2. برای شروع نیازی نیست نرم افزار خاصی نصب كنید.
3. برای استفاده نیازی نیست از پكیج منیجرها استفاده كنید و مانند جی كوئری تنها یك فایل به پروزه اضافه میكنید.
4. نیاز نیست حتما از سبك خاصی استفاده كنید حتی می توانید از جاوا اسكریپت خالص هم استفاده كنید.
5. هم مانند ری اكت و انگولار است و هم مانند ناك اوت شما را سریع به هدف می رساند.
6. یك فریم ورك پیش رونده است و بر اساس نیاز شما امكانات بیشتری را در اختیار شما می گذارد.
#Vue
http://t.me/WebDevelopmentReferences
1. مستندات این فریم ورك بسیار عالی ارائه شده است.
2. برای شروع نیازی نیست نرم افزار خاصی نصب كنید.
3. برای استفاده نیازی نیست از پكیج منیجرها استفاده كنید و مانند جی كوئری تنها یك فایل به پروزه اضافه میكنید.
4. نیاز نیست حتما از سبك خاصی استفاده كنید حتی می توانید از جاوا اسكریپت خالص هم استفاده كنید.
5. هم مانند ری اكت و انگولار است و هم مانند ناك اوت شما را سریع به هدف می رساند.
6. یك فریم ورك پیش رونده است و بر اساس نیاز شما امكانات بیشتری را در اختیار شما می گذارد.
#Vue
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
👆👆👆👆👆👆
بهترین فریم ورك سی اس اس كدام است؟
اگر طراح سایت باشید حتما با این سوال دست و پنجه نرم كرده اید كه بهترین فریم ورك سی اس اس برای شما كدام است!؟
در همین ابتدا باید عرض كنم تمام فریم ورك ها عالی هستند و نه شخص بنده و نه هیچ كس دیگری نمی تواند به شما بگوید كدام فریم ورك برای شما خوب است.
اصلا بهت بگویم، صورت مسئله اشتباه است! یعنی سوال اشتباهی می پرسید و بهتر است بگوییم "با توجه به پروژه و خواسته های من كدام فریم ورك در این پروژه بهتر است؟"
حالا باید شرایط پروژه را برای خود بنویسید و با توجه به آنها تصمیم بگیرید.
مثلا طرحی كه قرار است زده شود بیشتر از كامپوننت های آماده استفاده می كند و تم طرح قرار است متریال باشد (با توجه به خواسته مشتری یا طرح) خوب در این مورد دیگر استفاده از بوت استرپ اشتباه است (مگر فریم ورك متریال برای بوت استرپ).
یا طرحی كه تصور كرده ایم بیشتر امكاناتش شبیه به كامپوننت های فریم ورك های مجود نیست و حتی تغییر و ویرایش كامپوننت ها هم كار را بیشتر می كند، در این مورد بهتر است یك فریم ورك بایه كه تنها امكان گرید بندی و ریسپانسیو را می دهد استفاده كنیم و باقی امكانات را طراحی كنیم.
و یا طرحی كه قرار است زده شود یك صفحه بسیار ساده می باشد و امكانات خاصی ندارد. پس اگر از فریم ورك هایی مثل متریال یا بوت استرپ به صورت كامل استفاده كنیم تنها حجم صفحه را بالا برده ایم در صورتی كه از امكانات آن استفاده ای نشده است.
نتیجه گیری:
زمان تصمیم گیری برای انتخاب فریم ورك سی اس اس بهتر است شرایط پروژه و امكانات مورد نیاز را لیست كنیم و بر اساس آنها تصمیم بگیریم.
#Css_Frameworl #Design #Material #Bootstrap
http://t.me/WebDevelopmentReferences
بهترین فریم ورك سی اس اس كدام است؟
اگر طراح سایت باشید حتما با این سوال دست و پنجه نرم كرده اید كه بهترین فریم ورك سی اس اس برای شما كدام است!؟
در همین ابتدا باید عرض كنم تمام فریم ورك ها عالی هستند و نه شخص بنده و نه هیچ كس دیگری نمی تواند به شما بگوید كدام فریم ورك برای شما خوب است.
اصلا بهت بگویم، صورت مسئله اشتباه است! یعنی سوال اشتباهی می پرسید و بهتر است بگوییم "با توجه به پروژه و خواسته های من كدام فریم ورك در این پروژه بهتر است؟"
حالا باید شرایط پروژه را برای خود بنویسید و با توجه به آنها تصمیم بگیرید.
مثلا طرحی كه قرار است زده شود بیشتر از كامپوننت های آماده استفاده می كند و تم طرح قرار است متریال باشد (با توجه به خواسته مشتری یا طرح) خوب در این مورد دیگر استفاده از بوت استرپ اشتباه است (مگر فریم ورك متریال برای بوت استرپ).
یا طرحی كه تصور كرده ایم بیشتر امكاناتش شبیه به كامپوننت های فریم ورك های مجود نیست و حتی تغییر و ویرایش كامپوننت ها هم كار را بیشتر می كند، در این مورد بهتر است یك فریم ورك بایه كه تنها امكان گرید بندی و ریسپانسیو را می دهد استفاده كنیم و باقی امكانات را طراحی كنیم.
و یا طرحی كه قرار است زده شود یك صفحه بسیار ساده می باشد و امكانات خاصی ندارد. پس اگر از فریم ورك هایی مثل متریال یا بوت استرپ به صورت كامل استفاده كنیم تنها حجم صفحه را بالا برده ایم در صورتی كه از امكانات آن استفاده ای نشده است.
نتیجه گیری:
زمان تصمیم گیری برای انتخاب فریم ورك سی اس اس بهتر است شرایط پروژه و امكانات مورد نیاز را لیست كنیم و بر اساس آنها تصمیم بگیریم.
#Css_Frameworl #Design #Material #Bootstrap
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
معرفی شش افزونه ویژوال استادیو كد.
اگر شما از ویرایشگر ویژوال استادیو كد استفاده می كنید حتما می دانید كه این ویرایشگر ابزارهای كمكی در اختیار شما قرار می دهد كه می تواند روند كار را برای شما آسان و سریع تر كند.
در این مقاله به معرفی بعضی از ابزارهای مفید می پردازیم.
1. Docker Support (https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)
امروزه داكر یكی از داغ ترین ترندها بین برنامه نویسان می باشد و شما هم به عنوان برنامه نویس نمی خواهید این امكان پر استفاده را از دست بدهید.
این افزونه رسمی داكر برای ویژوال استادیو كد می باشد.
ویژگی های كلیدی:
-ساده سازی عمل ساخت و اجرای كانتینرها
-ساخت فایل های داكر و كامپوز به صورت خودكار
-دستورات فایل های داكر و داكر كامپوز به صورت توكار در كامند اضافه می شوند.
-دارا بودن قابلیت سینتكس هایلایتینگ
2. Visual Studio Keymap(https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings)
استفاده از كلیدهای میانبر در برنامه نویسی صرفه جویی بسیار زیادی در كدنویسی است.پر كاربرد ترین كلیدهای میانبر كپی و پیست هستند كه تمام كاربران كامپیوتر با آن ها آشنایی دارند.
با این افزونه به راحتی می توانید كلیدهای میانبر شخصی خود را معرفی كنید و به سلیقه خودتان از میان برها استفاده كنید.
ویژگی های كلیدی:
-تمام كلیدهای میانبر ویژوال استادیو را در اختیار شما میگذارد.
-به راحتی می توانید كلیدهای میانبر خود را تعریف كنید.
-میانبر های ویندوز، لینوكس و مك را برای شما آماده می كند.
-كلیدهای میانبر دیگر افزونه ها را نیز برای شما نمایش می دهد و می توانید آنها را تغییر دهید.
3. React Redux ES6 Snippets(https://marketplace.visualstudio.com/items?itemName=sledsworth.react-redux-es6-snippets)
این افزونه حاوی قطعا كدهای پر استفاده ری اكت و ریداكس با ES6 برای جاوا اسكریپت می باشد كه روند كدنویسی را سریع تر می كند.
با استفاده از این افزونه تنها با نوشتن كلمات كلیدی سه حرفی و فشردن كلید تب قطعه كد مربوطه را خواهید داشت و نیازی به تایپ كردن كل قطعه كد نیست.
همینطور با استفاده از كلیدهای كنترل+اسپیس(فاصله) به تمام كلمات كلیدی دسترسی خواهید داشت.
4. Debugger for Chrome(https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
امروزه مرورگر كروم یكی از پر طرفدار ترین مرورگرها هم برای برنامه نویسان و هم برای كاربران عادی می باشد و این معروفیت در بین برنامه نویسان را مدیون قابلیت ها و افزونه های بسیار مفید برای برنامه نویسان می باشد.
افزونه ای كه نام برده شد برای دیباگ یا خطایابی كدهای جاوا اسكریپت در مرورگر كروم می باشد.
5. C#(https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
اگر شما از زبان سی شارپ استفاده می كنید و پروژه شما دات نت كور می باشد باید از این افزونه استفاده كنید كه توسط OmniSharp ارائه شده است.
ویژگی های كلیدی:
-خطایابی كدهای سی شارپ شما
-قابلیت های syntax highlighting, IntelliSense, Go to Definition, Find All References و بسیاری قابلیت دیگر
6. JQuery Code Snippets(https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
اگر هنووز هم شما از كتابخانه جی كوئری در پروژه های خود استفاده می كنید، این افزونه می تواند كدنویسی را برای شما سریع تر كند.
با نصب این افزونه به قطعه كدهای جی كوئری دسترسی پیدا میكنید كه با نوشتن كلمات كلیدی و فشردن كلید تب تمام آن قطعه كد برای شما نوشته می شود، همینطور با نوشتن jq می توانید لیست تمام كلمات كلیدی را ببینید.
#Visual_Studio_Code_Extension #Extension #Docker_Support #Visual_Studio_Keymap #React_Redux_ES6 #Debugger_For_Chrome #C_Sharp
#JQuery_Code_Sippets
http://t.me/WebDevelopmentReferences
اگر شما از ویرایشگر ویژوال استادیو كد استفاده می كنید حتما می دانید كه این ویرایشگر ابزارهای كمكی در اختیار شما قرار می دهد كه می تواند روند كار را برای شما آسان و سریع تر كند.
در این مقاله به معرفی بعضی از ابزارهای مفید می پردازیم.
1. Docker Support (https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)
امروزه داكر یكی از داغ ترین ترندها بین برنامه نویسان می باشد و شما هم به عنوان برنامه نویس نمی خواهید این امكان پر استفاده را از دست بدهید.
این افزونه رسمی داكر برای ویژوال استادیو كد می باشد.
ویژگی های كلیدی:
-ساده سازی عمل ساخت و اجرای كانتینرها
-ساخت فایل های داكر و كامپوز به صورت خودكار
-دستورات فایل های داكر و داكر كامپوز به صورت توكار در كامند اضافه می شوند.
-دارا بودن قابلیت سینتكس هایلایتینگ
2. Visual Studio Keymap(https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings)
استفاده از كلیدهای میانبر در برنامه نویسی صرفه جویی بسیار زیادی در كدنویسی است.پر كاربرد ترین كلیدهای میانبر كپی و پیست هستند كه تمام كاربران كامپیوتر با آن ها آشنایی دارند.
با این افزونه به راحتی می توانید كلیدهای میانبر شخصی خود را معرفی كنید و به سلیقه خودتان از میان برها استفاده كنید.
ویژگی های كلیدی:
-تمام كلیدهای میانبر ویژوال استادیو را در اختیار شما میگذارد.
-به راحتی می توانید كلیدهای میانبر خود را تعریف كنید.
-میانبر های ویندوز، لینوكس و مك را برای شما آماده می كند.
-كلیدهای میانبر دیگر افزونه ها را نیز برای شما نمایش می دهد و می توانید آنها را تغییر دهید.
3. React Redux ES6 Snippets(https://marketplace.visualstudio.com/items?itemName=sledsworth.react-redux-es6-snippets)
این افزونه حاوی قطعا كدهای پر استفاده ری اكت و ریداكس با ES6 برای جاوا اسكریپت می باشد كه روند كدنویسی را سریع تر می كند.
با استفاده از این افزونه تنها با نوشتن كلمات كلیدی سه حرفی و فشردن كلید تب قطعه كد مربوطه را خواهید داشت و نیازی به تایپ كردن كل قطعه كد نیست.
همینطور با استفاده از كلیدهای كنترل+اسپیس(فاصله) به تمام كلمات كلیدی دسترسی خواهید داشت.
4. Debugger for Chrome(https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
امروزه مرورگر كروم یكی از پر طرفدار ترین مرورگرها هم برای برنامه نویسان و هم برای كاربران عادی می باشد و این معروفیت در بین برنامه نویسان را مدیون قابلیت ها و افزونه های بسیار مفید برای برنامه نویسان می باشد.
افزونه ای كه نام برده شد برای دیباگ یا خطایابی كدهای جاوا اسكریپت در مرورگر كروم می باشد.
5. C#(https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
اگر شما از زبان سی شارپ استفاده می كنید و پروژه شما دات نت كور می باشد باید از این افزونه استفاده كنید كه توسط OmniSharp ارائه شده است.
ویژگی های كلیدی:
-خطایابی كدهای سی شارپ شما
-قابلیت های syntax highlighting, IntelliSense, Go to Definition, Find All References و بسیاری قابلیت دیگر
6. JQuery Code Snippets(https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
اگر هنووز هم شما از كتابخانه جی كوئری در پروژه های خود استفاده می كنید، این افزونه می تواند كدنویسی را برای شما سریع تر كند.
با نصب این افزونه به قطعه كدهای جی كوئری دسترسی پیدا میكنید كه با نوشتن كلمات كلیدی و فشردن كلید تب تمام آن قطعه كد برای شما نوشته می شود، همینطور با نوشتن jq می توانید لیست تمام كلمات كلیدی را ببینید.
#Visual_Studio_Code_Extension #Extension #Docker_Support #Visual_Studio_Keymap #React_Redux_ES6 #Debugger_For_Chrome #C_Sharp
#JQuery_Code_Sippets
http://t.me/WebDevelopmentReferences
Visualstudio
Docker - Visual Studio Marketplace
Extension for Visual Studio Code - Makes it easy to create, manage, and debug containerized applications.
✏️ VueJS and Data Binding:
📄 As you know we can show data in page with {{}}, but what about binding data to an element attribute like href?
For example we have a websiteTag data like this:
websiteTag: 'http://sadin.ir'
and we want to bind this data to an anchor tag.
If you try to use like this, you will see in href attribute 'websiteTag', but we want to see value of websiteTag (http://sadin.ir).
We should use v-bind for binding data to attributes:
<a v-bind:href="websiteTag">My Site</a>
Also we can use shortcut :href :
<a :href="websiteTag">My Site</a>
If you run index.html you can see http://sadin.ir is binding to href attribute of link.
Same way you can bind data to any other attributes, for example I want to show value of name in textbox:
In app.js:
name: 'Kamran',
websiteTag: 'http://sadin.ir'
In index.html:
<input type="text" v-bind:value="name'/>
<a href="websiteTag">MySite<a/>
Codes are available here:
https://codepen.io/A-Programmer/pen/oqryVx
https://gist.github.com/A-Programmer/6ff00e510a46475b0e719686c49cd495
🗓 in the next tip i'm going to show you how to bind html element to page.
#Vue #Data_Binding #Vue_Data_Binding
http://t.me/WebDevelopmentReferences
📄 As you know we can show data in page with {{}}, but what about binding data to an element attribute like href?
For example we have a websiteTag data like this:
websiteTag: 'http://sadin.ir'
and we want to bind this data to an anchor tag.
If you try to use like this, you will see in href attribute 'websiteTag', but we want to see value of websiteTag (http://sadin.ir).
We should use v-bind for binding data to attributes:
<a v-bind:href="websiteTag">My Site</a>
Also we can use shortcut :href :
<a :href="websiteTag">My Site</a>
If you run index.html you can see http://sadin.ir is binding to href attribute of link.
Same way you can bind data to any other attributes, for example I want to show value of name in textbox:
In app.js:
name: 'Kamran',
websiteTag: 'http://sadin.ir'
In index.html:
<input type="text" v-bind:value="name'/>
<a href="websiteTag">MySite<a/>
Codes are available here:
https://codepen.io/A-Programmer/pen/oqryVx
https://gist.github.com/A-Programmer/6ff00e510a46475b0e719686c49cd495
🗓 in the next tip i'm going to show you how to bind html element to page.
#Vue #Data_Binding #Vue_Data_Binding
http://t.me/WebDevelopmentReferences
How HTML element can be bind to page by vue?
In last tip, I wrote about data binding to attributes, what about binding a html element to page? For example I want to get my site link from data called websiteHtmlTag.
I have a data called websiteHtmlTag and I want to render its value on my page:
websiteHtmlTag: '<a href="http://sadin.ir">My Site</a>
So lets try the latest way:
{{websiteHtmlTag}}
This will show output exactly same as its value, but what I want is showing rendered result! A hyper link with My Site text that links to http://sadin.ir .
First we create a p tag and then we should bind websiteHtmlTag to this element:
<p v-html="websiteHtmlTag"></p>
Now vue know in this p tag we want that html.
So if we run the page, we will see the right result.
Codes are available on Codepen and Github gist:
🌐 CodePen: https://codepen.io/A-Programmer/pen/EEBGvo
🌐 Github gist: https://gist.github.com/A-Programmer/3d717eec54199a780c1620746b6a1f6a
#Vue #Data_Binding #Vue_Data_Binding #Vue_Html_Binding
http://t.me/WebDevelopmentReferences
In last tip, I wrote about data binding to attributes, what about binding a html element to page? For example I want to get my site link from data called websiteHtmlTag.
I have a data called websiteHtmlTag and I want to render its value on my page:
websiteHtmlTag: '<a href="http://sadin.ir">My Site</a>
So lets try the latest way:
{{websiteHtmlTag}}
This will show output exactly same as its value, but what I want is showing rendered result! A hyper link with My Site text that links to http://sadin.ir .
First we create a p tag and then we should bind websiteHtmlTag to this element:
<p v-html="websiteHtmlTag"></p>
Now vue know in this p tag we want that html.
So if we run the page, we will see the right result.
Codes are available on Codepen and Github gist:
🌐 CodePen: https://codepen.io/A-Programmer/pen/EEBGvo
🌐 Github gist: https://gist.github.com/A-Programmer/3d717eec54199a780c1620746b6a1f6a
#Vue #Data_Binding #Vue_Data_Binding #Vue_Html_Binding
http://t.me/WebDevelopmentReferences
جلسه اول از دوره "ویو از ابتدا تا پیشرفته"
در این ویدئو با ویو آشنا می شویم، دلیل انتخاب ویو رو میفهمیم، ابزار مورد نیاز رو میشناسیم، ویو رو نصب می كنیم و آماده كار با ویو خواهیم شد.
كدهای پروژه رو می تونید از گیت هاب بنده دانلود كنید:
برای هر قسمت یك برنچ در نظر گرفته شده، با انتخاب اون برنچ شما به فایل های اون جلسه دسترسی خواهید داشت، مثلا اگر برنچ 05 رو انتخاب كنید فایل ها و تغییراتی كه تا جلسه 05 اعمال شده رو خواهید دید. همینطور با استفاده از دكمه clone or download می تونید پروژه رو دانلود كنید.
https://github.com/A-Programmer/VueForBegginers
#Vue #Vue_01 #Learning_Vue
http://t.me/WebDevelopmentReferences
در این ویدئو با ویو آشنا می شویم، دلیل انتخاب ویو رو میفهمیم، ابزار مورد نیاز رو میشناسیم، ویو رو نصب می كنیم و آماده كار با ویو خواهیم شد.
كدهای پروژه رو می تونید از گیت هاب بنده دانلود كنید:
برای هر قسمت یك برنچ در نظر گرفته شده، با انتخاب اون برنچ شما به فایل های اون جلسه دسترسی خواهید داشت، مثلا اگر برنچ 05 رو انتخاب كنید فایل ها و تغییراتی كه تا جلسه 05 اعمال شده رو خواهید دید. همینطور با استفاده از دكمه clone or download می تونید پروژه رو دانلود كنید.
https://github.com/A-Programmer/VueForBegginers
#Vue #Vue_01 #Learning_Vue
http://t.me/WebDevelopmentReferences
GitHub
A-Programmer/VueForBegginers
VueForBegginers - Init
تزریق وابستگی در دات نت كور:
در دات نت كور سیستم تزریق وابستگی به صورت توكار وجود دارد كه سریع و كم حجم می باشد و شما مجبور به استفاده از سایر IoC ها مثل Ninject, AutoFac و StructureMap نیستید.
به سه روش می توانید سرویس ها را تزریق كنید:
1. Transient:
در این حالت سرویس در هر فراخوانی اجرا می شود.
2. Scoped:
در این حالت سرویس در هر Request یك بار اجرا می شود.
3. Singleton:
در این حالت سرویس تنها در فراخوانی اول ایجاد می شود و دفعات بعد از همان سرویس استفاده می شود.
كنترلر ها در ASP Core به صورت Scoped تزریق می شوند تا اطلاعات یک HttpContext برای هر Request بازخوانی شود.
#ASP_Net_Core #ASPNet #Dependency_Injection
http://t.me/WebDevelopmentReferences
در دات نت كور سیستم تزریق وابستگی به صورت توكار وجود دارد كه سریع و كم حجم می باشد و شما مجبور به استفاده از سایر IoC ها مثل Ninject, AutoFac و StructureMap نیستید.
به سه روش می توانید سرویس ها را تزریق كنید:
1. Transient:
در این حالت سرویس در هر فراخوانی اجرا می شود.
2. Scoped:
در این حالت سرویس در هر Request یك بار اجرا می شود.
3. Singleton:
در این حالت سرویس تنها در فراخوانی اول ایجاد می شود و دفعات بعد از همان سرویس استفاده می شود.
كنترلر ها در ASP Core به صورت Scoped تزریق می شوند تا اطلاعات یک HttpContext برای هر Request بازخوانی شود.
#ASP_Net_Core #ASPNet #Dependency_Injection
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
📡📡 اطلاعیه شماره یك:
با عرض سلام خدمت كاربران عزیز، باید به اطلاع عزیزان برسانیم در صورت فیلتر شدن تلگرام می توانید برای دسترسی به مطالب و آموزش ها صفحه اینستاگرام، لینكدین و تویبتر ما را دنبال كنید.
Instagram: https://www.instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Facebook: http://facebook.com/MrSadin
با عرض سلام خدمت كاربران عزیز، باید به اطلاع عزیزان برسانیم در صورت فیلتر شدن تلگرام می توانید برای دسترسی به مطالب و آموزش ها صفحه اینستاگرام، لینكدین و تویبتر ما را دنبال كنید.
Instagram: https://www.instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Facebook: http://facebook.com/MrSadin
مقداردهی دراپ دان لیست در ASP.NET Core :
حتما در پروژه ای كه با دات نت كور انجام می دهید پیش خواهد آمد كه دراپ دان لیستی را با واكشی از دیتابیس مقداردهی كنید مثل لیست دسته بندی های اخبار، لیست كشورها و....
برای این كار ابتدا به هر روشی كه كار میكنید لیست را از دیتابیس واكشی كرده سپس توسط ویوبگ به ویو ارسال می كنیم و در نهایت در سمت ویو لیست را درون یك دراپ دان لیست قرار می دهیم:
اكشن متد مورد نظر:
[HttpGet]
public ActionResult TestAction()
{
ViewBag.Categories = db.Categories.ToList();
return View();
}
سپس در ویو مربوطه كد زیر را می نویسیم:
<select asp-for="Menu.Id" asp-items="@(new SelectList(@ViewBag.Categories,"Id","Title"))">
<option disabled selected>Choose Category</option>
</select>
نكته: بنده در این مثال به صورت مستقیم به دیتابیس وصل شدم و لیست دسته ها را واكشی كردم كه قطعا برای كوتاه نویسی به این صورت انجام داده ام و در پروژه های اصلی باید لایه سرویس این كار را برای ما انجام دهد.
#DropDowList #DotNetCore #ASPNet
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
حتما در پروژه ای كه با دات نت كور انجام می دهید پیش خواهد آمد كه دراپ دان لیستی را با واكشی از دیتابیس مقداردهی كنید مثل لیست دسته بندی های اخبار، لیست كشورها و....
برای این كار ابتدا به هر روشی كه كار میكنید لیست را از دیتابیس واكشی كرده سپس توسط ویوبگ به ویو ارسال می كنیم و در نهایت در سمت ویو لیست را درون یك دراپ دان لیست قرار می دهیم:
اكشن متد مورد نظر:
[HttpGet]
public ActionResult TestAction()
{
ViewBag.Categories = db.Categories.ToList();
return View();
}
سپس در ویو مربوطه كد زیر را می نویسیم:
<select asp-for="Menu.Id" asp-items="@(new SelectList(@ViewBag.Categories,"Id","Title"))">
<option disabled selected>Choose Category</option>
</select>
نكته: بنده در این مثال به صورت مستقیم به دیتابیس وصل شدم و لیست دسته ها را واكشی كردم كه قطعا برای كوتاه نویسی به این صورت انجام داده ام و در پروژه های اصلی باید لایه سرویس این كار را برای ما انجام دهد.
#DropDowList #DotNetCore #ASPNet
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
#تگ_هلپر چیست؟
در ASP.NET Core امكان جدیدی معرفی شد به نام TagHelper كه اگر بخواهیم به صورت ساده توضیح دهیم، این امكان را برای ما فراهم می كند كه از المنت ها HTML در ویو استفاده می كنیم ولی در زمان اجرا این المنت تبدیل به كدهای نهایی می شود.
در طول انجام پروژه شاید ندانسته از این امكان استفاده می كردید زیرا به صورت پیش فرض یك سری تگ هلپرهایی توسط دات نت كور در اختیار ما قرار داده شده است و می توانیم تگ هلپر های اختصاصی نیز داشته باشیم.
به عنوان مثال زمانی كه یك تگ a را به صورت زیر می نویسید در اصل از تگ هلپر استفاده كرده اید:
<a asp-action="Index" asp-controller="Home">Home</a>
این مثال یك نمونه ساده از تگ هلپر بود كه استفاده كرده اید.
می توانیم تگ هلپر های اختصاصی خودمان را بنویسیم و در طول پروژه از آنها استفاده كنیم، به عنوان مثال در ادامه لینك آموزش ساخت تگ هلپری برای نمایش خط پیشرفت یا همان پراگرس بار را برای شما قرار داده ام.
حتی می توانید تگ هلپری داشته باشید كه دیتاسورس را به عنوان ورودی دریافت كرده و داده ها را صورت جدول برای ما نمایش بدهد.
یكی از مزیت های استفاده از تگ هلپر بالا بردن سرعت كدنویسی و استفاده چندبار از آن می باشد.
مقاله آموزش ساخت تگ هلپر اختصاصی در ASP.NET Core :
https://gist.github.com/A-Programmer/a37833e2c466eeef3657fe1b12af6d35
#ASP_Net_Core
#ASPNet
#TagHelper
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
در ASP.NET Core امكان جدیدی معرفی شد به نام TagHelper كه اگر بخواهیم به صورت ساده توضیح دهیم، این امكان را برای ما فراهم می كند كه از المنت ها HTML در ویو استفاده می كنیم ولی در زمان اجرا این المنت تبدیل به كدهای نهایی می شود.
در طول انجام پروژه شاید ندانسته از این امكان استفاده می كردید زیرا به صورت پیش فرض یك سری تگ هلپرهایی توسط دات نت كور در اختیار ما قرار داده شده است و می توانیم تگ هلپر های اختصاصی نیز داشته باشیم.
به عنوان مثال زمانی كه یك تگ a را به صورت زیر می نویسید در اصل از تگ هلپر استفاده كرده اید:
<a asp-action="Index" asp-controller="Home">Home</a>
این مثال یك نمونه ساده از تگ هلپر بود كه استفاده كرده اید.
می توانیم تگ هلپر های اختصاصی خودمان را بنویسیم و در طول پروژه از آنها استفاده كنیم، به عنوان مثال در ادامه لینك آموزش ساخت تگ هلپری برای نمایش خط پیشرفت یا همان پراگرس بار را برای شما قرار داده ام.
حتی می توانید تگ هلپری داشته باشید كه دیتاسورس را به عنوان ورودی دریافت كرده و داده ها را صورت جدول برای ما نمایش بدهد.
یكی از مزیت های استفاده از تگ هلپر بالا بردن سرعت كدنویسی و استفاده چندبار از آن می باشد.
مقاله آموزش ساخت تگ هلپر اختصاصی در ASP.NET Core :
https://gist.github.com/A-Programmer/a37833e2c466eeef3657fe1b12af6d35
#ASP_Net_Core
#ASPNet
#TagHelper
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Gist
ساخت TagHelper اختصاصی در ASP.NET Core
اجرای آنلاین كدهای سی شارپ:
با امكان جدیدی كه مایكروسافت در اختیار كاربران قرار داده است می توانید كدهای سی شارپ را در قالب بروژه كنسول به صورت آنلاین در مرورگر اجرا كنید!
حتما با سایت هایی كه اجازه اجرای آنلاین كدهای جاوا اسكریپت، اچ تی ام ال و سی اس اس را می دهد آشنا هستید، حالا با این امكان می توانید كدها سی شارپ را هم به صورت آنلاین در مرورگر خود اجرا كنید كه برای اهداف تست یا آموزشی بسیار مفید است.
برای استفاده از این امكان به وب سایت زیر مراجعه نمایید:
https://try.dot.net
همینطور برای مطالعه مستندات می توانید به آدرس زیر مراجعه نمایید:
https://try.dot.et/docs
#C_Sharp
#Online_Editor
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
با امكان جدیدی كه مایكروسافت در اختیار كاربران قرار داده است می توانید كدهای سی شارپ را در قالب بروژه كنسول به صورت آنلاین در مرورگر اجرا كنید!
حتما با سایت هایی كه اجازه اجرای آنلاین كدهای جاوا اسكریپت، اچ تی ام ال و سی اس اس را می دهد آشنا هستید، حالا با این امكان می توانید كدها سی شارپ را هم به صورت آنلاین در مرورگر خود اجرا كنید كه برای اهداف تست یا آموزشی بسیار مفید است.
برای استفاده از این امكان به وب سایت زیر مراجعه نمایید:
https://try.dot.net
همینطور برای مطالعه مستندات می توانید به آدرس زیر مراجعه نمایید:
https://try.dot.et/docs
#C_Sharp
#Online_Editor
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
پنج نكته برای ساخت API در ASP.NET Core:
در این مقاله به پنج نكته اشاره شده است كه در ساخت API در دات نت كور بهتر است رعایت كنیم.
لینك مقاله:
https://stormpath.com/blog/5-api-tips-dotnet-core
#API #ASP_Net_Core #ASPNet #Tips
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
در این مقاله به پنج نكته اشاره شده است كه در ساخت API در دات نت كور بهتر است رعایت كنیم.
لینك مقاله:
https://stormpath.com/blog/5-api-tips-dotnet-core
#API #ASP_Net_Core #ASPNet #Tips
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Stormpath User Identity API
5 Tips for Building an API in ASP.NET Core - Stormpath User Identity API
Microsoft’s .NET Web API Core makes it easy to build great APIs, but these tips can make your APIs even stronger and more scalable.
Lazy Loading چیست؟
Lazy Loading یا بارگذاری احمقانه یك تكنیك برای به تاخیر انداختن بارگذاری تصاویر و ویدئو در صفحات وب به جای بارگذاری كل صفحه می باشد.
این تكنیك باعث كم شدن زمان انتظار كاربر برای بارگذاری می شود.
در ادامه به چند افزونه جی كوئری برای Lazy Loading اشاره خواهیم كرد.
1.[LazyYT.js](https://github.com/tylerpearson/lazyYT)
این افزونه برای بارگذاری ویدئو های یوتیوب بسیار مفید است.
در زمان بارگذاری اولیه سایت درون باكسی كه قرار است ویدئو یوتیوب نمایش داده شود یك تصویر پیش نمایش از ویدئو جایگزین می شود و با اشاره كردن موس روی باكس آی فریم مربوط به نمایش ویدئو یوتیوب جایگزین باكس می شود.
2.[JQuery Lazyload Any](https://github.com/emn178/jquery-lazyload-any)
این افزونه برای تمام المنت های صفحه كاربرد دارد نه تنها تصاویر بلكه ویدئو، متون و تمام المنت های موجود در صفحه را می توانید به كمك این افزونه با تكنیك Lazy Load نمایش دهید.
3. [Echo.js](http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/)
این افزونه یكی از ساده ترین افزونه ها در این زمینه می باشد كه حجم نهایی آن كمتر از یك كیلوبایت می باشد!
4. [BttrLazyLoading](http://bttrlazyloading.julienrenaux.fr/)
این فزونه به شما كمك می كند تا تصاویر را تنها در ویوپورت ها نمایش دهید، همچنین اجازه می دهد تا اندازه های مختلف برای یك تصویر را در 4 اندازه صفحه نمایش بارگذاری كنید.اگر از این افزونه استفاده كنید، تصاویر شما تا زمانی كه اسكرول كاربر به آنها نرسیده بارگذاری نمی شوند كه این باعث افزایش سرعت صفحه شما می شود.
5. [Lazy Load XT](https://github.com/ressio/lazy-load-xt/)
این افزونه بسیار سریع، قابل گسترش و همینطور موبایل گرا می باشد و به منظور بارگذاری تصاویر و ویدئو به صورت Lazy Loading استفاده می شود.
این افزونه به صورت توكار از فریم ورك JQueryMobile نیز پشتیبانی می كند.
در این مقاله به 5 افزونه اشاره شد كه برای تكنیك Lazy Loading می توانید از آنها استفاده كنید، در مقالات آینده افزونه های دیگری نیز معرفی خواهند شد.
#JQuery #JQuery_Lazy_Load #Lazy_Load #LazyYT #LazyLoadAny #Echo #BttrLazyLoading #LazyLoadXT
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Lazy Loading یا بارگذاری احمقانه یك تكنیك برای به تاخیر انداختن بارگذاری تصاویر و ویدئو در صفحات وب به جای بارگذاری كل صفحه می باشد.
این تكنیك باعث كم شدن زمان انتظار كاربر برای بارگذاری می شود.
در ادامه به چند افزونه جی كوئری برای Lazy Loading اشاره خواهیم كرد.
1.[LazyYT.js](https://github.com/tylerpearson/lazyYT)
این افزونه برای بارگذاری ویدئو های یوتیوب بسیار مفید است.
در زمان بارگذاری اولیه سایت درون باكسی كه قرار است ویدئو یوتیوب نمایش داده شود یك تصویر پیش نمایش از ویدئو جایگزین می شود و با اشاره كردن موس روی باكس آی فریم مربوط به نمایش ویدئو یوتیوب جایگزین باكس می شود.
2.[JQuery Lazyload Any](https://github.com/emn178/jquery-lazyload-any)
این افزونه برای تمام المنت های صفحه كاربرد دارد نه تنها تصاویر بلكه ویدئو، متون و تمام المنت های موجود در صفحه را می توانید به كمك این افزونه با تكنیك Lazy Load نمایش دهید.
3. [Echo.js](http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/)
این افزونه یكی از ساده ترین افزونه ها در این زمینه می باشد كه حجم نهایی آن كمتر از یك كیلوبایت می باشد!
4. [BttrLazyLoading](http://bttrlazyloading.julienrenaux.fr/)
این فزونه به شما كمك می كند تا تصاویر را تنها در ویوپورت ها نمایش دهید، همچنین اجازه می دهد تا اندازه های مختلف برای یك تصویر را در 4 اندازه صفحه نمایش بارگذاری كنید.اگر از این افزونه استفاده كنید، تصاویر شما تا زمانی كه اسكرول كاربر به آنها نرسیده بارگذاری نمی شوند كه این باعث افزایش سرعت صفحه شما می شود.
5. [Lazy Load XT](https://github.com/ressio/lazy-load-xt/)
این افزونه بسیار سریع، قابل گسترش و همینطور موبایل گرا می باشد و به منظور بارگذاری تصاویر و ویدئو به صورت Lazy Loading استفاده می شود.
این افزونه به صورت توكار از فریم ورك JQueryMobile نیز پشتیبانی می كند.
در این مقاله به 5 افزونه اشاره شد كه برای تكنیك Lazy Loading می توانید از آنها استفاده كنید، در مقالات آینده افزونه های دیگری نیز معرفی خواهند شد.
#JQuery #JQuery_Lazy_Load #Lazy_Load #LazyYT #LazyLoadAny #Echo #BttrLazyLoading #LazyLoadXT
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
GitHub
GitHub - tylerpearson/lazyYT: A jQuery plugin to lazy load those dang Youtube iframe videos.
A jQuery plugin to lazy load those dang Youtube iframe videos. - GitHub - tylerpearson/lazyYT: A jQuery plugin to lazy load those dang Youtube iframe videos.
75 کوئری SQL که زندگی برنامه نویس را راحت تر می کند!
در این مقاله به 10 مورد از دستورات SQL اشاره شده است که بسیار پر کاربرد می باشند.
در مقالات بعدی ادامه دستورات معرفی خواهند شد.
https://gist.github.com/A-Programmer/c925de16348626d81c833b2d43bb51d0
#SQL #SQL_Query #75_Important_SQL_Queries
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
در این مقاله به 10 مورد از دستورات SQL اشاره شده است که بسیار پر کاربرد می باشند.
در مقالات بعدی ادامه دستورات معرفی خواهند شد.
https://gist.github.com/A-Programmer/c925de16348626d81c833b2d43bb51d0
#SQL #SQL_Query #75_Important_SQL_Queries
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Gist
75 SQL queries that makes a programmer's life easier. Part 1
دلایل خاموش شدن ناگهانی لپ تاپ.
ممكن است برای شما هم پیش آمده باشد كه در حال كار كردن با لپ تاپ، خاموش شود، این اتفاق ممكن است دلایل مختلفی داشته باشد كه در ادامه به سه مورد شایع تر اشاره خواهیم كرد:
️ ۱- افزایش دمای پردازنده یا سایر چیپ ها
یکی از دلایل اصلی خاموش شدن ناگهانی، افزایش دمای پردازنده است که به دلیل ناکارآمد بودن سیستم خنک کننده رخ می دهد. خشک شدن خمیر سیلیکون، وجود اختلال در خنک کننده و گرد و خاک از عوامل اصلی این مشکل هستند که با سرویس به موقع برطرف خواهد شد.
️ ۲- وجود باتری فاسد در لپ تاپ:
باتری های از قطعات مصرفی لپ تاپ به حساب می آیند و عمر مشخصی دارند. بنابراین انتظار می رود و پس از ۴ الی ۵ سال کیفیت و ماندگاری خود را از دست بدهند .
️ ۳- اختلال در حافظه رم :
اختلال در حافظه رم می تواند خود را به اَشکال گوناگونی نشان بدهد. هنگ کردن، کُند شدن، پیغام خطای صفحه آبی، ری استارت های ناگهانی، خاموش شدن های ناگهانی و … از عوامل اختلال در رم هستند .
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
ممكن است برای شما هم پیش آمده باشد كه در حال كار كردن با لپ تاپ، خاموش شود، این اتفاق ممكن است دلایل مختلفی داشته باشد كه در ادامه به سه مورد شایع تر اشاره خواهیم كرد:
️ ۱- افزایش دمای پردازنده یا سایر چیپ ها
یکی از دلایل اصلی خاموش شدن ناگهانی، افزایش دمای پردازنده است که به دلیل ناکارآمد بودن سیستم خنک کننده رخ می دهد. خشک شدن خمیر سیلیکون، وجود اختلال در خنک کننده و گرد و خاک از عوامل اصلی این مشکل هستند که با سرویس به موقع برطرف خواهد شد.
️ ۲- وجود باتری فاسد در لپ تاپ:
باتری های از قطعات مصرفی لپ تاپ به حساب می آیند و عمر مشخصی دارند. بنابراین انتظار می رود و پس از ۴ الی ۵ سال کیفیت و ماندگاری خود را از دست بدهند .
️ ۳- اختلال در حافظه رم :
اختلال در حافظه رم می تواند خود را به اَشکال گوناگونی نشان بدهد. هنگ کردن، کُند شدن، پیغام خطای صفحه آبی، ری استارت های ناگهانی، خاموش شدن های ناگهانی و … از عوامل اختلال در رم هستند .
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
با سلام خدمت تمام كاربران عزیز.
همانطور كه مطلع هستید حدود یك ماه فعالیت كانال و اینستاگرام متوقف و هینطور روال تشكیل جلسات آموزشی دوره ها كند شد.
انشاالله بعد از تعطیلات تمام فعالیت ها به روال گذشته برگشته و مجدد در خدمت شما دوستان خواهیم بود.
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
همانطور كه مطلع هستید حدود یك ماه فعالیت كانال و اینستاگرام متوقف و هینطور روال تشكیل جلسات آموزشی دوره ها كند شد.
انشاالله بعد از تعطیلات تمام فعالیت ها به روال گذشته برگشته و مجدد در خدمت شما دوستان خواهیم بود.
Telegram: http://t.me/WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
Media is too big
VIEW IN TELEGRAM
لاگ کردن فعالیت ها در دات نت کور.
Telegram: @WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin
Telegram: @WebDevelopmentReferences
Instagram: http://instagram.com/sadin_k/
Twitter: http://twitter.com/MrSadin
Linkedin: http://linkedin.com/in/mrsadin