Простые советы.: 2019

пятница, 1 ноября 2019 г.

Git - работа с репо без пароля.

Если вы уже достаточно освоили работу с системой контроля версий Git и вас уже стало напрягать постоянное введение имени пользователя и пароля, то пришло время решить и эту проблему. Сегодня мы научимся работать с репо по ssh-соединению.

Создание нового ssh-ключа и добавление ssh-agent достаточно хорошо и понятно расписано на самом GitHub и трудностей здесь возникнуть не должно. Поэтому я не буду на этом останавливаться. Рассмотрим некоторые более сложные вопросы, которые могут возникнуть.

Тема актуальна для пользователей Windows и Git-Bash оболочки.

Для начала стоит проверить существуют ли уже у вас ключи в вашем Git. Для этого вам нужно открыть Git Bash и ввести команду:

$ ls -al ~/.ssh
# Команда покажет файлы в вашем каталоге .ssh, если они существуют

Если вы увидите что-то похожее на файлы с такими расширениями, значит ключи уже есть.
id_dsa.pub
id_ecdsa.pub
id_ed25519.pub
id_rsa.pub
В этом случае, нам остается их скопировать и вставить в настройки аккаунта на GitHub.

Для копирования в буфер обмена вводим команду:

$ clip < ~/.ssh/id_rsa.pub
# Копирует содержимое файла id_rsa.pub в буфер обмена

Идем в настройки вашего аккаунта:

На боковой панели настроек пользователя нажмите клавиши SSH и GPG.

Выбираем New SSH key or Add SSH key.

В поле «Title» добавьте описательную метку для нового ключа. Например, если вы используете персональный ключ, вы можете назвать этот ключ «Personal Windows Air».

Вставьте свой ключ в поле «Key».

Нажмите кнопку добавить - Add SSH key.

Далее будет предложено, подтвердите свой пароль GitHub.

Идем в корневую директорию вашего Git

$ cd ~

В ней нам нужно создать файл .profile с настройками:

$ echo '' >> .profile #создаем пустой файл .profile

Открываем его в любом редакторе и вставляем в него:


env=~/.ssh/agent.env

agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }

agent_start () {
    (umask 077; ssh-agent >| "$env")
    . "$env" >| /dev/null ; }

agent_load_env

# agent_run_state: 0=agent running w/ key; 1=agent w/o key; 2= agent not running
agent_run_state=$(ssh-add -l >| /dev/null 2>&1; echo $?)

if [ ! "$SSH_AUTH_SOCK" ] || [ $agent_run_state = 2 ]; then
    agent_start
    ssh-add
elif [ "$SSH_AUTH_SOCK" ] && [ $agent_run_state = 1 ]; then
    ssh-add
fi

unset env

Если все прошло успешно, то вы все сделали правильно и теперь у вас есть возможность использовать ssh-доступ к вашим репо. Если же, у вас уже не только существует, но и используется (возможно для отдельно взятого репо) ключ, то вы получите предупреждение розовым цветом вверху страницы.

Error: Key already in use

Для решения этой проблемы, нам нужно найти, где используется (в каком из репо) ключ и удалить его.

Здесь все проще простого. Вводим в Bash

$ ssh -T -ai ~/.ssh/id_rsa git@github.com
# Подключитесь к GitHub используя определенный ключ ssh
> Hi username! You've successfully authenticated, but GitHub does not
> provide shell access.

Имя пользователя в ответе - это учетная запись GitHub, к которой в данный момент подключен ключ. Если ответ выглядит как «username / repo», ключ был прикреплен к хранилищу в качестве ключа развертывания.

Идете в это репо и в настройках удаляете ключ.

Если вы все сделали правильно, значит теперь вы сможете получать доступ к репо по ssh-соединению. Для работы со старыми репо, которые установлены у вас на машине, вам стоит переподключить их. Это делается достаточно просто.

Допустим, что я решил поработать с каким-то проектом. Для того, чтобы узнать его репо на gitHub мне достаточно, находясь в папке проекта, ввести в гит следующую команду.

git remote -v

Открыть git-Bash в нужной папке - правая кнопка мыши в нужной папке и выбрать Открыть Git Bash Here

Если ваш репо связан по http- протоколу, то для того, чтобы его переключить на ssh нам нужно, находясь в нужной папке на локальном машине ввести в git-bash следующее.

git remote set-url origin git@github.com:username/reponame.git

