• Типографика и современный CSS

    • Tutorial
    Типографика и CSS

    Пока некоторые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие совсем мало освещаются в интернете. Взять хотя бы свойства, отвечающие за типографику. Они весьма полезны и эффектны, но широко не известны. Давайте же исправим несправедливость и осветим то, что обычно остается в тени.
    Читать дальше →
  • Иллюзия скорости

    • Перевод
    Много лет я и мои коллеги убеждали разработчиков, что чем быстрее сайт — тем лучше. Статья не о том. Я не собираюсь показывать вам статистику, насколько больше зарабатывают компании, которые оптимизируют сайт для производительности (а это так). Расслабьтесь, возьмите чашечку шоколада — мы вместе совершим путешествие во времени.

    Настоящее время и воспринимаемое время



    Читать дальше →
  • Цвет в дизайне интерфейсов: инструкция по применению

    • Перевод


    Как создать чистый интерфейс, используя всего лишь один цвет? Вы узнаете из этой статьи. Перевод «Я люблю ИП».


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


    У меня есть другое мнение на этот счёт: теория цвета бесполезна.


    Но если теория цвета не является прочной основой для выбора цвета в дизайне интерфейсов, то что тогда является?


    Вот вам мой ответ: модификация цвета. Всё дело в небольших изменениях цвета, а не в их выборе из цветового круга.


    Другими словами: основным навыком в придании цвета дизайну интерфейсов является умение модифицировать один основной цвет во множество различных вариаций.


    Я знаю, что это звучит немного странно. Но послушайте меня, я дам вам практическую инструкцию для адаптации цвета в вашем дизайне.


    Вы готовы? Тогда поехали.

    Читать дальше →
  • Ручной мониторинг доступности сайта (обзор простых инструментов)



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

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

      • регулярная самостоятельная проверка работоспособности веб-сайта с помощью бесплатных инструментов;
      • постоянный мониторинг доступности сайта, оптимальным для которого является часовой интервал: большинство пользователей попытаются вернуться на сайт в течение 1-2 часов, более частые проверки не гарантируют более оперативного исправления проблем быстрее, чем в течение часа;
      • мониторинг компонентов проекта и анализ метрик приложений: скорости ответа, ошибок компонентов, сервисов, скорость ответов базы данных, мониторинг запросов без индексов или медленных запросов;
      • мониторинг производительности веб-сайта: медленная загрузка страниц может стоить потери клиентов, в то время как в результате мониторинга приходит своевременное уведомление о проблемах, позволяющее оперативно их устранять и минимизировать последствия;
      • мониторинг проблем заключается в отслеживании нескольких параметров сайта с частотой не менее раза в минуту из нескольких географических точек, для того чтобы максимально покрыть минутный интервал проверками и отследить возможные проблемы, связанные с географией пользователей.
      Читать дальше →
    • Как держать 20 тысяч VPN клиентов на серверах за $5

        Месяц назад мы с друзьями сделали бесплатный сервис для обхода блокировок сайтов в Украине Zaborona.Help. За это время сервис стал довольно популярным, аудитория выросла до 20 000 пользователей. Число одновременных подключений в пиковые часы — ≈6 000 клиентов.

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

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

        • Как выбрать подходящий хостинг. Отличительные черты плохого хостинга. История о том, как мы долго искали и нашли хостинг в России.
        • Почему IPv6 — хорошо. Правильная настройка IPv6-адресов для VPN-клиентов.
        • Изменение конфигурации OpenVPN на лету, без перезапуска сервера и отключения клиентов.
        • Балансировка нагрузки между серверами и процессами OpenVPN
        • Тонкая настройка Linux для большого числа подключений
        • Особенности кривых операционных систем и роутеров пользователей

        Наш опыт будет полезен для тех, кто собирается развернуть VPN для личных нужд, и тех, кто хочет создать сервис с большим числом клиентов.
        Читать дальше →
      • Gixy — open source от Яндекса, который сделает конфигурирование Nginx безопасным

          Nginx, однозначно, один из крутейших веб-серверов. Однако, будучи в меру простым, довольно расширяемым и производительным, он требует уважительного отношения к себе. Впрочем, это относится к почти любому ПО, от которого зависит безопасность и работоспособность сервиса. Признаюсь, нам нравится Nginx. В Яндексе он представлен огромным количеством инсталляций с разнообразной конфигурацией: от простых reverse proxy до полноценных приложений. Благодаря такому разнообразию у нас накопился некий опыт его [не]безопасного конфигурирования, которым мы хотим поделиться.



          Но обо всем по порядку. Нас давно терзал вопрос безопасного конфигурирования Nginx, ведь он — полноправный кубик веб-приложения, а значит, и его конфигурация требует не меньшего контроля с нашей стороны, чем код самого приложения. В прошлом году нам стало очевидно, что этот процесс требует серьезной автоматизации. Так начался in-house проект Gixy, требования к которому мы обозначили следующим образом:

          — быть простым;
          — но расширяемым;
          — с возможностью удобного встраивания в процессы тестирования;
          — неплохо бы уметь резолвить инклюды;
          — и работать с переменными;
          — и про регулярные выражения не забыть.
          Читать дальше →
        • Как подружить Telegram-бота с телефонией

          • Tutorial

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


          Одна из идей про сочетание возможностей виртуальной АТС с возможностями ботов, про которую расскажу сегодня, в общем, была на поверхности — прикрутить простейшего чат-бота уведомлений о пропущенных звонках к Telegram (привет хабраюзеру sguslya, который в комментах к моей предыдущей статье про API-конструкторы подтвердил, что такой кейс интересен). Схема хороша тем, что пользователям телефонии не обязательно при этом быть особенно программистами — ее легко повторить.

          Читать дальше →
        • Скриншаринг на сайте по WebRTC из браузера Mozilla Firefox


            Недавно мы писали статью о том, как сделать расширение скриншаринга для браузера Google Chrome. В результате мы создали собственное расширение для скриншаринга, опубликовали его в Chrome Store и протестировали трансляцию экрана через Web Call Server в режиме один-ко-многим.

            В этой статье мы проделаем тоже самое с браузером Firefox. Подход остается прежним и снова потребуется упаковка и публикация расширения, на этот раз в Mozilla Add-ons. В результате мы сможем делать скринкасты видеопотоков из FF без установки внешнего дополнительного ПО.
            Читать дальше →
          • +500 бесплатных инструментов для запуска вашего стартапа в 2017 году

            • Перевод


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

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

            Итак, мы нашли в интернете бесплатные и условно-бесплатные инструменты для роста вашего бизнеса. Когда они дадут вам желаемый результат, вы можете оформить платную подписку.
            Читать дальше →
          • Что взять за основу React приложения

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


              • копи-паст вашего предыдущего проекта
              • какой-то бойлерплейт или даже генератор (типа Yeoman)
              • готовый фреймворк не требующий конфигурации
              • пишете сами все с нуля

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


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

              Читать дальше →