محسن خان محسن خان
نظرات نظرسنجی‌ها
با توجه به امکانات جدید Razor Components، آیا در آینده از SPA frameworks استفاده میکنید؟
این فناوری مانند این هست که عنوان کنید از جاوا اسکریپت خسته شدم و الان می‌خوام با سیلورلایت کار کنم. نه پختگی فریم ورک‌های تک صفحه‌ای رو داره، نه معلوم هست که در آینده پشتیبانی میشه. دست آخر باز هم برای یکسری از کارهای پیشرفته مجبور میشید به ترکیبی از جی‌کوئری و کدهای فعلی برسید. دقیقا همون مشکلی که با ام وی سی وجود داره. برای ساخت یک فرم ساده فراتر از عالی هست. اما زمانیکه مجبور شدی کمی رابط کاربری پیچیده‌تری رو طراحی کنی، می‌رسی به یک ترکیب نافرم جاوا اسکریپت و کدهای Razor در یک صفحه که تمام شعار آزمون پذیری سیستم رو زیر سؤال می‌بره. فریم ورک‌های تک صفحه‌ای به لطف تایپ‌اسکریپت این مشکل رو حل کردن و می‌تونی یک لایه رابط کاربری بسیار پیچیده و همچنین قابل نگهداری و آزمایش رو توسعه بدی. 
‫۵ سال و ۷ ماه قبل، دوشنبه ۱۳ اسفند ۱۳۹۷، ساعت ۱۱:۳۷
وحید نصیری وحید نصیری
نظرات مطالب
جایگزین کردن jQuery با JavaScript خالص - قسمت دوم - کار با Attributes
یک نکته‌ی تکمیلی: انتساب اطلاعات به المان‌ها

استاندارد W3C HTML5، برای تعریف ویژگی‌های سفارشی، استفاده‌ی از ویژگی‌های -data را توصیه می‌کند.
  <table>
    <thead>
      <tr>
        <th>Address</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Address 1</td>
        <td>10,000,000</td>
      </tr>
      <tr>
        <td>Address 2</td>
        <td>100,000</td>
      </tr>
    </tbody>
  </table>
برای مثال جدول فوق را درنظر بگیرید. در برنامه‌های کاربردی گاهی از اوقات نیاز است تا بتوان ردیفی را از بانک اطلاعاتی حذف کرد. در این حالت می‌توان به هر tr یک ویژگی data-original-idx را نیز نسبت داد تا مشخص باشد id واقعی آن کدام است و سپس بر اساس آن عدد، کار حذف را انجام داد و یا روش استانداردی برای تعریف آدرس تصویری در حالت بزرگنمایی آن وجود ندارد. برای اینکار می‌توان این اطلاعات سفارشی را برای مثال توسط ویژگی فرضی data-zoom-url به آن انتساب داد:
<img src="default.png"
   data-zoom-url="default-zoomed.png"
   alt="default image">


خواندن و به روز رسانی ویژگی‌های -data توسط jQuery 

 <video src="my-video.mp4" data-scene-offsets="9,22,38">
در این مثال می‌خواهیم مقدار ویژگی سفارشی data-scene-offsets را توسط jQuery بخوانیم:
  var offsets = $('VIDEO').data('sceneOffsets');
در اینجا از متد data و نام پس از -data به صورت camel-case استفاده می‌شود.
روش به روز رسانی آن نیز به صورت زیر است:
 $('VIDEO').data('sceneOffsets', '1,2,3');
البته باید دقت داشت زمانیکه از این روش استفاده می‌شود، مقدار ویژگی data-scene-offsets در document تغییری نمی‌کند. بلکه جی‌کوئری آن‌را در یک JavaScript data store ذخیره خواهد کرد. در این حالت تعریف المان در صفحه با اطلاعات جدید آن هماهنگ نیست و همچنین این تغییرات را صرفا از طریق jQuery می‌توان خواند.


خواندن و به روز رسانی ویژگی‌های -data توسط جاوا اسکریپت خالص

در مطلب جاری، روش خواندن اطلاعات از ویژگی‌ها را بررسی کردیم. در اینجا نیز می‌توان همانند قبل عمل کرد:
 var offsets = document.getElementsByTagName('VIDEO')[0].getAttribute('data-scene-offsets');
