وحید نصیری وحید نصیری
مطالب
اندرباب اهمیت به اشتراک گذاری اطلاعات
‫۱۲ سال و ۱۰ ماه قبل، جمعه ۱۶ دی ۱۳۹۰، ساعت ۱۲:۵۴
سیروان عفیفی سیروان عفیفی
مطالب
Vue CLI
تیم Vue یک ابزار را جهت scaffold سریع یک پروژه Vue، به صورت رسمی ارائه کرده‌است. توسط این ابزار به صورت سریع می‌توانیم ساختار یک پروژه استاندارد Vue را ایجاد کنیم.

چرا نیاز به Vue CLI داریم؟
  • زیرا نیاز به build processهایی داریم که به ما امکان استفاده از ES6, SCSS و دیگر ویژگیهای عالی را خواهند داد.
  • جهت ساخت و یکی‌سازی فایل‌های تمپلیت
  • بارگذاری نکردن تمامی فایل‌ها به صورت یکجا در زمان Startup 
  • می‌توانیم تسک‌هایی از قبیل Server-side rendering, code-splitting را انجام دهیم.
 
نصب Vue CLI 
ابتدا مطمئن شوید که آخرین نگارش Node.js را نصب کرده‌اید. سپس جهت نصب Vue CLI، خط فرمان را گشوده و دستور زیر ذیل را صادر کنید: 
npm install -g vue-cli

با اجرای فرمان فوق، ابزار CLI به صورت global و عمومی نصب خواهد شد. در ادامه می‌توانیم با دستور vue list، لیستی از قالب‌های رسمی را که توسط CLI قابل ایجاد هستند، مشاهده نمائید: 

در اینجا ما از قالب webpack-simple استفاده خواهیم کرد. برای اینکار دستور زیر را جهت ایجاد یک پروژه بر اساس این قالب صادر کنید: 
vue init webpack-simple dntVue

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

در اینجا ساختار یک پروژه جدید Vue را مشاهده می‌کنید:
index.html: کار شروع و ارائه برنامه را انجام می‌دهد.
package.json: وابستگی‌های npm برنامه را به همراه دارد.
src/App.vue: کامپوننت اصلی برنامه است.
پوشه src/assets: حاوی فایل‌های استاتیک پروژه است.
src/main.js: نقطه‌ی آغاز برنامه است.
webpack.config.json: تنظیمات وب‌پک جهت اجرای پروژه و بارگذاری ماژول‌های موردنیاز.

اجرای برنامه
ابتدا نیاز است وابستگی‌های برنامه دریافت شوند. اینکار را توسط دستور npm install و یا دستور yarn (در صورتیکه yarn را از قبل بر روی سیستم خود نصب کرده‌اید) انجام خواهیم داد: 
npm install
به این ترتیب تمامی وابستگی‌های پروژه درون پوشه‌ی node_module تشکیل خواهند شد. اکنون می‌توانیم با صدور دستور npm run dev پروژه را اجرا کنیم:

بررسی فایل‌های Vue
درون یک برنامه‌ی Vue واقعی، فایل‌هایی با پسوند vue. وجود دارند. این فایل شامل تمپلیت، کدها و همچنین استایل‌های یک کامپوننت می‌باشند.  
<template>
    <div>
        <!-- Write your HTML with Vue in here -->
    </div>
</template>

<script>
    export default {
        // Write your Vue component logic here
    }
</script>

<style scoped>
    /* Write your styles for the component in here */
</style>

بنابراین درون فایلی با ساختار فوق، تمامی موارد مورد نیاز برای یک کامپوننت ویو را خواهیم داشت و به اصطلاح نیازی به context switching نخواهیم داشت؛ زیرا تمامی قسمت‌ها را به صورت یکجا در یک محل در اختیار داریم و به راحتی می‌توانیم تمرکز خود را بر روی کدها قرار دهیم. درون کامپوننت نیز می‌توانیم کامپوننت‌های موردنیاز را ایمپورت و از آن استفاده کنیم:  
import { New } from "./components/New.vue";
export default {
    components: {
        New
    }
}
Vue CLI 3
تا اینجا از نسخه‌ی پایدار Vue CLI استفاده کردیم. نسخه‌ی 3 آن هنوز در مرحله‌ی beta قرار دارد. در این نسخه امکانات و دستورات بیشتری اضافه شده‌است؛ از ایجاد یک پروژه ساده تا ایجاد یک پروژه مبتنی بر TypeScript. برای نصب و یا آپگرید می‌توانید از دستور زیر استفاده کنید:
npm install -g @vue/cli
اکنون می‌توانید با صادر کردن دستور vue --version، شماره نسخه‌ی آن را مشاهده نمائید:
3.0.0-beta.11
ایجاد یک پروژه جدید
برای ایجاد یک پروژه جدید می‌توانید دستور زیر را صادر کنید:
vue create my-project
همانطور که مشاهده می‌کنید در این نسخه بجای استفاده از دستور vue init، از vue create استفاده شده است. در اینحالت می‌توانید نوع ایجاد پروژه را تعیین کنید:
Vue CLI v3.0.0-beta.11
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features
حالت پیش‌فرض، چنین ساختاری را برایتان ایجاد خواهد کرد:

