Подписка на блог

Ещё есть Тумблер и ЖЖ.

В  Телеграме пишу обо всяком и собираю по крупицам годноту, которая потом появляется в блоге.

А в  Твиттере иногда репощу всякие смехуечки и пишу о том, как всё плохо.

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

Игорь Адаменко

РКН и ссылки на Телеграм

С тех пор, как РКН начал блокировать Телеграм, прошло уже вроде больше месяца. Телеграм всё ещё жив. Но этот пост не про то, как немощен РКН, а про то, что все упустили из виду одну проблему.

Проблема

Домен t.me заблокирован у большинства пользователей.

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

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

Однако, РКН может заблокировать что угодно, но не может заблокировать принципы работы веба. Телеграм запускает приложение с помощью перехода по адресу, который начинается с протокола tg. Потому, если у пользователя уже установлено приложение, то заменив все ссылки на t.me ссылками с протоколом tg, можно сделать их все доступными независимо от блокировок.

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

Решение

Если вы нажмёте на ссылку ниже, то увидите, о каком решении я говорю:

https://t.me/igoradamenko_channel

При открытии с десктопа пользователь попадёт на страницу, на которой написано о том, что происходит:

Если у него установлено приложение, то он увидит стандартный запрос:

Дальше всё как обычно.

На мобильных аналогичная история, даже проще. Там приложения могут перехватывать не только протоколы, но и целые адреса, потому обычно вы не видите страницы t.me, т. к. ОС сразу перенаправляет вас в приложение. С этим решением будет аналогичная история, потому что обычно на мобильных после перехода в приложение с помощью протокола, исходная страница закрывается. Потому пользователь тут тоже не увидит промежуточной страницы.

Относительно кода всё просто. Телеграм формирует ссылки примерно таким образом:

tg://resolve?domain=igoradamenko_channel # ссылка на канал или пользователя
tg://resolve?domain=igoradamenko_channel&post=454 # ссылка на конкретный пост в канале
tg://join?invite=ABCDEFGHIJKLMNOPQRSTUV # ссылка-инвайт

Потому всё, что от вас нужно, это переадресовать все телеграмные ссылки на какую-то промежуточную страницу, например так:

document.addEventListener('DOMContentLoaded', function () {
  [].slice
    .call(document.querySelectorAll('a[href^="https://t.me"]'))
    .forEach(function (x) {
      x.href = location.origin + '/tg.php?url=' + x.href;
      x.target = '_blank';
    });
});

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

<script>
  window.location.href = 'tg://resolve?domain=igoradamenko_channel'
</script>

У этого решения есть две проблемы.

Первая — Телеграм может поменять структуру ссылок. Но мы поверим, что они так не сделают.

Вторая — наличие промежуточной страницы. На самом деле этого можно избежать, если накодить кучу хаков. У браузеров различное поведение при переходе на страницы с протоколом, который не поддерживается (в нашем случае поддержки не будет, если у пользователя не установлен Телеграм), потому можно для каждого из них написать код, который будет это поведение обрабатывать, и если что, перенаправлять пользователя на t.me, а надежде, что страница у него откроется. На Гитхабе можно найти решения вроде custom-protocol-detection.

Однако, я решил выбрать более надёжное и явное решение. Такие дела ¯\_(ツ)_/¯.

Четыре вопроса про БЭМ

Последнее время меня всё чаще спрашивают про БЭМ. Потому я собрал самые частые вопросы и ответы на них в статью, чтобы было легче отвечать. Как обычно ¯\_(ツ)_/¯.

БЭМ?

Сперва стоит оговорить несколько важных моментов.

Во-первых, речь пойдёт о БЭМ в вёрстке и БЭМ на файловой системе. Основные моменты можно прочитать разделе «Быстрый старт» документации. То есть, речь не о «полном БЭМ-стеке», который вкалывают себе ребята из Яндекса. Это слишком тяжёлый наркотик для обывателя. Не пробуйте, если совсем неопытны.

Во-вторых, и это важно, каждый трактует БЭМ по-своему. И у этого есть одна очевидная причина — БЭМ почти не ограничивает. По сути вся методология — это набор советов, или, если угодно, максим, которые просто определяют границы добра и зла. А то, в каких пропорциях их смешивать (и смешивать ли) — это уже на вашей совести. Однако, это не значит, что можно воровать-убивать в коде потому что «художник так видит».

Вопрос первый, про именование сущностей и выделение блоков

Спрашивает М. из, наверное, славного города Ш.:

Я уже в который раз на это натыкаюсь и не могу определиться, как правильно.

