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

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

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

(С)

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

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

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

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

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

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

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

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

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

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

Подробности под катом

Жизнь была прекрасна и все было в этом мире хорошо, пока почта с моего сайта не стала активно посылаться в спам практически всеми крупными почтовыми серверами. Особенно усердствовал в этом Gmail. Частенько меня принимали за спамера в Yandex, реже в mail.ru и rambler.

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

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

Зачем заниматься этой ерундой! — говорят опытные пользователи — OS лучше вас знает как кешировать файлы! С кешем и префетчем в современных OS, точнее FS, проблем нет! Зачем плодить свои кеши и списки популярных материалов и все такое?...

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

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

Однако, иногда стоят действительно творческие задачи, и обычный копипаст не спасает демократию (честно говоря, он почти никогда не спасает). Об одном из таких случаев я и хочу рассказать уважаемой публике.

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

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

• https://devexpress.github.io/testcafe/
• http://nightwatchjs.org/
  

Предисловие

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

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

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

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

Какие мысли вас посещают, когда вы видите выдающиеся работы других людей? Наверняка, вы восхищаетесь ими, как и мы. Но что более важно, возможно, вам интересно, как люди этого добились, как пришли к успеху. Откуда они черпали свое вдохновение? Что они искали и просматривали в интернете? Давайте посмотрим, что интересного может быть в закладках у UI/UX-дизайнера.

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

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

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

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

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

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

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

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

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

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

Новый API хэширования паролей предоставляет четыре простых функции:

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

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

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

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

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

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

Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «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

Поехали!

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

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

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