Как стать автором
Обновить
2
0

Пользователь

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

Время на прочтение 10 мин
Количество просмотров 26K

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


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


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


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

Читать дальше →
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 20

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

Время на прочтение 11 мин
Количество просмотров 46K

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


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


Читать дальше →
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 5

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

Время на прочтение 14 мин
Количество просмотров 43K
image

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

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

Время на прочтение 9 мин
Количество просмотров 27K


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

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

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

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

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

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

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

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

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

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

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

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

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

Время на прочтение 9 мин
Количество просмотров 86K


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

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

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

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

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

Скачать исходники
Демо
Читать дальше →
Всего голосов 75: ↑45 и ↓30 +15
Комментарии 55

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

Время на прочтение 1 мин
Количество просмотров 38K
image

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

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

Время на прочтение 2 мин
Количество просмотров 90K
image

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

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


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

Какие варианты еще есть?
Читать дальше →
Всего голосов 96: ↑84 и ↓12 +72
Комментарии 12

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

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



Пример и код в jsFiddle.
Читать дальше →
Всего голосов 120: ↑115 и ↓5 +110
Комментарии 77

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

Время на прочтение 10 мин
Количество просмотров 12K
image

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

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

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

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

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

Время на прочтение 5 мин
Количество просмотров 36K

JavaScript, the winning style



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

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

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



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

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

Время на прочтение 4 мин
Количество просмотров 39K
Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox


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

Читать дальше →
Всего голосов 42: ↑31 и ↓11 +20
Комментарии 12

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

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

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

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

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

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

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

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

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

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

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

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

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


Обзор пяти клавиатур для ОС Android
Всего голосов 37: ↑24 и ↓13 +11
Комментарии 77

От JQuery до Backbone

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

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

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

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

Читать дальше →
Всего голосов 118: ↑108 и ↓10 +98
Комментарии 46
1

Информация

В рейтинге
Не участвует
Откуда
Канада
Зарегистрирован
Активность