Допустим, мне нужно сделать список. Как я обычно делаю:

.list
  .list__item
  .list__item

Тут всё ок. Но что, если этот пример усложнить? Если list__item — это сложный блок, у которого есть свои элементы, то нужно создавать отдельный блок или делать это элементами list?

Я думал, что правильно именно так:

.list
  .list__item
    .list-item  // новый блок
      .list-item__title
      .list-item__button
  .list__item

Но вот это создание дополнительного блока из двух элементов меня всегда напрягало, поэтому я задумался, может быть правильнее будет так:

.list
  .list__item
    .list__title
    .list__button
  .list__item

Но с другой стороны list__title говорит о том, что это заголовок листа, а не одного элемента. И вот это меня постоянно вводит в ступор.

Дорогой М.!

Давай разберём по порядку.

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

Часто такой выделенный в самостоятельный блок элемент называется «служебным» или «приватным». Когда-то так делали ребята из Яндекса, например, в своей библиотеке компонентов.

Приватным он называется потому, что в силу его истории его можно использовать только внутри блока, из которого его выделили (в твоём случае только внутри list). Формально — это нарушение методологии, которая утверждает, что блок должен быть независимым. На практике же — это сделка с совестью, которая или позволяет тебе делать так, или не позволяет. Если ты не уверен, что чётко понимаешь себе плюсы и минусы такого решения, то лучше так не делать.

Во-вторых, вот такой код не очень крут:

.list
  .list__item
    .list-item  // новый блок
      .list-item__title
      .list-item__button
  .list__item

В большинстве случаев правильнее будет сделать так:

.list
  .list-item.list__item
    .list-item__title
    .list-item__button
  .list-item.list__item

То есть, в подобных случаях удобнее смиксовать элемент item блока list с тем приватным блоком, что ты выделил. Тогда list-item будет отвечать только за внешний вид самого элемента списка, а list__item — за его позиционирование в рамках всего списка (которое может меняться в зависимости от модификаторов).

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

В-третьих, вот этот код тоже решает поставленную проблему:

.list
  .list__item
    .list__title
    .list__button
  .list__item

И тут тебя верно смущает тот факт, что list__title как бы намекает, что это «название списка». Но это зависит от того, как именно ты и твоя команда понимает БЭМ. Для меня, например, это «какое-то название внутри списка». Это вполне может быть и названием пункта, и названием целого списка и пр. Некоторые для устранения таких разночтений делают, например, list__item-title. Однако, это не всегда хорошо и если таких элементов появляется много, то это как раз звоночек о том, что list__item перегружен, и возможно стоит выделить его в отдельный приватный блок.

Или же не париться и делать более абстрактные элементы, типа list__title.

Как я уже говорил выше, БЭМ накладывает не так много ограничений, и скорее лишь указывает «как было бы правильнее». А как трактовать это — это уже зависит от команды. В каждом из решений есть свои изъяны:

  • list__item-title рождает новый уровень зависимости. Потому что получается, что есть отдельные элементы, которые привязаны к другим элементам. Но это решается просто игнорированием этого факта и принятием того, что это норма. Да, бывают элементы «заголовок пункта». И что? Не написано же, что это list__title-of-list__item. Просто заголовок какого-то пункта.
  • list-item__title рождает новый блок, который получается жёстко привязан к list и не может использоваться в отрыве от него. Но это решается принятием того, что у нас есть такие блоки. Иногда бывает намного удобнее декомпозировать таким образом, ничего не поделаешь. Как только мы принимаем, что у нас бывают подобные блоки, жить становится легче. Главное определить для себя, когда они нужны, а когда они излишни.
  • list__title же рождает непонятку, о которой ты написал. Но это решается бóльшим абстрагированием от общей сути блока. Это просто какое-то название внутри списка. Зато это даёт чуть больше гибкости. Например, у тебя может быть list__title_type_main и list__title_type_item. А может и не быть.
  • list-title, кстати, тоже решение. Оно, пожалуй, наиболее далёкое по смыслу от всего того, что есть тут. Но с другой стороны, если у тебя есть разные списки, то list-title вполне может быть таким элементом, который реализовывает заголовок внутри любого списка.

Ключевой смысл БЭМ в независимости между блоками, которую мы по умолчанию определяем. Если в каких-то местах нам нужно во имя чистоты абстракции и читабельности кода пожертвовать этой независимостью, лучше это сделать. Потому что поддерживать код куда важнее, чем писать его «абсолютно правильно».

Вопрос второй, про общие ресурсы

Вопрошает И., из славного города К.:

