Pull to refresh
2
0
Send message

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

Reading time 10 min
Views 26K

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


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


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


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

Читать дальше →
Total votes 26: ↑26 and ↓0 +26
Comments 20

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

Reading time 11 min
Views 47K

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


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


Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Comments 5

Тестирование в React

Reading time 14 min
Views 43K
image

Каждый JS-разработчик рано или поздно начинает писать тесты и сожалеть, что не стал делать этого раньше. Поскольку за последние пару лет все постепенно перешли к компонентной разработке на основе React, Angular или, например, Vue, это дало очередной толчок для популяризации тестирования, так как компоненты обычно малы и тестировать их гораздо проще. В данной статье мы рассмотрим компонентное тестирование в React.
Читать дальше →
Total votes 27: ↑27 and ↓0 +27
Comments 10

По-настоящему адаптивные письма. Часть… снова первая

Reading time 9 min
Views 27K


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

К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.
Читать дальше →
Total votes 30: ↑25 and ↓5 +20
Comments 25

Создаём отзывчивые письма для будущего без медиа-запросов

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

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

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

Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.
Читать дальше →
Total votes 17: ↑16 and ↓1 +15
Comments 7

Сравнение сервисов приема интернет-платежей для ИП

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

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

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

Итак, герои сегодняшнего обзора: WebMoney, Яндекс.Касса, PayPal, Единая Касса (Wallet One), RBKMoney, PayMaster, РобоКасса, QIWI
Читать дальше →
Total votes 29: ↑27 and ↓2 +25
Comments 34

Как создать веб-сайт, используя видео с YouTube в качестве фона?

Reading time 9 min
Views 86K


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

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

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

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

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

Скачать исходники
Демо
Читать дальше →
Total votes 75: ↑45 and ↓30 +15
Comments 55

NodeSchool — интерактивные уроки по Node.Js

Reading time 1 min
Views 38K
image

Все мы знаем теоретический курс по node.js, недавно выпущенный Ильей Кантором. Отличный материал, свежий, полный и к тому же на русском. Но он теоретический, а нам-то хочется все потрогать, попробовать самим, получая реальный опыт. В этом нам поможет, недавно стартовавший, бесплатный проект NodeSchool.
Читать дальше →
Total votes 52: ↑43 and ↓9 +34
Comments 5

Несколько полезностей по работе с NPM

Reading time 2 min
Views 90K
image

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

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


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

Какие варианты еще есть?
Читать дальше →
Total votes 96: ↑84 and ↓12 +72
Comments 12

250 строк кода, распознающих дату на русском языке

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



Пример и код в jsFiddle.
Читать дальше →
Total votes 120: ↑115 and ↓5 +110
Comments 77

Идеальный css-framework. Maxmertkit widget manager – build your own framework

Reading time 10 min
Views 12K
image

Добрый день!
Как и обещал некоторое время назад, я выпустил бету maxmertkit widget manager. Я давно хотел npm или gem, но для css. Добавил несколько зависимостей в json-файл, набрал команду и все установилось. Это быстро и удобно. Хороших решений я не нашел, значит пора реализовать свое. Пока не начал, ссылки на статьи о том, с чего все начиналось – первая и вторая статьи. Можно не читать, кратко я все перескажу здесь. Можно сразу зайти на портал и разобраться что к чему, а также посмотреть видео – www.maxmertkit.com.
Читать дальше →
Total votes 27: ↑23 and ↓4 +19
Comments 13

AutoclassCSS — быстрый каркас на основе HTML

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

Попробовать в действии можно на демонстрационной страничке, оформление настраивается по вкусу.
Читать дальше →
Total votes 35: ↑29 and ↓6 +23
Comments 58

Оформление кода, оптимизация процесса проверки качества кода

Reading time 5 min
Views 36K

JavaScript, the winning style



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

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

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



Помимо гайдов, не стоит так же забывать об автоматических анализаторах кода, таких, например, как JSLint и JSHint. И в них уже заложены свои настройки. Вопрос в том, какой же все-таки максимально правильный способ писать код на JavaScript, который был бы актуален и максимально соответствовал бы большинству рекомендаций? Давайте попробуем объединить большинство рекомендаций в этой статье и подумаем как можно оптимизировать процесс проверки качества кода.
Читать дальше →
Total votes 59: ↑54 and ↓5 +49
Comments 61

Необычная навигация на сайтах

Reading time 4 min
Views 39K
Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox


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

Читать дальше →
Total votes 42: ↑31 and ↓11 +20
Comments 12

Фотографии рабочих мест хабражителей и…

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

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

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

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

PS: Бонус для владельцев ноутбуков — подключаем 2 монитора.
Читать дальше →
Total votes 286: ↑210 and ↓76 +134
Comments 676

Использование паттернов проектирования в javaScript: Порождающие паттерны

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

В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.
Читать дальше →
Total votes 60: ↑45 and ↓15 +30
Comments 30

Автоматизируем генерацию @font-face kit'ов из консоли

Reading time 2 min
Views 7.2K
Если вы когда либо задумывались, можно ли как то автоматизировать генерацию шрифтов для вэба или вам надоело заходить на Font Squirrel каждый раз, то, как говорится, добро пожаловать под кат.
Читать дальше →
Total votes 19: ↑19 and ↓0 +19
Comments 15

Пять клавиатур для Android

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


Обзор пяти клавиатур для ОС Android
Total votes 37: ↑24 and ↓13 +11
Comments 77

От JQuery до Backbone

Reading time 23 min
Views 28K
imageВ данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.
Читать дальше →
Total votes 90: ↑80 and ↓10 +70
Comments 43

JavaScript паттерны… для чайников

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

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

Читать дальше →
Total votes 118: ↑108 and ↓10 +98
Comments 46
1

Information

Rating
Does not participate
Location
Канада
Registered
Activity