Вместо выделенного желтым - git@github.com:username/reponame.git в примере сверху, вам нужно вставить ссылку на ssh-соединение вашего репо. Её вы можете взять на gitHub вашего репо, нажав на кнопку Clone or download. Выбрать - Use SSH и скопировать ссылку (подчеркнуто на фото).

Таким простым способом, мы с вами получили доступ по SSH протоколу к нашему GitHub - репо.

Если эта тема для вас интересна, то я могу вам рассказать, как работать с несколькими аккаунтами с одной машины.

Пишите в комментариях, кодируйте и добивайтесь успехов!

Материалы по Git, которые могут быть вам интересны:

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!

Телеграм канал - Full Stack JavaScript Developer

Помочь проекту (любая валюта). DONATE

вторник, 1 октября 2019 г.

Node.js - Переименование файлов.

Сегодня мы познакомимся с файловой системой Node.js, а именно с массовым переименованием файлов в определенной папке (директории)

Ранее, я много писал о работе с Node.js. Если вы что-то пропустили, то посмотрите в разделе "Карта сайта". Можете воспользоваться поиском по сайту, или выбрать посты о Node.js по ярлыку. Можете просто пройти по ссылке в начале абзаца на оглавление сайта, а именно к разделу о Node.js.

Самый надежный способ получать знание это написать что-то полезное! Сегодня, я предлагаю написать простой скрипт, который будет брать некоторые фото (image.jpg) и менять их название на что-то более-менее вразумительное нежели бессвязный набор символов.

Например: У меня на компьютере есть некая папка "srcImage", в которой лежат файлы с разнообразными именами, которые мы хотим изменить. Переименованные файлы мы будем сохранять или в этой же папке, или в любой другой папке (директории).

В Node.js есть встроенный модуль - fs - File System, который предоставляет нам такую ( и множество других) полезную возможность. Мы им и воспользуемся.

Если посмотреть документацию, то там все очень очень просто:

fs.rename('/tmp/hello', '/tmp/world', (err) => {
  if (err) throw err;
  console.log('renamed complete');
});

Обязательно посмотрите в этом блоге -Как правильно задать путь к файлу. Это значительно облегчит вашу жизнь в дальнейшем!

В приведенном примере из документации, все очень просто:

/tmp/hello - относительный путь к папке в которой нужно переименовать файлы и сам файл.

/tmp/world - относительный путь к папке в которую нужно положить переименованный файл и сам файл.

Если будет ошибка, то отследить её в консоли, а если успех, то вывести сообщение, что все прошло успешно.

Нашу задачу мы разобьем на такие подзадачи:

Выбрать шаблон для переименования - придания однотипности новым именам файла.
Получить последовательный доступ к файлам, которые лежат в определенной директории для переименования.
Изменить значение каждого файла на удобное.
Отправить файлы в нужную папку.
Поймать ошибку в случае неудачи или подтверждение - в случае успеха.

Выбрать шаблон для переименования

Вы можете сделать это по собственному усмотрению. Например - задать его из определенного количества случайных цифр и букв ( но тогда он ничем не будет отличаться от исходных :-) ) Или задать некое строковое значение. Например: "My_favorite_file", "vacation" и т.д.

Я решил использовать дату в формате дд-мм-гг (01-10-2019). К дате мы будем добавлять порядковый номер файла в папке и некое префиксное значение. Его я добавил, потому что я часто перемещаю файлы в различные папки и мне удобно знать изначальное место хранения данного файла.

Итак, приступаем. Создадим файл, например rename.js

Первым делом импортируем в него нужный нам модуль:const fs = require("fs");

Получим дату в нужном формате и выведем её в консоль:

const fs = require("fs");

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;
console.log(data_f);
// 1-10-2019