Что делать и как быть, если нужно зашарить один объект между блоками? Например, картинку.

Дорогой И.!

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

  1. Самостоятельная единица, которая может использоваться без привязки к конкретным блокам. Например, логотип или какое-то отдельное изображение на каком-нибудь лэндинге, которое встречается там несколько раз.
  2. Обычное изображение, которое по каким-то причинам пришлось использовать в двух блоках сразу.

Теперь про каждую подробнее.

Самостоятельная единица

В общем-то, формулирование проблемы уже описывает решение. Если это изображение самостоятельное, его вполне можно выделить в блок. Проблема, с которой сталкиваются новички, обычно в том, что «Но тут же нет вёрстки!». Ну и ладно ¯\_(ツ)_/¯. БЭМ про абстрактные блоки, которые «реализуются» в различных технологиях. Условно говоря, PNG, JPEG, WEBP и пр. — это всё эти самые технологии, в которых может быть реализован блок.

Дальше только возникнет вопрос, как именно это удобнее всего подключать в какую-то иную вёрстку. В идеале у такого блока должно быть представление в виде класса. То есть, это может быть, например, что-то такое:

<img src="./block.png" class="block">

Тогда это успешно ложится на абстракцию БЭМ-дерева. Плюс это можно расширять. Например так:

<img src="./_type/_mobile/block_type_mobile.png" class="block block_type_mobile">

Т. о. мы выделили отдельное изображение для этого «блока с изображением», которое будем показывать, например, только на мобильных. Дальше ему можно добавить микс и использовать в какой-либо композиции:

<div class="parent-block">
  <img src="./_type/_mobile/block_type_mobile.png" class="block block_type_mobile parent-block__image">
</div>

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

В первом случае нужно будет оставить классы как есть, потому что БЭМ в вёрстке — он о классах. И блока не существует в БЭМ-дереве, если у него нет класса.

Во втором случае можно убрать классы, поскольку то, что это за изображение, и так понятно по пути его подключения, за счёт того, что у нас БЭМ на файловой системе. Делать так или нет, зависит только от того, насколько вы уверенно чувствуете себя в коде и методологии, и от соглашений, принятых в команде.

Внезапное дублирование

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

В таком случае сперва нужно задуматься, нельзя ли её выделить в какой-то отдельный блок. То есть, точно ли в этих двух местах используется одна и та же картинка, или это просто «визуально одинаковые сущности». Тут поможет банальный вопрос: «Если картинка изменится в одном месте, нужно ли будет менять её в другом?». Если да, то это скорее всего независимая сущность и её нужно выделять в блок так, как было описано выше.

Если же нет, то можно просто положить две одинаковые картинки в разные блоки, и ничего страшного в этом нет ¯\_(ツ)_/¯.

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

Вопрос третий, про модификаторы

И., из почти славного города Ж., интересуется:

А что делать, если я создаю модификатор только с одним значением? Например,
у меня есть кнопка, у неё есть какой-то размер, но тут вдруг мне нужна кнопка побольше. И я создаю button_size_x.

Получается, что у меня есть какое-то значение по умолчанию, но есть и модификатор. Однако, у него только одно значение. Глупость же какая-то, не?

Дорогой И.!

На самом деле и правда получается глупость. Неопытный верстальщик в этом случае вообще создаёт булев модификатор, вроде button_big и успокаивается. Но это ещё бóльшая ошибка.

Во-первых, почему не булев? Потому что «размер» — это такой параметр, который может иметь разное значение. И если мы изначально делаем его булевым модификатором, мы закрываем себе возможности для расширения (тут можно было бы отослать читателя на статью про принцип открытости-закрытости, но я пока не буду). И когда завтра понадобится сделать кнопку маленького размера, придётся переписывать тот код, что уже написан. Или же придётся вводить button_small. Объяснение того, почему это неправильно, пусть будет домашним заданием для читателя.

Во-вторых, а что же делать? А решение на самом деле простое. Для того, чтобы понимать, как поступать в таких случаях, удобно представлять блок как функцию, а модификаторы — как параметры. В нашем случае получается какая-то вот такая функция:

function drawButton(size) {
  if (size) {
    // рисует кнопку указанного размера
  } else {
    // рисует кнопку какого-то иного размера
  }
}

Для упрощения понимания можно представлять, что size тут — это числовое значение. Если у читателя есть какой-то опыт программирования, он может сразу понять, что плохого в такой функции. А плохо то, что неизвестно, какого размера кнопка будет по умолчанию. Вместо явной параметризации мы получаем «параметризацию + какое-то иное поведение».

