• Готовим идеальный CSS

    • Tutorial
    Привет, Хабр!

    Не так давно я понял, что работа с CSS во всех моих приложениях — это боль для разработчика и пользователя.

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

    Read more →
  • Генерация страниц сайта средствами сервис-воркеров

    • Tutorial

    (С)

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

    • кэширование страниц сайта для офлайн доступа;
    • ведение учета страниц, доступных офлайн, проброс необходимых данных;
    • мониторинг статуса сети, онлайн или офлайн;
    • общение сервис-воркера со страницами и вкладками, которые он обслуживает;
    • перехват сервис-воркером запроса на открытие адреса /offline/ и генерирование новой страницы прямо на устройстве, без запроса к серверу.

    Если тема сервис-воркеров и Progressive Web Apps (PWA) для вас новая, то перед чтением этой статьи необходимо познакомиться с ними поближе.

    Меня зовут Рыбин Павел, я работаю во фронтенд-разработке Медиапроектов Mail.Ru Group. Это руководство мне помогали писать грабли, набитые шишки и подводные камни, попавшиеся мне при реализации PWA для мобильной версии Авто Mail.Ru.

    В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.
    Читать дальше →
  • Грамотная настройка сервера отправки почты для скриптов PHP, настройка функции mail()

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

      Как известно протокол SMTP не подразумевает никаких средств защиты от спама и аутентификации пользователя, поэтому крупными и не очень компаниями были придуманы «фиксы» безопасности протокола.
      Если вы устанавливаете выделенный сервер с доменом размещенным на нем, очень рекомендуется выполнить данные настройки, что бы все было как надо.

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

      Название заголовка выбрал именно такое, так как вначале своего пути я искал что-то вроде этого. Настраивать будем postfix, php, dns (ptr, spf), и другое.

      Эта статья будет интересная людям, настраивающим выделеные сервера, но не менее интересна для обычных программистов.
      К слову данную инструкцию я использую для своих проектов. Системы автоматизированного получения приглашений и получения виз в страны Шенгена: https://goingrus.com/ru, весь софт крутится на виртуальной машине.

      Подробности под катом
      Читать дальше →
    • Массовая почтовая рассылка через Exim или как не попасть в спам

      Жизнь была прекрасна и все было в этом мире хорошо, пока почта с моего сайта не стала активно посылаться в спам практически всеми крупными почтовыми серверами. Особенно усердствовал в этом Gmail. Частенько меня принимали за спамера в Yandex, реже в mail.ru и rambler.
      image
      Исходя из совокупности представленных факторов стало понятно, что надо что-то делать с настройками своего почтового сервера Exim. Посмотреть, как это было сделано, приглашаю под хабракат.
      Читать дальше →
    • Кешируем статику

      Существует мнение, что nginx — отличный инструмент для отдачи статики.
      Есть статьи, где описываются настройки sendfile или aio для «улучшения» отдачи.
      На Хабре есть чего почитать о настройке proxy_store с proxy_cache для минимизации проблем со стороны мозгов сайта.
      Еще в QA иногда возникают вопросы про кеширование картинок, например.
      Зачем заниматься этой ерундой! — говорят опытные пользователи — OS лучше вас знает как кешировать файлы! С кешем и префетчем в современных OS, точнее FS, проблем нет! Зачем плодить свои кеши и списки популярных материалов и все такое?...

      Есть только одно вредное «но» — в среде исполнения nginx (в общем случае Linux) понятие "файл" и вообще «файловая система» — просто понятие.
      И однажды, когда я, подмонтировав сервер по sshfs, обновил один скриптик, случилось волшебное:
      1. На каждой страничке стало на 4 картинки больше.
      2. Сервера сдохли.

      Что поделать — картинки хранились на glusterFS. Наступил полный FUSE.
      Читать дальше →
    • Javascript-анимация элементов как в jQuery, только своими руками

      Часто при поиске ответа на вопрос, как сделать ту или иную до этого незнакомую вещь, программист знакомится с опытом коллег. И довольно часто у нас, во фронтенд-разработке, можно увидеть советы следующего содержания: мол, просто подключи ту или иную библиотеку, просто поставь тот или иной плагин, просто перепиши проект на Ангуляре (просто_на_Ангуляре ))) ), и не надо забивать себе голову посторонними вещами.

      Однако, иногда стоят действительно творческие задачи, и обычный копипаст не спасает демократию (честно говоря, он почти никогда не спасает). Об одном из таких случаев я и хочу рассказать уважаемой публике.
      Читать дальше →
    • Функциональное тестирование современных web-приложений


        Современные web-приложения зачастую содержат множество "движущихся частей" и сторонних зависимостей. В процессе рефакторинга и добавления/изменения функциональности в таком приложении может произойти поломка существующих use-case сценариев и нестабильная работа в определенных браузерах.


        Для своевременного обнаружения таких ситуаций и выполнения непрерывной интеграции необходимо функциональное тестирование web-приложения. В статье пойдет речь о двух бесплатных open-source решениях:


        Читать дальше →
      • Некоторые тонкости использования Service Workers



          Предисловие


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

          Однако большое количество статей про сервис-воркеры выглядят достаточно сжато и описывают простые примеры. Я попробую обратить внимание на некоторые особенности работы сервис-воркеров, так что требуются какие-то базовые знания. Отправной точкой может быть эта статья (перевод) или чуть более подробная статья.
          Читать дальше →
          • +24
          • 22.6k
          • 7
        • Нет – взломам серверов! Советы по проверке и защите

          • Translation
          Подозреваете, что Linux-сервер взломан? Уверены, что всё в порядке, но на всякий случай хотите повысить уровень безопасности? Если так – вот несколько простых советов, которые помогут проверить систему на предмет взлома и лучше её защитить.

          image

          Читать дальше →
        • Добавление аватара, обрезка фото на мобильном устройстве и десктопе на JavaScript и PHP

          Доброго времени суток! Разрабатывая сайт я подошел к тому, что мне необходимо добавить функцию добавления аватара для пользователей на десктопе и мобильных устройствах. Долго искал материалы, даже сначала решил добавить библиотеку с готовыми функциями, уже написанную кем-то (не помню как называлась статья, но она точно была на хабре и там были рассмотрены некоторые библиотеки). После тестирования этих подключенных библиотек я решил написать все на JavaScript и PHP (за исключением использования ajax для работы с php) при помощи HTML5. Для демонстрации я создал страницу для хабра: демо для habrahabr.
          Читать дальше →
        • Интересное в закладках UX/UI-дизайнера

          • Translation
          Какие мысли вас посещают, когда вы видите выдающиеся работы других людей? Наверняка, вы восхищаетесь ими, как и мы. Но что более важно, возможно, вам интересно, как люди этого добились, как пришли к успеху. Откуда они черпали свое вдохновение? Что они искали и просматривали в интернете? Давайте посмотрим, что интересного может быть в закладках у UI/UX-дизайнера.
          Читать дальше →
          • +7
          • 28.3k
          • 4
        • Как превратить смартфон в микрофон (идеи и вопросы)

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


            Зачем это нужно?


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

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

            Ниже я перечислю свои идеи, приведу их плюсы и минусы. Хотел бы услышать ваши комментарии о возможности их реализации.
            Читать дальше →
          • Slate – «серебряная пуля» для расположения окон на экранах OS X

            Привет, Хабр! Хочу поделиться очень интересным инструментом для «приручения» положения окон в OS X. Если кратко, то вот ссылка на репозиторий с замечательным приложением Slate. За подробностями, добро пожаловать под кат.

            image
            Читать дальше →
          • Список бесплатных транзакционных, хостинговых и маркетинговых email-провайдеров

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

            Существуют три вида почтовых услуг, которые могут пригодиться блоггеру или владельцу сайта:

            1. Транзакционные. Нужны для отправки писем о событиях, транзакциях, уведомлений о заказе, регистрационных данных и т.д.;

            2. Маркетинговые. Нужны при осуществлении новостной рассылки, проведении акций, обновлениях в блоге и т.д.;

            3. Хостинг почты. Нужен для получения и отправки электронных писем (потребуется, если вы пользуетесь виртуальными серверами, например, DigitalOcean, Linode и т.п.).

            image
            Читать дальше →
          • Хэширование паролей в PHP 5.5 с использованием нового API

            Использование BCrypt является общепринятым и лучшим способом для хэширования паролей, но большое количество разработчиков по-прежнему используют старые и слабые алгоритмы, вроде MD5 и SHA1. Некоторые разработчики даже не используют соль для хэширования. Новый API хэширования в PHP 5.5 ставит своей целью привлечь внимание к BCrypt, упрощая работу с ним. В этой статье я расскажу об основах использования нового API для хеширования в PHP.

            Новый API хэширования паролей предоставляет четыре простых функции:
            • password_hash() — используется для хэширования пароля.
            • password_verify() — используется для проверки пароля на соответствие хэшу.
            • password_needs_rehash() — используется для проверки необходимости создать новый хэш.
            • password_get_info() — возвращает имя алгоритма хеширования и различные параметры, используемые при хэшировании.

            Читать дальше →
          • Юнит-тестирование в PHP

              Язык PHP очень легок для изучения. Это, а так же обилие литературы «Освой _что_угодно_ за 24 часа» породило большое количество, мягко говоря, некачественного кода. Как следствие, рано или поздно любой программист, который выходит за рамки создания гостевой книги или сайта-визитки сталкивается с вопросом: «а если я здесь немножко добавлю, все остальное не ляжет?» Дать ответ на этот вопрос и на многие другие может юнит-тестирование.

              В самом начале хочется оговориться — здесь речь не будет идти о TDD и методологиях разработки ПО. В данной статье я попробую показать начинающему PHP-разработчику основы использования модульного тестирования на базе фреймворка PHPUnit
              Начнем?..
            • Двадцатка лучших веб-шрифтов

              • Translation
              Top 20 Fonts

              Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов


              Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.

              Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

              Читать дальше →
            • Паттерны React

              Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «React Patterns» Майкла Чана, с некоторыми моими примечаниями и дополнениями.

              Прежде всего хотел бы поблагодарить автора оригинального текста. В переводе я использовал понятие «Простой компонент» как обозначение Stateless Component aka Dump Component aka Component vs Container
              Конструктивная критика, а так же альтернативные паттерны и фичи React приветствуются в комментах.

              Оглавление
              • Простые компоненты — Stateless function
              • JSX распределение атрибутов — JSX Spread Attributes
              • Деструктуризация аргументов — Destructuring Arguments
              • Условный рендеринг — Conditional Rendering
              • Типы потомков — Children Types
              • Массив как потомок — Array as children
              • Функция как потомок — Function as children
              • Функция в render — Render callback
              • Проход по потомкам — Children pass-through
              • Перенаправление компонента — Proxy component
              • Стилизация компонентов — Style component
              • Переключатель событий — Event switch
              • Компонент-макет — Layout component
              • Компонент-контейнер — Container component
              • Компоненты высшего порядка — Higher-order component

              Поехали!
              Читать дальше →
            • Redux Action Creators. Без констант и головной боли


                Всем привет! Эта статья будет полезна тем, кто устал использовать constants в Redux (частично показано на превью выше). Под катом я покажу очередной возможный велосипед и как на нем кататься.


                Читать дальше →
              • Руководство по работе с Redux

                • Translation
                • Tutorial
                Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

                В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!
                Читать дальше →