Спасибо всем, кто участвовал в опросе.
Верный вариант - специфика Webpack.
Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.
#JS #React #Webpack
Верный вариант - специфика Webpack.
Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.
#JS #React #Webpack
jQuery - лучшие практики:
- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь
- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)
- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).
- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.
#JS #jQuery #best_practices
- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь
- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)
- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).
- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.
#JS #jQuery #best_practices
jQuery - лучшие практики, часть 2:
- События:
1. Использовать только один обработчик события document.ready, а не распихивать код по нескольким.
2. Описывать функции обработки событий вне обработчика, передавая ему только имя функции. Выгода - читабельность, легкость отладки.
3. Используя jQuery, стоит всегда назначать события через него - без инлайн-кода. Выгода - консистентность.
- Анимация:
1. Лучше предустановленные значения скорости анимации, чем кастомные.
- Плагины:
1. Хорошо задокументированные популярные плагины предпочтительнее - сообщество следит за багами и уязвимостями.
- Чейнинг:
1. Чейнинг методов предпочтительнее создания новых переменных или селекторов. Для легкости чтения звенья лучше разносить по строкам. В длинных цепочках можно кэшировать промежуточные объекты.
- Прочее:
1. Для передачи нескольких однотипных параметров лучше не вызывать метод несколько раз, а передать параметры литералом объекта:
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
2. Не стоит писать CSS прямо в jQuery, вместо этого лучше определить правило в таблице стилей и передавать его элементу.
Warning! Часть инфы может быть неактуальной для новых версий jQuery.
#JS #jQuery #best_practices
- События:
1. Использовать только один обработчик события document.ready, а не распихивать код по нескольким.
2. Описывать функции обработки событий вне обработчика, передавая ему только имя функции. Выгода - читабельность, легкость отладки.
3. Используя jQuery, стоит всегда назначать события через него - без инлайн-кода. Выгода - консистентность.
- Анимация:
1. Лучше предустановленные значения скорости анимации, чем кастомные.
- Плагины:
1. Хорошо задокументированные популярные плагины предпочтительнее - сообщество следит за багами и уязвимостями.
- Чейнинг:
1. Чейнинг методов предпочтительнее создания новых переменных или селекторов. Для легкости чтения звенья лучше разносить по строкам. В длинных цепочках можно кэшировать промежуточные объекты.
- Прочее:
1. Для передачи нескольких однотипных параметров лучше не вызывать метод несколько раз, а передать параметры литералом объекта:
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
2. Не стоит писать CSS прямо в jQuery, вместо этого лучше определить правило в таблице стилей и передавать его элементу.
Warning! Часть инфы может быть неактуальной для новых версий jQuery.
#JS #jQuery #best_practices
Полезные практики в React:
- Сократить код обращения к this.state можно, пользуясь деструктуризацией:
const { firstState, secondState } = this.state
- Вынести за пределы компонента логику коллебка можно, используя функцию высшего порядка:
const handler = itemToFind => item => item.title.includes(itemTiFind)
Здесь функция handler возвращает функцию, которая передается, например, в map и используется для фильтрации.
#React #JS
- Сократить код обращения к this.state можно, пользуясь деструктуризацией:
const { firstState, secondState } = this.state
- Вынести за пределы компонента логику коллебка можно, используя функцию высшего порядка:
const handler = itemToFind => item => item.title.includes(itemTiFind)
Здесь функция handler возвращает функцию, которая передается, например, в map и используется для фильтрации.
#React #JS
Особенности C#
- В этом языке переменные можно открывать как привычным var, так и значением типа: int, float, char...
- Прежде чем использовать, например, вывод в консоль, нужно включить в файл класс содержащий метод, как делается в C или Go:
using System;
...код классов
System.Console.WriteLine
- Нельзя в C# просто проверять значение переменной в условии:
int a = 4;
if(a) ... // не сработает!
Чтобы код работал, нужно задать связанную булевую переменную:
bool b = a == 4;
Также булевым присваиваются значения логических сравнений:
bool result = a <= b; // переменная result содержит результат сравнения.
- В C# нет оператора строго равенства, aka ===, так как это язык со строгой типизацией и в таком операторе нет необходимости.
- Массивы открываются с помощью кострукции:
тип_переменной[] = { ... }.
Есть и другие способы - например, определение пустого массива на n элементов.
- Массивы C# не динамические. Аналог динамических массивов из JS - тип list. Пример создания листа:
List<int> nums = new List<int>()
- Аналог объекта ключей-значений из JS в C# - это словарь.
Словари создаются примерно так же, как листы, но принимают два аргумента типов - для ключа и для значения.
#Сишарп
- В этом языке переменные можно открывать как привычным var, так и значением типа: int, float, char...
- Прежде чем использовать, например, вывод в консоль, нужно включить в файл класс содержащий метод, как делается в C или Go:
using System;
...код классов
System.Console.WriteLine
- Нельзя в C# просто проверять значение переменной в условии:
int a = 4;
if(a) ... // не сработает!
Чтобы код работал, нужно задать связанную булевую переменную:
bool b = a == 4;
Также булевым присваиваются значения логических сравнений:
bool result = a <= b; // переменная result содержит результат сравнения.
- В C# нет оператора строго равенства, aka ===, так как это язык со строгой типизацией и в таком операторе нет необходимости.
- Массивы открываются с помощью кострукции:
тип_переменной[] = { ... }.
Есть и другие способы - например, определение пустого массива на n элементов.
- Массивы C# не динамические. Аналог динамических массивов из JS - тип list. Пример создания листа:
List<int> nums = new List<int>()
- Аналог объекта ключей-значений из JS в C# - это словарь.
Словари создаются примерно так же, как листы, но принимают два аргумента типов - для ключа и для значения.
#Сишарп
Командная строка - памятка по навигации:
- mkdir: создать папку
- touch: создать файл
- ls: показать содержимое директории
- cd some-path - переместиться в указанную папку
- cd .. - подняться на уровень выше
Продвинутое:
- Создать вложенную структуру папок: mkdir -p some-folder/{one,two,three}. Важно: между аргументами в {} не должно быть пробелов!
#bash
- mkdir: создать папку
- touch: создать файл
- ls: показать содержимое директории
- cd some-path - переместиться в указанную папку
- cd .. - подняться на уровень выше
Продвинутое:
- Создать вложенную структуру папок: mkdir -p some-folder/{one,two,three}. Важно: между аргументами в {} не должно быть пробелов!
#bash
CSS по БЭМ - опыт, плюсы и минусы:
+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.
- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33
#CSS #BEM
+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.
- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33
#CSS #BEM
Gist
createBlock.js
GitHub Gist: instantly share code, notes, and snippets.
Bash-скрипты
В работе с командной строкой программист зачастую должен выполнять одни и те же команды - например, при разворачивании нового проекта. Автоматизировать рутину помогут консольные скрипты. Я пользуюсь Git Bash, речь пойдёт о нем.
1. Создаем файл скрипта, например, project.sh.
2. Пишем в первой строке:
#!/bin/bash
3. Перечисляем построчно необходимые команды. Например:
touch gulpfile.js .gitignore
mkdir -p src/{scss,js,img,fonts} dest
4. Запускаем скрипт в консоли:
./project.sh
Bash - полноценная среда программирования с условными выражениями и переменными, но в целом, чтобы не заморачиваться, можно ограничиться просто перечислением команд.
#bash
В работе с командной строкой программист зачастую должен выполнять одни и те же команды - например, при разворачивании нового проекта. Автоматизировать рутину помогут консольные скрипты. Я пользуюсь Git Bash, речь пойдёт о нем.
1. Создаем файл скрипта, например, project.sh.
2. Пишем в первой строке:
#!/bin/bash
3. Перечисляем построчно необходимые команды. Например:
touch gulpfile.js .gitignore
mkdir -p src/{scss,js,img,fonts} dest
4. Запускаем скрипт в консоли:
./project.sh
Bash - полноценная среда программирования с условными выражениями и переменными, но в целом, чтобы не заморачиваться, можно ограничиться просто перечислением команд.
#bash
Первая работа в IT: офис vs удаленка
Вопрос, с какого формата работы начать, регулярно всплывает в конференциях. Сегодня на него дали исчерпывающий ответ: лучше - в офис.
И вот почему:
1. Работу джуниором на удаленке найти будет тяжелее. Обычно на удаленке возится с неопытными не хотят.
2. Если до этого не работал, то очень полезно побыть в офисе хотя бы годик чтобы увидеть как в целом работает производство, как налажены процессы и тд. А лучше в разных офисах компаний разного уровня.
3. Обучение в офисе проходит намного быстрее. Можно подойти к чуваку рядом и попросить помочь. Сидя в опенспейсе будешь слышать как интервью по скайпу проходят десятки людей, какие вопросы задают и какие ответы ожидаются.
4. Есть возможность общаться, заводить контакты и обмениваться опытом. Во время такого общения обсуждают инсайдерскую инфу, которую от незнакомого человека не получить.
5. Будут давать дельные и не очень советы по поводу слабых мест и как их пофиксить.
6. Вполне возможно менторство. Во многих компаниях оно реализовано из рук вон плохо, но в некоторых - хорошо.
7. Будет возможность узнать от людей на параллельных проектах как дела у них и как поставлены процессы.
8. Компания может оплатить курсы английского.
9. Нет необходимости продавать себя непосредственно заказчику.
10. Качество проектов - выше, чем на фрилансе.
11. На галере вас, вероятно, захотят продать как миддла. Для этого дадут материалы и прогонят перед реальным собесом с клиентом через 3 или 4 фейковых с сотрудниками компании, с фидбеком от опытных сотрудников. Это тоже очень круто.
12. В компании вы можете обсудить и составить план обучения и для следующего повышения надо пройти собес где показать что реально что-то учили. И это стимулирует изучать новое.
12,5. Стоит добавить что работая из дому, часто бывают проблемы с прокрастинацией у не очень опытных ребят.
Автор перечня: @safewordhello
#карьера
Вопрос, с какого формата работы начать, регулярно всплывает в конференциях. Сегодня на него дали исчерпывающий ответ: лучше - в офис.
И вот почему:
1. Работу джуниором на удаленке найти будет тяжелее. Обычно на удаленке возится с неопытными не хотят.
2. Если до этого не работал, то очень полезно побыть в офисе хотя бы годик чтобы увидеть как в целом работает производство, как налажены процессы и тд. А лучше в разных офисах компаний разного уровня.
3. Обучение в офисе проходит намного быстрее. Можно подойти к чуваку рядом и попросить помочь. Сидя в опенспейсе будешь слышать как интервью по скайпу проходят десятки людей, какие вопросы задают и какие ответы ожидаются.
4. Есть возможность общаться, заводить контакты и обмениваться опытом. Во время такого общения обсуждают инсайдерскую инфу, которую от незнакомого человека не получить.
5. Будут давать дельные и не очень советы по поводу слабых мест и как их пофиксить.
6. Вполне возможно менторство. Во многих компаниях оно реализовано из рук вон плохо, но в некоторых - хорошо.
7. Будет возможность узнать от людей на параллельных проектах как дела у них и как поставлены процессы.
8. Компания может оплатить курсы английского.
9. Нет необходимости продавать себя непосредственно заказчику.
10. Качество проектов - выше, чем на фрилансе.
11. На галере вас, вероятно, захотят продать как миддла. Для этого дадут материалы и прогонят перед реальным собесом с клиентом через 3 или 4 фейковых с сотрудниками компании, с фидбеком от опытных сотрудников. Это тоже очень круто.
12. В компании вы можете обсудить и составить план обучения и для следующего повышения надо пройти собес где показать что реально что-то учили. И это стимулирует изучать новое.
12,5. Стоит добавить что работая из дому, часто бывают проблемы с прокрастинацией у не очень опытных ребят.
Автор перечня: @safewordhello
#карьера
Работа браузера: терминология
Прослойка между считыванием документов на сервере и отрисовкой картинки в окне браузера содержит термины и операции, которые полезно знать - если не для практических микро-оптимизаций, смысл которых на новых движках теряется, то ради теоретического кругозора.
Некоторые термины:
- CSSOM: то же, что DOM, но для CSS.
- Render Tree: дерево объектов, генерируемое браузером на основе DOM и CSSOM.
- Объект рендеринга: отдельный "лист" дерева рендеринга. Содержит DOM-элементы, сгенерированные для них стили, а также строки текста. Не включает невидимые элементы (display: none и др.).
- Layout: позиционирование элементов на странице.
- Flow: поток. По смыслу приблизительно то же, что потоки в компиляторах кода (движок браузера и есть среда выполнения).
- Painting: собственно отрисовка дерево рендеринга после layout-а.
#браузеры #рендеринг
Прослойка между считыванием документов на сервере и отрисовкой картинки в окне браузера содержит термины и операции, которые полезно знать - если не для практических микро-оптимизаций, смысл которых на новых движках теряется, то ради теоретического кругозора.
Некоторые термины:
- CSSOM: то же, что DOM, но для CSS.
- Render Tree: дерево объектов, генерируемое браузером на основе DOM и CSSOM.
- Объект рендеринга: отдельный "лист" дерева рендеринга. Содержит DOM-элементы, сгенерированные для них стили, а также строки текста. Не включает невидимые элементы (display: none и др.).
- Layout: позиционирование элементов на странице.
- Flow: поток. По смыслу приблизительно то же, что потоки в компиляторах кода (движок браузера и есть среда выполнения).
- Painting: собственно отрисовка дерево рендеринга после layout-а.
#браузеры #рендеринг
Работа браузера: рендеринг в деталях
Как процесс, рендеринг выглядит так:
1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.
На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.
Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.
Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.
На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.
Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..
#браузеры #рендеринг #React
Как процесс, рендеринг выглядит так:
1. Браузер формирует из HTML DOM-дерево...
2. Затем обрабатывает CSS и создает CSSOM.
3. На их основе создается Rendering Tree.
4. Вычисляется положение элементов на странице.
5. Происходит painting.
На этом ничего не заканчивается. Рендеринг - динамическая операция: некоторые шаги повторяются вновь и вновь, меняя структуру документа.
Некоторые операции более затратны для браузера (layout), другие - менее (repainting, или перерисовка свойств, не затрагивающих положения элемента на странице). Знания этих деталей могут помочь с микро-оптимизациями. Впрочем, современные движки хорошо оптимизируют рендеринг автоматически - существенного выигрыша в производительности не будет.
Одна из механик автоматической оптимизации - кэширование repainting-а и relayout-а: бразуер по возможности выполняет потоки команд, входящих в эти операции, едиными блоками.
На этой механке построено преимущество реактивных фреймворков. Реакт строит облегченный Virtual DOM, не содержащий ничего лишнего, тогда как "родной" DOM напичкан неиспользуемыми браузерными правилами и т.п. События на странице затрагивают только связаные с ними компоненты, остальное виртуальное дерево остается нетронутым.
Неизбежен, однако, риторический вопрос: почему сайты на Реакте такие тормозутые?..
#браузеры #рендеринг #React
Консоль - базовая теория:
- Терминал - это "эмулятор физического терминала", то есть, устройства ввода.
- Командная оболочка - не синоним терминала: терминал открывает оболочку внутри себя.
- Схема работы с консолью:
Пользователь -> физический терминал -> [виртуальный терминал -> командный интерпретатор -> программы]
В скобки взяты части unix-based OS.
- REPL - синоним командной оболочки, расшифровывается как Read-Eval-Print-Loop и описывает интерактивную сессию с пользователем.
- Команда pwd выводит путь к текущей директории и рашифровывается соответственно: "print working directory".
- $ pwd и $ echo $PWD работают схоже.
- Выражение через одну точку -
./hello
- означает в unix-системах, буквально, "каталог в текущей директории". Заметно сходство с модулями в Node: используется тот же принцип работы с файловой системой.
#bash #unix
- Терминал - это "эмулятор физического терминала", то есть, устройства ввода.
- Командная оболочка - не синоним терминала: терминал открывает оболочку внутри себя.
- Схема работы с консолью:
Пользователь -> физический терминал -> [виртуальный терминал -> командный интерпретатор -> программы]
В скобки взяты части unix-based OS.
- REPL - синоним командной оболочки, расшифровывается как Read-Eval-Print-Loop и описывает интерактивную сессию с пользователем.
- Команда pwd выводит путь к текущей директории и рашифровывается соответственно: "print working directory".
- $ pwd и $ echo $PWD работают схоже.
- Выражение через одну точку -
./hello
- означает в unix-системах, буквально, "каталог в текущей директории". Заметно сходство с модулями в Node: используется тот же принцип работы с файловой системой.
#bash #unix
Консоль - продолжение:
- Знак "~" - шорткат для абсолютного пути к домашнему каталогу. С ним можно быстро перейти к любому подкаталогу домашней директории из любого места:
cd ~/MyDirectory
- Команда ls принимает название директории. Так можно рассмотреть каталог, не переходя в него.
- CLI расшифровывается как command line interface, или интерфейс командной строки.
- Команда ls c флагом -a покажет скрытые файлы.
- ...c флагом -l покажет дополнительное инфо по файлам.
- Флаги можно миксовать:
ls -la или -l -a
- Как правило, флаги указываются до аргументов:
ls -la MyFolder
- Команда man имя-команды выведет справку по команде - алиасы, флаги и все прочее. Отмечу, это очень удобно!
- Для навигации по мануалу используют:
- f (forward) - вперед,
- b (backward) - назад,
- q (quit) - выход
Это не флаги, а кнопки.
#bash #unix
- Знак "~" - шорткат для абсолютного пути к домашнему каталогу. С ним можно быстро перейти к любому подкаталогу домашней директории из любого места:
cd ~/MyDirectory
- Команда ls принимает название директории. Так можно рассмотреть каталог, не переходя в него.
- CLI расшифровывается как command line interface, или интерфейс командной строки.
- Команда ls c флагом -a покажет скрытые файлы.
- ...c флагом -l покажет дополнительное инфо по файлам.
- Флаги можно миксовать:
ls -la или -l -a
- Как правило, флаги указываются до аргументов:
ls -la MyFolder
- Команда man имя-команды выведет справку по команде - алиасы, флаги и все прочее. Отмечу, это очень удобно!
- Для навигации по мануалу используют:
- f (forward) - вперед,
- b (backward) - назад,
- q (quit) - выход
Это не флаги, а кнопки.
#bash #unix
Консоль, часть III:
- Почти всегда флаги имеют короткую и длинные версии:
-d === —directory
-H === —derefernce-command-line
Разница в областях применения. Для команд в консоли удобнее применять короткие флаги, для bash-скриптов - более наглядные длинные.
- Из предыдущего пункта вытекает: понять смысл сокращенных флагов несложно и без мануала - часто они повторяют первые буквы своих полных версий. Pre-intermediate хватит за глаза.
- Некоторые опции принимают параметры, как функции - аргументы. Это выглядит, например, так:
$ command -c=parameter
$ commend -c parameter
Специфику таких опций всегда можно найти с помощью RTFM. :)
- Пример сложной команды:
ls -lS --time-style=long-iso /var
Что здесь происходит:
1. Задана команда ls.
2. Ей присвоены флаги:
-l
-S - сортировка с тонкой настройкой
—time-style - параметр -S, в свою очередь, принявший параметр "long-iso" (без кавычек!).
3. В конце передан путь к директории.
Как результат - файлы, отсортированные по размеру, с подробным выводом и специфичным форматированием времени.
P.S.: спасибо всем за фидбеки по ошибке с CLI. Вы супер! ✌️
#bash #shell
- Почти всегда флаги имеют короткую и длинные версии:
-d === —directory
-H === —derefernce-command-line
Разница в областях применения. Для команд в консоли удобнее применять короткие флаги, для bash-скриптов - более наглядные длинные.
- Из предыдущего пункта вытекает: понять смысл сокращенных флагов несложно и без мануала - часто они повторяют первые буквы своих полных версий. Pre-intermediate хватит за глаза.
- Некоторые опции принимают параметры, как функции - аргументы. Это выглядит, например, так:
$ command -c=parameter
$ commend -c parameter
Специфику таких опций всегда можно найти с помощью RTFM. :)
- Пример сложной команды:
ls -lS --time-style=long-iso /var
Что здесь происходит:
1. Задана команда ls.
2. Ей присвоены флаги:
-l
-S - сортировка с тонкой настройкой
—time-style - параметр -S, в свою очередь, принявший параметр "long-iso" (без кавычек!).
3. В конце передан путь к директории.
Как результат - файлы, отсортированные по размеру, с подробным выводом и специфичным форматированием времени.
P.S.: спасибо всем за фидбеки по ошибке с CLI. Вы супер! ✌️
#bash #shell
Консоль, часть VI:
- Команда cat [file] позволяет открыть и читать файл.
- Команда head [file] выводит первые десять строк файла. Флаг -n позволяет настраивать это значение:
head -n 2 file
...выведет две первые строки в файле.
- Команда tail выведет последние строки в файле. Ею же можно создать динамический вывод лога:
tail -f file
...будет выводить содержимое файла по мере его наполнения.
- Команда less - "пейджер" для чтения файлов. Загружает в память только видимую на экране часть в режиме рид-онли, поэтому работает быстрее cat.
- В less есть команда /. Она служит для поиска по файлу. Навигация по поиску:
f - вперед на страницу
b - назад на страницу
n - предыдущий результат поиска
N - следующий
#bash
- Команда cat [file] позволяет открыть и читать файл.
- Команда head [file] выводит первые десять строк файла. Флаг -n позволяет настраивать это значение:
head -n 2 file
...выведет две первые строки в файле.
- Команда tail выведет последние строки в файле. Ею же можно создать динамический вывод лога:
tail -f file
...будет выводить содержимое файла по мере его наполнения.
- Команда less - "пейджер" для чтения файлов. Загружает в память только видимую на экране часть в режиме рид-онли, поэтому работает быстрее cat.
- В less есть команда /. Она служит для поиска по файлу. Навигация по поиску:
f - вперед на страницу
b - назад на страницу
n - предыдущий результат поиска
N - следующий
#bash
UNIX - факты о файловой системе:
1. В UNIX только одно файловое дерево. Windows создает их несколько - на каждый физический или логический носитель.
2. Домашняя категория - это не корень системы, а директория пользователя. Из неё можно попасть в корень, перейдя на два уроня ниже.
3. В отличие от Windows, здесь расширения файлов - часть их имен.
4. Регистр имеет значение!
#Unix, #bash
1. В UNIX только одно файловое дерево. Windows создает их несколько - на каждый физический или логический носитель.
2. Домашняя категория - это не корень системы, а директория пользователя. Из неё можно попасть в корень, перейдя на два уроня ниже.
3. В отличие от Windows, здесь расширения файлов - часть их имен.
4. Регистр имеет значение!
#Unix, #bash
JS: любопытные решения задач
- Найти сумму чисел от 1 до n короче всего не через цикл или рекурсию, а по уравнению Гаусса:
lastNumber * (lastNumber + 1) / 2;
- Самый короткий способ найти количество цифр в числе:
String(number).length;
- Кратчайший поиск индекса последнего вхождения числа в массив:
array.lastIndexOf(number);
#JS
- Найти сумму чисел от 1 до n короче всего не через цикл или рекурсию, а по уравнению Гаусса:
lastNumber * (lastNumber + 1) / 2;
- Самый короткий способ найти количество цифр в числе:
String(number).length;
- Кратчайший поиск индекса последнего вхождения числа в массив:
array.lastIndexOf(number);
#JS
Английский язык:
- Основная черта Present Continuous Time - настоящего текущего времени - в том, что в нем используются одновременно вспомогательный глагол и основной и окончанием -ing:
...I am swimming - сейчас я плыву;
- Present Simple - простое настоящее время - служит для указания регулярных действий:
...I code my pet projects twice a week.
- Структура предложения в Present Simple:
подлежащее + глагол + остальные части предложения.
- Для Present Simple характерны слова-маркеры, указывающие на периодичность действия: twice a week, everyday, never и т.д.
#english #grammar
- Основная черта Present Continuous Time - настоящего текущего времени - в том, что в нем используются одновременно вспомогательный глагол и основной и окончанием -ing:
...I am swimming - сейчас я плыву;
- Present Simple - простое настоящее время - служит для указания регулярных действий:
...I code my pet projects twice a week.
- Структура предложения в Present Simple:
подлежащее + глагол + остальные части предложения.
- Для Present Simple характерны слова-маркеры, указывающие на периодичность действия: twice a week, everyday, never и т.д.
#english #grammar
Английский язык, part two:
Для утвердительных предложений во втором лице и единственном числе в Present Simple есть простое правило с одним исключением. Для забавы проиллюстрирую на псевдокоде:
if( verb (глагол) ends with -o, -s, -sh, -ch, -tch, -x, -z ) {
verb += es;
} else if (verb ends with a consonant (согласная) + y) {
verb += ies;
} else {
verb += s;
}
Словом, исключения из правила "добавь -s" в simple present делаются для:
- гласной -o и ряда шипящих и звонких звуков,
- сочетания "согласная + y".
Для примера:
- He makes great code on Mondays and bad on else days;
- It plays sad music every morning;
- She flies at Moscow every year;
#english #present_simple #grammar
Для утвердительных предложений во втором лице и единственном числе в Present Simple есть простое правило с одним исключением. Для забавы проиллюстрирую на псевдокоде:
if( verb (глагол) ends with -o, -s, -sh, -ch, -tch, -x, -z ) {
verb += es;
} else if (verb ends with a consonant (согласная) + y) {
verb += ies;
} else {
verb += s;
}
Словом, исключения из правила "добавь -s" в simple present делаются для:
- гласной -o и ряда шипящих и звонких звуков,
- сочетания "согласная + y".
Для примера:
- He makes great code on Mondays and bad on else days;
- It plays sad music every morning;
- She flies at Moscow every year;
#english #present_simple #grammar
Английский язык, part three:
- Отрицания в present simple строятся так:
Подлежащее + don't / doesn't + сказуемое и все остальное.
Например:
"I don't need to code backend today" - сегодня мне не нужно кодить бэкенд.
- Выражения don't и doesn's употребляются по правилу:
- I/You/We/They - don't
- He/She/It - doesn'n
"She does not commit anything" - она ничего не коммитит.
- В выпросительных предложениях Do/Does избавляются от not и перемещаются в начало предложения:
"Do you listen "Radio JS?" - cлушаешь "Радио JS"?
- В Present Simple для I//You/We/They ничего не добавляем к глаголу:
"I like cherry ice cream".
- Для запоминания правил удобно деление:
He/she/it || anything else
Можно произность как "хишиит" (почти как кришнаит).
#english #present_simple #grammar
- Отрицания в present simple строятся так:
Подлежащее + don't / doesn't + сказуемое и все остальное.
Например:
"I don't need to code backend today" - сегодня мне не нужно кодить бэкенд.
- Выражения don't и doesn's употребляются по правилу:
- I/You/We/They - don't
- He/She/It - doesn'n
"She does not commit anything" - она ничего не коммитит.
- В выпросительных предложениях Do/Does избавляются от not и перемещаются в начало предложения:
"Do you listen "Radio JS?" - cлушаешь "Радио JS"?
- В Present Simple для I//You/We/They ничего не добавляем к глаголу:
"I like cherry ice cream".
- Для запоминания правил удобно деление:
He/she/it || anything else
Можно произность как "хишиит" (почти как кришнаит).
#english #present_simple #grammar
Английский язык, part four:
- Have got / has got - оборот, употребляемый в Present Simple, когда говорим:
1. О внешности: i have got yellow eyes.
2. О принадлежащих вещах: we have got a health potion.
3. О болезнях: he has got a stomachache.
Здесь же применяется правило "хишиит": говоря "he", употребляем "has".
- Can и may - глаголы, смысл которых - обозначать возможность:
- can - физическая возможность, вероятность;
- may - возможность "юридическая", то есть, о которой мы просим.
Так, например, "may I join your party?" будет грамотнее, чем "can I join...". "You may cast this spells" будет означать разрешение, "you can..." - констатацию.
А еще can - Это банка :)
- would like - выражение, которое обозначает предпочтения или желания:
"I would like to read to read this React Handbook";
"Would you like a cup of get the fuck out?" >:D
"He wouldn't like to use jQuery because he hates it"
#english #present_simple #grammar
- Have got / has got - оборот, употребляемый в Present Simple, когда говорим:
1. О внешности: i have got yellow eyes.
2. О принадлежащих вещах: we have got a health potion.
3. О болезнях: he has got a stomachache.
Здесь же применяется правило "хишиит": говоря "he", употребляем "has".
- Can и may - глаголы, смысл которых - обозначать возможность:
- can - физическая возможность, вероятность;
- may - возможность "юридическая", то есть, о которой мы просим.
Так, например, "may I join your party?" будет грамотнее, чем "can I join...". "You may cast this spells" будет означать разрешение, "you can..." - констатацию.
А еще can - Это банка :)
- would like - выражение, которое обозначает предпочтения или желания:
"I would like to read to read this React Handbook";
"Would you like a cup of get the fuck out?" >:D
"He wouldn't like to use jQuery because he hates it"
#english #present_simple #grammar