و برای تغییر آن از متد استاندارد setAttribute کمک می‌گیریم:
 document.getElementsByTagName('VIDEO')[0].setAttribute('data-scene-offsets', '1,2,3');
مزیت این روش نسبت به متد data جی‌کوئری این است که در این حالت تعریف المان در صفحه همواره با داده‌های تغییر یافته‌ی آن هماهنگ خواهد بود و همچنین داده‌های تغییر یافته‌ی در اینجا توسط هر نوع کد جاوا اسکریپتی قابل دسترسی است.


کار با داده‌های انتساب داده شده‌ی به المان‌ها از طریق ویژگی‌های جدید ECMAScript 2015

در استاندارد ECMAScript 2015، به اینترفیس HTMLElement، خاصیت جدید dataset نیز اضافه شده‌است؛ از نوع DOMStringMap، که آن نیز جزئی از استاندارد HTML 5 است. هر خاصیتی که به dataset اضافه شود، به صورت یک ویژگی -data در آن المان ظاهر خواهد شد.
در این حالت برای خواندن ویژگی data-scene-offsets می‌توان به صورت زیر عمل کرد:
 var offsets = document.querySelector('VIDEO').dataset.sceneOffsets;
که در اینجا نیز همانند متد data جی‌کوئری باید نام ویژگی را camel-case ذکر کرد.
و اینبار روش به روز رسانی اطلاعات این ویژگی سفارشی به صورت زیر است:
 document.querySelector('VIDEO').dataset.sceneOffsets = '1,2,3';
همچنین چون dataset یک خاصیت جاوا اسکریپتی است، حذف اطلاعات از آن، مانند حذف هر خاصیت دیگر جاوا اسکریپتی است:
 delete document.querySelector('VIDEO').dataset.sceneOffsets;
‫۶ سال و ۲ ماه قبل، دوشنبه ۱۵ مرداد ۱۳۹۷، ساعت ۱۳:۲۵
مهمان مهمان
نظرات مطالب
استفاده از popBox برای کوچک کردن خودکار تصاویر بزرگ
سلام استاد نصیری
با تشکر از زحمات شما
به یه موردی که برخوردم اینه که اگر سرعت پایین باشه و عکسها زودتر از کدهای جاوا اسکریپت دانلود شده باشن این افکت عمل نمیکنه والبته من این مشکل رو قبلا با ایجکس هم داشتم.اگر شما به این سایت مراجعه کنین http://converter.telerik.com/ چنانچه کل صفحه بطور کامل لود نشده باشد با زدن دکمه به یک خطای هندل نشده برخورد میکنیم که بدلیل عدم دانلود کامل کدهای جاوا اسکریپتی است.چکار باید کرد که این مشکلت رخ ندهد؟امیدوارم منظورم رو درست بیان کرده باشم.
موفق و موید در پناهحق باشید
‫۱۵ سال و ۱۲ ماه قبل، سه‌شنبه ۱۹ آذر ۱۳۸۷، ساعت ۱۳:۵۹
مهمان مهمان
نظرات مطالب
حذف تگ‌های زاید دریافتی از متون MS-Word
سلام. با تشکر از شما، برنامه مربوط به کدینگ هارور رو قبلا تست کردم، مشکل داشت. کدی شکه شما زحمت کشیدید هم غیر از مسئله ذکر شده درکامنت اول، خوب کار میکرد فقط مشکل اینست که اختصاصی به فرمت های ورد ندارد و همه استایل ها را پاک میکند که برای ما بعنوان یک بلاگ سرویس قابل استفاده نیست، چون کاربران پس از کپی پیست، استایل های خودشان را هم اضافه میکنند و این کد همه را پاک میکند. اگر برنامه بود که فقط بتواند اضافات ورد را پاک کند خوب بود. و اینکه بصورت جاوا اسکریپت باشد تا بتوان درکلاینت هم از آن استفاده کرد(من متاسفانه رگولار اکسپرشن را عمیق کار نکرده ام، همین رگولاررا میتوان در جاوا هم بکار برد؟).
‫۱۵ سال و ۶ ماه قبل، شنبه ۲ خرداد ۱۳۸۸، ساعت ۱۶:۱۵
پدرام آقازاده پدرام آقازاده
نظرات مطالب
یکپارچه سازی Angular CLI و ASP.NET Core در VS 2017
درود؛  من سال‌ها انگیولار جی اس با ASP.NET MVC استفاده کردم. به این ترتیب که در هر ویو ای که میخواستم کل بخشی از صفحه یا کل صفحه به صورت SPA باشه، به راحتی فایل اصلی AngularJS و فایل جاوا اسکریپت کنترلر یا دایرکتیو و ... رو در همون Razor View لود میکردم. یا مثلا اگر در صفحات متعددی قصد استفاده از انگیولار داشتم، فایل اصلی انگولار در Layout لود میشد و فقط فایل‌های دایرکتیو‌ها و ... در ویو بارگذاری میشد.
اما از انگیولار ۲ به بعد واقعاً سردرگم شدم. چون دیگه با یه فایل اصلی انگیولار و یه اسکریپت ساده طرف نیستم. و اسکریپت نهایی با وب پک و توسط CLI از ماژول‌ها مختلف ساخته میشه و خودش به یه فایل index.html ضمیمه میشه، حس میکنم شرایط سخت‌تر شده به جای ساده تر. چون من خوب نمیخوام از index.html استفاده کنم.
‫۳ سال و ۱۰ ماه قبل، سه‌شنبه ۱۱ آذر ۱۳۹۹، ساعت ۰۰:۱۳
وحید نصیری وحید نصیری
اشتراک‌ها
بهبود کارآیی IDEهای Jetbrains

