Javascript, ход мыслей и инсайты

Три задачи, которые помогли мне понять мои слабые места, как программиста.

Я уже писал о том, что полюбил делать задачи для программистов. Сегодня поделюсь задачами и решениями, которые буквально заставили меня схватиться за голову от удивления. Но сначала кратко расскажу о сайте codewars.com и его особенностях. Оформление сделано в стилистике японских боевых искусств — задачи называются «катами», а сложность задач и рейтинг пользователей обозначаются кю — от 8 по 1, по мере возрастания сложности задач или умений борца. Уникальное отличие этого сайта от других аналогов — удобная среда для ввода кода, огромное количество поддерживаемых языков и хорошее сообщество.

Задача «Пары медведей»

Description:

In order to prove it’s success and gain funding, the wilderness zoo needs to prove to environmentalists that it has x number of mating pairs of bears.

You must check within string (s) to fid all of the mating pairs, and return a string containing only them. Line them up for inspection.

Rules: Bears are either ‘B’ (male) or ‘8’ (female), Bears must be together in male/female pairs ‘B8’ or ‘8B’, Mating pairs must involve two distinct bears each (‘B8B’ may look fun, but does not count as two pairs).

Return an array containing a string of only the mating pairs available. e.g:

‘EvHB8KN8ik8BiyxfeyKBmiCMj’ —> ‘B88B’ (empty string if there are no pairs)

and true if the number is more than or equal to x, false if not:

(6, ‘EvHB8KN8ik8BiyxfeyKBmiCMj’) —> [‘B88B’, false];

x will always be a positive integer, and s will never be empty

С ходу я решил, что это задача — упрощенный вариант поиска палиндромов в строке. То, что задача всего лишь на 6 kyu меня не смутило, и я стал обдумывать базовый алгоритм:

  1. Ищем в строке букву «B», пока не дойдём до конца строки
  2. Если буква найдена, проверяем есть ли символ «8» слева, а потом справа
  3. Если есть слева, добавляем комбинацию «8B» в результат, увеличиваем счётчик пар на единицу
  4. Если есть справа, добавляем комбинацию «B8» в результат, увеличиваем счётчик пар на единицу
  5. Подготавливаем и возвращаем результат

Этот алгоритм не совсем рабочий для строки «B8B8», потому что вместо «B8B8» он вернёт «B88BB8». Поэтому, в случае, если мы нашли восьмерку справа, нам надо запомнить индекс и этот факт и в следующий итерации пропустить поиск восьмерки слева и обнулить флаг, отвечающий за это. В итоге, у меня получилось вот так:

Довольный, я нажал на кнопку «Submit final» и стал смотреть лучшие чужие решения. Вот такие варианты я увидел в топе:

Крайнее удивление

Да, эта задача решается в две строчки c помощью метода String.match (). Палиндромы в моей голове так сильно засели, что я просто забыл про регулярные выражения. Могло сыграть роль то, что в целом, я стараюсь избегать использования регулярных выражений, так как при частом изменении кода, их обслуживание может превратиться в ад. Ещё один аналогичный пример, нужно было создать функцию проверки ip адресов формата IPv4, вот моё решение:

А вот лучшее решение:

Задача «Шпион»

Description:

In testing, a spy function is one that keeps track of various metadata regarding its invocations. Some examples of properties that a spy might track include:

  • Whether it was invoked
  • How many times it was invoked
  • What arguments it was called with
  • What contexts it was called in
  • What values it returned
  • Whether it threw an error

For this kata, implement a spyOn function which takes any functionfunc as a parameter and returns a spy for func. The returned spymust be callable in the same manner as the original func, and include the following additional properties/methods:

  • .callCount() — returns the number of times spy has been called
  • .wasCalledWith(val) – returns true if spy was ever called with val, else returns false.
  • .returned(val) — returns true if spy ever returned val, else returns false

Эта задача напомнила мне основы JavaScript’а. На первый взгляд, очевидно, что надо обернуть функцию в другую, но как сделать вызов методов? Что нужно возвращать — объект? Функцию? Метод? Вот решение:

Я просто забыл, что функции являются объектами в JS и к ним можно прикреплять методы. Если об этом помнить, то задача становится очень легкой.

Задача «Разминирование бомбы»

Description:

There are a series of 10 bombs about to go off! Diffuse them all! Simple, right?

Note: This is not an ordinary Kata, but more of a series of puzzles. The point is to figure out what you are supposed to do, then how to do it. Instructions are intentionally left vague.

Иногда встречаются любопытные задачи, больше похожие на головоломки. Вам даётся объект Bomb с методом defuse, нужно исследовать его разными способами, чтобы разминировать все десять бомб. У меня пока не получилось разминировать все бомбы, быть может, вы сможете это сделать? Регистрируйтесь на сайте codewars.com и спасайте мир или считайте медведей решая классные задачи!

Зачем решать задачи для программистов?

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

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

Задачи будут держать ваш мозг в тонусе

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

