Translate

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

Показаны сообщения с ярлыком Лайфхаки. Показать все сообщения
Показаны сообщения с ярлыком Лайфхаки. Показать все сообщения

воскресенье, 28 октября 2018 г.

JavaScript трюки.

Изучите эти аккуратные трюки JavaScript менее чем за 5 минут.

Методы экономии времени, используемые профессионалами!





В этой статье мы рассмотрим:
  1. Очистка или усечение массива.
  2. Имитация именованных параметров с деструкцией объектов.
  3. Деструктуризация объектов для элементов массива.
  4. Переключение с диапазонами.
  5. await нескольких асинхронных функций с помощью async / wait
  6. Создание чистых объектов
  7. Форматирование кода JSON
  8. Удаление повторяющихся элементов из массива.
  9. Сглаживание (объединение) многомерных массивов


Все материалы по JS в этом блоге, смотрите по ссылке.


  1. Очистка или усечение массива.
  2. Легкий способ очистки или усечения массива без его переназначения - это изменить его значение свойства length:

    
    const arr = [11, 22, 33, 44, 55, 66];
    
    // truncanting
    arr.length = 3;
    console.log(arr); //=> [11, 22, 33]
    
    // clearing
    arr.length = 0;
    console.log(arr); //=> []
    console.log(arr[2]); //=> undefined
    
    


  3. Имитация именованных параметров с деструкцией объектов.
  4. Скорее всего, вы уже используете объекты конфигурации, когда вам нужно передать в переменную набор параметров для некоторой функции, например:

    
    doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
    function doSomething(config) {
      const foo = config.foo !== undefined ? config.foo : 'Hi';
      const bar = config.bar !== undefined ? config.bar : 'Yo!';
      const baz = config.baz !== undefined ? config.baz : 13;
      // ...
    }
    
    


    Это старый, но эффективный шаблон, который пытается имитировать именованные параметры в JavaScript. Вызов функции выглядит нормально. С другой стороны, логика обработки объектов конфигурации необоснованна. С деструктуризацией объекта ES2015 вы можете обойти этот недостаток:

    
    function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
      // ...
    }
    
    


    И если вам нужно сделать дополнительный объект config, это тоже очень просто:

    
    function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
      // ...
    }
    
    


  5. Деструктуризация объектов для элементов массива.
  6. Назначение элементов массива отдельным переменным с деструкцией объектов:

    
    const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
    
    const { 2: country, 4: state } = csvFileLine.split(',');
    
    


  7. Переключение с диапазонами.
  8. ПРИМЕЧАНИЕ. После некоторого раздумья я решил выделить этот трюк от других в этой статье. Это НЕ экономия времени, НO он подходит для кода реальной жизни. Имейте в виду: IF в таких ситуациях всегда лучше. В отличие от других советов в этом посте, это скорее любопытство, чем что-то для реального использования. Во всяком случае, я сохраню его в этой статье по историческим причинам.

    Вот простой способ использовать диапазоны в операторах switch:

    
    function getWaterState(tempInCelsius) {
      let state;
      
      switch (true) {
        case (tempInCelsius <= 0): 
          state = 'Solid';
          break;
        case (tempInCelsius > 0 && tempInCelsius < 100): 
          state = 'Liquid';
          break;
        default: 
          state = 'Gas';
      }
      return state;
    }
    
    


  9. await нескольких асинхронных функций с помощью async / wait.
  10. Можно ожидать - await завершения нескольких асинхронных функций с помощью Promise.all:

    
    await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
    
    


  11. Создание чистых объектов.
  12. Вы можете создать 100% чистый объект, который не наследует какое-либо свойство или метод из Object (например, constructor, toString () и т. д.).

    
    const pureObject = Object.create(null);
    
    console.log(pureObject); //=> {}
    console.log(pureObject.constructor); //=> undefined
    console.log(pureObject.toString); //=> undefined
    console.log(pureObject.hasOwnProperty); //=> undefined
    
    


  13. Форматирование кода JSON.
  14. JSON.stringify может сделать больше, чем просто подкрепить объект. Вы также можете украсить свой JSON-вывод:



    
    const obj = { 
      foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
    };
    
    

    
    // Третий параметр - это количество пробелов, используемых для
    // украшения вывода JSON.
    // JSON.stringify (obj, null, 4); 
    // =>"{
    // =>    "foo": {
    // =>        "bar": [
    // =>            11,
    // =>            22,
    // =>            33,
    // =>            44
    // =>        ],
    // =>        "baz": {
    // =>            "bing": true,
    // =>            "boom": "Hello"
    // =>        }
    // =>    }
    // =>}"
    
    


  15. Удаление повторяющихся элементов из массива.
  16. Используя ES2015 Sets вместе с оператором Spread - (...), вы можете легко удалить повторяющиеся элементы из массива:

    
    const removeDuplicateItems = arr => [...new Set(arr)];
    
    removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
    //=> [42, "foo", true]
    
    


  17. Сглаживание (объединение) многомерных массивов
  18. Сглаживание массивов тривиально с оператором Spread:

    
    const arr = [11, [22, 33], [44, 55], 66];
    
    const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
    
    


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

    
    function flattenArray(arr) {
      const flattened = [].concat(...arr);
      return flattened.some(item => Array.isArray(item)) ? 
        flattenArray(flattened) : flattened;
    }
    
    const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
    
    const flatArr = flattenArray(arr); 
    //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
    
    


    И вот оно! Надеюсь, эти аккуратные маленькие трюки помогут вам писать лучше и красивее на JavaScript.




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


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

Телеграм канал - Full Stack JavaScript Developer
Помочь проекту (любая валюта). DONATE

вторник, 18 сентября 2018 г.

Работа с REPL. Основные команды.

