Материалы
Как я стал тимлидом
Эти заметки о своём вхождении в тимлидскую должность я решил сделать с самого начала, только когда начал искать должность тимлида. Вероятно, подсознательно мне захотелось побыть героем своего собственного рассказа, который проходит через приключения и в итоге добивается своей цели. Именно так оно и получилось: и цели я добился, и приключений было много. Также я понимаю, что подобный опыт в карьере может быть раз, два, ну три за всё время: когда отношения по работе переходят в совершенно иную форму. Потом, когда прошли первые месяцы, многое естественным образом начинает забываться или превращаться в рутину. Тем более мне хотелось сохранить свежий взгляд на то, как устроена эта должность и какие открытия я сделал, получив её. Предлагаю почтенной публике ознакомиться со своими выводами, которые я старался записывать по горячим следам.
Преимущества связки Mobx + React
Управлением состоянием в больших приложениях React предлагает свою универсальную систему управления состоянием компонентов посредством свойства компонента this.state и метода this.setState(). Однако по мере роста приложения, увеличения количества вложенных компонентов поддерживать код становится всё труднее. Состояние приложения может стать неконсистентным. Бизнес-логика размазывается по иерархии компонентов. Требуется писать всё больше коллбэков для передачи на верхний уровень информации о состоянии компонентов. Компоненты приложения становится труднее переиспользовать. Поэтому для управления состоянием часто используют библиотеки в дополнение к React. Тогда, если пользоваться архитектурными терминами MVC, MVVM, React отвечает за View (отображение) плюс общий каркас приложения. Работа с Model строится с помощью библиотеки управления состоянием. Например, такой, как Mobx.
React: как избежать типичных ошибок
Данная статья ставит перед собой целью рассказать разработчикам, которые ещё не используют JS-библиотеку React, в чём заключаются её особенности и на что нужно обращать внимание, чтобы избежать типичных ошибок.
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть "ВКонтакте" — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.
React + Mobx
Сегодня я хочу рассказать вам о том, как на нашем проекте состоялся переход на Mobx, какие преимущества это даёт. Также будет показан типовой проект и даны пояснения по основным вопросам. Но сначала вводные.
Показывать картинки K2 и Simple Image Gallery Pro в натуральном размере
При загрузке картинок в Joomla K2 и SIGpro они изменяют размеры: либо на те, которые установлены в админке, либо за дефолтные. Что делать, если хочется посмотреть загруженные картинки в оригинальном размере?
Пакетное сопоставление файлов с разными расширениями
Может, кому будет нужно для работы с исходниками фотографий.
Некоторые логические задачи на JS
Реализация аналога Math.pow Нужна функция, принимающая число и степень (в виде целого числа, например 3 или -2), выдающая значение этого числа в указанной степени.Особенность: должен осуществляться рекурсивный вызов, без циклов и глобальных переменных. Решение:
Транспорт Iframe
AJAX можно реализовать через Iframe. Сейчас имеет смысл только для старых версий IE (7 и ниже). Также для COMET в старых IE (9 и ниже).
Моя первая публикация на Хабре: Javascript-анимация элементов как в jQuery, только своими руками
В статье рассказывается, как я сделал аналог jQuery-анимации элементов на странице. Прочитать можно тут: https://habrahabr.ru/post/315942
Сохранение содержимого в файл из браузера
Задача следующая: в какой-то момент нужно сохранить часть содержимого, отображаемого в браузере (например, текст или визуальное отображение дерева XML-документа) на компьютер пользователя. При этом, по каким-то причинам, нет возможности запросить у сервера файл по прямой ссылке.
Браузерный парсер XML-файла
Требуется сделать вывод XML-файла на экран в удобном для человека виде, со своим набором цветов, отступов, в отдельном окне или блоке на странице и так далее. Стандартный вывод реализован в браузерах (например, Internet Explorer или Chrome). Ниже представлена функция, которая умеет это делать.
Замена символов в тексте с помощью цикла и регулярного выражения
Пример того, как заменить отдельные символы в тексте с помощью регулярного выражения и самодельного цикла с подстановкой Суть задачи: есть полноценный контент, завернутый в теги. Произвольно заданы стили, в том числе font-size, выраженный в px. Нужно пиксели заменить на em из расчёта 1em = 18px. Решение с помощью цикла:
Фильтр товаров на JavaScript
Задача: сделать фильтр товарных позиций для действующего интернет-магазина. По каким-то причинам предустановленный в CMS фильтр владельца не устраивал. Особенности реализации:– обновление списка происходит через перезагрузку страницы;– типы фильтров: простой список с галочками, “календарик”, слайдер;– в URL прописываются GET-параметры с выбранными позициями;– скрипт должен уметь читать эти параметры и отмечать позиции в фильтры как выбранные.
О вызове функции в цикле
Задача следующая: вызывать функцию в цикле, в качестве одного из аргументов принимая переменную цикла.Тут не совсем всё так просто, как кажется на первый взгляд. Казалось бы, очевидно:
Поиск Joomla только по заголовкам
Настала потребность сделать поиск обычных материалов Joomla 2.5 только в заголовках. Чтобы если поисковая фраза совпадает с заголовком, то отдавался в результатах поиска. Если совпадения только с текстом материала, то нет.Нам нужен файл /plugins/search/content/content.phpЗдесь нужен кусок кода с 73 строки:
Разбиваем длинные числа на разряды
Задача: нужно разбить длинные числа (тысячи, миллионы) из списка на группы по разрядам: Х ХХХ ХХХ.
Разбиение номера карты по маске
Встала вполне тривиальная для современного веба задача: клиент вводит номер карты (в данном случае карты лояльности). Нужно принудительно разбивать его пробелами по заданной маске, чтобы выглядело, как на самой пластиковой карте. Маска в моём случае передаётся как строка вида loyalty_mask = "ХХХХ ХХХХ" или loyalty_mask = "- ------- ------". Символы могут быть разными, однако нам важны только пробелы. Поэтому делаем массив, который будет содержать порядковые номера пробелов в строке:
Запретить увеличение масштаба (pinchin), но разрешить уменьшение (pinchout) на мобильных устройствах
Потребовалось разрешить пользователям уменьшить масштаб мобильного сайта до стандартного с одновременным запретом увеличивать масштаб обратно.Если страница статичная, то можно изначально запретить изменение масштаба метатэгом в пределах <head>...</head>:
Всплывающая подсказка для поля ввода email
Для мобильной версии kinohod.ru сделал всплывающую подсказку для поля ввода email. Суть такая: клиент вводит значение email в обычный input. После знака @ по первой вводимой букве выводим подсказку хоста. Приведу здесь всю цепочку.