Если вы работаете, как и я в VS-Code, то сделать это очень просто нажатием клавиш Ctrl + Shift + Ё `(открыть консоль) и запустить код - Ctrl + Alt + N (с расширением code runner) или другим способом.

Посмотреть список установленных расширений - просто введите в консоль code --list-extensions и нажмите Enter

Проще всего запустить файл из Node.js - находясь в нужной директории, набрать в консоли node и имя_файла. В нашем случае это node rename. Именно так мы и будем делать, потому как наш скрипт будет работать на Node.js.

Получить последовательный доступ к файлам

Для того, чтобы получить каждый отдельный файл в папке (srcImage) , мы воспользуемся встроенным методом fs.readdir. По ссылке, вы можете прочитать официальную документацию.

Для того, чтобы этот метод сработал правильно, мы должны передать в него первым аргументом - путь к файлам, а вторым - функцию обратного вызова (callback-function) в которую первым аргументом передадим ошибку - err, а вторым полученные файлы, который и выведем в консоль методом forEach, в который дополнительно передадим порядковый номер файла - i. В консоли покажем каждый файл с соответствующим ему порядковым номером i

const fs = require("fs");
const srcFolder = "C:/Users/Branch/Node/abc-rename-file/srcImage/";
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;

fs.readdir(srcFolder, (err, files) => {
  files.forEach((file, i) => {
    console.log(`${file} i=${i}`);   
  });
});

В переменную srcFolder нам следует поместить относительный, но лучше (для будущего использования) абсолютный путь к файлу в виде строкового значения.

запускаем наш код :

node rename

И теперь в консоли мы увидим все файлы из папки с порядковыми номерами.

Изменить значение каждого файла.

Для наглядности, я создам папку, куда мы будем перемещать переименованные файлы в другой директории и назову ее outImage. В наш код помещу абсолютный путь к ней в переменную outFolder:

const outFolder = "C:/Users/Euroset/GoogleD/outFolder/";

Как я говорил ранее, я создам дополнительно свой префикс, который добавлю к дате, полученной ранее:

var myPrefix = "y";

var prefix = myPrefix + data_f;

Сейчас, нам остается воспользоваться встроенным методом для переименования файлов, о котором я говорил ранее и добавить к имени наш префикс и порядковый номер, ну и конечно не забыть поймать ошибку, если есть или вывести сообщение об успехе:

fs.rename(srcFolder + file, outFolder + i + prefix + ".jpg", err => {
      if (err) throw err;
      console.log("rename completed!");
    });

запускаем наш код :

node rename

В консоль получим многократный вывод сообщения об успешном завершении операции. Папка srcImage пуста, а в новой папке outFolder появились переименованные соответствующим образом файлы:

rename полностью:

const fs = require("fs");
const srcFolder = "C:/Users/Branch/Node/abc-rename-file/srcImage/";
const outFolder = "C:/Users/GoogleD/outFolder/";

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;
var myPrefix = "y";
var prefix = myPrefix + data_f;

fs.readdir(srcFolder, (err, files) => {
  files.forEach((file, i) => {
    fs.rename(srcFolder + file, outFolder + i + prefix + ".jpg", err => {
      if (err) throw err;
      console.log("rename completed!");
    });
  });
});

Таким образом, мы создали простой скрипт, который позволяет переименовывать (задавать имена) файлам и перемещать их в нужную директорию. Это может не только помочь вам в изучении Node.js, но и значительно сэкономить время.

Этот скрипт можно дорабатывать бесконечно. Можно сделать очень много различных манипуляций. Есть предложения? Пишите в комментариях!

Удачного кодирования - Happy coding и до скорых встреч.

Не забывайте подписаться на мою страницу в фейсбуке, посмотреть новости в телеграм-канале и в группе.

Посмотреть код на gitHub abc-rename-files-with-node commit - "rename files with Node.js"

UPDATE: По многочисленным просьбам публикую приятные дополнения, которые позволят:

Легко и быстро запускать скрипт из любой директории.
Сохранять исходное расширение файла.

1. Для этого нам нужно воспользоваться встроенным модулем path. Первое, что нам нужно сделать, это импортировать его в наш скрипт:

var path = require("path");

После этого, мы можем автоматически получать путь к директории, в которой расположен наш скрипт, методом __dirname()

Предположим, что файлы, которые мы будем изменять, лежат в некоей общей для них директории (например - Common как на рис. ниже) и в папке с именем srcImage . В этой же директории мы создадим папку для измененных файлов - outImage

Файловая структура выглядит вот так:

Теперь мы можем легко прописать путь в папку исходных и измененных файлов:

const srcFolder = path.resolve(__dirname, "srcImage") + "/";
const outFolder = path.resolve(__dirname, "outImage") + "/";

Этот скрипт можно легко запустить, если в проводнике виндовс, выбрать нужную папку (на схеме - Common Folder), нажать правую кнопку мыши и , если у вас установлен Bash (а он идет вместе с Node.js), выбрать - Git Bash Here. Таким образом, вы откроете терминал сразу в нужной папке.

Если у вас не получилось, то перейдите в нужную директорию командой

cd folder_name

Теперь, для запуска скрипта нужно набрать:

node rename

2. Для того, чтобы сохранять расширения у изменяемых файлов, нам нужно опять воспользоваться тем же модулем path и внутри цикла forEach получить расширение файла, сохранив его в изменяемую переменную:

let extension = path.extname(file);

Теперь, нам остается заменить, внутри функции fs.rename добавляемое окончание (расширение) файла - ".jpg", на extension

fs.rename(srcFolder + file, outFolder + i + prefix + extension, err => {
      if (err) throw err;
      console.log("rename completed!");
    });

Код из файла rename.js полностью:

const fs = require("fs");
var path = require("path");

const srcFolder = path.resolve(__dirname, "srcImage") + "/";
const outFolder = path.resolve(__dirname, "outImage") + "/";

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();

var data_f = curr_date + "-" + curr_month + "-" + curr_year;
var myPrefix = "-t-t-t-";
var prefix = myPrefix + data_f;

fs.readdir(srcFolder, (err, files) => {
  files.forEach((file, i) => {
    let extension = path.extname(file);
    fs.rename(srcFolder + file, outFolder + i + prefix + extension, err => {
      if (err) throw err;
      console.log(`rename - ${file} completed!`);
    });
  });
});

Теперь, если нам нужно поменять название всех файлов в некоторой папке, то мы копируем этот файл и вставляем его на одну директорию выше тех папок - srcImage (исходные изображения) outImage (пустая, вновь созданная, куда будут помещены переименованные файлы).

Открываем rename.js в редакторе и меняем srcImage и outImage на названия ваших папок. Можно это делать и в одной папке, без создания дополнительной outImage, для готовых файлов. В этом случае у вас будут совпадать названия, которые вы вставите на место указанных мной srcImage и outImage.

Префикс, вы можете установить по своему усмотрению и вкусу. Я поставил произвольный - -t-t-t- .

Для примера я поместил в папку srcImage тестовые файлы с разными расширениями:

Теперь, открываю gitBash, как я описывал выше, в CommonFolder и запускаю скрипт:

node rename

В терминале, я вижу перечисленные в порядке процесса переименования файлы ( старые их названия).

Идем в папку переименованных файлов и видим:

Переименование файлов прошло успешно!

Вот и все, собственно. Теперь запускаем файл в любой директории, о чем я написал выше и получаем измененными только имена файла, а не их расширения.

Посмотреть код на gitHub abc-rename-files-with-node commit - "renaming files using path and saving extension"

Телеграм канал - Full Stack JavaScript Developer

Помочь проекту (любая валюта). DONATE

воскресенье, 29 сентября 2019 г.

Как перебрать объект в JS(ES).

В этом уроке мы собираемся изучить различные способы циклического прохождения объекта в JavaScript.

For in loop - Цикл `for in`

Цикл for in помогает нам получить ключ объекта на каждой итерации, используя который мы можем получить доступ к значению объекта.

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key} : ${obj[key]}`);
  }
}
// id : 1
// VM411:9 name : gowtham
// VM411:9 active : true

