Разбор решенных задач с чемпионата по программированию от Яндекса (фронт-энд разработка) 2019

[Eirik]

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

[alexbuki]

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

[Eirik]

Решение как я вижу, как раз и является тенями. Либо составляли задание плохо, либо проверяли никак.

[SayLovePlz]

Оставлю на суд свой вариант решения первой задачи:

function promisify(api) {
  const handler = {
    get(target, propKey, receiver) {
      const prop = target[propKey];

      if (typeof prop === 'function') {
        return convertFunctionToPromise(prop);
      }

      if (typeof prop === 'object') {
        return new Proxy(prop, handler);
      }

      return prop;
    },
  };

  return new Proxy(api, handler);
}

function convertFunctionToPromise(func) {
  return function(...args) {
    return new Promise((resolve, reject) => {
      func((error, data) => {
        if (error) {
          reject(error);
          return;
        }
  
        resolve(data);
      }, ...args);
    });
  }
}

[alexbuki]

well done.
Задачу С удалось решить?

[SayLovePlz]

Даже не приступил) Потратил почти 3 часа на задачу с рисованием мира)

[alexbuki]

получилось?

[Snelsi]

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

[MrDecoy]

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

<button></button>

— тогда у них появляется :focus (чтобы не прописывать всем элементам tabindex=0 или не делать контролов форм не на форме, как в предложенном решении), а так же лучше для доступности.
2. Для доски нужно убрать overflow, а для каждой клеточки сделать абсолютно спозиционированный ::after или ::before элемент.
3. С помощью множественно background-image через linear-gradient рисуем «карту» возможных ходов конём из каждой ячейки.
4. делаем pointer-events:none для этого псевдоэлемента.
Итого: получаем независимость от разметки, а так же её чистоту и простоту.

codepen.io/Mr_DECOY/pen/gOOvybZ

[alexbuki]

интересный вариант
+++

[IvKusto]

Вот мое решение C на 40 баллов — может поможет вам найти ошибку в своем.

И кстати в задаче С сперва было написано
Отправьте решение в виде:

/**  
 *  
 * @param {String} imageSrc - base64 картинки, например ’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...’  
 * @returns {Promise}  
 */  
traceImage(imageSrc) {  

Т.е. без function. И я решил, что так и надо, и перед отправкой честно стирал function, из-за чего два раза получил wronganswer (почему не ошибка компиляции или что-то вроде того?). Вариант с function отправил уже после того как много раз проверил и протестил код, не найдя там ошибки — в итоге потерял 25 минут, которые мог потратить на решение одной или двух 15 бальных задачек.

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

[alexbuki]

IvKusto, Спасибо Вам)
С задачей «D» забавно конечно)

[Balek]

Насчёт traceImage и function вы не одиноки.

[miraage]

Узнал свой ответ с тостера в первом задании.

[alexbuki]

Да, спасибо вам большое. Отметил вас в начале статьи. Не хотел присваивать ваше решение. Мое было без прокси, о чем я написал выше.