سال‌ها است که  IDEهای Jetbrains برای اینکه در سکوهای کاری متفاوت قابل اجرا باشند، با جاوا نوشته می‌شوند. برای مثال Rider که یک IDE مخصوص دات نت است نیز با جاوا نوشته شده‌است و مابقی آن‌ها نیز به همین صورت. اگر به مسیر C:\Program Files\JetBrains\JetBrains Rider 2018.3.4\bin\rider64.exe.vmoptions مراجعه کنید، فایل با پسوند vmoptions در حقیقت تنظیمات Java Virtual Machine یا JVM را به همراه دارد. این فایل طوری تنظیم شده‌است که کمترین منابع را مصرف کند؛ به همین جهت شاید در حین کار کردن با این IDEها احساس کنید که کند هستند. تنظیمات JVM مخصوص جاوای ویندوز و جاوای مک و لینوکس را در اینجا و اینجا می‌توانید مطالعه کنید.
اگر بر این اساس فایل rider64.exe.vmoptions را بخواهیم تکمیل کنیم، می‌توان به تنظیمات زیر رسید:

-Xms1024m
-Xmx3072m
-Xss64m
-XX:ReservedCodeCacheSize=512m
-XX:+UseCompressedOops
-XX:NewRatio=2
-Dfile.encoding=UTF-8
-XX:+UseConcMarkSweepGC
-XX:SoftRefLRUPolicyMSPerMB=250
-XX:NewSize=512m
-XX:MaxNewSize=512m
-XX:PermSize=512m
-XX:MaxPermSize=1024m
-XX:+UseParNewGC
-XX:ParallelGCThreads=4
-XX:MaxTenuringThreshold=1
-XX:SurvivorRatio=8
-XX:+UseCodeCacheFlushing
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled
-XX:+CMSIncrementalMode
-XX:+CMSIncrementalPacing
-XX:+CMSParallelRemarkEnabled
-XX:CMSInitiatingOccupancyFraction=65
-XX:+CMSScavengeBeforeRemark
-XX:+UseCMSInitiatingOccupancyOnly
-XX:-TraceClassUnloading
-XX:+AlwaysPreTouch
-XX:+TieredCompilation
-XX:+DoEscapeAnalysis
-XX:+UnlockExperimentalVMOptions
-XX:LargePageSizeInBytes=256m
-XX:+DisableExplicitGC
-XX:+ExplicitGCInvokesConcurrent
-XX:+PrintGCDetails
-XX:+PrintFlagsFinal
-XX:+CMSPermGenSweepingEnabled
-XX:+UseAdaptiveGCBoundary
-XX:+UseSplitVerifier
-XX:CompileThreshold=10000
-XX:+OptimizeStringConcat
-XX:+UseStringCache
-XX:+UseFastAccessorMethods
-XX:+UnlockDiagnosticVMOptions
-ea
-Dsun.io.useCanonCaches=false
-Djava.net.preferIPv4Stack=true
-Djdk.http.auth.tunneling.disabledSchemes=""
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-Xverify:none
برای ویرایش فایل rider64.exe.vmoptions، چون در مسیر C:\Program Files قرار دارد، نیاز است برای مثال نوت‌پد یا هر ویرایشگر متنی دیگر را با دسترسی ادمین اجرا کنید تا بتوانید تغییرات انجام شده را ذخیره نمائید. برای مثال اگر از notepad++ استفاده کنید، خودش این مساله را تشخیص داده و درخواست اجرای با دسترسی ادمین را نمایش می‌دهد.

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

