کد جاواسکریپت کپی متن در کلیپ بورد حافظه

برای اینکه متنی رو توی حافظه کپی کنین کافیه متنشتون رو به تابع زیر ارسال کنین:

function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

تابع بالا از فیلد input استفاده میکنه که ممکنه واسه همه جالب نباشه و بکارمون نیاد. من خودم بعد کمی تست و گشتن به این نتیجه رسیدم که از clipboardjs (این کتابخونه هم خوبه: https://clipboardjs.com)  استفاده کنم. متاسفانه کد من با این کتابخونه تداخل داشته و ناچارا رفتم سراغ جستجو و کد زیر رو پیدا کردم که بسیار هم عالی بود.

function copyLink(containerid) {
    var elm = document.getElementById(containerid);
    // for Internet Explorer
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(elm);
        range.select();
        document.execCommand("Copy");
        alert("Copied div content to clipboard");
    }
    else if (window.getSelection) {
        // other browsers
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(elm);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
        alert("Copied div content to clipboard");
    }
}

 

منبع:
How TO – Copy Text to Clipboard
How to copy the div content to Clipboard

چطور در جاوااسکریپت آرایه ها را با هم یکی کنیم و به هم بچسبانیم؟

در جاوا اسکریپت متدی وجود داره که با اون میتونیم دو یا چند آرایه رو به هم متصل کنیم. نتیجه این متد آرایه فعلی را تغییری نمیدهد بلکه آرایه جدیدی به return میکنه که شامل آرایه های جمع شدست.

 array1.concat(array2, array3, ..., arrayX)

قائده کلیش به این صورت بالاست. آرایه ای رو در ابتدا concat میکنیم و بعد آرایه های دیگه رو بعنوان پارامتر به اون میدیم. اگر فهرست آرایه هارو میخواین بصورت پارامتر وارد کنین، ابتدا یک آرایه خالی تعریف کنین که با فهرست آرایه هاتون concat میشه.

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale, kai);

 

منبع: JavaScript Array concat() Method

نصب Vue با مدیریت بسته yarn

Vue برای نصب نیاز به مدیریت بسته Node.js همون npm داره یا اینکه میتونین اون رو از طریق یارن هم نصب کنین. از اینجا یاد بگیرید چطور مدیریت بسته یارن yarn رو نصب کنین

نکته: اگر قبلا vue رو نصب کردین حتما اون رو پاک کنین خصوصا اگر نسخه ۱ اونو دارین با دستور  remove vue-cli پاکش کنین.
نکته۲: vue قبلا با نام بسته vue-cli شناخته میشد و الان نام اون تغییر کرده به @vue/cli

برای نصب vue یکی از دو دستور زیر npm یا yarn رو استفاده کنین که من یارن رو ترجیح میدم چون خیلی سریعتر و بهتره.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

برای نصب این بسته ها با دسترسی ادمین باشین تا بتونین نصبش کنین.

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

با دستور زیر میتونین ببینین که چه نسخه ای رو نصب کردین

vue --version

یا اگر قبلا یارن رو رنصب کردین با دستور زیر اون رو آپدیت کنین:

npm update -g @vue/cli

# OR
yarn global upgrade --latest @vue/cli

 

چطور بر روی اوبونتو ۱۸ مدیریت بسته yarn رو نصب کنیم؟

اول از همه بهتون بگم یارن چیه؟ yarn یک مدیر پکیج های جاوا اسکریپت هست که با مدیریت بسته های نود npm سازگاره و به ما کمک میکنه بصورت خودکار کارهای نصب آپدیت و تنظیمات و پاک کردن پکیج های npm رو انجام بدیم.

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

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

قبل شروع نصب یارن یادتون باشه که با با کاربر روت باشین یا با دسترسی های اون کارهای نصب رو انجام بدین. (sudo).

۱. اولین قدمی اینه که مخزن یارن رو فعال کنین. بوسیلیه کد زیر کلید مخزن GPG  رو درون ریزی کنین.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

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

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

۲. بعد اینکه مخزن یارن به لیست مخازن سیستم اضافه شد، لیست پکیج ها رو بروزرسانی کنین و سپس یارن رو نصب کنین.

sudo apt update
sudo apt install yarn

۳. برای اینکه چک کنین یارن نصب شده یا نه کد زیر رو بزنین و از ورژن نصب شده مطلع بشین:

yarn --version

 

منبع: How to Install Yarn on Ubuntu 18.04

بازی CSS Dinner برای یادگیری Selector ها درCSS یا JavaScript

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

CSS Dinner Game