REPL - read eval print loop это интерактивный компонент, который поставляется вместе с Node.js




При работе в Node.js часто приходится запускать целые файлы или части кода для тестирования. Для удобства можно использовать REPL, просто набрав в КС (здесь и далее - командная строка):

node


Нажать Enter.

Без ключевого слова var будет возвращать введенные выражения, а с var - undefined



Так происходит потому что в результате операции присваивания значения переменной не возвращает результат.

Вот интересный пример:



Ожидали увидеть true?

Не забывайте, что интерпретатор пойдет слева направо и вначале сравнит 3 и 2. Получит true. И только потом сравнит true и 1 и получит false

3>2==1 будет true, потому что при не строгом сравнении true==1

Можете проверить!

Многострочный и сложный JS код

JS код можно набирать в REPL точно так же как в обычном файле, включая необходимые инструкции для импорта модулей.

Пример с модулем Query String:



Переменная qs без var и нажать Enter. Пока мы работаем без var, то сразу видим результат. В данном случае это интерфейс объекта querystring.

REPL предоставляет возможность введения многострочного кода после любой открывающей скобки { или (. При вложенности, просто увеличивается кол-во точек перед введенным кодом.

Здесь можно также вставлять блоки кода - правая кнопка мыши и выбрать "Вставить".

Основной объект Node.js global на официальном сайте Node.js документирован довольно слабо. Чтобы это испавить, вы можете посмотреть всё информацию об этом объекте просто набрав:

console.log(global);


Или:

gl = global;


Для перехода по уже набранным вами командам, можно воспользоваться стрелками "вверх" - "вниз" - . Выбрать нужную и нажать Enter.

Управление REPL с помощью команд.
  • Ctrl + C - Завершает выполнение текущей команды. Повторное нажатие - выход из REPL.
  • Ctrl + D или написать в консоли .exit - Выход из REPL.
  • Tab - Автоматическое завершение имени глобальной или локальной переменной.
  • - Переход вверх по списку введенных команд.
  • - Переход вниз по списку введенных команд.
  • _ -(нижнее подчеркивание) - ссылка на результат вычисления после выражения.


Ниже приведу список команд для ввода в поле REPL:

  • .break - Если вы запутались с введением многострочного кода, эта команда вернет вас к самому началу, но весь многострочный код будет потерян.
  • .clear - Перезапуск объекта контента и очистка любого многострочного выражения. Эта команда по сути запускает сеанс с самого начала.
  • .exit - Выход из REPL
  • .help - Вывод всех доступных команд.
  • .save - Сохранение текущего REPL сеанса в файле.
  • .load путь/к/файлу.js - Загрузка файла в текущий сеанс (


Команда .save путь/к/файлу/для/сохранения.js сохраняет в файле все, что было введено в текущий объект контента. Пока не будет специально создан новый объект контента или использована команда .clear. Контент включает в себя все, что было введено в текущий REPL сеанс.

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

Еще одним полезным свойством REPL является возможность создания собственной, нестандартной версии. Позволяющей исключить ответы в виде undefined и предварительно загружать модули.

Если вы собираетесь использовать REPL для разработки, то не забывайте чаще сохранять свою работу!



                                                                                                                                                             

воскресенье, 27 мая 2018 г.

Автосохранение файлов в Sublime3.

Очень часто при написании кода требуется быстро посмотреть изменения файла в браузере, а постоянное нажатие "Сохранить" или Ctrl + S утомляет, то на помощь приходит такая фишка, как автосохранение файлов при потере фокуса (переключение на др. вкладку) в Sublime.

Без долгих предисловий. Ничего скачивать и устанавливать не надо. Просто идете по пути -> "Preferences" -> "Settings".

См фото ниже:



В открывшемся окне редактора, в файле Preferences.sublime-settings-User (справа), добавляем следующую строку

"save_on_focus_lost": true,


Точно так как на фото ниже:



Файл этот, обычно находится по адресу:

C:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\User


Вот и все!

Теперь при переключении на браузер у вас всегда будут автоматически сохраняться все изменения в редакторе.

Хорошего кодинга! :-)

                                                                                                                                                             

среда, 9 мая 2018 г.

Конспект по Bash.

Если вы работаете в ИТ, то как никто знаете о цене времени. Оптимизация рабочего процесса - один из важнейших аспектов работы в ИТ.
Так или иначе, наша работа (будь то верстка сайта, написание модулей, или тестирования приложений) требует повторения одних и тех же действий: быстрые скриншоты с загрузкой на сервер, обработка выделенного текста, конвертация файлов, парсинг данных и многое другое. Чтобы не делать лишних действий, а сконцентрироваться на идее и самой сути ее реализации, еще в 1978 году Стивен Борн разработал командную оболочку [sh] [wiki-sh], которая впоследствии, в 1987 году была усовершенствована Брайаном Фоксом и переросла в то, что мы знаем сегодня как [bash] [wiki-bash] (Bourne again shell).



Вполне логично, что появляется вопрос: "Для чего мне нужно что-то, что написали почти полвека назад?" Так вот ответ на него прост: это "что-то" до сих пор является самым мощным инструментом автоматизации и, де-факто, стандартом для написания простых, но эффективных сценариев на всех unix-based системах. Именно поэтому знать общий синтаксис bash и уметь писать на нем - критический скилл для разработчика.

В этом посте я опишу синтаксические конструкции, приведу примеры простых сценариев и укажу на некоторые подводные камни в bash. Уверен, что такой конспект обязательно пригодится как начинающим, так и опытным разработчикам, которые могли забыть некоторые особенности этой сверхмощной командной оболочки.

Оболочки и вызов сценариев

Пользовательская оболочка bash может работать в двух режимах - интерактивном и, соответственно, неинтерактивном. Открыть оболочку в Ubuntu можно комбинацией клавиш Ctrl + Alt + F1, привычный графический интерфейс исчезнет, а перед вами откроется один из семи виртуальных терминалов, доступных в дистрибутиве Ubuntu. Если оболочка выдает приглашение (что-то вроде того, которое можно увидеть ниже), то вы работаете в интерактивном режиме:


    user@host:~$



Здесь можно вводить самые разнообразные unix-команды (как то: ls, grep, cd, mkdir, rm) и видеть результат их выполнения. Интерактивной эта оболочка называется потому, что она взаимодействует с пользователем направления. Окружение рабочего стола (графический интерфейс), в семействе систем Debian (к которым относится и Ubuntu), принято размещать в седьмом виртуальном терминале, для того чтобы вернуться к привычному окружение рабочего стола наберите комбинацию Ctrl + Alt + F7. Конечно работать в виртуальных терминалах не слишком удобно, особенно, если нужно редактировать документ и одновременно выполнять какие-либо команды, поэтому в дальнейшем мы будем пользоваться встроенным в графический интерфейс эмулятором виртуального терминала, встроенным в Ubuntu. Открыть его можно комбинацией клавиш Ctrl + Alt + T, или Unity Dash, найдя его в списке программ.

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


    sh скрипт
    bash скрипт



Где скрипт это путь к файлу, содержащему команды для выполнения. Такой файл является обычным текстовым документом, который можно создать с помощью любого текстового документа. Впрочем, можно упростить вызов скрипта всего лишь сделав его исполняемым. Для этого необходимо предоставить соответствующие права доступа этому файлу с помощью команды chmod:


    chmod +x скрипт



Кроме этого, в первой строке скрипта необходимо указать которая оболочка должна выполнять этот сценарий. Это можно сделать, разместив в начале соответствующее указание #! / Bin / sh (для оболочки sh) или #! / Bin / bash (соответственно для bash). После этого файл можно будет вызвать на выполнение обратившись к нему в терминале:


    ./скрипт



Комментарии

Сценарии могут содержать комментарии. Комментарии - это операторы, которые можно размещать в сценарии оболочки, но который игнорируется при исполнении. Комментарии должны начинаться с символа # и продолжаются до символа новой рядка. К примеру:


    #!/bin/bash
    # Сценарий, выведет имя пользователя
    whoami



Переменные

Оболочка позволяет создавать и удалять переменные, а также выполнять над ними операции. Переменные в bash могут находиться в 3-х областях видимости:

Локальные переменные - это обычные переменные в внутри одного сценария. Они не доступны другим программам и сценариям, которые запускаются с этой оболочки. Объявляются переменные с помощью символа = (обратите внимание на то, что перед и после = нет пробелов), а с их значением обращаются с помощью символа $:


    name="Петро Петрович"
    echo $name    # вывод значения
    unset name    # удаление переменной



Также можно сказать локальную переменную внутри функции и которая будет доступна только в теле этой функции:


    localлокальная_переменная=значение



Переменные окружения - это переменные, которые доступны любым программам, запущенные с данной оболочки. Объявляются они так же как и локальные переменные, но с командой export:


    exportглобальная_переменная=значение



В bash есть много переменных окружения, которые достаточно часто встречаются в сценариях, например:
  • > HOME - путь к домашнему каталогу пользователя;
  • > PATH - список каталогов, в которых оболочка ищет исполняемые файлы;
  • > PWD - путь к рабочему каталогу;
  • > RANDOM - формирует целое случайное число;
  • > HOSTNAME - имя компьютера, на котором выполняется оболочка;
  • >


Переменные оболочки - это переменные, которые устанавливаются оболочкой и необходимые ей для корректной работы. Эти переменные имеют имена порядкового номера ($ 1, $ 2, $ 3, ...) и содержат аргументы, которые передавались сценария при запуске, как:


    ./some_script.sh VAL1 VAL2  # внутри сценария $1='VAL1', $2='VAL2' 



Переменным можно присваивать значения по умолчанию следующим образом:


    : ${VAR:='значення за замовчуванням'} # Если переменная VAR пуста, присвоить ей "значение по умолчанию"



Массивы и списки

В bash также есть возможность работать с массивами. При работе с массивами часто пользуются переменной окружения IFS - разделителя полей для входных строк (IFS - Input Field Separator). По умолчанию IFS равный Пробельные символа, но может быть изменен для разбиения строки на элементы массива, например, запятыми. Обратите внимание, что для формирования переменных оболочки, которые доступны через $ 1, $ 2 и т.д., используется именно переменная IFS, то есть введен после имени скрипта строку аргументов, будет разделен именно с первым символом, который хранится в этой переменной.

Объявить массив можно следующим образом:


    files[0]=Яблоко
    files[1]=Груша
    echo ${files[*]}    # напечатает элементы массива без учета IFS
    echo ${files[@]}    # напечатает элементы массива с IFS в качестве разделителя.



Доступ к элементу массива можно с помощью срезов: $ {arr: 0: 1}. Удалить первый элемент массива можно с помощью сдвига: shift arr. Добавить в элементы в массив: arr = ("$ {arr [@]}" "Item 1" "Item 2"). Проверить вхождения элемента в массив реализуется с помощью несколько более сложной конструкции:


    if [[ ${arr[(r)some]} == some ]]; then
         # команды, если элемент входит
    else
         # команды, если не входит
    fi



В этом примере arr - некоторый массив, а some - это элемент, который мы проверяем на вхождение.

Подстановки результатов операций.

Присвоить переменной результат работы команды или арифметических операций можно с помощью апострофов, или конструкции $ (выражение):


    now=`data +%T`
    # або
    now=$(data +%T)

    echo now # 19:08:26



Арифметические операции необходимо накладывать в двойные скобки:

   
    foo=$(( ((10 + 5*3) – 7) / 2 ))
    echo $foo    #> 9



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


    echo beg{i,a,u}n #> begin began begun



Стоит вспомнить и о строгости кавычек в bash: одинарные кавычки - строгие, двойные - нестрогие. Это означает, что при подстановке переменных в строку с двойными кавычками, интерпретатор подставит соответствующее значение переменной. Одинарные кавычки выведут строку так, как вы его написали. пример:


    echo "Домашняя директория: $HOME"  #> Домашняя директория: /home/user
    echo 'Домашняя директория: $HOME'  #> Домашняя директория: $HOME



Потоки.

Файл с которого происходит чтение, называют стандартным потоком ввода, а в какой происходит запись, соответственно - стандартным потоком вывода. В bash есть три стандартных потока:

 
    0  stdin   ввод         
    1  stdout  выводд        
    2  stderr  поток ошибок



Для перенаправления потоков используют основные операторы:
  • > - перенаправления потока вывода в файл (файл будет создан, или перезаписан)
  • >> - дописать поток вывода в конец файла;
  • < - перенаправляет данные из файла в поток ввода;
  • <<< - чтение данных из строки, вместо всего содержимого файла (работает для bash 3+)
  • 2> - перенаправляет поток ошибок в файл (файл будет создан, или перезаписан)
  • 2>> - дописать ошибки в конец файла; тадада


Kаналы

Стандартные потоки можно перенаправить не только в файлы, но и на вход других сценариям. Соединение потока вывода одной программы с потоком ввода другой называют каналом или пайпом (pipe). Ниже приведен простой конвейер из трех команд: команда1 перенаправляет свой вывод на вход команды2, которая, в свою очередь, перенаправляет собственный вывод на вход команды3:


  cmd1 | cmd2 | cmd3



Kонвейеры

Конвейеры - это команды, которые соединены операторами ; , && , || для выполнения в определенной последовательности. Операторы организации конвейеров работают следующим образом:
  • > команда1; команда2 - команда2 исполнится после команды1 независимо от результата ее работы команды1;
  • > команда1 && команда2 - команда2 выполнятся только после успешного выполнения команды1 (т.е. с кодом завершения 0);
  • > команда1 || команда2 - команда2 исполнится только после неудачного выполнения команды1 (то есть код завершения команды1 будет отличным от 0)


Условные операторы

В скриптовом языке bash поддерживаются два оператора ветвления: if и case. Оператор if, как и в других языках, выполняет определенный блок указаний, в зависимости от условия. Условие окутывают в двойные квадратные скобки [[...]], которые bash рассматривает как один элемент с кодом выхода. Внутри блока операторов накрытого в [[ ]] разрешается использовать операторы && и ||. примеры:


   # однострочная запись
   if [ ... ]; then echo "true"; else echo "false"; fi;

   ## вложенные условия
   if [ ... ] && [ ... ]; then
        ...
   elif [[ ... && ... ]]; then
        ...
   else
        ...
   fi;



Обратите внимание, что [, условие и] обязательно должны быть разделены пробелами, иначе оболочка воспримет в качестве команды [условие.

В ниже приведена таблица с возможными условиями сравнения:


  # Работа с файлами
  -e    Проверить существует ли файл или директория (-f, -d)
  -f    Файл существует (!-f - не существует)
  -d    Каталог существует (!-f - не существует)
  -s    Файл существует и он не пустой
  -r    Файл существует и доступен для чтения
  -w    ... для записи
  -x    ... для выполнения
  -h    Есть c символической ссылкой

  # Работа со строками
  -z    Пустая строка
  -n    Не пустая строка
  ==    Ровно
  !=    Не ровно

  # Операции с числами
  -eq   Ровно
  -ne   Не ровно
  -lt   Менше
  -le   Менше или ровно
  -gt   Больше
  -ge   Больше или ровно


все основные команды можно посмотреть здесь - Основные команды Bash

примеры:


    if [ `uname` == "Adam"]; then
    echo "Не їж яблуко!"
elif [ `uname` == "Eva"] then
    echo "Не бери яблуко!"
else
    echo "Яблука зараз дуже дорогі!"
fi;



Если необходимо сделать выбор из нескольких альтернатив, пригодится оператор case. Принцип его работы легче понять на примере:


 case "$extension" in
    (jpg|jpeg)
        echo "Це зображення у форматі jpeg."
    ;;
    png)
        echo "Це зображення у форматі png"
    ;;
    gif)
         echo "А це гіфочка))"
    *)
        echo "Оу! Це взагалі не зображення!"
    ;;
 esac