علاوه بر موارد فوق، فایل C:\Program Files\JetBrains\JetBrains Rider 2018.3.4\bin\idea.properties را نیز می‌توانید جهت اعمال تغییرات زیر ویرایش کنید:

idea.max.intellisense.filesize=3500
idea.cycle.buffer.size=2048
بهبود کارآیی IDEهای Jetbrains
‫۵ سال و ۶ ماه قبل، پنجشنبه ۱ فروردین ۱۳۹۸، ساعت ۲۱:۵۷
م محمد شریفی م محمد شریفی
مطالب
Gulp #5

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

افزایش کارآیی Performance وب با گالپ

برای اینکه بفهمیم چه کارهایی می‌تواند سایت یا اپلیکیشن ما را کاراتر کند، از Developer tools با زدن Ctrl+Shifi+I درون گوگل کروم، کار خود را شروع می‌کنیم. به برگه‌ی Audits می‌رویم و دکمه‌ی Run را با تنظیمات پیش فرض می‌زنیم. نتایج آن بعد از اندکی صبر، برای من به صورت شکل زیر است:

ما قصد داریم بدانیم گالپ چه ابزاهایی را برای راه حل‌های داده شده توسط مرورگر دارد؟

۱− کنار هم قرار دادن و فشرده کردن فایل‌های جاوا اسکریپت

پلاگین‌های گالپ برای اینکار،  gulp-concat و gulp-uglify هستند. آنها را در مسیر ریشه‌ی پروژه نصب می‌کنیم. 
npm install --save-dev gulp-uglify gulp-concat
بعد از نصب، فایل gulpfile.js را به صورت زیر ویرایش و تسک js را به آن اضافه می‌کنیم.
// first load all required js files
// concat them in to  script.min.js
// and minify it.
gulp.task('js', function() {
    return gulp.src([
            config.bowerDir + '/jquery/dist/jquery.min.js', // این فایل وابستگی فایل‌های زیر است 
            config.bowerDir + '/materialize/dist/js/materialize.min.js',
            './resources/js/app.js'
        ])
        .pipe(concat('script.min.js'))
        .pipe(uglify())
        .pipe(size())
        .pipe(gulp.dest('./public/js'));
});

خروجی:

فشرده کردن جاوا اسکریپت، حجم فایل‌ها را ۳۰ تا ۹۰ درصد کاهش می‌دهد.

۲− حذف سکلتور‌های بدون استفاده css

همانگونه که در عکس اول آمده، ۹۳ درصد سلکتور‌ها در این صفحه بلا استفاده هستند! و این یعنی کاهش فوق العاده زیاد حجم فایل فشرده شده css. به طور معمول، توسعه دهندگان ۸۵ درصد حجم فایل css خود را می‌توانند با این کار کاهش دهند (البته بیشتر این اتفاق هنگام استفاده از فریک ورک‌هایی مانند bootstrap,... می‌افتد) برای این کار از پلاگین gulp-uncss استفاده می‌کنیم. نصب:
npm install gulp-uncss --save-dev
سپس تسک مربوطه را می‌نویسم:
gulp.task('css', function() {
    return sass(config.sassPath + '/style.scss', {
            style: 'compressed',
            loadPath: [
                './resources/sass',
                config.bowerDir + '/materialize/sass'
            ]
        })
        .on('error', util.log)
        .pipe(size())
        .pipe(uncss({
            html: ['./index.html', './posts.html']
        }))
        .pipe(gulp.dest('./public/css'))
        .pipe(size())
        .pipe(connect.reload());
});
نتیجه:

