• Вы не знаете как должны работать модальные окна

      Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?


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


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


      Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

      Читать дальше →
    • Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

      • Tutorial

      Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


      В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


      Читать дальше →
      • +20
      • 18,9k
      • 5
    • Тестирование в React

      image

      Каждый JS-разработчик рано или поздно начинает писать тесты и сожалеть, что не стал делать этого раньше. Поскольку за последние пару лет все постепенно перешли к компонентной разработке на основе React, Angular или, например, Vue, это дало очередной толчок для популяризации тестирования, так как компоненты обычно малы и тестировать их гораздо проще. В данной статье мы рассмотрим компонентное тестирование в React.
      Читать дальше →
    • По-настоящему адаптивные письма. Часть… снова первая



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

        К чему мы приходим:
        — Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
        — Улучшение семантики через именование классов и сокращение участков кода
        — Частичная поддержка the Bat! Хотя Николь на него забила.
        — Полная поддержка всех мобильных почтовых клиентов
        — Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.
        Читать дальше →
      • Создаём отзывчивые письма для будущего без медиа-запросов

        • Перевод
        • Tutorial
        Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю. Поддержка media query как и сам CSS разнятся среди приложений, в следствии этого, каждый раз когда вы слышите что появилось новое восхитительное почтовое приложение, для которого тоже нужно провести тесты, вас неизбежно одолевает страх.

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

        Приведенный ниже метод, сторонником которого я являюсь, всецело ориентирован на создание положительного опыта взаимодействия при работе с email-клиентами, у которых вообще отсутствует поддержка media query.

        Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.
        Читать дальше →
        • +15
        • 29,6k
        • 7
      • Сравнение сервисов приема интернет-платежей для ИП

          Ранее я опубликовал две статьи (1, 2) о способах приема платежей на сайте. В предыдущих статьях было одно условие — подключение к платежным системам производилось как физическое лицо. Теперь я решил выйти из сумрака делать все максимально честно, и хочу рассказать о способах подключения к платежным системам в качестве ИП и легального вывода заработанного на расчетный счет в банке.

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

          В общем случае, чтобы подключить прием платежей, нужно обменяться договором с платежной системой, так что на быстрое подключение рассчитывать не приходиться. Плюс — этот договор должны вручную обработать, так что если не учитывать время, затраченное на пересылку документов Почтой России, то подключение занимает от трех дней. Пакет документов у всех примерно одинаковый, но иногда может потребоваться заверенная у нотариуса копия какого-то документа или, например, свежая выписка из ЕГРИПа.

          Итак, герои сегодняшнего обзора: WebMoney, Яндекс.Касса, PayPal, Единая Касса (Wallet One), RBKMoney, PayMaster, РобоКасса, QIWI
          Читать дальше →
        • Как создать веб-сайт, используя видео с YouTube в качестве фона?

          • Перевод


          Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.

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

          Существуют компании, как, например, Powerhouse или Adidas, которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.

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

          В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

          Скачать исходники
          Демо
          Читать дальше →
        • NodeSchool — интерактивные уроки по Node.Js

            image

            Все мы знаем теоретический курс по node.js, недавно выпущенный Ильей Кантором. Отличный материал, свежий, полный и к тому же на русском. Но он теоретический, а нам-то хочется все потрогать, попробовать самим, получая реальный опыт. В этом нам поможет, недавно стартовавший, бесплатный проект NodeSchool.
            Читать дальше →
            • +34
            • 37,8k
            • 5
          • Несколько полезностей по работе с NPM

            image

            NPM — пакетный менеджер для node.js, аналог GEM в RoR. В статье несколько советов по его использованию.

            Установка пакетов


            Все знают
            # Устанавливает пакет express
            npm install express
            

            Какие варианты еще есть?
            Читать дальше →
          • 250 строк кода, распознающих дату на русском языке

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



              Пример и код в jsFiddle.
              Читать дальше →
            • Идеальный css-framework. Maxmertkit widget manager – build your own framework

                image

                Добрый день!
                Как и обещал некоторое время назад, я выпустил бету maxmertkit widget manager. Я давно хотел npm или gem, но для css. Добавил несколько зависимостей в json-файл, набрал команду и все установилось. Это быстро и удобно. Хороших решений я не нашел, значит пора реализовать свое. Пока не начал, ссылки на статьи о том, с чего все начиналось – первая и вторая статьи. Можно не читать, кратко я все перескажу здесь. Можно сразу зайти на портал и разобраться что к чему, а также посмотреть видео – www.maxmertkit.com.
                Читать дальше →
              • AutoclassCSS — быстрый каркас на основе HTML

                  image
                  Генератор будет полезен для тех, кто верстает статические страницы.
                  Инструмент написан на JavaScript, и, следуя методологии БЭМ, каркас формируется только на основе классов.
                  Работает просто: на вход получает HTML, на выходе отдаёт CSS.

                  Попробовать в действии можно на демонстрационной страничке, оформление настраивается по вкусу.
                  Читать дальше →
                • Оформление кода, оптимизация процесса проверки качества кода

                  • Перевод

                  JavaScript, the winning style



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

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

                  В отличие от Питона у которого есть единый свод правил «Style Guide for Python Code», у языка JavaScript такого нет. Однако на выбор есть целых 6 популярных гайдов:



                  Помимо гайдов, не стоит так же забывать об автоматических анализаторах кода, таких, например, как JSLint и JSHint. И в них уже заложены свои настройки. Вопрос в том, какой же все-таки максимально правильный способ писать код на JavaScript, который был бы актуален и максимально соответствовал бы большинству рекомендаций? Давайте попробуем объединить большинство рекомендаций в этой статье и подумаем как можно оптимизировать процесс проверки качества кода.
                  Читать дальше →
                • Необычная навигация на сайтах

                  • Перевод
                  Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

                  Toybox


                  Навигация на сайте всегда должна быть под рукой, но в то же время не мешать пользователю. На сайте Toybox именно такое решение: навигация проста, но в тоже время хорошо заметна. Когда панель меню скрыта, страница акцентирует внимание посетителя на контенте, т.к. отсутствуют отвлекающие блоки. Горизонтальная навигация также проста и удобна.

                  Читать дальше →
                • Фотографии рабочих мест хабражителей и…

                    image
                    Хабражители редко ходят друг к другу в гости. И, в то же самое время, хотят взглянуть на то, как устроились другие. Может быть, даже, позаимствовать разные интересности.

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

                    По возможности, описываем:
                    1. 7 любимых гаджетов.
                    2. 7 ежедневных программ.
                    3. 7 интересных открытий, которыми вы часто пользуетесь.

                    Приоткройте занавесу тайны в своей обители.

                    PS: Бонус для владельцев ноутбуков — подключаем 2 монитора.
                    Читать дальше →
                  • Использование паттернов проектирования в javaScript: Порождающие паттерны

                    Привет, хабр!
                    С удивлением обнаружил отсутствие на хабре развернутой статьи о сабже, что немедленно сподвигло меня исправить эту вопиющую несправедливость.

                    В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
                    Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.
                    Читать дальше →
                  • Автоматизируем генерацию @font-face kit'ов из консоли

                      Если вы когда либо задумывались, можно ли как то автоматизировать генерацию шрифтов для вэба или вам надоело заходить на Font Squirrel каждый раз, то, как говорится, добро пожаловать под кат.
                      Читать дальше →
                    • Пять клавиатур для Android

                        Приветствуем вас, Хабралюди! Мы в Meizu считаем, что если у смартфона есть какие-то слабые места, нужно говорить о них открыто и предлагать адекватные решения проблем, а не прятаться за шаблонными фразами «наше решение удовлетворяет большинство пользователей». Поэтому сегодня я хочу поговорить про одно из слабых мест Flyme OS – экранную клавиатуру. К сожалению, она имеет минимум настроек и вряд ли подойдет для использования, если вы привыкли часто набирать на смартфоне текст, переписываться посредством SMS, WhatsApp, imo,im и так далее. К счастью, Android позволяет изменить практически любой пункт меню или интерфейса, а также заменить большинство стандартных программ на более удобные аналоги. Эта статья будет посвящена пяти качественным и удобным (на мой субъективный взгляд) сторонним клавиатурам для Android, которыми можно заменить встроенную на вашем смартфоне.


                        Обзор пяти клавиатур для ОС Android
                      • От JQuery до Backbone

                        imageВ данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.
                        Читать дальше →
                      • JavaScript паттерны… для чайников

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

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

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