В примере оператор проверяет значение переменной $ extension на совпадение с одним из шаблонов и в случае совпадения выполнит соответствующий блок кода. В случае, если не будет найдено совпадений, выполнятся указания, соответствуют шаблону * .

Циклы

Язык оболочки дает пользователю возможность организовывать циклическое выполнение инструкций при помощи циклов:
  1. > while
  2. > for
  3. > select
Оператор while описывается следующим образом:


    while условие do
         тeло
    done



Интерпретатор в первую очередь выполняет команды, описанные в условии. Если результат выполнения нулевой, то выполняется тело, а после ее выполнения, переход к следующей итерации, в противном случае происходит выход из цикла. В условии может быть любая допустимая команда. пример:


   #!/bin/sh
   # Квадраты чисел от 1 до 10
   x=0
   while [ $x –lt 10 ] do 
   #значение переменной x меньше 10?
       echo $(($x*$x))
       x=`expr $x + 1` # увеличиваем х на 1
   done



Цикл for выполняет тело для каждого элемента из списка. Синтаксис цикла for таков:


   for имя in елемент1 елемент2 ... елементN do
        тeло
   done



В качестве элементов обычно используют различные шаблоны (wildcards). Очень удобно применять for для прохождения по каталогам и выполнения операций над группой файлов. В примере ниже, цикл проходит по всем файлах с расширением * .bash, перемещает их в директорию ~ / scripts и добавляет их права на исполнение.


   #!/bin/sh
   # Перемещение всех скриптов из ~ в директорию ~/scripts
   for FILE in $HOME/*.bash do
        mv $FILE ${HOME}/scripts
        chmod +x ${HOME}/scripts/${FILE}
   done


Цикл select помогает организовать удобное меню выбора и применяется тогда, когда пользователь должен выбрать один элемент из предложенного списка. В общем цикл select имеет такой же синтаксис как и цикл for:


  select ответ in елемент1 елемент2 ... елементN do
       тіло
done



При выполнении этого оператора, все элементы из списка высвечиваются на экране со своими порядковыми номерами в виде списка вариантов ответа, после списка выводится специальное приглашение для ввода. Обычно оно имеет вид # ? . Введенный пользователем номер списка записывается в переменную ответ. Если ответ содержит номер пункта меню, то в переменную заносится значение соответствующего элемента из списка. Если в списке нет введенного пункта, список будет показан снова. После того, как пользователь сделает правильный выбор, выполнятся указания в теле, а цикл перейдет к следующей итерации и все действия повторятся с самого начала - именно поэтому работу цикла select желательно прерывать


   #!/bin/sh

   echo -n "Введите название пакета: " && read PACKAGE
   PS3="Выберите пакетный менеджер : "
   select ITEM in bower, npm, pip do
        case $ITEM in
            bower) bower install $PACKAGE ;;
            npm) npm install $PACKAGE ;;
            pip) pip install $PACKAGE ;;
        esac
        break
   done



Пример выше запрашивает у пользователя название пакета, который он желает установить, далее интересуется который пакетный менеджер использовать и в зависимости от выбора устанавливает нужный пакет и останавливает выполнение.

Оболочка также команды, для изменения нормального выполнения цикла. Оператор break полностью останавливает выполнение цикла, оператор continue - переходит к следующей итерации.

Функции.

В сценариях оболочки возможном объявлении и вызов функций. Стоит отметить, что само понятие функций в bash несколько урезано. На самом деле, функции в bash - это именуемая группа команд, которые выполнятся при обращении к функции. В любом случае функциями следует пользоваться везде, где есть код, повторяется с небольшими вариациями. Объявление функции имеет следующий вид:


   имя_функции () {
        команды
   }

   имя_функции    # обращение к функции



Объявление функции обязательно должно предшествовать ее первом вызове. Обращение к функции происходит путем указания ее имени в качестве команды.

Функция может принимать аргументы и возвращать после своего выполнения результат - код выхода. Функция направляется в своих аргументов точно так же, как и в локальных переменных, с помощью позиционных переменных - $ 1, $ 2 и тд. Результат работы можно поворачивать с помощью команды return. Например, функция, которая принимает параметр (имя) и заканчивая свою работу с кодом 0:


   #!/bin/sh
   #функция с параметром
   greeting() {
        if [ -n "$1" ]; then
            echo "Привет, $1!"
        else
             echo "Привет, неизвестный!"
        fi
        return 0
   }

   greeting пользователь    #> Привет, пользователь!
   greeting               #> Привет, неизвестный!



Команда return возвращает код завершения 0 - это код успешного завершения сценария. Каждая программа по завершению работы записывает в переменную окружения #? код завершения - число от 0 до 255. С помощью этой переменной можно определять статус выполнения каждой отдельной команды или скрипта. Если программа завершилась ошибкой, кодом завершения будет целое число отличное от нуля. Обратите внимание, что если сценарий завершается командой exit без параметров, кодом завершения сценария будет код завершения последней выполненной команды.

Отладка сценариев.

Оболочка дает несколько средств для налаживания сценариев. Для активации режима отладки, сценарий должен быть запущен с помощью специальных опций. Первая строка сценария должен иметь вид:


   #!/bin/sh опция



Можно выбирать среди следующих функций:
  1. > -n - читать все команды, но не выполнять их;
  2. > -v - выводить все строки по мере их обработки интерпретатором;
  3. > -x - выводить все команды и их аргументы по мере их выполнения.
Для налаживания сценария частями, нужный фрагмент замечают вызовом команды set с соответствующей опцией из таблицы. Причем, для включения режима отладки, перед опцией указывают символ - для отключения режима отладки используют + .


   set –x # включаем режим  отладки
   ...
   set +x # выключаем режим  отладки



Общая практика налаживания заключается в том, чтобы прежде чем запустить его на выполнение, необходимо проверить его синтаксис с помощью опции -n . Для большей детальности можно комбинировать ключи -nv . После исправления синтаксических ошибок проводится отладка с помощью опции -x .

Послесловие.

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

Если вас заинтересовал скриптинг на Bash, прошу поддержать меня, распространяя статью среди своих друзей.

Рад буду услышать конструктивную критику и замечания в комментариях.






Выражаю благодарность изданию codeguida за любезно предоставленный материал.

Автор: denysdovhan.
Перевод: Kolesnikov Yaroslav.                                                                                                                                                              

воскресенье, 22 апреля 2018 г.

FireFox: SNB Social Neworks Buttons.

Самый простой способ поделиться статьей, или страницей в соц.сетях, если у вас браузер Mozilla Firefox, это посто воспользоваться готовым расширением (Userscript)
Работаю с этим расширением уже более полугода никаких проблем не выявил. Написал его для SMM - менеджеров нашей компании, и теперь готов представить его в открытый доступ для совместного, безвозмездного использования.




Расширение может быть легко дополнено "кнопками" других социальных сетей. Буду очень благодарен вам за отзывы и рекомендации.
Итак, приступим!

Требования к "железу"

  1. Браузер Mozilla Firefox версии 57.0 и выше. Хотя, я думаю, что будет работать с любой версией, где можно запустить код.
  2. Операционная система Windows (32-bit or 64-bit). С другими не проверял.

Установка

  1. Идем на страницу Greasemonkey
  2. и нажимаем "Добавить".



  3. После этого на панели инструментов справа появится значок - голова обезьянки. Щелкаем по ней и выбираем пункт New User Script.




  4. Скачиваем расширение с сайта gitHub, или с моего диска Google Drive. Открываем файл snb-firefox-social-networks-buttons.js и копируем оттуда все - Ctrl + A -> Ctrl + C
  5. О том. как клонировать репозиторий с gitHub вы можете вспомнить пройдя по ссылке. Я рассказывал об этом в своем посте "Клонирование репозитория GitHub на компьютер"

  6. Откроется новое окно. Удаляем оттуда все полностью и на это место вставляем код расширения из файла snb-firefox-social-networks-buttons.js все. Для удобства выделения всего текста (кода), вы можете пользоваться сочетанием клавиш Ctrl + A- выделить все, а для копирования Ctrl + С и для вставки кода - Ctrl + V




  7. Нажимаем на иконку справа вверху - "Сохранить", или нажимаем Ctrl + S и на этом установка расширения считается законченной.
  8. При первом запуске, возможно потребуется дать разрешение на всплывающие окна для сайтов. на которых вы будете использовать расширение. Это сообщение появится при попытке использования расширения в виде полоски вверху окна браузера.

Для отключения блокировки всплывающих окон Mozilla Firefox

  1. Нажать на сэндвич-меню -> , справа на панели браузера
  2. Выбрать пункт "Настройки" ->
  3. Слева, на панели, выбираем раздел "Приватность и защита"
  4. Прокручиваем вниз и находим раздел "Блокировать всплывающие окна". Снимаем галочку напротив, как на фото ниже.




Включить, или отключить расширение очень легко. Достаточно нажать на значок "Обезьянки" на панели браузера, сверху и выбрать режим "Enabled" -> Включено или "Disabled" -> Выключено.



Теперь, когда вы зайдете на страницу где нет кнопок социальных сетей, вы всегда сможете быстро поделиться ею со своими читателями, просто нажав:
Shift + G - для Google Plus,
Shift + F - для Facebook,
Shift + T - для Twitter.



Если вас интересует такое же расширение для Google Chrome, то я про него написал в посте Extension Social Networks Button (SNB)

                                                                                                                                                             

пятница, 20 апреля 2018 г.

Расширение SMD - social media downloader.

Давно собирался написать расширение, которое послужило бы хорошим помощником в загрузке фото и видео из социальных сетей, таких как Google+, Facebook, Twitter и конечно же Instagram

Мои требования:

  1. Одно расширение для фото и видео, и для всех сетей сразу.
  2. Легкость самого расширения. Вес - 4.28 Кб (из которых 4 Кб - картинка-иконка, остальные менее 100 строк js-кода) и отсутствие подключения сторонних библиотек (типа jQuery)
  3. Совместимость с другими расширениями (в частности Adblock Plus)
  4. Минимальные настройки для работы, загрузки

Требования к "железу"

  1. Браузер Google Chrome версии 64.0.3282 и выше. Думаю, что можно написать - любая, потому что более старые версии все равно не поддерживаются уже самими Google разработчиками.
  2. Операционная система Windows (32-bit or 64-bit). С другими не проверял.
Пользуюсь расширением уже третий месяц регулярно и полностью им доволен. Замечаний по работе от сотрудников компании, которая использует расширение с февраля, не поступало. На этом основании, я могу заключить, что с задачей справился полностью и теперь могу предложить его для свободного использования. Размещая его на gitHub - сайте проектов с открытым исходным кодом, я приглашаю вас использовать его безвозмездно, вносить свои предложения и изменения. Для излишне осторожных пользователей, я думаю, размещение в открытом доступе кода, послужит некоторой гарантией доверия. Теперь по порядку:

Установка


  1. Скачиваем расширение. Вы можете скачать расширение с сайта gitHub - smd-for-google-chrome
    .О том. как клонировать репозиторий с gitHub вы можете вспомнить пройдя по ссылке. Я рассказывал об этом в своем посте "Клонирование репозитория GitHub на компьютер"
    Или загрузить его на свой компьютер с моего Гугл Диска - SMD for Google Chrome on my Google Drive
    При скачивании с Гугл Диска, вы можете скачать сразу всю папку SMD-social-media-downloader себе на компьютер, для этого вам нужно сделать шаг назад по дереву папок на Диске. Или можете загрузить все по одному файлу в свою папку на компьютере. Если скачиваете целой папкой, то не забудьте ее распаковать в нужную папку. Скачивается в 7-zip.
  2. Идем во вкладку Расширения - Extensions (chrome://extensions/). В самом верху страницы справа, ставим галочку напротив пункта - Developer mode - Режим разработчика. И нажимаем на кнопку слева -> Load unpacked extension Загрузить неупакованное расширение. В открывшемся окне, выбираем папку с нашим расширением и нажимаем кнопку загрузки. После этого расширение добавится в панель.
    Более подробно о пошаговой установке расширения ( c картинками ) вы можете прочитать в моем посте посвященном расширению, которое позволяет поделиться статьей с любого сайта, даже если у него нет таких кнопок. Extension Social Networks Button (SNB).
  3. Иногда требуется разрешить браузеру открывать всплывающие окна.
    • В правом верхнем углу экрана нажмите на значок Настройки.
    • В нижней части страницы выберите Дополнительные.
    • В разделе "Конфиденциальность и безопасность" нажмите Настройки контента.
    • Выберите Всплывающие окна.
    • Я это делаю очень просто вот так как на картинках:




    • Один клик слева по замку -> По нижней строке выпадающего окна

Как скачать?


Google+

Фото

  1. Включить расширение на вкладке Extensions (chrome://extensions/) - поставить галочку рядом с ним
  2. Для скачивания фото из G+, фото открываем в новой вкладке (правая кнопка мышки -> открыть фото в новой вкладке). Перейти в новую вкладку и нажать Sift + A. Нажать вначалеSift и удерживая его A




  3. Щелкнуть правой кнопкой по фото и выбрать куда его сохранить





Видео

Работа с расширением G+V, разбираем по пунктам.

  1. Выбираем в ленте понравившееся видео и открываем его, как обычно во фрейме для просмотре видео - кликнув по нему левой кнопкой мыши. Этот шаг вы делаете как обычно при любом просмотре видео.Можно просто нажать на воспроизведение видео, чтобы оно открылось в специальном окне просмотре видео.
  2. Нажимаем на воспроизведение, как обычно и после этого зажимаем кнопку Shift + A и дважды кликаем правой кнопкой мыши




  3. Выбираем "Сохранить видео как..." и сохраняем в формате .mp4 в любую папку на вашем компьютере.

Facebook

  1. Видео открыть в отдельной вкладке. Для этого правая кнопка мышки на дату видео -> открыть фото в новой вкладке.
  2. Дождаться полной загрузки и нажать Sift + A
  3. Повторить 2-ой пункт.
  4. Нажать на значок загрузки в правом нижнем углу видео и выбрать папку для сохранения.

Более подробно...


  1. Находим понравившееся видео в ленте и нажимаем на дату публикации правой кнопкой мыши




  2. Выбираем -"Открыть видео в новой вкладке
  3. Запускаем видео и нажимаем Shift + A




  4. Видео откроется в Facebook для мобильных, как это видно на картинке выше.
  5. Повторно нажимаем кнопку Sift + A и теперь вы можете сохранить видео в формате .mp4 в любую папку на вашем компьютере




Можно просто перейти в отдельную вкладку видео, запустить его и дважды нажать Shift + A, но я захотел описать здесь все более подробно!

Twitter

Фото

Очень просто. Нажмите на любое фото, или группу фото прямо в ленте. Фото или группа фото, откроется во фрейме. Теперь нажмите сочетание Sift + A и фото в доступном для скачивания формате (.jpeg, .jpg, .png) откроется в новой вкладке. Скачиваете как обычно. правая кнопка мышки -> "сохранить как.."

Таким образом, вы сможете скачать любое фото или группу фото, прямо не отрываясь от просмотра, прокрутки ленты.

Видео

Нажать на пост с видео, чтобы нужное видео открылось во фрейме для просмотра и нажать Sift + A Теперь нужно просто запустить, то видео которое вы хотите скачать (Play) и все. Запускаем видео и в правом нижнем углу выбираем иконку загрузки видео. Нажимаем и сохраняем в любой папке в формате mp4

Более подробно...

  1. Нашли в ленте нужно видео и нажали на пустое место над видео в этом посте. На фото - где звездочка.




  2. После этого видео откроется в отдельном фрейме, вам нужно нажать Shift + A




  3. Произойдет загрузка мобильной версии этого видео в новой вкладке




  4. Теперь запускаем видео и вы увидете, что оно опять откроется в некоем фрейме




  5. Последний раз нажимаем сочетание Shift + A и после перезагрузки странички вы получите видео в удобном для скачивания формате.




  6. Нажимаете, как показано на рисунке выше и скачиваете себе на компьютер любое видео в формате .mp4

Еще один способ..
По шагам:
  1. Нашли в ленте понравившееся видео и нажали на значок время публикации, правой кнопкой мышки. Выбрали пункт - "Открыть в новой вкладке"




  2. Ниже на фото вы видете, как будет выглядеть видео открытое в отдельной вкладке до нажатия клавиши Sift + A



  3. Нажали клавишу Sift + A. Вкладка изменит свой вид. См фото ниже.




  4. Запускаем видео (кнопка по центру, как обычно) и нажимаем на значок в правом нижнем углу видео -> "Скачать". Откроется окно с выбором папки для сохранения. Обратите внимание, что видео вы сможете скачать теперь в формате .mp4




Вот и всё!
Если не считать открытия видео в отдельном окне, то все скачивание свелось к нажатию пары кнопок!
Более простого способа скачать blod - видео c Twitter сайта я не знаю.

Instagram

  1. Нажать на фото или видео, чтобы оно открылось во фрейме для просмотра
  2. Дождаться полной загрузки и нажать Sift + A
  3. В отдельной вкладке откроется видео или фото в доступном для скачивания формате.

Более подробно...

Самое простое что может быть - это скачивать с расширением фото или видео из Инстаграм. По порядку:

  1. Выбираем понравившееся видео или фото и кликаем по нему левой кнопкой мыши.
  2. Видео откроется в отдельном фрейме, как для обычного просмотра




  3. Нажимаем кнопку Sift + A на клавиатуре




  4. В правом нижнем углу видео появится стрелочка загрузки видео/Нажимаем на нее и сохраняем видео в любую папку на вашем компьютере, в формате .mp4
  5. Для фото все точно также, и скачать его вы сможете обычным способом, после открытия фото в новой вкладке, просто нажав на него правой кнопкой мышки -> сохранить как...
И конечно же я вам настоятельно рекомендую еще одно свое бесплатное расширение, для тех, кто часто делится чем - то в соц.сетях, ведет странички и группы - кнопки поделиться для любого сайта. Вы сможете поделиться любым сайтом в Facebook, Twitter, Google Plus, просто нажав сочетание клавиш. Extension Social Networks Button (SNB).                                                                                                                                                              

четверг, 19 апреля 2018 г.

Extension Social Networks Button (SNB).

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

Эту пробелу можно решить копированием ссылки, и пр., но это занимает слишком много времени. Для решения именно этой проблемы и было написано это расширение. Особенно полезно оно для тех, кто ведет страницы в соц сетях (SMM). По заказу нашего SMM-менеджера и сделано это расширение. При желании его можно дополнить и другими социальными сетями. Оно исправно работает уже пол года на всех последних версиях браузера Google Chrome.

Это расширение для браузера Google Chrome версии 40.0.2214 и более.

Скачать его можно с сайта gitHub - https://github.com/YaroslavW/snb
О том. как клонировать репозиторий с gitHub вы можете вспомнить пройдя по ссылке. Я рассказывал об этом в своем посте "Клонирование репозитория GitHub на компьютер"

Вы также можете скачать его с моего Google Drive

При скачивании с Гугл Диска, вы можете скачать сразу всю папку SNB себе на компьютер, для этого вам нужно сделать шаг назад по дереву папок на Диске. Или можете загрузить все по одному файлу в свою папку на компьютере. Если скачиваете целой папкой, то не забудьте ее распаковать в нужную папку. Скачивается в 7-zip.

Установка

  1. Скачиваем расширение в отдельную папку на вашем компьютере.
  2. Идем в раздел "Extensions" Google Chrome. Кликаем по Customize and control Google Chrome (три точки или штриха в правом верхнем углу панели браузера - 1) -> More Tools (2) ->Extensions (3)




  3. Отмечаем флажок "Developer Mode" (1) -> кликаем по "Load Unpacked" (2) и в открывшимся окне выбираем загруженную ранее папку. Нажимаем кнопку для загрузки (3)




  4. На панели браузера, справа, появился значок нашего расширения (1), а на панели ваших расширений, появилось само расширение с включенным флажком (2). Теперь расширение полностью готово к работе и не требует никаких дополнительных настроек. При необходимости отключить его вы можете передвинув этот флажок.




  5. Теперь, когда вы зайдете на страницу где нет кнопок социальных сетей, вы всегда сможете быстро поделиться ею со своими читателями, просто нажав Shift + G для Google Plus Shift + F для Facebook Shift + T для Twitter




Если вас интересует такое же расширение для Mozilla Firefox, то я про него написал в посте FireFox: SNB Social Neworks Buttons.                                                                                                                                                              

среда, 7 марта 2018 г.

Смена картинки при наведении курсора.

Плавная смена картинок при наведении курсора.

Весь код я рассказал здесь - Как изменить картинку при наведении на неё курсора, но получил несколько вопросов. Решил все собрать в одном месте. По шагам:
  1. Создаем новый пост и добавляем в него код HTML. Учтите, что image1.jpg - картинка, которая видна постоянно, а image2.jpg - та, которая будет появляться при наведении курсора
  2. <div class="animate2" style="margin-top: 100px;">
        <img class="first" height="" src="image2.jpg" width="100%" />
        <img class="second" height="" src="image1.jpg" width="100%" />
    </div>
    
  3. Теперь, где нибудь выше или ниже этого кода, прямо в вашем посте добавляем фото, которое будет видно постоянно - image1.jpg. Из всего добавленного кода, нас интересует только src нашей картинки. Копируем его и вставляем на место image1.jpg, внутри двойных кавычек
  4. Тоже самое проделываем во второй картинкой. После этого, код, который вы использовали для получения src картинок, можно полностью удалить.
  5. Идем в "Настройки" -> "Шаблоны+ ->"Продвинутые" ->"Добавить CSS" и вставляем код, котоый приведен ниже прям в поле отмеченное на втором фото






  6. .animate2{
    
      position:relative;
    
      margin:0 auto;/* устанваливаем блок div по центру страницы*/
    
      width:480px; /* Ширина */
    
      height: 360px;  /* Высота */                
    
    }
    
    .animate2 img {
    
      position:absolute; /* абсолютное позиционирование*/
    
      left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
    
      top: 0; /* выравниваем картинки по левому верхнему углу div-а */  
    
    }
    .animate2 img.first { /* первая картинка полностью прозрачная */
    
      opacity:0;
    
      filter:alpha (opacity=0);
    
    }
    
    .animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */
    
      opacity:1;
    
      filter:alpha (opacity=100);
    
    }
    
    .animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */
    
      opacity:0;
    
      filter:alpha (opacity=0);
         -moz-transition: all 3s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
    
        -webkit-transition: all 3s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
    
        -o-transition: all 3s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
    
        transition: all 3s ease-in-out; 
    }
    /*--для всех браузеров---*/
    .animate:not(:hover) img.second, .animate img.second:not(:hover) {
      
      
      -moz-transition: all 3s ease;
      -wedkit-transition: all 3s ease;
      -o-transition: all 3s ease;
      transition: all 3s ease;
    }
    /*---замедление возрата к началу--*/
    .animate2:not(:hover) img.first:not(:hover){
      opacity:0;
      filter: alpha (opacity=100);
       filter: alpha (opacity=0);
      -moz-transition: all 3s ease;
      -webkit-transition: all 3s ease;
      -o-transition: all 3s ease;
      transition: all 3s ease;
    }
    .animate2:not(:hover) img.second, .animate2 img.second:not(:hover) {
      opacity:1;
      filter: alpha (opacity=0);
      -moz-transition: all 3s ease;
      -webkit-transition: all 3s ease;
      -o-transition: all 3s ease;
      transition: all 3s ease;
    }
    


    Не забудьте сохранить изменения!





                                                                                                                                                             


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