Чтобы избавиться от этого иного поведения программисты чаще всего делают просто:

function drawButton(size = 10) {
  // рисует кнопку указанного размера
}

И в таком случае по нотации функции уже понятно, что она сделает, если размер не передан — будет использовано значение 10.

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

В данном случае значением по умолчанию для модификатора size может быть, например, m. Но это уже сильно зависит от контекста.

Вопрос четвёртый, про скрипты

В редакцию пишет Л. из города-героя М.:

Вот элемент в форме, в шаблоне:

<div onclick="handleClick"></div>

В доисторические времена функция handleClick лежала рядом в этом же файле:

<script>
  function handleClick() { }
</script>

И подключалась прозрачно.

Когда на Луне обнаружился черный обелиск и в нем БЭМ, наступили наши времена, и я вынес скрипты в отдельный файл.

Файл подключается, и почти все гуд, кроме одного неудобства: он, похоже, подключается уже после всей вёрстки (или наоборот, до).

В момент, когда вёрстка парсится браузером, никакой функции handleClick он еще (или уже?) не знает. Я нашел корявый выход — у всех связанных со скриптами элементов делаю айдишники и функцию инициализации вешаю на onload событие.

Все работает, но необходимость вместо простого указания у блока в коде онклика устраивать пляски с инитами на домлоаде — какой-то адок. Нечитаемо, ошибкоемко, и громоздко, и нелаконично, и пространно, и вычурно, и многословно, и тумач букв.

Есть ли какой-то выход?

Дорогой Л.!

Это уже не столько про БЭМ, сколько про особенности сборки, но давай всё равно разберёмся.

Если бы мы говорили о каких-то фреймворках, в которых компонентный подход навязывается насильно (Ангуляр, Реакт и пр.), то там бы такой проблемы не возникло, потому что там компонент — это штука, которая обмазана скриптами донельзя, и потому скрипты не нужно привязывать к вёрстке. Скорее даже наоборот.

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

Тот вариант, что ты предлагаешь — положить скрипты прямо в вёрстку — вполне рабочий, и в нём нет каких-то особых проблем. Если мы говорим об одной маленькой страничке, где есть пара блоков и небольшие скрипты для них, то это возможно куда более правильный путь, нежели выделять скрипты в отдельный файл и пр.

На практике же используется, обычно, несколько иной подход. А именно:

  1. Скрипты подключаются в самом конце тега body.
  2. Скрипты пишутся с оглядкой на то, что инстансов блока может быть больше одного.

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

Второй пункт позволяет нам не плясать с идентификаторами, а использовать всё те же классы, которыми мы оперируем в БЭМ.

В общем случае получается что-то такое. Вёрстка:

<!-- ... -->
<body>
  <!-- ... -->
  <div class="block">
    <!-- ... -->
  </div>
  <!-- ... -->

  <script src="app.js"></script>
</body>
<!-- ... -->

JS-файл, при этом, скорее всего будет собираться как-то из других JS-файлов (из-за того, что у нас БЭМ на файловой системе), но предположим, что блок всего один. Тогда примерно вот таким будет JS-файл:

Array.from(document.querySelectorAll('.block')).forEach(initBlock);

function initBlock(node) {
  // какие-то действия над блоком 
}

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

document.addEventListener('DOMContentLoaded', () => Array.from(document.querySelectorAll('.block')).forEach(initBlock));

function initBlock(node) {
  // какие-то действия над блоком 
}

Или, если есть уверенность, что это очень нужно (не стоит так делать без чёткого понимания разницы), то он может быть и таким:

window.addEventListener('load', () => Array.from(document.querySelectorAll('.block')).forEach(initBlock));

function initBlock(node) {
  // какие-то действия над блоком 
}

Если скриптов на проекте много, то всё это можно спрятать в какую-то функцию, которая будет использоваться во всех файлах для инициализации блока. Типа такого:

// определённая где-то глобально функция
function initBlock(selector, fn) {
  Array.from(document.querySelectorAll(selector)).forEach(fn);
}

// локальное применение для конкретного блока
initBlock('.block', node => {
  // какие-то действия над блоком
});

Главное во всей этой истории то, что «какие-то действия над блоком» должны быть написаны так, чтобы подразумевалось, что таких блоков может быть любое количество на странице.

∗∗∗

