Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

CSS селекторы в юникоде

Думою, что ни для кого не будет новостью, что все современные браузеры работают с юникодом. Это касается не только текста, на странице, но и использование специальных символов для классов и id элементов. В принципе все что угодно может быть использовано кроме, пожалуй пробелов, которые действительно представляют проблему. Зайти можно достаточно далеко ^_^ Есть

Квадратные элементы в адаптивной верстке

Представим себе задачку: На странице картинки располагаются по две в ряд Все картинки адаптивны, то есть должны тянуться вместе с экраном Картинки должны быть квадратными. Картинка должна занимать максимальное пространство, т.е. растягиваться в своем контейнере по короткой стороне Минута на размышление пошла ^_^ Если бы элементы просто должны быть адаптивны и выстраиваться по два в ряд, то проблем нет. Решение

Как проверить совместимость функционала в разных браузерах

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

Как включить display: block и none в анимацию

Я думаю, что все уже успели попробовать css3 анимацию. Если нет, то закройте этот пост и идите пробуйте. Очень удобно, симпатично (дизайнеры радуются, вам плюсы в карму и в зарплату) и главное просто в применении. Наверное, все мы начали использовать анимацию по старой привычке, привитой ещё jQuery, со свойства dispay: none. Однако, быстро поняли, что

Избегайте position: fixed в мобильной разработке

Если вы много разрабатывали для обычных браузеров, то position: fixed было очень удобным стилем элемента. Что может быть лучше чем одной строкой прилепить менюшку к верхней или нижней границе окна? Не один сайт так был сделан и не один менеджер удовлетворён ^_^ Однако, не все так просто в мобильной разработке. Тут нужно быть внимательным, осторожным

Антипод современной css разметки – или почему не стоит забывать про display:table

Не так давно я наткнулся на интересную статью об использовании display:table. На сегодняшний день все усиленно стараются решить все вопросы верстки переставляя местами position, float, top, left, bottom, right и z-index. Ничего плохого в этих свойствах разумеется нет, однако не все ими решается легко и непринужденно. Для примера подумаем вот над такой задачей: “У вас

Текстовый редактор на html – contenteditable

Одно из весьма интересных и вместе с тем мало используемых атрибутов html – это contenteditable. По сути он практически любой тег превращает в редактируемый input. Если вы с ним еще ни разу не сталкивались, то может сложиться впечатление, что это достаточно новый функционал. Однако это не так. Этот атрибут поддерживается начиная с 8-го эксплорера! Contenteditable

Поле с числовым паролем и номерной клавиатурой – смартфон

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

Как далеко можно уйти с событиями CSS – CSS Events

Я думаю, что всем известно, что CSS позволяет реагировать на разного рода события – hover, focus, active – все это псевдо классы, которые достаточно активно используются в клиентской разработке. Однако на этом дело не заканчивается ^_^ Отлавливая события CSS можно делать совершенно невероятные вещи. Например игру, по отстрелу пернатых (Возможно потребуется немного времени для прогрузки

Проблема background-position и background-position-x

Хорошей практикой считается использовать спрайты для отображения иконок. Под спрайтами я подразумеваю аггрегирование всех иконок / картинок в одном файле и отображение их через background: url() Когда для каждой иконки меняется позиция background по осям X и Y. Однако, не все браузеры одинаково работают со всеми настройками позиционирования. Для качественной работы стоит использовать background-position: