• Переход на Percona XtraDB Cluster. Одна из возможных конфигураций

      Итак, я начал внедрять в своей организации Percona XtraDB Cluster — переводить базы данных с обычного MySQL сервера в кластерную архитектуру.


      Коротко о задаче и вводные данные


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

      Иными словами, БД практически всех наших проектов, из тех что крутятся у нас на MySQL, теперь должны жить в кластере.

      Большинство проектов мы держим удаленно в ДЦ, поэтому и кластер будет находится там.
      Задача разнести кластер географически по разным дата-центрам не стоит.
      Читать дальше →
    • Самые популярные Node.js-фреймворки 2018 года

      • Translation
      Сегодня мы публикуем перевод материала, автор которого хочет рассказать о самых популярных в наши дни фреймворках для Node.js. В этот список входят Sails.js, Hapi.js, NestJS, LoopBack, Derby.js, Mean.io и Total.js.


      Читать дальше →
    • Как генерировать осмысленные коммиты. Применяем стандарт Conventional Commits



        Привычный хаос в названиях коммитов. Знакомая картина?

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

        Меня зовут Ержан Ташбенбетов, я работаю в одной из команд Яндекс.Маркета. И сегодня я расскажу читателям Хабра, какие инструменты для создания осмысленных коммитов мы используем в команде. Приглашаю присоединиться к обсуждению этой темы.

        Читать дальше →
      • Что такое анти-паттерны?

          Анти-паттерны — полная противоположность паттернам. Если паттерны проектирования —
          это примеры практик хорошего программирования, то есть шаблоны решения определённых задач. То анти-паттерны — их полная противоположность, это — шаблоны ошибок, которые совершаются при решении различных задач. Частью практик хорошего программирования является именно избежание анти-паттернов. Не надо думать, что это такая непонятная теоретическая фигня — это конкретные проблемы, с которыми сталкивался практически каждый разработчик. Кто осведомлен, тот и вооружён! Рассмотрим же несколько расрпотранённых анти-паттернов в программировании.
          Да, рассмотрим!
        • JavaScript паттерны… для чайников

            Однажды вечером, сразу после того, как я закончил разбираться с наследованием в JS, мне пришла в голову идея, что пора бы заняться чем-нибудь посложнее — например паттернами. На столе внезапно оказалась книжка Gof, а на экране ноутбука появился труд с названием «JavaScript patterns».

            В общем, спустя пару вечеров, у меня появились описания и реализации на JavaScriptе самых основных паттернов — Decorator, Observer, Factory, Mediator, Memoization (не совсем паттерн, а скорее техника, но мне кажется что она прекрасно в этот ряд вписывается) и Singleton.

            Читать дальше →
          • Интерактивная таблица результатов

            Глядя на таблицу результатов футбольного сезона, я часто задаюсь вопросами:

            • Лидировала ли команда с начала сезона или совершила героический рывок в конце?
            • Как зимнее трансферное окно повлияло на результаты?
            • Доигрывали ли сезон команды в середине таблицы или играли в полную силу?

            Статичная таблица не даёт ответов.

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

            Графики или быстро теряли читаемость с ростом количеством команд, или требовали нетривиальной концентрации при первом контакте. В итоге, всё закончилось тем, с чего началось — таблицей. Точнее, скриптом, который преобразовывает результаты сезона в интерактивную таблицу. Можно посмотреть результаты после любого тура или просто нажать на replay и наблюдать, как команды плавают вверх и вниз по таблице:

            image

            Живая демонстрация
            Читать дальше →
          • JavaScript 2016, а можно попроще?

            • Tutorial

            Последние полгода много пишут о неоправданной сложности клиентского JavaScript. Недавняя статья How it feels to learn JavaScript in 2016 и ее перевод на хабре вызвали много внимания, критика во многом справедливая, но...


            Усложнять просто, упрощать сложно. (Один из законов Мерфи)


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


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


            Использованный стек: create-react-app как сборщик для клиента, React, bootstrap, API с json-server или json-заглушки.



            Работающее демо здесь: Movies List.

            Читать дальше →
          • Сравнение css-фреймворков/библиотек на живом примере. Часть 1

              сравнение css-фреймворков на примере

              Пролог


              В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

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

              Читать дальше →
            • Строим свое собственное отказоустойчивое облако на базе OpenNebula с Ceph, MariaDB Galera Cluster и OpenvSwitch

              • Tutorial


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


              Темы сами по себе очень интересные, так что даже если вас не интересует конечная цель, но интересует настройка какого-нибудь отдельного компонента. Милости прошу под кат.
              Читать дальше →
            • 50 лучших инструментов для разработки CSS и JavaScript

              • Translation
              Веб-разработчику постоянно необходимо быть в курсе появления новых библиотек и инструментов. Я нашёл и выбрал несколько лучших инструментов для разработки как CSS, так и JavaScript. Это не просто копипаста – это выборка, основанная как на рекомендациях, так и на личном опыте использования.

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

              Лучшие инструменты для CSS и JavaScript


              1) Fileicone

              Сборник 100%-CSS файловых иконок. Может пригодиться для дизайна страниц.

              image

              2) Marx

              Элегантное обнуление CSS безо всякого JavaScript.

              image
              Читать дальше →
            • Как нам удалось построить видеохостинг за 1¢/ГБ

                Почему видеохостинг такой дорогой


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

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

                Аренда серверов для видеохостинга в США значительно дешевле (за исходящий гигабайт), чем во многих других странах. Однако доставка видео с американских серверов на другие континенты редко бывает достаточно быстрой, чтобы фильм можно было смотреть без перерывов на буферизацию, и чтобы время ожидания перед началом воспроизведения было приемлемым. Поэтому хозяевам сайтов с видеороликами, выходящих на международную аудиторию, приходится арендовать местные сервера в разных частях света поближе к своим пользователям. Показ ролика пользователю из России, например, обходится типичному видеосайту в несколько раз дороже, чем показ того же ролика американцу. Приходится или дороже платить, или снижать качество видео для зарубежных зрителей. Вот и выходи после этого на международный рынок.

                Чтобы решить эту проблему, нам пришлось сделать софт умнее.


                Читать дальше →
              • Быстрая настройка резервного копирования под Linux и не только (UrBackup)


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

                Для начала начал искать решение для резервного копирования файлов, очевидным решением было простая настройка скриптов на Linux по cron, но это не очень удобное и надежное решение, если серверов более одного(а у меня их около 50-ти) и структура достаточно динамична. Тем более если инфраструктура смешанная, Linux + Windows. Хотелось что-нибудь простое в дальнейшем обслуживании и извлечении самих копий, например, переложить восстановление пользовательских файлов на группу поддержки. Порывшись пару часов в интернете, я наткнулся на интересный проект UrBackup, он удовлетворял всем моим условиям.
                Читать дальше →
              • Настоящие ассоциативные массивы в JavaScript

                • Translation
                • Tutorial
                Использование литерала объекта, как простого средства для хранения пар ключ-значение давно стало обычным делом в JavaScript. Тем не менее, литерал объекта всё же не является настоящим ассоциативным массивом и по этому, в некоторых ситуациях, его использование может привести к неожиданным результатам. Пока JS не предоставляет нативную реализацию ассоциативных массивов (не во всех браузерах, по крайней мере), существует отличная альтернатива объектам, с нужной функциональностью и без подводных камней.
                Читать дальше →
              • Создание изоморфного приложения на React и Flummox

                Сегодня я хочу показать, как используя React, Flummox и Express, создать полноценное изоморфное приложение.

                Идея изоморфности давно витала в воздухе, но никто не знал этого слова, поэтому ничего особо не менялось, пока не пришел airbnb.

                За полгода до этого появился React, позже появился Flux и множество его реализаций, одна не хуже другой. Но все эти реализации ориентировались только на работу на клиентской стороне, они работали через синглтоны и, зачастую, их нельзя было нормально использовать на сервере. Я успел попробовать несколько, но ни одна мне не понравилась. Пока два месяца назад я не наткнулся на Flummox. Как заявляет разработчик, Flummox создан как раз для изоморфных приложений, он не использует синглтоны, присущие другим реализациям, и максимально прост в использовании.

                Ожидается, что вы имеете опыт работы с React и слышали про Flux. Итак, поехали…
                Забрать готовый код можно тут.
                Читать дальше →
              • Медиазапросы: width против device-width

                • Translation
                Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.
                Читать дальше →
                • +3
                • 46.8k
                • 2
              • JSONB запросы в PostgreSQL

                • Translation
                Ранее я писал, как включить поддержку jsonb в postgres/psycopg2. Сегодня экспериментировал с тем, как запрашивать данные в колонках типа JSON.
                На эту тему есть документация, но мне было не совсем понятно, как работают различные операции:

                CREATE TABLE json_test (
                  id serial primary key,
                  data jsonb
                );
                
                INSERT INTO json_test (data) VALUES 
                  ('{}'),
                  ('{"a": 1}'),
                  ('{"a": 2, "b": ["c", "d"]}'),
                  ('{"a": 1, "b": {"c": "d", "e": true}}'),
                  ('{"b": 2}');
                

                Читать дальше →
              • Как отобразить количество оповещений в названии вкладки браузера

                • Translation
                • Tutorial


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

                Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

                Trello Facebook and Twitter notifications
                Оповещения Trello, Facebook и Twitter

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

                Посмотреть на GitHub
                Демо (рус.)
                Читать дальше →
              • Nginx и https. Получаем класс А+

                • Tutorial
                image

                Недавно вспомнилось мне, что есть такой сервис — StartSsl, который совершенно бесплатно раздаёт trusted сертификаты владельцам доменов для личного использования. Да и выходные попались свободные. В общем сейчас напишу, как в nginx настроить HTTPS, чтобы при проверке в SSL Labs получить рейтинг А+ и обезопасить себя от последних багов с помощью выпиливания SSL.

                Итак, приступим. Будем считать, что у вы уже зарегистрировались на StartSsl, прошли персональную проверку и получили вожделенный сертификат. Для начала опубликую итоговый конфиг, а после этого разберу его.
                Читать дальше →
              • Ещё один пост о сборке front-end проекта

                • Tutorial
                Js app starter

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

                Что умеет делать сборщик:
                • Собирать front-end проект для development & production окружений.
                • Собирать по несколько js/css бандлов на проект.
                • Использовать стиль CommonJS модулей в браузере.
                • Использовать ES6-синтаксис.
                • Спрайты, картинки и многое другое.

                Читать дальше →
              • Пересмотренное руководство по Grunt для начинающих

                • Translation
                • Tutorial
                Еще в марте 2013 года я написал статью руководство по Grunt для начинающих и она стала самой посещаемой статьей на моем сайте. Я написал ее в то время, когда сам только начинал своё знакомство с Grunt, и это было скорее руководство для себя, чем для кого-то ещё. Теперь, спустя 18 месяцев, я почувствовал, что пришло время пересмотреть как я использую Grunt потому что сейчас я знаю гораздо больше, чем в то время.

                Если вам не терпится просто увидеть код, то весь он есть на Github.
                Читать дальше →