Кажется, это были четыре наиболее часто задаваемых вопроса. Если вам кажется, что я что-то упустил или где-то неправ — пишите в комментарии. А пока вот несколько полезных ссылок по теме:

  • Описание методологии от Яндекса.
    Кажется, с каждой итерацией обновления этой документации, ребята из Яндекса всё дальше уходят от описания полного БЭМ-стека к более абстрактному описанию методологии. Это не может не радовать.
  • Принципы SOLID.
    Забавно, но в БЭМ, кажется, больше от программирования, чем от вёрстки. К слову, некоторые из этих принципов и их применение к БЭМ описаны в официальной документации.
  • Базовые понятия и принципы БЭМ.
    Мой коллега когда-то написал вот такую довольно академичную выдержку из своего доклада. Читать нужно аккуратно и вдумчиво, как будто это учебник по математике.
Блок кода, который тут только для того, чтобы Эгея подключила highlight.js, потому что иначе она не хочет этого делать. (╯°□°)╯︵ ┻━┻)

Годнота — 28

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

Статьи

Видео

Однажды в Википедии

Книги

  • «Кто бы мог подумать!», Ася Казанцева.
    Крутая книжка, написал коротко о каждой главе в канале.

Кино

Сериалы

Интересное из Телеграма



Прошлые подборки по тегу — годнота. А собираю я их в Телеграме (кажется, около сотни постов не вошло в опубликованный список).

Верстальщик, найдись

Обновление от 05.05.18: Вакансия закрыта. Спасибо, что помогли с поиском!

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

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

О верстальщике

Я считаю, что любой может стать хорошим верстальщиком, если он:

  • любознателен;
  • аккуратен;
  • настойчив;
  • любит то, что делает.

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

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

Об условиях

Если очень кратко, то:

  • технические детали: БЭМ, Реакт, Ангуляр, Вебпак, Скетч, Гит, Джира, Слак;
  • организационные моменты: удалёнка или место в офисе в Москве, Ульяновске или Казани;
  • ништяки: покупка техники за полцены и в рассрочку, оплата участия в профильных конференциях, бесплатные курсы английского;
  • зарплата: от 50 000 ₽ (чем больше у вас знаний, тем она выше).

Подробнее читайте в тексте вакансии.

А дальше?

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

По любым вопросам пишите — mail@igoradamenko.com.

Если эта вакансия не для вас, но вы знаете кого-то, кто нам подходит, поделитесь с ним ссылкой на этот пост, пожалуйста.

И, да, если вы верстальщик с опытом, то у нас для вас тоже есть вакансия. Приходите.

Скайэнг

С того момента, как я первый раз написал в канале, что начал заниматься в Скайэнге, я успел пообещать десяток раз, что я напишу эту статью «ну где-то через неделю». «Через неделя» наконец-то настала.

Предыстория

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

Как-то Людвиг посоветовал Колю в качестве репетитора. Тогда я внезапно решил, что это тот самый момент, когда пора взять себя в руки и пойти, наконец, учиться. Я написал Коле, и он оказался действительно клёвым. Буквально за два-три занятия он избавил меня от пагубной привычки «не говорить, чтобы не ошибиться» (кровью, потом и матом). Однако, через пару месяцев он перестал заниматься репетиторством, и нам пришлось расстаться.

Но после этого меня уже было не остановить, и я стал искать куда бы податься дальше. Вариантов было много, благо интернет большой. И вот я набрёл на Скайэнг.

Почему Скайэнг

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

В итоге я купился на рекламу и захотел хотя бы посмотреть, что ж там такого крутого. Тем более, что на тот момент я уже истыкал и Лингвалео, и Дуолинго, и Лён-эт-хоум, и все подобные сервисы. И понял, что если ты хоть немного знаешь язык, эти штуки уже не работают, потому что нужно живое общение с преподавателем.

В общем-то, я потому и решил пойти к репетитору ещё до Скайэнга — осознал, что «сервисы для изучения языка» со мной не работают совсем. В основном по двум причинам: там почти никто не объясняет теорию и совсем нет практики говорения. Максимум, на что они способны — дать вводные знания о языке и чуть-чуть набить словарь.

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

Казалось, что в Скайэнге всё это есть, потому я оставил заявку и стал ждать звонка.

Начало

После регистрации я начал заполнять свой профиль. Сейчас всё выглядит несколько иначе, нежели раньше, потому что платформа постоянно допиливается и часто визуально меняется. Но тем не менее, суть примерно вот в этом:

Там ещё много других полей, но мне было лень делать скриншоты всего, потому оставил только самое полезное.

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

После заполнения всего этого я подождал ещё пару часов, и мне позвонили методисты из школы, с которыми мы согласовали дату и время вводного урока. Не ждите, что можно будет провести его прямо здесь и сейчас. Обычно как минимум текущий день у них уже расписан, и записаться можно разве что на следующий. А если хочется большей гибкости во времени, то лучше начинать с «послезавтра» и дальше.

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