بعد از طی کردن مراحل، می‌توانید قالب پروژه‌ی ایجاد شده را به صورت یک preset داشته باشید تا در پروژه‌های آینده مجبور نباشید مراحل قبل را طی کنید. این preset درون یک فایل JSON به صورت زیر ذخیره خواهد شد و حاوی اطلاعات زیر است:
{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  }
}

در حالت manually نیز می‌توانید گزینه‌های بیشتری را برای تعیین نوع قالب پروژه، انتخاب نمائید. به عنوان مثال می‌توان از TypeScript یا اینکه از lintter یا formatter خاصی برای کدها استفاده کرد:

در ادامه دیگر آپشن‌ها را نیز می‌توانید تعیین کرده و در نهایت به صورت یک قالب از پیش تعریف شده نیز پروژه را داشته باشید:
Zero-config Prototyping 
یکی از قابلیت‌های جالب Vue، امکان تهیه سریع prototype یا طرح اولیه می‌باشد. شاید اکثر اوقات نیاز داشته باشید یک ویژگی یا قابلیت خاص را با Vue تست کنید. در این موارد ممکن است از سایتی مانند CodePen استفاده کنید. اما توسط افزونه‌ی cli-service-global می‌توانید به صورت لوکال و بدون نیاز به راه‌اندازی یک پروژه‌ی جدید، کدهای موردنیاز را آزمایش کنید. فرض کنید می‌خواهیم تمپلیت زیر را قبل از افزودن آن به پروژه، مورد تست قرار دهیم:
<!-- MyCard.vue -->
<template>
    <div class="card">
    <h1>Card Title</h1>
    <p>Card content goes here. Make sure it's not Lorem.</p>
    </div>
</template>
در این‌حالت می‌توانیم با نصب افزونه موردنظر، فایل فوق را به راحتی و بدون نیاز به راه‌اندازی یک پروژه جدید، تست کنیم:
npm install -g @vue/cli-service-global
اکنون می‌توانیم خروجی را با صدور فرمان زیر درون مرورگر مشاهده کنیم:
vue serve MyCard.vue
با صدرو فرمان فوق، فایل توسط افزونه‌ی عنوان شده، از طریق مرورگر قابل دسترسی می‌باشد:

خروجی:

‫۶ سال و ۴ ماه قبل، شنبه ۵ خرداد ۱۳۹۷، ساعت ۰۵:۴۵
وحید نصیری وحید نصیری
پاسخ به بازخورد‌های پروژه‌ها
ادامه آموزش MVVM در صورت امکان با MVVM Light
ضمنا: «ارائه وصله» به معنای ارائه وصله توسط شما است. این یک روال متداول در پروژه‌های عمومی دنیا است. شخصی کار رو بررسی کرده و یک وصله یا patch جدید جهت بهبود کار به تیم اصلی ارائه داده.
‫۱۲ سال و ۱ ماه قبل، چهارشنبه ۱۲ مهر ۱۳۹۱، ساعت ۱۴:۱۹
وحید نصیری وحید نصیری
نظرات مطالب
متد جدید Chunk در دات نت 6
یک مثال تکمیلی: پیاده سازی صفحه بندی با Chunk

فرض کنید ساختار یک مقاله به این صورت تعریف شده‌است:
public class Article
{
    public int Id { set; get; }

    public string Title { set; get; }

    public string Content { set; get; }

    public int AuthorId { set; get; }
}
و لیست مقالات ما به صورت زیر است:
List<Article> articles = new()
{
    new Article { Id = 1, Title = "Best title one", Content = "Amazing content", AuthorId = 1 },
    new Article { Id = 2, Title = "Another title", Content = "More amazing content", AuthorId = 1 },
    new Article { Id = 3, Title = "Unicorns", Content = "Even more amazing content", AuthorId = 1 },
    new Article { Id = 4, Title = "Best title one", Content = "Amazing content", AuthorId = 1 },
    new Article { Id = 5, Title = "Another title", Content = "More amazing content", AuthorId = 1 },
    new Article { Id = 6, Title = "Unicorns", Content = "Even more amazing content", AuthorId = 1 },
    new Article { Id = 7, Title = "Best title one", Content = "Amazing content", AuthorId = 1 },
    new Article { Id = 8, Title = "Another title", Content = "More amazing content", AuthorId = 1 },
    new Article { Id = 9, Title = "Unicorns", Content = "Even more amazing content", AuthorId = 1 },
    new Article { Id = 10, Title = "Best title one", Content = "Amazing content", AuthorId = 1 },
    new Article { Id = 11, Title = "Another title", Content = "More amazing content", AuthorId = 1 },
    new Article { Id = 12, Title = "Unicorns", Content = "Even more amazing content", AuthorId = 1 },
};
اگر بخواهیم مقالات را به صورت صفحه بندی شده نمایش دهیم و هر صفحه هم فقط 5 مقاله داشته باشد، با استفاده از روش متداول استفاده‌ی از Skip و Take به قطعه کد زیر می‌رسیم:
var pageNumber = 1;
var itemsPerPage = 5;
IEnumerable<Article> pageArticles = articles.Skip((pageNumber - 1) * itemsPerPage).Take(itemsPerPage);
Console.WriteLine($"Articles of page: {pageNumber}");
foreach (var article in pageArticles)
{
    Console.WriteLine($" Id: {article.Id}, Title:{article.Title}, Content:{article.Content}, AuthorId:{article.AuthorId}");
}
که روش عملکرد آن در تصویر زیر مشخص شده‌است:

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

pageNumber = 1;
itemsPerPage = 5;
IEnumerable<Article[]> allPagesArticles = articles.Chunk(itemsPerPage);
Console.WriteLine($"Articles of page: {pageNumber}");
foreach (var article in allPagesArticles.ElementAt(pageNumber - 1))
{
    Console.WriteLine($" Id: {article.Id}, Title:{article.Title}, Content:{article.Content}, AuthorId:{article.AuthorId}");
}


‫۲ سال و ۶ ماه قبل، شنبه ۱۴ اسفند ۱۴۰۰، ساعت ۱۶:۳۷
احمد احمدی احمد احمدی
نظرات مطالب
ایجاد alert,confirm,prompt هایی متفاوت با jQuery Impromptu
سلام؛

طبق مطلب ارائه شده در مقاله:

تابع submit :
 function(event, value, message, formVals){}
value مقدار دکمه ای است که بروی آن کلیک شده ، message مقدار html تعریف شده برای state است ، formVals هم در صورتی که در html تعریف شده برای state ، المنت‌های فرم وجود داشته باشد ، شامل نام/مقادیر آنها می‌باشد . ( برای دریافت مقادیر فرم ، باید از نام المنت استفاده نمایید . )


خب حالا مشابه مثال زیر عمل کنید:
<div class="prompt-content" style="display: none;">
    <span>ایمیل خود را وارد نمایید : </span>
    <span>
        <input type="text" name="user_email" />
    </span>
</div>

$.prompt(
    $(".prompt-content").html(),
    {
        submit: function (e, v, m, f) {
            var userEmail = f["user_email"];
            console.log(userEmail);
        }
    });


‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۸ خرداد ۱۳۹۲، ساعت ۲۳:۱۴
مهمان مهمان
نظرات مطالب
تعرفه مصوب سال 1390
این تعرفه صرفا برای تعیین نرخ نسبی حوزه ی IT در کشور است که برای مقابله با عده ای سودجو که بازار این بخش را به ... کشیده اند و حرمتی که از آن باقی مانده قابل بیان نیست و افرادی که در این حوزه فعال است گاه سود های بسیار کلانی از راه های بسیار ساده کسب می کنند؛ارائه شده است.مشکلات یک فعال در حوزه ی نرم افزار پایه ای تر از این صحبت هاست... .کمی آن سو تر - حقوق سالانه  ی یک مهندس نرم افزار براساس گزارش سایت یاهو چیزی در حدود صد هزار دلار در سال برآورد شده است(10 شغل برتر دنیا - آمار سال 2010).خوب در هیچ صنفی اختلاف تا این حد فاحش نیست و این خود معضل این بخش در کشور را بیانگر است!کاری که (طبق گفته ی  مقاله)"حقیقتا جز کارهای بسیار سخت" است و این سطح درآمد برایش معرفی می شود(واقعا دید مردم از نرم افزار و IT و ... در کشور چیست؟-مشکلات پایه ای ترند!)
‫۱۳ سال و ۳ ماه قبل، جمعه ۱۴ مرداد ۱۳۹۰، ساعت ۰۰:۵۵
وحید نصیری وحید نصیری
نظرات مطالب
5 دلیل برای استفاده از یک ابزار ORM
سؤال شما به موضوع بحث مرتبط نیست. آیا جایی در مقاله به typed dataset‌ اشاره شده یا کار نقد orm های مختلف صورت گرفته؟ ... بگذریم.

در مورد typed dataset ها ، بله نسبتا تا حدودی و تا حد نازلی بله! شبه ORM هستند که این مشکلات را دارند:
- مشکل Synchronization بین آن‌ها و دیتابیس مساله ساز است که در یک ORM‌ خوب باید این مساله حل شده باشد.
- join table queries در طراح آن کار نمی‌کند!
- query syntax استانداردی نداشته و هنگام کار با دیتابیس‌های مختلف (نوع‌های مختلف) این مورد مساله ساز می‌شود.
- typed dataset کمتر حال و هوای یک ORM واقعی و دنیای شیء گرایی با اشیایی که وابستگی کمی به دیتابیس دارند را ارائه می‌دهد.
- کلا dataset اشیایی با سربار بالا در دات نت فریم ورک مطرح هستند و زمانیکه کارآیی مطرح هست سعی می‌شود به روش‌هایی دیگری کوچ شود.
همچنین از لحاظ مباحث serialization هم بسیار ضعیف و کند عمل می‌کنند.
- زمانیکه از typed dataset استفاده می‌کنید عملا مدل رابطه‌ای دیتابیس خود را با business layer مخلوط کرده‌اید.
‫۱۵ سال و ۶ ماه قبل، سه‌شنبه ۵ خرداد ۱۳۸۸، ساعت ۱۴:۵۴
وحید نصیری وحید نصیری
مطالب
SharePoint2010 و قابلیت FileStream

اگر خاطرتان باشد یک مقاله سه قسمتی در مورد قابلیت جدید FileStream مربوط به SQL Server 2008 چندی قبل در این سایت منتشر شد (+ و + و +).
خبر خوش این است که این قابلیت تحت عنوان Remote Blob Storage یا RBS در شیرپوینت 2010 (که نسخه‌ی بتای آن یکی دو روزی است که به مشترکین MSDN ارائه شده) قابل استفاده می‌باشد و به این صورت می‌توان به سادگی از مزایای این فناوری جدید بهره‌مند شد.
مستندات رسمی فعال سازی این قابلیت در شیرپوینت 2010:


این قابلیت Remote Blob Storage در شیرپوینت 2007 هم قابل پیاده سازی است اما پشتیبانی رسمی نمی‌شود:


پ.ن.
ارزش این چند سطری که مطالعه فرمودید حدود یک میلیون و 200 هزار تومان مطابق قیمتی است که از یکی از شرکت‌های داخلی مدعی اختراع این فناوری برای شیرپوینت 2007، دریافت شده است!

‫۱۴ سال و ۱۲ ماه قبل، چهارشنبه ۲۷ آبان ۱۳۸۸، ساعت ۱۳:۴۹
وحید نصیری وحید نصیری
اشتراک‌ها
آموزش تایپ اسکریپت در کمتر از دو ساعت

00:00:00 Intro
00:04:40 Installation
00:13:11 Configs
00:21:46 Basics
00:26:57 Interface & Type
00:28:49 Optionals
00:36:40 Array & Tuple
00:41:05 Litteral Type & Enum
00:46:00 Null & Void
00:56:01 Any & Unknown
01:11:01 Extends
01:12:40 Interface vs Type
01:16:58 Never
01:28:50 Intersection
01:34:03 Generics
01:49:03 Conclusion 

آموزش تایپ اسکریپت در کمتر از دو ساعت
‫۱ سال و ۶ ماه قبل، دوشنبه ۲۹ اسفند ۱۴۰۱، ساعت ۰۳:۱۰