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
Английский язык, part five:
Неопределенные артикли
- Артикль "a" произошел от слова "one". Из этого вытекает правило: он употребляется только:
- с исчисляемыми существительными,
- в единственном числе.
Его разновидность "an" употребляется для существительных, начинающихся с гласной буквы.
- Другие правила употребления a:
- указание на неуникальный экземпляр какого-то предмета:
"a pen" - обычная ручка, "the pen" - конкретно та ручка с микки маусом;
- первое упоминание предмета в речи (во второй раз - уже the):
"I see a white rabbit. The rabbit is dead";
- указание принадлежности человека к какой-либо группе или профессии:
"He is a programmer".
- Артикль "the" употребляется, если:
- предмет уже употреблен в речи (см. пример с дохлым зайцем);
- речь идёт об уникальном предмете - например, планета Земля или единственный на всю игру уник в MMО;
- речь о конкретном предмете в текущем контексте: "look at the sword in the rock";
- речь о неисчисляемом конкретном предмете.
- Артикли НЕ употребляются, когда:
- речь о концепции, чем-тов целом, а не конкретном проявлении: "Math is hard", "codres are clever";
- речь о временах года, днях, неделях и т.д. в общем (не о конкретных).
#english #articles #grammar
Неопределенные артикли
- Артикль "a" произошел от слова "one". Из этого вытекает правило: он употребляется только:
- с исчисляемыми существительными,
- в единственном числе.
Его разновидность "an" употребляется для существительных, начинающихся с гласной буквы.
- Другие правила употребления a:
- указание на неуникальный экземпляр какого-то предмета:
"a pen" - обычная ручка, "the pen" - конкретно та ручка с микки маусом;
- первое упоминание предмета в речи (во второй раз - уже the):
"I see a white rabbit. The rabbit is dead";
- указание принадлежности человека к какой-либо группе или профессии:
"He is a programmer".
- Артикль "the" употребляется, если:
- предмет уже употреблен в речи (см. пример с дохлым зайцем);
- речь идёт об уникальном предмете - например, планета Земля или единственный на всю игру уник в MMО;
- речь о конкретном предмете в текущем контексте: "look at the sword in the rock";
- речь о неисчисляемом конкретном предмете.
- Артикли НЕ употребляются, когда:
- речь о концепции, чем-тов целом, а не конкретном проявлении: "Math is hard", "codres are clever";
- речь о временах года, днях, неделях и т.д. в общем (не о конкретных).
#english #articles #grammar
Английский язык, part six:
Некоторые разговорные выражения, которые мне по вкусу. Пригодятся на работе и в непринужденной беседе.
- In a way: "в каком-то смысле";
- Deal!: "по рукам, идёт!"
- I'm afraid so: "боюсь, что так"
- Not a bit: "ничуть"
- Most unlikely: "вряд ли"
- Quite so: "в целом верно"
- I couldn't catch the last word: "не уловил последнее слово"
- It's new for me: "для меня это в новинку"
- So that's there the troule lies!: "так вот оно что!"
- And so on and so forth: "и так далее"
- First of all: "прежде всего"
- Such as: "например"
Бонус:
- Are you nuts? "поехал штоле?"
- Don't give a fuck: "да мне похер"
- Let's beat shit out (someone): "пойдем-ка наваляем (кому-то)"
#english #лексика
Некоторые разговорные выражения, которые мне по вкусу. Пригодятся на работе и в непринужденной беседе.
- In a way: "в каком-то смысле";
- Deal!: "по рукам, идёт!"
- I'm afraid so: "боюсь, что так"
- Not a bit: "ничуть"
- Most unlikely: "вряд ли"
- Quite so: "в целом верно"
- I couldn't catch the last word: "не уловил последнее слово"
- It's new for me: "для меня это в новинку"
- So that's there the troule lies!: "так вот оно что!"
- And so on and so forth: "и так далее"
- First of all: "прежде всего"
- Such as: "например"
Бонус:
- Are you nuts? "поехал штоле?"
- Don't give a fuck: "да мне похер"
- Let's beat shit out (someone): "пойдем-ка наваляем (кому-то)"
#english #лексика
Английский язык, part seven:
This & that
Как и в языках программирования, в английском есть слово this - а еще похожее на него that. Различаются они примерно как наши "это" и "то", но есть нюансы.
Определяющее различие - принцип отдаления:
- This используют, чтобы указать на что-то близкое - как в пространстве, так во времени и даже для эмоциональной дистанции.
- That - наоборот.
"May I look at that library?" - мог бы я взглянуть на ту библиотеку (которую мы ранее обсуждали)?
Just look at this code!" - глянь только на этот код!
This - сейчас, этот, текущий момент, рядом, о человеке.
That - прошлое (даже ближайшее), тот, далеко, о вещи.
У this и that есть форма множественного числа:
This == These;
That == Those;
This и that используются в расхожих выражениях. That, пожалуй, чаще:
"That's it, the code is working now" - ну все, (этот) код (сейчас) работает.
"That's OK";
"That's the point"
и т.д.
#english #this
This & that
Как и в языках программирования, в английском есть слово this - а еще похожее на него that. Различаются они примерно как наши "это" и "то", но есть нюансы.
Определяющее различие - принцип отдаления:
- This используют, чтобы указать на что-то близкое - как в пространстве, так во времени и даже для эмоциональной дистанции.
- That - наоборот.
"May I look at that library?" - мог бы я взглянуть на ту библиотеку (которую мы ранее обсуждали)?
Just look at this code!" - глянь только на этот код!
This - сейчас, этот, текущий момент, рядом, о человеке.
That - прошлое (даже ближайшее), тот, далеко, о вещи.
У this и that есть форма множественного числа:
This == These;
That == Those;
This и that используются в расхожих выражениях. That, пожалуй, чаще:
"That's it, the code is working now" - ну все, (этот) код (сейчас) работает.
"That's OK";
"That's the point"
и т.д.
#english #this
React, заметки об архитектуре и другое:
- В идеале, каждый Реакт-компонент должен находиться в отдельном каталоге. Это роднит компонентный подход с БЭМ, где блок - не что иное как разбитая на собственные файлы структура.
- Файлы стилей должны называться так же, как и название компонента.
- В проекте отдельным каталогом должны содержаться юнит-тесты.
- C помощью Webpack можно укоротить пути к файлам компонентов (импортировать по-умолчанию). Для этого:
1. Создаем в папке компонента файл index.js (или с таким же названием, как корневой файл проекта)
2. Прописываем импорт и экспорт:
import MyComponent from './my-component';
export default MyComponent;
3. Убираем дублирование названия файла компонента в корневом файле проекта.
Если Webpack будет ругаться на отсутствие файлов, может помочь рестарт скриптов.
- Компоненты-классы от функциональных отличаются возможностью хранить состояние.
- Если импортировать компонент через деструктуризацию:
import React, { Component } from 'react'
...то не придётся писать в компоненте-классе extends React.Component: вместо этого можно будет написать просто Component.
- Экспортировать компоненты можно, объявляя export default прямо перед объявлениями этих компонентов.
#React #архитектура #webpack
- В идеале, каждый Реакт-компонент должен находиться в отдельном каталоге. Это роднит компонентный подход с БЭМ, где блок - не что иное как разбитая на собственные файлы структура.
- Файлы стилей должны называться так же, как и название компонента.
- В проекте отдельным каталогом должны содержаться юнит-тесты.
- C помощью Webpack можно укоротить пути к файлам компонентов (импортировать по-умолчанию). Для этого:
1. Создаем в папке компонента файл index.js (или с таким же названием, как корневой файл проекта)
2. Прописываем импорт и экспорт:
import MyComponent from './my-component';
export default MyComponent;
3. Убираем дублирование названия файла компонента в корневом файле проекта.
Если Webpack будет ругаться на отсутствие файлов, может помочь рестарт скриптов.
- Компоненты-классы от функциональных отличаются возможностью хранить состояние.
- Если импортировать компонент через деструктуризацию:
import React, { Component } from 'react'
...то не придётся писать в компоненте-классе extends React.Component: вместо этого можно будет написать просто Component.
- Экспортировать компоненты можно, объявляя export default прямо перед объявлениями этих компонентов.
#React #архитектура #webpack
JS - Map/WeakMap, Set/WeakSet
- Map - это коллекция, похожая на обычыные объекты, но более гибкая - ключами могут быть в том числе объекты и функции, - и с удобным набором методов.
- WeakMap - аналог Map, который гарантированно удаляется сборщиком мусора после удаления ссылок на объекты, добавленные в коллекцию.
- Set создает множества:
const s = new Set([0, 1, 2, 3]);
Его weak-аналог отличается тем же, чем и в случае с Map.
#JS
- Map - это коллекция, похожая на обычыные объекты, но более гибкая - ключами могут быть в том числе объекты и функции, - и с удобным набором методов.
- WeakMap - аналог Map, который гарантированно удаляется сборщиком мусора после удаления ссылок на объекты, добавленные в коллекцию.
- Set создает множества:
const s = new Set([0, 1, 2, 3]);
Его weak-аналог отличается тем же, чем и в случае с Map.
#JS