Примечание: мы использовали метод obj.hasOwnProperty (key), чтобы убедиться, что свойство принадлежит этому объекту, потому что цикл for in также выполняет итерации по цепочке прототипов объекта.

Object.keys

Метод Object.keys() принимает объект в качестве аргумента и возвращает массив с заданными ключами объекта.

Объединяя метод Object.keys с методом forEach, мы можем получить доступ к парам ключ-значение объекта.

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.keys(obj).forEach(key => {
  console.log(`${key} : ${obj[key]}`);
});
// id : 1
// name : gowtham
// active : true

Object.values

Метод Object.values() принимает объект в качестве аргумента и возвращает массив с заданными значениями объекта.

Используя этот метод, мы можем получить доступ только к значениям объекта.

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.values(obj).forEach(value => {
  console.log(value);
});

// 1
// gowtham
// true

Object.entries

Метод Object.entries() возвращает массив с массивами, которые являются парами [ключ, значение] данного объекта.

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}:${value}`);
});
// id : 1
// name : gowtham
// active : true

Object.getOwnPropertyNames

Метод Object.getOwnPropertyNames также возвращает массив с заданными свойствами объекта или ключами (включая не перечисляемые свойства).

Пример:

const obj = {
  id: 1,
  name: "gowtham",
  active: true
};

Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(`${key}:${obj[key]}`);
});
// id : 1
// name : gowtham
// active : true

Оригинал публикации Reacto

Автор перевода Yaroslav Kolesnikov

Статья на gitHub

Телеграм канал - Full Stack JavaScript Developer

понедельник, 19 августа 2019 г.

React - шпаргалка.

Шпаргалка по React.js в картинках.

См. этот пост на gitHub

Телеграм канал - Full Stack JavaScript Developer

четверг, 15 августа 2019 г.

Методы жизненного цикла React 16 на русском.


//  React 16 Lifecycle Methods

class ComponentWithLifecycle extends React.Component {
  //  Часто используемые методы ЖЦ (Жизненного цикла)
  constructor() {
    //  - ЖЦ: Mounting  - Монтаж ( до рендера )
    //  - Цель: Инициализация состояния
  }

  componentDidMount() {
    //  - ЖЦ: Mounting - Монтаж ( немедленно после рендера )
    //  -Цель: Инициализация состояний требующее существование ДОМ узлов
    //    Сетевые запросы и побочный эффекты.
  }
   componentDidUpDate() {
    //  - ЖЦ:  Updating - Обновление 
( yнемедленно после построения - обновления)
    //  -Цель: Управление обновлением ДОМ или поддержка сетевых запросов
   }
   componentWillUnmount() {
      //  - ЖЦ: Unmounting - Размонтирование
      // -Цуль: Убрать такие вещи как обработчики событий,
 отмена сетевых запросов и т.д.
   }

  //  Редко используемые методы жизненного цикла
  static static getDerivedStateFromProps(props, state) {
    //  -ЖЦ: Mounting  Монтирование и размонтирование -  Unmounting
( немедленно до рендера )
    //  -Цель: Когда state - состояние зависит от свойств - props 
( следует избегать )
  }

  shouldComponentUpdate(nextProps, nextState) {
    //  -ЖЦ: Updating -Обновление (немедленно до рендера )
    //  -Цель: Позволяет разработчику предотвращать рендеринг
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    //  -ЖЦ: Updating - Обновление 
( непосредственно перед подтверждением вывода рендера )
    //  -Цель Захват информации ДОМ, такой как данные скролла - 
scroll position которые могут меняться.
  }

  // Особые случаи использования
  componentDidCatch() {
    //  - Создает границы ошибок для захвата их от дочерних компонентов
  }

  // Необходимый - обязательный
  render() {
    // -Выводит код компонента на экран
  }

  // Объяснение жизненного цикла:
  // Mounting -  монтаж: Вызывается до того как ваш компонент 
отображается в пользовательском интерфейсе - UI
  // Updating - обновление: Вызывается изменением  
state-состояния или props и повторный рендеринг UI
  // Unmounting - Размонтирование: Вызывается когда ваш 
компонент больше не будет отображаться в UI
}

React Lifecycle Methods - on GitHub

Телеграм канал - Full Stack JavaScript Developer

Страницы

Translate

Поиск по этому блогу

пятница, 1 ноября 2019 г.

Git - работа с репо без пароля.

Материалы по Git, которые могут быть вам интересны:

вторник, 1 октября 2019 г.

Node.js - Переименование файлов.

Выбрать шаблон для переименования

Получить последовательный доступ к файлам

Изменить значение каждого файла.

воскресенье, 29 сентября 2019 г.

Как перебрать объект в JS(ES).

For in loop - Цикл `for in`

Object.keys

Object.values

Object.entries

Object.getOwnPropertyNames

понедельник, 19 августа 2019 г.

React - шпаргалка.

четверг, 15 августа 2019 г.

Методы жизненного цикла React 16 на русском.

Ярлыки

Форма для связи

Страницы

Translate

Поиск по этому блогу

пятница, 1 ноября 2019 г.

Материалы по Git, которые могут быть вам интересны:

вторник, 1 октября 2019 г.

Выбрать шаблон для переименования

Получить последовательный доступ к файлам

Изменить значение каждого файла.

воскресенье, 29 сентября 2019 г.

For in loop - Цикл for in

Object.keys

Object.values

Object.entries

Object.getOwnPropertyNames

понедельник, 19 августа 2019 г.

четверг, 15 августа 2019 г.

Ярлыки

Форма для связи

пятница, 1 ноября 2019 г.

вторник, 1 октября 2019 г.

воскресенье, 29 сентября 2019 г.

For in loop - Цикл `for in`

понедельник, 19 августа 2019 г.

четверг, 15 августа 2019 г.