Вы будете лучше знать язык

Многие задачи заставили меня читать документацию, потому что оказалось, что с ходу я не могу вспомнить многие названия функций/методов. Например, в начале попалась задача для JavaScript — написать функцию, которая переводит число из десятичной системы счисления, в двоичную. Я стал вспоминать школьные уроки информатики, как мы записывали руками в тетрадку единички и нолики и написал такой алгоритм. Когда я отправил решение и стал смотреть чужие — я ахнул! Оказалось, что самое простое решение просто использует второй параметр функции parseInt(string, radix). Я вообще не знал, что у этой функции есть второй параметр. Более того, если его не использовать, могут быть проблемы с тем, как будет интерпретироваться строчка.

Другой пример любопытного кода на Javascript. Простая задача по написанию функции, которая считает объём конуса. Результат нужно было округлить вниз. Я вполне разумно использовал Math.floor(num), но, как оказалось, округлить можно и другим способом — использовав два раза битовую операцию NOT, которая в языке совершается через двойную тильду ~~. При этом, согласно некоторым бенчмаркам, такая операция совершается быстрее, чем вызов Math.floor():

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

Понятно, что решением такой задачи является каррирование, но как его реализовать с нуля в JavaScript? Ответа я не знал, зато в гугле нашёл отличную статью на эту тему — https://medium.com/@kevincennis/currying-in-javascript-c66080543528#.o5a0hf9z0

Вы будете внимательнее читать условия задачи

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

Ask a small girl — «How old are you?». She always says strange things… Lets help her! For correct answer program should return int from 0 to 9 😉 Assume test input string always valid and may look like «1 year old» or «5 years old», etc.. The first char is number only =)

Моё решение брало первый символ строчки, преобразовывало его в целое и возвращало. А самый топовый вариант решения выглядит вот так:

И это годится именно по текущим условиям задачи.

Это интересно, полезно для кругозора и для будущего

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

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

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

Perfomance testing

Какие проблемы могут возникать от невнимательности и что с этим можно сделать.

Однажды я заметил, что godesigner.ru стал тормозить. Открываю страницу, а она не загружается. Правда, через несколько секунд страница отобразилась нормально. Потом через десять минут эта проблема снова повторилась. И ещё раз. Тут я понял, что есть проблема, посмотрел графики New Relic и ужаснулся — значение средней загрузки за двадцать минут возросло до 40 (должно быть не больше единицы)

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

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

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

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

Я до конца не уверен, как правильно создавать и производить тестирование кода на производительность. Вот парочка ссылок, которые я нашёл по теме, когда искал информацию в интернете:
https://testitquickly.com/2008/12/08/essential-about-performance-testing/
https://msdn.microsoft.com/en-us/library/bb924357.aspx

Ещё я нашёл пару книг, которые прочитаю:
https://www.amazon.com/Art-Application-Performance-Testing-Programmers/dp/0596520662
https://www.amazon.com/Performance-Testing-Guidance-Web-Applications/dp/0735625700

Думаю, что после прочтения у меня будет понятие о тестировании производительности.

Цитата: Хоар о тестах

Высказывание Чарльза Хоара о пользе тестов.

The real value of tests is not that they detect bugs in the code, but that they detect inadequacies in the methods, concentration, and skills of those who design and produce the code.

Чарльз Хоар

hoare

Как провести unit-тестирование setcookie() в php?

Какие сложности ждут вас при попытке провести юнит-тестирование методов, вызывающих setcookie().

Однажды, я писал код для класса, который определял, какой рекламный попап показывать пользователю. Алгоритм следующий — проверяем, есть ли в браузере куки А, если такой куки нет — показываем попап, А и сохраняем куки А. Если куки, А уже установлена, проверяем сохранена ли кука Б, и либо показываем попап Б и сохраняем куку Б, либо идём проверять существование куки С и так далее. Не самое изящное, но простое решение.

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

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

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

Очевидная проблема — в режиме командной строки, который обычно используют для запуска тестов функции, связанные с заголовками ничего не делают, провести такую проверку невозможно. Но если у вас применяется веб-интерфейс, который запускает юнит-тесты через браузер, то это становится реальным. В этом случае, проверка тривиальна — создаем новый метод assertCookieSet ($params, $headers) внутри которого проверяем наличие в заголовках строчки, сформированный по спецификации, которая должна появиться после вызова setcookie ().

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

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

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

Стоит отметить ещё одну опасность setcookie (). Функция возвращает true даже если куки не могут быть установлены при вызовы через php-cli. False мы получаем либо в случае провала проверки на валидность некоторых параметров, либо в случае, если сделали вывод перед вызовом setcookie (). Вот определение функции на С:

Это означает, что если использовать возврат setcookie () без учёта контекста, у нас возникнет проблема и так делать нельзя:

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

Функция setcookie — http://php.net/manual/ru/function.setcookie.php
Стандарт — https://tools.ietf.org/html/rfc6265