Во-первых, заявленная стоимость обучения на сайте, конечно же, не совсем честная. Да, они пишут «от ...», но это при условии, что ты покупаешь огромный пакет занятий. Если покупать минимальный, то цена будет почти в полтора раза выше:

Это очевидно, но не очень приятно.

Во-вторых, как вы могли заметить по скриншоту выше, нельзя купить одно или два занятия. Минимум восемь (а методист на вводном занятии, обычно, пытается вам продать как минимум пакет из 16).

В-третьих, многие из предоставляемых «услуг» оказались полным булщитом. Я о них ещё напишу ниже. Но, спойлер: они не очень-то и нужны.

Вводное занятие

Через пару дней со мной созвонился методист, и мы провели вводный урок. Это помогло понять, в чём основной плюс всей этой платформы, почему это удобнее, чем просто с репетитором, и почему стоит переплачивать.

Жирных плюса платформы два.

Первый жирный плюс — задания проверяются автоматически. Это главное отличие от занятий с обычным преподавателем, который следит в каком-нибудь Скайпе за тем, что вы делаете, комментирует это и говорит, правильно оно или нет. Здесь же у вас перед глазами просто форма с каким-то заданием, где нужно или вписать ответы, или выбрать правильные варианты, или как-то их соединить, или сгруппировать и т. д.

Второй жирный плюс — нет привязки к сторонним сервисам. То есть, видео-связь и чат есть внутри платформы, потому не нужно запускать отдельно скайп, а отдельно страницу с занятием, и переключаться туда-сюда.

О самой платформе я ещё напишу отдельно ниже со скриншотами, а пока лишь скажу, что методист в моём случае была молодой девушкой, которая довольно понятно рассказала мне, как всё работает, что у них есть, сколько это стоит и как вообще жить так, чтобы было комфортно. Впечатления от первого урока (он длится минут 40-50) были только положительные, и потому я купил минимальный пакет занятий и стал ждать полноценных уроков.

Преподаватель

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

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

Методист оценил мой уровень как Intermediate и сказал, что мне нужно этак 60 занятий, чтобы перейти на следующий. Но преподаватель сказал, что в моём случае достаточно 10-12, чтобы убедиться в том, что мои знания на этом уровне соответствуют действительности. И потому занятий через десять мы перешли на Upper-Intermediate и на момент написания этой статьи двигаемся в рамках этого курса.

Из интересного: платформа постоянно предлагает мне сменить преподавателя. Это можно сделать без проблем, причём, даже не сообщая текущему преподавателю. Вам просто подберут кого-то нового, вы попробуете провести занятие с ним, и если понравится — поменяете. А если решите, что и текущий в принципе неплох, то он ничего не узнает о вашем эксперименте. Видимо, это сделано для очень нерешительных людей ¯\_(ツ)_/¯.

Платформа

Пришла пора рассказать о том, как же всё это выглядит и функционирует. «Платформой» я это, к слову, называю только потому, что сами ребята из Скайэнга говорят так. Под этим словом я понимаю веб-приложение плюс какие-то его куски в мобильном приложении (о нём тоже отдельно ниже).

Тут будет много скриншотов и комментариев, так что держитесь там.

Личный кабинет

Страница, на которой собрана основная информация о вас. Слева меню в котором вы видите, что у меня куча невыполненных домашних заданий (не будьте как я, делайте домашку) и тестов. А по центру всякая важная инфа. Тут есть:

  • ссылка на страницу о преподавателе (показывать не буду, потому что прямой ссылки на него всё равно нельзя дать, увы);
  • дата и тема следующего занятия;
  • ссылки на календарь и расписание;
  • ссылки на новую домашку;
  • информация о текущем курсе;
  • ачивки;
  • баланс;
  • статистика (не попала в скрин);
  • куча ссылок на другие проекты Скайэнга (тоже не попали в скрин).

Из важного, что стоит отдельно показать скриншотом, тут есть вот такое окно для отмены занятия:

Но отменять легче всё же поговорив с преподавателем, потому что так удобнее согласовывать даты. И, да, на отмену и перенос занятий есть определённые ограничения. Не буду врать, но кажется, в месяц можно отменять N занятий, где N — это количество занятий в неделю (в моём случае, например, два). И это работает только за 8 часов до занятия.

То есть, всё логично, но всё же не так радужно-гибко, как об этом говорится в рекламе.

Уроки

(левое меню такое же, как и раньше, потому я не включил его на скриншот)