نتیجه فوق العاده است! ۸۷ درصد کاهش حجم css! اما ممکن است بعضی از استایل‌های شما توسط javascript به صفحه تزریق شوند. در این صورت نباید سکلتور‌های لازم را حذف کرد و آنها را داخل آرایه‌ی ignore قرار می‌دهیم. برای این منظور، تسک بالا را به صورت زیر به روز رسانی می‌کنیم.
gulp.task('css', function() {
    return sass(config.sassPath + '/style.scss', {
            style: 'compressed',
            loadPath: [
                './resources/sass',
                config.bowerDir + '/materialize/sass'
            ]
        })
        .on('error', util.log)
        .pipe(size())
        .pipe(uncss({
            html: ['./index.html', './posts.html'],
            timeout : 2000, // wait for load js files
              ignore: [ 
                ".waves-ripple ",
                ".drag-target",
                "#sidenav-overlay",
                ".waves-effect",
                ".waves-effect .waves-ripple",
                ".waves-effect.waves-pinck .waves-ripple",
                ".waves-block.waves-light"
           ]
        }))
        .pipe(minifyCss())
        .pipe(size())
        .pipe(gulp.dest('./public/css'))
        .pipe(connect.reload());
});
بعد از اینکار حجم فایل css من کمی افزایش پیدا کرد ولی بعد از فشرده کردن، نهایتا به حدود ۱۴KB رسید و این یعنی ۸۷ درصد کاهش حجم فایل css؛ تنها بعد از حذف سکلتور‌های اضافی و فشرده کردن آنها. می‌توانید پلاگین‌های بیشتری را در اینجا ببینید و استفاده کنید. 
Gist 
‫۹ سال و ۱ ماه قبل، دوشنبه ۲۳ شهریور ۱۳۹۴، ساعت ۲۲:۳۵
یاسر مرادی یاسر مرادی
نظرات مطالب
آشنایی با Saltarelle کامپایلر قدرتمند #C به جاوااسکریپت
با تکمیل شدن Roslyn و آسانتر شدن امور، روز به روز شاهد تعداد بیشتری از چنین مبدل هایی خواهیم بود، اما به صورت بنیادی هرگونه مبدل کد CSharp به JavaScript یا هر زبان دیگری محکوم به شکست است، و آنچه که به صورت بنیادی مشکل ندارد، تبدیل IL به سایر زبانها است، چرا که فرض کنید شما یک DLL تقریبا ساده مانند Humanizer را که برای کار با رشته‌ها و ... به کار می‌رود را در مثالتان استفاده کنید، در این صورت دیگر برنامه شما کار نخواهد کرد، حتی اگر در حد یک Pluralize کردن باشد، اما اگر تبدیل IL به JavaScript باشد، هر رفتاری را که با DLL شما داشته باشد، همان رفتار را با Humanizer خواهد داشت، برای همین است که امروزه تبدیلگرهای قدرتمند از IL استفاده می‌کنند، مانند JSIL، و SharpKit که اوایل از تبدیل CSharp به JavaScript استفاده می‌کرد و هم اکنون تازه به این نتیجه رسیده که آب در هاون می‌کوبیده و الآن با استفاده از Cecil، به تبدیل IL به JavaScript روی آورده است.
همچنین تبدیل گر مربوطه، باید یکسری کتابخانه جاوا اسکریپتی پایه که امکانات پایه و اولیه .NET را ارائه دهد داشته باشد، که باز دقیقا تبدیلگرهای حرفه ای همین رفتار را دارند، چون همه‌ی امکانات .NET در JavaScript موجود نیست که صرف تبدیل کد کافی باشد و لااقل بعضی امکانات پایه باید ارائه شوند، مثلا برای ایجاد کردن اعداد تصادفی معادل کلاس Random در .NET
‫۹ سال و ۱۲ ماه قبل، شنبه ۱۷ آبان ۱۳۹۳، ساعت ۰۳:۱۶