Раздел, который не несёт для меня какой-то ценности вне урочного времени. Здесь можно посмотреть все темы, для которых есть учебный материал. На скриншот попала примерно половина. Но зато с помощью этого раздела я примерно могу вам показать то, как выглядит страница урока. Скриншоты делать не очень удобно, потому что контента на странице много. Так что я буду стараться пояснить, где, что и как.

Зайдём для примера в один из уроков:

В левой части:

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

А там, где написано “This page is not included in homework” во время урока расположено видео с преподавателем и контролы для включения-выключения камеры, звука и пр.

Про поиск по грамматике не вру, зацените:

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

На скрин попала где-то пятая часть от того, что есть.

Или в раздел со словами:

В центральной же части происходит основное действие. В целом заданий бывает несколько типов:

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

Сами же задания выглядят, например, вот так:

Здесь нужно было вставить слова, которые были в аудиозаписи.

Или вот так:

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

Или ещё как-то подобно. В основном это всегда набор инпутов, чекбоксов, радио-кнопок, селектов и прочих полей, которые нужно заполнить. Ничего нового, но зато мгновенный фидбэк. Если ответили неправильно, то есть ещё несколько попыток, прежде чем появится возможность узнать правильный ответ.

Тут ещё много разных кнопок и ссылок, но если я начну расписывать всё, то это будет странно. Потому с уроками на это закончим (а в целом к заданиям вернёмся, когда будем обсуждать домашку).

Видеопрактика

Раздел с видео с субтитрами, которые можно посмотреть, чтобы пополнить словарный запас. Зашёл сюда один раз, потыкал пару видосов и закрыл. Хотя плеер для этих видео у них сделан довольно удобно. Там можно, например, посмотреть все предыдущие субтитры просто нажав на паузу, а не листая по пять секунд туда-сюда, как на Лингвалео.

Домашние задания

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

Вот первое задание, в котором нужно было вспомнить, какие фразы обсуждались на уроке, и заполнить пропуски:

Вот второе, в котором нужно было выставить слова в правильной последовательности (вы видите уже выполненное задание):

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

Четвёртое, в котором нужно было перечитать то, что было в третьем, и применить новые слова:

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

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

В одиннадцатом нужно записать трёхминутную речь на указанную тему:

Для меня это самые изнурительные задания. Я порой могу убить на одно такое больше времени, чем на всю остальную домашку. А проверяет его не ваш преподаватель, а какой-то иной, который не привык к вашему голосу и говору. Он оценивает полноту покрытия темы, использованные слова, внятность речи, наличие долгих пауз и всё такое.

И в последнем задании нужно прослушать текст и записать его:

Ещё бывают задания по написанию эссе, но они обычно на первых уровнях. Там суть примерно такая же, как и с записями.

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

Тесты

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

Остальные пункты

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

  • «Словарные игры» — какая-то унылая игрушка, где нужно стрелять в перевод слов, или вроде того;
  • «Мои заметки» — все заметки с уроков (их можно оставлять в процессе);
  • «Мой словарь» — список всех изученных слов;
  • «Моё портфолио» — список всех выполненных уроков, написанных эссе и записей (в смысле, “Recordings”);
  • «Travel» — ссылка на страницу с рекламой обучения в других странах;
  • «Скачать приложения» — ссылка на страницу с кучей ссылок на различные приложения, как то: расширение с текстами песен для Я.Музыки, расширение с субтитрами для Нетфликса и Амедиатеки, расширение-переводчик, основное мобильное приложение Скайэнга, мобильное приложение с каталогом аудиозаписей и вопросов к ним и пр. На деле почти все из них выполнены очень посредственно, потому я не пользуюсь ничем, кроме основного приложения.
  • «Тест видеосвязи» — тест видеосвязи ¯\_(ツ)_/¯.

Мобильное приложение

В целом оно напоминает приложения Лингвалео и Дуолинго, только более упрощённое, без всяких там древовидных ачивок как в Дуолинго и без разных тренировок как в Лингвалео. Если вы пользовались ими, то тут не будет ничего нового, кроме раздела с домашкой. Потому вот вам пачка скриншотов, по которым примерно понятно, как работает изучение слов:

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

Домашка:

Справедливости ради, домашку через приложение не делаю вообще никогда. Мне это показалось неудобным, но это скорее потому, что у меня всегда под рукой ноут. Если у вас часто бывают ситуации, когда в руках только телефон или планшет, то этак 90% заданий вы точно сможете выполнять без особых проблем. Для остальных скорее всего лучше подойдёт ноут (для записей речи или эссе, например).

Кстати, кажется, что приложением можно пользоваться и без регистрации в Скайэнге. Попробуйте найти его в вашем мобильном магазине приложений, если интересно.

Что есть ещё

Я упустил много всего, что (или с помощью чего) продаёт Скайэнг.

Например, у них есть канал на Ютубе с Таней Стариковой в роли ведущей, которая вам может или понравиться, или не понравиться.

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

Или вот Skyeng Magazine, который чем-то отдалённо напоминает Т—Ж, только более кустарно собранный.

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

Статьи про изучение английского? Пожалуйста. И вебинары ещё вот.

Как всё это работает для меня

Я вверху перечислил то, что упустил, потому что сам не пользуюсь всем этим. С одной стороны, мне интересен процесс изучения языка. С другой стороны, на него почти всегда нет времени. Потому я, в общем-то, наверное самый желанный клиент Скайэнга. Мне больше ничего не нужно продавать, кроме самой платформы и подбора преподавателя.

У меня занятия два раза в неделю в первой половине дня. Обычно занятие начинается с 20-минутного обсуждения того, что произошло за прошедшие дни, как там чего на рынке компьютерного железа, что нового представили различные ИТ-компании, как погода за окном, и какого очередного крутого покемона я поймал, и почему это важно.

Если что-то идёт не так, мы всегда можем списаться с преподавателем и перенести или отменить урок. Я часто в разъездах, потому это довольно актуальная для меня тема. То у меня уроки из кафе, то из отеля, а порой я внезапно осознаю, что завтра буду в поезде, и нужно по-быстрому отменить урок. Поскольку условия изначально такие, что «вы можете с лёгкостью отменять или переносить занятия», преподаватель всегда готов к такому повороту событий, потому договариваться просто:

Или в обратную сторону:

У меня мало времени на домашку, но в последнее время я поставил её выполнение на поток, потому очередь начинает по чуть-чуть уменьшаться, и в далёком будущем (я верю) все долги вообще уйдут. Домашка, кстати, это моя зона ответственности, в которую преподаватель не лезет. Но если для вас это важно, можно договориться об обратном — чтобы преподаватель контролировал это. Полезно, если у вас всё плохо с организацией и нужен пинок.

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

На всё остальное у меня пока нет времени. Иногда почитываю рассылки, на которые подписался. Мне понравилась рассылка по Шерлоку, например. Один раз попробовал поучаствовать в вебинаре, но показалось, что это действие со слишком низким КПД. Ещё подписан на канал школы на Ютубе через РСС, и раз в миллион лет смотрю его.

Заметил, что занимаюсь в Скайэнге с октября. За это время, кажется, я стал более уверенно говорить на английском (и вообще начал на нём говорить, а не только писать). Не испугался написать статью в бложик на нём, когда это было нужно. Который месяц подумываю о том, чтобы или открыть отдельно англоязычную версию блога, или вообще избавиться от русскоязычной и писать только на английском. Кажется, смотрю теперь в основном только англоязычный Ютуб, потому что больше не страшно и не больно. В будущем планирую с помощью английского начать активно изучать третий язык.

Почему стоит попробовать

Если вам, как и мне, кажется, что основная проблема изучения английского в школе или в вузе в том, что никто не учит говорить на нём, а вам страсть как хочется — вы уже готовы к тому, чтобы попробовать.

Если у вас совсем нет времени на то, чтобы ходить к преподавателю или искать его самостоятельно, и, возможно, хочется заниматься в четыре часа утра в воскресенье и в полночь в среду — это нормально и тоже не проблема.

Если не хватает знаний по грамматике, маленький словарный запас и т. д., и это вас почему-то останавливает, то забейте на всё это и просто попробуйте.

И, да, самая глупая отмазка, которую я часто слышу: «Мне уже поздно изучать английский». У меня есть несколько знакомых, которые бы над этим посмеялись, потому что им в их 40+ не поздно, а у кого-то в 20 уже почему-то «поезд ушёл» и «есть дела поважнее».

Думаю, что английский сегодня — один из самых востребованных, необходимых и «развязывающих руки» навыков. А если вы программист, который почему-то не может должным образом в английский, то, как сказал классик: «Вон из профессии».

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

skyeng.ru/invite/4e6a6b324e6a5932

А если у вас был опыт со Скайэнгом (позитивный или негативный), то напишите о нём в комментах. Или о каких-то иных крутых сервисах для изучения языка тоже напишите. Возможно, вы кому-то поможете определиться и сделать первый шаг.

Ctrl + ↓ Ранее